@mui/material 5.2.7 → 5.4.0

package/legacy/FormControlLabel/FormControlLabel.js

@@ -12,15 +12,17 @@ import capitalize from '../utils/capitalize';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import formControlLabelClasses, { getFormControlLabelUtilityClasses } from './formControlLabelClasses';
+import formControlState from '../FormControl/formControlState';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes,
       disabled = ownerState.disabled,
-      labelPlacement = ownerState.labelPlacement;
+      labelPlacement = ownerState.labelPlacement,
+      error = ownerState.error;
   var slots = {
-    root: ['root', disabled && 'disabled', "labelPlacement".concat(capitalize(labelPlacement))],
+    root: ['root', disabled && 'disabled', "labelPlacement".concat(capitalize(labelPlacement)), error && 'error'],
     label: ['label', disabled && 'disabled']
   };
   return composeClasses(slots, getFormControlLabelUtilityClasses, classes);
@@ -108,11 +110,17 @@ var FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel(i
       controlProps[key] = props[key];
     }
   });
+  var fcs = formControlState({
+    props: props,
+    muiFormControl: muiFormControl,
+    states: ['error']
+  });
 
   var ownerState = _extends({}, props, {
     disabled: disabled,
     label: label,
-    labelPlacement: labelPlacement
+    labelPlacement: labelPlacement,
+    error: fcs.error
   });
 
   var classes = useUtilityClasses(ownerState);
@@ -156,7 +164,9 @@ process.env.NODE_ENV !== "production" ? FormControlLabel.propTypes
    * The props used for each slot inside.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    typography: PropTypes.object
+  }),
 
   /**
    * A control element. For instance, it can be a `Radio`, a `Switch` or a `Checkbox`.

package/legacy/FormControlLabel/formControlLabelClasses.js

@@ -2,5 +2,5 @@ import { generateUtilityClasses, generateUtilityClass } from '@mui/base';
 export function getFormControlLabelUtilityClasses(slot) {
   return generateUtilityClass('MuiFormControlLabel', slot);
 }
-var formControlLabelClasses = generateUtilityClasses('MuiFormControlLabel', ['root', 'labelPlacementStart', 'labelPlacementTop', 'labelPlacementBottom', 'disabled', 'label']);
+var formControlLabelClasses = generateUtilityClasses('MuiFormControlLabel', ['root', 'labelPlacementStart', 'labelPlacementTop', 'labelPlacementBottom', 'disabled', 'label', 'error']);
 export default formControlLabelClasses;

package/legacy/FormGroup/FormGroup.js

@@ -7,13 +7,16 @@ import { unstable_composeClasses as composeClasses } from '@mui/base';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import { getFormGroupUtilityClass } from './formGroupClasses';
+import useFormControl from '../FormControl/useFormControl';
+import formControlState from '../FormControl/formControlState';
 import { jsx as _jsx } from "react/jsx-runtime";
 
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes,
-      row = ownerState.row;
+      row = ownerState.row,
+      error = ownerState.error;
   var slots = {
-    root: ['root', row && 'row']
+    root: ['root', row && 'row', error && 'error']
   };
   return composeClasses(slots, getFormGroupUtilityClass, classes);
 };
@@ -52,8 +55,16 @@ var FormGroup = /*#__PURE__*/React.forwardRef(function FormGroup(inProps, ref) {
       row = _props$row === void 0 ? false : _props$row,
       other = _objectWithoutProperties(props, ["className", "row"]);
 
+  var muiFormControl = useFormControl();
+  var fcs = formControlState({
+    props: props,
+    muiFormControl: muiFormControl,
+    states: ['error']
+  });
+
   var ownerState = _extends({}, props, {
-    row: row
+    row: row,
+    error: fcs.error
   });
 
   var classes = useUtilityClasses(ownerState);

package/legacy/FormGroup/formGroupClasses.js

@@ -2,5 +2,5 @@ import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
 export function getFormGroupUtilityClass(slot) {
   return generateUtilityClass('MuiFormGroup', slot);
 }
-var formGroupClasses = generateUtilityClasses('MuiFormGroup', ['root', 'row']);
+var formGroupClasses = generateUtilityClasses('MuiFormGroup', ['root', 'row', 'error']);
 export default formGroupClasses;

package/legacy/FormHelperText/FormHelperText.js

@@ -1,6 +1,9 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _extends from "@babel/runtime/helpers/esm/extends";
+
+var _span;
+
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -104,16 +107,11 @@ var FormHelperText = /*#__PURE__*/React.forwardRef(function FormHelperText(inPro
     className: clsx(classes.root, className),
     ref: ref
   }, other, {
-    children: children === ' ' ?
-    /*#__PURE__*/
-    // notranslate needed while Google Translate will not fix zero-width space issue
-    // eslint-disable-next-line react/no-danger
-    _jsx("span", {
+    children: children === ' ' ? // notranslate needed while Google Translate will not fix zero-width space issue
+    _span || (_span = /*#__PURE__*/_jsx("span", {
       className: "notranslate",
-      dangerouslySetInnerHTML: {
-        __html: '​'
-      }
-    }) : children
+      children: "\u200B"
+    })) : children
   }));
 });
 process.env.NODE_ENV !== "production" ? FormHelperText.propTypes

