@mui/material 6.1.4 → 6.1.6

package/Autocomplete/Autocomplete.d.ts

@@ -81,6 +81,7 @@ export interface AutocompleteRenderInputParams {
     className: string;
     startAdornment: React.ReactNode;
     endAdornment: React.ReactNode;
+    onMouseDown: React.MouseEventHandler;
   };
   inputProps: ReturnType<ReturnType<typeof useAutocomplete>['getInputProps']>;
 }

package/Autocomplete/Autocomplete.js

@@ -533,7 +533,6 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
   const classes = useUtilityClasses(ownerState);
   const externalForwardedProps = {
     slots: {
-      listbox: ListboxComponentProp,
       paper: PaperComponentProp,
       popper: PopperComponentProp,
       ...slots
@@ -546,7 +545,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     }
   };
   const [ListboxSlot, listboxProps] = useSlot('listbox', {
-    elementType: 'ul',
+    elementType: AutocompleteListbox,
     externalForwardedProps,
     ownerState,
     className: classes.listbox,
@@ -662,8 +661,12 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
   });
   let autocompletePopper = null;
   if (groupedOptions.length > 0) {
-    autocompletePopper = renderAutocompletePopperChildren(/*#__PURE__*/_jsx(AutocompleteListbox, {
-      as: ListboxSlot,
+    autocompletePopper = renderAutocompletePopperChildren(
+    /*#__PURE__*/
+    // TODO v7: remove `as` prop and move ListboxComponentProp to externalForwardedProps or remove ListboxComponentProp entirely
+    // https://github.com/mui/material-ui/pull/43994#issuecomment-2401945800
+    _jsx(ListboxSlot, {
+      as: ListboxComponentProp,
       ...listboxProps,
       children: groupedOptions.map((option, index) => {
         if (groupBy) {
@@ -710,7 +713,11 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
           ref: setAnchorEl,
           className: classes.inputRoot,
           startAdornment,
-          onMouseDown: event => handleInputMouseDown(event),
+          onMouseDown: event => {
+            if (event.target === event.currentTarget) {
+              handleInputMouseDown(event);
+            }
+          },
           ...((hasClearIcon || hasPopupIcon) && {
             endAdornment: /*#__PURE__*/_jsxs(AutocompleteEndAdornment, {
               className: classes.endAdornment,

package/AvatarGroup/AvatarGroup.js

@@ -107,11 +107,7 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
     className: classes.avatar,
     ownerState,
     additionalProps: {
-      variant,
-      style: {
-        '--AvatarRoot-spacing': marginValue ? `${marginValue}px` : undefined,
-        ...other.style
-      }
+      variant
     }
   });
   return /*#__PURE__*/_jsxs(AvatarGroupRoot, {
@@ -120,6 +116,10 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
     className: clsx(classes.root, className),
     ref: ref,
     ...other,
+    style: {
+      '--AvatarGroup-spacing': marginValue ? `${marginValue}px` : undefined,
+      ...other.style
+    },
     children: [extraAvatars ? /*#__PURE__*/_jsx(SurplusSlot, {
       ...surplusProps,
       children: extraAvatarsElement

package/CHANGELOG.md

@@ -1,5 +1,105 @@
 # [Versions](https://mui.com/versions/)
 
+## 6.1.6
+
+<!-- generated comparing v6.1.5..master -->
+
+_Oct 30, 2024_
+
+A big thanks to the 13 contributors who made this release possible.
+
+### `@mui/material@6.1.6`
+
+- [Autocomplete] Add missing `onMouseDown` type to AutocompleteRenderInputParams (#44183) @sai6855
+- [Avatar] Fix AvatarGroup spacing (#44208) @aarongarciah
+- [AvatarGroup] Fix spacing CSS variable (#44202) @navedqb
+- [Divider] Fix CSS specificity order (#44204) @o-alexandrov
+- [Slider] Fix value prop type warning (#44131) @joshkel
+- Replace `useThemeProps` with `useDefaultProps` (#44193) @siriwatknp
+
+### `@mui/material-nextjs@6.1.6`
+
+- Support Next 15.0.0 (#42428) @nphmuller
+
+### `@mui/lab@6.0.0-beta.14`
+
+- [Tabs] Fix type of TabPanel component (#44207) @blackcow1987
+
+### `@mui/codemod@6.1.6`
+
+- Fix system props default import specifier (#44170) @siriwatknp
+
+### `@mui/utils@6.1.6`
+
+- Bring back useIsFocusVisible (#44256) @aarongarciah
+- Bring back getReactNodeRef (#44248) @aarongarciah
+
+### Docs
+
+- [material-ui][Avatar] Add AvatarGroup spacing demo (#44209) @aarongarciah
+- Fix a typo in CONTRIBUTING.md (#44200) @prakhargupta1
+- Mark the Hidden component as deprecated in the sidenav (#44068) @jimmycallin
+- Use () when referencing functions (#44184) @oliviertassinari
+- Follow types description convention (#44187) @oliviertassinari
+
+### Core
+
+- Lock file maintenance (#43947)
+- Run @mui/icon-material src:icons (#44097) @oliviertassinari
+- [test][material-ui] Add tests for Pigment Grid and Stack (#44132) @DiegoAndai
+- [test] Distinguish private with public tests API (#44188) @oliviertassinari
+- [docs-infra] Add recursively the relative modules in the demos (#44150) @mnajdova
+
+All contributors of this release in alphabetical order: @aarongarciah, @blackcow1987, @DiegoAndai, @jimmycallin, @joshkel, @mnajdova, @navedqb, @nphmuller, @o-alexandrov, @oliviertassinari, @prakhargupta1, @sai6855, @siriwatknp
+
+## 6.1.5
+
+<!-- generated comparing v6.1.4..master -->
+
+_Oct 22, 2024_
+
+A big thanks to the 9 contributors who made this release possible.
+
+### `@mui/material@6.1.5`
+
+- [Autocomplete] Fix bug with child chip button events propagating to parent (#43982) @snapwich
+- [Autocomplete] Fix Autocomplete crashing if ownerState is used in styleOverrides (#43994) @sai6855
+- [Checkbox] Fix disableRipple regression (#44099) @siriwatknp
+- [Dialog] Add the aria-modal="true" by default (#44118) @mnajdova
+- [IconButton] Fix disableRipple behavior when disableRipple is set in MuiButtonBase theme (#43714) @sai6855
+- [pigment-css] Support project without enabling CSS variables (#44171) @siriwatknp
+- Make the palette always return new light and dark object (#44059) @siriwatknp
+
+### `@mui/system@6.1.5`
+
+- Add `defaultMode` to `InitColorSchemeScript` (#44139) @siriwatknp
+
+### `@mui/codemod@6.1.5`
+
+- [Grid2] Add removal `zeroMinWidth` prop to codemod (#44178) @sai6855
+
+### Docs
+
+- [material-ui][FormControlLabel] Don't use unintuitive label position on chec… (#44119) @mnajdova
+- [material-ui][TextField] Dynamically modify the eye password button aria-label (#44122) @ChinoUkaegbu
+- [icons] Run pnpm docs:mdicons:synonyms (#44098) @oliviertassinari
+- [joy-ui] Update Overview copy to match Readme (#44136) @samuelsycamore
+- Add CodeSandbox/Stackblitz to the rest of the templates (#43708) @siriwatknp
+- Update Figma link to fix 301 (a7b7d9c) @oliviertassinari
+- Link Toolpad from Core repo (#44111) @prakhargupta1
+- Remove HighlightedCode max-width (#43731) @Janpot
+
+### Core
+
+- [code-infra] Widen eslint file patterns (#44148) @Janpot
+- [code-infra] Fix icon builder tests (#44143) @Janpot
+- [code-infra] Fix dependabot vulnerabilities (#44124) @Janpot
+- [core] Reference commits in changelog when no PR (#44115) @oliviertassinari
+- [examples] Fix Pigment CSS Vite example (#44074) @oliviertassinari
+- Fix fast-xml-parser vulnerability (#44121) @Janpot
+
+All contributors of this release in alphabetical order: @ChinoUkaegbu, @Janpot, @mnajdova, @oliviertassinari, @prakhargupta1, @sai6855, @samuelsycamore, @siriwatknp, @snapwich
+
 ## v6.1.4
 
 <!-- generated comparing v6.1.3..master -->
@@ -310,7 +410,7 @@ A big thanks to the 11 contributors who made this release possible.
 
 ### `@mui/material@6.0.2`
 
-- Fix `createTheme` with just color schemes (#43518) @siriwatknp
+- Fix `createTheme()` with just color schemes (#43518) @siriwatknp
 - [Menu,Popover] Fix Backdrop props descriptions (#43503) @Michael-Hutchinson
 - [MenuList] Do not react to an event with modifier key pressed (#43505) @MateuszGroth
 
@@ -1052,7 +1152,7 @@ A big thanks to the 18 contributors who made this release possible.
 
 ### Docs
 
-- Add `theme.applyStyles` and migrate docs (#42498) @siriwatknp
+- Add `theme.applyStyles()` and migrate docs (#42498) @siriwatknp
 - Fix dashboard template console error (#42594) @oliviertassinari
 - Migrate system props to `sx` prop (#42475) @siriwatknp
 - [material-ui]Fix duplicated sentence (#42521) @alexfauquette

package/Container/Container.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { createContainer } from '@mui/system';
 import capitalize from "../utils/capitalize.js";
 import styled from "../styles/styled.js";
-import useThemeProps from "../styles/useThemeProps.js";
+import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 const Container = createContainer({
   createStyledComponent: styled('div', {
     name: 'MuiContainer',
@@ -16,7 +16,7 @@ const Container = createContainer({
       return [styles.root, styles[`maxWidth${capitalize(String(ownerState.maxWidth))}`], ownerState.fixed && styles.fixed, ownerState.disableGutters && styles.disableGutters];
     }
   }),
-  useThemeProps: inProps => useThemeProps({
+  useThemeProps: inProps => useDefaultProps({
     props: inProps,
     name: 'MuiContainer'
   })

package/Dialog/Dialog.d.ts

@@ -15,6 +15,12 @@ export interface DialogProps extends StandardProps<ModalProps, 'children'> {
    * The id(s) of the element(s) that label the dialog.
    */
   'aria-labelledby'?: string;
+  /**
+   * Informs assistive technologies that the element is modal.
+   * It's added on the element with role="dialog".
+   * @default true
+   */
+  'aria-modal'?: boolean | 'true' | 'false';
   /**
    * Dialog children, usually the included sub-components.
    */

package/Dialog/Dialog.js

@@ -202,6 +202,7 @@ const Dialog = /*#__PURE__*/React.forwardRef(function Dialog(inProps, ref) {
   const {
     'aria-describedby': ariaDescribedby,
     'aria-labelledby': ariaLabelledbyProp,
+    'aria-modal': ariaModal = true,
     BackdropComponent,
     BackdropProps,
     children,
@@ -296,6 +297,7 @@ const Dialog = /*#__PURE__*/React.forwardRef(function Dialog(inProps, ref) {
           role: "dialog",
           "aria-describedby": ariaDescribedby,
           "aria-labelledby": ariaLabelledby,
+          "aria-modal": ariaModal,
           ...PaperProps,
           className: clsx(classes.paper, PaperProps.className),
           ownerState: ownerState,
@@ -321,6 +323,12 @@ process.env.NODE_ENV !== "production" ? Dialog.propTypes /* remove-proptypes */
    * The id(s) of the element(s) that label the dialog.
    */
   'aria-labelledby': PropTypes.string,
+  /**
+   * Informs assistive technologies that the element is modal.
+   * It's added on the element with role="dialog".
+   * @default true
+   */
+  'aria-modal': PropTypes.oneOfType([PropTypes.oneOf(['false', 'true']), PropTypes.bool]),
   /**
    * A backdrop component. This prop enables custom backdrop rendering.
    * @deprecated Use `slots.backdrop` instead. While this prop currently works, it will be removed in the next major version.

package/Divider/Divider.js

@@ -111,7 +111,6 @@ const DividerRoot = styled('div', {
     }) => !!ownerState.children,
     style: {
       display: 'flex',
-      whiteSpace: 'nowrap',
       textAlign: 'center',
       border: 0,
       borderTopStyle: 'solid',
@@ -185,6 +184,7 @@ const DividerWrapper = styled('span', {
   display: 'inline-block',
   paddingLeft: `calc(${theme.spacing(1)} * 1.2)`,
   paddingRight: `calc(${theme.spacing(1)} * 1.2)`,
+  whiteSpace: 'nowrap',
   variants: [{
     props: {
       orientation: 'vertical'

package/Grid/Grid.js

@@ -18,7 +18,7 @@ import { extendSxProp } from '@mui/system/styleFunctionSx';
 import composeClasses from '@mui/utils/composeClasses';
 import requirePropFactory from "../utils/requirePropFactory.js";
 import styled from "../styles/styled.js";
-import useThemeProps from "../styles/useThemeProps.js";
+import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import useTheme from "../styles/useTheme.js";
 import GridContext from "./GridContext.js";
 import gridClasses, { getGridUtilityClass } from "./gridClasses.js";
@@ -367,7 +367,7 @@ const useUtilityClasses = ownerState => {
  * @deprecated Use the [`Grid2`](https://mui.com/material-ui/react-grid2/) component instead.
  */
 const Grid = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
-  const themeProps = useThemeProps({
+  const themeProps = useDefaultProps({
     props: inProps,
     name: 'MuiGrid'
   });

package/Grid2/Grid2.js

@@ -3,7 +3,8 @@
 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";
+import { styled } from "../styles/index.js";
+import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 /**
  *
  * Demos:
@@ -21,7 +22,7 @@ const Grid2 = createGrid2({
     overridesResolver: (props, styles) => styles.root
   }),
   componentName: 'MuiGrid2',
-  useThemeProps: inProps => useThemeProps({
+  useThemeProps: inProps => useDefaultProps({
     props: inProps,
     name: 'MuiGrid2'
   })

package/NativeSelect/NativeSelect.js

@@ -9,7 +9,7 @@ import formControlState from "../FormControl/formControlState.js";
 import useFormControl from "../FormControl/useFormControl.js";
 import ArrowDropDownIcon from "../internal/svg-icons/ArrowDropDown.js";
 import Input from "../Input/index.js";
-import useThemeProps from "../styles/useThemeProps.js";
+import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import { getNativeSelectUtilityClasses } from "./nativeSelectClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
@@ -26,7 +26,7 @@ const defaultInput = /*#__PURE__*/_jsx(Input, {});
  * An alternative to `<Select native />` with a much smaller bundle size footprint.
  */
 const NativeSelect = /*#__PURE__*/React.forwardRef(function NativeSelect(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     name: 'MuiNativeSelect',
     props: inProps
   });

package/Select/Select.js

@@ -13,7 +13,7 @@ import Input from "../Input/index.js";
 import NativeSelectInput from "../NativeSelect/NativeSelectInput.js";
 import FilledInput from "../FilledInput/index.js";
 import OutlinedInput from "../OutlinedInput/index.js";
-import useThemeProps from "../styles/useThemeProps.js";
+import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import useForkRef from "../utils/useForkRef.js";
 import { styled } from "../zero-styled/index.js";
 import rootShouldForwardProp from "../styles/rootShouldForwardProp.js";
@@ -34,7 +34,7 @@ const StyledInput = styled(Input, styledRootConfig)('');
 const StyledOutlinedInput = styled(OutlinedInput, styledRootConfig)('');
 const StyledFilledInput = styled(FilledInput, styledRootConfig)('');
 const Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     name: 'MuiSelect',
     props: inProps
   });

package/Slider/Slider.d.ts

@@ -284,7 +284,7 @@ export interface SliderValueLabelProps extends React.HTMLAttributes<HTMLSpanElem
   children: React.ReactElement<unknown>;
   index: number;
   open: boolean;
-  value: number;
+  value: React.ReactNode;
 }
 
 type SliderRootProps = NonNullable<SliderTypeMap['props']['componentsProps']>['root'];

package/Slider/Slider.js

@@ -440,7 +440,7 @@ process.env.NODE_ENV !== "production" ? SliderValueLabel.propTypes /* remove-pro
   /**
    * @ignore
    */
-  value: PropTypes.number.isRequired
+  value: PropTypes.node
 } : void 0;
 export { SliderValueLabel };
 export const SliderMark = styled('span', {
@@ -901,7 +901,7 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes /* remove-proptypes */
       className: PropTypes.string,
       open: PropTypes.bool,
       style: PropTypes.object,
-      value: PropTypes.number,
+      value: PropTypes.node,
       valueLabelDisplay: PropTypes.oneOf(['auto', 'off', 'on'])
     })])
   }),
@@ -1018,7 +1018,7 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes /* remove-proptypes */
       className: PropTypes.string,
       open: PropTypes.bool,
       style: PropTypes.object,
-      value: PropTypes.number,
+      value: PropTypes.node,
       valueLabelDisplay: PropTypes.oneOf(['auto', 'off', 'on'])
     })])
   }),

package/Slider/SliderValueLabel.types.d.ts

@@ -8,9 +8,8 @@ export interface SliderValueLabelProps {
     open: boolean;
     /**
      * The value of the slider.
-     * For ranged sliders, provide an array with two values.
      */
-    value: number;
+    value: React.ReactNode;
     /**
      * Controls when the value label is displayed:
      *

package/Stack/Stack.js

@@ -3,14 +3,14 @@
 import PropTypes from 'prop-types';
 import { createStack } from '@mui/system';
 import styled from "../styles/styled.js";
-import useThemeProps from "../styles/useThemeProps.js";
+import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 const Stack = createStack({
   createStyledComponent: styled('div', {
     name: 'MuiStack',
     slot: 'Root',
     overridesResolver: (props, styles) => styles.root
   }),
-  useThemeProps: inProps => useThemeProps({
+  useThemeProps: inProps => useDefaultProps({
     props: inProps,
     name: 'MuiStack'
   })

package/index.js

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

package/modern/Autocomplete/Autocomplete.js

@@ -533,7 +533,6 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
   const classes = useUtilityClasses(ownerState);
   const externalForwardedProps = {
     slots: {
-      listbox: ListboxComponentProp,
       paper: PaperComponentProp,
       popper: PopperComponentProp,
       ...slots
@@ -546,7 +545,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     }
   };
   const [ListboxSlot, listboxProps] = useSlot('listbox', {
-    elementType: 'ul',
+    elementType: AutocompleteListbox,
     externalForwardedProps,
     ownerState,
     className: classes.listbox,
@@ -662,8 +661,12 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
   });
   let autocompletePopper = null;
   if (groupedOptions.length > 0) {
-    autocompletePopper = renderAutocompletePopperChildren(/*#__PURE__*/_jsx(AutocompleteListbox, {
-      as: ListboxSlot,
+    autocompletePopper = renderAutocompletePopperChildren(
+    /*#__PURE__*/
+    // TODO v7: remove `as` prop and move ListboxComponentProp to externalForwardedProps or remove ListboxComponentProp entirely
+    // https://github.com/mui/material-ui/pull/43994#issuecomment-2401945800
+    _jsx(ListboxSlot, {
+      as: ListboxComponentProp,
       ...listboxProps,
       children: groupedOptions.map((option, index) => {
         if (groupBy) {
@@ -710,7 +713,11 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
           ref: setAnchorEl,
           className: classes.inputRoot,
           startAdornment,
-          onMouseDown: event => handleInputMouseDown(event),
+          onMouseDown: event => {
+            if (event.target === event.currentTarget) {
+              handleInputMouseDown(event);
+            }
+          },
           ...((hasClearIcon || hasPopupIcon) && {
             endAdornment: /*#__PURE__*/_jsxs(AutocompleteEndAdornment, {
               className: classes.endAdornment,

package/modern/AvatarGroup/AvatarGroup.js

@@ -107,11 +107,7 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
     className: classes.avatar,
     ownerState,
     additionalProps: {
-      variant,
-      style: {
-        '--AvatarRoot-spacing': marginValue ? `${marginValue}px` : undefined,
-        ...other.style
-      }
+      variant
     }
   });
   return /*#__PURE__*/_jsxs(AvatarGroupRoot, {
@@ -120,6 +116,10 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
     className: clsx(classes.root, className),
     ref: ref,
     ...other,
+    style: {
+      '--AvatarGroup-spacing': marginValue ? `${marginValue}px` : undefined,
+      ...other.style
+    },
     children: [extraAvatars ? /*#__PURE__*/_jsx(SurplusSlot, {
       ...surplusProps,
       children: extraAvatarsElement

package/modern/Container/Container.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { createContainer } from '@mui/system';
 import capitalize from "../utils/capitalize.js";
 import styled from "../styles/styled.js";
-import useThemeProps from "../styles/useThemeProps.js";
+import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 const Container = createContainer({
   createStyledComponent: styled('div', {
     name: 'MuiContainer',
@@ -16,7 +16,7 @@ const Container = createContainer({
       return [styles.root, styles[`maxWidth${capitalize(String(ownerState.maxWidth))}`], ownerState.fixed && styles.fixed, ownerState.disableGutters && styles.disableGutters];
     }
   }),
-  useThemeProps: inProps => useThemeProps({
+  useThemeProps: inProps => useDefaultProps({
     props: inProps,
     name: 'MuiContainer'
   })

package/modern/Dialog/Dialog.js

@@ -202,6 +202,7 @@ const Dialog = /*#__PURE__*/React.forwardRef(function Dialog(inProps, ref) {
   const {
     'aria-describedby': ariaDescribedby,
     'aria-labelledby': ariaLabelledbyProp,
+    'aria-modal': ariaModal = true,
     BackdropComponent,
     BackdropProps,
     children,
@@ -296,6 +297,7 @@ const Dialog = /*#__PURE__*/React.forwardRef(function Dialog(inProps, ref) {
           role: "dialog",
           "aria-describedby": ariaDescribedby,
           "aria-labelledby": ariaLabelledby,
+          "aria-modal": ariaModal,
           ...PaperProps,
           className: clsx(classes.paper, PaperProps.className),
           ownerState: ownerState,
@@ -321,6 +323,12 @@ process.env.NODE_ENV !== "production" ? Dialog.propTypes /* remove-proptypes */
    * The id(s) of the element(s) that label the dialog.
    */
   'aria-labelledby': PropTypes.string,
+  /**
+   * Informs assistive technologies that the element is modal.
+   * It's added on the element with role="dialog".
+   * @default true
+   */
+  'aria-modal': PropTypes.oneOfType([PropTypes.oneOf(['false', 'true']), PropTypes.bool]),
   /**
    * A backdrop component. This prop enables custom backdrop rendering.
    * @deprecated Use `slots.backdrop` instead. While this prop currently works, it will be removed in the next major version.

package/modern/Divider/Divider.js

@@ -111,7 +111,6 @@ const DividerRoot = styled('div', {
     }) => !!ownerState.children,
     style: {
       display: 'flex',
-      whiteSpace: 'nowrap',
       textAlign: 'center',
       border: 0,
       borderTopStyle: 'solid',
@@ -185,6 +184,7 @@ const DividerWrapper = styled('span', {
   display: 'inline-block',
   paddingLeft: `calc(${theme.spacing(1)} * 1.2)`,
   paddingRight: `calc(${theme.spacing(1)} * 1.2)`,
+  whiteSpace: 'nowrap',
   variants: [{
     props: {
       orientation: 'vertical'

package/modern/Grid/Grid.js

@@ -18,7 +18,7 @@ import { extendSxProp } from '@mui/system/styleFunctionSx';
 import composeClasses from '@mui/utils/composeClasses';
 import requirePropFactory from "../utils/requirePropFactory.js";
 import styled from "../styles/styled.js";
-import useThemeProps from "../styles/useThemeProps.js";
+import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import useTheme from "../styles/useTheme.js";
 import GridContext from "./GridContext.js";
 import gridClasses, { getGridUtilityClass } from "./gridClasses.js";
@@ -367,7 +367,7 @@ const useUtilityClasses = ownerState => {
  * @deprecated Use the [`Grid2`](https://mui.com/material-ui/react-grid2/) component instead.
  */
 const Grid = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
-  const themeProps = useThemeProps({
+  const themeProps = useDefaultProps({
     props: inProps,
     name: 'MuiGrid'
   });

package/modern/Grid2/Grid2.js

@@ -3,7 +3,8 @@
 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";
+import { styled } from "../styles/index.js";
+import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 /**
  *
  * Demos:
@@ -21,7 +22,7 @@ const Grid2 = createGrid2({
     overridesResolver: (props, styles) => styles.root
   }),
   componentName: 'MuiGrid2',
-  useThemeProps: inProps => useThemeProps({
+  useThemeProps: inProps => useDefaultProps({
     props: inProps,
     name: 'MuiGrid2'
   })

package/modern/NativeSelect/NativeSelect.js

@@ -9,7 +9,7 @@ import formControlState from "../FormControl/formControlState.js";
 import useFormControl from "../FormControl/useFormControl.js";
 import ArrowDropDownIcon from "../internal/svg-icons/ArrowDropDown.js";
 import Input from "../Input/index.js";
-import useThemeProps from "../styles/useThemeProps.js";
+import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import { getNativeSelectUtilityClasses } from "./nativeSelectClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
@@ -26,7 +26,7 @@ const defaultInput = /*#__PURE__*/_jsx(Input, {});
  * An alternative to `<Select native />` with a much smaller bundle size footprint.
  */
 const NativeSelect = /*#__PURE__*/React.forwardRef(function NativeSelect(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     name: 'MuiNativeSelect',
     props: inProps
   });

package/modern/Select/Select.js

@@ -13,7 +13,7 @@ import Input from "../Input/index.js";
 import NativeSelectInput from "../NativeSelect/NativeSelectInput.js";
 import FilledInput from "../FilledInput/index.js";
 import OutlinedInput from "../OutlinedInput/index.js";
-import useThemeProps from "../styles/useThemeProps.js";
+import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import useForkRef from "../utils/useForkRef.js";
 import { styled } from "../zero-styled/index.js";
 import rootShouldForwardProp from "../styles/rootShouldForwardProp.js";
@@ -34,7 +34,7 @@ const StyledInput = styled(Input, styledRootConfig)('');
 const StyledOutlinedInput = styled(OutlinedInput, styledRootConfig)('');
 const StyledFilledInput = styled(FilledInput, styledRootConfig)('');
 const Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     name: 'MuiSelect',
     props: inProps
   });