@mui/material 5.10.3 → 5.10.4

package/legacy/Select/Select.js

@@ -98,43 +98,45 @@ var Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
 
   var classes = useUtilityClasses(ownerState);
   var inputComponentRef = useForkRef(ref, InputComponent.ref);
-  return /*#__PURE__*/React.cloneElement(InputComponent, _extends({
-    // Most of the logic is implemented in `SelectInput`.
-    // The `Select` component is a simple API wrapper to expose something better to play with.
-    inputComponent: inputComponent,
-    inputProps: _extends({
-      children: children,
-      IconComponent: IconComponent,
-      variant: variant,
-      type: undefined,
-      // We render a select. We can ignore the type provided by the `Input`.
-      multiple: multiple
-    }, native ? {
-      id: id
-    } : {
-      autoWidth: autoWidth,
-      defaultOpen: defaultOpen,
-      displayEmpty: displayEmpty,
-      labelId: labelId,
-      MenuProps: MenuProps,
-      onClose: onClose,
-      onOpen: onOpen,
-      open: open,
-      renderValue: renderValue,
-      SelectDisplayProps: _extends({
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: /*#__PURE__*/React.cloneElement(InputComponent, _extends({
+      // Most of the logic is implemented in `SelectInput`.
+      // The `Select` component is a simple API wrapper to expose something better to play with.
+      inputComponent: inputComponent,
+      inputProps: _extends({
+        children: children,
+        IconComponent: IconComponent,
+        variant: variant,
+        type: undefined,
+        // We render a select. We can ignore the type provided by the `Input`.
+        multiple: multiple
+      }, native ? {
         id: id
-      }, SelectDisplayProps)
-    }, inputProps, {
-      classes: inputProps ? deepmerge(classes, inputProps.classes) : classes
-    }, input ? input.props.inputProps : {})
-  }, multiple && native && variant === 'outlined' ? {
-    notched: true
-  } : {}, {
-    ref: inputComponentRef,
-    className: clsx(InputComponent.props.className, className)
-  }, !input && {
-    variant: variant
-  }, other));
+      } : {
+        autoWidth: autoWidth,
+        defaultOpen: defaultOpen,
+        displayEmpty: displayEmpty,
+        labelId: labelId,
+        MenuProps: MenuProps,
+        onClose: onClose,
+        onOpen: onOpen,
+        open: open,
+        renderValue: renderValue,
+        SelectDisplayProps: _extends({
+          id: id
+        }, SelectDisplayProps)
+      }, inputProps, {
+        classes: inputProps ? deepmerge(classes, inputProps.classes) : classes
+      }, input ? input.props.inputProps : {})
+    }, multiple && native && variant === 'outlined' ? {
+      notched: true
+    } : {}, {
+      ref: inputComponentRef,
+      className: clsx(InputComponent.props.className, className)
+    }, !input && {
+      variant: variant
+    }, other))
+  });
 });
 process.env.NODE_ENV !== "production" ? Select.propTypes
 /* remove-proptypes */

package/legacy/Step/Step.js

