@mui/utils 6.1.2 → 6.1.4

package/capitalize/capitalize.js

@@ -12,7 +12,7 @@ var _formatMuiErrorMessage2 = _interopRequireDefault(require("@mui/utils/formatM
 // We only handle the first word.
 function capitalize(string) {
   if (typeof string !== 'string') {
-    throw new Error(process.env.NODE_ENV !== "production" ? `MUI: \`capitalize(string)\` expects a string argument.` : (0, _formatMuiErrorMessage2.default)(7));
+    throw new Error(process.env.NODE_ENV !== "production" ? 'MUI: `capitalize(string)` expects a string argument.' : (0, _formatMuiErrorMessage2.default)(7));
   }
   return string.charAt(0).toUpperCase() + string.slice(1);
 }

package/esm/capitalize/capitalize.js

@@ -5,7 +5,7 @@ import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
 // 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.` : _formatMuiErrorMessage(7));
+    throw new Error(process.env.NODE_ENV !== "production" ? 'MUI: `capitalize(string)` expects a string argument.' : _formatMuiErrorMessage(7));
   }
   return string.charAt(0).toUpperCase() + string.slice(1);
 }

package/esm/formatMuiErrorMessage/formatMuiErrorMessage.js

@@ -1,19 +1,15 @@
 /**
- * WARNING: Don't import this directly.
- * Use `MuiError` from `@mui/internal-babel-macros/MuiError.macro` instead.
+ * WARNING: Don't import this directly. It's imported by the code generated by
+ * `@mui/interal-babel-plugin-minify-errors`. Make sure to always use string literals in `Error`
+ * constructors to ensure the plugin works as expected. Supported patterns include:
+ *   throw new Error('My message');
+ *   throw new Error(`My message: ${foo}`);
+ *   throw new Error(`My message: ${foo}` + 'another string');
+ *   ...
  * @param {number} code
  */
-export default function formatMuiErrorMessage(code) {
-  // Apply babel-plugin-transform-template-literals in loose mode
-  // loose mode is safe if we're concatenating primitives
-  // see https://babeljs.io/docs/en/babel-plugin-transform-template-literals#loose
-  /* eslint-disable prefer-template */
-  let url = 'https://mui.com/production-error/?code=' + code;
-  for (let i = 1; i < arguments.length; i += 1) {
-    // rest params over-transpile for this case
-    // eslint-disable-next-line prefer-rest-params
-    url += '&args[]=' + encodeURIComponent(arguments[i]);
-  }
-  return 'Minified MUI error #' + code + '; visit ' + url + ' for the full message.';
-  /* eslint-enable prefer-template */
+export default function formatMuiErrorMessage(code, ...args) {
+  const url = new URL(`https://mui.com/production-error/?code=${code}`);
+  args.forEach(arg => url.searchParams.append('args[]', arg));
+  return `Minified MUI error #${code}; visit ${url} for the full message.`;
 }

package/esm/getReactElementRef/getReactElementRef.js

@@ -5,14 +5,14 @@ import * as React from 'react';
  * It will throw runtime error if the element is not a valid React element.
  *
  * @param element React.ReactElement
- * @returns React.Ref<any> | null | undefined
+ * @returns React.Ref<any> | null
  */
 export default function getReactElementRef(element) {
   // 'ref' is passed as prop in React 19, whereas 'ref' is directly attached to children in older versions
   if (parseInt(React.version, 10) >= 19) {
-    return element.props?.ref;
+    return element?.props?.ref || null;
   }
   // @ts-expect-error element.ref is not included in the ReactElement type
   // https://github.com/DefinitelyTyped/DefinitelyTyped/discussions/70189
-  return element?.ref;
+  return element?.ref || null;
 }

package/esm/useLocalStorageState/useLocalStorageState.js

@@ -28,20 +28,20 @@ function emitCurrentTabStorageChange(key) {
     listeners.forEach(listener => listener());
   }
 }
