@mui/utils 6.0.0-alpha.8 → 6.0.0-beta.0

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/utils v6.0.0-alpha.8
+ * @mui/utils v6.0.0-beta.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -42,10 +42,8 @@ var _exportNames = {
   unstable_useTimeout: true,
   unstable_Timeout: true,
   unstable_useOnMount: true,
-  unstable_useIsFocusVisible: true,
+  unstable_isFocusVisible: true,
   unstable_getScrollbarSize: true,
-  unstable_detectScrollType: true,
-  unstable_getNormalizedScrollLeft: true,
   usePreviousProps: true,
   getValidReactChildren: true,
   visuallyHidden: true,
@@ -190,12 +188,6 @@ Object.defineProperty(exports, "unstable_deprecatedPropType", {
     return _deprecatedPropType.default;
   }
 });
-Object.defineProperty(exports, "unstable_detectScrollType", {
-  enumerable: true,
-  get: function () {
-    return _scrollLeft.detectScrollType;
-  }
-});
 Object.defineProperty(exports, "unstable_generateUtilityClass", {
   enumerable: true,
   get: function () {
@@ -208,16 +200,16 @@ Object.defineProperty(exports, "unstable_generateUtilityClasses", {
     return _generateUtilityClasses.default;
   }
 });
-Object.defineProperty(exports, "unstable_getNormalizedScrollLeft", {
+Object.defineProperty(exports, "unstable_getScrollbarSize", {
   enumerable: true,
   get: function () {
-    return _scrollLeft.getNormalizedScrollLeft;
+    return _getScrollbarSize.default;
   }
 });
-Object.defineProperty(exports, "unstable_getScrollbarSize", {
+Object.defineProperty(exports, "unstable_isFocusVisible", {
   enumerable: true,
   get: function () {
-    return _getScrollbarSize.default;
+    return _isFocusVisible.default;
   }
 });
 Object.defineProperty(exports, "unstable_isGlobalState", {
@@ -292,12 +284,6 @@ 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 () {
@@ -356,9 +342,8 @@ 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 _scrollLeft = require("./scrollLeft");
 var _usePreviousProps = _interopRequireDefault(require("./usePreviousProps"));
 var _getValidReactChildren = _interopRequireDefault(require("./getValidReactChildren"));
 var _visuallyHidden = _interopRequireDefault(require("./visuallyHidden"));

package/node/isFocusVisible/index.js

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

package/node/isFocusVisible/isFocusVisible.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = isFocusVisible;
+/**
+ * Returns a boolean indicating if the event's target has :focus-visible
+ */
+function isFocusVisible(element) {
+  try {
+    return element.matches(':focus-visible');
+  } catch (error) {
+    // Do not warn on jsdom tests, otherwise all tests that rely on focus have to be skipped
+    // Tests that rely on `:focus-visible` will still have to be skipped in jsdom
+    if (process.env.NODE_ENV !== 'production' && !/jsdom/.test(window.navigator.userAgent)) {
+      console.warn(['MUI: The `:focus-visible` pseudo class is not supported in this browser.', 'Some components rely on this feature to work properly.'].join('\n'));
+    }
+  }
+  return false;
+}

package/node/useControlled/useControlled.js

@@ -31,7 +31,9 @@ function useControlled({
       current: defaultValue
     } = React.useRef(defaultProp);
     React.useEffect(() => {
-      if (!isControlled && defaultValue !== defaultProp) {
+      // Object.is() is not equivalent to the === operator.
+      // See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is for more details.
+      if (!isControlled && !Object.is(defaultValue, defaultProp)) {
         console.error([`MUI: A component is changing the default ${state} state of an uncontrolled ${name} after being initialized. ` + `To suppress this warning opt to use a controlled ${name}.`].join('\n'));
       }
     }, [JSON.stringify(defaultProp)]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/utils",
-  "version": "6.0.0-alpha.8",
+  "version": "6.0.0-beta.0",
   "private": false,
   "author": "MUI Team",
   "description": "Utility functions for React components.",
@@ -26,10 +26,10 @@
     "url": "https://opencollective.com/mui-org"
   },
   "dependencies": {
-    "@babel/runtime": "^7.24.5",
+    "@babel/runtime": "^7.24.7",
     "@types/prop-types": "^15.7.12",
     "prop-types": "^15.8.1",
-    "react-is": "^18.2.0"
+    "react-is": "^18.3.1"
   },
   "peerDependencies": {
     "@types/react": "^17.0.0 || ^18.0.0",

package/useControlled/useControlled.js

@@ -24,7 +24,9 @@ export default function useControlled({
       current: defaultValue
     } = React.useRef(defaultProp);
     React.useEffect(() => {
-      if (!isControlled && defaultValue !== defaultProp) {
+      // Object.is() is not equivalent to the === operator.
+      // See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is for more details.
+      if (!isControlled && !Object.is(defaultValue, defaultProp)) {
         console.error([`MUI: A component is changing the default ${state} state of an uncontrolled ${name} after being initialized. ` + `To suppress this warning opt to use a controlled ${name}.`].join('\n'));
       }
     }, [JSON.stringify(defaultProp)]);

package/modern/scrollLeft/index.js

@@ -1 +0,0 @@
-export * from './scrollLeft';

package/modern/scrollLeft/scrollLeft.js

@@ -1,70 +0,0 @@
-// Source from https://github.com/alitaheri/normalize-scroll-left
-let cachedType;
-
-/**
- * Based on the jquery plugin https://github.com/othree/jquery.rtl-scroll-type
- *
- * Types of scrollLeft, assuming scrollWidth=100 and direction is rtl.
- *
- * Type             | <- Most Left | Most Right -> | Initial
- * ---------------- | ------------ | ------------- | -------
- * default          | 0            | 100           | 100
- * negative (spec*) | -100         | 0             | 0
- * reverse          | 100          | 0             | 0
- *
- * Edge 85: default
- * Safari 14: negative
- * Chrome 85: negative
- * Firefox 81: negative
- * IE11: reverse
- *
- * spec* https://drafts.csswg.org/cssom-view/#dom-window-scroll
- */
-export function detectScrollType() {
-  if (cachedType) {
-    return cachedType;
-  }
-  const dummy = document.createElement('div');
-  const container = document.createElement('div');
-  container.style.width = '10px';
-  container.style.height = '1px';
-  dummy.appendChild(container);
-  dummy.dir = 'rtl';
-  dummy.style.fontSize = '14px';
-  dummy.style.width = '4px';
-  dummy.style.height = '1px';
-  dummy.style.position = 'absolute';
-  dummy.style.top = '-1000px';
-  dummy.style.overflow = 'scroll';
-  document.body.appendChild(dummy);
-  cachedType = 'reverse';
-  if (dummy.scrollLeft > 0) {
-    cachedType = 'default';
-  } else {
-    dummy.scrollLeft = 1;
-    if (dummy.scrollLeft === 0) {
-      cachedType = 'negative';
-    }
-  }
-  document.body.removeChild(dummy);
-  return cachedType;
-}
-
-// Based on https://stackoverflow.com/a/24394376
-export function getNormalizedScrollLeft(element, direction) {
-  const scrollLeft = element.scrollLeft;
-
-  // Perform the calculations only when direction is rtl to avoid messing up the ltr behavior
-  if (direction !== 'rtl') {
-    return scrollLeft;
-  }
-  const type = detectScrollType();
-  switch (type) {
-    case 'negative':
-      return element.scrollWidth - element.clientWidth + scrollLeft;
-    case 'reverse':
-      return element.scrollWidth - element.clientWidth - scrollLeft;
-    default:
-      return scrollLeft;
-  }
-}

package/modern/useIsFocusVisible/index.js

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

package/modern/useIsFocusVisible/useIsFocusVisible.js

@@ -1,163 +0,0 @@
-'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';
-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/node/scrollLeft/index.js

@@ -1,16 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _scrollLeft = require("./scrollLeft");
-Object.keys(_scrollLeft).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _scrollLeft[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _scrollLeft[key];
-    }
-  });
-});

package/node/scrollLeft/scrollLeft.js

@@ -1,77 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.detectScrollType = detectScrollType;
-exports.getNormalizedScrollLeft = getNormalizedScrollLeft;
-// Source from https://github.com/alitaheri/normalize-scroll-left
-let cachedType;
-
-/**
- * Based on the jquery plugin https://github.com/othree/jquery.rtl-scroll-type
- *
- * Types of scrollLeft, assuming scrollWidth=100 and direction is rtl.
- *
- * Type             | <- Most Left | Most Right -> | Initial
- * ---------------- | ------------ | ------------- | -------
- * default          | 0            | 100           | 100
- * negative (spec*) | -100         | 0             | 0
- * reverse          | 100          | 0             | 0
- *
- * Edge 85: default
- * Safari 14: negative
- * Chrome 85: negative
- * Firefox 81: negative
- * IE11: reverse
- *
- * spec* https://drafts.csswg.org/cssom-view/#dom-window-scroll
- */
-function detectScrollType() {
-  if (cachedType) {
-    return cachedType;
-  }
-  const dummy = document.createElement('div');
-  const container = document.createElement('div');
-  container.style.width = '10px';
-  container.style.height = '1px';
-  dummy.appendChild(container);
-  dummy.dir = 'rtl';
-  dummy.style.fontSize = '14px';
-  dummy.style.width = '4px';
-  dummy.style.height = '1px';
-  dummy.style.position = 'absolute';
-  dummy.style.top = '-1000px';
-  dummy.style.overflow = 'scroll';
-  document.body.appendChild(dummy);
-  cachedType = 'reverse';
-  if (dummy.scrollLeft > 0) {
-    cachedType = 'default';
-  } else {
-    dummy.scrollLeft = 1;
-    if (dummy.scrollLeft === 0) {
-      cachedType = 'negative';
-    }
-  }
-  document.body.removeChild(dummy);
-  return cachedType;
-}
-
-// Based on https://stackoverflow.com/a/24394376
-function getNormalizedScrollLeft(element, direction) {
-  const scrollLeft = element.scrollLeft;
-
-  // Perform the calculations only when direction is rtl to avoid messing up the ltr behavior
-  if (direction !== 'rtl') {
-    return scrollLeft;
-  }
-  const type = detectScrollType();
-  switch (type) {
-    case 'negative':
-      return element.scrollWidth - element.clientWidth + scrollLeft;
-    case 'reverse':
-      return element.scrollWidth - element.clientWidth - scrollLeft;
-    default:
-      return scrollLeft;
-  }
-}

package/node/useIsFocusVisible/index.js

@@ -1,26 +0,0 @@
-"use strict";
-
-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];
-    }
-  });
-});
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }