@mui/material 5.10.13 → 5.10.14

package/legacy/Hidden/HiddenJs.js

@@ -3,24 +3,23 @@ import PropTypes from 'prop-types';
 import { exactProp } from '@mui/utils';
 import withWidth, { isWidthDown, isWidthUp } from './withWidth';
 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,
-      width = props.width;
+    only = props.only,
+    width = props.width;
   var theme = useTheme();
-  var visible = true; // `only` check is faster to get out sooner if used.
+  var visible = true;
 
+  // `only` check is faster to get out sooner if used.
   if (only) {
     if (Array.isArray(only)) {
       for (var i = 0; i < only.length; i += 1) {
         var breakpoint = only[i];
-
         if (width === breakpoint) {
           visible = false;
           break;
@@ -29,112 +28,94 @@ function HiddenJs(props) {
     } else if (only && width === only) {
       visible = false;
     }
-  } // Allow `only` to be combined with other props. If already hidden, no need to check others.
-
+  }
 
+  // Allow `only` to be combined with other props. If already hidden, no need to check others.
   if (visible) {
     // determine visibility based on the smallest size up
     for (var _i = 0; _i < theme.breakpoints.keys.length; _i += 1) {
       var _breakpoint = theme.breakpoints.keys[_i];
       var breakpointUp = props["".concat(_breakpoint, "Up")];
       var breakpointDown = props["".concat(_breakpoint, "Down")];
-
       if (breakpointUp && isWidthUp(_breakpoint, width) || breakpointDown && isWidthDown(_breakpoint, width)) {
         visible = false;
         break;
       }
     }
   }
-
   if (!visible) {
     return null;
   }
-
   return /*#__PURE__*/_jsx(React.Fragment, {
     children: children
   });
 }
-
 process.env.NODE_ENV !== "production" ? HiddenJs.propTypes = {
   /**
    * The content of the component.
    */
   children: PropTypes.node,
-
   /**
    * 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,
-
   /**
    * Hide the given breakpoint(s).
    */
   only: PropTypes.oneOfType([PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']), PropTypes.arrayOf(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
   smDown: PropTypes.bool,
-
   /**
    * If `true`, screens this size and up are hidden.
    */
   // eslint-disable-next-line react/no-unused-prop-types
   smUp: PropTypes.bool,
-
   /**
    * @ignore
    * width prop provided by withWidth decorator.
    */
   width: PropTypes.string.isRequired,
-
   /**
    * 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') {
   process.env.NODE_ENV !== "production" ? HiddenJs.propTypes = exactProp(HiddenJs.propTypes) : void 0;
 }
-
 export default withWidth()(HiddenJs);

package/legacy/Hidden/withWidth.js

@@ -8,89 +8,79 @@ import useTheme from '../styles/useTheme';
 import useEnhancedEffect from '../utils/useEnhancedEffect';
 import useMediaQuery from '../useMediaQuery';
 import { jsx as _jsx } from "react/jsx-runtime";
-var breakpointKeys = ['xs', 'sm', 'md', 'lg', 'xl']; // By default, returns true if screen width is the same or greater than the given breakpoint.
+var breakpointKeys = ['xs', 'sm', 'md', 'lg', 'xl'];
 
+// By default, returns true if screen width is the same or greater than the given breakpoint.
 export var isWidthUp = function isWidthUp(breakpoint, width) {
   var inclusive = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
-
   if (inclusive) {
     return breakpointKeys.indexOf(breakpoint) <= breakpointKeys.indexOf(width);
   }
-
   return breakpointKeys.indexOf(breakpoint) < breakpointKeys.indexOf(width);
-}; // By default, returns true if screen width is the same or less than the given breakpoint.
+};
 
+// By default, returns true if screen width is the same or less than the given breakpoint.
 export var isWidthDown = function isWidthDown(breakpoint, width) {
   var inclusive = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-
   if (inclusive) {
     return breakpointKeys.indexOf(width) <= breakpointKeys.indexOf(breakpoint);
   }
-
   return breakpointKeys.indexOf(width) < breakpointKeys.indexOf(breakpoint);
 };
-
 var withWidth = function withWidth() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return function (Component) {
     var _options$withTheme = options.withTheme,
-        withThemeOption = _options$withTheme === void 0 ? false : _options$withTheme,
-        _options$noSSR = options.noSSR,
-        noSSR = _options$noSSR === void 0 ? false : _options$noSSR,
-        initialWidthOption = options.initialWidth;
-
+      withThemeOption = _options$withTheme === void 0 ? false : _options$withTheme,
+      _options$noSSR = options.noSSR,
+      noSSR = _options$noSSR === void 0 ? false : _options$noSSR,
+      initialWidthOption = options.initialWidth;
     function WithWidth(props) {
       var contextTheme = useTheme();
       var theme = props.theme || contextTheme;
-
       var _getThemeProps = getThemeProps({
-        theme: theme,
-        name: 'MuiWithWidth',
-        props: props
-      }),
-          initialWidth = _getThemeProps.initialWidth,
-          width = _getThemeProps.width,
-          other = _objectWithoutProperties(_getThemeProps, ["initialWidth", "width"]);
-
+          theme: theme,
+          name: 'MuiWithWidth',
+          props: props
+        }),
+        initialWidth = _getThemeProps.initialWidth,
+        width = _getThemeProps.width,
+        other = _objectWithoutProperties(_getThemeProps, ["initialWidth", "width"]);
       var _React$useState = React.useState(false),
-          mountedState = _React$useState[0],
-          setMountedState = _React$useState[1];
-
+        mountedState = _React$useState[0],
+        setMountedState = _React$useState[1];
       useEnhancedEffect(function () {
         setMountedState(true);
       }, []);
+
       /**
        * innerWidth |xs      sm      md      lg      xl
        *            |-------|-------|-------|-------|------>
        * width      |  xs   |  sm   |  md   |  lg   |  xl
        */
-
       var keys = theme.breakpoints.keys.slice().reverse();
       var widthComputed = keys.reduce(function (output, key) {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         var matches = useMediaQuery(theme.breakpoints.up(key));
         return !output && matches ? key : output;
       }, null);
-
       var more = _extends({
         width: width || (mountedState || noSSR ? widthComputed : undefined) || initialWidth || initialWidthOption
       }, withThemeOption ? {
         theme: theme
-      } : {}, other); // When rendering the component on the server,
+      } : {}, other);
+
+      // When rendering the component on the server,
       // we have no idea about the client browser screen width.
       // In order to prevent blinks and help the reconciliation of the React tree
       // we are not rendering the child component.
       //
       // An alternative is to use the `initialWidth` property.
-
-
       if (more.width === undefined) {
         return null;
       }
-
       return /*#__PURE__*/_jsx(Component, _extends({}, more));
     }
-
     process.env.NODE_ENV !== "production" ? WithWidth.propTypes = {
       /**
        * As `window.innerWidth` is unavailable on the server,
@@ -102,24 +92,19 @@ var withWidth = function withWidth() {
        * https://caniuse.com/#search=client%20hint
        */
       initialWidth: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
-
       /**
        * @ignore
        */
       theme: PropTypes.object,
-
       /**
        * Bypass the width calculation logic.
        */
       width: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl'])
     } : void 0;
-
     if (process.env.NODE_ENV !== 'production') {
       WithWidth.displayName = "WithWidth(".concat(getDisplayName(Component), ")");
     }
-
     return WithWidth;
   };
 };
