Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[material-ui][TablePagination] Fix type error in Select props #39137

Merged
merged 10 commits into from
Feb 20, 2024
Merged

[material-ui][TablePagination] Fix type error in Select props #39137

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
d62e722
[TablePagination][material-ui] Remove type error props in SelectProp
PaulKristoffersson Sep 24, 2023
c045a78
further work, no error on types
PaulKristoffersson Sep 26, 2023
06fe8a6
type error is removed
PaulKristoffersson Oct 3, 2023
36bb915
moved changes, extend SelectProps with inputProps
PaulKristoffersson Dec 5, 2023
8e7ca98
added test
PaulKristoffersson Dec 7, 2023
1b031bf
type error fixed in Select.d.ts file
PaulKristoffersson Dec 11, 2023
778e977
fixed in test & removed type error, have to fix value type
PaulKristoffersson Dec 13, 2023
d6f55af
added custom value type to multipleselect
PaulKristoffersson Dec 15, 2023
e98b439
rollback TablePagination changes
PaulKristoffersson Dec 17, 2023
a8b36c2
added TablePagination test
PaulKristoffersson Dec 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/data/material/components/selects/MultipleSelectNative.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ export default function MultipleSelectNative() {
<InputLabel shrink htmlFor="select-multiple-native">
Native
</InputLabel>
<Select
<Select<string[]>
multiple
native
value={personName}
Expand Down
57 changes: 50 additions & 7 deletions packages/mui-material/src/Select/Select.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,12 @@ 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<Value = unknown>
extends StandardProps<InputProps, 'value' | 'onChange'>,
Omit<OutlinedInputProps, 'value' | 'onChange'> {
export interface BaseSelectProps<Value = unknown>
extends StandardProps<InputProps, 'value' | 'onChange'> {
/**
* 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.
Expand Down Expand Up @@ -148,9 +148,45 @@ export interface SelectProps<Value = unknown>
* The variant to use.
* @default 'outlined'
*/
variant?: 'standard' | 'outlined' | 'filled';
variant?: 'filled' | 'standard' | 'outlined';
}

export interface FilledSelectProps extends Omit<FilledInputProps, 'value' | 'onChange'> {
/**
* The variant to use.
* @default 'outlined'
*/
variant: 'filled';
}

export interface StandardSelectProps extends Omit<InputProps, 'value' | 'onChange'> {
/**
* The variant to use.
* @default 'outlined'
*/
variant: 'standard';
}

export interface OutlinedSelectProps extends Omit<OutlinedInputProps, 'value' | 'onChange'> {
/**
* The variant to use.
* @default 'outlined'
*/
variant: 'outlined';
}

export type SelectVariants = 'outlined' | 'standard' | 'filled';
ZeeshanTamboli marked this conversation as resolved.
Show resolved Hide resolved

export type SelectProps<
Value = unknown,
Variant extends SelectVariants = SelectVariants,
> = BaseSelectProps<Value> &
(Variant extends 'filled'
? FilledSelectProps
: Variant extends 'standard'
? StandardSelectProps
: OutlinedSelectProps);
Comment on lines +180 to +188
Copy link
Contributor

@Methuselah96 Methuselah96 Feb 25, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

FYI, this is breaking type change for people using SelectProps directly because the variant prop is required now when it wasn't before. I guess BaseSelectProps is a suitable replacement for most use cases?

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks! Using BaseSelectProps instead of SelectProps fixed the build in our component library after updating mui to 5.15.11

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed it in #41359


/**
*
* Demos:
Expand All @@ -162,8 +198,15 @@ export interface SelectProps<Value = unknown>
* - [Select API](https://mui.com/material-ui/api/select/)
* - inherits [OutlinedInput API](https://mui.com/material-ui/api/outlined-input/)
*/
declare const Select: (<Value>(props: SelectProps<Value>) => JSX.Element) & {

export default function Select<Value = unknown, Variant extends SelectVariants = 'outlined'>(
props: {
/**
* The variant to use.
* @default 'outlined'
*/
variant?: Variant;
} & Omit<SelectProps<Value, Variant>, 'variant'>,
): JSX.Element & {
muiName: string;
};

export default Select;
6 changes: 6 additions & 0 deletions packages/mui-material/src/TablePagination/TablePagination.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,5 +84,11 @@ function classesTest() {
fill: 'currentColor',
},
},
select: {
size: 'small',
variant: 'filled',
hiddenLabel: true,
disableUnderline: true,
},
}}
/>;
Loading