@mui/material 5.10.3 → 5.10.4

package/esm/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';
@@ -73,6 +73,7 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
   const {
     children: childrenProp,
     className,
+    component = 'div',
     componentsProps = {},
     max = 5,
     spacing = 'medium',
@@ -86,6 +87,7 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
   const ownerState = _extends({}, props, {
     max,
     spacing,
+    component,
     variant
   });
 
@@ -110,6 +112,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
@@ -159,6 +162,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/esm/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/esm/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/esm/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/esm/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 */

package/esm/Step/Step.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["active", "children", "className", "completed", "disabled", "expanded", "index", "last"];
+const _excluded = ["active", "children", "className", "component", "completed", "disabled", "expanded", "index", "last"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -55,6 +55,7 @@ const Step = /*#__PURE__*/React.forwardRef(function Step(inProps, ref) {
     active: activeProp,
     children,
     className,
+    component = 'div',
     completed: completedProp,
     disabled: disabledProp,
     expanded = false,
@@ -96,12 +97,14 @@ const Step = /*#__PURE__*/React.forwardRef(function Step(inProps, ref) {
     alternativeLabel,
     completed,
     disabled,
-    expanded
+    expanded,
+    component
   });
 
   const classes = useUtilityClasses(ownerState);
 
   const newChildren = /*#__PURE__*/_jsxs(StepRoot, _extends({
+    as: component,
     className: clsx(classes.root, className),
     ref: ref,
     ownerState: ownerState
@@ -149,6 +152,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/esm/Stepper/Stepper.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["activeStep", "alternativeLabel", "children", "className", "connector", "nonLinear", "orientation"];
+const _excluded = ["activeStep", "alternativeLabel", "children", "className", "component", "connector", "nonLinear", "orientation"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -60,6 +60,7 @@ const Stepper = /*#__PURE__*/React.forwardRef(function Stepper(inProps, ref) {
     alternativeLabel = false,
     children,
     className,
+    component = 'div',
     connector = defaultConnector,
     nonLinear = false,
     orientation = 'horizontal'
@@ -68,7 +69,8 @@ const Stepper = /*#__PURE__*/React.forwardRef(function Stepper(inProps, ref) {
 
   const ownerState = _extends({}, props, {
     alternativeLabel,
-    orientation
+    orientation,
+    component
   });
 
   const classes = useUtilityClasses(ownerState);
@@ -89,6 +91,7 @@ const 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
@@ -134,6 +137,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/esm/ToggleButton/ToggleButton.js

@@ -247,6 +247,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/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/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/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/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/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: