@mui/material 6.0.1 → 6.1.0

package/Checkbox/Checkbox.js

@@ -15,6 +15,7 @@ import rootShouldForwardProp from "../styles/rootShouldForwardProp.js";
 import checkboxClasses, { getCheckboxUtilityClass } from "./checkboxClasses.js";
 import { styled } from "../zero-styled/index.js";
 import memoTheme from "../utils/memoTheme.js";
+import createSimplePaletteValueFilter from "../utils/createSimplePaletteValueFilter.js";
 import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
@@ -58,7 +59,7 @@ const CheckboxRoot = styled(SwitchBase, {
         backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.action.active, theme.palette.action.hoverOpacity)
       }
     }
-  }, ...Object.entries(theme.palette).filter(([, palette]) => palette && palette.main).map(([color]) => ({
+  }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color]) => ({
     props: {
       color,
       disableRipple: false
@@ -68,7 +69,7 @@ const CheckboxRoot = styled(SwitchBase, {
         backgroundColor: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette[color].main, theme.palette.action.hoverOpacity)
       }
     }
-  })), ...Object.entries(theme.palette).filter(([, palette]) => palette && palette.main).map(([color]) => ({
+  })), ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color]) => ({
     props: {
       color
     },

package/Chip/Chip.js

@@ -12,6 +12,7 @@ import capitalize from "../utils/capitalize.js";
 import ButtonBase from "../ButtonBase/index.js";
 import { styled } from "../zero-styled/index.js";
 import memoTheme from "../utils/memoTheme.js";
+import createSimplePaletteValueFilter from "../utils/createSimplePaletteValueFilter.js";
 import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import chipClasses, { getChipUtilityClass } from "./chipClasses.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -158,7 +159,7 @@ const ChipRoot = styled('div', {
           marginLeft: -4
         }
       }
