@mui/material 9.0.0-beta.0 → 9.0.0-beta.1

package/Tabs/Tabs.mjs

@@ -20,7 +20,10 @@ import tabsClasses, { getTabsUtilityClass } from "./tabsClasses.mjs";
 import ownerWindow from "../utils/ownerWindow.mjs";
 import isLayoutSupported from "../utils/isLayoutSupported.mjs";
 import useSlot from "../utils/useSlot.mjs";
-import { ownerDocument, useForkRef, getActiveElement, useRovingTabIndex } from "../utils/index.mjs";
+import getActiveElement from "../utils/getActiveElement.mjs";
+import ownerDocument from "../utils/ownerDocument.mjs";
+import useForkRef from "../utils/useForkRef.mjs";
+import { RovingTabIndexContext, useRovingTabIndexRoot } from "../utils/useRovingTabIndex.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -287,6 +290,10 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
   const [displayStartScroll, setDisplayStartScroll] = React.useState(false);
   const [displayEndScroll, setDisplayEndScroll] = React.useState(false);
   const [updateScrollObserver, setUpdateScrollObserver] = React.useState(false);
+  const selectedValue = value === false ? null : value;
+  // Tracks whether DOM focus is currently inside the tab list. When it is, roving focus
+  // should follow in-list keyboard movement instead of snapping back to `selectedValue`.
+  const [isFocusWithinList, setIsFocusWithinList] = React.useState(false);
   const [scrollerStyle, setScrollerStyle] = React.useState({
     overflow: 'hidden',
     scrollbarWidth: 0
@@ -614,6 +621,12 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
   const indicator = /*#__PURE__*/_jsx(IndicatorSlot, {
     ...indicatorSlotProps
   });
+  const rovingContainer = useRovingTabIndexRoot({
+    activeItemId: isFocusWithinList ? undefined : selectedValue,
+    orientation,
+    isRtl
+  });
+  const rovingContainerProps = rovingContainer.getContainerProps();
   const validChildren = React.Children.toArray(childrenProp).filter(React.isValidElement).map((child, index) => {
     const childValue = child.props.value === undefined ? index : child.props.value;
     if (process.env.NODE_ENV !== 'production') {
@@ -628,23 +641,11 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       childValue
     };
   });
-  const focusableIndex = valueToIndex.get(value);
-  const {
-    getContainerProps,
-    getItemProps
-  } = useRovingTabIndex({
-    focusableIndex,
-    orientation,
-    isRtl
-  });
-  const rovingTabIndexContainerProps = getContainerProps();
   const children = validChildren.map(({
     child,
-    index,
     childValue
   }) => {
     const selected = childValue === value;
-    const rovingTabIndexItemProps = getItemProps(index, child.ref);
     return /*#__PURE__*/React.cloneElement(child, {
       fullWidth: variant === 'fullWidth',
       indicator: selected && !mounted && indicator,
@@ -652,9 +653,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       selectionFollowsFocus,
       onChange,
       textColor,
-      value: childValue,
-      ref: rovingTabIndexItemProps.ref,
-      tabIndex: child.props.tabIndex ?? rovingTabIndexItemProps.tabIndex
+      value: childValue
     });
   });
   const conditionalElements = getConditionalElements();
@@ -682,7 +681,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       }
     }
   });
