@mui/material 6.0.0-alpha.6 → 6.0.0-alpha.8

package/modern/CssBaseline/CssBaseline.js

@@ -1,12 +1,11 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import useThemeProps from '../styles/useThemeProps';
 import GlobalStyles from '../GlobalStyles';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const html = (theme, enableColorScheme) => _extends({
+export const html = (theme, enableColorScheme) => ({
   WebkitFontSmoothing: 'antialiased',
   // Antialiasing.
   MozOsxFontSmoothing: 'grayscale',
@@ -15,13 +14,15 @@ export const html = (theme, enableColorScheme) => _extends({
   // is not affected by `padding` or `border`.
   boxSizing: 'border-box',
   // Fix font resize problem in iOS
-  WebkitTextSizeAdjust: '100%'
-}, enableColorScheme && !theme.vars && {
-  colorScheme: theme.palette.mode
+  WebkitTextSizeAdjust: '100%',
+  // When used under CssVarsProvider, colorScheme should not be applied dynamically because it will generate the stylesheet twice for server-rendered applications.
+  ...(enableColorScheme && !theme.vars && {
+    colorScheme: theme.palette.mode
+  })
 });
-export const body = theme => _extends({
-  color: (theme.vars || theme).palette.text.primary
-}, theme.typography.body1, {
+export const body = theme => ({
+  color: (theme.vars || theme).palette.text.primary,
+  ...theme.typography.body1,
   backgroundColor: (theme.vars || theme).palette.background.default,
   '@media print': {
     // Save printer ink.
@@ -37,7 +38,7 @@ export const styles = (theme, enableColorScheme = false) => {
       };
     });
   }
-  let defaultStyles = _extends({
+  let defaultStyles = {
     html: html(theme, enableColorScheme),
     '*, *::before, *::after': {
       boxSizing: 'inherit'
@@ -45,16 +46,18 @@ export const styles = (theme, enableColorScheme = false) => {
     'strong, b': {
       fontWeight: theme.typography.fontWeightBold
     },
-    body: _extends({
-      margin: 0
-    }, body(theme), {
+    body: {
+      margin: 0,
+      // Remove the margin in all browsers.
+      ...body(theme),
       // Add support for document.body.requestFullScreen().
       // Other elements, if background transparent, are not supported.
       '&::backdrop': {
         backgroundColor: (theme.vars || theme).palette.background.default
       }
-    })
-  }, colorSchemeStyles);
+    },
+    ...colorSchemeStyles
+  };
   const themeOverrides = theme.components?.MuiCssBaseline?.styleOverrides;
   if (themeOverrides) {
     defaultStyles = [defaultStyles, themeOverrides];

package/modern/Dialog/Dialog.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 = ["aria-describedby", "aria-labelledby", "BackdropComponent", "BackdropProps", "children", "className", "disableEscapeKeyDown", "fullScreen", "fullWidth", "maxWidth", "onBackdropClick", "onClick", "onClose", "open", "PaperComponent", "PaperProps", "scroll", "TransitionComponent", "transitionDuration", "TransitionProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -204,35 +201,36 @@ const Dialog = /*#__PURE__*/React.forwardRef(function Dialog(inProps, ref) {
     exit: theme.transitions.duration.leavingScreen
   };
   const {
-      'aria-describedby': ariaDescribedby,
-      'aria-labelledby': ariaLabelledbyProp,
-      BackdropComponent,
-      BackdropProps,
-      children,
-      className,
-      disableEscapeKeyDown = false,
-      fullScreen = false,
-      fullWidth = false,
-      maxWidth = 'sm',
-      onBackdropClick,
-      onClick,
-      onClose,
-      open,
-      PaperComponent = Paper,
-      PaperProps = {},
-      scroll = 'paper',
-      TransitionComponent = Fade,
-      transitionDuration = defaultTransitionDuration,
-      TransitionProps
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    'aria-describedby': ariaDescribedby,
+    'aria-labelledby': ariaLabelledbyProp,
+    BackdropComponent,
+    BackdropProps,
+    children,
+    className,
+    disableEscapeKeyDown = false,
+    fullScreen = false,
+    fullWidth = false,
+    maxWidth = 'sm',
+    onBackdropClick,
+    onClick,
+    onClose,
+    open,
+    PaperComponent = Paper,
+    PaperProps = {},
+    scroll = 'paper',
+    TransitionComponent = Fade,
+    transitionDuration = defaultTransitionDuration,
+    TransitionProps,
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     disableEscapeKeyDown,
     fullScreen,
     fullWidth,
     maxWidth,
     scroll
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   const backdropClick = React.useRef();
   const handleMouseDown = event => {
@@ -263,52 +261,53 @@ const Dialog = /*#__PURE__*/React.forwardRef(function Dialog(inProps, ref) {
       titleId: ariaLabelledby
     };
   }, [ariaLabelledby]);
-  return /*#__PURE__*/_jsx(DialogRoot, _extends({
+  return /*#__PURE__*/_jsx(DialogRoot, {
     className: clsx(classes.root, className),
     closeAfterTransition: true,
     components: {
       Backdrop: DialogBackdrop
     },
     componentsProps: {
-      backdrop: _extends({
+      backdrop: {
         transitionDuration,
-        as: BackdropComponent
-      }, BackdropProps)
+        as: BackdropComponent,
+        ...BackdropProps
+      }
     },
     disableEscapeKeyDown: disableEscapeKeyDown,
     onClose: onClose,
     open: open,
     ref: ref,
     onClick: handleBackdropClick,
-    ownerState: ownerState
-  }, other, {
-    children: /*#__PURE__*/_jsx(TransitionComponent, _extends({
+    ownerState: ownerState,
+    ...other,
+    children: /*#__PURE__*/_jsx(TransitionComponent, {
       appear: true,
       in: open,
       timeout: transitionDuration,
-      role: "presentation"
-    }, TransitionProps, {
+      role: "presentation",
+      ...TransitionProps,
       children: /*#__PURE__*/_jsx(DialogContainer, {
         className: clsx(classes.container),
         onMouseDown: handleMouseDown,
         ownerState: ownerState,
-        children: /*#__PURE__*/_jsx(DialogPaper, _extends({
+        children: /*#__PURE__*/_jsx(DialogPaper, {
           as: PaperComponent,
           elevation: 24,
           role: "dialog",
           "aria-describedby": ariaDescribedby,
-          "aria-labelledby": ariaLabelledby
-        }, PaperProps, {
+          "aria-labelledby": ariaLabelledby,
+          ...PaperProps,
           className: clsx(classes.paper, PaperProps.className),
           ownerState: ownerState,
           children: /*#__PURE__*/_jsx(DialogContext.Provider, {
             value: dialogContextValue,
             children: children
           })
-        }))
+        })
       })
-    }))
-  }));
+    })
+  });
 });
 process.env.NODE_ENV !== "production" ? Dialog.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/modern/DialogActions/DialogActions.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 = ["className", "disableSpacing"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -53,19 +50,21 @@ const DialogActions = /*#__PURE__*/React.forwardRef(function DialogActions(inPro
     name: 'MuiDialogActions'
   });
   const {
-      className,
-      disableSpacing = false
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    className,
+    disableSpacing = false,
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     disableSpacing
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(DialogActionsRoot, _extends({
+  return /*#__PURE__*/_jsx(DialogActionsRoot, {
     className: clsx(classes.root, className),
     ownerState: ownerState,
-    ref: ref
-  }, other));
+    ref: ref,
+    ...other
+  });
 });
 process.env.NODE_ENV !== "production" ? DialogActions.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/modern/DialogContent/DialogContent.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 = ["className", "dividers"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -65,19 +62,21 @@ const DialogContent = /*#__PURE__*/React.forwardRef(function DialogContent(inPro
     name: 'MuiDialogContent'
   });
   const {
-      className,
-      dividers = false
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    className,
+    dividers = false,
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     dividers
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(DialogContentRoot, _extends({
+  return /*#__PURE__*/_jsx(DialogContentRoot, {
     className: clsx(classes.root, className),
     ownerState: ownerState,
-    ref: ref
-  }, other));
+    ref: ref,
+    ...other
+  });
 });
 process.env.NODE_ENV !== "production" ? DialogContent.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/modern/DialogContentText/DialogContentText.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 = ["children", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -21,7 +18,11 @@ const useUtilityClasses = ownerState => {
     root: ['root']
   };
   const composedClasses = composeClasses(slots, getDialogContentTextUtilityClass, classes);
-  return _extends({}, classes, composedClasses);
+  return {
+    ...classes,
+    // forward classes to the Typography
+    ...composedClasses
+  };
 };
 const DialogContentTextRoot = styled(Typography, {
   shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes',
@@ -35,20 +36,21 @@ const DialogContentText = /*#__PURE__*/React.forwardRef(function DialogContentTe
     name: 'MuiDialogContentText'
   });
   const {
-      className
-    } = props,
-    ownerState = _objectWithoutPropertiesLoose(props, _excluded);
+    children,
+    className,
+    ...ownerState
+  } = props;
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(DialogContentTextRoot, _extends({
+  return /*#__PURE__*/_jsx(DialogContentTextRoot, {
     component: "p",
     variant: "body1",
     color: "text.secondary",
     ref: ref,
     ownerState: ownerState,
-    className: clsx(classes.root, className)
-  }, props, {
+    className: clsx(classes.root, className),
+    ...props,
     classes: classes
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? DialogContentText.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/modern/DialogTitle/DialogTitle.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 = ["className", "id"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -36,23 +33,24 @@ const DialogTitle = /*#__PURE__*/React.forwardRef(function DialogTitle(inProps,
     name: 'MuiDialogTitle'
   });
   const {
-      className,
-      id: idProp
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    className,
+    id: idProp,
+    ...other
+  } = props;
   const ownerState = props;
   const classes = useUtilityClasses(ownerState);
   const {
     titleId = idProp
   } = React.useContext(DialogContext);
-  return /*#__PURE__*/_jsx(DialogTitleRoot, _extends({
+  return /*#__PURE__*/_jsx(DialogTitleRoot, {
     component: "h2",
     className: clsx(classes.root, className),
     ownerState: ownerState,
     ref: ref,
     variant: "h6",
-    id: idProp ?? titleId
-  }, other));
+    id: idProp ?? titleId,
+    ...other
+  });
 });
 process.env.NODE_ENV !== "production" ? DialogTitle.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/modern/Divider/Divider.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 = ["absolute", "children", "className", "component", "flexItem", "light", "orientation", "role", "textAlign", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -199,19 +196,20 @@ const Divider = /*#__PURE__*/React.forwardRef(function Divider(inProps, ref) {
     name: 'MuiDivider'
   });
   const {
-      absolute = false,
-      children,
-      className,
-      component = children ? 'div' : 'hr',
-      flexItem = false,
-      light = false,
-      orientation = 'horizontal',
-      role = component !== 'hr' ? 'separator' : undefined,
-      textAlign = 'center',
-      variant = 'fullWidth'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    absolute = false,
+    children,
+    className,
+    component = children ? 'div' : 'hr',
+    flexItem = false,
+    light = false,
+    orientation = 'horizontal',
+    role = component !== 'hr' ? 'separator' : undefined,
+    textAlign = 'center',
+    variant = 'fullWidth',
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     absolute,
     component,
     flexItem,
@@ -220,21 +218,21 @@ const Divider = /*#__PURE__*/React.forwardRef(function Divider(inProps, ref) {
     role,
     textAlign,
     variant
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(DividerRoot, _extends({
+  return /*#__PURE__*/_jsx(DividerRoot, {
     as: component,
     className: clsx(classes.root, className),
     role: role,
     ref: ref,
-    ownerState: ownerState
-  }, other, {
+    ownerState: ownerState,
+    ...other,
     children: children ? /*#__PURE__*/_jsx(DividerWrapper, {
       className: classes.wrapper,
       ownerState: ownerState,
       children: children
     }) : null
-  }));
+  });
 });
 
 /**

package/modern/Drawer/Drawer.js

@@ -1,9 +1,5 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["BackdropProps"],
-  _excluded2 = ["anchor", "BackdropProps", "children", "className", "elevation", "hideBackdrop", "ModalProps", "onClose", "open", "PaperProps", "SlideProps", "TransitionComponent", "transitionDuration", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -183,26 +179,26 @@ const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
     exit: theme.transitions.duration.leavingScreen
   };
   const {
-      anchor: anchorProp = 'left',
-      BackdropProps,
-      children,
-      className,
-      elevation = 16,
-      hideBackdrop = false,
-      ModalProps: {
-        BackdropProps: BackdropPropsProp
-      } = {},
-      onClose,
-      open = false,
-      PaperProps = {},
-      SlideProps,
-      // eslint-disable-next-line react/prop-types
-      TransitionComponent = Slide,
-      transitionDuration = defaultTransitionDuration,
-      variant = 'temporary'
-    } = props,
-    ModalProps = _objectWithoutPropertiesLoose(props.ModalProps, _excluded),
-    other = _objectWithoutPropertiesLoose(props, _excluded2);
+    anchor: anchorProp = 'left',
+    BackdropProps,
+    children,
+    className,
+    elevation = 16,
+    hideBackdrop = false,
+    ModalProps: {
+      BackdropProps: BackdropPropsProp,
+      ...ModalProps
+    } = {},
+    onClose,
+    open = false,
+    PaperProps = {},
+    SlideProps,
+    // eslint-disable-next-line react/prop-types
+    TransitionComponent = Slide,
+    transitionDuration = defaultTransitionDuration,
+    variant = 'temporary',
+    ...other
+  } = props;
 
   // Let's assume that the Drawer will always be rendered on user space.
   // We use this state is order to skip the appear transition during the
@@ -215,62 +211,67 @@ const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
     direction: isRtl ? 'rtl' : 'ltr'
   }, anchorProp);
   const anchor = anchorProp;
-  const ownerState = _extends({}, props, {
+  const ownerState = {
+    ...props,
     anchor,
     elevation,
     open,
-    variant
-  }, other);
+    variant,
+    ...other
+  };
   const classes = useUtilityClasses(ownerState);
-  const drawer = /*#__PURE__*/_jsx(DrawerPaper, _extends({
+  const drawer = /*#__PURE__*/_jsx(DrawerPaper, {
     elevation: variant === 'temporary' ? elevation : 0,
-    square: true
-  }, PaperProps, {
+    square: true,
+    ...PaperProps,
     className: clsx(classes.paper, PaperProps.className),
     ownerState: ownerState,
     children: children
-  }));
+  });
   if (variant === 'permanent') {
-    return /*#__PURE__*/_jsx(DrawerDockedRoot, _extends({
+    return /*#__PURE__*/_jsx(DrawerDockedRoot, {
       className: clsx(classes.root, classes.docked, className),
       ownerState: ownerState,
-      ref: ref
-    }, other, {
+      ref: ref,
+      ...other,
       children: drawer
-    }));
+    });
   }
-  const slidingDrawer = /*#__PURE__*/_jsx(TransitionComponent, _extends({
+  const slidingDrawer = /*#__PURE__*/_jsx(TransitionComponent, {
     in: open,
     direction: oppositeDirection[anchorInvariant],
     timeout: transitionDuration,
-    appear: mounted.current
-  }, SlideProps, {
+    appear: mounted.current,
+    ...SlideProps,
     children: drawer
-  }));
+  });
   if (variant === 'persistent') {
-    return /*#__PURE__*/_jsx(DrawerDockedRoot, _extends({
+    return /*#__PURE__*/_jsx(DrawerDockedRoot, {
       className: clsx(classes.root, classes.docked, className),
       ownerState: ownerState,
-      ref: ref
-    }, other, {
+      ref: ref,
+      ...other,
       children: slidingDrawer
-    }));
+    });
   }
 
   // variant === temporary
-  return /*#__PURE__*/_jsx(DrawerRoot, _extends({
-    BackdropProps: _extends({}, BackdropProps, BackdropPropsProp, {
+  return /*#__PURE__*/_jsx(DrawerRoot, {
+    BackdropProps: {
+      ...BackdropProps,
+      ...BackdropPropsProp,
       transitionDuration
-    }),
+    },
     className: clsx(classes.root, classes.modal, className),
     open: open,
     ownerState: ownerState,
     onClose: onClose,
     hideBackdrop: hideBackdrop,
-    ref: ref
-  }, other, ModalProps, {
+    ref: ref,
+    ...other,
+    ...ModalProps,
     children: slidingDrawer
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? Drawer.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