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

package/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 ──────────────────────────────┐

package/Fab/Fab.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", "color", "component", "disabled", "disableFocusRipple", "focusVisibleClassName", "size", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -25,7 +22,11 @@ const useUtilityClasses = ownerState => {
     root: ['root', variant, `size${capitalize(size)}`, color === 'inherit' ? 'colorInherit' : color]
   };
   const composedClasses = composeClasses(slots, getFabUtilityClass, classes);
-  return _extends({}, classes, composedClasses);
+  return {
+    ...classes,
+    // forward the focused, disabled, etc. classes to the ButtonBase
+    ...composedClasses
+  };
 };
 const FabRoot = styled(ButtonBase, {
   name: 'MuiFab',
@@ -39,7 +40,8 @@ const FabRoot = styled(ButtonBase, {
   }
 })(({
   theme
-}) => _extends({}, theme.typography.button, {
+}) => ({
+  ...theme.typography.button,
   minHeight: 36,
   transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color'], {
     duration: theme.transitions.duration.short
@@ -130,7 +132,7 @@ const FabRoot = styled(ButtonBase, {
 }), ({
   theme
 }) => ({
-  variants: [...Object.entries(theme.palette).filter(([, value]) => value.main && value.dark && value.contrastText) // check all the used fields in the style below
+  variants: [...Object.entries(theme.palette).filter(([, value]) => value && value.main && value.dark && value.contrastText) // check all the used fields in the style below
   .map(([color]) => ({
     props: {
       color
@@ -162,38 +164,39 @@ const Fab = /*#__PURE__*/React.forwardRef(function Fab(inProps, ref) {
     name: 'MuiFab'
   });
   const {
-      children,
-      className,
-      color = 'default',
-      component = 'button',
-      disabled = false,
-      disableFocusRipple = false,
-      focusVisibleClassName,
-      size = 'large',
-      variant = 'circular'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    children,
+    className,
+    color = 'default',
+    component = 'button',
+    disabled = false,
+    disableFocusRipple = false,
+    focusVisibleClassName,
+    size = 'large',
+    variant = 'circular',
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     color,
     component,
     disabled,
     disableFocusRipple,
     size,
     variant
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(FabRoot, _extends({
+  return /*#__PURE__*/_jsx(FabRoot, {
     className: clsx(classes.root, className),
     component: component,
     disabled: disabled,
     focusRipple: !disableFocusRipple,
     focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
     ownerState: ownerState,
-    ref: ref
-  }, other, {
+    ref: ref,
+    ...other,
     classes: classes,
     children: children
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? Fab.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/Fade/Fade.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", "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';
@@ -31,23 +28,23 @@ const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
     exit: theme.transitions.duration.leavingScreen
   };
   const {
-      addEndListener,
-      appear = true,
-      children,
-      easing,
-      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,
+    easing,
+    in: inProp,
+    onEnter,
+    onEntered,
+    onEntering,
+    onExit,
+    onExited,
+    onExiting,
+    style,
+    timeout = defaultTimeout,
+    // eslint-disable-next-line react/prop-types
+    TransitionComponent = Transition,
+    ...other
+  } = props;
   const enableStrictModeCompat = true;
   const nodeRef = React.useRef(null);
   const handleRef = useForkRef(nodeRef, children.ref, ref);
@@ -103,7 +100,7 @@ const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
       addEndListener(nodeRef.current, next);
     }
   };
-  return /*#__PURE__*/_jsx(TransitionComponent, _extends({
+  return /*#__PURE__*/_jsx(TransitionComponent, {
     appear: appear,
     in: inProp,
     nodeRef: enableStrictModeCompat ? nodeRef : undefined,
@@ -114,18 +111,22 @@ const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
     onExited: handleExited,
     onExiting: handleExiting,
     addEndListener: handleAddEndListener,
-    timeout: timeout
-  }, other, {
+    timeout: timeout,
+    ...other,
     children: (state, childProps) => {
-      return /*#__PURE__*/React.cloneElement(children, _extends({
-        style: _extends({
+      return /*#__PURE__*/React.cloneElement(children, {
+        style: {
           opacity: 0,
-          visibility: state === 'exited' && !inProp ? 'hidden' : undefined
-        }, styles[state], style, children.props.style),
-        ref: handleRef
-      }, childProps));
+          visibility: state === 'exited' && !inProp ? 'hidden' : undefined,
+          ...styles[state],
+          ...style,
+          ...children.props.style
+        },
+        ref: handleRef,
+        ...childProps
+      });
     }
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? Fade.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/FilledInput/FilledInput.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 = ["disableUnderline", "components", "componentsProps", "fullWidth", "hiddenLabel", "inputComponent", "multiline", "slotProps", "slots", "type"];
 import * as React from 'react';
 import deepmerge from '@mui/utils/deepmerge';
 import refType from '@mui/utils/refType';
@@ -25,7 +22,11 @@ const useUtilityClasses = ownerState => {
     input: ['input']
   };
   const composedClasses = composeClasses(slots, getFilledInputUtilityClass, classes);
-  return _extends({}, classes, composedClasses);
+  return {
+    ...classes,
+    // forward classes to the InputBase
+    ...composedClasses
+  };
 };
 const FilledInputRoot = styled(InputBaseRoot, {
   shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes',
@@ -116,7 +117,7 @@ const FilledInputRoot = styled(InputBaseRoot, {
           borderBottomStyle: 'dotted'
         }
       }
-    }, ...Object.entries(theme.palette).filter(([, value]) => value.main) // check all the used fields in the style below
+    }, ...Object.entries(theme.palette).filter(([, value]) => value && value.main) // check all the used fields in the style below
     .map(([color]) => ({
       props: {
         disableUnderline: false,
@@ -182,32 +183,33 @@ const FilledInputInput = styled(InputBaseInput, {
   overridesResolver: inputBaseInputOverridesResolver
 })(({
   theme
-}) => _extends({
+}) => ({
   paddingTop: 25,
   paddingRight: 12,
   paddingBottom: 8,
-  paddingLeft: 12
-}, !theme.vars && {
-  '&:-webkit-autofill': {
-    WebkitBoxShadow: theme.palette.mode === 'light' ? null : '0 0 0 100px #266798 inset',
-    WebkitTextFillColor: theme.palette.mode === 'light' ? null : '#fff',
-    caretColor: theme.palette.mode === 'light' ? null : '#fff',
-    borderTopLeftRadius: 'inherit',
-    borderTopRightRadius: 'inherit'
-  }
-}, theme.vars && {
-  '&:-webkit-autofill': {
-    borderTopLeftRadius: 'inherit',
-    borderTopRightRadius: 'inherit'
-  },
-  [theme.getColorSchemeSelector('dark')]: {
+  paddingLeft: 12,
+  ...(!theme.vars && {
     '&:-webkit-autofill': {
-      WebkitBoxShadow: '0 0 0 100px #266798 inset',
-      WebkitTextFillColor: '#fff',
-      caretColor: '#fff'
+      WebkitBoxShadow: theme.palette.mode === 'light' ? null : '0 0 0 100px #266798 inset',
+      WebkitTextFillColor: theme.palette.mode === 'light' ? null : '#fff',
+      caretColor: theme.palette.mode === 'light' ? null : '#fff',
+      borderTopLeftRadius: 'inherit',
+      borderTopRightRadius: 'inherit'
     }
-  }
-}, {
+  }),
+  ...(theme.vars && {
+    '&:-webkit-autofill': {
+      borderTopLeftRadius: 'inherit',
+      borderTopRightRadius: 'inherit'
+    },
+    [theme.getColorSchemeSelector('dark')]: {
+      '&:-webkit-autofill': {
+        WebkitBoxShadow: '0 0 0 100px #266798 inset',
+        WebkitTextFillColor: '#fff',
+        caretColor: '#fff'
+      }
+    }
+  }),
   variants: [{
     props: {
       size: 'small'
@@ -264,25 +266,27 @@ const FilledInput = /*#__PURE__*/React.forwardRef(function FilledInput(inProps,
     name: 'MuiFilledInput'
   });
   const {
-      disableUnderline = false,
-      components = {},
-      componentsProps: componentsPropsProp,
-      fullWidth = false,
-      // declare here to prevent spreading to DOM
-      inputComponent = 'input',
-      multiline = false,
-      slotProps,
-      slots = {},
-      type = 'text'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    disableUnderline = false,
+    components = {},
+    componentsProps: componentsPropsProp,
+    fullWidth = false,
+    hiddenLabel,
+    // declare here to prevent spreading to DOM
+    inputComponent = 'input',
+    multiline = false,
+    slotProps,
+    slots = {},
+    type = 'text',
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     disableUnderline,
     fullWidth,
     inputComponent,
     multiline,
     type
-  });
+  };
   const classes = useUtilityClasses(props);
   const filledInputComponentsProps = {
     root: {
@@ -295,7 +299,7 @@ const FilledInput = /*#__PURE__*/React.forwardRef(function FilledInput(inProps,
   const componentsProps = slotProps ?? componentsPropsProp ? deepmerge(filledInputComponentsProps, slotProps ?? componentsPropsProp) : filledInputComponentsProps;
   const RootSlot = slots.root ?? components.Root ?? FilledInputRoot;
   const InputSlot = slots.input ?? components.Input ?? FilledInputInput;
-  return /*#__PURE__*/_jsx(InputBase, _extends({
+  return /*#__PURE__*/_jsx(InputBase, {
     slots: {
       root: RootSlot,
       input: InputSlot
@@ -305,10 +309,10 @@ const FilledInput = /*#__PURE__*/React.forwardRef(function FilledInput(inProps,
     inputComponent: inputComponent,
     multiline: multiline,
     ref: ref,
-    type: type
-  }, other, {
+    type: type,
+    ...other,
     classes: classes
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? FilledInput.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/FilledInput/filledInputClasses.js

@@ -1,9 +1,11 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import { inputBaseClasses } from '../InputBase';
 export function getFilledInputUtilityClass(slot) {
   return generateUtilityClass('MuiFilledInput', slot);
 }
-const filledInputClasses = _extends({}, inputBaseClasses, generateUtilityClasses('MuiFilledInput', ['root', 'underline', 'input']));
+const filledInputClasses = {
+  ...inputBaseClasses,
+  ...generateUtilityClasses('MuiFilledInput', ['root', 'underline', 'input'])
+};
 export default filledInputClasses;

package/FormControl/FormControl.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", "color", "component", "disabled", "error", "focused", "fullWidth", "hiddenLabel", "margin", "required", "size", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -32,7 +29,11 @@ const FormControlRoot = styled('div', {
   overridesResolver: ({
     ownerState
   }, styles) => {
-    return _extends({}, styles.root, styles[`margin${capitalize(ownerState.margin)}`], ownerState.fullWidth && styles.fullWidth);
+    return {
+      ...styles.root,
+      ...styles[`margin${capitalize(ownerState.margin)}`],
+      ...(ownerState.fullWidth && styles.fullWidth)
+    };
   }
 })({
   display: 'inline-flex',
@@ -101,22 +102,23 @@ const FormControl = /*#__PURE__*/React.forwardRef(function FormControl(inProps,
     name: 'MuiFormControl'
   });
   const {
-      children,
-      className,
-      color = 'primary',
-      component = 'div',
-      disabled = false,
-      error = false,
-      focused: visuallyFocused,
-      fullWidth = false,
-      hiddenLabel = false,
-      margin = 'none',
-      required = false,
-      size = 'medium',
-      variant = 'outlined'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    children,
+    className,
+    color = 'primary',
+    component = 'div',
+    disabled = false,
+    error = false,
+    focused: visuallyFocused,
+    fullWidth = false,
+    hiddenLabel = false,
+    margin = 'none',
+    required = false,
+    size = 'medium',
+    variant = 'outlined',
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     color,
     component,
     disabled,
@@ -127,7 +129,7 @@ const FormControl = /*#__PURE__*/React.forwardRef(function FormControl(inProps,
     required,
     size,
     variant
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   const [adornedStart, setAdornedStart] = React.useState(() => {
     // We need to iterate through the children and find the Input in order
@@ -212,14 +214,14 @@ const FormControl = /*#__PURE__*/React.forwardRef(function FormControl(inProps,
   }, [adornedStart, color, disabled, error, filled, focused, fullWidth, hiddenLabel, registerEffect, required, size, variant]);
   return /*#__PURE__*/_jsx(FormControlContext.Provider, {
     value: childContext,
-    children: /*#__PURE__*/_jsx(FormControlRoot, _extends({
+    children: /*#__PURE__*/_jsx(FormControlRoot, {
       as: component,
       ownerState: ownerState,
       className: clsx(classes.root, className),
-      ref: ref
-    }, other, {
+      ref: ref,
+      ...other,
       children: children
-    }))
+    })
   });
 });
 process.env.NODE_ENV !== "production" ? FormControl.propTypes /* remove-proptypes */ = {