package/legacy/Grid/Grid.js

@@ -251,10 +251,8 @@ var GridRoot = styled('div', {
 
   }, ownerState.zeroMinWidth && {
     minWidth: 0
-  }, ownerState.wrap === 'nowrap' && {
-    flexWrap: 'nowrap'
-  }, ownerState.wrap === 'reverse' && {
-    flexWrap: 'wrap-reverse'
+  }, ownerState.wrap !== 'wrap' && {
+    flexWrap: ownerState.wrap
   });
 }, generateDirection, generateRowGap, generateColumnGap, generateGrid);
 

package/legacy/Input/Input.js

@@ -190,7 +190,10 @@ process.env.NODE_ENV !== "production" ? Input.propTypes
    * The props used for each slot inside the Input.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    input: PropTypes.object,
+    root: PropTypes.object
+  }),
 
   /**
    * The default value. Use when the component is not controlled.

package/legacy/InputAdornment/InputAdornment.js

@@ -1,6 +1,9 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _extends from "@babel/runtime/helpers/esm/extends";
+
+var _span;
+
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -116,17 +119,11 @@ var InputAdornment = /*#__PURE__*/React.forwardRef(function InputAdornment(inPro
         children: children
       }) : /*#__PURE__*/_jsxs(React.Fragment, {
         children: [position === 'start' ?
-        /*#__PURE__*/
-
         /* notranslate needed while Google Translate will not fix zero-width space issue */
-
-        /* eslint-disable-next-line react/no-danger */
-        _jsx("span", {
+        _span || (_span = /*#__PURE__*/_jsx("span", {
           className: "notranslate",
-          dangerouslySetInnerHTML: {
-            __html: '​'
-          }
-        }) : null, children]
+          children: "\u200B"
+        })) : null, children]
       })
     }))
   });

package/legacy/InputBase/InputBase.js

@@ -561,7 +561,10 @@ process.env.NODE_ENV !== "production" ? InputBase.propTypes
    * The props used for each slot inside the Input.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    input: PropTypes.object,
