[material-ui] Add DefaultPropsProvider for Pigment CSS integration

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

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

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

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

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

@@ -68,18 +68,9 @@ const rule = {
 
     return {
       CallExpression(node) {
-        const isCreateUseThemePropsCall = node.callee.name === 'createUseThemeProps';
-        if (isCreateUseThemePropsCall) {
-          if (!node.arguments.length) {
-            context.report({ node, messageId: 'noNameValue' });
-          } else if (node.arguments[0].type !== 'Literal' || !node.arguments[0].value) {
-            context.report({ node: node.arguments[0], messageId: 'noNameValue' });
-          }
-        }
-
         let nameLiteral = null;
-        const isUseThemePropsCall = node.callee.name === 'useThemeProps';
-        if (isUseThemePropsCall) {
+        const isUseDefaultPropsCall = node.callee.name === 'useDefaultProps';
+        if (isUseDefaultPropsCall) {
           let isCalledFromCustomHook = false;
           let parent = node.parent;
           while (parent != null) {

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

@@ -9,12 +9,12 @@ ruleTester.run('mui-name-matches-component-name', rule, {
         inProps: StaticDateRangePickerProps<TDate>,
         ref: React.Ref<HTMLDivElement>,
       ) {
-        const props = useThemeProps({ props: inProps, name: 'MuiStaticDateRangePicker' });
+        const props = useDefaultProps({ props: inProps, name: 'MuiStaticDateRangePicker' });
       });
     `,
     `
       function CssBaseline(inProps) {
-        useThemeProps({ props: inProps, name: 'MuiCssBaseline' });
+        useDefaultProps({ props: inProps, name: 'MuiCssBaseline' });
       }
     `,
     `
@@ -32,7 +32,7 @@ ruleTester.run('mui-name-matches-component-name', rule, {
           ];
         },
       }),
-      useThemeProps: (inProps) => useThemeProps({ props: inProps, name: 'MuiContainer' }),
+      useDefaultProps: (inProps) => useDefaultProps({ props: inProps, name: 'MuiContainer' }),
     });
     `,
     `
@@ -42,12 +42,9 @@ ruleTester.run('mui-name-matches-component-name', rule, {
         overridesResolver: (props, styles) => styles.root,
       }),
       componentName: 'MuiGrid2',
-      useThemeProps: (inProps) => useThemeProps({ props: inProps, name: 'MuiGrid2' }),
+      useDefaultProps: (inProps) => useDefaultProps({ props: inProps, name: 'MuiGrid2' }),
     }) as OverridableComponent<Grid2TypeMap>;
     `,
-    `
-    const useThemeProps = createUseThemeProps('MuiBadge');
-    `,
     {
       code: `
         const StaticDateRangePicker = React.forwardRef(function StaticDateRangePicker<TDate>(
@@ -62,7 +59,7 @@ ruleTester.run('mui-name-matches-component-name', rule, {
     {
       code: `
         function useDatePickerDefaultizedProps(props, name) {
-          useThemeProps({ props, name });
+          useDefaultProps({ props, name });
         }
       `,
       options: [{ customHooks: ['useDatePickerDefaultizedProps'] }],
@@ -75,7 +72,7 @@ ruleTester.run('mui-name-matches-component-name', rule, {
           inProps: StaticDateRangePickerProps<TDate>,
           ref: React.Ref<HTMLDivElement>,
         ) {
-          const props = useThemeProps({ props: inProps, name: 'MuiPickersDateRangePicker' });
+          const props = useDefaultProps({ props: inProps, name: 'MuiPickersDateRangePicker' });
         });
       `,
       errors: [
@@ -87,7 +84,7 @@ ruleTester.run('mui-name-matches-component-name', rule, {
       ],
     },
     {
-      code: 'useThemeProps({ props: inProps })',
+      code: 'useDefaultProps({ props: inProps })',
       errors: [
         {
           message: 'Unable to find `name` property. Did you forget to pass `name`?',
@@ -96,7 +93,7 @@ ruleTester.run('mui-name-matches-component-name', rule, {
       ],
     },
     {
-      code: 'useThemeProps({ props: inProps, name })',
+      code: 'useDefaultProps({ props: inProps, name })',
       errors: [
         {
           message:
@@ -106,7 +103,7 @@ ruleTester.run('mui-name-matches-component-name', rule, {
       ],
     },
     {
-      code: "useThemeProps({ props: inProps, name: 'MuiPickersDateRangePicker' })",
+      code: "useDefaultProps({ props: inProps, name: 'MuiPickersDateRangePicker' })",
       errors: [{ message: 'Unable to find component for this call.', type: 'CallExpression' }],
     },
     {
@@ -145,37 +142,5 @@ ruleTester.run('mui-name-matches-component-name', rule, {
         },
       ],
     },
-    {
-      code: `
-        const useThemeProps = createUseThemeProps();
-
-        const Badge = React.forwardRef(function Badge(inProps, ref) {
-          const props = useThemeProps({ props: inProps, name: 'MuiBadge' });
-        });
-      `,
-      errors: [
-        {
-          message:
-            'Unable to resolve `name`. Please hardcode the `name` i.e. use a string literal.',
-          type: 'CallExpression',
-        },
-      ],
-    },
-    {
-      code: `
-        const useThemeProps = createUseThemeProps({ name: 'MuiBadge' });
-
-        const Badge = React.forwardRef(function Badge(inProps, ref) {
-          const props = useThemeProps({ props: inProps, name: 'MuiBadge' });
-        });
-      `,
-      errors: [
-        {
-          message:
-            'Unable to resolve `name`. Please hardcode the `name` i.e. use a string literal.',
-          type: 'ObjectExpression',
-        },
-      ],
-    },
   ],
 });

packages/mui-codemod/src/deprecations/tab-classes/test-cases/expected.css

@@ -1,3 +1,4 @@
 .MuiTab-root .MuiTab-icon {
   color: red;
 }
+

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

@@ -4,15 +4,14 @@ 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 { useDefaultProps } from '@mui/material/DefaultPropsProvider';
 import Button from '@mui/material/Button';
 import { ButtonGroupContext } from '@mui/material/ButtonGroup';
 import CircularProgress from '@mui/material/CircularProgress';
 import resolveProps from '@mui/utils/resolveProps';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
 import loadingButtonClasses, { getLoadingButtonUtilityClass } from './loadingButtonClasses';
 
-const useThemeProps = createUseThemeProps('MuiLoadingButton');
-
 const useUtilityClasses = (ownerState) => {
   const { loading, loadingPosition, classes } = ownerState;
 
@@ -198,7 +197,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/zero-styled/index.ts

@@ -1,8 +1,2 @@
-import { useThemeProps } from '@mui/material/styles';
-
+/* eslint-disable import/prefer-default-export */
 export { styled } from '@mui/material/styles';
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export function createUseThemeProps(name: string) {
-  return useThemeProps;
-}

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);

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

@@ -4,7 +4,8 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import { darken, lighten } from '@mui/system/colorManipulator';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import useSlot from '../utils/useSlot';
 import capitalize from '../utils/capitalize';
 import Paper from '../Paper';
@@ -16,8 +17,6 @@ import ErrorOutlineIcon from '../internal/svg-icons/ErrorOutline';
 import InfoOutlinedIcon from '../internal/svg-icons/InfoOutlined';
 import CloseIcon from '../internal/svg-icons/Close';
 
-const useThemeProps = createUseThemeProps('MuiAlert');
-
 const useUtilityClasses = (ownerState) => {
   const { variant, color, severity, classes } = ownerState;
 
@@ -157,7 +156,7 @@ const defaultIconMapping = {
 };
 
 const Alert = React.forwardRef(function Alert(inProps, ref) {
-  const props = useThemeProps({ props: inProps, name: 'MuiAlert' });
+  const props = useDefaultProps({ props: inProps, name: 'MuiAlert' });
   const {
     action,
     children,

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

@@ -3,12 +3,11 @@ 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 Typography from '../Typography';
 import { getAlertTitleUtilityClass } from './alertTitleClasses';
 
-const useThemeProps = createUseThemeProps('MuiAlertTitle');
-
 const useUtilityClasses = (ownerState) => {
   const { classes } = ownerState;
 
@@ -31,7 +30,7 @@ const AlertTitleRoot = styled(Typography, {
 });
 
 const AlertTitle = React.forwardRef(function AlertTitle(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiAlertTitle',
   });

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

@@ -3,13 +3,12 @@ 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 capitalize from '../utils/capitalize';
 import Paper from '../Paper';
 import { getAppBarUtilityClass } from './appBarClasses';
 
-const useThemeProps = createUseThemeProps('MuiAppBar');
-
 const useUtilityClasses = (ownerState) => {
   const { color, position, classes } = ownerState;
 
@@ -161,7 +160,7 @@ const AppBarRoot = styled(Paper, {
 }));
 
 const AppBar = React.forwardRef(function AppBar(inProps, ref) {
-  const props = useThemeProps({ props: inProps, name: 'MuiAppBar' });
+  const props = useDefaultProps({ props: inProps, name: 'MuiAppBar' });
   const {
     className,
     color = 'primary',