diff --git a/packages-internal/test-utils/src/describeConformance.tsx b/packages-internal/test-utils/src/describeConformance.tsx index 3c2177b299de8a..744f4fdb8ad241 100644 --- a/packages-internal/test-utils/src/describeConformance.tsx +++ b/packages-internal/test-utils/src/describeConformance.tsx @@ -986,6 +986,13 @@ function testThemeCustomPalette( main: '#ff5252', }, unknown: null, + custom2: { + main: { + blue: { + dark: '#FFCC00', + }, + }, + }, }, }); diff --git a/packages/mui-material/src/Alert/Alert.js b/packages/mui-material/src/Alert/Alert.js index 62b0778a7010e6..33c3f68e7b8f4c 100644 --- a/packages/mui-material/src/Alert/Alert.js +++ b/packages/mui-material/src/Alert/Alert.js @@ -9,6 +9,7 @@ import memoTheme from '../utils/memoTheme'; import { useDefaultProps } from '../DefaultPropsProvider'; import useSlot from '../utils/useSlot'; import capitalize from '../utils/capitalize'; +import createSimplePaletteValueFilter from '../utils/createSimplePaletteValueFilter'; import Paper from '../Paper'; import alertClasses, { getAlertUtilityClass } from './alertClasses'; import IconButton from '../IconButton'; @@ -59,7 +60,7 @@ const AlertRoot = styled(Paper, { padding: '6px 16px', variants: [ ...Object.entries(theme.palette) - .filter(([, value]) => value && value.main && value.light) + .filter(createSimplePaletteValueFilter(['light'])) .map(([color]) => ({ props: { colorSeverity: color, variant: 'standard' }, style: { @@ -77,7 +78,7 @@ const AlertRoot = styled(Paper, { }, })), ...Object.entries(theme.palette) - .filter(([, value]) => value && value.main && value.light) + .filter(createSimplePaletteValueFilter(['light'])) .map(([color]) => ({ props: { colorSeverity: color, variant: 'outlined' }, style: { @@ -93,7 +94,7 @@ const AlertRoot = styled(Paper, { }, })), ...Object.entries(theme.palette) - .filter(([, value]) => value && value.main && value.dark) + .filter(createSimplePaletteValueFilter(['dark'])) .map(([color]) => ({ props: { colorSeverity: color, variant: 'filled' }, style: { diff --git a/packages/mui-material/src/AppBar/AppBar.js b/packages/mui-material/src/AppBar/AppBar.js index d46fe696c2c6ce..5be4078f364c41 100644 --- a/packages/mui-material/src/AppBar/AppBar.js +++ b/packages/mui-material/src/AppBar/AppBar.js @@ -7,6 +7,7 @@ import { styled } from '../zero-styled'; import memoTheme from '../utils/memoTheme'; import { useDefaultProps } from '../DefaultPropsProvider'; import capitalize from '../utils/capitalize'; +import createSimplePaletteValueFilter from '../utils/createSimplePaletteValueFilter'; import Paper from '../Paper'; import { getAppBarUtilityClass } from './appBarClasses'; @@ -116,7 +117,7 @@ const AppBarRoot = styled(Paper, { }, }, ...Object.entries(theme.palette) - .filter(([, palette]) => palette && palette.main && palette.contrastText) + .filter(createSimplePaletteValueFilter(['contrastText'])) .map(([color]) => ({ props: { color }, style: { diff --git a/packages/mui-material/src/Badge/Badge.js b/packages/mui-material/src/Badge/Badge.js index fdd83890b78167..a4d086e63b9fa1 100644 --- a/packages/mui-material/src/Badge/Badge.js +++ b/packages/mui-material/src/Badge/Badge.js @@ -8,6 +8,7 @@ import useSlotProps from '@mui/utils/useSlotProps'; import useBadge from './useBadge'; import { styled } from '../zero-styled'; import memoTheme from '../utils/memoTheme'; +import createSimplePaletteValueFilter from '../utils/createSimplePaletteValueFilter'; import { useDefaultProps } from '../DefaultPropsProvider'; import capitalize from '../utils/capitalize'; import badgeClasses, { getBadgeUtilityClass } from './badgeClasses'; @@ -91,7 +92,7 @@ const BadgeBadge = styled('span', { }), variants: [ ...Object.entries(theme.palette) - .filter(([, palette]) => palette && palette.main && palette.contrastText) + .filter(createSimplePaletteValueFilter(['contrastText'])) .map(([color]) => ({ props: { color }, style: { diff --git a/packages/mui-material/src/Button/Button.js b/packages/mui-material/src/Button/Button.js index 5829312c6e194f..6ddfe62dd10d71 100644 --- a/packages/mui-material/src/Button/Button.js +++ b/packages/mui-material/src/Button/Button.js @@ -11,6 +11,7 @@ import memoTheme from '../utils/memoTheme'; import { useDefaultProps } from '../DefaultPropsProvider'; import ButtonBase from '../ButtonBase'; import capitalize from '../utils/capitalize'; +import createSimplePaletteValueFilter from '../utils/createSimplePaletteValueFilter'; import buttonClasses, { getButtonUtilityClass } from './buttonClasses'; import ButtonGroupContext from '../ButtonGroup/ButtonGroupContext'; import ButtonGroupButtonContext from '../ButtonGroup/ButtonGroupButtonContext'; @@ -161,7 +162,7 @@ const ButtonRoot = styled(ButtonBase, { }, }, ...Object.entries(theme.palette) - .filter(([, palette]) => palette && palette.main && palette.dark && palette.contrastText) + .filter(createSimplePaletteValueFilter(['dark', 'contrastText'])) .map(([color]) => ({ props: { color }, style: { diff --git a/packages/mui-material/src/ButtonGroup/ButtonGroup.js b/packages/mui-material/src/ButtonGroup/ButtonGroup.js index 981f8a2b7609b8..4b18a7a53dcacd 100644 --- a/packages/mui-material/src/ButtonGroup/ButtonGroup.js +++ b/packages/mui-material/src/ButtonGroup/ButtonGroup.js @@ -8,6 +8,7 @@ import getValidReactChildren from '@mui/utils/getValidReactChildren'; import capitalize from '../utils/capitalize'; import { styled } from '../zero-styled'; import memoTheme from '../utils/memoTheme'; +import createSimplePaletteValueFilter from '../utils/createSimplePaletteValueFilter'; import { useDefaultProps } from '../DefaultPropsProvider'; import buttonGroupClasses, { getButtonGroupUtilityClass } from './buttonGroupClasses'; import ButtonGroupContext from './ButtonGroupContext'; @@ -165,7 +166,7 @@ const ButtonGroupRoot = styled('div', { }, }, ...Object.entries(theme.palette) - .filter(([, value]) => value && value.main) + .filter(createSimplePaletteValueFilter()) .flatMap(([color]) => [ { props: { variant: 'text', color }, @@ -229,7 +230,7 @@ const ButtonGroupRoot = styled('div', { }, }, ...Object.entries(theme.palette) - .filter(([, value]) => value && value.dark) + .filter(createSimplePaletteValueFilter(['dark'])) .map(([color]) => ({ props: { variant: 'contained', color }, style: { diff --git a/packages/mui-material/src/Checkbox/Checkbox.js b/packages/mui-material/src/Checkbox/Checkbox.js index 741d83b483339e..dcbb59de9aa90b 100644 --- a/packages/mui-material/src/Checkbox/Checkbox.js +++ b/packages/mui-material/src/Checkbox/Checkbox.js @@ -14,6 +14,7 @@ import rootShouldForwardProp from '../styles/rootShouldForwardProp'; import checkboxClasses, { getCheckboxUtilityClass } from './checkboxClasses'; import { styled } from '../zero-styled'; import memoTheme from '../utils/memoTheme'; +import createSimplePaletteValueFilter from '../utils/createSimplePaletteValueFilter'; import { useDefaultProps } from '../DefaultPropsProvider'; @@ -66,7 +67,7 @@ const CheckboxRoot = styled(SwitchBase, { }, }, ...Object.entries(theme.palette) - .filter(([, palette]) => palette && palette.main) + .filter(createSimplePaletteValueFilter()) .map(([color]) => ({ props: { color, disableRipple: false }, style: { @@ -78,7 +79,7 @@ const CheckboxRoot = styled(SwitchBase, { }, })), ...Object.entries(theme.palette) - .filter(([, palette]) => palette && palette.main) + .filter(createSimplePaletteValueFilter()) .map(([color]) => ({ props: { color }, style: { diff --git a/packages/mui-material/src/Chip/Chip.js b/packages/mui-material/src/Chip/Chip.js index bea43f06e19903..2e4e05b5d09f44 100644 --- a/packages/mui-material/src/Chip/Chip.js +++ b/packages/mui-material/src/Chip/Chip.js @@ -11,6 +11,7 @@ import capitalize from '../utils/capitalize'; import ButtonBase from '../ButtonBase'; import { styled } from '../zero-styled'; import memoTheme from '../utils/memoTheme'; +import createSimplePaletteValueFilter from '../utils/createSimplePaletteValueFilter'; import { useDefaultProps } from '../DefaultPropsProvider'; import chipClasses, { getChipUtilityClass } from './chipClasses'; @@ -165,7 +166,7 @@ const ChipRoot = styled('div', { }, }, ...Object.entries(theme.palette) - .filter(([, value]) => value && value.main && value.contrastText) + .filter(createSimplePaletteValueFilter(['contrastText'])) .map(([color]) => { return { props: { color }, @@ -213,7 +214,7 @@ const ChipRoot = styled('div', { }, }, ...Object.entries(theme.palette) - .filter(([, value]) => value && value.dark) + .filter(createSimplePaletteValueFilter(['dark'])) .map(([color]) => { return { props: { color, onDelete: true }, @@ -252,7 +253,7 @@ const ChipRoot = styled('div', { }, }, ...Object.entries(theme.palette) - .filter(([, value]) => value && value.dark) + .filter(createSimplePaletteValueFilter(['dark'])) .map(([color]) => ({ props: { color, clickable: true }, style: { @@ -297,7 +298,7 @@ const ChipRoot = styled('div', { }, }, ...Object.entries(theme.palette) - .filter(([, value]) => value && value.main) // no need to check for mainChannel as it's calculated from main + .filter(createSimplePaletteValueFilter()) // no need to check for mainChannel as it's calculated from main .map(([color]) => ({ props: { variant: 'outlined', color }, style: { diff --git a/packages/mui-material/src/CircularProgress/CircularProgress.js b/packages/mui-material/src/CircularProgress/CircularProgress.js index 88746f36205e9e..e0aaae8ba05f0d 100644 --- a/packages/mui-material/src/CircularProgress/CircularProgress.js +++ b/packages/mui-material/src/CircularProgress/CircularProgress.js @@ -8,6 +8,7 @@ import { keyframes, css, styled } from '../zero-styled'; import memoTheme from '../utils/memoTheme'; import { useDefaultProps } from '../DefaultPropsProvider'; import capitalize from '../utils/capitalize'; +import createSimplePaletteValueFilter from '../utils/createSimplePaletteValueFilter'; import { getCircularProgressUtilityClass } from './circularProgressClasses'; const SIZE = 44; @@ -101,7 +102,7 @@ const CircularProgressRoot = styled('span', { }, }, ...Object.entries(theme.palette) - .filter(([, palette]) => palette && palette.main) + .filter(createSimplePaletteValueFilter()) .map(([color]) => ({ props: { color }, style: { diff --git a/packages/mui-material/src/Fab/Fab.js b/packages/mui-material/src/Fab/Fab.js index 2a7db6fcf197e5..b4a0de38c3f8cd 100644 --- a/packages/mui-material/src/Fab/Fab.js +++ b/packages/mui-material/src/Fab/Fab.js @@ -9,6 +9,7 @@ import fabClasses, { getFabUtilityClass } from './fabClasses'; import rootShouldForwardProp from '../styles/rootShouldForwardProp'; import { styled } from '../zero-styled'; import memoTheme from '../utils/memoTheme'; +import createSimplePaletteValueFilter from '../utils/createSimplePaletteValueFilter'; import { useDefaultProps } from '../DefaultPropsProvider'; @@ -137,7 +138,7 @@ const FabRoot = styled(ButtonBase, { memoTheme(({ theme }) => ({ variants: [ ...Object.entries(theme.palette) - .filter(([, value]) => value && value.main && value.dark && value.contrastText) // check all the used fields in the style below + .filter(createSimplePaletteValueFilter(['dark', 'contrastText'])) // check all the used fields in the style below .map(([color]) => ({ props: { color }, style: { diff --git a/packages/mui-material/src/FilledInput/FilledInput.js b/packages/mui-material/src/FilledInput/FilledInput.js index ee9c6e3cfc63b1..7e0d90740b1309 100644 --- a/packages/mui-material/src/FilledInput/FilledInput.js +++ b/packages/mui-material/src/FilledInput/FilledInput.js @@ -8,6 +8,7 @@ import InputBase from '../InputBase'; import rootShouldForwardProp from '../styles/rootShouldForwardProp'; import { styled } from '../zero-styled'; import memoTheme from '../utils/memoTheme'; +import createSimplePaletteValueFilter from '../utils/createSimplePaletteValueFilter'; import { useDefaultProps } from '../DefaultPropsProvider'; import filledInputClasses, { getFilledInputUtilityClass } from './filledInputClasses'; import { @@ -137,7 +138,7 @@ const FilledInputRoot = styled(InputBaseRoot, { }, }, ...Object.entries(theme.palette) - .filter(([, value]) => value && value.main) // check all the used fields in the style below + .filter(createSimplePaletteValueFilter()) // check all the used fields in the style below .map(([color]) => ({ props: { disableUnderline: false, diff --git a/packages/mui-material/src/FormLabel/FormLabel.js b/packages/mui-material/src/FormLabel/FormLabel.js index 446f6494b4b1b5..a773ea4e7d25b9 100644 --- a/packages/mui-material/src/FormLabel/FormLabel.js +++ b/packages/mui-material/src/FormLabel/FormLabel.js @@ -8,6 +8,7 @@ import useFormControl from '../FormControl/useFormControl'; import capitalize from '../utils/capitalize'; import { styled } from '../zero-styled'; import memoTheme from '../utils/memoTheme'; +import createSimplePaletteValueFilter from '../utils/createSimplePaletteValueFilter'; import { useDefaultProps } from '../DefaultPropsProvider'; import formLabelClasses, { getFormLabelUtilityClasses } from './formLabelClasses'; @@ -48,7 +49,7 @@ export const FormLabelRoot = styled('label', { position: 'relative', variants: [ ...Object.entries(theme.palette) - .filter(([, value]) => value && value.main) + .filter(createSimplePaletteValueFilter()) .map(([color]) => ({ props: { color }, style: { diff --git a/packages/mui-material/src/Icon/Icon.js b/packages/mui-material/src/Icon/Icon.js index 1908f8b4f7decd..7e7d824f4ff171 100644 --- a/packages/mui-material/src/Icon/Icon.js +++ b/packages/mui-material/src/Icon/Icon.js @@ -6,6 +6,7 @@ import composeClasses from '@mui/utils/composeClasses'; import capitalize from '../utils/capitalize'; import { styled } from '../zero-styled'; import memoTheme from '../utils/memoTheme'; +import createSimplePaletteValueFilter from '../utils/createSimplePaletteValueFilter'; import { useDefaultProps } from '../DefaultPropsProvider'; import { getIconUtilityClass } from './iconClasses'; @@ -104,7 +105,7 @@ const IconRoot = styled('span', { }, }, ...Object.entries(theme.palette) - .filter(([, palette]) => palette && palette.main) + .filter(createSimplePaletteValueFilter()) .map(([color]) => ({ props: { color }, style: { diff --git a/packages/mui-material/src/IconButton/IconButton.js b/packages/mui-material/src/IconButton/IconButton.js index af22d5c655a9ff..05747642096d82 100644 --- a/packages/mui-material/src/IconButton/IconButton.js +++ b/packages/mui-material/src/IconButton/IconButton.js @@ -7,6 +7,7 @@ import composeClasses from '@mui/utils/composeClasses'; import { alpha } from '@mui/system/colorManipulator'; import { styled } from '../zero-styled'; import memoTheme from '../utils/memoTheme'; +import createSimplePaletteValueFilter from '../utils/createSimplePaletteValueFilter'; import { useDefaultProps } from '../DefaultPropsProvider'; import ButtonBase from '../ButtonBase'; import capitalize from '../utils/capitalize'; @@ -102,7 +103,7 @@ const IconButtonRoot = styled(ButtonBase, { }, }, ...Object.entries(theme.palette) - .filter(([, value]) => value && value.main) // check all the used fields in the style below + .filter(createSimplePaletteValueFilter()) // check all the used fields in the style below .map(([color]) => ({ props: { color }, style: { @@ -110,7 +111,7 @@ const IconButtonRoot = styled(ButtonBase, { }, })), ...Object.entries(theme.palette) - .filter(([, value]) => value && value.main) // check all the used fields in the style below + .filter(createSimplePaletteValueFilter()) // check all the used fields in the style below .map(([color]) => ({ props: { color, disableRipple: false }, style: { diff --git a/packages/mui-material/src/Input/Input.js b/packages/mui-material/src/Input/Input.js index 9ff6587bdd42b5..6f1c58b7436643 100644 --- a/packages/mui-material/src/Input/Input.js +++ b/packages/mui-material/src/Input/Input.js @@ -8,6 +8,7 @@ import InputBase from '../InputBase'; import rootShouldForwardProp from '../styles/rootShouldForwardProp'; import { styled } from '../zero-styled'; import memoTheme from '../utils/memoTheme'; +import createSimplePaletteValueFilter from '../utils/createSimplePaletteValueFilter'; import { useDefaultProps } from '../DefaultPropsProvider'; import inputClasses, { getInputUtilityClass } from './inputClasses'; import { @@ -114,7 +115,7 @@ const InputRoot = styled(InputBaseRoot, { }, }, ...Object.entries(theme.palette) - .filter(([, value]) => value && value.main) + .filter(createSimplePaletteValueFilter()) .map(([color]) => ({ props: { color, disableUnderline: false }, style: { diff --git a/packages/mui-material/src/LinearProgress/LinearProgress.js b/packages/mui-material/src/LinearProgress/LinearProgress.js index d3224fd41a2ef8..f5e77d32b6b850 100644 --- a/packages/mui-material/src/LinearProgress/LinearProgress.js +++ b/packages/mui-material/src/LinearProgress/LinearProgress.js @@ -7,6 +7,7 @@ import { darken, lighten } from '@mui/system/colorManipulator'; import { useRtl } from '@mui/system/RtlProvider'; import { keyframes, css, styled } from '../zero-styled'; import memoTheme from '../utils/memoTheme'; +import createSimplePaletteValueFilter from '../utils/createSimplePaletteValueFilter'; import { useDefaultProps } from '../DefaultPropsProvider'; import capitalize from '../utils/capitalize'; import { getLinearProgressUtilityClass } from './linearProgressClasses'; @@ -144,7 +145,7 @@ const LinearProgressRoot = styled('span', { }, variants: [ ...Object.entries(theme.palette) - .filter(([, value]) => value && value.main) + .filter(createSimplePaletteValueFilter()) .map(([color]) => ({ props: { color }, style: { @@ -204,7 +205,7 @@ const LinearProgressDashed = styled('span', { }, }, ...Object.entries(theme.palette) - .filter(([, value]) => value && value.main) + .filter(createSimplePaletteValueFilter()) .map(([color]) => { const backgroundColor = getColorShade(theme, color); return { @@ -256,7 +257,7 @@ const LinearProgressBar1 = styled('span', { }, }, ...Object.entries(theme.palette) - .filter(([, value]) => value && value.main) + .filter(createSimplePaletteValueFilter()) .map(([color]) => ({ props: { color }, style: { @@ -323,7 +324,7 @@ const LinearProgressBar2 = styled('span', { transformOrigin: 'left', variants: [ ...Object.entries(theme.palette) - .filter(([, value]) => value && value.main) + .filter(createSimplePaletteValueFilter()) .map(([color]) => ({ props: { color }, style: { @@ -346,7 +347,7 @@ const LinearProgressBar2 = styled('span', { }, }, ...Object.entries(theme.palette) - .filter(([, value]) => value && value.main) + .filter(createSimplePaletteValueFilter()) .map(([color]) => ({ props: { color, variant: 'buffer' }, style: { diff --git a/packages/mui-material/src/Link/Link.js b/packages/mui-material/src/Link/Link.js index a3b9a1829ac86e..77d1401d6f3d71 100644 --- a/packages/mui-material/src/Link/Link.js +++ b/packages/mui-material/src/Link/Link.js @@ -9,6 +9,7 @@ import isFocusVisible from '@mui/utils/isFocusVisible'; import capitalize from '../utils/capitalize'; import { styled, useTheme } from '../zero-styled'; import memoTheme from '../utils/memoTheme'; +import createSimplePaletteValueFilter from '../utils/createSimplePaletteValueFilter'; import { useDefaultProps } from '../DefaultPropsProvider'; import Typography from '../Typography'; import linkClasses, { getLinkUtilityClass } from './linkClasses'; @@ -95,7 +96,7 @@ const LinkRoot = styled(Typography, { }, }, ...Object.entries(theme.palette) - .filter(([, value]) => value && value.main) + .filter(createSimplePaletteValueFilter()) .map(([color]) => ({ props: { underline: 'always', color }, style: { diff --git a/packages/mui-material/src/OutlinedInput/OutlinedInput.js b/packages/mui-material/src/OutlinedInput/OutlinedInput.js index 01cc3a7fd47e68..e96b4ec567c638 100644 --- a/packages/mui-material/src/OutlinedInput/OutlinedInput.js +++ b/packages/mui-material/src/OutlinedInput/OutlinedInput.js @@ -9,6 +9,7 @@ import formControlState from '../FormControl/formControlState'; import rootShouldForwardProp from '../styles/rootShouldForwardProp'; import { styled } from '../zero-styled'; import memoTheme from '../utils/memoTheme'; +import createSimplePaletteValueFilter from '../utils/createSimplePaletteValueFilter'; import { useDefaultProps } from '../DefaultPropsProvider'; import outlinedInputClasses, { getOutlinedInputUtilityClass } from './outlinedInputClasses'; import InputBase, { @@ -55,7 +56,7 @@ const OutlinedInputRoot = styled(InputBaseRoot, { }, variants: [ ...Object.entries(theme.palette) - .filter(([, value]) => value && value.main) + .filter(createSimplePaletteValueFilter()) .map(([color]) => ({ props: { color }, style: { diff --git a/packages/mui-material/src/PaginationItem/PaginationItem.js b/packages/mui-material/src/PaginationItem/PaginationItem.js index 76f49942981c6b..d85a37ae33b254 100644 --- a/packages/mui-material/src/PaginationItem/PaginationItem.js +++ b/packages/mui-material/src/PaginationItem/PaginationItem.js @@ -8,6 +8,7 @@ import { useRtl } from '@mui/system/RtlProvider'; import paginationItemClasses, { getPaginationItemUtilityClass } from './paginationItemClasses'; import ButtonBase from '../ButtonBase'; import capitalize from '../utils/capitalize'; +import createSimplePaletteValueFilter from '../utils/createSimplePaletteValueFilter'; import FirstPageIcon from '../internal/svg-icons/FirstPage'; import LastPageIcon from '../internal/svg-icons/LastPage'; import NavigateBeforeIcon from '../internal/svg-icons/NavigateBefore'; @@ -218,7 +219,7 @@ const PaginationItemPage = styled(ButtonBase, { }, }, ...Object.entries(theme.palette) - .filter(([, value]) => value && value.main && value.dark && value.contrastText) + .filter(createSimplePaletteValueFilter(['dark', 'contrastText'])) .map(([color]) => ({ props: { variant: 'text', color }, style: { @@ -242,7 +243,7 @@ const PaginationItemPage = styled(ButtonBase, { }, })), ...Object.entries(theme.palette) - .filter(([, value]) => value && value.main && value.light) + .filter(createSimplePaletteValueFilter(['light'])) .map(([color]) => ({ props: { variant: 'outlined', color }, style: { diff --git a/packages/mui-material/src/Radio/Radio.js b/packages/mui-material/src/Radio/Radio.js index d3707e7bffaa96..c125296639fc8a 100644 --- a/packages/mui-material/src/Radio/Radio.js +++ b/packages/mui-material/src/Radio/Radio.js @@ -15,6 +15,7 @@ import radioClasses, { getRadioUtilityClass } from './radioClasses'; import rootShouldForwardProp from '../styles/rootShouldForwardProp'; import { styled } from '../zero-styled'; import memoTheme from '../utils/memoTheme'; +import createSimplePaletteValueFilter from '../utils/createSimplePaletteValueFilter'; import { useDefaultProps } from '../DefaultPropsProvider'; @@ -62,7 +63,7 @@ const RadioRoot = styled(SwitchBase, { }, }, ...Object.entries(theme.palette) - .filter(([, palette]) => palette && palette.main) + .filter(createSimplePaletteValueFilter()) .map(([color]) => ({ props: { color, disabled: false, disableRipple: false }, style: { @@ -74,7 +75,7 @@ const RadioRoot = styled(SwitchBase, { }, })), ...Object.entries(theme.palette) - .filter(([, palette]) => palette && palette.main) + .filter(createSimplePaletteValueFilter()) .map(([color]) => ({ props: { color, disabled: false }, style: { diff --git a/packages/mui-material/src/Slider/Slider.js b/packages/mui-material/src/Slider/Slider.js index b2642863490a71..2a6291380a84ab 100644 --- a/packages/mui-material/src/Slider/Slider.js +++ b/packages/mui-material/src/Slider/Slider.js @@ -15,6 +15,7 @@ import { useDefaultProps } from '../DefaultPropsProvider'; import slotShouldForwardProp from '../styles/slotShouldForwardProp'; import shouldSpreadAdditionalProps from '../utils/shouldSpreadAdditionalProps'; import capitalize from '../utils/capitalize'; +import createSimplePaletteValueFilter from '../utils/createSimplePaletteValueFilter'; import BaseSliderValueLabel from './SliderValueLabel'; import sliderClasses, { getSliderUtilityClass } from './sliderClasses'; @@ -62,7 +63,7 @@ export const SliderRoot = styled('span', { }, variants: [ ...Object.entries(theme.palette) - .filter(([, palette]) => palette && palette.main) + .filter(createSimplePaletteValueFilter()) .map(([color]) => ({ props: { color }, style: { @@ -206,7 +207,7 @@ export const SliderTrack = styled('span', { }, }, ...Object.entries(theme.palette) - .filter(([, palette]) => palette && palette.main) + .filter(createSimplePaletteValueFilter()) .map(([color]) => ({ props: { color, track: 'inverted' }, style: { @@ -308,7 +309,7 @@ export const SliderThumb = styled('span', { }, }, ...Object.entries(theme.palette) - .filter(([, palette]) => palette && palette.main) + .filter(createSimplePaletteValueFilter()) .map(([color]) => ({ props: { color }, style: { diff --git a/packages/mui-material/src/Switch/Switch.js b/packages/mui-material/src/Switch/Switch.js index 1a0fe4a1ecea9e..bd5a766e8b9263 100644 --- a/packages/mui-material/src/Switch/Switch.js +++ b/packages/mui-material/src/Switch/Switch.js @@ -7,6 +7,7 @@ import refType from '@mui/utils/refType'; import composeClasses from '@mui/utils/composeClasses'; import { alpha, darken, lighten } from '@mui/system/colorManipulator'; import capitalize from '../utils/capitalize'; +import createSimplePaletteValueFilter from '../utils/createSimplePaletteValueFilter'; import SwitchBase from '../internal/SwitchBase'; import { styled } from '../zero-styled'; import memoTheme from '../utils/memoTheme'; @@ -150,7 +151,7 @@ const SwitchSwitchBase = styled(SwitchBase, { }, variants: [ ...Object.entries(theme.palette) - .filter(([, value]) => value && value.main && value.light) // check all the used fields in the style below + .filter(createSimplePaletteValueFilter(['light'])) // check all the used fields in the style below .map(([color]) => ({ props: { color }, style: { diff --git a/packages/mui-material/src/ToggleButton/ToggleButton.js b/packages/mui-material/src/ToggleButton/ToggleButton.js index 92df06fcd7f0ae..007d2311709e7b 100644 --- a/packages/mui-material/src/ToggleButton/ToggleButton.js +++ b/packages/mui-material/src/ToggleButton/ToggleButton.js @@ -10,6 +10,7 @@ import ButtonBase from '../ButtonBase'; import capitalize from '../utils/capitalize'; import { styled } from '../zero-styled'; import memoTheme from '../utils/memoTheme'; +import createSimplePaletteValueFilter from '../utils/createSimplePaletteValueFilter'; import { useDefaultProps } from '../DefaultPropsProvider'; import toggleButtonClasses, { getToggleButtonUtilityClass } from './toggleButtonClasses'; import ToggleButtonGroupContext from '../ToggleButtonGroup/ToggleButtonGroupContext'; @@ -89,7 +90,7 @@ const ToggleButtonRoot = styled(ButtonBase, { }, }, ...Object.entries(theme.palette) - .filter(([, palette]) => palette && palette.main) + .filter(createSimplePaletteValueFilter()) .map(([color]) => ({ props: { color }, style: { diff --git a/packages/mui-material/src/Typography/Typography.js b/packages/mui-material/src/Typography/Typography.js index c52f7307ac5afd..dcda0315e3bdb3 100644 --- a/packages/mui-material/src/Typography/Typography.js +++ b/packages/mui-material/src/Typography/Typography.js @@ -7,6 +7,7 @@ import { styled, internal_createExtendSxProp } from '../zero-styled'; import memoTheme from '../utils/memoTheme'; import { useDefaultProps } from '../DefaultPropsProvider'; import capitalize from '../utils/capitalize'; +import createSimplePaletteValueFilter from '../utils/createSimplePaletteValueFilter'; import { getTypographyUtilityClass } from './typographyClasses'; const v6Colors = { @@ -77,7 +78,7 @@ export const TypographyRoot = styled('span', { style: value, })), ...Object.entries(theme.palette) - .filter(([, value]) => value && value.main) + .filter(createSimplePaletteValueFilter()) .map(([color]) => ({ props: { color }, style: { diff --git a/packages/mui-material/src/utils/createSimplePaletteValueFilter.ts b/packages/mui-material/src/utils/createSimplePaletteValueFilter.ts new file mode 100644 index 00000000000000..6fcbdb3ab162d3 --- /dev/null +++ b/packages/mui-material/src/utils/createSimplePaletteValueFilter.ts @@ -0,0 +1,54 @@ +import { PaletteColorOptions, SimplePaletteColorOptions } from '../styles/createPalette'; + +/** + * Type guard to check if the object has a "main" property of type string. + * + * @param obj - the object to check + * @returns boolean + */ +function hasCorrectMainProperty(obj: PaletteColorOptions): obj is SimplePaletteColorOptions { + return typeof (obj as SimplePaletteColorOptions).main === 'string'; +} + +type AdditionalPropertiesToCheck = (keyof Omit)[]; + +/** + * Checks if the object conforms to the SimplePaletteColorOptions type. + * The minimum requirement is that the object has a "main" property of type string, this is always checked. + * Optionally, you can pass additional properties to check. + * + * @param obj - The object to check + * @param additionalPropertiesToCheck - Array containing "light", "dark", and/or "contrastText" + * @returns boolean + */ +function checkSimplePaletteColorValues( + obj: PaletteColorOptions, + additionalPropertiesToCheck: AdditionalPropertiesToCheck = [], +): boolean { + if (!hasCorrectMainProperty(obj)) { + return false; + } + + for (const value of additionalPropertiesToCheck) { + if (!obj.hasOwnProperty(value) || typeof obj[value] !== 'string') { + return false; + } + } + + return true; +} + +/** + * Creates a filter function used to filter simple palette color options. + * The minimum requirement is that the object has a "main" property of type string, this is always checked. + * Optionally, you can pass additional properties to check. + * + * @param additionalPropertiesToCheck - Array containing "light", "dark", and/or "contrastText" + * @returns ([, value]: [any, PaletteColorOptions]) => boolean + */ +export default function createSimplePaletteValueFilter( + additionalPropertiesToCheck: AdditionalPropertiesToCheck = [], +) { + return ([, value]: [any, PaletteColorOptions]) => + value && checkSimplePaletteColorValues(value, additionalPropertiesToCheck); +}