@mui/material 5.2.7 → 5.4.0

package/node/Autocomplete/Autocomplete.js

@@ -63,7 +63,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 var _ClearIcon, _ArrowDropDownIcon;
 
-const _excluded = ["autoComplete", "autoHighlight", "autoSelect", "blurOnSelect", "ChipProps", "className", "clearIcon", "clearOnBlur", "clearOnEscape", "clearText", "closeText", "componentsProps", "defaultValue", "disableClearable", "disableCloseOnSelect", "disabled", "disabledItemsFocusable", "disableListWrap", "disablePortal", "filterOptions", "filterSelectedOptions", "forcePopupIcon", "freeSolo", "fullWidth", "getLimitTagsText", "getOptionDisabled", "getOptionLabel", "isOptionEqualToValue", "groupBy", "handleHomeEndKeys", "id", "includeInputInList", "inputValue", "limitTags", "ListboxComponent", "ListboxProps", "loading", "loadingText", "multiple", "noOptionsText", "onChange", "onClose", "onHighlightChange", "onInputChange", "onOpen", "open", "openOnFocus", "openText", "options", "PaperComponent", "PopperComponent", "popupIcon", "renderGroup", "renderInput", "renderOption", "renderTags", "selectOnFocus", "size", "value"];
+const _excluded = ["autoComplete", "autoHighlight", "autoSelect", "blurOnSelect", "ChipProps", "className", "clearIcon", "clearOnBlur", "clearOnEscape", "clearText", "closeText", "componentsProps", "defaultValue", "disableClearable", "disableCloseOnSelect", "disabled", "disabledItemsFocusable", "disableListWrap", "disablePortal", "filterOptions", "filterSelectedOptions", "forcePopupIcon", "freeSolo", "fullWidth", "getLimitTagsText", "getOptionDisabled", "getOptionLabel", "isOptionEqualToValue", "groupBy", "handleHomeEndKeys", "id", "includeInputInList", "inputValue", "limitTags", "ListboxComponent", "ListboxProps", "loading", "loadingText", "multiple", "noOptionsText", "onChange", "onClose", "onHighlightChange", "onInputChange", "onOpen", "open", "openOnFocus", "openText", "options", "PaperComponent", "PopperComponent", "popupIcon", "readOnly", "renderGroup", "renderInput", "renderOption", "renderTags", "selectOnFocus", "size", "value"];
 
 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); }
 
@@ -389,7 +389,7 @@ const AutocompleteGroupUl = (0, _styled.default)('ul', {
   }
 });
 const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps, ref) {
-  var _componentsProps$clea;
+  var _componentsProps$clea, _componentsProps$pape;
 
   const props = (0, _useThemeProps.default)({
     props: inProps,
@@ -444,6 +444,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     PaperComponent = _Paper.default,
     PopperComponent = _Popper.default,
     popupIcon = _ArrowDropDownIcon || (_ArrowDropDownIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_ArrowDropDown.default, {})),
+    readOnly = false,
     renderGroup: renderGroupProp,
     renderInput,
     renderOption: renderOptionProp,
@@ -476,7 +477,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
   } = (0, _base.useAutocomplete)((0, _extends2.default)({}, props, {
     componentName: 'Autocomplete'
   }));
-  const hasClearIcon = !disableClearable && !disabled && dirty;
+  const hasClearIcon = !disableClearable && !disabled && dirty && !readOnly;
   const hasPopupIcon = (!freeSolo || forcePopupIcon === true) && forcePopupIcon !== false;
   const ownerState = (0, _extends2.default)({}, props, {
     disablePortal,
@@ -593,7 +594,8 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
         },
         inputProps: (0, _extends2.default)({
           className: (0, _clsx.default)(classes.input),
-          disabled
+          disabled,
+          readOnly
         }, getInputProps())
       })
     })), popupOpen && anchorEl ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompletePopper, {
@@ -607,10 +609,11 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
       role: "presentation",
       anchorEl: anchorEl,
       open: true,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(AutocompletePaper, {
-        as: PaperComponent,
-        className: classes.paper,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(AutocompletePaper, (0, _extends2.default)({
         ownerState: ownerState,
+        as: PaperComponent
+      }, componentsProps.paper, {
+        className: (0, _clsx.default)(classes.paper, (_componentsProps$pape = componentsProps.paper) == null ? void 0 : _componentsProps$pape.className),
         children: [loading && groupedOptions.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompleteLoading, {
           className: classes.loading,
           ownerState: ownerState,
@@ -641,7 +644,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
             return renderListOption(option, index);
           })
         })) : null]
-      })
+      }))
     }) : null]
   });
 });
