@mui/system 7.3.9 → 7.3.11

package/Box/Box.d.ts

@@ -40,6 +40,7 @@ export interface BoxTypeMap<AdditionalProps = {}, RootComponent extends React.El
  *
  * - [Box (Joy UI)](https://mui.com/joy-ui/react-box/)
  * - [Box (Material UI)](https://mui.com/material-ui/react-box/)
+ * - [Menubar (Material UI)](https://mui.com/material-ui/react-menubar/)
  * - [Box (MUI System)](https://mui.com/system/react-box/)
  *
  * API:

package/CHANGELOG.md

@@ -1,5 +1,87 @@
 # [Versions](https://mui.com/versions/)
 
+## 7.3.11
+
+<!-- generated comparing v7.3.10..v7.x -->
+
+_May 6, 2026_
+
+A big thanks to the 5 contributors who made this release possible.
+
+### `@mui/material@7.3.11`
+
+- [autocomplete] Fix highlight sync and scroll preservation (#48350) @mj12albert
+- [autocomplete] Fix popper rendering issues (#48343) @mj12albert
+- [autocomplete] Improve highlight tracking and selection state (#48318) @mj12albert
+- [button] Fix `startIcon` alignment (#48339) @mj12albert
+- [button] Remove duplicated className entries (#48284) @silviuaavram
+- [checkbox] Set `aria-checked=mixed` when indeterminate (#48286) @mj12albert
+- [dialog][drawer][focus trap] Fix initial focus target (#48324) @mj12albert
+- [drawer] Fix transition jump (#48340) @mj12albert
+- [input] Fix layout shift with display: flex (#48359) @oliviertassinari
+- [inputs] Fix autofocus in SSR environment (#48307) @mj12albert
+- [popper] Persist positioning styles when popperOptions changes reference (#48302) @mj12albert
+- [switch] Fix incorrect `role` with `slotProps.input` (#48472) @mj12albert
+- [utils] Add shadow dom utils (#48309) @mj12albert
+
+### Docs
+
+- [docs] Update banner to announce v9 (#48299) @siriwatknp
+- [docs] Add v9 in the versions select in v7.mui.com (#48233) @alexfauquette
+
+### Core
+
+- [internal] Update some host-reference entries (#48225) @silviuaavram
+
+All contributors of this release in alphabetical order: @alexfauquette, @mj12albert, @oliviertassinari, @silviuaavram, @siriwatknp
+
+## 7.3.10
+
+<!-- generated comparing v7.3.9..v7.x -->
+
+_Apr 8, 2026_
+
+A big thanks to the 15 contributors who made this release possible. A few highlights ✨:
+
+- 📖 Added the Menubar component page to the docs.
+
+### `@mui/material@7.3.10`
+
+- [alert][dialog] Accessibility improvements (#48161) @silviuaavram
+- [autocomplete] Add `root` slot (#47916) @GerardasB
+- [autocomplete] Fix helper text focusing input when clicked (#48162) @mj12albert
+- [autocomplete] Fix popup reopening on window focus regain with openOnFocus (#47914) @aman44444
+- [autocomplete] Optimize selected option lookup (#48027) @anchmelev
+- [autocomplete] Support full slots for clearIndicator and popupIndicator (#47913) @silviuaavram
+- [button-base] Fix native button detection (#47994) @mj12albert
+- [input] Fix high contrast cutoff on first character (#48160) @silviuaavram
+- [list item text][card header] Revert cleanup of duplicated CSS rules (#47938) @sai6855
+- [popper] Add missing classes export (#48033) @mj12albert
+- [select] Fix focus visible always set on menu item (#48022) @silviuaavram
+- [slider] Accept readonly array for the value prop (#47961) @pcorpet
+- [switch] Add border to make it visible in high contrast mode (#48210) @silviuaavram
+- [theme] Do not create channel tokens for custom colors when `nativeColor` is used (#48144) @ZeeshanTamboli
+- [transitions] Performance improvements & misc fixes (#48217) @mj12albert
+
+### Docs
+
+- [codemod] Add v7 migration docs for deprecated Autocomplete APIs and Autocomplete codemod (#47954) @ZeeshanTamboli
+- [menubar] Add Menubar component page (#47942) @siriwatknp
+- [progress] Label all demo components (#48168) @mj12albert
+- [system] Update `styled` API docs for easier understanding (#47969) @olivier-lxo
+- Fix the dark mode footer row shadow for the Data Grid on the advanced components page (#48152) @arminmeh
+- Fix MUI X redirects (#47917) @cherniavskii
+- Use direct palette vars in Tailwind v4 snippet (#47955) @Ahmad-Alaziz
+
+### Core
+
+- [blog] Blogpost for upcoming price changes for MUI X (#47820) @DanailH
+- [blog] Update the 2026 price changes blogpost (#47944) @DanailH
+- [code-infra] Add pkg-pr-new as dev dependency (#48023) @silviuaavram
+- [docs-infra] Update Release Instructions and Search Index v7 (#48109) @dav-is
+
+All contributors of this release in alphabetical order: @Ahmad-Alaziz, @aman44444, @anchmelev, @arminmeh, @cherniavskii, @DanailH, @dav-is, @GerardasB, @mj12albert, @olivier-lxo, @pcorpet, @sai6855, @silviuaavram, @siriwatknp, @ZeeshanTamboli
+
 ## 7.3.9
 
 <!-- generated comparing v7.3.8..v7.x -->

package/Grid/deleteLegacyGridProps.js

@@ -10,7 +10,7 @@ const getLegacyGridWarning = propName => {
   }
 
   // #host-reference
-  return `The \`${propName}\` prop has been removed. See https://mui.com/material-ui/migration/upgrade-to-grid-v2/ for migration instructions.`;
+  return `The \`${propName}\` prop has been removed. See https://v7.mui.com/material-ui/migration/upgrade-to-grid-v2/ for migration instructions.`;
 };
 const warnedAboutProps = [];
 

package/README.md

@@ -9,11 +9,11 @@ Install the package in your project directory with:
 <!-- #npm-tag-reference -->
 
 ```bash
-npm install @mui/system @emotion/react @emotion/styled
+npm install @mui/system@^7.0.0 @emotion/react @emotion/styled
 ```
 
 ## Documentation
 
 <!-- #host-reference -->
 
-Visit [https://mui.com/system/getting-started/](https://mui.com/system/getting-started/) to view the full documentation.
+Visit [https://v7.mui.com/system/getting-started/](https://v7.mui.com/system/getting-started/) to view the full documentation.

package/ThemeProvider/ThemeProvider.d.ts

@@ -14,11 +14,12 @@ export interface ThemeProviderProps<Theme = DefaultTheme> {
   theme: Partial<Theme> | ((outerTheme: Theme) => Theme);
 }
 
+// #host-reference
 /**
  * This component makes the `theme` available down the React tree.
  * It should preferably be used at **the root of your component tree**.
  * API:
  *
- * - [ThemeProvider API](https://mui.com/material-ui/customization/theming/#themeprovider)
+ * - [ThemeProvider API](https://v7.mui.com/material-ui/customization/theming/#themeprovider)
  */
 export default function ThemeProvider<T = DefaultTheme>(props: ThemeProviderProps<T>): React.ReactElement<ThemeProviderProps<T>>;

package/createBreakpoints/createBreakpoints.d.ts

@@ -26,13 +26,13 @@ export interface Breakpoints {
   /**
    * @param key - A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px.
    * @returns A media query string ready to be used with most styling solutions, which matches screen widths greater than the screen size given by the breakpoint key (inclusive).
-   * @see [API documentation](https://mui.com/material-ui/customization/breakpoints/#theme-breakpoints-up-key-media-query)
+   * @see [API documentation](https://v7.mui.com/material-ui/customization/breakpoints/#theme-breakpoints-up-key-media-query)
    */
   up: (key: Breakpoint | number) => string;
   /**
    * @param key - A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px.
    * @returns A media query string ready to be used with most styling solutions, which matches screen widths less than the screen size given by the breakpoint key (exclusive).
-   * @see [API documentation](https://mui.com/material-ui/customization/breakpoints/#theme-breakpoints-down-key-media-query)
+   * @see [API documentation](https://v7.mui.com/material-ui/customization/breakpoints/#theme-breakpoints-down-key-media-query)
    */
   down: (key: Breakpoint | number) => string;
   /**
@@ -40,14 +40,14 @@ export interface Breakpoints {
    * @param end - A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px.
    * @returns A media query string ready to be used with most styling solutions, which matches screen widths greater than
    *          the screen size given by the breakpoint key in the first argument (inclusive) and less than the screen size given by the breakpoint key in the second argument (exclusive).
-   * @see [API documentation](https://mui.com/material-ui/customization/breakpoints/#theme-breakpoints-between-start-end-media-query)
+   * @see [API documentation](https://v7.mui.com/material-ui/customization/breakpoints/#theme-breakpoints-between-start-end-media-query)
    */
   between: (start: Breakpoint | number, end: Breakpoint | number) => string;
   /**
    * @param key - A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px.
    * @returns A media query string ready to be used with most styling solutions, which matches screen widths starting from
    *          the screen size given by the breakpoint key (inclusive) and stopping at the screen size given by the next breakpoint key (exclusive).
-   * @see [API documentation](https://mui.com/material-ui/customization/breakpoints/#theme-breakpoints-only-key-media-query)
+   * @see [API documentation](https://v7.mui.com/material-ui/customization/breakpoints/#theme-breakpoints-only-key-media-query)
    */
   only: (key: Breakpoint) => string;
   /**

package/cssVars/createCssVarsProvider.js

@@ -238,7 +238,8 @@ function createCssVarsProvider(options) {
       setColorScheme,
       setMode: process.env.NODE_ENV === 'production' ? setMode : newMode => {
         if (memoTheme.colorSchemeSelector === 'media') {
-          console.error(['MUI: The `setMode` function has no effect if `colorSchemeSelector` is `media` (`media` is the default value).', 'To toggle the mode manually, please configure `colorSchemeSelector` to use a class or data attribute.', 'To learn more, visit https://mui.com/material-ui/customization/css-theme-variables/configuration/#toggling-dark-mode-manually'].join('\n'));
+          // #host-reference
+          console.error(['MUI: The `setMode` function has no effect if `colorSchemeSelector` is `media` (`media` is the default value).', 'To toggle the mode manually, please configure `colorSchemeSelector` to use a class or data attribute.', 'To learn more, visit https://v7.mui.com/material-ui/customization/css-theme-variables/configuration/#toggling-dark-mode-manually'].join('\n'));
         }
         setMode(newMode);
       },

package/esm/Box/Box.d.ts

@@ -40,6 +40,7 @@ export interface BoxTypeMap<AdditionalProps = {}, RootComponent extends React.El
  *
  * - [Box (Joy UI)](https://mui.com/joy-ui/react-box/)
  * - [Box (Material UI)](https://mui.com/material-ui/react-box/)
+ * - [Menubar (Material UI)](https://mui.com/material-ui/react-menubar/)
  * - [Box (MUI System)](https://mui.com/system/react-box/)
  *
  * API:

package/esm/Grid/deleteLegacyGridProps.js

@@ -4,7 +4,7 @@ const getLegacyGridWarning = propName => {
   }
 
   // #host-reference
-  return `The \`${propName}\` prop has been removed. See https://mui.com/material-ui/migration/upgrade-to-grid-v2/ for migration instructions.`;
+  return `The \`${propName}\` prop has been removed. See https://v7.mui.com/material-ui/migration/upgrade-to-grid-v2/ for migration instructions.`;
 };
 const warnedAboutProps = [];
 

package/esm/ThemeProvider/ThemeProvider.d.ts

@@ -14,11 +14,12 @@ export interface ThemeProviderProps<Theme = DefaultTheme> {
   theme: Partial<Theme> | ((outerTheme: Theme) => Theme);
 }
 
+// #host-reference
 /**
  * This component makes the `theme` available down the React tree.
  * It should preferably be used at **the root of your component tree**.
  * API:
  *
- * - [ThemeProvider API](https://mui.com/material-ui/customization/theming/#themeprovider)
+ * - [ThemeProvider API](https://v7.mui.com/material-ui/customization/theming/#themeprovider)
  */
 export default function ThemeProvider<T = DefaultTheme>(props: ThemeProviderProps<T>): React.ReactElement<ThemeProviderProps<T>>;

package/esm/createBreakpoints/createBreakpoints.d.ts

@@ -26,13 +26,13 @@ export interface Breakpoints {
   /**
    * @param key - A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px.
    * @returns A media query string ready to be used with most styling solutions, which matches screen widths greater than the screen size given by the breakpoint key (inclusive).
-   * @see [API documentation](https://mui.com/material-ui/customization/breakpoints/#theme-breakpoints-up-key-media-query)
+   * @see [API documentation](https://v7.mui.com/material-ui/customization/breakpoints/#theme-breakpoints-up-key-media-query)
    */
   up: (key: Breakpoint | number) => string;
   /**
    * @param key - A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px.
    * @returns A media query string ready to be used with most styling solutions, which matches screen widths less than the screen size given by the breakpoint key (exclusive).
-   * @see [API documentation](https://mui.com/material-ui/customization/breakpoints/#theme-breakpoints-down-key-media-query)
+   * @see [API documentation](https://v7.mui.com/material-ui/customization/breakpoints/#theme-breakpoints-down-key-media-query)
    */
   down: (key: Breakpoint | number) => string;
   /**
@@ -40,14 +40,14 @@ export interface Breakpoints {
    * @param end - A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px.
    * @returns A media query string ready to be used with most styling solutions, which matches screen widths greater than
    *          the screen size given by the breakpoint key in the first argument (inclusive) and less than the screen size given by the breakpoint key in the second argument (exclusive).
-   * @see [API documentation](https://mui.com/material-ui/customization/breakpoints/#theme-breakpoints-between-start-end-media-query)
+   * @see [API documentation](https://v7.mui.com/material-ui/customization/breakpoints/#theme-breakpoints-between-start-end-media-query)
    */
   between: (start: Breakpoint | number, end: Breakpoint | number) => string;
   /**
    * @param key - A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px.
    * @returns A media query string ready to be used with most styling solutions, which matches screen widths starting from
    *          the screen size given by the breakpoint key (inclusive) and stopping at the screen size given by the next breakpoint key (exclusive).
-   * @see [API documentation](https://mui.com/material-ui/customization/breakpoints/#theme-breakpoints-only-key-media-query)
+   * @see [API documentation](https://v7.mui.com/material-ui/customization/breakpoints/#theme-breakpoints-only-key-media-query)
    */
   only: (key: Breakpoint) => string;
   /**

package/esm/cssVars/createCssVarsProvider.js

@@ -230,7 +230,8 @@ export default function createCssVarsProvider(options) {
       setColorScheme,
       setMode: process.env.NODE_ENV === 'production' ? setMode : newMode => {
         if (memoTheme.colorSchemeSelector === 'media') {
-          console.error(['MUI: The `setMode` function has no effect if `colorSchemeSelector` is `media` (`media` is the default value).', 'To toggle the mode manually, please configure `colorSchemeSelector` to use a class or data attribute.', 'To learn more, visit https://mui.com/material-ui/customization/css-theme-variables/configuration/#toggling-dark-mode-manually'].join('\n'));
+          // #host-reference
+          console.error(['MUI: The `setMode` function has no effect if `colorSchemeSelector` is `media` (`media` is the default value).', 'To toggle the mode manually, please configure `colorSchemeSelector` to use a class or data attribute.', 'To learn more, visit https://v7.mui.com/material-ui/customization/css-theme-variables/configuration/#toggling-dark-mode-manually'].join('\n'));
         }
         setMode(newMode);
       },

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v7.3.9
+ * @mui/system v7.3.11
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/esm/version/index.js

@@ -1,6 +1,6 @@
-export const version = "7.3.9";
+export const version = "7.3.11";
 export const major = Number("7");
 export const minor = Number("3");
-export const patch = Number("9");
+export const patch = Number("11");
 export const prerelease = undefined;
 export default version;

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v7.3.9
+ * @mui/system v7.3.11
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/system",
-  "version": "7.3.9",
+  "version": "7.3.11",
   "author": "MUI Team",
   "description": "MUI System is a set of CSS utilities to help you build custom designs more efficiently. It makes it possible to rapidly lay out custom designs.",
   "keywords": [
@@ -28,10 +28,10 @@
     "clsx": "^2.1.1",
     "csstype": "^3.2.3",
     "prop-types": "^15.8.1",
-    "@mui/private-theming": "^7.3.9",
-    "@mui/styled-engine": "^7.3.9",
-    "@mui/types": "^7.4.12",
-    "@mui/utils": "^7.3.9"
+    "@mui/private-theming": "^7.3.11",
+    "@mui/styled-engine": "^7.3.10",
+    "@mui/utils": "^7.3.11",
+    "@mui/types": "^7.4.12"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",

package/version/index.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.version = exports.prerelease = exports.patch = exports.minor = exports.major = exports.default = void 0;
-const version = exports.version = "7.3.9";
+const version = exports.version = "7.3.11";
 const major = exports.major = Number("7");
 const minor = exports.minor = Number("3");
-const patch = exports.patch = Number("9");
+const patch = exports.patch = Number("11");
 const prerelease = exports.prerelease = undefined;
 var _default = exports.default = version;