@mui/material 5.10.12 → 5.10.14

package/modern/Grow/Grow.js

@@ -9,11 +9,9 @@ import useTheme from '../styles/useTheme';
 import { getTransitionProps, reflow } from '../transitions/utils';
 import useForkRef from '../utils/useForkRef';
 import { jsx as _jsx } from "react/jsx-runtime";
-
 function getScale(value) {
   return `scale(${value}, ${value ** 2})`;
 }
-
 const styles = {
   entering: {
     opacity: 1,
@@ -24,48 +22,47 @@ const styles = {
     transform: 'none'
   }
 };
+
 /*
  TODO v6: remove
  Conditionally apply a workaround for the CSS transition bug in Safari 15.4 / WebKit browsers.
  */
-
 const isWebKit154 = typeof navigator !== 'undefined' && /^((?!chrome|android).)*(safari|mobile)/i.test(navigator.userAgent) && /(os |version\/)15(.|_)4/i.test(navigator.userAgent);
+
 /**
  * The Grow transition is used by the [Tooltip](/material-ui/react-tooltip/) and
  * [Popover](/material-ui/react-popover/) components.
  * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
  */
-
 const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
   const {
-    addEndListener,
-    appear = true,
-    children,
-    easing,
-    in: inProp,
-    onEnter,
-    onEntered,
-    onEntering,
-    onExit,
-    onExited,
-    onExiting,
-    style,
-    timeout = 'auto',
-    // eslint-disable-next-line react/prop-types
-    TransitionComponent = Transition
-  } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded);
-
+      addEndListener,
+      appear = true,
+      children,
+      easing,
+      in: inProp,
+      onEnter,
+      onEntered,
+      onEntering,
+      onExit,
+      onExited,
+      onExiting,
+      style,
+      timeout = 'auto',
+      // eslint-disable-next-line react/prop-types
+      TransitionComponent = Transition
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const timer = React.useRef();
   const autoTimeout = React.useRef();
   const theme = useTheme();
   const nodeRef = React.useRef(null);
   const handleRef = useForkRef(nodeRef, children.ref, ref);
-
   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 {
@@ -73,7 +70,6 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
       }
     }
   };
-
   const handleEntering = normalizedTransitionCallback(onEntering);
   const handleEnter = normalizedTransitionCallback((node, isAppearing) => {
     reflow(node); // So the animation always start from the start.
@@ -90,14 +86,12 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
       mode: 'enter'
     });
     let duration;
-
     if (timeout === 'auto') {
       duration = theme.transitions.getAutoHeightDuration(node.clientHeight);
       autoTimeout.current = duration;
     } else {
       duration = transitionDuration;
     }
-
     node.style.transition = [theme.transitions.create('opacity', {
       duration,
       delay
@@ -106,7 +100,6 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
       delay,
       easing: transitionTimingFunction
     })].join(',');
-
     if (onEnter) {
       onEnter(node, isAppearing);
     }
@@ -126,14 +119,12 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
       mode: 'exit'
     });
     let duration;
-
     if (timeout === 'auto') {
       duration = theme.transitions.getAutoHeightDuration(node.clientHeight);
       autoTimeout.current = duration;
     } else {
       duration = transitionDuration;
     }
-
     node.style.transition = [theme.transitions.create('opacity', {
       duration,
       delay
@@ -144,24 +135,20 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
     })].join(',');
     node.style.opacity = 0;
     node.style.transform = getScale(0.75);
-
     if (onExit) {
       onExit(node);
     }
   });
   const handleExited = normalizedTransitionCallback(onExited);
-
   const handleAddEndListener = next => {
     if (timeout === 'auto') {
       timer.current = setTimeout(next, autoTimeout.current || 0);
     }
-
     if (addEndListener) {
       // Old call signature before `react-transition-group` implemented `nodeRef`
       addEndListener(nodeRef.current, next);
     }
   };
-
   React.useEffect(() => {
     return () => {
       clearTimeout(timer.current);
@@ -192,33 +179,27 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
     }
   }));
 });
