@mui/utils 6.1.5 → 6.1.6

package/CHANGELOG.md

@@ -1,5 +1,57 @@
 # [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 -->
@@ -358,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
 
@@ -1100,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/esm/getReactNodeRef/getReactNodeRef.js

@@ -0,0 +1,23 @@
+import * as React from 'react';
+
+/**
+ * Returns the ref of a React node handling differences between React 19 and older versions.
+ * It will return null if the node is not a valid React element.
+ *
+ * @param element React.ReactNode
+ * @returns React.Ref<any> | null
+ *
+ * @deprecated Use getReactElementRef instead
+ */
+export default function getReactNodeRef(element) {
+  if (!element || ! /*#__PURE__*/React.isValidElement(element)) {
+    return null;
+  }
+
+  // 'ref' is passed as prop in React 19, whereas 'ref' is directly attached to children in older versions
+  return element.props.propertyIsEnumerable('ref') ? element.props.ref :
+  // @ts-expect-error element.ref is not included in the ReactElement type
+  // We cannot check for it, but isValidElement is true at this point
+  // https://github.com/DefinitelyTyped/DefinitelyTyped/discussions/70189
+  element.ref;
+}

package/esm/getReactNodeRef/index.js

@@ -0,0 +1 @@
+export { default } from "./getReactNodeRef.js";

package/esm/index.js

@@ -27,6 +27,7 @@ export { default as unstable_useForkRef } from "./useForkRef/index.js";
 export { default as unstable_useLazyRef } from "./useLazyRef/index.js";
 export { default as unstable_useTimeout, Timeout as unstable_Timeout } from "./useTimeout/index.js";
 export { default as unstable_useOnMount } from "./useOnMount/index.js";
+export { default as unstable_useIsFocusVisible } from "./useIsFocusVisible/index.js";
 export { default as unstable_isFocusVisible } from "./isFocusVisible/index.js";
 export { default as unstable_getScrollbarSize } from "./getScrollbarSize/index.js";
 export { default as usePreviousProps } from "./usePreviousProps/index.js";
@@ -44,5 +45,6 @@ export { default as clamp } from "./clamp/index.js";
 export { default as unstable_useSlotProps } from "./useSlotProps/index.js";
 export { default as unstable_resolveComponentProps } from "./resolveComponentProps/index.js";
 export { default as unstable_extractEventHandlers } from "./extractEventHandlers/index.js";
+export { default as unstable_getReactNodeRef } from "./getReactNodeRef/index.js";
 export { default as unstable_getReactElementRef } from "./getReactElementRef/index.js";
 export * from "./types.js";

package/esm/useIsFocusVisible/index.js

@@ -0,0 +1,2 @@
+export { default } from "./useIsFocusVisible.js";
+export * from "./useIsFocusVisible.js";

package/esm/useIsFocusVisible/useIsFocusVisible.js

