@mui/utils 6.4.8 → 6.4.9

package/CHANGELOG.md

@@ -1,5 +1,59 @@
 # [Versions](https://mui.com/versions/)
 
+## 6.4.10
+
+<!-- generated comparing v6.4.9..v6.x -->
+
+_Mar 31, 2025_
+
+A big thanks to the 4 contributors who made this release possible.
+
+### `@mui/material@6.4.10`
+
+- [Autocomplete] Prevent shrink animation in controlled Autocomplete when initial `value` is provided (#45735) @imadx
+- [Popover] Allow `null` in `anchorEl` function return type (#45723) @eduter
+
+### Docs
+
+- Fix new React project link, CRA deprecated (#45669) @oliviertassinari
+
+### Core
+
+- [utils] Support cleanup callbacks in useForkRef (#45733) @DiegoAndai
+
+All contributors of this release in alphabetical order: @DiegoAndai, @eduter, @imadx, @oliviertassinari
+
+## 6.4.9
+
+<!-- generated comparing v6.4.8..v6.x -->
+
+_Mar 25, 2025_
+
+A big thanks to the 7 contributors who made this release possible.
+
+### `@mui/material@6.4.9`
+
+- [Autocomplete] Fix when `onHighlightChange` is called (@ZeeshanTamboli) (#45635) @ZeeshanTamboli
+- [StepLabel] Add missing root slot (#45607) @sai6855
+- [Switch] Add slots and slotProps (#45628) @siriwatknp
+- [TextField] Add `root` slot (#45616) @sai6855
+- [Tabs] Fix modifier keys + Left/Right Arrow key from being consumed by tab navigation (#45620) @mushfiqbh
+
+### `@mui/codemon@6.4.9`
+
+- Add missing deprecations in deprecations-all file (#45508) @sai6855
+
+### Docs
+
+- [docs] Fix grammatical errors in support.md (#45636) @letianpailove
+- [docs] Restore utility component docs from MUI Base to Material UI (#45240) @mapache-salvaje
+
+### Core
+
+- [core] Prepare v6 branch for v7 stable release (#45668) @DiegoAndai
+
+All contributors of this release in alphabetical order: @DiegoAndai, @letianpailove, @mapache-salvaje, @mushfiqbh, @sai6855, @siriwatknp, @ZeeshanTamboli
+
 ## 6.4.8
 
 <!-- generated comparing v6.4.7..v6.x -->

package/esm/useForkRef/useForkRef.js

@@ -1,11 +1,9 @@
 'use client';
 
 import * as React from 'react';
-import setRef from "../setRef/index.js";
 
 /**
- * Takes an array of refs and returns a new ref which will apply any modification to all of the refs.
- * This is useful when you want to have the ref used in multiple places.
+ * Merges refs into a single memoized callback ref or `null`.
  *
  * ```tsx
  * const rootRef = React.useRef<Instance>(null);
@@ -20,19 +18,41 @@ import setRef from "../setRef/index.js";
  * @returns {React.RefCallback<Instance> | null} The new ref callback.
  */
 export default function useForkRef(...refs) {
-  /**
-   * This will create a new function if the refs passed to this hook change and are all defined.
-   * This means react will call the old forkRef with `null` and the new forkRef
-   * with the ref. Cleanup naturally emerges from this behavior.
-   */
+  const cleanupRef = React.useRef(undefined);
+  const refEffect = React.useCallback(instance => {
+    const cleanups = refs.map(ref => {
+      if (ref == null) {
+        return null;
+      }
+      if (typeof ref === 'function') {
+        const refCallback = ref;
+        const refCleanup = refCallback(instance);
+        return typeof refCleanup === 'function' ? refCleanup : () => {
+          refCallback(null);
+        };
+      }
+      ref.current = instance;
+      return () => {
+        ref.current = null;
+      };
+    });
+    return () => {
+      cleanups.forEach(refCleanup => refCleanup?.());
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, refs);
   return React.useMemo(() => {
     if (refs.every(ref => ref == null)) {
       return null;
     }
-    return instance => {
-      refs.forEach(ref => {
-        setRef(ref, instance);
-      });
+    return value => {
+      if (cleanupRef.current) {
+        cleanupRef.current();
+        cleanupRef.current = undefined;
+      }
+      if (value != null) {
+        cleanupRef.current = refEffect(value);
+      }
     };
     // TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler -- intentionally ignoring that the dependency array must be an array literal
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/utils v6.4.8
+ * @mui/utils v6.4.9
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/utils v6.4.8
+ * @mui/utils v6.4.9
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/useForkRef/useForkRef.js

@@ -1,11 +1,9 @@
 'use client';
 
 import * as React from 'react';
-import setRef from "../setRef/index.js";
 
 /**
- * Takes an array of refs and returns a new ref which will apply any modification to all of the refs.
- * This is useful when you want to have the ref used in multiple places.
+ * Merges refs into a single memoized callback ref or `null`.
  *
  * ```tsx
  * const rootRef = React.useRef<Instance>(null);
@@ -20,19 +18,41 @@ import setRef from "../setRef/index.js";
  * @returns {React.RefCallback<Instance> | null} The new ref callback.
  */
 export default function useForkRef(...refs) {
-  /**
-   * This will create a new function if the refs passed to this hook change and are all defined.
-   * This means react will call the old forkRef with `null` and the new forkRef
-   * with the ref. Cleanup naturally emerges from this behavior.
-   */
+  const cleanupRef = React.useRef(undefined);
+  const refEffect = React.useCallback(instance => {
+    const cleanups = refs.map(ref => {
+      if (ref == null) {
+        return null;
+      }
+      if (typeof ref === 'function') {
+        const refCallback = ref;
+        const refCleanup = refCallback(instance);
+        return typeof refCleanup === 'function' ? refCleanup : () => {
+          refCallback(null);
+        };
+      }
+      ref.current = instance;
+      return () => {
+        ref.current = null;
+      };
+    });
+    return () => {
+      cleanups.forEach(refCleanup => refCleanup?.());
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, refs);
   return React.useMemo(() => {
     if (refs.every(ref => ref == null)) {
       return null;
     }
-    return instance => {
-      refs.forEach(ref => {
-        setRef(ref, instance);
-      });
+    return value => {
+      if (cleanupRef.current) {
+        cleanupRef.current();
+        cleanupRef.current = undefined;
+      }
+      if (value != null) {
+        cleanupRef.current = refEffect(value);
+      }
     };
     // TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler -- intentionally ignoring that the dependency array must be an array literal
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/utils",
-  "version": "6.4.8",
+  "version": "6.4.9",
   "private": false,
   "author": "MUI Team",
   "description": "Utility functions for React components.",

package/useForkRef/useForkRef.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
 /**
- * Takes an array of refs and returns a new ref which will apply any modification to all of the refs.
- * This is useful when you want to have the ref used in multiple places.
+ * Merges refs into a single memoized callback ref or `null`.
  *
  * ```tsx
  * const rootRef = React.useRef<Instance>(null);

package/useForkRef/useForkRef.js

@@ -1,17 +1,14 @@
 "use strict";
 'use client';
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = useForkRef;
 var React = _interopRequireWildcard(require("react"));
-var _setRef = _interopRequireDefault(require("../setRef"));
 /**
- * Takes an array of refs and returns a new ref which will apply any modification to all of the refs.
- * This is useful when you want to have the ref used in multiple places.
+ * Merges refs into a single memoized callback ref or `null`.
  *
  * ```tsx
  * const rootRef = React.useRef<Instance>(null);
@@ -26,19 +23,41 @@ var _setRef = _interopRequireDefault(require("../setRef"));
  * @returns {React.RefCallback<Instance> | null} The new ref callback.
  */
 function useForkRef(...refs) {
-  /**
-   * This will create a new function if the refs passed to this hook change and are all defined.
-   * This means react will call the old forkRef with `null` and the new forkRef
-   * with the ref. Cleanup naturally emerges from this behavior.
-   */
+  const cleanupRef = React.useRef(undefined);
+  const refEffect = React.useCallback(instance => {
+    const cleanups = refs.map(ref => {
+      if (ref == null) {
+        return null;
+      }
+      if (typeof ref === 'function') {
+        const refCallback = ref;
+        const refCleanup = refCallback(instance);
+        return typeof refCleanup === 'function' ? refCleanup : () => {
+          refCallback(null);
+        };
+      }
+      ref.current = instance;
+      return () => {
+        ref.current = null;
+      };
+    });
+    return () => {
+      cleanups.forEach(refCleanup => refCleanup?.());
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, refs);
   return React.useMemo(() => {
     if (refs.every(ref => ref == null)) {
       return null;
     }
-    return instance => {
-      refs.forEach(ref => {
-        (0, _setRef.default)(ref, instance);
-      });
+    return value => {
+      if (cleanupRef.current) {
+        cleanupRef.current();
+        cleanupRef.current = undefined;
+      }
+      if (value != null) {
+        cleanupRef.current = refEffect(value);
+      }
     };
     // TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler -- intentionally ignoring that the dependency array must be an array literal
     // eslint-disable-next-line react-hooks/exhaustive-deps