@mui/material 6.1.0 → 6.1.1

package/Backdrop/Backdrop.js

@@ -10,6 +10,13 @@ import useSlot from "../utils/useSlot.js";
 import Fade from "../Fade/index.js";
 import { getBackdropUtilityClass } from "./backdropClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+const removeOwnerState = props => {
+  const {
+    ownerState,
+    ...rest
+  } = props;
+  return rest;
+};
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -98,12 +105,12 @@ const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
     externalForwardedProps,
     ownerState
   });
-  delete transitionProps.ownerState;
+  const transitionPropsRemoved = removeOwnerState(transitionProps);
   return /*#__PURE__*/_jsx(TransitionSlot, {
     in: open,
     timeout: transitionDuration,
     ...other,
-    ...transitionProps,
+    ...transitionPropsRemoved,
     children: /*#__PURE__*/_jsx(RootSlot, {
       "aria-hidden": true,
       ...rootProps,

package/CHANGELOG.md

@@ -1,5 +1,68 @@
 # [Versions](https://mui.com/versions/)
 
+## v6.1.1
+
+<!-- generated comparing v6.1.0..master -->
+
+_Sep 19, 2024_
+
+A big thanks to the 18 contributors who made this release possible.
+
+### `@mui/material@6.1.1`
+
+- [Grid] Bring back `GridProps` and `GridTypeMap` (#43717) @DiegoAndai
+- [Paper] Fix wrong background-image on Paper when elevation is 0 (#43723) @ZeeshanTamboli
+- [Skeleton] Fix wave animation for styled-components (#43740) @siriwatknp
+- [Modal] Fix event handlers overriding behavior (#43757) @sai6855
+
+### `@mui/system@6.1.1`
+
+- Pass the stylesheet directly to `GlobalStyles` (#43739) @siriwatknp
+
+### `@mui/utils@6.1.1`
+
+- Fix "useId" & "useSyncExternalStore" imports to not be statically analyzable (#43360) @yash49
+
+### Docs
+
+- [material-ui][Breadcrumbs] Document CondensedWithMenu option for Breadcrumbs (#42973) @Sergio16T
+- [material-ui][CircularProgress] Add Circular size demo (#43734) @sai6855
+- [material-ui][slider] Fix slider in color customization playground twitches when sliding (#43671) @Nashyn
+- [material-ui][slider] Polish Music player demo (#43748) @oliviertassinari
+- [material-ui] Document Typography color prop breaking change (#43735) @aarongarciah
+- [material-ui] Add docs for complementary Table components (#43756) @Juneezee
+- [material-ui] Improve minimizing bundle docs (#43781) @ZeeshanTamboli
+- [pigment-css] Call out Pigment being in alpha (#43725) @aarongarciah
+- [pigment-css] Fix typo globalCSS -> globalCss (#43754) @hiro0218
+- [test] Improve demos for better regression screenshots (#43742) @aarongarciah
+- Fix minor typo (#42899) @xconverge
+- Revert icon search virtualization (#43569) @Janpot
+- Fix MUI Treasury Layout broken links (#43752) @oliviertassinari
+- Fix 301 link to design asset @oliviertassinari
+- Update release schedule table after v6 stable (#43726) @sahil-ag
+- Fix bundle size link regression @oliviertassinari
+
+### Core
+
+- [code-infra] Allow overriding all `options` of `useFakeTimers` function (#43729) @LukasTy
+- [core] Fix 301 link to Next.js and git diff @oliviertassinari
+- [core] Fix package.json repository rule @oliviertassinari
+- [core] Remove redundant window @oliviertassinari
+- [core] Fix some issues reported by eslint-plugin-react-compiler (#43117) @binsmyth
+- [core] Replace more `indexOf` with `includes` (#43694) @Juneezee
+- [core] Remove /.yarn (#43712) @oliviertassinari
+- [docs-infra] Enable synthetic default imports in TypeScript config (#43747) @morozow
+- [docs-infra] Fix Vale config for TypeScript references (#43751) @oliviertassinari
+- [docs-infra] Fix toolbar arrow order (#43627) @oliviertassinari
+- [docs-infra] Fix missing dependencies in multi-tab demos (#43713) @cherniavskii
+- [docs-infra] Fix API search link regression (#43662) @oliviertassinari
+- [test] Update font-awesome CSS file in regression tests fixture (#43745) @Janpot
+- [test] Remove position:relative from regression container (#43743) @aarongarciah
+- [test] Remove top-level inline-block from the regression tests (#43656) @Janpot
+- [website] Match pricing page with linked page h1 @oliviertassinari
+
+All contributors of this release in alphabetical order: @aarongarciah, @binsmyth, @cherniavskii, @DiegoAndai, @Janpot, @Juneezee, @LukasTy, @mnajdova, @morozow, @Nashyn, @oliviertassinari, @sahil-ag, @sai6855, @Sergio16T, @siriwatknp, @xconverge, @yash49, @ZeeshanTamboli
+
 ## v6.1.0
 
 <!-- generated comparing v6.0.2..master -->

package/ClickAwayListener/ClickAwayListener.js

@@ -79,7 +79,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/FormControl/FormControl.js

@@ -170,9 +170,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/Grid/Grid.d.ts

@@ -149,6 +149,9 @@ export interface GridOwnProps extends SystemProps<Theme>, Breakpoints {
   zeroMinWidth?: boolean;
 }
 
+/**
+ * @deprecated Use the [`Grid2`](https://mui.com/material-ui/react-grid2/) component instead.
+ */
 export interface GridTypeMap<
   AdditionalProps = {},
   RootComponent extends React.ElementType = 'div',
@@ -171,6 +174,9 @@ export interface GridTypeMap<
  */
 declare const Grid: OverridableComponent<GridTypeMap>;
 
+/**
+ * @deprecated Use the [`Grid2`](https://mui.com/material-ui/react-grid2/) component instead.
+ */
 export type GridProps<
   RootComponent extends React.ElementType = GridTypeMap['defaultComponent'],
   AdditionalProps = {},

package/Hidden/withWidth.js

@@ -53,6 +53,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 = useMediaQuery(theme.breakpoints.up(key));
       return !output && matches ? key : output;

package/InputBase/InputBase.js

@@ -298,6 +298,7 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
   const [focused, setFocused] = React.useState(false);
   const muiFormControl = useFormControl();
   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) {
@@ -391,6 +392,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/Modal/Modal.js

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

package/Modal/ModalManager.js

@@ -22,14 +22,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);
@@ -165,7 +165,7 @@ export 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);
@@ -176,7 +176,7 @@ export 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/Popover/Popover.js

@@ -241,7 +241,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/Select/SelectInput.js

@@ -180,6 +180,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.
@@ -383,6 +384,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/Skeleton/Skeleton.js

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

package/Slider/useSlider.js

@@ -337,12 +337,12 @@ export 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/SwipeableDrawer/SwipeableDrawer.js

@@ -203,6 +203,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/ToggleButtonGroup/isValueSelected.js

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

package/Tooltip/Tooltip.js

@@ -369,12 +369,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'));
@@ -556,7 +558,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/index.d.ts

@@ -204,6 +204,7 @@ export { default as FormLabel } from './FormLabel';
 export * from './FormLabel';
 
 export { default as Grid } from './Grid';
+export { GridProps, GridTypeMap } from './Grid';
 
 export { default as Grid2 } from './Grid2';
 export * from './Grid2';

package/index.js

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

package/modern/Backdrop/Backdrop.js

@@ -10,6 +10,13 @@ import useSlot from "../utils/useSlot.js";
 import Fade from "../Fade/index.js";
 import { getBackdropUtilityClass } from "./backdropClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+const removeOwnerState = props => {
+  const {
+    ownerState,
+    ...rest
+  } = props;
+  return rest;
+};
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -98,12 +105,12 @@ const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
     externalForwardedProps,
     ownerState
   });
-  delete transitionProps.ownerState;
+  const transitionPropsRemoved = removeOwnerState(transitionProps);
   return /*#__PURE__*/_jsx(TransitionSlot, {
     in: open,
     timeout: transitionDuration,
     ...other,
-    ...transitionProps,
+    ...transitionPropsRemoved,
     children: /*#__PURE__*/_jsx(RootSlot, {
       "aria-hidden": true,
       ...rootProps,

package/modern/ClickAwayListener/ClickAwayListener.js

@@ -79,7 +79,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/modern/FormControl/FormControl.js

@@ -170,9 +170,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/modern/Hidden/withWidth.js

@@ -53,6 +53,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 = useMediaQuery(theme.breakpoints.up(key));
       return !output && matches ? key : output;

package/modern/InputBase/InputBase.js

@@ -298,6 +298,7 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
   const [focused, setFocused] = React.useState(false);
   const muiFormControl = useFormControl();
   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) {
@@ -391,6 +392,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/modern/Modal/Modal.js

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

package/modern/Modal/ModalManager.js

@@ -22,14 +22,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);
@@ -165,7 +165,7 @@ export 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);
@@ -176,7 +176,7 @@ export 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/modern/Popover/Popover.js

@@ -241,7 +241,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/modern/Select/SelectInput.js

@@ -180,6 +180,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.
@@ -383,6 +384,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/modern/Skeleton/Skeleton.js

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

package/modern/Slider/useSlider.js

@@ -337,12 +337,12 @@ export 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/modern/SwipeableDrawer/SwipeableDrawer.js

@@ -203,6 +203,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/modern/ToggleButtonGroup/isValueSelected.js

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

package/modern/Tooltip/Tooltip.js

@@ -369,12 +369,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'));
@@ -556,7 +558,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/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v6.1.0
+ * @mui/material v6.1.1
  *
  * @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";
 export const major = Number("6");
 export const minor = Number("1");
-export const patch = Number("0");
+export const patch = Number("1");
 export const prerelease = undefined;
 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/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/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v6.1.0
+ * @mui/material v6.1.1
  *
  * @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";
 const major = exports.major = Number("6");
 const minor = exports.minor = Number("1");
-const patch = exports.patch = Number("0");
+const patch = exports.patch = Number("1");
 const prerelease = exports.prerelease = undefined;
 var _default = exports.default = version;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "6.1.0",
+  "version": "6.1.1",
   "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/utils": "^6.1.1",
+    "@mui/system": "^6.1.1",
+    "@mui/types": "^7.2.17"
   },
   "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"
   },
   "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";
 export const major = Number("6");
 export const minor = Number("1");
-export const patch = Number("0");
+export const patch = Number("1");
 export const prerelease = undefined;
 export default version;