@mui/material 5.10.13 → 5.10.14

package/modern/ButtonBase/TouchRipple.js

@@ -59,9 +59,10 @@ export const TouchRippleRoot = styled('span', {
   bottom: 0,
   left: 0,
   borderRadius: 'inherit'
-}); // This `styled()` function invokes keyframes. `styled-components` only supports keyframes
-// in string templates. Do not convert these styles in JS object as it will break.
+});
 
+// This `styled()` function invokes keyframes. `styled-components` only supports keyframes
+// in string templates. Do not convert these styles in JS object as it will break.
 export const TouchRippleRipple = styled(Ripple, {
   name: 'MuiTouchRipple',
   slot: 'Ripple'
@@ -117,25 +118,23 @@ export const TouchRippleRipple = styled(Ripple, {
     animation-delay: 200ms;
   }
 `;
+
 /**
  * @ignore - internal component.
  *
  * TODO v5: Make private
  */
-
 const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps, ref) {
   const props = useThemeProps({
     props: inProps,
     name: 'MuiTouchRipple'
   });
-
   const {
-    center: centerProp = false,
-    classes = {},
-    className
-  } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded);
-
+      center: centerProp = false,
+      classes = {},
+      className
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const [ripples, setRipples] = React.useState([]);
   const nextKey = React.useRef(0);
   const rippleCallback = React.useRef(null);
@@ -144,13 +143,15 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
       rippleCallback.current();
       rippleCallback.current = null;
     }
-  }, [ripples]); // Used to filter out mouse emulated events on mobile.
+  }, [ripples]);
 
-  const ignoringMouseDown = React.useRef(false); // We use a timer in order to only show the ripples for touch "click" like events.
+  // Used to filter out mouse emulated events on mobile.
+  const ignoringMouseDown = React.useRef(false);
+  // We use a timer in order to only show the ripples for touch "click" like events.
   // We don't want to display the ripple for touch scroll events.
+  const startTimer = React.useRef(null);
 
-  const startTimer = React.useRef(null); // This is the hook called once the previous timeout is ready.
-
+  // This is the hook called once the previous timeout is ready.
   const startTimerCommit = React.useRef(null);
   const container = React.useRef(null);
   React.useEffect(() => {
@@ -189,30 +190,26 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
       pulsate = false,
       center = centerProp || options.pulsate,
       fakeElement = false // For test purposes
-
     } = options;
-
     if (event?.type === 'mousedown' && ignoringMouseDown.current) {
       ignoringMouseDown.current = false;
       return;
     }
-
     if (event?.type === 'touchstart') {
       ignoringMouseDown.current = true;
     }
-
     const element = fakeElement ? null : container.current;
     const rect = element ? element.getBoundingClientRect() : {
       width: 0,
       height: 0,
       left: 0,
       top: 0
-    }; // Get the size of the ripple
+    };
 
+    // Get the size of the ripple
     let rippleX;
     let rippleY;
     let rippleSize;
-
     if (center || event === undefined || event.clientX === 0 && event.clientY === 0 || !event.clientX && !event.touches) {
       rippleX = Math.round(rect.width / 2);
       rippleY = Math.round(rect.height / 2);
@@ -224,10 +221,10 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
       rippleX = Math.round(clientX - rect.left);
       rippleY = Math.round(clientY - rect.top);
     }
-
     if (center) {
-      rippleSize = Math.sqrt((2 * rect.width ** 2 + rect.height ** 2) / 3); // For some reason the animation is broken on Mobile Chrome if the size is even.
+      rippleSize = Math.sqrt((2 * rect.width ** 2 + rect.height ** 2) / 3);
 
+      // For some reason the animation is broken on Mobile Chrome if the size is even.
       if (rippleSize % 2 === 0) {
         rippleSize += 1;
       }
@@ -235,9 +232,9 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
       const sizeX = Math.max(Math.abs((element ? element.clientWidth : 0) - rippleX), rippleX) * 2 + 2;
       const sizeY = Math.max(Math.abs((element ? element.clientHeight : 0) - rippleY), rippleY) * 2 + 2;
       rippleSize = Math.sqrt(sizeX ** 2 + sizeY ** 2);
-    } // Touche devices
-
+    }
 
+    // Touche devices
     if (event?.touches) {
       // check that this isn't another touchstart due to multitouch
       // otherwise we will only clear a single timer when unmounting while two
@@ -252,9 +249,8 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
             rippleSize,
             cb
           });
-        }; // Delay the execution of the ripple effect.
-
-
+        };
+        // Delay the execution of the ripple effect.
         startTimer.current = setTimeout(() => {
           if (startTimerCommit.current) {
             startTimerCommit.current();
@@ -278,9 +274,10 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
     });
   }, [start]);
   const stop = React.useCallback((event, cb) => {
-    clearTimeout(startTimer.current); // The touch interaction occurs too quickly.
-    // We still want to show ripple effect.
+    clearTimeout(startTimer.current);
 
+    // The touch interaction occurs too quickly.
+    // We still want to show ripple effect.
     if (event?.type === 'touchend' && startTimerCommit.current) {
       startTimerCommit.current();
       startTimerCommit.current = null;
@@ -289,13 +286,11 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
       });
       return;
     }
-
     startTimerCommit.current = null;
     setRipples(oldRipples => {
       if (oldRipples.length > 0) {
         return oldRipples.slice(1);
       }
-
       return oldRipples;
     });
     rippleCallback.current = cb;
@@ -322,13 +317,11 @@ process.env.NODE_ENV !== "production" ? TouchRipple.propTypes = {
    * rather than at the point of interaction.
    */
   center: PropTypes.bool,
-
   /**
    * Override or extend the styles applied to the component.
    * See [CSS API](#css) below for more details.
    */
   classes: PropTypes.object,
-
   /**
    * @ignore
    */

package/modern/ButtonGroup/ButtonGroup.js

@@ -12,7 +12,6 @@ import useThemeProps from '../styles/useThemeProps';
 import buttonGroupClasses, { getButtonGroupUtilityClass } from './buttonGroupClasses';
 import ButtonGroupContext from './ButtonGroupContext';
 import { jsx as _jsx } from "react/jsx-runtime";
-
 const overridesResolver = (props, styles) => {
   const {
     ownerState
@@ -29,7 +28,6 @@ const overridesResolver = (props, styles) => {
     [`& .${buttonGroupClasses.grouped}`]: styles[`grouped${capitalize(ownerState.variant)}${capitalize(ownerState.color)}`]
   }, styles.root, styles[ownerState.variant], ownerState.disableElevation === true && styles.disableElevation, ownerState.fullWidth && styles.fullWidth, ownerState.orientation === 'vertical' && styles.vertical];
 };
-
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -46,7 +44,6 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getButtonGroupUtilityClass, classes);
 };
-
 const ButtonGroupRoot = styled('div', {
   name: 'MuiButtonGroup',
   slot: 'Root',
@@ -126,23 +123,21 @@ const ButtonGroup = /*#__PURE__*/React.forwardRef(function ButtonGroup(inProps,
     props: inProps,
     name: 'MuiButtonGroup'
   });
-
   const {
-    children,
-    className,
-    color = 'primary',
-    component = 'div',
-    disabled = false,
-    disableElevation = false,
-    disableFocusRipple = false,
-    disableRipple = false,
-    fullWidth = false,
-    orientation = 'horizontal',
-    size = 'medium',
-    variant = 'outlined'
-  } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded);
-
+      children,
+      className,
+      color = 'primary',
+      component = 'div',
+      disabled = false,
+      disableElevation = false,
+      disableFocusRipple = false,
+      disableRipple = false,
+      fullWidth = false,
+      orientation = 'horizontal',
+      size = 'medium',
+      variant = 'outlined'
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const ownerState = _extends({}, props, {
     color,
     component,
@@ -155,7 +150,6 @@ const ButtonGroup = /*#__PURE__*/React.forwardRef(function ButtonGroup(inProps,
     size,
     variant
   });
-
   const classes = useUtilityClasses(ownerState);
   const context = React.useMemo(() => ({
     className: classes.grouped,
@@ -181,101 +175,79 @@ const ButtonGroup = /*#__PURE__*/React.forwardRef(function ButtonGroup(inProps,
     })
   }));
 });
-process.env.NODE_ENV !== "production" ? ButtonGroup.propTypes
-/* remove-proptypes */
-= {
+process.env.NODE_ENV !== "production" ? ButtonGroup.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 content of the component.
    */
   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 'primary'
    */
-  color: PropTypes
-  /* @typescript-to-proptypes-ignore */
-  .oneOfType([PropTypes.oneOf(['inherit', 'primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
-
+  color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['inherit', '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,
-
   /**
    * If `true`, the component is disabled.
    * @default false
    */
   disabled: PropTypes.bool,
-
   /**
    * If `true`, no elevation is used.
    * @default false
    */
   disableElevation: PropTypes.bool,
-
   /**
    * If `true`, the button keyboard focus ripple is disabled.
    * @default false
    */
   disableFocusRipple: PropTypes.bool,
-
   /**
    * If `true`, the button ripple effect is disabled.
    * @default false
    */
   disableRipple: PropTypes.bool,
-
   /**
    * If `true`, the buttons will take up the full width of its container.
    * @default false
    */
   fullWidth: PropTypes.bool,
-
   /**
    * The component orientation (layout flow direction).
    * @default 'horizontal'
    */
   orientation: PropTypes.oneOf(['horizontal', 'vertical']),
-
   /**
    * 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.
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-
   /**
    * The variant to use.
    * @default 'outlined'
    */
-  variant: PropTypes
-  /* @typescript-to-proptypes-ignore */
-  .oneOfType([PropTypes.oneOf(['contained', 'outlined', 'text']), PropTypes.string])
+  variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['contained', 'outlined', 'text']), PropTypes.string])
 } : void 0;
 export default ButtonGroup;

package/modern/ButtonGroup/ButtonGroupContext.js

@@ -1,12 +1,9 @@
 import * as React from 'react';
-
 /**
  * @ignore - internal component.
  */
 const ButtonGroupContext = /*#__PURE__*/React.createContext({});
-
 if (process.env.NODE_ENV !== 'production') {
   ButtonGroupContext.displayName = 'ButtonGroupContext';
 }
-
 export default ButtonGroupContext;

package/modern/Card/Card.js

@@ -11,7 +11,6 @@ import useThemeProps from '../styles/useThemeProps';
 import Paper from '../Paper';
 import { getCardUtilityClass } from './cardClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -21,7 +20,6 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getCardUtilityClass, classes);
 };
-
 const CardRoot = styled(Paper, {
   name: 'MuiCard',
   slot: 'Root',
@@ -36,17 +34,14 @@ const Card = /*#__PURE__*/React.forwardRef(function Card(inProps, ref) {
     props: inProps,
     name: 'MuiCard'
   });
-
   const {
-    className,
-    raised = false
-  } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded);
-
+      className,
+      raised = false
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const ownerState = _extends({}, props, {
     raised
   });
-
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsx(CardRoot, _extends({
     className: clsx(classes.root, className),
@@ -55,29 +50,23 @@ const Card = /*#__PURE__*/React.forwardRef(function Card(inProps, ref) {
     ownerState: ownerState
   }, other));
 });
-process.env.NODE_ENV !== "production" ? Card.propTypes
-/* remove-proptypes */
-= {
+process.env.NODE_ENV !== "production" ? Card.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 content of the component.
    */
   children: PropTypes.node,
-
   /**
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
-
   /**
    * @ignore
    */
   className: PropTypes.string,
-
   /**
    * If `true`, the card will use raised styling.
    * @default false
@@ -86,10 +75,8 @@ process.env.NODE_ENV !== "production" ? Card.propTypes
     if (props.raised && props.variant === 'outlined') {
       return new Error('MUI: Combining `raised={true}` with `variant="outlined"` has no effect.');
     }
-
     return null;
   }),
-
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/modern/CardActionArea/CardActionArea.js

@@ -11,7 +11,6 @@ import cardActionAreaClasses, { getCardActionAreaUtilityClass } from './cardActi
 import ButtonBase from '../ButtonBase';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -22,7 +21,6 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getCardActionAreaUtilityClass, classes);
 };
-
 const CardActionAreaRoot = styled(ButtonBase, {
   name: 'MuiCardActionArea',
   slot: 'Root',
@@ -69,14 +67,12 @@ const CardActionArea = /*#__PURE__*/React.forwardRef(function CardActionArea(inP
     props: inProps,
     name: 'MuiCardActionArea'
   });
-
   const {
-    children,
-    className,
-    focusVisibleClassName
-  } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded);
-
+      children,
+      className,
+      focusVisibleClassName
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const ownerState = props;
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsxs(CardActionAreaRoot, _extends({
@@ -91,34 +87,27 @@ const CardActionArea = /*#__PURE__*/React.forwardRef(function CardActionArea(inP
     })]
   }));
 });
-process.env.NODE_ENV !== "production" ? CardActionArea.propTypes
-/* remove-proptypes */
-= {
+process.env.NODE_ENV !== "production" ? CardActionArea.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 content of the component.
    */
   children: PropTypes.node,
-
   /**
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
-
   /**
    * @ignore
    */
   className: PropTypes.string,
-
   /**
    * @ignore
    */
   focusVisibleClassName: PropTypes.string,
-
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/modern/CardActions/CardActions.js

@@ -9,7 +9,6 @@ import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import { getCardActionsUtilityClass } from './cardActionsClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -20,7 +19,6 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getCardActionsUtilityClass, classes);
 };
-
 const CardActionsRoot = styled('div', {
   name: 'MuiCardActions',
   slot: 'Root',
@@ -46,17 +44,14 @@ const CardActions = /*#__PURE__*/React.forwardRef(function CardActions(inProps,
     props: inProps,
     name: 'MuiCardActions'
   });
-
   const {
-    disableSpacing = false,
-    className
-  } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded);
-
+      disableSpacing = false,
+      className
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const ownerState = _extends({}, props, {
     disableSpacing
   });
-
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsx(CardActionsRoot, _extends({
     className: clsx(classes.root, className),
@@ -64,35 +59,28 @@ const CardActions = /*#__PURE__*/React.forwardRef(function CardActions(inProps,
     ref: ref
   }, other));
 });
-process.env.NODE_ENV !== "production" ? CardActions.propTypes
-/* remove-proptypes */
-= {
+process.env.NODE_ENV !== "production" ? CardActions.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 content of the component.
    */
   children: PropTypes.node,
-
   /**
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
-
   /**
    * @ignore
    */
   className: PropTypes.string,
-
   /**
    * If `true`, the actions do not have additional margin.
    * @default false
    */
   disableSpacing: PropTypes.bool,
-
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/modern/CardContent/CardContent.js

@@ -9,7 +9,6 @@ import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import { getCardContentUtilityClass } from './cardContentClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -19,7 +18,6 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getCardContentUtilityClass, classes);
 };
-
 const CardContentRoot = styled('div', {
   name: 'MuiCardContent',
   slot: 'Root',
@@ -37,17 +35,14 @@ const CardContent = /*#__PURE__*/React.forwardRef(function CardContent(inProps,
     props: inProps,
     name: 'MuiCardContent'
   });
-
   const {
-    className,
-    component = 'div'
-  } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded);
-
+      className,
+      component = 'div'
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const ownerState = _extends({}, props, {
     component
   });
-
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsx(CardContentRoot, _extends({
     as: component,
@@ -56,35 +51,28 @@ const CardContent = /*#__PURE__*/React.forwardRef(function CardContent(inProps,
     ref: ref
   }, other));
 });
-process.env.NODE_ENV !== "production" ? CardContent.propTypes
-/* remove-proptypes */
-= {
+process.env.NODE_ENV !== "production" ? CardContent.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 content of the component.
    */
   children: PropTypes.node,
-
   /**
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
-
   /**
    * @ignore
    */
   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 system prop that allows defining system overrides as well as additional CSS styles.
    */