@mui/material 5.6.1 → 5.6.2

package/locale/index.d.ts

@@ -1,71 +1,71 @@
-import { ComponentsPropsList } from '../styles/props';
-export interface Localization {
-    components?: {
-        MuiAlert?: {
-            defaultProps: Pick<ComponentsPropsList['MuiAlert'], 'closeText'>;
-        };
-        MuiBreadcrumbs?: {
-            defaultProps: Pick<ComponentsPropsList['MuiBreadcrumbs'], 'expandText'>;
-        };
-        MuiTablePagination?: {
-            defaultProps: Pick<ComponentsPropsList['MuiTablePagination'], 'labelRowsPerPage' | 'labelDisplayedRows' | 'getItemAriaLabel'>;
-        };
-        MuiRating?: {
-            defaultProps: Pick<ComponentsPropsList['MuiRating'], 'emptyLabelText' | 'getLabelText'>;
-        };
-        MuiAutocomplete?: {
-            defaultProps: Pick<ComponentsPropsList['MuiAutocomplete'], 'clearText' | 'closeText' | 'loadingText' | 'noOptionsText' | 'openText'>;
-        };
-        MuiPagination?: {
-            defaultProps: Pick<ComponentsPropsList['MuiPagination'], 'aria-label' | 'getItemAriaLabel'>;
-        };
-    };
-}
-export declare const amET: Localization;
-export declare const arEG: Localization;
-export declare const arSD: Localization;
-export declare const azAZ: Localization;
-export declare const bnBD: Localization;
-export declare const bgBG: Localization;
-export declare const caES: Localization;
-export declare const csCZ: Localization;
-export declare const daDK: Localization;
-export declare const deDE: Localization;
-export declare const elGR: Localization;
-export declare const enUS: Localization;
-export declare const esES: Localization;
-export declare const etEE: Localization;
-export declare const faIR: Localization;
-export declare const fiFI: Localization;
-export declare const frFR: Localization;
-export declare const heIL: Localization;
-export declare const hiIN: Localization;
-export declare const hrHR: Localization;
-export declare const huHU: Localization;
-export declare const hyAM: Localization;
-export declare const idID: Localization;
-export declare const isIS: Localization;
-export declare const itIT: Localization;
-export declare const jaJP: Localization;
-export declare const khKH: Localization;
-export declare const koKR: Localization;
-export declare const kzKZ: Localization;
-export declare const mkMK: Localization;
-export declare const nbNO: Localization;
-export declare const nlNL: Localization;
-export declare const plPL: Localization;
-export declare const ptBR: Localization;
-export declare const ptPT: Localization;
-export declare const roRO: Localization;
-export declare const srRS: Localization;
-export declare const ruRU: Localization;
-export declare const siLK: Localization;
-export declare const skSK: Localization;
-export declare const svSE: Localization;
-export declare const thTH: Localization;
-export declare const trTR: Localization;
-export declare const ukUA: Localization;
-export declare const viVN: Localization;
-export declare const zhCN: Localization;
-export declare const zhHK: Localization;
-export declare const zhTW: Localization;
+import { ComponentsPropsList } from '../styles/props';
+export interface Localization {
+    components?: {
+        MuiAlert?: {
+            defaultProps: Pick<ComponentsPropsList['MuiAlert'], 'closeText'>;
+        };
+        MuiBreadcrumbs?: {
+            defaultProps: Pick<ComponentsPropsList['MuiBreadcrumbs'], 'expandText'>;
+        };
+        MuiTablePagination?: {
+            defaultProps: Pick<ComponentsPropsList['MuiTablePagination'], 'labelRowsPerPage' | 'labelDisplayedRows' | 'getItemAriaLabel'>;
+        };
+        MuiRating?: {
+            defaultProps: Pick<ComponentsPropsList['MuiRating'], 'emptyLabelText' | 'getLabelText'>;
+        };
+        MuiAutocomplete?: {
+            defaultProps: Pick<ComponentsPropsList['MuiAutocomplete'], 'clearText' | 'closeText' | 'loadingText' | 'noOptionsText' | 'openText'>;
+        };
+        MuiPagination?: {
+            defaultProps: Pick<ComponentsPropsList['MuiPagination'], 'aria-label' | 'getItemAriaLabel'>;
+        };
+    };
+}
+export declare const amET: Localization;
+export declare const arEG: Localization;
+export declare const arSD: Localization;
+export declare const azAZ: Localization;
+export declare const bnBD: Localization;
+export declare const bgBG: Localization;
+export declare const caES: Localization;
+export declare const csCZ: Localization;
+export declare const daDK: Localization;
+export declare const deDE: Localization;
+export declare const elGR: Localization;
+export declare const enUS: Localization;
+export declare const esES: Localization;
+export declare const etEE: Localization;
+export declare const faIR: Localization;
+export declare const fiFI: Localization;
+export declare const frFR: Localization;
+export declare const heIL: Localization;
+export declare const hiIN: Localization;
+export declare const hrHR: Localization;
+export declare const huHU: Localization;
+export declare const hyAM: Localization;
+export declare const idID: Localization;
+export declare const isIS: Localization;
+export declare const itIT: Localization;
+export declare const jaJP: Localization;
+export declare const khKH: Localization;
+export declare const koKR: Localization;
+export declare const kzKZ: Localization;
+export declare const mkMK: Localization;
+export declare const nbNO: Localization;
+export declare const nlNL: Localization;
+export declare const plPL: Localization;
+export declare const ptBR: Localization;
+export declare const ptPT: Localization;
+export declare const roRO: Localization;
+export declare const srRS: Localization;
+export declare const ruRU: Localization;
+export declare const siLK: Localization;
+export declare const skSK: Localization;
+export declare const svSE: Localization;
+export declare const thTH: Localization;
+export declare const trTR: Localization;
+export declare const ukUA: Localization;
+export declare const viVN: Localization;
+export declare const zhCN: Localization;
+export declare const zhHK: Localization;
+export declare const zhTW: Localization;

