diff --git a/packages/mui-material/src/Select/Select.d.ts b/packages/mui-material/src/Select/Select.d.ts index cbf55494ba697f..c39944e1e0ded8 100644 --- a/packages/mui-material/src/Select/Select.d.ts +++ b/packages/mui-material/src/Select/Select.d.ts @@ -148,7 +148,7 @@ export interface BaseSelectProps * The variant to use. * @default 'outlined' */ - variant?: 'filled' | 'standard' | 'outlined'; + variant?: SelectVariants; } export interface FilledSelectProps extends Omit { @@ -172,20 +172,15 @@ export interface OutlinedSelectProps extends Omit = BaseSelectProps & - (Variant extends 'filled' - ? FilledSelectProps - : Variant extends 'standard' - ? StandardSelectProps - : OutlinedSelectProps); +export type SelectProps = + | (FilledSelectProps & BaseSelectProps) + | (StandardSelectProps & BaseSelectProps) + | (OutlinedSelectProps & BaseSelectProps); /** * @@ -198,15 +193,8 @@ export type SelectProps< * - [Select API](https://mui.com/material-ui/api/select/) * - inherits [OutlinedInput API](https://mui.com/material-ui/api/outlined-input/) */ - -export default function Select( - props: { - /** - * The variant to use. - * @default 'outlined' - */ - variant?: Variant; - } & Omit, 'variant'>, +export default function Select( + props: SelectProps, ): JSX.Element & { muiName: string; }; diff --git a/packages/mui-material/src/Select/Select.spec.tsx b/packages/mui-material/src/Select/Select.spec.tsx index 25283d8a874054..78f69c76c606d0 100644 --- a/packages/mui-material/src/Select/Select.spec.tsx +++ b/packages/mui-material/src/Select/Select.spec.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import Select, { SelectChangeEvent } from '@mui/material/Select'; +import Select, { SelectChangeEvent, SelectProps } from '@mui/material/Select'; import MenuItem from '@mui/material/MenuItem'; import { createTheme } from '@mui/material/styles'; @@ -75,4 +75,124 @@ function genericValueTest() { }, }} />; + + ; + ; + + ; + // @ts-expect-error hiddenLabel is not present in outlined variant + ; + + const defaultProps: SelectProps = {}; + const outlinedProps: SelectProps = { + variant: 'outlined', + }; + const filledProps: SelectProps = { + variant: 'filled', + }; + const standardProps: SelectProps = { + variant: 'standard', + }; + + ; + ; + {...outlinedProps} />; + {...defaultProps} />; + {...filledProps} />; + + const rawDefaultProps: SelectProps = {}; + const rawOutlinedProps: SelectProps = { + variant: 'outlined', + }; + const rawFilledProps: SelectProps = { + variant: 'filled', + }; + + ; + ; + // @ts-expect-error hiddenLabel is not present in outlined variant + ; + // @ts-expect-error hiddenLabel is not present in standard variant + { + if (props.multiple) { + props.onChange(event.target.value as T[]); + } else { + props.onChange(event.target.value as T); + } + }} + > + {props.options.map((option, index) => ( + + {getOptionText(option)} + + ))} + + ); +};