+    root: PropTypes.object
+  }),
 
   /**
    * The default value. Use when the component is not controlled.

package/legacy/InputLabel/InputLabel.js

@@ -78,6 +78,8 @@ var InputLabelRoot = styled(FormLabel, {
   }, ownerState.size === 'small' && {
     transform: 'translate(12px, 13px) scale(1)'
   }, ownerState.shrink && _extends({
+    userSelect: 'none',
+    pointerEvents: 'auto',
     transform: 'translate(12px, 7px) scale(0.75)',
     maxWidth: 'calc(133% - 24px)'
   }, ownerState.size === 'small' && {
@@ -91,6 +93,8 @@ var InputLabelRoot = styled(FormLabel, {
   }, ownerState.size === 'small' && {
     transform: 'translate(14px, 9px) scale(1)'
   }, ownerState.shrink && {
+    userSelect: 'none',
+    pointerEvents: 'auto',
     maxWidth: 'calc(133% - 24px)',
     transform: 'translate(14px, -9px) scale(0.75)'
   }));

package/legacy/ListItem/ListItem.js

@@ -348,7 +348,9 @@ process.env.NODE_ENV !== "production" ? ListItem.propTypes
    * The props used for each slot inside the Input.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    root: PropTypes.object
+  }),
 
   /**
    * The container component used when a `ListItemSecondaryAction` is the last child.

package/legacy/Modal/Modal.js

@@ -194,7 +194,9 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes
    * The props used for each slot inside the Modal.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    root: PropTypes.object
+  }),
 
   /**
    * An HTML element or function that returns one.

package/legacy/OutlinedInput/NotchedOutline.js

@@ -1,5 +1,8 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
+
+var _span;
+
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import styled from '../styles/styled';
@@ -20,14 +23,12 @@ var NotchedOutlineRoot = styled('fieldset')({
   overflow: 'hidden',
   minWidth: '0%'
 });
-var NotchedOutlineLegend = styled('legend', {
-  skipSx: true
-})(function (_ref) {
+var NotchedOutlineLegend = styled('legend')(function (_ref) {
   var ownerState = _ref.ownerState,
       theme = _ref.theme;
   return _extends({
     float: 'unset'
-  }, ownerState.label === undefined && {
+  }, !ownerState.withLabel && {
     padding: 0,
     lineHeight: '11px',
     // sync with `height` in `legend` styles
@@ -35,7 +36,7 @@ var NotchedOutlineLegend = styled('legend', {
       duration: 150,
       easing: theme.transitions.easing.easeOut
     })
-  }, ownerState.label !== undefined && _extends({
+  }, ownerState.withLabel && _extends({
     display: 'block',
     // Fix conflict with normalize.css and sanitize.css
     width: 'auto',
@@ -77,9 +78,11 @@ export default function NotchedOutline(props) {
       notched = props.notched,
       other = _objectWithoutProperties(props, ["children", "classes", "className", "label", "notched"]);
 
+  var withLabel = label != null && label !== '';
+
   var ownerState = _extends({}, props, {
     notched: notched,
-    label: label
+    withLabel: withLabel
   });
 
   return /*#__PURE__*/_jsx(NotchedOutlineRoot, _extends({
@@ -89,18 +92,13 @@ export default function NotchedOutline(props) {
   }, other, {
     children: /*#__PURE__*/_jsx(NotchedOutlineLegend, {
       ownerState: ownerState,
-      children: label ? /*#__PURE__*/_jsx("span", {
+      children: withLabel ? /*#__PURE__*/_jsx("span", {
         children: label
-      }) :
-      /*#__PURE__*/
-      // notranslate needed while Google Translate will not fix zero-width space issue
-      // eslint-disable-next-line react/no-danger
-      _jsx("span", {
+      }) : // notranslate needed while Google Translate will not fix zero-width space issue
+      _span || (_span = /*#__PURE__*/_jsx("span", {
         className: "notranslate",
-        dangerouslySetInnerHTML: {
-          __html: '​'
-        }
-      })
+        children: "\u200B"
+      }))
     })
   }));
 }

package/legacy/OutlinedInput/OutlinedInput.js

