@mui/material 6.1.9 → 6.2.0

package/Avatar/Avatar.js

@@ -161,21 +161,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/Box/Box.d.ts

@@ -18,6 +18,8 @@ declare const Box: OverridableComponent<BoxTypeMap<{}, 'div', MaterialTheme>>;
 export type BoxProps<
   RootComponent extends React.ElementType = BoxTypeMap['defaultComponent'],
   AdditionalProps = {},
-> = OverrideProps<BoxTypeMap<AdditionalProps, RootComponent, MaterialTheme>, RootComponent>;
+> = OverrideProps<BoxTypeMap<AdditionalProps, RootComponent, MaterialTheme>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default Box;

package/ButtonBase/ButtonBase.js

@@ -136,34 +136,22 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
       ripple.pulsate();
     }
   }, [disableRipple, focusRipple, focusVisible, ripple]);
-  function useRippleHandler(rippleAction, eventCallback, skipRippleAction = disableTouchRipple) {
-    return useEventCallback(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 (!isFocusVisible(event.target)) {
       setFocusVisible(false);
     }
@@ -287,6 +275,17 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
     }) : null]
   });
 });
+function useRippleHandler(ripple, rippleAction, eventCallback, skipRippleAction = false) {
+  return useEventCallback(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/CHANGELOG.md

@@ -1,5 +1,87 @@
 # [Versions](https://mui.com/versions/)
 
+## 6.2.0
+
+<!-- generated comparing v6.1.10..master -->
+
+_Dec 10, 2024_
+
+A big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
+
+- Material UI is now compatible with React 19 (#44672) @DiegoAndai
+- Fixed incorrect `aria-orientation` for vertical sliders. <kbd>ArrowRight</kbd> now increases the value and <kbd>ArrowLeft</kbd> decreases the value in vertical sliders; they were reversed in prior versions. (#44537) @mj12albert
+
+### `@mui/material@6.2.0`
+
+- [Box] Add missing `component` to `BoxProps` type (#44643) @DiegoAndai
+- [Grid] Fix spacing when using css variables (#44663) @DiegoAndai
+- [ListItemText] Add `slots` and `slotProps` (#44571) @sai6855
+
+### Docs
+
+- Add Toolpad Core template link (#44415) @bharatkashyap
+
+### Core
+
+- [docs-infra] Allow custom annotations (#44707) @vladmoroz
+- [Box] Fix `component` prop test (#44651) @DiegoAndai
+- React 19 useRef cleanup (#44704) @DiegoAndai
+- Remove obselete lerna options (#44676) @ZeeshanTamboli
+- Fix Regular Expression Denial of Service (ReDoS) vulnerabilities (#44627) @SuperMaxine
+- Fix number of contributors (#44650) @aarongarciah
+- [docs-infra] Add support for data attributes in the API generation (#44709) @mnajdova
+- [docs-infra] Fix RTL dark mode (#41803) @alexfauquette
+- [Grid] Remove deeply nested imports (#43605) @Janpot
+
+All contributors of this release in alphabetical order: @aarongarciah, @alexfauquette, @bharatkashyap, @DiegoAndai, @Janpot, @mj12albert, @mnajdova, @sai6855, @SuperMaxine, @vladmoroz, @ZeeshanTamboli
+
+## 6.1.10
+
+<!-- generated comparing v6.1.9..master -->
+
+_Dec 3, 2024_
+
+A big thanks to the 11 contributors who made this release possible.
+
+### `@mui/material@6.1.10`
+
+- [Avatar] Fix `slotProps.img` not spread to hook (#44536) @siriwatknp
+- [FilledInput] Use `slotProps` instead of `componentsProps` (#44552) @siriwatknp
+- [Grid2] Fix theme scoping error (#44599) @siriwatknp
+- [Grid2] Add container styles from styleOverrides (#44598) @sai6855
+- Skip `tonalOffset` from setting color channel (#44585) @siriwatknp
+- Remove few more React.ReactElement<any> types (#44290) @sai6855
+- [Tabs] Fix `ScrollbarSize` ref being overriden (#44593) @DiegoAndai
+- [Select][TextField] Fix screen reader from saying `&ZeroWidthSpace` (#44631) @arishoham
+
+### `@mui/system@6.1.10`
+
+- [ThemeProvider] Optimize `theme` changes when enabling CSS theme variables (#44588) @siriwatknp
+
+### Docs
+
+- Notification for the MUI X v8 alpha zero announcement blog post (#44629) @joserodolfofreitas
+- Bump React Router to ^7.0.1 (#44531) @oliviertassinari
+- [material-ui] Replace testid with id in migration guide (#44636) @sai6855
+- [material-ui][TextField] Update usage of `InputLabelProps` in docs (#44634) @sai6855
+- [material-ui][ListItem] Add missing diffs in migration guide (#44638) @sai6855
+- [examples] Use Next.js 14 on examples (#44486) @DiegoAndai
+- Update links and sidebar nav for Base UI components in Material UI (#44581) @samuelsycamore
+
+### Core
+
+- Remove `getSlotOwnerState` from `useSlot` util (#44403) @ZeeshanTamboli
+- Extract useRippleHandler outside of ButtonBase (#44591) @albarv340
+- Update eslint config (#44586) @MBilalShafi
+- [core-infra] Remove useless fragments (#44516) @oliviertassinari
+- [docs-infra] Fix Banner CLS (#44632) @oliviertassinari
+- [docs-infra] Change CSS vars generation to be extracted from Enum (#44587) @mnajdova
+- [docs-infra] Automatically hide Black Friday banner (#44630) @oliviertassinari
+- [docs-infra] Fix TOC RTL padding regression (#44535) @oliviertassinari
+- [test-utils] Remove leftover React.ReactElement<any> from describeConformance.tsx (#44639) @sai6855
+
+All contributors of this release in alphabetical order: @albarv340, @arishoham, @DiegoAndai, @joserodolfofreitas, @MBilalShafi, @mnajdova, @oliviertassinari, @sai6855, @samuelsycamore, @siriwatknp, @ZeeshanTamboli
+
 ## 6.1.9
 
 <!-- generated comparing v6.1.8..master -->

package/ClickAwayListener/ClickAwayListener.js

@@ -6,7 +6,6 @@ import { elementAcceptingRef, exactProp, unstable_ownerDocument as ownerDocument
 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";
 function mapEventPropToEvent(eventProp) {
   return eventProp.substring(2).toLowerCase();
 }
@@ -136,9 +135,7 @@ function ClickAwayListener(props) {
     }
     return undefined;
   }, [handleClickAway, mouseEvent]);
-  return /*#__PURE__*/_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/FilledInput/FilledInput.js

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

package/FormHelperText/FormHelperText.js

@@ -120,6 +120,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__*/_jsx("span", {
       className: "notranslate",
+      "aria-hidden": true,
       children: "\u200B"
     })) : children
   });

package/Grid/Grid.js

@@ -167,7 +167,7 @@ export function generateRowGap({
       const themeSpacing = theme.spacing(propValue);
       if (themeSpacing !== '0px') {
         return {
-          marginTop: `-${themeSpacing}`,
+          marginTop: `calc(-1 * ${themeSpacing})`,
           [`& > .${gridClasses.item}`]: {
             paddingTop: themeSpacing
           }
@@ -212,7 +212,7 @@ export 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/Grid2/Grid2.js

@@ -5,6 +5,7 @@ import { createGrid as createGrid2 } from '@mui/system/Grid';
 import requirePropFactory from "../utils/requirePropFactory.js";
 import { styled } from "../styles/index.js";
 import { useDefaultProps } from "../DefaultPropsProvider/index.js";
+import useTheme from "../styles/useTheme.js";
 /**
  *
  * Demos:
@@ -19,13 +20,19 @@ const Grid2 = createGrid2({
   createStyledComponent: 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 => useDefaultProps({
     props: inProps,
     name: 'MuiGrid2'
-  })
+  }),
+  useTheme
 });
 process.env.NODE_ENV !== "production" ? Grid2.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/Hidden/HiddenJs.js

@@ -1,6 +1,5 @@
 'use client';
 
-import * as React from 'react';
 import PropTypes from 'prop-types';
 import exactProp from '@mui/utils/exactProp';
 import withWidth, { isWidthDown, isWidthUp } from "./withWidth.js";
@@ -9,7 +8,6 @@ import useTheme from "../styles/useTheme.js";
 /**
  * @ignore - internal component.
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 function HiddenJs(props) {
   const {
     children,
@@ -50,11 +48,9 @@ function HiddenJs(props) {
   if (!visible) {
     return null;
   }
-  return /*#__PURE__*/_jsx(React.Fragment, {
-    children: children
-  });
+  return children;
 }
-process.env.NODE_ENV !== "production" ? HiddenJs.propTypes = {
+HiddenJs.propTypes = {
   /**
    * The content of the component.
    */
@@ -118,8 +114,8 @@ process.env.NODE_ENV !== "production" ? HiddenJs.propTypes = {
    */
   // eslint-disable-next-line react/no-unused-prop-types
   xsUp: PropTypes.bool
-} : void 0;
+};
 if (process.env.NODE_ENV !== 'production') {
-  process.env.NODE_ENV !== "production" ? HiddenJs.propTypes = exactProp(HiddenJs.propTypes) : void 0;
+  HiddenJs.propTypes = exactProp(HiddenJs.propTypes);
 }
 export default withWidth()(HiddenJs);

package/InputAdornment/InputAdornment.js

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

package/ListItemText/ListItemText.d.ts

@@ -3,11 +3,44 @@ import { SxProps } from '@mui/system';
 import { InternalStandardProps as StandardProps, Theme } from '..';
 import { TypographyProps } from '../Typography';
 import { ListItemTextClasses } from './listItemTextClasses';
+import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
+
+export interface ListItemTextSlots {
+  /**
+   * The component that renders the primary slot.
+   * @default Typography
+   */
+  primary?: React.ElementType;
+  /**
+   * The component that renders the secondary slot.
+   * @default Typography
+   */
+  secondary?: React.ElementType;
+}
+
+export type ListItemTextSlotsAndSlotProps = CreateSlotsAndSlotProps<
+  ListItemTextSlots,
+  {
+    /**
+     * Props forwared to the primary slot (as long as disableTypography is not `true`)
+     * By default, the available props are based on the [Typography](https://mui.com/material-ui/api/typography/#props) component
+     */
+    primary: SlotProps<React.ElementType<TypographyProps>, {}, ListItemTextOwnerState>;
+    /**
+     * Props forwarded to the secondary slot (as long as disableTypography is not `true`)
+     * By default, the available props are based on the [Typography](https://mui.com/material-ui/api/typography/#props) component
+     */
+    secondary: SlotProps<React.ElementType<TypographyProps>, {}, ListItemTextOwnerState>;
+  }
+>;
+
+export interface ListItemTextOwnerState extends ListItemTextProps {}
 
 export interface ListItemTextProps<
   PrimaryTypographyComponent extends React.ElementType = 'span',
   SecondaryTypographyComponent extends React.ElementType = 'p',
-> extends StandardProps<React.HTMLAttributes<HTMLDivElement>> {
+> extends StandardProps<React.HTMLAttributes<HTMLDivElement>>,
+    ListItemTextSlotsAndSlotProps {
   /**
    * Alias for the `primary` prop.
    */
@@ -37,6 +70,7 @@ export interface ListItemTextProps<
   /**
    * 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?: TypographyProps<
     PrimaryTypographyComponent,
@@ -49,6 +83,7 @@ export interface ListItemTextProps<
   /**
    * 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?: TypographyProps<
     SecondaryTypographyComponent,

package/ListItemText/ListItemText.js

@@ -9,6 +9,7 @@ import ListContext from "../List/ListContext.js";
 import { styled } from "../zero-styled/index.js";
 import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import listItemTextClasses, { getListItemTextUtilityClass } from "./listItemTextClasses.js";
+import useSlot from "../utils/useSlot.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -80,6 +81,8 @@ const ListItemText = /*#__PURE__*/React.forwardRef(function ListItemText(inProps
     primaryTypographyProps,
     secondary: secondaryProp,
     secondaryTypographyProps,
+    slots = {},
+    slotProps = {},
     ...other
   } = props;
   const {
@@ -96,21 +99,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] = useSlot('primary', {
+    className: classes.primary,
+    elementType: Typography,
+    externalForwardedProps,
+    ownerState
+  });
+  const [SecondarySlot, secondarySlotProps] = useSlot('secondary', {
+    className: classes.secondary,
+    elementType: Typography,
+    externalForwardedProps,
+    ownerState
+  });
   if (primary != null && primary.type !== Typography && !disableTypography) {
-    primary = /*#__PURE__*/_jsx(Typography, {
+    primary = /*#__PURE__*/_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 && !disableTypography) {
-    secondary = /*#__PURE__*/_jsx(Typography, {
+    secondary = /*#__PURE__*/_jsx(SecondarySlot, {
       variant: "body2",
-      className: classes.secondary,
       color: "textSecondary",
-      ...secondaryTypographyProps,
+      ...secondarySlotProps,
       children: secondary
     });
   }
@@ -160,6 +181,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.object,
   /**
@@ -169,8 +191,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.object,
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    primary: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    secondary: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    primary: PropTypes.elementType,
+    secondary: PropTypes.elementType
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/Modal/useModal.js

@@ -10,6 +10,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.
@@ -181,8 +182,8 @@ function useModal(parameters) {
       }
     };
     return {
-      onEnter: createChainedFunction(handleEnter, children?.props.onEnter),
-      onExited: createChainedFunction(handleExited, children?.props.onExited)
+      onEnter: createChainedFunction(handleEnter, children?.props.onEnter ?? noop),
+      onExited: createChainedFunction(handleExited, children?.props.onExited ?? noop)
     };
   };
   return {

package/Modal/useModal.types.d.ts

@@ -17,7 +17,11 @@ export type UseModalParameters = {
     /**
      * A single child content element.
      */
-    children: React.ReactElement<any> | undefined | null;
+    children: React.ReactElement<{
+        in?: boolean;
+        onEnter?: (this: unknown) => void;
+        onExited?: (this: unknown) => void;
+    }> | undefined | null;
     /**
      * When set to true the Modal waits until a nested Transition is completed before closing.
      * @default false

package/NoSsr/NoSsr.js

@@ -3,7 +3,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { exactProp, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
-import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * NoSsr purposely removes components from the subject of Server Side Rendering (SSR).
  *
@@ -40,10 +39,8 @@ function NoSsr(props) {
     }
   }, [defer]);
 
-  // We need the Fragment here to force react-docgen to recognise NoSsr as a component.
-  return /*#__PURE__*/_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/OutlinedInput/NotchedOutline.js

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

package/PigmentGrid/PigmentGrid.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import Grid from '@mui/material-pigment-css/Grid';
 import composeClasses from '@mui/utils/composeClasses';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
-import { generateDirectionClasses, generateSizeClassNames, generateSpacingClassNames } from '@mui/system/Grid/gridGenerator';
+import { unstable_generateDirectionClasses as generateDirectionClasses, unstable_generateSizeClassNames as generateSizeClassNames, unstable_generateSpacingClassNames as generateSpacingClassNames } from '@mui/system/Grid';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {

package/Portal/Portal.js

@@ -4,7 +4,6 @@ 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_getReactElementRef as getReactElementRef } from '@mui/utils';
-import { jsx as _jsx } from "react/jsx-runtime";
 function getContainer(container) {
   return typeof container === 'function' ? container() : container;
 }
@@ -50,13 +49,9 @@ const Portal = /*#__PURE__*/React.forwardRef(function Portal(props, forwardedRef
       };
       return /*#__PURE__*/React.cloneElement(children, newProps);
     }
-    return /*#__PURE__*/_jsx(React.Fragment, {
-      children: children
-    });
+    return children;
   }
-  return /*#__PURE__*/_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/Select/SelectInput.js

@@ -462,6 +462,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__*/_jsx("span", {
         className: "notranslate",
+        "aria-hidden": true,
         children: "\u200B"
       })) : display
     }), /*#__PURE__*/_jsx(SelectNativeInput, {

package/Slider/SliderValueLabel.d.ts

@@ -3,7 +3,10 @@ import { SliderValueLabelProps } from './SliderValueLabel.types';
 /**
  * @ignore - internal component.
  */
-declare function SliderValueLabel(props: SliderValueLabelProps): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+declare function SliderValueLabel(props: SliderValueLabelProps): React.ReactElement<{
+    className?: string;
+    children?: React.ReactNode;
+}, string | React.JSXElementConstructor<any>> | null;
 declare namespace SliderValueLabel {
     var propTypes: any;
 }

package/Slider/SliderValueLabel.types.d.ts

@@ -1,5 +1,8 @@
 export interface SliderValueLabelProps {
-    children?: React.ReactElement<any>;
+    children?: React.ReactElement<{
+        className?: string;
+        children?: React.ReactNode;
+    }>;
     className?: string;
     style?: React.CSSProperties;
     /**