@mui/system 9.0.0-beta.1 → 9.0.1

package/Grid/createGrid.js

@@ -150,7 +150,7 @@ function createGrid(options = {}) {
     wrap: _propTypes.default.oneOf(['nowrap', 'wrap-reverse', 'wrap'])
   } : void 0;
 
-  // @ts-ignore internal logic for nested grid
+  // @ts-expect-error internal logic for nested grid
   Grid.muiName = 'Grid';
   return Grid;
 }

package/Grid/createGrid.mjs

@@ -143,7 +143,7 @@ export default function createGrid(options = {}) {
     wrap: PropTypes.oneOf(['nowrap', 'wrap-reverse', 'wrap'])
   } : void 0;
 
-  // @ts-ignore internal logic for nested grid
+  // @ts-expect-error internal logic for nested grid
   Grid.muiName = 'Grid';
   return Grid;
 }

package/README.md

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

package/ThemeProvider/ThemeProvider.d.mts

@@ -14,6 +14,7 @@ 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**.

package/ThemeProvider/ThemeProvider.d.ts

@@ -14,6 +14,7 @@ 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**.

package/breakpoints/breakpoints.d.mts

@@ -19,4 +19,4 @@ type DefaultBreakPoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 /**
  * @returns An enhanced stylefunction that considers breakpoints
  */
-export default function breakpoints<Props, Breakpoints extends string = DefaultBreakPoints>(styleFunction: StyleFunction<Props>): StyleFunction<Partial<Record<Breakpoints, Props>> & Props>;
+export default function breakpoints<Props, BreakpointsInput extends string = DefaultBreakPoints>(styleFunction: StyleFunction<Props>): StyleFunction<Partial<Record<BreakpointsInput, Props>> & Props>;

package/breakpoints/breakpoints.d.ts

@@ -19,4 +19,4 @@ type DefaultBreakPoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 /**
  * @returns An enhanced stylefunction that considers breakpoints
  */
-export default function breakpoints<Props, Breakpoints extends string = DefaultBreakPoints>(styleFunction: StyleFunction<Props>): StyleFunction<Partial<Record<Breakpoints, Props>> & Props>;
+export default function breakpoints<Props, BreakpointsInput extends string = DefaultBreakPoints>(styleFunction: StyleFunction<Props>): StyleFunction<Partial<Record<BreakpointsInput, Props>> & Props>;

package/createBreakpoints/createBreakpoints.d.mts

