@mui/material 5.2.0 → 5.2.4

package/node/Tooltip/Tooltip.js

@@ -830,7 +830,7 @@ process.env.NODE_ENV !== "production" ? Tooltip.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])), _propTypes.default.func, _propTypes.default.object]),
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
 
   /**
    * Tooltip title. Zero-length titles string are never displayed.
@@ -848,7 +848,7 @@ process.env.NODE_ENV !== "production" ? Tooltip.propTypes
 
   /**
    * Props applied to the transition element.
-   * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition) component.
+   * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component.
    */
   TransitionProps: _propTypes.default.object
 } : void 0;

package/node/Typography/Typography.js

@@ -203,7 +203,7 @@ process.env.NODE_ENV !== "production" ? Typography.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])), _propTypes.default.func, _propTypes.default.object]),
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
 
   /**
    * Applies the theme typography styles.

package/node/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.2.0
+/** @license MUI v5.2.4
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/node/styles/adaptV4Theme.js

@@ -43,7 +43,7 @@ function adaptV4Theme(inputTheme) {
     const componentValue = theme.components[component] || {};
     componentValue.defaultProps = props[component];
     theme.components[component] = componentValue;
-  }); // css overrides
+  }); // CSS overrides
 
   Object.keys(styleOverrides).forEach(component => {
     const componentValue = theme.components[component] || {};

package/node/styles/index.js

@@ -89,6 +89,12 @@ Object.defineProperty(exports, "experimentalStyled", {
     return _styled.default;
   }
 });
+Object.defineProperty(exports, "experimental_sx", {
+  enumerable: true,
+  get: function () {
+    return _system.experimental_sx;
+  }
+});
 Object.defineProperty(exports, "getContrastRatio", {
   enumerable: true,
   get: function () {

package/node/styles/responsiveFontSizes.js

@@ -22,7 +22,7 @@ function responsiveFontSizes(themeInput, options = {}) {
   } = options;
   const theme = (0, _extends2.default)({}, themeInput);
   theme.typography = (0, _extends2.default)({}, theme.typography);
-  const typography = theme.typography; // Convert between css lengths e.g. em->px or px->rem
+  const typography = theme.typography; // Convert between CSS lengths e.g. em->px or px->rem
   // Set the baseFontSize for your project. Defaults to 16px (also the browser default).
 
   const convert = (0, _cssUtils.convertLength)(typography.htmlFontSize);

package/node/useMediaQuery/useMediaQuery.js

@@ -17,8 +17,32 @@ 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 useMediaQueryOld(query, defaultMatches, matchMedia, ssrMatchMedia, noSsr) {
+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,
+    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;
@@ -50,76 +74,13 @@ function useMediaQueryOld(query, defaultMatches, matchMedia, ssrMatchMedia, noSs
       }
     };
 
-    updateMatch(); // TODO: Use `addEventListener` once support for Safari < 14 is dropped
-
+    updateMatch();
     queryList.addListener(updateMatch);
     return () => {
       active = false;
       queryList.removeListener(updateMatch);
     };
   }, [query, matchMedia, supportMatchMedia]);
-  return match;
-}
-
-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 = React.useSyncExternalStore(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 = React.useSyncExternalStore !== 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.2.0",
+  "version": "5.2.4",
   "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.",
@@ -24,7 +24,7 @@
   "homepage": "https://mui.com/",
   "funding": {
     "type": "opencollective",
-    "url": "https://opencollective.com/material-ui"
+    "url": "https://opencollective.com/mui"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",
@@ -46,10 +46,10 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.16.3",
-    "@mui/base": "5.0.0-alpha.56",
-    "@mui/system": "^5.2.0",
+    "@mui/base": "5.0.0-alpha.60",
+    "@mui/system": "^5.2.4",
     "@mui/types": "^7.1.0",
-    "@mui/utils": "^5.2.0",
+    "@mui/utils": "^5.2.3",
     "@types/react-transition-group": "^4.4.4",
     "clsx": "^1.1.1",
     "csstype": "^3.0.10",

package/styles/adaptV4Theme.js

@@ -32,7 +32,7 @@ export default function adaptV4Theme(inputTheme) {
     const componentValue = theme.components[component] || {};
     componentValue.defaultProps = props[component];
     theme.components[component] = componentValue;
-  }); // css overrides
+  }); // CSS overrides
 
   Object.keys(styleOverrides).forEach(component => {
     const componentValue = theme.components[component] || {};

package/styles/createTheme.d.ts

@@ -7,7 +7,7 @@ import { Transitions, TransitionsOptions } from './createTransitions';
 import { ZIndex, ZIndexOptions } from './zIndex';
 import { Components } from './components';
 
-export interface ThemeOptions extends SystemThemeOptions {
+export interface ThemeOptions extends Omit<SystemThemeOptions, 'zIndex'> {
   mixins?: MixinsOptions;
   components?: Components;
   palette?: PaletteOptions;

package/styles/cssUtils.d.ts

@@ -0,0 +1,32 @@
+import { CSSProperties } from './createTypography';
+
+export function isUnitless(value: string): boolean;
+
+export function getUnit(input: string): string;
+
+export function toUnitless(value: string): number;
+
+export function convertLength(baseFontSize: string): (length: string, toUnit: string) => string;
+
+export interface AlignPropertyParams {
+  size: number;
+  grid: number;
+}
+export function alignProperty(params: AlignPropertyParams): number;
+
+export interface FontGridParams {
+  lineHeight: number;
+  pixels: number;
+  htmlFontSize: number;
+}
+export function fontGrid(params: FontGridParams): number;
+
+export interface ResponsivePropertyParams {
+  cssProperty: string;
+  min: number;
+  max: number;
+  unit?: string;
+  breakpoints?: number[];
+  transform?: (value: number) => number;
+}
+export function responsiveProperty(params: ResponsivePropertyParams): CSSProperties;

package/styles/index.d.ts

@@ -55,6 +55,9 @@ export {
   lighten,
   ColorFormat,
   ColorObject,
+  StyledEngineProvider,
+  SxProps,
+  experimental_sx,
 } from '@mui/system';
 export { default as useTheme } from './useTheme';
 export { default as useThemeProps } from './useThemeProps';
@@ -69,7 +72,7 @@ export { ComponentsProps, ComponentsPropsList } from './props';
 export { ComponentsVariants } from './variants';
 export { ComponentsOverrides, ComponentNameToClassKey } from './overrides';
 export { Components } from './components';
-export { StyledEngineProvider } from '@mui/system';
+export { getUnit as unstable_getUnit, toUnitless as unstable_toUnitless } from './cssUtils';
 
 export type ClassNameMap<ClassKey extends string = string> = Record<ClassKey, string>;
 

package/styles/index.js

@@ -1,5 +1,5 @@
 export { default as adaptV4Theme } from './adaptV4Theme';
-export { hexToRgb, rgbToHex, hslToRgb, decomposeColor, recomposeColor, getContrastRatio, getLuminance, emphasize, alpha, darken, lighten, css, keyframes } from '@mui/system';
+export { hexToRgb, rgbToHex, hslToRgb, decomposeColor, recomposeColor, getContrastRatio, getLuminance, emphasize, alpha, darken, lighten, css, keyframes, experimental_sx } from '@mui/system';
 export { default as createTheme, createMuiTheme } from './createTheme';
 export { default as unstable_createMuiStrictModeTheme } from './createMuiStrictModeTheme';
 export { default as createStyles } from './createStyles';

package/styles/responsiveFontSizes.js

@@ -12,7 +12,7 @@ export default function responsiveFontSizes(themeInput, options = {}) {
   const theme = _extends({}, themeInput);
 
   theme.typography = _extends({}, theme.typography);
-  const typography = theme.typography; // Convert between css lengths e.g. em->px or px->rem
+  const typography = theme.typography; // Convert between CSS lengths e.g. em->px or px->rem
   // Set the baseFontSize for your project. Defaults to 16px (also the browser default).
 
   const convert = convertLength(typography.htmlFontSize);

package/transitions/index.d.ts

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

package/transitions/transition.d.ts

@@ -1,14 +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>> {
-    style?: React.CSSProperties;
-}
+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 {};