From 86c14a8d2885aac37d4d083d29206907ceea3948 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Wed, 23 Oct 2024 11:56:14 +0700
Subject: [PATCH 1/2] replace useThemeProps with useDefaultProps

---
 packages/mui-material/src/Container/Container.js       | 4 ++--
 packages/mui-material/src/Grid/Grid.js                 | 4 ++--
 packages/mui-material/src/Grid2/Grid2.tsx              | 5 +++--
 packages/mui-material/src/NativeSelect/NativeSelect.js | 4 ++--
 packages/mui-material/src/Select/Select.js             | 4 ++--
 packages/mui-material/src/Stack/Stack.js               | 4 ++--
 6 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/packages/mui-material/src/Container/Container.js b/packages/mui-material/src/Container/Container.js
index f6ba767d0fcf90..acd6ef3778b913 100644
--- a/packages/mui-material/src/Container/Container.js
+++ b/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 */ = {
diff --git a/packages/mui-material/src/Grid/Grid.js b/packages/mui-material/src/Grid/Grid.js
index fd558579691bce..4968b320d73537 100644
--- a/packages/mui-material/src/Grid/Grid.js
+++ b/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);
diff --git a/packages/mui-material/src/Grid2/Grid2.tsx b/packages/mui-material/src/Grid2/Grid2.tsx
index 49d3b12257ad43..d3d2a873bb52a7 100644
--- a/packages/mui-material/src/Grid2/Grid2.tsx
+++ b/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 */ = {
diff --git a/packages/mui-material/src/NativeSelect/NativeSelect.js b/packages/mui-material/src/NativeSelect/NativeSelect.js
index ebfa1ea9ca753d..b726f039b2f963 100644
--- a/packages/mui-material/src/NativeSelect/NativeSelect.js
+++ b/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,
diff --git a/packages/mui-material/src/Select/Select.js b/packages/mui-material/src/Select/Select.js
index 46985fa13a0efc..d32ac5cf7eca0b 100644
--- a/packages/mui-material/src/Select/Select.js
+++ b/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,
diff --git a/packages/mui-material/src/Stack/Stack.js b/packages/mui-material/src/Stack/Stack.js
index fa92f37471b37a..7afabd5654d5c8 100644
--- a/packages/mui-material/src/Stack/Stack.js
+++ b/packages/mui-material/src/Stack/Stack.js
@@ -2,7 +2,7 @@
 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', {
@@ -10,7 +10,7 @@ const Stack = createStack({
     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 */ = {

From e5c634c8cd770faf6e30604a27b257cb6b1398d7 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Wed, 23 Oct 2024 14:59:27 +0700
Subject: [PATCH 2/2] add test

---
 .../test-utils/src/describeConformance.tsx    | 39 +++++++++++++++++++
 .../mui-material/test/describeConformance.ts  |  2 +
 2 files changed, 41 insertions(+)

diff --git a/packages-internal/test-utils/src/describeConformance.tsx b/packages-internal/test-utils/src/describeConformance.tsx
index 1dc386ddd76277..3f9dd40eccfe80 100644
--- a/packages-internal/test-utils/src/describeConformance.tsx
+++ b/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');
+    });
+  });
 }
 
 /**
diff --git a/packages/mui-material/test/describeConformance.ts b/packages/mui-material/test/describeConformance.ts
index 466ef545767c2f..81ce6b2846999c 100644
--- a/packages/mui-material/test/describeConformance.ts
+++ b/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(),
     };
   }