@@ -711,7 +714,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * If `true`, the input's text is cleared on blur if no value is selected.
    *
    * Set to `true` if you want to help the user enter a new value.
-   * Set to `false` if you want to help the user resume his search.
+   * Set to `false` if you want to help the user resume their search.
    * @default !props.freeSolo
    */
   clearOnBlur: _propTypes.default.bool,
@@ -742,7 +745,10 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * The props used for each slot inside.
    * @default {}
    */
-  componentsProps: _propTypes.default.object,
+  componentsProps: _propTypes.default.shape({
+    clearIndicator: _propTypes.default.object,
+    paper: _propTypes.default.object
+  }),
 
   /**
    * The default value. Use when the component is not controlled.
@@ -1030,6 +1036,12 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    */
   popupIcon: _propTypes.default.node,
 
+  /**
+   * If `true`, the component becomes readonly. It is also supported for multiple tags where the tag cannot be deleted.
+   * @default false
+   */
+  readOnly: _propTypes.default.bool,
+
   /**
    * Render the group.
    *

package/node/Backdrop/Backdrop.js

@@ -148,7 +148,9 @@ process.env.NODE_ENV !== "production" ? Backdrop.propTypes
    * The props used for each slot inside the Backdrop.
    * @default {}
    */
-  componentsProps: _propTypes.default.object,
+  componentsProps: _propTypes.default.shape({
+    root: _propTypes.default.object
+  }),
 
   /**
    * If `true`, the backdrop is invisible.

package/node/Badge/Badge.js

@@ -27,6 +27,8 @@ var _styled = _interopRequireDefault(require("../styles/styled"));
 
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 
+var _shouldSpreadAdditionalProps = _interopRequireDefault(require("../utils/shouldSpreadAdditionalProps"));
+
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 
 var _jsxRuntime = require("react/jsx-runtime");
@@ -179,11 +181,6 @@ const BadgeBadge = (0, _styled.default)('span', {
     duration: theme.transitions.duration.leavingScreen
   })
 }));
-
-const shouldSpreadAdditionalProps = Slot => {
-  return !Slot || !(0, _base.isHostComponent)(Slot);
-};
-
 const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
   var _componentsProps$root, _componentsProps$badg;
 
@@ -242,14 +239,14 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
       Badge: BadgeBadge
     }, components),
     componentsProps: {
-      root: (0, _extends2.default)({}, componentsProps.root, shouldSpreadAdditionalProps(components.Root) && {
+      root: (0, _extends2.default)({}, componentsProps.root, (0, _shouldSpreadAdditionalProps.default)(components.Root) && {
         as: component,
         ownerState: (0, _extends2.default)({}, (_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.ownerState, {
           color,
           overlap
         })
       }),
-      badge: (0, _extends2.default)({}, componentsProps.badge, shouldSpreadAdditionalProps(components.Badge) && {
+      badge: (0, _extends2.default)({}, componentsProps.badge, (0, _shouldSpreadAdditionalProps.default)(components.Badge) && {
         ownerState: (0, _extends2.default)({}, (_componentsProps$badg = componentsProps.badge) == null ? void 0 : _componentsProps$badg.ownerState, {
           color,
           overlap
@@ -323,7 +320,10 @@ process.env.NODE_ENV !== "production" ? Badge.propTypes
    * The props used for each slot inside the Badge.
    * @default {}
    */
