diff --git a/packages/api-docs-builder-core/materialUi/projectSettings.ts b/packages/api-docs-builder-core/materialUi/projectSettings.ts index 18b7dcf6a5928a..ccac4f8f7dfd69 100644 --- a/packages/api-docs-builder-core/materialUi/projectSettings.ts +++ b/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, diff --git a/packages/api-docs-builder-core/muiSystem/projectSettings.ts b/packages/api-docs-builder-core/muiSystem/projectSettings.ts index b07151a3ed78b2..3acdc3b5a2e35c 100644 --- a/packages/api-docs-builder-core/muiSystem/projectSettings.ts +++ b/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', diff --git a/packages/eslint-plugin-material-ui/src/rules/mui-name-matches-component-name.js b/packages/eslint-plugin-material-ui/src/rules/mui-name-matches-component-name.js index 008258d91b249c..c42ff49235e974 100644 --- a/packages/eslint-plugin-material-ui/src/rules/mui-name-matches-component-name.js +++ b/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) { diff --git a/packages/eslint-plugin-material-ui/src/rules/mui-name-matches-component-name.test.js b/packages/eslint-plugin-material-ui/src/rules/mui-name-matches-component-name.test.js index b151a90806a1f4..fc3d04ff919a53 100644 --- a/packages/eslint-plugin-material-ui/src/rules/mui-name-matches-component-name.test.js +++ b/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, ref: React.Ref, ) { - 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; `, - ` - const useThemeProps = createUseThemeProps('MuiBadge'); - `, { code: ` const StaticDateRangePicker = React.forwardRef(function StaticDateRangePicker( @@ -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, ref: React.Ref, ) { - 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', - }, - ], - }, ], }); diff --git a/packages/mui-lab/src/LoadingButton/LoadingButton.js b/packages/mui-lab/src/LoadingButton/LoadingButton.js index b6fe4c50569242..13d5a9aec21df1 100644 --- a/packages/mui-lab/src/LoadingButton/LoadingButton.js +++ b/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, diff --git a/packages/mui-lab/src/zero-styled/index.ts b/packages/mui-lab/src/zero-styled/index.ts index ac070a82614dfd..b13433b3704526 100644 --- a/packages/mui-lab/src/zero-styled/index.ts +++ b/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; -} diff --git a/packages/mui-material/src/Accordion/Accordion.js b/packages/mui-material/src/Accordion/Accordion.js index dfff92e9a797e7..6d38d0f05c4443 100644 --- a/packages/mui-material/src/Accordion/Accordion.js +++ b/packages/mui-material/src/Accordion/Accordion.js @@ -5,7 +5,8 @@ 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'; @@ -13,8 +14,6 @@ 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, diff --git a/packages/mui-material/src/AccordionActions/AccordionActions.js b/packages/mui-material/src/AccordionActions/AccordionActions.js index 48414535b5d490..df67d059a1d7d8 100644 --- a/packages/mui-material/src/AccordionActions/AccordionActions.js +++ b/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 }; diff --git a/packages/mui-material/src/AccordionDetails/AccordionDetails.js b/packages/mui-material/src/AccordionDetails/AccordionDetails.js index d49d13b141d3aa..bd07c757aad8ea 100644 --- a/packages/mui-material/src/AccordionDetails/AccordionDetails.js +++ b/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); diff --git a/packages/mui-material/src/AccordionSummary/AccordionSummary.js b/packages/mui-material/src/AccordionSummary/AccordionSummary.js index 6c9ed037c3bd7a..3f23fac82bf689 100644 --- a/packages/mui-material/src/AccordionSummary/AccordionSummary.js +++ b/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); diff --git a/packages/mui-material/src/Alert/Alert.js b/packages/mui-material/src/Alert/Alert.js index 824c3fcd1ecc35..b5f3de7861f3ee 100644 --- a/packages/mui-material/src/Alert/Alert.js +++ b/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, diff --git a/packages/mui-material/src/AlertTitle/AlertTitle.js b/packages/mui-material/src/AlertTitle/AlertTitle.js index 01d427e93b9a91..f8e6d0cb3711df 100644 --- a/packages/mui-material/src/AlertTitle/AlertTitle.js +++ b/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', }); diff --git a/packages/mui-material/src/AppBar/AppBar.js b/packages/mui-material/src/AppBar/AppBar.js index 0551398ba2ddd8..d1f60b6a9960d6 100644 --- a/packages/mui-material/src/AppBar/AppBar.js +++ b/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', diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.js b/packages/mui-material/src/Autocomplete/Autocomplete.js index ec6e7d47ecd959..c8ba035f39ee56 100644 --- a/packages/mui-material/src/Autocomplete/Autocomplete.js +++ b/packages/mui-material/src/Autocomplete/Autocomplete.js @@ -18,13 +18,12 @@ import outlinedInputClasses from '../OutlinedInput/outlinedInputClasses'; import filledInputClasses from '../FilledInput/filledInputClasses'; import ClearIcon from '../internal/svg-icons/Close'; import ArrowDropDownIcon from '../internal/svg-icons/ArrowDropDown'; -import { styled, createUseThemeProps } from '../zero-styled'; +import { styled } from '../zero-styled'; +import { useDefaultProps } from '../DefaultPropsProvider'; import autocompleteClasses, { getAutocompleteUtilityClass } from './autocompleteClasses'; import capitalize from '../utils/capitalize'; import useSlot from '../utils/useSlot'; -const useThemeProps = createUseThemeProps('MuiAutocomplete'); - const useUtilityClasses = (ownerState) => { const { classes, @@ -411,7 +410,7 @@ const AutocompleteGroupUl = styled('ul', { export { createFilterOptions }; const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiAutocomplete' }); + const props = useDefaultProps({ props: inProps, name: 'MuiAutocomplete' }); /* eslint-disable @typescript-eslint/no-unused-vars */ const { diff --git a/packages/mui-material/src/Avatar/Avatar.js b/packages/mui-material/src/Avatar/Avatar.js index 30c2f794d52534..90425bcae320aa 100644 --- a/packages/mui-material/src/Avatar/Avatar.js +++ b/packages/mui-material/src/Avatar/Avatar.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 Person from '../internal/svg-icons/Person'; import { getAvatarUtilityClass } from './avatarClasses'; import useSlot from '../utils/useSlot'; -const useThemeProps = createUseThemeProps('MuiAvatar'); - const useUtilityClasses = (ownerState) => { const { classes, variant, colorDefault } = ownerState; @@ -143,7 +142,7 @@ function useLoaded({ crossOrigin, referrerPolicy, src, srcSet }) { } const Avatar = React.forwardRef(function Avatar(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiAvatar' }); + const props = useDefaultProps({ props: inProps, name: 'MuiAvatar' }); const { alt, children: childrenProp, diff --git a/packages/mui-material/src/AvatarGroup/AvatarGroup.js b/packages/mui-material/src/AvatarGroup/AvatarGroup.js index ba3f229dde4b0f..507109723fb912 100644 --- a/packages/mui-material/src/AvatarGroup/AvatarGroup.js +++ b/packages/mui-material/src/AvatarGroup/AvatarGroup.js @@ -5,7 +5,8 @@ import { isFragment } from 'react-is'; 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 Avatar, { avatarClasses } from '../Avatar'; import avatarGroupClasses, { getAvatarGroupUtilityClass } from './avatarGroupClasses'; import useSlot from '../utils/useSlot'; @@ -15,8 +16,6 @@ const SPACINGS = { medium: -8, }; -const useThemeProps = createUseThemeProps('MuiAlert'); - const useUtilityClasses = (ownerState) => { const { classes } = ownerState; @@ -49,7 +48,7 @@ const AvatarGroupRoot = styled('div', { })); const AvatarGroup = React.forwardRef(function AvatarGroup(inProps, ref) { - const props = useThemeProps({ + const props = useDefaultProps({ props: inProps, name: 'MuiAvatarGroup', }); diff --git a/packages/mui-material/src/Backdrop/Backdrop.js b/packages/mui-material/src/Backdrop/Backdrop.js index 36f8378bfd5ecc..549666a047fd94 100644 --- a/packages/mui-material/src/Backdrop/Backdrop.js +++ b/packages/mui-material/src/Backdrop/Backdrop.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 useSlot from '../utils/useSlot'; import Fade from '../Fade'; import { getBackdropUtilityClass } from './backdropClasses'; -const useThemeProps = createUseThemeProps('MuiBackdrop'); - const useUtilityClasses = (ownerState) => { const { classes, invisible } = ownerState; @@ -50,7 +49,7 @@ const BackdropRoot = styled('div', { }); const Backdrop = React.forwardRef(function Backdrop(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiBackdrop' }); + const props = useDefaultProps({ props: inProps, name: 'MuiBackdrop' }); const { children, className, diff --git a/packages/mui-material/src/Badge/Badge.js b/packages/mui-material/src/Badge/Badge.js index 0750bffbdcf8cc..d3543f3c12715d 100644 --- a/packages/mui-material/src/Badge/Badge.js +++ b/packages/mui-material/src/Badge/Badge.js @@ -6,15 +6,14 @@ import usePreviousProps from '@mui/utils/usePreviousProps'; import composeClasses from '@mui/utils/composeClasses'; import { useBadge } from '@mui/base/useBadge'; import { useSlotProps } from '@mui/base/utils'; -import { styled, createUseThemeProps } from '../zero-styled'; +import { styled } from '../zero-styled'; +import { useDefaultProps } from '../DefaultPropsProvider'; import capitalize from '../utils/capitalize'; import badgeClasses, { getBadgeUtilityClass } from './badgeClasses'; const RADIUS_STANDARD = 10; const RADIUS_DOT = 4; -const useThemeProps = createUseThemeProps('MuiBadge'); - const useUtilityClasses = (ownerState) => { const { color, anchorOrigin, invisible, overlap, variant, classes = {} } = ownerState; @@ -240,7 +239,7 @@ const BadgeBadge = styled('span', { })); const Badge = React.forwardRef(function Badge(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiBadge' }); + const props = useDefaultProps({ props: inProps, name: 'MuiBadge' }); const { anchorOrigin: anchorOriginProp = { vertical: 'top', diff --git a/packages/mui-material/src/BottomNavigation/BottomNavigation.js b/packages/mui-material/src/BottomNavigation/BottomNavigation.js index 0d6ce8ed1f964e..976f43c61bd4ac 100755 --- a/packages/mui-material/src/BottomNavigation/BottomNavigation.js +++ b/packages/mui-material/src/BottomNavigation/BottomNavigation.js @@ -4,11 +4,10 @@ import { isFragment } from 'react-is'; 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 { getBottomNavigationUtilityClass } from './bottomNavigationClasses'; -const useThemeProps = createUseThemeProps('MuiBottomNavigation'); - const useUtilityClasses = (ownerState) => { const { classes } = ownerState; @@ -31,7 +30,7 @@ const BottomNavigationRoot = styled('div', { })); const BottomNavigation = React.forwardRef(function BottomNavigation(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiBottomNavigation' }); + const props = useDefaultProps({ props: inProps, name: 'MuiBottomNavigation' }); const { children, className, diff --git a/packages/mui-material/src/BottomNavigationAction/BottomNavigationAction.js b/packages/mui-material/src/BottomNavigationAction/BottomNavigationAction.js index e583152be06596..e47b9c83e1890c 100644 --- a/packages/mui-material/src/BottomNavigationAction/BottomNavigationAction.js +++ b/packages/mui-material/src/BottomNavigationAction/BottomNavigationAction.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 unsupportedProp from '../utils/unsupportedProp'; import bottomNavigationActionClasses, { getBottomNavigationActionUtilityClass, } from './bottomNavigationActionClasses'; -const useThemeProps = createUseThemeProps('MuiBottomNavigationAction'); - const useUtilityClasses = (ownerState) => { const { classes, showLabel, selected } = ownerState; @@ -85,7 +84,7 @@ const BottomNavigationActionLabel = styled('span', { })); const BottomNavigationAction = React.forwardRef(function BottomNavigationAction(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiBottomNavigationAction' }); + const props = useDefaultProps({ props: inProps, name: 'MuiBottomNavigationAction' }); const { className, icon, diff --git a/packages/mui-material/src/Breadcrumbs/Breadcrumbs.js b/packages/mui-material/src/Breadcrumbs/Breadcrumbs.js index ae105db224e248..45a83fbbe6c62c 100644 --- a/packages/mui-material/src/Breadcrumbs/Breadcrumbs.js +++ b/packages/mui-material/src/Breadcrumbs/Breadcrumbs.js @@ -6,13 +6,12 @@ import clsx from 'clsx'; import integerPropType from '@mui/utils/integerPropType'; import { useSlotProps } from '@mui/base/utils'; 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 BreadcrumbCollapsed from './BreadcrumbCollapsed'; import breadcrumbsClasses, { getBreadcrumbsUtilityClass } from './breadcrumbsClasses'; -const useThemeProps = createUseThemeProps('MuiBreadcrumbs'); - const useUtilityClasses = (ownerState) => { const { classes } = ownerState; @@ -81,7 +80,7 @@ function insertSeparators(items, className, separator, ownerState) { } const Breadcrumbs = React.forwardRef(function Breadcrumbs(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiBreadcrumbs' }); + const props = useDefaultProps({ props: inProps, name: 'MuiBreadcrumbs' }); const { children, className, diff --git a/packages/mui-material/src/Button/Button.js b/packages/mui-material/src/Button/Button.js index 94d8909fa339ab..a61970c0e6ec66 100644 --- a/packages/mui-material/src/Button/Button.js +++ b/packages/mui-material/src/Button/Button.js @@ -6,15 +6,14 @@ import resolveProps from '@mui/utils/resolveProps'; import composeClasses from '@mui/utils/composeClasses'; import { alpha } from '@mui/system/colorManipulator'; import rootShouldForwardProp from '../styles/rootShouldForwardProp'; -import { styled, createUseThemeProps } from '../zero-styled'; +import { styled } from '../zero-styled'; +import { useDefaultProps } from '../DefaultPropsProvider'; import ButtonBase from '../ButtonBase'; import capitalize from '../utils/capitalize'; import buttonClasses, { getButtonUtilityClass } from './buttonClasses'; import ButtonGroupContext from '../ButtonGroup/ButtonGroupContext'; import ButtonGroupButtonContext from '../ButtonGroup/ButtonGroupButtonContext'; -const useThemeProps = createUseThemeProps('MuiButton'); - const useUtilityClasses = (ownerState) => { const { color, disableElevation, fullWidth, size, variant, classes } = ownerState; @@ -351,7 +350,7 @@ const Button = React.forwardRef(function Button(inProps, ref) { const contextProps = React.useContext(ButtonGroupContext); const buttonGroupButtonContextPositionClassName = React.useContext(ButtonGroupButtonContext); const resolvedProps = resolveProps(contextProps, inProps); - const props = useThemeProps({ props: resolvedProps, name: 'MuiButton' }); + const props = useDefaultProps({ props: resolvedProps, name: 'MuiButton' }); const { children, color = 'primary', diff --git a/packages/mui-material/src/ButtonBase/ButtonBase.js b/packages/mui-material/src/ButtonBase/ButtonBase.js index e97439c2ae8fc5..e2dc37b66a9821 100644 --- a/packages/mui-material/src/ButtonBase/ButtonBase.js +++ b/packages/mui-material/src/ButtonBase/ButtonBase.js @@ -5,15 +5,14 @@ import clsx from 'clsx'; import refType from '@mui/utils/refType'; import elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef'; import composeClasses from '@mui/utils/composeClasses'; -import { styled, createUseThemeProps } from '../zero-styled'; +import { styled } from '../zero-styled'; +import { useDefaultProps } from '../DefaultPropsProvider'; import useForkRef from '../utils/useForkRef'; import useEventCallback from '../utils/useEventCallback'; import useIsFocusVisible from '../utils/useIsFocusVisible'; import TouchRipple from './TouchRipple'; import buttonBaseClasses, { getButtonBaseUtilityClass } from './buttonBaseClasses'; -const useThemeProps = createUseThemeProps('MuiButtonBase'); - const useUtilityClasses = (ownerState) => { const { disabled, focusVisible, focusVisibleClassName, classes } = ownerState; @@ -74,7 +73,7 @@ export const ButtonBaseRoot = styled('button', { * It contains a load of style reset and some focus/ripple logic. */ const ButtonBase = React.forwardRef(function ButtonBase(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiButtonBase' }); + const props = useDefaultProps({ props: inProps, name: 'MuiButtonBase' }); const { action, centerRipple = false, diff --git a/packages/mui-material/src/ButtonBase/TouchRipple.js b/packages/mui-material/src/ButtonBase/TouchRipple.js index 0d4fc84c9aa6ac..ae7fe8c85ec36f 100644 --- a/packages/mui-material/src/ButtonBase/TouchRipple.js +++ b/packages/mui-material/src/ButtonBase/TouchRipple.js @@ -4,12 +4,11 @@ import PropTypes from 'prop-types'; import { TransitionGroup } from 'react-transition-group'; import clsx from 'clsx'; import useTimeout from '@mui/utils/useTimeout'; -import { keyframes, styled, createUseThemeProps } from '../zero-styled'; +import { keyframes, styled } from '../zero-styled'; +import { useDefaultProps } from '../DefaultPropsProvider'; import Ripple from './Ripple'; import touchRippleClasses from './touchRippleClasses'; -const useThemeProps = createUseThemeProps('MuiTouchRipple'); - const DURATION = 550; export const DELAY_RIPPLE = 80; @@ -120,7 +119,7 @@ export const TouchRippleRipple = styled(Ripple, { * TODO v5: Make private */ const TouchRipple = React.forwardRef(function TouchRipple(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiTouchRipple' }); + const props = useDefaultProps({ props: inProps, name: 'MuiTouchRipple' }); const { center: centerProp = false, classes = {}, className, ...other } = props; const [ripples, setRipples] = React.useState([]); diff --git a/packages/mui-material/src/ButtonGroup/ButtonGroup.js b/packages/mui-material/src/ButtonGroup/ButtonGroup.js index ad8c14004b9847..0486a079366ffe 100644 --- a/packages/mui-material/src/ButtonGroup/ButtonGroup.js +++ b/packages/mui-material/src/ButtonGroup/ButtonGroup.js @@ -6,13 +6,12 @@ import composeClasses from '@mui/utils/composeClasses'; import { alpha } from '@mui/system/colorManipulator'; import getValidReactChildren from '@mui/utils/getValidReactChildren'; import capitalize from '../utils/capitalize'; -import { styled, createUseThemeProps } from '../zero-styled'; +import { styled } from '../zero-styled'; +import { useDefaultProps } from '../DefaultPropsProvider'; import buttonGroupClasses, { getButtonGroupUtilityClass } from './buttonGroupClasses'; import ButtonGroupContext from './ButtonGroupContext'; import ButtonGroupButtonContext from './ButtonGroupButtonContext'; -const useThemeProps = createUseThemeProps('MuiButtonGroup'); - const overridesResolver = (props, styles) => { const { ownerState } = props; @@ -247,7 +246,7 @@ const ButtonGroupRoot = styled('div', { })); const ButtonGroup = React.forwardRef(function ButtonGroup(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiButtonGroup' }); + const props = useDefaultProps({ props: inProps, name: 'MuiButtonGroup' }); const { children, className, diff --git a/packages/mui-material/src/Card/Card.js b/packages/mui-material/src/Card/Card.js index 6491c1499e6a0b..4d658cc688800c 100644 --- a/packages/mui-material/src/Card/Card.js +++ b/packages/mui-material/src/Card/Card.js @@ -4,12 +4,11 @@ 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 Paper from '../Paper'; import { getCardUtilityClass } from './cardClasses'; -const useThemeProps = createUseThemeProps('MuiCard'); - const useUtilityClasses = (ownerState) => { const { classes } = ownerState; @@ -29,7 +28,7 @@ const CardRoot = styled(Paper, { }); const Card = React.forwardRef(function Card(inProps, ref) { - const props = useThemeProps({ + const props = useDefaultProps({ props: inProps, name: 'MuiCard', }); diff --git a/packages/mui-material/src/CardActionArea/CardActionArea.js b/packages/mui-material/src/CardActionArea/CardActionArea.js index 4100818481d347..f6b5168e3ccc4b 100644 --- a/packages/mui-material/src/CardActionArea/CardActionArea.js +++ b/packages/mui-material/src/CardActionArea/CardActionArea.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 cardActionAreaClasses, { getCardActionAreaUtilityClass } from './cardActionAreaClasses'; import ButtonBase from '../ButtonBase'; -const useThemeProps = createUseThemeProps('MuiCardActionArea'); - const useUtilityClasses = (ownerState) => { const { classes } = ownerState; @@ -61,7 +60,7 @@ const CardActionAreaFocusHighlight = styled('span', { })); const CardActionArea = React.forwardRef(function CardActionArea(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiCardActionArea' }); + const props = useDefaultProps({ props: inProps, name: 'MuiCardActionArea' }); const { children, className, focusVisibleClassName, ...other } = props; const ownerState = props; diff --git a/packages/mui-material/src/CardActions/CardActions.js b/packages/mui-material/src/CardActions/CardActions.js index 9d320165213fd3..5213656597c565 100644 --- a/packages/mui-material/src/CardActions/CardActions.js +++ b/packages/mui-material/src/CardActions/CardActions.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 { getCardActionsUtilityClass } from './cardActionsClasses'; -const useThemeProps = createUseThemeProps('MuiCardActions'); - const useUtilityClasses = (ownerState) => { const { classes, disableSpacing } = ownerState; @@ -43,7 +42,7 @@ const CardActionsRoot = styled('div', { }); const CardActions = React.forwardRef(function CardActions(inProps, ref) { - const props = useThemeProps({ + const props = useDefaultProps({ props: inProps, name: 'MuiCardActions', }); diff --git a/packages/mui-material/src/CardContent/CardContent.js b/packages/mui-material/src/CardContent/CardContent.js index 860be046db369d..b556fdcd127f9d 100644 --- a/packages/mui-material/src/CardContent/CardContent.js +++ b/packages/mui-material/src/CardContent/CardContent.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 { getCardContentUtilityClass } from './cardContentClasses'; -const useThemeProps = createUseThemeProps('MuiCardContent'); - const useUtilityClasses = (ownerState) => { const { classes } = ownerState; @@ -30,7 +29,7 @@ const CardContentRoot = styled('div', { }); const CardContent = React.forwardRef(function CardContent(inProps, ref) { - const props = useThemeProps({ + const props = useDefaultProps({ props: inProps, name: 'MuiCardContent', }); diff --git a/packages/mui-material/src/CardHeader/CardHeader.js b/packages/mui-material/src/CardHeader/CardHeader.js index 694784cca9a52e..1869a47bafd733 100644 --- a/packages/mui-material/src/CardHeader/CardHeader.js +++ b/packages/mui-material/src/CardHeader/CardHeader.js @@ -4,11 +4,10 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; import Typography from '../Typography'; -import { styled, createUseThemeProps } from '../zero-styled'; +import { styled } from '../zero-styled'; +import { useDefaultProps } from '../DefaultPropsProvider'; import cardHeaderClasses, { getCardHeaderUtilityClass } from './cardHeaderClasses'; -const useThemeProps = createUseThemeProps('MuiCardHeader'); - const useUtilityClasses = (ownerState) => { const { classes } = ownerState; @@ -69,7 +68,7 @@ const CardHeaderContent = styled('div', { }); const CardHeader = React.forwardRef(function CardHeader(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiCardHeader' }); + const props = useDefaultProps({ props: inProps, name: 'MuiCardHeader' }); const { action, avatar, diff --git a/packages/mui-material/src/CardMedia/CardMedia.js b/packages/mui-material/src/CardMedia/CardMedia.js index 94d3746941c149..9a11d422b579db 100644 --- a/packages/mui-material/src/CardMedia/CardMedia.js +++ b/packages/mui-material/src/CardMedia/CardMedia.js @@ -4,11 +4,10 @@ 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 { getCardMediaUtilityClass } from './cardMediaClasses'; -const useThemeProps = createUseThemeProps('MuiCardMedia'); - const useUtilityClasses = (ownerState) => { const { classes, isMediaComponent, isImageComponent } = ownerState; @@ -53,7 +52,7 @@ const MEDIA_COMPONENTS = ['video', 'audio', 'picture', 'iframe', 'img']; const IMAGE_COMPONENTS = ['picture', 'img']; const CardMedia = React.forwardRef(function CardMedia(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiCardMedia' }); + const props = useDefaultProps({ props: inProps, name: 'MuiCardMedia' }); const { children, className, component = 'div', image, src, style, ...other } = props; const isMediaComponent = MEDIA_COMPONENTS.indexOf(component) !== -1; diff --git a/packages/mui-material/src/Checkbox/Checkbox.js b/packages/mui-material/src/Checkbox/Checkbox.js index 3ee5d2c856ede9..9f76fc068f4d78 100644 --- a/packages/mui-material/src/Checkbox/Checkbox.js +++ b/packages/mui-material/src/Checkbox/Checkbox.js @@ -12,9 +12,9 @@ import IndeterminateCheckBoxIcon from '../internal/svg-icons/IndeterminateCheckB import capitalize from '../utils/capitalize'; import rootShouldForwardProp from '../styles/rootShouldForwardProp'; import checkboxClasses, { getCheckboxUtilityClass } from './checkboxClasses'; -import { createUseThemeProps, styled } from '../zero-styled'; +import { styled } from '../zero-styled'; -const useThemeProps = createUseThemeProps('MuiCheckbox'); +import { useDefaultProps } from '../DefaultPropsProvider'; const useUtilityClasses = (ownerState) => { const { classes, indeterminate, color, size } = ownerState; @@ -108,7 +108,7 @@ const defaultIcon = ; const defaultIndeterminateIcon = ; const Checkbox = React.forwardRef(function Checkbox(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiCheckbox' }); + const props = useDefaultProps({ props: inProps, name: 'MuiCheckbox' }); const { checkedIcon = defaultCheckedIcon, color = 'primary', diff --git a/packages/mui-material/src/Chip/Chip.js b/packages/mui-material/src/Chip/Chip.js index 6420d7a9da1065..9b42fef06e4edb 100644 --- a/packages/mui-material/src/Chip/Chip.js +++ b/packages/mui-material/src/Chip/Chip.js @@ -9,11 +9,10 @@ import useForkRef from '../utils/useForkRef'; import unsupportedProp from '../utils/unsupportedProp'; import capitalize from '../utils/capitalize'; import ButtonBase from '../ButtonBase'; -import { styled, createUseThemeProps } from '../zero-styled'; +import { styled } from '../zero-styled'; +import { useDefaultProps } from '../DefaultPropsProvider'; import chipClasses, { getChipUtilityClass } from './chipClasses'; -const useThemeProps = createUseThemeProps('MuiChip'); - const useUtilityClasses = (ownerState) => { const { classes, disabled, size, color, iconColor, onDelete, clickable, variant } = ownerState; @@ -378,7 +377,7 @@ function isDeleteKeyboardEvent(keyboardEvent) { * Chips represent complex entities in small blocks, such as a contact. */ const Chip = React.forwardRef(function Chip(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiChip' }); + const props = useDefaultProps({ props: inProps, name: 'MuiChip' }); const { avatar: avatarProp, className, diff --git a/packages/mui-material/src/CircularProgress/CircularProgress.js b/packages/mui-material/src/CircularProgress/CircularProgress.js index 9be1a8db6b74bd..68fa5a0e4143eb 100644 --- a/packages/mui-material/src/CircularProgress/CircularProgress.js +++ b/packages/mui-material/src/CircularProgress/CircularProgress.js @@ -4,12 +4,11 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import chainPropTypes from '@mui/utils/chainPropTypes'; import composeClasses from '@mui/utils/composeClasses'; -import { keyframes, css, createUseThemeProps, styled } from '../zero-styled'; +import { keyframes, css, styled } from '../zero-styled'; +import { useDefaultProps } from '../DefaultPropsProvider'; import capitalize from '../utils/capitalize'; import { getCircularProgressUtilityClass } from './circularProgressClasses'; -const useThemeProps = createUseThemeProps('MuiCircularProgress'); - const SIZE = 44; const circularRotateKeyframe = keyframes` @@ -170,7 +169,7 @@ const CircularProgressCircle = styled('circle', { * attribute to `true` on that region until it has finished loading. */ const CircularProgress = React.forwardRef(function CircularProgress(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiCircularProgress' }); + const props = useDefaultProps({ props: inProps, name: 'MuiCircularProgress' }); const { className, color = 'primary', diff --git a/packages/mui-material/src/Collapse/Collapse.js b/packages/mui-material/src/Collapse/Collapse.js index dfbd74726d4e00..dcb6dd2ec21da0 100644 --- a/packages/mui-material/src/Collapse/Collapse.js +++ b/packages/mui-material/src/Collapse/Collapse.js @@ -6,14 +6,13 @@ import { Transition } from 'react-transition-group'; import useTimeout from '@mui/utils/useTimeout'; import elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef'; import composeClasses from '@mui/utils/composeClasses'; -import { styled, createUseThemeProps, useTheme } from '../zero-styled'; +import { styled, useTheme } from '../zero-styled'; +import { useDefaultProps } from '../DefaultPropsProvider'; import { duration } from '../styles/createTransitions'; import { getTransitionProps } from '../transitions/utils'; import { useForkRef } from '../utils'; import { getCollapseUtilityClass } from './collapseClasses'; -const useThemeProps = createUseThemeProps('MuiCollapse'); - const useUtilityClasses = (ownerState) => { const { orientation, classes } = ownerState; @@ -133,7 +132,7 @@ const CollapseWrapperInner = styled('div', { * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally. */ const Collapse = React.forwardRef(function Collapse(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiCollapse' }); + const props = useDefaultProps({ props: inProps, name: 'MuiCollapse' }); const { addEndListener, children, diff --git a/packages/mui-material/src/DefaultPropsProvider/DefaultPropsProvider.spec.tsx b/packages/mui-material/src/DefaultPropsProvider/DefaultPropsProvider.spec.tsx new file mode 100644 index 00000000000000..e2746d2c6db9e6 --- /dev/null +++ b/packages/mui-material/src/DefaultPropsProvider/DefaultPropsProvider.spec.tsx @@ -0,0 +1,21 @@ +import * as React from 'react'; +import DefaultPropsProvider from '@mui/material/DefaultPropsProvider'; + +function CustomComponent() { + return null; +} + +; + +; diff --git a/packages/mui-material/src/DefaultPropsProvider/DefaultPropsProvider.tsx b/packages/mui-material/src/DefaultPropsProvider/DefaultPropsProvider.tsx new file mode 100644 index 00000000000000..ecfd3b1c56df14 --- /dev/null +++ b/packages/mui-material/src/DefaultPropsProvider/DefaultPropsProvider.tsx @@ -0,0 +1,39 @@ +'use client'; +import * as React from 'react'; +import PropTypes from 'prop-types'; +import SystemDefaultPropsProvider, { + useDefaultProps as useSystemDefaultProps, +} from '@mui/system/DefaultPropsProvider'; +import type { ComponentsPropsList } from '../styles/props'; + +function DefaultPropsProvider( + props: React.PropsWithChildren<{ + value: { [P in keyof ComponentsPropsList]?: Partial }; + }>, +) { + return ; +} + +DefaultPropsProvider.propTypes /* remove-proptypes */ = { + // ┌────────────────────────────── Warning ──────────────────────────────┐ + // │ These PropTypes are generated from the TypeScript type definitions. │ + // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │ + // └─────────────────────────────────────────────────────────────────────┘ + /** + * @ignore + */ + children: PropTypes.node, + /** + * @ignore + */ + value: PropTypes.object.isRequired, +} as any; + +export default DefaultPropsProvider; + +export function useDefaultProps>(params: { + props: Props; + name: string; +}) { + return useSystemDefaultProps(params) as Props; +} diff --git a/packages/mui-material/src/DefaultPropsProvider/index.ts b/packages/mui-material/src/DefaultPropsProvider/index.ts new file mode 100644 index 00000000000000..646b9a27128699 --- /dev/null +++ b/packages/mui-material/src/DefaultPropsProvider/index.ts @@ -0,0 +1 @@ +export { default, useDefaultProps } from './DefaultPropsProvider'; diff --git a/packages/mui-material/src/Dialog/Dialog.js b/packages/mui-material/src/Dialog/Dialog.js index 0988a7c8818508..9ada355c5155aa 100644 --- a/packages/mui-material/src/Dialog/Dialog.js +++ b/packages/mui-material/src/Dialog/Dialog.js @@ -11,9 +11,9 @@ import Paper from '../Paper'; import dialogClasses, { getDialogUtilityClass } from './dialogClasses'; import DialogContext from './DialogContext'; import Backdrop from '../Backdrop'; -import { styled, createUseThemeProps, useTheme } from '../zero-styled'; +import { styled, useTheme } from '../zero-styled'; -const useThemeProps = createUseThemeProps('MuiDialog'); +import { useDefaultProps } from '../DefaultPropsProvider'; const DialogBackdrop = styled(Backdrop, { name: 'MuiDialog', @@ -203,7 +203,7 @@ const DialogPaper = styled(Paper, { * Dialogs are overlaid modal paper based components with a backdrop. */ const Dialog = React.forwardRef(function Dialog(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiDialog' }); + const props = useDefaultProps({ props: inProps, name: 'MuiDialog' }); const theme = useTheme(); const defaultTransitionDuration = { enter: theme.transitions.duration.enteringScreen, diff --git a/packages/mui-material/src/DialogActions/DialogActions.js b/packages/mui-material/src/DialogActions/DialogActions.js index b57f1dab955c8d..8e1b730bc4c096 100644 --- a/packages/mui-material/src/DialogActions/DialogActions.js +++ b/packages/mui-material/src/DialogActions/DialogActions.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 { getDialogActionsUtilityClass } from './dialogActionsClasses'; -const useThemeProps = createUseThemeProps('MuiDialogActions'); - const useUtilityClasses = (ownerState) => { const { classes, disableSpacing } = ownerState; @@ -45,7 +44,7 @@ const DialogActionsRoot = styled('div', { }); const DialogActions = React.forwardRef(function DialogActions(inProps, ref) { - const props = useThemeProps({ + const props = useDefaultProps({ props: inProps, name: 'MuiDialogActions', }); diff --git a/packages/mui-material/src/DialogContent/DialogContent.js b/packages/mui-material/src/DialogContent/DialogContent.js index 2a9d222ef44c2b..93c017300eb144 100644 --- a/packages/mui-material/src/DialogContent/DialogContent.js +++ b/packages/mui-material/src/DialogContent/DialogContent.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 { getDialogContentUtilityClass } from './dialogContentClasses'; import dialogTitleClasses from '../DialogTitle/dialogTitleClasses'; -const useThemeProps = createUseThemeProps('MuiDialogContent'); - const useUtilityClasses = (ownerState) => { const { classes, dividers } = ownerState; @@ -54,7 +53,7 @@ const DialogContentRoot = styled('div', { })); const DialogContent = React.forwardRef(function DialogContent(inProps, ref) { - const props = useThemeProps({ + const props = useDefaultProps({ props: inProps, name: 'MuiDialogContent', }); diff --git a/packages/mui-material/src/DialogContentText/DialogContentText.js b/packages/mui-material/src/DialogContentText/DialogContentText.js index ebb915bb144f50..359a7000387e1c 100644 --- a/packages/mui-material/src/DialogContentText/DialogContentText.js +++ b/packages/mui-material/src/DialogContentText/DialogContentText.js @@ -4,12 +4,11 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; import rootShouldForwardProp from '../styles/rootShouldForwardProp'; -import { styled, createUseThemeProps } from '../zero-styled'; +import { styled } from '../zero-styled'; +import { useDefaultProps } from '../DefaultPropsProvider'; import Typography from '../Typography'; import { getDialogContentTextUtilityClass } from './dialogContentTextClasses'; -const useThemeProps = createUseThemeProps('MuiDialogContentText'); - const useUtilityClasses = (ownerState) => { const { classes } = ownerState; @@ -33,7 +32,7 @@ const DialogContentTextRoot = styled(Typography, { })({}); const DialogContentText = React.forwardRef(function DialogContentText(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiDialogContentText' }); + const props = useDefaultProps({ props: inProps, name: 'MuiDialogContentText' }); const { children, className, ...ownerState } = props; const classes = useUtilityClasses(ownerState); diff --git a/packages/mui-material/src/DialogTitle/DialogTitle.js b/packages/mui-material/src/DialogTitle/DialogTitle.js index 9c59a9e706d32c..0f2b12d85caacb 100644 --- a/packages/mui-material/src/DialogTitle/DialogTitle.js +++ b/packages/mui-material/src/DialogTitle/DialogTitle.js @@ -4,12 +4,11 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; import Typography from '../Typography'; -import { styled, createUseThemeProps } from '../zero-styled'; +import { styled } from '../zero-styled'; +import { useDefaultProps } from '../DefaultPropsProvider'; import { getDialogTitleUtilityClass } from './dialogTitleClasses'; import DialogContext from '../Dialog/DialogContext'; -const useThemeProps = createUseThemeProps('MuiDialogTitle'); - const useUtilityClasses = (ownerState) => { const { classes } = ownerState; @@ -30,7 +29,7 @@ const DialogTitleRoot = styled(Typography, { }); const DialogTitle = React.forwardRef(function DialogTitle(inProps, ref) { - const props = useThemeProps({ + const props = useDefaultProps({ props: inProps, name: 'MuiDialogTitle', }); diff --git a/packages/mui-material/src/Divider/Divider.js b/packages/mui-material/src/Divider/Divider.js index 986b39f01b61af..906b8c8c36f0d5 100644 --- a/packages/mui-material/src/Divider/Divider.js +++ b/packages/mui-material/src/Divider/Divider.js @@ -4,11 +4,10 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; import { alpha } from '@mui/system/colorManipulator'; -import { styled, createUseThemeProps } from '../zero-styled'; +import { styled } from '../zero-styled'; +import { useDefaultProps } from '../DefaultPropsProvider'; import { getDividerUtilityClass } from './dividerClasses'; -const useThemeProps = createUseThemeProps('MuiDivider'); - const useUtilityClasses = (ownerState) => { const { absolute, children, classes, flexItem, light, orientation, textAlign, variant } = ownerState; @@ -216,7 +215,7 @@ const DividerWrapper = styled('span', { })); const Divider = React.forwardRef(function Divider(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiDivider' }); + const props = useDefaultProps({ props: inProps, name: 'MuiDivider' }); const { absolute = false, children, diff --git a/packages/mui-material/src/Drawer/Drawer.js b/packages/mui-material/src/Drawer/Drawer.js index 45f7b9bbb2af61..7973cbbea62aae 100644 --- a/packages/mui-material/src/Drawer/Drawer.js +++ b/packages/mui-material/src/Drawer/Drawer.js @@ -10,11 +10,10 @@ import Slide from '../Slide'; import Paper from '../Paper'; import capitalize from '../utils/capitalize'; import rootShouldForwardProp from '../styles/rootShouldForwardProp'; -import { styled, createUseThemeProps, useTheme } from '../zero-styled'; +import { styled, useTheme } from '../zero-styled'; +import { useDefaultProps } from '../DefaultPropsProvider'; import { getDrawerUtilityClass } from './drawerClasses'; -const useThemeProps = createUseThemeProps('MuiDrawer'); - const overridesResolver = (props, styles) => { const { ownerState } = props; @@ -180,7 +179,7 @@ export function getAnchor({ direction }, anchor) { * when `variant="temporary"` is set. */ const Drawer = React.forwardRef(function Drawer(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiDrawer' }); + const props = useDefaultProps({ props: inProps, name: 'MuiDrawer' }); const theme = useTheme(); const isRtl = useRtl(); const defaultTransitionDuration = { diff --git a/packages/mui-material/src/Fab/Fab.js b/packages/mui-material/src/Fab/Fab.js index cdb560dd8c09d7..71da7157e83527 100644 --- a/packages/mui-material/src/Fab/Fab.js +++ b/packages/mui-material/src/Fab/Fab.js @@ -7,9 +7,9 @@ import ButtonBase from '../ButtonBase'; import capitalize from '../utils/capitalize'; import fabClasses, { getFabUtilityClass } from './fabClasses'; import rootShouldForwardProp from '../styles/rootShouldForwardProp'; -import { styled, createUseThemeProps } from '../zero-styled'; +import { styled } from '../zero-styled'; -const useThemeProps = createUseThemeProps('MuiFab'); +import { useDefaultProps } from '../DefaultPropsProvider'; const useUtilityClasses = (ownerState) => { const { color, variant, classes, size } = ownerState; @@ -163,7 +163,7 @@ const FabRoot = styled(ButtonBase, { ); const Fab = React.forwardRef(function Fab(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiFab' }); + const props = useDefaultProps({ props: inProps, name: 'MuiFab' }); const { children, className, diff --git a/packages/mui-material/src/FilledInput/FilledInput.js b/packages/mui-material/src/FilledInput/FilledInput.js index 92e49730039934..fb0a867204b7d6 100644 --- a/packages/mui-material/src/FilledInput/FilledInput.js +++ b/packages/mui-material/src/FilledInput/FilledInput.js @@ -6,7 +6,8 @@ import PropTypes from 'prop-types'; import composeClasses from '@mui/utils/composeClasses'; import InputBase from '../InputBase'; import rootShouldForwardProp from '../styles/rootShouldForwardProp'; -import { styled, createUseThemeProps } from '../zero-styled'; +import { styled } from '../zero-styled'; +import { useDefaultProps } from '../DefaultPropsProvider'; import filledInputClasses, { getFilledInputUtilityClass } from './filledInputClasses'; import { rootOverridesResolver as inputBaseRootOverridesResolver, @@ -16,8 +17,6 @@ import { } from '../InputBase/InputBase'; import { capitalize } from '../utils'; -const useThemeProps = createUseThemeProps('MuiFilledInput'); - const useUtilityClasses = (ownerState) => { const { classes, disableUnderline, startAdornment, endAdornment, size, hiddenLabel, multiline } = ownerState; @@ -270,7 +269,7 @@ const FilledInputInput = styled(InputBaseInput, { })); const FilledInput = React.forwardRef(function FilledInput(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiFilledInput' }); + const props = useDefaultProps({ props: inProps, name: 'MuiFilledInput' }); const { disableUnderline = false, diff --git a/packages/mui-material/src/FormControl/FormControl.js b/packages/mui-material/src/FormControl/FormControl.js index e4b79ab62b9ecf..e9d5d01b773a4d 100644 --- a/packages/mui-material/src/FormControl/FormControl.js +++ b/packages/mui-material/src/FormControl/FormControl.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 { isFilled, isAdornedStart } from '../InputBase/utils'; import capitalize from '../utils/capitalize'; import isMuiElement from '../utils/isMuiElement'; import FormControlContext from './FormControlContext'; import { getFormControlUtilityClasses } from './formControlClasses'; -const useThemeProps = createUseThemeProps('MuiFormControl'); - const useUtilityClasses = (ownerState) => { const { classes, margin, fullWidth } = ownerState; const slots = { @@ -90,7 +89,7 @@ const FormControlRoot = styled('div', { * For instance, only one input can be focused at the same time, the state shouldn't be shared. */ const FormControl = React.forwardRef(function FormControl(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiFormControl' }); + const props = useDefaultProps({ props: inProps, name: 'MuiFormControl' }); const { children, className, diff --git a/packages/mui-material/src/FormControlLabel/FormControlLabel.js b/packages/mui-material/src/FormControlLabel/FormControlLabel.js index 5765933206a476..a277055f179a5c 100644 --- a/packages/mui-material/src/FormControlLabel/FormControlLabel.js +++ b/packages/mui-material/src/FormControlLabel/FormControlLabel.js @@ -5,7 +5,8 @@ import clsx from 'clsx'; import refType from '@mui/utils/refType'; import composeClasses from '@mui/utils/composeClasses'; import { useFormControl } from '../FormControl'; -import { styled, createUseThemeProps } from '../zero-styled'; +import { styled } from '../zero-styled'; +import { useDefaultProps } from '../DefaultPropsProvider'; import Stack from '../Stack'; import Typography from '../Typography'; import capitalize from '../utils/capitalize'; @@ -15,8 +16,6 @@ import formControlLabelClasses, { import formControlState from '../FormControl/formControlState'; import useSlot from '../utils/useSlot'; -const useThemeProps = createUseThemeProps('MuiFormControlLabel'); - const useUtilityClasses = (ownerState) => { const { classes, disabled, labelPlacement, error, required } = ownerState; const slots = { @@ -108,7 +107,7 @@ const AsteriskComponent = styled('span', { * Use this component if you want to display an extra label. */ const FormControlLabel = React.forwardRef(function FormControlLabel(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiFormControlLabel' }); + const props = useDefaultProps({ props: inProps, name: 'MuiFormControlLabel' }); const { checked, className, diff --git a/packages/mui-material/src/FormGroup/FormGroup.js b/packages/mui-material/src/FormGroup/FormGroup.js index 0912b1aabd7b08..d5849282e39f66 100644 --- a/packages/mui-material/src/FormGroup/FormGroup.js +++ b/packages/mui-material/src/FormGroup/FormGroup.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 { getFormGroupUtilityClass } from './formGroupClasses'; import useFormControl from '../FormControl/useFormControl'; import formControlState from '../FormControl/formControlState'; -const useThemeProps = createUseThemeProps('MuiFormGroup'); - const useUtilityClasses = (ownerState) => { const { classes, row, error } = ownerState; @@ -48,7 +47,7 @@ const FormGroupRoot = styled('div', { * For the `Radio`, you should be using the `RadioGroup` component instead of this one. */ const FormGroup = React.forwardRef(function FormGroup(inProps, ref) { - const props = useThemeProps({ + const props = useDefaultProps({ props: inProps, name: 'MuiFormGroup', }); diff --git a/packages/mui-material/src/FormHelperText/FormHelperText.js b/packages/mui-material/src/FormHelperText/FormHelperText.js index 2a3a5fc7cbe5bc..44a2ae9215e9fa 100644 --- a/packages/mui-material/src/FormHelperText/FormHelperText.js +++ b/packages/mui-material/src/FormHelperText/FormHelperText.js @@ -5,12 +5,11 @@ import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; import formControlState from '../FormControl/formControlState'; import useFormControl from '../FormControl/useFormControl'; -import { styled, createUseThemeProps } from '../zero-styled'; +import { styled } from '../zero-styled'; +import { useDefaultProps } from '../DefaultPropsProvider'; import capitalize from '../utils/capitalize'; import formHelperTextClasses, { getFormHelperTextUtilityClasses } from './formHelperTextClasses'; -const useThemeProps = createUseThemeProps('MuiFormHelperText'); - const useUtilityClasses = (ownerState) => { const { classes, contained, size, disabled, error, filled, focused, required } = ownerState; const slots = { @@ -76,7 +75,7 @@ const FormHelperTextRoot = styled('p', { })); const FormHelperText = React.forwardRef(function FormHelperText(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiFormHelperText' }); + const props = useDefaultProps({ props: inProps, name: 'MuiFormHelperText' }); const { children, className, diff --git a/packages/mui-material/src/FormLabel/FormLabel.js b/packages/mui-material/src/FormLabel/FormLabel.js index efa75c022f23c8..b412549321dd2b 100644 --- a/packages/mui-material/src/FormLabel/FormLabel.js +++ b/packages/mui-material/src/FormLabel/FormLabel.js @@ -6,11 +6,10 @@ import composeClasses from '@mui/utils/composeClasses'; import formControlState from '../FormControl/formControlState'; import useFormControl from '../FormControl/useFormControl'; import capitalize from '../utils/capitalize'; -import { styled, createUseThemeProps } from '../zero-styled'; +import { styled } from '../zero-styled'; +import { useDefaultProps } from '../DefaultPropsProvider'; import formLabelClasses, { getFormLabelUtilityClasses } from './formLabelClasses'; -const useThemeProps = createUseThemeProps('MuiFormLabel'); - const useUtilityClasses = (ownerState) => { const { classes, color, focused, disabled, error, filled, required } = ownerState; const slots = { @@ -81,7 +80,7 @@ const AsteriskComponent = styled('span', { })); const FormLabel = React.forwardRef(function FormLabel(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiFormLabel' }); + const props = useDefaultProps({ props: inProps, name: 'MuiFormLabel' }); const { children, className, diff --git a/packages/mui-material/src/Icon/Icon.js b/packages/mui-material/src/Icon/Icon.js index e382b2f5b4ed17..8368b113b52972 100644 --- a/packages/mui-material/src/Icon/Icon.js +++ b/packages/mui-material/src/Icon/Icon.js @@ -4,11 +4,10 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; import capitalize from '../utils/capitalize'; -import { styled, createUseThemeProps } from '../zero-styled'; +import { styled } from '../zero-styled'; +import { useDefaultProps } from '../DefaultPropsProvider'; import { getIconUtilityClass } from './iconClasses'; -const useThemeProps = createUseThemeProps('MuiIcon'); - const useUtilityClasses = (ownerState) => { const { color, fontSize, classes } = ownerState; @@ -114,7 +113,7 @@ const IconRoot = styled('span', { })); const Icon = React.forwardRef(function Icon(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiIcon' }); + const props = useDefaultProps({ props: inProps, name: 'MuiIcon' }); const { baseClassName = 'material-icons', className, diff --git a/packages/mui-material/src/IconButton/IconButton.js b/packages/mui-material/src/IconButton/IconButton.js index 6e4013edfcefcc..31ce68e22f2f82 100644 --- a/packages/mui-material/src/IconButton/IconButton.js +++ b/packages/mui-material/src/IconButton/IconButton.js @@ -5,13 +5,12 @@ import clsx from 'clsx'; import chainPropTypes from '@mui/utils/chainPropTypes'; import composeClasses from '@mui/utils/composeClasses'; import { alpha } from '@mui/system/colorManipulator'; -import { styled, createUseThemeProps } from '../zero-styled'; +import { styled } from '../zero-styled'; +import { useDefaultProps } from '../DefaultPropsProvider'; import ButtonBase from '../ButtonBase'; import capitalize from '../utils/capitalize'; import iconButtonClasses, { getIconButtonUtilityClass } from './iconButtonClasses'; -const useThemeProps = createUseThemeProps('MuiIconButton'); - const useUtilityClasses = (ownerState) => { const { classes, disabled, color, edge, size } = ownerState; @@ -157,7 +156,7 @@ const IconButtonRoot = styled(ButtonBase, { * regarding the available icon options. */ const IconButton = React.forwardRef(function IconButton(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiIconButton' }); + const props = useDefaultProps({ props: inProps, name: 'MuiIconButton' }); const { edge = false, children, diff --git a/packages/mui-material/src/ImageList/ImageList.js b/packages/mui-material/src/ImageList/ImageList.js index ee641bf92adb8a..3f92f867e84a12 100644 --- a/packages/mui-material/src/ImageList/ImageList.js +++ b/packages/mui-material/src/ImageList/ImageList.js @@ -4,12 +4,11 @@ import integerPropType from '@mui/utils/integerPropType'; import clsx from 'clsx'; import PropTypes from 'prop-types'; import * as React from 'react'; -import { styled, createUseThemeProps } from '../zero-styled'; +import { styled } from '../zero-styled'; +import { useDefaultProps } from '../DefaultPropsProvider'; import { getImageListUtilityClass } from './imageListClasses'; import ImageListContext from './ImageListContext'; -const useThemeProps = createUseThemeProps('MuiImageList'); - const useUtilityClasses = (ownerState) => { const { classes, variant } = ownerState; @@ -48,7 +47,7 @@ const ImageListRoot = styled('ul', { }); const ImageList = React.forwardRef(function ImageList(inProps, ref) { - const props = useThemeProps({ + const props = useDefaultProps({ props: inProps, name: 'MuiImageList', }); diff --git a/packages/mui-material/src/ImageListItem/ImageListItem.js b/packages/mui-material/src/ImageListItem/ImageListItem.js index db5a43ced0b559..ecf89d2988d829 100644 --- a/packages/mui-material/src/ImageListItem/ImageListItem.js +++ b/packages/mui-material/src/ImageListItem/ImageListItem.js @@ -6,12 +6,11 @@ import PropTypes from 'prop-types'; import * as React from 'react'; import { isFragment } from 'react-is'; import ImageListContext from '../ImageList/ImageListContext'; -import { styled, createUseThemeProps } from '../zero-styled'; +import { styled } from '../zero-styled'; +import { useDefaultProps } from '../DefaultPropsProvider'; import isMuiElement from '../utils/isMuiElement'; import imageListItemClasses, { getImageListItemUtilityClass } from './imageListItemClasses'; -const useThemeProps = createUseThemeProps('MuiImageListItem'); - const useUtilityClasses = (ownerState) => { const { classes, variant } = ownerState; @@ -82,7 +81,7 @@ const ImageListItemRoot = styled('li', { }); const ImageListItem = React.forwardRef(function ImageListItem(inProps, ref) { - const props = useThemeProps({ + const props = useDefaultProps({ props: inProps, name: 'MuiImageListItem', }); diff --git a/packages/mui-material/src/ImageListItemBar/ImageListItemBar.js b/packages/mui-material/src/ImageListItemBar/ImageListItemBar.js index f5be968bc2a616..ec6cb966f1c046 100644 --- a/packages/mui-material/src/ImageListItemBar/ImageListItemBar.js +++ b/packages/mui-material/src/ImageListItemBar/ImageListItemBar.js @@ -3,12 +3,11 @@ import composeClasses from '@mui/utils/composeClasses'; import clsx from 'clsx'; import PropTypes from 'prop-types'; import * as React from 'react'; -import { styled, createUseThemeProps } from '../zero-styled'; +import { styled } from '../zero-styled'; +import { useDefaultProps } from '../DefaultPropsProvider'; import capitalize from '../utils/capitalize'; import { getImageListItemBarUtilityClass } from './imageListItemBarClasses'; -const useThemeProps = createUseThemeProps('MuiImageListItemBar'); - const useUtilityClasses = (ownerState) => { const { classes, position, actionIcon, actionPosition } = ownerState; @@ -172,7 +171,7 @@ const ImageListItemBarActionIcon = styled('div', { }); const ImageListItemBar = React.forwardRef(function ImageListItemBar(inProps, ref) { - const props = useThemeProps({ + const props = useDefaultProps({ props: inProps, name: 'MuiImageListItemBar', }); diff --git a/packages/mui-material/src/Input/Input.js b/packages/mui-material/src/Input/Input.js index 698f5e8ef4da13..5e60d276a63817 100644 --- a/packages/mui-material/src/Input/Input.js +++ b/packages/mui-material/src/Input/Input.js @@ -6,7 +6,8 @@ import deepmerge from '@mui/utils/deepmerge'; import refType from '@mui/utils/refType'; import InputBase from '../InputBase'; import rootShouldForwardProp from '../styles/rootShouldForwardProp'; -import { styled, createUseThemeProps } from '../zero-styled'; +import { styled } from '../zero-styled'; +import { useDefaultProps } from '../DefaultPropsProvider'; import inputClasses, { getInputUtilityClass } from './inputClasses'; import { rootOverridesResolver as inputBaseRootOverridesResolver, @@ -15,8 +16,6 @@ import { InputBaseInput, } from '../InputBase/InputBase'; -const useThemeProps = createUseThemeProps('MuiInput'); - const useUtilityClasses = (ownerState) => { const { classes, disableUnderline } = ownerState; @@ -133,7 +132,7 @@ const InputInput = styled(InputBaseInput, { })({}); const Input = React.forwardRef(function Input(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiInput' }); + const props = useDefaultProps({ props: inProps, name: 'MuiInput' }); const { disableUnderline = false, components = {}, diff --git a/packages/mui-material/src/InputAdornment/InputAdornment.js b/packages/mui-material/src/InputAdornment/InputAdornment.js index fb2e14349bb96c..58f8c75fbc7764 100644 --- a/packages/mui-material/src/InputAdornment/InputAdornment.js +++ b/packages/mui-material/src/InputAdornment/InputAdornment.js @@ -7,11 +7,10 @@ import capitalize from '../utils/capitalize'; import Typography from '../Typography'; import FormControlContext from '../FormControl/FormControlContext'; import useFormControl from '../FormControl/useFormControl'; -import { styled, createUseThemeProps } from '../zero-styled'; +import { styled } from '../zero-styled'; +import { useDefaultProps } from '../DefaultPropsProvider'; import inputAdornmentClasses, { getInputAdornmentUtilityClass } from './inputAdornmentClasses'; -const useThemeProps = createUseThemeProps('MuiInputAdornment'); - const overridesResolver = (props, styles) => { const { ownerState } = props; @@ -88,7 +87,7 @@ const InputAdornmentRoot = styled('div', { })); const InputAdornment = React.forwardRef(function InputAdornment(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiInputAdornment' }); + const props = useDefaultProps({ props: inProps, name: 'MuiInputAdornment' }); const { children, className, diff --git a/packages/mui-material/src/InputBase/InputBase.js b/packages/mui-material/src/InputBase/InputBase.js index 0b032c6548acbb..f92d068cdc41ca 100644 --- a/packages/mui-material/src/InputBase/InputBase.js +++ b/packages/mui-material/src/InputBase/InputBase.js @@ -11,15 +11,14 @@ import composeClasses from '@mui/utils/composeClasses'; import formControlState from '../FormControl/formControlState'; import FormControlContext from '../FormControl/FormControlContext'; import useFormControl from '../FormControl/useFormControl'; -import { styled, createUseThemeProps, globalCss } from '../zero-styled'; +import { styled, globalCss } from '../zero-styled'; +import { useDefaultProps } from '../DefaultPropsProvider'; import capitalize from '../utils/capitalize'; import useForkRef from '../utils/useForkRef'; import useEnhancedEffect from '../utils/useEnhancedEffect'; import { isFilled } from './utils'; import inputBaseClasses, { getInputBaseUtilityClass } from './inputBaseClasses'; -const useThemeProps = createUseThemeProps('MuiInputBase'); - export const rootOverridesResolver = (props, styles) => { const { ownerState } = props; @@ -263,7 +262,7 @@ const InputGlobalStyles = globalCss({ * It contains a load of style reset and some state logic. */ const InputBase = React.forwardRef(function InputBase(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiInputBase' }); + const props = useDefaultProps({ props: inProps, name: 'MuiInputBase' }); const { 'aria-describedby': ariaDescribedby, autoComplete, diff --git a/packages/mui-material/src/InputLabel/InputLabel.js b/packages/mui-material/src/InputLabel/InputLabel.js index 8e6665c0edbced..71db13aecba3f4 100644 --- a/packages/mui-material/src/InputLabel/InputLabel.js +++ b/packages/mui-material/src/InputLabel/InputLabel.js @@ -8,11 +8,10 @@ import useFormControl from '../FormControl/useFormControl'; import FormLabel, { formLabelClasses } from '../FormLabel'; import capitalize from '../utils/capitalize'; import rootShouldForwardProp from '../styles/rootShouldForwardProp'; -import { styled, createUseThemeProps } from '../zero-styled'; +import { styled } from '../zero-styled'; +import { useDefaultProps } from '../DefaultPropsProvider'; import { getInputLabelUtilityClasses } from './inputLabelClasses'; -const useThemeProps = createUseThemeProps('MuiInputLabel'); - const useUtilityClasses = (ownerState) => { const { classes, formControl, size, shrink, disableAnimation, variant, required } = ownerState; const slots = { @@ -172,7 +171,7 @@ const InputLabelRoot = styled(FormLabel, { })); const InputLabel = React.forwardRef(function InputLabel(inProps, ref) { - const props = useThemeProps({ name: 'MuiInputLabel', props: inProps }); + const props = useDefaultProps({ name: 'MuiInputLabel', props: inProps }); const { disableAnimation = false, margin, diff --git a/packages/mui-material/src/LinearProgress/LinearProgress.js b/packages/mui-material/src/LinearProgress/LinearProgress.js index ddc40f02efc5ed..bc4366a91fa801 100644 --- a/packages/mui-material/src/LinearProgress/LinearProgress.js +++ b/packages/mui-material/src/LinearProgress/LinearProgress.js @@ -5,12 +5,11 @@ import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; import { darken, lighten } from '@mui/system/colorManipulator'; import { useRtl } from '@mui/system/RtlProvider'; -import { keyframes, css, styled, createUseThemeProps } from '../zero-styled'; +import { keyframes, css, styled } from '../zero-styled'; +import { useDefaultProps } from '../DefaultPropsProvider'; import capitalize from '../utils/capitalize'; import { getLinearProgressUtilityClass } from './linearProgressClasses'; -const useThemeProps = createUseThemeProps('MuiLinearProgress'); - const TRANSITION_DURATION = 4; // seconds const indeterminate1Keyframe = keyframes` 0% { @@ -372,7 +371,7 @@ const LinearProgressBar2 = styled('span', { * attribute to `true` on that region until it has finished loading. */ const LinearProgress = React.forwardRef(function LinearProgress(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiLinearProgress' }); + const props = useDefaultProps({ props: inProps, name: 'MuiLinearProgress' }); const { className, color = 'primary', diff --git a/packages/mui-material/src/Link/Link.js b/packages/mui-material/src/Link/Link.js index 80cf5374e66af5..7ee5ec75e5940f 100644 --- a/packages/mui-material/src/Link/Link.js +++ b/packages/mui-material/src/Link/Link.js @@ -6,15 +6,14 @@ import { alpha } from '@mui/system/colorManipulator'; import elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef'; import composeClasses from '@mui/utils/composeClasses'; import capitalize from '../utils/capitalize'; -import { styled, createUseThemeProps, useTheme } from '../zero-styled'; +import { styled, useTheme } from '../zero-styled'; +import { useDefaultProps } from '../DefaultPropsProvider'; import useIsFocusVisible from '../utils/useIsFocusVisible'; import useForkRef from '../utils/useForkRef'; import Typography from '../Typography'; import linkClasses, { getLinkUtilityClass } from './linkClasses'; import getTextDecoration, { colorTransformations } from './getTextDecoration'; -const useThemeProps = createUseThemeProps('MuiLink'); - const useUtilityClasses = (ownerState) => { const { classes, component, focusVisible, underline } = ownerState; @@ -124,7 +123,7 @@ const LinkRoot = styled(Typography, { }); const Link = React.forwardRef(function Link(inProps, ref) { - const props = useThemeProps({ + const props = useDefaultProps({ props: inProps, name: 'MuiLink', }); diff --git a/packages/mui-material/src/List/List.js b/packages/mui-material/src/List/List.js index d2eda963fdb226..7e09c8ae812060 100644 --- a/packages/mui-material/src/List/List.js +++ b/packages/mui-material/src/List/List.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 ListContext from './ListContext'; import { getListUtilityClass } from './listClasses'; -const useThemeProps = createUseThemeProps('MuiList'); - const useUtilityClasses = (ownerState) => { const { classes, disablePadding, dense, subheader } = ownerState; @@ -55,7 +54,7 @@ const ListRoot = styled('ul', { }); const List = React.forwardRef(function List(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiList' }); + const props = useDefaultProps({ props: inProps, name: 'MuiList' }); const { children, className, diff --git a/packages/mui-material/src/ListItem/ListItem.js b/packages/mui-material/src/ListItem/ListItem.js index 3597750670b2a3..187bcaf84db17d 100644 --- a/packages/mui-material/src/ListItem/ListItem.js +++ b/packages/mui-material/src/ListItem/ListItem.js @@ -7,7 +7,8 @@ import composeClasses from '@mui/utils/composeClasses'; import elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef'; import chainPropTypes from '@mui/utils/chainPropTypes'; import { alpha } from '@mui/system/colorManipulator'; -import { styled, createUseThemeProps } from '../zero-styled'; +import { styled } from '../zero-styled'; +import { useDefaultProps } from '../DefaultPropsProvider'; import ButtonBase from '../ButtonBase'; import isMuiElement from '../utils/isMuiElement'; import useEnhancedEffect from '../utils/useEnhancedEffect'; @@ -17,8 +18,6 @@ import listItemClasses, { getListItemUtilityClass } from './listItemClasses'; import { listItemButtonClasses } from '../ListItemButton'; import ListItemSecondaryAction from '../ListItemSecondaryAction'; -const useThemeProps = createUseThemeProps('MuiListItem'); - export const overridesResolver = (props, styles) => { const { ownerState } = props; @@ -205,7 +204,7 @@ const ListItemContainer = styled('li', { * Uses an additional container component if `ListItemSecondaryAction` is the last child. */ const ListItem = React.forwardRef(function ListItem(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiListItem' }); + const props = useDefaultProps({ props: inProps, name: 'MuiListItem' }); const { alignItems = 'center', autoFocus = false, diff --git a/packages/mui-material/src/ListItemAvatar/ListItemAvatar.js b/packages/mui-material/src/ListItemAvatar/ListItemAvatar.js index f7138878c93ac7..e6c360ed238e50 100644 --- a/packages/mui-material/src/ListItemAvatar/ListItemAvatar.js +++ b/packages/mui-material/src/ListItemAvatar/ListItemAvatar.js @@ -4,11 +4,10 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; import ListContext from '../List/ListContext'; -import { styled, createUseThemeProps } from '../zero-styled'; +import { styled } from '../zero-styled'; +import { useDefaultProps } from '../DefaultPropsProvider'; import { getListItemAvatarUtilityClass } from './listItemAvatarClasses'; -const useThemeProps = createUseThemeProps('MuiListItemAvatar'); - const useUtilityClasses = (ownerState) => { const { alignItems, classes } = ownerState; @@ -46,7 +45,7 @@ const ListItemAvatarRoot = styled('div', { * A simple wrapper to apply `List` styles to an `Avatar`. */ const ListItemAvatar = React.forwardRef(function ListItemAvatar(inProps, ref) { - const props = useThemeProps({ + const props = useDefaultProps({ props: inProps, name: 'MuiListItemAvatar', }); diff --git a/packages/mui-material/src/ListItemButton/ListItemButton.js b/packages/mui-material/src/ListItemButton/ListItemButton.js index 96bcca86416d8e..7c4f5e54573778 100644 --- a/packages/mui-material/src/ListItemButton/ListItemButton.js +++ b/packages/mui-material/src/ListItemButton/ListItemButton.js @@ -4,7 +4,8 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; import { alpha } from '@mui/system/colorManipulator'; -import { styled, createUseThemeProps } from '../zero-styled'; +import { styled } from '../zero-styled'; +import { useDefaultProps } from '../DefaultPropsProvider'; import rootShouldForwardProp from '../styles/rootShouldForwardProp'; import ButtonBase from '../ButtonBase'; import useEnhancedEffect from '../utils/useEnhancedEffect'; @@ -12,8 +13,6 @@ import useForkRef from '../utils/useForkRef'; import ListContext from '../List/ListContext'; import listItemButtonClasses, { getListItemButtonUtilityClass } from './listItemButtonClasses'; -const useThemeProps = createUseThemeProps('MuiListItemButton'); - export const overridesResolver = (props, styles) => { const { ownerState } = props; @@ -144,7 +143,7 @@ const ListItemButtonRoot = styled(ButtonBase, { })); const ListItemButton = React.forwardRef(function ListItemButton(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiListItemButton' }); + const props = useDefaultProps({ props: inProps, name: 'MuiListItemButton' }); const { alignItems = 'center', autoFocus = false, diff --git a/packages/mui-material/src/ListItemIcon/ListItemIcon.js b/packages/mui-material/src/ListItemIcon/ListItemIcon.js index d3d158aef7b68c..310259d5e5d81f 100644 --- a/packages/mui-material/src/ListItemIcon/ListItemIcon.js +++ b/packages/mui-material/src/ListItemIcon/ListItemIcon.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 { getListItemIconUtilityClass } from './listItemIconClasses'; import ListContext from '../List/ListContext'; -const useThemeProps = createUseThemeProps('MuiListItemIcon'); - const useUtilityClasses = (ownerState) => { const { alignItems, classes } = ownerState; @@ -48,7 +47,7 @@ const ListItemIconRoot = styled('div', { * A simple wrapper to apply `List` styles to an `Icon` or `SvgIcon`. */ const ListItemIcon = React.forwardRef(function ListItemIcon(inProps, ref) { - const props = useThemeProps({ + const props = useDefaultProps({ props: inProps, name: 'MuiListItemIcon', }); diff --git a/packages/mui-material/src/ListItemSecondaryAction/ListItemSecondaryAction.js b/packages/mui-material/src/ListItemSecondaryAction/ListItemSecondaryAction.js index f91162f6bc3aae..b8269bbf09937a 100644 --- a/packages/mui-material/src/ListItemSecondaryAction/ListItemSecondaryAction.js +++ b/packages/mui-material/src/ListItemSecondaryAction/ListItemSecondaryAction.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 ListContext from '../List/ListContext'; import { getListItemSecondaryActionClassesUtilityClass } from './listItemSecondaryActionClasses'; -const useThemeProps = createUseThemeProps('MuiListItemSecondaryAction'); - const useUtilityClasses = (ownerState) => { const { disableGutters, classes } = ownerState; @@ -48,7 +47,7 @@ const ListItemSecondaryActionRoot = styled('div', { * @deprecated Use the `secondaryAction` prop in the `ListItem` component instead. This component will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details. */ const ListItemSecondaryAction = React.forwardRef(function ListItemSecondaryAction(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiListItemSecondaryAction' }); + const props = useDefaultProps({ props: inProps, name: 'MuiListItemSecondaryAction' }); const { className, ...other } = props; const context = React.useContext(ListContext); const ownerState = { ...props, disableGutters: context.disableGutters }; diff --git a/packages/mui-material/src/ListItemText/ListItemText.js b/packages/mui-material/src/ListItemText/ListItemText.js index 0352eecbe62bbf..aa7256d91194ea 100644 --- a/packages/mui-material/src/ListItemText/ListItemText.js +++ b/packages/mui-material/src/ListItemText/ListItemText.js @@ -5,11 +5,10 @@ import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; import Typography from '../Typography'; import ListContext from '../List/ListContext'; -import { styled, createUseThemeProps } from '../zero-styled'; +import { styled } from '../zero-styled'; +import { useDefaultProps } from '../DefaultPropsProvider'; import listItemTextClasses, { getListItemTextUtilityClass } from './listItemTextClasses'; -const useThemeProps = createUseThemeProps('MuiListItemText'); - const useUtilityClasses = (ownerState) => { const { classes, inset, primary, secondary, dense } = ownerState; @@ -60,7 +59,7 @@ const ListItemTextRoot = styled('div', { }); const ListItemText = React.forwardRef(function ListItemText(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiListItemText' }); + const props = useDefaultProps({ props: inProps, name: 'MuiListItemText' }); const { children, className, diff --git a/packages/mui-material/src/ListSubheader/ListSubheader.js b/packages/mui-material/src/ListSubheader/ListSubheader.js index 86d530050d3324..279c5e99f31da9 100644 --- a/packages/mui-material/src/ListSubheader/ListSubheader.js +++ b/packages/mui-material/src/ListSubheader/ListSubheader.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 capitalize from '../utils/capitalize'; import { getListSubheaderUtilityClass } from './listSubheaderClasses'; -const useThemeProps = createUseThemeProps('MuiListSubheader'); - const useUtilityClasses = (ownerState) => { const { classes, color, disableGutters, inset, disableSticky } = ownerState; @@ -90,7 +89,7 @@ const ListSubheaderRoot = styled('li', { })); const ListSubheader = React.forwardRef(function ListSubheader(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiListSubheader' }); + const props = useDefaultProps({ props: inProps, name: 'MuiListSubheader' }); const { className, color = 'default', diff --git a/packages/mui-material/src/Menu/Menu.js b/packages/mui-material/src/Menu/Menu.js index 19269471b5d609..821f544ab16e83 100644 --- a/packages/mui-material/src/Menu/Menu.js +++ b/packages/mui-material/src/Menu/Menu.js @@ -10,11 +10,10 @@ import { useRtl } from '@mui/system/RtlProvider'; import MenuList from '../MenuList'; import Popover, { PopoverPaper } from '../Popover'; import rootShouldForwardProp from '../styles/rootShouldForwardProp'; -import { styled, createUseThemeProps } from '../zero-styled'; +import { styled } from '../zero-styled'; +import { useDefaultProps } from '../DefaultPropsProvider'; import { getMenuUtilityClass } from './menuClasses'; -const useThemeProps = createUseThemeProps('MuiMenu'); - const RTL_ORIGIN = { vertical: 'top', horizontal: 'right', @@ -67,7 +66,7 @@ const MenuMenuList = styled(MenuList, { }); const Menu = React.forwardRef(function Menu(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiMenu' }); + const props = useDefaultProps({ props: inProps, name: 'MuiMenu' }); const { autoFocus = true, diff --git a/packages/mui-material/src/MenuItem/MenuItem.js b/packages/mui-material/src/MenuItem/MenuItem.js index 7819d4e76e073d..eb39af185ff660 100644 --- a/packages/mui-material/src/MenuItem/MenuItem.js +++ b/packages/mui-material/src/MenuItem/MenuItem.js @@ -5,7 +5,8 @@ import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; import { alpha } from '@mui/system/colorManipulator'; import rootShouldForwardProp from '../styles/rootShouldForwardProp'; -import { styled, createUseThemeProps } from '../zero-styled'; +import { styled } from '../zero-styled'; +import { useDefaultProps } from '../DefaultPropsProvider'; import ListContext from '../List/ListContext'; import ButtonBase from '../ButtonBase'; import useEnhancedEffect from '../utils/useEnhancedEffect'; @@ -15,8 +16,6 @@ import { listItemIconClasses } from '../ListItemIcon'; import { listItemTextClasses } from '../ListItemText'; import menuItemClasses, { getMenuItemUtilityClass } from './menuItemClasses'; -const useThemeProps = createUseThemeProps('MuiMenuItem'); - export const overridesResolver = (props, styles) => { const { ownerState } = props; @@ -163,7 +162,7 @@ const MenuItemRoot = styled(ButtonBase, { })); const MenuItem = React.forwardRef(function MenuItem(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiMenuItem' }); + const props = useDefaultProps({ props: inProps, name: 'MuiMenuItem' }); const { autoFocus = false, component = 'li', diff --git a/packages/mui-material/src/MobileStepper/MobileStepper.js b/packages/mui-material/src/MobileStepper/MobileStepper.js index 4bda0efad9c004..302863de7e11f5 100644 --- a/packages/mui-material/src/MobileStepper/MobileStepper.js +++ b/packages/mui-material/src/MobileStepper/MobileStepper.js @@ -7,12 +7,11 @@ import composeClasses from '@mui/utils/composeClasses'; import Paper from '../Paper'; import capitalize from '../utils/capitalize'; import LinearProgress from '../LinearProgress'; -import { styled, createUseThemeProps } from '../zero-styled'; +import { styled } from '../zero-styled'; +import { useDefaultProps } from '../DefaultPropsProvider'; import slotShouldForwardProp from '../styles/slotShouldForwardProp'; import { getMobileStepperUtilityClass } from './mobileStepperClasses'; -const useThemeProps = createUseThemeProps('MuiMobileStepper'); - const useUtilityClasses = (ownerState) => { const { classes, position } = ownerState; @@ -128,7 +127,7 @@ const MobileStepperProgress = styled(LinearProgress, { }); const MobileStepper = React.forwardRef(function MobileStepper(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiMobileStepper' }); + const props = useDefaultProps({ props: inProps, name: 'MuiMobileStepper' }); const { activeStep = 0, backButton, diff --git a/packages/mui-material/src/Modal/Modal.js b/packages/mui-material/src/Modal/Modal.js index 8e7f5f1d9d5166..c3868f0f0e3cdd 100644 --- a/packages/mui-material/src/Modal/Modal.js +++ b/packages/mui-material/src/Modal/Modal.js @@ -9,12 +9,11 @@ import { unstable_useModal as useModal } from '@mui/base/unstable_useModal'; import composeClasses from '@mui/utils/composeClasses'; import FocusTrap from '../Unstable_TrapFocus'; import Portal from '../Portal'; -import { styled, createUseThemeProps } from '../zero-styled'; +import { styled } from '../zero-styled'; +import { useDefaultProps } from '../DefaultPropsProvider'; import Backdrop from '../Backdrop'; import { getModalUtilityClass } from './modalClasses'; -const useThemeProps = createUseThemeProps('MuiModal'); - const useUtilityClasses = (ownerState) => { const { open, exited, classes } = ownerState; @@ -75,7 +74,7 @@ const ModalBackdrop = styled(Backdrop, { * This component shares many concepts with [react-overlays](https://react-bootstrap.github.io/react-overlays/#modals). */ const Modal = React.forwardRef(function Modal(inProps, ref) { - const props = useThemeProps({ name: 'MuiModal', props: inProps }); + const props = useDefaultProps({ name: 'MuiModal', props: inProps }); const { BackdropComponent = ModalBackdrop, BackdropProps, diff --git a/packages/mui-material/src/OutlinedInput/OutlinedInput.js b/packages/mui-material/src/OutlinedInput/OutlinedInput.js index 43a2aaa51e06da..d3812becdfc070 100644 --- a/packages/mui-material/src/OutlinedInput/OutlinedInput.js +++ b/packages/mui-material/src/OutlinedInput/OutlinedInput.js @@ -7,7 +7,8 @@ import NotchedOutline from './NotchedOutline'; import useFormControl from '../FormControl/useFormControl'; import formControlState from '../FormControl/formControlState'; import rootShouldForwardProp from '../styles/rootShouldForwardProp'; -import { styled, createUseThemeProps } from '../zero-styled'; +import { styled } from '../zero-styled'; +import { useDefaultProps } from '../DefaultPropsProvider'; import outlinedInputClasses, { getOutlinedInputUtilityClass } from './outlinedInputClasses'; import InputBase, { rootOverridesResolver as inputBaseRootOverridesResolver, @@ -16,8 +17,6 @@ import InputBase, { InputBaseInput, } from '../InputBase/InputBase'; -const useThemeProps = createUseThemeProps('MuiOutlinedInput'); - const useUtilityClasses = (ownerState) => { const { classes } = ownerState; @@ -181,7 +180,7 @@ const OutlinedInputInput = styled(InputBaseInput, { })); const OutlinedInput = React.forwardRef(function OutlinedInput(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiOutlinedInput' }); + const props = useDefaultProps({ props: inProps, name: 'MuiOutlinedInput' }); const { components = {}, fullWidth = false, diff --git a/packages/mui-material/src/Pagination/Pagination.js b/packages/mui-material/src/Pagination/Pagination.js index 3796474ceb2f9a..56e2610ee2b4e9 100644 --- a/packages/mui-material/src/Pagination/Pagination.js +++ b/packages/mui-material/src/Pagination/Pagination.js @@ -7,9 +7,9 @@ import integerPropType from '@mui/utils/integerPropType'; import { getPaginationUtilityClass } from './paginationClasses'; import usePagination from '../usePagination'; import PaginationItem from '../PaginationItem'; -import { styled, createUseThemeProps } from '../zero-styled'; +import { styled } from '../zero-styled'; -const useThemeProps = createUseThemeProps('MuiPagination'); +import { useDefaultProps } from '../DefaultPropsProvider'; const useUtilityClasses = (ownerState) => { const { classes, variant } = ownerState; @@ -53,7 +53,7 @@ function defaultGetAriaLabel(type, page, selected) { } const Pagination = React.forwardRef(function Pagination(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiPagination' }); + const props = useDefaultProps({ props: inProps, name: 'MuiPagination' }); const { boundaryCount = 1, className, diff --git a/packages/mui-material/src/PaginationItem/PaginationItem.js b/packages/mui-material/src/PaginationItem/PaginationItem.js index 07c4df53b50452..0a5aca797d497a 100644 --- a/packages/mui-material/src/PaginationItem/PaginationItem.js +++ b/packages/mui-material/src/PaginationItem/PaginationItem.js @@ -13,9 +13,9 @@ import LastPageIcon from '../internal/svg-icons/LastPage'; import NavigateBeforeIcon from '../internal/svg-icons/NavigateBefore'; import NavigateNextIcon from '../internal/svg-icons/NavigateNext'; import useSlot from '../utils/useSlot'; -import { styled, createUseThemeProps } from '../zero-styled'; +import { styled } from '../zero-styled'; -const useThemeProps = createUseThemeProps('MuiPaginationItem'); +import { useDefaultProps } from '../DefaultPropsProvider'; const overridesResolver = (props, styles) => { const { ownerState } = props; @@ -302,7 +302,7 @@ const PaginationItemPageIcon = styled('div', { })); const PaginationItem = React.forwardRef(function PaginationItem(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiPaginationItem' }); + const props = useDefaultProps({ props: inProps, name: 'MuiPaginationItem' }); const { className, color = 'standard', diff --git a/packages/mui-material/src/Paper/Paper.js b/packages/mui-material/src/Paper/Paper.js index f4b9bbb4ae1bc8..abb07e7966bed5 100644 --- a/packages/mui-material/src/Paper/Paper.js +++ b/packages/mui-material/src/Paper/Paper.js @@ -6,12 +6,11 @@ import integerPropType from '@mui/utils/integerPropType'; import chainPropTypes from '@mui/utils/chainPropTypes'; import composeClasses from '@mui/utils/composeClasses'; import { alpha } from '@mui/system/colorManipulator'; -import { styled, createUseThemeProps, useTheme } from '../zero-styled'; +import { styled, useTheme } from '../zero-styled'; +import { useDefaultProps } from '../DefaultPropsProvider'; import getOverlayAlpha from '../styles/getOverlayAlpha'; import { getPaperUtilityClass } from './paperClasses'; -const useThemeProps = createUseThemeProps('MuiPaper'); - const useUtilityClasses = (ownerState) => { const { square, elevation, variant, classes } = ownerState; @@ -72,7 +71,7 @@ const PaperRoot = styled('div', { })); const Paper = React.forwardRef(function Paper(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiPaper' }); + const props = useDefaultProps({ props: inProps, name: 'MuiPaper' }); const theme = useTheme(); const { diff --git a/packages/mui-material/src/Popover/Popover.js b/packages/mui-material/src/Popover/Popover.js index b0594958bf0595..427818eedef29f 100644 --- a/packages/mui-material/src/Popover/Popover.js +++ b/packages/mui-material/src/Popover/Popover.js @@ -9,7 +9,8 @@ import refType from '@mui/utils/refType'; import elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef'; import integerPropType from '@mui/utils/integerPropType'; import chainPropTypes from '@mui/utils/chainPropTypes'; -import { styled, createUseThemeProps } from '../zero-styled'; +import { styled } from '../zero-styled'; +import { useDefaultProps } from '../DefaultPropsProvider'; import debounce from '../utils/debounce'; import ownerDocument from '../utils/ownerDocument'; import ownerWindow from '../utils/ownerWindow'; @@ -20,8 +21,6 @@ import PaperBase from '../Paper'; import { getPopoverUtilityClass } from './popoverClasses'; import useSlot from '../utils/useSlot'; -const useThemeProps = createUseThemeProps('MuiPopover'); - export function getOffsetTop(rect, vertical) { let offset = 0; @@ -96,7 +95,7 @@ export const PopoverPaper = styled(PaperBase, { }); const Popover = React.forwardRef(function Popover(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiPopover' }); + const props = useDefaultProps({ props: inProps, name: 'MuiPopover' }); const { action, anchorEl, diff --git a/packages/mui-material/src/Radio/Radio.js b/packages/mui-material/src/Radio/Radio.js index 7aa76e7d0395e6..d3b81667586245 100644 --- a/packages/mui-material/src/Radio/Radio.js +++ b/packages/mui-material/src/Radio/Radio.js @@ -12,9 +12,9 @@ import createChainedFunction from '../utils/createChainedFunction'; import useRadioGroup from '../RadioGroup/useRadioGroup'; import radioClasses, { getRadioUtilityClass } from './radioClasses'; import rootShouldForwardProp from '../styles/rootShouldForwardProp'; -import { styled, createUseThemeProps } from '../zero-styled'; +import { styled } from '../zero-styled'; -const useThemeProps = createUseThemeProps('MuiRadio'); +import { useDefaultProps } from '../DefaultPropsProvider'; const useUtilityClasses = (ownerState) => { const { classes, color, size } = ownerState; @@ -108,7 +108,7 @@ const defaultCheckedIcon = ; const defaultIcon = ; const Radio = React.forwardRef(function Radio(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiRadio' }); + const props = useDefaultProps({ props: inProps, name: 'MuiRadio' }); const { checked: checkedProp, checkedIcon = defaultCheckedIcon, diff --git a/packages/mui-material/src/Rating/Rating.js b/packages/mui-material/src/Rating/Rating.js index a61b3dde83c6e6..3648cfb33d344d 100644 --- a/packages/mui-material/src/Rating/Rating.js +++ b/packages/mui-material/src/Rating/Rating.js @@ -16,12 +16,11 @@ import { } from '../utils'; import Star from '../internal/svg-icons/Star'; import StarBorder from '../internal/svg-icons/StarBorder'; -import { styled, createUseThemeProps } from '../zero-styled'; +import { styled } from '../zero-styled'; +import { useDefaultProps } from '../DefaultPropsProvider'; import slotShouldForwardProp from '../styles/slotShouldForwardProp'; import ratingClasses, { getRatingUtilityClass } from './ratingClasses'; -const useThemeProps = createUseThemeProps('MuiRating'); - function getDecimalPrecision(num) { const decimalPart = num.toString().split('.')[1]; return decimalPart ? decimalPart.length : 0; @@ -331,7 +330,7 @@ function defaultLabelText(value) { } const Rating = React.forwardRef(function Rating(inProps, ref) { - const props = useThemeProps({ name: 'MuiRating', props: inProps }); + const props = useDefaultProps({ name: 'MuiRating', props: inProps }); const { className, defaultValue = null, diff --git a/packages/mui-material/src/Skeleton/Skeleton.js b/packages/mui-material/src/Skeleton/Skeleton.js index 46ad2e2d5c0c02..9321d08c2afbda 100644 --- a/packages/mui-material/src/Skeleton/Skeleton.js +++ b/packages/mui-material/src/Skeleton/Skeleton.js @@ -4,11 +4,10 @@ import clsx from 'clsx'; import PropTypes from 'prop-types'; import composeClasses from '@mui/utils/composeClasses'; import { alpha, unstable_getUnit as getUnit, unstable_toUnitless as toUnitless } from '../styles'; -import { keyframes, css, createUseThemeProps, styled } from '../zero-styled'; +import { keyframes, css, styled } from '../zero-styled'; +import { useDefaultProps } from '../DefaultPropsProvider'; import { getSkeletonUtilityClass } from './skeletonClasses'; -const useThemeProps = createUseThemeProps('MuiSkeleton'); - const useUtilityClasses = (ownerState) => { const { classes, variant, animation, hasChildren, width, height } = ownerState; @@ -200,7 +199,7 @@ const SkeletonRoot = styled('span', { }); const Skeleton = React.forwardRef(function Skeleton(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiSkeleton' }); + const props = useDefaultProps({ props: inProps, name: 'MuiSkeleton' }); const { animation = 'pulse', className, diff --git a/packages/mui-material/src/Slider/Slider.js b/packages/mui-material/src/Slider/Slider.js index 00c7f49cfcaf81..ada5fda52457f3 100644 --- a/packages/mui-material/src/Slider/Slider.js +++ b/packages/mui-material/src/Slider/Slider.js @@ -8,15 +8,14 @@ import composeClasses from '@mui/utils/composeClasses'; import { useSlider, valueToPercent } from '@mui/base/useSlider'; import { alpha, lighten, darken } from '@mui/system/colorManipulator'; import { useRtl } from '@mui/system/RtlProvider'; -import { styled, createUseThemeProps } from '../zero-styled'; +import { styled } from '../zero-styled'; +import { useDefaultProps } from '../DefaultPropsProvider'; import slotShouldForwardProp from '../styles/slotShouldForwardProp'; import shouldSpreadAdditionalProps from '../utils/shouldSpreadAdditionalProps'; import capitalize from '../utils/capitalize'; import BaseSliderValueLabel from './SliderValueLabel'; import sliderClasses, { getSliderUtilityClass } from './sliderClasses'; -const useThemeProps = createUseThemeProps('MuiSlider'); - function Identity(x) { return x; } @@ -531,7 +530,7 @@ const useUtilityClasses = (ownerState) => { const Forward = ({ children }) => children; const Slider = React.forwardRef(function Slider(inputProps, ref) { - const props = useThemeProps({ props: inputProps, name: 'MuiSlider' }); + const props = useDefaultProps({ props: inputProps, name: 'MuiSlider' }); const isRtl = useRtl(); diff --git a/packages/mui-material/src/Snackbar/Snackbar.js b/packages/mui-material/src/Snackbar/Snackbar.js index e44634c3679e1f..70abf93913296f 100644 --- a/packages/mui-material/src/Snackbar/Snackbar.js +++ b/packages/mui-material/src/Snackbar/Snackbar.js @@ -5,14 +5,13 @@ import { useSlotProps } from '@mui/base/utils'; import composeClasses from '@mui/utils/composeClasses'; import { ClickAwayListener } from '@mui/base/ClickAwayListener'; import { useSnackbar } from '@mui/base/useSnackbar'; -import { styled, createUseThemeProps, useTheme } from '../zero-styled'; +import { styled, useTheme } from '../zero-styled'; +import { useDefaultProps } from '../DefaultPropsProvider'; import capitalize from '../utils/capitalize'; import Grow from '../Grow'; import SnackbarContent from '../SnackbarContent'; import { getSnackbarUtilityClass } from './snackbarClasses'; -const useThemeProps = createUseThemeProps('MuiSnackbar'); - const useUtilityClasses = (ownerState) => { const { classes, anchorOrigin } = ownerState; @@ -92,7 +91,7 @@ const SnackbarRoot = styled('div', { })); const Snackbar = React.forwardRef(function Snackbar(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiSnackbar' }); + const props = useDefaultProps({ props: inProps, name: 'MuiSnackbar' }); const theme = useTheme(); const defaultTransitionDuration = { enter: theme.transitions.duration.enteringScreen, diff --git a/packages/mui-material/src/SnackbarContent/SnackbarContent.js b/packages/mui-material/src/SnackbarContent/SnackbarContent.js index 10e1e774167f23..da761faad762f0 100644 --- a/packages/mui-material/src/SnackbarContent/SnackbarContent.js +++ b/packages/mui-material/src/SnackbarContent/SnackbarContent.js @@ -4,12 +4,11 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; import { emphasize } from '@mui/system/colorManipulator'; -import { styled, createUseThemeProps } from '../zero-styled'; +import { styled } from '../zero-styled'; +import { useDefaultProps } from '../DefaultPropsProvider'; import Paper from '../Paper'; import { getSnackbarContentUtilityClass } from './snackbarContentClasses'; -const useThemeProps = createUseThemeProps('MuiSnackbarContent'); - const useUtilityClasses = (ownerState) => { const { classes } = ownerState; @@ -70,7 +69,7 @@ const SnackbarContentAction = styled('div', { }); const SnackbarContent = React.forwardRef(function SnackbarContent(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiSnackbarContent' }); + const props = useDefaultProps({ props: inProps, name: 'MuiSnackbarContent' }); const { action, className, message, role = 'alert', ...other } = props; const ownerState = props; const classes = useUtilityClasses(ownerState); diff --git a/packages/mui-material/src/SpeedDial/SpeedDial.js b/packages/mui-material/src/SpeedDial/SpeedDial.js index 5fec02b848c903..9c9badd4f085da 100644 --- a/packages/mui-material/src/SpeedDial/SpeedDial.js +++ b/packages/mui-material/src/SpeedDial/SpeedDial.js @@ -6,7 +6,8 @@ import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; import useTimeout from '@mui/utils/useTimeout'; import clamp from '@mui/utils/clamp'; -import { styled, createUseThemeProps, useTheme } from '../zero-styled'; +import { styled, useTheme } from '../zero-styled'; +import { useDefaultProps } from '../DefaultPropsProvider'; import Zoom from '../Zoom'; import Fab from '../Fab'; import capitalize from '../utils/capitalize'; @@ -16,8 +17,6 @@ import useControlled from '../utils/useControlled'; import speedDialClasses, { getSpeedDialUtilityClass } from './speedDialClasses'; import useSlot from '../utils/useSlot'; -const useThemeProps = createUseThemeProps('MuiSpeedDial'); - const useUtilityClasses = (ownerState) => { const { classes, open, direction } = ownerState; @@ -143,7 +142,7 @@ const SpeedDialActions = styled('div', { }); const SpeedDial = React.forwardRef(function SpeedDial(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiSpeedDial' }); + const props = useDefaultProps({ props: inProps, name: 'MuiSpeedDial' }); const theme = useTheme(); const defaultTransitionDuration = { enter: theme.transitions.duration.enteringScreen, diff --git a/packages/mui-material/src/SpeedDialAction/SpeedDialAction.js b/packages/mui-material/src/SpeedDialAction/SpeedDialAction.js index 50729eccf4a4f1..e93a42155ccddc 100644 --- a/packages/mui-material/src/SpeedDialAction/SpeedDialAction.js +++ b/packages/mui-material/src/SpeedDialAction/SpeedDialAction.js @@ -5,14 +5,13 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; import { emphasize } from '@mui/system/colorManipulator'; -import { styled, createUseThemeProps } from '../zero-styled'; +import { styled } from '../zero-styled'; +import { useDefaultProps } from '../DefaultPropsProvider'; import Fab from '../Fab'; import Tooltip from '../Tooltip'; import capitalize from '../utils/capitalize'; import speedDialActionClasses, { getSpeedDialActionUtilityClass } from './speedDialActionClasses'; -const useThemeProps = createUseThemeProps('MuiSpeedDialAction'); - const useUtilityClasses = (ownerState) => { const { open, tooltipPlacement, classes } = ownerState; @@ -137,7 +136,7 @@ const SpeedDialActionStaticTooltipLabel = styled('span', { })); const SpeedDialAction = React.forwardRef(function SpeedDialAction(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiSpeedDialAction' }); + const props = useDefaultProps({ props: inProps, name: 'MuiSpeedDialAction' }); const { className, delay = 0, diff --git a/packages/mui-material/src/SpeedDialIcon/SpeedDialIcon.js b/packages/mui-material/src/SpeedDialIcon/SpeedDialIcon.js index 06dfaebd0ae7bb..9943a79ee0a1d3 100644 --- a/packages/mui-material/src/SpeedDialIcon/SpeedDialIcon.js +++ b/packages/mui-material/src/SpeedDialIcon/SpeedDialIcon.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 AddIcon from '../internal/svg-icons/Add'; import speedDialIconClasses, { getSpeedDialIconUtilityClass } from './speedDialIconClasses'; -const useThemeProps = createUseThemeProps('MuiSpeedDialIcon'); - const useUtilityClasses = (ownerState) => { const { classes, open, openIcon } = ownerState; @@ -84,7 +83,7 @@ const SpeedDialIconRoot = styled('span', { })); const SpeedDialIcon = React.forwardRef(function SpeedDialIcon(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiSpeedDialIcon' }); + const props = useDefaultProps({ props: inProps, name: 'MuiSpeedDialIcon' }); const { className, icon: iconProp, open, openIcon: openIconProp, ...other } = props; const ownerState = props; diff --git a/packages/mui-material/src/Step/Step.js b/packages/mui-material/src/Step/Step.js index 61bd9567935007..048efdbb8a03a4 100644 --- a/packages/mui-material/src/Step/Step.js +++ b/packages/mui-material/src/Step/Step.js @@ -6,11 +6,10 @@ import integerPropType from '@mui/utils/integerPropType'; import composeClasses from '@mui/utils/composeClasses'; import StepperContext from '../Stepper/StepperContext'; import StepContext from './StepContext'; -import { styled, createUseThemeProps } from '../zero-styled'; +import { styled } from '../zero-styled'; +import { useDefaultProps } from '../DefaultPropsProvider'; import { getStepUtilityClass } from './stepClasses'; -const useThemeProps = createUseThemeProps('MuiStep'); - const useUtilityClasses = (ownerState) => { const { classes, orientation, alternativeLabel, completed } = ownerState; @@ -54,7 +53,7 @@ const StepRoot = styled('div', { }); const Step = React.forwardRef(function Step(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiStep' }); + const props = useDefaultProps({ props: inProps, name: 'MuiStep' }); const { active: activeProp, children, diff --git a/packages/mui-material/src/StepButton/StepButton.js b/packages/mui-material/src/StepButton/StepButton.js index a724a65805bc51..86b75c33b6a9f7 100644 --- a/packages/mui-material/src/StepButton/StepButton.js +++ b/packages/mui-material/src/StepButton/StepButton.js @@ -3,7 +3,8 @@ 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 StepLabel from '../StepLabel'; import isMuiElement from '../utils/isMuiElement'; @@ -11,8 +12,6 @@ import StepperContext from '../Stepper/StepperContext'; import StepContext from '../Step/StepContext'; import stepButtonClasses, { getStepButtonUtilityClass } from './stepButtonClasses'; -const useThemeProps = createUseThemeProps('MuiStepButton'); - const useUtilityClasses = (ownerState) => { const { classes, orientation } = ownerState; @@ -57,7 +56,7 @@ const StepButtonRoot = styled(ButtonBase, { }); const StepButton = React.forwardRef(function StepButton(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiStepButton' }); + const props = useDefaultProps({ props: inProps, name: 'MuiStepButton' }); const { children, className, icon, optional, ...other } = props; const { disabled, active } = React.useContext(StepContext); diff --git a/packages/mui-material/src/StepConnector/StepConnector.js b/packages/mui-material/src/StepConnector/StepConnector.js index a7fb2da0d41939..3d6f439096668b 100644 --- a/packages/mui-material/src/StepConnector/StepConnector.js +++ b/packages/mui-material/src/StepConnector/StepConnector.js @@ -4,13 +4,12 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; import capitalize from '../utils/capitalize'; -import { styled, createUseThemeProps } from '../zero-styled'; +import { styled } from '../zero-styled'; +import { useDefaultProps } from '../DefaultPropsProvider'; import StepperContext from '../Stepper/StepperContext'; import StepContext from '../Step/StepContext'; import { getStepConnectorUtilityClass } from './stepConnectorClasses'; -const useThemeProps = createUseThemeProps('MuiStepConnector'); - const useUtilityClasses = (ownerState) => { const { classes, orientation, alternativeLabel, active, completed, disabled } = ownerState; @@ -98,7 +97,7 @@ const StepConnectorLine = styled('span', { }); const StepConnector = React.forwardRef(function StepConnector(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiStepConnector' }); + const props = useDefaultProps({ props: inProps, name: 'MuiStepConnector' }); const { className, ...other } = props; const { alternativeLabel, orientation = 'horizontal' } = React.useContext(StepperContext); diff --git a/packages/mui-material/src/StepContent/StepContent.js b/packages/mui-material/src/StepContent/StepContent.js index 528685347c41d0..8584ea779da836 100644 --- a/packages/mui-material/src/StepContent/StepContent.js +++ b/packages/mui-material/src/StepContent/StepContent.js @@ -3,14 +3,13 @@ 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 Collapse from '../Collapse'; import StepperContext from '../Stepper/StepperContext'; import StepContext from '../Step/StepContext'; import { getStepContentUtilityClass } from './stepContentClasses'; -const useThemeProps = createUseThemeProps('MuiStepContent'); - const useUtilityClasses = (ownerState) => { const { classes, last } = ownerState; @@ -53,7 +52,7 @@ const StepContentTransition = styled(Collapse, { })({}); const StepContent = React.forwardRef(function StepContent(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiStepContent' }); + const props = useDefaultProps({ props: inProps, name: 'MuiStepContent' }); const { children, className, diff --git a/packages/mui-material/src/StepIcon/StepIcon.js b/packages/mui-material/src/StepIcon/StepIcon.js index 6ed6c6c31ccc5a..f51d3c070ef061 100644 --- a/packages/mui-material/src/StepIcon/StepIcon.js +++ b/packages/mui-material/src/StepIcon/StepIcon.js @@ -3,14 +3,13 @@ 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 CheckCircle from '../internal/svg-icons/CheckCircle'; import Warning from '../internal/svg-icons/Warning'; import SvgIcon from '../SvgIcon'; import stepIconClasses, { getStepIconUtilityClass } from './stepIconClasses'; -const useThemeProps = createUseThemeProps('MuiStepIcon'); - const useUtilityClasses = (ownerState) => { const { classes, active, completed, error } = ownerState; @@ -54,7 +53,7 @@ const StepIconText = styled('text', { })); const StepIcon = React.forwardRef(function StepIcon(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiStepIcon' }); + const props = useDefaultProps({ props: inProps, name: 'MuiStepIcon' }); const { active = false, className: classNameProp, diff --git a/packages/mui-material/src/StepLabel/StepLabel.js b/packages/mui-material/src/StepLabel/StepLabel.js index e70efaacc6c2f2..41441f449525aa 100644 --- a/packages/mui-material/src/StepLabel/StepLabel.js +++ b/packages/mui-material/src/StepLabel/StepLabel.js @@ -6,12 +6,11 @@ import * as React from 'react'; import StepContext from '../Step/StepContext'; import StepIcon from '../StepIcon'; import StepperContext from '../Stepper/StepperContext'; -import { createUseThemeProps, styled } from '../zero-styled'; +import { styled } from '../zero-styled'; +import { useDefaultProps } from '../DefaultPropsProvider'; import stepLabelClasses, { getStepLabelUtilityClass } from './stepLabelClasses'; import useSlot from '../utils/useSlot'; -const useThemeProps = createUseThemeProps('MuiStepLabel'); - const useUtilityClasses = (ownerState) => { const { classes, orientation, active, completed, error, disabled, alternativeLabel } = ownerState; @@ -124,7 +123,7 @@ const StepLabelLabelContainer = styled('span', { })); const StepLabel = React.forwardRef(function StepLabel(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiStepLabel' }); + const props = useDefaultProps({ props: inProps, name: 'MuiStepLabel' }); const { children, className, diff --git a/packages/mui-material/src/Stepper/Stepper.js b/packages/mui-material/src/Stepper/Stepper.js index 34d5e8d0dbf35a..d80c29df95ede0 100644 --- a/packages/mui-material/src/Stepper/Stepper.js +++ b/packages/mui-material/src/Stepper/Stepper.js @@ -4,13 +4,12 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import integerPropType from '@mui/utils/integerPropType'; import composeClasses from '@mui/utils/composeClasses'; -import { styled, createUseThemeProps } from '../zero-styled'; +import { styled } from '../zero-styled'; +import { useDefaultProps } from '../DefaultPropsProvider'; import { getStepperUtilityClass } from './stepperClasses'; import StepConnector from '../StepConnector'; import StepperContext from './StepperContext'; -const useThemeProps = createUseThemeProps('MuiStepper'); - const useUtilityClasses = (ownerState) => { const { orientation, nonLinear, alternativeLabel, classes } = ownerState; const slots = { @@ -60,7 +59,7 @@ const StepperRoot = styled('div', { const defaultConnector = ; const Stepper = React.forwardRef(function Stepper(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiStepper' }); + const props = useDefaultProps({ props: inProps, name: 'MuiStepper' }); const { activeStep = 0, alternativeLabel = false, diff --git a/packages/mui-material/src/SvgIcon/SvgIcon.js b/packages/mui-material/src/SvgIcon/SvgIcon.js index 7aeae60d5f7539..04d38dac8b3c27 100644 --- a/packages/mui-material/src/SvgIcon/SvgIcon.js +++ b/packages/mui-material/src/SvgIcon/SvgIcon.js @@ -4,11 +4,10 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; import capitalize from '../utils/capitalize'; -import { styled, createUseThemeProps } from '../zero-styled'; +import { styled } from '../zero-styled'; +import { useDefaultProps } from '../DefaultPropsProvider'; import { getSvgIconUtilityClass } from './svgIconClasses'; -const useThemeProps = createUseThemeProps('MuiSvgIcon'); - const useUtilityClasses = (ownerState) => { const { color, fontSize, classes } = ownerState; @@ -92,7 +91,7 @@ const SvgIconRoot = styled('svg', { })); const SvgIcon = React.forwardRef(function SvgIcon(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiSvgIcon' }); + const props = useDefaultProps({ props: inProps, name: 'MuiSvgIcon' }); const { children, className, diff --git a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js index 5be8cdab8d0bb6..35a2a03ebb8f14 100644 --- a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js +++ b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js @@ -10,12 +10,11 @@ import ownerDocument from '../utils/ownerDocument'; import ownerWindow from '../utils/ownerWindow'; import useEventCallback from '../utils/useEventCallback'; import useEnhancedEffect from '../utils/useEnhancedEffect'; -import { createUseThemeProps, useTheme } from '../zero-styled'; +import { useTheme } from '../zero-styled'; +import { useDefaultProps } from '../DefaultPropsProvider'; import { getTransitionProps } from '../transitions/utils'; import SwipeArea from './SwipeArea'; -const useThemeProps = createUseThemeProps('MuiSwipeableDrawer'); - // This value is closed to what browsers are using internally to // trigger a native scroll. const UNCERTAINTY_THRESHOLD = 3; // px @@ -136,7 +135,7 @@ function computeHasNativeHandler({ domTreeShapes, start, current, anchor }) { const iOS = typeof navigator !== 'undefined' && /iPad|iPhone|iPod/.test(navigator.userAgent); const SwipeableDrawer = React.forwardRef(function SwipeableDrawer(inProps, ref) { - const props = useThemeProps({ name: 'MuiSwipeableDrawer', props: inProps }); + const props = useDefaultProps({ name: 'MuiSwipeableDrawer', props: inProps }); const theme = useTheme(); const transitionDurationDefault = { enter: theme.transitions.duration.enteringScreen, diff --git a/packages/mui-material/src/Switch/Switch.js b/packages/mui-material/src/Switch/Switch.js index 0731297c81972e..f69e5e7ffb799c 100644 --- a/packages/mui-material/src/Switch/Switch.js +++ b/packages/mui-material/src/Switch/Switch.js @@ -8,11 +8,10 @@ import composeClasses from '@mui/utils/composeClasses'; import { alpha, darken, lighten } from '@mui/system/colorManipulator'; import capitalize from '../utils/capitalize'; import SwitchBase from '../internal/SwitchBase'; -import { styled, createUseThemeProps } from '../zero-styled'; +import { styled } from '../zero-styled'; +import { useDefaultProps } from '../DefaultPropsProvider'; import switchClasses, { getSwitchUtilityClass } from './switchClasses'; -const useThemeProps = createUseThemeProps('MuiSwitch'); - const useUtilityClasses = (ownerState) => { const { classes, edge, size, color, checked, disabled } = ownerState; @@ -216,7 +215,7 @@ const SwitchThumb = styled('span', { })); const Switch = React.forwardRef(function Switch(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiSwitch' }); + const props = useDefaultProps({ props: inProps, name: 'MuiSwitch' }); const { className, color = 'primary', edge = false, size = 'medium', sx, ...other } = props; const ownerState = { diff --git a/packages/mui-material/src/Tab/Tab.js b/packages/mui-material/src/Tab/Tab.js index 9a466ebf92d76c..ed3fd8ac3a3cf6 100644 --- a/packages/mui-material/src/Tab/Tab.js +++ b/packages/mui-material/src/Tab/Tab.js @@ -5,12 +5,11 @@ import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; import ButtonBase from '../ButtonBase'; import capitalize from '../utils/capitalize'; -import { styled, createUseThemeProps } from '../zero-styled'; +import { styled } from '../zero-styled'; +import { useDefaultProps } from '../DefaultPropsProvider'; import unsupportedProp from '../utils/unsupportedProp'; import tabClasses, { getTabUtilityClass } from './tabClasses'; -const useThemeProps = createUseThemeProps('MuiTab'); - const useUtilityClasses = (ownerState) => { const { classes, textColor, fullWidth, wrapped, icon, label, selected, disabled } = ownerState; @@ -186,7 +185,7 @@ const TabRoot = styled(ButtonBase, { })); const Tab = React.forwardRef(function Tab(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiTab' }); + const props = useDefaultProps({ props: inProps, name: 'MuiTab' }); const { className, disabled = false, diff --git a/packages/mui-material/src/TabScrollButton/TabScrollButton.js b/packages/mui-material/src/TabScrollButton/TabScrollButton.js index e9a3fa1e476b20..a331bde367a628 100644 --- a/packages/mui-material/src/TabScrollButton/TabScrollButton.js +++ b/packages/mui-material/src/TabScrollButton/TabScrollButton.js @@ -9,11 +9,10 @@ import { useRtl } from '@mui/system/RtlProvider'; import KeyboardArrowLeft from '../internal/svg-icons/KeyboardArrowLeft'; import KeyboardArrowRight from '../internal/svg-icons/KeyboardArrowRight'; import ButtonBase from '../ButtonBase'; -import { styled, createUseThemeProps } from '../zero-styled'; +import { styled } from '../zero-styled'; +import { useDefaultProps } from '../DefaultPropsProvider'; import tabScrollButtonClasses, { getTabScrollButtonUtilityClass } from './tabScrollButtonClasses'; -const useThemeProps = createUseThemeProps('MuiTabScrollButton'); - const useUtilityClasses = (ownerState) => { const { classes, orientation, disabled } = ownerState; @@ -56,7 +55,7 @@ const TabScrollButtonRoot = styled(ButtonBase, { }); const TabScrollButton = React.forwardRef(function TabScrollButton(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiTabScrollButton' }); + const props = useDefaultProps({ props: inProps, name: 'MuiTabScrollButton' }); const { className, slots = {}, diff --git a/packages/mui-material/src/Table/Table.js b/packages/mui-material/src/Table/Table.js index d513e8e4528850..60ddc6b4626b95 100644 --- a/packages/mui-material/src/Table/Table.js +++ b/packages/mui-material/src/Table/Table.js @@ -4,11 +4,10 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; import TableContext from './TableContext'; -import { styled, createUseThemeProps } from '../zero-styled'; +import { styled } from '../zero-styled'; +import { useDefaultProps } from '../DefaultPropsProvider'; import { getTableUtilityClass } from './tableClasses'; -const useThemeProps = createUseThemeProps('MuiTable'); - const useUtilityClasses = (ownerState) => { const { classes, stickyHeader } = ownerState; @@ -52,7 +51,7 @@ const TableRoot = styled('table', { const defaultComponent = 'table'; const Table = React.forwardRef(function Table(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiTable' }); + const props = useDefaultProps({ props: inProps, name: 'MuiTable' }); const { className, component = defaultComponent, diff --git a/packages/mui-material/src/TableBody/TableBody.js b/packages/mui-material/src/TableBody/TableBody.js index 9116e8274d0cb1..40ad6e652d8fdf 100644 --- a/packages/mui-material/src/TableBody/TableBody.js +++ b/packages/mui-material/src/TableBody/TableBody.js @@ -4,11 +4,10 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; import Tablelvl2Context from '../Table/Tablelvl2Context'; -import { styled, createUseThemeProps } from '../zero-styled'; +import { styled } from '../zero-styled'; +import { useDefaultProps } from '../DefaultPropsProvider'; import { getTableBodyUtilityClass } from './tableBodyClasses'; -const useThemeProps = createUseThemeProps('MuiTableBody'); - const useUtilityClasses = (ownerState) => { const { classes } = ownerState; @@ -34,7 +33,7 @@ const tablelvl2 = { const defaultComponent = 'tbody'; const TableBody = React.forwardRef(function TableBody(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiTableBody' }); + const props = useDefaultProps({ props: inProps, name: 'MuiTableBody' }); const { className, component = defaultComponent, ...other } = props; const ownerState = { diff --git a/packages/mui-material/src/TableCell/TableCell.js b/packages/mui-material/src/TableCell/TableCell.js index 71a8c53e1013a2..b4180528e0e370 100644 --- a/packages/mui-material/src/TableCell/TableCell.js +++ b/packages/mui-material/src/TableCell/TableCell.js @@ -7,11 +7,10 @@ import { darken, alpha, lighten } from '@mui/system/colorManipulator'; import capitalize from '../utils/capitalize'; import TableContext from '../Table/TableContext'; import Tablelvl2Context from '../Table/Tablelvl2Context'; -import { styled, createUseThemeProps } from '../zero-styled'; +import { styled } from '../zero-styled'; +import { useDefaultProps } from '../DefaultPropsProvider'; import tableCellClasses, { getTableCellUtilityClass } from './tableCellClasses'; -const useThemeProps = createUseThemeProps('MuiTableCell'); - const useUtilityClasses = (ownerState) => { const { classes, variant, align, padding, size, stickyHeader } = ownerState; @@ -171,7 +170,7 @@ const TableCellRoot = styled('td', { * or otherwise a `` element. */ const TableCell = React.forwardRef(function TableCell(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiTableCell' }); + const props = useDefaultProps({ props: inProps, name: 'MuiTableCell' }); const { align = 'inherit', className, diff --git a/packages/mui-material/src/TableContainer/TableContainer.js b/packages/mui-material/src/TableContainer/TableContainer.js index f786b6192e247b..1140e605cf4220 100644 --- a/packages/mui-material/src/TableContainer/TableContainer.js +++ b/packages/mui-material/src/TableContainer/TableContainer.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 { getTableContainerUtilityClass } from './tableContainerClasses'; -const useThemeProps = createUseThemeProps('MuiTableContainer'); - const useUtilityClasses = (ownerState) => { const { classes } = ownerState; @@ -28,7 +27,7 @@ const TableContainerRoot = styled('div', { }); const TableContainer = React.forwardRef(function TableContainer(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiTableContainer' }); + const props = useDefaultProps({ props: inProps, name: 'MuiTableContainer' }); const { className, component = 'div', ...other } = props; const ownerState = { diff --git a/packages/mui-material/src/TableFooter/TableFooter.js b/packages/mui-material/src/TableFooter/TableFooter.js index 5de3b7d0a3909d..5f652088392255 100644 --- a/packages/mui-material/src/TableFooter/TableFooter.js +++ b/packages/mui-material/src/TableFooter/TableFooter.js @@ -4,11 +4,10 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; import Tablelvl2Context from '../Table/Tablelvl2Context'; -import { styled, createUseThemeProps } from '../zero-styled'; +import { styled } from '../zero-styled'; +import { useDefaultProps } from '../DefaultPropsProvider'; import { getTableFooterUtilityClass } from './tableFooterClasses'; -const useThemeProps = createUseThemeProps('MuiTableFooter'); - const useUtilityClasses = (ownerState) => { const { classes } = ownerState; @@ -34,7 +33,7 @@ const tablelvl2 = { const defaultComponent = 'tfoot'; const TableFooter = React.forwardRef(function TableFooter(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiTableFooter' }); + const props = useDefaultProps({ props: inProps, name: 'MuiTableFooter' }); const { className, component = defaultComponent, ...other } = props; const ownerState = { diff --git a/packages/mui-material/src/TableHead/TableHead.js b/packages/mui-material/src/TableHead/TableHead.js index 32943035f0911b..4724d8d0534ef0 100644 --- a/packages/mui-material/src/TableHead/TableHead.js +++ b/packages/mui-material/src/TableHead/TableHead.js @@ -4,11 +4,10 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; import Tablelvl2Context from '../Table/Tablelvl2Context'; -import { styled, createUseThemeProps } from '../zero-styled'; +import { styled } from '../zero-styled'; +import { useDefaultProps } from '../DefaultPropsProvider'; import { getTableHeadUtilityClass } from './tableHeadClasses'; -const useThemeProps = createUseThemeProps('MuiTableHead'); - const useUtilityClasses = (ownerState) => { const { classes } = ownerState; @@ -34,7 +33,7 @@ const tablelvl2 = { const defaultComponent = 'thead'; const TableHead = React.forwardRef(function TableHead(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiTableHead' }); + const props = useDefaultProps({ props: inProps, name: 'MuiTableHead' }); const { className, component = defaultComponent, ...other } = props; const ownerState = { diff --git a/packages/mui-material/src/TablePagination/TablePagination.js b/packages/mui-material/src/TablePagination/TablePagination.js index 3aad5afa263e01..e55660a64c54f2 100644 --- a/packages/mui-material/src/TablePagination/TablePagination.js +++ b/packages/mui-material/src/TablePagination/TablePagination.js @@ -6,7 +6,8 @@ import integerPropType from '@mui/utils/integerPropType'; import chainPropTypes from '@mui/utils/chainPropTypes'; import { isHostComponent } from '@mui/base/utils'; import composeClasses from '@mui/utils/composeClasses'; -import { styled, createUseThemeProps } from '../zero-styled'; +import { styled } from '../zero-styled'; +import { useDefaultProps } from '../DefaultPropsProvider'; import InputBase from '../InputBase'; import MenuItem from '../MenuItem'; import Select from '../Select'; @@ -16,8 +17,6 @@ import TablePaginationActions from './TablePaginationActions'; import useId from '../utils/useId'; import tablePaginationClasses, { getTablePaginationUtilityClass } from './tablePaginationClasses'; -const useThemeProps = createUseThemeProps('MuiTablePagination'); - const TablePaginationRoot = styled(TableCell, { name: 'MuiTablePagination', slot: 'Root', @@ -140,7 +139,7 @@ const useUtilityClasses = (ownerState) => { * A `TableCell` based component for placing inside `TableFooter` for pagination. */ const TablePagination = React.forwardRef(function TablePagination(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiTablePagination' }); + const props = useDefaultProps({ props: inProps, name: 'MuiTablePagination' }); const { ActionsComponent = TablePaginationActions, backIconButtonProps, diff --git a/packages/mui-material/src/TableRow/TableRow.js b/packages/mui-material/src/TableRow/TableRow.js index d96f9fce5745d4..eec9ee944c429c 100644 --- a/packages/mui-material/src/TableRow/TableRow.js +++ b/packages/mui-material/src/TableRow/TableRow.js @@ -5,11 +5,10 @@ import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; import { alpha } from '@mui/system/colorManipulator'; import Tablelvl2Context from '../Table/Tablelvl2Context'; -import { styled, createUseThemeProps } from '../zero-styled'; +import { styled } from '../zero-styled'; +import { useDefaultProps } from '../DefaultPropsProvider'; import tableRowClasses, { getTableRowUtilityClass } from './tableRowClasses'; -const useThemeProps = createUseThemeProps('MuiTableRow'); - const useUtilityClasses = (ownerState) => { const { classes, selected, hover, head, footer } = ownerState; @@ -58,7 +57,7 @@ const defaultComponent = 'tr'; * based on the material table element parent (head, body, etc). */ const TableRow = React.forwardRef(function TableRow(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiTableRow' }); + const props = useDefaultProps({ props: inProps, name: 'MuiTableRow' }); const { className, component = defaultComponent, diff --git a/packages/mui-material/src/TableSortLabel/TableSortLabel.js b/packages/mui-material/src/TableSortLabel/TableSortLabel.js index 67da18573c774b..dee42f5355b249 100644 --- a/packages/mui-material/src/TableSortLabel/TableSortLabel.js +++ b/packages/mui-material/src/TableSortLabel/TableSortLabel.js @@ -5,12 +5,11 @@ import PropTypes from 'prop-types'; import * as React from 'react'; import ButtonBase from '../ButtonBase'; import ArrowDownwardIcon from '../internal/svg-icons/ArrowDownward'; -import { styled, createUseThemeProps } from '../zero-styled'; +import { styled } from '../zero-styled'; +import { useDefaultProps } from '../DefaultPropsProvider'; import capitalize from '../utils/capitalize'; import tableSortLabelClasses, { getTableSortLabelUtilityClass } from './tableSortLabelClasses'; -const useThemeProps = createUseThemeProps('MuiTableSortLabel'); - const useUtilityClasses = (ownerState) => { const { classes, direction, active } = ownerState; @@ -95,7 +94,7 @@ const TableSortLabelIcon = styled('span', { * A button based label for placing inside `TableCell` for column sorting. */ const TableSortLabel = React.forwardRef(function TableSortLabel(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiTableSortLabel' }); + const props = useDefaultProps({ props: inProps, name: 'MuiTableSortLabel' }); const { active = false, children, diff --git a/packages/mui-material/src/Tabs/Tabs.js b/packages/mui-material/src/Tabs/Tabs.js index 435b0702ddb6f9..6d02a527234fb8 100644 --- a/packages/mui-material/src/Tabs/Tabs.js +++ b/packages/mui-material/src/Tabs/Tabs.js @@ -7,7 +7,8 @@ import refType from '@mui/utils/refType'; import { useSlotProps } from '@mui/base/utils'; import composeClasses from '@mui/utils/composeClasses'; import { useRtl } from '@mui/system/RtlProvider'; -import { styled, createUseThemeProps, useTheme } from '../zero-styled'; +import { styled, useTheme } from '../zero-styled'; +import { useDefaultProps } from '../DefaultPropsProvider'; import debounce from '../utils/debounce'; import animate from '../internal/animate'; import ScrollbarSize from './ScrollbarSize'; @@ -17,8 +18,6 @@ import tabsClasses, { getTabsUtilityClass } from './tabsClasses'; import ownerDocument from '../utils/ownerDocument'; import ownerWindow from '../utils/ownerWindow'; -const useThemeProps = createUseThemeProps('MuiTabs'); - const nextItem = (list, item) => { if (list === item) { return list.firstChild; @@ -274,7 +273,7 @@ const defaultIndicatorStyle = {}; let warnedOnceTabPresent = false; const Tabs = React.forwardRef(function Tabs(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiTabs' }); + const props = useDefaultProps({ props: inProps, name: 'MuiTabs' }); const theme = useTheme(); const isRtl = useRtl(); const { diff --git a/packages/mui-material/src/TextField/TextField.js b/packages/mui-material/src/TextField/TextField.js index 6f0c0d14c0cade..4efdcc9124f01a 100644 --- a/packages/mui-material/src/TextField/TextField.js +++ b/packages/mui-material/src/TextField/TextField.js @@ -5,7 +5,8 @@ import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; import useId from '@mui/utils/useId'; import refType from '@mui/utils/refType'; -import { styled, createUseThemeProps } from '../zero-styled'; +import { styled } from '../zero-styled'; +import { useDefaultProps } from '../DefaultPropsProvider'; import Input from '../Input'; import FilledInput from '../FilledInput'; import OutlinedInput from '../OutlinedInput'; @@ -16,8 +17,6 @@ import Select from '../Select'; import { getTextFieldUtilityClass } from './textFieldClasses'; import useSlot from '../utils/useSlot'; -const useThemeProps = createUseThemeProps('MuiTextField'); - const variantComponent = { standard: Input, filled: FilledInput, @@ -73,7 +72,7 @@ const TextFieldRoot = styled(FormControl, { * - using the underlying components directly as shown in the demos */ const TextField = React.forwardRef(function TextField(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiTextField' }); + const props = useDefaultProps({ props: inProps, name: 'MuiTextField' }); const { autoComplete, autoFocus = false, diff --git a/packages/mui-material/src/ToggleButton/ToggleButton.js b/packages/mui-material/src/ToggleButton/ToggleButton.js index f80211201960b8..4515537658200d 100644 --- a/packages/mui-material/src/ToggleButton/ToggleButton.js +++ b/packages/mui-material/src/ToggleButton/ToggleButton.js @@ -8,14 +8,13 @@ import composeClasses from '@mui/utils/composeClasses'; import { alpha } from '@mui/system/colorManipulator'; import ButtonBase from '../ButtonBase'; import capitalize from '../utils/capitalize'; -import { createUseThemeProps, styled } from '../zero-styled'; +import { styled } from '../zero-styled'; +import { useDefaultProps } from '../DefaultPropsProvider'; import toggleButtonClasses, { getToggleButtonUtilityClass } from './toggleButtonClasses'; import ToggleButtonGroupContext from '../ToggleButtonGroup/ToggleButtonGroupContext'; import ToggleButtonGroupButtonContext from '../ToggleButtonGroup/ToggleButtonGroupButtonContext'; import isValueSelected from '../ToggleButtonGroup/isValueSelected'; -const useThemeProps = createUseThemeProps('MuiToggleButton'); - const useUtilityClasses = (ownerState) => { const { classes, fullWidth, selected, disabled, size, color } = ownerState; @@ -147,7 +146,7 @@ const ToggleButton = React.forwardRef(function ToggleButton(inProps, ref) { { ...contextProps, selected: isValueSelected(inProps.value, contextValue) }, inProps, ); - const props = useThemeProps({ props: resolvedProps, name: 'MuiToggleButton' }); + const props = useDefaultProps({ props: resolvedProps, name: 'MuiToggleButton' }); const { children, className, diff --git a/packages/mui-material/src/ToggleButtonGroup/ToggleButtonGroup.js b/packages/mui-material/src/ToggleButtonGroup/ToggleButtonGroup.js index 73e31065a0c4c1..a817027acf3fc2 100644 --- a/packages/mui-material/src/ToggleButtonGroup/ToggleButtonGroup.js +++ b/packages/mui-material/src/ToggleButtonGroup/ToggleButtonGroup.js @@ -5,7 +5,8 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; import getValidReactChildren from '@mui/utils/getValidReactChildren'; -import { styled, createUseThemeProps } from '../zero-styled'; +import { styled } from '../zero-styled'; +import { useDefaultProps } from '../DefaultPropsProvider'; import capitalize from '../utils/capitalize'; import toggleButtonGroupClasses, { getToggleButtonGroupUtilityClass, @@ -14,8 +15,6 @@ import ToggleButtonGroupContext from './ToggleButtonGroupContext'; import ToggleButtonGroupButtonContext from './ToggleButtonGroupButtonContext'; import toggleButtonClasses from '../ToggleButton/toggleButtonClasses'; -const useThemeProps = createUseThemeProps('MuiToggleButtonGroup'); - const useUtilityClasses = (ownerState) => { const { classes, orientation, fullWidth, disabled } = ownerState; @@ -125,7 +124,7 @@ const ToggleButtonGroupRoot = styled('div', { })); const ToggleButtonGroup = React.forwardRef(function ToggleButtonGroup(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiToggleButtonGroup' }); + const props = useDefaultProps({ props: inProps, name: 'MuiToggleButtonGroup' }); const { children, className, diff --git a/packages/mui-material/src/Toolbar/Toolbar.js b/packages/mui-material/src/Toolbar/Toolbar.js index 6a9733d2680580..3e6458f477c6f8 100644 --- a/packages/mui-material/src/Toolbar/Toolbar.js +++ b/packages/mui-material/src/Toolbar/Toolbar.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 { getToolbarUtilityClass } from './toolbarClasses'; -const useThemeProps = createUseThemeProps('MuiToolbar'); - const useUtilityClasses = (ownerState) => { const { classes, disableGutters, variant } = ownerState; @@ -60,7 +59,7 @@ const ToolbarRoot = styled('div', { })); const Toolbar = React.forwardRef(function Toolbar(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiToolbar' }); + const props = useDefaultProps({ props: inProps, name: 'MuiToolbar' }); const { className, component = 'div', diff --git a/packages/mui-material/src/Tooltip/Tooltip.js b/packages/mui-material/src/Tooltip/Tooltip.js index 512e79347176e2..f9425f6f6a3430 100644 --- a/packages/mui-material/src/Tooltip/Tooltip.js +++ b/packages/mui-material/src/Tooltip/Tooltip.js @@ -8,7 +8,8 @@ import { appendOwnerState } from '@mui/base/utils'; import composeClasses from '@mui/utils/composeClasses'; import { alpha } from '@mui/system/colorManipulator'; import { useRtl } from '@mui/system/RtlProvider'; -import { styled, createUseThemeProps, useTheme } from '../zero-styled'; +import { styled, useTheme } from '../zero-styled'; +import { useDefaultProps } from '../DefaultPropsProvider'; import capitalize from '../utils/capitalize'; import Grow from '../Grow'; import Popper from '../Popper'; @@ -19,8 +20,6 @@ import useIsFocusVisible from '../utils/useIsFocusVisible'; import useControlled from '../utils/useControlled'; import tooltipClasses, { getTooltipUtilityClass } from './tooltipClasses'; -const useThemeProps = createUseThemeProps('MuiTooltip'); - function round(value) { return Math.round(value * 1e5) / 1e5; } @@ -305,7 +304,7 @@ function composeEventHandler(handler, eventHandler) { // TODO v6: Remove PopperComponent, PopperProps, TransitionComponent and TransitionProps. const Tooltip = React.forwardRef(function Tooltip(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiTooltip' }); + const props = useDefaultProps({ props: inProps, name: 'MuiTooltip' }); const { arrow = false, children: childrenProp, diff --git a/packages/mui-material/src/Typography/Typography.js b/packages/mui-material/src/Typography/Typography.js index 11c5e434c778aa..394d708564231a 100644 --- a/packages/mui-material/src/Typography/Typography.js +++ b/packages/mui-material/src/Typography/Typography.js @@ -3,11 +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, internal_createExtendSxProp } from '../zero-styled'; +import { styled, internal_createExtendSxProp } from '../zero-styled'; +import { useDefaultProps } from '../DefaultPropsProvider'; import capitalize from '../utils/capitalize'; import { getTypographyUtilityClass } from './typographyClasses'; -const useThemeProps = createUseThemeProps('MuiTypography'); const extendSxProp = internal_createExtendSxProp(); const useUtilityClasses = (ownerState) => { @@ -127,7 +127,7 @@ const colorTransformations = { }; const Typography = React.forwardRef(function Typography(inProps, ref) { - const { color, ...themeProps } = useThemeProps({ props: inProps, name: 'MuiTypography' }); + const { color, ...themeProps } = useDefaultProps({ props: inProps, name: 'MuiTypography' }); const textColor = colorTransformations[color]; const props = extendSxProp({ ...themeProps, diff --git a/packages/mui-material/src/zero-styled/index.tsx b/packages/mui-material/src/zero-styled/index.tsx index fa7a468615daba..e56c98cf9182d1 100644 --- a/packages/mui-material/src/zero-styled/index.tsx +++ b/packages/mui-material/src/zero-styled/index.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; import { extendSxProp } from '@mui/system/styleFunctionSx'; -import useThemeProps from '../styles/useThemeProps'; import useTheme from '../styles/useTheme'; import GlobalStyles, { GlobalStylesProps } from '../GlobalStyles'; @@ -14,11 +13,6 @@ export function globalCss(styles: GlobalStylesProps['styles']) { }; } -// eslint-disable-next-line @typescript-eslint/no-unused-vars -export function createUseThemeProps(name: string) { - return useThemeProps; -} - // eslint-disable-next-line @typescript-eslint/naming-convention export function internal_createExtendSxProp() { return extendSxProp; diff --git a/packages/mui-system/src/DefaultPropsProvider/DefaultPropsProvider.tsx b/packages/mui-system/src/DefaultPropsProvider/DefaultPropsProvider.tsx new file mode 100644 index 00000000000000..0c6435addd90c6 --- /dev/null +++ b/packages/mui-system/src/DefaultPropsProvider/DefaultPropsProvider.tsx @@ -0,0 +1,61 @@ +'use client'; +import * as React from 'react'; +import PropTypes from 'prop-types'; +import resolveProps from '@mui/utils/resolveProps'; + +const PropsContext = React.createContext | undefined>(undefined); + +function DefaultPropsProvider({ + value, + children, +}: React.PropsWithChildren<{ value: Record | undefined }>) { + return {children}; +} + +DefaultPropsProvider.propTypes /* remove-proptypes */ = { + // ┌────────────────────────────── Warning ──────────────────────────────┐ + // │ These PropTypes are generated from the TypeScript type definitions. │ + // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │ + // └─────────────────────────────────────────────────────────────────────┘ + /** + * @ignore + */ + children: PropTypes.node, + /** + * @ignore + */ + value: PropTypes.object, +} as any; + +function getThemeProps< + Theme extends { + components?: Record; + }, + Props, + Name extends string, +>(params: { props: Props; name: Name; theme?: Theme }): Props { + const { theme, name, props } = params; + + if (!theme || !theme.components || !theme.components[name]) { + return props; + } + const config = theme.components[name]; + + if (config.defaultProps) { + // compatible with v5 signature + return resolveProps(config.defaultProps, props); + } + + if (!config.styleOverrides && !config.variants) { + // v6 signature, no property 'defaultProps' + return resolveProps(config as any, props); + } + return props; +} + +export function useDefaultProps({ props, name }: { props: Props; name: string }) { + const ctx = React.useContext(PropsContext); + return getThemeProps({ props, name, theme: { components: ctx } }); +} + +export default DefaultPropsProvider; diff --git a/packages/mui-system/src/DefaultPropsProvider/index.ts b/packages/mui-system/src/DefaultPropsProvider/index.ts new file mode 100644 index 00000000000000..646b9a27128699 --- /dev/null +++ b/packages/mui-system/src/DefaultPropsProvider/index.ts @@ -0,0 +1 @@ +export { default, useDefaultProps } from './DefaultPropsProvider'; diff --git a/packages/mui-system/src/ThemeProvider/ThemeProvider.js b/packages/mui-system/src/ThemeProvider/ThemeProvider.js index 760b4c4645ee50..71f7fec85e9095 100644 --- a/packages/mui-system/src/ThemeProvider/ThemeProvider.js +++ b/packages/mui-system/src/ThemeProvider/ThemeProvider.js @@ -9,6 +9,7 @@ import exactProp from '@mui/utils/exactProp'; import { ThemeContext as StyledEngineThemeContext } from '@mui/styled-engine'; import useThemeWithoutDefault from '../useThemeWithoutDefault'; import RtlProvider from '../RtlProvider'; +import DefaultPropsProvider from '../DefaultPropsProvider'; const EMPTY_THEME = {}; @@ -67,7 +68,9 @@ function ThemeProvider(props) { return ( - {children} + + {children} + ); diff --git a/packages/mui-system/src/cssVars/createCssVarsProvider.test.js b/packages/mui-system/src/cssVars/createCssVarsProvider.test.js index f011109d6a28ff..53330ceb47507c 100644 --- a/packages/mui-system/src/cssVars/createCssVarsProvider.test.js +++ b/packages/mui-system/src/cssVars/createCssVarsProvider.test.js @@ -734,14 +734,16 @@ describe('createCssVarsProvider', () => { const { CssVarsProvider } = createCssVarsProvider({ theme: createCssVarsTheme({ colorSchemes: { light: { fontSize: 16 } }, - components: 'any', + components: { + foo: 'bar', + }, }), defaultColorScheme: 'light', }); function Text() { const theme = useTheme(); - return
{theme.vars.components}
; + return
{theme.vars.components?.foo}
; } render( @@ -749,7 +751,7 @@ describe('createCssVarsProvider', () => { , ); - expect(screen.getByTestId('text').textContent).not.to.equal('var(--components)'); + expect(screen.getByTestId('text').textContent).not.to.equal('var(--components-foo)'); }); it('`defaultMode` is specified', () => {