@mui/styled-engine 6.2.1 → 6.3.1

package/CHANGELOG.md

@@ -1,5 +1,82 @@
 # [Versions](https://mui.com/versions/)
 
+## 6.3.1
+
+<!-- generated comparing v6.3.0..master -->
+
+_Jan 3, 2025_
+
+A big thanks to the 8 contributors who made this release possible.
+
+### `@mui/material@6.3.1`
+
+- [Autocomplete] Revert: Fix options list rendering in freeSolo mode (#44858) @ZeeshanTamboli
+- [Tooltip] Warn instead of error when trigger is disabled (#44846) @yash49
+- [TableSortLabel] Add slots and slotProps (#44728) @sai6855
+- [Select] Deprecate composed classes (#44925) @sai6855
+
+### Docs
+
+- [material-ui][Accordion] Update `Anatomy` section in Accordion docs (#44849) @ZeeshanTamboli
+- [material-ui][CardActionArea] Added demo in docs of cards for adding props to CardActionArea (#44789) @siddhantantil39
+- [material-ui][Grid2] Add interactive demo for Grid v2 (#44820) @yash49
+- [material-ui][Select] Update docs to reflect the omission of placeholder prop (#44856) @adityaparab
+- [joy-ui] Fix Color mode button on Theme builder (#44864) @komkanit
+- Fix 301 redirections @oliviertassinari
+
+### Core
+
+- [examples] Update Next.js examples Next.js and React versions (#44852) @DiegoAndai
+- [code-infra] Prevent wrong nested imports in Base UI (#44426) @oliviertassinari
+- [docs-infra] Add vale coverage for App Router and Page Router (060c55c) @oliviertassinari
+- Sync with other repos (1b9300f) @oliviertassinari
+- Fix docs:build to work in docs folder too (6b923a4) @oliviertassinari
+- Setup React 18 CI tests (#44868) @DiegoAndai
+- Update test to use public API (#44875) @oliviertassinari
+
+All contributors of this release in alphabetical order: @adityaparab, @DiegoAndai, @komkanit, @oliviertassinari, @sai6855, @siddhantantil39, @yash49, @ZeeshanTamboli
+
+## 6.3.0
+
+<!-- generated comparing v6.2.1..master -->
+
+_Dec 23, 2024_
+
+A big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
+
+- Fix invalid HTML structure in the Accordion component (#44408) @ZeeshanTamboli
+  The HTML elements of the Accordion summary have been updated:
+  - the root element is now button (previously div).
+  - summary content and the icon wrapper are now span (previously div).
+    This will only impact you if you used the HTML element as selectors in your styles.
+
+### `@mui/material@6.3.0`
+
+- [Accordion] Fix invalid HTML inside heading (#44408) @ZeeshanTamboli
+- [useAutocomplete] Improve TS typing of `groupedOptions` prop (#44657) @lewxdev
+- Prevent `ownerState` propagation for transition slots (#44401) @ZeeshanTamboli
+- [StepContent] Add slots and slotProps (#44742) @sai6855
+- [TablePagination] Add the rest of `slots` and `slotProps`. (#44570) @siriwatknp
+
+### `@mui/system@6.3.0`
+
+- Set `before` directly without using prepend for global styles (#44648) @siriwatknp
+
+### Docs
+
+- [material-ui] Improve `theme.applyStyles()` docs (#44658) @DiegoAndai
+- [material-ui] Update MD callout (#43958) @aarongarciah
+
+### Core
+
+- Remove unnecessary conditional around `.muiName =` (#44071) @Janpot
+- [blog] Material UI: 2024 EOY updates blog post (#44722) @alelthomas
+- Fix quickstart command in pigment docs (#44806) @yash49
+- [docs-infra] Remove Next.js production profiler (#44823) @romgrk
+- [docs-infra] Remove no longer support `optimizeFonts` Next.js option (#44802) @LukasTy
+
+All contributors of this release in alphabetical order: @aarongarciah, @alelthomas, @DiegoAndai, @Janpot, @lewxdev, @LukasTy, @romgrk, @sai6855, @siriwatknp, @yash49, @ZeeshanTamboli
+
 ## 6.2.1
 
 <!-- generated comparing v6.2.0..master -->

package/StyledEngineProvider/StyledEngineProvider.js

@@ -9,23 +9,11 @@ import { StyleSheet } from '@emotion/sheet';
 // We might be able to remove this when this issue is fixed:
 // https://github.com/emotion-js/emotion/issues/2790
 import { jsx as _jsx } from "react/jsx-runtime";
-const createEmotionCache = options => {
+const createEmotionCache = (options, CustomSheet) => {
   const cache = createCache(options);
 
-  /**
-   * This is for client-side apps only.
-   * A custom sheet is required to make the GlobalStyles API work with `prepend: true`.
-   * 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 {
-    constructor(args) {
-      super(args);
-      this.prepend = cache.sheet.prepend;
-    }
-  }
-
   // Do the same as https://github.com/emotion-js/emotion/blob/main/packages/cache/src/index.js#L238-L245
-  cache.sheet = new MyStyleSheet({
+  cache.sheet = new CustomSheet({
     key: cache.key,
     nonce: cache.sheet.nonce,
     container: cache.sheet.container,
@@ -35,15 +23,37 @@ const createEmotionCache = options => {
   });
   return cache;
 };
-
-// prepend: true moves MUI styles to the top of the <head> so they're loaded first.
-// It allows developers to easily override MUI styles with other styling solutions, like CSS modules.
 let cache;
 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
+  let 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);
+    }
+  }
+  /**
+   * 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 (this.key && this.key.endsWith('global')) {
+        this.before = insertionPoint;
+      }
+      return super.insert(rule, options);
+    }
+  }
   cache = createEmotionCache({
     key: 'css',
-    prepend: true
-  });
+    insertionPoint
+  }, MyStyleSheet);
 }
 export default function StyledEngineProvider(props) {
   const {

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/styled-engine v6.2.1
+ * @mui/styled-engine v6.3.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/StyledEngineProvider/StyledEngineProvider.js

@@ -9,23 +9,11 @@ import { StyleSheet } from '@emotion/sheet';
 // We might be able to remove this when this issue is fixed:
 // https://github.com/emotion-js/emotion/issues/2790
 import { jsx as _jsx } from "react/jsx-runtime";
-const createEmotionCache = options => {
+const createEmotionCache = (options, CustomSheet) => {
   const cache = createCache(options);
 
-  /**
-   * This is for client-side apps only.
-   * A custom sheet is required to make the GlobalStyles API work with `prepend: true`.
-   * 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 {
-    constructor(args) {
-      super(args);
-      this.prepend = cache.sheet.prepend;
-    }
-  }
-
   // Do the same as https://github.com/emotion-js/emotion/blob/main/packages/cache/src/index.js#L238-L245
-  cache.sheet = new MyStyleSheet({
+  cache.sheet = new CustomSheet({
     key: cache.key,
     nonce: cache.sheet.nonce,
     container: cache.sheet.container,
@@ -35,15 +23,37 @@ const createEmotionCache = options => {
   });
   return cache;
 };
-
-// prepend: true moves MUI styles to the top of the <head> so they're loaded first.
-// It allows developers to easily override MUI styles with other styling solutions, like CSS modules.
 let cache;
 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
+  let 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);
+    }
+  }
+  /**
+   * 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 (this.key && this.key.endsWith('global')) {
+        this.before = insertionPoint;
+      }
+      return super.insert(rule, options);
+    }
+  }
   cache = createEmotionCache({
     key: 'css',
-    prepend: true
-  });
+    insertionPoint
+  }, MyStyleSheet);
 }
 export default function StyledEngineProvider(props) {
   const {

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/styled-engine v6.2.1
+ * @mui/styled-engine v6.3.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/node/StyledEngineProvider/StyledEngineProvider.js

@@ -15,23 +15,11 @@ var _sheet = require("@emotion/sheet");
 var _jsxRuntime = require("react/jsx-runtime");
 // We might be able to remove this when this issue is fixed:
 // https://github.com/emotion-js/emotion/issues/2790
-const createEmotionCache = options => {
+const createEmotionCache = (options, CustomSheet) => {
   const cache = (0, _cache.default)(options);
 
-  /**
-   * This is for client-side apps only.
-   * A custom sheet is required to make the GlobalStyles API work with `prepend: true`.
-   * 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 _sheet.StyleSheet {
-    constructor(args) {
-      super(args);
-      this.prepend = cache.sheet.prepend;
-    }
-  }
-
   // Do the same as https://github.com/emotion-js/emotion/blob/main/packages/cache/src/index.js#L238-L245
-  cache.sheet = new MyStyleSheet({
+  cache.sheet = new CustomSheet({
     key: cache.key,
     nonce: cache.sheet.nonce,
     container: cache.sheet.container,
@@ -41,15 +29,37 @@ const createEmotionCache = options => {
   });
   return cache;
 };
-
-// prepend: true moves MUI styles to the top of the <head> so they're loaded first.
-// It allows developers to easily override MUI styles with other styling solutions, like CSS modules.
 let cache;
 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
+  let 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);
+    }
+  }
+  /**
+   * 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 _sheet.StyleSheet {
+    insert(rule, options) {
+      if (this.key && this.key.endsWith('global')) {
+        this.before = insertionPoint;
+      }
+      return super.insert(rule, options);
+    }
+  }
   cache = createEmotionCache({
     key: 'css',
-    prepend: true
-  });
+    insertionPoint
+  }, MyStyleSheet);
 }
 function StyledEngineProvider(props) {
   const {

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/styled-engine v6.2.1
+ * @mui/styled-engine v6.3.1
  *
  * @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": "6.2.1",
+  "version": "6.3.1",
   "private": false,
   "author": "MUI Team",
   "description": "styled() API wrapper package for emotion.",