-    }, ...Object.entries(theme.palette).filter(([, value]) => value && value.main && value.contrastText).map(([color]) => {
+    }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter(['contrastText'])).map(([color]) => {
       return {
         props: {
           color
@@ -197,7 +198,7 @@ const ChipRoot = styled('div', {
           backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
         }
       }
-    }, ...Object.entries(theme.palette).filter(([, value]) => value && value.dark).map(([color]) => {
+    }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter(['dark'])).map(([color]) => {
       return {
         props: {
           color,
@@ -227,7 +228,7 @@ const ChipRoot = styled('div', {
           boxShadow: (theme.vars || theme).shadows[1]
         }
       }
-    }, ...Object.entries(theme.palette).filter(([, value]) => value && value.dark).map(([color]) => ({
+    }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter(['dark'])).map(([color]) => ({
       props: {
         color,
         clickable: true
@@ -269,7 +270,7 @@ const ChipRoot = styled('div', {
           marginRight: 3
         }
       }
-    }, ...Object.entries(theme.palette).filter(([, value]) => value && value.main) // no need to check for mainChannel as it's calculated from main
+    }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()) // no need to check for mainChannel as it's calculated from main
     .map(([color]) => ({
       props: {
         variant: 'outlined',
@@ -426,7 +427,7 @@ const Chip = /*#__PURE__*/React.forwardRef(function Chip(inProps, ref) {
   } : {};
   let deleteIcon = null;
   if (onDelete) {
-    deleteIcon = deleteIconProp && /*#__PURE__*/React.isValidElement(deleteIconProp) ? ( /*#__PURE__*/React.cloneElement(deleteIconProp, {
+    deleteIcon = deleteIconProp && /*#__PURE__*/React.isValidElement(deleteIconProp) ? (/*#__PURE__*/React.cloneElement(deleteIconProp, {
       className: clsx(deleteIconProp.props.className, classes.deleteIcon),
       onClick: handleDeleteIconClick
     })) : /*#__PURE__*/_jsx(CancelIcon, {

package/CircularProgress/CircularProgress.js

@@ -9,6 +9,7 @@ import { keyframes, css, styled } from "../zero-styled/index.js";
 import memoTheme from "../utils/memoTheme.js";
 import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import capitalize from "../utils/capitalize.js";
+import createSimplePaletteValueFilter from "../utils/createSimplePaletteValueFilter.js";
 import { getCircularProgressUtilityClass } from "./circularProgressClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const SIZE = 44;
@@ -88,7 +89,7 @@ const CircularProgressRoot = styled('span', {
     style: rotateAnimation || {
       animation: `${circularRotateKeyframe} 1.4s linear infinite`
     }
-  }, ...Object.entries(theme.palette).filter(([, palette]) => palette && palette.main).map(([color]) => ({
+  }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color]) => ({
     props: {
       color
     },

package/Dialog/Dialog.js

@@ -106,6 +106,7 @@ const DialogPaper = styled(Paper, {
 }) => ({
   margin: 32,
   position: 'relative',
+  overflowY: 'auto',
   '@media print': {
     overflowY: 'visible',
     boxShadow: 'none'

package/Fab/Fab.js

@@ -10,6 +10,7 @@ import fabClasses, { getFabUtilityClass } from "./fabClasses.js";
 import rootShouldForwardProp from "../styles/rootShouldForwardProp.js";
 import { styled } from "../zero-styled/index.js";
 import memoTheme from "../utils/memoTheme.js";
+import createSimplePaletteValueFilter from "../utils/createSimplePaletteValueFilter.js";
 import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
@@ -133,7 +134,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
+  variants: [...Object.entries(theme.palette).filter(createSimplePaletteValueFilter(['dark', 'contrastText'])) // check all the used fields in the style below
   .map(([color]) => ({
     props: {
       color

package/FilledInput/FilledInput.js

@@ -9,6 +9,7 @@ import InputBase from "../InputBase/index.js";
 import rootShouldForwardProp from "../styles/rootShouldForwardProp.js";
 import { styled } from "../zero-styled/index.js";
 import memoTheme from "../utils/memoTheme.js";
+import createSimplePaletteValueFilter from "../utils/createSimplePaletteValueFilter.js";
 import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import filledInputClasses, { getFilledInputUtilityClass } from "./filledInputClasses.js";
 import { rootOverridesResolver as inputBaseRootOverridesResolver, inputOverridesResolver as inputBaseInputOverridesResolver, InputBaseRoot, InputBaseInput } from "../InputBase/InputBase.js";
@@ -122,7 +123,7 @@ const FilledInputRoot = styled(InputBaseRoot, {
           borderBottomStyle: 'dotted'
         }
       }
-    }, ...Object.entries(theme.palette).filter(([, value]) => value && value.main) // check all the used fields in the style below
+    }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()) // check all the used fields in the style below
     .map(([color]) => ({
       props: {
         disableUnderline: false,

package/FormControl/FormControl.d.ts

@@ -93,10 +93,10 @@ export interface FormControlTypeMap<
  * consistent across the children of the `FormControl`.
  * This context is used by the following components:
  *
- * *   FormLabel
- * *   FormHelperText
- * *   Input
- * *   InputLabel
+ * * FormLabel
+ * * FormHelperText
+ * * Input
+ * * InputLabel
  *
  * You can find one composition example below and more going to [the demos](https://mui.com/material-ui/react-text-field/#components).
  *

package/FormControlLabel/FormControlLabel.d.ts

@@ -11,7 +11,7 @@ export interface FormControlLabelSlots {
    * This is unused if `disableTypography` is true.
    * @default Typography
    */
-  typography?: React.ElementType;
+  typography: React.ElementType;
 }
 
 export type FormControlLabelSlotsAndSlotProps = CreateSlotsAndSlotProps<

package/FormLabel/FormLabel.js

@@ -9,6 +9,7 @@ import useFormControl from "../FormControl/useFormControl.js";
 import capitalize from "../utils/capitalize.js";
 import { styled } from "../zero-styled/index.js";
 import memoTheme from "../utils/memoTheme.js";
+import createSimplePaletteValueFilter from "../utils/createSimplePaletteValueFilter.js";
 import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import formLabelClasses, { getFormLabelUtilityClasses } from "./formLabelClasses.js";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -48,7 +49,7 @@ export const FormLabelRoot = styled('label', {
   lineHeight: '1.4375em',
   padding: 0,
   position: 'relative',
-  variants: [...Object.entries(theme.palette).filter(([, value]) => value && value.main).map(([color]) => ({
+  variants: [...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color]) => ({
     props: {
       color
     },

package/Grid/Grid.d.ts

@@ -139,7 +139,6 @@ export interface GridOwnProps extends SystemProps<Theme>, Breakpoints {
    * Defines the `flex-wrap` style property.
    * It's applied for all screen sizes.
    * @default 'wrap'
-   * @deprecated Use `flexWrap` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   wrap?: GridWrap;
   /**

package/Grid/Grid.js

@@ -530,7 +530,6 @@ process.env.NODE_ENV !== "production" ? Grid.propTypes /* remove-proptypes */ =
    * Defines the `flex-wrap` style property.
    * It's applied for all screen sizes.
    * @default 'wrap'
-   * @deprecated Use `flexWrap` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   wrap: PropTypes.oneOf(['nowrap', 'wrap-reverse', 'wrap']),
   /**

package/Icon/Icon.js

@@ -7,6 +7,7 @@ import composeClasses from '@mui/utils/composeClasses';
 import capitalize from "../utils/capitalize.js";
 import { styled } from "../zero-styled/index.js";
 import memoTheme from "../utils/memoTheme.js";
+import createSimplePaletteValueFilter from "../utils/createSimplePaletteValueFilter.js";
 import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import { getIconUtilityClass } from "./iconClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -93,7 +94,7 @@ const IconRoot = styled('span', {
     style: {
       color: undefined
     }
-  }, ...Object.entries(theme.palette).filter(([, palette]) => palette && palette.main).map(([color]) => ({
+  }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color]) => ({
     props: {
       color
     },

package/IconButton/IconButton.js

@@ -8,6 +8,7 @@ import composeClasses from '@mui/utils/composeClasses';
 import { alpha } from '@mui/system/colorManipulator';
 import { styled } from "../zero-styled/index.js";
 import memoTheme from "../utils/memoTheme.js";
+import createSimplePaletteValueFilter from "../utils/createSimplePaletteValueFilter.js";
 import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import ButtonBase from "../ButtonBase/index.js";
 import capitalize from "../utils/capitalize.js";
@@ -101,7 +102,7 @@ const IconButtonRoot = styled(ButtonBase, {
     style: {
       color: 'inherit'
     }
-  }, ...Object.entries(theme.palette).filter(([, value]) => value && value.main) // check all the used fields in the style below
+  }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()) // check all the used fields in the style below
   .map(([color]) => ({
     props: {
       color
@@ -109,7 +110,7 @@ const IconButtonRoot = styled(ButtonBase, {
     style: {
       color: (theme.vars || theme).palette[color].main
     }
-  })), ...Object.entries(theme.palette).filter(([, value]) => value && value.main) // check all the used fields in the style below
+  })), ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()) // check all the used fields in the style below
   .map(([color]) => ({
     props: {
       color,

package/Input/Input.js

@@ -9,6 +9,7 @@ import InputBase from "../InputBase/index.js";
 import rootShouldForwardProp from "../styles/rootShouldForwardProp.js";
 import { styled } from "../zero-styled/index.js";
 import memoTheme from "../utils/memoTheme.js";
+import createSimplePaletteValueFilter from "../utils/createSimplePaletteValueFilter.js";
 import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import inputClasses, { getInputUtilityClass } from "./inputClasses.js";
 import { rootOverridesResolver as inputBaseRootOverridesResolver, inputOverridesResolver as inputBaseInputOverridesResolver, InputBaseRoot, InputBaseInput } from "../InputBase/InputBase.js";
@@ -109,7 +110,7 @@ const InputRoot = styled(InputBaseRoot, {
           borderBottomStyle: 'dotted'
         }
       }
-    }, ...Object.entries(theme.palette).filter(([, value]) => value && value.main).map(([color]) => ({
+    }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color]) => ({
       props: {
         color,
         disableUnderline: false

package/InputAdornment/InputAdornment.js

@@ -126,7 +126,7 @@ const InputAdornment = /*#__PURE__*/React.forwardRef(function InputAdornment(inP
         color: "textSecondary",
         children: children
       }) : /*#__PURE__*/_jsxs(React.Fragment, {
-        children: [position === 'start' ? ( /* notranslate needed while Google Translate will not fix zero-width space issue */_span || (_span = /*#__PURE__*/_jsx("span", {
+        children: [position === 'start' ? (/* notranslate needed while Google Translate will not fix zero-width space issue */_span || (_span = /*#__PURE__*/_jsx("span", {
           className: "notranslate",
           children: "\u200B"
         }))) : null, children]

package/InputBase/InputBase.js

@@ -461,7 +461,7 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
     ...(slotProps.input ?? componentsProps.input)
   };
   return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [!disableInjectingGlobalStyles && typeof InputGlobalStyles === 'function' && ( // For Emotion/Styled-components, InputGlobalStyles will be a function
+    children: [!disableInjectingGlobalStyles && typeof InputGlobalStyles === 'function' && (// For Emotion/Styled-components, InputGlobalStyles will be a function
     // For Pigment CSS, this has no effect because the InputGlobalStyles will be null.
     _InputGlobalStyles || (_InputGlobalStyles = /*#__PURE__*/_jsx(InputGlobalStyles, {}))), /*#__PURE__*/_jsxs(Root, {
       ...rootProps,

package/LinearProgress/LinearProgress.js

@@ -8,6 +8,7 @@ import { darken, lighten } from '@mui/system/colorManipulator';
 import { useRtl } from '@mui/system/RtlProvider';
 import { keyframes, css, styled } from "../zero-styled/index.js";
 import memoTheme from "../utils/memoTheme.js";
+import createSimplePaletteValueFilter from "../utils/createSimplePaletteValueFilter.js";
 import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import capitalize from "../utils/capitalize.js";
 import { getLinearProgressUtilityClass } from "./linearProgressClasses.js";
@@ -115,7 +116,7 @@ const LinearProgressRoot = styled('span', {
   '@media print': {
     colorAdjust: 'exact'
   },
-  variants: [...Object.entries(theme.palette).filter(([, value]) => value && value.main).map(([color]) => ({
+  variants: [...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color]) => ({
     props: {
       color
     },
@@ -180,7 +181,7 @@ const LinearProgressDashed = styled('span', {
       opacity: 0.3,
       backgroundImage: `radial-gradient(currentColor 0%, currentColor 16%, transparent 42%)`
     }
-  }, ...Object.entries(theme.palette).filter(([, value]) => value && value.main).map(([color]) => {
+  }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color]) => {
     const backgroundColor = getColorShade(theme, color);
     return {
       props: {
@@ -221,7 +222,7 @@ const LinearProgressBar1 = styled('span', {
     style: {
       backgroundColor: 'currentColor'
     }
-  }, ...Object.entries(theme.palette).filter(([, value]) => value && value.main).map(([color]) => ({
+  }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color]) => ({
     props: {
       color
     },
@@ -278,7 +279,7 @@ const LinearProgressBar2 = styled('span', {
   top: 0,
   transition: 'transform 0.2s linear',
   transformOrigin: 'left',
-  variants: [...Object.entries(theme.palette).filter(([, value]) => value && value.main).map(([color]) => ({
+  variants: [...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color]) => ({
     props: {
       color
     },
@@ -299,7 +300,7 @@ const LinearProgressBar2 = styled('span', {
     style: {
       opacity: 0.3
     }
-  }, ...Object.entries(theme.palette).filter(([, value]) => value && value.main).map(([color]) => ({
+  }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color]) => ({
     props: {
       color,
       variant: 'buffer'

package/Link/Link.js

@@ -10,6 +10,7 @@ import isFocusVisible from '@mui/utils/isFocusVisible';
 import capitalize from "../utils/capitalize.js";
 import { styled, useTheme } from "../zero-styled/index.js";
 import memoTheme from "../utils/memoTheme.js";
+import createSimplePaletteValueFilter from "../utils/createSimplePaletteValueFilter.js";
 import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import Typography from "../Typography/index.js";
 import linkClasses, { getLinkUtilityClass } from "./linkClasses.js";
@@ -86,7 +87,7 @@ const LinkRoot = styled(Typography, {
       style: {
         textDecorationColor: 'var(--Link-underlineColor)'
       }
-    }, ...Object.entries(theme.palette).filter(([, value]) => value && value.main).map(([color]) => ({
+    }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color]) => ({
       props: {
         underline: 'always',
         color

package/MenuList/MenuList.js

@@ -121,6 +121,14 @@ const MenuList = /*#__PURE__*/React.forwardRef(function MenuList(props, ref) {
   const handleKeyDown = event => {
     const list = listRef.current;
     const key = event.key;
+    const isModifierKeyPressed = event.ctrlKey || event.metaKey || event.altKey;
+    if (isModifierKeyPressed) {
+      if (onKeyDown) {
+        onKeyDown(event);
+      }
+      return;
+    }
+
     /**
      * @type {Element} - will always be defined since we are in a keydown handler
      * attached to an element. A keydown event is either dispatched to the activeElement

package/Modal/Modal.d.ts

@@ -211,10 +211,10 @@ export declare const ModalRoot: React.FC<ModalRootProps>;
 /**
  * Modal is a lower-level construct that is leveraged by the following components:
  *
- * *   [Dialog](https://mui.com/material-ui/api/dialog/)
- * *   [Drawer](https://mui.com/material-ui/api/drawer/)
- * *   [Menu](https://mui.com/material-ui/api/menu/)
- * *   [Popover](https://mui.com/material-ui/api/popover/)
+ * * [Dialog](https://mui.com/material-ui/api/dialog/)
+ * * [Drawer](https://mui.com/material-ui/api/drawer/)
+ * * [Menu](https://mui.com/material-ui/api/menu/)
+ * * [Popover](https://mui.com/material-ui/api/popover/)
  *
  * If you are creating a modal dialog, you probably want to use the [Dialog](https://mui.com/material-ui/api/dialog/) component
  * rather than directly using Modal.

package/NoSsr/NoSsr.d.ts

@@ -5,10 +5,10 @@ import { NoSsrProps } from './NoSsr.types';
  *
  * This component can be useful in a variety of situations:
  *
- * *   Escape hatch for broken dependencies not supporting SSR.
- * *   Improve the time-to-first paint on the client by only rendering above the fold.
- * *   Reduce the rendering time on the server.
- * *   Under too heavy server load, you can turn on service degradation.
+ * * Escape hatch for broken dependencies not supporting SSR.
+ * * Improve the time-to-first paint on the client by only rendering above the fold.
+ * * Reduce the rendering time on the server.
+ * * Under too heavy server load, you can turn on service degradation.
  *
  * Demos:
  *

package/NoSsr/NoSsr.js

@@ -9,10 +9,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
  *
  * This component can be useful in a variety of situations:
  *
- * *   Escape hatch for broken dependencies not supporting SSR.
- * *   Improve the time-to-first paint on the client by only rendering above the fold.
- * *   Reduce the rendering time on the server.
- * *   Under too heavy server load, you can turn on service degradation.
+ * * Escape hatch for broken dependencies not supporting SSR.
+ * * Improve the time-to-first paint on the client by only rendering above the fold.
+ * * Reduce the rendering time on the server.
+ * * Under too heavy server load, you can turn on service degradation.
  *
  * Demos:
  *

package/OutlinedInput/OutlinedInput.js

@@ -10,6 +10,7 @@ import formControlState from "../FormControl/formControlState.js";
 import rootShouldForwardProp from "../styles/rootShouldForwardProp.js";
 import { styled } from "../zero-styled/index.js";
 import memoTheme from "../utils/memoTheme.js";
+import createSimplePaletteValueFilter from "../utils/createSimplePaletteValueFilter.js";
 import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import outlinedInputClasses, { getOutlinedInputUtilityClass } from "./outlinedInputClasses.js";
 import InputBase, { rootOverridesResolver as inputBaseRootOverridesResolver, inputOverridesResolver as inputBaseInputOverridesResolver, InputBaseRoot, InputBaseInput } from "../InputBase/InputBase.js";
@@ -48,7 +49,7 @@ const OutlinedInputRoot = styled(InputBaseRoot, {
     [`&.${outlinedInputClasses.focused} .${outlinedInputClasses.notchedOutline}`]: {
       borderWidth: 2
     },
-    variants: [...Object.entries(theme.palette).filter(([, value]) => value && value.main).map(([color]) => ({
+    variants: [...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color]) => ({
       props: {
         color
       },

package/PaginationItem/PaginationItem.d.ts

@@ -14,10 +14,10 @@ export interface PaginationItemPropsSizeOverrides {}
 export interface PaginationItemPropsColorOverrides {}
 
 export interface PaginationItemSlots {
-  first?: React.ElementType;
-  last?: React.ElementType;
-  next?: React.ElementType;
-  previous?: React.ElementType;
+  first: React.ElementType;
+  last: React.ElementType;
+  next: React.ElementType;
+  previous: React.ElementType;
 }
 
 export type PaginationItemSlotsAndSlotProps = CreateSlotsAndSlotProps<

package/PaginationItem/PaginationItem.js

@@ -9,6 +9,7 @@ import { useRtl } from '@mui/system/RtlProvider';
 import paginationItemClasses, { getPaginationItemUtilityClass } from "./paginationItemClasses.js";
 import ButtonBase from "../ButtonBase/index.js";
 import capitalize from "../utils/capitalize.js";
+import createSimplePaletteValueFilter from "../utils/createSimplePaletteValueFilter.js";
 import FirstPageIcon from "../internal/svg-icons/FirstPage.js";
 import LastPageIcon from "../internal/svg-icons/LastPage.js";
 import NavigateBeforeIcon from "../internal/svg-icons/NavigateBefore.js";
@@ -193,7 +194,7 @@ const PaginationItemPage = styled(ButtonBase, {
         }
       }
     }
-  }, ...Object.entries(theme.palette).filter(([, value]) => value && value.main && value.dark && value.contrastText).map(([color]) => ({
+  }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter(['dark', 'contrastText'])).map(([color]) => ({
     props: {
       variant: 'text',
       color
@@ -217,7 +218,7 @@ const PaginationItemPage = styled(ButtonBase, {
         }
       }
     }
-  })), ...Object.entries(theme.palette).filter(([, value]) => value && value.main && value.light).map(([color]) => ({
+  })), ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter(['light'])).map(([color]) => ({
     props: {
       variant: 'outlined',
       color

package/Popover/Popover.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
-import { InternalStandardProps as StandardProps } from '..';
+import { BackdropProps, InternalStandardProps as StandardProps } from '..';
 import Paper, { PaperProps } from '../Paper';
 import Modal, { ModalOwnerState, ModalProps } from '../Modal';
 import { Theme } from '../styles';
@@ -9,8 +9,8 @@ import { PopoverClasses } from './popoverClasses';
 import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
 
 export interface PopoverSlots {
-  root?: React.ElementType;
-  paper?: React.ElementType;
+  root: React.ElementType;
+  paper: React.ElementType;
 }
 
 export type PopoverSlotsAndSlotProps = CreateSlotsAndSlotProps<
@@ -39,7 +39,10 @@ interface PopoverVirtualElement {
 }
 
 export interface PopoverProps
-  extends StandardProps<Omit<ModalProps, 'slots' | 'slotProps'>, 'children'>,
+  extends StandardProps<
+      Omit<ModalProps, 'slots' | 'slotProps' | 'BackdropProps' | 'BackdropComponent'>,
+      'children'
+    >,
     PopoverSlotsAndSlotProps {
   /**
    * A ref for imperative actions.
@@ -82,6 +85,26 @@ export interface PopoverProps
    * @default 'anchorEl'
    */
   anchorReference?: PopoverReference;
+  /**
+   * A backdrop component. This prop enables custom backdrop rendering.
+   * @deprecated Use `slotProps.root.slots.backdrop` instead. While this prop currently works, it will be removed in the next major version.
+   * Use the `slotProps.root.slots.backdrop` prop to make your application ready for the next version of Material UI.
+   * @default styled(Backdrop, {
+   *   name: 'MuiModal',
+   *   slot: 'Backdrop',
+   *   overridesResolver: (props, styles) => {
+   *     return styles.backdrop;
+   *   },
+   * })({
+   *   zIndex: -1,
+   * })
+   */
+  BackdropComponent?: React.ElementType<BackdropProps>;
+  /**
+   * Props applied to the [`Backdrop`](/material-ui/api/backdrop/) element.
+   * @deprecated Use `slotProps.root.slotProps.backdrop` instead.
+   */
+  BackdropProps?: Partial<BackdropProps>;
   /**
    * The content of the component.
    */

package/Popover/Popover.js

@@ -419,6 +419,26 @@ process.env.NODE_ENV !== "production" ? Popover.propTypes /* remove-proptypes */
    * @default 'anchorEl'
    */
   anchorReference: PropTypes.oneOf(['anchorEl', 'anchorPosition', 'none']),
+  /**
+   * A backdrop component. This prop enables custom backdrop rendering.
+   * @deprecated Use `slotProps.root.slots.backdrop` instead. While this prop currently works, it will be removed in the next major version.
+   * Use the `slotProps.root.slots.backdrop` prop to make your application ready for the next version of Material UI.
+   * @default styled(Backdrop, {
+   *   name: 'MuiModal',
+   *   slot: 'Backdrop',
+   *   overridesResolver: (props, styles) => {
+   *     return styles.backdrop;
+   *   },
+   * })({
+   *   zIndex: -1,
+   * })
+   */
+  BackdropComponent: PropTypes.elementType,
+  /**
+   * Props applied to the [`Backdrop`](/material-ui/api/backdrop/) element.
+   * @deprecated Use `slotProps.root.slotProps.backdrop` instead.
+   */
+  BackdropProps: PropTypes.object,
   /**
    * The content of the component.
    */

package/Portal/Portal.js

@@ -44,7 +44,7 @@ const Portal = /*#__PURE__*/React.forwardRef(function Portal(props, forwardedRef
     return undefined;
   }, [forwardedRef, mountNode, disablePortal]);
   if (disablePortal) {
-    if ( /*#__PURE__*/React.isValidElement(children)) {
+    if (/*#__PURE__*/React.isValidElement(children)) {
       const newProps = {
         ref: handleRef
       };