@@ -0,0 +1,163 @@
+'use client';
+
+// based on https://github.com/WICG/focus-visible/blob/v4.1.5/src/focus-visible.js
+import * as React from 'react';
+import { Timeout } from "../useTimeout/useTimeout.js";
+let hadKeyboardEvent = true;
+let hadFocusVisibleRecently = false;
+const hadFocusVisibleRecentlyTimeout = new Timeout();
+const inputTypesWhitelist = {
+  text: true,
+  search: true,
+  url: true,
+  tel: true,
+  email: true,
+  password: true,
+  number: true,
+  date: true,
+  month: true,
+  week: true,
+  time: true,
+  datetime: true,
+  'datetime-local': true
+};
+
+/**
+ * Computes whether the given element should automatically trigger the
+ * `focus-visible` class being added, i.e. whether it should always match
+ * `:focus-visible` when focused.
+ * @param {Element} node
+ * @returns {boolean}
+ */
+function focusTriggersKeyboardModality(node) {
+  const {
+    type,
+    tagName
+  } = node;
+  if (tagName === 'INPUT' && inputTypesWhitelist[type] && !node.readOnly) {
+    return true;
+  }
+  if (tagName === 'TEXTAREA' && !node.readOnly) {
+    return true;
+  }
+  if (node.isContentEditable) {
+    return true;
+  }
+  return false;
+}
+
+/**
+ * Keep track of our keyboard modality state with `hadKeyboardEvent`.
+ * If the most recent user interaction was via the keyboard;
+ * and the key press did not include a meta, alt/option, or control key;
+ * then the modality is keyboard. Otherwise, the modality is not keyboard.
+ * @param {KeyboardEvent} event
+ */
+function handleKeyDown(event) {
+  if (event.metaKey || event.altKey || event.ctrlKey) {
+    return;
+  }
+  hadKeyboardEvent = true;
+}
+
+/**
+ * If at any point a user clicks with a pointing device, ensure that we change
+ * the modality away from keyboard.
+ * This avoids the situation where a user presses a key on an already focused
+ * element, and then clicks on a different element, focusing it with a
+ * pointing device, while we still think we're in keyboard modality.
+ */
+function handlePointerDown() {
+  hadKeyboardEvent = false;
+}
+function handleVisibilityChange() {
+  if (this.visibilityState === 'hidden') {
+    // If the tab becomes active again, the browser will handle calling focus
+    // on the element (Safari actually calls it twice).
+    // If this tab change caused a blur on an element with focus-visible,
+    // re-apply the class when the user switches back to the tab.
+    if (hadFocusVisibleRecently) {
+      hadKeyboardEvent = true;
+    }
+  }
+}
+function prepare(doc) {
+  doc.addEventListener('keydown', handleKeyDown, true);
+  doc.addEventListener('mousedown', handlePointerDown, true);
+  doc.addEventListener('pointerdown', handlePointerDown, true);
+  doc.addEventListener('touchstart', handlePointerDown, true);
+  doc.addEventListener('visibilitychange', handleVisibilityChange, true);
+}
+export function teardown(doc) {
+  doc.removeEventListener('keydown', handleKeyDown, true);
+  doc.removeEventListener('mousedown', handlePointerDown, true);
+  doc.removeEventListener('pointerdown', handlePointerDown, true);
+  doc.removeEventListener('touchstart', handlePointerDown, true);
+  doc.removeEventListener('visibilitychange', handleVisibilityChange, true);
+}
+function isFocusVisible(event) {
+  const {
+    target
+  } = event;
+  try {
+    return target.matches(':focus-visible');
+  } catch (error) {
+    // Browsers not implementing :focus-visible will throw a SyntaxError.
+    // We use our own heuristic for those browsers.
+    // Rethrow might be better if it's not the expected error but do we really
+    // want to crash if focus-visible malfunctioned?
+  }
+
+  // No need for validFocusTarget check. The user does that by attaching it to
+  // focusable events only.
+  return hadKeyboardEvent || focusTriggersKeyboardModality(target);
+}
+export default function useIsFocusVisible() {
+  const ref = React.useCallback(node => {
+    if (node != null) {
+      prepare(node.ownerDocument);
+    }
+  }, []);
+  const isFocusVisibleRef = React.useRef(false);
+
+  /**
+   * Should be called if a blur event is fired
+   */
+  function handleBlurVisible() {
+    // checking against potential state variable does not suffice if we focus and blur synchronously.
+    // React wouldn't have time to trigger a re-render so `focusVisible` would be stale.
+    // Ideally we would adjust `isFocusVisible(event)` to look at `relatedTarget` for blur events.
+    // This doesn't work in IE11 due to https://github.com/facebook/react/issues/3751
+    // TODO: check again if React releases their internal changes to focus event handling (https://github.com/facebook/react/pull/19186).
+    if (isFocusVisibleRef.current) {
+      // To detect a tab/window switch, we look for a blur event followed
+      // rapidly by a visibility change.
+      // If we don't see a visibility change within 100ms, it's probably a
+      // regular focus change.
+      hadFocusVisibleRecently = true;
+      hadFocusVisibleRecentlyTimeout.start(100, () => {
+        hadFocusVisibleRecently = false;
+      });
+      isFocusVisibleRef.current = false;
+      return true;
+    }
+    return false;
+  }
+
+  /**
+   * Should be called if a blur event is fired
+   */
+  function handleFocusVisible(event) {
+    if (isFocusVisible(event)) {
+      isFocusVisibleRef.current = true;
+      return true;
+    }
+    return false;
+  }
+  return {
+    isFocusVisibleRef,
+    onFocus: handleFocusVisible,
+    onBlur: handleBlurVisible,
+    ref
+  };
+}