-  const mergedRef = useForkRef(rovingTabIndexContainerProps.ref, tabListRef);
+  const mergedRef = useForkRef(rovingContainerProps.ref, tabListRef);
   const handleKeyDown = event => {
     const list = tabListRef.current;
     const currentFocus = getActiveElement(ownerDocument(list));
@@ -693,7 +692,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     if (role !== 'tab') {
       return;
     }
-    rovingTabIndexContainerProps.onKeyDown(event);
+    rovingContainerProps.onKeyDown(event);
   };
   const [ListSlot, listSlotProps] = useSlot('list', {
     ref: mergedRef,
@@ -703,12 +702,19 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     ownerState,
     getSlotProps: handlers => ({
       ...handlers,
+      onBlur: event => {
+        if (!event.currentTarget.contains(event.relatedTarget)) {
+          setIsFocusWithinList(false);
+        }
+        handlers.onBlur?.(event);
+      },
       onKeyDown: event => {
         handleKeyDown(event);
         handlers.onKeyDown?.(event);
       },
       onFocus: event => {
-        rovingTabIndexContainerProps.onFocus(event);
+        setIsFocusWithinList(true);
+        rovingContainerProps.onFocus(event);
         handlers.onFocus?.(event);
       }
     })
@@ -723,7 +729,10 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
         "aria-orientation": orientation === 'vertical' ? 'vertical' : null,
         role: "tablist",
         ...listSlotProps,
-        children: children
+        children: /*#__PURE__*/_jsx(RovingTabIndexContext.Provider, {
+          value: rovingContainer,
+          children: children
+        })
       }), mounted && indicator]
     }), conditionalElements.scrollButtonEnd]
   });

package/ToggleButton/ToggleButton.js