@@ -137,7 +137,7 @@ var OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inProps
     renderSuffix: function renderSuffix(state) {
       return /*#__PURE__*/_jsx(NotchedOutlineRoot, {
         className: classes.notchedOutline,
-        label: label && fcs.required ? _React$Fragment || (_React$Fragment = /*#__PURE__*/_jsxs(React.Fragment, {
+        label: label != null && label !== '' && fcs.required ? _React$Fragment || (_React$Fragment = /*#__PURE__*/_jsxs(React.Fragment, {
           children: [label, "\xA0", '*']
         })) : label,
         notched: typeof notched !== 'undefined' ? notched : Boolean(state.startAdornment || state.filled || state.focused)

package/legacy/Radio/RadioButtonIcon.js

@@ -10,15 +10,11 @@ var RadioButtonIconRoot = styled('span')({
   position: 'relative',
   display: 'flex'
 });
-var RadioButtonIconBackground = styled(RadioButtonUncheckedIcon, {
-  skipSx: true
-})({
+var RadioButtonIconBackground = styled(RadioButtonUncheckedIcon)({
   // Scale applied to prevent dot misalignment in Safari
   transform: 'scale(1)'
 });
-var RadioButtonIconDot = styled(RadioButtonCheckedIcon, {
-  skipSx: true
-})(function (_ref) {
+var RadioButtonIconDot = styled(RadioButtonCheckedIcon)(function (_ref) {
   var theme = _ref.theme,
       ownerState = _ref.ownerState;
   return _extends({

package/legacy/Select/Select.js

@@ -36,6 +36,8 @@ var Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
       _props$classes = props.classes,
       classesProp = _props$classes === void 0 ? {} : _props$classes,
       className = props.className,
+      _props$defaultOpen = props.defaultOpen,
+      defaultOpen = _props$defaultOpen === void 0 ? false : _props$defaultOpen,
       _props$displayEmpty = props.displayEmpty,
       displayEmpty = _props$displayEmpty === void 0 ? false : _props$displayEmpty,
       _props$IconComponent = props.IconComponent,
@@ -57,7 +59,7 @@ var Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
       SelectDisplayProps = props.SelectDisplayProps,
       _props$variant = props.variant,
       variantProps = _props$variant === void 0 ? 'outlined' : _props$variant,
-      other = _objectWithoutProperties(props, ["autoWidth", "children", "classes", "className", "displayEmpty", "IconComponent", "id", "input", "inputProps", "label", "labelId", "MenuProps", "multiple", "native", "onClose", "onOpen", "open", "renderValue", "SelectDisplayProps", "variant"]);
+      other = _objectWithoutProperties(props, ["autoWidth", "children", "classes", "className", "defaultOpen", "displayEmpty", "IconComponent", "id", "input", "inputProps", "label", "labelId", "MenuProps", "multiple", "native", "onClose", "onOpen", "open", "renderValue", "SelectDisplayProps", "variant"]);
 
   var inputComponent = native ? NativeSelectInput : SelectInput;
   var muiFormControl = useFormControl();
@@ -96,6 +98,7 @@ var Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
       id: id
     } : {
       autoWidth: autoWidth,
+      defaultOpen: defaultOpen,
       displayEmpty: displayEmpty,
       labelId: labelId,
       MenuProps: MenuProps,
@@ -150,6 +153,13 @@ process.env.NODE_ENV !== "production" ? Select.propTypes
    */
   className: PropTypes.string,
 
+  /**
+   * If `true`, the component is initially open. Use when the component open state is not controlled (i.e. the `open` prop is not defined).
+   * You can only use it when the `native` prop is `false` (default).
+   * @default false
+   */
+  defaultOpen: PropTypes.bool,
+
   /**
    * The default value. Use when the component is not controlled.
    */

package/legacy/Select/SelectInput.js

@@ -4,6 +4,9 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 import _typeof from "@babel/runtime/helpers/esm/typeof";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
+
+var _span;
+
 import * as React from 'react';
 import { isFragment } from 'react-is';
 import PropTypes from 'prop-types';
@@ -103,6 +106,7 @@ var SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, ref)
       autoWidth = props.autoWidth,
       children = props.children,
       className = props.className,
+      defaultOpen = props.defaultOpen,
       defaultValue = props.defaultValue,
       disabled = props.disabled,
       displayEmpty = props.displayEmpty,
@@ -128,7 +132,7 @@ var SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, ref)
       valueProp = props.value,
       _props$variant = props.variant,
       variant = _props$variant === void 0 ? 'standard' : _props$variant,
-      other = _objectWithoutProperties(props, ["aria-describedby", "aria-label", "autoFocus", "autoWidth", "children", "className", "defaultValue", "disabled", "displayEmpty", "IconComponent", "inputRef", "labelId", "MenuProps", "multiple", "name", "onBlur", "onChange", "onClose", "onFocus", "onOpen", "open", "readOnly", "renderValue", "SelectDisplayProps", "tabIndex", "type", "value", "variant"]);
+      other = _objectWithoutProperties(props, ["aria-describedby", "aria-label", "autoFocus", "autoWidth", "children", "className", "defaultOpen", "defaultValue", "disabled", "displayEmpty", "IconComponent", "inputRef", "labelId", "MenuProps", "multiple", "name", "onBlur", "onChange", "onClose", "onFocus", "onOpen", "open", "readOnly", "renderValue", "SelectDisplayProps", "tabIndex", "type", "value", "variant"]);
 
   var _useControlled = useControlled({
     controlled: valueProp,
@@ -139,6 +143,15 @@ var SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, ref)
       value = _useControlled2[0],
       setValueState = _useControlled2[1];
 
+  var _useControlled3 = useControlled({
+    controlled: openProp,
+    default: defaultOpen,
+    name: 'Select'
+  }),
+      _useControlled4 = _slicedToArray(_useControlled3, 2),
+      openState = _useControlled4[0],
+      setOpenState = _useControlled4[1];
+
   var inputRef = React.useRef(null);
   var displayRef = React.useRef(null);
 
@@ -153,10 +166,6 @@ var SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, ref)
       menuMinWidthState = _React$useState2[0],
       setMenuMinWidthState = _React$useState2[1];
 
-  var _React$useState3 = React.useState(false),
-      openState = _React$useState3[0],
-      setOpenState = _React$useState3[1];
-
   var handleRef = useForkRef(ref, inputRefProp);
   var handleDisplayRef = React.useCallback(function (node) {
     displayRef.current = node;
@@ -173,7 +182,17 @@ var SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, ref)
       node: inputRef.current,
       value: value
     };
-  }, [value]);
+  }, [value]); // Resize menu on `defaultOpen` automatic toggle.
+
+  React.useEffect(function () {
+    if (defaultOpen && openState && displayNode && !isOpenControlled) {
+      setMenuMinWidthState(autoWidth ? null : displayNode.clientWidth);
+      displayRef.current.focus();
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [displayNode, autoWidth]); // `isOpenControlled` is ignored because the component should never switch between controlled and uncontrolled modes.
+  // `defaultOpen` and `openState` are ignored to avoid unnecessary callbacks.
+
   React.useEffect(function () {
     if (autoFocus) {
       displayRef.current.focus();
@@ -313,7 +332,7 @@ var SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, ref)
     }
   };
 
-  var open = displayNode !== null && (isOpenControlled ? openProp : openState);
+  var open = displayNode !== null && openState;
 
   var handleBlur = function handleBlur(event) {
     // if open event.stopImmediatePropagation
@@ -488,16 +507,11 @@ var SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, ref)
       className: clsx(classes.select, className, SelectDisplayProps.className) // The id is required for proper a11y
       ,
       id: buttonId,
-      children: isEmpty(display) ?
-      /*#__PURE__*/
-      // notranslate needed while Google Translate will not fix zero-width space issue
-      // eslint-disable-next-line react/no-danger
-      _jsx("span", {
+      children: isEmpty(display) ? // notranslate needed while Google Translate will not fix zero-width space issue
+      _span || (_span = /*#__PURE__*/_jsx("span", {
         className: "notranslate",
-        dangerouslySetInnerHTML: {
-          __html: '​'
-        }
-      }) : display
+        children: "\u200B"
+      })) : display
     })), /*#__PURE__*/_jsx(SelectNativeInput, _extends({
       value: Array.isArray(value) ? value.join(',') : value,
       name: name,
@@ -580,6 +594,12 @@ process.env.NODE_ENV !== "production" ? SelectInput.propTypes = {
    */
   className: PropTypes.string,
 
+  /**
+   * If `true`, the component is toggled on mount. Use when the component open state is not controlled.
+   * You can only use it when the `native` prop is `false` (default).
+   */
+  defaultOpen: PropTypes.bool,
+
   /**
    * The default value. Use when the component is not controlled.
    */