package/getReactNodeRef/getReactNodeRef.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+/**
+ * Returns the ref of a React node handling differences between React 19 and older versions.
+ * It will return null if the node is not a valid React element.
+ *
+ * @param element React.ReactNode
+ * @returns React.Ref<any> | null
+ *
+ * @deprecated Use getReactElementRef instead
+ */
+export default function getReactNodeRef(element: React.ReactNode): React.Ref<any> | null;

package/getReactNodeRef/getReactNodeRef.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = getReactNodeRef;
+var React = _interopRequireWildcard(require("react"));
+/**
+ * Returns the ref of a React node handling differences between React 19 and older versions.
+ * It will return null if the node is not a valid React element.
+ *
+ * @param element React.ReactNode
+ * @returns React.Ref<any> | null
+ *
+ * @deprecated Use getReactElementRef instead
+ */
+function getReactNodeRef(element) {
+  if (!element || ! /*#__PURE__*/React.isValidElement(element)) {
+    return null;
+  }
+
+  // 'ref' is passed as prop in React 19, whereas 'ref' is directly attached to children in older versions
+  return element.props.propertyIsEnumerable('ref') ? element.props.ref :
+  // @ts-expect-error element.ref is not included in the ReactElement type
+  // We cannot check for it, but isValidElement is true at this point
+  // https://github.com/DefinitelyTyped/DefinitelyTyped/discussions/70189
+  element.ref;
+}

package/getReactNodeRef/index.d.ts

@@ -0,0 +1 @@
+export { default } from './getReactNodeRef';

package/getReactNodeRef/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _getReactNodeRef.default;
+  }
+});
+var _getReactNodeRef = _interopRequireDefault(require("./getReactNodeRef"));

package/getReactNodeRef/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../esm/getReactNodeRef/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/index.d.ts

@@ -27,6 +27,7 @@ export { default as unstable_useForkRef } from './useForkRef';
 export { default as unstable_useLazyRef } from './useLazyRef';
 export { default as unstable_useTimeout, Timeout as unstable_Timeout } from './useTimeout';
 export { default as unstable_useOnMount } from './useOnMount';
+export { default as unstable_useIsFocusVisible } from './useIsFocusVisible';
 export { default as unstable_isFocusVisible } from './isFocusVisible';
 export { default as unstable_getScrollbarSize } from './getScrollbarSize';
 export { default as usePreviousProps } from './usePreviousProps';
@@ -45,5 +46,6 @@ export { default as unstable_useSlotProps } from './useSlotProps';
 export type { UseSlotPropsParameters, UseSlotPropsResult } from './useSlotProps';
 export { default as unstable_resolveComponentProps } from './resolveComponentProps';
 export { default as unstable_extractEventHandlers } from './extractEventHandlers';
