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; 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( + + {element} + , + ); + + expect(container.firstChild).to.have.attribute(testProp, 'testProp'); + }); + }); } /** 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; 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 = ; * An alternative to `