@mui/material 6.0.0-alpha.7 → 6.0.0-alpha.9

package/Skeleton/Skeleton.js

@@ -1,8 +1,5 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["animation", "className", "component", "height", "style", "variant", "width"];
 import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
@@ -182,33 +179,35 @@ const Skeleton = /*#__PURE__*/React.forwardRef(function Skeleton(inProps, ref) {
     name: 'MuiSkeleton'
   });
   const {
-      animation = 'pulse',
-      className,
-      component = 'span',
-      height,
-      style,
-      variant = 'text',
-      width
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    animation = 'pulse',
+    className,
+    component = 'span',
+    height,
+    style,
+    variant = 'text',
+    width,
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     animation,
     component,
     variant,
     hasChildren: Boolean(other.children)
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(SkeletonRoot, _extends({
+  return /*#__PURE__*/_jsx(SkeletonRoot, {
     as: component,
     ref: ref,
     className: clsx(classes.root, className),
-    ownerState: ownerState
-  }, other, {
-    style: _extends({
+    ownerState: ownerState,
+    ...other,
+    style: {
       width,
-      height
-    }, style)
-  }));
+      height,
+      ...style
+    }
+  });
 });
 process.env.NODE_ENV !== "production" ? Skeleton.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/Slide/Slide.d.ts

@@ -61,4 +61,4 @@ export interface SlideProps extends TransitionProps {
  * - [Slide API](https://mui.com/material-ui/api/slide/)
  * - inherits [Transition API](https://reactcommunity.org/react-transition-group/transition/#Transition-props)
  */
-export default function Slide(props: SlideProps): JSX.Element;
+export default function Slide(props: SlideProps): React.JSX.Element;

package/Slide/Slide.js

@@ -1,8 +1,5 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["addEndListener", "appear", "children", "container", "direction", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { Transition } from 'react-transition-group';
@@ -88,25 +85,25 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
     exit: theme.transitions.duration.leavingScreen
   };
   const {
-      addEndListener,
-      appear = true,
-      children,
-      container: containerProp,
-      direction = 'down',
-      easing: easingProp = defaultEasing,
-      in: inProp,
-      onEnter,
-      onEntered,
-      onEntering,
-      onExit,
-      onExited,
-      onExiting,
-      style,
-      timeout = defaultTimeout,
-      // eslint-disable-next-line react/prop-types
-      TransitionComponent = Transition
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    addEndListener,
+    appear = true,
+    children,
+    container: containerProp,
+    direction = 'down',
+    easing: easingProp = defaultEasing,
+    in: inProp,
+    onEnter,
+    onEntered,
+    onEntering,
+    onExit,
+    onExited,
+    onExiting,
+    style,
+    timeout = defaultTimeout,
+    // eslint-disable-next-line react/prop-types
+    TransitionComponent = Transition,
+    ...other
+  } = props;
   const childrenRef = React.useRef(null);
   const handleRef = useForkRef(children.ref, childrenRef, ref);
   const normalizedTransitionCallback = callback => isAppearing => {
@@ -134,8 +131,12 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
     }, {
       mode: 'enter'
     });
-    node.style.webkitTransition = theme.transitions.create('-webkit-transform', _extends({}, transitionProps));
-    node.style.transition = theme.transitions.create('transform', _extends({}, transitionProps));
+    node.style.webkitTransition = theme.transitions.create('-webkit-transform', {
+      ...transitionProps
+    });
+    node.style.transition = theme.transitions.create('transform', {
+      ...transitionProps
+    });
     node.style.webkitTransform = 'none';
     node.style.transform = 'none';
     if (onEntering) {
@@ -202,7 +203,7 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
       updatePosition();
     }
   }, [inProp, updatePosition]);
