Skip to content

Commit 5dc161b

Browse files
siriwatknpsiriwatknp
authored
[material-ui] Add DefaultPropsProvider (#42820)
1 parent 10f58e0 commit 5dc161b

File tree

130 files changed

+490
-286
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

130 files changed

+490
-286
lines changed

‎packages/api-docs-builder-core/materialUi/projectSettings.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ export const projectSettings: ProjectSettings = {
2828
getComponentInfo: getMaterialUiComponentInfo,
2929
translationLanguages: LANGUAGES,
3030
skipComponent(filename: string) {
31-
return filename.match(/(ThemeProvider|CssVarsProvider|Grid2)/) !== null;
31+
return filename.match(/(ThemeProvider|CssVarsProvider|DefaultPropsProvider|Grid2)/) !== null;
3232
},
3333
translationPagesDirectory: 'docs/translations/api-docs',
3434
generateClassName: generateUtilityClass,

‎packages/api-docs-builder-core/muiSystem/projectSettings.ts

+3-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,9 @@ export const projectSettings: ProjectSettings = {
2323
getComponentInfo: getSystemComponentInfo,
2424
translationLanguages: LANGUAGES,
2525
skipComponent(filename) {
26-
return filename.match(/(ThemeProvider|CssVarsProvider|GlobalStyles)/) !== null;
26+
return (
27+
filename.match(/(ThemeProvider|CssVarsProvider|DefaultPropsProvider|GlobalStyles)/) !== null
28+
);
2729
},
2830
translationPagesDirectory: 'docs/translations/api-docs',
2931
generateClassName: generateUtilityClass,

‎packages/eslint-plugin-material-ui/src/rules/mui-name-matches-component-name.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,8 @@ const rule = {
7878
}
7979

8080
let nameLiteral = null;
81-
const isUseThemePropsCall = node.callee.name === 'useThemeProps';
81+
const isUseThemePropsCall =
82+
node.callee.name === 'useThemeProps' || node.callee.name === 'useDefaultProps';
8283
if (isUseThemePropsCall) {
8384
let isCalledFromCustomHook = false;
8485
let parent = node.parent;

‎packages/eslint-plugin-material-ui/src/rules/mui-name-matches-component-name.test.js

+99-19
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ const rule = require('./mui-name-matches-component-name');
44
const ruleTester = new eslint.RuleTester({ parser: require.resolve('@typescript-eslint/parser') });
55
ruleTester.run('mui-name-matches-component-name', rule, {
66
valid: [
7+
// useThemeProps
78
`
89
const StaticDateRangePicker = React.forwardRef(function StaticDateRangePicker<TDate>(
910
inProps: StaticDateRangePickerProps<TDate>,
@@ -45,8 +46,56 @@ ruleTester.run('mui-name-matches-component-name', rule, {
4546
useThemeProps: (inProps) => useThemeProps({ props: inProps, name: 'MuiGrid2' }),
4647
}) as OverridableComponent<Grid2TypeMap>;
4748
`,
49+
{
50+
code: `
51+
function useDatePickerDefaultizedProps(props, name) {
52+
useThemeProps({ props, name });
53+
}
54+
`,
55+
options: [{ customHooks: ['useDatePickerDefaultizedProps'] }],
56+
},
57+
// ================
58+
// useDefaultProps
59+
`
60+
const StaticDateRangePicker = React.forwardRef(function StaticDateRangePicker<TDate>(
61+
inProps: StaticDateRangePickerProps<TDate>,
62+
ref: React.Ref<HTMLDivElement>,
63+
) {
64+
const props = useDefaultProps({ props: inProps, name: 'MuiStaticDateRangePicker' });
65+
});
66+
`,
4867
`
49-
const useThemeProps = createUseThemeProps('MuiBadge');
68+
function CssBaseline(inProps) {
69+
useDefaultProps({ props: inProps, name: 'MuiCssBaseline' });
70+
}
71+
`,
72+
`
73+
const Container = createContainer({
74+
createStyledComponent: styled('div', {
75+
name: 'MuiContainer',
76+
slot: 'Root',
77+
overridesResolver: (props, styles) => {
78+
const { ownerState } = props;
79+
80+
return [
81+
styles.root,
82+
ownerState.fixed && styles.fixed,
83+
ownerState.disableGutters && styles.disableGutters,
84+
];
85+
},
86+
}),
87+
useDefaultProps: (inProps) => useDefaultProps({ props: inProps, name: 'MuiContainer' }),
88+
});
89+
`,
90+
`
91+
const Grid2 = createGrid2({
92+
createStyledComponent: styled('div', {
93+
name: 'MuiGrid2',
94+
overridesResolver: (props, styles) => styles.root,
95+
}),
96+
componentName: 'MuiGrid2',
97+
useDefaultProps: (inProps) => useDefaultProps({ props: inProps, name: 'MuiGrid2' }),
98+
}) as OverridableComponent<Grid2TypeMap>;
5099
`,
51100
{
52101
code: `
@@ -62,13 +111,14 @@ ruleTester.run('mui-name-matches-component-name', rule, {
62111
{
63112
code: `
64113
function useDatePickerDefaultizedProps(props, name) {
65-
useThemeProps({ props, name });
114+
useDefaultProps({ props, name });
66115
}
67116
`,
68117
options: [{ customHooks: ['useDatePickerDefaultizedProps'] }],
69118
},
70119
],
71120
invalid: [
121+
// useThemeProps
72122
{
73123
code: `
74124
const StaticDateRangePicker = React.forwardRef(function StaticDateRangePicker<TDate>(
@@ -115,28 +165,29 @@ ruleTester.run('mui-name-matches-component-name', rule, {
115165
inProps: StaticDateRangePickerProps<TDate>,
116166
ref: React.Ref<HTMLDivElement>,
117167
) {
118-
const props = useDatePickerDefaultizedProps(inProps);
168+
const props = useDatePickerDefaultizedProps(inProps, 'MuiPickersDateRangePicker');
119169
});
120170
`,
121171
options: [{ customHooks: ['useDatePickerDefaultizedProps'] }],
122172
errors: [
123173
{
124174
message:
125-
"Unable to find name argument. Expected `useDatePickerDefaultizedProps(firstParameter, 'MuiComponent')`.",
126-
type: 'Identifier',
175+
"Expected `name` to be 'MuiStaticDateRangePicker' but instead got 'MuiPickersDateRangePicker'.",
176+
type: 'Literal',
127177
},
128178
],
129179
},
180+
// ================
181+
// useDefaultProps
130182
{
131183
code: `
132184
const StaticDateRangePicker = React.forwardRef(function StaticDateRangePicker<TDate>(
133185
inProps: StaticDateRangePickerProps<TDate>,
134186
ref: React.Ref<HTMLDivElement>,
135187
) {
136-
const props = useDatePickerDefaultizedProps(inProps, 'MuiPickersDateRangePicker');
188+
const props = useDefaultProps({ props: inProps, name: 'MuiPickersDateRangePicker' });
137189
});
138190
`,
139-
options: [{ customHooks: ['useDatePickerDefaultizedProps'] }],
140191
errors: [
141192
{
142193
message:
@@ -145,35 +196,64 @@ ruleTester.run('mui-name-matches-component-name', rule, {
145196
},
146197
],
147198
},
199+
{
200+
code: 'useDefaultProps({ props: inProps })',
201+
errors: [
202+
{
203+
message: 'Unable to find `name` property. Did you forget to pass `name`?',
204+
type: 'ObjectExpression',
205+
},
206+
],
207+
},
208+
{
209+
code: 'useDefaultProps({ props: inProps, name })',
210+
errors: [
211+
{
212+
message:
213+
'Unable to resolve `name`. Please hardcode the `name` i.e. use a string literal.',
214+
type: 'Identifier',
215+
},
216+
],
217+
},
218+
{
219+
code: "useDefaultProps({ props: inProps, name: 'MuiPickersDateRangePicker' })",
220+
errors: [{ message: 'Unable to find component for this call.', type: 'CallExpression' }],
221+
},
148222
{
149223
code: `
150-
const useThemeProps = createUseThemeProps();
151-
152-
const Badge = React.forwardRef(function Badge(inProps, ref) {
153-
const props = useThemeProps({ props: inProps, name: 'MuiBadge' });
224+
const StaticDateRangePicker = React.forwardRef(function StaticDateRangePicker<TDate>(
225+
inProps: StaticDateRangePickerProps<TDate>,
226+
ref: React.Ref<HTMLDivElement>,
227+
) {
228+
const props = useDatePickerDefaultizedProps(inProps);
154229
});
155230
`,
231+
options: [{ customHooks: ['useDatePickerDefaultizedProps'] }],
156232
errors: [
157233
{
158234
message:
159-
'Unable to resolve `name`. Please hardcode the `name` i.e. use a string literal.',
160-
type: 'CallExpression',
235+
"Unable to find name argument. Expected `useDatePickerDefaultizedProps(firstParameter, 'MuiComponent')`.",
236+
type: 'Identifier',
161237
},
162238
],
163239
},
240+
// ================
241+
// customHooks
164242
{
165243
code: `
166-
const useThemeProps = createUseThemeProps({ name: 'MuiBadge' });
167-
168-
const Badge = React.forwardRef(function Badge(inProps, ref) {
169-
const props = useThemeProps({ props: inProps, name: 'MuiBadge' });
244+
const StaticDateRangePicker = React.forwardRef(function StaticDateRangePicker<TDate>(
245+
inProps: StaticDateRangePickerProps<TDate>,
246+
ref: React.Ref<HTMLDivElement>,
247+
) {
248+
const props = useDatePickerDefaultizedProps(inProps, 'MuiPickersDateRangePicker');
170249
});
171250
`,
251+
options: [{ customHooks: ['useDatePickerDefaultizedProps'] }],
172252
errors: [
173253
{
174254
message:
175-
'Unable to resolve `name`. Please hardcode the `name` i.e. use a string literal.',
176-
type: 'ObjectExpression',
255+
"Expected `name` to be 'MuiStaticDateRangePicker' but instead got 'MuiPickersDateRangePicker'.",
256+
type: 'Literal',
177257
},
178258
],
179259
},

‎packages/mui-lab/src/LoadingButton/LoadingButton.js

+3-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@ import PropTypes from 'prop-types';
44
import { chainPropTypes } from '@mui/utils';
55
import { capitalize, unstable_useId as useId } from '@mui/material/utils';
66
import { unstable_composeClasses as composeClasses } from '@mui/base';
7-
import { styled, useThemeProps } from '@mui/material/styles';
7+
import { styled } from '@mui/material/styles';
8+
import { useDefaultProps } from '@mui/material/DefaultPropsProvider';
89
import Button from '@mui/material/Button';
910
import { ButtonGroupContext } from '@mui/material/ButtonGroup';
1011
import CircularProgress from '@mui/material/CircularProgress';
@@ -140,7 +141,7 @@ const LoadingButtonLoadingIndicator = styled('span', {
140141
const LoadingButton = React.forwardRef(function LoadingButton(inProps, ref) {
141142
const contextProps = React.useContext(ButtonGroupContext);
142143
const resolvedProps = resolveProps(contextProps, inProps);
143-
const props = useThemeProps({ props: resolvedProps, name: 'MuiLoadingButton' });
144+
const props = useDefaultProps({ props: resolvedProps, name: 'MuiLoadingButton' });
144145
const {
145146
children,
146147
disabled = false,

‎packages/mui-lab/src/Masonry/Masonry.js

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
'use client';
22
import { unstable_composeClasses as composeClasses } from '@mui/base';
33
import * as ReactDOM from 'react-dom';
4-
import { styled, useThemeProps } from '@mui/material/styles';
4+
import { styled } from '@mui/material/styles';
5+
import { useDefaultProps } from '@mui/material/DefaultPropsProvider';
56
import {
67
createUnarySpacing,
78
getValue,
@@ -171,7 +172,7 @@ const MasonryRoot = styled('div', {
171172
})(getStyle);
172173

173174
const Masonry = React.forwardRef(function Masonry(inProps, ref) {
174-
const props = useThemeProps({
175+
const props = useDefaultProps({
175176
props: inProps,
176177
name: 'MuiMasonry',
177178
});

‎packages/mui-material/src/Accordion/Accordion.js

+3-4
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,15 @@ import PropTypes from 'prop-types';
55
import clsx from 'clsx';
66
import chainPropTypes from '@mui/utils/chainPropTypes';
77
import composeClasses from '@mui/utils/composeClasses';
8-
import { styled, createUseThemeProps } from '../zero-styled';
8+
import { styled } from '../zero-styled';
9+
import { useDefaultProps } from '../DefaultPropsProvider';
910
import Collapse from '../Collapse';
1011
import Paper from '../Paper';
1112
import AccordionContext from './AccordionContext';
1213
import useControlled from '../utils/useControlled';
1314
import useSlot from '../utils/useSlot';
1415
import accordionClasses, { getAccordionUtilityClass } from './accordionClasses';
1516

16-
const useThemeProps = createUseThemeProps('MuiAccordion');
17-
1817
const useUtilityClasses = (ownerState) => {
1918
const { classes, square, expanded, disabled, disableGutters } = ownerState;
2019

@@ -126,7 +125,7 @@ const AccordionRoot = styled(Paper, {
126125
);
127126

128127
const Accordion = React.forwardRef(function Accordion(inProps, ref) {
129-
const props = useThemeProps({ props: inProps, name: 'MuiAccordion' });
128+
const props = useDefaultProps({ props: inProps, name: 'MuiAccordion' });
130129
const {
131130
children: childrenProp,
132131
className,

‎packages/mui-material/src/AccordionActions/AccordionActions.js

+3-4
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,10 @@ import * as React from 'react';
33
import PropTypes from 'prop-types';
44
import clsx from 'clsx';
55
import composeClasses from '@mui/utils/composeClasses';
6-
import { styled, createUseThemeProps } from '../zero-styled';
6+
import { styled } from '../zero-styled';
7+
import { useDefaultProps } from '../DefaultPropsProvider';
78
import { getAccordionActionsUtilityClass } from './accordionActionsClasses';
89

9-
const useThemeProps = createUseThemeProps('MuiAccordionActions');
10-
1110
const useUtilityClasses = (ownerState) => {
1211
const { classes, disableSpacing } = ownerState;
1312

@@ -44,7 +43,7 @@ const AccordionActionsRoot = styled('div', {
4443
});
4544

4645
const AccordionActions = React.forwardRef(function AccordionActions(inProps, ref) {
47-
const props = useThemeProps({ props: inProps, name: 'MuiAccordionActions' });
46+
const props = useDefaultProps({ props: inProps, name: 'MuiAccordionActions' });
4847
const { className, disableSpacing = false, ...other } = props;
4948
const ownerState = { ...props, disableSpacing };
5049

‎packages/mui-material/src/AccordionDetails/AccordionDetails.js

+3-4
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,10 @@ import * as React from 'react';
33
import PropTypes from 'prop-types';
44
import clsx from 'clsx';
55
import composeClasses from '@mui/utils/composeClasses';
6-
import { styled, createUseThemeProps } from '../zero-styled';
6+
import { styled } from '../zero-styled';
7+
import { useDefaultProps } from '../DefaultPropsProvider';
78
import { getAccordionDetailsUtilityClass } from './accordionDetailsClasses';
89

9-
const useThemeProps = createUseThemeProps('MuiAccordionDetails');
10-
1110
const useUtilityClasses = (ownerState) => {
1211
const { classes } = ownerState;
1312

@@ -27,7 +26,7 @@ const AccordionDetailsRoot = styled('div', {
2726
}));
2827

2928
const AccordionDetails = React.forwardRef(function AccordionDetails(inProps, ref) {
30-
const props = useThemeProps({ props: inProps, name: 'MuiAccordionDetails' });
29+
const props = useDefaultProps({ props: inProps, name: 'MuiAccordionDetails' });
3130
const { className, ...other } = props;
3231
const ownerState = props;
3332
const classes = useUtilityClasses(ownerState);

‎packages/mui-material/src/AccordionSummary/AccordionSummary.js

+3-4
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,14 @@ import * as React from 'react';
33
import PropTypes from 'prop-types';
44
import clsx from 'clsx';
55
import composeClasses from '@mui/utils/composeClasses';
6-
import { styled, createUseThemeProps } from '../zero-styled';
6+
import { styled } from '../zero-styled';
7+
import { useDefaultProps } from '../DefaultPropsProvider';
78
import ButtonBase from '../ButtonBase';
89
import AccordionContext from '../Accordion/AccordionContext';
910
import accordionSummaryClasses, {
1011
getAccordionSummaryUtilityClass,
1112
} from './accordionSummaryClasses';
1213

13-
const useThemeProps = createUseThemeProps('MuiAccordionSummary');
14-
1514
const useUtilityClasses = (ownerState) => {
1615
const { classes, expanded, disabled, disableGutters } = ownerState;
1716

@@ -101,7 +100,7 @@ const AccordionSummaryExpandIconWrapper = styled('div', {
101100
}));
102101

103102
const AccordionSummary = React.forwardRef(function AccordionSummary(inProps, ref) {
104-
const props = useThemeProps({ props: inProps, name: 'MuiAccordionSummary' });
103+
const props = useDefaultProps({ props: inProps, name: 'MuiAccordionSummary' });
105104
const { children, className, expandIcon, focusVisibleClassName, onClick, ...other } = props;
106105

107106
const { disabled = false, disableGutters, expanded, toggle } = React.useContext(AccordionContext);

‎packages/mui-material/src/Alert/Alert.js

+3-4
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@ import PropTypes from 'prop-types';
44
import clsx from 'clsx';
55
import composeClasses from '@mui/utils/composeClasses';
66
import { darken, lighten } from '@mui/system/colorManipulator';
7-
import { styled, createUseThemeProps } from '../zero-styled';
7+
import { styled } from '../zero-styled';
8+
import { useDefaultProps } from '../DefaultPropsProvider';
89
import useSlot from '../utils/useSlot';
910
import capitalize from '../utils/capitalize';
1011
import Paper from '../Paper';
@@ -16,8 +17,6 @@ import ErrorOutlineIcon from '../internal/svg-icons/ErrorOutline';
1617
import InfoOutlinedIcon from '../internal/svg-icons/InfoOutlined';
1718
import CloseIcon from '../internal/svg-icons/Close';
1819

19-
const useThemeProps = createUseThemeProps('MuiAlert');
20-
2120
const useUtilityClasses = (ownerState) => {
2221
const { variant, color, severity, classes } = ownerState;
2322

@@ -157,7 +156,7 @@ const defaultIconMapping = {
157156
};
158157

159158
const Alert = React.forwardRef(function Alert(inProps, ref) {
160-
const props = useThemeProps({ props: inProps, name: 'MuiAlert' });
159+
const props = useDefaultProps({ props: inProps, name: 'MuiAlert' });
161160
const {
162161
action,
163162
children,

0 commit comments

Comments
 (0)