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

package/OutlinedInput/OutlinedInput.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 = ["components", "fullWidth", "inputComponent", "label", "multiline", "notched", "slots", "type"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import refType from '@mui/utils/refType';
@@ -26,7 +23,11 @@ const useUtilityClasses = ownerState => {
     input: ['input']
   };
   const composedClasses = composeClasses(slots, getOutlinedInputUtilityClass, classes);
-  return _extends({}, classes, composedClasses);
+  return {
+    ...classes,
+    // forward classes to the InputBase
+    ...composedClasses
+  };
 };
 const OutlinedInputRoot = styled(InputBaseRoot, {
   shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes',
@@ -46,7 +47,7 @@ const OutlinedInputRoot = styled(InputBaseRoot, {
     [`&.${outlinedInputClasses.focused} .${outlinedInputClasses.notchedOutline}`]: {
       borderWidth: 2
     },
-    variants: [...Object.entries(theme.palette).filter(([, value]) => value.main).map(([color]) => ({
+    variants: [...Object.entries(theme.palette).filter(([, value]) => value && value.main).map(([color]) => ({
       props: {
         color
       },
@@ -122,27 +123,28 @@ const OutlinedInputInput = styled(InputBaseInput, {
   overridesResolver: inputBaseInputOverridesResolver
 })(({
   theme
-}) => _extends({
-  padding: '16.5px 14px'
-}, !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',
-    borderRadius: 'inherit'
-  }
-}, theme.vars && {
-  '&:-webkit-autofill': {
-    borderRadius: 'inherit'
-  },
-  [theme.getColorSchemeSelector('dark')]: {
+}) => ({
+  padding: '16.5px 14px',
+  ...(!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',
+      borderRadius: 'inherit'
+    }
+  }),
+  ...(theme.vars && {
     '&:-webkit-autofill': {
-      WebkitBoxShadow: '0 0 0 100px #266798 inset',
-      WebkitTextFillColor: '#fff',
-      caretColor: '#fff'
+      borderRadius: 'inherit'
+    },
+    [theme.getColorSchemeSelector('dark')]: {
+      '&:-webkit-autofill': {
+        WebkitBoxShadow: '0 0 0 100px #266798 inset',
+        WebkitTextFillColor: '#fff',
+        caretColor: '#fff'
+      }
     }
-  }
-}, {
+  }),
   variants: [{
     props: {
       size: 'small'
@@ -180,16 +182,16 @@ const OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inPro
     name: 'MuiOutlinedInput'
   });
   const {
-      components = {},
-      fullWidth = false,
-      inputComponent = 'input',
-      label,
-      multiline = false,
-      notched,
-      slots = {},
-      type = 'text'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    components = {},
+    fullWidth = false,
+    inputComponent = 'input',
+    label,
+    multiline = false,
+    notched,
+    slots = {},
+    type = 'text',
+    ...other
+  } = props;
   const classes = useUtilityClasses(props);
   const muiFormControl = useFormControl();
   const fcs = formControlState({
@@ -197,7 +199,8 @@ const OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inPro
     muiFormControl,
     states: ['color', 'disabled', 'error', 'focused', 'hiddenLabel', 'size', 'required']
   });
-  const ownerState = _extends({}, props, {
+  const ownerState = {
+    ...props,
     color: fcs.color || 'primary',
     disabled: fcs.disabled,
     error: fcs.error,
@@ -208,10 +211,10 @@ const OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inPro
     multiline,
     size: fcs.size,
     type
-  });
+  };
   const RootSlot = slots.root ?? components.Root ?? OutlinedInputRoot;
   const InputSlot = slots.input ?? components.Input ?? OutlinedInputInput;
-  return /*#__PURE__*/_jsx(InputBase, _extends({
+  return /*#__PURE__*/_jsx(InputBase, {
     slots: {
       root: RootSlot,
       input: InputSlot
@@ -228,12 +231,13 @@ const OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inPro
     inputComponent: inputComponent,
     multiline: multiline,
     ref: ref,
-    type: type
-  }, other, {
-    classes: _extends({}, classes, {
+    type: type,
+    ...other,
+    classes: {
+      ...classes,
       notchedOutline: null
-    })
-  }));
+    }
+  });
 });
 process.env.NODE_ENV !== "production" ? OutlinedInput.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/OutlinedInput/outlinedInputClasses.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 getOutlinedInputUtilityClass(slot) {
   return generateUtilityClass('MuiOutlinedInput', slot);
 }
-const outlinedInputClasses = _extends({}, inputBaseClasses, generateUtilityClasses('MuiOutlinedInput', ['root', 'notchedOutline', 'input']));
+const outlinedInputClasses = {
+  ...inputBaseClasses,
+  ...generateUtilityClasses('MuiOutlinedInput', ['root', 'notchedOutline', 'input'])
+};
 export default outlinedInputClasses;

package/Pagination/Pagination.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 = ["boundaryCount", "className", "color", "count", "defaultPage", "disabled", "getItemAriaLabel", "hideNextButton", "hidePrevButton", "onChange", "page", "renderItem", "shape", "showFirstButton", "showLastButton", "siblingCount", "size", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -59,30 +56,36 @@ const Pagination = /*#__PURE__*/React.forwardRef(function Pagination(inProps, re
     name: 'MuiPagination'
   });
   const {
-      boundaryCount = 1,
-      className,
-      color = 'standard',
-      count = 1,
-      defaultPage = 1,
-      disabled = false,
-      getItemAriaLabel = defaultGetAriaLabel,
-      hideNextButton = false,
-      hidePrevButton = false,
-      renderItem = item => /*#__PURE__*/_jsx(PaginationItem, _extends({}, item)),
-      shape = 'circular',
-      showFirstButton = false,
-      showLastButton = false,
-      siblingCount = 1,
-      size = 'medium',
-      variant = 'text'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    boundaryCount = 1,
+    className,
+    color = 'standard',
+    count = 1,
+    defaultPage = 1,
+    disabled = false,
+    getItemAriaLabel = defaultGetAriaLabel,
+    hideNextButton = false,
+    hidePrevButton = false,
+    onChange,
+    page,
+    renderItem = item => /*#__PURE__*/_jsx(PaginationItem, {
+      ...item
+    }),
+    shape = 'circular',
+    showFirstButton = false,
+    showLastButton = false,
+    siblingCount = 1,
+    size = 'medium',
+    variant = 'text',
+    ...other
+  } = props;
   const {
     items
-  } = usePagination(_extends({}, props, {
+  } = usePagination({
+    ...props,
     componentName: 'Pagination'
-  }));
-  const ownerState = _extends({}, props, {
+  });
+  const ownerState = {
+    ...props,
     boundaryCount,
     color,
     count,
@@ -98,28 +101,29 @@ const Pagination = /*#__PURE__*/React.forwardRef(function Pagination(inProps, re
     siblingCount,
     size,
     variant
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(PaginationRoot, _extends({
+  return /*#__PURE__*/_jsx(PaginationRoot, {
     "aria-label": "pagination navigation",
     className: clsx(classes.root, className),
     ownerState: ownerState,
-    ref: ref
-  }, other, {
+    ref: ref,
+    ...other,
     children: /*#__PURE__*/_jsx(PaginationUl, {
       className: classes.ul,
       ownerState: ownerState,
       children: items.map((item, index) => /*#__PURE__*/_jsx("li", {
-        children: renderItem(_extends({}, item, {
+        children: renderItem({
+          ...item,
           color,
           'aria-label': getItemAriaLabel(item.type, item.page, item.selected),
           shape,
           size,
           variant
-        }))
+        })
       }, index))
     })
-  }));
+  });
 });
 
 // @default tags synced with default values from usePagination
@@ -193,7 +197,7 @@ process.env.NODE_ENV !== "production" ? Pagination.propTypes /* remove-proptypes
    */
   onChange: PropTypes.func,
   /**
-   * The current page.
+   * The current page. Unlike `TablePagination`, which starts numbering from `0`, this pagination starts from `1`.
    */
   page: integerPropType,
   /**

package/PaginationItem/PaginationItem.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 = ["className", "color", "component", "components", "disabled", "page", "selected", "shape", "size", "slots", "slotProps", "type", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -57,7 +54,8 @@ const PaginationItemEllipsis = styled('div', {
   overridesResolver
 })(({
   theme
-}) => _extends({}, theme.typography.body2, {
+}) => ({
+  ...theme.typography.body2,
   borderRadius: 32 / 2,
   textAlign: 'center',
   boxSizing: 'border-box',
@@ -97,7 +95,8 @@ const PaginationItemPage = styled(ButtonBase, {
   overridesResolver
 })(({
   theme
-}) => _extends({}, theme.typography.body2, {
+}) => ({
+  ...theme.typography.body2,
   borderRadius: 32 / 2,
   textAlign: 'center',
   boxSizing: 'border-box',
@@ -193,7 +192,7 @@ const PaginationItemPage = styled(ButtonBase, {
         }
       }
     }
-  }, ...Object.entries(theme.palette).filter(([, value]) => value.main && value.dark && value.contrastText).map(([color]) => ({
+  }, ...Object.entries(theme.palette).filter(([, value]) => value && value.main && value.dark && value.contrastText).map(([color]) => ({
     props: {
       variant: 'text',
       color
@@ -217,7 +216,7 @@ const PaginationItemPage = styled(ButtonBase, {
         }
       }
     }
-  })), ...Object.entries(theme.palette).filter(([, value]) => value.main && value.light).map(([color]) => ({
+  })), ...Object.entries(theme.palette).filter(([, value]) => value && value.main && value.light).map(([color]) => ({
     props: {
       variant: 'outlined',
       color
@@ -272,22 +271,23 @@ const PaginationItem = /*#__PURE__*/React.forwardRef(function PaginationItem(inP
     name: 'MuiPaginationItem'
   });
   const {
-      className,
-      color = 'standard',
-      component,
-      components = {},
-      disabled = false,
-      page,
-      selected = false,
-      shape = 'circular',
-      size = 'medium',
-      slots = {},
-      slotProps = {},
-      type = 'page',
-      variant = 'text'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    className,
+    color = 'standard',
+    component,
+    components = {},
+    disabled = false,
+    page,
+    selected = false,
+    shape = 'circular',
+    size = 'medium',
+    slots = {},
+    slotProps = {},
+    type = 'page',
+    variant = 'text',
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     color,
     disabled,
     selected,
@@ -295,7 +295,7 @@ const PaginationItem = /*#__PURE__*/React.forwardRef(function PaginationItem(inP
     size,
     type,
     variant
-  });
+  };
   const isRtl = useRtl();
   const classes = useUtilityClasses(ownerState);
   const externalForwardedProps = {
@@ -350,18 +350,19 @@ const PaginationItem = /*#__PURE__*/React.forwardRef(function PaginationItem(inP
     ownerState: ownerState,
     className: clsx(classes.root, className),
     children: "\u2026"
-  }) : /*#__PURE__*/_jsxs(PaginationItemPage, _extends({
+  }) : /*#__PURE__*/_jsxs(PaginationItemPage, {
     ref: ref,
     ownerState: ownerState,
     component: component,
     disabled: disabled,
-    className: clsx(classes.root, className)
-  }, other, {
-    children: [type === 'page' && page, IconSlot ? /*#__PURE__*/_jsx(PaginationItemPageIcon, _extends({}, iconSlotProps, {
+    className: clsx(classes.root, className),
+    ...other,
+    children: [type === 'page' && page, IconSlot ? /*#__PURE__*/_jsx(PaginationItemPageIcon, {
+      ...iconSlotProps,
       className: classes.icon,
       as: IconSlot
-    })) : null]
-  }));
+    }) : null]
+  });
 });
 process.env.NODE_ENV !== "production" ? PaginationItem.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/Paper/Paper.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", "component", "elevation", "square", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -74,39 +71,45 @@ const Paper = /*#__PURE__*/React.forwardRef(function Paper(inProps, ref) {
   });
   const theme = useTheme();
   const {
-      className,
-      component = 'div',
-      elevation = 1,
-      square = false,
-      variant = 'elevation'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    className,
+    component = 'div',
+    elevation = 1,
+    square = false,
+    variant = 'elevation',
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     component,
     elevation,
     square,
     variant
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   if (process.env.NODE_ENV !== 'production') {
     if (theme.shadows[elevation] === undefined) {
       console.error([`MUI: The elevation provided <Paper elevation={${elevation}}> is not available in the theme.`, `Please make sure that \`theme.shadows[${elevation}]\` is defined.`].join('\n'));
     }
   }
-  return /*#__PURE__*/_jsx(PaperRoot, _extends({
+  return /*#__PURE__*/_jsx(PaperRoot, {
     as: component,
     ownerState: ownerState,
     className: clsx(classes.root, className),
-    ref: ref
-  }, other, {
-    style: _extends({}, variant === 'elevation' && _extends({
-      '--Paper-shadow': (theme.vars || theme).shadows[elevation]
-    }, theme.vars && {
-      '--Paper-overlay': theme.overlays?.[elevation]
-    }, !theme.vars && theme.palette.mode === 'dark' && {
-      '--Paper-overlay': `linear-gradient(${alpha('#fff', getOverlayAlpha(elevation))}, ${alpha('#fff', getOverlayAlpha(elevation))})`
-    }), other.style)
-  }));
+    ref: ref,
+    ...other,
+    style: {
+      ...(variant === 'elevation' && {
+        '--Paper-shadow': (theme.vars || theme).shadows[elevation],
+        ...(theme.vars && {
+          '--Paper-overlay': theme.overlays?.[elevation]
+        }),
+        ...(!theme.vars && theme.palette.mode === 'dark' && {
+          '--Paper-overlay': `linear-gradient(${alpha('#fff', getOverlayAlpha(elevation))}, ${alpha('#fff', getOverlayAlpha(elevation))})`
+        })
+      }),
+      ...other.style
+    }
+  });
 });
 process.env.NODE_ENV !== "production" ? Paper.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/Popover/Popover.js

@@ -1,10 +1,5 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["onEntering"],
-  _excluded2 = ["action", "anchorEl", "anchorOrigin", "anchorPosition", "anchorReference", "children", "className", "container", "elevation", "marginThreshold", "open", "PaperProps", "slots", "slotProps", "transformOrigin", "TransitionComponent", "transitionDuration", "TransitionProps", "disableScrollLock"],
-  _excluded3 = ["slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -92,40 +87,41 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
     name: 'MuiPopover'
   });
   const {
-      action,
-      anchorEl,
-      anchorOrigin = {
-        vertical: 'top',
-        horizontal: 'left'
-      },
-      anchorPosition,
-      anchorReference = 'anchorEl',
-      children,
-      className,
-      container: containerProp,
-      elevation = 8,
-      marginThreshold = 16,
-      open,
-      PaperProps: PaperPropsProp = {},
-      slots,
-      slotProps,
-      transformOrigin = {
-        vertical: 'top',
-        horizontal: 'left'
-      },
-      TransitionComponent = Grow,
-      transitionDuration: transitionDurationProp = 'auto',
-      TransitionProps: {
-        onEntering
-      } = {},
-      disableScrollLock = false
-    } = props,
-    TransitionProps = _objectWithoutPropertiesLoose(props.TransitionProps, _excluded),
-    other = _objectWithoutPropertiesLoose(props, _excluded2);
+    action,
+    anchorEl,
+    anchorOrigin = {
+      vertical: 'top',
+      horizontal: 'left'
+    },
+    anchorPosition,
+    anchorReference = 'anchorEl',
+    children,
+    className,
+    container: containerProp,
+    elevation = 8,
+    marginThreshold = 16,
+    open,
+    PaperProps: PaperPropsProp = {},
+    slots,
+    slotProps,
+    transformOrigin = {
+      vertical: 'top',
+      horizontal: 'left'
+    },
+    TransitionComponent = Grow,
+    transitionDuration: transitionDurationProp = 'auto',
+    TransitionProps: {
+      onEntering,
+      ...TransitionProps
+    } = {},
+    disableScrollLock = false,
+    ...other
+  } = props;
   const externalPaperSlotProps = slotProps?.paper ?? PaperPropsProp;
   const paperRef = React.useRef();
   const handlePaperRef = useForkRef(paperRef, externalPaperSlotProps.ref);
-  const ownerState = _extends({}, props, {
+  const ownerState = {
+    ...props,
     anchorOrigin,
     anchorReference,
     elevation,
@@ -135,7 +131,7 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
     TransitionComponent,
     transitionDuration: transitionDurationProp,
     TransitionProps
-  });
+  };
   const classes = useUtilityClasses(ownerState);
 
   // Returns the top/left offset of the position
@@ -305,11 +301,13 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
   const PaperSlot = slots?.paper ?? PopoverPaper;
   const paperProps = useSlotProps({
     elementType: PaperSlot,
-    externalSlotProps: _extends({}, externalPaperSlotProps, {
-      style: isPositioned ? externalPaperSlotProps.style : _extends({}, externalPaperSlotProps.style, {
+    externalSlotProps: {
+      ...externalPaperSlotProps,
+      style: isPositioned ? externalPaperSlotProps.style : {
+        ...externalPaperSlotProps.style,
         opacity: 0
-      })
-    }),
+      }
+    },
     additionalProps: {
       elevation,
       ref: handlePaperRef
@@ -317,43 +315,45 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
     ownerState,
     className: clsx(classes.paper, externalPaperSlotProps?.className)
   });
-  const _useSlotProps = useSlotProps({
-      elementType: RootSlot,
-      externalSlotProps: slotProps?.root || {},
-      externalForwardedProps: other,
-      additionalProps: {
-        ref,
-        slotProps: {
-          backdrop: {
-            invisible: true
-          }
-        },
-        container,
-        open
+  const {
+    slotProps: rootSlotPropsProp,
+    ...rootProps
+  } = useSlotProps({
+    elementType: RootSlot,
+    externalSlotProps: slotProps?.root || {},
+    externalForwardedProps: other,
+    additionalProps: {
+      ref,
+      slotProps: {
+        backdrop: {
+          invisible: true
+        }
       },
-      ownerState,
-      className: clsx(classes.root, className)
+      container,
+      open
+    },
+    ownerState,
+    className: clsx(classes.root, className)
+  });
+  return /*#__PURE__*/_jsx(RootSlot, {
+    ...rootProps,
+    ...(!isHostComponent(RootSlot) && {
+      slotProps: rootSlotPropsProp,
+      disableScrollLock
     }),
-    {
-      slotProps: rootSlotPropsProp
-    } = _useSlotProps,
-    rootProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded3);
-  return /*#__PURE__*/_jsx(RootSlot, _extends({}, rootProps, !isHostComponent(RootSlot) && {
-    slotProps: rootSlotPropsProp,
-    disableScrollLock
-  }, {
-    children: /*#__PURE__*/_jsx(TransitionComponent, _extends({
+    children: /*#__PURE__*/_jsx(TransitionComponent, {
       appear: true,
       in: open,
       onEntering: handleEntering,
       onExited: handleExited,
-      timeout: transitionDuration
-    }, TransitionProps, {
-      children: /*#__PURE__*/_jsx(PaperSlot, _extends({}, paperProps, {
+      timeout: transitionDuration,
+      ...TransitionProps,
+      children: /*#__PURE__*/_jsx(PaperSlot, {
+        ...paperProps,
         children: children
-      }))
-    }))
-  }));
+      })
+    })
+  });
 });
 process.env.NODE_ENV !== "production" ? Popover.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