[material-ui] Add DefaultPropsProvider (#42820)

Author: siriwatknp

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

@@ -28,7 +28,7 @@ export const projectSettings: ProjectSettings = {
   getComponentInfo: getMaterialUiComponentInfo,
   translationLanguages: LANGUAGES,
   skipComponent(filename: string) {
-    return filename.match(/(ThemeProvider|CssVarsProvider|Grid2)/) !== null;
+    return filename.match(/(ThemeProvider|CssVarsProvider|DefaultPropsProvider|Grid2)/) !== null;
   },
   translationPagesDirectory: 'docs/translations/api-docs',
   generateClassName: generateUtilityClass,

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

@@ -23,7 +23,9 @@ export const projectSettings: ProjectSettings = {
   getComponentInfo: getSystemComponentInfo,
   translationLanguages: LANGUAGES,
   skipComponent(filename) {
-    return filename.match(/(ThemeProvider|CssVarsProvider|GlobalStyles)/) !== null;
+    return (
+      filename.match(/(ThemeProvider|CssVarsProvider|DefaultPropsProvider|GlobalStyles)/) !== null
+    );
   },
   translationPagesDirectory: 'docs/translations/api-docs',
   generateClassName: generateUtilityClass,

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

@@ -78,7 +78,8 @@ const rule = {
         }
 
         let nameLiteral = null;
-        const isUseThemePropsCall = node.callee.name === 'useThemeProps';
+        const isUseThemePropsCall =
+          node.callee.name === 'useThemeProps' || node.callee.name === 'useDefaultProps';
         if (isUseThemePropsCall) {
           let isCalledFromCustomHook = false;
           let parent = node.parent;

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

@@ -4,6 +4,7 @@ const rule = require('./mui-name-matches-component-name');
 const ruleTester = new eslint.RuleTester({ parser: require.resolve('@typescript-eslint/parser') });
 ruleTester.run('mui-name-matches-component-name', rule, {
   valid: [
+    // useThemeProps
     `
       const StaticDateRangePicker = React.forwardRef(function StaticDateRangePicker<TDate>(
         inProps: StaticDateRangePickerProps<TDate>,
@@ -45,8 +46,56 @@ ruleTester.run('mui-name-matches-component-name', rule, {
       useThemeProps: (inProps) => useThemeProps({ props: inProps, name: 'MuiGrid2' }),
     }) as OverridableComponent<Grid2TypeMap>;
     `,
+    {
+      code: `
+        function useDatePickerDefaultizedProps(props, name) {
+          useThemeProps({ props, name });
+        }
+      `,
+      options: [{ customHooks: ['useDatePickerDefaultizedProps'] }],
+    },
+    // ================
+    // useDefaultProps
+    `
+      const StaticDateRangePicker = React.forwardRef(function StaticDateRangePicker<TDate>(
+        inProps: StaticDateRangePickerProps<TDate>,
+        ref: React.Ref<HTMLDivElement>,
+      ) {
+        const props = useDefaultProps({ props: inProps, name: 'MuiStaticDateRangePicker' });
+      });
+    `,
     `
-    const useThemeProps = createUseThemeProps('MuiBadge');
+      function CssBaseline(inProps) {
+        useDefaultProps({ props: inProps, name: 'MuiCssBaseline' });
+      }
+    `,
+    `
+    const Container = createContainer({
+      createStyledComponent: styled('div', {
+        name: 'MuiContainer',
+        slot: 'Root',
+        overridesResolver: (props, styles) => {
+          const { ownerState } = props;
+
+          return [
+            styles.root,
+            ownerState.fixed && styles.fixed,
+            ownerState.disableGutters && styles.disableGutters,
+          ];
+        },
+      }),
+      useDefaultProps: (inProps) => useDefaultProps({ props: inProps, name: 'MuiContainer' }),
+    });
+    `,
+    `
+    const Grid2 = createGrid2({
+      createStyledComponent: styled('div', {
+        name: 'MuiGrid2',
+        overridesResolver: (props, styles) => styles.root,
+      }),
+      componentName: 'MuiGrid2',
+      useDefaultProps: (inProps) => useDefaultProps({ props: inProps, name: 'MuiGrid2' }),
+    }) as OverridableComponent<Grid2TypeMap>;
     `,
     {
       code: `
@@ -62,13 +111,14 @@ ruleTester.run('mui-name-matches-component-name', rule, {
     {
       code: `
         function useDatePickerDefaultizedProps(props, name) {
-          useThemeProps({ props, name });
+          useDefaultProps({ props, name });
         }
       `,
       options: [{ customHooks: ['useDatePickerDefaultizedProps'] }],
     },
   ],
   invalid: [
+    // useThemeProps
     {
       code: `
         const StaticDateRangePicker = React.forwardRef(function StaticDateRangePicker<TDate>(
@@ -115,28 +165,29 @@ ruleTester.run('mui-name-matches-component-name', rule, {
           inProps: StaticDateRangePickerProps<TDate>,
           ref: React.Ref<HTMLDivElement>,
         ) {
-          const props = useDatePickerDefaultizedProps(inProps);
+          const props = useDatePickerDefaultizedProps(inProps, 'MuiPickersDateRangePicker');
         });
       `,
       options: [{ customHooks: ['useDatePickerDefaultizedProps'] }],
       errors: [
         {
           message:
-            "Unable to find name argument. Expected `useDatePickerDefaultizedProps(firstParameter, 'MuiComponent')`.",
-          type: 'Identifier',
+            "Expected `name` to be 'MuiStaticDateRangePicker' but instead got 'MuiPickersDateRangePicker'.",
+          type: 'Literal',
         },
       ],
     },
+    // ================
+    // useDefaultProps
     {
       code: `
         const StaticDateRangePicker = React.forwardRef(function StaticDateRangePicker<TDate>(
           inProps: StaticDateRangePickerProps<TDate>,
           ref: React.Ref<HTMLDivElement>,
         ) {
-          const props = useDatePickerDefaultizedProps(inProps, 'MuiPickersDateRangePicker');
+          const props = useDefaultProps({ props: inProps, name: 'MuiPickersDateRangePicker' });
         });
       `,
-      options: [{ customHooks: ['useDatePickerDefaultizedProps'] }],
       errors: [
         {
           message:
@@ -145,35 +196,64 @@ ruleTester.run('mui-name-matches-component-name', rule, {
         },
       ],
     },
+    {
+      code: 'useDefaultProps({ props: inProps })',
+      errors: [
+        {
+          message: 'Unable to find `name` property. Did you forget to pass `name`?',
+          type: 'ObjectExpression',
+        },
+      ],
+    },
+    {
+      code: 'useDefaultProps({ props: inProps, name })',
+      errors: [
+        {
+          message:
+            'Unable to resolve `name`. Please hardcode the `name` i.e. use a string literal.',
+          type: 'Identifier',
+        },
+      ],
+    },
+    {
+      code: "useDefaultProps({ props: inProps, name: 'MuiPickersDateRangePicker' })",
+      errors: [{ message: 'Unable to find component for this call.', type: 'CallExpression' }],
+    },
     {
       code: `
-        const useThemeProps = createUseThemeProps();
-
-        const Badge = React.forwardRef(function Badge(inProps, ref) {
-          const props = useThemeProps({ props: inProps, name: 'MuiBadge' });
+        const StaticDateRangePicker = React.forwardRef(function StaticDateRangePicker<TDate>(
+          inProps: StaticDateRangePickerProps<TDate>,
+          ref: React.Ref<HTMLDivElement>,
+        ) {
+          const props = useDatePickerDefaultizedProps(inProps);
         });
       `,
+      options: [{ customHooks: ['useDatePickerDefaultizedProps'] }],
       errors: [
         {
           message:
-            'Unable to resolve `name`. Please hardcode the `name` i.e. use a string literal.',
-          type: 'CallExpression',
+            "Unable to find name argument. Expected `useDatePickerDefaultizedProps(firstParameter, 'MuiComponent')`.",
+          type: 'Identifier',
         },
       ],
     },
+    // ================
+    // customHooks
     {
       code: `
-        const useThemeProps = createUseThemeProps({ name: 'MuiBadge' });
-
-        const Badge = React.forwardRef(function Badge(inProps, ref) {
-          const props = useThemeProps({ props: inProps, name: 'MuiBadge' });
+        const StaticDateRangePicker = React.forwardRef(function StaticDateRangePicker<TDate>(
+          inProps: StaticDateRangePickerProps<TDate>,
+          ref: React.Ref<HTMLDivElement>,
+        ) {
+          const props = useDatePickerDefaultizedProps(inProps, 'MuiPickersDateRangePicker');
         });
       `,
+      options: [{ customHooks: ['useDatePickerDefaultizedProps'] }],
       errors: [
         {
           message:
-            'Unable to resolve `name`. Please hardcode the `name` i.e. use a string literal.',
-          type: 'ObjectExpression',
+            "Expected `name` to be 'MuiStaticDateRangePicker' but instead got 'MuiPickersDateRangePicker'.",
+          type: 'Literal',
         },
       ],
     },

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

@@ -4,7 +4,8 @@ import PropTypes from 'prop-types';
 import { chainPropTypes } from '@mui/utils';
 import { capitalize, unstable_useId as useId } from '@mui/material/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
-import { styled, useThemeProps } from '@mui/material/styles';
+import { styled } from '@mui/material/styles';
+import { useDefaultProps } from '@mui/material/DefaultPropsProvider';
 import Button from '@mui/material/Button';
 import { ButtonGroupContext } from '@mui/material/ButtonGroup';
 import CircularProgress from '@mui/material/CircularProgress';
@@ -140,7 +141,7 @@ const LoadingButtonLoadingIndicator = styled('span', {
 const LoadingButton = React.forwardRef(function LoadingButton(inProps, ref) {
   const contextProps = React.useContext(ButtonGroupContext);
   const resolvedProps = resolveProps(contextProps, inProps);
-  const props = useThemeProps({ props: resolvedProps, name: 'MuiLoadingButton' });
+  const props = useDefaultProps({ props: resolvedProps, name: 'MuiLoadingButton' });
   const {
     children,
     disabled = false,

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

@@ -1,7 +1,8 @@
 'use client';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
 import * as ReactDOM from 'react-dom';
-import { styled, useThemeProps } from '@mui/material/styles';
+import { styled } from '@mui/material/styles';
+import { useDefaultProps } from '@mui/material/DefaultPropsProvider';
 import {
   createUnarySpacing,
   getValue,
@@ -171,7 +172,7 @@ const MasonryRoot = styled('div', {
 })(getStyle);
 
 const Masonry = React.forwardRef(function Masonry(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiMasonry',
   });

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

@@ -5,16 +5,15 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import chainPropTypes from '@mui/utils/chainPropTypes';
 import composeClasses from '@mui/utils/composeClasses';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import Collapse from '../Collapse';
 import Paper from '../Paper';
 import AccordionContext from './AccordionContext';
 import useControlled from '../utils/useControlled';
 import useSlot from '../utils/useSlot';
 import accordionClasses, { getAccordionUtilityClass } from './accordionClasses';
 
-const useThemeProps = createUseThemeProps('MuiAccordion');
-
 const useUtilityClasses = (ownerState) => {
   const { classes, square, expanded, disabled, disableGutters } = ownerState;
 
@@ -126,7 +125,7 @@ const AccordionRoot = styled(Paper, {
 );
 
 const Accordion = React.forwardRef(function Accordion(inProps, ref) {
-  const props = useThemeProps({ props: inProps, name: 'MuiAccordion' });
+  const props = useDefaultProps({ props: inProps, name: 'MuiAccordion' });
   const {
     children: childrenProp,
     className,

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

@@ -3,11 +3,10 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import { getAccordionActionsUtilityClass } from './accordionActionsClasses';
 
-const useThemeProps = createUseThemeProps('MuiAccordionActions');
-
 const useUtilityClasses = (ownerState) => {
   const { classes, disableSpacing } = ownerState;
 
@@ -44,7 +43,7 @@ const AccordionActionsRoot = styled('div', {
 });
 
 const AccordionActions = React.forwardRef(function AccordionActions(inProps, ref) {
-  const props = useThemeProps({ props: inProps, name: 'MuiAccordionActions' });
+  const props = useDefaultProps({ props: inProps, name: 'MuiAccordionActions' });
   const { className, disableSpacing = false, ...other } = props;
   const ownerState = { ...props, disableSpacing };
 

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

@@ -3,11 +3,10 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import { getAccordionDetailsUtilityClass } from './accordionDetailsClasses';
 
-const useThemeProps = createUseThemeProps('MuiAccordionDetails');
-
 const useUtilityClasses = (ownerState) => {
   const { classes } = ownerState;
 
@@ -27,7 +26,7 @@ const AccordionDetailsRoot = styled('div', {
 }));
 
 const AccordionDetails = React.forwardRef(function AccordionDetails(inProps, ref) {
-  const props = useThemeProps({ props: inProps, name: 'MuiAccordionDetails' });
+  const props = useDefaultProps({ props: inProps, name: 'MuiAccordionDetails' });
   const { className, ...other } = props;
   const ownerState = props;
   const classes = useUtilityClasses(ownerState);

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

@@ -3,15 +3,14 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import ButtonBase from '../ButtonBase';
 import AccordionContext from '../Accordion/AccordionContext';
 import accordionSummaryClasses, {
   getAccordionSummaryUtilityClass,
 } from './accordionSummaryClasses';
 
-const useThemeProps = createUseThemeProps('MuiAccordionSummary');
-
 const useUtilityClasses = (ownerState) => {
   const { classes, expanded, disabled, disableGutters } = ownerState;
 
@@ -101,7 +100,7 @@ const AccordionSummaryExpandIconWrapper = styled('div', {
 }));
 
 const AccordionSummary = React.forwardRef(function AccordionSummary(inProps, ref) {
-  const props = useThemeProps({ props: inProps, name: 'MuiAccordionSummary' });
+  const props = useDefaultProps({ props: inProps, name: 'MuiAccordionSummary' });
   const { children, className, expandIcon, focusVisibleClassName, onClick, ...other } = props;
 
   const { disabled = false, disableGutters, expanded, toggle } = React.useContext(AccordionContext);