@mui/material 5.10.12 → 5.10.14

package/modern/Collapse/Collapse.js

@@ -15,7 +15,6 @@ import useTheme from '../styles/useTheme';
 import { useForkRef } from '../utils';
 import { getCollapseUtilityClass } from './collapseClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-
 const useUtilityClasses = ownerState => {
   const {
     orientation,
@@ -30,7 +29,6 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getCollapseUtilityClass, classes);
 };
-
 const CollapseRoot = styled('div', {
   name: 'MuiCollapse',
   slot: 'Root',
@@ -85,45 +83,42 @@ const CollapseWrapperInner = styled('div', {
   width: 'auto',
   height: '100%'
 }));
+
 /**
  * The Collapse transition is used by the
  * [Vertical Stepper](/material-ui/react-stepper/#vertical-stepper) StepContent component.
  * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
  */
-
 const Collapse = /*#__PURE__*/React.forwardRef(function Collapse(inProps, ref) {
   const props = useThemeProps({
     props: inProps,
     name: 'MuiCollapse'
   });
-
   const {
-    addEndListener,
-    children,
-    className,
-    collapsedSize: collapsedSizeProp = '0px',
-    component,
-    easing,
-    in: inProp,
-    onEnter,
-    onEntered,
-    onEntering,
-    onExit,
-    onExited,
-    onExiting,
-    orientation = 'vertical',
-    style,
-    timeout = duration.standard,
-    // eslint-disable-next-line react/prop-types
-    TransitionComponent = Transition
-  } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded);
-
+      addEndListener,
+      children,
+      className,
+      collapsedSize: collapsedSizeProp = '0px',
+      component,
+      easing,
+      in: inProp,
+      onEnter,
+      onEntered,
+      onEntering,
+      onExit,
+      onExited,
+      onExiting,
+      orientation = 'vertical',
+      style,
+      timeout = duration.standard,
+      // eslint-disable-next-line react/prop-types
+      TransitionComponent = Transition
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const ownerState = _extends({}, props, {
     orientation,
     collapsedSize: collapsedSizeProp
   });
-
   const classes = useUtilityClasses(ownerState);
   const theme = useTheme();
   const timer = React.useRef();
@@ -139,11 +134,11 @@ const Collapse = /*#__PURE__*/React.forwardRef(function Collapse(inProps, ref) {
   }, []);
   const nodeRef = React.useRef(null);
   const handleRef = useForkRef(ref, nodeRef);
-
   const normalizedTransitionCallback = callback => maybeIsAppearing => {
     if (callback) {
-      const node = nodeRef.current; // onEnterXxx and onExitXxx callbacks have a different arguments.length value.
+      const node = nodeRef.current;
 
+      // onEnterXxx and onExitXxx callbacks have a different arguments.length value.
       if (maybeIsAppearing === undefined) {
         callback(node);
       } else {
@@ -151,29 +146,23 @@ const Collapse = /*#__PURE__*/React.forwardRef(function Collapse(inProps, ref) {
       }
     }
   };
-
   const getWrapperSize = () => wrapperRef.current ? wrapperRef.current[isHorizontal ? 'clientWidth' : 'clientHeight'] : 0;
-
   const handleEnter = normalizedTransitionCallback((node, isAppearing) => {
     if (wrapperRef.current && isHorizontal) {
       // Set absolute position to get the size of collapsed content
       wrapperRef.current.style.position = 'absolute';
     }
-
     node.style[size] = collapsedSize;
-
     if (onEnter) {
       onEnter(node, isAppearing);
     }
   });
   const handleEntering = normalizedTransitionCallback((node, isAppearing) => {
     const wrapperSize = getWrapperSize();
-
     if (wrapperRef.current && isHorizontal) {
       // After the size is read reset the position back to default
       wrapperRef.current.style.position = '';
     }
-
     const {
       duration: transitionDuration,
       easing: transitionTimingFunction
@@ -184,7 +173,6 @@ const Collapse = /*#__PURE__*/React.forwardRef(function Collapse(inProps, ref) {
     }, {
       mode: 'enter'
     });
-
     if (timeout === 'auto') {
       const duration2 = theme.transitions.getAutoHeightDuration(wrapperSize);
       node.style.transitionDuration = `${duration2}ms`;
@@ -192,24 +180,20 @@ const Collapse = /*#__PURE__*/React.forwardRef(function Collapse(inProps, ref) {
     } else {
       node.style.transitionDuration = typeof transitionDuration === 'string' ? transitionDuration : `${transitionDuration}ms`;
     }
-
     node.style[size] = `${wrapperSize}px`;
     node.style.transitionTimingFunction = transitionTimingFunction;
-
     if (onEntering) {
       onEntering(node, isAppearing);
     }
   });
   const handleEntered = normalizedTransitionCallback((node, isAppearing) => {
     node.style[size] = 'auto';
-
     if (onEntered) {
       onEntered(node, isAppearing);
     }
   });
   const handleExit = normalizedTransitionCallback(node => {
     node.style[size] = `${getWrapperSize()}px`;
-
     if (onExit) {
       onExit(node);
     }
@@ -227,7 +211,6 @@ const Collapse = /*#__PURE__*/React.forwardRef(function Collapse(inProps, ref) {
     }, {
       mode: 'exit'
     });
-
     if (timeout === 'auto') {
       // TODO: rename getAutoHeightDuration to something more generic (width support)
       // Actually it just calculates animation duration based on size
@@ -237,26 +220,21 @@ const Collapse = /*#__PURE__*/React.forwardRef(function Collapse(inProps, ref) {
     } else {
       node.style.transitionDuration = typeof transitionDuration === 'string' ? transitionDuration : `${transitionDuration}ms`;
     }
-
     node.style[size] = collapsedSize;
     node.style.transitionTimingFunction = transitionTimingFunction;
-
     if (onExiting) {
       onExiting(node);
     }
   });
-
   const handleAddEndListener = next => {
     if (timeout === 'auto') {
       timer.current = setTimeout(next, autoTransitionDuration.current || 0);
     }
-
     if (addEndListener) {
       // Old call signature before `react-transition-group` implemented `nodeRef`
       addEndListener(nodeRef.current, next);
     }
   };
-
   return /*#__PURE__*/_jsx(TransitionComponent, _extends({
     in: inProp,
     onEnter: handleEnter,
@@ -300,48 +278,39 @@ const Collapse = /*#__PURE__*/React.forwardRef(function Collapse(inProps, ref) {
     }))
   }));
 });
-process.env.NODE_ENV !== "production" ? Collapse.propTypes
-/* remove-proptypes */
-= {
+process.env.NODE_ENV !== "production" ? Collapse.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"     |
   // ----------------------------------------------------------------------
-
   /**
    * Add a custom transition end trigger. Called with the transitioning DOM
    * node and a done callback. Allows for more fine grained transition end
    * logic. Note: Timeouts are still used as a fallback if provided.
    */
   addEndListener: PropTypes.func,
-
   /**
    * The content node to be collapsed.
    */
   children: PropTypes.node,
-
   /**
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
-
   /**
    * @ignore
    */
   className: PropTypes.string,
-
   /**
    * The width (horizontal) or height (vertical) of the container when collapsed.
    * @default '0px'
    */
   collapsedSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
   /**
    * The component used for the root node.
    * Either a string to use a HTML element or a component.
    */
   component: elementTypeAcceptingRef,
-
   /**
    * The transition timing function.
    * You may specify a single easing or a object containing enter and exit values.
@@ -350,58 +319,47 @@ process.env.NODE_ENV !== "production" ? Collapse.propTypes
     enter: PropTypes.string,
     exit: PropTypes.string
   }), PropTypes.string]),
-
   /**
    * If `true`, the component will transition in.
    */
   in: PropTypes.bool,
-
   /**
    * @ignore
    */
   onEnter: PropTypes.func,
-
   /**
    * @ignore
    */
   onEntered: PropTypes.func,
-
   /**
    * @ignore
    */
   onEntering: PropTypes.func,
-
   /**
    * @ignore
    */
   onExit: PropTypes.func,
-
   /**
    * @ignore
    */
   onExited: PropTypes.func,
-
   /**
    * @ignore
    */
   onExiting: PropTypes.func,
-
   /**
    * The transition orientation.
    * @default 'vertical'
    */
   orientation: PropTypes.oneOf(['horizontal', 'vertical']),
-
   /**
    * @ignore
    */
   style: PropTypes.object,
-
   /**
    * 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 duration for the transition, in milliseconds.
    * You may specify a single timeout for all transitions, or individually with an object.

package/modern/Container/Container.js

@@ -20,36 +20,29 @@ const Container = createContainer({
     name: 'MuiContainer'
   })
 });
-process.env.NODE_ENV !== "production" ? Container.propTypes
-/* remove-proptypes */
-= {
+process.env.NODE_ENV !== "production" ? Container.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"     |
   // ----------------------------------------------------------------------
-
   /**
    * @ignore
    */
   children: PropTypes.node,
-
   /**
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
-
   /**
    * The component used for the root node.
    * Either a string to use a HTML element or a component.
    */
   component: PropTypes.elementType,
-
   /**
    * If `true`, the left and right padding is removed.
    * @default false
    */
   disableGutters: PropTypes.bool,
-
   /**
    * Set the max-width to match the min-width of the current breakpoint.
    * This is useful if you'd prefer to design for a fixed set of sizes
@@ -58,17 +51,13 @@ process.env.NODE_ENV !== "production" ? Container.propTypes
    * @default false
    */
   fixed: PropTypes.bool,
-
   /**
    * Determine the max-width of the container.
    * The container width grows with the size of the screen.
    * Set to `false` to disable `maxWidth`.
    * @default 'lg'
    */
-  maxWidth: PropTypes
-  /* @typescript-to-proptypes-ignore */
-  .oneOfType([PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', false]), PropTypes.string]),
-
+  maxWidth: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', false]), PropTypes.string]),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/modern/CssBaseline/CssBaseline.js

@@ -29,7 +29,6 @@ export const body = theme => _extends({
 });
 export const styles = (theme, enableColorScheme = false) => {
   const colorSchemeStyles = {};
-
   if (enableColorScheme && theme.colorSchemes) {
     Object.entries(theme.colorSchemes).forEach(([key, scheme]) => {
       colorSchemeStyles[theme.getColorSchemeSelector(key).replace(/\s*&/, '')] = {
@@ -37,7 +36,6 @@ export const styles = (theme, enableColorScheme = false) => {
       };
     });
   }
-
   let defaultStyles = _extends({
     html: html(theme, enableColorScheme),
     '*, *::before, *::after': {
@@ -56,19 +54,16 @@ export const styles = (theme, enableColorScheme = false) => {
       }
     })
   }, colorSchemeStyles);
-
   const themeOverrides = theme.components?.MuiCssBaseline?.styleOverrides;
-
   if (themeOverrides) {
     defaultStyles = [defaultStyles, themeOverrides];
   }
-
   return defaultStyles;
 };
+
 /**
  * Kickstart an elegant, consistent, and simple baseline to build upon.
  */
-
 function CssBaseline(inProps) {
   const props = useThemeProps({
     props: inProps,
@@ -84,20 +79,15 @@ function CssBaseline(inProps) {
     }), children]
   });
 }
-
-process.env.NODE_ENV !== "production" ? CssBaseline.propTypes
-/* remove-proptypes */
-= {
+process.env.NODE_ENV !== "production" ? CssBaseline.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"     |
   // ----------------------------------------------------------------------
-
   /**
    * You can wrap a node.
    */
   children: PropTypes.node,
-
   /**
    * Enable `color-scheme` CSS property to use `theme.palette.mode`.
    * For more details, check out https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme

package/modern/Dialog/Dialog.js

@@ -25,7 +25,6 @@ const DialogBackdrop = styled(Backdrop, {
   // Improve scrollable dialog support.
   zIndex: -1
 });
-
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -41,7 +40,6 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getDialogUtilityClass, classes);
 };
-
 const DialogRoot = styled(Modal, {
   name: 'MuiDialog',
   slot: 'Root',
@@ -115,7 +113,6 @@ const DialogPaper = styled(Paper, {
   display: 'inline-block',
   verticalAlign: 'middle',
   textAlign: 'left' // 'initial' doesn't work on IE11
-
 }, !ownerState.maxWidth && {
   maxWidth: 'calc(100% - 64px)'
 }, ownerState.maxWidth === 'xs' && {
@@ -146,10 +143,10 @@ const DialogPaper = styled(Paper, {
     maxWidth: '100%'
   }
 }));
+
 /**
  * Dialogs are overlaid modal paper based components with a backdrop.
  */
-
 const Dialog = /*#__PURE__*/React.forwardRef(function Dialog(inProps, ref) {
   const props = useThemeProps({
     props: inProps,
@@ -160,30 +157,28 @@ const Dialog = /*#__PURE__*/React.forwardRef(function Dialog(inProps, ref) {
     enter: theme.transitions.duration.enteringScreen,
     exit: theme.transitions.duration.leavingScreen
   };
-
   const {
-    'aria-describedby': ariaDescribedby,
-    'aria-labelledby': ariaLabelledbyProp,
-    BackdropComponent,
-    BackdropProps,
-    children,
-    className,
-    disableEscapeKeyDown = false,
-    fullScreen = false,
-    fullWidth = false,
-    maxWidth = 'sm',
-    onBackdropClick,
-    onClose,
-    open,
-    PaperComponent = Paper,
-    PaperProps = {},
-    scroll = 'paper',
-    TransitionComponent = Fade,
-    transitionDuration = defaultTransitionDuration,
-    TransitionProps
-  } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded);
-
+      'aria-describedby': ariaDescribedby,
+      'aria-labelledby': ariaLabelledbyProp,
+      BackdropComponent,
+      BackdropProps,
+      children,
+      className,
+      disableEscapeKeyDown = false,
+      fullScreen = false,
+      fullWidth = false,
+      maxWidth = 'sm',
+      onBackdropClick,
+      onClose,
+      open,
+      PaperComponent = Paper,
+      PaperProps = {},
+      scroll = 'paper',
+      TransitionComponent = Fade,
+      transitionDuration = defaultTransitionDuration,
+      TransitionProps
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const ownerState = _extends({}, props, {
     disableEscapeKeyDown,
     fullScreen,
@@ -191,33 +186,26 @@ const Dialog = /*#__PURE__*/React.forwardRef(function Dialog(inProps, ref) {
     maxWidth,
     scroll
   });
-
   const classes = useUtilityClasses(ownerState);
   const backdropClick = React.useRef();
-
   const handleMouseDown = event => {
     // We don't want to close the dialog when clicking the dialog content.
     // Make sure the event starts and ends on the same DOM element.
     backdropClick.current = event.target === event.currentTarget;
   };
-
   const handleBackdropClick = event => {
     // Ignore the events not coming from the "backdrop".
     if (!backdropClick.current) {
       return;
     }
-
     backdropClick.current = null;
-
     if (onBackdropClick) {
       onBackdropClick(event);
     }
-
     if (onClose) {
       onClose(event, 'backdropClick');
     }
   };
-
   const ariaLabelledby = useId(ariaLabelledbyProp);
   const dialogContextValue = React.useMemo(() => {
     return {
@@ -271,24 +259,19 @@ const Dialog = /*#__PURE__*/React.forwardRef(function Dialog(inProps, ref) {
     }))
   }));
 });
-process.env.NODE_ENV !== "production" ? Dialog.propTypes
-/* remove-proptypes */
-= {
+process.env.NODE_ENV !== "production" ? Dialog.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 id(s) of the element(s) that describe the dialog.
    */
   'aria-describedby': PropTypes.string,
-
   /**
    * The id(s) of the element(s) that label the dialog.
    */
   'aria-labelledby': PropTypes.string,
-
   /**
    * A backdrop component. This prop enables custom backdrop rendering.
    * @deprecated Use `slots.backdrop` instead. While this prop currently works, it will be removed in the next major version.
@@ -304,39 +287,32 @@ process.env.NODE_ENV !== "production" ? Dialog.propTypes
    * })
    */
   BackdropComponent: PropTypes.elementType,
-
   /**
    * @ignore
    */
   BackdropProps: PropTypes.object,
-
   /**
    * Dialog children, usually the included sub-components.
    */
   children: PropTypes.node,
-
   /**
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
-
   /**
    * @ignore
    */
   className: PropTypes.string,
-
   /**
    * If `true`, hitting escape will not fire the `onClose` callback.
    * @default false
    */
   disableEscapeKeyDown: PropTypes.bool,
-
   /**
    * If `true`, the dialog is full-screen.
    * @default false
    */
   fullScreen: PropTypes.bool,
-
   /**
    * If `true`, the dialog stretches to `maxWidth`.
    *
@@ -344,23 +320,18 @@ process.env.NODE_ENV !== "production" ? Dialog.propTypes
    * @default false
    */
   fullWidth: PropTypes.bool,
-
   /**
    * Determine the max-width of the dialog.
    * The dialog width grows with the size of the screen.
    * Set to `false` to disable `maxWidth`.
    * @default 'sm'
    */
-  maxWidth: PropTypes
-  /* @typescript-to-proptypes-ignore */
-  .oneOfType([PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', false]), PropTypes.string]),
-
+  maxWidth: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', false]), PropTypes.string]),
   /**
    * Callback fired when the backdrop is clicked.
    * @deprecated Use the `onClose` prop with the `reason` argument to handle the `backdropClick` events.
    */
   onBackdropClick: PropTypes.func,
-
   /**
    * Callback fired when the component requests to be closed.
    *
@@ -368,42 +339,35 @@ process.env.NODE_ENV !== "production" ? Dialog.propTypes
    * @param {string} reason Can be: `"escapeKeyDown"`, `"backdropClick"`.
    */
   onClose: PropTypes.func,
-
   /**
    * If `true`, the component is shown.
    */
   open: PropTypes.bool.isRequired,
-
   /**
    * The component used to render the body of the dialog.
    * @default Paper
    */
   PaperComponent: PropTypes.elementType,
-
   /**
    * Props applied to the [`Paper`](/material-ui/api/paper/) element.
    * @default {}
    */
   PaperProps: PropTypes.object,
-
   /**
    * Determine the container for scrolling the dialog.
    * @default 'paper'
    */
   scroll: PropTypes.oneOf(['body', 'paper']),
-
   /**
    * 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 component used for the transition.
    * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
    * @default Fade
    */
   TransitionComponent: PropTypes.elementType,
-
   /**
    * The duration for the transition, in milliseconds.
    * You may specify a single timeout for all transitions, or individually with an object.
@@ -417,7 +381,6 @@ process.env.NODE_ENV !== "production" ? Dialog.propTypes
     enter: PropTypes.number,
     exit: PropTypes.number
   })]),
-
   /**
    * Props applied to the transition element.
    * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component.

package/modern/Dialog/DialogContext.js

@@ -1,8 +1,6 @@
 import { createContext } from 'react';
 const DialogContext = /*#__PURE__*/createContext({});
-
 if (process.env.NODE_ENV !== 'production') {
   DialogContext.displayName = 'DialogContext';
 }
-
 export default DialogContext;