@mui/system 6.0.0-alpha.8 → 6.0.0-beta.0

package/node/createStyled/createStyled.js

@@ -68,6 +68,11 @@ function processStyleArg(callableStyle, {
       ...props
     }));
   }
+  const mergedState = {
+    ...props,
+    ...ownerState,
+    ownerState
+  };
   if (!!resolvedStylesArg && typeof resolvedStylesArg === 'object' && Array.isArray(resolvedStylesArg.variants)) {
     const {
       variants = [],
@@ -77,11 +82,7 @@ function processStyleArg(callableStyle, {
     variants.forEach(variant => {
       let isMatch = true;
       if (typeof variant.props === 'function') {
-        isMatch = variant.props({
-          ownerState,
-          ...props,
-          ...ownerState
-        });
+        isMatch = variant.props(mergedState);
       } else {
         Object.keys(variant.props).forEach(key => {
           if ((ownerState == null ? void 0 : ownerState[key]) !== variant.props[key] && props[key] !== variant.props[key]) {
@@ -93,11 +94,7 @@ function processStyleArg(callableStyle, {
         if (!Array.isArray(result)) {
           result = [result];
         }
-        result.push(typeof variant.style === 'function' ? variant.style({
-          ownerState,
-          ...props,
-          ...ownerState
-        }) : variant.style);
+        result.push(typeof variant.style === 'function' ? variant.style(mergedState) : variant.style);
       }
     });
     return result;

package/node/createTheme/applyStyles.js

@@ -8,7 +8,7 @@ exports.default = applyStyles;
  * A universal utility to style components with multiple color modes. Always use it from the theme object.
  * It works with:
  *  - [Basic theme](https://mui.com/material-ui/customization/dark-mode/)
- *  - [CSS theme variables](https://mui.com/material-ui/experimental-api/css-theme-variables/overview/)
+ *  - [CSS theme variables](https://mui.com/material-ui/customization/css-theme-variables/overview/)
  *  - Zero-runtime engine
  *
  * Tips: Use an array over object spread and place `theme.applyStyles()` last.

package/node/cssContainerQueries/cssContainerQueries.js

@@ -37,10 +37,10 @@ function sortContainerQueries(theme, css) {
   });
 }
 function isCqShorthand(breakpointKeys, value) {
-  return value.startsWith('@') && (breakpointKeys.some(key => value.startsWith(`@${key}`)) || !!value.match(/^@\d/));
+  return value === '@' || value.startsWith('@') && (breakpointKeys.some(key => value.startsWith(`@${key}`)) || !!value.match(/^@\d/));
 }
 function getContainerQuery(theme, shorthand) {
-  const matches = shorthand.match(/^@([^/]+)\/?(.+)?$/);
+  const matches = shorthand.match(/^@([^/]+)?\/?(.+)?$/);
   if (!matches) {
     if (process.env.NODE_ENV !== 'production') {
       throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The provided shorthand ${`(${shorthand})`} is invalid. The format should be \`@<breakpoint | number>\` or \`@<breakpoint | number>/<container>\`.
@@ -49,7 +49,7 @@ For example, \`@sm\` or \`@600\` or \`@40rem/sidebar\`.` : (0, _formatMuiErrorMe
     return null;
   }
   const [, containerQuery, containerName] = matches;
-  const value = Number.isNaN(+containerQuery) ? containerQuery : +containerQuery;
+  const value = Number.isNaN(+containerQuery) ? containerQuery || 0 : +containerQuery;
   return theme.containerQueries(containerName).up(value);
 }
 function cssContainerQueries(themeInput) {
@@ -63,7 +63,7 @@ function cssContainerQueries(themeInput) {
       const result = toContainerQuery(themeInput.breakpoints.not(...args), name);
       if (result.includes('not all and')) {
         // `@container` does not work with `not all and`, so need to invert the logic
-        return result.replace('not all and ', '').replace('min-width:', 'width<').replace('max-width:', 'width>');
+        return result.replace('not all and ', '').replace('min-width:', 'width<').replace('max-width:', 'width>').replace('and', 'or');
       }
       return result;
     };

package/node/cssVars/createCssVarsProvider.js

@@ -12,7 +12,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styledEngine = require("@mui/styled-engine");
 var _privateTheming = require("@mui/private-theming");
 var _ThemeProvider = _interopRequireDefault(require("../ThemeProvider"));
-var _getInitColorSchemeScript = _interopRequireWildcard(require("./getInitColorSchemeScript"));
+var _InitColorSchemeScript = _interopRequireWildcard(require("../InitColorSchemeScript/InitColorSchemeScript"));
 var _useCurrentColorScheme = _interopRequireDefault(require("./useCurrentColorScheme"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -28,9 +28,9 @@ function createCssVarsProvider(options) {
      * It should also ideally have a vars object created using `prepareCssVars`.
      */
     theme: defaultTheme = {},
-    attribute: defaultAttribute = _getInitColorSchemeScript.DEFAULT_ATTRIBUTE,
-    modeStorageKey: defaultModeStorageKey = _getInitColorSchemeScript.DEFAULT_MODE_STORAGE_KEY,
-    colorSchemeStorageKey: defaultColorSchemeStorageKey = _getInitColorSchemeScript.DEFAULT_COLOR_SCHEME_STORAGE_KEY,
+    attribute: defaultAttribute = _InitColorSchemeScript.DEFAULT_ATTRIBUTE,
+    modeStorageKey: defaultModeStorageKey = _InitColorSchemeScript.DEFAULT_MODE_STORAGE_KEY,
+    colorSchemeStorageKey: defaultColorSchemeStorageKey = _InitColorSchemeScript.DEFAULT_COLOR_SCHEME_STORAGE_KEY,
     defaultMode: designSystemMode = 'light',
     defaultColorScheme: designSystemColorScheme,
     disableTransitionOnChange: designSystemTransitionOnChange = false,
@@ -310,7 +310,7 @@ function createCssVarsProvider(options) {
   } : void 0;
   const defaultLightColorScheme = typeof designSystemColorScheme === 'string' ? designSystemColorScheme : designSystemColorScheme.light;
   const defaultDarkColorScheme = typeof designSystemColorScheme === 'string' ? designSystemColorScheme : designSystemColorScheme.dark;
-  const getInitColorSchemeScript = params => (0, _getInitColorSchemeScript.default)({
+  const getInitColorSchemeScript = params => (0, _InitColorSchemeScript.default)({
     attribute: defaultAttribute,
     colorSchemeStorageKey: defaultColorSchemeStorageKey,
     defaultMode: designSystemMode,

package/node/cssVars/index.js

@@ -17,12 +17,6 @@ Object.defineProperty(exports, "default", {
     return _createCssVarsProvider.default;
   }
 });
-Object.defineProperty(exports, "getInitColorSchemeScript", {
-  enumerable: true,
-  get: function () {
-    return _getInitColorSchemeScript.default;
-  }
-});
 Object.defineProperty(exports, "prepareCssVars", {
   enumerable: true,
   get: function () {
@@ -36,7 +30,6 @@ Object.defineProperty(exports, "prepareTypographyVars", {
   }
 });
 var _createCssVarsProvider = _interopRequireDefault(require("./createCssVarsProvider"));
-var _getInitColorSchemeScript = _interopRequireDefault(require("./getInitColorSchemeScript"));
 var _prepareCssVars = _interopRequireDefault(require("./prepareCssVars"));
 var _prepareTypographyVars = _interopRequireDefault(require("./prepareTypographyVars"));
 var _createCssVarsTheme = _interopRequireDefault(require("./createCssVarsTheme"));

package/node/cssVars/useCurrentColorScheme.js

@@ -8,7 +8,7 @@ exports.default = useCurrentColorScheme;
 exports.getColorScheme = getColorScheme;
 exports.getSystemMode = getSystemMode;
 var React = _interopRequireWildcard(require("react"));
-var _getInitColorSchemeScript = require("./getInitColorSchemeScript");
+var _InitColorSchemeScript = require("../InitColorSchemeScript/InitColorSchemeScript");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function getSystemMode(mode) {
@@ -63,8 +63,8 @@ function useCurrentColorScheme(options) {
     defaultLightColorScheme,
     defaultDarkColorScheme,
     supportedColorSchemes = [],
-    modeStorageKey = _getInitColorSchemeScript.DEFAULT_MODE_STORAGE_KEY,
-    colorSchemeStorageKey = _getInitColorSchemeScript.DEFAULT_COLOR_SCHEME_STORAGE_KEY,
+    modeStorageKey = _InitColorSchemeScript.DEFAULT_MODE_STORAGE_KEY,
+    colorSchemeStorageKey = _InitColorSchemeScript.DEFAULT_COLOR_SCHEME_STORAGE_KEY,
     storageWindow = typeof window === 'undefined' ? undefined : window
   } = options;
   const joinedColorSchemes = supportedColorSchemes.join(',');

package/node/index.js

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

package/node/useMediaQuery/useMediaQuery.js

@@ -12,18 +12,6 @@ var _useThemeProps = require("../useThemeProps");
 var _useThemeWithoutDefault = _interopRequireDefault(require("../useThemeWithoutDefault"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-/**
- * @deprecated Not used internally. Use `MediaQueryListEvent` from lib.dom.d.ts instead.
- */
-
-/**
- * @deprecated Not used internally. Use `MediaQueryList` from lib.dom.d.ts instead.
- */
-
-/**
- * @deprecated Not used internally. Use `(event: MediaQueryListEvent) => void` instead.
- */
-
 function useMediaQueryOld(query, defaultMatches, matchMedia, ssrMatchMedia, noSsr) {
   const [match, setMatch] = React.useState(() => {
     if (noSsr && matchMedia) {
@@ -38,25 +26,17 @@ function useMediaQueryOld(query, defaultMatches, matchMedia, ssrMatchMedia, noSs
     return defaultMatches;
   });
   (0, _useEnhancedEffect.default)(() => {
-    let active = true;
     if (!matchMedia) {
       return undefined;
     }
     const queryList = matchMedia(query);
     const updateMatch = () => {
-      // Workaround Safari wrong implementation of matchMedia
-      // TODO can we remove it?
-      // https://github.com/mui/material-ui/pull/17315#issuecomment-528286677
-      if (active) {
-        setMatch(queryList.matches);
-      }
+      setMatch(queryList.matches);
     };
     updateMatch();
-    // TODO: Use `addEventListener` once support for Safari < 14 is dropped
-    queryList.addListener(updateMatch);
+    queryList.addEventListener('change', updateMatch);
     return () => {
-      active = false;
-      queryList.removeListener(updateMatch);
+      queryList.removeEventListener('change', updateMatch);
     };
   }, [query, matchMedia]);
   return match;
@@ -84,10 +64,9 @@ function useMediaQueryNew(query, defaultMatches, matchMedia, ssrMatchMedia, noSs
     }
     const mediaQueryList = matchMedia(query);
     return [() => mediaQueryList.matches, notify => {
-      // TODO: Use `addEventListener` once support for Safari < 14 is dropped
-      mediaQueryList.addListener(notify);
+      mediaQueryList.addEventListener('change', notify);
       return () => {
-        mediaQueryList.removeListener(notify);
+        mediaQueryList.removeEventListener('change', notify);
       };
     }];
   }, [getDefaultSnapshot, matchMedia, query]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/system",
-  "version": "6.0.0-alpha.8",
+  "version": "6.0.0-beta.0",
   "private": false,
   "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.",
@@ -26,13 +26,13 @@
     "url": "https://opencollective.com/mui-org"
   },
   "dependencies": {
-    "@babel/runtime": "^7.24.5",
+    "@babel/runtime": "^7.24.7",
     "clsx": "^2.1.1",
     "csstype": "^3.1.3",
     "prop-types": "^15.8.1",
-    "@mui/private-theming": "^6.0.0-alpha.8",
-    "@mui/styled-engine": "^6.0.0-alpha.8",
-    "@mui/utils": "^6.0.0-alpha.8",
+    "@mui/private-theming": "6.0.0-beta.0",
+    "@mui/utils": "6.0.0-beta.0",
+    "@mui/styled-engine": "6.0.0-beta.0",
     "@mui/types": "^7.2.14"
   },
   "peerDependencies": {

package/useMediaQuery/useMediaQuery.d.ts

@@ -1,21 +1,3 @@
-/**
- * @deprecated Not used internally. Use `MediaQueryListEvent` from lib.dom.d.ts instead.
- */
-export interface MuiMediaQueryListEvent {
-    matches: boolean;
-}
-/**
- * @deprecated Not used internally. Use `MediaQueryList` from lib.dom.d.ts instead.
- */
-export interface MuiMediaQueryList {
-    matches: boolean;
-    addListener: (listener: MuiMediaQueryListListener) => void;
-    removeListener: (listener: MuiMediaQueryListListener) => void;
-}
-/**
- * @deprecated Not used internally. Use `(event: MediaQueryListEvent) => void` instead.
- */
-export type MuiMediaQueryListListener = (event: MuiMediaQueryListEvent) => void;
 export interface UseMediaQueryOptions {
     /**
      * As `window.matchMedia()` is unavailable on the server,

package/useMediaQuery/useMediaQuery.js

@@ -4,19 +4,6 @@ import * as React from 'react';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { getThemeProps } from '../useThemeProps';
 import useTheme from '../useThemeWithoutDefault';
-
-/**
- * @deprecated Not used internally. Use `MediaQueryListEvent` from lib.dom.d.ts instead.
- */
-
-/**
- * @deprecated Not used internally. Use `MediaQueryList` from lib.dom.d.ts instead.
- */
-
-/**
- * @deprecated Not used internally. Use `(event: MediaQueryListEvent) => void` instead.
- */
-
 function useMediaQueryOld(query, defaultMatches, matchMedia, ssrMatchMedia, noSsr) {
   const [match, setMatch] = React.useState(() => {
     if (noSsr && matchMedia) {
@@ -31,25 +18,17 @@ function useMediaQueryOld(query, defaultMatches, matchMedia, ssrMatchMedia, noSs
     return defaultMatches;
   });
   useEnhancedEffect(() => {
-    let active = true;
     if (!matchMedia) {
       return undefined;
     }
     const queryList = matchMedia(query);
     const updateMatch = () => {
-      // Workaround Safari wrong implementation of matchMedia
-      // TODO can we remove it?
-      // https://github.com/mui/material-ui/pull/17315#issuecomment-528286677
-      if (active) {
-        setMatch(queryList.matches);
-      }
+      setMatch(queryList.matches);
     };
     updateMatch();
-    // TODO: Use `addEventListener` once support for Safari < 14 is dropped
-    queryList.addListener(updateMatch);
+    queryList.addEventListener('change', updateMatch);
     return () => {
-      active = false;
-      queryList.removeListener(updateMatch);
+      queryList.removeEventListener('change', updateMatch);
     };
   }, [query, matchMedia]);
   return match;
@@ -77,10 +56,9 @@ function useMediaQueryNew(query, defaultMatches, matchMedia, ssrMatchMedia, noSs
     }
     const mediaQueryList = matchMedia(query);
     return [() => mediaQueryList.matches, notify => {
-      // TODO: Use `addEventListener` once support for Safari < 14 is dropped
-      mediaQueryList.addListener(notify);
+      mediaQueryList.addEventListener('change', notify);
       return () => {
-        mediaQueryList.removeListener(notify);
+        mediaQueryList.removeEventListener('change', notify);
       };
     }];
   }, [getDefaultSnapshot, matchMedia, query]);