-  return /*#__PURE__*/_jsx(TransitionComponent, _extends({
+  return /*#__PURE__*/_jsx(TransitionComponent, {
     nodeRef: childrenRef,
     onEnter: handleEnter,
     onEntered: handleEntered,
@@ -213,17 +214,20 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
     addEndListener: handleAddEndListener,
     appear: appear,
     in: inProp,
-    timeout: timeout
-  }, other, {
+    timeout: timeout,
+    ...other,
     children: (state, childProps) => {
-      return /*#__PURE__*/React.cloneElement(children, _extends({
+      return /*#__PURE__*/React.cloneElement(children, {
         ref: handleRef,
-        style: _extends({
-          visibility: state === 'exited' && !inProp ? 'hidden' : undefined
-        }, style, children.props.style)
-      }, childProps));
+        style: {
+          visibility: state === 'exited' && !inProp ? 'hidden' : undefined,
+          ...style,
+          ...children.props.style
+        },
+        ...childProps
+      });
     }
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? Slide.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/Slider/Slider.d.ts

@@ -281,7 +281,7 @@ export interface SliderTypeMap<
 }
 
 export interface SliderValueLabelProps extends React.HTMLAttributes<HTMLSpanElement> {
-  children: React.ReactElement;
+  children: React.ReactElement<any>;
   index: number;
   open: boolean;
   value: number;

package/Slider/Slider.js

@@ -1,8 +1,5 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["aria-label", "aria-valuetext", "aria-labelledby", "component", "components", "componentsProps", "color", "classes", "className", "disableSwap", "disabled", "getAriaLabel", "getAriaValueText", "marks", "max", "min", "name", "onChange", "onChangeCommitted", "orientation", "shiftStep", "size", "step", "scale", "slotProps", "slots", "tabIndex", "track", "value", "valueLabelDisplay", "valueLabelFormat"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -55,7 +52,7 @@ export const SliderRoot = styled('span', {
       transition: 'none'
     }
   },
-  variants: [...Object.keys((theme.vars ?? theme).palette).filter(key => (theme.vars ?? theme).palette[key].main).map(color => ({
+  variants: [...Object.entries(theme.palette).filter(([, palette]) => palette && palette.main).map(([color]) => ({
     props: {
       color
     },
@@ -211,22 +208,26 @@ export const SliderTrack = styled('span', {
       style: {
         display: 'none'
       }
-    }, ...Object.keys((theme.vars ?? theme).palette).filter(key => (theme.vars ?? theme).palette[key].main).map(color => ({
+    }, ...Object.entries(theme.palette).filter(([, palette]) => palette && palette.main).map(([color]) => ({
       props: {
         color,
         track: 'inverted'
       },
-      style: _extends({}, theme.vars ? {
-        backgroundColor: theme.vars.palette.Slider[`${color}Track`],
-        borderColor: theme.vars.palette.Slider[`${color}Track`]
-      } : _extends({
-        backgroundColor: lighten(theme.palette[color].main, 0.62),
-        borderColor: lighten(theme.palette[color].main, 0.62)
-      }, theme.applyStyles('dark', {
-        backgroundColor: darken(theme.palette[color].main, 0.5)
-      }), theme.applyStyles('dark', {
-        borderColor: darken(theme.palette[color].main, 0.5)
-      })))
+      style: {
+        ...(theme.vars ? {
+          backgroundColor: theme.vars.palette.Slider[`${color}Track`],
+          borderColor: theme.vars.palette.Slider[`${color}Track`]
+        } : {
+          backgroundColor: lighten(theme.palette[color].main, 0.62),
+          borderColor: lighten(theme.palette[color].main, 0.62),
+          ...theme.applyStyles('dark', {
+            backgroundColor: darken(theme.palette[color].main, 0.5)
+          }),
+          ...theme.applyStyles('dark', {
+            borderColor: darken(theme.palette[color].main, 0.5)
+          })
+        })
+      }
     }))]
   };
 });
@@ -306,25 +307,28 @@ export const SliderThumb = styled('span', {
       left: '50%',
       transform: 'translate(-50%, 50%)'
     }
-  }, ...Object.keys((theme.vars ?? theme).palette).filter(key => (theme.vars ?? theme).palette[key].main).map(color => ({
+  }, ...Object.entries(theme.palette).filter(([, palette]) => palette && palette.main).map(([color]) => ({
     props: {
       color
     },
     style: {
-      [`&:hover, &.${sliderClasses.focusVisible}`]: _extends({}, theme.vars ? {
-        boxShadow: `0px 0px 0px 8px rgba(${theme.vars.palette[color].mainChannel} / 0.16)`
-      } : {
-        boxShadow: `0px 0px 0px 8px ${alpha(theme.palette[color].main, 0.16)}`
-      }, {
+      [`&:hover, &.${sliderClasses.focusVisible}`]: {
+        ...(theme.vars ? {
+          boxShadow: `0px 0px 0px 8px rgba(${theme.vars.palette[color].mainChannel} / 0.16)`
+        } : {
+          boxShadow: `0px 0px 0px 8px ${alpha(theme.palette[color].main, 0.16)}`
+        }),
         '@media (hover: none)': {
           boxShadow: 'none'
         }
-      }),
-      [`&.${sliderClasses.active}`]: _extends({}, theme.vars ? {
-        boxShadow: `0px 0px 0px 14px rgba(${theme.vars.palette[color].mainChannel} / 0.16)}`
-      } : {
-        boxShadow: `0px 0px 0px 14px ${alpha(theme.palette[color].main, 0.16)}`
-      })
+      },
+      [`&.${sliderClasses.active}`]: {
+        ...(theme.vars ? {
+          boxShadow: `0px 0px 0px 14px rgba(${theme.vars.palette[color].mainChannel} / 0.16)`
+        } : {
+          boxShadow: `0px 0px 0px 14px ${alpha(theme.palette[color].main, 0.16)}`
+        })
+      }
     }
   }))]
 }));
@@ -334,10 +338,10 @@ export const SliderValueLabel = styled(BaseSliderValueLabel, {
   overridesResolver: (props, styles) => styles.valueLabel
 })(({
   theme
-}) => _extends({
+}) => ({
   zIndex: 1,
-  whiteSpace: 'nowrap'
-}, theme.typography.body2, {
+  whiteSpace: 'nowrap',
+  ...theme.typography.body2,
   fontWeight: 500,
   transition: theme.transitions.create(['transform'], {
     duration: theme.transitions.duration.shortest
@@ -464,7 +468,8 @@ export const SliderMarkLabel = styled('span', {
   overridesResolver: (props, styles) => styles.markLabel
 })(({
   theme
-}) => _extends({}, theme.typography.body2, {
+}) => ({
+  ...theme.typography.body2,
   color: (theme.vars || theme).palette.text.secondary,
   position: 'absolute',
   whiteSpace: 'nowrap',
@@ -536,36 +541,42 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
   });
   const isRtl = useRtl();
   const {
-      'aria-label': ariaLabel,
-      'aria-valuetext': ariaValuetext,
-      'aria-labelledby': ariaLabelledby,
-      // eslint-disable-next-line react/prop-types
-      component = 'span',
-      components = {},
-      componentsProps = {},
-      color = 'primary',
-      classes: classesProp,
-      className,
-      disableSwap = false,
-      disabled = false,
-      getAriaLabel,
-      getAriaValueText,
-      marks: marksProp = false,
-      max = 100,
-      min = 0,
-      orientation = 'horizontal',
-      shiftStep = 10,
-      size = 'medium',
-      step = 1,
-      scale = Identity,
-      slotProps,
-      slots,
-      track = 'normal',
-      valueLabelDisplay = 'off',
-      valueLabelFormat = Identity
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    'aria-label': ariaLabel,
+    'aria-valuetext': ariaValuetext,
+    'aria-labelledby': ariaLabelledby,
+    // eslint-disable-next-line react/prop-types
+    component = 'span',
+    components = {},
+    componentsProps = {},
+    color = 'primary',
+    classes: classesProp,
+    className,
+    disableSwap = false,
+    disabled = false,
+    getAriaLabel,
+    getAriaValueText,
+    marks: marksProp = false,
+    max = 100,
+    min = 0,
+    name,
+    onChange,
+    onChangeCommitted,
+    orientation = 'horizontal',
+    shiftStep = 10,
+    size = 'medium',
+    step = 1,
+    scale = Identity,
+    slotProps,
+    slots,
+    tabIndex,
+    track = 'normal',
+    value: valueProp,
+    valueLabelDisplay = 'off',
+    valueLabelFormat = Identity,
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     isRtl,
     max,
     min,
@@ -582,7 +593,7 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
     track,
     valueLabelDisplay,
     valueLabelFormat
-  });
+  };
   const {
     axisProps,
     getRootProps,
@@ -599,9 +610,10 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
     trackOffset,
     trackLeap,
     getThumbStyle
-  } = useSlider(_extends({}, ownerState, {
+  } = useSlider({
+    ...ownerState,
     rootRef: ref
-  }));
+  });
   ownerState.marked = marks.length > 0 && marks.some(mark => mark.label);
   ownerState.dragging = dragging;
   ownerState.focusedThumbIndex = focusedThumbIndex;
@@ -629,10 +641,15 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
     getSlotProps: getRootProps,
     externalSlotProps: rootSlotProps,
     externalForwardedProps: other,
-    additionalProps: _extends({}, shouldSpreadAdditionalProps(RootSlot) && {
-      as: component
-    }),
-    ownerState: _extends({}, ownerState, rootSlotProps?.ownerState),
+    additionalProps: {
+      ...(shouldSpreadAdditionalProps(RootSlot) && {
+        as: component
+      })
+    },
+    ownerState: {
+      ...ownerState,
+      ...rootSlotProps?.ownerState
+    },
     className: [classes.root, className]
   });
   const railProps = useSlotProps({
@@ -645,22 +662,34 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
     elementType: TrackSlot,
     externalSlotProps: trackSlotProps,
     additionalProps: {
-      style: _extends({}, axisProps[axis].offset(trackOffset), axisProps[axis].leap(trackLeap))
+      style: {
+        ...axisProps[axis].offset(trackOffset),
+        ...axisProps[axis].leap(trackLeap)
+      }
+    },
+    ownerState: {
+      ...ownerState,
+      ...trackSlotProps?.ownerState
     },
-    ownerState: _extends({}, ownerState, trackSlotProps?.ownerState),
     className: classes.track
   });
   const thumbProps = useSlotProps({
     elementType: ThumbSlot,
     getSlotProps: getThumbProps,
     externalSlotProps: thumbSlotProps,
-    ownerState: _extends({}, ownerState, thumbSlotProps?.ownerState),
+    ownerState: {
+      ...ownerState,
+      ...thumbSlotProps?.ownerState
+    },
     className: classes.thumb
   });
   const valueLabelProps = useSlotProps({
     elementType: ValueLabelSlot,
     externalSlotProps: valueLabelSlotProps,
-    ownerState: _extends({}, ownerState, valueLabelSlotProps?.ownerState),
+    ownerState: {
+      ...ownerState,
+      ...valueLabelSlotProps?.ownerState
+    },
     className: classes.valueLabel
   });
   const markProps = useSlotProps({
@@ -681,8 +710,13 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
     externalSlotProps: inputSlotProps,
     ownerState
   });
-  return /*#__PURE__*/_jsxs(RootSlot, _extends({}, rootProps, {
-    children: [/*#__PURE__*/_jsx(RailSlot, _extends({}, railProps)), /*#__PURE__*/_jsx(TrackSlot, _extends({}, trackProps)), marks.filter(mark => mark.value >= min && mark.value <= max).map((mark, index) => {
+  return /*#__PURE__*/_jsxs(RootSlot, {
+    ...rootProps,
+    children: [/*#__PURE__*/_jsx(RailSlot, {
+      ...railProps
+    }), /*#__PURE__*/_jsx(TrackSlot, {
+      ...trackProps
+    }), marks.filter(mark => mark.value >= min && mark.value <= max).map((mark, index) => {
       const percent = valueToPercent(mark.value, min, max);
       const style = axisProps[axis].offset(percent);
       let markActive;
@@ -692,23 +726,31 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
         markActive = track === 'normal' && (range ? mark.value >= values[0] && mark.value <= values[values.length - 1] : mark.value <= values[0]) || track === 'inverted' && (range ? mark.value <= values[0] || mark.value >= values[values.length - 1] : mark.value >= values[0]);
       }
       return /*#__PURE__*/_jsxs(React.Fragment, {
-        children: [/*#__PURE__*/_jsx(MarkSlot, _extends({
-          "data-index": index
-        }, markProps, !isHostComponent(MarkSlot) && {
-          markActive
-        }, {
-          style: _extends({}, style, markProps.style),
+        children: [/*#__PURE__*/_jsx(MarkSlot, {
+          "data-index": index,
+          ...markProps,
+          ...(!isHostComponent(MarkSlot) && {
+            markActive
+          }),
+          style: {
+            ...style,
+            ...markProps.style
+          },
           className: clsx(markProps.className, markActive && classes.markActive)
-        })), mark.label != null ? /*#__PURE__*/_jsx(MarkLabelSlot, _extends({
+        }), mark.label != null ? /*#__PURE__*/_jsx(MarkLabelSlot, {
           "aria-hidden": true,
-          "data-index": index
-        }, markLabelProps, !isHostComponent(MarkLabelSlot) && {
-          markLabelActive: markActive
-        }, {
-          style: _extends({}, style, markLabelProps.style),
+          "data-index": index,
+          ...markLabelProps,
+          ...(!isHostComponent(MarkLabelSlot) && {
+            markLabelActive: markActive
+          }),
+          style: {
+            ...style,
+            ...markLabelProps.style
+          },
           className: clsx(classes.markLabel, markLabelProps.className, markActive && classes.markLabelActive),
           children: mark.label
-        })) : null]
+        }) : null]
       }, index);
     }), values.map((value, index) => {
       const percent = valueToPercent(value, min, max);
@@ -717,32 +759,39 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
       return (
         /*#__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. */
-        _jsx(ValueLabelComponent, _extends({}, !isHostComponent(ValueLabelComponent) && {
-          valueLabelFormat,
-          valueLabelDisplay,
-          value: typeof valueLabelFormat === 'function' ? valueLabelFormat(scale(value), index) : valueLabelFormat,
-          index,
-          open: open === index || active === index || valueLabelDisplay === 'on',
-          disabled
-        }, valueLabelProps, {
-          children: /*#__PURE__*/_jsx(ThumbSlot, _extends({
-            "data-index": index
-          }, thumbProps, {
+        _jsx(ValueLabelComponent, {
+          ...(!isHostComponent(ValueLabelComponent) && {
+            valueLabelFormat,
+            valueLabelDisplay,
+            value: typeof valueLabelFormat === 'function' ? valueLabelFormat(scale(value), index) : valueLabelFormat,
+            index,
+            open: open === index || active === index || valueLabelDisplay === 'on',
+            disabled
+          }),
+          ...valueLabelProps,
+          children: /*#__PURE__*/_jsx(ThumbSlot, {
+            "data-index": index,
+            ...thumbProps,
             className: clsx(classes.thumb, thumbProps.className, active === index && classes.active, focusedThumbIndex === index && classes.focusVisible),
-            style: _extends({}, style, getThumbStyle(index), thumbProps.style),
-            children: /*#__PURE__*/_jsx(InputSlot, _extends({
+            style: {
+              ...style,
+              ...getThumbStyle(index),
+              ...thumbProps.style
+            },
+            children: /*#__PURE__*/_jsx(InputSlot, {
               "data-index": index,
               "aria-label": getAriaLabel ? getAriaLabel(index) : ariaLabel,
               "aria-valuenow": scale(value),
               "aria-labelledby": ariaLabelledby,
               "aria-valuetext": getAriaValueText ? getAriaValueText(scale(value), index) : ariaValuetext,
-              value: values[index]
-            }, inputSliderProps))
-          }))
-        }), index)
+              value: values[index],
+              ...inputSliderProps
+            })
+          })
+        }, index)
       );
     })]
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? Slider.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/Slider/SliderValueLabel.types.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 export interface SliderValueLabelProps {
-    children?: React.ReactElement;
+    children?: React.ReactElement<any>;
     className?: string;
     style?: React.CSSProperties;
     /**

package/Snackbar/Snackbar.d.ts

@@ -127,4 +127,4 @@ export interface SnackbarProps extends StandardProps<React.HTMLAttributes<HTMLDi
  *
  * - [Snackbar API](https://mui.com/material-ui/api/snackbar/)
  */
-export default function Snackbar(props: SnackbarProps): JSX.Element;
+export default function Snackbar(props: SnackbarProps): React.JSX.Element;