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

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v6.1.0
+ * @mui/material v6.1.1-dev.20240919-130050-82a6448768
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

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/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/version/index.js

@@ -1,6 +1,6 @@
-export const version = "6.1.0";
+export const version = "6.1.1-dev.20240919-130050-82a6448768";
 export const major = Number("6");
 export const minor = Number("1");
-export const patch = Number("0");
-export const prerelease = undefined;
+export const patch = Number("1");
+export const prerelease = "dev.20240919";
 export default version;

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/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/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/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

@@ -44,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',

package/node/InputBase/InputBase.js

@@ -307,6 +307,7 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
   const [focused, setFocused] = React.useState(false);
   const muiFormControl = (0, _useFormControl.default)();
   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.useEffect(() => {
       if (muiFormControl) {
@@ -400,6 +401,7 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
   // or auto filled by the browser before the hydration (for SSR).
   React.useEffect(() => {
     checkDirty(inputRef.current);
+    // 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
   }, []);
   const handleClick = event => {

package/node/Modal/Modal.js

@@ -165,6 +165,7 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     childProps.onExited = onExited;
   }
   const externalForwardedProps = {
+    ...other,
     slots: {
       root: components.Root,
       backdrop: components.Backdrop,
@@ -216,7 +217,6 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     disablePortal: disablePortal,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(RootSlot, {
       ...rootProps,
-      ...other,
       children: [!hideBackdrop && BackdropComponent ? /*#__PURE__*/(0, _jsxRuntime.jsx)(BackdropSlot, {
         ...backdropProps,
         ref: backdropRef

package/node/Modal/ModalManager.js

@@ -29,14 +29,14 @@ function isAriaHiddenForbiddenOnElement(element) {
   // can be children of body and can't have aria-hidden attribute.
   // cf. https://www.w3.org/TR/html-aria/#docconformance
   const forbiddenTagNames = ['TEMPLATE', 'SCRIPT', 'STYLE', 'LINK', 'MAP', 'META', 'NOSCRIPT', 'PICTURE', 'COL', 'COLGROUP', 'PARAM', 'SLOT', 'SOURCE', 'TRACK'];
-  const isForbiddenTagName = forbiddenTagNames.indexOf(element.tagName) !== -1;
+  const isForbiddenTagName = forbiddenTagNames.includes(element.tagName);
   const isInputHidden = element.tagName === 'INPUT' && element.getAttribute('type') === 'hidden';
   return isForbiddenTagName || isInputHidden;
 }
 function ariaHiddenSiblings(container, mountElement, currentElement, elementsToExclude, show) {
   const blacklist = [mountElement, currentElement, ...elementsToExclude];
   [].forEach.call(container.children, element => {
-    const isNotExcludedElement = blacklist.indexOf(element) === -1;
+    const isNotExcludedElement = !blacklist.includes(element);
     const isNotForbiddenElement = !isAriaHiddenForbiddenOnElement(element);
     if (isNotExcludedElement && isNotForbiddenElement) {
       ariaHidden(element, show);
@@ -172,7 +172,7 @@ class ModalManager {
     return modalIndex;
   }
   mount(modal, props) {
-    const containerIndex = findIndexOf(this.containers, item => item.modals.indexOf(modal) !== -1);
+    const containerIndex = findIndexOf(this.containers, item => item.modals.includes(modal));
     const containerInfo = this.containers[containerIndex];
     if (!containerInfo.restore) {
       containerInfo.restore = handleContainer(containerInfo, props);
@@ -183,7 +183,7 @@ class ModalManager {
     if (modalIndex === -1) {
       return modalIndex;
     }
-    const containerIndex = findIndexOf(this.containers, item => item.modals.indexOf(modal) !== -1);
+    const containerIndex = findIndexOf(this.containers, item => item.modals.includes(modal));
     const containerInfo = this.containers[containerIndex];
     containerInfo.modals.splice(containerInfo.modals.indexOf(modal), 1);
     this.modals.splice(modalIndex, 1);

package/node/Popover/Popover.js

@@ -250,7 +250,7 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
     }
     const positioning = getPositioningStyle(element);
     if (positioning.top !== null) {
-      element.style.top = positioning.top;
+      element.style.setProperty('top', positioning.top);
     }
     if (positioning.left !== null) {
       element.style.left = positioning.left;

package/node/Select/SelectInput.js

@@ -187,6 +187,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
       setMenuMinWidthState(autoWidth ? null : anchorElement.clientWidth);
       displayRef.current.focus();
     }
+    // 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
   }, [displayNode, autoWidth]);
   // `isOpenControlled` is ignored because the component should never switch between controlled and uncontrolled modes.
@@ -390,6 +391,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     });
   });
   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.useEffect(() => {
       if (!foundMatch && !multiple && value !== '') {

package/node/Skeleton/Skeleton.js

@@ -66,7 +66,9 @@ const pulseAnimation = typeof pulseKeyframe !== 'string' ? (0, _zeroStyled.css)`
         animation: ${pulseKeyframe} 2s ease-in-out 0.5s infinite;
       ` : null;
 const waveAnimation = typeof waveKeyframe !== 'string' ? (0, _zeroStyled.css)`
-        animation: ${waveKeyframe} 2s linear 0.5s infinite;
+        &::after {
+          animation: ${waveKeyframe} 2s linear 0.5s infinite;
+        }
       ` : null;
 const SkeletonRoot = (0, _zeroStyled.styled)('span', {
   name: 'MuiSkeleton',
@@ -175,8 +177,8 @@ const SkeletonRoot = (0, _zeroStyled.styled)('span', {
       props: {
         animation: 'wave'
       },
-      style: {
-        '&::after': waveAnimation || {
+      style: waveAnimation || {
+        '&::after': {
           animation: `${waveKeyframe} 2s linear 0.5s infinite`
         }
       }

package/node/Slider/useSlider.js

@@ -347,12 +347,12 @@ function useSlider(parameters) {
       left
     } = slider.getBoundingClientRect();
     let percent;
-    if (axis.indexOf('vertical') === 0) {
+    if (axis.startsWith('vertical')) {
       percent = (bottom - finger.y) / height;
     } else {
       percent = (finger.x - left) / width;
     }
-    if (axis.indexOf('-reverse') !== -1) {
+    if (axis.includes('-reverse')) {
       percent = 1 - percent;
     }
     let newValue;

package/node/SwipeableDrawer/SwipeableDrawer.js

@@ -210,6 +210,7 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
     if (!touchDetected.current) {
       return;
     }
+    // TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler -- claimedSwipeInstance is a singleton
     claimedSwipeInstance = null;
     touchDetected.current = false;
     ReactDOM.flushSync(() => {

package/node/ToggleButtonGroup/isValueSelected.js

@@ -11,7 +11,7 @@ function isValueSelected(value, candidate) {
     return false;
   }
   if (Array.isArray(candidate)) {
-    return candidate.indexOf(value) >= 0;
+    return candidate.includes(value);
   }
   return value === candidate;
 }

package/node/Tooltip/Tooltip.js

@@ -377,12 +377,14 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
   });
   let open = openState;
   if (process.env.NODE_ENV !== 'production') {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
+    // 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 -- process.env never changes
     const {
       current: isControlled
     } = React.useRef(openProp !== undefined);
 
-    // eslint-disable-next-line react-hooks/rules-of-hooks
+    // 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 -- process.env never changes
     React.useEffect(() => {
       if (childNode && childNode.disabled && !isControlled && title !== '' && childNode.tagName.toLowerCase() === 'button') {
         console.error(['MUI: You are providing a disabled `button` child to the Tooltip component.', 'A disabled element does not fire events.', "Tooltip needs to listen to the child element's events to display the title.", '', 'Add a simple wrapper element, such as a `span`.'].join('\n'));
@@ -564,7 +566,8 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
   if (process.env.NODE_ENV !== 'production') {
     childrenProps['data-mui-internal-clone-element'] = true;
 
-    // eslint-disable-next-line react-hooks/rules-of-hooks
+    // 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 -- process.env never changes
     React.useEffect(() => {
       if (childNode && !childNode.getAttribute('data-mui-internal-clone-element')) {
         console.error(['MUI: The `children` component of the Tooltip is not forwarding its props correctly.', 'Please make sure that props are spread on the same element that the ref is applied to.'].join('\n'));

package/node/Unstable_TrapFocus/FocusTrap.js

@@ -21,7 +21,7 @@ function getTabIndex(node) {
   }
 
   // Browsers do not return `tabIndex` correctly for contentEditable nodes;
-  // https://bugs.chromium.org/p/chromium/issues/detail?id=661108&q=contenteditable%20tabindex&can=2
+  // https://issues.chromium.org/issues/41283952
   // so if they don't have a tabindex attribute specifically set, assume it's 0.
   // in Chrome, <details/>, <audio controls/> and <video controls/> elements get a default
   //  `tabIndex` of -1 when the 'tabindex' attribute isn't specified in the DOM,

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v6.1.0
+ * @mui/material v6.1.1-dev.20240919-130050-82a6448768
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/node/styles/createColorScheme.js

@@ -11,7 +11,7 @@ var _createPalette = _interopRequireDefault(require("./createPalette"));
 var _getOverlayAlpha = _interopRequireDefault(require("./getOverlayAlpha"));
 const defaultDarkOverlays = [...Array(25)].map((_, index) => {
   if (index === 0) {
-    return undefined;
+    return 'none';
   }
   const overlay = (0, _getOverlayAlpha.default)(index);
   return `linear-gradient(rgba(255 255 255 / ${overlay}), rgba(255 255 255 / ${overlay}))`;

package/node/styles/excludeVariablesFromRoot.js

@@ -7,5 +7,5 @@ exports.default = void 0;
 /**
  * @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`];
 var _default = exports.default = excludeVariablesFromRoot;

package/node/styles/useTheme.js

@@ -14,6 +14,7 @@ var _identifier = _interopRequireDefault(require("./identifier"));
 function useTheme() {
   const theme = (0, _system.useTheme)(_defaultTheme.default);
   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/node/useAutocomplete/useAutocomplete.js

@@ -42,7 +42,7 @@ 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;
   };
@@ -592,7 +592,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/node/useScrollTrigger/useScrollTrigger.js

@@ -51,6 +51,7 @@ 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/node/version/index.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.version = exports.prerelease = exports.patch = exports.minor = exports.major = exports.default = void 0;
-const version = exports.version = "6.1.0";
+const version = exports.version = "6.1.1-dev.20240919-130050-82a6448768";
 const major = exports.major = Number("6");
 const minor = exports.minor = Number("1");
-const patch = exports.patch = Number("0");
-const prerelease = exports.prerelease = undefined;
+const patch = exports.patch = Number("1");
+const prerelease = exports.prerelease = "dev.20240919";
 var _default = exports.default = version;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "6.1.0",
+  "version": "6.1.1-dev.20240919-130050-82a6448768",
   "private": false,
   "author": "MUI Team",
   "description": "Material UI is an open-source React component library that implements Google's Material Design. It's comprehensive and can be used in production out of the box.",
@@ -14,7 +14,7 @@
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/mui/material-ui.git",
+    "url": "git+https://github.com/mui/material-ui.git",
     "directory": "packages/mui-material"
   },
   "license": "MIT",
@@ -35,10 +35,10 @@
     "prop-types": "^15.8.1",
     "react-is": "^18.3.1",
     "react-transition-group": "^4.4.5",
-    "@mui/core-downloads-tracker": "^6.1.0",
-    "@mui/system": "^6.1.0",
-    "@mui/utils": "^6.1.0",
-    "@mui/types": "^7.2.16"
+    "@mui/core-downloads-tracker": "^6.1.1",
+    "@mui/system": "^6.1.1-dev.20240919-130050-82a6448768",
+    "@mui/types": "^7.2.17",
+    "@mui/utils": "^6.1.1-dev.20240919-130050-82a6448768"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",
@@ -46,7 +46,7 @@
     "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
-    "@mui/material-pigment-css": "^6.1.0"
+    "@mui/material-pigment-css": "^6.1.1-dev.20240919-130050-82a6448768"
   },
   "peerDependenciesMeta": {
     "@types/react": {

package/styles/createColorScheme.d.ts

@@ -5,5 +5,5 @@ export declare function getOpacity(mode: 'light' | 'dark'): {
     switchTrackDisabled: number;
     switchTrack: number;
 };
-export declare function getOverlays(mode: 'light' | 'dark'): (string | undefined)[];
+export declare function getOverlays(mode: 'light' | 'dark'): string[];
 export default function createColorScheme(options: ColorSystemOptions): ColorSystemOptions;

package/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/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/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/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/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/version/index.js

@@ -1,6 +1,6 @@
-export const version = "6.1.0";
+export const version = "6.1.1-dev.20240919-130050-82a6448768";
 export const major = Number("6");
 export const minor = Number("1");
-export const patch = Number("0");
-export const prerelease = undefined;
+export const patch = Number("1");
+export const prerelease = "dev.20240919";
 export default version;