@mui/utils 6.0.0-beta.6 → 6.0.0-rc.0

package/CHANGELOG.md

@@ -1,5 +1,78 @@
 # [Versions](https://mui.com/versions/)
 
+## 6.0.0-rc.0
+
+<!-- generated comparing v6.0.0-beta.6..next -->
+
+_Aug 22, 2024_
+
+A big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- ⚡ Rendering performance improvements
+
+### `@mui/material@6.0.0-rc.0`
+
+#### Breaking changes
+
+- [Box] Remove `component` from `BoxOwnProps` (#43384) @DiegoAndai
+
+  The `component` prop has been removed from the `BoxOwnProps` as it is already included in the `Box` type.
+  This might affect your code if you are using the `styled` function with the `Box` component.
+  If this is the case, use a `div` element instead of `Box`:
+
+  ```diff
+  -const StyledBox = styled(Box)`
+  +const StyledDiv = styled('div')`
+     color: white;
+   `;
+  ```
+
+  This yields the same end result.
+  If this doesn't work for you, you can also cast the `styled` returned value to `typeof Box`:
+
+  ```diff
+   const StyledBox = styled(Box)`
+     color: white;
+  -`;
+  +` as typeof Box;
+  ```
+
+#### Changes
+
+- [ListItem] Remove unnecessary TypeScript test (#43359) @sai6855
+- Skip generating CSS variables for a custom spacing function (#43389) @siriwatknp
+- Revert visual regressions from #42283 (#43364) @ZeeshanTamboli
+
+### `@mui/codemod@6.0.0-rc.0`
+
+- Add Grid2 to removeSystemProps codemod (#43302) @DiegoAndai
+
+### Docs
+
+- [blog] Add video to the Pigment CSS blog post (#42500) @oliviertassinari
+- Fix broken link to milestones (#43379) @oliviertassinari
+- Update CSS theme variables related content (#43130) @siriwatknp
+- Fix link to createTheme source (#43332) @oliviertassinari
+- Add cache to avoid unnecessary jsx dynamic import and theme getting (#43139) @Vxee
+- Fix broken link to Next.js docs @oliviertassinari
+- [material-ui] Revamp `Composition` guide (#43266) @ZeeshanTamboli
+- [material-ui][Menu] Replace `PaperProps` with `slotProps.paper` in demos (#43354) @sai6855
+
+### Core
+
+- [code-infra] Change docs:start script to serve the exports folder (#43375) @Janpot
+- [core] Fix typescript-next CI workflow (#43394) @aarongarciah
+- [core] Run `@mui/system` TypeScript module augmentation tests in CI (#43386) @ZeeshanTamboli
+- [core] Enable manage-package-manager-versions pnpm flag (#43366) @aarongarciah
+- [core] Replace `indexOf` with `includes` (#42883) @k-rajat19
+- [docs-infra] Add GitHub source link to components (#43228) @Jay-Karia
+- [docs-infra] Fix copy shortcut (#43361) @oliviertassinari
+- [perf] Remove theme/styling allocations (#43372) @romgrk
+- [perf] Improve `composeClasses` (#43363) @romgrk
+- [perf] Remove system allocations (#43306) @romgrk
+
+All contributors of this release in alphabetical order: @aarongarciah, @DiegoAndai, @Janpot, @Jay-Karia, @k-rajat19, @oliviertassinari, @rluzists1, @romgrk, @sai6855, @siriwatknp, @Vxee, @ZeeshanTamboli
+
 ## 6.0.0-beta.6
 
 <!-- generated comparing v6.0.0-beta.5..next -->

package/composeClasses/composeClasses.js

@@ -4,24 +4,26 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = composeClasses;
+/* eslint no-restricted-syntax: 0, prefer-template: 0, guard-for-in: 0
+   ---
+   These rules are preventing the performance optimizations below.
+ */
+
 function composeClasses(slots, getUtilityClass, classes = undefined) {
   const output = {};
-  Object.keys(slots).forEach(
-  // `Object.keys(slots)` can't be wider than `T` because we infer `T` from `slots`.
-  // @ts-expect-error https://github.com/microsoft/TypeScript/pull/12253#issuecomment-263132208
-  slot => {
-    output[slot] = slots[slot].reduce((acc, key) => {
-      if (key) {
-        const utilityClass = getUtilityClass(key);
-        if (utilityClass !== '') {
-          acc.push(utilityClass);
-        }
-        if (classes && classes[key]) {
-          acc.push(classes[key]);
+  for (const slotName in slots) {
+    const slot = slots[slotName];
+    let buffer = '';
+    for (let i = 0; i < slot.length; i += 1) {
+      const value = slot[i];
+      if (value) {
+        buffer += getUtilityClass(value) + ' ';
+        if (classes && classes[value]) {
+          buffer += classes[value] + ' ';
         }
       }
-      return acc;
-    }, []).join(' ');
-  });
+    }
+    output[slotName] = buffer;
+  }
   return output;
 }

package/esm/composeClasses/composeClasses.js

@@ -1,21 +1,23 @@
+/* eslint no-restricted-syntax: 0, prefer-template: 0, guard-for-in: 0
+   ---
+   These rules are preventing the performance optimizations below.
+ */
+
 export default function composeClasses(slots, getUtilityClass, classes = undefined) {
   const output = {};
-  Object.keys(slots).forEach(
-  // `Object.keys(slots)` can't be wider than `T` because we infer `T` from `slots`.
-  // @ts-expect-error https://github.com/microsoft/TypeScript/pull/12253#issuecomment-263132208
-  slot => {
-    output[slot] = slots[slot].reduce((acc, key) => {
-      if (key) {
-        const utilityClass = getUtilityClass(key);
-        if (utilityClass !== '') {
-          acc.push(utilityClass);
-        }
-        if (classes && classes[key]) {
-          acc.push(classes[key]);
+  for (const slotName in slots) {
+    const slot = slots[slotName];
+    let buffer = '';
+    for (let i = 0; i < slot.length; i += 1) {
+      const value = slot[i];
+      if (value) {
+        buffer += getUtilityClass(value) + ' ';
+        if (classes && classes[value]) {
+          buffer += classes[value] + ' ';
         }
       }
-      return acc;
-    }, []).join(' ');
-  });
+    }
+    output[slotName] = buffer;
+  }
   return output;
 }

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, string | React.JSXElementConstructor<any>>[];
+export default function getValidReactChildren(children: React.ReactNode): React.ReactElement<any>[];

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/utils v6.0.0-beta.6
+ * @mui/utils v6.0.0-rc.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/isHostComponent/isHostComponent.d.ts

@@ -2,5 +2,5 @@ import * as React from 'react';
 /**
  * Determines if a given element is a DOM element name (i.e. not a React component).
  */
-declare function isHostComponent(element: React.ElementType): boolean;
+declare function isHostComponent(element: React.ElementType): element is "symbol" | "object" | "center" | "button" | "meter" | "textarea" | "style" | "progress" | "text" | "ruby" | "table" | "small" | "sub" | "circle" | "embed" | "pre" | "caption" | "menu" | "clipPath" | "filter" | "menuitem" | "mask" | "marker" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "canvas" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "meta" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "q" | "rp" | "rt" | "s" | "samp" | "search" | "slot" | "script" | "section" | "select" | "source" | "span" | "strong" | "summary" | "sup" | "template" | "tbody" | "td" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "textPath" | "tspan" | "use" | "view";
 export default isHostComponent;

package/modern/composeClasses/composeClasses.js

@@ -1,21 +1,23 @@
+/* eslint no-restricted-syntax: 0, prefer-template: 0, guard-for-in: 0
+   ---
+   These rules are preventing the performance optimizations below.
+ */
+
 export default function composeClasses(slots, getUtilityClass, classes = undefined) {
   const output = {};
-  Object.keys(slots).forEach(
-  // `Object.keys(slots)` can't be wider than `T` because we infer `T` from `slots`.
-  // @ts-expect-error https://github.com/microsoft/TypeScript/pull/12253#issuecomment-263132208
-  slot => {
-    output[slot] = slots[slot].reduce((acc, key) => {
-      if (key) {
-        const utilityClass = getUtilityClass(key);
-        if (utilityClass !== '') {
-          acc.push(utilityClass);
-        }
-        if (classes && classes[key]) {
-          acc.push(classes[key]);
+  for (const slotName in slots) {
+    const slot = slots[slotName];
+    let buffer = '';
+    for (let i = 0; i < slot.length; i += 1) {
+      const value = slot[i];
+      if (value) {
+        buffer += getUtilityClass(value) + ' ';
+        if (classes && classes[value]) {
+          buffer += classes[value] + ' ';
         }
       }
-      return acc;
-    }, []).join(' ');
-  });
+    }
+    output[slotName] = buffer;
+  }
   return output;
 }

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/utils v6.0.0-beta.6
+ * @mui/utils v6.0.0-rc.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/package.json

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

package/useSlotProps/useSlotProps.d.ts

@@ -31,10 +31,10 @@ export type UseSlotPropsResult<ElementType extends React.ElementType, SlotProps,
  * @param parameters.getSlotProps - A function that returns the props to be passed to the slot component.
  */
 declare function useSlotProps<ElementType extends React.ElementType, SlotProps, AdditionalProps, OwnerState>(parameters: UseSlotPropsParameters<ElementType, SlotProps, object, WithCommonProps<Record<string, any>>, AdditionalProps, OwnerState>): import("@mui/types").Simplify<import("@mui/types").Simplify<SlotProps & object & AdditionalProps & {
-    className?: string | undefined;
-    style?: React.CSSProperties | undefined;
+    className?: string;
+    style?: React.CSSProperties;
 }> & {
-    ref: ((instance: any) => void) | null;
+    ref: ((instance: any | null) => void) | null;
 } & {
     ownerState: ElementType extends React.ComponentType<any> ? OwnerState : ElementType extends keyof React.JSX.IntrinsicElements ? undefined : OwnerState | undefined;
 }>;