From d62e722e701c401e7bbee162604b8d071a7bfa0d Mon Sep 17 00:00:00 2001 From: Paul Kristoffersson Date: Sun, 24 Sep 2023 12:08:39 +0200 Subject: [PATCH 01/10] [TablePagination][material-ui] Remove type error props in SelectProp --- .../src/TablePagination/TablePagination.d.ts | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/packages/mui-material/src/TablePagination/TablePagination.d.ts b/packages/mui-material/src/TablePagination/TablePagination.d.ts index 1a2dd50a751b46..fe8cfc9a96a936 100644 --- a/packages/mui-material/src/TablePagination/TablePagination.d.ts +++ b/packages/mui-material/src/TablePagination/TablePagination.d.ts @@ -156,8 +156,18 @@ export interface TablePaginationOwnProps extends TablePaginationBaseProps { sx?: SxProps; } +type SelectVariant = 'filled' | 'standard' | 'outlined'; + +export type SelectPropsByVariant = + Variant extends 'filled' + ? TablePaginationOwnProps + : Variant extends 'standard' + ? TablePaginationOwnProps + : TablePaginationOwnProps; + + export interface TablePaginationTypeMap { - props: AdditionalProps & TablePaginationOwnProps; + props: AdditionalProps & SelectPropsByVariant; defaultComponent: RootComponent; } @@ -175,12 +185,12 @@ export interface TablePaginationTypeMap> + TablePaginationTypeMap<{}, React.JSXElementConstructor> >; export type TablePaginationProps< - RootComponent extends React.ElementType = React.JSXElementConstructor, - AdditionalProps = {}, + RootComponent extends React.ElementType = React.JSXElementConstructor, + AdditionalProps = {}, > = OverrideProps, RootComponent> & { component?: React.ElementType; }; From c045a78b59a607e9019704c1d061b4268bc53480 Mon Sep 17 00:00:00 2001 From: Paul Kristoffersson Date: Tue, 26 Sep 2023 14:00:43 +0200 Subject: [PATCH 02/10] further work, no error on types --- .../src/TablePagination/TablePagination.d.ts | 33 +++++++++++-------- 1 file changed, 20 insertions(+), 13 deletions(-) diff --git a/packages/mui-material/src/TablePagination/TablePagination.d.ts b/packages/mui-material/src/TablePagination/TablePagination.d.ts index fe8cfc9a96a936..1c30c8a8c536c5 100644 --- a/packages/mui-material/src/TablePagination/TablePagination.d.ts +++ b/packages/mui-material/src/TablePagination/TablePagination.d.ts @@ -155,19 +155,19 @@ export interface TablePaginationOwnProps extends TablePaginationBaseProps { */ sx?: SxProps; } - type SelectVariant = 'filled' | 'standard' | 'outlined'; +/** export type SelectPropsByVariant = - Variant extends 'filled' - ? TablePaginationOwnProps - : Variant extends 'standard' - ? TablePaginationOwnProps - : TablePaginationOwnProps; - + Variant extends 'filled' + ? TablePaginationOwnProps + : Variant extends 'standard' + ? TablePaginationOwnProps + : TablePaginationOwnProps; +**/ export interface TablePaginationTypeMap { - props: AdditionalProps & SelectPropsByVariant; + props: AdditionalProps & { SelectProps: { variant: SelectVariant } }; defaultComponent: RootComponent; } @@ -184,15 +184,22 @@ export interface TablePaginationTypeMap> ->; + +declare const TablePagination: < + AdditionalProps = {}, + RootComponent extends React.ElementType = React.JSXElementConstructor, + Variant extends SelectVariant = SelectVariant +>( + props: TablePaginationProps & { variant?: Variant } +) => JSX.Element; export type TablePaginationProps< - RootComponent extends React.ElementType = React.JSXElementConstructor, - AdditionalProps = {}, + AdditionalProps = {}, + RootComponent extends React.ElementType = React.JSXElementConstructor, + Variant extends SelectVariant = SelectVariant > = OverrideProps, RootComponent> & { component?: React.ElementType; + variant?: Variant; }; export default TablePagination; From 06fe8a6f483b118e1c2da3e8b4b69fc0b0a968ae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Paul=20Bl=C3=A5berg=20Kristoffersson?= Date: Tue, 3 Oct 2023 16:00:44 +0200 Subject: [PATCH 03/10] type error is removed --- .../src/TablePagination/TablePagination.d.ts | 50 +++++++++++-------- 1 file changed, 28 insertions(+), 22 deletions(-) diff --git a/packages/mui-material/src/TablePagination/TablePagination.d.ts b/packages/mui-material/src/TablePagination/TablePagination.d.ts index 1c30c8a8c536c5..96ba61a055d419 100644 --- a/packages/mui-material/src/TablePagination/TablePagination.d.ts +++ b/packages/mui-material/src/TablePagination/TablePagination.d.ts @@ -1,5 +1,8 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; +import { FilledInputProps } from '@mui/material/FilledInput'; +import { OutlinedInputProps } from '@mui/material/OutlinedInput'; +import { InputProps as StandardInputProps } from '../Input'; import { Theme } from '../styles'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; import { TablePaginationActionsProps } from './TablePaginationActions'; @@ -18,7 +21,10 @@ export interface LabelDisplayedRowsArgs { /** * This type is kept for compatibility. Use `TablePaginationOwnProps` instead. */ -export type TablePaginationBaseProps = Omit; +export type TablePaginationBaseProps = Omit< + TableCellProps, + 'classes' | 'component' | 'children' | 'variant' +>; export interface TablePaginationOwnProps extends TablePaginationBaseProps { /** @@ -123,7 +129,7 @@ export interface TablePaginationOwnProps extends TablePaginationBaseProps { * * @default {} */ - SelectProps?: Partial; + SelectProps?: SelectPropsVariant; /** * If `true`, show the first-page button. * @default false @@ -155,19 +161,25 @@ export interface TablePaginationOwnProps extends TablePaginationBaseProps { */ sx?: SxProps; } -type SelectVariant = 'filled' | 'standard' | 'outlined'; -/** -export type SelectPropsByVariant = - Variant extends 'filled' - ? TablePaginationOwnProps - : Variant extends 'standard' - ? TablePaginationOwnProps - : TablePaginationOwnProps; -**/ +type TablePaginationVariants = 'filled' | 'standard' | 'outlined'; + +type SelectInputProps = Variant extends 'filled' + ? Partial + : Variant extends 'standard' + ? Partial + : Partial; + +export interface SelectPropsVariant< + Variant extends TablePaginationVariants = TablePaginationVariants, +> extends Partial { + variant?: Variant; + InputProps?: SelectInputProps; + // ... (other variant-specific props) +} export interface TablePaginationTypeMap { - props: AdditionalProps & { SelectProps: { variant: SelectVariant } }; + props: AdditionalProps & TablePaginationOwnProps; defaultComponent: RootComponent; } @@ -185,21 +197,15 @@ export interface TablePaginationTypeMap, - Variant extends SelectVariant = SelectVariant ->( - props: TablePaginationProps & { variant?: Variant } -) => JSX.Element; +declare const TablePagination: OverridableComponent< + TablePaginationTypeMap<{}, React.JSXElementConstructor> +>; export type TablePaginationProps< - AdditionalProps = {}, RootComponent extends React.ElementType = React.JSXElementConstructor, - Variant extends SelectVariant = SelectVariant + AdditionalProps = {}, > = OverrideProps, RootComponent> & { component?: React.ElementType; - variant?: Variant; }; export default TablePagination; From 36bb91545f6759cb4de1b2e98ddf572046521a63 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Paul=20Bl=C3=A5berg=20Kristoffersson?= Date: Tue, 5 Dec 2023 13:37:01 +0100 Subject: [PATCH 04/10] moved changes, extend SelectProps with inputProps --- .../src/TablePagination/TablePagination.d.ts | 24 +++++++------------ 1 file changed, 9 insertions(+), 15 deletions(-) diff --git a/packages/mui-material/src/TablePagination/TablePagination.d.ts b/packages/mui-material/src/TablePagination/TablePagination.d.ts index 96ba61a055d419..6af64a236008d5 100644 --- a/packages/mui-material/src/TablePagination/TablePagination.d.ts +++ b/packages/mui-material/src/TablePagination/TablePagination.d.ts @@ -129,7 +129,7 @@ export interface TablePaginationOwnProps extends TablePaginationBaseProps { * * @default {} */ - SelectProps?: SelectPropsVariant; + SelectProps?: Partial; /** * If `true`, show the first-page button. * @default false @@ -146,7 +146,7 @@ export interface TablePaginationOwnProps extends TablePaginationBaseProps { */ slotProps?: { actions?: TablePaginationActionsProps['slotProps']; - select?: Partial; + select?: SelectPropsVariant; }; /** * The components used for each slot inside the TablePagination. @@ -164,19 +164,13 @@ export interface TablePaginationOwnProps extends TablePaginationBaseProps { type TablePaginationVariants = 'filled' | 'standard' | 'outlined'; -type SelectInputProps = Variant extends 'filled' - ? Partial - : Variant extends 'standard' - ? Partial - : Partial; - -export interface SelectPropsVariant< - Variant extends TablePaginationVariants = TablePaginationVariants, -> extends Partial { - variant?: Variant; - InputProps?: SelectInputProps; - // ... (other variant-specific props) -} +// Extend SelectProps based on the variant +type SelectPropsVariant = Partial & + (Variant extends 'filled' + ? Partial + : Variant extends 'standard' + ? Partial + : Partial); export interface TablePaginationTypeMap { props: AdditionalProps & TablePaginationOwnProps; From 8e7ca988be35c336295e95825e2eed02736056a3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Paul=20Bl=C3=A5berg=20Kristoffersson?= Date: Thu, 7 Dec 2023 15:36:31 +0100 Subject: [PATCH 05/10] added test --- .../TablePagination/TablePagination.test.js | 24 +++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/packages/mui-material/src/TablePagination/TablePagination.test.js b/packages/mui-material/src/TablePagination/TablePagination.test.js index 975ecaa6c83a31..438cd1ae025e99 100644 --- a/packages/mui-material/src/TablePagination/TablePagination.test.js +++ b/packages/mui-material/src/TablePagination/TablePagination.test.js @@ -832,4 +832,28 @@ describe('', () => { expect(combobox.parentElement).not.to.have.attribute('variant'); }); + + it('should not raise a warning for hiddenLabel when the variant is filled', () => { + expect(() => { + PropTypes.checkPropTypes( + TablePagination.propTypes, + { + // Other required props + count: 10, + page: 0, + rowsPerPage: 10, + onPageChange: () => {}, + // Additional props for the test + slotProps: { + select: { + variant: 'filled', + hiddenLabel: true, + }, + }, + }, + 'prop', + 'MockedTablePagination', + ); + }).not.toErrorDev(); + }); }); From 1b031bf1fa92589f3866c4156c0ed337ab2e10ae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Paul=20Bl=C3=A5berg=20Kristoffersson?= Date: Mon, 11 Dec 2023 16:18:56 +0100 Subject: [PATCH 06/10] type error fixed in Select.d.ts file --- packages/mui-material/src/Select/Select.d.ts | 57 ++++++++++++++++--- .../mui-material/src/Select/Select.spec.tsx | 2 +- .../src/TablePagination/TablePagination.d.ts | 15 +---- .../TablePagination/TablePagination.test.js | 24 -------- 4 files changed, 52 insertions(+), 46 deletions(-) diff --git a/packages/mui-material/src/Select/Select.d.ts b/packages/mui-material/src/Select/Select.d.ts index 836bb7666d0dcf..e4cb507cf21000 100644 --- a/packages/mui-material/src/Select/Select.d.ts +++ b/packages/mui-material/src/Select/Select.d.ts @@ -6,12 +6,11 @@ import { MenuProps } from '../Menu'; import { SelectChangeEvent, SelectInputProps } from './SelectInput'; import { SelectClasses } from './selectClasses'; import { OutlinedInputProps } from '../OutlinedInput'; +import { FilledInputProps } from '../FilledInput'; export { SelectChangeEvent }; -export interface SelectProps - extends StandardProps, - Omit { +export interface BaseSelectProps { /** * If `true`, the width of the popover will automatically be set according to the items inside the * menu, otherwise it will be at least the width of the select input. @@ -148,9 +147,46 @@ export interface SelectProps * The variant to use. * @default 'outlined' */ - variant?: 'standard' | 'outlined' | 'filled'; + variant?: 'filled' | 'standard' | 'outlined'; } +export interface FilledSelectProps extends StandardProps { + /** + * The variant to use. + * @default 'outlined' + */ + variant: 'filled'; +} + +export interface StandardSelectProps extends StandardProps { + /** + * The variant to use. + * @default 'outlined' + */ + variant: 'standard'; +} + +export interface OutlinedSelectProps + extends StandardProps { + /** + * The variant to use. + * @default 'outlined' + */ + variant: 'outlined'; +} + +export type SelectVariants = 'outlined' | 'standard' | 'filled'; + +export type SelectProps< + Value = unknown, + Variant extends SelectVariants = 'outlined', +> = BaseSelectProps & + (Variant extends 'filled' + ? FilledSelectProps + : Variant extends 'standard' + ? StandardSelectProps + : OutlinedSelectProps); + /** * * Demos: @@ -162,8 +198,15 @@ export interface SelectProps * - [Select API](https://mui.com/material-ui/api/select/) * - inherits [OutlinedInput API](https://mui.com/material-ui/api/outlined-input/) */ -declare const Select: ((props: SelectProps) => JSX.Element) & { + +export default function Select( + props: { + /** + * The variant to use. + * @default 'outlined' + */ + variant?: Variant; + } & Omit, 'variant'>, +): JSX.Element & { muiName: string; }; - -export default Select; diff --git a/packages/mui-material/src/Select/Select.spec.tsx b/packages/mui-material/src/Select/Select.spec.tsx index 25283d8a874054..774b0da424bf9b 100644 --- a/packages/mui-material/src/Select/Select.spec.tsx +++ b/packages/mui-material/src/Select/Select.spec.tsx @@ -44,7 +44,7 @@ function genericValueTest() { ; + ; // disabledUnderline prop should be available (inherited from InputProps) and NOT throw typescript error - ; // Tests presence of `root` class in SelectClasses const theme = createTheme({ From d6f55afb64bd22037bcb76951e6a6bb1356273ae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Paul=20Bl=C3=A5berg=20Kristoffersson?= Date: Fri, 15 Dec 2023 16:33:37 +0100 Subject: [PATCH 08/10] added custom value type to multipleselect --- docs/data/material/components/selects/MultipleSelectNative.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/data/material/components/selects/MultipleSelectNative.tsx b/docs/data/material/components/selects/MultipleSelectNative.tsx index 3f18c7d3fa71a3..6960536ac9cbe6 100644 --- a/docs/data/material/components/selects/MultipleSelectNative.tsx +++ b/docs/data/material/components/selects/MultipleSelectNative.tsx @@ -35,7 +35,7 @@ export default function MultipleSelectNative() { Native -