@mui/material 6.1.9 → 6.2.0

package/modern/Slider/useSlider.js

@@ -5,6 +5,9 @@ import { unstable_ownerDocument as ownerDocument, unstable_useControlled as useC
 import extractEventHandlers from '@mui/utils/extractEventHandlers';
 import areArraysEqual from "../utils/areArraysEqual.js";
 const INTENTIONAL_DRAG_COUNT_THRESHOLD = 2;
+function getNewValue(currentValue, step, direction, min, max) {
+  return direction === 1 ? Math.min(currentValue + step, max) : Math.max(currentValue - step, min);
+}
 function asc(a, b) {
   return a - b;
 }
@@ -280,20 +283,65 @@ export function useSlider(parameters) {
     }
   };
   const createHandleHiddenInputKeyDown = otherHandlers => event => {
-    // The Shift + Up/Down keyboard shortcuts for moving the slider makes sense to be supported
-    // only if the step is defined. If the step is null, this means tha the marks are used for specifying the valid values.
-    if (step !== null) {
+    if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'PageUp', 'PageDown', 'Home', 'End'].includes(event.key)) {
+      event.preventDefault();
       const index = Number(event.currentTarget.getAttribute('data-index'));
       const value = values[index];
       let newValue = null;
-      if ((event.key === 'ArrowLeft' || event.key === 'ArrowDown') && event.shiftKey || event.key === 'PageDown') {
-        newValue = Math.max(value - shiftStep, min);
-      } else if ((event.key === 'ArrowRight' || event.key === 'ArrowUp') && event.shiftKey || event.key === 'PageUp') {
-        newValue = Math.min(value + shiftStep, max);
+      // Keys actions that change the value by more than the most granular `step`
+      // value are only applied if the step not `null`.
+      // When step is `null`, the `marks` prop is used instead to define valid values.
+      if (step != null) {
+        const stepSize = event.shiftKey ? shiftStep : step;
+        switch (event.key) {
+          case 'ArrowUp':
+            newValue = getNewValue(value, stepSize, 1, min, max);
+            break;
+          case 'ArrowRight':
+            newValue = getNewValue(value, stepSize, isRtl ? -1 : 1, min, max);
+            break;
+          case 'ArrowDown':
+            newValue = getNewValue(value, stepSize, -1, min, max);
+            break;
+          case 'ArrowLeft':
+            newValue = getNewValue(value, stepSize, isRtl ? 1 : -1, min, max);
+            break;
+          case 'PageUp':
+            newValue = getNewValue(value, shiftStep, 1, min, max);
+            break;
+          case 'PageDown':
+            newValue = getNewValue(value, shiftStep, -1, min, max);
+            break;
+          case 'Home':
+            newValue = min;
+            break;
+          case 'End':
+            newValue = max;
+            break;
+          default:
+            break;
+        }
+      } else if (marks) {
+        const maxMarksValue = marksValues[marksValues.length - 1];
+        const currentMarkIndex = marksValues.indexOf(value);
+        const decrementKeys = [isRtl ? 'ArrowRight' : 'ArrowLeft', 'ArrowDown', 'PageDown', 'Home'];
+        const incrementKeys = [isRtl ? 'ArrowLeft' : 'ArrowRight', 'ArrowUp', 'PageUp', 'End'];
+        if (decrementKeys.includes(event.key)) {
+          if (currentMarkIndex === 0) {
+            newValue = marksValues[0];
+          } else {
+            newValue = marksValues[currentMarkIndex - 1];
+          }
+        } else if (incrementKeys.includes(event.key)) {
+          if (currentMarkIndex === marksValues.length - 1) {
+            newValue = maxMarksValue;
+          } else {
+            newValue = marksValues[currentMarkIndex + 1];
+          }
+        }
       }
-      if (newValue !== null) {
+      if (newValue != null) {
         changeValue(event, newValue);
-        event.preventDefault();
       }
     }
     otherHandlers?.onKeyDown?.(event);
@@ -315,6 +363,7 @@ export function useSlider(parameters) {
   }
   const createHandleHiddenInputChange = otherHandlers => event => {
     otherHandlers.onChange?.(event);
+    // this handles value change by Pointer or Touch events
     // @ts-ignore
     changeValue(event, event.target.valueAsNumber);
   };
@@ -591,6 +640,10 @@ export function useSlider(parameters) {
       pointerEvents: active !== -1 && active !== index ? 'none' : undefined
     };
   };
+  let cssWritingMode;
+  if (orientation === 'vertical') {
+    cssWritingMode = isRtl ? 'vertical-rl' : 'vertical-lr';
+  }
   const getHiddenInputProps = (externalProps = {}) => {
     const externalHandlers = extractEventHandlers(externalProps);
     const ownEventHandlers = {
@@ -622,7 +675,8 @@ export function useSlider(parameters) {
         direction: isRtl ? 'rtl' : 'ltr',
         // So that VoiceOver's focus indicator matches the thumb's dimensions
         width: '100%',
-        height: '100%'
+        height: '100%',
+        writingMode: cssWritingMode
       }
     };
   };

package/modern/Tabs/ScrollbarSize.js

@@ -49,8 +49,8 @@ export default function ScrollbarSize(props) {
   }, [onChange]);
   return /*#__PURE__*/_jsx("div", {
     style: styles,
-    ref: nodeRef,
-    ...other
+    ...other,
+    ref: nodeRef
   });
 }
 process.env.NODE_ENV !== "production" ? ScrollbarSize.propTypes = {

package/modern/index.js

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

package/modern/styles/createThemeWithVars.js

@@ -23,7 +23,7 @@ function setColor(obj, key, defaultValue) {
   }
 }
 function toRgb(color) {
-  if (!color || !color.startsWith('hsl')) {
+  if (typeof color !== 'string' || !color.startsWith('hsl')) {
     return color;
   }
   return hslToRgb(color);
@@ -315,7 +315,7 @@ export default function createThemeWithVars(options = {}, ...args) {
 
       // The default palettes (primary, secondary, error, info, success, and warning) errors are handled by the above `createTheme(...)`.
 
-      if (colors && typeof colors === 'object') {
+      if (color !== 'tonalOffset' && colors && typeof colors === 'object') {
         // Silent the error for custom palettes.
         if (colors.main) {
           setColor(palette[color], 'mainChannel', safeColorChannel(toRgb(colors.main)));

package/modern/utils/useSlot.js

@@ -31,7 +31,6 @@ name, parameters) {
     elementType: initialElementType,
     ownerState,
     externalForwardedProps,
-    getSlotOwnerState,
     internalForwardedProps,
     ...useSlotPropsParams
   } = parameters;
@@ -63,11 +62,6 @@ name, parameters) {
     externalSlotProps: resolvedComponentsProps
   });
   const ref = useForkRef(internalRef, resolvedComponentsProps?.ref, parameters.ref);
-  const slotOwnerState = getSlotOwnerState ? getSlotOwnerState(mergedProps) : {};
-  const finalOwnerState = {
-    ...ownerState,
-    ...slotOwnerState
-  };
   const LeafComponent = name === 'root' ? slotComponent || rootComponent : slotComponent;
   const props = appendOwnerState(elementType, {
     ...(name === 'root' && !rootComponent && !slots[name] && internalForwardedProps),
@@ -77,9 +71,6 @@ name, parameters) {
       as: LeafComponent
     }),
     ref
-  }, finalOwnerState);
-  Object.keys(slotOwnerState).forEach(propName => {
-    delete props[propName];
-  });
+  }, ownerState);
   return [elementType, props];
 }