-function subscribe(area, key, callbark) {
+function subscribe(area, key, callback) {
   if (!key) {
     return () => {};
   }
   const storageHandler = event => {
     if (event.storageArea === area && event.key === key) {
-      callbark();
+      callback();
     }
   };
   window.addEventListener('storage', storageHandler);
-  onCurrentTabStorageChange(key, callbark);
+  onCurrentTabStorageChange(key, callback);
   return () => {
     window.removeEventListener('storage', storageHandler);
-    offCurrentTabStorageChange(key, callbark);
+    offCurrentTabStorageChange(key, callback);
   };
 }
 function getSnapshot(area, key) {
@@ -89,7 +89,7 @@ function useLocalStorageStateServer() {
 function useLocalStorageStateBrowser(key, initializer = null) {
   const [initialValue] = React.useState(initializer);
   const area = window.localStorage;
-  const subscribeKey = React.useCallback(callbark => subscribe(area, key, callbark), [area, key]);
+  const subscribeKey = React.useCallback(callback => subscribe(area, key, callback), [area, key]);
   const getKeySnapshot = React.useCallback(() => getSnapshot(area, key) ?? initialValue, [area, initialValue, key]);
 
   // Start with null for the hydration, and then switch to the actual value.

package/formatMuiErrorMessage/formatMuiErrorMessage.d.ts

@@ -1,6 +1,11 @@
 /**
- * WARNING: Don't import this directly.
- * Use `MuiError` from `@mui/internal-babel-macros/MuiError.macro` instead.
+ * WARNING: Don't import this directly. It's imported by the code generated by
+ * `@mui/interal-babel-plugin-minify-errors`. Make sure to always use string literals in `Error`
+ * constructors to ensure the plugin works as expected. Supported patterns include:
+ *   throw new Error('My message');
+ *   throw new Error(`My message: ${foo}`);
+ *   throw new Error(`My message: ${foo}` + 'another string');
+ *   ...
  * @param {number} code
  */
-export default function formatMuiErrorMessage(code: number): string;
+export default function formatMuiErrorMessage(code: number, ...args: string[]): string;

package/formatMuiErrorMessage/formatMuiErrorMessage.js

@@ -5,21 +5,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = formatMuiErrorMessage;
 /**
- * WARNING: Don't import this directly.
- * Use `MuiError` from `@mui/internal-babel-macros/MuiError.macro` instead.
+ * WARNING: Don't import this directly. It's imported by the code generated by
+ * `@mui/interal-babel-plugin-minify-errors`. Make sure to always use string literals in `Error`
+ * constructors to ensure the plugin works as expected. Supported patterns include:
+ *   throw new Error('My message');
+ *   throw new Error(`My message: ${foo}`);
+ *   throw new Error(`My message: ${foo}` + 'another string');
+ *   ...
  * @param {number} code
  */
-function formatMuiErrorMessage(code) {
-  // Apply babel-plugin-transform-template-literals in loose mode
-  // loose mode is safe if we're concatenating primitives
-  // see https://babeljs.io/docs/en/babel-plugin-transform-template-literals#loose
-  /* eslint-disable prefer-template */
-  let url = 'https://mui.com/production-error/?code=' + code;
-  for (let i = 1; i < arguments.length; i += 1) {
-    // rest params over-transpile for this case
-    // eslint-disable-next-line prefer-rest-params
-    url += '&args[]=' + encodeURIComponent(arguments[i]);
-  }
-  return 'Minified MUI error #' + code + '; visit ' + url + ' for the full message.';
-  /* eslint-enable prefer-template */
+function formatMuiErrorMessage(code, ...args) {
+  const url = new URL(`https://mui.com/production-error/?code=${code}`);
+  args.forEach(arg => url.searchParams.append('args[]', arg));
+  return `Minified MUI error #${code}; visit ${url} for the full message.`;
 }

package/getReactElementRef/getReactElementRef.d.ts

@@ -4,6 +4,6 @@ import * as React from 'react';
  * It will throw runtime error if the element is not a valid React element.
  *
  * @param element React.ReactElement
- * @returns React.Ref<any> | null | undefined
+ * @returns React.Ref<any> | null
  */
-export default function getReactElementRef(element: React.ReactElement): React.Ref<any> | null | undefined;
+export default function getReactElementRef(element: React.ReactElement): React.Ref<any> | null;

package/getReactElementRef/getReactElementRef.js

@@ -11,14 +11,14 @@ var React = _interopRequireWildcard(require("react"));
  * It will throw runtime error if the element is not a valid React element.
  *
  * @param element React.ReactElement
- * @returns React.Ref<any> | null | undefined
+ * @returns React.Ref<any> | null
  */
 function getReactElementRef(element) {
   // 'ref' is passed as prop in React 19, whereas 'ref' is directly attached to children in older versions
   if (parseInt(React.version, 10) >= 19) {
-    return element.props?.ref;
+    return element?.props?.ref || null;
   }
   // @ts-expect-error element.ref is not included in the ReactElement type
   // https://github.com/DefinitelyTyped/DefinitelyTyped/discussions/70189
-  return element?.ref;
+  return element?.ref || null;
 }

package/getValidReactChildren/getValidReactChildren.d.ts

@@ -5,4 +5,4 @@ import * as React from 'react';
  *
  * @param children the children
  */
-export default function getValidReactChildren(children: React.ReactNode): React.ReactElement<any>[];
+export default function getValidReactChildren(children: React.ReactNode): React.ReactElement<unknown>[];

package/index.js

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

package/modern/capitalize/capitalize.js

@@ -5,7 +5,7 @@ import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
 // 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.` : _formatMuiErrorMessage(7));
+    throw new Error(process.env.NODE_ENV !== "production" ? 'MUI: `capitalize(string)` expects a string argument.' : _formatMuiErrorMessage(7));
   }
   return string.charAt(0).toUpperCase() + string.slice(1);
 }

package/modern/formatMuiErrorMessage/formatMuiErrorMessage.js

@@ -1,19 +1,15 @@
 /**
- * WARNING: Don't import this directly.
- * Use `MuiError` from `@mui/internal-babel-macros/MuiError.macro` instead.
+ * WARNING: Don't import this directly. It's imported by the code generated by
+ * `@mui/interal-babel-plugin-minify-errors`. Make sure to always use string literals in `Error`
+ * constructors to ensure the plugin works as expected. Supported patterns include:
+ *   throw new Error('My message');
+ *   throw new Error(`My message: ${foo}`);
+ *   throw new Error(`My message: ${foo}` + 'another string');
+ *   ...
  * @param {number} code
  */
-export default function formatMuiErrorMessage(code) {
-  // Apply babel-plugin-transform-template-literals in loose mode
-  // loose mode is safe if we're concatenating primitives
-  // see https://babeljs.io/docs/en/babel-plugin-transform-template-literals#loose
-  /* eslint-disable prefer-template */
-  let url = 'https://mui.com/production-error/?code=' + code;
-  for (let i = 1; i < arguments.length; i += 1) {
-    // rest params over-transpile for this case
-    // eslint-disable-next-line prefer-rest-params
-    url += '&args[]=' + encodeURIComponent(arguments[i]);
-  }
-  return 'Minified MUI error #' + code + '; visit ' + url + ' for the full message.';
-  /* eslint-enable prefer-template */
+export default function formatMuiErrorMessage(code, ...args) {
+  const url = new URL(`https://mui.com/production-error/?code=${code}`);
+  args.forEach(arg => url.searchParams.append('args[]', arg));
+  return `Minified MUI error #${code}; visit ${url} for the full message.`;
 }

package/modern/getReactElementRef/getReactElementRef.js

@@ -5,14 +5,14 @@ import * as React from 'react';
  * It will throw runtime error if the element is not a valid React element.
  *
  * @param element React.ReactElement
- * @returns React.Ref<any> | null | undefined
+ * @returns React.Ref<any> | null
  */
 export default function getReactElementRef(element) {
   // 'ref' is passed as prop in React 19, whereas 'ref' is directly attached to children in older versions
   if (parseInt(React.version, 10) >= 19) {
-    return element.props?.ref;
+    return element?.props?.ref || null;
   }
   // @ts-expect-error element.ref is not included in the ReactElement type
   // https://github.com/DefinitelyTyped/DefinitelyTyped/discussions/70189
-  return element?.ref;
+  return element?.ref || null;
 }

package/modern/index.js

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

package/modern/useLocalStorageState/useLocalStorageState.js

@@ -28,20 +28,20 @@ function emitCurrentTabStorageChange(key) {
     listeners.forEach(listener => listener());
   }
 }
-function subscribe(area, key, callbark) {
+function subscribe(area, key, callback) {
   if (!key) {
     return () => {};
   }
   const storageHandler = event => {
     if (event.storageArea === area && event.key === key) {
-      callbark();
+      callback();
     }
   };
   window.addEventListener('storage', storageHandler);
-  onCurrentTabStorageChange(key, callbark);
+  onCurrentTabStorageChange(key, callback);
   return () => {
     window.removeEventListener('storage', storageHandler);
-    offCurrentTabStorageChange(key, callbark);
+    offCurrentTabStorageChange(key, callback);
   };
 }
 function getSnapshot(area, key) {
@@ -89,7 +89,7 @@ function useLocalStorageStateServer() {
 function useLocalStorageStateBrowser(key, initializer = null) {
   const [initialValue] = React.useState(initializer);
   const area = window.localStorage;
-  const subscribeKey = React.useCallback(callbark => subscribe(area, key, callbark), [area, key]);
+  const subscribeKey = React.useCallback(callback => subscribe(area, key, callback), [area, key]);
   const getKeySnapshot = React.useCallback(() => getSnapshot(area, key) ?? initialValue, [area, initialValue, key]);
 
   // Start with null for the hydration, and then switch to the actual value.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/utils",
-  "version": "6.1.2",
+  "version": "6.1.4",
   "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.6",
+    "@babel/runtime": "^7.25.7",
     "@types/prop-types": "^15.7.13",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "react-is": "^18.3.1",
-    "@mui/types": "^7.2.17"
+    "@mui/types": "^7.2.18"
   },
   "peerDependencies": {
     "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",

package/useLocalStorageState/useLocalStorageState.js

@@ -33,20 +33,20 @@ function emitCurrentTabStorageChange(key) {
     listeners.forEach(listener => listener());
   }
 }
-function subscribe(area, key, callbark) {
+function subscribe(area, key, callback) {
   if (!key) {
     return () => {};
   }
   const storageHandler = event => {
     if (event.storageArea === area && event.key === key) {
-      callbark();
+      callback();
     }
   };
   window.addEventListener('storage', storageHandler);
-  onCurrentTabStorageChange(key, callbark);
+  onCurrentTabStorageChange(key, callback);
   return () => {
     window.removeEventListener('storage', storageHandler);
-    offCurrentTabStorageChange(key, callbark);
+    offCurrentTabStorageChange(key, callback);
   };
 }
 function getSnapshot(area, key) {
@@ -94,7 +94,7 @@ function useLocalStorageStateServer() {
 function useLocalStorageStateBrowser(key, initializer = null) {
   const [initialValue] = React.useState(initializer);
   const area = window.localStorage;
-  const subscribeKey = React.useCallback(callbark => subscribe(area, key, callbark), [area, key]);
+  const subscribeKey = React.useCallback(callback => subscribe(area, key, callback), [area, key]);
   const getKeySnapshot = React.useCallback(() => getSnapshot(area, key) ?? initialValue, [area, initialValue, key]);
 
   // Start with null for the hydration, and then switch to the actual value.