@mui/material 9.0.1 → 9.1.0

package/Input/Input.js

@@ -20,6 +20,7 @@ var _createSimplePaletteValueFilter = _interopRequireDefault(require("../utils/c
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _inputLabelClasses = _interopRequireDefault(require("../InputLabel/inputLabelClasses"));
 var _inputClasses = _interopRequireWildcard(require("./inputClasses"));
+var _utils = require("../transitions/utils");
 var _InputBase2 = require("../InputBase/InputBase");
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
@@ -79,7 +80,7 @@ const InputRoot = (0, _zeroStyled.styled)(_InputBase2.InputBaseRoot, {
           position: 'absolute',
           right: 0,
           transform: 'scaleX(0)',
-          transition: theme.transitions.create('transform', {
+          ...(0, _utils.getTransitionStyles)(theme, 'transform', {
             duration: theme.transitions.duration.shorter,
             easing: theme.transitions.easing.easeOut
           }),
@@ -102,7 +103,7 @@ const InputRoot = (0, _zeroStyled.styled)(_InputBase2.InputBaseRoot, {
           content: '""',
           position: 'absolute',
           right: 0,
-          transition: theme.transitions.create('border-bottom-color', {
+          ...(0, _utils.getTransitionStyles)(theme, 'border-bottom-color', {
             duration: theme.transitions.duration.shorter
           }),
           pointerEvents: 'none' // Transparent to the hover style.

package/Input/Input.mjs

@@ -13,6 +13,7 @@ import createSimplePaletteValueFilter from "../utils/createSimplePaletteValueFil
 import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
 import inputLabelClasses from "../InputLabel/inputLabelClasses.mjs";
 import inputClasses, { getInputUtilityClass } from "./inputClasses.mjs";
+import { getTransitionStyles } from "../transitions/utils.mjs";
 import { rootOverridesResolver as inputBaseRootOverridesResolver, inputOverridesResolver as inputBaseInputOverridesResolver, InputBaseRoot, InputBaseInput } from "../InputBase/InputBase.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
@@ -72,7 +73,7 @@ const InputRoot = styled(InputBaseRoot, {
           position: 'absolute',
           right: 0,
           transform: 'scaleX(0)',
-          transition: theme.transitions.create('transform', {
+          ...getTransitionStyles(theme, 'transform', {
             duration: theme.transitions.duration.shorter,
             easing: theme.transitions.easing.easeOut
           }),
@@ -95,7 +96,7 @@ const InputRoot = styled(InputBaseRoot, {
           content: '""',
           position: 'absolute',
           right: 0,
-          transition: theme.transitions.create('border-bottom-color', {
+          ...getTransitionStyles(theme, 'border-bottom-color', {
             duration: theme.transitions.duration.shorter
           }),
           pointerEvents: 'none' // Transparent to the hover style.

package/InputBase/InputBase.js

@@ -28,6 +28,7 @@ var _ownerDocument = _interopRequireDefault(require("../utils/ownerDocument"));
 var _getActiveElement = _interopRequireDefault(require("../utils/getActiveElement"));
 var _utils = require("./utils");
 var _inputBaseClasses = _interopRequireWildcard(require("./inputBaseClasses"));
+var _utils2 = require("../transitions/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 var _InputGlobalStyles;
 const MUI_AUTO_FILL = 'mui-auto-fill';
@@ -129,7 +130,7 @@ const InputBaseInput = exports.InputBaseInput = (0, _zeroStyled.styled)('input',
     } : {
       opacity: light ? 0.42 : 0.5
     }),
-    transition: theme.transitions.create('opacity', {
+    ...(0, _utils2.getTransitionStyles)(theme, 'opacity', {
       duration: theme.transitions.duration.shorter
     })
   };

package/InputBase/InputBase.mjs

@@ -22,6 +22,7 @@ import ownerDocument from "../utils/ownerDocument.mjs";
 import getActiveElement from "../utils/getActiveElement.mjs";
 import { isFilled } from "./utils.mjs";
 import inputBaseClasses, { getInputBaseUtilityClass } from "./inputBaseClasses.mjs";
+import { getTransitionStyles } from "../transitions/utils.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const MUI_AUTO_FILL = 'mui-auto-fill';
 const MUI_AUTO_FILL_CANCEL = 'mui-auto-fill-cancel';
@@ -120,7 +121,7 @@ export const InputBaseInput = styled('input', {
     } : {
       opacity: light ? 0.42 : 0.5
     }),
-    transition: theme.transitions.create('opacity', {
+    ...getTransitionStyles(theme, 'opacity', {
       duration: theme.transitions.duration.shorter
     })
   };

package/InputLabel/InputLabel.js

@@ -19,6 +19,7 @@ var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _inputLabelClasses = require("./inputLabelClasses");
+var _utils = require("../transitions/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
   const {
@@ -95,7 +96,7 @@ const InputLabelRoot = (0, _zeroStyled.styled)(_FormLabel.default, {
       ownerState
     }) => !ownerState.disableAnimation,
     style: {
-      transition: theme.transitions.create(['color', 'transform', 'max-width'], {
+      ...(0, _utils.getTransitionStyles)(theme, ['color', 'transform', 'max-width'], {
         duration: theme.transitions.duration.shorter,
         easing: theme.transitions.easing.easeOut
       })

package/InputLabel/InputLabel.mjs

@@ -12,6 +12,7 @@ import { styled } from "../zero-styled/index.mjs";
 import memoTheme from "../utils/memoTheme.mjs";
 import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
 import { getInputLabelUtilityClasses } from "./inputLabelClasses.mjs";
+import { getTransitionStyles } from "../transitions/utils.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -88,7 +89,7 @@ const InputLabelRoot = styled(FormLabel, {
       ownerState
     }) => !ownerState.disableAnimation,
     style: {
-      transition: theme.transitions.create(['color', 'transform', 'max-width'], {
+      ...getTransitionStyles(theme, ['color', 'transform', 'max-width'], {
         duration: theme.transitions.duration.shorter,
         easing: theme.transitions.easing.easeOut
       })

package/LICENSE

@@ -1,4 +1,4 @@
-The MIT License (MIT)
+MIT License
 
 Copyright (c) 2014 Call-Em-All
 

package/LinearProgress/LinearProgress.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+exports.resetWarningFlags = resetWarningFlags;
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
@@ -17,9 +18,23 @@ var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _createSimplePaletteValueFilter = _interopRequireDefault(require("../utils/createSimplePaletteValueFilter"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
+var _utils = require("../transitions/utils");
 var _linearProgressClasses = require("./linearProgressClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const TRANSITION_DURATION = 4; // seconds
+const EMPTY_STYLE = {};
+let warnedMinMaxWithoutVariant = false;
+let warnedInvalidMinMaxValue = false;
+let warnedValueRequired = false;
+let warnedInvalidMinMaxValueBuffer = false;
+let warnedValueBufferRequired = false;
+function resetWarningFlags() {
+  warnedMinMaxWithoutVariant = false;
+  warnedInvalidMinMaxValue = false;
+  warnedValueRequired = false;
+  warnedInvalidMinMaxValueBuffer = false;
+  warnedValueBufferRequired = false;
+}
 const indeterminate1Keyframe = (0, _zeroStyled.keyframes)`
   0% {
     left: -35%;
@@ -195,7 +210,11 @@ const LinearProgressDashed = (0, _zeroStyled.styled)('span', {
 })), bufferAnimation || {
   // At runtime for Pigment CSS, `bufferAnimation` will be null and the generated keyframe will be used.
   animation: `${bufferKeyframe} 3s infinite linear`
-});
+}, (0, _memoTheme.default)(({
+  theme
+}) => (0, _utils.getReducedMotionStyles)(theme, {
+  animation: 'none'
+}) || EMPTY_STYLE));
 const LinearProgressBar1 = (0, _zeroStyled.styled)('span', {
   name: 'MuiLinearProgress',
   slot: 'Bar1',
@@ -204,59 +223,81 @@ const LinearProgressBar1 = (0, _zeroStyled.styled)('span', {
   }
 })((0, _memoTheme.default)(({
   theme
-}) => ({
-  width: '100%',
-  position: 'absolute',
-  left: 0,
-  bottom: 0,
-  top: 0,
-  transition: 'transform 0.2s linear',
-  transformOrigin: 'left',
-  variants: [{
-    props: {
-      color: 'inherit'
-    },
-    style: {
-      backgroundColor: 'currentColor'
-    }
-  }, ...Object.entries(theme.palette).filter((0, _createSimplePaletteValueFilter.default)()).map(([color]) => ({
-    props: {
-      color
-    },
-    style: {
-      backgroundColor: (theme.vars || theme).palette[color].main
-    }
-  })), {
-    props: {
-      variant: 'determinate'
-    },
-    style: {
-      transition: `transform .${TRANSITION_DURATION}s linear`
-    }
-  }, {
-    props: {
-      variant: 'buffer'
-    },
-    style: {
-      zIndex: 1,
-      transition: `transform .${TRANSITION_DURATION}s linear`
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.variant === 'indeterminate' || ownerState.variant === 'query',
-    style: {
-      width: 'auto'
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.variant === 'indeterminate' || ownerState.variant === 'query',
-    style: indeterminate1Animation || {
-      animation: `${indeterminate1Keyframe} 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite`
-    }
-  }]
-})));
+}) => {
+  const reducedMotionIndeterminateStyles = (0, _utils.getReducedMotionStyles)(theme, {
+    animation: 'none',
+    left: '30%',
+    right: 'auto',
+    width: '40%'
+  });
+  return {
+    width: '100%',
+    position: 'absolute',
+    left: 0,
+    bottom: 0,
+    top: 0,
+    ...(0, _utils.getTransitionStyles)(theme, 'transform', {
+      duration: '0.2s',
+      easing: 'linear'
+    }),
+    transformOrigin: 'left',
+    variants: [{
+      props: {
+        color: 'inherit'
+      },
+      style: {
+        backgroundColor: 'currentColor'
+      }
+    }, ...Object.entries(theme.palette).filter((0, _createSimplePaletteValueFilter.default)()).map(([color]) => ({
+      props: {
+        color
+      },
+      style: {
+        backgroundColor: (theme.vars || theme).palette[color].main
+      }
+    })), {
+      props: {
+        variant: 'determinate'
+      },
+      style: {
+        ...(0, _utils.getTransitionStyles)(theme, 'transform', {
+          duration: `.${TRANSITION_DURATION}s`,
+          easing: 'linear'
+        })
+      }
+    }, {
+      props: {
+        variant: 'buffer'
+      },
+      style: {
+        zIndex: 1,
+        ...(0, _utils.getTransitionStyles)(theme, 'transform', {
+          duration: `.${TRANSITION_DURATION}s`,
+          easing: 'linear'
+        })
+      }
+    }, {
+      props: ({
+        ownerState
+      }) => ownerState.variant === 'indeterminate' || ownerState.variant === 'query',
+      style: {
+        width: 'auto'
+      }
+    }, {
+      props: ({
+        ownerState
+      }) => ownerState.variant === 'indeterminate' || ownerState.variant === 'query',
+      style: indeterminate1Animation || {
+        animation: `${indeterminate1Keyframe} 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite`
+      }
+    }, ...(reducedMotionIndeterminateStyles ? [{
+      props: ({
+        ownerState
+      }) => ownerState.variant === 'indeterminate' || ownerState.variant === 'query',
+      style: reducedMotionIndeterminateStyles
+    }] : [])]
+  };
+}));
 const LinearProgressBar2 = (0, _zeroStyled.styled)('span', {
   name: 'MuiLinearProgress',
   slot: 'Bar2',
@@ -265,67 +306,84 @@ const LinearProgressBar2 = (0, _zeroStyled.styled)('span', {
   }
 })((0, _memoTheme.default)(({
   theme
-}) => ({
-  width: '100%',
-  position: 'absolute',
-  left: 0,
-  bottom: 0,
-  top: 0,
-  transition: 'transform 0.2s linear',
-  transformOrigin: 'left',
-  variants: [...Object.entries(theme.palette).filter((0, _createSimplePaletteValueFilter.default)()).map(([color]) => ({
-    props: {
-      color
-    },
-    style: {
-      '--LinearProgressBar2-barColor': (theme.vars || theme).palette[color].main
-    }
-  })), {
-    props: ({
-      ownerState
-    }) => ownerState.variant !== 'buffer' && ownerState.color !== 'inherit',
-    style: {
-      backgroundColor: 'var(--LinearProgressBar2-barColor, currentColor)'
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.variant !== 'buffer' && ownerState.color === 'inherit',
-    style: {
-      backgroundColor: 'currentColor'
-    }
-  }, {
-    props: {
-      color: 'inherit'
-    },
-    style: {
-      opacity: 0.3
-    }
-  }, ...Object.entries(theme.palette).filter((0, _createSimplePaletteValueFilter.default)()).map(([color]) => ({
-    props: {
-      color,
-      variant: 'buffer'
-    },
-    style: {
-      backgroundColor: getColorShade(theme, color),
-      transition: `transform .${TRANSITION_DURATION}s linear`
-    }
-  })), {
-    props: ({
-      ownerState
-    }) => ownerState.variant === 'indeterminate' || ownerState.variant === 'query',
-    style: {
-      width: 'auto'
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.variant === 'indeterminate' || ownerState.variant === 'query',
-    style: indeterminate2Animation || {
-      animation: `${indeterminate2Keyframe} 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite`
-    }
-  }]
-})));
+}) => {
+  const reducedMotionIndeterminateStyles = (0, _utils.getReducedMotionStyles)(theme, {
+    animation: 'none',
+    display: 'none'
+  });
+  return {
+    width: '100%',
+    position: 'absolute',
+    left: 0,
+    bottom: 0,
+    top: 0,
+    ...(0, _utils.getTransitionStyles)(theme, 'transform', {
+      duration: '0.2s',
+      easing: 'linear'
+    }),
+    transformOrigin: 'left',
+    variants: [...Object.entries(theme.palette).filter((0, _createSimplePaletteValueFilter.default)()).map(([color]) => ({
+      props: {
+        color
+      },
+      style: {
+        '--LinearProgressBar2-barColor': (theme.vars || theme).palette[color].main
+      }
+    })), {
+      props: ({
+        ownerState
+      }) => ownerState.variant !== 'buffer' && ownerState.color !== 'inherit',
+      style: {
+        backgroundColor: 'var(--LinearProgressBar2-barColor, currentColor)'
+      }
+    }, {
+      props: ({
+        ownerState
+      }) => ownerState.variant !== 'buffer' && ownerState.color === 'inherit',
+      style: {
+        backgroundColor: 'currentColor'
+      }
+    }, {
+      props: {
+        color: 'inherit'
+      },
+      style: {
+        opacity: 0.3
+      }
+    }, ...Object.entries(theme.palette).filter((0, _createSimplePaletteValueFilter.default)()).map(([color]) => ({
+      props: {
+        color,
+        variant: 'buffer'
+      },
+      style: {
+        backgroundColor: getColorShade(theme, color),
+        ...(0, _utils.getTransitionStyles)(theme, 'transform', {
+          duration: `.${TRANSITION_DURATION}s`,
+          easing: 'linear'
+        })
+      }
+    })), {
+      props: ({
+        ownerState
+      }) => ownerState.variant === 'indeterminate' || ownerState.variant === 'query',
+      style: {
+        width: 'auto'
+      }
+    }, {
+      props: ({
+        ownerState
+      }) => ownerState.variant === 'indeterminate' || ownerState.variant === 'query',
+      style: indeterminate2Animation || {
+        animation: `${indeterminate2Keyframe} 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite`
+      }
+    }, ...(reducedMotionIndeterminateStyles ? [{
+      props: ({
+        ownerState
+      }) => ownerState.variant === 'indeterminate' || ownerState.variant === 'query',
+      style: reducedMotionIndeterminateStyles
+    }] : [])]
+  };
+}));
 
 /**
  * ## ARIA
@@ -355,8 +413,9 @@ const LinearProgress = /*#__PURE__*/React.forwardRef(function LinearProgress(inP
     variant
   };
   if (process.env.NODE_ENV !== 'production') {
-    if (['indeterminate', 'query'].includes(variant) && (minProp !== undefined || maxProp !== undefined)) {
+    if (!warnedMinMaxWithoutVariant && ['indeterminate', 'query'].includes(variant) && (minProp !== undefined || maxProp !== undefined)) {
       console.warn(`MUI: You have provided the \`min\` or \`max\` props with an 'indeterminate' or 'query' variant. These props will have no effect.`);
+      warnedMinMaxWithoutVariant = true;
     }
   }
   const min = minProp ?? 0;
@@ -371,8 +430,9 @@ const LinearProgress = /*#__PURE__*/React.forwardRef(function LinearProgress(inP
   if (variant === 'determinate' || variant === 'buffer') {
     if (value !== undefined) {
       if (process.env.NODE_ENV !== 'production') {
-        if (value < min || value > max || min >= max) {
+        if (!warnedInvalidMinMaxValue && (value < min || value > max || min >= max)) {
           console.error(`MUI: The min, max, and value props in LinearProgress should be numbers where min < max and min <= value <= max. Received min=${min}, max=${max}, value=${value}.`);
+          warnedInvalidMinMaxValue = true;
         }
       }
       const range = max - min;
@@ -386,14 +446,18 @@ const LinearProgress = /*#__PURE__*/React.forwardRef(function LinearProgress(inP
       rootProps['aria-valuemin'] = min;
       rootProps['aria-valuemax'] = max;
     } else if (process.env.NODE_ENV !== 'production') {
-      console.error('MUI: You need to provide a value prop ' + 'when using the determinate or buffer variant of LinearProgress.');
+      if (!warnedValueRequired) {
+        console.error('MUI: You need to provide a value prop when using the determinate or buffer variant of LinearProgress.');
+        warnedValueRequired = true;
+      }
     }
   }
   if (variant === 'buffer') {
     if (valueBuffer !== undefined) {
       if (process.env.NODE_ENV !== 'production') {
-        if (valueBuffer < min || valueBuffer > max || valueBuffer < value || min >= max) {
+        if (!warnedInvalidMinMaxValueBuffer && (valueBuffer < min || valueBuffer > max || valueBuffer < value || min >= max)) {
           console.error(`MUI: The min, max, value, and valueBuffer props in LinearProgress should be numbers where min < max and min <= value <= valueBuffer <= max. Received min=${min}, max=${max}, value=${value}, valueBuffer=${valueBuffer}.`);
+          warnedInvalidMinMaxValueBuffer = true;
         }
       }
       const range = max - min;
@@ -403,7 +467,10 @@ const LinearProgress = /*#__PURE__*/React.forwardRef(function LinearProgress(inP
       }
       inlineStyles.bar2.transform = range > 0 ? `translateX(${transform}%)` : 'translateX(-100%)'; // empty-state fallback when range is invalid
     } else if (process.env.NODE_ENV !== 'production') {
-      console.error('MUI: You need to provide a valueBuffer prop ' + 'when using the buffer variant of LinearProgress.');
+      if (!warnedValueBufferRequired) {
+        console.error('MUI: You need to provide a valueBuffer prop when using the buffer variant of LinearProgress.');
+        warnedValueBufferRequired = true;
+      }
     }
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(LinearProgressRoot, {