@mui/material 6.0.0-beta.5 → 6.0.0-beta.6

package/node/SvgIcon/SvgIcon.js

@@ -39,88 +39,82 @@ const SvgIconRoot = (0, _zeroStyled.styled)('svg', {
   }
 })(({
   theme
-}) => {
-  var _theme$transitions, _theme$transitions$cr, _transitions, _theme$vars, _theme$typography, _theme$typography$pxT, _theme$typography2, _theme$typography2$px, _theme$typography3, _theme$typography3$px, _theme$vars2, _palette2, _theme$vars4, _palette3, _theme$vars5;
-  return {
-    userSelect: 'none',
-    width: '1em',
-    height: '1em',
-    display: 'inline-block',
-    flexShrink: 0,
-    transition: (_theme$transitions = theme.transitions) == null || (_theme$transitions$cr = _theme$transitions.create) == null ? void 0 : _theme$transitions$cr.call(_theme$transitions, 'fill', {
-      duration: (_transitions = ((_theme$vars = theme.vars) != null ? _theme$vars : theme).transitions) == null || (_transitions = _transitions.duration) == null ? void 0 : _transitions.shorter
-    }),
-    variants: [{
-      props: props => !props.hasSvgAsChild,
-      style: {
-        // the <svg> will define the property that has `currentColor`
-        // for example heroicons uses fill="none" and stroke="currentColor"
-        fill: 'currentColor'
-      }
-    }, {
-      props: {
-        fontSize: 'inherit'
-      },
-      style: {
-        fontSize: 'inherit'
-      }
-    }, {
-      props: {
-        fontSize: 'small'
-      },
-      style: {
-        fontSize: ((_theme$typography = theme.typography) == null || (_theme$typography$pxT = _theme$typography.pxToRem) == null ? void 0 : _theme$typography$pxT.call(_theme$typography, 20)) || '1.25rem'
-      }
-    }, {
-      props: {
-        fontSize: 'medium'
-      },
-      style: {
-        fontSize: ((_theme$typography2 = theme.typography) == null || (_theme$typography2$px = _theme$typography2.pxToRem) == null ? void 0 : _theme$typography2$px.call(_theme$typography2, 24)) || '1.5rem'
-      }
-    }, {
-      props: {
-        fontSize: 'large'
-      },
-      style: {
-        fontSize: ((_theme$typography3 = theme.typography) == null || (_theme$typography3$px = _theme$typography3.pxToRem) == null ? void 0 : _theme$typography3$px.call(_theme$typography3, 35)) || '2.1875rem'
-      }
+}) => ({
+  userSelect: 'none',
+  width: '1em',
+  height: '1em',
+  display: 'inline-block',
+  flexShrink: 0,
+  transition: theme.transitions?.create?.('fill', {
+    duration: (theme.vars ?? theme).transitions?.duration?.shorter
+  }),
+  variants: [{
+    props: props => !props.hasSvgAsChild,
+    style: {
+      // the <svg> will define the property that has `currentColor`
+      // for example heroicons uses fill="none" and stroke="currentColor"
+      fill: 'currentColor'
+    }
+  }, {
+    props: {
+      fontSize: 'inherit'
     },
-    // TODO v5 deprecate color prop, v6 remove for sx
-    ...Object.entries(((_theme$vars2 = theme.vars) != null ? _theme$vars2 : theme).palette).filter(([, value]) => value && value.main).map(([color]) => {
-      var _palette, _theme$vars3;
-      return {
-        props: {
-          color
-        },
-        style: {
-          color: (_palette = ((_theme$vars3 = theme.vars) != null ? _theme$vars3 : theme).palette) == null || (_palette = _palette[color]) == null ? void 0 : _palette.main
-        }
-      };
-    }), {
-      props: {
-        color: 'action'
-      },
-      style: {
-        color: (_palette2 = ((_theme$vars4 = theme.vars) != null ? _theme$vars4 : theme).palette) == null || (_palette2 = _palette2.action) == null ? void 0 : _palette2.active
-      }
-    }, {
-      props: {
-        color: 'disabled'
-      },
-      style: {
-        color: (_palette3 = ((_theme$vars5 = theme.vars) != null ? _theme$vars5 : theme).palette) == null || (_palette3 = _palette3.action) == null ? void 0 : _palette3.disabled
-      }
-    }, {
-      props: {
-        color: 'inherit'
-      },
-      style: {
-        color: undefined
-      }
-    }]
-  };
-});
+    style: {
+      fontSize: 'inherit'
+    }
+  }, {
+    props: {
+      fontSize: 'small'
+    },
+    style: {
+      fontSize: theme.typography?.pxToRem?.(20) || '1.25rem'
+    }
+  }, {
+    props: {
+      fontSize: 'medium'
+    },
+    style: {
+      fontSize: theme.typography?.pxToRem?.(24) || '1.5rem'
+    }
+  }, {
+    props: {
+      fontSize: 'large'
+    },
+    style: {
+      fontSize: theme.typography?.pxToRem?.(35) || '2.1875rem'
+    }
+  },
+  // TODO v5 deprecate color prop, v6 remove for sx
+  ...Object.entries((theme.vars ?? theme).palette).filter(([, value]) => value && value.main).map(([color]) => ({
+    props: {
+      color
+    },
+    style: {
+      color: (theme.vars ?? theme).palette?.[color]?.main
+    }
+  })), {
+    props: {
+      color: 'action'
+    },
+    style: {
+      color: (theme.vars ?? theme).palette?.action?.active
+    }
+  }, {
+    props: {
+      color: 'disabled'
+    },
+    style: {
+      color: (theme.vars ?? theme).palette?.action?.disabled
+    }
+  }, {
+    props: {
+      color: 'inherit'
+    },
+    style: {
+      color: undefined
+    }
+  }]
+}));
 const SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(inProps, ref) {
   const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,

package/node/SwipeableDrawer/SwipeableDrawer.js

@@ -404,12 +404,11 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
     const currentX = calculateCurrentX(anchorRtl, nativeEvent.touches, (0, _ownerDocument.default)(nativeEvent.currentTarget));
     const currentY = calculateCurrentY(anchorRtl, nativeEvent.touches, (0, _ownerWindow.default)(nativeEvent.currentTarget));
     if (!open) {
-      var _paperRef$current;
       // logic for if swipe should be ignored:
       // if disableSwipeToOpen
       // if target != swipeArea, and target is not a child of paper ref
       // if is a child of paper ref, and `allowSwipeInChildren` does not allow it
-      if (disableSwipeToOpen || !(nativeEvent.target === swipeAreaRef.current || (_paperRef$current = paperRef.current) != null && _paperRef$current.contains(nativeEvent.target) && (typeof allowSwipeInChildren === 'function' ? allowSwipeInChildren(nativeEvent, swipeAreaRef.current, paperRef.current) : allowSwipeInChildren))) {
+      if (disableSwipeToOpen || !(nativeEvent.target === swipeAreaRef.current || paperRef.current?.contains(nativeEvent.target) && (typeof allowSwipeInChildren === 'function' ? allowSwipeInChildren(nativeEvent, swipeAreaRef.current, paperRef.current) : allowSwipeInChildren))) {
         return;
       }
       if (horizontalSwipe) {

package/node/TabScrollButton/TabScrollButton.js

@@ -63,7 +63,6 @@ const TabScrollButtonRoot = (0, _zeroStyled.styled)(_ButtonBase.default, {
   }]
 });
 const TabScrollButton = /*#__PURE__*/React.forwardRef(function TabScrollButton(inProps, ref) {
-  var _slots$StartScrollBut, _slots$EndScrollButto;
   const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiTabScrollButton'
@@ -83,8 +82,8 @@ const TabScrollButton = /*#__PURE__*/React.forwardRef(function TabScrollButton(i
     ...props
   };
   const classes = useUtilityClasses(ownerState);
-  const StartButtonIcon = (_slots$StartScrollBut = slots.StartScrollButtonIcon) != null ? _slots$StartScrollBut : _KeyboardArrowLeft.default;
-  const EndButtonIcon = (_slots$EndScrollButto = slots.EndScrollButtonIcon) != null ? _slots$EndScrollButto : _KeyboardArrowRight.default;
+  const StartButtonIcon = slots.StartScrollButtonIcon ?? _KeyboardArrowLeft.default;
+  const EndButtonIcon = slots.EndScrollButtonIcon ?? _KeyboardArrowRight.default;
   const startButtonIconProps = (0, _useSlotProps.default)({
     elementType: StartButtonIcon,
     externalSlotProps: slotProps.startScrollButtonIcon,

package/node/TablePagination/TablePagination.js

@@ -154,7 +154,6 @@ const useUtilityClasses = ownerState => {
  * A `TableCell` based component for placing inside `TableFooter` for pagination.
  */
 const TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(inProps, ref) {
-  var _slotProps$select;
   const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiTablePagination'
@@ -185,7 +184,7 @@ const TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(i
   } = props;
   const ownerState = props;
   const classes = useUtilityClasses(ownerState);
-  const selectProps = (_slotProps$select = slotProps == null ? void 0 : slotProps.select) != null ? _slotProps$select : SelectProps;
+  const selectProps = slotProps?.select ?? SelectProps;
   const MenuItemComponent = selectProps.native ? 'option' : TablePaginationMenuItem;
   let colSpan;
   if (component === _TableCell.default || component === 'td') {

package/node/TablePagination/TablePaginationActions.js

@@ -20,7 +20,6 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 /**
  * @ignore - internal component.
  */const TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePaginationActions(props, ref) {
-  var _slots$firstButton, _slots$lastButton, _slots$nextButton, _slots$previousButton, _slots$firstButtonIco, _slots$lastButtonIcon, _slots$nextButtonIcon, _slots$previousButton2;
   const {
     backIconButtonProps,
     count,
@@ -49,14 +48,14 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
   const handleLastPageButtonClick = event => {
     onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
   };
-  const FirstButton = (_slots$firstButton = slots.firstButton) != null ? _slots$firstButton : _IconButton.default;
-  const LastButton = (_slots$lastButton = slots.lastButton) != null ? _slots$lastButton : _IconButton.default;
-  const NextButton = (_slots$nextButton = slots.nextButton) != null ? _slots$nextButton : _IconButton.default;
-  const PreviousButton = (_slots$previousButton = slots.previousButton) != null ? _slots$previousButton : _IconButton.default;
-  const FirstButtonIcon = (_slots$firstButtonIco = slots.firstButtonIcon) != null ? _slots$firstButtonIco : _FirstPage.default;
-  const LastButtonIcon = (_slots$lastButtonIcon = slots.lastButtonIcon) != null ? _slots$lastButtonIcon : _LastPage.default;
-  const NextButtonIcon = (_slots$nextButtonIcon = slots.nextButtonIcon) != null ? _slots$nextButtonIcon : _KeyboardArrowRight.default;
-  const PreviousButtonIcon = (_slots$previousButton2 = slots.previousButtonIcon) != null ? _slots$previousButton2 : _KeyboardArrowLeft.default;
+  const FirstButton = slots.firstButton ?? _IconButton.default;
+  const LastButton = slots.lastButton ?? _IconButton.default;
+  const NextButton = slots.nextButton ?? _IconButton.default;
+  const PreviousButton = slots.previousButton ?? _IconButton.default;
+  const FirstButtonIcon = slots.firstButtonIcon ?? _FirstPage.default;
+  const LastButtonIcon = slots.lastButtonIcon ?? _LastPage.default;
+  const NextButtonIcon = slots.nextButtonIcon ?? _KeyboardArrowRight.default;
+  const PreviousButtonIcon = slots.previousButtonIcon ?? _KeyboardArrowLeft.default;
   const FirstButtonSlot = isRtl ? LastButton : FirstButton;
   const PreviousButtonSlot = isRtl ? NextButton : PreviousButton;
   const NextButtonSlot = isRtl ? PreviousButton : NextButton;
@@ -85,7 +84,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
       color: "inherit",
       "aria-label": getItemAriaLabel('previous', page),
       title: getItemAriaLabel('previous', page),
-      ...(previousButtonSlotProps != null ? previousButtonSlotProps : backIconButtonProps),
+      ...(previousButtonSlotProps ?? backIconButtonProps),
       children: isRtl ? /*#__PURE__*/(0, _jsxRuntime.jsx)(NextButtonIcon, {
         ...slotProps.nextButtonIcon
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(PreviousButtonIcon, {
@@ -97,7 +96,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
       color: "inherit",
       "aria-label": getItemAriaLabel('next', page),
       title: getItemAriaLabel('next', page),
-      ...(nextButtonSlotProps != null ? nextButtonSlotProps : nextIconButtonProps),
+      ...(nextButtonSlotProps ?? nextIconButtonProps),
       children: isRtl ? /*#__PURE__*/(0, _jsxRuntime.jsx)(PreviousButtonIcon, {
         ...slotProps.previousButtonIcon
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(NextButtonIcon, {

package/node/Tabs/Tabs.js

@@ -559,12 +559,10 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     const handleMutation = records => {
       records.forEach(record => {
         record.removedNodes.forEach(item => {
-          var _resizeObserver;
-          (_resizeObserver = resizeObserver) == null || _resizeObserver.unobserve(item);
+          resizeObserver?.unobserve(item);
         });
         record.addedNodes.forEach(item => {
-          var _resizeObserver2;
-          (_resizeObserver2 = resizeObserver) == null || _resizeObserver2.observe(item);
+          resizeObserver?.observe(item);
         });
       });
       handleResize();
@@ -586,11 +584,10 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       });
     }
     return () => {
-      var _mutationObserver, _resizeObserver3;
       handleResize.clear();
       win.removeEventListener('resize', handleResize);
-      (_mutationObserver = mutationObserver) == null || _mutationObserver.disconnect();
-      (_resizeObserver3 = resizeObserver) == null || _resizeObserver3.disconnect();
+      mutationObserver?.disconnect();
+      resizeObserver?.disconnect();
     };
   }, [updateIndicatorState, updateScrollButtonState]);
 
@@ -624,7 +621,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       };
     }
     return undefined;
-  }, [scrollable, scrollButtons, updateScrollObserver, childrenProp == null ? void 0 : childrenProp.length]);
+  }, [scrollable, scrollButtons, updateScrollObserver, childrenProp?.length]);
   React.useEffect(() => {
     setMounted(true);
   }, []);

package/node/Tooltip/Tooltip.js

@@ -319,7 +319,6 @@ function composeEventHandler(handler, eventHandler) {
 
 // TODO v6: Remove PopperComponent, PopperProps, TransitionComponent and TransitionProps.
 const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
-  var _ref, _slots$popper, _ref2, _ref3, _slots$transition, _ref4, _slots$tooltip, _ref5, _slots$arrow, _slotProps$popper, _ref6, _slotProps$popper2, _slotProps$transition, _slotProps$tooltip, _ref7, _slotProps$tooltip2, _slotProps$arrow, _ref8, _slotProps$arrow2;
   const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiTooltip'
@@ -599,7 +598,6 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
     }
   }
   const popperOptions = React.useMemo(() => {
-    var _PopperProps$popperOp;
     let tooltipModifiers = [{
       name: 'arrow',
       enabled: Boolean(arrowRef),
@@ -608,7 +606,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
         padding: 4
       }
     }];
-    if ((_PopperProps$popperOp = PopperProps.popperOptions) != null && _PopperProps$popperOp.modifiers) {
+    if (PopperProps.popperOptions?.modifiers) {
       tooltipModifiers = tooltipModifiers.concat(PopperProps.popperOptions.modifiers);
     }
     return {
@@ -626,30 +624,30 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
     touch: ignoreNonTouchEvents.current
   };
   const classes = useUtilityClasses(ownerState);
-  const PopperComponent = (_ref = (_slots$popper = slots.popper) != null ? _slots$popper : components.Popper) != null ? _ref : TooltipPopper;
-  const TransitionComponent = (_ref2 = (_ref3 = (_slots$transition = slots.transition) != null ? _slots$transition : components.Transition) != null ? _ref3 : TransitionComponentProp) != null ? _ref2 : _Grow.default;
-  const TooltipComponent = (_ref4 = (_slots$tooltip = slots.tooltip) != null ? _slots$tooltip : components.Tooltip) != null ? _ref4 : TooltipTooltip;
-  const ArrowComponent = (_ref5 = (_slots$arrow = slots.arrow) != null ? _slots$arrow : components.Arrow) != null ? _ref5 : TooltipArrow;
+  const PopperComponent = slots.popper ?? components.Popper ?? TooltipPopper;
+  const TransitionComponent = slots.transition ?? components.Transition ?? TransitionComponentProp ?? _Grow.default;
+  const TooltipComponent = slots.tooltip ?? components.Tooltip ?? TooltipTooltip;
+  const ArrowComponent = slots.arrow ?? components.Arrow ?? TooltipArrow;
   const popperProps = (0, _appendOwnerState.default)(PopperComponent, {
     ...PopperProps,
-    ...((_slotProps$popper = slotProps.popper) != null ? _slotProps$popper : componentsProps.popper),
-    className: (0, _clsx.default)(classes.popper, PopperProps == null ? void 0 : PopperProps.className, (_ref6 = (_slotProps$popper2 = slotProps.popper) != null ? _slotProps$popper2 : componentsProps.popper) == null ? void 0 : _ref6.className)
+    ...(slotProps.popper ?? componentsProps.popper),
+    className: (0, _clsx.default)(classes.popper, PopperProps?.className, (slotProps.popper ?? componentsProps.popper)?.className)
   }, ownerState);
   const transitionProps = (0, _appendOwnerState.default)(TransitionComponent, {
     ...TransitionProps,
-    ...((_slotProps$transition = slotProps.transition) != null ? _slotProps$transition : componentsProps.transition)
+    ...(slotProps.transition ?? componentsProps.transition)
   }, ownerState);
   const tooltipProps = (0, _appendOwnerState.default)(TooltipComponent, {
-    ...((_slotProps$tooltip = slotProps.tooltip) != null ? _slotProps$tooltip : componentsProps.tooltip),
-    className: (0, _clsx.default)(classes.tooltip, (_ref7 = (_slotProps$tooltip2 = slotProps.tooltip) != null ? _slotProps$tooltip2 : componentsProps.tooltip) == null ? void 0 : _ref7.className)
+    ...(slotProps.tooltip ?? componentsProps.tooltip),
+    className: (0, _clsx.default)(classes.tooltip, (slotProps.tooltip ?? componentsProps.tooltip)?.className)
   }, ownerState);
   const tooltipArrowProps = (0, _appendOwnerState.default)(ArrowComponent, {
-    ...((_slotProps$arrow = slotProps.arrow) != null ? _slotProps$arrow : componentsProps.arrow),
-    className: (0, _clsx.default)(classes.arrow, (_ref8 = (_slotProps$arrow2 = slotProps.arrow) != null ? _slotProps$arrow2 : componentsProps.arrow) == null ? void 0 : _ref8.className)
+    ...(slotProps.arrow ?? componentsProps.arrow),
+    className: (0, _clsx.default)(classes.arrow, (slotProps.arrow ?? componentsProps.arrow)?.className)
   }, ownerState);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
     children: [/*#__PURE__*/React.cloneElement(children, childrenProps), /*#__PURE__*/(0, _jsxRuntime.jsx)(PopperComponent, {
-      as: PopperComponentProp != null ? PopperComponentProp : _Popper.default,
+      as: PopperComponentProp ?? _Popper.default,
       placement: placement,
       anchorEl: followCursor ? {
         getBoundingClientRect: () => ({

package/node/Typography/Typography.js

@@ -17,6 +17,17 @@ var _typographyClasses = require("./typographyClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 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 v6Colors = {
+  primary: true,
+  secondary: true,
+  error: true,
+  info: true,
+  success: true,
+  warning: true,
+  textPrimary: true,
+  textSecondary: true,
+  textDisabled: true
+};
 const extendSxProp = (0, _zeroStyled.internal_createExtendSxProp)();
 const useUtilityClasses = ownerState => {
   const {
@@ -67,6 +78,13 @@ const TypographyRoot = exports.TypographyRoot = (0, _zeroStyled.styled)('span',
     style: {
       color: (theme.vars || theme).palette[color].main
     }
+  })), ...Object.entries(theme.palette?.text || {}).filter(([, value]) => typeof value === 'string').map(([color]) => ({
+    props: {
+      color: `text${(0, _capitalize.default)(color)}`
+    },
+    style: {
+      color: (theme.vars || theme).palette.text[color]
+    }
   })), {
     props: ({
       ownerState
@@ -112,19 +130,6 @@ const defaultVariantMapping = {
   body2: 'p',
   inherit: 'p'
 };
-
-// TODO v7: remove this transformation and `extendSxProp`
-const colorTransformations = {
-  textPrimary: 'text.primary',
-  textSecondary: 'text.secondary',
-  // For the main palette, the color will be applied by the `...Object.entries(theme.palette)` clause in the TypographyRoot's styles
-  primary: null,
-  secondary: null,
-  error: null,
-  info: null,
-  success: null,
-  warning: null
-};
 const Typography = /*#__PURE__*/React.forwardRef(function Typography(inProps, ref) {
   const {
     color,
@@ -133,11 +138,12 @@ const Typography = /*#__PURE__*/React.forwardRef(function Typography(inProps, re
     props: inProps,
     name: 'MuiTypography'
   });
-  const textColor = colorTransformations[color];
+  const isSxColor = !v6Colors[color];
+  // TODO: Remove `extendSxProp` in v7
   const props = extendSxProp({
     ...themeProps,
-    ...(textColor !== null && {
-      color: textColor || color
+    ...(isSxColor && {
+      color
     })
   });
   const {
@@ -201,6 +207,12 @@ process.env.NODE_ENV !== "production" ? Typography.propTypes /* remove-proptypes
    * @ignore
    */
   className: _propTypes.default.string,
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
+   */
+  color: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.oneOf(['primary', 'secondary', 'success', 'error', 'info', 'warning', 'textPrimary', 'textSecondary', 'textDisabled']), _propTypes.default.string]),
   /**
    * The component used for the root node.
    * Either a string to use a HTML element or a component.

package/node/Unstable_TrapFocus/FocusTrap.js

@@ -207,8 +207,7 @@ function FocusTrap(props) {
       // one of the sentinel nodes was focused, so move the focus
       // to the first/last tabbable element inside the focus trap
       if (tabbable.length > 0) {
-        var _lastKeydown$current, _lastKeydown$current2;
-        const isShiftTab = Boolean(((_lastKeydown$current = lastKeydown.current) == null ? void 0 : _lastKeydown$current.shiftKey) && ((_lastKeydown$current2 = lastKeydown.current) == null ? void 0 : _lastKeydown$current2.key) === 'Tab');
+        const isShiftTab = Boolean(lastKeydown.current?.shiftKey && lastKeydown.current?.key === 'Tab');
         const focusNext = tabbable[0];
         const focusPrevious = tabbable[tabbable.length - 1];
         if (typeof focusNext !== 'string' && typeof focusPrevious !== 'string') {

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v6.0.0-beta.5
+ * @mui/material v6.0.0-beta.6
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/node/styles/createGetSelector.js

@@ -15,7 +15,7 @@ var _default = theme => (colorScheme, css) => {
   if (selector === 'data') {
     rule = '[data-%s]';
   }
-  if (selector != null && selector.startsWith('data-') && !selector.includes('%s')) {
+  if (selector?.startsWith('data-') && !selector.includes('%s')) {
     // 'data-mui-color-scheme' -> '[data-mui-color-scheme="%s"]'
     rule = `[${selector}="%s"]`;
   }
@@ -29,7 +29,9 @@ var _default = theme => (colorScheme, css) => {
       if (rule === 'media') {
         return {
           ':root': css,
-          '@media (prefers-color-scheme: dark) { :root': excludedVariables
+          [`@media (prefers-color-scheme: dark)`]: {
+            ':root': excludedVariables
+          }
         };
       }
       if (rule) {
@@ -50,7 +52,11 @@ var _default = theme => (colorScheme, css) => {
     }
   } else if (colorScheme) {
     if (rule === 'media') {
-      return `@media (prefers-color-scheme: ${String(colorScheme)}) { :root`;
+      return {
+        [`@media (prefers-color-scheme: ${String(colorScheme)})`]: {
+          ':root': css
+        }
+      };
     }
     if (rule) {
       return rule.replace('%s', String(colorScheme));

package/node/styles/createTheme.js

@@ -47,11 +47,11 @@ function createTheme(options = {},
     colorSchemes: initialColorSchemes = !palette ? {
       light: true
     } : undefined,
-    defaultColorScheme: initialDefaultColorScheme = palette == null ? void 0 : palette.mode,
+    defaultColorScheme: initialDefaultColorScheme = palette?.mode,
     ...rest
   } = options;
   const defaultColorSchemeInput = initialDefaultColorScheme || 'light';
-  const defaultScheme = initialColorSchemes == null ? void 0 : initialColorSchemes[defaultColorSchemeInput];
+  const defaultScheme = initialColorSchemes?.[defaultColorSchemeInput];
   const colorSchemesInput = {
     ...initialColorSchemes,
     ...(palette ? {

package/node/styles/createThemeNoVars.js

@@ -81,7 +81,7 @@ Please use another name.` : (0, _formatMuiErrorMessage2.default)(20));
   }
   muiTheme.unstable_sxConfig = {
     ..._styleFunctionSx.unstable_defaultSxConfig,
-    ...(other == null ? void 0 : other.unstable_sxConfig)
+    ...other?.unstable_sxConfig
   };
   muiTheme.unstable_sx = function sx(props) {
     return (0, _styleFunctionSx.default)({

package/node/styles/createThemeWithVars.js

@@ -71,19 +71,17 @@ const silent = fn => {
 const createGetCssVar = (cssVarPrefix = 'mui') => (0, _system.unstable_createGetCssVar)(cssVarPrefix);
 exports.createGetCssVar = createGetCssVar;
 function attachColorScheme(colorSchemes, scheme, restTheme, colorScheme) {
-  var _scheme2, _scheme3, _scheme4;
   if (!scheme) {
     return undefined;
   }
   scheme = scheme === true ? {} : scheme;
   const mode = colorScheme === 'dark' ? 'dark' : 'light';
   if (!restTheme) {
-    var _scheme;
     colorSchemes[colorScheme] = (0, _createColorScheme.default)({
       ...scheme,
       palette: {
         mode,
-        ...((_scheme = scheme) == null ? void 0 : _scheme.palette)
+        ...scheme?.palette
       }
     });
     return undefined;
@@ -95,7 +93,7 @@ function attachColorScheme(colorSchemes, scheme, restTheme, colorScheme) {
     ...restTheme,
     palette: {
       mode,
-      ...((_scheme2 = scheme) == null ? void 0 : _scheme2.palette)
+      ...scheme?.palette
     }
   });
   colorSchemes[colorScheme] = {
@@ -103,9 +101,9 @@ function attachColorScheme(colorSchemes, scheme, restTheme, colorScheme) {
     palette,
     opacity: {
       ...(0, _createColorScheme.getOpacity)(mode),
-      ...((_scheme3 = scheme) == null ? void 0 : _scheme3.opacity)
+      ...scheme?.opacity
     },
-    overlays: ((_scheme4 = scheme) == null ? void 0 : _scheme4.overlays) || (0, _createColorScheme.getOverlays)(mode)
+    overlays: scheme?.overlays || (0, _createColorScheme.getOverlays)(mode)
   };
   return muiTheme;
 }
@@ -389,7 +387,7 @@ function createThemeWithVars(options = {}, ...args) {
   theme.shouldSkipGeneratingVar = shouldSkipGeneratingVar;
   theme.unstable_sxConfig = {
     ..._styleFunctionSx.unstable_defaultSxConfig,
-    ...(input == null ? void 0 : input.unstable_sxConfig)
+    ...input?.unstable_sxConfig
   };
   theme.unstable_sx = function sx(props) {
     return (0, _styleFunctionSx.default)({

package/node/styles/shouldSkipGeneratingVar.js

@@ -5,8 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = shouldSkipGeneratingVar;
 function shouldSkipGeneratingVar(keys) {
-  var _keys$;
   return !!keys[0].match(/(cssVarPrefix|colorSchemeSelector|typography|mixins|breakpoints|direction|transitions)/) || !!keys[0].match(/sxConfig$/) ||
   // ends with sxConfig
-  keys[0] === 'palette' && !!((_keys$ = keys[1]) != null && _keys$.match(/(mode|contrastThreshold|tonalOffset)/));
+  keys[0] === 'palette' && !!keys[1]?.match(/(mode|contrastThreshold|tonalOffset)/);
 }

package/node/transitions/utils.js

@@ -8,15 +8,14 @@ exports.reflow = void 0;
 const reflow = node => node.scrollTop;
 exports.reflow = reflow;
 function getTransitionProps(props, options) {
-  var _style$transitionDura, _style$transitionTimi;
   const {
     timeout,
     easing,
     style = {}
   } = props;
   return {
-    duration: (_style$transitionDura = style.transitionDuration) != null ? _style$transitionDura : typeof timeout === 'number' ? timeout : timeout[options.mode] || 0,
-    easing: (_style$transitionTimi = style.transitionTimingFunction) != null ? _style$transitionTimi : typeof easing === 'object' ? easing[options.mode] : easing,
+    duration: style.transitionDuration ?? (typeof timeout === 'number' ? timeout : timeout[options.mode] || 0),
+    easing: style.transitionTimingFunction ?? (typeof easing === 'object' ? easing[options.mode] : easing),
     delay: style.transitionDelay
   };
 }