@mui/material 6.0.0-alpha.9 → 6.0.0-beta.1

package/node/Rating/Rating.js

@@ -14,16 +14,17 @@ var _visuallyHidden = _interopRequireDefault(require("@mui/utils/visuallyHidden"
 var _chainPropTypes = _interopRequireDefault(require("@mui/utils/chainPropTypes"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _RtlProvider = require("@mui/system/RtlProvider");
+var _isFocusVisible = _interopRequireDefault(require("@mui/utils/isFocusVisible"));
 var _utils = require("../utils");
 var _Star = _interopRequireDefault(require("../internal/svg-icons/Star"));
 var _StarBorder = _interopRequireDefault(require("../internal/svg-icons/StarBorder"));
 var _zeroStyled = require("../zero-styled");
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _slotShouldForwardProp = _interopRequireDefault(require("../styles/slotShouldForwardProp"));
 var _ratingClasses = _interopRequireWildcard(require("./ratingClasses"));
 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 useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiRating');
 function getDecimalPrecision(num) {
   const decimalPart = num.toString().split('.')[1];
   return decimalPart ? decimalPart.length : 0;
@@ -313,7 +314,7 @@ function defaultLabelText(value) {
   return `${value} Star${value !== 1 ? 's' : ''}`;
 }
 const Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
-  const props = useThemeProps({
+  const props = (0, _DefaultPropsProvider.useDefaultProps)({
     name: 'MuiRating',
     props: inProps
   });
@@ -361,15 +362,9 @@ const Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
   if (focus !== -1) {
     value = focus;
   }
-  const {
-    isFocusVisibleRef,
-    onBlur: handleBlurVisible,
-    onFocus: handleFocusVisible,
-    ref: focusVisibleRef
-  } = (0, _utils.useIsFocusVisible)();
   const [focusVisible, setFocusVisible] = React.useState(false);
   const rootRef = React.useRef();
-  const handleRef = (0, _utils.useForkRef)(focusVisibleRef, rootRef, ref);
+  const handleRef = (0, _utils.useForkRef)(rootRef, ref);
   const handleMouseMove = event => {
     if (onMouseMove) {
       onMouseMove(event);
@@ -439,8 +434,7 @@ const Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
     }
   };
   const handleFocus = event => {
-    handleFocusVisible(event);
-    if (isFocusVisibleRef.current === true) {
+    if ((0, _isFocusVisible.default)(event.target)) {
       setFocusVisible(true);
     }
     const newFocus = parseFloat(event.target.value);
@@ -453,8 +447,7 @@ const Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
     if (hover !== -1) {
       return;
     }
-    handleBlurVisible(event);
-    if (isFocusVisibleRef.current === false) {
+    if (!(0, _isFocusVisible.default)(event.target)) {
       setFocusVisible(false);
     }
     const newFocus = -1;

package/node/ScopedCssBaseline/ScopedCssBaseline.js

@@ -10,8 +10,8 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
-var _styled = _interopRequireDefault(require("../styles/styled"));
+var _zeroStyled = require("../zero-styled");
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _CssBaseline = require("../CssBaseline/CssBaseline");
 var _scopedCssBaselineClasses = require("./scopedCssBaselineClasses");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -26,25 +26,32 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _scopedCssBaselineClasses.getScopedCssBaselineUtilityClass, classes);
 };
-const ScopedCssBaselineRoot = (0, _styled.default)('div', {
+const ScopedCssBaselineRoot = (0, _zeroStyled.styled)('div', {
   name: 'MuiScopedCssBaseline',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
 })(({
-  theme,
-  ownerState
+  theme
 }) => {
   const colorSchemeStyles = {};
-  if (ownerState.enableColorScheme && theme.colorSchemes) {
+  if (theme.colorSchemes) {
     Object.entries(theme.colorSchemes).forEach(([key, scheme]) => {
-      var _scheme$palette;
-      colorSchemeStyles[`&${theme.getColorSchemeSelector(key).replace(/\s*&/, '')}`] = {
-        colorScheme: (_scheme$palette = scheme.palette) == null ? void 0 : _scheme$palette.mode
-      };
+      const selector = theme.getColorSchemeSelector(key);
+      if (selector.startsWith('@')) {
+        var _scheme$palette;
+        colorSchemeStyles[selector] = {
+          colorScheme: (_scheme$palette = scheme.palette) == null ? void 0 : _scheme$palette.mode
+        };
+      } else {
+        var _scheme$palette2;
+        colorSchemeStyles[`&${selector.replace(/\s*&/, '')}`] = {
+          colorScheme: (_scheme$palette2 = scheme.palette) == null ? void 0 : _scheme$palette2.mode
+        };
+      }
     });
   }
   return {
-    ...(0, _CssBaseline.html)(theme, ownerState.enableColorScheme),
+    ...(0, _CssBaseline.html)(theme, false),
     ...(0, _CssBaseline.body)(theme),
     '& *, & *::before, & *::after': {
       boxSizing: 'inherit'
@@ -52,11 +59,18 @@ const ScopedCssBaselineRoot = (0, _styled.default)('div', {
     '& strong, & b': {
       fontWeight: theme.typography.fontWeightBold
     },
-    ...colorSchemeStyles
+    variants: [{
+      props: {
+        enableColorScheme: true
+      },
+      style: theme.vars ? colorSchemeStyles : {
+        colorScheme: theme.palette.mode
+      }
+    }]
   };
 });
 const ScopedCssBaseline = /*#__PURE__*/React.forwardRef(function ScopedCssBaseline(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiScopedCssBaseline'
   });

package/node/Skeleton/Skeleton.js

@@ -12,11 +12,11 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _styles = require("../styles");
 var _zeroStyled = require("../zero-styled");
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _skeletonClasses = require("./skeletonClasses");
 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 useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiSkeleton');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -182,7 +182,7 @@ const SkeletonRoot = (0, _zeroStyled.styled)('span', {
   };
 });
 const Skeleton = /*#__PURE__*/React.forwardRef(function Skeleton(inProps, ref) {
-  const props = useThemeProps({
+  const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiSkeleton'
   });

package/node/Slide/Slide.js

@@ -15,7 +15,7 @@ var _HTMLElementType = _interopRequireDefault(require("@mui/utils/HTMLElementTyp
 var _elementAcceptingRef = _interopRequireDefault(require("@mui/utils/elementAcceptingRef"));
 var _debounce = _interopRequireDefault(require("../utils/debounce"));
 var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
-var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
+var _zeroStyled = require("../zero-styled");
 var _utils = require("../transitions/utils");
 var _utils2 = require("../utils");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -83,7 +83,7 @@ function setTranslateValue(direction, node, containerProp) {
  * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
  */
 const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
-  const theme = (0, _useTheme.default)();
+  const theme = (0, _zeroStyled.useTheme)();
   const defaultEasing = {
     enter: theme.transitions.easing.easeOut,
     exit: theme.transitions.easing.sharp

package/node/Slider/Slider.js

@@ -10,12 +10,14 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _chainPropTypes = _interopRequireDefault(require("@mui/utils/chainPropTypes"));
-var _utils = require("@mui/base/utils");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _useSlider = require("@mui/base/useSlider");
 var _colorManipulator = require("@mui/system/colorManipulator");
 var _RtlProvider = require("@mui/system/RtlProvider");
+var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
+var _useSlider = require("./useSlider");
+var _isHostComponent = _interopRequireDefault(require("../utils/isHostComponent"));
 var _zeroStyled = require("../zero-styled");
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _slotShouldForwardProp = _interopRequireDefault(require("../styles/slotShouldForwardProp"));
 var _shouldSpreadAdditionalProps = _interopRequireDefault(require("../utils/shouldSpreadAdditionalProps"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
@@ -24,7 +26,6 @@ var _sliderClasses = _interopRequireWildcard(require("./sliderClasses"));
 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 useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiSlider');
 function Identity(x) {
   return x;
 }
@@ -544,7 +545,7 @@ const Forward = ({
 }) => children;
 const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
   var _ref, _slots$root, _ref2, _slots$rail, _ref3, _slots$track, _ref4, _slots$thumb, _ref5, _slots$valueLabel, _ref6, _slots$mark, _ref7, _slots$markLabel, _ref8, _slots$input, _slotProps$root, _slotProps$rail, _slotProps$track, _slotProps$thumb, _slotProps$valueLabel, _slotProps$mark, _slotProps$markLabel, _slotProps$input;
-  const props = useThemeProps({
+  const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inputProps,
     name: 'MuiSlider'
   });
@@ -645,7 +646,7 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
   const markSlotProps = (_slotProps$mark = slotProps == null ? void 0 : slotProps.mark) != null ? _slotProps$mark : componentsProps.mark;
   const markLabelSlotProps = (_slotProps$markLabel = slotProps == null ? void 0 : slotProps.markLabel) != null ? _slotProps$markLabel : componentsProps.markLabel;
   const inputSlotProps = (_slotProps$input = slotProps == null ? void 0 : slotProps.input) != null ? _slotProps$input : componentsProps.input;
-  const rootProps = (0, _utils.useSlotProps)({
+  const rootProps = (0, _useSlotProps.default)({
     elementType: RootSlot,
     getSlotProps: getRootProps,
     externalSlotProps: rootSlotProps,
@@ -661,13 +662,13 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
     },
     className: [classes.root, className]
   });
-  const railProps = (0, _utils.useSlotProps)({
+  const railProps = (0, _useSlotProps.default)({
     elementType: RailSlot,
     externalSlotProps: railSlotProps,
     ownerState,
     className: classes.rail
   });
-  const trackProps = (0, _utils.useSlotProps)({
+  const trackProps = (0, _useSlotProps.default)({
     elementType: TrackSlot,
     externalSlotProps: trackSlotProps,
     additionalProps: {
@@ -682,7 +683,7 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
     },
     className: classes.track
   });
-  const thumbProps = (0, _utils.useSlotProps)({
+  const thumbProps = (0, _useSlotProps.default)({
     elementType: ThumbSlot,
     getSlotProps: getThumbProps,
     externalSlotProps: thumbSlotProps,
@@ -692,7 +693,7 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
     },
     className: classes.thumb
   });
-  const valueLabelProps = (0, _utils.useSlotProps)({
+  const valueLabelProps = (0, _useSlotProps.default)({
     elementType: ValueLabelSlot,
     externalSlotProps: valueLabelSlotProps,
     ownerState: {
@@ -701,19 +702,19 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
     },
     className: classes.valueLabel
   });
-  const markProps = (0, _utils.useSlotProps)({
+  const markProps = (0, _useSlotProps.default)({
     elementType: MarkSlot,
     externalSlotProps: markSlotProps,
     ownerState,
     className: classes.mark
   });
-  const markLabelProps = (0, _utils.useSlotProps)({
+  const markLabelProps = (0, _useSlotProps.default)({
     elementType: MarkLabelSlot,
     externalSlotProps: markLabelSlotProps,
     ownerState,
     className: classes.markLabel
   });
-  const inputSliderProps = (0, _utils.useSlotProps)({
+  const inputSliderProps = (0, _useSlotProps.default)({
     elementType: InputSlot,
     getSlotProps: getHiddenInputProps,
     externalSlotProps: inputSlotProps,
@@ -738,7 +739,7 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(MarkSlot, {
           "data-index": index,
           ...markProps,
-          ...(!(0, _utils.isHostComponent)(MarkSlot) && {
+          ...(!(0, _isHostComponent.default)(MarkSlot) && {
             markActive
           }),
           style: {
@@ -750,7 +751,7 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
           "aria-hidden": true,
           "data-index": index,
           ...markLabelProps,
-          ...(!(0, _utils.isHostComponent)(MarkLabelSlot) && {
+          ...(!(0, _isHostComponent.default)(MarkLabelSlot) && {
             markLabelActive: markActive
           }),
           style: {
@@ -769,7 +770,7 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
         /*#__PURE__*/
         /* TODO v6: Change component structure. It will help in avoiding the complicated React.cloneElement API added in SliderValueLabel component. Should be: Thumb -> Input, ValueLabel. Follow Joy UI's Slider structure. */
         (0, _jsxRuntime.jsx)(ValueLabelComponent, {
-          ...(!(0, _utils.isHostComponent)(ValueLabelComponent) && {
+          ...(!(0, _isHostComponent.default)(ValueLabelComponent) && {
             valueLabelFormat,
             valueLabelDisplay,
             value: typeof valueLabelFormat === 'function' ? valueLabelFormat(scale(value), index) : valueLabelFormat,