@mui/material 6.0.0-dev.240424162023-9968b4889d → 6.0.0

package/node/InputLabel/InputLabel.js

@@ -6,8 +6,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
@@ -15,12 +13,13 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _formControlState = _interopRequireDefault(require("../FormControl/formControlState"));
 var _useFormControl = _interopRequireDefault(require("../FormControl/useFormControl"));
 var _FormLabel = _interopRequireWildcard(require("../FormLabel"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
-var _styled = _interopRequireWildcard(require("../styles/styled"));
+var _rootShouldForwardProp = _interopRequireDefault(require("../styles/rootShouldForwardProp"));
+var _zeroStyled = require("../zero-styled");
+var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _inputLabelClasses = require("./inputLabelClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["disableAnimation", "margin", "shrink", "variant", "className"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const useUtilityClasses = ownerState => {
@@ -38,10 +37,14 @@ const useUtilityClasses = ownerState => {
     asterisk: [required && 'asterisk']
   };
   const composedClasses = (0, _composeClasses.default)(slots, _inputLabelClasses.getInputLabelUtilityClasses, classes);
-  return (0, _extends2.default)({}, classes, composedClasses);
+  return {
+    ...classes,
+    // forward the focused, disabled, etc. classes to the FormLabel
+    ...composedClasses
+  };
 };
-const InputLabelRoot = (0, _styled.default)(_FormLabel.default, {
-  shouldForwardProp: prop => (0, _styled.rootShouldForwardProp)(prop) || prop === 'classes',
+const InputLabelRoot = (0, _zeroStyled.styled)(_FormLabel.default, {
+  shouldForwardProp: prop => (0, _rootShouldForwardProp.default)(prop) || prop === 'classes',
   name: 'MuiInputLabel',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -52,79 +55,142 @@ const InputLabelRoot = (0, _styled.default)(_FormLabel.default, {
       [`& .${_FormLabel.formLabelClasses.asterisk}`]: styles.asterisk
     }, styles.root, ownerState.formControl && styles.formControl, ownerState.size === 'small' && styles.sizeSmall, ownerState.shrink && styles.shrink, !ownerState.disableAnimation && styles.animated, ownerState.focused && styles.focused, styles[ownerState.variant]];
   }
-})(({
-  theme,
-  ownerState
-}) => (0, _extends2.default)({
+})((0, _memoTheme.default)(({
+  theme
+}) => ({
   display: 'block',
   transformOrigin: 'top left',
   whiteSpace: 'nowrap',
   overflow: 'hidden',
   textOverflow: 'ellipsis',
-  maxWidth: '100%'
-}, ownerState.formControl && {
-  position: 'absolute',
-  left: 0,
-  top: 0,
-  // slight alteration to spec spacing to match visual spec result
-  transform: 'translate(0, 20px) scale(1)'
-}, ownerState.size === 'small' && {
-  // Compensation for the `Input.inputSizeSmall` style.
-  transform: 'translate(0, 17px) scale(1)'
-}, ownerState.shrink && {
-  transform: 'translate(0, -1.5px) scale(0.75)',
-  transformOrigin: 'top left',
-  maxWidth: '133%'
-}, !ownerState.disableAnimation && {
-  transition: theme.transitions.create(['color', 'transform', 'max-width'], {
-    duration: theme.transitions.duration.shorter,
-    easing: theme.transitions.easing.easeOut
-  })
-}, ownerState.variant === 'filled' && (0, _extends2.default)({
-  // Chrome's autofill feature gives the input field a yellow background.
-  // Since the input field is behind the label in the HTML tree,
-  // the input field is drawn last and hides the label with an opaque background color.
-  // zIndex: 1 will raise the label above opaque background-colors of input.
-  zIndex: 1,
-  pointerEvents: 'none',
-  transform: 'translate(12px, 16px) scale(1)',
-  maxWidth: 'calc(100% - 24px)'
-}, ownerState.size === 'small' && {
-  transform: 'translate(12px, 13px) scale(1)'
-}, ownerState.shrink && (0, _extends2.default)({
-  userSelect: 'none',
-  pointerEvents: 'auto',
-  transform: 'translate(12px, 7px) scale(0.75)',
-  maxWidth: 'calc(133% - 24px)'
-}, ownerState.size === 'small' && {
-  transform: 'translate(12px, 4px) scale(0.75)'
-})), ownerState.variant === 'outlined' && (0, _extends2.default)({
-  // see comment above on filled.zIndex
-  zIndex: 1,
-  pointerEvents: 'none',
-  transform: 'translate(14px, 16px) scale(1)',
-  maxWidth: 'calc(100% - 24px)'
-}, ownerState.size === 'small' && {
-  transform: 'translate(14px, 9px) scale(1)'
-}, ownerState.shrink && {
-  userSelect: 'none',
-  pointerEvents: 'auto',
-  // Theoretically, we should have (8+5)*2/0.75 = 34px
-  // but it feels a better when it bleeds a bit on the left, so 32px.
-  maxWidth: 'calc(133% - 32px)',
-  transform: 'translate(14px, -9px) scale(0.75)'
+  maxWidth: '100%',
+  variants: [{
+    props: ({
+      ownerState
+    }) => ownerState.formControl,
+    style: {
+      position: 'absolute',
+      left: 0,
+      top: 0,
+      // slight alteration to spec spacing to match visual spec result
+      transform: 'translate(0, 20px) scale(1)'
+    }
+  }, {
+    props: {
+      size: 'small'
+    },
+    style: {
+      // Compensation for the `Input.inputSizeSmall` style.
+      transform: 'translate(0, 17px) scale(1)'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.shrink,
+    style: {
+      transform: 'translate(0, -1.5px) scale(0.75)',
+      transformOrigin: 'top left',
+      maxWidth: '133%'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !ownerState.disableAnimation,
+    style: {
+      transition: theme.transitions.create(['color', 'transform', 'max-width'], {
+        duration: theme.transitions.duration.shorter,
+        easing: theme.transitions.easing.easeOut
+      })
+    }
+  }, {
+    props: {
+      variant: 'filled'
+    },
+    style: {
+      // Chrome's autofill feature gives the input field a yellow background.
+      // Since the input field is behind the label in the HTML tree,
+      // the input field is drawn last and hides the label with an opaque background color.
+      // zIndex: 1 will raise the label above opaque background-colors of input.
+      zIndex: 1,
+      pointerEvents: 'none',
+      transform: 'translate(12px, 16px) scale(1)',
+      maxWidth: 'calc(100% - 24px)'
+    }
+  }, {
+    props: {
+      variant: 'filled',
+      size: 'small'
+    },
+    style: {
+      transform: 'translate(12px, 13px) scale(1)'
+    }
+  }, {
+    props: ({
+      variant,
+      ownerState
+    }) => variant === 'filled' && ownerState.shrink,
+    style: {
+      userSelect: 'none',
+      pointerEvents: 'auto',
+      transform: 'translate(12px, 7px) scale(0.75)',
+      maxWidth: 'calc(133% - 24px)'
+    }
+  }, {
+    props: ({
+      variant,
+      ownerState,
+      size
+    }) => variant === 'filled' && ownerState.shrink && size === 'small',
+    style: {
+      transform: 'translate(12px, 4px) scale(0.75)'
+    }
+  }, {
+    props: {
+      variant: 'outlined'
+    },
+    style: {
+      // see comment above on filled.zIndex
+      zIndex: 1,
+      pointerEvents: 'none',
+      transform: 'translate(14px, 16px) scale(1)',
+      maxWidth: 'calc(100% - 24px)'
+    }
+  }, {
+    props: {
+      variant: 'outlined',
+      size: 'small'
+    },
+    style: {
+      transform: 'translate(14px, 9px) scale(1)'
+    }
+  }, {
+    props: ({
+      variant,
+      ownerState
+    }) => variant === 'outlined' && ownerState.shrink,
+    style: {
+      userSelect: 'none',
+      pointerEvents: 'auto',
+      // Theoretically, we should have (8+5)*2/0.75 = 34px
+      // but it feels a better when it bleeds a bit on the left, so 32px.
+      maxWidth: 'calc(133% - 32px)',
+      transform: 'translate(14px, -9px) scale(0.75)'
+    }
+  }]
 })));
 const InputLabel = /*#__PURE__*/React.forwardRef(function InputLabel(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = (0, _DefaultPropsProvider.useDefaultProps)({
     name: 'MuiInputLabel',
     props: inProps
   });
   const {
-      disableAnimation = false,
-      shrink: shrinkProp,
-      className
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+    disableAnimation = false,
+    margin,
+    shrink: shrinkProp,
+    variant,
+    className,
+    ...other
+  } = props;
   const muiFormControl = (0, _useFormControl.default)();
   let shrink = shrinkProp;
   if (typeof shrink === 'undefined' && muiFormControl) {
@@ -135,7 +201,8 @@ const InputLabel = /*#__PURE__*/React.forwardRef(function InputLabel(inProps, re
     muiFormControl,
     states: ['size', 'variant', 'required', 'focused']
   });
-  const ownerState = (0, _extends2.default)({}, props, {
+  const ownerState = {
+    ...props,
     disableAnimation,
     formControl: muiFormControl,
     shrink,
@@ -143,16 +210,16 @@ const InputLabel = /*#__PURE__*/React.forwardRef(function InputLabel(inProps, re
     variant: fcs.variant,
     required: fcs.required,
     focused: fcs.focused
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(InputLabelRoot, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(InputLabelRoot, {
     "data-shrink": shrink,
-    ownerState: ownerState,
     ref: ref,
-    className: (0, _clsx.default)(classes.root, className)
-  }, other, {
+    className: (0, _clsx.default)(classes.root, className),
+    ...other,
+    ownerState: ownerState,
     classes: classes
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? InputLabel.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/node/LinearProgress/LinearProgress.js

@@ -6,8 +6,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
@@ -15,13 +13,13 @@ var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"
 var _colorManipulator = require("@mui/system/colorManipulator");
 var _RtlProvider = require("@mui/system/RtlProvider");
 var _zeroStyled = require("../zero-styled");
+var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _linearProgressClasses = require("./linearProgressClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["className", "color", "value", "valueBuffer", "variant"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiLinearProgress');
 const TRANSITION_DURATION = 4; // seconds
 const indeterminate1Keyframe = (0, _zeroStyled.keyframes)`
   0% {
@@ -113,7 +111,7 @@ const LinearProgressRoot = (0, _zeroStyled.styled)('span', {
     } = props;
     return [styles.root, styles[`color${(0, _capitalize.default)(ownerState.color)}`], styles[ownerState.variant]];
   }
-})(({
+})((0, _memoTheme.default)(({
   theme
 }) => ({
   position: 'relative',
@@ -125,7 +123,7 @@ const LinearProgressRoot = (0, _zeroStyled.styled)('span', {
   '@media print': {
     colorAdjust: 'exact'
   },
-  variants: [...Object.entries(theme.palette).filter(([, value]) => value.main).map(([color]) => ({
+  variants: [...Object.entries(theme.palette).filter(([, value]) => value && value.main).map(([color]) => ({
     props: {
       color
     },
@@ -163,7 +161,7 @@ const LinearProgressRoot = (0, _zeroStyled.styled)('span', {
       transform: 'rotate(180deg)'
     }
   }]
-}));
+})));
 const LinearProgressDashed = (0, _zeroStyled.styled)('span', {
   name: 'MuiLinearProgress',
   slot: 'Dashed',
@@ -173,7 +171,7 @@ const LinearProgressDashed = (0, _zeroStyled.styled)('span', {
     } = props;
     return [styles.dashed, styles[`dashedColor${(0, _capitalize.default)(ownerState.color)}`]];
   }
-})(({
+})((0, _memoTheme.default)(({
   theme
 }) => ({
   position: 'absolute',
@@ -190,7 +188,7 @@ const LinearProgressDashed = (0, _zeroStyled.styled)('span', {
       opacity: 0.3,
       backgroundImage: `radial-gradient(currentColor 0%, currentColor 16%, transparent 42%)`
     }
-  }, ...Object.entries(theme.palette).filter(([, value]) => value.main).map(([color]) => {
+  }, ...Object.entries(theme.palette).filter(([, value]) => value && value.main).map(([color]) => {
     const backgroundColor = getColorShade(theme, color);
     return {
       props: {
@@ -201,7 +199,7 @@ const LinearProgressDashed = (0, _zeroStyled.styled)('span', {
       }
     };
   })]
-}), bufferAnimation || {
+})), bufferAnimation || {
   // At runtime for Pigment CSS, `bufferAnimation` will be null and the generated keyframe will be used.
   animation: `${bufferKeyframe} 3s infinite linear`
 });
@@ -214,7 +212,7 @@ const LinearProgressBar1 = (0, _zeroStyled.styled)('span', {
     } = props;
     return [styles.bar, styles[`barColor${(0, _capitalize.default)(ownerState.color)}`], (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && styles.bar1Indeterminate, ownerState.variant === 'determinate' && styles.bar1Determinate, ownerState.variant === 'buffer' && styles.bar1Buffer];
   }
-})(({
+})((0, _memoTheme.default)(({
   theme
 }) => ({
   width: '100%',
@@ -231,7 +229,7 @@ const LinearProgressBar1 = (0, _zeroStyled.styled)('span', {
     style: {
       backgroundColor: 'currentColor'
     }
-  }, ...Object.entries(theme.palette).filter(([, value]) => value.main).map(([color]) => ({
+  }, ...Object.entries(theme.palette).filter(([, value]) => value && value.main).map(([color]) => ({
     props: {
       color
     },
@@ -268,7 +266,7 @@ const LinearProgressBar1 = (0, _zeroStyled.styled)('span', {
       animation: `${indeterminate1Keyframe} 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite`
     }
   }]
-}));
+})));
 const LinearProgressBar2 = (0, _zeroStyled.styled)('span', {
   name: 'MuiLinearProgress',
   slot: 'Bar2',
@@ -278,7 +276,7 @@ const LinearProgressBar2 = (0, _zeroStyled.styled)('span', {
     } = props;
     return [styles.bar, styles[`barColor${(0, _capitalize.default)(ownerState.color)}`], (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && styles.bar2Indeterminate, ownerState.variant === 'buffer' && styles.bar2Buffer];
   }
-})(({
+})((0, _memoTheme.default)(({
   theme
 }) => ({
   width: '100%',
@@ -288,7 +286,7 @@ const LinearProgressBar2 = (0, _zeroStyled.styled)('span', {
   top: 0,
   transition: 'transform 0.2s linear',
   transformOrigin: 'left',
-  variants: [...Object.entries(theme.palette).filter(([, value]) => value.main).map(([color]) => ({
+  variants: [...Object.entries(theme.palette).filter(([, value]) => value && value.main).map(([color]) => ({
     props: {
       color
     },
@@ -309,7 +307,7 @@ const LinearProgressBar2 = (0, _zeroStyled.styled)('span', {
     style: {
       opacity: 0.3
     }
-  }, ...Object.entries(theme.palette).filter(([, value]) => value.main).map(([color]) => ({
+  }, ...Object.entries(theme.palette).filter(([, value]) => value && value.main).map(([color]) => ({
     props: {
       color,
       variant: 'buffer'
@@ -333,7 +331,7 @@ const LinearProgressBar2 = (0, _zeroStyled.styled)('span', {
       animation: `${indeterminate2Keyframe} 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite`
     }
   }]
-}));
+})));
 
 /**
  * ## ARIA
@@ -343,22 +341,23 @@ const LinearProgressBar2 = (0, _zeroStyled.styled)('span', {
  * attribute to `true` on that region until it has finished loading.
  */
 const LinearProgress = /*#__PURE__*/React.forwardRef(function LinearProgress(inProps, ref) {
-  const props = useThemeProps({
+  const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiLinearProgress'
   });
   const {
-      className,
-      color = 'primary',
-      value,
-      valueBuffer,
-      variant = 'indeterminate'
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const ownerState = (0, _extends2.default)({}, props, {
+    className,
+    color = 'primary',
+    value,
+    valueBuffer,
+    variant = 'indeterminate',
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     color,
     variant
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   const isRtl = (0, _RtlProvider.useRtl)();
   const rootProps = {};
@@ -391,13 +390,13 @@ const LinearProgress = /*#__PURE__*/React.forwardRef(function LinearProgress(inP
       console.error('MUI: You need to provide a valueBuffer prop ' + 'when using the buffer variant of LinearProgress.');
     }
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(LinearProgressRoot, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(LinearProgressRoot, {
     className: (0, _clsx.default)(classes.root, className),
     ownerState: ownerState,
-    role: "progressbar"
-  }, rootProps, {
-    ref: ref
-  }, other, {
+    role: "progressbar",
+    ...rootProps,
+    ref: ref,
+    ...other,
     children: [variant === 'buffer' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(LinearProgressDashed, {
       className: classes.dashed,
       ownerState: ownerState
@@ -410,7 +409,7 @@ const LinearProgress = /*#__PURE__*/React.forwardRef(function LinearProgress(inP
       ownerState: ownerState,
       style: inlineStyles.bar2
     })]
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? LinearProgress.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