@mui/material 5.2.3 → 5.2.4

package/Tooltip/tooltipClasses.d.ts

@@ -1,30 +1,30 @@
-export interface TooltipClasses {
-    /** Styles applied to the Popper component. */
-    popper: string;
-    /** Styles applied to the Popper component unless `disableInteractive={true}`. */
-    popperInteractive: string;
-    /** Styles applied to the Popper component if `arrow={true}`. */
-    popperArrow: string;
-    /** Styles applied to the Popper component unless the tooltip is open. */
-    popperClose: string;
-    /** Styles applied to the tooltip (label wrapper) element. */
-    tooltip: string;
-    /** Styles applied to the tooltip (label wrapper) element if `arrow={true}`. */
-    tooltipArrow: string;
-    /** Styles applied to the arrow element. */
-    arrow: string;
-    /** Styles applied to the tooltip (label wrapper) element if the tooltip is opened by touch. */
-    touch: string;
-    /** Styles applied to the tooltip (label wrapper) element if `placement` contains "left". */
-    tooltipPlacementLeft: string;
-    /** Styles applied to the tooltip (label wrapper) element if `placement` contains "right". */
-    tooltipPlacementRight: string;
-    /** Styles applied to the tooltip (label wrapper) element if `placement` contains "top". */
-    tooltipPlacementTop: string;
-    /** Styles applied to the tooltip (label wrapper) element if `placement` contains "bottom". */
-    tooltipPlacementBottom: string;
-}
-export declare type TooltipClassKey = keyof TooltipClasses;
-export declare function getTooltipUtilityClass(slot: string): string;
-declare const tooltipClasses: TooltipClasses;
-export default tooltipClasses;
+export interface TooltipClasses {
+    /** Styles applied to the Popper component. */
+    popper: string;
+    /** Styles applied to the Popper component unless `disableInteractive={true}`. */
+    popperInteractive: string;
+    /** Styles applied to the Popper component if `arrow={true}`. */
+    popperArrow: string;
+    /** Styles applied to the Popper component unless the tooltip is open. */
+    popperClose: string;
+    /** Styles applied to the tooltip (label wrapper) element. */
+    tooltip: string;
+    /** Styles applied to the tooltip (label wrapper) element if `arrow={true}`. */
+    tooltipArrow: string;
+    /** Styles applied to the arrow element. */
+    arrow: string;
+    /** Styles applied to the tooltip (label wrapper) element if the tooltip is opened by touch. */
+    touch: string;
+    /** Styles applied to the tooltip (label wrapper) element if `placement` contains "left". */
+    tooltipPlacementLeft: string;
+    /** Styles applied to the tooltip (label wrapper) element if `placement` contains "right". */
+    tooltipPlacementRight: string;
+    /** Styles applied to the tooltip (label wrapper) element if `placement` contains "top". */
+    tooltipPlacementTop: string;
+    /** Styles applied to the tooltip (label wrapper) element if `placement` contains "bottom". */
+    tooltipPlacementBottom: string;
+}
+export declare type TooltipClassKey = keyof TooltipClasses;
+export declare function getTooltipUtilityClass(slot: string): string;
+declare const tooltipClasses: TooltipClasses;
+export default tooltipClasses;

package/Typography/typographyClasses.d.ts