package/modern/Autocomplete/Autocomplete.js

@@ -809,6 +809,8 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * Used to determine the string value for a given option.
    * It's used to fill the input (and the list box options if `renderOption` is not provided).
    *
+   * If used in free solo mode, it must accept both the type of the options and a string.
+   *
    * @param {T} option
    * @returns {string}
    * @default (option) => option.label ?? option

package/modern/Badge/Badge.js

@@ -5,6 +5,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { usePreviousProps } from '@mui/utils';
+import composeClasses from '@mui/base/composeClasses';
 import BadgeUnstyled from '@mui/base/BadgeUnstyled';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
@@ -15,7 +16,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const RADIUS_STANDARD = 10;
 const RADIUS_DOT = 4;
 
-const extendUtilityClasses = ownerState => {
+const useUtilityClasses = ownerState => {
   const {
     color,
     anchorOrigin,
@@ -24,10 +25,11 @@ const extendUtilityClasses = ownerState => {
     variant,
     classes = {}
   } = ownerState;
-  return {
-    root: clsx(classes.root, 'root'),
-    badge: clsx(classes.badge, getBadgeUtilityClass('badge'), getBadgeUtilityClass(variant), `anchorOrigin${capitalize(anchorOrigin.vertical)}${capitalize(anchorOrigin.horizontal)}`, getBadgeUtilityClass(`anchorOrigin${capitalize(anchorOrigin.vertical)}${capitalize(anchorOrigin.horizontal)}${capitalize(overlap)}`), getBadgeUtilityClass(`overlap${capitalize(overlap)}`), color !== 'default' && [getBadgeUtilityClass(`color${capitalize(color)}`), classes[`color${capitalize(color)}`]], invisible && getBadgeUtilityClass('invisible'))
+  const slots = {
+    root: ['root'],
+    badge: ['badge', variant, invisible && 'invisible', `anchorOrigin${capitalize(anchorOrigin.vertical)}${capitalize(anchorOrigin.horizontal)}`, `anchorOrigin${capitalize(anchorOrigin.vertical)}${capitalize(anchorOrigin.horizontal)}${capitalize(overlap)}`, `overlap${capitalize(overlap)}`, color !== 'default' && `color${capitalize(color)}`]
   };
+  return composeClasses(slots, getBadgeUtilityClass, classes);
 };
 
 const BadgeRoot = styled('span', {
@@ -206,7 +208,7 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
     variant
   });
 
-  const classes = extendUtilityClasses(ownerState);
+  const classes = useUtilityClasses(ownerState);
   let displayValue;
 
   if (variant !== 'dot') {

package/modern/Dialog/Dialog.js

@@ -351,6 +351,7 @@ process.env.NODE_ENV !== "production" ? Dialog.propTypes
 
   /**
    * Callback fired when the backdrop is clicked.
+   * @deprecated Use the `onClose` prop with the `reason` argument to handle the `backdropClick` events.
    */
   onBackdropClick: PropTypes.func,
 

package/modern/FilledInput/FilledInput.js

@@ -82,7 +82,9 @@ const FilledInputRoot = styled(InputBaseRoot, {
 
     },
     [`&.${filledInputClasses.focused}:after`]: {
-      transform: 'scaleX(1)'
+      // translateX(0) is a workaround for Safari transform scale bug
+      // See https://github.com/mui/material-ui/issues/31766
+      transform: 'scaleX(1) translateX(0)'
     },
     [`&.${filledInputClasses.error}:after`]: {
       borderBottomColor: theme.palette.error.main,

package/modern/Input/Input.js

@@ -65,7 +65,9 @@ const InputRoot = styled(InputBaseRoot, {
 
     },
     [`&.${inputClasses.focused}:after`]: {
-      transform: 'scaleX(1)'
+      // translateX(0) is a workaround for Safari transform scale bug
+      // See https://github.com/mui/material-ui/issues/31766
+      transform: 'scaleX(1) translateX(0)'
     },
     [`&.${inputClasses.error}:after`]: {
       borderBottomColor: theme.palette.error.main,

package/modern/Modal/Modal.js

@@ -253,6 +253,7 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes
 
   /**
    * Callback fired when the backdrop is clicked.
+   * @deprecated Use the `onClose` prop with the `reason` argument to handle the `backdropClick` events.
    */
   onBackdropClick: PropTypes.func,
 

package/modern/index.js

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

package/node/Autocomplete/Autocomplete.js

@@ -852,6 +852,8 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * Used to determine the string value for a given option.
    * It's used to fill the input (and the list box options if `renderOption` is not provided).
    *
+   * If used in free solo mode, it must accept both the type of the options and a string.
+   *
    * @param {T} option
    * @returns {string}
    * @default (option) => option.label ?? option

package/node/Badge/Badge.js

@@ -19,6 +19,8 @@ var _clsx = _interopRequireDefault(require("clsx"));
 
 var _utils = require("@mui/utils");
 
+var _composeClasses = _interopRequireDefault(require("@mui/base/composeClasses"));
+
 var _BadgeUnstyled = _interopRequireDefault(require("@mui/base/BadgeUnstyled"));
 
 var _styled = _interopRequireDefault(require("../styles/styled"));
@@ -42,7 +44,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 const RADIUS_STANDARD = 10;
 const RADIUS_DOT = 4;
 
-const extendUtilityClasses = ownerState => {
+const useUtilityClasses = ownerState => {
   const {
     color,
     anchorOrigin,
@@ -51,10 +53,11 @@ const extendUtilityClasses = ownerState => {
     variant,
     classes = {}
   } = ownerState;
-  return {
-    root: (0, _clsx.default)(classes.root, 'root'),
-    badge: (0, _clsx.default)(classes.badge, (0, _badgeClasses.getBadgeUtilityClass)('badge'), (0, _badgeClasses.getBadgeUtilityClass)(variant), `anchorOrigin${(0, _capitalize.default)(anchorOrigin.vertical)}${(0, _capitalize.default)(anchorOrigin.horizontal)}`, (0, _badgeClasses.getBadgeUtilityClass)(`anchorOrigin${(0, _capitalize.default)(anchorOrigin.vertical)}${(0, _capitalize.default)(anchorOrigin.horizontal)}${(0, _capitalize.default)(overlap)}`), (0, _badgeClasses.getBadgeUtilityClass)(`overlap${(0, _capitalize.default)(overlap)}`), color !== 'default' && [(0, _badgeClasses.getBadgeUtilityClass)(`color${(0, _capitalize.default)(color)}`), classes[`color${(0, _capitalize.default)(color)}`]], invisible && (0, _badgeClasses.getBadgeUtilityClass)('invisible'))
+  const slots = {
+    root: ['root'],
+    badge: ['badge', variant, invisible && 'invisible', `anchorOrigin${(0, _capitalize.default)(anchorOrigin.vertical)}${(0, _capitalize.default)(anchorOrigin.horizontal)}`, `anchorOrigin${(0, _capitalize.default)(anchorOrigin.vertical)}${(0, _capitalize.default)(anchorOrigin.horizontal)}${(0, _capitalize.default)(overlap)}`, `overlap${(0, _capitalize.default)(overlap)}`, color !== 'default' && `color${(0, _capitalize.default)(color)}`]
   };
+  return (0, _composeClasses.default)(slots, _badgeClasses.getBadgeUtilityClass, classes);
 };
 
 const BadgeRoot = (0, _styled.default)('span', {
@@ -231,7 +234,7 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
     overlap,
     variant
   });
-  const classes = extendUtilityClasses(ownerState);
+  const classes = useUtilityClasses(ownerState);
   let displayValue;
 
   if (variant !== 'dot') {

package/node/Dialog/Dialog.js

@@ -380,6 +380,7 @@ process.env.NODE_ENV !== "production" ? Dialog.propTypes
 
   /**
    * Callback fired when the backdrop is clicked.
+   * @deprecated Use the `onClose` prop with the `reason` argument to handle the `backdropClick` events.
    */
   onBackdropClick: _propTypes.default.func,
 

package/node/FilledInput/FilledInput.js

@@ -107,7 +107,9 @@ const FilledInputRoot = (0, _styled.default)(_InputBase2.InputBaseRoot, {
 
     },
     [`&.${_filledInputClasses.default.focused}:after`]: {
-      transform: 'scaleX(1)'
+      // translateX(0) is a workaround for Safari transform scale bug
+      // See https://github.com/mui/material-ui/issues/31766
+      transform: 'scaleX(1) translateX(0)'
     },
     [`&.${_filledInputClasses.default.error}:after`]: {
       borderBottomColor: theme.palette.error.main,

package/node/Input/Input.js

@@ -90,7 +90,9 @@ const InputRoot = (0, _styled.default)(_InputBase2.InputBaseRoot, {
 
     },
     [`&.${_inputClasses.default.focused}:after`]: {
-      transform: 'scaleX(1)'
+      // translateX(0) is a workaround for Safari transform scale bug
+      // See https://github.com/mui/material-ui/issues/31766
+      transform: 'scaleX(1) translateX(0)'
     },
     [`&.${_inputClasses.default.error}:after`]: {
       borderBottomColor: theme.palette.error.main,

package/node/Modal/Modal.js

@@ -277,6 +277,7 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes
 
   /**
    * Callback fired when the backdrop is clicked.
+   * @deprecated Use the `onClose` prop with the `reason` argument to handle the `backdropClick` events.
    */
   onBackdropClick: _propTypes.default.func,
 

package/node/index.js

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

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@mui/material",
-  "version": "5.6.1",
+  "version": "5.6.2",
   "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.",
+  "description": "React components that implement Google's Material Design.",
   "main": "./node/index.js",
   "keywords": [
     "react",
@@ -46,8 +46,8 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.17.2",
-    "@mui/base": "5.0.0-alpha.76",
-    "@mui/system": "^5.6.1",
+    "@mui/base": "5.0.0-alpha.77",
+    "@mui/system": "^5.6.2",
     "@mui/types": "^7.1.3",
     "@mui/utils": "^5.6.1",
     "@types/react-transition-group": "^4.4.4",

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 {};