@mui/material 5.2.8 → 5.4.1

package/node/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.2.8
+/** @license MUI v5.4.1
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -144,7 +144,10 @@ var _exportNames = {
   useScrollTrigger: true,
   Zoom: true,
   useAutocomplete: true,
-  GlobalStyles: true
+  GlobalStyles: true,
+  unstable_composeClasses: true,
+  generateUtilityClass: true,
+  generateUtilityClasses: true
 };
 Object.defineProperty(exports, "Accordion", {
   enumerable: true,
@@ -921,6 +924,24 @@ Object.defineProperty(exports, "darkScrollbar", {
     return _darkScrollbar.default;
   }
 });
+Object.defineProperty(exports, "generateUtilityClass", {
+  enumerable: true,
+  get: function () {
+    return _generateUtilityClass.default;
+  }
+});
+Object.defineProperty(exports, "generateUtilityClasses", {
+  enumerable: true,
+  get: function () {
+    return _generateUtilityClasses.default;
+  }
+});
+Object.defineProperty(exports, "unstable_composeClasses", {
+  enumerable: true,
+  get: function () {
+    return _composeClasses.default;
+  }
+});
 Object.defineProperty(exports, "useAutocomplete", {
   enumerable: true,
   get: function () {
@@ -978,20 +999,6 @@ Object.keys(_utils).forEach(function (key) {
   });
 });
 
-var _base = require("@mui/base");
-
-Object.keys(_base).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _base[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _base[key];
-    }
-  });
-});
-
 var _Accordion = _interopRequireWildcard(require("./Accordion"));
 
 Object.keys(_Accordion).forEach(function (key) {
@@ -2828,6 +2835,24 @@ Object.keys(_GlobalStyles).forEach(function (key) {
   });
 });
 
+var _composeClasses = _interopRequireDefault(require("@mui/base/composeClasses"));
+
+var _generateUtilityClass = _interopRequireWildcard(require("@mui/base/generateUtilityClass"));
+
+Object.keys(_generateUtilityClass).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _generateUtilityClass[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _generateUtilityClass[key];
+    }
+  });
+});
+
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/base/generateUtilityClasses"));
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/node/internal/SwitchBase.js

@@ -55,9 +55,7 @@ const useUtilityClasses = ownerState => {
   return (0, _base.unstable_composeClasses)(slots, _switchBaseClasses.getSwitchBaseUtilityClass, classes);
 };
 
-const SwitchBaseRoot = (0, _styled.default)(_ButtonBase.default, {
-  skipSx: true
-})(({
+const SwitchBaseRoot = (0, _styled.default)(_ButtonBase.default)(({
   ownerState
 }) => (0, _extends2.default)({
   padding: 9,
@@ -67,9 +65,7 @@ const SwitchBaseRoot = (0, _styled.default)(_ButtonBase.default, {
 }, ownerState.edge === 'end' && {
   marginRight: ownerState.size === 'small' ? -3 : -12
 }));
-const SwitchBaseInput = (0, _styled.default)('input', {
-  skipSx: true
-})({
+const SwitchBaseInput = (0, _styled.default)('input')({
   cursor: 'inherit',
   position: 'absolute',
   opacity: 0,

package/node/styles/makeStyles.js

@@ -10,5 +10,5 @@ var _utils = require("@mui/utils");
 function makeStyles() {
   throw new Error(process.env.NODE_ENV !== "production" ? `MUI: makeStyles is not longer exported from @mui/material/styles.
 You have to import it from @mui/styles.
-See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` : (0, _utils.formatMuiErrorMessage)(14));
+See https://mui.com/r/migration-v4/#mui-material-styles for more details.` : (0, _utils.formatMuiErrorMessage)(14));
 }

package/node/styles/withStyles.js

@@ -10,5 +10,5 @@ var _utils = require("@mui/utils");
 function withStyles() {
   throw new Error(process.env.NODE_ENV !== "production" ? `MUI: withStyles is not longer exported from @mui/material/styles.
 You have to import it from @mui/styles.
-See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` : (0, _utils.formatMuiErrorMessage)(15));
+See https://mui.com/r/migration-v4/#mui-material-styles for more details.` : (0, _utils.formatMuiErrorMessage)(15));
 }

package/node/styles/withTheme.js

@@ -10,5 +10,5 @@ var _utils = require("@mui/utils");
 function withTheme() {
   throw new Error(process.env.NODE_ENV !== "production" ? `MUI: withTheme is not longer exported from @mui/material/styles.
 You have to import it from @mui/styles.
-See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` : (0, _utils.formatMuiErrorMessage)(16));
+See https://mui.com/r/migration-v4/#mui-material-styles for more details.` : (0, _utils.formatMuiErrorMessage)(16));
 }

package/node/useMediaQuery/useMediaQuery.js

@@ -17,32 +17,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function useMediaQuery(queryInput, options = {}) {
-  const theme = (0, _system.useThemeWithoutDefault)(); // 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.
-
+function useMediaQueryOld(query, defaultMatches, matchMedia, ssrMatchMedia, noSsr) {
   const supportMatchMedia = typeof window !== 'undefined' && typeof window.matchMedia !== 'undefined';
-  const {
-    defaultMatches = false,
-    matchMedia = supportMatchMedia ? window.matchMedia : null,
-    noSsr = false,
-    ssrMatchMedia = null
-  } = (0, _system.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, '');
   const [match, setMatch] = React.useState(() => {
     if (noSsr && supportMatchMedia) {
       return matchMedia(query).matches;
@@ -68,19 +44,85 @@ function useMediaQuery(queryInput, options = {}) {
     const updateMatch = () => {
       // Workaround Safari wrong implementation of matchMedia
       // TODO can we remove it?
-      // https://github.com/mui-org/material-ui/pull/17315#issuecomment-528286677
+      // https://github.com/mui/material-ui/pull/17315#issuecomment-528286677
       if (active) {
         setMatch(queryList.matches);
       }
     };
 
-    updateMatch();
+    updateMatch(); // TODO: Use `addEventListener` once support for Safari < 14 is dropped
+
     queryList.addListener(updateMatch);
     return () => {
       active = false;
       queryList.removeListener(updateMatch);
     };
   }, [query, matchMedia, supportMatchMedia]);
+  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) {
+  const getDefaultSnapshot = React.useCallback(() => defaultMatches, [defaultMatches]);
+  const getServerSnapshot = React.useMemo(() => {
+    if (ssrMatchMedia !== null) {
+      const {
+        matches
+      } = ssrMatchMedia(query);
+      return () => matches;
+    }
+
+    return getDefaultSnapshot;
+  }, [getDefaultSnapshot, query, ssrMatchMedia]);
+  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, _system.useThemeWithoutDefault)(); // 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
+  } = (0, _system.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

package/node/utils/shouldSpreadAdditionalProps.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _base = require("@mui/base");
+
+const shouldSpreadAdditionalProps = Slot => {
+  return !Slot || !(0, _base.isHostComponent)(Slot);
+};
+
+var _default = shouldSpreadAdditionalProps;
+exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "5.2.8",
+  "version": "5.4.1",
   "private": false,
   "author": "MUI Team",
   "description": "Quickly build beautiful React apps. MUI is a simple and customizable component library to build faster, beautiful, and more accessible React applications. Follow your own design system, or start with Material Design.",
@@ -14,12 +14,12 @@
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/mui-org/material-ui.git",
+    "url": "https://github.com/mui/material-ui.git",
     "directory": "packages/mui-material"
   },
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/mui-org/material-ui/issues"
+    "url": "https://github.com/mui/material-ui/issues"
   },
   "homepage": "https://mui.com/",
   "funding": {
@@ -30,8 +30,8 @@
     "@emotion/react": "^11.5.0",
     "@emotion/styled": "^11.3.0",
     "@types/react": "^16.8.6 || ^17.0.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0"
   },
   "peerDependenciesMeta": {
     "@types/react": {
@@ -45,11 +45,11 @@
     }
   },
   "dependencies": {
-    "@babel/runtime": "^7.16.3",
-    "@mui/base": "5.0.0-alpha.64",
-    "@mui/system": "^5.2.8",
-    "@mui/types": "^7.1.0",
-    "@mui/utils": "^5.2.3",
+    "@babel/runtime": "^7.17.0",
+    "@mui/base": "5.0.0-alpha.68",
+    "@mui/system": "^5.4.1",
+    "@mui/types": "^7.1.1",
+    "@mui/utils": "^5.4.1",
     "@types/react-transition-group": "^4.4.4",
     "clsx": "^1.1.1",
     "csstype": "^3.0.10",

package/styles/ThemeProvider.d.ts

@@ -10,7 +10,7 @@ export interface ThemeProviderProps<Theme = DefaultTheme> {
  * It should preferably be used at **the root of your component tree**.
  * API:
  *
- * - [ThemeProvider API](https://mui.com/api/theme-provider/)
+ * - [ThemeProvider API](/customization/theming/#themeprovider)
  */
 export default function ThemeProvider<T = DefaultTheme>(
   props: ThemeProviderProps<T>,