package/modern/version/index.js

@@ -1,6 +1,6 @@
-export const version = "6.1.9";
+export const version = "6.2.0";
 export const major = Number("6");
-export const minor = Number("1");
-export const patch = Number("9");
+export const minor = Number("2");
+export const patch = Number("0");
 export const prerelease = undefined;
 export default version;

package/node/Avatar/Avatar.js

@@ -168,21 +168,22 @@ const Avatar = /*#__PURE__*/React.forwardRef(function Avatar(inProps, ref) {
     ...other
   } = props;
   let children = null;
+  const ownerState = {
+    ...props,
+    component,
+    variant
+  };
 
   // Use a hook instead of onError on the img element to support server-side rendering.
   const loaded = useLoaded({
     ...imgProps,
+    ...(typeof slotProps.img === 'function' ? slotProps.img(ownerState) : slotProps.img),
     src,
     srcSet
   });
   const hasImg = src || srcSet;
   const hasImgNotFailing = hasImg && loaded !== 'error';
-  const ownerState = {
-    ...props,
-    colorDefault: !hasImgNotFailing,
-    component,
-    variant
-  };
+  ownerState.colorDefault = !hasImgNotFailing;
   // This issue explains why this is required: https://github.com/mui/material-ui/issues/42184
   delete ownerState.ownerState;
   const classes = useUtilityClasses(ownerState);

package/node/ButtonBase/ButtonBase.js

@@ -143,34 +143,22 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
       ripple.pulsate();
     }
   }, [disableRipple, focusRipple, focusVisible, ripple]);