@@ -50,13 +50,15 @@ var Step = /*#__PURE__*/React.forwardRef(function Step(inProps, ref) {
   var activeProp = props.active,
       children = props.children,
       className = props.className,
+      _props$component = props.component,
+      component = _props$component === void 0 ? 'div' : _props$component,
       completedProp = props.completed,
       disabledProp = props.disabled,
       _props$expanded = props.expanded,
       expanded = _props$expanded === void 0 ? false : _props$expanded,
       index = props.index,
       last = props.last,
-      other = _objectWithoutProperties(props, ["active", "children", "className", "completed", "disabled", "expanded", "index", "last"]);
+      other = _objectWithoutProperties(props, ["active", "children", "className", "component", "completed", "disabled", "expanded", "index", "last"]);
 
   var _React$useContext = React.useContext(StepperContext),
       activeStep = _React$useContext.activeStep,
@@ -98,12 +100,14 @@ var Step = /*#__PURE__*/React.forwardRef(function Step(inProps, ref) {
     alternativeLabel: alternativeLabel,
     completed: completed,
     disabled: disabled,
-    expanded: expanded
+    expanded: expanded,
+    component: component
   });
 
   var classes = useUtilityClasses(ownerState);
 
   var newChildren = /*#__PURE__*/_jsxs(StepRoot, _extends({
+    as: component,
     className: clsx(classes.root, className),
     ref: ref,
     ownerState: ownerState
@@ -151,6 +155,12 @@ process.env.NODE_ENV !== "production" ? Step.propTypes
    */
   completed: PropTypes.bool,
 
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: PropTypes.elementType,
+
   /**
    * If `true`, the step is disabled, will also disable the button if
    * `StepButton` is a child of `Step`. Is passed to child components.

package/legacy/Stepper/Stepper.js

@@ -57,17 +57,20 @@ var Stepper = /*#__PURE__*/React.forwardRef(function Stepper(inProps, ref) {
       alternativeLabel = _props$alternativeLab === void 0 ? false : _props$alternativeLab,
       children = props.children,
       className = props.className,
+      _props$component = props.component,
+      component = _props$component === void 0 ? 'div' : _props$component,
       _props$connector = props.connector,
       connector = _props$connector === void 0 ? defaultConnector : _props$connector,
       _props$nonLinear = props.nonLinear,
       nonLinear = _props$nonLinear === void 0 ? false : _props$nonLinear,
       _props$orientation = props.orientation,
       orientation = _props$orientation === void 0 ? 'horizontal' : _props$orientation,
-      other = _objectWithoutProperties(props, ["activeStep", "alternativeLabel", "children", "className", "connector", "nonLinear", "orientation"]);
+      other = _objectWithoutProperties(props, ["activeStep", "alternativeLabel", "children", "className", "component", "connector", "nonLinear", "orientation"]);
 
   var ownerState = _extends({}, props, {
     alternativeLabel: alternativeLabel,
-    orientation: orientation
+    orientation: orientation,
+    component: component
   });
 
   var classes = useUtilityClasses(ownerState);
@@ -90,6 +93,7 @@ var Stepper = /*#__PURE__*/React.forwardRef(function Stepper(inProps, ref) {
   return /*#__PURE__*/_jsx(StepperContext.Provider, {
     value: contextValue,
     children: /*#__PURE__*/_jsx(StepperRoot, _extends({
+      as: component,
       ownerState: ownerState,
       className: clsx(classes.root, className),
       ref: ref
@@ -135,6 +139,12 @@ process.env.NODE_ENV !== "production" ? Stepper.propTypes
    */
   className: PropTypes.string,
 
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: PropTypes.elementType,
+
   /**
    * An element to be placed between each step.
    * @default <StepConnector />

package/legacy/ToggleButton/ToggleButton.js

@@ -243,6 +243,8 @@ process.env.NODE_ENV !== "production" ? ToggleButton.propTypes
    * The value to associate with the button when selected in a
    * ToggleButtonGroup.
    */
-  value: PropTypes.any.isRequired
+  value: PropTypes
+  /* @typescript-to-proptypes-ignore */
+  .any.isRequired
 } : void 0;
 export default ToggleButton;

package/legacy/index.js

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

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/AvatarGroup/AvatarGroup.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["children", "className", "componentsProps", "max", "spacing", "total", "variant"];
+const _excluded = ["children", "className", "component", "componentsProps", "max", "spacing", "total", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { isFragment } from 'react-is';
@@ -71,6 +71,7 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
   const {
     children: childrenProp,
     className,
+    component = 'div',
     componentsProps = {},
     max = 5,
     spacing = 'medium',
@@ -84,6 +85,7 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
   const ownerState = _extends({}, props, {
     max,
     spacing,
+    component,
     variant
   });
 
@@ -108,6 +110,7 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
   const extraAvatars = Math.max(totalAvatars - clampedMax, totalAvatars - maxAvatars, 0);
   const marginLeft = spacing && SPACINGS[spacing] !== undefined ? SPACINGS[spacing] : -spacing;
   return /*#__PURE__*/_jsxs(AvatarGroupRoot, _extends({
+    as: component,
     ownerState: ownerState,
     className: clsx(classes.root, className),
     ref: ref
@@ -157,6 +160,12 @@ process.env.NODE_ENV !== "production" ? AvatarGroup.propTypes
    */
   className: PropTypes.string,
 
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: PropTypes.elementType,
+
   /**
    * The props used for each slot inside the AvatarGroup.
    * @default {}

package/modern/Hidden/HiddenJs.js

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import PropTypes from 'prop-types';
 import { exactProp } from '@mui/utils';
 import withWidth, { isWidthDown, isWidthUp } from './withWidth';
@@ -6,6 +7,8 @@ import useTheme from '../styles/useTheme';
  * @ignore - internal component.
  */
 
+import { jsx as _jsx } from "react/jsx-runtime";
+
 function HiddenJs(props) {
   const {
     children,
@@ -49,57 +52,39 @@ function HiddenJs(props) {
     return null;
   }
 
-  return children;
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: children
+  });
 }
 
-HiddenJs.propTypes = {
+process.env.NODE_ENV !== "production" ? HiddenJs.propTypes = {
   /**
    * The content of the component.
    */
   children: PropTypes.node,
 
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-
-  /**
-   * Specify which implementation to use.  'js' is the default, 'css' works better for
-   * server-side rendering.
-   */
-  implementation: PropTypes.oneOf(['js', 'css']),
-
-  /**
-   * You can use this prop when choosing the `js` implementation with server-side rendering.
-   *
-   * As `window.innerWidth` is unavailable on the server,
-   * we default to rendering an empty component during the first mount.
-   * You might want to use a heuristic to approximate
-   * the screen width of the client browser screen width.
-   *
-   * For instance, you could be using the user-agent or the client-hints.
-   * https://caniuse.com/#search=client%20hint
-   */
-  initialWidth: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
-
   /**
    * If `true`, screens this size and down are hidden.
    */
+  // eslint-disable-next-line react/no-unused-prop-types
   lgDown: PropTypes.bool,
 
   /**
    * If `true`, screens this size and up are hidden.
    */
+  // eslint-disable-next-line react/no-unused-prop-types
   lgUp: PropTypes.bool,
 
   /**
    * If `true`, screens this size and down are hidden.
    */
+  // eslint-disable-next-line react/no-unused-prop-types
   mdDown: PropTypes.bool,
 
   /**
    * If `true`, screens this size and up are hidden.
    */
+  // eslint-disable-next-line react/no-unused-prop-types
   mdUp: PropTypes.bool,
 
   /**
@@ -110,11 +95,13 @@ HiddenJs.propTypes = {
   /**
    * If `true`, screens this size and down are hidden.
    */
+  // eslint-disable-next-line react/no-unused-prop-types
   smDown: PropTypes.bool,
 
   /**
    * If `true`, screens this size and up are hidden.
    */
+  // eslint-disable-next-line react/no-unused-prop-types
   smUp: PropTypes.bool,
 
   /**
@@ -126,26 +113,30 @@ HiddenJs.propTypes = {
   /**
    * If `true`, screens this size and down are hidden.
    */
+  // eslint-disable-next-line react/no-unused-prop-types
   xlDown: PropTypes.bool,
 
   /**
    * If `true`, screens this size and up are hidden.
    */
+  // eslint-disable-next-line react/no-unused-prop-types
   xlUp: PropTypes.bool,
 
   /**
    * If `true`, screens this size and down are hidden.
    */
+  // eslint-disable-next-line react/no-unused-prop-types
   xsDown: PropTypes.bool,
 
   /**
    * If `true`, screens this size and up are hidden.
    */
+  // eslint-disable-next-line react/no-unused-prop-types
   xsUp: PropTypes.bool
-};
+} : void 0;
 
 if (process.env.NODE_ENV !== 'production') {
-  HiddenJs.propTypes = exactProp(HiddenJs.propTypes);
+  process.env.NODE_ENV !== "production" ? HiddenJs.propTypes = exactProp(HiddenJs.propTypes) : void 0;
 }
 
 export default withWidth()(HiddenJs);

package/modern/NativeSelect/NativeSelect.js

@@ -62,21 +62,23 @@ const NativeSelect = /*#__PURE__*/React.forwardRef(function NativeSelect(inProps
 
   const otherClasses = _objectWithoutPropertiesLoose(classesProp, _excluded2);
 
-  return /*#__PURE__*/React.cloneElement(input, _extends({
-    // Most of the logic is implemented in `NativeSelectInput`.
-    // The `Select` component is a simple API wrapper to expose something better to play with.
-    inputComponent: NativeSelectInput,
-    inputProps: _extends({
-      children,
-      classes: otherClasses,
-      IconComponent,
-      variant: fcs.variant,
-      type: undefined
-    }, inputProps, input ? input.props.inputProps : {}),
-    ref
-  }, other, {
-    className: clsx(classes.root, input.props.className, className)
-  }));
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: /*#__PURE__*/React.cloneElement(input, _extends({
+      // Most of the logic is implemented in `NativeSelectInput`.
+      // The `Select` component is a simple API wrapper to expose something better to play with.
+      inputComponent: NativeSelectInput,
+      inputProps: _extends({
+        children,
+        classes: otherClasses,
+        IconComponent,
+        variant: fcs.variant,
+        type: undefined
+      }, inputProps, input ? input.props.inputProps : {}),
+      ref
+    }, other, {
+      className: clsx(classes.root, input.props.className, className)
+    }))
+  });
 });
 process.env.NODE_ENV !== "production" ? NativeSelect.propTypes
 /* remove-proptypes */

package/modern/Popper/Popper.js

@@ -16,7 +16,7 @@ const PopperRoot = styled(PopperUnstyled, {
  * Demos:
  *
  * - [Autocomplete](https://mui.com/material-ui/react-autocomplete/)
- * - [Menus](https://mui.com/material-ui/react-menu/)
+ * - [Menu](https://mui.com/material-ui/react-menu/)
  * - [Popper](https://mui.com/material-ui/react-popper/)
  *
  * API:

package/modern/Select/Select.js

@@ -91,43 +91,45 @@ const Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
 
   const classes = useUtilityClasses(ownerState);
   const inputComponentRef = useForkRef(ref, InputComponent.ref);
-  return /*#__PURE__*/React.cloneElement(InputComponent, _extends({
-    // Most of the logic is implemented in `SelectInput`.
-    // The `Select` component is a simple API wrapper to expose something better to play with.
-    inputComponent,
-    inputProps: _extends({
-      children,
-      IconComponent,
-      variant,
-      type: undefined,
-      // We render a select. We can ignore the type provided by the `Input`.
-      multiple
-    }, native ? {
-      id
-    } : {
-      autoWidth,
-      defaultOpen,
-      displayEmpty,
-      labelId,
-      MenuProps,
-      onClose,
-      onOpen,
-      open,
-      renderValue,
-      SelectDisplayProps: _extends({
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: /*#__PURE__*/React.cloneElement(InputComponent, _extends({
+      // Most of the logic is implemented in `SelectInput`.
+      // The `Select` component is a simple API wrapper to expose something better to play with.
+      inputComponent,
+      inputProps: _extends({
+        children,
+        IconComponent,
+        variant,
+        type: undefined,
+        // We render a select. We can ignore the type provided by the `Input`.
+        multiple
+      }, native ? {
         id
-      }, SelectDisplayProps)
-    }, inputProps, {
-      classes: inputProps ? deepmerge(classes, inputProps.classes) : classes
-    }, input ? input.props.inputProps : {})
-  }, multiple && native && variant === 'outlined' ? {
-    notched: true
-  } : {}, {
-    ref: inputComponentRef,
-    className: clsx(InputComponent.props.className, className)
-  }, !input && {
-    variant
-  }, other));
+      } : {
+        autoWidth,
+        defaultOpen,
+        displayEmpty,
+        labelId,
+        MenuProps,
+        onClose,
+        onOpen,
+        open,
+        renderValue,
+        SelectDisplayProps: _extends({
+          id
+        }, SelectDisplayProps)
+      }, inputProps, {
+        classes: inputProps ? deepmerge(classes, inputProps.classes) : classes
+      }, input ? input.props.inputProps : {})
+    }, multiple && native && variant === 'outlined' ? {
+      notched: true
+    } : {}, {
+      ref: inputComponentRef,
+      className: clsx(InputComponent.props.className, className)
+    }, !input && {
+      variant
+    }, other))
+  });
 });
 process.env.NODE_ENV !== "production" ? Select.propTypes
 /* remove-proptypes */