[material-ui] Replace useThemeProps with useDefaultProps

packages-internal/test-utils/src/describeConformance.tsx

@@ -63,6 +63,10 @@ export interface ConformanceOptions {
   testLegacyComponentsProp?: boolean;
   slots?: Record<string, SlotTestingOptions>;
   ThemeProvider?: React.ElementType;
+  /**
+   * If provided, the component will be tested by the `DefaultPropsProvider` (in addition to the ThemeProvider).
+   */
+  DefaultPropsProvider?: React.ElementType;
   createTheme?: (arg: any) => any;
 }
 
@@ -611,6 +615,41 @@ function testThemeDefaultProps(
       expect(container.firstChild).to.have.attribute(testProp, 'testProp');
     });
   });
+
+  describe('default props provider:', () => {
+    it('respect custom default props', async function test() {
+      const testProp = 'data-id';
+      const { muiName, render, DefaultPropsProvider } = getOptions();
+
+      if (!DefaultPropsProvider) {
+        this.skip();
+      }
+
+      if (!muiName) {
+        throwMissingPropError('muiName');
+      }
+
+      if (!render) {
+        throwMissingPropError('render');
+      }
+
+      const { container } = await render(
+        <DefaultPropsProvider
+          value={{
+            [muiName]: {
+              defaultProps: {
+                [testProp]: 'testProp',
+              },
+            },
+          }}
+        >
+          {element}
+        </DefaultPropsProvider>,
+      );
+
+      expect(container.firstChild).to.have.attribute(testProp, 'testProp');
+    });
+  });
 }
 
 /**

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

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { createContainer } from '@mui/system';
 import capitalize from '../utils/capitalize';
 import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { useDefaultProps } from '../DefaultPropsProvider';
 
 const Container = createContainer({
   createStyledComponent: styled('div', {
@@ -20,7 +20,7 @@ const Container = createContainer({
       ];
     },
   }),
-  useThemeProps: (inProps) => useThemeProps({ props: inProps, name: 'MuiContainer' }),
+  useThemeProps: (inProps) => useDefaultProps({ props: inProps, name: 'MuiContainer' }),
 });
 
 Container.propTypes /* remove-proptypes */ = {

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

@@ -20,7 +20,7 @@ import { extendSxProp } from '@mui/system/styleFunctionSx';
 import composeClasses from '@mui/utils/composeClasses';
 import requirePropFactory from '../utils/requirePropFactory';
 import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import useTheme from '../styles/useTheme';
 import GridContext from './GridContext';
 import gridClasses, { getGridUtilityClass } from './gridClasses';
@@ -402,7 +402,7 @@ const useUtilityClasses = (ownerState) => {
  * @deprecated Use the [`Grid2`](https://mui.com/material-ui/react-grid2/) component instead.
  */
 const Grid = React.forwardRef(function Grid(inProps, ref) {
-  const themeProps = useThemeProps({ props: inProps, name: 'MuiGrid' });
+  const themeProps = useDefaultProps({ props: inProps, name: 'MuiGrid' });
   const { breakpoints } = useTheme();
 
   const props = extendSxProp(themeProps);

packages/mui-material/src/Grid2/Grid2.tsx

@@ -4,7 +4,8 @@ import { createGrid as createGrid2 } from '@mui/system/Grid';
 import { SxProps, SystemProps } from '@mui/system';
 import { OverridableComponent, OverrideProps } from '@mui/types';
 import requirePropFactory from '../utils/requirePropFactory';
-import { Theme, styled, useThemeProps, Breakpoint } from '../styles';
+import { Theme, styled, Breakpoint } from '../styles';
+import { useDefaultProps } from '../DefaultPropsProvider';
 
 export type Grid2Slot = 'root';
 
@@ -131,7 +132,7 @@ const Grid2 = createGrid2({
     overridesResolver: (props, styles) => styles.root,
   }),
   componentName: 'MuiGrid2',
-  useThemeProps: (inProps) => useThemeProps({ props: inProps, name: 'MuiGrid2' }),
+  useThemeProps: (inProps) => useDefaultProps({ props: inProps, name: 'MuiGrid2' }),
 }) as OverridableComponent<Grid2TypeMap>;
 
 Grid2.propTypes /* remove-proptypes */ = {

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

@@ -8,7 +8,7 @@ import formControlState from '../FormControl/formControlState';
 import useFormControl from '../FormControl/useFormControl';
 import ArrowDropDownIcon from '../internal/svg-icons/ArrowDropDown';
 import Input from '../Input';
-import useThemeProps from '../styles/useThemeProps';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import { getNativeSelectUtilityClasses } from './nativeSelectClasses';
 
 const useUtilityClasses = (ownerState) => {
@@ -26,7 +26,7 @@ const defaultInput = <Input />;
  * An alternative to `<Select native />` with a much smaller bundle size footprint.
  */
 const NativeSelect = React.forwardRef(function NativeSelect(inProps, ref) {
-  const props = useThemeProps({ name: 'MuiNativeSelect', props: inProps });
+  const props = useDefaultProps({ name: 'MuiNativeSelect', props: inProps });
   const {
     className,
     children,

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

@@ -12,7 +12,7 @@ import Input from '../Input';
 import NativeSelectInput from '../NativeSelect/NativeSelectInput';
 import FilledInput from '../FilledInput';
 import OutlinedInput from '../OutlinedInput';
-import useThemeProps from '../styles/useThemeProps';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import useForkRef from '../utils/useForkRef';
 import { styled } from '../zero-styled';
 import rootShouldForwardProp from '../styles/rootShouldForwardProp';
@@ -37,7 +37,7 @@ const StyledOutlinedInput = styled(OutlinedInput, styledRootConfig)('');
 const StyledFilledInput = styled(FilledInput, styledRootConfig)('');
 
 const Select = React.forwardRef(function Select(inProps, ref) {
-  const props = useThemeProps({ name: 'MuiSelect', props: inProps });
+  const props = useDefaultProps({ name: 'MuiSelect', props: inProps });
   const {
     autoWidth = false,
     children,

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

@@ -2,15 +2,15 @@
 import PropTypes from 'prop-types';
 import { createStack } from '@mui/system';
 import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { useDefaultProps } from '../DefaultPropsProvider';
 
 const Stack = createStack({
   createStyledComponent: styled('div', {
     name: 'MuiStack',
     slot: 'Root',
     overridesResolver: (props, styles) => styles.root,
   }),
-  useThemeProps: (inProps) => useThemeProps({ props: inProps, name: 'MuiStack' }),
+  useThemeProps: (inProps) => useDefaultProps({ props: inProps, name: 'MuiStack' }),
 });
 
 Stack.propTypes /* remove-proptypes */ = {

packages/mui-material/test/describeConformance.ts

@@ -3,6 +3,7 @@ import {
   ConformanceOptions,
 } from '@mui/internal-test-utils';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
+import DefaultPropsProvider from '@mui/material/DefaultPropsProvider';
 
 export default function describeConformance(
   minimalElement: React.ReactElement<unknown>,
@@ -12,6 +13,7 @@ export default function describeConformance(
     return {
       ThemeProvider,
       createTheme,
+      DefaultPropsProvider,
       ...getOptions(),
     };
   }