@mui/styled-engine 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/StyledEngineProvider/StyledEngineProvider.js

@@ -14,6 +14,9 @@ var _react2 = require("@emotion/react");
 var _cache = _interopRequireDefault(require("@emotion/cache"));
 var _sheet = require("@emotion/sheet");
 var _jsxRuntime = require("react/jsx-runtime");
+// To fix [Jest performance](https://github.com/mui/material-ui/issues/45638).
+const cacheMap = new Map();
+
 // Need to add a private variable to test the generated CSS from Emotion, this is the simplest way to do it.
 // We can't test the CSS from `style` tag easily because the `speedy: true` (produce empty text content) is enabled by Emotion.
 // Even if we disable it, JSDOM needs extra configuration to be able to parse `@layer` CSS.
@@ -104,7 +107,15 @@ function StyledEngineProvider(props) {
     enableCssLayer,
     children
   } = props;
-  const cache = React.useMemo(() => getCache(injectFirst, enableCssLayer), [injectFirst, enableCssLayer]);
+  const cache = React.useMemo(() => {
+    const cacheKey = `${injectFirst}-${enableCssLayer}`;
+    if (cacheMap.has(cacheKey)) {
+      return cacheMap.get(cacheKey);
+    }
+    const fresh = getCache(injectFirst, enableCssLayer);
+    cacheMap.set(cacheKey, fresh);
+    return fresh;
+  }, [injectFirst, enableCssLayer]);
   return cache ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.CacheProvider, {
     value: cache,
     children: children

package/esm/StyledEngineProvider/StyledEngineProvider.js

@@ -6,10 +6,13 @@ import { CacheProvider } from '@emotion/react';
 import createCache from '@emotion/cache';
 import { StyleSheet } from '@emotion/sheet';
 
+// To fix [Jest performance](https://github.com/mui/material-ui/issues/45638).
+import { jsx as _jsx } from "react/jsx-runtime";
+const cacheMap = new Map();
+
 // Need to add a private variable to test the generated CSS from Emotion, this is the simplest way to do it.
 // We can't test the CSS from `style` tag easily because the `speedy: true` (produce empty text content) is enabled by Emotion.
 // Even if we disable it, JSDOM needs extra configuration to be able to parse `@layer` CSS.
-import { jsx as _jsx } from "react/jsx-runtime";
 export const TEST_INTERNALS_DO_NOT_USE = {
   /**
    * to intercept the generated CSS before inserting to the style tag, so that we can check the generated CSS.
@@ -97,7 +100,15 @@ export default function StyledEngineProvider(props) {
     enableCssLayer,
     children
   } = props;
-  const cache = React.useMemo(() => getCache(injectFirst, enableCssLayer), [injectFirst, enableCssLayer]);
+  const cache = React.useMemo(() => {
+    const cacheKey = `${injectFirst}-${enableCssLayer}`;
+    if (cacheMap.has(cacheKey)) {
+      return cacheMap.get(cacheKey);
+    }
+    const fresh = getCache(injectFirst, enableCssLayer);
+    cacheMap.set(cacheKey, fresh);
+    return fresh;
+  }, [injectFirst, enableCssLayer]);
   return cache ? /*#__PURE__*/_jsx(CacheProvider, {
     value: cache,
     children: children

package/esm/index.js

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

package/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/styled-engine",
-  "version": "7.0.1",
+  "version": "7.0.2",
   "private": false,
   "author": "MUI Team",
   "description": "styled() API wrapper package for emotion.",
@@ -26,7 +26,7 @@
     "url": "https://opencollective.com/mui-org"
   },
   "dependencies": {
-    "@babel/runtime": "^7.26.10",
+    "@babel/runtime": "^7.27.0",
     "@emotion/cache": "^11.13.5",
     "@emotion/serialize": "^1.3.3",
     "@emotion/sheet": "^1.4.0",
@@ -65,10 +65,6 @@
       "import": {
         "types": "./esm/index.d.ts",
         "default": "./esm/index.js"
-      },
-      "mui-modern": {
-        "types": "./modern/index.d.ts",
-        "default": "./modern/index.js"
       }
     },
     "./*": {
@@ -79,10 +75,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/modern/GlobalStyles/GlobalStyles.js

@@ -1,23 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { Global } from '@emotion/react';
-import { jsx as _jsx } from "react/jsx-runtime";
-function isEmpty(obj) {
-  return obj === undefined || obj === null || Object.keys(obj).length === 0;
-}
-export default function GlobalStyles(props) {
-  const {
-    styles,
-    defaultTheme = {}
-  } = props;
-  const globalStyles = typeof styles === 'function' ? themeInput => styles(isEmpty(themeInput) ? defaultTheme : themeInput) : styles;
-  return /*#__PURE__*/_jsx(Global, {
-    styles: globalStyles
-  });
-}
-process.env.NODE_ENV !== "production" ? GlobalStyles.propTypes = {
-  defaultTheme: PropTypes.object,
-  styles: PropTypes.oneOfType([PropTypes.array, PropTypes.string, PropTypes.object, PropTypes.func])
-} : void 0;

package/modern/GlobalStyles/index.js

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

package/modern/StyledEngineProvider/StyledEngineProvider.js

@@ -1,122 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { CacheProvider } from '@emotion/react';
-import createCache from '@emotion/cache';
-import { StyleSheet } from '@emotion/sheet';
-
-// Need to add a private variable to test the generated CSS from Emotion, this is the simplest way to do it.
-// We can't test the CSS from `style` tag easily because the `speedy: true` (produce empty text content) is enabled by Emotion.
-// Even if we disable it, JSDOM needs extra configuration to be able to parse `@layer` CSS.
-import { jsx as _jsx } from "react/jsx-runtime";
-export const TEST_INTERNALS_DO_NOT_USE = {
-  /**
-   * to intercept the generated CSS before inserting to the style tag, so that we can check the generated CSS.
-   *
-   * let rule;
-   * TEST_INTERNALS_DO_NOT_USE.insert = (...args) => {
-   *    rule = args[0];
-   * };
-   *
-   * expect(rule).to.equal(...);
-   */
-  insert: undefined
-};
-
-// We might be able to remove this when this issue is fixed:
-// https://github.com/emotion-js/emotion/issues/2790
-const createEmotionCache = (options, CustomSheet) => {
-  const cache = createCache(options);
-
-  // Do the same as https://github.com/emotion-js/emotion/blob/main/packages/cache/src/index.js#L238-L245
-  cache.sheet = new CustomSheet({
-    key: cache.key,
-    nonce: cache.sheet.nonce,
-    container: cache.sheet.container,
-    speedy: cache.sheet.isSpeedy,
-    prepend: cache.sheet.prepend,
-    insertionPoint: cache.sheet.insertionPoint
-  });
-  return cache;
-};
-let insertionPoint;
-if (typeof document === 'object') {
-  // Use `insertionPoint` over `prepend`(deprecated) because it can be controlled for GlobalStyles injection order
-  // For more information, see https://github.com/mui/material-ui/issues/44597
-  insertionPoint = document.querySelector('[name="emotion-insertion-point"]');
-  if (!insertionPoint) {
-    insertionPoint = document.createElement('meta');
-    insertionPoint.setAttribute('name', 'emotion-insertion-point');
-    insertionPoint.setAttribute('content', '');
-    const head = document.querySelector('head');
-    if (head) {
-      head.prepend(insertionPoint);
-    }
-  }
-}
-function getCache(injectFirst, enableCssLayer) {
-  if (injectFirst || enableCssLayer) {
-    /**
-     * This is for client-side apps only.
-     * A custom sheet is required to make the GlobalStyles API injected above the insertion point.
-     * This is because the [sheet](https://github.com/emotion-js/emotion/blob/main/packages/react/src/global.js#L94-L99) does not consume the options.
-     */
-    class MyStyleSheet extends StyleSheet {
-      insert(rule, options) {
-        if (TEST_INTERNALS_DO_NOT_USE.insert) {
-          return TEST_INTERNALS_DO_NOT_USE.insert(rule, options);
-        }
-        if (this.key && this.key.endsWith('global')) {
-          this.before = insertionPoint;
-        }
-        return super.insert(rule, options);
-      }
-    }
-    const emotionCache = createEmotionCache({
-      key: 'css',
-      insertionPoint: injectFirst ? insertionPoint : undefined
-    }, MyStyleSheet);
-    if (enableCssLayer) {
-      const prevInsert = emotionCache.insert;
-      emotionCache.insert = (...args) => {
-        if (!args[1].styles.startsWith('@layer')) {
-          // avoid nested @layer
-          args[1].styles = `@layer mui {${args[1].styles}}`;
-        }
-        return prevInsert(...args);
-      };
-    }
-    return emotionCache;
-  }
-  return undefined;
-}
-export default function StyledEngineProvider(props) {
-  const {
-    injectFirst,
-    enableCssLayer,
-    children
-  } = props;
-  const cache = React.useMemo(() => getCache(injectFirst, enableCssLayer), [injectFirst, enableCssLayer]);
-  return cache ? /*#__PURE__*/_jsx(CacheProvider, {
-    value: cache,
-    children: children
-  }) : children;
-}
-process.env.NODE_ENV !== "production" ? StyledEngineProvider.propTypes = {
-  /**
-   * Your component tree.
-   */
-  children: PropTypes.node,
-  /**
-   * If `true`, the styles are wrapped in `@layer mui`.
-   * Learn more about [Cascade layers](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers).
-   */
-  enableCssLayer: PropTypes.bool,
-  /**
-   * By default, the styles are injected last in the <head> element of the page.
-   * As a result, they gain more specificity than any other style sheet.
-   * If you want to override MUI's styles, set this prop.
-   */
-  injectFirst: PropTypes.bool
-} : void 0;

package/modern/StyledEngineProvider/index.js

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

package/modern/index.js

@@ -1,47 +0,0 @@
-/**
- * @mui/styled-engine v7.0.1
- *
- * @license MIT
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-'use client';
-
-/* eslint-disable no-underscore-dangle */
-import emStyled from '@emotion/styled';
-import { serializeStyles as emSerializeStyles } from '@emotion/serialize';
-export default function styled(tag, options) {
-  const stylesFactory = emStyled(tag, options);
-  if (process.env.NODE_ENV !== 'production') {
-    return (...styles) => {
-      const component = typeof tag === 'string' ? `"${tag}"` : 'component';
-      if (styles.length === 0) {
-        console.error([`MUI: Seems like you called \`styled(${component})()\` without a \`style\` argument.`, 'You must provide a `styles` argument: `styled("div")(styleYouForgotToPass)`.'].join('\n'));
-      } else if (styles.some(style => style === undefined)) {
-        console.error(`MUI: the styled(${component})(...args) API requires all its args to be defined.`);
-      }
-      return stylesFactory(...styles);
-    };
-  }
-  return stylesFactory;
-}
-
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export function internal_mutateStyles(tag, processor) {
-  // Emotion attaches all the styles as `__emotion_styles`.
-  // Ref: https://github.com/emotion-js/emotion/blob/16d971d0da229596d6bcc39d282ba9753c9ee7cf/packages/styled/src/base.js#L186
-  if (Array.isArray(tag.__emotion_styles)) {
-    tag.__emotion_styles = processor(tag.__emotion_styles);
-  }
-}
-
-// Emotion only accepts an array, but we want to avoid allocations
-const wrapper = [];
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export function internal_serializeStyles(styles) {
-  wrapper[0] = styles;
-  return emSerializeStyles(wrapper);
-}
-export { ThemeContext, keyframes, css } from '@emotion/react';
-export { default as StyledEngineProvider } from "./StyledEngineProvider/index.js";
-export { default as GlobalStyles } from "./GlobalStyles/index.js";

package/modern/package.json

@@ -1 +0,0 @@
-{"type":"module","sideEffects":false}