-  function useRippleHandler(rippleAction, eventCallback, skipRippleAction = disableTouchRipple) {
-    return (0, _useEventCallback.default)(event => {
-      if (eventCallback) {
-        eventCallback(event);
-      }
-      const ignore = skipRippleAction;
-      if (!ignore) {
-        ripple[rippleAction](event);
-      }
-      return true;
-    });
-  }
-  const handleMouseDown = useRippleHandler('start', onMouseDown);
-  const handleContextMenu = useRippleHandler('stop', onContextMenu);
-  const handleDragLeave = useRippleHandler('stop', onDragLeave);
-  const handleMouseUp = useRippleHandler('stop', onMouseUp);
-  const handleMouseLeave = useRippleHandler('stop', event => {
+  const handleMouseDown = useRippleHandler(ripple, 'start', onMouseDown, disableTouchRipple);
+  const handleContextMenu = useRippleHandler(ripple, 'stop', onContextMenu, disableTouchRipple);
+  const handleDragLeave = useRippleHandler(ripple, 'stop', onDragLeave, disableTouchRipple);
+  const handleMouseUp = useRippleHandler(ripple, 'stop', onMouseUp, disableTouchRipple);
+  const handleMouseLeave = useRippleHandler(ripple, 'stop', event => {
     if (focusVisible) {
       event.preventDefault();
     }
     if (onMouseLeave) {
       onMouseLeave(event);
     }
-  });
-  const handleTouchStart = useRippleHandler('start', onTouchStart);
-  const handleTouchEnd = useRippleHandler('stop', onTouchEnd);
-  const handleTouchMove = useRippleHandler('stop', onTouchMove);
-  const handleBlur = useRippleHandler('stop', event => {
+  }, disableTouchRipple);
+  const handleTouchStart = useRippleHandler(ripple, 'start', onTouchStart, disableTouchRipple);
+  const handleTouchEnd = useRippleHandler(ripple, 'stop', onTouchEnd, disableTouchRipple);
+  const handleTouchMove = useRippleHandler(ripple, 'stop', onTouchMove, disableTouchRipple);
+  const handleBlur = useRippleHandler(ripple, 'stop', event => {
     if (!(0, _isFocusVisible.default)(event.target)) {
       setFocusVisible(false);
     }
@@ -294,6 +282,17 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
     }) : null]
   });
 });
+function useRippleHandler(ripple, rippleAction, eventCallback, skipRippleAction = false) {
+  return (0, _useEventCallback.default)(event => {
+    if (eventCallback) {
+      eventCallback(event);
+    }
+    if (!skipRippleAction) {
+      ripple[rippleAction](event);
+    }
+    return true;
+  });
+}
 process.env.NODE_ENV !== "production" ? ButtonBase.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │

package/node/ClickAwayListener/ClickAwayListener.js

@@ -11,7 +11,6 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("@mui/utils");
 var _getReactElementRef = _interopRequireDefault(require("@mui/utils/getReactElementRef"));
-var _jsxRuntime = require("react/jsx-runtime");
 // TODO: return `EventHandlerName extends `on${infer EventName}` ? Lowercase<EventName> : never` once generatePropTypes runs with TS 4.1
 function mapEventPropToEvent(eventProp) {
   return eventProp.substring(2).toLowerCase();
@@ -142,9 +141,7 @@ function ClickAwayListener(props) {
     }
     return undefined;
   }, [handleClickAway, mouseEvent]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
