@mui/utils 7.0.1 → 7.0.2

package/CHANGELOG.md

@@ -1,5 +1,65 @@
 # [Versions](https://mui.com/versions/)
 
+## 7.0.2
+
+_Apr 9, 2025_
+
+A big thanks to the 12 contributors who made this release possible.
+
+### `@mui/material@7.0.2`
+
+- [Autocomplete] Add ability to render custom single value (#45387) @ZeeshanTamboli
+- [Autocomplete] Prevent shrink animation in controlled Autocomplete when initial `value` is provided (#45734) @imadx
+- [AvatarGroup] Fix `spacing` prop ignoring value `0` (#45799) @Kartik-Murthy
+- [Dialog] Deprecate composed classes (#45418) @sai6855
+
+### `@mui/material-nextjs@7.0.2`
+
+- Fix nonce issues (#45794) @Janpot
+- Add warnings to nextjs router integration (#45778) @Janpot
+
+### `@mui/styled-engine@7.0.2`
+
+- Added caching to `StyledEngineProvider` to improve performance for running tests with Jest (#45846) @siriwatknp
+
+### Core
+
+- [blog] Improve upvote video (0646444) @oliviertassinari
+- [code-infra] Remove webpack aliases (#45841) @Janpot
+- [code-infra] Remove .tsbuildinfo from build folder (#45727) @Janpot
+- [code-infra] Stabilize theme viewer screenshot tests (#45768) @Janpot
+- [code-infra] Remove modern bundles (#45808) @Janpot
+- Update buildTypes script to optionally remove css imports (#45835) @brijeshb42
+- Allow repo to be accepted as an argument for releaseTag (#45801) @brijeshb42
+- Update scripts to support base-ui (#45784) @brijeshb42
+- Sync scorecards.yml across codebase (4de5076) @oliviertassinari
+- Remove baseUrl and skipLibCheck (#45806) @Janpot
+- [docs-infra] Fix redirect styles pages (#45848) @siriwatknp
+- [docs-infra] Remove false-positive Vale rules (#45843) @oliviertassinari
+- [docs-infra] Make sure Next.js can find package.json through its aliases (#45840) @Janpot
+- [docs-infra] Fix Next.js brand name coverage (6915f8d) @oliviertassinari
+- [docs-infra] Fix layout shift between MIT and commercial pages (#45760) @oliviertassinari
+- [docs-infra] Non breaking space for ESM (#45758) @oliviertassinari
+- [support-infra] Remove dead 'workflow_call:' (#45736) @oliviertassinari
+- [utils] Support cleanup callbacks in useForkRef (#45621) @DiegoAndai
+
+### Docs
+
+- Fix pigment vite integration example (#44746) @brijeshb42
+- Update migration instructions and codemod references for deprecated APIs (#45793) @sai6855
+- Add TanStack Router routing example (#44930) @vetledv
+- Fix layout shifting in icons page (#45779) @sai6855
+- Fix migration instructions (#45762) @oliviertassinari
+- Fix wrong TypeScript support version (#45761) @oliviertassinari
+- Fix link to mui-joy/src/styles/components.d.ts (#45763) @oliviertassinari
+- Fix 301 link (ae94c40) @oliviertassinari
+- Fix 301 links (abd8f63) @oliviertassinari
+- Fix 301 redirection (c7658de) @oliviertassinari
+- [nextjs] Migrate from deprecated "legacyBehavior" prop (#44871) @oliviertassinari
+- [nextjs] Document CSP for Next.js Pages Router (#45798) @Grohden
+
+All contributors of this release in alphabetical order: @brijeshb42, @DiegoAndai, @Grohden, @imadx, @Janpot, @Kartik-Murthy, @oliviertassinari, @renovate[bot], @sai6855, @siriwatknp, @vetledv, @ZeeshanTamboli
+
 ## 7.0.1
 
 <!-- generated comparing v7.0.0..master -->

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/utils v7.0.1
+ * @mui/utils v7.0.2
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/esm/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/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 v7.0.1
+ * @mui/utils v7.0.2
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/utils",
-  "version": "7.0.1",
+  "version": "7.0.2",
   "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.26.10",
+    "@babel/runtime": "^7.27.0",
     "@types/prop-types": "^15.7.14",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
-    "react-is": "^19.0.0",
-    "@mui/types": "^7.4.0"
+    "react-is": "^19.1.0",
+    "@mui/types": "^7.4.1"
   },
   "peerDependencies": {
     "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
@@ -61,10 +61,6 @@
       "import": {
         "types": "./esm/index.d.ts",
         "default": "./esm/index.js"
-      },
-      "mui-modern": {
-        "types": "./modern/index.d.ts",
-        "default": "./modern/index.js"
       }
     },
     "./*": {
@@ -75,10 +71,6 @@
       "import": {
         "types": "./esm/*/index.d.ts",
         "default": "./esm/*/index.js"
-      },
-      "mui-modern": {
-        "types": "./modern/*/index.d.ts",
-        "default": "./modern/*/index.js"
       }
     },
     "./esm": null,

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

package/modern/ClassNameGenerator/ClassNameGenerator.js

@@ -1,17 +0,0 @@
-const defaultGenerator = componentName => componentName;
-const createClassNameGenerator = () => {
-  let generate = defaultGenerator;
-  return {
-    configure(generator) {
-      generate = generator;
-    },
-    generate(componentName) {
-      return generate(componentName);
-    },
-    reset() {
-      generate = defaultGenerator;
-    }
-  };
-};
-const ClassNameGenerator = createClassNameGenerator();
-export default ClassNameGenerator;

package/modern/ClassNameGenerator/index.js

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

package/modern/HTMLElementType/HTMLElementType.js

@@ -1,14 +0,0 @@
-export default function HTMLElementType(props, propName, componentName, location, propFullName) {
-  if (process.env.NODE_ENV === 'production') {
-    return null;
-  }
-  const propValue = props[propName];
-  const safePropName = propFullName || propName;
-  if (propValue == null) {
-    return null;
-  }
-  if (propValue && propValue.nodeType !== 1) {
-    return new Error(`Invalid ${location} \`${safePropName}\` supplied to \`${componentName}\`. ` + `Expected an HTMLElement.`);
-  }
-  return null;
-}

package/modern/HTMLElementType/index.js

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

package/modern/appendOwnerState/appendOwnerState.js

@@ -1,28 +0,0 @@
-import isHostComponent from "../isHostComponent/index.js";
-
-/**
- * Type of the ownerState based on the type of an element it applies to.
- * This resolves to the provided OwnerState for React components and `undefined` for host components.
- * Falls back to `OwnerState | undefined` when the exact type can't be determined in development time.
- */
-
-/**
- * Appends the ownerState object to the props, merging with the existing one if necessary.
- *
- * @param elementType Type of the element that owns the `existingProps`. If the element is a DOM node or undefined, `ownerState` is not applied.
- * @param otherProps Props of the element.
- * @param ownerState
- */
-function appendOwnerState(elementType, otherProps, ownerState) {
-  if (elementType === undefined || isHostComponent(elementType)) {
-    return otherProps;
-  }
-  return {
-    ...otherProps,
-    ownerState: {
-      ...otherProps.ownerState,
-      ...ownerState
-    }
-  };
-}
-export default appendOwnerState;

package/modern/appendOwnerState/index.js

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

package/modern/capitalize/capitalize.js

@@ -1,11 +0,0 @@
-import _formatErrorMessage from "@mui/utils/formatMuiErrorMessage";
-// It should to be noted that this function isn't equivalent to `text-transform: capitalize`.
-//
-// A strict capitalization should uppercase the first letter of each word in the sentence.
-// We only handle the first word.
-export default function capitalize(string) {
-  if (typeof string !== 'string') {
-    throw new Error(process.env.NODE_ENV !== "production" ? 'MUI: `capitalize(string)` expects a string argument.' : _formatErrorMessage(7));
-  }
-  return string.charAt(0).toUpperCase() + string.slice(1);
-}

package/modern/capitalize/index.js

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

package/modern/chainPropTypes/chainPropTypes.js

@@ -1,8 +0,0 @@
-export default function chainPropTypes(propType1, propType2) {
-  if (process.env.NODE_ENV === 'production') {
-    return () => null;
-  }
-  return function validate(...args) {
-    return propType1(...args) || propType2(...args);
-  };
-}

package/modern/chainPropTypes/index.js

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

package/modern/clamp/clamp.js

@@ -1,4 +0,0 @@
-function clamp(val, min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER) {
-  return Math.max(min, Math.min(val, max));
-}
-export default clamp;

package/modern/clamp/index.js

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

package/modern/composeClasses/composeClasses.js

@@ -1,53 +0,0 @@
-/* eslint no-restricted-syntax: 0, prefer-template: 0, guard-for-in: 0
-   ---
-   These rules are preventing the performance optimizations below.
- */
-
-/**
- * Compose classes from multiple sources.
- *
- * @example
- * ```tsx
- * const slots = {
- *  root: ['root', 'primary'],
- *  label: ['label'],
- * };
- *
- * const getUtilityClass = (slot) => `MuiButton-${slot}`;
- *
- * const classes = {
- *   root: 'my-root-class',
- * };
- *
- * const output = composeClasses(slots, getUtilityClass, classes);
- * // {
- * //   root: 'MuiButton-root MuiButton-primary my-root-class',
- * //   label: 'MuiButton-label',
- * // }
- * ```
- *
- * @param slots a list of classes for each possible slot
- * @param getUtilityClass a function to resolve the class based on the slot name
- * @param classes the input classes from props
- * @returns the resolved classes for all slots
- */
-export default function composeClasses(slots, getUtilityClass, classes = undefined) {
-  const output = {};
-  for (const slotName in slots) {
-    const slot = slots[slotName];
-    let buffer = '';
-    let start = true;
-    for (let i = 0; i < slot.length; i += 1) {
-      const value = slot[i];
-      if (value) {
-        buffer += (start === true ? '' : ' ') + getUtilityClass(value);
-        start = false;
-        if (classes && classes[value]) {
-          buffer += ' ' + classes[value];
-        }
-      }
-    }
-    output[slotName] = buffer;
-  }
-  return output;
-}

package/modern/composeClasses/index.js

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

package/modern/createChainedFunction/createChainedFunction.js

@@ -1,17 +0,0 @@
-/**
- * Safe chained function.
- *
- * Will only create a new function if needed,
- * otherwise will pass back existing functions or null.
- */
-export default function createChainedFunction(...funcs) {
-  return funcs.reduce((acc, func) => {
-    if (func == null) {
-      return acc;
-    }
-    return function chainedFunction(...args) {
-      acc.apply(this, args);
-      func.apply(this, args);
-    };
-  }, () => {});
-}

package/modern/createChainedFunction/index.js

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

package/modern/debounce/debounce.js

@@ -1,17 +0,0 @@
-// Corresponds to 10 frames at 60 Hz.
-// A few bytes payload overhead when lodash/debounce is ~3 kB and debounce ~300 B.
-export default function debounce(func, wait = 166) {
-  let timeout;
-  function debounced(...args) {
-    const later = () => {
-      // @ts-ignore
-      func.apply(this, args);
-    };
-    clearTimeout(timeout);
-    timeout = setTimeout(later, wait);
-  }
-  debounced.clear = () => {
-    clearTimeout(timeout);
-  };
-  return debounced;
-}

package/modern/debounce/index.js

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

package/modern/deepmerge/deepmerge.js

@@ -1,64 +0,0 @@
-import * as React from 'react';
-import { isValidElementType } from 'react-is';
-
-// https://github.com/sindresorhus/is-plain-obj/blob/main/index.js
-export function isPlainObject(item) {
-  if (typeof item !== 'object' || item === null) {
-    return false;
-  }
-  const prototype = Object.getPrototypeOf(item);
-  return (prototype === null || prototype === Object.prototype || Object.getPrototypeOf(prototype) === null) && !(Symbol.toStringTag in item) && !(Symbol.iterator in item);
-}
-function deepClone(source) {
-  if (/*#__PURE__*/React.isValidElement(source) || isValidElementType(source) || !isPlainObject(source)) {
-    return source;
-  }
-  const output = {};
-  Object.keys(source).forEach(key => {
-    output[key] = deepClone(source[key]);
-  });
-  return output;
-}
-
-/**
- * Merge objects deeply.
- * It will shallow copy React elements.
- *
- * If `options.clone` is set to `false` the source object will be merged directly into the target object.
- *
- * @example
- * ```ts
- * deepmerge({ a: { b: 1 }, d: 2 }, { a: { c: 2 }, d: 4 });
- * // => { a: { b: 1, c: 2 }, d: 4 }
- * ````
- *
- * @param target The target object.
- * @param source The source object.
- * @param options The merge options.
- * @param options.clone Set to `false` to merge the source object directly into the target object.
- * @returns The merged object.
- */
-export default function deepmerge(target, source, options = {
-  clone: true
-}) {
-  const output = options.clone ? {
-    ...target
-  } : target;
-  if (isPlainObject(target) && isPlainObject(source)) {
-    Object.keys(source).forEach(key => {
-      if (/*#__PURE__*/React.isValidElement(source[key]) || isValidElementType(source[key])) {
-        output[key] = source[key];
-      } else if (isPlainObject(source[key]) &&
-      // Avoid prototype pollution
-      Object.prototype.hasOwnProperty.call(target, key) && isPlainObject(target[key])) {
-        // Since `output` is a clone of `target` and we have narrowed `target` in this block we can cast to the same type.
-        output[key] = deepmerge(target[key], source[key], options);
-      } else if (options.clone) {
-        output[key] = isPlainObject(source[key]) ? deepClone(source[key]) : source[key];
-      } else {
-        output[key] = source[key];
-      }
-    });
-  }
-  return output;
-}

package/modern/deepmerge/index.js

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

package/modern/deprecatedPropType/deprecatedPropType.js

@@ -1,13 +0,0 @@
-export default function deprecatedPropType(validator, reason) {
-  if (process.env.NODE_ENV === 'production') {
-    return () => null;
-  }
-  return (props, propName, componentName, location, propFullName) => {
-    const componentNameSafe = componentName || '<<anonymous>>';
-    const propFullNameSafe = propFullName || propName;
-    if (typeof props[propName] !== 'undefined') {
-      return new Error(`The ${location} \`${propFullNameSafe}\` of ` + `\`${componentNameSafe}\` is deprecated. ${reason}`);
-    }
-    return null;
-  };
-}

package/modern/deprecatedPropType/index.js

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

package/modern/elementAcceptingRef/elementAcceptingRef.js

@@ -1,42 +0,0 @@
-import PropTypes from 'prop-types';
-import chainPropTypes from "../chainPropTypes/index.js";
-function isClassComponent(elementType) {
-  // elementType.prototype?.isReactComponent
-  const {
-    prototype = {}
-  } = elementType;
-  return Boolean(prototype.isReactComponent);
-}
-function acceptingRef(props, propName, componentName, location, propFullName) {
-  const element = props[propName];
-  const safePropName = propFullName || propName;
-  if (element == null ||
-  // When server-side rendering React doesn't warn either.
-  // This is not an accurate check for SSR.
-  // This is only in place for Emotion compat.
-  // TODO: Revisit once https://github.com/facebook/react/issues/20047 is resolved.
-  typeof window === 'undefined') {
-    return null;
-  }
-  let warningHint;
-  const elementType = element.type;
-  /**
-   * Blacklisting instead of whitelisting
-   *
-   * Blacklisting will miss some components, such as React.Fragment. Those will at least
-   * trigger a warning in React.
-   * We can't whitelist because there is no safe way to detect React.forwardRef
-   * or class components. "Safe" means there's no public API.
-   *
-   */
-  if (typeof elementType === 'function' && !isClassComponent(elementType)) {
-    warningHint = 'Did you accidentally use a plain function component for an element instead?';
-  }
-  if (warningHint !== undefined) {
-    return new Error(`Invalid ${location} \`${safePropName}\` supplied to \`${componentName}\`. ` + `Expected an element that can hold a ref. ${warningHint} ` + 'For more information see https://mui.com/r/caveat-with-refs-guide');
-  }
-  return null;
-}
-const elementAcceptingRef = chainPropTypes(PropTypes.element, acceptingRef);
-elementAcceptingRef.isRequired = chainPropTypes(PropTypes.element.isRequired, acceptingRef);
-export default elementAcceptingRef;

package/modern/elementAcceptingRef/index.js

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