@mui/material 9.0.0-alpha.4 → 9.0.0-beta.1

package/internal/SwitchBase.mjs

@@ -2,7 +2,6 @@
 
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import refType from '@mui/utils/refType';
 import composeClasses from '@mui/utils/composeClasses';
 import capitalize from "../utils/capitalize.mjs";
 import rootShouldForwardProp from "../styles/rootShouldForwardProp.mjs";
@@ -95,8 +94,6 @@ const SwitchBase = /*#__PURE__*/React.forwardRef(function SwitchBase(props, ref)
     edge = false,
     icon,
     id,
-    inputProps,
-    inputRef,
     name,
     onBlur,
     onChange,
@@ -110,6 +107,10 @@ const SwitchBase = /*#__PURE__*/React.forwardRef(function SwitchBase(props, ref)
     slotProps = {},
     ...other
   } = props;
+  const {
+    nativeButton,
+    ...buttonBaseProps
+  } = other;
   const [checked, setCheckedState] = useControlled({
     controlled: checkedProp,
     default: Boolean(defaultChecked),
@@ -162,10 +163,7 @@ const SwitchBase = /*#__PURE__*/React.forwardRef(function SwitchBase(props, ref)
   const classes = useUtilityClasses(ownerState);
   const externalForwardedProps = {
     slots,
-    slotProps: {
-      input: inputProps,
-      ...slotProps
-    }
+    slotProps
   };
   const [RootSlot, rootSlotProps] = useSlot('root', {
     ref,
@@ -175,7 +173,7 @@ const SwitchBase = /*#__PURE__*/React.forwardRef(function SwitchBase(props, ref)
     externalForwardedProps: {
       ...externalForwardedProps,
       component: 'span',
-      ...other
+      ...buttonBaseProps
     },
     getSlotProps: handlers => ({
       ...handlers,
@@ -197,7 +195,6 @@ const SwitchBase = /*#__PURE__*/React.forwardRef(function SwitchBase(props, ref)
     }
   });
   const [InputSlot, inputSlotProps] = useSlot('input', {
-    ref: inputRef,
     elementType: SwitchBaseInput,
     className: classes.input,
     externalForwardedProps,
@@ -285,14 +282,6 @@ process.env.NODE_ENV !== "production" ? SwitchBase.propTypes = {
    * The id of the `input` element.
    */
   id: PropTypes.string,
-  /**
-   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#attributes) applied to the `input` element.
-   */
-  inputProps: PropTypes.object,
-  /**
-   * Pass a ref to the `input` element.
-   */
-  inputRef: refType,
   /*
    * @ignore
    */

package/locale/psAF.js

@@ -47,7 +47,7 @@ const psAF = exports.psAF = {
       defaultProps: {
         clearText: 'پاک کول',
         closeText: 'تړل',
-        loadingText: '... لوډ کیږی',
+        loadingText: '… لوډ کیږی',
         noOptionsText: 'بی پایلی',
         openText: 'خلاصول'
       }

package/locale/psAF.mjs

@@ -40,7 +40,7 @@ export const psAF = {
       defaultProps: {
         clearText: 'پاک کول',
         closeText: 'تړل',
-        loadingText: '... لوډ کیږی',
+        loadingText: '… لوډ کیږی',
         noOptionsText: 'بی پایلی',
         openText: 'خلاصول'
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "9.0.0-alpha.4",
+  "version": "9.0.0-beta.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.",
   "keywords": [
@@ -25,7 +25,7 @@
     "url": "https://opencollective.com/mui-org"
   },
   "dependencies": {
-    "@babel/runtime": "^7.28.6",
+    "@babel/runtime": "^7.29.2",
     "@popperjs/core": "^2.11.8",
     "@types/react-transition-group": "^4.4.12",
     "clsx": "^2.1.1",
@@ -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-alpha.4",
-    "@mui/types": "^9.0.0-alpha.3",
-    "@mui/system": "9.0.0-alpha.4",
-    "@mui/utils": "9.0.0-alpha.4"
+    "@mui/system": "9.0.0-beta.1",
+    "@mui/utils": "9.0.0-beta.1",
+    "@mui/types": "^9.0.0-beta.0",
+    "@mui/core-downloads-tracker": "^9.0.0-beta.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-alpha.4"
+    "@mui/material-pigment-css": "9.0.0-beta.1"
   },
   "peerDependenciesMeta": {
     "@types/react": {

package/styles/createThemeWithVars.js

@@ -339,21 +339,21 @@ function createThemeWithVars(options = {}, ...args) {
       setColor(palette.TableCell, 'border', colorMix(_colorManipulator.private_safeDarken, (0, _colorManipulator.private_safeAlpha)(nativeColor ? getCssVar('palette-divider') : palette.divider, 1), 0.68));
       setColor(palette.Tooltip, 'bg', colorMix(_colorManipulator.private_safeAlpha, nativeColor ? getCssVar('palette-grey-700') : palette.grey[700], 0.92));
     }
+    if (!nativeColor) {
+      setColorChannel(palette.background, 'default');
 
-    // MUI X - DataGrid needs this token.
-    setColorChannel(palette.background, 'default');
-
-    // added for consistency with the `background.default` token
-    setColorChannel(palette.background, 'paper');
-    setColorChannel(palette.common, 'background');
-    setColorChannel(palette.common, 'onBackground');
-    setColorChannel(palette, 'divider');
+      // added for consistency with the `background.default` token
+      setColorChannel(palette.background, 'paper');
+      setColorChannel(palette.common, 'background');
+      setColorChannel(palette.common, 'onBackground');
+      setColorChannel(palette, 'divider');
+    }
     Object.keys(palette).forEach(color => {
       const colors = palette[color];
 
       // The default palettes (primary, secondary, error, info, success, and warning) errors are handled by the above `createTheme(...)`.
 
-      if (color !== 'tonalOffset' && colors && typeof colors === 'object') {
+      if (color !== 'tonalOffset' && !nativeColor && colors && typeof colors === 'object') {
         // Silent the error for custom palettes.
         if (colors.main) {
           setColor(palette[color], 'mainChannel', (0, _colorManipulator.private_safeColorChannel)(toRgb(colors.main)));
@@ -419,6 +419,7 @@ function createThemeWithVars(options = {}, ...args) {
       theme: this
     });
   };
+  theme.internal_cache = {};
   theme.toRuntimeSource = _stringifyTheme.stringifyTheme; // for Pigment CSS integration
 
   return theme;

package/styles/createThemeWithVars.mjs

@@ -329,21 +329,21 @@ export default function createThemeWithVars(options = {}, ...args) {
       setColor(palette.TableCell, 'border', colorMix(safeDarken, safeAlpha(nativeColor ? getCssVar('palette-divider') : palette.divider, 1), 0.68));
       setColor(palette.Tooltip, 'bg', colorMix(safeAlpha, nativeColor ? getCssVar('palette-grey-700') : palette.grey[700], 0.92));
     }
+    if (!nativeColor) {
+      setColorChannel(palette.background, 'default');
 
-    // MUI X - DataGrid needs this token.
-    setColorChannel(palette.background, 'default');
-
-    // added for consistency with the `background.default` token
-    setColorChannel(palette.background, 'paper');
-    setColorChannel(palette.common, 'background');
-    setColorChannel(palette.common, 'onBackground');
-    setColorChannel(palette, 'divider');
+      // added for consistency with the `background.default` token
+      setColorChannel(palette.background, 'paper');
+      setColorChannel(palette.common, 'background');
+      setColorChannel(palette.common, 'onBackground');
+      setColorChannel(palette, 'divider');
+    }
     Object.keys(palette).forEach(color => {
       const colors = palette[color];
 
       // The default palettes (primary, secondary, error, info, success, and warning) errors are handled by the above `createTheme(...)`.
 
-      if (color !== 'tonalOffset' && colors && typeof colors === 'object') {
+      if (color !== 'tonalOffset' && !nativeColor && colors && typeof colors === 'object') {
         // Silent the error for custom palettes.
         if (colors.main) {
           setColor(palette[color], 'mainChannel', safeColorChannel(toRgb(colors.main)));
@@ -409,6 +409,7 @@ export default function createThemeWithVars(options = {}, ...args) {
       theme: this
     });
   };
+  theme.internal_cache = {};
   theme.toRuntimeSource = stringifyTheme; // for Pigment CSS integration
 
   return theme;

package/styles/stringifyTheme.js

@@ -39,7 +39,7 @@ function stringifyTheme(baseTheme = {}) {
     // eslint-disable-next-line no-plusplus
     for (let index = 0; index < array.length; index++) {
       const [key, value] = array[index];
-      if (!isSerializable(value) || key.startsWith('unstable_')) {
+      if (!isSerializable(value) || key.startsWith('unstable_') || key.startsWith('internal_')) {
         delete object[key];
       } else if ((0, _deepmerge.isPlainObject)(value)) {
         object[key] = {

package/styles/stringifyTheme.mjs

@@ -32,7 +32,7 @@ export function stringifyTheme(baseTheme = {}) {
     // eslint-disable-next-line no-plusplus
     for (let index = 0; index < array.length; index++) {
       const [key, value] = array[index];
-      if (!isSerializable(value) || key.startsWith('unstable_')) {
+      if (!isSerializable(value) || key.startsWith('unstable_') || key.startsWith('internal_')) {
         delete object[key];
       } else if (isPlainObject(value)) {
         object[key] = {

package/useAutocomplete/useAutocomplete.js

@@ -965,6 +965,10 @@ function useAutocomplete(props) {
     if (!event.currentTarget.contains(event.target)) {
       return;
     }
+    // Don't interfere with interactions outside the input area (e.g. helper text)
+    if (anchorEl && !anchorEl.contains(event.target)) {
+      return;
+    }
     if (event.target.getAttribute('id') !== id) {
       event.preventDefault();
     }
@@ -976,6 +980,10 @@ function useAutocomplete(props) {
     if (!event.currentTarget.contains(event.target)) {
       return;
     }
+    // Don't interfere with interactions outside the input area (e.g. helper text)
+    if (anchorEl && !anchorEl.contains(event.target)) {
+      return;
+    }
     inputRef.current.focus();
     if (selectOnFocus && firstFocus.current && inputRef.current.selectionEnd - inputRef.current.selectionStart === 0) {
       inputRef.current.select();

package/useAutocomplete/useAutocomplete.mjs

@@ -957,6 +957,10 @@ function useAutocomplete(props) {
     if (!event.currentTarget.contains(event.target)) {
       return;
     }
+    // Don't interfere with interactions outside the input area (e.g. helper text)
+    if (anchorEl && !anchorEl.contains(event.target)) {
+      return;
+    }
     if (event.target.getAttribute('id') !== id) {
       event.preventDefault();
     }
@@ -968,6 +972,10 @@ function useAutocomplete(props) {
     if (!event.currentTarget.contains(event.target)) {
       return;
     }
+    // Don't interfere with interactions outside the input area (e.g. helper text)
+    if (anchorEl && !anchorEl.contains(event.target)) {
+      return;
+    }
     inputRef.current.focus();
     if (selectOnFocus && firstFocus.current && inputRef.current.selectionEnd - inputRef.current.selectionStart === 0) {
       inputRef.current.select();

package/utils/createSvgIcon.d.mts

@@ -1,2 +1,4 @@
-import SvgIcon from "../SvgIcon/index.mjs";
-export default function createSvgIcon(path: React.ReactNode, displayName: string): typeof SvgIcon;
+/**
+ * @deprecated Import `createSvgIcon` from `@mui/material/SvgIcon` instead.
+ */
+export { default } from "../SvgIcon/createSvgIcon.mjs";

package/utils/createSvgIcon.d.ts

@@ -1,2 +1,4 @@
-import SvgIcon from "../SvgIcon/index.js";
-export default function createSvgIcon(path: React.ReactNode, displayName: string): typeof SvgIcon;
+/**
+ * @deprecated Import `createSvgIcon` from `@mui/material/SvgIcon` instead.
+ */
+export { default } from "../SvgIcon/createSvgIcon.js";

package/utils/createSvgIcon.js

@@ -1,31 +1,13 @@
 "use strict";
-'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = createSvgIcon;
-var React = _interopRequireWildcard(require("react"));
-var _SvgIcon = _interopRequireDefault(require("../SvgIcon"));
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * Private module reserved for @mui packages.
- */function createSvgIcon(path, displayName) {
-  function Component(props, ref) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SvgIcon.default, {
-      "data-testid": process.env.NODE_ENV !== 'production' ? `${displayName}Icon` : undefined,
-      ref: ref,
-      ...props,
-      children: path
-    });
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _createSvgIcon.default;
   }
-  if (process.env.NODE_ENV !== 'production') {
-    // Need to set `displayName` on the inner component for React.memo.
-    // React prior to 16.14 ignores `displayName` on the wrapper.
-    Component.displayName = `${displayName}Icon`;
-  }
-  Component.muiName = _SvgIcon.default.muiName;
-  return /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(Component));
-}
+});
+var _createSvgIcon = _interopRequireDefault(require("../SvgIcon/createSvgIcon"));

package/utils/createSvgIcon.mjs

@@ -1,26 +1,4 @@
-'use client';
-
-import * as React from 'react';
-import SvgIcon from "../SvgIcon/index.mjs";
-
 /**
- * Private module reserved for @mui packages.
+ * @deprecated Import `createSvgIcon` from `@mui/material/SvgIcon` instead.
  */
-import { jsx as _jsx } from "react/jsx-runtime";
-export default function createSvgIcon(path, displayName) {
-  function Component(props, ref) {
-    return /*#__PURE__*/_jsx(SvgIcon, {
-      "data-testid": process.env.NODE_ENV !== 'production' ? `${displayName}Icon` : undefined,
-      ref: ref,
-      ...props,
-      children: path
-    });
-  }
-  if (process.env.NODE_ENV !== 'production') {
-    // Need to set `displayName` on the inner component for React.memo.
-    // React prior to 16.14 ignores `displayName` on the wrapper.
-    Component.displayName = `${displayName}Icon`;
-  }
-  Component.muiName = SvgIcon.muiName;
-  return /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(Component));
-}
+export { default } from "../SvgIcon/createSvgIcon.mjs";

package/utils/focusWithVisible.js

@@ -0,0 +1,24 @@
+"use strict";
+'use client';
+
+/**
+ * If `focusSource` is present, attempt to pass `focusVisible` through `focus()` options.
+ * Fall back to a plain focus call when the browser does not support it.
+ */
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = focusWithVisible;
+function focusWithVisible(element, focusSource) {
+  if (focusSource == null) {
+    element.focus();
+    return;
+  }
+  try {
+    element.focus({
+      focusVisible: focusSource === 'keyboard'
+    });
+  } catch (error) {
+    element.focus();
+  }
+}

package/utils/focusWithVisible.mjs

@@ -0,0 +1,19 @@
+'use client';
+
+/**
+ * If `focusSource` is present, attempt to pass `focusVisible` through `focus()` options.
+ * Fall back to a plain focus call when the browser does not support it.
+ */
+export default function focusWithVisible(element, focusSource) {
+  if (focusSource == null) {
+    element.focus();
+    return;
+  }
+  try {
+    element.focus({
+      focusVisible: focusSource === 'keyboard'
+    });
+  } catch (error) {
+    element.focus();
+  }
+}

package/utils/index.d.mts

@@ -16,7 +16,6 @@ export { default as unstable_useId } from "./useId.mjs";
 export { default as unsupportedProp } from "./unsupportedProp.mjs";
 export { default as useControlled } from "./useControlled.mjs";
 export { default as useEventCallback } from "./useEventCallback.mjs";
-export { default as useRovingTabIndex } from "./useRovingTabIndex.mjs";
 export { default as useForkRef } from "./useForkRef.mjs";
 export { default as mergeSlotProps } from "./mergeSlotProps.mjs";
 export * from "./types.mjs";

package/utils/index.d.ts

@@ -16,7 +16,6 @@ export { default as unstable_useId } from "./useId.js";
 export { default as unsupportedProp } from "./unsupportedProp.js";
 export { default as useControlled } from "./useControlled.js";
 export { default as useEventCallback } from "./useEventCallback.js";
-export { default as useRovingTabIndex } from "./useRovingTabIndex.js";
 export { default as useForkRef } from "./useForkRef.js";
 export { default as mergeSlotProps } from "./mergeSlotProps.js";
 export * from "./types.js";

package/utils/index.js

@@ -120,12 +120,6 @@ Object.defineProperty(exports, "useForkRef", {
     return _useForkRef.default;
   }
 });
-Object.defineProperty(exports, "useRovingTabIndex", {
-  enumerable: true,
-  get: function () {
-    return _useRovingTabIndex.default;
-  }
-});
 var _ClassNameGenerator = _interopRequireDefault(require("@mui/utils/ClassNameGenerator"));
 var _capitalize = _interopRequireDefault(require("./capitalize"));
 var _createChainedFunction = _interopRequireDefault(require("./createChainedFunction"));
@@ -144,7 +138,6 @@ var _useId = _interopRequireDefault(require("./useId"));
 var _unsupportedProp = _interopRequireDefault(require("./unsupportedProp"));
 var _useControlled = _interopRequireDefault(require("./useControlled"));
 var _useEventCallback = _interopRequireDefault(require("./useEventCallback"));
-var _useRovingTabIndex = _interopRequireDefault(require("./useRovingTabIndex"));
 var _useForkRef = _interopRequireDefault(require("./useForkRef"));
 var _mergeSlotProps = _interopRequireDefault(require("./mergeSlotProps"));
 // TODO: remove this export once ClassNameGenerator is stable

package/utils/index.mjs

@@ -18,7 +18,6 @@ export { default as unstable_useId } from "./useId.mjs";
 export { default as unsupportedProp } from "./unsupportedProp.mjs";
 export { default as useControlled } from "./useControlled.mjs";
 export { default as useEventCallback } from "./useEventCallback.mjs";
-export { default as useRovingTabIndex } from "./useRovingTabIndex.mjs";
 export { default as useForkRef } from "./useForkRef.mjs";
 export { default as mergeSlotProps } from "./mergeSlotProps.mjs";
 // TODO: remove this export once ClassNameGenerator is stable

package/utils/useFocusableWhenDisabled.d.mts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+export interface UseFocusableWhenDisabledParameters {
+  /**
+   * Whether the component should be focusable when disabled.
+   * When `undefined`, composite items are focusable when disabled by default.
+   */
+  focusableWhenDisabled?: boolean | undefined;
+  /**
+   * The disabled state of the component.
+   */
+  disabled: boolean;
+  /**
+   * Whether this is a composite item or not.
+   * @default false
+   */
+  composite?: boolean | undefined;
+  /**
+   * @default 0
+   */
+  tabIndex?: number | undefined;
+  isNativeButton: boolean;
+}
+interface FocusableWhenDisabledProps {
+  'aria-disabled'?: boolean | undefined;
+  disabled?: boolean | undefined;
+  onKeyDown: (event: React.KeyboardEvent) => void;
+  tabIndex?: number | undefined;
+}
+export default function useFocusableWhenDisabled(parameters: UseFocusableWhenDisabledParameters): FocusableWhenDisabledProps;
+export {};

package/utils/useFocusableWhenDisabled.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+export interface UseFocusableWhenDisabledParameters {
+  /**
+   * Whether the component should be focusable when disabled.
+   * When `undefined`, composite items are focusable when disabled by default.
+   */
+  focusableWhenDisabled?: boolean | undefined;
+  /**
+   * The disabled state of the component.
+   */
+  disabled: boolean;
+  /**
+   * Whether this is a composite item or not.
+   * @default false
+   */
+  composite?: boolean | undefined;
+  /**
+   * @default 0
+   */
+  tabIndex?: number | undefined;
+  isNativeButton: boolean;
+}
+interface FocusableWhenDisabledProps {
+  'aria-disabled'?: boolean | undefined;
+  disabled?: boolean | undefined;
+  onKeyDown: (event: React.KeyboardEvent) => void;
+  tabIndex?: number | undefined;
+}
+export default function useFocusableWhenDisabled(parameters: UseFocusableWhenDisabledParameters): FocusableWhenDisabledProps;
+export {};

package/utils/useFocusableWhenDisabled.js

@@ -0,0 +1,47 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useFocusableWhenDisabled;
+var React = _interopRequireWildcard(require("react"));
+function useFocusableWhenDisabled(parameters) {
+  const {
+    focusableWhenDisabled,
+    disabled,
+    composite = false,
+    tabIndex: tabIndexProp = 0,
+    isNativeButton
+  } = parameters;
+  const isFocusableComposite = composite && focusableWhenDisabled !== false;
+  const isNonFocusableComposite = composite && focusableWhenDisabled === false;
+
+  // we can't explicitly assign `undefined` to any of these props because it
+  // would otherwise prevent subsequently merged props from setting them
+  const props = React.useMemo(() => {
+    const additionalProps = {
+      // allow Tabbing away from focusableWhenDisabled elements
+      onKeyDown(event) {
+        if (disabled && focusableWhenDisabled && event.key !== 'Tab') {
+          event.preventDefault();
+        }
+      }
+    };
+    if (!composite) {
+      additionalProps.tabIndex = tabIndexProp;
+      if (!isNativeButton && disabled) {
+        additionalProps.tabIndex = focusableWhenDisabled ? tabIndexProp : -1;
+      }
+    }
+    if (isNativeButton && (focusableWhenDisabled || isFocusableComposite) || !isNativeButton && disabled) {
+      additionalProps['aria-disabled'] = disabled;
+    }
+    if (isNativeButton && (!focusableWhenDisabled || isNonFocusableComposite)) {
+      additionalProps.disabled = disabled;
+    }
+    return additionalProps;
+  }, [composite, disabled, focusableWhenDisabled, isFocusableComposite, isNonFocusableComposite, isNativeButton, tabIndexProp]);
+  return props;
+}

package/utils/useFocusableWhenDisabled.mjs

@@ -0,0 +1,41 @@
+'use client';
+
+import * as React from 'react';
+export default function useFocusableWhenDisabled(parameters) {
+  const {
+    focusableWhenDisabled,
+    disabled,
+    composite = false,
+    tabIndex: tabIndexProp = 0,
+    isNativeButton
+  } = parameters;
+  const isFocusableComposite = composite && focusableWhenDisabled !== false;
+  const isNonFocusableComposite = composite && focusableWhenDisabled === false;
+
+  // we can't explicitly assign `undefined` to any of these props because it
+  // would otherwise prevent subsequently merged props from setting them
+  const props = React.useMemo(() => {
+    const additionalProps = {
+      // allow Tabbing away from focusableWhenDisabled elements
+      onKeyDown(event) {
+        if (disabled && focusableWhenDisabled && event.key !== 'Tab') {
+          event.preventDefault();
+        }
+      }
+    };
+    if (!composite) {
+      additionalProps.tabIndex = tabIndexProp;
+      if (!isNativeButton && disabled) {
+        additionalProps.tabIndex = focusableWhenDisabled ? tabIndexProp : -1;
+      }
+    }
+    if (isNativeButton && (focusableWhenDisabled || isFocusableComposite) || !isNativeButton && disabled) {
+      additionalProps['aria-disabled'] = disabled;
+    }
+    if (isNativeButton && (!focusableWhenDisabled || isNonFocusableComposite)) {
+      additionalProps.disabled = disabled;
+    }
+    return additionalProps;
+  }, [composite, disabled, focusableWhenDisabled, isFocusableComposite, isNonFocusableComposite, isNativeButton, tabIndexProp]);
+  return props;
+}

package/utils/useRovingTabIndex.d.mts

@@ -1,2 +1 @@
-import useRovingTabIndex from '@mui/utils/useRovingTabIndex';
-export default useRovingTabIndex;
+export { RovingTabIndexContext, useRovingTabIndexContext, useRovingTabIndexItem, useRovingTabIndexRoot } from '@mui/utils/useRovingTabIndex';

package/utils/useRovingTabIndex.d.ts

@@ -1,2 +1 @@
-import useRovingTabIndex from '@mui/utils/useRovingTabIndex';
-export default useRovingTabIndex;
+export { RovingTabIndexContext, useRovingTabIndexContext, useRovingTabIndexItem, useRovingTabIndexRoot } from '@mui/utils/useRovingTabIndex';

package/utils/useRovingTabIndex.js

@@ -1,9 +1,30 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-var _useRovingTabIndex = _interopRequireDefault(require("@mui/utils/useRovingTabIndex"));
-var _default = exports.default = _useRovingTabIndex.default;
+Object.defineProperty(exports, "RovingTabIndexContext", {
+  enumerable: true,
+  get: function () {
+    return _useRovingTabIndex.RovingTabIndexContext;
+  }
+});
+Object.defineProperty(exports, "useRovingTabIndexContext", {
+  enumerable: true,
+  get: function () {
+    return _useRovingTabIndex.useRovingTabIndexContext;
+  }
+});
+Object.defineProperty(exports, "useRovingTabIndexItem", {
+  enumerable: true,
+  get: function () {
+    return _useRovingTabIndex.useRovingTabIndexItem;
+  }
+});
+Object.defineProperty(exports, "useRovingTabIndexRoot", {
+  enumerable: true,
+  get: function () {
+    return _useRovingTabIndex.useRovingTabIndexRoot;
+  }
+});
+var _useRovingTabIndex = require("@mui/utils/useRovingTabIndex");