From a9232d55aba64543b409ecdf9c01ea7e355cd09a Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Tue, 2 Jul 2024 16:36:17 +0700 Subject: [PATCH 01/10] cherry pick --- .../materialUi/projectSettings.ts | 2 +- .../muiSystem/projectSettings.ts | 4 +- .../DefaultPropsProvider.spec.tsx | 21 +++++++ .../DefaultPropsProvider.tsx | 39 ++++++++++++ .../src/DefaultPropsProvider/index.ts | 1 + .../DefaultPropsProvider.tsx | 61 +++++++++++++++++++ .../src/DefaultPropsProvider/index.ts | 1 + .../src/ThemeProvider/ThemeProvider.js | 5 +- .../src/cssVars/createCssVarsProvider.test.js | 8 ++- 9 files changed, 136 insertions(+), 6 deletions(-) create mode 100644 packages/mui-material/src/DefaultPropsProvider/DefaultPropsProvider.spec.tsx create mode 100644 packages/mui-material/src/DefaultPropsProvider/DefaultPropsProvider.tsx create mode 100644 packages/mui-material/src/DefaultPropsProvider/index.ts create mode 100644 packages/mui-system/src/DefaultPropsProvider/DefaultPropsProvider.tsx create mode 100644 packages/mui-system/src/DefaultPropsProvider/index.ts 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/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-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 36728bfe69e0b2..e151fc22bb4ee5 100644 --- a/packages/mui-system/src/cssVars/createCssVarsProvider.test.js +++ b/packages/mui-system/src/cssVars/createCssVarsProvider.test.js @@ -731,14 +731,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( @@ -746,7 +748,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', () => { From 3dea3d5a9096eff09e1ff4a0ec50105273af4979 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Tue, 2 Jul 2024 16:46:02 +0700 Subject: [PATCH 02/10] migrate mui-material --- packages/mui-material/src/Accordion/Accordion.js | 4 ++-- .../src/AccordionActions/AccordionActions.js | 4 ++-- .../src/AccordionDetails/AccordionDetails.js | 4 ++-- .../src/AccordionSummary/AccordionSummary.js | 4 ++-- packages/mui-material/src/Alert/Alert.js | 4 ++-- packages/mui-material/src/AlertTitle/AlertTitle.js | 4 ++-- packages/mui-material/src/AppBar/AppBar.js | 4 ++-- .../mui-material/src/Autocomplete/Autocomplete.js | 4 ++-- packages/mui-material/src/Avatar/Avatar.js | 4 ++-- packages/mui-material/src/AvatarGroup/AvatarGroup.js | 4 ++-- packages/mui-material/src/Backdrop/Backdrop.js | 4 ++-- packages/mui-material/src/Badge/Badge.js | 4 ++-- .../src/BottomNavigation/BottomNavigation.js | 4 ++-- .../BottomNavigationAction/BottomNavigationAction.js | 4 ++-- packages/mui-material/src/Breadcrumbs/Breadcrumbs.js | 4 ++-- packages/mui-material/src/Button/Button.js | 4 ++-- packages/mui-material/src/ButtonBase/ButtonBase.js | 10 +++++----- packages/mui-material/src/ButtonBase/TouchRipple.js | 4 ++-- packages/mui-material/src/ButtonGroup/ButtonGroup.js | 4 ++-- packages/mui-material/src/Card/Card.js | 4 ++-- .../src/CardActionArea/CardActionArea.js | 4 ++-- packages/mui-material/src/CardActions/CardActions.js | 4 ++-- packages/mui-material/src/CardContent/CardContent.js | 4 ++-- packages/mui-material/src/CardHeader/CardHeader.js | 4 ++-- packages/mui-material/src/CardMedia/CardMedia.js | 4 ++-- packages/mui-material/src/Checkbox/Checkbox.js | 4 ++-- packages/mui-material/src/Chip/Chip.js | 4 ++-- .../src/CircularProgress/CircularProgress.js | 4 ++-- packages/mui-material/src/Collapse/Collapse.js | 4 ++-- packages/mui-material/src/Container/Container.js | 4 ++-- packages/mui-material/src/CssBaseline/CssBaseline.js | 4 ++-- packages/mui-material/src/Dialog/Dialog.js | 4 ++-- .../mui-material/src/DialogActions/DialogActions.js | 4 ++-- .../mui-material/src/DialogContent/DialogContent.js | 4 ++-- .../src/DialogContentText/DialogContentText.js | 4 ++-- packages/mui-material/src/DialogTitle/DialogTitle.js | 4 ++-- packages/mui-material/src/Divider/Divider.js | 4 ++-- packages/mui-material/src/Drawer/Drawer.js | 4 ++-- packages/mui-material/src/Fab/Fab.js | 4 ++-- packages/mui-material/src/FilledInput/FilledInput.js | 4 ++-- packages/mui-material/src/FormControl/FormControl.js | 4 ++-- .../src/FormControlLabel/FormControlLabel.js | 4 ++-- packages/mui-material/src/FormGroup/FormGroup.js | 4 ++-- .../src/FormHelperText/FormHelperText.js | 10 +++++----- packages/mui-material/src/FormLabel/FormLabel.js | 4 ++-- packages/mui-material/src/Grid/Grid.js | 4 ++-- packages/mui-material/src/Icon/Icon.js | 4 ++-- packages/mui-material/src/IconButton/IconButton.js | 4 ++-- packages/mui-material/src/ImageList/ImageList.js | 4 ++-- .../mui-material/src/ImageListItem/ImageListItem.js | 4 ++-- .../src/ImageListItemBar/ImageListItemBar.js | 4 ++-- packages/mui-material/src/Input/Input.js | 4 ++-- .../src/InputAdornment/InputAdornment.js | 10 +++++----- packages/mui-material/src/InputBase/InputBase.js | 4 ++-- packages/mui-material/src/InputLabel/InputLabel.js | 4 ++-- .../src/LinearProgress/LinearProgress.js | 4 ++-- packages/mui-material/src/Link/Link.js | 4 ++-- packages/mui-material/src/List/List.js | 4 ++-- packages/mui-material/src/ListItem/ListItem.js | 4 ++-- .../src/ListItemAvatar/ListItemAvatar.js | 4 ++-- .../src/ListItemButton/ListItemButton.js | 4 ++-- .../mui-material/src/ListItemIcon/ListItemIcon.js | 4 ++-- .../ListItemSecondaryAction.js | 4 ++-- .../mui-material/src/ListItemText/ListItemText.js | 4 ++-- .../mui-material/src/ListSubheader/ListSubheader.js | 4 ++-- packages/mui-material/src/Menu/Menu.js | 4 ++-- packages/mui-material/src/MenuItem/MenuItem.js | 4 ++-- .../mui-material/src/MobileStepper/MobileStepper.js | 4 ++-- packages/mui-material/src/Modal/Modal.js | 4 ++-- .../mui-material/src/NativeSelect/NativeSelect.js | 4 ++-- .../mui-material/src/OutlinedInput/NotchedOutline.js | 6 +++--- .../mui-material/src/OutlinedInput/OutlinedInput.js | 4 ++-- packages/mui-material/src/Pagination/Pagination.js | 4 ++-- .../src/PaginationItem/PaginationItem.js | 4 ++-- packages/mui-material/src/Paper/Paper.js | 4 ++-- packages/mui-material/src/Popover/Popover.js | 4 ++-- packages/mui-material/src/Popper/Popper.tsx | 4 ++-- packages/mui-material/src/Radio/Radio.js | 4 ++-- packages/mui-material/src/Rating/Rating.js | 4 ++-- .../src/ScopedCssBaseline/ScopedCssBaseline.js | 4 ++-- packages/mui-material/src/Select/Select.js | 4 ++-- packages/mui-material/src/Select/SelectInput.js | 6 +++--- packages/mui-material/src/Skeleton/Skeleton.js | 4 ++-- packages/mui-material/src/Slider/Slider.js | 12 ++++++------ packages/mui-material/src/Snackbar/Snackbar.js | 4 ++-- .../src/SnackbarContent/SnackbarContent.js | 4 ++-- packages/mui-material/src/SpeedDial/SpeedDial.js | 4 ++-- .../src/SpeedDialAction/SpeedDialAction.js | 4 ++-- .../mui-material/src/SpeedDialIcon/SpeedDialIcon.js | 4 ++-- packages/mui-material/src/Stack/Stack.js | 4 ++-- packages/mui-material/src/Step/Step.js | 4 ++-- packages/mui-material/src/StepButton/StepButton.js | 4 ++-- .../mui-material/src/StepConnector/StepConnector.js | 4 ++-- packages/mui-material/src/StepContent/StepContent.js | 4 ++-- packages/mui-material/src/StepIcon/StepIcon.js | 4 ++-- packages/mui-material/src/StepLabel/StepLabel.js | 4 ++-- packages/mui-material/src/Stepper/Stepper.js | 4 ++-- packages/mui-material/src/SvgIcon/SvgIcon.js | 4 ++-- .../src/SwipeableDrawer/SwipeableDrawer.js | 4 ++-- packages/mui-material/src/Switch/Switch.js | 4 ++-- packages/mui-material/src/Tab/Tab.js | 4 ++-- .../src/TabScrollButton/TabScrollButton.js | 4 ++-- packages/mui-material/src/Table/Table.js | 4 ++-- packages/mui-material/src/TableBody/TableBody.js | 4 ++-- packages/mui-material/src/TableCell/TableCell.js | 4 ++-- .../src/TableContainer/TableContainer.js | 4 ++-- packages/mui-material/src/TableFooter/TableFooter.js | 4 ++-- packages/mui-material/src/TableHead/TableHead.js | 4 ++-- .../src/TablePagination/TablePagination.js | 4 ++-- packages/mui-material/src/TableRow/TableRow.js | 4 ++-- .../src/TableSortLabel/TableSortLabel.js | 4 ++-- packages/mui-material/src/Tabs/Tabs.js | 4 ++-- packages/mui-material/src/TextField/TextField.js | 4 ++-- .../mui-material/src/ToggleButton/ToggleButton.js | 4 ++-- .../src/ToggleButtonGroup/ToggleButtonGroup.js | 4 ++-- packages/mui-material/src/Toolbar/Toolbar.js | 4 ++-- packages/mui-material/src/Tooltip/Tooltip.js | 4 ++-- packages/mui-material/src/Typography/Typography.js | 4 ++-- packages/mui-material/src/Unstable_Grid2/Grid2.tsx | 4 ++-- packages/mui-material/src/styles/index.d.ts | 2 +- packages/mui-material/src/styles/index.js | 2 +- .../src/styles/shouldSkipGeneratingVar.ts | 8 +++----- packages/mui-material/src/styles/useThemeProps.d.ts | 2 +- packages/mui-material/src/styles/useThemeProps.js | 2 +- .../mui-material/src/styles/useThemeProps.spec.ts | 4 ++-- packages/mui-material/src/zero-styled/index.ts | 4 ++-- 126 files changed, 264 insertions(+), 266 deletions(-) diff --git a/packages/mui-material/src/Accordion/Accordion.js b/packages/mui-material/src/Accordion/Accordion.js index 4fcaf33da96b29..bae4a6b800d2b8 100644 --- a/packages/mui-material/src/Accordion/Accordion.js +++ b/packages/mui-material/src/Accordion/Accordion.js @@ -13,7 +13,7 @@ import useControlled from '../utils/useControlled'; import useSlot from '../utils/useSlot'; import accordionClasses, { getAccordionUtilityClass } from './accordionClasses'; -const useThemeProps = createUseThemeProps('MuiAccordion'); +const useDefaultProps = createUseThemeProps('MuiAccordion'); const useUtilityClasses = (ownerState) => { const { classes, square, expanded, disabled, disableGutters } = ownerState; @@ -126,7 +126,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..e5fe5acb1dcf03 100644 --- a/packages/mui-material/src/AccordionActions/AccordionActions.js +++ b/packages/mui-material/src/AccordionActions/AccordionActions.js @@ -6,7 +6,7 @@ import composeClasses from '@mui/utils/composeClasses'; import { styled, createUseThemeProps } from '../zero-styled'; import { getAccordionActionsUtilityClass } from './accordionActionsClasses'; -const useThemeProps = createUseThemeProps('MuiAccordionActions'); +const useDefaultProps = createUseThemeProps('MuiAccordionActions'); const useUtilityClasses = (ownerState) => { const { classes, disableSpacing } = ownerState; @@ -44,7 +44,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..d559ae7ac7b92e 100644 --- a/packages/mui-material/src/AccordionDetails/AccordionDetails.js +++ b/packages/mui-material/src/AccordionDetails/AccordionDetails.js @@ -6,7 +6,7 @@ import composeClasses from '@mui/utils/composeClasses'; import { styled, createUseThemeProps } from '../zero-styled'; import { getAccordionDetailsUtilityClass } from './accordionDetailsClasses'; -const useThemeProps = createUseThemeProps('MuiAccordionDetails'); +const useDefaultProps = createUseThemeProps('MuiAccordionDetails'); const useUtilityClasses = (ownerState) => { const { classes } = ownerState; @@ -27,7 +27,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..ca202bac29f845 100644 --- a/packages/mui-material/src/AccordionSummary/AccordionSummary.js +++ b/packages/mui-material/src/AccordionSummary/AccordionSummary.js @@ -10,7 +10,7 @@ import accordionSummaryClasses, { getAccordionSummaryUtilityClass, } from './accordionSummaryClasses'; -const useThemeProps = createUseThemeProps('MuiAccordionSummary'); +const useDefaultProps = createUseThemeProps('MuiAccordionSummary'); const useUtilityClasses = (ownerState) => { const { classes, expanded, disabled, disableGutters } = ownerState; @@ -101,7 +101,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..af1921e3895d60 100644 --- a/packages/mui-material/src/Alert/Alert.js +++ b/packages/mui-material/src/Alert/Alert.js @@ -16,7 +16,7 @@ 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 useDefaultProps = createUseThemeProps('MuiAlert'); const useUtilityClasses = (ownerState) => { const { variant, color, severity, classes } = ownerState; @@ -157,7 +157,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..45c3a9663369e9 100644 --- a/packages/mui-material/src/AlertTitle/AlertTitle.js +++ b/packages/mui-material/src/AlertTitle/AlertTitle.js @@ -7,7 +7,7 @@ import { styled, createUseThemeProps } from '../zero-styled'; import Typography from '../Typography'; import { getAlertTitleUtilityClass } from './alertTitleClasses'; -const useThemeProps = createUseThemeProps('MuiAlertTitle'); +const useDefaultProps = createUseThemeProps('MuiAlertTitle'); const useUtilityClasses = (ownerState) => { const { classes } = ownerState; @@ -31,7 +31,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..6791df1e5b1ecc 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..e2717c524a7d51 100644 --- a/packages/mui-material/src/Autocomplete/Autocomplete.js +++ b/packages/mui-material/src/Autocomplete/Autocomplete.js @@ -23,7 +23,7 @@ import autocompleteClasses, { getAutocompleteUtilityClass } from './autocomplete import capitalize from '../utils/capitalize'; import useForkRef from '../utils/useForkRef'; -const useThemeProps = createUseThemeProps('MuiAutocomplete'); +const useDefaultProps = createUseThemeProps('MuiAutocomplete'); const useUtilityClasses = (ownerState) => { const { @@ -411,7 +411,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..4b0bce37fbe118 100644 --- a/packages/mui-material/src/Avatar/Avatar.js +++ b/packages/mui-material/src/Avatar/Avatar.js @@ -8,7 +8,7 @@ import Person from '../internal/svg-icons/Person'; import { getAvatarUtilityClass } from './avatarClasses'; import useSlot from '../utils/useSlot'; -const useThemeProps = createUseThemeProps('MuiAvatar'); +const useDefaultProps = createUseThemeProps('MuiAvatar'); const useUtilityClasses = (ownerState) => { const { classes, variant, colorDefault } = ownerState; @@ -143,7 +143,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..c62cf72fa056ef 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..7a7b20db37386d 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..ac72178f24939d 100644 --- a/packages/mui-material/src/Badge/Badge.js +++ b/packages/mui-material/src/Badge/Badge.js @@ -13,7 +13,7 @@ import badgeClasses, { getBadgeUtilityClass } from './badgeClasses'; const RADIUS_STANDARD = 10; const RADIUS_DOT = 4; -const useThemeProps = createUseThemeProps('MuiBadge'); +const useDefaultProps = createUseThemeProps('MuiBadge'); const useUtilityClasses = (ownerState) => { const { color, anchorOrigin, invisible, overlap, variant, classes = {} } = ownerState; @@ -244,7 +244,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..c22afe62ebbb71 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..965a250aa78fa5 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..afdc02173cbfd4 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..7c8b6316b2a014 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..330b37ff978994 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, @@ -340,7 +340,7 @@ const ButtonBase = React.forwardRef(function ButtonBase(inProps, ref) { const classes = useUtilityClasses(ownerState); return ( - + () ) : null} - + ) ); }); diff --git a/packages/mui-material/src/ButtonBase/TouchRipple.js b/packages/mui-material/src/ButtonBase/TouchRipple.js index 6834650d85fc06..cf2cd227464144 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..e4d5f03a0f12bf 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..6167cbf6545224 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..0c383f258c6255 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..ad4ca9560a7d18 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..33c5ddf10321c7 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..0cf25b4fe34c25 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..98fdf6c60556ff 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..174ab7408d9c9e 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..48d128632ee916 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..07e9812f318c20 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..0e28b3a70f8067 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..a40d37c0592b79 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' }), + useDefaultProps: (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..1fdb5753c41a10 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/Dialog/Dialog.js b/packages/mui-material/src/Dialog/Dialog.js index b88a9103d01389..afeec194227826 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..04ced07be98283 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..0ff82bdd54f204 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..f5b4ca1a6b1150 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..820e6f4c9654fb 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..5447f7a2954a2d 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..a3ac4b5401a86a 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..3e695c3f39a29f 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..1a523b5d806d88 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..d1f7401e7feac1 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..feeb4abf2d1829 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..e6f51ff813023d 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..f0d5abab16ce6b 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, @@ -103,7 +103,7 @@ const FormHelperText = React.forwardRef(function FormHelperText(inProps, ref) { const classes = useUtilityClasses(ownerState); return ( - {children === ' ' ? ( // notranslate needed while Google Translate will not fix zero-width space issue - ​ + (​) ) : ( children )} - + ) ); }); diff --git a/packages/mui-material/src/FormLabel/FormLabel.js b/packages/mui-material/src/FormLabel/FormLabel.js index ba9826f0d7f52a..e5fc975eb5faf7 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..cbf43051ff3ec8 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..13cb6c4be61f9a 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..4e288cb2c9159b 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..57e324e63a3544 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..5251297c1da7e7 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..cbfc6c4b0d2da8 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..cbf50f731e89c6 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..daba8ac06acc86 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, @@ -113,7 +113,7 @@ const InputAdornment = React.forwardRef(function InputAdornment(inProps, ref) { const classes = useUtilityClasses(ownerState); return ( - + ( ​ + (​) ) : null} {children} )} - + ) ); }); diff --git a/packages/mui-material/src/InputBase/InputBase.js b/packages/mui-material/src/InputBase/InputBase.js index 970dd62ab36b2c..885d51c0eac989 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..9b0633a5dadd37 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..21ed1e60c1175c 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..95a6668eb7d69f 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..1c06cecf6eb8e2 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..a9cd0dca49cc61 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..af444f1ddbecd9 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..1e0d283fcbb21e 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..6546bb3e0f621e 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..e105f61dc53088 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..62b38c47642b82 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..ad752fe7d1361e 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..4821e11a353468 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..b68e8f38419547 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..f5b9a2c630e675 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..414685ff05c00d 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..0544f429670925 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 `