@mui/material 9.0.0-beta.0 → 9.0.0

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

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

package/utils/useRovingTabIndex.mjs

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

package/version/index.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.version = exports.prerelease = exports.patch = exports.minor = exports.major = exports.default = void 0;
-const version = exports.version = "9.0.0-beta.0";
+const version = exports.version = "9.0.0";
 const major = exports.major = Number("9");
 const minor = exports.minor = Number("0");
 const patch = exports.patch = Number("0");
-const prerelease = exports.prerelease = "beta.0";
+const prerelease = exports.prerelease = undefined;
 var _default = exports.default = version;

package/version/index.mjs

@@ -1,6 +1,6 @@
-export const version = "9.0.0-beta.0";
+export const version = "9.0.0";
 export const major = Number("9");
 export const minor = Number("0");
 export const patch = Number("0");
-export const prerelease = "beta.0";
+export const prerelease = undefined;
 export default version;