@@ -1,50 +1,50 @@
-export interface TypographyClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if `variant="body2"`. */
-    body2: string;
-    /** Styles applied to the root element if `variant="body1"`. */
-    body1: string;
-    /** Styles applied to the root element if `variant="caption"`. */
-    caption: string;
-    /** Styles applied to the root element if `variant="button"`. */
-    button: string;
-    /** Styles applied to the root element if `variant="h1"`. */
-    h1: string;
-    /** Styles applied to the root element if `variant="h2"`. */
-    h2: string;
-    /** Styles applied to the root element if `variant="h3"`. */
-    h3: string;
-    /** Styles applied to the root element if `variant="h4"`. */
-    h4: string;
-    /** Styles applied to the root element if `variant="h5"`. */
-    h5: string;
-    /** Styles applied to the root element if `variant="h6"`. */
-    h6: string;
-    /** Styles applied to the root element if `variant="subtitle1"`. */
-    subtitle1: string;
-    /** Styles applied to the root element if `variant="subtitle2"`. */
-    subtitle2: string;
-    /** Styles applied to the root element if `variant="overline"`. */
-    overline: string;
-    /** Styles applied to the root element if `variant="inherit"`. */
-    inherit: string;
-    /** Styles applied to the root element if `align="left"`. */
-    alignLeft: string;
-    /** Styles applied to the root element if `align="center"`. */
-    alignCenter: string;
-    /** Styles applied to the root element if `align="right"`. */
-    alignRight: string;
-    /** Styles applied to the root element if `align="justify"`. */
-    alignJustify: string;
-    /** Styles applied to the root element if `nowrap={true}`. */
-    noWrap: string;
-    /** Styles applied to the root element if `gutterBottom={true}`. */
-    gutterBottom: string;
-    /** Styles applied to the root element if `paragraph={true}`. */
-    paragraph: string;
-}
-export declare type TypographyClassKey = keyof TypographyClasses;
-export declare function getTypographyUtilityClass(slot: string): string;
-declare const typographyClasses: TypographyClasses;
-export default typographyClasses;
+export interface TypographyClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if `variant="body2"`. */
+    body2: string;
+    /** Styles applied to the root element if `variant="body1"`. */
+    body1: string;
+    /** Styles applied to the root element if `variant="caption"`. */
+    caption: string;
+    /** Styles applied to the root element if `variant="button"`. */
+    button: string;
+    /** Styles applied to the root element if `variant="h1"`. */
+    h1: string;
+    /** Styles applied to the root element if `variant="h2"`. */
+    h2: string;
+    /** Styles applied to the root element if `variant="h3"`. */
+    h3: string;
+    /** Styles applied to the root element if `variant="h4"`. */
+    h4: string;
+    /** Styles applied to the root element if `variant="h5"`. */
+    h5: string;
+    /** Styles applied to the root element if `variant="h6"`. */
+    h6: string;
+    /** Styles applied to the root element if `variant="subtitle1"`. */
+    subtitle1: string;
+    /** Styles applied to the root element if `variant="subtitle2"`. */
+    subtitle2: string;
+    /** Styles applied to the root element if `variant="overline"`. */
+    overline: string;
+    /** Styles applied to the root element if `variant="inherit"`. */
+    inherit: string;
+    /** Styles applied to the root element if `align="left"`. */
+    alignLeft: string;
+    /** Styles applied to the root element if `align="center"`. */
+    alignCenter: string;
+    /** Styles applied to the root element if `align="right"`. */
+    alignRight: string;
+    /** Styles applied to the root element if `align="justify"`. */
+    alignJustify: string;
+    /** Styles applied to the root element if `nowrap={true}`. */
+    noWrap: string;
+    /** Styles applied to the root element if `gutterBottom={true}`. */
+    gutterBottom: string;
+    /** Styles applied to the root element if `paragraph={true}`. */
+    paragraph: string;
+}
+export declare type TypographyClassKey = keyof TypographyClasses;
+export declare function getTypographyUtilityClass(slot: string): string;
+declare const typographyClasses: TypographyClasses;
+export default typographyClasses;

package/darkScrollbar/index.d.ts

