@mui/material 5.3.1 → 5.4.0

package/node/TextField/TextField.js

@@ -217,7 +217,7 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(inProps, ref)
     variant: variant,
     ownerState: ownerState
   }, other, {
-    children: [label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputLabel.default, (0, _extends2.default)({
+    children: [label != null && label !== '' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputLabel.default, (0, _extends2.default)({
       htmlFor: id,
       id: inputLabelId
     }, InputLabelProps, {

package/node/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.3.1
+/** @license MUI v5.4.0
  *
  * 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/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;
@@ -74,13 +50,79 @@ function useMediaQuery(queryInput, options = {}) {
       }
     };
 
-    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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "5.3.1",
+  "version": "5.4.0",
   "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.",
@@ -46,8 +46,8 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.16.7",
-    "@mui/base": "5.0.0-alpha.66",
-    "@mui/system": "^5.3.0",
+    "@mui/base": "5.0.0-alpha.67",
+    "@mui/system": "^5.4.0",
     "@mui/types": "^7.1.0",
     "@mui/utils": "^5.3.0",
     "@types/react-transition-group": "^4.4.4",

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>,

package/transitions/index.d.ts

@@ -1 +1 @@
-export * from './transition';
+export * from './transition';

package/transitions/transition.d.ts

@@ -1,13 +1,13 @@
-import { TransitionProps as _TransitionProps, TransitionActions } from 'react-transition-group/Transition';
-import * as React from 'react';
-export declare type TransitionHandlerKeys = 'onEnter' | 'onEntering' | 'onEntered' | 'onExit' | 'onExiting' | 'onExited';
-export declare type TransitionHandlerProps = Pick<_TransitionProps, TransitionHandlerKeys>;
-export interface EasingProps {
-    easing: string | {
-        enter?: string;
-        exit?: string;
-    };
-}
-export declare type TransitionKeys = 'in' | 'mountOnEnter' | 'unmountOnExit' | 'timeout' | 'easing' | 'addEndListener' | TransitionHandlerKeys;
-export interface TransitionProps extends TransitionActions, Partial<Pick<_TransitionProps & EasingProps, TransitionKeys>>, React.HTMLAttributes<HTMLElement> {
-}
+import { TransitionProps as _TransitionProps, TransitionActions } from 'react-transition-group/Transition';
+import * as React from 'react';
+export declare type TransitionHandlerKeys = 'onEnter' | 'onEntering' | 'onEntered' | 'onExit' | 'onExiting' | 'onExited';
+export declare type TransitionHandlerProps = Pick<_TransitionProps, TransitionHandlerKeys>;
+export interface EasingProps {
+    easing: string | {
+        enter?: string;
+        exit?: string;
+    };
+}
+export declare type TransitionKeys = 'in' | 'mountOnEnter' | 'unmountOnExit' | 'timeout' | 'easing' | 'addEndListener' | TransitionHandlerKeys;
+export interface TransitionProps extends TransitionActions, Partial<Pick<_TransitionProps & EasingProps, TransitionKeys>>, React.HTMLAttributes<HTMLElement> {
+}

package/transitions/utils.d.ts

@@ -1,23 +1,23 @@
-import * as React from 'react';
-export declare const reflow: (node: Element) => number;
-interface ComponentProps {
-    easing: string | {
-        enter?: string;
-        exit?: string;
-    } | undefined;
-    style: React.CSSProperties | undefined;
-    timeout: number | {
-        enter?: number;
-        exit?: number;
-    };
-}
-interface Options {
-    mode: 'enter' | 'exit';
-}
-interface TransitionProps {
-    duration: string | number;
-    easing: string | undefined;
-    delay: string | undefined;
-}
-export declare function getTransitionProps(props: ComponentProps, options: Options): TransitionProps;
-export {};
+import * as React from 'react';
+export declare const reflow: (node: Element) => number;
+interface ComponentProps {
+    easing: string | {
+        enter?: string;
+        exit?: string;
+    } | undefined;
+    style: React.CSSProperties | undefined;
+    timeout: number | {
+        enter?: number;
+        exit?: number;
+    };
+}
+interface Options {
+    mode: 'enter' | 'exit';
+}
+interface TransitionProps {
+    duration: string | number;
+    easing: string | undefined;
+    delay: string | undefined;
+}
+export declare function getTransitionProps(props: ComponentProps, options: Options): TransitionProps;
+export {};