-
 export default withWidth;

package/legacy/Icon/Icon.js

@@ -9,17 +9,15 @@ import useThemeProps from '../styles/useThemeProps';
 import capitalize from '../utils/capitalize';
 import { getIconUtilityClass } from './iconClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var color = ownerState.color,
-      fontSize = ownerState.fontSize,
-      classes = ownerState.classes;
+    fontSize = ownerState.fontSize,
+    classes = ownerState.classes;
   var slots = {
     root: ['root', color !== 'inherit' && "color".concat(capitalize(color)), "fontSize".concat(capitalize(fontSize))]
   };
   return composeClasses(slots, getIconUtilityClass, classes);
 };
-
 var IconRoot = styled('span', {
   name: 'MuiIcon',
   slot: 'Root',
@@ -29,7 +27,7 @@ var IconRoot = styled('span', {
   }
 })(function (_ref) {
   var theme = _ref.theme,
-      ownerState = _ref.ownerState;
+    ownerState = _ref.ownerState;
   return {
     userSelect: 'none',
     width: '1em',
@@ -67,29 +65,27 @@ var Icon = /*#__PURE__*/React.forwardRef(function Icon(inProps, ref) {
     props: inProps,
     name: 'MuiIcon'
   });
-
   var _props$baseClassName = props.baseClassName,
-      baseClassName = _props$baseClassName === void 0 ? 'material-icons' : _props$baseClassName,
-      className = props.className,
-      _props$color = props.color,
-      color = _props$color === void 0 ? 'inherit' : _props$color,
-      _props$component = props.component,
-      Component = _props$component === void 0 ? 'span' : _props$component,
-      _props$fontSize = props.fontSize,
-      fontSize = _props$fontSize === void 0 ? 'medium' : _props$fontSize,
-      other = _objectWithoutProperties(props, ["baseClassName", "className", "color", "component", "fontSize"]);
-
+    baseClassName = _props$baseClassName === void 0 ? 'material-icons' : _props$baseClassName,
+    className = props.className,
+    _props$color = props.color,
+    color = _props$color === void 0 ? 'inherit' : _props$color,
+    _props$component = props.component,
+    Component = _props$component === void 0 ? 'span' : _props$component,
+    _props$fontSize = props.fontSize,
+    fontSize = _props$fontSize === void 0 ? 'medium' : _props$fontSize,
+    other = _objectWithoutProperties(props, ["baseClassName", "className", "color", "component", "fontSize"]);
   var ownerState = _extends({}, props, {
     baseClassName: baseClassName,
     color: color,
     component: Component,
     fontSize: fontSize
   });
-
   var classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsx(IconRoot, _extends({
     as: Component,
-    className: clsx(baseClassName, // Prevent the translation of the text content.
+    className: clsx(baseClassName,
+    // Prevent the translation of the text content.
     // The font relies on the exact text content to render the icon.
     'notranslate', classes.root, className),
     ownerState: ownerState,
@@ -97,60 +93,46 @@ var Icon = /*#__PURE__*/React.forwardRef(function Icon(inProps, ref) {
     ref: ref
   }, other));
 });
-process.env.NODE_ENV !== "production" ? Icon.propTypes
-/* remove-proptypes */
-= {
+process.env.NODE_ENV !== "production" ? Icon.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // |     To update them edit the d.ts file and run "yarn proptypes"     |
   // ----------------------------------------------------------------------
-
   /**
    * The base class applied to the icon. Defaults to 'material-icons', but can be changed to any
    * other base class that suits the icon font you're using (e.g. material-icons-rounded, fas, etc).
    * @default 'material-icons'
    */
   baseClassName: PropTypes.string,
-
   /**
    * The name of the icon font ligature.
    */
   children: PropTypes.node,
-
   /**
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
-
   /**
    * @ignore
    */
   className: PropTypes.string,
-
   /**
    * The color of the component.
    * It supports both default and custom theme colors, which can be added as shown in the
    * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
    * @default 'inherit'
    */
-  color: PropTypes
-  /* @typescript-to-proptypes-ignore */
-  .oneOfType([PropTypes.oneOf(['inherit', 'action', 'disabled', 'primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
-
+  color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['inherit', 'action', 'disabled', '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 fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size.
    * @default 'medium'
    */
-  fontSize: PropTypes
-  /* @typescript-to-proptypes-ignore */
-  .oneOfType([PropTypes.oneOf(['inherit', 'large', 'medium', 'small']), PropTypes.string]),
-
+  fontSize: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['inherit', 'large', 'medium', 'small']), PropTypes.string]),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/legacy/IconButton/IconButton.js

@@ -13,19 +13,17 @@ import ButtonBase from '../ButtonBase';
 import capitalize from '../utils/capitalize';
 import iconButtonClasses, { getIconButtonUtilityClass } from './iconButtonClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes,
-      disabled = ownerState.disabled,
-      color = ownerState.color,
-      edge = ownerState.edge,
-      size = ownerState.size;
+    disabled = ownerState.disabled,
+    color = ownerState.color,
+    edge = ownerState.edge,
+    size = ownerState.size;
   var slots = {
     root: ['root', disabled && 'disabled', color !== 'default' && "color".concat(capitalize(color)), edge && "edge".concat(capitalize(edge)), "size".concat(capitalize(size))]
   };
   return composeClasses(slots, getIconButtonUtilityClass, classes);
 };
-
 var IconButtonRoot = styled(ButtonBase, {
   name: 'MuiIconButton',
   slot: 'Root',
@@ -35,7 +33,7 @@ var IconButtonRoot = styled(ButtonBase, {
   }
 })(function (_ref) {
   var theme = _ref.theme,
-      ownerState = _ref.ownerState;
+    ownerState = _ref.ownerState;
   return _extends({
     textAlign: 'center',
     flex: '0 0 auto',
@@ -62,20 +60,23 @@ var IconButtonRoot = styled(ButtonBase, {
     marginRight: ownerState.size === 'small' ? -3 : -12
   });
 }, function (_ref2) {
+  var _palette;
   var theme = _ref2.theme,
-      ownerState = _ref2.ownerState;
+    ownerState = _ref2.ownerState;
+  var palette = (_palette = (theme.vars || theme).palette) == null ? void 0 : _palette[ownerState.color];
   return _extends({}, ownerState.color === 'inherit' && {
     color: 'inherit'
   }, ownerState.color !== 'inherit' && ownerState.color !== 'default' && _extends({
-    color: (theme.vars || theme).palette[ownerState.color].main
+    color: palette == null ? void 0 : palette.main
   }, !ownerState.disableRipple && {
-    '&:hover': {
-      backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette[ownerState.color].mainChannel, " / ").concat(theme.vars.palette.action.hoverOpacity, ")") : alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
+    '&:hover': _extends({}, palette && {
+      backgroundColor: theme.vars ? "rgba(".concat(palette.mainChannel, " / ").concat(theme.vars.palette.action.hoverOpacity, ")") : alpha(palette.main, theme.palette.action.hoverOpacity)
+    }, {
       // Reset on touch devices, it doesn't add specificity
       '@media (hover: none)': {
         backgroundColor: 'transparent'
       }
-    }
+    })
   }), ownerState.size === 'small' && {
     padding: 5,
     fontSize: theme.typography.pxToRem(18)
@@ -87,31 +88,29 @@ var IconButtonRoot = styled(ButtonBase, {
     color: (theme.vars || theme).palette.action.disabled
   }));
 });
+
 /**
  * Refer to the [Icons](/material-ui/icons/) section of the documentation
  * regarding the available icon options.
  */
-
 var IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, ref) {
   var props = useThemeProps({
     props: inProps,
     name: 'MuiIconButton'
   });
-
   var _props$edge = props.edge,
-      edge = _props$edge === void 0 ? false : _props$edge,
-      children = props.children,
-      className = props.className,
-      _props$color = props.color,
-      color = _props$color === void 0 ? 'default' : _props$color,
-      _props$disabled = props.disabled,
-      disabled = _props$disabled === void 0 ? false : _props$disabled,
-      _props$disableFocusRi = props.disableFocusRipple,
-      disableFocusRipple = _props$disableFocusRi === void 0 ? false : _props$disableFocusRi,
-      _props$size = props.size,
-      size = _props$size === void 0 ? 'medium' : _props$size,
-      other = _objectWithoutProperties(props, ["edge", "children", "className", "color", "disabled", "disableFocusRipple", "size"]);
-
+    edge = _props$edge === void 0 ? false : _props$edge,
+    children = props.children,
+    className = props.className,
+    _props$color = props.color,
+    color = _props$color === void 0 ? 'default' : _props$color,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    _props$disableFocusRi = props.disableFocusRipple,
+    disableFocusRipple = _props$disableFocusRi === void 0 ? false : _props$disableFocusRi,
+    _props$size = props.size,
+    size = _props$size === void 0 ? 'medium' : _props$size,
+    other = _objectWithoutProperties(props, ["edge", "children", "className", "color", "disabled", "disableFocusRipple", "size"]);
   var ownerState = _extends({}, props, {
     edge: edge,
     color: color,
@@ -119,7 +118,6 @@ var IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, ref)
     disableFocusRipple: disableFocusRipple,
     size: size
   });
-
   var classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsx(IconButtonRoot, _extends({
     className: clsx(classes.root, className),
@@ -132,14 +130,11 @@ var IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, ref)
     children: children
   }));
 });
-process.env.NODE_ENV !== "production" ? IconButton.propTypes
-/* remove-proptypes */
-= {
+process.env.NODE_ENV !== "production" ? IconButton.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // |     To update them edit the d.ts file and run "yarn proptypes"     |
   // ----------------------------------------------------------------------
-
   /**
    * The icon to display.
    */
@@ -147,46 +142,36 @@ process.env.NODE_ENV !== "production" ? IconButton.propTypes
     var found = React.Children.toArray(props.children).some(function (child) {
       return /*#__PURE__*/React.isValidElement(child) && child.props.onClick;
     });
-
     if (found) {
       return new Error(['MUI: You are providing an onClick event listener to a child of a button element.', 'Prefer applying it to the IconButton directly.', 'This guarantees that the whole <button> will be responsive to click events.'].join('\n'));
     }
-
     return null;
   }),
-
   /**
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
-
   /**
    * @ignore
    */
   className: PropTypes.string,
-
   /**
    * The color of the component.
    * It supports both default and custom theme colors, which can be added as shown in the
    * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
    * @default 'default'
    */
-  color: PropTypes
-  /* @typescript-to-proptypes-ignore */
-  .oneOfType([PropTypes.oneOf(['inherit', 'default', 'primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
-
+  color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['inherit', 'default', 'primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
   /**
    * If `true`, the component is disabled.
    * @default false
    */
   disabled: PropTypes.bool,
-
   /**
    * If `true`, the  keyboard focus ripple is disabled.
    * @default false
    */
   disableFocusRipple: PropTypes.bool,
-
   /**
    * If `true`, the ripple effect is disabled.
    *
@@ -195,7 +180,6 @@ process.env.NODE_ENV !== "production" ? IconButton.propTypes
    * @default false
    */
   disableRipple: PropTypes.bool,
-
   /**
    * If given, uses a negative margin to counteract the padding on one
    * side (this is often helpful for aligning the left or right
@@ -204,16 +188,12 @@ process.env.NODE_ENV !== "production" ? IconButton.propTypes
    * @default false
    */
   edge: PropTypes.oneOf(['end', 'start', false]),
-
   /**
    * The size of the component.
    * `small` is equivalent to the dense button styling.
    * @default 'medium'
    */
-  size: PropTypes
-  /* @typescript-to-proptypes-ignore */
-  .oneOfType([PropTypes.oneOf(['small', 'medium', 'large']), PropTypes.string]),
-
+  size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['small', 'medium', 'large']), PropTypes.string]),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */