@mui/material 5.10.2 → 5.10.5

package/legacy/Autocomplete/Autocomplete.js

@@ -113,7 +113,11 @@ var AutocompleteRoot = styled('div', {
   }), _defineProperty(_$concat2, "& .".concat(autocompleteClasses.endAdornment), {
     right: 9
   }), _$concat2)), _defineProperty(_extends3, "& .".concat(outlinedInputClasses.root, ".").concat(inputBaseClasses.sizeSmall), _defineProperty({
-    padding: 6
+    // Don't specify paddingRight, as it overrides the default value set when there is only
+    // one of the popup or clear icon as the specificity is equal so the latter one wins
+    paddingTop: 6,
+    paddingBottom: 6,
+    paddingLeft: 6
   }, "& .".concat(autocompleteClasses.input), {
     padding: '2.5px 4px 2.5px 6px'
   })), _defineProperty(_extends3, "& .".concat(filledInputClasses.root), (_$concat3 = {

package/legacy/AvatarGroup/AvatarGroup.js

@@ -72,6 +72,8 @@ var AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps, re
 
   var childrenProp = props.children,
       className = props.className,
+      _props$component = props.component,
+      component = _props$component === void 0 ? 'div' : _props$component,
       _props$componentsProp = props.componentsProps,
       componentsProps = _props$componentsProp === void 0 ? {} : _props$componentsProp,
       _props$max = props.max,
@@ -81,13 +83,14 @@ var AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps, re
       total = props.total,
       _props$variant = props.variant,
       variant = _props$variant === void 0 ? 'circular' : _props$variant,
-      other = _objectWithoutProperties(props, ["children", "className", "componentsProps", "max", "spacing", "total", "variant"]);
+      other = _objectWithoutProperties(props, ["children", "className", "component", "componentsProps", "max", "spacing", "total", "variant"]);
 
   var clampedMax = max < 2 ? 2 : max;
 
   var ownerState = _extends({}, props, {
     max: max,
     spacing: spacing,
+    component: component,
     variant: variant
   });
 
@@ -112,6 +115,7 @@ var AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps, re
   var extraAvatars = Math.max(totalAvatars - clampedMax, totalAvatars - maxAvatars, 0);
   var marginLeft = spacing && SPACINGS[spacing] !== undefined ? SPACINGS[spacing] : -spacing;
   return /*#__PURE__*/_jsxs(AvatarGroupRoot, _extends({
+    as: component,
     ownerState: ownerState,
     className: clsx(classes.root, className),
     ref: ref
@@ -161,6 +165,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/legacy/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) {
   var children = props.children,
       only = props.only,
@@ -47,57 +50,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,
 
   /**
@@ -108,11 +93,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,
 
   /**
@@ -124,26 +111,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/legacy/ListItemText/ListItemText.js

@@ -86,7 +86,7 @@ var ListItemText = /*#__PURE__*/React.forwardRef(function ListItemText(inProps,
     primary = /*#__PURE__*/_jsx(Typography, _extends({
       variant: dense ? 'body2' : 'body1',
       className: classes.primary,
-      component: "span",
+      component: primaryTypographyProps != null && primaryTypographyProps.variant ? undefined : 'span',
       display: "block"
     }, primaryTypographyProps, {
       children: primary

package/legacy/NativeSelect/NativeSelect.js

@@ -61,21 +61,23 @@ var NativeSelect = /*#__PURE__*/React.forwardRef(function NativeSelect(inProps,
   var root = classesProp.root,
       otherClasses = _objectWithoutProperties(classesProp, ["root"]);
 
-  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: children,
-      classes: otherClasses,
-      IconComponent: IconComponent,
-      variant: fcs.variant,
-      type: undefined
-    }, inputProps, input ? input.props.inputProps : {}),
-    ref: 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: children,
+        classes: otherClasses,
+        IconComponent: IconComponent,
+        variant: fcs.variant,
+        type: undefined
+      }, inputProps, input ? input.props.inputProps : {}),
+      ref: ref
+    }, other, {
+      className: clsx(classes.root, input.props.className, className)
+    }))
+  });
 });
 process.env.NODE_ENV !== "production" ? NativeSelect.propTypes
 /* remove-proptypes */

package/legacy/OverridableComponentAugmentation.js

@@ -0,0 +1 @@
+export {};

package/legacy/Popper/Popper.js

@@ -18,7 +18,7 @@ var 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/legacy/Select/Select.js

@@ -98,42 +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),
-    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/TablePagination/TablePagination.js

@@ -228,8 +228,10 @@ var TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(inP
         id: labelId,
         children: labelRowsPerPage
       }), rowsPerPageOptions.length > 1 && /*#__PURE__*/_jsx(TablePaginationSelect, _extends({
-        variant: "standard",
-        input: _InputBase || (_InputBase = /*#__PURE__*/_jsx(InputBase, {})),
+        variant: "standard"
+      }, !SelectProps.variant && {
+        input: _InputBase || (_InputBase = /*#__PURE__*/_jsx(InputBase, {}))
+      }, {
         value: rowsPerPage,
         onChange: onRowsPerPageChange,
         id: selectId,

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.2
+/** @license MUI v5.10.5
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/legacy/useMediaQuery/useMediaQuery.js

@@ -20,8 +20,6 @@ function useMediaQueryOld(query, defaultMatches, matchMedia, ssrMatchMedia, noSs
     // event listeners to return the correct matches value.
 
 
-    // Once the component is mounted, we rely on the
-    // event listeners to return the correct matches value.
     return defaultMatches;
   }),
       match = _React$useState[0],