-    children: /*#__PURE__*/React.cloneElement(children, childrenProps)
-  });
+  return /*#__PURE__*/React.cloneElement(children, childrenProps);
 }
 process.env.NODE_ENV !== "production" ? ClickAwayListener.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/node/FilledInput/FilledInput.js

@@ -317,7 +317,7 @@ const FilledInput = /*#__PURE__*/React.forwardRef(function FilledInput(inProps,
       root: RootSlot,
       input: InputSlot
     },
-    componentsProps: componentsProps,
+    slotProps: componentsProps,
     fullWidth: fullWidth,
     inputComponent: inputComponent,
     multiline: multiline,

package/node/FormHelperText/FormHelperText.js

@@ -127,6 +127,7 @@ const FormHelperText = /*#__PURE__*/React.forwardRef(function FormHelperText(inP
     children: children === ' ' ? // notranslate needed while Google Translate will not fix zero-width space issue
     _span || (_span = /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       className: "notranslate",
+      "aria-hidden": true,
       children: "\u200B"
     })) : children
   });

package/node/Grid/Grid.js

@@ -180,7 +180,7 @@ function generateRowGap({
       const themeSpacing = theme.spacing(propValue);
       if (themeSpacing !== '0px') {
         return {
-          marginTop: `-${themeSpacing}`,
+          marginTop: `calc(-1 * ${themeSpacing})`,
           [`& > .${_gridClasses.default.item}`]: {
             paddingTop: themeSpacing
           }
@@ -225,7 +225,7 @@ function generateColumnGap({
     }, columnSpacingValues, (propValue, breakpoint) => {
       const themeSpacing = theme.spacing(propValue);
       if (themeSpacing !== '0px') {
-        const negativeValue = `-${themeSpacing}`;
+        const negativeValue = `calc(-1 * ${themeSpacing})`;
         return {
           width: `calc(100% + ${themeSpacing})`,
           marginLeft: negativeValue,

package/node/Grid2/Grid2.js

@@ -11,6 +11,7 @@ var _Grid = require("@mui/system/Grid");
 var _requirePropFactory = _interopRequireDefault(require("../utils/requirePropFactory"));
 var _styles = require("../styles");
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
+var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
 /**
  *
  * Demos:
@@ -25,13 +26,19 @@ const Grid2 = (0, _Grid.createGrid)({
   createStyledComponent: (0, _styles.styled)('div', {
     name: 'MuiGrid2',
     slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
+    overridesResolver: (props, styles) => {
+      const {
+        ownerState
+      } = props;
+      return [styles.root, ownerState.container && styles.container];
+    }
   }),
   componentName: 'MuiGrid2',
   useThemeProps: inProps => (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiGrid2'
-  })
+  }),
+  useTheme: _useTheme.default
 });
 process.env.NODE_ENV !== "production" ? Grid2.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/node/Hidden/HiddenJs.js

@@ -1,21 +1,20 @@
 "use strict";
 'use client';
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _exactProp = _interopRequireDefault(require("@mui/utils/exactProp"));
 var _withWidth = _interopRequireWildcard(require("./withWidth"));
 var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * @ignore - internal component.
- */function HiddenJs(props) {
+ */
+function HiddenJs(props) {
   const {
     children,
     only,
@@ -55,11 +54,9 @@ var _jsxRuntime = require("react/jsx-runtime");
   if (!visible) {
     return null;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
-    children: children
-  });
+  return children;
 }
-process.env.NODE_ENV !== "production" ? HiddenJs.propTypes = {
+HiddenJs.propTypes = {
   /**
    * The content of the component.
    */
@@ -123,8 +120,8 @@ process.env.NODE_ENV !== "production" ? HiddenJs.propTypes = {
    */
   // eslint-disable-next-line react/no-unused-prop-types
   xsUp: _propTypes.default.bool
-} : void 0;
+};
 if (process.env.NODE_ENV !== 'production') {
-  process.env.NODE_ENV !== "production" ? HiddenJs.propTypes = (0, _exactProp.default)(HiddenJs.propTypes) : void 0;
+  HiddenJs.propTypes = (0, _exactProp.default)(HiddenJs.propTypes);
 }
 var _default = exports.default = (0, _withWidth.default)()(HiddenJs);

package/node/InputAdornment/InputAdornment.js

@@ -135,6 +135,7 @@ const InputAdornment = /*#__PURE__*/React.forwardRef(function InputAdornment(inP
       }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
         children: [position === 'start' ? (/* notranslate needed while Google Translate will not fix zero-width space issue */_span || (_span = /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           className: "notranslate",
+          "aria-hidden": true,
           children: "\u200B"
         }))) : null, children]
       })

package/node/ListItemText/ListItemText.js

@@ -16,6 +16,7 @@ var _ListContext = _interopRequireDefault(require("../List/ListContext"));
 var _zeroStyled = require("../zero-styled");
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _listItemTextClasses = _interopRequireWildcard(require("./listItemTextClasses"));
+var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
   const {
@@ -87,6 +88,8 @@ const ListItemText = /*#__PURE__*/React.forwardRef(function ListItemText(inProps
     primaryTypographyProps,
     secondary: secondaryProp,
     secondaryTypographyProps,
+    slots = {},
+    slotProps = {},
     ...other
   } = props;
   const {
@@ -103,21 +106,39 @@ const ListItemText = /*#__PURE__*/React.forwardRef(function ListItemText(inProps
     dense
   };
   const classes = useUtilityClasses(ownerState);
+  const externalForwardedProps = {
+    slots,
+    slotProps: {
+      primary: primaryTypographyProps,
+      secondary: secondaryTypographyProps,
+      ...slotProps
+    }
+  };
+  const [PrimarySlot, primarySlotProps] = (0, _useSlot.default)('primary', {
+    className: classes.primary,
+    elementType: _Typography.default,
+    externalForwardedProps,
+    ownerState
+  });
+  const [SecondarySlot, secondarySlotProps] = (0, _useSlot.default)('secondary', {
+    className: classes.secondary,
+    elementType: _Typography.default,
+    externalForwardedProps,
+    ownerState
+  });
   if (primary != null && primary.type !== _Typography.default && !disableTypography) {
-    primary = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+    primary = /*#__PURE__*/(0, _jsxRuntime.jsx)(PrimarySlot, {
       variant: dense ? 'body2' : 'body1',
-      className: classes.primary,
-      component: primaryTypographyProps?.variant ? undefined : 'span',
-      ...primaryTypographyProps,
+      component: primarySlotProps?.variant ? undefined : 'span',
+      ...primarySlotProps,
       children: primary
     });
   }
   if (secondary != null && secondary.type !== _Typography.default && !disableTypography) {
-    secondary = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+    secondary = /*#__PURE__*/(0, _jsxRuntime.jsx)(SecondarySlot, {
       variant: "body2",
-      className: classes.secondary,
       color: "textSecondary",
-      ...secondaryTypographyProps,
+      ...secondarySlotProps,
       children: secondary
     });
   }
@@ -167,6 +188,7 @@ process.env.NODE_ENV !== "production" ? ListItemText.propTypes /* remove-proptyp
   /**
    * These props will be forwarded to the primary typography component
    * (as long as disableTypography is not `true`).
+   * @deprecated Use `slotProps.primary` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   primaryTypographyProps: _propTypes.default.object,
   /**
@@ -176,8 +198,25 @@ process.env.NODE_ENV !== "production" ? ListItemText.propTypes /* remove-proptyp
   /**
    * These props will be forwarded to the secondary typography component
    * (as long as disableTypography is not `true`).
+   * @deprecated Use `slotProps.secondary` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   secondaryTypographyProps: _propTypes.default.object,
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: _propTypes.default.shape({
+    primary: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    secondary: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: _propTypes.default.shape({
+    primary: _propTypes.default.elementType,
+    secondary: _propTypes.default.elementType
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/node/Modal/useModal.js

@@ -17,6 +17,7 @@ function getContainer(container) {
 function getHasTransition(children) {
   return children ? children.props.hasOwnProperty('in') : false;
 }
+const noop = () => {};
 
 // 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.
@@ -188,8 +189,8 @@ function useModal(parameters) {
       }
     };
     return {
-      onEnter: (0, _utils.unstable_createChainedFunction)(handleEnter, children?.props.onEnter),
-      onExited: (0, _utils.unstable_createChainedFunction)(handleExited, children?.props.onExited)
+      onEnter: (0, _utils.unstable_createChainedFunction)(handleEnter, children?.props.onEnter ?? noop),
+      onExited: (0, _utils.unstable_createChainedFunction)(handleExited, children?.props.onExited ?? noop)
     };
   };
   return {

package/node/NoSsr/NoSsr.js

@@ -10,7 +10,6 @@ exports.default = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("@mui/utils");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * NoSsr purposely removes components from the subject of Server Side Rendering (SSR).
  *
@@ -47,10 +46,8 @@ function NoSsr(props) {
     }
   }, [defer]);
 
-  // We need the Fragment here to force react-docgen to recognise NoSsr as a component.
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
-    children: mountedState ? children : fallback
-  });
+  // TODO casting won't be needed at one point https://github.com/DefinitelyTyped/DefinitelyTyped/pull/65135
+  return mountedState ? children : fallback;
 }
 process.env.NODE_ENV !== "production" ? NoSsr.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/node/OutlinedInput/NotchedOutline.js

@@ -127,6 +127,7 @@ function NotchedOutline(props) {
       }) : // notranslate needed while Google Translate will not fix zero-width space issue
       _span || (_span = /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         className: "notranslate",
+        "aria-hidden": true,
         children: "\u200B"
       }))
     })

package/node/PigmentGrid/PigmentGrid.js

@@ -12,7 +12,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Grid = _interopRequireDefault(require("@mui/material-pigment-css/Grid"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
-var _gridGenerator = require("@mui/system/Grid/gridGenerator");
+var _Grid2 = require("@mui/system/Grid");
 var _jsxRuntime = require("react/jsx-runtime");
 // @ts-ignore
 
@@ -38,7 +38,7 @@ const useUtilityClasses = ownerState => {
     }
   }
   const slots = {
-    root: ['root', container && 'container', ...(0, _gridGenerator.generateDirectionClasses)(direction), ...(0, _gridGenerator.generateSizeClassNames)(gridSize), ...(container ? (0, _gridGenerator.generateSpacingClassNames)(spacing) : [])]
+    root: ['root', container && 'container', ...(0, _Grid2.unstable_generateDirectionClasses)(direction), ...(0, _Grid2.unstable_generateSizeClassNames)(gridSize), ...(container ? (0, _Grid2.unstable_generateSpacingClassNames)(spacing) : [])]
   };
   return (0, _composeClasses.default)(slots, slot => (0, _generateUtilityClass.default)('MuiGrid2', slot), {});
 };

package/node/Portal/Portal.js

@@ -11,7 +11,6 @@ var React = _interopRequireWildcard(require("react"));
 var ReactDOM = _interopRequireWildcard(require("react-dom"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("@mui/utils");
-var _jsxRuntime = require("react/jsx-runtime");
 function getContainer(container) {
   return typeof container === 'function' ? container() : container;
 }
@@ -57,13 +56,9 @@ const Portal = /*#__PURE__*/React.forwardRef(function Portal(props, forwardedRef
       };
       return /*#__PURE__*/React.cloneElement(children, newProps);
     }
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
-      children: children
-    });
+    return children;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
-    children: mountNode ? /*#__PURE__*/ReactDOM.createPortal(children, mountNode) : mountNode
-  });
+  return mountNode ? /*#__PURE__*/ReactDOM.createPortal(children, mountNode) : mountNode;
 });
 process.env.NODE_ENV !== "production" ? Portal.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/node/Select/SelectInput.js

@@ -469,6 +469,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
       children: isEmpty(display) ? // notranslate needed while Google Translate will not fix zero-width space issue
       _span || (_span = /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         className: "notranslate",
+        "aria-hidden": true,
         children: "\u200B"
       })) : display
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(SelectNativeInput, {