-process.env.NODE_ENV !== "production" ? Grow.propTypes
-/* remove-proptypes */
-= {
+process.env.NODE_ENV !== "production" ? Grow.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,
-
   /**
    * Perform the enter transition when it first mounts if `in` is also `true`.
    * Set this to `false` to disable this behavior.
    * @default true
    */
   appear: PropTypes.bool,
-
   /**
    * A single child content element.
    */
   children: elementAcceptingRef.isRequired,
-
   /**
    * The transition timing function.
    * You may specify a single easing or a object containing enter and exit values.
@@ -227,47 +208,38 @@ process.env.NODE_ENV !== "production" ? Grow.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,
-
   /**
    * @ignore
    */
   style: 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/Hidden/Hidden.js

@@ -5,28 +5,26 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import HiddenJs from './HiddenJs';
 import HiddenCss from './HiddenCss';
+
 /**
  * Responsively hides children based on the selected implementation.
  */
-
 import { jsx as _jsx } from "react/jsx-runtime";
-
 function Hidden(props) {
   const {
-    implementation = 'js',
-    lgDown = false,
-    lgUp = false,
-    mdDown = false,
-    mdUp = false,
-    smDown = false,
-    smUp = false,
-    xlDown = false,
-    xlUp = false,
-    xsDown = false,
-    xsUp = false
-  } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded);
-
+      implementation = 'js',
+      lgDown = false,
+      lgUp = false,
+      mdDown = false,
+      mdUp = false,
+      smDown = false,
+      smUp = false,
+      xlDown = false,
+      xlUp = false,
+      xsDown = false,
+      xsUp = false
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   if (implementation === 'js') {
     return /*#__PURE__*/_jsx(HiddenJs, _extends({
       lgDown: lgDown,
@@ -41,7 +39,6 @@ function Hidden(props) {
       xsUp: xsUp
     }, other));
   }
-
   return /*#__PURE__*/_jsx(HiddenCss, _extends({
     lgDown: lgDown,
     lgUp: lgUp,
@@ -55,27 +52,21 @@ function Hidden(props) {
     xsUp: xsUp
   }, other));
 }
-
-process.env.NODE_ENV !== "production" ? Hidden.propTypes
-/* remove-proptypes */
-= {
+process.env.NODE_ENV !== "production" ? Hidden.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,
-
   /**
    * Specify which implementation to use.  'js' is the default, 'css' works better for
    * server-side rendering.
    * @default 'js'
    */
   implementation: PropTypes.oneOf(['css', 'js']),
-
   /**
    * You can use this prop when choosing the `js` implementation with server-side rendering.
    *
@@ -88,66 +79,55 @@ process.env.NODE_ENV !== "production" ? Hidden.propTypes
    * https://caniuse.com/#search=client%20hint
    */
   initialWidth: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
-
   /**
    * If `true`, screens this size and down are hidden.
    * @default false
    */
   lgDown: PropTypes.bool,
-
   /**
    * If `true`, screens this size and up are hidden.
    * @default false
    */
   lgUp: PropTypes.bool,
-
   /**
    * If `true`, screens this size and down are hidden.
    * @default false
    */
   mdDown: PropTypes.bool,
-
   /**
    * If `true`, screens this size and up are hidden.
    * @default false
    */
   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']).isRequired)]),
-
   /**
    * If `true`, screens this size and down are hidden.
    * @default false
    */
   smDown: PropTypes.bool,
-
   /**
    * If `true`, screens this size and up are hidden.
    * @default false
    */
   smUp: PropTypes.bool,
-
   /**
    * If `true`, screens this size and down are hidden.
    * @default false
    */
   xlDown: PropTypes.bool,
-
   /**
    * If `true`, screens this size and up are hidden.
    * @default false
    */
   xlUp: PropTypes.bool,
-
   /**
    * If `true`, screens this size and down are hidden.
    * @default false
    */
   xsDown: PropTypes.bool,
-
   /**
    * If `true`, screens this size and up are hidden.
    * @default false

package/modern/Hidden/HiddenCss.js

@@ -10,7 +10,6 @@ import styled from '../styles/styled';
 import useTheme from '../styles/useTheme';
 import { getHiddenCssUtilityClass } from './hiddenCssClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -26,7 +25,6 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getHiddenCssUtilityClass, classes);
 };
-
 const HiddenCssRoot = styled('div', {
   name: 'PrivateHiddenCss',
   slot: 'Root'
@@ -46,7 +44,6 @@ const HiddenCssRoot = styled('div', {
         [theme.breakpoints.only(breakpoint)]: hidden
       };
     }
-
     return dir === 'up' ? {
       [theme.breakpoints.up(breakpoint)]: hidden
     } : {
@@ -59,20 +56,18 @@ const HiddenCssRoot = styled('div', {
     return r;
   }, {}));
 });
+
 /**
  * @ignore - internal component.
  */
-
 function HiddenCss(props) {
   const {
-    children,
-    className,
-    only
-  } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded);
-
+      children,
+      className,
+      only
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const theme = useTheme();
-
   if (process.env.NODE_ENV !== 'production') {
     const unknownProps = Object.keys(other).filter(propName => {
       const isUndeclaredBreakpoint = !theme.breakpoints.keys.some(breakpoint => {
@@ -80,26 +75,21 @@ function HiddenCss(props) {
       });
       return !['classes', 'theme', 'isRtl', 'sx'].includes(propName) && isUndeclaredBreakpoint;
     });
-
     if (unknownProps.length > 0) {
       console.error(`MUI: Unsupported props received by \`<Hidden implementation="css" />\`: ${unknownProps.join(', ')}. Did you forget to wrap this component in a ThemeProvider declaring these breakpoints?`);
     }
   }
-
   const breakpoints = [];
-
   for (let i = 0; i < theme.breakpoints.keys.length; i += 1) {
     const breakpoint = theme.breakpoints.keys[i];
     const breakpointUp = other[`${breakpoint}Up`];
     const breakpointDown = other[`${breakpoint}Down`];
-
     if (breakpointUp) {
       breakpoints.push({
         breakpoint,
         dir: 'up'
       });
     }
-
     if (breakpointDown) {
       breakpoints.push({
         breakpoint,
@@ -107,7 +97,6 @@ function HiddenCss(props) {
       });
     }
   }
-
   if (only) {
     const onlyBreakpoints = Array.isArray(only) ? only : [only];
     onlyBreakpoints.forEach(breakpoint => {
@@ -117,11 +106,9 @@ function HiddenCss(props) {
       });
     });
   }
-
   const ownerState = _extends({}, props, {
     breakpoints
   });
-
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsx(HiddenCssRoot, {
     className: clsx(classes.root, className),
@@ -129,74 +116,60 @@ function HiddenCss(props) {
     children: children
   });
 }
-
 process.env.NODE_ENV !== "production" ? HiddenCss.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']),
-
   /**
    * If `true`, screens this size and down are hidden.
    */
   lgDown: PropTypes.bool,
-
   /**
    * If `true`, screens this size and up are hidden.
    */
   lgUp: PropTypes.bool,
-
   /**
    * If `true`, screens this size and down are hidden.
    */
   mdDown: PropTypes.bool,
-
   /**
    * If `true`, screens this size and up are hidden.
    */
   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.
    */
   smDown: PropTypes.bool,
-
   /**
    * If `true`, screens this size and up are hidden.
    */
   smUp: PropTypes.bool,
-
   /**
    * If `true`, screens this size and down are hidden.
    */
   xlDown: PropTypes.bool,
-
   /**
    * If `true`, screens this size and up are hidden.
    */
   xlUp: PropTypes.bool,
-
   /**
    * If `true`, screens this size and down are hidden.
    */
   xsDown: PropTypes.bool,
-
   /**
    * If `true`, screens this size and up are hidden.
    */

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);