-  componentsProps: _propTypes.default.object,
+  componentsProps: _propTypes.default.shape({
+    badge: _propTypes.default.object,
+    root: _propTypes.default.object
+  }),
 
   /**
    * If `true`, the badge is invisible.

package/node/Breadcrumbs/BreadcrumbCollapsed.js

@@ -27,9 +27,7 @@ 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; }
 
-const BreadcrumbCollapsedButton = (0, _styled.default)(_ButtonBase.default, {
-  skipSx: true
-})(({
+const BreadcrumbCollapsedButton = (0, _styled.default)(_ButtonBase.default)(({
   theme
 }) => (0, _extends2.default)({
   display: 'flex',

package/node/ButtonBase/TouchRipple.js

@@ -75,8 +75,7 @@ const pulsateKeyframe = (0, _system.keyframes)`
 `;
 const TouchRippleRoot = (0, _styled.default)('span', {
   name: 'MuiTouchRipple',
-  slot: 'Root',
-  skipSx: true
+  slot: 'Root'
 })({
   overflow: 'hidden',
   pointerEvents: 'none',

package/node/FilledInput/FilledInput.js

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

package/node/FormControlLabel/FormControlLabel.js

@@ -33,6 +33,8 @@ var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 
 var _formControlLabelClasses = _interopRequireWildcard(require("./formControlLabelClasses"));
 
+var _formControlState = _interopRequireDefault(require("../FormControl/formControlState"));
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 const _excluded = ["checked", "className", "componentsProps", "control", "disabled", "disableTypography", "inputRef", "label", "labelPlacement", "name", "onChange", "value"];
@@ -45,10 +47,11 @@ const useUtilityClasses = ownerState => {
   const {
     classes,
     disabled,
-    labelPlacement
+    labelPlacement,
+    error
   } = ownerState;
   const slots = {
-    root: ['root', disabled && 'disabled', `labelPlacement${(0, _capitalize.default)(labelPlacement)}`],
+    root: ['root', disabled && 'disabled', `labelPlacement${(0, _capitalize.default)(labelPlacement)}`, error && 'error'],
     label: ['label', disabled && 'disabled']
   };
   return (0, _base.unstable_composeClasses)(slots, _formControlLabelClasses.getFormControlLabelUtilityClasses, classes);
@@ -139,10 +142,16 @@ const FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel
       controlProps[key] = props[key];
     }
   });
+  const fcs = (0, _formControlState.default)({
+    props,
+    muiFormControl,
+    states: ['error']
+  });
   const ownerState = (0, _extends2.default)({}, props, {
     disabled,
     label,
-    labelPlacement
+    labelPlacement,
+    error: fcs.error
   });
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(FormControlLabelRoot, (0, _extends2.default)({
@@ -185,7 +194,9 @@ process.env.NODE_ENV !== "production" ? FormControlLabel.propTypes
    * The props used for each slot inside.
    * @default {}
    */
-  componentsProps: _propTypes.default.object,
+  componentsProps: _propTypes.default.shape({
+    typography: _propTypes.default.object
+  }),
 
   /**
    * A control element. For instance, it can be a `Radio`, a `Switch` or a `Checkbox`.

package/node/FormControlLabel/formControlLabelClasses.js

@@ -12,6 +12,6 @@ function getFormControlLabelUtilityClasses(slot) {
   return (0, _base.generateUtilityClass)('MuiFormControlLabel', slot);
 }
 
-const formControlLabelClasses = (0, _base.generateUtilityClasses)('MuiFormControlLabel', ['root', 'labelPlacementStart', 'labelPlacementTop', 'labelPlacementBottom', 'disabled', 'label']);
+const formControlLabelClasses = (0, _base.generateUtilityClasses)('MuiFormControlLabel', ['root', 'labelPlacementStart', 'labelPlacementTop', 'labelPlacementBottom', 'disabled', 'label', 'error']);
 var _default = formControlLabelClasses;
 exports.default = _default;

package/node/FormGroup/FormGroup.js

@@ -25,6 +25,10 @@ var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 
 var _formGroupClasses = require("./formGroupClasses");
 
+var _useFormControl = _interopRequireDefault(require("../FormControl/useFormControl"));
+
+var _formControlState = _interopRequireDefault(require("../FormControl/formControlState"));
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 const _excluded = ["className", "row"];
@@ -36,10 +40,11 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 const useUtilityClasses = ownerState => {
   const {
     classes,
-    row
+    row,
+    error
   } = ownerState;
   const slots = {
-    root: ['root', row && 'row']
+    root: ['root', row && 'row', error && 'error']
   };
   return (0, _base.unstable_composeClasses)(slots, _formGroupClasses.getFormGroupUtilityClass, classes);
 };
@@ -78,8 +83,15 @@ const FormGroup = /*#__PURE__*/React.forwardRef(function FormGroup(inProps, ref)
     row = false
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const muiFormControl = (0, _useFormControl.default)();
+  const fcs = (0, _formControlState.default)({
+    props,
+    muiFormControl,
+    states: ['error']
+  });
   const ownerState = (0, _extends2.default)({}, props, {
-    row
+    row,
+    error: fcs.error
   });
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(FormGroupRoot, (0, _extends2.default)({

package/node/FormGroup/formGroupClasses.js

@@ -12,6 +12,6 @@ function getFormGroupUtilityClass(slot) {
   return (0, _base.generateUtilityClass)('MuiFormGroup', slot);
 }
 
-const formGroupClasses = (0, _base.generateUtilityClasses)('MuiFormGroup', ['root', 'row']);
+const formGroupClasses = (0, _base.generateUtilityClasses)('MuiFormGroup', ['root', 'row', 'error']);
 var _default = formGroupClasses;
 exports.default = _default;

package/node/FormHelperText/FormHelperText.js

@@ -33,6 +33,8 @@ var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _span;
+
 const _excluded = ["children", "className", "component", "disabled", "error", "filled", "focused", "margin", "required", "variant"];
 
 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); }
@@ -123,16 +125,11 @@ const FormHelperText = /*#__PURE__*/React.forwardRef(function FormHelperText(inP
     className: (0, _clsx.default)(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
-    (0, _jsxRuntime.jsx)("span", {
+    children: children === ' ' ? // notranslate needed while Google Translate will not fix zero-width space issue
+    _span || (_span = /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       className: "notranslate",
-      dangerouslySetInnerHTML: {
-        __html: '​'
-      }
-    }) : children
+      children: "\u200B"
+    })) : children
   }));
 });
 process.env.NODE_ENV !== "production" ? FormHelperText.propTypes