+export { default as unstable_getReactNodeRef } from './getReactNodeRef';
 export { default as unstable_getReactElementRef } from './getReactElementRef';
 export * from './types';

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/utils v6.1.5
+ * @mui/utils v6.1.6
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -43,6 +43,7 @@ var _exportNames = {
   unstable_useTimeout: true,
   unstable_Timeout: true,
   unstable_useOnMount: true,
+  unstable_useIsFocusVisible: true,
   unstable_isFocusVisible: true,
   unstable_getScrollbarSize: true,
   usePreviousProps: true,
@@ -59,6 +60,7 @@ var _exportNames = {
   unstable_useSlotProps: true,
   unstable_resolveComponentProps: true,
   unstable_extractEventHandlers: true,
+  unstable_getReactNodeRef: true,
   unstable_getReactElementRef: true
 };
 Object.defineProperty(exports, "HTMLElementType", {
@@ -217,6 +219,12 @@ Object.defineProperty(exports, "unstable_getReactElementRef", {
     return _getReactElementRef.default;
   }
 });
+Object.defineProperty(exports, "unstable_getReactNodeRef", {
+  enumerable: true,
+  get: function () {
+    return _getReactNodeRef.default;
+  }
+});
 Object.defineProperty(exports, "unstable_getScrollbarSize", {
   enumerable: true,
   get: function () {
@@ -307,6 +315,12 @@ Object.defineProperty(exports, "unstable_useId", {
     return _useId.default;
   }
 });
+Object.defineProperty(exports, "unstable_useIsFocusVisible", {
+  enumerable: true,
+  get: function () {
+    return _useIsFocusVisible.default;
+  }
+});
 Object.defineProperty(exports, "unstable_useLazyRef", {
   enumerable: true,
   get: function () {
@@ -371,6 +385,7 @@ var _useForkRef = _interopRequireDefault(require("./useForkRef"));
 var _useLazyRef = _interopRequireDefault(require("./useLazyRef"));
 var _useTimeout = _interopRequireWildcard(require("./useTimeout"));
 var _useOnMount = _interopRequireDefault(require("./useOnMount"));
+var _useIsFocusVisible = _interopRequireDefault(require("./useIsFocusVisible"));
 var _isFocusVisible = _interopRequireDefault(require("./isFocusVisible"));
 var _getScrollbarSize = _interopRequireDefault(require("./getScrollbarSize"));
 var _usePreviousProps = _interopRequireDefault(require("./usePreviousProps"));
@@ -397,6 +412,7 @@ var _clamp = _interopRequireDefault(require("./clamp"));
 var _useSlotProps = _interopRequireDefault(require("./useSlotProps"));
 var _resolveComponentProps = _interopRequireDefault(require("./resolveComponentProps"));
 var _extractEventHandlers = _interopRequireDefault(require("./extractEventHandlers"));
+var _getReactNodeRef = _interopRequireDefault(require("./getReactNodeRef"));
 var _getReactElementRef = _interopRequireDefault(require("./getReactElementRef"));
 var _types = require("./types");
 Object.keys(_types).forEach(function (key) {

package/modern/getReactNodeRef/getReactNodeRef.js

@@ -0,0 +1,23 @@
+import * as React from 'react';
+
+/**
+ * Returns the ref of a React node handling differences between React 19 and older versions.
+ * It will return null if the node is not a valid React element.
+ *
+ * @param element React.ReactNode
+ * @returns React.Ref<any> | null
+ *
+ * @deprecated Use getReactElementRef instead
+ */
+export default function getReactNodeRef(element) {
+  if (!element || ! /*#__PURE__*/React.isValidElement(element)) {
+    return null;
+  }
+
+  // 'ref' is passed as prop in React 19, whereas 'ref' is directly attached to children in older versions
+  return element.props.propertyIsEnumerable('ref') ? element.props.ref :
+  // @ts-expect-error element.ref is not included in the ReactElement type
+  // We cannot check for it, but isValidElement is true at this point
+  // https://github.com/DefinitelyTyped/DefinitelyTyped/discussions/70189
+  element.ref;
+}

package/modern/getReactNodeRef/index.js

@@ -0,0 +1 @@
+export { default } from "./getReactNodeRef.js";

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/utils v6.1.5
+ * @mui/utils v6.1.6
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -34,6 +34,7 @@ export { default as unstable_useForkRef } from "./useForkRef/index.js";
 export { default as unstable_useLazyRef } from "./useLazyRef/index.js";
 export { default as unstable_useTimeout, Timeout as unstable_Timeout } from "./useTimeout/index.js";
 export { default as unstable_useOnMount } from "./useOnMount/index.js";
+export { default as unstable_useIsFocusVisible } from "./useIsFocusVisible/index.js";
 export { default as unstable_isFocusVisible } from "./isFocusVisible/index.js";
 export { default as unstable_getScrollbarSize } from "./getScrollbarSize/index.js";
 export { default as usePreviousProps } from "./usePreviousProps/index.js";
@@ -51,5 +52,6 @@ export { default as clamp } from "./clamp/index.js";
 export { default as unstable_useSlotProps } from "./useSlotProps/index.js";
 export { default as unstable_resolveComponentProps } from "./resolveComponentProps/index.js";
 export { default as unstable_extractEventHandlers } from "./extractEventHandlers/index.js";
+export { default as unstable_getReactNodeRef } from "./getReactNodeRef/index.js";
 export { default as unstable_getReactElementRef } from "./getReactElementRef/index.js";
 export * from "./types.js";

package/modern/useIsFocusVisible/index.js

@@ -0,0 +1,2 @@
+export { default } from "./useIsFocusVisible.js";
+export * from "./useIsFocusVisible.js";

package/modern/useIsFocusVisible/useIsFocusVisible.js

@@ -0,0 +1,163 @@
+'use client';
+
+// based on https://github.com/WICG/focus-visible/blob/v4.1.5/src/focus-visible.js
+import * as React from 'react';
+import { Timeout } from "../useTimeout/useTimeout.js";
+let hadKeyboardEvent = true;
+let hadFocusVisibleRecently = false;
+const hadFocusVisibleRecentlyTimeout = new Timeout();
+const inputTypesWhitelist = {
+  text: true,
+  search: true,
+  url: true,
+  tel: true,
+  email: true,
+  password: true,
+  number: true,
+  date: true,
+  month: true,
+  week: true,
+  time: true,
+  datetime: true,
+  'datetime-local': true
+};
+
+/**
+ * Computes whether the given element should automatically trigger the
+ * `focus-visible` class being added, i.e. whether it should always match
+ * `:focus-visible` when focused.
+ * @param {Element} node
+ * @returns {boolean}
+ */
+function focusTriggersKeyboardModality(node) {
+  const {
+    type,
+    tagName
+  } = node;
+  if (tagName === 'INPUT' && inputTypesWhitelist[type] && !node.readOnly) {
+    return true;
+  }
+  if (tagName === 'TEXTAREA' && !node.readOnly) {
+    return true;
+  }
+  if (node.isContentEditable) {
+    return true;
+  }
+  return false;
+}
+
+/**
+ * Keep track of our keyboard modality state with `hadKeyboardEvent`.
+ * If the most recent user interaction was via the keyboard;
+ * and the key press did not include a meta, alt/option, or control key;
+ * then the modality is keyboard. Otherwise, the modality is not keyboard.
+ * @param {KeyboardEvent} event
+ */
+function handleKeyDown(event) {
+  if (event.metaKey || event.altKey || event.ctrlKey) {
+    return;
+  }
+  hadKeyboardEvent = true;
+}
+
+/**
+ * If at any point a user clicks with a pointing device, ensure that we change
+ * the modality away from keyboard.
+ * This avoids the situation where a user presses a key on an already focused
+ * element, and then clicks on a different element, focusing it with a
+ * pointing device, while we still think we're in keyboard modality.
+ */
+function handlePointerDown() {
+  hadKeyboardEvent = false;
+}
+function handleVisibilityChange() {
+  if (this.visibilityState === 'hidden') {
+    // If the tab becomes active again, the browser will handle calling focus
+    // on the element (Safari actually calls it twice).
+    // If this tab change caused a blur on an element with focus-visible,
+    // re-apply the class when the user switches back to the tab.
+    if (hadFocusVisibleRecently) {
+      hadKeyboardEvent = true;
+    }
+  }
+}
+function prepare(doc) {
+  doc.addEventListener('keydown', handleKeyDown, true);
+  doc.addEventListener('mousedown', handlePointerDown, true);
+  doc.addEventListener('pointerdown', handlePointerDown, true);
+  doc.addEventListener('touchstart', handlePointerDown, true);
+  doc.addEventListener('visibilitychange', handleVisibilityChange, true);
+}
+export function teardown(doc) {
+  doc.removeEventListener('keydown', handleKeyDown, true);
+  doc.removeEventListener('mousedown', handlePointerDown, true);
+  doc.removeEventListener('pointerdown', handlePointerDown, true);
+  doc.removeEventListener('touchstart', handlePointerDown, true);
+  doc.removeEventListener('visibilitychange', handleVisibilityChange, true);
+}
+function isFocusVisible(event) {
+  const {
+    target
+  } = event;
+  try {
+    return target.matches(':focus-visible');
+  } catch (error) {
+    // Browsers not implementing :focus-visible will throw a SyntaxError.
+    // We use our own heuristic for those browsers.
+    // Rethrow might be better if it's not the expected error but do we really
+    // want to crash if focus-visible malfunctioned?
+  }
+
+  // No need for validFocusTarget check. The user does that by attaching it to
+  // focusable events only.
+  return hadKeyboardEvent || focusTriggersKeyboardModality(target);
+}
+export default function useIsFocusVisible() {
+  const ref = React.useCallback(node => {
+    if (node != null) {
+      prepare(node.ownerDocument);
+    }
+  }, []);
+  const isFocusVisibleRef = React.useRef(false);
+
+  /**
+   * Should be called if a blur event is fired
+   */
+  function handleBlurVisible() {
+    // checking against potential state variable does not suffice if we focus and blur synchronously.
+    // React wouldn't have time to trigger a re-render so `focusVisible` would be stale.
+    // Ideally we would adjust `isFocusVisible(event)` to look at `relatedTarget` for blur events.
+    // This doesn't work in IE11 due to https://github.com/facebook/react/issues/3751
+    // TODO: check again if React releases their internal changes to focus event handling (https://github.com/facebook/react/pull/19186).
+    if (isFocusVisibleRef.current) {
+      // To detect a tab/window switch, we look for a blur event followed
+      // rapidly by a visibility change.
+      // If we don't see a visibility change within 100ms, it's probably a
+      // regular focus change.
+      hadFocusVisibleRecently = true;
+      hadFocusVisibleRecentlyTimeout.start(100, () => {
+        hadFocusVisibleRecently = false;
+      });
+      isFocusVisibleRef.current = false;
+      return true;
+    }
+    return false;
+  }
+
+  /**
+   * Should be called if a blur event is fired
+   */
+  function handleFocusVisible(event) {
+    if (isFocusVisible(event)) {
+      isFocusVisibleRef.current = true;
+      return true;
+    }
+    return false;
+  }
+  return {
+    isFocusVisibleRef,
+    onFocus: handleFocusVisible,
+    onBlur: handleBlurVisible,
+    ref
+  };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/utils",
-  "version": "6.1.5",
+  "version": "6.1.6",
   "private": false,
   "author": "MUI Team",
   "description": "Utility functions for React components.",
@@ -26,12 +26,12 @@
     "url": "https://opencollective.com/mui-org"
   },
   "dependencies": {
-    "@babel/runtime": "^7.25.7",
+    "@babel/runtime": "^7.26.0",
     "@types/prop-types": "^15.7.13",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "react-is": "^18.3.1",
-    "@mui/types": "^7.2.18"
+    "@mui/types": "^7.2.19"
   },
   "peerDependencies": {
     "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",

package/useIsFocusVisible/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './useIsFocusVisible';
+export * from './useIsFocusVisible';

package/useIsFocusVisible/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _useIsFocusVisible.default;
+  }
+});
+var _useIsFocusVisible = _interopRequireWildcard(require("./useIsFocusVisible"));
+Object.keys(_useIsFocusVisible).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useIsFocusVisible[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useIsFocusVisible[key];
+    }
+  });
+});

package/useIsFocusVisible/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../esm/useIsFocusVisible/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/useIsFocusVisible/useIsFocusVisible.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export declare function teardown(doc: Document): void;
+export interface UseIsFocusVisibleResult {
+    isFocusVisibleRef: React.MutableRefObject<boolean>;
+    onBlur: (event: React.FocusEvent<any>) => void;
+    onFocus: (event: React.FocusEvent<any>) => void;
+    ref: React.RefCallback<Element>;
+}
+export default function useIsFocusVisible(): UseIsFocusVisibleResult;

package/useIsFocusVisible/useIsFocusVisible.js

@@ -0,0 +1,170 @@
+"use strict";
+'use client';
+
+// based on https://github.com/WICG/focus-visible/blob/v4.1.5/src/focus-visible.js
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useIsFocusVisible;
+exports.teardown = teardown;
+var React = _interopRequireWildcard(require("react"));
+var _useTimeout = require("../useTimeout/useTimeout");
+let hadKeyboardEvent = true;
+let hadFocusVisibleRecently = false;
+const hadFocusVisibleRecentlyTimeout = new _useTimeout.Timeout();
+const inputTypesWhitelist = {
+  text: true,
+  search: true,
+  url: true,
+  tel: true,
+  email: true,
+  password: true,
+  number: true,
+  date: true,
+  month: true,
+  week: true,
+  time: true,
+  datetime: true,
+  'datetime-local': true
+};
+
+/**
+ * Computes whether the given element should automatically trigger the
+ * `focus-visible` class being added, i.e. whether it should always match
+ * `:focus-visible` when focused.
+ * @param {Element} node
+ * @returns {boolean}
+ */
+function focusTriggersKeyboardModality(node) {
+  const {
+    type,
+    tagName
+  } = node;
+  if (tagName === 'INPUT' && inputTypesWhitelist[type] && !node.readOnly) {
+    return true;
+  }
+  if (tagName === 'TEXTAREA' && !node.readOnly) {
+    return true;
+  }
+  if (node.isContentEditable) {
+    return true;
+  }
+  return false;
+}
+
+/**
+ * Keep track of our keyboard modality state with `hadKeyboardEvent`.
+ * If the most recent user interaction was via the keyboard;
+ * and the key press did not include a meta, alt/option, or control key;
+ * then the modality is keyboard. Otherwise, the modality is not keyboard.
+ * @param {KeyboardEvent} event
+ */
+function handleKeyDown(event) {
+  if (event.metaKey || event.altKey || event.ctrlKey) {
+    return;
+  }
+  hadKeyboardEvent = true;
+}
+
+/**
+ * If at any point a user clicks with a pointing device, ensure that we change
+ * the modality away from keyboard.
+ * This avoids the situation where a user presses a key on an already focused
+ * element, and then clicks on a different element, focusing it with a
+ * pointing device, while we still think we're in keyboard modality.
+ */
+function handlePointerDown() {
+  hadKeyboardEvent = false;
+}
+function handleVisibilityChange() {
+  if (this.visibilityState === 'hidden') {
+    // If the tab becomes active again, the browser will handle calling focus
+    // on the element (Safari actually calls it twice).
+    // If this tab change caused a blur on an element with focus-visible,
+    // re-apply the class when the user switches back to the tab.
+    if (hadFocusVisibleRecently) {
+      hadKeyboardEvent = true;
+    }
+  }
+}
+function prepare(doc) {
+  doc.addEventListener('keydown', handleKeyDown, true);
+  doc.addEventListener('mousedown', handlePointerDown, true);
+  doc.addEventListener('pointerdown', handlePointerDown, true);
+  doc.addEventListener('touchstart', handlePointerDown, true);
+  doc.addEventListener('visibilitychange', handleVisibilityChange, true);
+}
+function teardown(doc) {
+  doc.removeEventListener('keydown', handleKeyDown, true);
+  doc.removeEventListener('mousedown', handlePointerDown, true);
+  doc.removeEventListener('pointerdown', handlePointerDown, true);
+  doc.removeEventListener('touchstart', handlePointerDown, true);
+  doc.removeEventListener('visibilitychange', handleVisibilityChange, true);
+}
+function isFocusVisible(event) {
+  const {
+    target
+  } = event;
+  try {
+    return target.matches(':focus-visible');
+  } catch (error) {
+    // Browsers not implementing :focus-visible will throw a SyntaxError.
+    // We use our own heuristic for those browsers.
+    // Rethrow might be better if it's not the expected error but do we really
+    // want to crash if focus-visible malfunctioned?
+  }
+
+  // No need for validFocusTarget check. The user does that by attaching it to
+  // focusable events only.
+  return hadKeyboardEvent || focusTriggersKeyboardModality(target);
+}
+function useIsFocusVisible() {
+  const ref = React.useCallback(node => {
+    if (node != null) {
+      prepare(node.ownerDocument);
+    }
+  }, []);
+  const isFocusVisibleRef = React.useRef(false);
+
+  /**
+   * Should be called if a blur event is fired
+   */
+  function handleBlurVisible() {
+    // checking against potential state variable does not suffice if we focus and blur synchronously.
+    // React wouldn't have time to trigger a re-render so `focusVisible` would be stale.
+    // Ideally we would adjust `isFocusVisible(event)` to look at `relatedTarget` for blur events.
+    // This doesn't work in IE11 due to https://github.com/facebook/react/issues/3751
+    // TODO: check again if React releases their internal changes to focus event handling (https://github.com/facebook/react/pull/19186).
+    if (isFocusVisibleRef.current) {
+      // To detect a tab/window switch, we look for a blur event followed
+      // rapidly by a visibility change.
+      // If we don't see a visibility change within 100ms, it's probably a
+      // regular focus change.
+      hadFocusVisibleRecently = true;
+      hadFocusVisibleRecentlyTimeout.start(100, () => {
+        hadFocusVisibleRecently = false;
+      });
+      isFocusVisibleRef.current = false;
+      return true;
+    }
+    return false;
+  }
+
+  /**
+   * Should be called if a blur event is fired
+   */
+  function handleFocusVisible(event) {
+    if (isFocusVisible(event)) {
+      isFocusVisibleRef.current = true;
+      return true;
+    }
+    return false;
+  }
+  return {
+    isFocusVisibleRef,
+    onFocus: handleFocusVisible,
+    onBlur: handleBlurVisible,
+    ref
+  };
+}