@mui/material 6.0.0-alpha.0 → 6.0.0-alpha.10

package/node/SwipeableDrawer/SwipeableDrawer.js

@@ -7,8 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 exports.reset = reset;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var ReactDOM = _interopRequireWildcard(require("react-dom"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -25,11 +23,10 @@ var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
 var _utils = require("../transitions/utils");
 var _SwipeArea = _interopRequireDefault(require("./SwipeArea"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["BackdropProps"],
-  _excluded2 = ["anchor", "disableBackdropTransition", "disableDiscovery", "disableSwipeToOpen", "hideBackdrop", "hysteresis", "allowSwipeInChildren", "minFlingVelocity", "ModalProps", "onClose", "onOpen", "open", "PaperProps", "SwipeAreaProps", "swipeAreaWidth", "transitionDuration", "variant"]; // This value is closed to what browsers are using internally to
-// trigger a native scroll.
 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; }
+// This value is closed to what browsers are using internally to
+// trigger a native scroll.
 const UNCERTAINTY_THRESHOLD = 3; // px
 
 // This is the part of the drawer displayed on touch start.
@@ -135,28 +132,29 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
     exit: theme.transitions.duration.leavingScreen
   };
   const {
-      anchor = 'left',
-      disableBackdropTransition = false,
-      disableDiscovery = false,
-      disableSwipeToOpen = iOS,
-      hideBackdrop,
-      hysteresis = 0.52,
-      allowSwipeInChildren = false,
-      minFlingVelocity = 450,
-      ModalProps: {
-        BackdropProps
-      } = {},
-      onClose,
-      onOpen,
-      open = false,
-      PaperProps = {},
-      SwipeAreaProps,
-      swipeAreaWidth = 20,
-      transitionDuration = transitionDurationDefault,
-      variant = 'temporary' // Mobile first.
-    } = props,
-    ModalPropsProp = (0, _objectWithoutPropertiesLoose2.default)(props.ModalProps, _excluded),
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded2);
+    anchor = 'left',
+    disableBackdropTransition = false,
+    disableDiscovery = false,
+    disableSwipeToOpen = iOS,
+    hideBackdrop,
+    hysteresis = 0.52,
+    allowSwipeInChildren = false,
+    minFlingVelocity = 450,
+    ModalProps: {
+      BackdropProps,
+      ...ModalPropsProp
+    } = {},
+    onClose,
+    onOpen,
+    open = false,
+    PaperProps = {},
+    SwipeAreaProps,
+    swipeAreaWidth = 20,
+    transitionDuration = transitionDurationDefault,
+    variant = 'temporary',
+    // Mobile first.
+    ...other
+  } = props;
   const [maybeSwiping, setMaybeSwiping] = React.useState(false);
   const swipeInstance = React.useRef({
     isSwiping: null
@@ -461,33 +459,42 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
     }
   }, [open]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Drawer.default, (0, _extends2.default)({
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Drawer.default, {
       open: variant === 'temporary' && maybeSwiping ? true : open,
       variant: variant,
-      ModalProps: (0, _extends2.default)({
-        BackdropProps: (0, _extends2.default)({}, BackdropProps, {
+      ModalProps: {
+        BackdropProps: {
+          ...BackdropProps,
           ref: backdropRef
-        })
-      }, variant === 'temporary' && {
-        keepMounted: true
-      }, ModalPropsProp),
+        },
+        // Ensures that paperRef.current will be defined inside the touch start event handler
+        // See https://github.com/mui/material-ui/issues/30414 for more information
+        ...(variant === 'temporary' && {
+          keepMounted: true
+        }),
+        ...ModalPropsProp
+      },
       hideBackdrop: hideBackdrop,
-      PaperProps: (0, _extends2.default)({}, PaperProps, {
-        style: (0, _extends2.default)({
-          pointerEvents: variant === 'temporary' && !open && !allowSwipeInChildren ? 'none' : ''
-        }, PaperProps.style),
+      PaperProps: {
+        ...PaperProps,
+        style: {
+          pointerEvents: variant === 'temporary' && !open && !allowSwipeInChildren ? 'none' : '',
+          ...PaperProps.style
+        },
         ref: handleRef
-      }),
+      },
       anchor: anchor,
       transitionDuration: calculatedDurationRef.current || transitionDuration,
       onClose: onClose,
-      ref: ref
-    }, other)), !disableSwipeToOpen && variant === 'temporary' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.NoSsr, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SwipeArea.default, (0, _extends2.default)({
+      ref: ref,
+      ...other
+    }), !disableSwipeToOpen && variant === 'temporary' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.NoSsr, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SwipeArea.default, {
         anchor: anchor,
         ref: swipeAreaRef,
-        width: swipeAreaWidth
-      }, SwipeAreaProps))
+        width: swipeAreaWidth,
+        ...SwipeAreaProps
+      })
     })]
   });
 });