package/node/Grid/Grid.js

@@ -286,10 +286,8 @@ const GridRoot = (0, _styled.default)('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);
 
 const useUtilityClasses = ownerState => {

package/node/Input/Input.js

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

package/node/InputAdornment/InputAdornment.js

@@ -35,6 +35,8 @@ var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _span;
+
 const _excluded = ["children", "className", "component", "disablePointerEvents", "disableTypography", "position", "variant"];
 
 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); }
@@ -144,17 +146,11 @@ const InputAdornment = /*#__PURE__*/React.forwardRef(function InputAdornment(inP
         children: children
       }) : /*#__PURE__*/(0, _jsxRuntime.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 */
-        (0, _jsxRuntime.jsx)("span", {
+        _span || (_span = /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           className: "notranslate",
-          dangerouslySetInnerHTML: {
-            __html: '​'
-          }
-        }) : null, children]
+          children: "\u200B"
+        })) : null, children]
       })
     }))
   });

package/node/InputBase/InputBase.js

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

package/node/InputLabel/InputLabel.js

@@ -107,6 +107,8 @@ const InputLabelRoot = (0, _styled.default)(_FormLabel.default, {
 }, ownerState.size === 'small' && {
   transform: 'translate(12px, 13px) scale(1)'
 }, ownerState.shrink && (0, _extends2.default)({
+  userSelect: 'none',
+  pointerEvents: 'auto',
   transform: 'translate(12px, 7px) scale(0.75)',
   maxWidth: 'calc(133% - 24px)'
 }, ownerState.size === 'small' && {
@@ -120,6 +122,8 @@ const InputLabelRoot = (0, _styled.default)(_FormLabel.default, {
 }, 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/node/ListItem/ListItem.js

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

package/node/Modal/Modal.js

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

package/node/OutlinedInput/NotchedOutline.js

@@ -19,6 +19,8 @@ var _styled = _interopRequireDefault(require("../styles/styled"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _span;
+
 const _excluded = ["children", "classes", "className", "label", "notched"];
 
 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); }
@@ -41,14 +43,12 @@ const NotchedOutlineRoot = (0, _styled.default)('fieldset')({
   overflow: 'hidden',
   minWidth: '0%'
 });
-const NotchedOutlineLegend = (0, _styled.default)('legend', {
-  skipSx: true
-})(({
+const NotchedOutlineLegend = (0, _styled.default)('legend')(({
   ownerState,
   theme
 }) => (0, _extends2.default)({
   float: 'unset'
-}, ownerState.label === undefined && {
+}, !ownerState.withLabel && {
   padding: 0,
   lineHeight: '11px',
   // sync with `height` in `legend` styles
@@ -56,7 +56,7 @@ const NotchedOutlineLegend = (0, _styled.default)('legend', {
     duration: 150,
     easing: theme.transitions.easing.easeOut
   })
-}, ownerState.label !== undefined && (0, _extends2.default)({
+}, ownerState.withLabel && (0, _extends2.default)({
   display: 'block',
   // Fix conflict with normalize.css and sanitize.css
   width: 'auto',
@@ -96,9 +96,10 @@ function NotchedOutline(props) {
     notched
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const withLabel = label != null && label !== '';
   const ownerState = (0, _extends2.default)({}, props, {
     notched,
-    label
+    withLabel
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(NotchedOutlineRoot, (0, _extends2.default)({
     "aria-hidden": true,
@@ -107,18 +108,13 @@ function NotchedOutline(props) {
   }, other, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(NotchedOutlineLegend, {
       ownerState: ownerState,
-      children: label ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      children: withLabel ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         children: label
-      }) :
-      /*#__PURE__*/
-      // notranslate needed while Google Translate will not fix zero-width space issue
-      // eslint-disable-next-line react/no-danger
-      (0, _jsxRuntime.jsx)("span", {
+      }) : // notranslate needed while Google Translate will not fix zero-width space issue
+      _span || (_span = /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         className: "notranslate",
-        dangerouslySetInnerHTML: {
-          __html: '​'
-        }
-      })
+        children: "\u200B"
+      }))
     })
   }));
 }

package/node/OutlinedInput/OutlinedInput.js

@@ -160,7 +160,7 @@ const OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inPro
     }, components),
     renderSuffix: state => /*#__PURE__*/(0, _jsxRuntime.jsx)(NotchedOutlineRoot, {
       className: classes.notchedOutline,
-      label: label && fcs.required ? _React$Fragment || (_React$Fragment = /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+      label: label != null && label !== '' && fcs.required ? _React$Fragment || (_React$Fragment = /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
         children: [label, "\xA0", '*']
       })) : label,
       notched: typeof notched !== 'undefined' ? notched : Boolean(state.startAdornment || state.filled || state.focused)

package/node/Radio/RadioButtonIcon.js

@@ -29,15 +29,11 @@ const RadioButtonIconRoot = (0, _styled.default)('span')({
   position: 'relative',
   display: 'flex'
 });
-const RadioButtonIconBackground = (0, _styled.default)(_RadioButtonUnchecked.default, {
-  skipSx: true
-})({
+const RadioButtonIconBackground = (0, _styled.default)(_RadioButtonUnchecked.default)({
   // Scale applied to prevent dot misalignment in Safari
   transform: 'scale(1)'
 });
-const RadioButtonIconDot = (0, _styled.default)(_RadioButtonChecked.default, {
-  skipSx: true
-})(({
+const RadioButtonIconDot = (0, _styled.default)(_RadioButtonChecked.default)(({
   theme,
   ownerState
 }) => (0, _extends2.default)({

package/node/Select/Select.js

@@ -43,7 +43,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 var _Input, _FilledInput;
 
-const _excluded = ["autoWidth", "children", "classes", "className", "displayEmpty", "IconComponent", "id", "input", "inputProps", "label", "labelId", "MenuProps", "multiple", "native", "onClose", "onOpen", "open", "renderValue", "SelectDisplayProps", "variant"];
+const _excluded = ["autoWidth", "children", "classes", "className", "defaultOpen", "displayEmpty", "IconComponent", "id", "input", "inputProps", "label", "labelId", "MenuProps", "multiple", "native", "onClose", "onOpen", "open", "renderValue", "SelectDisplayProps", "variant"];
 
 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); }
 
@@ -66,6 +66,7 @@ const Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
     children,
     classes: classesProp = {},
     className,
+    defaultOpen = false,
     displayEmpty = false,
     IconComponent = _ArrowDropDown.default,
     id,
@@ -119,6 +120,7 @@ const Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
       id
     } : {
       autoWidth,
+      defaultOpen,
       displayEmpty,
       labelId,
       MenuProps,
@@ -173,6 +175,13 @@ process.env.NODE_ENV !== "production" ? Select.propTypes
    */
   className: _propTypes.default.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.default.bool,
+
   /**
    * The default value. Use when the component is not controlled.
    */