diff --git a/packages/api-docs-builder-core/materialUi/projectSettings.ts b/packages/api-docs-builder-core/materialUi/projectSettings.ts index c3d87f07b44ee7..9fe857a81326a7 100644 --- a/packages/api-docs-builder-core/materialUi/projectSettings.ts +++ b/packages/api-docs-builder-core/materialUi/projectSettings.ts @@ -28,7 +28,7 @@ export const projectSettings: ProjectSettings = { getComponentInfo: getMaterialUiComponentInfo, translationLanguages: LANGUAGES, skipComponent(filename: string) { - return filename.match(/(ThemeProvider|CssVarsProvider|Grid2)/) !== null; + return filename.match(/(ThemeProvider|CssVarsProvider|DefaultPropsProvider|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 e9d8a4d7fa8c18..e83889b99fba12 100644 --- a/packages/api-docs-builder-core/muiSystem/projectSettings.ts +++ b/packages/api-docs-builder-core/muiSystem/projectSettings.ts @@ -23,7 +23,9 @@ export const projectSettings: ProjectSettings = { getComponentInfo: getSystemComponentInfo, translationLanguages: LANGUAGES, skipComponent(filename) { - return filename.match(/(ThemeProvider|CssVarsProvider|GlobalStyles)/) !== null; + return ( + filename.match(/(ThemeProvider|CssVarsProvider|DefaultPropsProvider|GlobalStyles)/) !== null + ); }, translationPagesDirectory: 'docs/translations/api-docs', generateClassName: generateUtilityClass, 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..8058548fa94f73 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 @@ -78,7 +78,8 @@ const rule = { } let nameLiteral = null; - const isUseThemePropsCall = node.callee.name === 'useThemeProps'; + const isUseThemePropsCall = + node.callee.name === 'useThemeProps' || node.callee.name === 'useDefaultProps'; if (isUseThemePropsCall) { let isCalledFromCustomHook = false; let parent = node.parent; 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..e36aaa5fb36bd3 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 @@ -4,6 +4,7 @@ const rule = require('./mui-name-matches-component-name'); const ruleTester = new eslint.RuleTester({ parser: require.resolve('@typescript-eslint/parser') }); ruleTester.run('mui-name-matches-component-name', rule, { valid: [ + // useThemeProps ` const StaticDateRangePicker = React.forwardRef(function StaticDateRangePicker( inProps: StaticDateRangePickerProps, @@ -45,8 +46,56 @@ ruleTester.run('mui-name-matches-component-name', rule, { useThemeProps: (inProps) => useThemeProps({ props: inProps, name: 'MuiGrid2' }), }) as OverridableComponent; `, + { + code: ` + function useDatePickerDefaultizedProps(props, name) { + useThemeProps({ props, name }); + } + `, + options: [{ customHooks: ['useDatePickerDefaultizedProps'] }], + }, + // ================ + // useDefaultProps + ` + const StaticDateRangePicker = React.forwardRef(function StaticDateRangePicker( + inProps: StaticDateRangePickerProps, + ref: React.Ref, + ) { + const props = useDefaultProps({ props: inProps, name: 'MuiStaticDateRangePicker' }); + }); + `, ` - const useThemeProps = createUseThemeProps('MuiBadge'); + function CssBaseline(inProps) { + useDefaultProps({ props: inProps, name: 'MuiCssBaseline' }); + } + `, + ` + const Container = createContainer({ + createStyledComponent: styled('div', { + name: 'MuiContainer', + slot: 'Root', + overridesResolver: (props, styles) => { + const { ownerState } = props; + + return [ + styles.root, + ownerState.fixed && styles.fixed, + ownerState.disableGutters && styles.disableGutters, + ]; + }, + }), + useDefaultProps: (inProps) => useDefaultProps({ props: inProps, name: 'MuiContainer' }), + }); + `, + ` + const Grid2 = createGrid2({ + createStyledComponent: styled('div', { + name: 'MuiGrid2', + overridesResolver: (props, styles) => styles.root, + }), + componentName: 'MuiGrid2', + useDefaultProps: (inProps) => useDefaultProps({ props: inProps, name: 'MuiGrid2' }), + }) as OverridableComponent; `, { code: ` @@ -62,13 +111,14 @@ ruleTester.run('mui-name-matches-component-name', rule, { { code: ` function useDatePickerDefaultizedProps(props, name) { - useThemeProps({ props, name }); + useDefaultProps({ props, name }); } `, options: [{ customHooks: ['useDatePickerDefaultizedProps'] }], }, ], invalid: [ + // useThemeProps { code: ` const StaticDateRangePicker = React.forwardRef(function StaticDateRangePicker( @@ -115,28 +165,29 @@ ruleTester.run('mui-name-matches-component-name', rule, { inProps: StaticDateRangePickerProps, ref: React.Ref, ) { - const props = useDatePickerDefaultizedProps(inProps); + const props = useDatePickerDefaultizedProps(inProps, 'MuiPickersDateRangePicker'); }); `, options: [{ customHooks: ['useDatePickerDefaultizedProps'] }], errors: [ { message: - "Unable to find name argument. Expected `useDatePickerDefaultizedProps(firstParameter, 'MuiComponent')`.", - type: 'Identifier', + "Expected `name` to be 'MuiStaticDateRangePicker' but instead got 'MuiPickersDateRangePicker'.", + type: 'Literal', }, ], }, + // ================ + // useDefaultProps { code: ` const StaticDateRangePicker = React.forwardRef(function StaticDateRangePicker( inProps: StaticDateRangePickerProps, ref: React.Ref, ) { - const props = useDatePickerDefaultizedProps(inProps, 'MuiPickersDateRangePicker'); + const props = useDefaultProps({ props: inProps, name: 'MuiPickersDateRangePicker' }); }); `, - options: [{ customHooks: ['useDatePickerDefaultizedProps'] }], errors: [ { message: @@ -145,35 +196,64 @@ ruleTester.run('mui-name-matches-component-name', rule, { }, ], }, + { + code: 'useDefaultProps({ props: inProps })', + errors: [ + { + message: 'Unable to find `name` property. Did you forget to pass `name`?', + type: 'ObjectExpression', + }, + ], + }, + { + code: 'useDefaultProps({ props: inProps, name })', + errors: [ + { + message: + 'Unable to resolve `name`. Please hardcode the `name` i.e. use a string literal.', + type: 'Identifier', + }, + ], + }, + { + code: "useDefaultProps({ props: inProps, name: 'MuiPickersDateRangePicker' })", + errors: [{ message: 'Unable to find component for this call.', type: 'CallExpression' }], + }, { code: ` - const useThemeProps = createUseThemeProps(); - - const Badge = React.forwardRef(function Badge(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiBadge' }); + const StaticDateRangePicker = React.forwardRef(function StaticDateRangePicker( + inProps: StaticDateRangePickerProps, + ref: React.Ref, + ) { + const props = useDatePickerDefaultizedProps(inProps); }); `, + options: [{ customHooks: ['useDatePickerDefaultizedProps'] }], errors: [ { message: - 'Unable to resolve `name`. Please hardcode the `name` i.e. use a string literal.', - type: 'CallExpression', + "Unable to find name argument. Expected `useDatePickerDefaultizedProps(firstParameter, 'MuiComponent')`.", + type: 'Identifier', }, ], }, + // ================ + // customHooks { code: ` - const useThemeProps = createUseThemeProps({ name: 'MuiBadge' }); - - const Badge = React.forwardRef(function Badge(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiBadge' }); + const StaticDateRangePicker = React.forwardRef(function StaticDateRangePicker( + inProps: StaticDateRangePickerProps, + ref: React.Ref, + ) { + const props = useDatePickerDefaultizedProps(inProps, 'MuiPickersDateRangePicker'); }); `, + options: [{ customHooks: ['useDatePickerDefaultizedProps'] }], errors: [ { message: - 'Unable to resolve `name`. Please hardcode the `name` i.e. use a string literal.', - type: 'ObjectExpression', + "Expected `name` to be 'MuiStaticDateRangePicker' but instead got 'MuiPickersDateRangePicker'.", + type: 'Literal', }, ], }, diff --git a/packages/mui-lab/src/LoadingButton/LoadingButton.js b/packages/mui-lab/src/LoadingButton/LoadingButton.js index 98ca8e4e90c730..b2b36de4a39c8c 100644 --- a/packages/mui-lab/src/LoadingButton/LoadingButton.js +++ b/packages/mui-lab/src/LoadingButton/LoadingButton.js @@ -4,7 +4,8 @@ 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 { styled, useThemeProps } from '@mui/material/styles'; +import { styled } from '@mui/material/styles'; +import { useDefaultProps } from '@mui/material/DefaultPropsProvider'; import Button from '@mui/material/Button'; import { ButtonGroupContext } from '@mui/material/ButtonGroup'; import CircularProgress from '@mui/material/CircularProgress'; @@ -140,7 +141,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/Masonry/Masonry.js b/packages/mui-lab/src/Masonry/Masonry.js index 7d05bac97615e4..39a806d4856442 100644 --- a/packages/mui-lab/src/Masonry/Masonry.js +++ b/packages/mui-lab/src/Masonry/Masonry.js @@ -1,7 +1,8 @@ 'use client'; import { unstable_composeClasses as composeClasses } from '@mui/base'; import * as ReactDOM from 'react-dom'; -import { styled, useThemeProps } from '@mui/material/styles'; +import { styled } from '@mui/material/styles'; +import { useDefaultProps } from '@mui/material/DefaultPropsProvider'; import { createUnarySpacing, getValue, @@ -171,7 +172,7 @@ const MasonryRoot = styled('div', { })(getStyle); const Masonry = React.forwardRef(function Masonry(inProps, ref) { - const props = useThemeProps({ + const props = useDefaultProps({ props: inProps, name: 'MuiMasonry', }); diff --git a/packages/mui-material/src/Accordion/Accordion.js b/packages/mui-material/src/Accordion/Accordion.js index 4fcaf33da96b29..647acf7834d7a0 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 c908118889da52..ab9c66844665d8 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 fec36c2e635a3d..586e79fa232bde 100644 --- a/packages/mui-material/src/AppBar/AppBar.js +++ b/packages/mui-material/src/AppBar/AppBar.js @@ -4,7 +4,7 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; import styled from '../styles/styled'; -import useThemeProps from '../styles/useThemeProps'; +import { useDefaultProps } from '../DefaultPropsProvider'; import capitalize from '../utils/capitalize'; import Paper from '../Paper'; import { getAppBarUtilityClass } from './appBarClasses'; @@ -138,7 +138,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 a2c38211f3b979..de6e7ba5844f6c 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 useForkRef from '../utils/useForkRef'; -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 a4aea78bd739ca..e527b3dfc535ed 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 84babf704c59e8..221ee914a97b62 100644 --- a/packages/mui-material/src/AvatarGroup/AvatarGroup.js +++ b/packages/mui-material/src/AvatarGroup/AvatarGroup.js @@ -6,7 +6,7 @@ import clsx from 'clsx'; import chainPropTypes from '@mui/utils/chainPropTypes'; import composeClasses from '@mui/utils/composeClasses'; import styled from '../styles/styled'; -import useThemeProps from '../styles/useThemeProps'; +import { useDefaultProps } from '../DefaultPropsProvider'; import Avatar, { avatarClasses } from '../Avatar'; import avatarGroupClasses, { getAvatarGroupUtilityClass } from './avatarGroupClasses'; @@ -54,7 +54,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 1221de8bc3db64..16b9612e088162 100644 --- a/packages/mui-material/src/Backdrop/Backdrop.js +++ b/packages/mui-material/src/Backdrop/Backdrop.js @@ -4,7 +4,7 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; import styled from '../styles/styled'; -import useThemeProps from '../styles/useThemeProps'; +import { useDefaultProps } from '../DefaultPropsProvider'; import Fade from '../Fade'; import { getBackdropUtilityClass } from './backdropClasses'; @@ -43,7 +43,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 f38326e038e5a9..4eff3401d1ff78 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; @@ -244,7 +243,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 86eb69a517aec6..56d67db3bc6cd1 100755 --- a/packages/mui-material/src/BottomNavigation/BottomNavigation.js +++ b/packages/mui-material/src/BottomNavigation/BottomNavigation.js @@ -5,7 +5,7 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; import styled from '../styles/styled'; -import useThemeProps from '../styles/useThemeProps'; +import { useDefaultProps } from '../DefaultPropsProvider'; import { getBottomNavigationUtilityClass } from './bottomNavigationClasses'; const useUtilityClasses = (ownerState) => { @@ -30,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 caedc7018e73b3..f2f6ee090dc5cb 100644 --- a/packages/mui-material/src/BottomNavigationAction/BottomNavigationAction.js +++ b/packages/mui-material/src/BottomNavigationAction/BottomNavigationAction.js @@ -4,7 +4,7 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; import styled from '../styles/styled'; -import useThemeProps from '../styles/useThemeProps'; +import { useDefaultProps } from '../DefaultPropsProvider'; import ButtonBase from '../ButtonBase'; import unsupportedProp from '../utils/unsupportedProp'; import bottomNavigationActionClasses, { @@ -75,7 +75,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 6d9ffc22b684d4..d18306a79339a0 100644 --- a/packages/mui-material/src/Breadcrumbs/Breadcrumbs.js +++ b/packages/mui-material/src/Breadcrumbs/Breadcrumbs.js @@ -7,7 +7,7 @@ import integerPropType from '@mui/utils/integerPropType'; import { useSlotProps } from '@mui/base/utils'; import composeClasses from '@mui/utils/composeClasses'; import styled from '../styles/styled'; -import useThemeProps from '../styles/useThemeProps'; +import { useDefaultProps } from '../DefaultPropsProvider'; import Typography from '../Typography'; import BreadcrumbCollapsed from './BreadcrumbCollapsed'; import breadcrumbsClasses, { getBreadcrumbsUtilityClass } from './breadcrumbsClasses'; @@ -80,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 483ed0d99fe0e1..c7933f7df425ed 100644 --- a/packages/mui-material/src/Button/Button.js +++ b/packages/mui-material/src/Button/Button.js @@ -6,7 +6,7 @@ import resolveProps from '@mui/utils/resolveProps'; import composeClasses from '@mui/utils/composeClasses'; import { alpha } from '@mui/system/colorManipulator'; import styled, { rootShouldForwardProp } from '../styles/styled'; -import useThemeProps from '../styles/useThemeProps'; +import { useDefaultProps } from '../DefaultPropsProvider'; import ButtonBase from '../ButtonBase'; import capitalize from '../utils/capitalize'; import buttonClasses, { getButtonUtilityClass } from './buttonClasses'; @@ -301,7 +301,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 bad1a0f69f2891..b11df47e3724a2 100644 --- a/packages/mui-material/src/ButtonBase/ButtonBase.js +++ b/packages/mui-material/src/ButtonBase/ButtonBase.js @@ -6,7 +6,7 @@ import refType from '@mui/utils/refType'; import elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef'; import composeClasses from '@mui/utils/composeClasses'; import styled from '../styles/styled'; -import useThemeProps from '../styles/useThemeProps'; +import { useDefaultProps } from '../DefaultPropsProvider'; import useForkRef from '../utils/useForkRef'; import useEventCallback from '../utils/useEventCallback'; import useIsFocusVisible from '../utils/useIsFocusVisible'; @@ -73,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 6834650d85fc06..e5b08dbf1db1dc 100644 --- a/packages/mui-material/src/ButtonBase/TouchRipple.js +++ b/packages/mui-material/src/ButtonBase/TouchRipple.js @@ -6,7 +6,7 @@ import clsx from 'clsx'; import { keyframes } from '@mui/system'; import useTimeout from '@mui/utils/useTimeout'; import styled from '../styles/styled'; -import useThemeProps from '../styles/useThemeProps'; +import { useDefaultProps } from '../DefaultPropsProvider'; import Ripple from './Ripple'; import touchRippleClasses from './touchRippleClasses'; @@ -120,7 +120,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 8dc5c7aa6e1855..466d6270b374aa 100644 --- a/packages/mui-material/src/ButtonGroup/ButtonGroup.js +++ b/packages/mui-material/src/ButtonGroup/ButtonGroup.js @@ -7,7 +7,7 @@ import { alpha } from '@mui/system/colorManipulator'; import getValidReactChildren from '@mui/utils/getValidReactChildren'; import capitalize from '../utils/capitalize'; import styled from '../styles/styled'; -import useThemeProps from '../styles/useThemeProps'; +import { useDefaultProps } from '../DefaultPropsProvider'; import buttonGroupClasses, { getButtonGroupUtilityClass } from './buttonGroupClasses'; import ButtonGroupContext from './ButtonGroupContext'; import ButtonGroupButtonContext from './ButtonGroupButtonContext'; @@ -199,7 +199,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 76fec05f8f4399..776c7b7ce83d97 100644 --- a/packages/mui-material/src/Card/Card.js +++ b/packages/mui-material/src/Card/Card.js @@ -5,7 +5,7 @@ import clsx from 'clsx'; import chainPropTypes from '@mui/utils/chainPropTypes'; import composeClasses from '@mui/utils/composeClasses'; import styled from '../styles/styled'; -import useThemeProps from '../styles/useThemeProps'; +import { useDefaultProps } from '../DefaultPropsProvider'; import Paper from '../Paper'; import { getCardUtilityClass } from './cardClasses'; @@ -30,7 +30,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 55cf85f103b9f0..7507f12b2f423e 100644 --- a/packages/mui-material/src/CardActionArea/CardActionArea.js +++ b/packages/mui-material/src/CardActionArea/CardActionArea.js @@ -3,7 +3,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; -import useThemeProps from '../styles/useThemeProps'; +import { useDefaultProps } from '../DefaultPropsProvider'; import styled from '../styles/styled'; import cardActionAreaClasses, { getCardActionAreaUtilityClass } from './cardActionAreaClasses'; import ButtonBase from '../ButtonBase'; @@ -60,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 c20972400583d5..d231963e92ec9f 100644 --- a/packages/mui-material/src/CardActions/CardActions.js +++ b/packages/mui-material/src/CardActions/CardActions.js @@ -4,7 +4,7 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; import styled from '../styles/styled'; -import useThemeProps from '../styles/useThemeProps'; +import { useDefaultProps } from '../DefaultPropsProvider'; import { getCardActionsUtilityClass } from './cardActionsClasses'; const useUtilityClasses = (ownerState) => { @@ -37,7 +37,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 2021d480c12177..c62b4ccbc91059 100644 --- a/packages/mui-material/src/CardContent/CardContent.js +++ b/packages/mui-material/src/CardContent/CardContent.js @@ -4,7 +4,7 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; import styled from '../styles/styled'; -import useThemeProps from '../styles/useThemeProps'; +import { useDefaultProps } from '../DefaultPropsProvider'; import { getCardContentUtilityClass } from './cardContentClasses'; const useUtilityClasses = (ownerState) => { @@ -31,7 +31,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 1ac7c5e80ad7fa..9a4a09cb14ca9a 100644 --- a/packages/mui-material/src/CardHeader/CardHeader.js +++ b/packages/mui-material/src/CardHeader/CardHeader.js @@ -4,7 +4,7 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; import Typography from '../Typography'; -import useThemeProps from '../styles/useThemeProps'; +import { useDefaultProps } from '../DefaultPropsProvider'; import styled from '../styles/styled'; import cardHeaderClasses, { getCardHeaderUtilityClass } from './cardHeaderClasses'; @@ -68,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 6cf26c3cba1f38..e04acd632e0a4a 100644 --- a/packages/mui-material/src/CardMedia/CardMedia.js +++ b/packages/mui-material/src/CardMedia/CardMedia.js @@ -4,7 +4,7 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import chainPropTypes from '@mui/utils/chainPropTypes'; import composeClasses from '@mui/utils/composeClasses'; -import useThemeProps from '../styles/useThemeProps'; +import { useDefaultProps } from '../DefaultPropsProvider'; import styled from '../styles/styled'; import { getCardMediaUtilityClass } from './cardMediaClasses'; @@ -45,7 +45,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 2a320260668f68..a68f3c9720b942 100644 --- a/packages/mui-material/src/Checkbox/Checkbox.js +++ b/packages/mui-material/src/Checkbox/Checkbox.js @@ -10,7 +10,7 @@ import CheckBoxOutlineBlankIcon from '../internal/svg-icons/CheckBoxOutlineBlank import CheckBoxIcon from '../internal/svg-icons/CheckBox'; import IndeterminateCheckBoxIcon from '../internal/svg-icons/IndeterminateCheckBox'; import capitalize from '../utils/capitalize'; -import useThemeProps from '../styles/useThemeProps'; +import { useDefaultProps } from '../DefaultPropsProvider'; import styled, { rootShouldForwardProp } from '../styles/styled'; import checkboxClasses, { getCheckboxUtilityClass } from './checkboxClasses'; @@ -85,7 +85,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 a8ffaf70cf30d8..228102c72bf308 100644 --- a/packages/mui-material/src/Chip/Chip.js +++ b/packages/mui-material/src/Chip/Chip.js @@ -9,7 +9,7 @@ import useForkRef from '../utils/useForkRef'; import unsupportedProp from '../utils/unsupportedProp'; import capitalize from '../utils/capitalize'; import ButtonBase from '../ButtonBase'; -import useThemeProps from '../styles/useThemeProps'; +import { useDefaultProps } from '../DefaultPropsProvider'; import styled from '../styles/styled'; import chipClasses, { getChipUtilityClass } from './chipClasses'; @@ -332,7 +332,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 183b589359da0b..d2b05b0ac9cdc8 100644 --- a/packages/mui-material/src/CircularProgress/CircularProgress.js +++ b/packages/mui-material/src/CircularProgress/CircularProgress.js @@ -6,7 +6,7 @@ import chainPropTypes from '@mui/utils/chainPropTypes'; import composeClasses from '@mui/utils/composeClasses'; import { keyframes, css } from '@mui/system'; import capitalize from '../utils/capitalize'; -import useThemeProps from '../styles/useThemeProps'; +import { useDefaultProps } from '../DefaultPropsProvider'; import styled from '../styles/styled'; import { getCircularProgressUtilityClass } from './circularProgressClasses'; @@ -130,7 +130,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 27bc19224a42f5..baeea3ff0d70e6 100644 --- a/packages/mui-material/src/Collapse/Collapse.js +++ b/packages/mui-material/src/Collapse/Collapse.js @@ -7,7 +7,7 @@ import useTimeout from '@mui/utils/useTimeout'; import elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef'; import composeClasses from '@mui/utils/composeClasses'; import styled from '../styles/styled'; -import useThemeProps from '../styles/useThemeProps'; +import { useDefaultProps } from '../DefaultPropsProvider'; import { duration } from '../styles/createTransitions'; import { getTransitionProps } from '../transitions/utils'; import useTheme from '../styles/useTheme'; @@ -99,7 +99,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/Container/Container.js b/packages/mui-material/src/Container/Container.js index f6ba767d0fcf90..acd6ef3778b913 100644 --- a/packages/mui-material/src/Container/Container.js +++ b/packages/mui-material/src/Container/Container.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import { createContainer } from '@mui/system'; import capitalize from '../utils/capitalize'; import styled from '../styles/styled'; -import useThemeProps from '../styles/useThemeProps'; +import { useDefaultProps } from '../DefaultPropsProvider'; const Container = createContainer({ createStyledComponent: styled('div', { @@ -20,7 +20,7 @@ const Container = createContainer({ ]; }, }), - useThemeProps: (inProps) => useThemeProps({ props: inProps, name: 'MuiContainer' }), + useThemeProps: (inProps) => useDefaultProps({ props: inProps, name: 'MuiContainer' }), }); Container.propTypes /* remove-proptypes */ = { diff --git a/packages/mui-material/src/CssBaseline/CssBaseline.js b/packages/mui-material/src/CssBaseline/CssBaseline.js index 12d16875e3f984..657ce8f0d75336 100644 --- a/packages/mui-material/src/CssBaseline/CssBaseline.js +++ b/packages/mui-material/src/CssBaseline/CssBaseline.js @@ -1,7 +1,7 @@ 'use client'; import * as React from 'react'; import PropTypes from 'prop-types'; -import useThemeProps from '../styles/useThemeProps'; +import { useDefaultProps } from '../DefaultPropsProvider'; import GlobalStyles from '../GlobalStyles'; export const html = (theme, enableColorScheme) => ({ @@ -67,7 +67,7 @@ export const styles = (theme, enableColorScheme = false) => { * Kickstart an elegant, consistent, and simple baseline to build upon. */ function CssBaseline(inProps) { - const props = useThemeProps({ props: inProps, name: 'MuiCssBaseline' }); + const props = useDefaultProps({ props: inProps, name: 'MuiCssBaseline' }); const { children, enableColorScheme = false } = props; return ( 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 b88a9103d01389..e3cfe45a6846e0 100644 --- a/packages/mui-material/src/Dialog/Dialog.js +++ b/packages/mui-material/src/Dialog/Dialog.js @@ -8,7 +8,7 @@ import capitalize from '../utils/capitalize'; import Modal from '../Modal'; import Fade from '../Fade'; import Paper from '../Paper'; -import useThemeProps from '../styles/useThemeProps'; +import { useDefaultProps } from '../DefaultPropsProvider'; import styled from '../styles/styled'; import dialogClasses, { getDialogUtilityClass } from './dialogClasses'; import DialogContext from './DialogContext'; @@ -163,7 +163,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 a66fb25bf2008b..e80bc5f48a9896 100644 --- a/packages/mui-material/src/DialogActions/DialogActions.js +++ b/packages/mui-material/src/DialogActions/DialogActions.js @@ -4,7 +4,7 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; import styled from '../styles/styled'; -import useThemeProps from '../styles/useThemeProps'; +import { useDefaultProps } from '../DefaultPropsProvider'; import { getDialogActionsUtilityClass } from './dialogActionsClasses'; const useUtilityClasses = (ownerState) => { @@ -39,7 +39,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 ec0367c918df4c..06476950a65306 100644 --- a/packages/mui-material/src/DialogContent/DialogContent.js +++ b/packages/mui-material/src/DialogContent/DialogContent.js @@ -4,7 +4,7 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; import styled from '../styles/styled'; -import useThemeProps from '../styles/useThemeProps'; +import { useDefaultProps } from '../DefaultPropsProvider'; import { getDialogContentUtilityClass } from './dialogContentClasses'; import dialogTitleClasses from '../DialogTitle/dialogTitleClasses'; @@ -46,7 +46,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 c6c8cabc6056ed..02f4f930f10d4d 100644 --- a/packages/mui-material/src/DialogContentText/DialogContentText.js +++ b/packages/mui-material/src/DialogContentText/DialogContentText.js @@ -4,7 +4,7 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; import styled, { rootShouldForwardProp } from '../styles/styled'; -import useThemeProps from '../styles/useThemeProps'; +import { useDefaultProps } from '../DefaultPropsProvider'; import Typography from '../Typography'; import { getDialogContentTextUtilityClass } from './dialogContentTextClasses'; @@ -31,7 +31,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 aa160274950623..a98865c02d9213 100644 --- a/packages/mui-material/src/DialogTitle/DialogTitle.js +++ b/packages/mui-material/src/DialogTitle/DialogTitle.js @@ -5,7 +5,7 @@ import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; import Typography from '../Typography'; import styled from '../styles/styled'; -import useThemeProps from '../styles/useThemeProps'; +import { useDefaultProps } from '../DefaultPropsProvider'; import { getDialogTitleUtilityClass } from './dialogTitleClasses'; import DialogContext from '../Dialog/DialogContext'; @@ -29,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 80aefb09bbe3c6..26784a02c5daee 100644 --- a/packages/mui-material/src/Divider/Divider.js +++ b/packages/mui-material/src/Divider/Divider.js @@ -5,7 +5,7 @@ import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; import { alpha } from '@mui/system/colorManipulator'; import styled from '../styles/styled'; -import useThemeProps from '../styles/useThemeProps'; +import { useDefaultProps } from '../DefaultPropsProvider'; import { getDividerUtilityClass } from './dividerClasses'; const useUtilityClasses = (ownerState) => { @@ -168,7 +168,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 1849bd69a9d238..d954d54ad36577 100644 --- a/packages/mui-material/src/Drawer/Drawer.js +++ b/packages/mui-material/src/Drawer/Drawer.js @@ -10,7 +10,7 @@ import Slide from '../Slide'; import Paper from '../Paper'; import capitalize from '../utils/capitalize'; import useTheme from '../styles/useTheme'; -import useThemeProps from '../styles/useThemeProps'; +import { useDefaultProps } from '../DefaultPropsProvider'; import styled, { rootShouldForwardProp } from '../styles/styled'; import { getDrawerUtilityClass } from './drawerClasses'; @@ -147,7 +147,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 10f3ab80910ed0..214a14566a8a37 100644 --- a/packages/mui-material/src/Fab/Fab.js +++ b/packages/mui-material/src/Fab/Fab.js @@ -5,7 +5,7 @@ import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; import ButtonBase from '../ButtonBase'; import capitalize from '../utils/capitalize'; -import useThemeProps from '../styles/useThemeProps'; +import { useDefaultProps } from '../DefaultPropsProvider'; import fabClasses, { getFabUtilityClass } from './fabClasses'; import styled, { rootShouldForwardProp } from '../styles/styled'; @@ -138,7 +138,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 9e2de297107310..44f76a4051db98 100644 --- a/packages/mui-material/src/FilledInput/FilledInput.js +++ b/packages/mui-material/src/FilledInput/FilledInput.js @@ -6,7 +6,7 @@ import PropTypes from 'prop-types'; import composeClasses from '@mui/utils/composeClasses'; import InputBase from '../InputBase'; import styled, { rootShouldForwardProp } from '../styles/styled'; -import useThemeProps from '../styles/useThemeProps'; +import { useDefaultProps } from '../DefaultPropsProvider'; import filledInputClasses, { getFilledInputUtilityClass } from './filledInputClasses'; import { rootOverridesResolver as inputBaseRootOverridesResolver, @@ -206,7 +206,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, diff --git a/packages/mui-material/src/FormControl/FormControl.js b/packages/mui-material/src/FormControl/FormControl.js index ce8353db232aa5..33cc0847ef0dd4 100644 --- a/packages/mui-material/src/FormControl/FormControl.js +++ b/packages/mui-material/src/FormControl/FormControl.js @@ -3,7 +3,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; -import useThemeProps from '../styles/useThemeProps'; +import { useDefaultProps } from '../DefaultPropsProvider'; import styled from '../styles/styled'; import { isFilled, isAdornedStart } from '../InputBase/utils'; import capitalize from '../utils/capitalize'; @@ -78,7 +78,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 d6d215eb661ca8..75301754f8de30 100644 --- a/packages/mui-material/src/FormControlLabel/FormControlLabel.js +++ b/packages/mui-material/src/FormControlLabel/FormControlLabel.js @@ -9,7 +9,7 @@ import Stack from '../Stack'; import Typography from '../Typography'; import capitalize from '../utils/capitalize'; import styled from '../styles/styled'; -import useThemeProps from '../styles/useThemeProps'; +import { useDefaultProps } from '../DefaultPropsProvider'; import formControlLabelClasses, { getFormControlLabelUtilityClasses, } from './formControlLabelClasses'; @@ -91,7 +91,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 7a908ea680476c..cb4cd3d63551d8 100644 --- a/packages/mui-material/src/FormGroup/FormGroup.js +++ b/packages/mui-material/src/FormGroup/FormGroup.js @@ -4,7 +4,7 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; import styled from '../styles/styled'; -import useThemeProps from '../styles/useThemeProps'; +import { useDefaultProps } from '../DefaultPropsProvider'; import { getFormGroupUtilityClass } from './formGroupClasses'; import useFormControl from '../FormControl/useFormControl'; import formControlState from '../FormControl/formControlState'; @@ -42,7 +42,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 f8acae4f37d515..41b84bd9cd68ec 100644 --- a/packages/mui-material/src/FormHelperText/FormHelperText.js +++ b/packages/mui-material/src/FormHelperText/FormHelperText.js @@ -8,7 +8,7 @@ import useFormControl from '../FormControl/useFormControl'; import styled from '../styles/styled'; import capitalize from '../utils/capitalize'; import formHelperTextClasses, { getFormHelperTextUtilityClasses } from './formHelperTextClasses'; -import useThemeProps from '../styles/useThemeProps'; +import { useDefaultProps } from '../DefaultPropsProvider'; const useUtilityClasses = (ownerState) => { const { classes, contained, size, disabled, error, filled, focused, required } = ownerState; @@ -65,7 +65,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 ba9826f0d7f52a..fb733a4f06edc3 100644 --- a/packages/mui-material/src/FormLabel/FormLabel.js +++ b/packages/mui-material/src/FormLabel/FormLabel.js @@ -6,7 +6,7 @@ import composeClasses from '@mui/utils/composeClasses'; import formControlState from '../FormControl/formControlState'; import useFormControl from '../FormControl/useFormControl'; import capitalize from '../utils/capitalize'; -import useThemeProps from '../styles/useThemeProps'; +import { useDefaultProps } from '../DefaultPropsProvider'; import styled from '../styles/styled'; import formLabelClasses, { getFormLabelUtilityClasses } from './formLabelClasses'; @@ -66,7 +66,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/Grid/Grid.js b/packages/mui-material/src/Grid/Grid.js index 62900dc203ac44..4d47b87905e7ea 100644 --- a/packages/mui-material/src/Grid/Grid.js +++ b/packages/mui-material/src/Grid/Grid.js @@ -20,7 +20,7 @@ import { extendSxProp } from '@mui/system/styleFunctionSx'; import composeClasses from '@mui/utils/composeClasses'; import requirePropFactory from '../utils/requirePropFactory'; import styled from '../styles/styled'; -import useThemeProps from '../styles/useThemeProps'; +import { useDefaultProps } from '../DefaultPropsProvider'; import useTheme from '../styles/useTheme'; import GridContext from './GridContext'; import gridClasses, { getGridUtilityClass } from './gridClasses'; @@ -402,7 +402,7 @@ const useUtilityClasses = (ownerState) => { }; const Grid = React.forwardRef(function Grid(inProps, ref) { - const themeProps = useThemeProps({ props: inProps, name: 'MuiGrid' }); + const themeProps = useDefaultProps({ props: inProps, name: 'MuiGrid' }); const { breakpoints } = useTheme(); const props = extendSxProp(themeProps); diff --git a/packages/mui-material/src/Icon/Icon.js b/packages/mui-material/src/Icon/Icon.js index 8a8dbbc9344e4e..b3d64f57ac8f41 100644 --- a/packages/mui-material/src/Icon/Icon.js +++ b/packages/mui-material/src/Icon/Icon.js @@ -4,7 +4,7 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; import styled from '../styles/styled'; -import useThemeProps from '../styles/useThemeProps'; +import { useDefaultProps } from '../DefaultPropsProvider'; import capitalize from '../utils/capitalize'; import { getIconUtilityClass } from './iconClasses'; @@ -65,7 +65,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 902008d145f9ba..fb08a02837b8b1 100644 --- a/packages/mui-material/src/IconButton/IconButton.js +++ b/packages/mui-material/src/IconButton/IconButton.js @@ -6,7 +6,7 @@ import chainPropTypes from '@mui/utils/chainPropTypes'; import composeClasses from '@mui/utils/composeClasses'; import { alpha } from '@mui/system/colorManipulator'; import styled from '../styles/styled'; -import useThemeProps from '../styles/useThemeProps'; +import { useDefaultProps } from '../DefaultPropsProvider'; import ButtonBase from '../ButtonBase'; import capitalize from '../utils/capitalize'; import iconButtonClasses, { getIconButtonUtilityClass } from './iconButtonClasses'; @@ -114,7 +114,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 5a521234e12ef5..87fcedfa228ddc 100644 --- a/packages/mui-material/src/ImageList/ImageList.js +++ b/packages/mui-material/src/ImageList/ImageList.js @@ -5,7 +5,7 @@ import clsx from 'clsx'; import PropTypes from 'prop-types'; import * as React from 'react'; import styled from '../styles/styled'; -import useThemeProps from '../styles/useThemeProps'; +import { useDefaultProps } from '../DefaultPropsProvider'; import { getImageListUtilityClass } from './imageListClasses'; import ImageListContext from './ImageListContext'; @@ -42,7 +42,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 4efc8004bd0537..e1d12bc32e820f 100644 --- a/packages/mui-material/src/ImageListItem/ImageListItem.js +++ b/packages/mui-material/src/ImageListItem/ImageListItem.js @@ -7,7 +7,7 @@ import * as React from 'react'; import { isFragment } from 'react-is'; import ImageListContext from '../ImageList/ImageListContext'; import styled from '../styles/styled'; -import useThemeProps from '../styles/useThemeProps'; +import { useDefaultProps } from '../DefaultPropsProvider'; import isMuiElement from '../utils/isMuiElement'; import imageListItemClasses, { getImageListItemUtilityClass } from './imageListItemClasses'; @@ -62,7 +62,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 beb348657dbc6b..e31d581562d1d7 100644 --- a/packages/mui-material/src/ImageListItemBar/ImageListItemBar.js +++ b/packages/mui-material/src/ImageListItemBar/ImageListItemBar.js @@ -4,7 +4,7 @@ import clsx from 'clsx'; import PropTypes from 'prop-types'; import * as React from 'react'; import styled from '../styles/styled'; -import useThemeProps from '../styles/useThemeProps'; +import { useDefaultProps } from '../DefaultPropsProvider'; import capitalize from '../utils/capitalize'; import { getImageListItemBarUtilityClass } from './imageListItemBarClasses'; @@ -138,7 +138,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 23f0d477ed74f3..8dfbf75119a31e 100644 --- a/packages/mui-material/src/Input/Input.js +++ b/packages/mui-material/src/Input/Input.js @@ -6,7 +6,7 @@ import deepmerge from '@mui/utils/deepmerge'; import refType from '@mui/utils/refType'; import InputBase from '../InputBase'; import styled, { rootShouldForwardProp } from '../styles/styled'; -import useThemeProps from '../styles/useThemeProps'; +import { useDefaultProps } from '../DefaultPropsProvider'; import inputClasses, { getInputUtilityClass } from './inputClasses'; import { rootOverridesResolver as inputBaseRootOverridesResolver, @@ -116,7 +116,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, components = {}, diff --git a/packages/mui-material/src/InputAdornment/InputAdornment.js b/packages/mui-material/src/InputAdornment/InputAdornment.js index 286d7f3463c249..c367d2567bdd69 100644 --- a/packages/mui-material/src/InputAdornment/InputAdornment.js +++ b/packages/mui-material/src/InputAdornment/InputAdornment.js @@ -9,7 +9,7 @@ import FormControlContext from '../FormControl/FormControlContext'; import useFormControl from '../FormControl/useFormControl'; import styled from '../styles/styled'; import inputAdornmentClasses, { getInputAdornmentUtilityClass } from './inputAdornmentClasses'; -import useThemeProps from '../styles/useThemeProps'; +import { useDefaultProps } from '../DefaultPropsProvider'; const overridesResolver = (props, styles) => { const { ownerState } = props; @@ -70,7 +70,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 970dd62ab36b2c..7df98057ed3bef 100644 --- a/packages/mui-material/src/InputBase/InputBase.js +++ b/packages/mui-material/src/InputBase/InputBase.js @@ -12,7 +12,7 @@ import formControlState from '../FormControl/formControlState'; import FormControlContext from '../FormControl/FormControlContext'; import useFormControl from '../FormControl/useFormControl'; import styled from '../styles/styled'; -import useThemeProps from '../styles/useThemeProps'; +import { useDefaultProps } from '../DefaultPropsProvider'; import capitalize from '../utils/capitalize'; import useForkRef from '../utils/useForkRef'; import useEnhancedEffect from '../utils/useEnhancedEffect'; @@ -242,7 +242,7 @@ const inputGlobalStyles = ( * 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 dd8003ee8ebb7c..7ad3682ea8964a 100644 --- a/packages/mui-material/src/InputLabel/InputLabel.js +++ b/packages/mui-material/src/InputLabel/InputLabel.js @@ -6,7 +6,7 @@ import clsx from 'clsx'; import formControlState from '../FormControl/formControlState'; import useFormControl from '../FormControl/useFormControl'; import FormLabel, { formLabelClasses } from '../FormLabel'; -import useThemeProps from '../styles/useThemeProps'; +import { useDefaultProps } from '../DefaultPropsProvider'; import capitalize from '../utils/capitalize'; import styled, { rootShouldForwardProp } from '../styles/styled'; import { getInputLabelUtilityClasses } from './inputLabelClasses'; @@ -122,7 +122,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 bb9d8b85cafb3d..755b84de90cda4 100644 --- a/packages/mui-material/src/LinearProgress/LinearProgress.js +++ b/packages/mui-material/src/LinearProgress/LinearProgress.js @@ -8,7 +8,7 @@ import { darken, lighten } from '@mui/system/colorManipulator'; import { useRtl } from '@mui/system/RtlProvider'; import capitalize from '../utils/capitalize'; import styled from '../styles/styled'; -import useThemeProps from '../styles/useThemeProps'; +import { useDefaultProps } from '../DefaultPropsProvider'; import { getLinearProgressUtilityClass } from './linearProgressClasses'; const TRANSITION_DURATION = 4; // seconds @@ -267,7 +267,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 f5e72605b7312d..e88bb300e1684d 100644 --- a/packages/mui-material/src/Link/Link.js +++ b/packages/mui-material/src/Link/Link.js @@ -6,7 +6,7 @@ import elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef'; import composeClasses from '@mui/utils/composeClasses'; import capitalize from '../utils/capitalize'; import styled from '../styles/styled'; -import useThemeProps from '../styles/useThemeProps'; +import { useDefaultProps } from '../DefaultPropsProvider'; import useIsFocusVisible from '../utils/useIsFocusVisible'; import useForkRef from '../utils/useForkRef'; import Typography from '../Typography'; @@ -87,7 +87,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 aecb83a331e8ae..6f526b6d3c63a1 100644 --- a/packages/mui-material/src/List/List.js +++ b/packages/mui-material/src/List/List.js @@ -4,7 +4,7 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; import styled from '../styles/styled'; -import useThemeProps from '../styles/useThemeProps'; +import { useDefaultProps } from '../DefaultPropsProvider'; import ListContext from './ListContext'; import { getListUtilityClass } from './listClasses'; @@ -46,7 +46,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 d60ee0e4892a8c..5c6eea1aa16378 100644 --- a/packages/mui-material/src/ListItem/ListItem.js +++ b/packages/mui-material/src/ListItem/ListItem.js @@ -8,7 +8,7 @@ import elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef'; import chainPropTypes from '@mui/utils/chainPropTypes'; import { alpha } from '@mui/system/colorManipulator'; import styled from '../styles/styled'; -import useThemeProps from '../styles/useThemeProps'; +import { useDefaultProps } from '../DefaultPropsProvider'; import ButtonBase from '../ButtonBase'; import isMuiElement from '../utils/isMuiElement'; import useEnhancedEffect from '../utils/useEnhancedEffect'; @@ -173,7 +173,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 fa580dbcb2509f..1420a629d226b7 100644 --- a/packages/mui-material/src/ListItemAvatar/ListItemAvatar.js +++ b/packages/mui-material/src/ListItemAvatar/ListItemAvatar.js @@ -5,7 +5,7 @@ import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; import ListContext from '../List/ListContext'; import styled from '../styles/styled'; -import useThemeProps from '../styles/useThemeProps'; +import { useDefaultProps } from '../DefaultPropsProvider'; import { getListItemAvatarUtilityClass } from './listItemAvatarClasses'; const useUtilityClasses = (ownerState) => { @@ -38,7 +38,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 58d025dba07928..5a69181520428d 100644 --- a/packages/mui-material/src/ListItemButton/ListItemButton.js +++ b/packages/mui-material/src/ListItemButton/ListItemButton.js @@ -5,7 +5,7 @@ import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; import { alpha } from '@mui/system/colorManipulator'; import styled, { rootShouldForwardProp } from '../styles/styled'; -import useThemeProps from '../styles/useThemeProps'; +import { useDefaultProps } from '../DefaultPropsProvider'; import ButtonBase from '../ButtonBase'; import useEnhancedEffect from '../utils/useEnhancedEffect'; import useForkRef from '../utils/useForkRef'; @@ -126,7 +126,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 7a143e3d89d8c0..37df8213a1d564 100644 --- a/packages/mui-material/src/ListItemIcon/ListItemIcon.js +++ b/packages/mui-material/src/ListItemIcon/ListItemIcon.js @@ -4,7 +4,7 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; import styled from '../styles/styled'; -import useThemeProps from '../styles/useThemeProps'; +import { useDefaultProps } from '../DefaultPropsProvider'; import { getListItemIconUtilityClass } from './listItemIconClasses'; import ListContext from '../List/ListContext'; @@ -40,7 +40,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 3b101be0640fe4..fa2af9b607c93a 100644 --- a/packages/mui-material/src/ListItemSecondaryAction/ListItemSecondaryAction.js +++ b/packages/mui-material/src/ListItemSecondaryAction/ListItemSecondaryAction.js @@ -4,7 +4,7 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; import styled from '../styles/styled'; -import useThemeProps from '../styles/useThemeProps'; +import { useDefaultProps } from '../DefaultPropsProvider'; import ListContext from '../List/ListContext'; import { getListItemSecondaryActionClassesUtilityClass } from './listItemSecondaryActionClasses'; @@ -40,7 +40,7 @@ const ListItemSecondaryActionRoot = styled('div', { * Must be used as the last child of ListItem to function properly. */ 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 b5460439d37b9a..e38dfcff595efa 100644 --- a/packages/mui-material/src/ListItemText/ListItemText.js +++ b/packages/mui-material/src/ListItemText/ListItemText.js @@ -5,7 +5,7 @@ import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; import Typography from '../Typography'; import ListContext from '../List/ListContext'; -import useThemeProps from '../styles/useThemeProps'; +import { useDefaultProps } from '../DefaultPropsProvider'; import styled from '../styles/styled'; import listItemTextClasses, { getListItemTextUtilityClass } from './listItemTextClasses'; @@ -52,7 +52,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 668b3e9dd32dcf..5a379481a0d9d6 100644 --- a/packages/mui-material/src/ListSubheader/ListSubheader.js +++ b/packages/mui-material/src/ListSubheader/ListSubheader.js @@ -4,7 +4,7 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; import styled from '../styles/styled'; -import useThemeProps from '../styles/useThemeProps'; +import { useDefaultProps } from '../DefaultPropsProvider'; import capitalize from '../utils/capitalize'; import { getListSubheaderUtilityClass } from './listSubheaderClasses'; @@ -68,7 +68,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 8fb919b0fb70da..60af5989cb2eb7 100644 --- a/packages/mui-material/src/Menu/Menu.js +++ b/packages/mui-material/src/Menu/Menu.js @@ -10,7 +10,7 @@ import { useRtl } from '@mui/system/RtlProvider'; import MenuList from '../MenuList'; import Popover, { PopoverPaper } from '../Popover'; import styled, { rootShouldForwardProp } from '../styles/styled'; -import useThemeProps from '../styles/useThemeProps'; +import { useDefaultProps } from '../DefaultPropsProvider'; import { getMenuUtilityClass } from './menuClasses'; const RTL_ORIGIN = { @@ -65,7 +65,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 fde0d2867c1e1f..bd4633b3ade552 100644 --- a/packages/mui-material/src/MenuItem/MenuItem.js +++ b/packages/mui-material/src/MenuItem/MenuItem.js @@ -5,7 +5,7 @@ import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; import { alpha } from '@mui/system/colorManipulator'; import styled, { rootShouldForwardProp } from '../styles/styled'; -import useThemeProps from '../styles/useThemeProps'; +import { useDefaultProps } from '../DefaultPropsProvider'; import ListContext from '../List/ListContext'; import ButtonBase from '../ButtonBase'; import useEnhancedEffect from '../utils/useEnhancedEffect'; @@ -147,7 +147,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 fbf543479f5e3f..9fc6d28377eaa0 100644 --- a/packages/mui-material/src/MobileStepper/MobileStepper.js +++ b/packages/mui-material/src/MobileStepper/MobileStepper.js @@ -7,7 +7,7 @@ import composeClasses from '@mui/utils/composeClasses'; import Paper from '../Paper'; import capitalize from '../utils/capitalize'; import LinearProgress from '../LinearProgress'; -import useThemeProps from '../styles/useThemeProps'; +import { useDefaultProps } from '../DefaultPropsProvider'; import styled, { slotShouldForwardProp } from '../styles/styled'; import { getMobileStepperUtilityClass } from './mobileStepperClasses'; @@ -103,7 +103,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 69b85c5bf6d7b4..166c3b63494770 100644 --- a/packages/mui-material/src/Modal/Modal.js +++ b/packages/mui-material/src/Modal/Modal.js @@ -10,7 +10,7 @@ import composeClasses from '@mui/utils/composeClasses'; import FocusTrap from '../Unstable_TrapFocus'; import Portal from '../Portal'; import styled from '../styles/styled'; -import useThemeProps from '../styles/useThemeProps'; +import { useDefaultProps } from '../DefaultPropsProvider'; import Backdrop from '../Backdrop'; import { getModalUtilityClass } from './modalClasses'; @@ -70,7 +70,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/NativeSelect/NativeSelect.js b/packages/mui-material/src/NativeSelect/NativeSelect.js index ebfa1ea9ca753d..b726f039b2f963 100644 --- a/packages/mui-material/src/NativeSelect/NativeSelect.js +++ b/packages/mui-material/src/NativeSelect/NativeSelect.js @@ -8,7 +8,7 @@ import formControlState from '../FormControl/formControlState'; import useFormControl from '../FormControl/useFormControl'; import ArrowDropDownIcon from '../internal/svg-icons/ArrowDropDown'; import Input from '../Input'; -import useThemeProps from '../styles/useThemeProps'; +import { useDefaultProps } from '../DefaultPropsProvider'; import { getNativeSelectUtilityClasses } from './nativeSelectClasses'; const useUtilityClasses = (ownerState) => { @@ -26,7 +26,7 @@ const defaultInput = ; * An alternative to `