@mui/material 6.0.2 → 6.1.1-dev.20240919-130050-82a6448768

package/modern/internal/svg-icons/Warning.js

@@ -7,6 +7,6 @@ import createSvgIcon from "../../utils/createSvgIcon.js";
  * @ignore - internal component.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-export default createSvgIcon( /*#__PURE__*/_jsx("path", {
+export default createSvgIcon(/*#__PURE__*/_jsx("path", {
   d: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"
 }), 'Warning');

package/modern/styles/ThemeProviderWithVars.js

@@ -43,9 +43,11 @@ let warnedOnce = false;
 // TODO: remove in v7
 // eslint-disable-next-line @typescript-eslint/naming-convention
 function Experimental_CssVarsProvider(props) {
-  if (!warnedOnce) {
-    console.warn(['MUI: The Experimental_CssVarsProvider component has been ported into ThemeProvider.', '', "You should use `import { ThemeProvider } from '@mui/material/styles'` instead.", 'For more details, check out https://mui.com/material-ui/customization/css-theme-variables/usage/'].join('\n'));
-    warnedOnce = true;
+  if (process.env.NODE_ENV !== 'production') {
+    if (!warnedOnce) {
+      console.warn(['MUI: The Experimental_CssVarsProvider component has been ported into ThemeProvider.', '', "You should use `import { ThemeProvider } from '@mui/material/styles'` instead.", 'For more details, check out https://mui.com/material-ui/customization/css-theme-variables/usage/'].join('\n'));
+      warnedOnce = true;
+    }
   }
   return /*#__PURE__*/_jsx(InternalCssVarsProvider, {
     ...props

package/modern/styles/createColorScheme.js

@@ -2,7 +2,7 @@ import createPalette from "./createPalette.js";
 import getOverlayAlpha from "./getOverlayAlpha.js";
 const defaultDarkOverlays = [...Array(25)].map((_, index) => {
   if (index === 0) {
-    return undefined;
+    return 'none';
   }
   const overlay = getOverlayAlpha(index);
   return `linear-gradient(rgba(255 255 255 / ${overlay}), rgba(255 255 255 / ${overlay}))`;

package/modern/styles/createGetSelector.js

@@ -1,5 +1,5 @@
 import excludeVariablesFromRoot from "./excludeVariablesFromRoot.js";
-export default (theme => (colorScheme, css) => {
+export default theme => (colorScheme, css) => {
   const selector = theme.colorSchemeSelector;
   let rule = selector;
   if (selector === 'class') {
@@ -56,4 +56,4 @@ export default (theme => (colorScheme, css) => {
     }
   }
   return ':root';
-});
+};

package/modern/styles/excludeVariablesFromRoot.js

@@ -1,5 +1,5 @@
 /**
  * @internal These variables should not appear in the :root stylesheet when the `defaultColorScheme="dark"`
  */
-const excludeVariablesFromRoot = cssVarPrefix => [...[...Array(24)].map((_, index) => `--${cssVarPrefix ? `${cssVarPrefix}-` : ''}overlays-${index + 1}`), `--${cssVarPrefix ? `${cssVarPrefix}-` : ''}palette-AppBar-darkBg`, `--${cssVarPrefix ? `${cssVarPrefix}-` : ''}palette-AppBar-darkColor`];
+const excludeVariablesFromRoot = cssVarPrefix => [...[...Array(25)].map((_, index) => `--${cssVarPrefix ? `${cssVarPrefix}-` : ''}overlays-${index}`), `--${cssVarPrefix ? `${cssVarPrefix}-` : ''}palette-AppBar-darkBg`, `--${cssVarPrefix ? `${cssVarPrefix}-` : ''}palette-AppBar-darkColor`];
 export default excludeVariablesFromRoot;

package/modern/styles/useTheme.js

@@ -7,6 +7,7 @@ import THEME_ID from "./identifier.js";
 export default function useTheme() {
   const theme = useThemeSystem(defaultTheme);
   if (process.env.NODE_ENV !== 'production') {
+    // TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler
     // eslint-disable-next-line react-hooks/rules-of-hooks
     React.useDebugValue(theme);
   }

package/modern/useAutocomplete/useAutocomplete.js

@@ -36,7 +36,7 @@ export function createFilterOptions(config = {}) {
       if (ignoreAccents) {
         candidate = stripDiacritics(candidate);
       }
-      return matchFrom === 'start' ? candidate.indexOf(input) === 0 : candidate.indexOf(input) > -1;
+      return matchFrom === 'start' ? candidate.startsWith(input) : candidate.includes(input);
     });
     return typeof limit === 'number' ? filteredOptions.slice(0, limit) : filteredOptions;
   };
@@ -586,7 +586,7 @@ function useAutocomplete(props) {
     if (event.defaultMuiPrevented) {
       return;
     }
-    if (focusedTag !== -1 && ['ArrowLeft', 'ArrowRight'].indexOf(event.key) === -1) {
+    if (focusedTag !== -1 && !['ArrowLeft', 'ArrowRight'].includes(event.key)) {
       setFocusedTag(-1);
       focusTag(-1);
     }

package/modern/useScrollTrigger/useScrollTrigger.js

@@ -45,6 +45,7 @@ export default function useScrollTrigger(options = {}) {
       });
     };
     // See Option 3. https://github.com/facebook/react/issues/14476#issuecomment-471199055
+    // TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [target, getTrigger, JSON.stringify(other)]);
   return trigger;

package/modern/utils/createSimplePaletteValueFilter.js

@@ -0,0 +1,41 @@
+/**
+ * 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) {
+  return typeof obj.main === 'string';
+}
+/**
+ * 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, additionalPropertiesToCheck = []) {
+  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 = []) {
+  return ([, value]) => value && checkSimplePaletteColorValues(value, additionalPropertiesToCheck);
+}

package/modern/utils/createSvgIcon.js

@@ -22,5 +22,5 @@ export default function createSvgIcon(path, displayName) {
     Component.displayName = `${displayName}Icon`;
   }
   Component.muiName = SvgIcon.muiName;
-  return /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(Component));
+  return /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(Component));
 }

package/modern/version/index.js

@@ -1,7 +1,6 @@
-export const version = "6.0.2";
+export const version = "6.1.1-dev.20240919-130050-82a6448768";
 export const major = Number("6");
-export const minor = Number("0");
-export const patch = Number("2");
-export const preReleaseLabel = undefined || null;
-export const preReleaseNumber = Number(undefined) || null;
+export const minor = Number("1");
+export const patch = Number("1");
+export const prerelease = "dev.20240919";
 export default version;

package/node/Alert/Alert.js

@@ -17,6 +17,7 @@ var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
+var _createSimplePaletteValueFilter = _interopRequireDefault(require("../utils/createSimplePaletteValueFilter"));
 var _Paper = _interopRequireDefault(require("../Paper"));
 var _alertClasses = _interopRequireWildcard(require("./alertClasses"));
 var _IconButton = _interopRequireDefault(require("../IconButton"));
@@ -60,7 +61,7 @@ const AlertRoot = (0, _zeroStyled.styled)(_Paper.default, {
     backgroundColor: 'transparent',
     display: 'flex',
     padding: '6px 16px',
-    variants: [...Object.entries(theme.palette).filter(([, value]) => value && value.main && value.light).map(([color]) => ({
+    variants: [...Object.entries(theme.palette).filter((0, _createSimplePaletteValueFilter.default)(['light'])).map(([color]) => ({
       props: {
         colorSeverity: color,
         variant: 'standard'
@@ -74,7 +75,7 @@ const AlertRoot = (0, _zeroStyled.styled)(_Paper.default, {
           color: theme.palette[color].main
         }
       }
-    })), ...Object.entries(theme.palette).filter(([, value]) => value && value.main && value.light).map(([color]) => ({
+    })), ...Object.entries(theme.palette).filter((0, _createSimplePaletteValueFilter.default)(['light'])).map(([color]) => ({
       props: {
         colorSeverity: color,
         variant: 'outlined'
@@ -88,7 +89,7 @@ const AlertRoot = (0, _zeroStyled.styled)(_Paper.default, {
           color: theme.palette[color].main
         }
       }
-    })), ...Object.entries(theme.palette).filter(([, value]) => value && value.main && value.dark).map(([color]) => ({
+    })), ...Object.entries(theme.palette).filter((0, _createSimplePaletteValueFilter.default)(['dark'])).map(([color]) => ({
       props: {
         colorSeverity: color,
         variant: 'filled'

package/node/AppBar/AppBar.js

@@ -15,6 +15,7 @@ var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
+var _createSimplePaletteValueFilter = _interopRequireDefault(require("../utils/createSimplePaletteValueFilter"));
 var _Paper = _interopRequireDefault(require("../Paper"));
 var _appBarClasses = require("./appBarClasses");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -121,7 +122,7 @@ const AppBarRoot = (0, _zeroStyled.styled)(_Paper.default, {
         '--AppBar-color': theme.vars ? theme.vars.palette.text.primary : theme.palette.getContrastText(theme.palette.grey[900])
       })
     }
-  }, ...Object.entries(theme.palette).filter(([, palette]) => palette && palette.main && palette.contrastText).map(([color]) => ({
+  }, ...Object.entries(theme.palette).filter((0, _createSimplePaletteValueFilter.default)(['contrastText'])).map(([color]) => ({
     props: {
       color
     },

package/node/Autocomplete/Autocomplete.js

@@ -616,7 +616,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     const more = startAdornment.length - limitTags;
     if (!focused && more > 0) {
       startAdornment = startAdornment.splice(0, limitTags);
-      startAdornment.push( /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      startAdornment.push(/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         className: classes.tag,
         children: getLimitTagsText(more)
       }, startAdornment.length));
@@ -674,7 +674,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
   });
   let autocompletePopper = null;
   if (groupedOptions.length > 0) {
-    autocompletePopper = renderAutocompletePopperChildren( /*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompleteListbox, {
+    autocompletePopper = renderAutocompletePopperChildren(/*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompleteListbox, {
       as: ListboxSlot,
       ...listboxProps,
       children: groupedOptions.map((option, index) => {
@@ -689,13 +689,13 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
       })
     }));
   } else if (loading && groupedOptions.length === 0) {
-    autocompletePopper = renderAutocompletePopperChildren( /*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompleteLoading, {
+    autocompletePopper = renderAutocompletePopperChildren(/*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompleteLoading, {
       className: classes.loading,
       ownerState: ownerState,
       children: loadingText
     }));
   } else if (groupedOptions.length === 0 && !freeSolo && !loading) {
-    autocompletePopper = renderAutocompletePopperChildren( /*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompleteNoOptions, {
+    autocompletePopper = renderAutocompletePopperChildren(/*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompleteNoOptions, {
       className: classes.noOptions,
       ownerState: ownerState,
       role: "presentation",

package/node/Backdrop/Backdrop.js

@@ -17,6 +17,13 @@ var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
 var _Fade = _interopRequireDefault(require("../Fade"));
 var _backdropClasses = require("./backdropClasses");
 var _jsxRuntime = require("react/jsx-runtime");
+const removeOwnerState = props => {
+  const {
+    ownerState,
+    ...rest
+  } = props;
+  return rest;
+};
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -105,12 +112,12 @@ const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
     externalForwardedProps,
     ownerState
   });
-  delete transitionProps.ownerState;
+  const transitionPropsRemoved = removeOwnerState(transitionProps);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(TransitionSlot, {
     in: open,
     timeout: transitionDuration,
     ...other,
-    ...transitionProps,
+    ...transitionPropsRemoved,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(RootSlot, {
       "aria-hidden": true,
       ...rootProps,

package/node/Badge/Badge.js

@@ -16,6 +16,7 @@ var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
 var _useBadge = _interopRequireDefault(require("./useBadge"));
 var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
+var _createSimplePaletteValueFilter = _interopRequireDefault(require("../utils/createSimplePaletteValueFilter"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _badgeClasses = _interopRequireWildcard(require("./badgeClasses"));
@@ -82,7 +83,7 @@ const BadgeBadge = (0, _zeroStyled.styled)('span', {
     easing: theme.transitions.easing.easeInOut,
     duration: theme.transitions.duration.enteringScreen
   }),
-  variants: [...Object.entries(theme.palette).filter(([, palette]) => palette && palette.main && palette.contrastText).map(([color]) => ({
+  variants: [...Object.entries(theme.palette).filter((0, _createSimplePaletteValueFilter.default)(['contrastText'])).map(([color]) => ({
     props: {
       color
     },

package/node/Button/Button.js

@@ -19,6 +19,7 @@ var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
+var _createSimplePaletteValueFilter = _interopRequireDefault(require("../utils/createSimplePaletteValueFilter"));
 var _buttonClasses = _interopRequireWildcard(require("./buttonClasses"));
 var _ButtonGroupContext = _interopRequireDefault(require("../ButtonGroup/ButtonGroupContext"));
 var _ButtonGroupButtonContext = _interopRequireDefault(require("../ButtonGroup/ButtonGroupButtonContext"));
@@ -153,7 +154,7 @@ const ButtonRoot = (0, _zeroStyled.styled)(_ButtonBase.default, {
         color: `var(--variant-textColor)`,
         backgroundColor: `var(--variant-textBg)`
       }
-    }, ...Object.entries(theme.palette).filter(([, palette]) => palette && palette.main && palette.dark && palette.contrastText).map(([color]) => ({
+    }, ...Object.entries(theme.palette).filter((0, _createSimplePaletteValueFilter.default)(['dark', 'contrastText'])).map(([color]) => ({
       props: {
         color
       },

package/node/ButtonGroup/ButtonGroup.js

@@ -16,6 +16,7 @@ var _getValidReactChildren = _interopRequireDefault(require("@mui/utils/getValid
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
+var _createSimplePaletteValueFilter = _interopRequireDefault(require("../utils/createSimplePaletteValueFilter"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _buttonGroupClasses = _interopRequireWildcard(require("./buttonGroupClasses"));
 var _ButtonGroupContext = _interopRequireDefault(require("./ButtonGroupContext"));
@@ -147,7 +148,7 @@ const ButtonGroupRoot = (0, _zeroStyled.styled)('div', {
         }
       }
     }
-  }, ...Object.entries(theme.palette).filter(([, value]) => value && value.main).flatMap(([color]) => [{
+  }, ...Object.entries(theme.palette).filter((0, _createSimplePaletteValueFilter.default)()).flatMap(([color]) => [{
     props: {
       variant: 'text',
       color
@@ -215,7 +216,7 @@ const ButtonGroupRoot = (0, _zeroStyled.styled)('div', {
         }
       }
     }
-  }, ...Object.entries(theme.palette).filter(([, value]) => value && value.dark).map(([color]) => ({
+  }, ...Object.entries(theme.palette).filter((0, _createSimplePaletteValueFilter.default)(['dark'])).map(([color]) => ({
     props: {
       variant: 'contained',
       color

package/node/Checkbox/Checkbox.js

@@ -22,6 +22,7 @@ var _rootShouldForwardProp = _interopRequireDefault(require("../styles/rootShoul
 var _checkboxClasses = _interopRequireWildcard(require("./checkboxClasses"));
 var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
+var _createSimplePaletteValueFilter = _interopRequireDefault(require("../utils/createSimplePaletteValueFilter"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
@@ -65,7 +66,7 @@ const CheckboxRoot = (0, _zeroStyled.styled)(_SwitchBase.default, {
         backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})` : (0, _colorManipulator.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((0, _createSimplePaletteValueFilter.default)()).map(([color]) => ({
     props: {
       color,
       disableRipple: false
@@ -75,7 +76,7 @@ const CheckboxRoot = (0, _zeroStyled.styled)(_SwitchBase.default, {
         backgroundColor: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : (0, _colorManipulator.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((0, _createSimplePaletteValueFilter.default)()).map(([color]) => ({
     props: {
       color
     },

package/node/Chip/Chip.js

@@ -19,6 +19,7 @@ var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
 var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
+var _createSimplePaletteValueFilter = _interopRequireDefault(require("../utils/createSimplePaletteValueFilter"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _chipClasses = _interopRequireWildcard(require("./chipClasses"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -165,7 +166,7 @@ const ChipRoot = (0, _zeroStyled.styled)('div', {
           marginLeft: -4
         }
       }
-    }, ...Object.entries(theme.palette).filter(([, value]) => value && value.main && value.contrastText).map(([color]) => {
+    }, ...Object.entries(theme.palette).filter((0, _createSimplePaletteValueFilter.default)(['contrastText'])).map(([color]) => {
       return {
         props: {
           color
@@ -204,7 +205,7 @@ const ChipRoot = (0, _zeroStyled.styled)('div', {
           backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : (0, _colorManipulator.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((0, _createSimplePaletteValueFilter.default)(['dark'])).map(([color]) => {
       return {
         props: {
           color,
@@ -234,7 +235,7 @@ const ChipRoot = (0, _zeroStyled.styled)('div', {
           boxShadow: (theme.vars || theme).shadows[1]
         }
       }
-    }, ...Object.entries(theme.palette).filter(([, value]) => value && value.dark).map(([color]) => ({
+    }, ...Object.entries(theme.palette).filter((0, _createSimplePaletteValueFilter.default)(['dark'])).map(([color]) => ({
       props: {
         color,
         clickable: true
@@ -276,7 +277,7 @@ const ChipRoot = (0, _zeroStyled.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((0, _createSimplePaletteValueFilter.default)()) // no need to check for mainChannel as it's calculated from main
     .map(([color]) => ({
       props: {
         variant: 'outlined',
@@ -433,7 +434,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: (0, _clsx.default)(deleteIconProp.props.className, classes.deleteIcon),
       onClick: handleDeleteIconClick
     })) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Cancel.default, {

package/node/CircularProgress/CircularProgress.js

@@ -16,6 +16,7 @@ var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
+var _createSimplePaletteValueFilter = _interopRequireDefault(require("../utils/createSimplePaletteValueFilter"));
 var _circularProgressClasses = require("./circularProgressClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const SIZE = 44;
@@ -95,7 +96,7 @@ const CircularProgressRoot = (0, _zeroStyled.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((0, _createSimplePaletteValueFilter.default)()).map(([color]) => ({
     props: {
       color
     },

package/node/ClickAwayListener/ClickAwayListener.js

@@ -85,7 +85,7 @@ function ClickAwayListener(props) {
 
     // If not enough, can use https://github.com/DieterHolvoet/event-propagation-path/blob/master/propagationPath.js
     if (event.composedPath) {
-      insideDOM = event.composedPath().indexOf(nodeRef.current) > -1;
+      insideDOM = event.composedPath().includes(nodeRef.current);
     } else {
       insideDOM = !doc.documentElement.contains(
       // @ts-expect-error returns `false` as intended when not dispatched from a Node

package/node/Dialog/Dialog.js

@@ -113,6 +113,7 @@ const DialogPaper = (0, _zeroStyled.styled)(_Paper.default, {
 }) => ({
   margin: 32,
   position: 'relative',
+  overflowY: 'auto',
   '@media print': {
     overflowY: 'visible',
     boxShadow: 'none'

package/node/Fab/Fab.js

@@ -17,6 +17,7 @@ var _fabClasses = _interopRequireWildcard(require("./fabClasses"));
 var _rootShouldForwardProp = _interopRequireDefault(require("../styles/rootShouldForwardProp"));
 var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
+var _createSimplePaletteValueFilter = _interopRequireDefault(require("../utils/createSimplePaletteValueFilter"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
@@ -140,7 +141,7 @@ const FabRoot = (0, _zeroStyled.styled)(_ButtonBase.default, {
 })), (0, _memoTheme.default)(({
   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((0, _createSimplePaletteValueFilter.default)(['dark', 'contrastText'])) // check all the used fields in the style below
   .map(([color]) => ({
     props: {
       color

package/node/FilledInput/FilledInput.js

@@ -16,6 +16,7 @@ var _InputBase = _interopRequireDefault(require("../InputBase"));
 var _rootShouldForwardProp = _interopRequireDefault(require("../styles/rootShouldForwardProp"));
 var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
+var _createSimplePaletteValueFilter = _interopRequireDefault(require("../utils/createSimplePaletteValueFilter"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _filledInputClasses = _interopRequireWildcard(require("./filledInputClasses"));
 var _InputBase2 = require("../InputBase/InputBase");
@@ -129,7 +130,7 @@ const FilledInputRoot = (0, _zeroStyled.styled)(_InputBase2.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((0, _createSimplePaletteValueFilter.default)()) // check all the used fields in the style below
     .map(([color]) => ({
       props: {
         disableUnderline: false,

package/node/FormControl/FormControl.js

@@ -177,9 +177,8 @@ const FormControl = /*#__PURE__*/React.forwardRef(function FormControl(inProps,
   }
   const focused = visuallyFocused !== undefined && !disabled ? visuallyFocused : focusedState;
   let registerEffect;
+  const registeredInput = React.useRef(false);
   if (process.env.NODE_ENV !== 'production') {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const registeredInput = React.useRef(false);
     registerEffect = () => {
       if (registeredInput.current) {
         console.error(['MUI: There are multiple `InputBase` components inside a FormControl.', 'This creates visual inconsistencies, only use one `InputBase`.'].join('\n'));

package/node/FormLabel/FormLabel.js

@@ -16,6 +16,7 @@ var _useFormControl = _interopRequireDefault(require("../FormControl/useFormCont
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
+var _createSimplePaletteValueFilter = _interopRequireDefault(require("../utils/createSimplePaletteValueFilter"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _formLabelClasses = _interopRequireWildcard(require("./formLabelClasses"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -55,7 +56,7 @@ const FormLabelRoot = exports.FormLabelRoot = (0, _zeroStyled.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((0, _createSimplePaletteValueFilter.default)()).map(([color]) => ({
     props: {
       color
     },

package/node/Grid/Grid.js

@@ -543,7 +543,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.default.oneOf(['nowrap', 'wrap-reverse', 'wrap']),
   /**

package/node/Hidden/withWidth.js

@@ -63,6 +63,7 @@ const withWidth = (options = {}) => Component => {
      */
     const keys = theme.breakpoints.keys.slice().reverse();
     const widthComputed = keys.reduce((output, key) => {
+      // TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler
       // eslint-disable-next-line react-hooks/rules-of-hooks
       const matches = (0, _useMediaQuery.default)(theme.breakpoints.up(key));
       return !output && matches ? key : output;

package/node/Icon/Icon.js

@@ -14,6 +14,7 @@ var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
+var _createSimplePaletteValueFilter = _interopRequireDefault(require("../utils/createSimplePaletteValueFilter"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _iconClasses = require("./iconClasses");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -43,7 +44,7 @@ const IconRoot = (0, _zeroStyled.styled)('span', {
   userSelect: 'none',
   width: '1em',
   height: '1em',
-  // Chrome fix for https://bugs.chromium.org/p/chromium/issues/detail?id=820541
+  // Chrome fix for https://issues.chromium.org/issues/41375697
   // To remove at some point.
   overflow: 'hidden',
   display: 'inline-block',
@@ -100,7 +101,7 @@ const IconRoot = (0, _zeroStyled.styled)('span', {
     style: {
       color: undefined
     }
-  }, ...Object.entries(theme.palette).filter(([, palette]) => palette && palette.main).map(([color]) => ({
+  }, ...Object.entries(theme.palette).filter((0, _createSimplePaletteValueFilter.default)()).map(([color]) => ({
     props: {
       color
     },

package/node/IconButton/IconButton.js

@@ -15,6 +15,7 @@ var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"
 var _colorManipulator = require("@mui/system/colorManipulator");
 var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
+var _createSimplePaletteValueFilter = _interopRequireDefault(require("../utils/createSimplePaletteValueFilter"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
@@ -108,7 +109,7 @@ const IconButtonRoot = (0, _zeroStyled.styled)(_ButtonBase.default, {
     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((0, _createSimplePaletteValueFilter.default)()) // check all the used fields in the style below
   .map(([color]) => ({
     props: {
       color
@@ -116,7 +117,7 @@ const IconButtonRoot = (0, _zeroStyled.styled)(_ButtonBase.default, {
     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((0, _createSimplePaletteValueFilter.default)()) // check all the used fields in the style below
   .map(([color]) => ({
     props: {
       color,

package/node/Input/Input.js

@@ -16,6 +16,7 @@ var _InputBase = _interopRequireDefault(require("../InputBase"));
 var _rootShouldForwardProp = _interopRequireDefault(require("../styles/rootShouldForwardProp"));
 var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
+var _createSimplePaletteValueFilter = _interopRequireDefault(require("../utils/createSimplePaletteValueFilter"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _inputClasses = _interopRequireWildcard(require("./inputClasses"));
 var _InputBase2 = require("../InputBase/InputBase");
@@ -116,7 +117,7 @@ const InputRoot = (0, _zeroStyled.styled)(_InputBase2.InputBaseRoot, {
           borderBottomStyle: 'dotted'
         }
       }
-    }, ...Object.entries(theme.palette).filter(([, value]) => value && value.main).map(([color]) => ({
+    }, ...Object.entries(theme.palette).filter((0, _createSimplePaletteValueFilter.default)()).map(([color]) => ({
       props: {
         color,
         disableUnderline: false

package/node/InputAdornment/InputAdornment.js

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