@@ -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://next.mui.com/material-ui/customization/breakpoints/#theme-breakpoints-up-key-media-query)
+   * @see [API documentation](https://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://next.mui.com/material-ui/customization/breakpoints/#theme-breakpoints-down-key-media-query)
+   * @see [API documentation](https://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://next.mui.com/material-ui/customization/breakpoints/#theme-breakpoints-between-start-end-media-query)
+   * @see [API documentation](https://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://next.mui.com/material-ui/customization/breakpoints/#theme-breakpoints-only-key-media-query)
+   * @see [API documentation](https://mui.com/material-ui/customization/breakpoints/#theme-breakpoints-only-key-media-query)
    */
   only: (key: Breakpoint) => string;
   /**

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://next.mui.com/material-ui/customization/breakpoints/#theme-breakpoints-up-key-media-query)
+   * @see [API documentation](https://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://next.mui.com/material-ui/customization/breakpoints/#theme-breakpoints-down-key-media-query)
+   * @see [API documentation](https://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://next.mui.com/material-ui/customization/breakpoints/#theme-breakpoints-between-start-end-media-query)
+   * @see [API documentation](https://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://next.mui.com/material-ui/customization/breakpoints/#theme-breakpoints-only-key-media-query)
+   * @see [API documentation](https://mui.com/material-ui/customization/breakpoints/#theme-breakpoints-only-key-media-query)
    */
   only: (key: Breakpoint) => string;
   /**

package/cssContainerQueries/cssContainerQueries.js

@@ -53,6 +53,8 @@ function getContainerQuery(theme, shorthand) {
   const matches = shorthand.match(/^@([^/]+)?\/?(.+)?$/);
   if (!matches) {
     if (process.env.NODE_ENV !== 'production') {
+      // TODO: avoid throwing during React render only in development.
+      // eslint-disable-next-line mui/no-guarded-throw
       throw /* minify-error */new Error(`MUI: The provided shorthand ${`(${shorthand})`} is invalid. The format should be \`@<breakpoint | number>\` or \`@<breakpoint | number>/<container>\`.\n` + 'For example, `@sm` or `@600` or `@40rem/sidebar`.');
     }
     return null;

package/cssContainerQueries/cssContainerQueries.mjs

@@ -44,6 +44,8 @@ export function getContainerQuery(theme, shorthand) {
   const matches = shorthand.match(/^@([^/]+)?\/?(.+)?$/);
   if (!matches) {
     if (process.env.NODE_ENV !== 'production') {
+      // TODO: avoid throwing during React render only in development.
+      // eslint-disable-next-line mui/no-guarded-throw
       throw /* minify-error */new Error(`MUI: The provided shorthand ${`(${shorthand})`} is invalid. The format should be \`@<breakpoint | number>\` or \`@<breakpoint | number>/<container>\`.\n` + 'For example, `@sm` or `@600` or `@40rem/sidebar`.');
     }
     return null;

package/cssVars/createCssVarsProvider.js

@@ -238,6 +238,7 @@ function createCssVarsProvider(options) {
       setColorScheme,
       setMode: process.env.NODE_ENV === 'production' ? setMode : newMode => {
         if (memoTheme.colorSchemeSelector === 'media') {
+          // #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://mui.com/material-ui/customization/css-theme-variables/configuration/#toggling-dark-mode-manually'].join('\n'));
         }
         setMode(newMode);

package/cssVars/createCssVarsProvider.mjs

@@ -230,6 +230,7 @@ export default function createCssVarsProvider(options) {
       setColorScheme,
       setMode: process.env.NODE_ENV === 'production' ? setMode : newMode => {
         if (memoTheme.colorSchemeSelector === 'media') {
+          // #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://mui.com/material-ui/customization/css-theme-variables/configuration/#toggling-dark-mode-manually'].join('\n'));
         }
         setMode(newMode);

package/cssVars/prepareCssVars.js

@@ -14,7 +14,7 @@ function prepareCssVars(theme, parserConfig = {}) {
     colorSchemeSelector: selector,
     enableContrastVars
   } = parserConfig;
-  // @ts-ignore - ignore components do not exist
+  // @ts-expect-error - ignore components do not exist
   const {
     colorSchemes = {},
     components,

package/cssVars/prepareCssVars.mjs

@@ -7,7 +7,7 @@ function prepareCssVars(theme, parserConfig = {}) {
     colorSchemeSelector: selector,
     enableContrastVars
   } = parserConfig;
-  // @ts-ignore - ignore components do not exist
+  // @ts-expect-error - ignore components do not exist
   const {
     colorSchemes = {},
     components,

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v9.0.0-beta.1
+ * @mui/system v9.0.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/index.mjs

@@ -1,5 +1,5 @@
 /**
- * @mui/system v9.0.0-beta.1
+ * @mui/system v9.0.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@mui/system",
-  "version": "9.0.0-beta.1",
+  "version": "9.0.1",
   "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.",
+  "license": "MIT",
   "keywords": [
     "react",
     "react-component",
@@ -14,7 +15,6 @@
     "url": "git+https://github.com/mui/material-ui.git",
     "directory": "packages/mui-system"
   },
-  "license": "MIT",
   "bugs": {
     "url": "https://github.com/mui/material-ui/issues"
   },
@@ -28,10 +28,10 @@
     "clsx": "^2.1.1",
     "csstype": "^3.2.3",
     "prop-types": "^15.8.1",
-    "@mui/private-theming": "9.0.0-beta.1",
-    "@mui/types": "^9.0.0-beta.0",
-    "@mui/styled-engine": "9.0.0-beta.0",
-    "@mui/utils": "9.0.0-beta.1"
+    "@mui/private-theming": "^9.0.1",
+    "@mui/styled-engine": "^9.0.0",
+    "@mui/types": "^9.0.0",
+    "@mui/utils": "^9.0.1"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",

package/styleFunctionSx/styleFunctionSx.js

@@ -118,7 +118,7 @@ function setThemeValue(css, prop, value, theme, config) {
     const finalValue = (0, _style.getStyleValue2)(themeMapping, transform, valueFinal, prop);
     if (cssProperty === false) {
       if (mediaKey) {
-        css[mediaKey] = finalValue;
+        (0, _fastDeepAssign.default)(css[mediaKey], finalValue);
       } else {
         (0, _fastDeepAssign.default)(css, finalValue);
       }

package/styleFunctionSx/styleFunctionSx.mjs

@@ -111,7 +111,7 @@ function setThemeValue(css, prop, value, theme, config) {
     const finalValue = getStyleValue2(themeMapping, transform, valueFinal, prop);
     if (cssProperty === false) {
       if (mediaKey) {
-        css[mediaKey] = finalValue;
+        merge(css[mediaKey], finalValue);
       } else {
         merge(css, finalValue);
       }

package/useMediaQuery/useMediaQuery.js

@@ -93,9 +93,10 @@ function unstable_createUseMediaQuery(params = {}) {
     // This defensive check is here for simplicity.
     // Most of the time, the match media logic isn't central to people tests.
     const supportMatchMedia = typeof window !== 'undefined' && typeof window.matchMedia !== 'undefined';
+    const fallbackMatchMedia = supportMatchMedia ? window.matchMedia : null;
     const {
       defaultMatches = false,
-      matchMedia = supportMatchMedia ? window.matchMedia : null,
+      matchMedia: customMatchMedia,
       ssrMatchMedia = null,
       noSsr = false
     } = (0, _useThemeProps.getThemeProps)({
@@ -103,6 +104,15 @@ function unstable_createUseMediaQuery(params = {}) {
       props: options,
       theme
     });
+    const matchMedia = React.useMemo(() => {
+      if (customMatchMedia !== undefined) {
+        return customMatchMedia;
+      }
+      if (fallbackMatchMedia === null) {
+        return null;
+      }
+      return fallbackMatchMedia.bind(window);
+    }, [customMatchMedia, fallbackMatchMedia]);
     if (process.env.NODE_ENV !== 'production') {
       if (typeof queryInput === 'function' && theme === null) {
         console.error(['MUI: The `query` argument provided is invalid.', 'You are providing a function without a theme in the context.', 'One of the parent elements needs to use a ThemeProvider.'].join('\n'));

package/useMediaQuery/useMediaQuery.mjs

@@ -85,9 +85,10 @@ export function unstable_createUseMediaQuery(params = {}) {
     // This defensive check is here for simplicity.
     // Most of the time, the match media logic isn't central to people tests.
     const supportMatchMedia = typeof window !== 'undefined' && typeof window.matchMedia !== 'undefined';
+    const fallbackMatchMedia = supportMatchMedia ? window.matchMedia : null;
     const {
       defaultMatches = false,
-      matchMedia = supportMatchMedia ? window.matchMedia : null,
+      matchMedia: customMatchMedia,
       ssrMatchMedia = null,
       noSsr = false
     } = getThemeProps({
@@ -95,6 +96,15 @@ export function unstable_createUseMediaQuery(params = {}) {
       props: options,
       theme
     });
+    const matchMedia = React.useMemo(() => {
+      if (customMatchMedia !== undefined) {
+        return customMatchMedia;
+      }
+      if (fallbackMatchMedia === null) {
+        return null;
+      }
+      return fallbackMatchMedia.bind(window);
+    }, [customMatchMedia, fallbackMatchMedia]);
     if (process.env.NODE_ENV !== 'production') {
       if (typeof queryInput === 'function' && theme === null) {
         console.error(['MUI: The `query` argument provided is invalid.', 'You are providing a function without a theme in the context.', 'One of the parent elements needs to use a ThemeProvider.'].join('\n'));

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 = "9.0.0-beta.1";
+const version = exports.version = "9.0.1";
 const major = exports.major = Number("9");
 const minor = exports.minor = Number("0");
-const patch = exports.patch = Number("0");
-const prerelease = exports.prerelease = "beta.1";
+const patch = exports.patch = Number("1");
+const prerelease = exports.prerelease = undefined;
 var _default = exports.default = version;

package/version/index.mjs

@@ -1,6 +1,6 @@
-export const version = "9.0.0-beta.1";
+export const version = "9.0.1";
 export const major = Number("9");
 export const minor = Number("0");
-export const patch = Number("0");
-export const prerelease = "beta.1";
+export const patch = Number("1");
+export const prerelease = undefined;
 export default version;