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

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/Icon/Icon.js

@@ -37,7 +37,7 @@ const IconRoot = 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/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/Unstable_TrapFocus/FocusTrap.js

@@ -14,7 +14,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/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-dev.20240919-130050-82a6448768
  *
  * @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/Icon/Icon.js

@@ -37,7 +37,7 @@ const IconRoot = 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/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/Unstable_TrapFocus/FocusTrap.js

@@ -14,7 +14,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,