@mui/system 5.15.9 → 5.15.12

package/modern/useMediaQuery/useMediaQuery.js

@@ -0,0 +1,126 @@
+'use client';
+
+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) {
+      return matchMedia(query).matches;
+    }
+    if (ssrMatchMedia) {
+      return ssrMatchMedia(query).matches;
+    }
+
+    // Once the component is mounted, we rely on the
+    // event listeners to return the correct matches value.
+    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);
+      }
+    };
+    updateMatch();
+    // TODO: Use `addEventListener` once support for Safari < 14 is dropped
+    queryList.addListener(updateMatch);
+    return () => {
+      active = false;
+      queryList.removeListener(updateMatch);
+    };
+  }, [query, matchMedia]);
+  return match;
+}
+
+// eslint-disable-next-line no-useless-concat -- Workaround for https://github.com/webpack/webpack/issues/14814
+const maybeReactUseSyncExternalStore = React['useSyncExternalStore' + ''];
+function useMediaQueryNew(query, defaultMatches, matchMedia, ssrMatchMedia, noSsr) {
+  const getDefaultSnapshot = React.useCallback(() => defaultMatches, [defaultMatches]);
+  const getServerSnapshot = React.useMemo(() => {
+    if (noSsr && matchMedia) {
+      return () => matchMedia(query).matches;
+    }
+    if (ssrMatchMedia !== null) {
+      const {
+        matches
+      } = ssrMatchMedia(query);
+      return () => matches;
+    }
+    return getDefaultSnapshot;
+  }, [getDefaultSnapshot, query, ssrMatchMedia, noSsr, matchMedia]);
+  const [getSnapshot, subscribe] = React.useMemo(() => {
+    if (matchMedia === null) {
+      return [getDefaultSnapshot, () => () => {}];
+    }
+    const mediaQueryList = matchMedia(query);
+    return [() => mediaQueryList.matches, notify => {
+      // TODO: Use `addEventListener` once support for Safari < 14 is dropped
+      mediaQueryList.addListener(notify);
+      return () => {
+        mediaQueryList.removeListener(notify);
+      };
+    }];
+  }, [getDefaultSnapshot, matchMedia, query]);
+  const match = maybeReactUseSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+  return match;
+}
+export default function useMediaQuery(queryInput, options = {}) {
+  const theme = useTheme();
+  // Wait for jsdom to support the match media feature.
+  // All the browsers MUI support have this built-in.
+  // 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 {
+    defaultMatches = false,
+    matchMedia = supportMatchMedia ? window.matchMedia : null,
+    ssrMatchMedia = null,
+    noSsr = false
+  } = getThemeProps({
+    name: 'MuiUseMediaQuery',
+    props: options,
+    theme
+  });
+  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'));
+    }
+  }
+  let query = typeof queryInput === 'function' ? queryInput(theme) : queryInput;
+  query = query.replace(/^@media( ?)/m, '');
+
+  // TODO: Drop `useMediaQueryOld` and use  `use-sync-external-store` shim in `useMediaQueryNew` once the package is stable
+  const useMediaQueryImplementation = maybeReactUseSyncExternalStore !== undefined ? useMediaQueryNew : useMediaQueryOld;
+  const match = useMediaQueryImplementation(query, defaultMatches, matchMedia, ssrMatchMedia, noSsr);
+  if (process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    React.useDebugValue({
+      query,
+      match
+    });
+  }
+  return match;
+}

package/modern/useThemeProps/getThemeProps.js

