@mui/material 5.10.13 → 5.10.15

package/modern/Hidden/HiddenJs.js

@@ -3,12 +3,11 @@ 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) {
   const {
     children,
@@ -16,13 +15,13 @@ function HiddenJs(props) {
     width
   } = props;
   const theme = useTheme();
-  let visible = true; // `only` check is faster to get out sooner if used.
+  let visible = true;
 
+  // `only` check is faster to get out sooner if used.
   if (only) {
     if (Array.isArray(only)) {
       for (let i = 0; i < only.length; i += 1) {
         const breakpoint = only[i];
-
         if (width === breakpoint) {
           visible = false;
           break;
@@ -31,112 +30,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 (let i = 0; i < theme.breakpoints.keys.length; i += 1) {
       const breakpoint = theme.breakpoints.keys[i];
       const breakpointUp = props[`${breakpoint}Up`];
       const breakpointDown = props[`${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/modern/Hidden/withWidth.js

@@ -9,82 +9,75 @@ import useTheme from '../styles/useTheme';
 import useEnhancedEffect from '../utils/useEnhancedEffect';
 import useMediaQuery from '../useMediaQuery';
 import { jsx as _jsx } from "react/jsx-runtime";
-const breakpointKeys = ['xs', 'sm', 'md', 'lg', 'xl']; // By default, returns true if screen width is the same or greater than the given breakpoint.
+const breakpointKeys = ['xs', 'sm', 'md', 'lg', 'xl'];
 
+// By default, returns true if screen width is the same or greater than the given breakpoint.
 export const isWidthUp = (breakpoint, width, inclusive = 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 const isWidthDown = (breakpoint, width, inclusive = false) => {
   if (inclusive) {
     return breakpointKeys.indexOf(width) <= breakpointKeys.indexOf(breakpoint);
   }
-
   return breakpointKeys.indexOf(width) < breakpointKeys.indexOf(breakpoint);
 };
-
 const withWidth = (options = {}) => Component => {
   const {
     withTheme: withThemeOption = false,
     noSSR = false,
     initialWidth: initialWidthOption
   } = options;
-
   function WithWidth(props) {
     const contextTheme = useTheme();
     const theme = props.theme || contextTheme;
-
     const _getThemeProps = getThemeProps({
-      theme,
-      name: 'MuiWithWidth',
-      props
-    }),
-          {
-      initialWidth,
-      width
-    } = _getThemeProps,
-          other = _objectWithoutPropertiesLoose(_getThemeProps, _excluded);
-
+        theme,
+        name: 'MuiWithWidth',
+        props
+      }),
+      {
+        initialWidth,
+        width
+      } = _getThemeProps,
+      other = _objectWithoutPropertiesLoose(_getThemeProps, _excluded);
     const [mountedState, setMountedState] = React.useState(false);
     useEnhancedEffect(() => {
       setMountedState(true);
     }, []);
+
     /**
      * innerWidth |xs      sm      md      lg      xl
      *            |-------|-------|-------|-------|------>
      * width      |  xs   |  sm   |  md   |  lg   |  xl
      */
-
     const keys = theme.breakpoints.keys.slice().reverse();
     const widthComputed = keys.reduce((output, key) => {
       // eslint-disable-next-line react-hooks/rules-of-hooks
       const matches = useMediaQuery(theme.breakpoints.up(key));
       return !output && matches ? key : output;
     }, null);
-
     const more = _extends({
       width: width || (mountedState || noSSR ? widthComputed : undefined) || initialWidth || initialWidthOption
     }, withThemeOption ? {
       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,
@@ -96,23 +89,18 @@ const withWidth = (options = {}) => Component => {
      * 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(${getDisplayName(Component)})`;
   }
-
   return WithWidth;
 };
-
 export default withWidth;

package/modern/Icon/Icon.js

@@ -10,7 +10,6 @@ import useThemeProps from '../styles/useThemeProps';
 import capitalize from '../utils/capitalize';
 import { getIconUtilityClass } from './iconClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-
 const useUtilityClasses = ownerState => {
   const {
     color,
@@ -22,7 +21,6 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getIconUtilityClass, classes);
 };
-
 const IconRoot = styled('span', {
   name: 'MuiIcon',
   slot: 'Root',
@@ -71,27 +69,25 @@ const Icon = /*#__PURE__*/React.forwardRef(function Icon(inProps, ref) {
     props: inProps,
     name: 'MuiIcon'
   });
-
   const {
-    baseClassName = 'material-icons',
-    className,
-    color = 'inherit',
-    component: Component = 'span',
-    fontSize = 'medium'
-  } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded);
-
+      baseClassName = 'material-icons',
+      className,
+      color = 'inherit',
+      component: Component = 'span',
+      fontSize = 'medium'
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const ownerState = _extends({}, props, {
     baseClassName,
     color,
     component: Component,
     fontSize
   });
-
   const 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,
@@ -99,60 +95,46 @@ const 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/modern/IconButton/IconButton.js

@@ -13,7 +13,6 @@ import ButtonBase from '../ButtonBase';
 import capitalize from '../utils/capitalize';
 import iconButtonClasses, { getIconButtonUtilityClass } from './iconButtonClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -27,7 +26,6 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getIconButtonUtilityClass, classes);
 };
-
 const IconButtonRoot = styled(ButtonBase, {
   name: 'MuiIconButton',
   slot: 'Root',
@@ -67,52 +65,54 @@ const IconButtonRoot = styled(ButtonBase, {
 }), ({
   theme,
   ownerState
-}) => _extends({}, ownerState.color === 'inherit' && {
-  color: 'inherit'
-}, ownerState.color !== 'inherit' && ownerState.color !== 'default' && _extends({
-  color: (theme.vars || theme).palette[ownerState.color].main
-}, !ownerState.disableRipple && {
-  '&:hover': {
-    backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
-    // Reset on touch devices, it doesn't add specificity
-    '@media (hover: none)': {
-      backgroundColor: 'transparent'
+}) => {
+  const palette = (theme.vars || theme).palette?.[ownerState.color];
+  return _extends({}, ownerState.color === 'inherit' && {
+    color: 'inherit'
+  }, ownerState.color !== 'inherit' && ownerState.color !== 'default' && _extends({
+    color: palette?.main
+  }, !ownerState.disableRipple && {
+    '&:hover': _extends({}, palette && {
+      backgroundColor: theme.vars ? `rgba(${palette.mainChannel} / ${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)
+  }, ownerState.size === 'large' && {
+    padding: 12,
+    fontSize: theme.typography.pxToRem(28)
+  }, {
+    [`&.${iconButtonClasses.disabled}`]: {
+      backgroundColor: 'transparent',
+      color: (theme.vars || theme).palette.action.disabled
     }
-  }
-}), ownerState.size === 'small' && {
-  padding: 5,
-  fontSize: theme.typography.pxToRem(18)
-}, ownerState.size === 'large' && {
-  padding: 12,
-  fontSize: theme.typography.pxToRem(28)
-}, {
-  [`&.${iconButtonClasses.disabled}`]: {
-    backgroundColor: 'transparent',
-    color: (theme.vars || theme).palette.action.disabled
-  }
-}));
+  });
+});
+
 /**
  * Refer to the [Icons](/material-ui/icons/) section of the documentation
  * regarding the available icon options.
  */
-
 const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, ref) {
   const props = useThemeProps({
     props: inProps,
     name: 'MuiIconButton'
   });
-
   const {
-    edge = false,
-    children,
-    className,
-    color = 'default',
-    disabled = false,
-    disableFocusRipple = false,
-    size = 'medium'
-  } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded);
-
+      edge = false,
+      children,
+      className,
+      color = 'default',
+      disabled = false,
+      disableFocusRipple = false,
+      size = 'medium'
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const ownerState = _extends({}, props, {
     edge,
     color,
@@ -120,7 +120,6 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, re
     disableFocusRipple,
     size
   });
-
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsx(IconButtonRoot, _extends({
     className: clsx(classes.root, className),
@@ -133,59 +132,46 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, re
     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.
    */
   children: chainPropTypes(PropTypes.node, props => {
     const found = React.Children.toArray(props.children).some(child => /*#__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.
    *
@@ -194,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
@@ -203,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.
    */