package/node/Switch/Switch.js

@@ -7,8 +7,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 _clsx = _interopRequireDefault(require("clsx"));
@@ -20,7 +18,6 @@ var _SwitchBase = _interopRequireDefault(require("../internal/SwitchBase"));
 var _zeroStyled = require("../zero-styled");
 var _switchClasses = _interopRequireWildcard(require("./switchClasses"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["className", "color", "edge", "size", "sx"];
 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)('MuiSwitch');
@@ -41,7 +38,11 @@ const useUtilityClasses = ownerState => {
     input: ['input']
   };
   const composedClasses = (0, _composeClasses.default)(slots, _switchClasses.getSwitchUtilityClass, classes);
-  return (0, _extends2.default)({}, classes, composedClasses);
+  return {
+    ...classes,
+    // forward the disabled and checked classes to the SwitchBase
+    ...composedClasses
+  };
 };
 const SwitchRoot = (0, _zeroStyled.styled)('span', {
   name: 'MuiSwitch',
@@ -152,7 +153,7 @@ const SwitchSwitchBase = (0, _zeroStyled.styled)(_SwitchBase.default, {
       backgroundColor: 'transparent'
     }
   },
-  variants: [...Object.entries(theme.palette).filter(([, value]) => value.main && value.light) // check all the used fields in the style below
+  variants: [...Object.entries(theme.palette).filter(([, value]) => value && value.main && value.light) // check all the used fields in the style below
   .map(([color]) => ({
     props: {
       color
@@ -212,18 +213,19 @@ const Switch = /*#__PURE__*/React.forwardRef(function Switch(inProps, ref) {
     name: 'MuiSwitch'
   });
   const {
-      className,
-      color = 'primary',
-      edge = false,
-      size = 'medium',
-      sx
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const ownerState = (0, _extends2.default)({}, props, {
+    className,
+    color = 'primary',
+    edge = false,
+    size = 'medium',
+    sx,
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     color,
     edge,
     size
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   const icon = /*#__PURE__*/(0, _jsxRuntime.jsx)(SwitchThumb, {
     className: classes.thumb,
@@ -233,17 +235,18 @@ const Switch = /*#__PURE__*/React.forwardRef(function Switch(inProps, ref) {
     className: (0, _clsx.default)(classes.root, className),
     sx: sx,
     ownerState: ownerState,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SwitchSwitchBase, (0, _extends2.default)({
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SwitchSwitchBase, {
       type: "checkbox",
       icon: icon,
       checkedIcon: icon,
       ref: ref,
-      ownerState: ownerState
-    }, other, {
-      classes: (0, _extends2.default)({}, classes, {
+      ownerState: ownerState,
+      ...other,
+      classes: {
+        ...classes,
         root: classes.switchBase
-      })
-    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(SwitchTrack, {
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(SwitchTrack, {
       className: classes.track,
       ownerState: ownerState
     })]

package/node/Tab/Tab.js

@@ -6,22 +6,19 @@ 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 _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
-var _styled = _interopRequireDefault(require("../styles/styled"));
+var _zeroStyled = require("../zero-styled");
 var _unsupportedProp = _interopRequireDefault(require("../utils/unsupportedProp"));
 var _tabClasses = _interopRequireWildcard(require("./tabClasses"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["className", "disabled", "disableFocusRipple", "fullWidth", "icon", "iconPosition", "indicator", "label", "onChange", "onClick", "onFocus", "selected", "selectionFollowsFocus", "textColor", "value", "wrapped"];
 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)('MuiTab');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -39,7 +36,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _tabClasses.getTabUtilityClass, classes);
 };
-const TabRoot = (0, _styled.default)(_ButtonBase.default, {
+const TabRoot = (0, _zeroStyled.styled)(_ButtonBase.default, {
   name: 'MuiTab',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -49,9 +46,9 @@ const TabRoot = (0, _styled.default)(_ButtonBase.default, {
     return [styles.root, ownerState.label && ownerState.icon && styles.labelIcon, styles[`textColor${(0, _capitalize.default)(ownerState.textColor)}`], ownerState.fullWidth && styles.fullWidth, ownerState.wrapped && styles.wrapped];
   }
 })(({
-  theme,
-  ownerState
-}) => (0, _extends2.default)({}, theme.typography.button, {
+  theme
+}) => ({
+  ...theme.typography.button,
   maxWidth: 360,
   minWidth: 90,
   position: 'relative',
@@ -60,88 +57,162 @@ const TabRoot = (0, _styled.default)(_ButtonBase.default, {
   padding: '12px 16px',
   overflow: 'hidden',
   whiteSpace: 'normal',
-  textAlign: 'center'
-}, ownerState.label && {
-  flexDirection: ownerState.iconPosition === 'top' || ownerState.iconPosition === 'bottom' ? 'column' : 'row'
-}, {
-  lineHeight: 1.25
-}, ownerState.icon && ownerState.label && {
-  minHeight: 72,
-  paddingTop: 9,
-  paddingBottom: 9,
-  [`& > .${_tabClasses.default.iconWrapper}`]: (0, _extends2.default)({}, ownerState.iconPosition === 'top' && {
-    marginBottom: 6
-  }, ownerState.iconPosition === 'bottom' && {
-    marginTop: 6
-  }, ownerState.iconPosition === 'start' && {
-    marginRight: theme.spacing(1)
-  }, ownerState.iconPosition === 'end' && {
-    marginLeft: theme.spacing(1)
-  })
-}, ownerState.textColor === 'inherit' && {
-  color: 'inherit',
-  opacity: 0.6,
-  // same opacity as theme.palette.text.secondary
-  [`&.${_tabClasses.default.selected}`]: {
-    opacity: 1
-  },
-  [`&.${_tabClasses.default.disabled}`]: {
-    opacity: (theme.vars || theme).palette.action.disabledOpacity
-  }
-}, ownerState.textColor === 'primary' && {
-  color: (theme.vars || theme).palette.text.secondary,
-  [`&.${_tabClasses.default.selected}`]: {
-    color: (theme.vars || theme).palette.primary.main
-  },
-  [`&.${_tabClasses.default.disabled}`]: {
-    color: (theme.vars || theme).palette.text.disabled
-  }
-}, ownerState.textColor === 'secondary' && {
-  color: (theme.vars || theme).palette.text.secondary,
-  [`&.${_tabClasses.default.selected}`]: {
-    color: (theme.vars || theme).palette.secondary.main
-  },
-  [`&.${_tabClasses.default.disabled}`]: {
-    color: (theme.vars || theme).palette.text.disabled
-  }
-}, ownerState.fullWidth && {
-  flexShrink: 1,
-  flexGrow: 1,
-  flexBasis: 0,
-  maxWidth: 'none'
-}, ownerState.wrapped && {
-  fontSize: theme.typography.pxToRem(12)
+  textAlign: 'center',
+  lineHeight: 1.25,
+  variants: [{
+    props: ({
+      ownerState
+    }) => ownerState.label && (ownerState.iconPosition === 'top' || ownerState.iconPosition === 'bottom'),
+    style: {
+      flexDirection: 'column'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.label && ownerState.iconPosition !== 'top' && ownerState.iconPosition !== 'bottom',
+    style: {
+      flexDirection: 'row'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.icon && ownerState.label,
+    style: {
+      minHeight: 72,
+      paddingTop: 9,
+      paddingBottom: 9
+    }
+  }, {
+    props: ({
+      ownerState,
+      iconPosition
+    }) => ownerState.icon && ownerState.label && iconPosition === 'top',
+    style: {
+      [`& > .${_tabClasses.default.iconWrapper}`]: {
+        marginBottom: 6
+      }
+    }
+  }, {
+    props: ({
+      ownerState,
+      iconPosition
+    }) => ownerState.icon && ownerState.label && iconPosition === 'bottom',
+    style: {
+      [`& > .${_tabClasses.default.iconWrapper}`]: {
+        marginTop: 6
+      }
+    }
+  }, {
+    props: ({
+      ownerState,
+      iconPosition
+    }) => ownerState.icon && ownerState.label && iconPosition === 'start',
+    style: {
+      [`& > .${_tabClasses.default.iconWrapper}`]: {
+        marginRight: theme.spacing(1)
+      }
+    }
+  }, {
+    props: ({
+      ownerState,
+      iconPosition
+    }) => ownerState.icon && ownerState.label && iconPosition === 'end',
+    style: {
+      [`& > .${_tabClasses.default.iconWrapper}`]: {
+        marginLeft: theme.spacing(1)
+      }
+    }
+  }, {
+    props: {
+      textColor: 'inherit'
+    },
+    style: {
+      color: 'inherit',
+      opacity: 0.6,
+      // same opacity as theme.palette.text.secondary
+      [`&.${_tabClasses.default.selected}`]: {
+        opacity: 1
+      },
+      [`&.${_tabClasses.default.disabled}`]: {
+        opacity: (theme.vars || theme).palette.action.disabledOpacity
+      }
+    }
+  }, {
+    props: {
+      textColor: 'primary'
+    },
+    style: {
+      color: (theme.vars || theme).palette.text.secondary,
+      [`&.${_tabClasses.default.selected}`]: {
+        color: (theme.vars || theme).palette.primary.main
+      },
+      [`&.${_tabClasses.default.disabled}`]: {
+        color: (theme.vars || theme).palette.text.disabled
+      }
+    }
+  }, {
+    props: {
+      textColor: 'secondary'
+    },
+    style: {
+      color: (theme.vars || theme).palette.text.secondary,
+      [`&.${_tabClasses.default.selected}`]: {
+        color: (theme.vars || theme).palette.secondary.main
+      },
+      [`&.${_tabClasses.default.disabled}`]: {
+        color: (theme.vars || theme).palette.text.disabled
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.fullWidth,
+    style: {
+      flexShrink: 1,
+      flexGrow: 1,
+      flexBasis: 0,
+      maxWidth: 'none'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.wrapped,
+    style: {
+      fontSize: theme.typography.pxToRem(12)
+    }
+  }]
 }));
 const Tab = /*#__PURE__*/React.forwardRef(function Tab(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiTab'
   });
   const {
-      className,
-      disabled = false,
-      disableFocusRipple = false,
-      // eslint-disable-next-line react/prop-types
-      fullWidth,
-      icon: iconProp,
-      iconPosition = 'top',
-      // eslint-disable-next-line react/prop-types
-      indicator,
-      label,
-      onChange,
-      onClick,
-      onFocus,
-      // eslint-disable-next-line react/prop-types
-      selected,
-      // eslint-disable-next-line react/prop-types
-      selectionFollowsFocus,
-      // eslint-disable-next-line react/prop-types
-      textColor = 'inherit',
-      value,
-      wrapped = false
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const ownerState = (0, _extends2.default)({}, props, {
+    className,
+    disabled = false,
+    disableFocusRipple = false,
+    // eslint-disable-next-line react/prop-types
+    fullWidth,
+    icon: iconProp,
+    iconPosition = 'top',
+    // eslint-disable-next-line react/prop-types
+    indicator,
+    label,
+    onChange,
+    onClick,
+    onFocus,
+    // eslint-disable-next-line react/prop-types
+    selected,
+    // eslint-disable-next-line react/prop-types
+    selectionFollowsFocus,
+    // eslint-disable-next-line react/prop-types
+    textColor = 'inherit',
+    value,
+    wrapped = false,
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     disabled,
     disableFocusRipple,
     selected,
@@ -151,7 +222,7 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab(inProps, ref) {
     fullWidth,
     textColor,
     wrapped
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   const icon = iconProp && label && /*#__PURE__*/React.isValidElement(iconProp) ? /*#__PURE__*/React.cloneElement(iconProp, {
     className: (0, _clsx.default)(classes.iconWrapper, iconProp.props.className)
@@ -172,7 +243,7 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab(inProps, ref) {
       onFocus(event);
     }
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(TabRoot, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(TabRoot, {
     focusRipple: !disableFocusRipple,
     className: (0, _clsx.default)(classes.root, className),
     ref: ref,
@@ -182,14 +253,14 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab(inProps, ref) {
     onClick: handleClick,
     onFocus: handleFocus,
     ownerState: ownerState,
-    tabIndex: selected ? 0 : -1
-  }, other, {
+    tabIndex: selected ? 0 : -1,
+    ...other,
     children: [iconPosition === 'top' || iconPosition === 'start' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
       children: [icon, label]
     }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
       children: [label, icon]
     }), indicator]
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? Tab.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