@@ -1,4 +1,4 @@
-import { internal_resolveProps as resolveProps } from '@mui/utils';
+import resolveProps from '@mui/utils/resolveProps';
 export default function getThemeProps(params) {
   const {
     theme,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/system",
-  "version": "5.15.9",
+  "version": "5.15.12",
   "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.",
@@ -30,10 +30,10 @@
     "clsx": "^2.1.0",
     "csstype": "^3.1.3",
     "prop-types": "^15.8.1",
-    "@mui/private-theming": "^5.15.9",
+    "@mui/utils": "^5.15.12",
+    "@mui/private-theming": "^5.15.12",
     "@mui/types": "^7.2.13",
-    "@mui/styled-engine": "^5.15.9",
-    "@mui/utils": "^5.15.9"
+    "@mui/styled-engine": "^5.15.11"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",

package/propsToClassKey.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = propsToClassKey;
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _utils = require("@mui/utils");
+var _capitalize = _interopRequireDefault(require("@mui/utils/capitalize"));
 const _excluded = ["variant"];
 function isEmpty(string) {
   return string.length === 0;
@@ -25,9 +25,9 @@ function propsToClassKey(props) {
   let classKey = variant || '';
   Object.keys(other).sort().forEach(key => {
     if (key === 'color') {
-      classKey += isEmpty(classKey) ? props[key] : (0, _utils.unstable_capitalize)(props[key]);
+      classKey += isEmpty(classKey) ? props[key] : (0, _capitalize.default)(props[key]);
     } else {
-      classKey += `${isEmpty(classKey) ? key : (0, _utils.unstable_capitalize)(key)}${(0, _utils.unstable_capitalize)(props[key].toString())}`;
+      classKey += `${isEmpty(classKey) ? key : (0, _capitalize.default)(key)}${(0, _capitalize.default)(props[key].toString())}`;
     }
   });
   return classKey;

package/style.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 exports.getPath = getPath;
 exports.getStyleValue = getStyleValue;
-var _utils = require("@mui/utils");
+var _capitalize = _interopRequireDefault(require("@mui/utils/capitalize"));
 var _responsivePropType = _interopRequireDefault(require("./responsivePropType"));
 var _breakpoints = require("./breakpoints");
 function getPath(obj, path, checkVars = true) {
@@ -64,7 +64,7 @@ function style(options) {
       let value = getStyleValue(themeMapping, transform, propValueFinal);
       if (propValueFinal === value && typeof propValueFinal === 'string') {
         // Haven't found value
-        value = getStyleValue(themeMapping, transform, `${prop}${propValueFinal === 'default' ? '' : (0, _utils.unstable_capitalize)(propValueFinal)}`, propValueFinal);
+        value = getStyleValue(themeMapping, transform, `${prop}${propValueFinal === 'default' ? '' : (0, _capitalize.default)(propValueFinal)}`, propValueFinal);
       }
       if (cssProperty === false) {
         return value;

package/styleFunctionSx/extendSxProp.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = extendSxProp;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _utils = require("@mui/utils");
+var _deepmerge = require("@mui/utils/deepmerge");
 var _defaultSxConfig = _interopRequireDefault(require("./defaultSxConfig"));
 const _excluded = ["sx"];
 const splitProps = props => {
@@ -41,7 +41,7 @@ function extendSxProp(props) {
   } else if (typeof inSx === 'function') {
     finalSx = (...args) => {
       const result = inSx(...args);
-      if (!(0, _utils.isPlainObject)(result)) {
+      if (!(0, _deepmerge.isPlainObject)(result)) {
         return systemProps;
       }
       return (0, _extends2.default)({}, systemProps, result);

package/styleFunctionSx/styleFunctionSx.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 exports.unstable_createStyleFunctionSx = unstable_createStyleFunctionSx;
-var _utils = require("@mui/utils");
+var _capitalize = _interopRequireDefault(require("@mui/utils/capitalize"));
 var _merge = _interopRequireDefault(require("../merge"));
 var _style = require("../style");
 var _breakpoints = require("../breakpoints");
@@ -57,7 +57,7 @@ function unstable_createStyleFunctionSx() {
       let value = (0, _style.getStyleValue)(themeMapping, transform, propValueFinal);
       if (propValueFinal === value && typeof propValueFinal === 'string') {
         // Haven't found value
-        value = (0, _style.getStyleValue)(themeMapping, transform, `${prop}${propValueFinal === 'default' ? '' : (0, _utils.unstable_capitalize)(propValueFinal)}`, propValueFinal);
+        value = (0, _style.getStyleValue)(themeMapping, transform, `${prop}${propValueFinal === 'default' ? '' : (0, _capitalize.default)(propValueFinal)}`, propValueFinal);
       }
       if (cssProperty === false) {
         return value;

package/useMediaQuery/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './useMediaQuery';
+export * from './useMediaQuery';

package/useMediaQuery/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _useMediaQuery.default;
+  }
+});
+var _useMediaQuery = _interopRequireWildcard(require("./useMediaQuery"));
+Object.keys(_useMediaQuery).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useMediaQuery[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useMediaQuery[key];
+    }
+  });
+});
+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 && Object.prototype.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; }

package/useMediaQuery/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../esm/useMediaQuery/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/useMediaQuery/useMediaQuery.d.ts

@@ -0,0 +1,46 @@
+/**
+ * @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,
+     * it returns a default matches during the first mount.
+     * @default false
+     */
+    defaultMatches?: boolean;
+    /**
+     * You can provide your own implementation of matchMedia.
+     * This can be used for handling an iframe content window.
+     */
+    matchMedia?: typeof window.matchMedia;
+    /**
+     * To perform the server-side hydration, the hook needs to render twice.
+     * A first time with `defaultMatches`, the value of the server, and a second time with the resolved value.
+     * This double pass rendering cycle comes with a drawback: it's slower.
+     * You can set this option to `true` if you use the returned value **only** client-side.
+     * @default false
+     */
+    noSsr?: boolean;
+    /**
+     * You can provide your own implementation of `matchMedia`, it's used when rendering server-side.
+     */
+    ssrMatchMedia?: (query: string) => {
+        matches: boolean;
+    };
+}
+export default function useMediaQuery<Theme = unknown>(queryInput: string | ((theme: Theme) => string), options?: UseMediaQueryOptions): boolean;

package/useMediaQuery/useMediaQuery.js

@@ -0,0 +1,133 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useMediaQuery;
+var React = _interopRequireWildcard(require("react"));
+var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
+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 && Object.prototype.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) {
+      return matchMedia(query).matches;
+    }
+    if (ssrMatchMedia) {
+      return ssrMatchMedia(query).matches;
+    }
+
+    // Once the component is mounted, we rely on the
+    // event listeners to return the correct matches value.
+    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);
+      }
+    };
+    updateMatch();
+    // TODO: Use `addEventListener` once support for Safari < 14 is dropped
+    queryList.addListener(updateMatch);
+    return () => {
+      active = false;
+      queryList.removeListener(updateMatch);
+    };
+  }, [query, matchMedia]);
+  return match;
+}
+
+// eslint-disable-next-line no-useless-concat -- Workaround for https://github.com/webpack/webpack/issues/14814
+const maybeReactUseSyncExternalStore = React['useSyncExternalStore' + ''];
+function useMediaQueryNew(query, defaultMatches, matchMedia, ssrMatchMedia, noSsr) {
+  const getDefaultSnapshot = React.useCallback(() => defaultMatches, [defaultMatches]);
+  const getServerSnapshot = React.useMemo(() => {
+    if (noSsr && matchMedia) {
+      return () => matchMedia(query).matches;
+    }
+    if (ssrMatchMedia !== null) {
+      const {
+        matches
+      } = ssrMatchMedia(query);
+      return () => matches;
+    }
+    return getDefaultSnapshot;
+  }, [getDefaultSnapshot, query, ssrMatchMedia, noSsr, matchMedia]);
+  const [getSnapshot, subscribe] = React.useMemo(() => {
+    if (matchMedia === null) {
+      return [getDefaultSnapshot, () => () => {}];
+    }
+    const mediaQueryList = matchMedia(query);
+    return [() => mediaQueryList.matches, notify => {
+      // TODO: Use `addEventListener` once support for Safari < 14 is dropped
+      mediaQueryList.addListener(notify);
+      return () => {
+        mediaQueryList.removeListener(notify);
+      };
+    }];
+  }, [getDefaultSnapshot, matchMedia, query]);
+  const match = maybeReactUseSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+  return match;
+}
+function useMediaQuery(queryInput, options = {}) {
+  const theme = (0, _useThemeWithoutDefault.default)();
+  // Wait for jsdom to support the match media feature.
+  // All the browsers MUI support have this built-in.
+  // 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 {
+    defaultMatches = false,
+    matchMedia = supportMatchMedia ? window.matchMedia : null,
+    ssrMatchMedia = null,
+    noSsr = false
+  } = (0, _useThemeProps.getThemeProps)({
+    name: 'MuiUseMediaQuery',
+    props: options,
+    theme
+  });
+  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'));
+    }
+  }
+  let query = typeof queryInput === 'function' ? queryInput(theme) : queryInput;
+  query = query.replace(/^@media( ?)/m, '');
+
+  // TODO: Drop `useMediaQueryOld` and use  `use-sync-external-store` shim in `useMediaQueryNew` once the package is stable
+  const useMediaQueryImplementation = maybeReactUseSyncExternalStore !== undefined ? useMediaQueryNew : useMediaQueryOld;
+  const match = useMediaQueryImplementation(query, defaultMatches, matchMedia, ssrMatchMedia, noSsr);
+  if (process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    React.useDebugValue({
+      query,
+      match
+    });
+  }
+  return match;
+}

package/useThemeProps/getThemeProps.js

@@ -1,10 +1,11 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = getThemeProps;
-var _utils = require("@mui/utils");
+var _resolveProps = _interopRequireDefault(require("@mui/utils/resolveProps"));
 function getThemeProps(params) {
   const {
     theme,
@@ -14,5 +15,5 @@ function getThemeProps(params) {
   if (!theme || !theme.components || !theme.components[name] || !theme.components[name].defaultProps) {
     return props;
   }
-  return (0, _utils.internal_resolveProps)(theme.components[name].defaultProps, props);
+  return (0, _resolveProps.default)(theme.components[name].defaultProps, props);
 }