@mui/material 9.0.0 → 9.0.1

package/Tooltip/Tooltip.mjs

@@ -6,7 +6,6 @@ import clsx from 'clsx';
 import useTimeout, { Timeout } from '@mui/utils/useTimeout';
 import elementAcceptingRef from '@mui/utils/elementAcceptingRef';
 import composeClasses from '@mui/utils/composeClasses';
-import { useRtl } from '@mui/system/RtlProvider';
 import isFocusVisible from '@mui/utils/isFocusVisible';
 import getReactElementRef from '@mui/utils/getReactElementRef';
 import { styled, useTheme } from "../zero-styled/index.mjs";
@@ -56,17 +55,11 @@ const TooltipPopper = styled(Popper, {
   pointerEvents: 'none',
   variants: [{
     props: ({
-      ownerState
-    }) => !ownerState.disableInteractive,
-    style: {
-      pointerEvents: 'auto'
-    }
-  }, {
-    props: ({
+      ownerState,
       open
-    }) => !open,
+    }) => open && !ownerState.disableInteractive,
     style: {
-      pointerEvents: 'none'
+      pointerEvents: 'auto'
     }
   }, {
     props: ({
@@ -90,6 +83,8 @@ const TooltipPopper = styled(Popper, {
       [`&[data-popper-placement*="right"] .${tooltipClasses.arrow}`]: {
         height: '1em',
         width: '0.71em',
+        insetInlineStart: 0,
+        marginInlineStart: '-0.71em',
         '&::before': {
           transformOrigin: '100% 100%'
         }
@@ -97,51 +92,13 @@ const TooltipPopper = styled(Popper, {
       [`&[data-popper-placement*="left"] .${tooltipClasses.arrow}`]: {
         height: '1em',
         width: '0.71em',
+        insetInlineEnd: 0,
+        marginInlineEnd: '-0.71em',
         '&::before': {
           transformOrigin: '0 0'
         }
       }
     }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.arrow && !ownerState.isRtl,
-    style: {
-      [`&[data-popper-placement*="right"] .${tooltipClasses.arrow}`]: {
-        left: 0,
-        marginLeft: '-0.71em'
-      }
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.arrow && !!ownerState.isRtl,
-    style: {
-      [`&[data-popper-placement*="right"] .${tooltipClasses.arrow}`]: {
-        right: 0,
-        marginRight: '-0.71em'
-      }
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.arrow && !ownerState.isRtl,
-    style: {
-      [`&[data-popper-placement*="left"] .${tooltipClasses.arrow}`]: {
-        right: 0,
-        marginRight: '-0.71em'
-      }
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.arrow && !!ownerState.isRtl,
-    style: {
-      [`&[data-popper-placement*="left"] .${tooltipClasses.arrow}`]: {
-        left: 0,
-        marginLeft: '-0.71em'
-      }
-    }
   }]
 })));
 const TooltipTooltip = styled('div', {
@@ -167,10 +124,12 @@ const TooltipTooltip = styled('div', {
   wordWrap: 'break-word',
   fontWeight: theme.typography.fontWeightMedium,
   [`.${tooltipClasses.popper}[data-popper-placement*="left"] &`]: {
-    transformOrigin: 'right center'
+    transformOrigin: 'right center',
+    marginInlineEnd: '14px'
   },
   [`.${tooltipClasses.popper}[data-popper-placement*="right"] &`]: {
-    transformOrigin: 'left center'
+    transformOrigin: 'left center',
+    marginInlineStart: '14px'
   },
   [`.${tooltipClasses.popper}[data-popper-placement*="top"] &`]: {
     transformOrigin: 'center bottom',
@@ -186,7 +145,7 @@ const TooltipTooltip = styled('div', {
     }) => ownerState.arrow,
     style: {
       position: 'relative',
-      margin: 0
+      marginBlock: 0
     }
   }, {
     props: ({
@@ -201,65 +160,17 @@ const TooltipTooltip = styled('div', {
   }, {
     props: ({
       ownerState
-    }) => !ownerState.isRtl,
-    style: {
-      [`.${tooltipClasses.popper}[data-popper-placement*="left"] &`]: {
-        marginRight: '14px'
-      },
-      [`.${tooltipClasses.popper}[data-popper-placement*="right"] &`]: {
-        marginLeft: '14px'
-      }
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => !ownerState.isRtl && ownerState.touch,
+    }) => ownerState.touch,
     style: {
       [`.${tooltipClasses.popper}[data-popper-placement*="left"] &`]: {
-        marginRight: '24px'
+        marginInlineEnd: '24px'
       },
       [`.${tooltipClasses.popper}[data-popper-placement*="right"] &`]: {
-        marginLeft: '24px'
-      }
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => !!ownerState.isRtl,
-    style: {
-      [`.${tooltipClasses.popper}[data-popper-placement*="left"] &`]: {
-        marginLeft: '14px'
+        marginInlineStart: '24px'
       },
-      [`.${tooltipClasses.popper}[data-popper-placement*="right"] &`]: {
-        marginRight: '14px'
-      }
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => !!ownerState.isRtl && ownerState.touch,
-    style: {
-      [`.${tooltipClasses.popper}[data-popper-placement*="left"] &`]: {
-        marginLeft: '24px'
-      },
-      [`.${tooltipClasses.popper}[data-popper-placement*="right"] &`]: {
-        marginRight: '24px'
-      }
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.touch,
-    style: {
       [`.${tooltipClasses.popper}[data-popper-placement*="top"] &`]: {
         marginBottom: '24px'
-      }
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.touch,
-    style: {
+      },
       [`.${tooltipClasses.popper}[data-popper-placement*="bottom"] &`]: {
         marginTop: '24px'
       }
@@ -342,7 +253,6 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
     children: childrenProp
   });
   const theme = useTheme();
-  const isRtl = useRtl();
   const [childNode, setChildNode] = React.useState();
   const [arrowRef, setArrowRef] = React.useState(null);
   const ignoreNonTouchEvents = React.useRef(false);
@@ -442,7 +352,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
   const handleBlur = event => {
     // Needed for https://github.com/mui/material-ui/issues/45373
     const target = event?.target ?? childNode;
-    if (!target || !isFocusVisible(target)) {
+    if (!target || target.disabled || !isFocusVisible(target)) {
       setChildIsFocusVisible(false);
 
       // InputBase can call onBlur() without an event when the input becomes disabled.
@@ -470,6 +380,15 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
       setChildNode(event.currentTarget);
     }
     if (isFocusVisible(event.target)) {
+      // Workaround for https://github.com/facebook/react/issues/9142.
+      // React does not fire blur when a focused element becomes disabled.
+      const handleNativeBlur = blurEvent => {
+        if (blurEvent.target.disabled) {
+          handleBlur(blurEvent);
+        }
+        blurEvent.target.removeEventListener('blur', handleNativeBlur);
+      };
+      event.target.addEventListener('blur', handleNativeBlur);
       setChildIsFocusVisible(true);
       handleMouseOver(event);
     }
@@ -601,7 +520,6 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
   }
   const ownerState = {
     ...props,
-    isRtl,
     arrow,
     disableInteractive,
     placement,

package/Unstable_TrapFocus/FocusTrap.js

@@ -15,7 +15,9 @@ var _ownerDocument = _interopRequireDefault(require("@mui/utils/ownerDocument"))
 var _getReactElementRef = _interopRequireDefault(require("@mui/utils/getReactElementRef"));
 var _exactProp = _interopRequireDefault(require("@mui/utils/exactProp"));
 var _elementAcceptingRef = _interopRequireDefault(require("@mui/utils/elementAcceptingRef"));
+var _contains = _interopRequireDefault(require("../utils/contains"));
 var _getActiveElement = _interopRequireDefault(require("../utils/getActiveElement"));
+var _focusable = require("../utils/focusable");
 var _jsxRuntime = require("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(',');
@@ -114,34 +116,36 @@ function FocusTrap(props) {
     activated.current = !disableAutoFocus;
   }, [disableAutoFocus, open]);
   React.useEffect(() => {
+    // Reset on every mount — React 18 Strict Mode double-mounts leave this
+    // stuck at `true` after the cleanup of the previous mount set it.
+    ignoreNextEnforceFocus.current = false;
+
     // We might render an empty child.
     if (!open || !rootRef.current) {
       return;
     }
     const doc = (0, _ownerDocument.default)(rootRef.current);
     const activeElement = (0, _getActiveElement.default)(doc);
-    if (!rootRef.current.contains(activeElement)) {
-      if (!rootRef.current.hasAttribute('tabIndex')) {
+
+    // Prefer the explicitly marked focusable element. Fall back to the root
+    // element for generic FocusTrap usage.
+    const focusTarget = (0, _focusable.getFocusTarget)(rootRef.current) ?? rootRef.current;
+    if (!(0, _contains.default)(rootRef.current, activeElement)) {
+      if (!focusTarget.hasAttribute('tabIndex')) {
         if (process.env.NODE_ENV !== 'production') {
           console.error(['MUI: The modal content node does not accept focus.', 'For the benefit of assistive technologies, ' + 'the tabIndex of the node is being set to "-1".'].join('\n'));
         }
-        rootRef.current.setAttribute('tabIndex', '-1');
+        focusTarget.setAttribute('tabIndex', '-1');
       }
       if (activated.current) {
-        rootRef.current.focus();
+        focusTarget.focus();
       }
     }
     return () => {
       // restoreLastFocus()
-      if (!disableRestoreFocus) {
-        // In IE11 it is possible for document.activeElement to be null resulting
-        // in nodeToRestore.current being null.
-        // Not all elements in IE11 have a focus method.
-        // Once IE11 support is dropped the focus() call can be unconditional.
-        if (nodeToRestore.current && nodeToRestore.current.focus) {
-          ignoreNextEnforceFocus.current = true;
-          nodeToRestore.current.focus();
-        }
+      if (!disableRestoreFocus && nodeToRestore.current) {
+        ignoreNextEnforceFocus.current = true;
+        nodeToRestore.current.focus();
         nodeToRestore.current = null;
       }
     };
@@ -188,7 +192,7 @@ function FocusTrap(props) {
       }
 
       // The focus is already inside
-      if (rootElement.contains(activeEl)) {
+      if ((0, _contains.default)(rootElement, activeEl)) {
         return;
       }
 

package/Unstable_TrapFocus/FocusTrap.mjs

@@ -8,7 +8,9 @@ import ownerDocument from '@mui/utils/ownerDocument';
 import getReactElementRef from '@mui/utils/getReactElementRef';
 import exactProp from '@mui/utils/exactProp';
 import elementAcceptingRef from '@mui/utils/elementAcceptingRef';
+import contains from "../utils/contains.mjs";
 import getActiveElement from "../utils/getActiveElement.mjs";
+import { getFocusTarget } from "../utils/focusable.mjs";
 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(',');
@@ -107,34 +109,36 @@ function FocusTrap(props) {
     activated.current = !disableAutoFocus;
   }, [disableAutoFocus, open]);
   React.useEffect(() => {
+    // Reset on every mount — React 18 Strict Mode double-mounts leave this
+    // stuck at `true` after the cleanup of the previous mount set it.
+    ignoreNextEnforceFocus.current = false;
+
     // We might render an empty child.
     if (!open || !rootRef.current) {
       return;
     }
     const doc = ownerDocument(rootRef.current);
     const activeElement = getActiveElement(doc);
-    if (!rootRef.current.contains(activeElement)) {
-      if (!rootRef.current.hasAttribute('tabIndex')) {
+
+    // Prefer the explicitly marked focusable element. Fall back to the root
+    // element for generic FocusTrap usage.
+    const focusTarget = getFocusTarget(rootRef.current) ?? rootRef.current;
+    if (!contains(rootRef.current, activeElement)) {
+      if (!focusTarget.hasAttribute('tabIndex')) {
         if (process.env.NODE_ENV !== 'production') {
           console.error(['MUI: The modal content node does not accept focus.', 'For the benefit of assistive technologies, ' + 'the tabIndex of the node is being set to "-1".'].join('\n'));
         }
-        rootRef.current.setAttribute('tabIndex', '-1');
+        focusTarget.setAttribute('tabIndex', '-1');
       }
       if (activated.current) {
-        rootRef.current.focus();
+        focusTarget.focus();
       }
     }
     return () => {
       // restoreLastFocus()
-      if (!disableRestoreFocus) {
-        // In IE11 it is possible for document.activeElement to be null resulting
-        // in nodeToRestore.current being null.
-        // Not all elements in IE11 have a focus method.
-        // Once IE11 support is dropped the focus() call can be unconditional.
-        if (nodeToRestore.current && nodeToRestore.current.focus) {
-          ignoreNextEnforceFocus.current = true;
-          nodeToRestore.current.focus();
-        }
+      if (!disableRestoreFocus && nodeToRestore.current) {
+        ignoreNextEnforceFocus.current = true;
+        nodeToRestore.current.focus();
         nodeToRestore.current = null;
       }
     };
@@ -181,7 +185,7 @@ function FocusTrap(props) {
       }
 
       // The focus is already inside
-      if (rootElement.contains(activeEl)) {
+      if (contains(rootElement, activeEl)) {
         return;
       }
 

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v9.0.0
+ * @mui/material v9.0.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/index.mjs

@@ -1,5 +1,5 @@
 /**
- * @mui/material v9.0.0
+ * @mui/material v9.0.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "9.0.0",
+  "version": "9.0.1",
   "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.",
   "license": "MIT",
@@ -33,10 +33,10 @@
     "prop-types": "^15.8.1",
     "react-is": "^19.2.4",
     "react-transition-group": "^4.4.5",
-    "@mui/core-downloads-tracker": "^9.0.0",
+    "@mui/core-downloads-tracker": "^9.0.1",
+    "@mui/system": "^9.0.1",
     "@mui/types": "^9.0.0",
-    "@mui/system": "^9.0.0",
-    "@mui/utils": "^9.0.0"
+    "@mui/utils": "^9.0.1"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",
@@ -44,7 +44,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": "^9.0.0"
+    "@mui/material-pigment-css": "^9.0.1"
   },
   "peerDependenciesMeta": {
     "@types/react": {
@@ -573,154 +573,154 @@
       }
     },
     "./Box": {
-      "require": {
-        "types": "./Box/index.d.ts",
-        "default": "./Box/index.js"
-      },
       "import": {
         "types": "./Box/index.d.mts",
         "default": "./Box/index.mjs"
       },
+      "require": {
+        "types": "./Box/index.d.ts",
+        "default": "./Box/index.js"
+      },
       "default": {
         "types": "./Box/index.d.mts",
         "default": "./Box/index.mjs"
       }
     },
     "./Breadcrumbs": {
-      "require": {
-        "types": "./Breadcrumbs/index.d.ts",
-        "default": "./Breadcrumbs/index.js"
-      },
       "import": {
         "types": "./Breadcrumbs/index.d.mts",
         "default": "./Breadcrumbs/index.mjs"
       },
+      "require": {
+        "types": "./Breadcrumbs/index.d.ts",
+        "default": "./Breadcrumbs/index.js"
+      },
       "default": {
         "types": "./Breadcrumbs/index.d.mts",
         "default": "./Breadcrumbs/index.mjs"
       }
     },
     "./Button": {
-      "require": {
-        "types": "./Button/index.d.ts",
-        "default": "./Button/index.js"
-      },
       "import": {
         "types": "./Button/index.d.mts",
         "default": "./Button/index.mjs"
       },
+      "require": {
+        "types": "./Button/index.d.ts",
+        "default": "./Button/index.js"
+      },
       "default": {
         "types": "./Button/index.d.mts",
         "default": "./Button/index.mjs"
       }
     },
     "./ButtonBase": {
-      "require": {
-        "types": "./ButtonBase/index.d.ts",
-        "default": "./ButtonBase/index.js"
-      },
       "import": {
         "types": "./ButtonBase/index.d.mts",
         "default": "./ButtonBase/index.mjs"
       },
+      "require": {
+        "types": "./ButtonBase/index.d.ts",
+        "default": "./ButtonBase/index.js"
+      },
       "default": {
         "types": "./ButtonBase/index.d.mts",
         "default": "./ButtonBase/index.mjs"
       }
     },
     "./ButtonGroup": {
-      "require": {
-        "types": "./ButtonGroup/index.d.ts",
-        "default": "./ButtonGroup/index.js"
-      },
       "import": {
         "types": "./ButtonGroup/index.d.mts",
         "default": "./ButtonGroup/index.mjs"
       },
+      "require": {
+        "types": "./ButtonGroup/index.d.ts",
+        "default": "./ButtonGroup/index.js"
+      },
       "default": {
         "types": "./ButtonGroup/index.d.mts",
         "default": "./ButtonGroup/index.mjs"
       }
     },
     "./Card": {
-      "require": {
-        "types": "./Card/index.d.ts",
-        "default": "./Card/index.js"
-      },
       "import": {
         "types": "./Card/index.d.mts",
         "default": "./Card/index.mjs"
       },
+      "require": {
+        "types": "./Card/index.d.ts",
+        "default": "./Card/index.js"
+      },
       "default": {
         "types": "./Card/index.d.mts",
         "default": "./Card/index.mjs"
       }
     },
     "./CardActionArea": {
-      "require": {
-        "types": "./CardActionArea/index.d.ts",
-        "default": "./CardActionArea/index.js"
-      },
       "import": {
         "types": "./CardActionArea/index.d.mts",
         "default": "./CardActionArea/index.mjs"
       },
+      "require": {
+        "types": "./CardActionArea/index.d.ts",
+        "default": "./CardActionArea/index.js"
+      },
       "default": {
         "types": "./CardActionArea/index.d.mts",
         "default": "./CardActionArea/index.mjs"
       }
     },
     "./CardActions": {
-      "require": {
-        "types": "./CardActions/index.d.ts",
-        "default": "./CardActions/index.js"
-      },
       "import": {
         "types": "./CardActions/index.d.mts",
         "default": "./CardActions/index.mjs"
       },
+      "require": {
+        "types": "./CardActions/index.d.ts",
+        "default": "./CardActions/index.js"
+      },
       "default": {
         "types": "./CardActions/index.d.mts",
         "default": "./CardActions/index.mjs"
       }
     },
     "./CardContent": {
-      "require": {
-        "types": "./CardContent/index.d.ts",
-        "default": "./CardContent/index.js"
-      },
       "import": {
         "types": "./CardContent/index.d.mts",
         "default": "./CardContent/index.mjs"
       },
+      "require": {
+        "types": "./CardContent/index.d.ts",
+        "default": "./CardContent/index.js"
+      },
       "default": {
         "types": "./CardContent/index.d.mts",
         "default": "./CardContent/index.mjs"
       }
     },
     "./CardHeader": {
-      "require": {
-        "types": "./CardHeader/index.d.ts",
-        "default": "./CardHeader/index.js"
-      },
       "import": {
         "types": "./CardHeader/index.d.mts",
         "default": "./CardHeader/index.mjs"
       },
+      "require": {
+        "types": "./CardHeader/index.d.ts",
+        "default": "./CardHeader/index.js"
+      },
       "default": {
         "types": "./CardHeader/index.d.mts",
         "default": "./CardHeader/index.mjs"
       }
     },
     "./CardMedia": {
-      "require": {
-        "types": "./CardMedia/index.d.ts",
-        "default": "./CardMedia/index.js"
-      },
       "import": {
         "types": "./CardMedia/index.d.mts",
         "default": "./CardMedia/index.mjs"
       },
+      "require": {
+        "types": "./CardMedia/index.d.ts",
+        "default": "./CardMedia/index.js"
+      },
       "default": {
         "types": "./CardMedia/index.d.mts",
         "default": "./CardMedia/index.mjs"

package/styles/responsiveFontSizes.js

@@ -58,16 +58,27 @@ function responsiveFontSizes(themeInput, options = {}) {
         })
       });
     }
+    const responsive = (0, _cssUtils.responsiveProperty)({
+      cssProperty: 'fontSize',
+      min: minFontSize,
+      max: maxFontSize,
+      unit: 'rem',
+      breakpoints: breakpointValues,
+      transform
+    });
+
+    // https://github.com/mui/material-ui/issues/40255
+    // Preserve the original font size at the largest breakpoint.
+    // Grid alignment can snap the max value away from the original designed size.
+    if (breakpointValues.length > 0) {
+      const lastBreakpoint = breakpointValues[breakpointValues.length - 1];
+      responsive[`@media (min-width:${lastBreakpoint}px)`] = {
+        fontSize: `${Math.round(maxFontSize * 10000) / 10000}rem`
+      };
+    }
     typography[variant] = {
       ...style,
-      ...(0, _cssUtils.responsiveProperty)({
-        cssProperty: 'fontSize',
-        min: minFontSize,
-        max: maxFontSize,
-        unit: 'rem',
-        breakpoints: breakpointValues,
-        transform
-      })
+      ...responsive
     };
   });
   return theme;

package/styles/responsiveFontSizes.mjs

@@ -51,16 +51,27 @@ export default function responsiveFontSizes(themeInput, options = {}) {
         })
       });
     }
+    const responsive = responsiveProperty({
+      cssProperty: 'fontSize',
+      min: minFontSize,
+      max: maxFontSize,
+      unit: 'rem',
+      breakpoints: breakpointValues,
+      transform
+    });
+
+    // https://github.com/mui/material-ui/issues/40255
+    // Preserve the original font size at the largest breakpoint.
+    // Grid alignment can snap the max value away from the original designed size.
+    if (breakpointValues.length > 0) {
+      const lastBreakpoint = breakpointValues[breakpointValues.length - 1];
+      responsive[`@media (min-width:${lastBreakpoint}px)`] = {
+        fontSize: `${Math.round(maxFontSize * 10000) / 10000}rem`
+      };
+    }
     typography[variant] = {
       ...style,
-      ...responsiveProperty({
-        cssProperty: 'fontSize',
-        min: minFontSize,
-        max: maxFontSize,
-        unit: 'rem',
-        breakpoints: breakpointValues,
-        transform
-      })
+      ...responsive
     };
   });
   return theme;