@@ -178,6 +178,7 @@ const ToggleButton = /*#__PURE__*/React.forwardRef(function ToggleButton(inProps
   const positionClassName = toggleButtonGroupButtonContextPositionClassName || '';
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(ToggleButtonRoot, {
     className: (0, _clsx.default)(contextProps.className, classes.root, className, positionClassName),
+    internalNativeButton: true,
     disabled: disabled,
     focusRipple: !disableFocusRipple,
     ref: ref,

package/ToggleButton/ToggleButton.mjs

@@ -171,6 +171,7 @@ const ToggleButton = /*#__PURE__*/React.forwardRef(function ToggleButton(inProps
   const positionClassName = toggleButtonGroupButtonContextPositionClassName || '';
   return /*#__PURE__*/_jsx(ToggleButtonRoot, {
     className: clsx(contextProps.className, classes.root, className, positionClassName),
+    internalNativeButton: true,
     disabled: disabled,
     focusRipple: !disableFocusRipple,
     ref: ref,

package/Tooltip/Tooltip.d.mts

@@ -41,7 +41,7 @@ export type TooltipSlotsAndSlotProps = CreateSlotsAndSlotProps<TooltipSlots, {
    * Props forwarded to the transition slot.
    * By default, the available props are based on the [Grow](https://mui.com/material-ui/api/grow/#props) component.
    */
-  transition: SlotProps<React.ElementType, TransitionProps & TooltipTransitionSlotPropsOverrides, TooltipOwnerState>;
+  transition: SlotProps<React.ElementType<TransitionProps>, TransitionProps & TooltipTransitionSlotPropsOverrides, TooltipOwnerState>;
   /**
    * Props forwarded to the tooltip slot.
    * By default, the available props are based on the div element.

package/Tooltip/Tooltip.d.ts

@@ -41,7 +41,7 @@ export type TooltipSlotsAndSlotProps = CreateSlotsAndSlotProps<TooltipSlots, {
    * Props forwarded to the transition slot.
    * By default, the available props are based on the [Grow](https://mui.com/material-ui/api/grow/#props) component.
    */
-  transition: SlotProps<React.ElementType, TransitionProps & TooltipTransitionSlotPropsOverrides, TooltipOwnerState>;
+  transition: SlotProps<React.ElementType<TransitionProps>, TransitionProps & TooltipTransitionSlotPropsOverrides, TooltipOwnerState>;
   /**
    * Props forwarded to the tooltip slot.
    * By default, the available props are based on the div element.

package/index.js

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

package/index.mjs

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

package/internal/SwitchBase.d.mts

@@ -20,13 +20,13 @@ type SwitchBaseSlotsAndSlotProps = CreateSlotsAndSlotProps<SwitchBaseSlots, {
    * Props forwarded to the root slot.
    * By default, the available props are based on the [ButtonBase](https://mui.com/material-ui/api/button-base/#props) component.
    */
-  root: SlotProps<React.ElementType<ButtonBaseProps>, {}, SwitchBaseOwnerState>;
+  root: SlotProps<React.ElementType<Omit<ButtonBaseProps, 'nativeButton'>>, {}, SwitchBaseOwnerState>;
   /**
    * Props forwarded to the input slot.
    */
   input: SlotProps<'input', {}, SwitchBaseOwnerState>;
 }>;
-export interface SwitchBaseProps extends StandardProps<ButtonBaseProps, 'children' | 'onChange' | 'type' | 'value'>, SwitchBaseSlotsAndSlotProps {
+export interface SwitchBaseProps extends StandardProps<Omit<ButtonBaseProps, 'nativeButton'>, 'children' | 'onChange' | 'type' | 'value'>, SwitchBaseSlotsAndSlotProps {
   autoFocus?: boolean | undefined;
   /**
    * If `true`, the component is checked.

package/internal/SwitchBase.d.ts

@@ -20,13 +20,13 @@ type SwitchBaseSlotsAndSlotProps = CreateSlotsAndSlotProps<SwitchBaseSlots, {
    * Props forwarded to the root slot.
    * By default, the available props are based on the [ButtonBase](https://mui.com/material-ui/api/button-base/#props) component.
    */
-  root: SlotProps<React.ElementType<ButtonBaseProps>, {}, SwitchBaseOwnerState>;
+  root: SlotProps<React.ElementType<Omit<ButtonBaseProps, 'nativeButton'>>, {}, SwitchBaseOwnerState>;
   /**
    * Props forwarded to the input slot.
    */
   input: SlotProps<'input', {}, SwitchBaseOwnerState>;
 }>;
-export interface SwitchBaseProps extends StandardProps<ButtonBaseProps, 'children' | 'onChange' | 'type' | 'value'>, SwitchBaseSlotsAndSlotProps {
+export interface SwitchBaseProps extends StandardProps<Omit<ButtonBaseProps, 'nativeButton'>, 'children' | 'onChange' | 'type' | 'value'>, SwitchBaseSlotsAndSlotProps {
   autoFocus?: boolean | undefined;
   /**
    * If `true`, the component is checked.

package/internal/SwitchBase.js

@@ -114,6 +114,10 @@ const SwitchBase = /*#__PURE__*/React.forwardRef(function SwitchBase(props, ref)
     slotProps = {},
     ...other
   } = props;
+  const {
+    nativeButton,
+    ...buttonBaseProps
+  } = other;
   const [checked, setCheckedState] = (0, _useControlled.default)({
     controlled: checkedProp,
     default: Boolean(defaultChecked),
@@ -176,7 +180,7 @@ const SwitchBase = /*#__PURE__*/React.forwardRef(function SwitchBase(props, ref)
     externalForwardedProps: {
       ...externalForwardedProps,
       component: 'span',
-      ...other
+      ...buttonBaseProps
     },
     getSlotProps: handlers => ({
       ...handlers,

package/internal/SwitchBase.mjs

@@ -107,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),
@@ -169,7 +173,7 @@ const SwitchBase = /*#__PURE__*/React.forwardRef(function SwitchBase(props, ref)
     externalForwardedProps: {
       ...externalForwardedProps,
       component: 'span',
-      ...other
+      ...buttonBaseProps
     },
     getSlotProps: handlers => ({
       ...handlers,

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-beta.0",
+  "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": [
@@ -33,10 +33,10 @@
     "prop-types": "^15.8.1",
     "react-is": "^19.2.4",
     "react-transition-group": "^4.4.5",
+    "@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.0",
-    "@mui/system": "9.0.0-beta.0",
-    "@mui/utils": "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-beta.0"
+    "@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)));

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)));

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/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;
+}