@mui/material 6.1.1 → 6.1.2

package/Autocomplete/Autocomplete.js

@@ -710,11 +710,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
           ref: setAnchorEl,
           className: classes.inputRoot,
           startAdornment,
-          onClick: event => {
-            if (event.target === event.currentTarget) {
-              handleInputMouseDown(event);
-            }
-          },
+          onMouseDown: event => handleInputMouseDown(event),
           ...((hasClearIcon || hasPopupIcon) && {
             endAdornment: /*#__PURE__*/_jsxs(AutocompleteEndAdornment, {
               className: classes.endAdornment,

package/Button/Button.js

@@ -147,7 +147,7 @@ const ButtonRoot = styled(ButtonBase, {
         color: `var(--variant-textColor)`,
         backgroundColor: `var(--variant-textBg)`
       }
-    }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter(['dark', 'contrastText'])).map(([color]) => ({
+    }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color]) => ({
       props: {
         color
       },
@@ -171,9 +171,8 @@ const ButtonRoot = styled(ButtonBase, {
         color: 'inherit'
       },
       style: {
-        '--variant-containedColor': theme.vars ?
-        // this is safe because grey does not change between default light/dark mode
-        theme.vars.palette.text.primary : theme.palette.getContrastText?.(inheritContainedBackgroundColor),
+        color: 'inherit',
+        borderColor: 'currentColor',
         '--variant-containedBg': theme.vars ? theme.vars.palette.Button.inheritContainedBg : inheritContainedBackgroundColor,
         '@media (hover: hover)': {
           '&:hover': {

package/CHANGELOG.md

@@ -1,5 +1,67 @@
 # [Versions](https://mui.com/versions/)
 
+## v6.1.2
+
+<!-- generated comparing v6.1.1..master -->
+
+_Oct 2, 2024_
+
+A big thanks to the 13 contributors who made this release possible.
+
+### `@mui/material@6.1.2`
+
+- [Modal] Remove unnecessary `manager` prop handling (#43867) @ZeeshanTamboli
+- [Autocomplete] Fix listbox opens and closes on click when used with `limitTags` (#42494) @appleSimple
+- [Button] Ignore `dark` and `contrastText` if not provided in the theme (#43861) @siriwatknp
+- [Button] Fix regression for color `inherit` (#43862) @siriwatknp
+- [LinearProgress] Fix background color (#43949) @sai6855
+- Support CSS variables with shadow DOM (#43948) @siriwatknp
+- Improve getReactElementRef() utils (#43022) @sai6855
+- [Modal] Replace `show` parameter name with `hide` in modal manager (#43868) @ZeeshanTamboli
+- [Rating] Use Rating `name` as prefix of input element ids (#43829) @yash49
+- [Drawer] Refactor getScrollbarSize usages (#43828) @BrianWoolfolk
+- [Drawer] Fix issue with main window being used instead of iframe's window (#43818) @albarv340
+- [ThemeProvider] Support setting default mode (#43951) @siriwatknp
+
+### Docs
+
+- Update theme toggle demo (#43956) @Janpot
+- Add note about minimum required webpack version (#43864) @Janpot
+- Format Pigment CSS docs (#43812) @oliviertassinari
+- Fix visual bug on dashboard template (#43836) @oliviertassinari
+- Fix pigment-css.md syntax error (#43837) @kdichev
+- Fix Sign-in template form experience (#43838) @oliviertassinari
+- Remove "To be continued" section from v0 –> v1 migration guide (#43832) @samuelsycamore
+- Fix 301 to chromium (#43809) @oliviertassinari
+- [joy-ui] Add missing ComponentLinkHeader components (#43865) @samuelsycamore
+- [Modal] Remove unnecessary type assertion (#43825) @ZeeshanTamboli
+- [Table] Stabilize random series in virtualized table demo (#43744) @Janpot
+- [system] Add migration guide link to `@mui/styles` pages (#43833) @samuelsycamore
+
+### Core
+
+- [code-infra] Fix flaky dashboard screenshot - take 2 (#43937) @Janpot
+- [code-infra] Replace all instances of `e` with `event` and add eslint rule (#43866) @samuelsycamore
+- [code-infra] Fix and update bundling fixtures (#43709) @Janpot
+- [code-infra] Update transitive dependencies with vulnerabilties (#43895) @Janpot
+- [code-infra] Optimize regression tests (#43889) @Janpot
+- [code-infra] Remove custom playwright installation steps (#43881) @Janpot
+- [code-infra] Fix flaky dashboard screenshot (#43890) @Janpot
+- [code-infra] Add new instanceof proptypes for toolpad (#43814) @Janpot
+- Fix eslint-plugin-react-compiler issues in usePagination tests (#43946) @wilhelmlofsten
+- Uniformity in version range @oliviertassinari
+- Replace `toBeAriaHidden` matcher with `toBeInaccessible` in tests (#43870) @ZeeshanTamboli
+- [docs-infra] Strengthen CSP (#43711) @oliviertassinari
+- [docs-infra] Open Codesandbox demo with fontsize=12 (#43860) @siriwatknp
+- [icons] Reduce Material Icon page size (#43911) @oliviertassinari
+- [test] Point Istanbul to correct URL (#43935) @sai6855
+- [test] Sync React.version parse logic with codebase (#43820) @oliviertassinari
+- [website] Add 'Row spanning' (#43831) @oliviertassinari
+- [website] Improve Next roles section (#43822) @oliviertassinari
+- [website] Open the xCharts, eXplore and X general react engineer roles (#43805) @DanailH
+
+All contributors of this release in alphabetical order: @albarv340, @appleSimple, @BrianWoolfolk, @DanailH, @Janpot, @kdichev, @oliviertassinari, @sai6855, @samuelsycamore, @siriwatknp, @wilhelmlofsten, @yash49, @ZeeshanTamboli
+
 ## v6.1.1
 
 <!-- generated comparing v6.1.0..master -->

package/ClickAwayListener/ClickAwayListener.js

@@ -3,7 +3,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { elementAcceptingRef, exactProp, unstable_ownerDocument as ownerDocument, unstable_useForkRef as useForkRef, unstable_useEventCallback as useEventCallback } from '@mui/utils';
-import getReactNodeRef from '@mui/utils/getReactNodeRef';
+import getReactElementRef from '@mui/utils/getReactElementRef';
 
 // TODO: return `EventHandlerName extends `on${infer EventName}` ? Lowercase<EventName> : never` once generatePropTypes runs with TS 4.1
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -48,7 +48,7 @@ function ClickAwayListener(props) {
       activatedRef.current = false;
     };
   }, []);
-  const handleRef = useForkRef(getReactNodeRef(children), nodeRef);
+  const handleRef = useForkRef(getReactElementRef(children), nodeRef);
 
   // The handler doesn't take event.defaultPrevented into account:
   //

package/Fade/Fade.js

@@ -4,7 +4,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { Transition } from 'react-transition-group';
 import elementAcceptingRef from '@mui/utils/elementAcceptingRef';
-import getReactNodeRef from '@mui/utils/getReactNodeRef';
+import getReactElementRef from '@mui/utils/getReactElementRef';
 import { useTheme } from "../zero-styled/index.js";
 import { reflow, getTransitionProps } from "../transitions/utils.js";
 import useForkRef from "../utils/useForkRef.js";
@@ -48,7 +48,7 @@ const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
   } = props;
   const enableStrictModeCompat = true;
   const nodeRef = React.useRef(null);
-  const handleRef = useForkRef(nodeRef, getReactNodeRef(children), ref);
+  const handleRef = useForkRef(nodeRef, getReactElementRef(children), ref);
   const normalizedTransitionCallback = callback => maybeIsAppearing => {
     if (callback) {
       const node = nodeRef.current;

package/Grow/Grow.js

@@ -4,7 +4,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import useTimeout from '@mui/utils/useTimeout';
 import elementAcceptingRef from '@mui/utils/elementAcceptingRef';
-import getReactNodeRef from '@mui/utils/getReactNodeRef';
+import getReactElementRef from '@mui/utils/getReactElementRef';
 import { Transition } from 'react-transition-group';
 import { useTheme } from "../zero-styled/index.js";
 import { getTransitionProps, reflow } from "../transitions/utils.js";
@@ -58,7 +58,7 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
   const autoTimeout = React.useRef();
   const theme = useTheme();
   const nodeRef = React.useRef(null);
-  const handleRef = useForkRef(nodeRef, getReactNodeRef(children), ref);
+  const handleRef = useForkRef(nodeRef, getReactElementRef(children), ref);
   const normalizedTransitionCallback = callback => maybeIsAppearing => {
     if (callback) {
       const node = nodeRef.current;

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

@@ -293,6 +293,13 @@ const LinearProgressBar2 = styled('span', {
     style: {
       backgroundColor: 'var(--LinearProgressBar2-barColor, currentColor)'
     }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.variant !== 'buffer' && ownerState.color === 'inherit',
+    style: {
+      backgroundColor: 'currentColor'
+    }
   }, {
     props: {
       color: 'inherit'

package/MenuList/MenuList.js

@@ -8,6 +8,7 @@ import List from "../List/index.js";
 import getScrollbarSize from "../utils/getScrollbarSize.js";
 import useForkRef from "../utils/useForkRef.js";
 import useEnhancedEffect from "../utils/useEnhancedEffect.js";
+import { ownerWindow } from "../utils/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function nextItem(list, item, disableListWrap) {
   if (list === item) {
@@ -111,7 +112,7 @@ const MenuList = /*#__PURE__*/React.forwardRef(function MenuList(props, ref) {
       // of the menu.
       const noExplicitWidth = !listRef.current.style.width;
       if (containerElement.clientHeight < listRef.current.clientHeight && noExplicitWidth) {
-        const scrollbarSize = `${getScrollbarSize(ownerDocument(containerElement))}px`;
+        const scrollbarSize = `${getScrollbarSize(ownerWindow(containerElement))}px`;
         listRef.current.style[direction === 'rtl' ? 'paddingLeft' : 'paddingRight'] = scrollbarSize;
         listRef.current.style.width = `calc(100% + ${scrollbarSize})`;
       }

package/Modal/Modal.js

@@ -187,12 +187,12 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     getSlotProps: otherHandlers => {
       return getBackdropProps({
         ...otherHandlers,
-        onClick: e => {
+        onClick: event => {
           if (onBackdropClick) {
-            onBackdropClick(e);
+            onBackdropClick(event);
           }
           if (otherHandlers?.onClick) {
-            otherHandlers.onClick(e);
+            otherHandlers.onClick(event);
           }
         }
       });

package/Modal/ModalManager.d.ts

@@ -1,7 +1,7 @@
 export interface ManagedModalProps {
     disableScrollLock?: boolean;
 }
-export declare function ariaHidden(element: Element, show: boolean): void;
+export declare function ariaHidden(element: Element, hide: boolean): void;
 interface Modal {
     mount: Element;
     modalRef: Element;

package/Modal/ModalManager.js

@@ -7,8 +7,8 @@ function isOverflowing(container) {
   }
   return container.scrollHeight > container.clientHeight;
 }
-export function ariaHidden(element, show) {
-  if (show) {
+export function ariaHidden(element, hide) {
+  if (hide) {
     element.setAttribute('aria-hidden', 'true');
   } else {
     element.removeAttribute('aria-hidden');
@@ -26,13 +26,13 @@ function isAriaHiddenForbiddenOnElement(element) {
   const isInputHidden = element.tagName === 'INPUT' && element.getAttribute('type') === 'hidden';
   return isForbiddenTagName || isInputHidden;
 }
-function ariaHiddenSiblings(container, mountElement, currentElement, elementsToExclude, show) {
+function ariaHiddenSiblings(container, mountElement, currentElement, elementsToExclude, hide) {
   const blacklist = [mountElement, currentElement, ...elementsToExclude];
   [].forEach.call(container.children, element => {
     const isNotExcludedElement = !blacklist.includes(element);
     const isNotForbiddenElement = !isAriaHiddenForbiddenOnElement(element);
     if (isNotExcludedElement && isNotForbiddenElement) {
-      ariaHidden(element, show);
+      ariaHidden(element, hide);
     }
   });
 }
@@ -53,7 +53,7 @@ function handleContainer(containerInfo, props) {
   if (!props.disableScrollLock) {
     if (isOverflowing(container)) {
       // Compute the size before applying overflow hidden to avoid any scroll jumps.
-      const scrollbarSize = getScrollbarSize(ownerDocument(container));
+      const scrollbarSize = getScrollbarSize(ownerWindow(container));
       restoreStyle.push({
         value: container.style.paddingRight,
         property: 'padding-right',

package/Modal/useModal.js

@@ -13,7 +13,7 @@ function getHasTransition(children) {
 
 // A modal manager used to track and manage the state of open Modals.
 // Modals don't open on the server so this won't conflict with concurrent requests.
-const defaultManager = new ModalManager();
+const manager = new ModalManager();
 /**
  *
  * Demos:
@@ -29,8 +29,6 @@ function useModal(parameters) {
     container,
     disableEscapeKeyDown = false,
     disableScrollLock = false,
-    // @ts-ignore internal logic - Base UI supports the manager as a prop too
-    manager = defaultManager,
     closeAfterTransition = false,
     onTransitionEnter,
     onTransitionExited,
@@ -76,7 +74,7 @@ function useModal(parameters) {
       handleMounted();
     }
   });
-  const isTopModal = React.useCallback(() => manager.isTopModal(getModal()), [manager]);
+  const isTopModal = () => manager.isTopModal(getModal());
   const handlePortalRef = useEventCallback(node => {
     mountNodeRef.current = node;
     if (!node) {
@@ -90,7 +88,7 @@ function useModal(parameters) {
   });
   const handleClose = React.useCallback(() => {
     manager.remove(getModal(), ariaHiddenProp);
-  }, [ariaHiddenProp, manager]);
+  }, [ariaHiddenProp]);
   React.useEffect(() => {
     return () => {
       handleClose();

package/Portal/Portal.js

@@ -3,7 +3,7 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
-import { exactProp, HTMLElementType, unstable_useEnhancedEffect as useEnhancedEffect, unstable_useForkRef as useForkRef, unstable_setRef as setRef, unstable_getReactNodeRef as getReactNodeRef } from '@mui/utils';
+import { exactProp, HTMLElementType, unstable_useEnhancedEffect as useEnhancedEffect, unstable_useForkRef as useForkRef, unstable_setRef as setRef, unstable_getReactElementRef as getReactElementRef } from '@mui/utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 function getContainer(container) {
   return typeof container === 'function' ? container() : container;
@@ -28,7 +28,7 @@ const Portal = /*#__PURE__*/React.forwardRef(function Portal(props, forwardedRef
     disablePortal = false
   } = props;
   const [mountNode, setMountNode] = React.useState(null);
-  const handleRef = useForkRef(getReactNodeRef(children), forwardedRef);
+  const handleRef = useForkRef(/*#__PURE__*/React.isValidElement(children) ? getReactElementRef(children) : null, forwardedRef);
   useEnhancedEffect(() => {
     if (!disablePortal) {
       setMountNode(getContainer(container) || document.body);

package/Rating/Rating.d.ts

@@ -74,7 +74,7 @@ export interface RatingProps
   /**
    * The name attribute of the radio `input` elements.
    * This input `name` should be unique within the page.
-   * Being unique within a form is insufficient since the `name` is used to generated IDs.
+   * Being unique within a form is insufficient since the `name` is used to generate IDs.
    */
   name?: string;
   /**

package/Rating/Rating.js

@@ -226,7 +226,12 @@ function RatingItem(props) {
   const isHovered = itemValue <= hover;
   const isFocused = itemValue <= focus;
   const isChecked = itemValue === ratingValueRounded;
-  const id = useId();
+
+  // "name" ensures unique IDs across different Rating components in React 17,
+  // preventing one component from affecting another. React 18's useId already handles this.
+  // Update to const id = useId(); when React 17 support is dropped.
+  // More details: https://github.com/mui/material-ui/issues/40997
+  const id = `${name}-${useId()}`;
   const container = /*#__PURE__*/_jsx(RatingIcon, {
     as: IconContainerComponent,
     value: itemValue,
@@ -619,7 +624,7 @@ process.env.NODE_ENV !== "production" ? Rating.propTypes /* remove-proptypes */
   /**
    * The name attribute of the radio `input` elements.
    * This input `name` should be unique within the page.
-   * Being unique within a form is insufficient since the `name` is used to generated IDs.
+   * Being unique within a form is insufficient since the `name` is used to generate IDs.
    */
   name: PropTypes.string,
   /**

package/Select/Select.js

@@ -4,7 +4,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import deepmerge from '@mui/utils/deepmerge';
-import getReactNodeRef from '@mui/utils/getReactNodeRef';
+import getReactElementRef from '@mui/utils/getReactElementRef';
 import SelectInput from "./SelectInput.js";
 import formControlState from "../FormControl/formControlState.js";
 import useFormControl from "../FormControl/useFormControl.js";
@@ -92,7 +92,7 @@ const Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
       ownerState: ownerState
     })
   }[variant];
-  const inputComponentRef = useForkRef(ref, getReactNodeRef(InputComponent));
+  const inputComponentRef = useForkRef(ref, getReactElementRef(InputComponent));
   return /*#__PURE__*/_jsx(React.Fragment, {
     children: /*#__PURE__*/React.cloneElement(InputComponent, {
       // Most of the logic is implemented in `SelectInput`.

package/Slide/Slide.js

@@ -6,7 +6,7 @@ import { Transition } from 'react-transition-group';
 import chainPropTypes from '@mui/utils/chainPropTypes';
 import HTMLElementType from '@mui/utils/HTMLElementType';
 import elementAcceptingRef from '@mui/utils/elementAcceptingRef';
-import getReactNodeRef from '@mui/utils/getReactNodeRef';
+import getReactElementRef from '@mui/utils/getReactElementRef';
 import debounce from "../utils/debounce.js";
 import useForkRef from "../utils/useForkRef.js";
 import { useTheme } from "../zero-styled/index.js";
@@ -106,7 +106,7 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
     ...other
   } = props;
   const childrenRef = React.useRef(null);
-  const handleRef = useForkRef(getReactNodeRef(children), childrenRef, ref);
+  const handleRef = useForkRef(getReactElementRef(children), childrenRef, ref);
   const normalizedTransitionCallback = callback => isAppearing => {
     if (callback) {
       // onEnterXxx and onExitXxx callbacks have a different arguments.length value.

package/SwipeableDrawer/SwipeableDrawer.d.ts

@@ -16,7 +16,7 @@ export interface SwipeableDrawerProps extends Omit<DrawerProps, 'onClose' | 'ope
    */
   allowSwipeInChildren?:
     | boolean
-    | ((e: TouchEvent, swipeArea: HTMLDivElement, paper: HTMLDivElement) => boolean);
+    | ((event: TouchEvent, swipeArea: HTMLDivElement, paper: HTMLDivElement) => boolean);
   /**
    * Disable the backdrop transition.
    * This can improve the FPS on low-end devices.

package/Tooltip/Tooltip.js

@@ -10,7 +10,7 @@ import { alpha } from '@mui/system/colorManipulator';
 import { useRtl } from '@mui/system/RtlProvider';
 import isFocusVisible from '@mui/utils/isFocusVisible';
 import appendOwnerState from '@mui/utils/appendOwnerState';
-import getReactNodeRef from '@mui/utils/getReactNodeRef';
+import getReactElementRef from '@mui/utils/getReactElementRef';
 import { styled, useTheme } from "../zero-styled/index.js";
 import memoTheme from "../utils/memoTheme.js";
 import { useDefaultProps } from "../DefaultPropsProvider/index.js";
@@ -514,7 +514,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
       document.removeEventListener('keydown', handleKeyDown);
     };
   }, [handleClose, open]);
-  const handleRef = useForkRef(getReactNodeRef(children), setChildNode, ref);
+  const handleRef = useForkRef(getReactElementRef(children), setChildNode, ref);
 
   // There is no point in displaying an empty tooltip.
   // So we exclude all falsy values, except 0, which is valid.

package/Unstable_TrapFocus/FocusTrap.js

@@ -3,7 +3,7 @@
 /* eslint-disable consistent-return, jsx-a11y/no-noninteractive-tabindex */
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { exactProp, elementAcceptingRef, unstable_useForkRef as useForkRef, unstable_ownerDocument as ownerDocument, unstable_getReactNodeRef as getReactNodeRef } from '@mui/utils';
+import { exactProp, elementAcceptingRef, unstable_useForkRef as useForkRef, unstable_ownerDocument as ownerDocument, unstable_getReactElementRef as getReactElementRef } from '@mui/utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Inspired by https://github.com/focus-trap/tabbable
 const candidatesSelector = ['input', 'select', 'textarea', 'a[href]', 'button', '[tabindex]', 'audio[controls]', 'video[controls]', '[contenteditable]:not([contenteditable="false"])'].join(',');
@@ -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,
@@ -92,7 +92,7 @@ function FocusTrap(props) {
   // It waits for the active element to move into the component to activate.
   const activated = React.useRef(false);
   const rootRef = React.useRef(null);
-  const handleRef = useForkRef(getReactNodeRef(children), rootRef);
+  const handleRef = useForkRef(getReactElementRef(children), rootRef);
   const lastKeydown = React.useRef(null);
   React.useEffect(() => {
     // We might render an empty child.

package/Zoom/Zoom.js

@@ -4,7 +4,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { Transition } from 'react-transition-group';
 import elementAcceptingRef from '@mui/utils/elementAcceptingRef';
-import getReactNodeRef from '@mui/utils/getReactNodeRef';
+import getReactElementRef from '@mui/utils/getReactElementRef';
 import { useTheme } from "../zero-styled/index.js";
 import { reflow, getTransitionProps } from "../transitions/utils.js";
 import useForkRef from "../utils/useForkRef.js";
@@ -48,7 +48,7 @@ const Zoom = /*#__PURE__*/React.forwardRef(function Zoom(props, ref) {
     ...other
   } = props;
   const nodeRef = React.useRef(null);
-  const handleRef = useForkRef(nodeRef, getReactNodeRef(children), ref);
+  const handleRef = useForkRef(nodeRef, getReactElementRef(children), ref);
   const normalizedTransitionCallback = callback => maybeIsAppearing => {
     if (callback) {
       const node = nodeRef.current;

package/index.js

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

package/modern/Autocomplete/Autocomplete.js

@@ -710,11 +710,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
           ref: setAnchorEl,
           className: classes.inputRoot,
           startAdornment,
-          onClick: event => {
-            if (event.target === event.currentTarget) {
-              handleInputMouseDown(event);
-            }
-          },
+          onMouseDown: event => handleInputMouseDown(event),
           ...((hasClearIcon || hasPopupIcon) && {
             endAdornment: /*#__PURE__*/_jsxs(AutocompleteEndAdornment, {
               className: classes.endAdornment,

package/modern/Button/Button.js

@@ -147,7 +147,7 @@ const ButtonRoot = styled(ButtonBase, {
         color: `var(--variant-textColor)`,
         backgroundColor: `var(--variant-textBg)`
       }
-    }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter(['dark', 'contrastText'])).map(([color]) => ({
+    }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color]) => ({
       props: {
         color
       },
@@ -171,9 +171,8 @@ const ButtonRoot = styled(ButtonBase, {
         color: 'inherit'
       },
       style: {
-        '--variant-containedColor': theme.vars ?
-        // this is safe because grey does not change between default light/dark mode
-        theme.vars.palette.text.primary : theme.palette.getContrastText?.(inheritContainedBackgroundColor),
+        color: 'inherit',
+        borderColor: 'currentColor',
         '--variant-containedBg': theme.vars ? theme.vars.palette.Button.inheritContainedBg : inheritContainedBackgroundColor,
         '@media (hover: hover)': {
           '&:hover': {

package/modern/ClickAwayListener/ClickAwayListener.js

@@ -3,7 +3,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { elementAcceptingRef, exactProp, unstable_ownerDocument as ownerDocument, unstable_useForkRef as useForkRef, unstable_useEventCallback as useEventCallback } from '@mui/utils';
-import getReactNodeRef from '@mui/utils/getReactNodeRef';
+import getReactElementRef from '@mui/utils/getReactElementRef';
 
 // TODO: return `EventHandlerName extends `on${infer EventName}` ? Lowercase<EventName> : never` once generatePropTypes runs with TS 4.1
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -48,7 +48,7 @@ function ClickAwayListener(props) {
       activatedRef.current = false;
     };
   }, []);
-  const handleRef = useForkRef(getReactNodeRef(children), nodeRef);
+  const handleRef = useForkRef(getReactElementRef(children), nodeRef);
 
   // The handler doesn't take event.defaultPrevented into account:
   //

package/modern/Fade/Fade.js

@@ -4,7 +4,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { Transition } from 'react-transition-group';
 import elementAcceptingRef from '@mui/utils/elementAcceptingRef';
-import getReactNodeRef from '@mui/utils/getReactNodeRef';
+import getReactElementRef from '@mui/utils/getReactElementRef';
 import { useTheme } from "../zero-styled/index.js";
 import { reflow, getTransitionProps } from "../transitions/utils.js";
 import useForkRef from "../utils/useForkRef.js";
@@ -48,7 +48,7 @@ const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
   } = props;
   const enableStrictModeCompat = true;
   const nodeRef = React.useRef(null);
-  const handleRef = useForkRef(nodeRef, getReactNodeRef(children), ref);
+  const handleRef = useForkRef(nodeRef, getReactElementRef(children), ref);
   const normalizedTransitionCallback = callback => maybeIsAppearing => {
     if (callback) {
       const node = nodeRef.current;

package/modern/Grow/Grow.js

@@ -4,7 +4,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import useTimeout from '@mui/utils/useTimeout';
 import elementAcceptingRef from '@mui/utils/elementAcceptingRef';
-import getReactNodeRef from '@mui/utils/getReactNodeRef';
+import getReactElementRef from '@mui/utils/getReactElementRef';
 import { Transition } from 'react-transition-group';
 import { useTheme } from "../zero-styled/index.js";
 import { getTransitionProps, reflow } from "../transitions/utils.js";
@@ -58,7 +58,7 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
   const autoTimeout = React.useRef();
   const theme = useTheme();
   const nodeRef = React.useRef(null);
-  const handleRef = useForkRef(nodeRef, getReactNodeRef(children), ref);
+  const handleRef = useForkRef(nodeRef, getReactElementRef(children), ref);
   const normalizedTransitionCallback = callback => maybeIsAppearing => {
     if (callback) {
       const node = nodeRef.current;

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

@@ -293,6 +293,13 @@ const LinearProgressBar2 = styled('span', {
     style: {
       backgroundColor: 'var(--LinearProgressBar2-barColor, currentColor)'
     }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.variant !== 'buffer' && ownerState.color === 'inherit',
+    style: {
+      backgroundColor: 'currentColor'
+    }
   }, {
     props: {
       color: 'inherit'

package/modern/MenuList/MenuList.js

@@ -8,6 +8,7 @@ import List from "../List/index.js";
 import getScrollbarSize from "../utils/getScrollbarSize.js";
 import useForkRef from "../utils/useForkRef.js";
 import useEnhancedEffect from "../utils/useEnhancedEffect.js";
+import { ownerWindow } from "../utils/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function nextItem(list, item, disableListWrap) {
   if (list === item) {
@@ -111,7 +112,7 @@ const MenuList = /*#__PURE__*/React.forwardRef(function MenuList(props, ref) {
       // of the menu.
       const noExplicitWidth = !listRef.current.style.width;
       if (containerElement.clientHeight < listRef.current.clientHeight && noExplicitWidth) {
-        const scrollbarSize = `${getScrollbarSize(ownerDocument(containerElement))}px`;
+        const scrollbarSize = `${getScrollbarSize(ownerWindow(containerElement))}px`;
         listRef.current.style[direction === 'rtl' ? 'paddingLeft' : 'paddingRight'] = scrollbarSize;
         listRef.current.style.width = `calc(100% + ${scrollbarSize})`;
       }

package/modern/Modal/Modal.js

@@ -187,12 +187,12 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     getSlotProps: otherHandlers => {
       return getBackdropProps({
         ...otherHandlers,
-        onClick: e => {
+        onClick: event => {
           if (onBackdropClick) {
-            onBackdropClick(e);
+            onBackdropClick(event);
           }
           if (otherHandlers?.onClick) {
-            otherHandlers.onClick(e);
+            otherHandlers.onClick(event);
           }
         }
       });