@mui/material 6.1.1 → 6.1.3

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/Badge/Badge.d.ts

@@ -29,8 +29,8 @@ export type BadgeOwnerState = Simplify<
 >;
 
 export interface BadgeOrigin {
-  vertical: 'top' | 'bottom';
-  horizontal: 'left' | 'right';
+  vertical?: 'top' | 'bottom';
+  horizontal?: 'left' | 'right';
 }
 
 export interface BadgeOwnProps {

package/Badge/Badge.js

@@ -210,16 +210,19 @@ const BadgeBadge = styled('span', {
     }
   }]
 })));
+function getAnchorOrigin(anchorOrigin) {
+  return {
+    vertical: anchorOrigin?.vertical ?? 'top',
+    horizontal: anchorOrigin?.horizontal ?? 'right'
+  };
+}
 const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
   const props = useDefaultProps({
     props: inProps,
     name: 'MuiBadge'
   });
   const {
-    anchorOrigin: anchorOriginProp = {
-      vertical: 'top',
-      horizontal: 'right'
-    },
+    anchorOrigin: anchorOriginProp,
     className,
     classes: classesProp,
     component,
@@ -249,7 +252,7 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
     showZero
   });
   const prevProps = usePreviousProps({
-    anchorOrigin: anchorOriginProp,
+    anchorOrigin: getAnchorOrigin(anchorOriginProp),
     color: colorProp,
     overlap: overlapProp,
     variant: variantProp,
@@ -259,9 +262,10 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
   const {
     color = colorProp,
     overlap = overlapProp,
-    anchorOrigin = anchorOriginProp,
+    anchorOrigin: anchorOriginPropProp,
     variant = variantProp
   } = invisible ? prevProps : props;
+  const anchorOrigin = getAnchorOrigin(anchorOriginPropProp);
   const displayValue = variant !== 'dot' ? displayValueFromHook : undefined;
   const ownerState = {
     ...props,
@@ -320,8 +324,8 @@ process.env.NODE_ENV !== "production" ? Badge.propTypes /* remove-proptypes */ =
    * }
    */
   anchorOrigin: PropTypes.shape({
-    horizontal: PropTypes.oneOf(['left', 'right']).isRequired,
-    vertical: PropTypes.oneOf(['bottom', 'top']).isRequired
+    horizontal: PropTypes.oneOf(['left', 'right']),
+    vertical: PropTypes.oneOf(['bottom', 'top'])
   }),
   /**
    * The content rendered within the badge.

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,141 @@
 # [Versions](https://mui.com/versions/)
 
+## v6.1.3
+
+<!-- generated comparing v6.1.2..master -->
+
+_Oct 9, 2024_
+
+A big thanks to the 18 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 Improved performance on styled components by pre-serializing and caching the styles (#43412) @romgrk
+
+### `@mui/material@6.1.3`
+
+- &#8203;<!-- 18 -->Change React.ReactElement<any> to React.ReactElement<unknown> (#43402) @sai6855
+- &#8203;<!-- 42 -->[Badge] Make keys in anchor origin partial (#43950) @sai6855
+- &#8203;<!-- 22 -->[Grid2] Fix column spacing for nested containers (#43733) @Janpot
+- &#8203;<!-- 21 -->[Grid2] Remove required `item` prop for `size` prop (#44027) @Janpot
+- &#8203;<!-- 20 -->[Grid2] Add compatible props warning (#43801) @k-rajat19
+- &#8203;<!-- 17 -->[Modal] Fix comment location (#44026) @oliviertassinari
+- &#8203;<!-- 16 -->[OutlinedInput] Resolve border color issue on mobile (#43797) (#43879) @wojtek35
+
+### `@mui/system@6.1.3`
+
+- &#8203;<!-- 15 -->Make createGrid compatible with React 19 types (#44035) @aarongarciah
+- &#8203;<!-- 14 -->Add empty interfaces to fix issue with typescript module augmentation (#43873) @yonatan0
+- &#8203;<!-- 13 -->Pre-serialize & cache styles to improve performance (#43412) @romgrk
+- &#8203;<!-- 09 -->[typescript] `SystemCSSProperties` should not have `SystemStyleObject` as value (#44029) @siriwatknp
+
+### `@mui/utils@6.0.0-beta.11`
+
+- &#8203;<!-- 08 -->[utils] Make getReactElementRef React 19 compatible (#44034) @aarongarciah
+
+### `@mui/lab@6.1.3`
+
+- &#8203;<!-- 20 -->[lab][Timeline] Fix types for React 19 (#44043) @aarongarciah
+
+### Docs
+
+- &#8203;<!-- 35 -->Update docs-infra role (#44032) @mnajdova
+- &#8203;<!-- 34 -->Update Material Symbols plan to reflect Google development (#44000) @oliviertassinari
+- &#8203;<!-- 33 -->Fix 301 redirections in docs @oliviertassinari
+- &#8203;<!-- 32 -->Fix indentation @oliviertassinari
+- &#8203;<!-- 31 -->Fix Live edit copies (#43835) @oliviertassinari
+- &#8203;<!-- 30 -->Virtualize icons svg (#43939) @Janpot
+- &#8203;<!-- 28 -->[Grid] Fix Grid2 gap description (#43967) @aarongarciah
+- &#8203;<!-- 27 -->[icons] Index search synchronously (#44001) @oliviertassinari
+- &#8203;<!-- 26 -->[material-ui] Incorrect React useState Example on Toggle Button (#43987) @barrownicholas
+- &#8203;<!-- 25 -->[material-ui] Add theme setting for pigment-css migration (#43993) @effektsvk
+- &#8203;<!-- 24 -->[material-ui] Fix incorrect `slotProp` name in the `TextField` deprecation note. (#43985) @Chee7ah
+- &#8203;<!-- 23 -->[examples] Use CSS Variables (#43856) @Juneezee
+- &#8203;<!-- 29 -->[material-ui] Improved documentation for indeterminateIcon prop (#43791) @marctaylor01
+
+### Core
+
+- &#8203;<!-- 37 -->Fix typo in useLocalStorageState (#44024) @hieunguyenduc696
+- &#8203;<!-- 36 -->Amend changelog (#43968) @aarongarciah
+- &#8203;<!-- 41 -->Remove `@mui/styled-engine-sc` dev dependency from `@mui/styled-engine-sc` (#44050) @Janpot
+- &#8203;<!-- 43 -->[docs-infra] Add pointer cursor on hover for logo to improve UX (#43999) @Asin-Junior-Honore
+- &#8203;<!-- 41 -->[blog] Migrate some .gif to <video> (#43945) @oliviertassinari
+- &#8203;<!-- 40 -->[code-infra] Align `next` dependency specifier across project (#44036) @Janpot
+- &#8203;<!-- 39 -->[code-infra] Move MuiError babel macro to babel plugin (#43904) @Janpot
+- &#8203;<!-- 38 -->[code-infra] Forbid calling `Error` without `new` (#43963) @Janpot
+- &#8203;<!-- 29 -->[docs-infra] Fix link in header regression (#43834) @oliviertassinari
+- &#8203;<!-- 19 -->[infra] Fix line break in Stack Overflow message @oliviertassinari
+- &#8203;<!-- 12 -->[test] Add missing async (#44028) @oliviertassinari
+- &#8203;<!-- 11 -->[test] Fix Escape event firing event (#43961) @oliviertassinari
+- &#8203;<!-- 10 -->[test] Fix flaky pigment-css screenshot (#43959) @Janpot
+- &#8203;<!-- 07 -->[website] Add missing \_redirects HTTP status @oliviertassinari
+- &#8203;<!-- 06 -->[website] Fix sponsor image height @oliviertassinari
+- &#8203;<!-- 05 -->[website] Remove srcset, does nothing in README @oliviertassinari
+- &#8203;<!-- 04 -->[website] Polish display of sponsors @oliviertassinari
+- &#8203;<!-- 03 -->[website] Standardize utm tags @oliviertassinari
+- &#8203;<!-- 02 -->[website] Improve utm_source strategy @oliviertassinari
+- &#8203;<!-- 01 -->[website] Clarify min-level docs-infra @oliviertassinari
+- &#8203;<!-- 08 -->[website] Update backlink sponsors (#43995) @rluzists1
+
+All contributors of this release in alphabetical order: @aarongarciah, @Asin-Junior-Honore, @barrownicholas, @Chee7ah, @effektsvk, @hieunguyenduc696, @Janpot, @Juneezee, @k-rajat19, @mnajdova, @oliviertassinari, @romgrk, @sai6855, @siriwatknp, @wojtek35, @yonatan0
+
+## 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`
+
+- [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
+- [Rating] Use Rating `name` as prefix of input element ids (#43829) @yash49
+- [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
+- Improve getReactElementRef() utils (#43022) @sai6855
+- [Drawer] Refactor getScrollbarSize usages (#43828) @BrianWoolfolk
+- [Modal] Replace `show` parameter name with `hide` in modal manager (#43868) @ZeeshanTamboli
+- [Modal] Remove unnecessary `manager` prop handling (#43867) @ZeeshanTamboli
+
+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/Grid2/Grid2.d.ts

@@ -43,24 +43,29 @@ export interface GridBaseProps {
     offset?: ResponsiveStyleValue<GridOffset>;
     /**
      * @internal
-     * The level of the grid starts from `0`
-     * and increases when the grid nests inside another grid regardless of container or item.
+     * The level of the grid starts from `0` and increases when the grid nests
+     * inside another grid. Nesting is defined as a container Grid being a direct
+     * child of a container Grid.
      *
      * ```js
-     * <Grid> // level 0
-     *   <Grid> // level 1
-     *     <Grid> // level 2
-     *   <Grid> // level 1
+     * <Grid container> // level 0
+     *   <Grid container> // level 1
+     *     <Grid container> // level 2
      * ```
      *
-     * Only consecutive grid is considered nesting.
-     * A grid container will start at `0` if there are non-Grid element above it.
+     * Only consecutive grid is considered nesting. A grid container will start at
+     * `0` if there are non-Grid container element above it.
      *
      * ```js
-     * <Grid> // level 0
+     * <Grid container> // level 0
      *   <div>
-     *     <Grid> // level 0
-     *       <Grid> // level 1
+     *     <Grid container> // level 0
+     * ```
+     *
+     * ```js
+     * <Grid container> // level 0
+     *   <Grid>
+     *     <Grid container> // level 0
      * ```
      */
     unstable_level?: number;

package/Grid2/Grid2.js

@@ -2,6 +2,7 @@
 
 import PropTypes from 'prop-types';
 import { createGrid as createGrid2 } from '@mui/system/Grid';
+import requirePropFactory from "../utils/requirePropFactory.js";
 import { styled, useThemeProps } from "../styles/index.js";
 /**
  *
@@ -81,24 +82,29 @@ process.env.NODE_ENV !== "production" ? Grid2.propTypes /* remove-proptypes */ =
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   /**
    * @internal
-   * The level of the grid starts from `0`
-   * and increases when the grid nests inside another grid regardless of container or item.
+   * The level of the grid starts from `0` and increases when the grid nests
+   * inside another grid. Nesting is defined as a container Grid being a direct
+   * child of a container Grid.
    *
    * ```js
-   * <Grid> // level 0
-   *   <Grid> // level 1
-   *     <Grid> // level 2
-   *   <Grid> // level 1
+   * <Grid container> // level 0
+   *   <Grid container> // level 1
+   *     <Grid container> // level 2
    * ```
    *
-   * Only consecutive grid is considered nesting.
-   * A grid container will start at `0` if there are non-Grid element above it.
+   * Only consecutive grid is considered nesting. A grid container will start at
+   * `0` if there are non-Grid container element above it.
    *
    * ```js
-   * <Grid> // level 0
+   * <Grid container> // level 0
    *   <div>
-   *     <Grid> // level 0
-   *       <Grid> // level 1
+   *     <Grid container> // level 0
+   * ```
+   *
+   * ```js
+   * <Grid container> // level 0
+   *   <Grid>
+   *     <Grid container> // level 0
    * ```
    */
   unstable_level: PropTypes.number,
@@ -109,4 +115,16 @@ process.env.NODE_ENV !== "production" ? Grid2.propTypes /* remove-proptypes */ =
    */
   wrap: PropTypes.oneOf(['nowrap', 'wrap-reverse', 'wrap'])
 } : void 0;
+if (process.env.NODE_ENV !== 'production') {
+  const Component = Grid2;
+  const requireProp = requirePropFactory('Grid2', Component);
+  // eslint-disable-next-line no-useless-concat
+  Component['propTypes' + ''] = {
+    // eslint-disable-next-line react/forbid-foreign-prop-types
+    ...Component.propTypes,
+    direction: requireProp('container'),
+    spacing: requireProp('container'),
+    wrap: requireProp('container')
+  };
+}
 export default Grid2;

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

@@ -372,7 +372,7 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
     if (!isControlled) {
       const element = event.target || inputRef.current;
       if (element == null) {
-        throw new Error(process.env.NODE_ENV !== "production" ? `MUI: Expected valid input target. Did you use a custom \`inputComponent\` and forget to forward refs? See https://mui.com/r/input-component-ref-interface for more info.` : _formatMuiErrorMessage(1));
+        throw new Error(process.env.NODE_ENV !== "production" ? 'MUI: Expected valid input target. ' + 'Did you use a custom `inputComponent` and forget to forward refs? ' + 'See https://mui.com/r/input-component-ref-interface for more info.' : _formatMuiErrorMessage(1));
       }
       checkDirty({
         value: element.value

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();
@@ -145,6 +143,12 @@ function useModal(parameters) {
       ...otherHandlers
     };
     return {
+      /*
+       * Marking an element with the role presentation indicates to assistive technology
+       * that this element should be ignored; it exists to support the web application and
+       * is not meant for humans to interact with directly.
+       * https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-static-element-interactions.md
+       */
       role: 'presentation',
       ...externalEventHandlers,
       onKeyDown: createHandleKeyDown(externalEventHandlers),

package/OutlinedInput/OutlinedInput.js

@@ -46,6 +46,12 @@ const OutlinedInputRoot = styled(InputBaseRoot, {
     [`&:hover .${outlinedInputClasses.notchedOutline}`]: {
       borderColor: (theme.vars || theme).palette.text.primary
     },
+    // Reset on touch devices, it doesn't add specificity
+    '@media (hover: none)': {
+      [`&:hover .${outlinedInputClasses.notchedOutline}`]: {
+        borderColor: theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : borderColor
+      }
+    },
     [`&.${outlinedInputClasses.focused} .${outlinedInputClasses.notchedOutline}`]: {
       borderWidth: 2
     },
@@ -62,12 +68,6 @@ const OutlinedInputRoot = styled(InputBaseRoot, {
       props: {},
       // to overide the above style
       style: {
-        // Reset on touch devices, it doesn't add specificity
-        '@media (hover: none)': {
-          [`&:hover .${outlinedInputClasses.notchedOutline}`]: {
-            borderColor: theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : borderColor
-          }
-        },
         [`&.${outlinedInputClasses.error} .${outlinedInputClasses.notchedOutline}`]: {
           borderColor: (theme.vars || theme).palette.error.main
         },

package/PigmentGrid/PigmentGrid.d.ts

@@ -40,29 +40,6 @@ export interface GridBaseProps {
      * Defines the offset of the grid.
      */
     offset?: ResponsiveStyleValue<number> | undefined;
-    /**
-     * @internal
-     * The level of the grid starts from `0`
-     * and increases when the grid nests inside another grid regardless of container or item.
-     *
-     * ```js
-     * <Grid> // level 0
-     *   <Grid> // level 1
-     *     <Grid> // level 2
-     *   <Grid> // level 1
-     * ```
-     *
-     * Only consecutive grid is considered nesting.
-     * A grid container will start at `0` if there are non-Grid element above it.
-     *
-     * ```js
-     * <Grid> // level 0
-     *   <div>
-     *     <Grid> // level 0
-     *       <Grid> // level 1
-     * ```
-     */
-    unstable_level?: number;
     /**
      * Defines the vertical space between the type `item` components.
      * It overrides the value of the `spacing` prop.