@@ -1,28 +1,28 @@
-export default function darkScrollbar(options?: {
-    track: string;
-    thumb: string;
-    active: string;
-}): {
-    scrollbarColor: string;
-    '&::-webkit-scrollbar, & *::-webkit-scrollbar': {
-        backgroundColor: string;
-    };
-    '&::-webkit-scrollbar-thumb, & *::-webkit-scrollbar-thumb': {
-        borderRadius: number;
-        backgroundColor: string;
-        minHeight: number;
-        border: string;
-    };
-    '&::-webkit-scrollbar-thumb:focus, & *::-webkit-scrollbar-thumb:focus': {
-        backgroundColor: string;
-    };
-    '&::-webkit-scrollbar-thumb:active, & *::-webkit-scrollbar-thumb:active': {
-        backgroundColor: string;
-    };
-    '&::-webkit-scrollbar-thumb:hover, & *::-webkit-scrollbar-thumb:hover': {
-        backgroundColor: string;
-    };
-    '&::-webkit-scrollbar-corner, & *::-webkit-scrollbar-corner': {
-        backgroundColor: string;
-    };
-};
+export default function darkScrollbar(options?: {
+    track: string;
+    thumb: string;
+    active: string;
+}): {
+    scrollbarColor: string;
+    '&::-webkit-scrollbar, & *::-webkit-scrollbar': {
+        backgroundColor: string;
+    };
+    '&::-webkit-scrollbar-thumb, & *::-webkit-scrollbar-thumb': {
+        borderRadius: number;
+        backgroundColor: string;
+        minHeight: number;
+        border: string;
+    };
+    '&::-webkit-scrollbar-thumb:focus, & *::-webkit-scrollbar-thumb:focus': {
+        backgroundColor: string;
+    };
+    '&::-webkit-scrollbar-thumb:active, & *::-webkit-scrollbar-thumb:active': {
+        backgroundColor: string;
+    };
+    '&::-webkit-scrollbar-thumb:hover, & *::-webkit-scrollbar-thumb:hover': {
+        backgroundColor: string;
+    };
+    '&::-webkit-scrollbar-corner, & *::-webkit-scrollbar-corner': {
+        backgroundColor: string;
+    };
+};

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.2.3
+/** @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/internal/switchBaseClasses.d.ts

@@ -1,12 +1,12 @@
-export interface SwitchBaseClasses {
-    root: string;
-    checked: string;
-    disabled: string;
-    input: string;
-    edgeStart: string;
-    edgeEnd: string;
-}
-export declare type SwitchBaseClassKey = keyof SwitchBaseClasses;
-export declare function getSwitchBaseUtilityClass(slot: string): string;
-declare const switchBaseClasses: SwitchBaseClasses;
-export default switchBaseClasses;
+export interface SwitchBaseClasses {
+    root: string;
+    checked: string;
+    disabled: string;
+    input: string;
+    edgeStart: string;
+    edgeEnd: string;
+}
+export declare type SwitchBaseClassKey = keyof SwitchBaseClasses;
+export declare function getSwitchBaseUtilityClass(slot: string): string;
+declare const switchBaseClasses: SwitchBaseClasses;
+export default switchBaseClasses;

package/legacy/Badge/Badge.js

@@ -141,6 +141,11 @@ var BadgeBadge = styled('span', {
     })
   });
 });
+
+var shouldSpreadAdditionalProps = function shouldSpreadAdditionalProps(Slot) {
+  return !Slot || !isHostComponent(Slot);
+};
+
 var Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
   var _componentsProps$root, _componentsProps$badg;
 
@@ -149,7 +154,9 @@ var Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
     name: 'MuiBadge'
   });
 
-  var _props$components = props.components,
+  var _props$component = props.component,
+      component = _props$component === void 0 ? 'span' : _props$component,
+      _props$components = props.components,
       components = _props$components === void 0 ? {} : _props$components,
       _props$componentsProp = props.componentsProps,
       componentsProps = _props$componentsProp === void 0 ? {} : _props$componentsProp,
@@ -161,7 +168,7 @@ var Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
       showZero = _props$showZero === void 0 ? false : _props$showZero,
       _props$variant = props.variant,
       variantProp = _props$variant === void 0 ? 'standard' : _props$variant,
-      other = _objectWithoutProperties(props, ["components", "componentsProps", "color", "invisible", "badgeContent", "showZero", "variant"]);
+      other = _objectWithoutProperties(props, ["component", "components", "componentsProps", "color", "invisible", "badgeContent", "showZero", "variant"]);
 
   var prevProps = usePreviousProps({
     color: colorProp
@@ -193,12 +200,13 @@ var Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
       Badge: BadgeBadge
     }, components),
     componentsProps: {
-      root: _extends({}, componentsProps.root, (!components.Root || !isHostComponent(components.Root)) && {
+      root: _extends({}, componentsProps.root, shouldSpreadAdditionalProps(components.Root) && {
+        as: component,
         ownerState: _extends({}, (_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.ownerState, {
           color: color
         })
       }),
-      badge: _extends({}, componentsProps.badge, (!components.Thumb || !isHostComponent(components.Thumb)) && {
+      badge: _extends({}, componentsProps.badge, shouldSpreadAdditionalProps(components.Badge) && {
         ownerState: _extends({}, (_componentsProps$badg = componentsProps.badge) == null ? void 0 : _componentsProps$badg.ownerState, {
           color: color
         })
@@ -251,6 +259,12 @@ process.env.NODE_ENV !== "production" ? Badge.propTypes
   /* @typescript-to-proptypes-ignore */
   .oneOfType([PropTypes.oneOf(['default', 'primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
 
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: PropTypes.elementType,
+
   /**
    * The components used for each slot inside the Badge.
    * Either a string to use a HTML element or a component.

package/legacy/Grid/Grid.js

@@ -30,72 +30,86 @@ function getOffset(val) {
   return "".concat(parse).concat(String(val).replace(String(parse), '') || 'px');
 }
 
-function generateGrid(globalStyles, theme, breakpoint, ownerState) {
-  var size = ownerState[breakpoint];
-
-  if (!size) {
-    return;
-  }
-
-  var styles = {};
-
-  if (size === true) {
-    // For the auto layouting
-    styles = {
-      flexBasis: 0,
-      flexGrow: 1,
-      maxWidth: '100%'
-    };
-  } else if (size === 'auto') {
-    styles = {
-      flexBasis: 'auto',
-      flexGrow: 0,
-      flexShrink: 0,
-      maxWidth: 'none',
-      width: 'auto'
-    };
-  } else {
-    var columnsBreakpointValues = resolveBreakpointValues({
-      values: ownerState.columns,
-      breakpoints: theme.breakpoints.values
-    });
-    var columnValue = _typeof(columnsBreakpointValues) === 'object' ? columnsBreakpointValues[breakpoint] : columnsBreakpointValues; // Keep 7 significant numbers.
-
-    var width = "".concat(Math.round(size / columnValue * 10e7) / 10e5, "%");
-    var more = {};
-
-    if (ownerState.container && ownerState.item && ownerState.columnSpacing !== 0) {
-      var themeSpacing = theme.spacing(ownerState.columnSpacing);
-
-      if (themeSpacing !== '0px') {
-        var fullWidth = "calc(".concat(width, " + ").concat(getOffset(themeSpacing), ")");
-        more = {
-          flexBasis: fullWidth,
-          maxWidth: fullWidth
-        };
-      }
-    } // Close to the bootstrap implementation:
-    // https://github.com/twbs/bootstrap/blob/8fccaa2439e97ec72a4b7dc42ccc1f649790adb0/scss/mixins/_grid.scss#L41
+export function generateGrid(_ref) {
+  var theme = _ref.theme,
+      ownerState = _ref.ownerState;
+  var size;
+  return theme.breakpoints.keys.reduce(function (globalStyles, breakpoint) {
+    // Use side effect over immutability for better performance.
+    var styles = {};
 
+    if (ownerState[breakpoint]) {
+      size = ownerState[breakpoint];
+    }
 
-    styles = _extends({
-      flexBasis: width,
-      flexGrow: 0,
-      maxWidth: width
-    }, more);
-  } // No need for a media query for the first size.
+    if (!size) {
+      return globalStyles;
+    }
 
+    if (size === true) {
+      // For the auto layouting
+      styles = {
+        flexBasis: 0,
+        flexGrow: 1,
+        maxWidth: '100%'
+      };
+    } else if (size === 'auto') {
+      styles = {
+        flexBasis: 'auto',
+        flexGrow: 0,
+        flexShrink: 0,
+        maxWidth: 'none',
+        width: 'auto'
+      };
+    } else {
+      var columnsBreakpointValues = resolveBreakpointValues({
+        values: ownerState.columns,
+        breakpoints: theme.breakpoints.values
+      });
+      var columnValue = _typeof(columnsBreakpointValues) === 'object' ? columnsBreakpointValues[breakpoint] : columnsBreakpointValues;
+
+      if (columnValue === undefined || columnValue === null) {
+        return globalStyles;
+      } // Keep 7 significant numbers.
+
+
+      var width = "".concat(Math.round(size / columnValue * 10e7) / 10e5, "%");
+      var more = {};
+
+      if (ownerState.container && ownerState.item && ownerState.columnSpacing !== 0) {
+        var themeSpacing = theme.spacing(ownerState.columnSpacing);
+
+        if (themeSpacing !== '0px') {
+          var fullWidth = "calc(".concat(width, " + ").concat(getOffset(themeSpacing), ")");
+          more = {
+            flexBasis: fullWidth,
+            maxWidth: fullWidth
+          };
+        }
+      } // Close to the bootstrap implementation:
+      // https://github.com/twbs/bootstrap/blob/8fccaa2439e97ec72a4b7dc42ccc1f649790adb0/scss/mixins/_grid.scss#L41
+
+
+      styles = _extends({
+        flexBasis: width,
+        flexGrow: 0,
+        maxWidth: width
+      }, more);
+    } // No need for a media query for the first size.
+
+
+    if (theme.breakpoints.values[breakpoint] === 0) {
+      _extends(globalStyles, styles);
+    } else {
+      globalStyles[theme.breakpoints.up(breakpoint)] = styles;
+    }
 
-  if (theme.breakpoints.values[breakpoint] === 0) {
-    _extends(globalStyles, styles);
-  } else {
-    globalStyles[theme.breakpoints.up(breakpoint)] = styles;
-  }
+    return globalStyles;
+  }, {});
 }
-
-export function generateDirection(_ref) {
-  var theme = _ref.theme,
-      ownerState = _ref.ownerState;
+export function generateDirection(_ref2) {
+  var theme = _ref2.theme,
+      ownerState = _ref2.ownerState;
   var directionValues = resolveBreakpointValues({
     values: ownerState.direction,
     breakpoints: theme.breakpoints.values
@@ -116,9 +130,9 @@ export function generateDirection(_ref) {
     return output;
   });
 }
-export function generateRowGap(_ref2) {
-  var theme = _ref2.theme,
-      ownerState = _ref2.ownerState;
+export function generateRowGap(_ref3) {
+  var theme = _ref3.theme,
+      ownerState = _ref3.ownerState;
   var container = ownerState.container,
       rowSpacing = ownerState.rowSpacing;
   var styles = {};
@@ -147,9 +161,9 @@ export function generateRowGap(_ref2) {
 
   return styles;
 }
-export function generateColumnGap(_ref4) {
-  var theme = _ref4.theme,
-      ownerState = _ref4.ownerState;
+export function generateColumnGap(_ref5) {
+  var theme = _ref5.theme,
+      ownerState = _ref5.ownerState;
   var container = ownerState.container,
       columnSpacing = ownerState.columnSpacing;
   var styles = {};
@@ -224,8 +238,8 @@ var GridRoot = styled('div', {
         zeroMinWidth = _props$ownerState.zeroMinWidth;
     return [styles.root, container && styles.container, item && styles.item, zeroMinWidth && styles.zeroMinWidth].concat(_toConsumableArray(resolveSpacingClasses(spacing, container, styles)), [direction !== 'row' && styles["direction-xs-".concat(String(direction))], wrap !== 'wrap' && styles["wrap-xs-".concat(String(wrap))], xs !== false && styles["grid-xs-".concat(String(xs))], sm !== false && styles["grid-sm-".concat(String(sm))], md !== false && styles["grid-md-".concat(String(md))], lg !== false && styles["grid-lg-".concat(String(lg))], xl !== false && styles["grid-xl-".concat(String(xl))]]);
   }
-})(function (_ref6) {
-  var ownerState = _ref6.ownerState;
+})(function (_ref7) {
+  var ownerState = _ref7.ownerState;
   return _extends({
     boxSizing: 'border-box'
   }, ownerState.container && {
@@ -242,15 +256,7 @@ var GridRoot = styled('div', {
   }, ownerState.wrap === 'reverse' && {
     flexWrap: 'wrap-reverse'
   });
-}, generateDirection, generateRowGap, generateColumnGap, function (_ref7) {
-  var theme = _ref7.theme,
-      ownerState = _ref7.ownerState;
-  return theme.breakpoints.keys.reduce(function (globalStyles, breakpoint) {
-    // Use side effect over immutability for better performance.
-    generateGrid(globalStyles, theme, breakpoint, ownerState);
-    return globalStyles;
-  }, {});
-});
+}, generateDirection, generateRowGap, generateColumnGap, generateGrid);
 
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes,

package/legacy/InputBase/InputBase.js

@@ -213,6 +213,7 @@ var InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref) {
       componentsProps = _props$componentsProp === void 0 ? {} : _props$componentsProp,
       defaultValue = props.defaultValue,
       disabled = props.disabled,
+      disableInjectingGlobalStyles = props.disableInjectingGlobalStyles,
       endAdornment = props.endAdornment,
       error = props.error,
       _props$fullWidth = props.fullWidth,
@@ -244,7 +245,7 @@ var InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref) {
       _props$type = props.type,
       type = _props$type === void 0 ? 'text' : _props$type,
       valueProp = props.value,
-      other = _objectWithoutProperties(props, ["aria-describedby", "autoComplete", "autoFocus", "className", "color", "components", "componentsProps", "defaultValue", "disabled", "endAdornment", "error", "fullWidth", "id", "inputComponent", "inputProps", "inputRef", "margin", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onClick", "onFocus", "onKeyDown", "onKeyUp", "placeholder", "readOnly", "renderSuffix", "rows", "size", "startAdornment", "type", "value"]);
+      other = _objectWithoutProperties(props, ["aria-describedby", "autoComplete", "autoFocus", "className", "color", "components", "componentsProps", "defaultValue", "disabled", "disableInjectingGlobalStyles", "endAdornment", "error", "fullWidth", "id", "inputComponent", "inputProps", "inputRef", "margin", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onClick", "onFocus", "onKeyDown", "onKeyUp", "placeholder", "readOnly", "renderSuffix", "rows", "size", "startAdornment", "type", "value"]);
 
   var value = inputPropsProp.value != null ? inputPropsProp.value : valueProp;
 
@@ -459,7 +460,7 @@ var InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref) {
   var Input = components.Input || InputBaseComponent;
   inputProps = _extends({}, inputProps, componentsProps.input);
   return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [inputGlobalStyles, /*#__PURE__*/_jsxs(Root, _extends({}, rootProps, !isHostComponent(Root) && {
+    children: [!disableInjectingGlobalStyles && inputGlobalStyles, /*#__PURE__*/_jsxs(Root, _extends({}, rootProps, !isHostComponent(Root) && {
       ownerState: _extends({}, ownerState, rootProps.ownerState)
     }, {
       ref: ref,
@@ -573,6 +574,13 @@ process.env.NODE_ENV !== "production" ? InputBase.propTypes
    */
   disabled: PropTypes.bool,
 
+  /**
+   * If `true`, GlobalStyles for the auto-fill keyframes will not be injected/removed on mount/unmount. Make sure to inject them at the top of your application.
+   * This option is intended to help with boosting the initial rendering performance if you are loading a big amount of Input components at once.
+   * @default false
+   */
+  disableInjectingGlobalStyles: PropTypes.bool,
+
   /**
    * End `InputAdornment` for this component.
    */

package/legacy/OutlinedInput/OutlinedInput.js

@@ -6,10 +6,13 @@ import PropTypes from 'prop-types';
 import { refType } from '@mui/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
 import NotchedOutline from './NotchedOutline';
+import useFormControl from '../FormControl/useFormControl';
+import formControlState from '../FormControl/formControlState';
 import styled, { rootShouldForwardProp } from '../styles/styled';
 import outlinedInputClasses, { getOutlinedInputUtilityClass } from './outlinedInputClasses';
 import InputBase, { rootOverridesResolver as inputBaseRootOverridesResolver, inputOverridesResolver as inputBaseInputOverridesResolver, InputBaseRoot, InputBaseComponent as InputBaseInput } from '../InputBase/InputBase';
 import useThemeProps from '../styles/useThemeProps';
+import { jsxs as _jsxs } from "react/jsx-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 
 var useUtilityClasses = function useUtilityClasses(ownerState) {
@@ -98,6 +101,8 @@ var OutlinedInputInput = styled(InputBaseInput, {
   });
 });
 var OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inProps, ref) {
+  var _React$Fragment;
+
   var props = useThemeProps({
     props: inProps,
     name: 'MuiOutlinedInput'
@@ -118,6 +123,12 @@ var OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inProps
       other = _objectWithoutProperties(props, ["components", "fullWidth", "inputComponent", "label", "multiline", "notched", "type"]);
 
   var classes = useUtilityClasses(props);
+  var muiFormControl = useFormControl();
+  var fcs = formControlState({
+    props: props,
+    muiFormControl: muiFormControl,
+    states: ['required']
+  });
   return /*#__PURE__*/_jsx(InputBase, _extends({
     components: _extends({
       Root: OutlinedInputRoot,
@@ -126,7 +137,9 @@ var OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inProps
     renderSuffix: function renderSuffix(state) {
       return /*#__PURE__*/_jsx(NotchedOutlineRoot, {
         className: classes.notchedOutline,
-        label: label,
+        label: 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/Select/SelectInput.js

@@ -426,12 +426,18 @@ var SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, ref)
 
   if (computeDisplay) {
     if (multiple) {
-      if (value.length === 0) {
-        display = '';
+      if (displayMultiple.length === 0) {
+        display = null;
       } else {
-        display = displayMultiple.reduce(function (prev, curr) {
-          return [prev, ', ', curr];
-        });
+        display = displayMultiple.reduce(function (output, child, index) {
+          output.push(child);
+
+          if (index < displayMultiple.length - 1) {
+            output.push(', ');
+          }
+
+          return output;
+        }, []);
       }
     } else {
       display = displaySingle;

package/legacy/TextField/TextField.js

@@ -15,8 +15,8 @@ import FormControl from '../FormControl';
 import FormHelperText from '../FormHelperText';
 import Select from '../Select';
 import { getTextFieldUtilityClass } from './textFieldClasses';
-import { jsxs as _jsxs } from "react/jsx-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 var variantComponent = {
   standard: Input,
   filled: FilledInput,
@@ -147,14 +147,7 @@ var TextField = /*#__PURE__*/React.forwardRef(function TextField(inProps, ref) {
       InputMore.notched = InputLabelProps.shrink;
     }
 
-    if (label) {
-      var _InputLabelProps$requ;
-
-      var displayRequired = (_InputLabelProps$requ = InputLabelProps == null ? void 0 : InputLabelProps.required) != null ? _InputLabelProps$requ : required;
-      InputMore.label = /*#__PURE__*/_jsxs(React.Fragment, {
-        children: [label, displayRequired && "\xA0*"]
-      });
-    }
+    InputMore.label = label;
   }
 
   if (select) {