@mui/material 5.13.0 → 5.13.1

package/PaginationItem/PaginationItem.js

@@ -1,6 +1,3 @@
-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", "type", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -56,7 +53,8 @@ const PaginationItemEllipsis = styled('div', {
 })(({
   theme,
   ownerState
-}) => _extends({}, theme.typography.body2, {
+}) => ({
+  ...theme.typography.body2,
   borderRadius: 32 / 2,
   textAlign: 'center',
   boxSizing: 'border-box',
@@ -67,17 +65,19 @@ const PaginationItemEllipsis = styled('div', {
   height: 'auto',
   [`&.${paginationItemClasses.disabled}`]: {
     opacity: (theme.vars || theme).palette.action.disabledOpacity
-  }
-}, ownerState.size === 'small' && {
-  minWidth: 26,
-  borderRadius: 26 / 2,
-  margin: '0 1px',
-  padding: '0 4px'
-}, ownerState.size === 'large' && {
-  minWidth: 40,
-  borderRadius: 40 / 2,
-  padding: '0 10px',
-  fontSize: theme.typography.pxToRem(15)
+  },
+  ...(ownerState.size === 'small' && {
+    minWidth: 26,
+    borderRadius: 26 / 2,
+    margin: '0 1px',
+    padding: '0 4px'
+  }),
+  ...(ownerState.size === 'large' && {
+    minWidth: 40,
+    borderRadius: 40 / 2,
+    padding: '0 10px',
+    fontSize: theme.typography.pxToRem(15)
+  })
 }));
 const PaginationItemPage = styled(ButtonBase, {
   name: 'MuiPaginationItem',
@@ -86,7 +86,8 @@ const PaginationItemPage = styled(ButtonBase, {
 })(({
   theme,
   ownerState
-}) => _extends({}, theme.typography.body2, {
+}) => ({
+  ...theme.typography.body2,
   borderRadius: 32 / 2,
   textAlign: 'center',
   boxSizing: 'border-box',
@@ -128,63 +129,71 @@ const PaginationItemPage = styled(ButtonBase, {
       color: (theme.vars || theme).palette.action.disabled,
       backgroundColor: (theme.vars || theme).palette.action.selected
     }
-  }
-}, ownerState.size === 'small' && {
-  minWidth: 26,
-  height: 26,
-  borderRadius: 26 / 2,
-  margin: '0 1px',
-  padding: '0 4px'
-}, ownerState.size === 'large' && {
-  minWidth: 40,
-  height: 40,
-  borderRadius: 40 / 2,
-  padding: '0 10px',
-  fontSize: theme.typography.pxToRem(15)
-}, ownerState.shape === 'rounded' && {
-  borderRadius: (theme.vars || theme).shape.borderRadius
+  },
+  ...(ownerState.size === 'small' && {
+    minWidth: 26,
+    height: 26,
+    borderRadius: 26 / 2,
+    margin: '0 1px',
+    padding: '0 4px'
+  }),
+  ...(ownerState.size === 'large' && {
+    minWidth: 40,
+    height: 40,
+    borderRadius: 40 / 2,
+    padding: '0 10px',
+    fontSize: theme.typography.pxToRem(15)
+  }),
+  ...(ownerState.shape === 'rounded' && {
+    borderRadius: (theme.vars || theme).shape.borderRadius
+  })
 }), ({
   theme,
   ownerState
-}) => _extends({}, ownerState.variant === 'text' && {
-  [`&.${paginationItemClasses.selected}`]: _extends({}, ownerState.color !== 'standard' && {
-    color: (theme.vars || theme).palette[ownerState.color].contrastText,
-    backgroundColor: (theme.vars || theme).palette[ownerState.color].main,
-    '&:hover': {
-      backgroundColor: (theme.vars || theme).palette[ownerState.color].dark,
-      // Reset on touch devices, it doesn't add specificity
-      '@media (hover: none)': {
-        backgroundColor: (theme.vars || theme).palette[ownerState.color].main
+}) => ({
+  ...(ownerState.variant === 'text' && {
+    [`&.${paginationItemClasses.selected}`]: {
+      ...(ownerState.color !== 'standard' && {
+        color: (theme.vars || theme).palette[ownerState.color].contrastText,
+        backgroundColor: (theme.vars || theme).palette[ownerState.color].main,
+        '&:hover': {
+          backgroundColor: (theme.vars || theme).palette[ownerState.color].dark,
+          // Reset on touch devices, it doesn't add specificity
+          '@media (hover: none)': {
+            backgroundColor: (theme.vars || theme).palette[ownerState.color].main
+          }
+        },
+        [`&.${paginationItemClasses.focusVisible}`]: {
+          backgroundColor: (theme.vars || theme).palette[ownerState.color].dark
+        }
+      }),
+      [`&.${paginationItemClasses.disabled}`]: {
+        color: (theme.vars || theme).palette.action.disabled
       }
-    },
-    [`&.${paginationItemClasses.focusVisible}`]: {
-      backgroundColor: (theme.vars || theme).palette[ownerState.color].dark
     }
-  }, {
-    [`&.${paginationItemClasses.disabled}`]: {
-      color: (theme.vars || theme).palette.action.disabled
-    }
-  })
-}, ownerState.variant === 'outlined' && {
-  border: theme.vars ? `1px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : `1px solid ${theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`,
-  [`&.${paginationItemClasses.selected}`]: _extends({}, ownerState.color !== 'standard' && {
-    color: (theme.vars || theme).palette[ownerState.color].main,
-    border: `1px solid ${theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.5)` : alpha(theme.palette[ownerState.color].main, 0.5)}`,
-    backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.activatedOpacity})` : alpha(theme.palette[ownerState.color].main, theme.palette.action.activatedOpacity),
-    '&:hover': {
-      backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / calc(${theme.vars.palette.action.activatedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette[ownerState.color].main, theme.palette.action.activatedOpacity + theme.palette.action.focusOpacity),
-      // Reset on touch devices, it doesn't add specificity
-      '@media (hover: none)': {
-        backgroundColor: 'transparent'
+  }),
+  ...(ownerState.variant === 'outlined' && {
+    border: theme.vars ? `1px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : `1px solid ${theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`,
+    [`&.${paginationItemClasses.selected}`]: {
+      ...(ownerState.color !== 'standard' && {
+        color: (theme.vars || theme).palette[ownerState.color].main,
+        border: `1px solid ${theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.5)` : alpha(theme.palette[ownerState.color].main, 0.5)}`,
+        backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.activatedOpacity})` : alpha(theme.palette[ownerState.color].main, theme.palette.action.activatedOpacity),
+        '&:hover': {
+          backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / calc(${theme.vars.palette.action.activatedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette[ownerState.color].main, theme.palette.action.activatedOpacity + theme.palette.action.focusOpacity),
+          // Reset on touch devices, it doesn't add specificity
+          '@media (hover: none)': {
+            backgroundColor: 'transparent'
+          }
+        },
+        [`&.${paginationItemClasses.focusVisible}`]: {
+          backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / calc(${theme.vars.palette.action.activatedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette[ownerState.color].main, theme.palette.action.activatedOpacity + theme.palette.action.focusOpacity)
+        }
+      }),
+      [`&.${paginationItemClasses.disabled}`]: {
+        borderColor: (theme.vars || theme).palette.action.disabledBackground,
+        color: (theme.vars || theme).palette.action.disabled
       }
-    },
-    [`&.${paginationItemClasses.focusVisible}`]: {
-      backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / calc(${theme.vars.palette.action.activatedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette[ownerState.color].main, theme.palette.action.activatedOpacity + theme.palette.action.focusOpacity)
-    }
-  }, {
-    [`&.${paginationItemClasses.disabled}`]: {
-      borderColor: (theme.vars || theme).palette.action.disabledBackground,
-      color: (theme.vars || theme).palette.action.disabled
     }
   })
 }));
@@ -195,13 +204,15 @@ const PaginationItemPageIcon = styled('div', {
 })(({
   theme,
   ownerState
-}) => _extends({
+}) => ({
   fontSize: theme.typography.pxToRem(20),
-  margin: '0 -8px'
-}, ownerState.size === 'small' && {
-  fontSize: theme.typography.pxToRem(18)
-}, ownerState.size === 'large' && {
-  fontSize: theme.typography.pxToRem(22)
+  margin: '0 -8px',
+  ...(ownerState.size === 'small' && {
+    fontSize: theme.typography.pxToRem(18)
+  }),
+  ...(ownerState.size === 'large' && {
+    fontSize: theme.typography.pxToRem(22)
+  })
 }));
 const PaginationItem = /*#__PURE__*/React.forwardRef(function PaginationItem(inProps, ref) {
   const props = useThemeProps({
@@ -209,21 +220,22 @@ 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 = {},
-      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 = {},
+    type = 'page',
+    variant = 'text',
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     color,
     disabled,
     selected,
@@ -231,7 +243,7 @@ const PaginationItem = /*#__PURE__*/React.forwardRef(function PaginationItem(inP
     size,
     type,
     variant
-  });
+  };
   const theme = useTheme();
   const classes = useUtilityClasses(ownerState);
   const normalizedIcons = theme.direction === 'rtl' ? {
@@ -251,19 +263,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, {
+    className: clsx(classes.root, className),
+    ...other,
     children: [type === 'page' && page, Icon ? /*#__PURE__*/_jsx(PaginationItemPageIcon, {
       as: Icon,
       ownerState: ownerState,
       className: classes.icon
     }) : null]
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? PaginationItem.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------

package/Paper/Paper.js

@@ -1,6 +1,3 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["className", "component", "elevation", "square", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -39,21 +36,26 @@ const PaperRoot = styled('div', {
   ownerState
 }) => {
   var _theme$vars$overlays;
-  return _extends({
+  return {
     backgroundColor: (theme.vars || theme).palette.background.paper,
     color: (theme.vars || theme).palette.text.primary,
-    transition: theme.transitions.create('box-shadow')
-  }, !ownerState.square && {
-    borderRadius: theme.shape.borderRadius
-  }, ownerState.variant === 'outlined' && {
-    border: `1px solid ${(theme.vars || theme).palette.divider}`
-  }, ownerState.variant === 'elevation' && _extends({
-    boxShadow: (theme.vars || theme).shadows[ownerState.elevation]
-  }, !theme.vars && theme.palette.mode === 'dark' && {
-    backgroundImage: `linear-gradient(${alpha('#fff', getOverlayAlpha(ownerState.elevation))}, ${alpha('#fff', getOverlayAlpha(ownerState.elevation))})`
-  }, theme.vars && {
-    backgroundImage: (_theme$vars$overlays = theme.vars.overlays) == null ? void 0 : _theme$vars$overlays[ownerState.elevation]
-  }));
+    transition: theme.transitions.create('box-shadow'),
+    ...(!ownerState.square && {
+      borderRadius: theme.shape.borderRadius
+    }),
+    ...(ownerState.variant === 'outlined' && {
+      border: `1px solid ${(theme.vars || theme).palette.divider}`
+    }),
+    ...(ownerState.variant === 'elevation' && {
+      boxShadow: (theme.vars || theme).shadows[ownerState.elevation],
+      ...(!theme.vars && theme.palette.mode === 'dark' && {
+        backgroundImage: `linear-gradient(${alpha('#fff', getOverlayAlpha(ownerState.elevation))}, ${alpha('#fff', getOverlayAlpha(ownerState.elevation))})`
+      }),
+      ...(theme.vars && {
+        backgroundImage: (_theme$vars$overlays = theme.vars.overlays) == null ? void 0 : _theme$vars$overlays[ownerState.elevation]
+      })
+    })
+  };
 });
 const Paper = /*#__PURE__*/React.forwardRef(function Paper(inProps, ref) {
   const props = useThemeProps({
@@ -61,19 +63,20 @@ const Paper = /*#__PURE__*/React.forwardRef(function Paper(inProps, ref) {
     name: 'MuiPaper'
   });
   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') {
     // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -82,12 +85,13 @@ const Paper = /*#__PURE__*/React.forwardRef(function Paper(inProps, ref) {
       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));
+    ref: ref,
+    ...other
+  });
 });
 process.env.NODE_ENV !== "production" ? Paper.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------

package/Popover/Popover.js

@@ -1,7 +1,3 @@
-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", "transformOrigin", "TransitionComponent", "transitionDuration", "TransitionProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -84,36 +80,37 @@ 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 = {},
-      transformOrigin = {
-        vertical: 'top',
-        horizontal: 'left'
-      },
-      TransitionComponent = Grow,
-      transitionDuration: transitionDurationProp = 'auto',
-      TransitionProps: {
-        onEntering
-      } = {}
-    } = 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 = {},
+    transformOrigin = {
+      vertical: 'top',
+      horizontal: 'left'
+    },
+    TransitionComponent = Grow,
+    transitionDuration: transitionDurationProp = 'auto',
+    TransitionProps: {
+      onEntering,
+      ...TransitionProps
+    } = {},
+    ...other
+  } = props;
   const paperRef = React.useRef();
   const handlePaperRef = useForkRef(paperRef, PaperProps.ref);
-  const ownerState = _extends({}, props, {
+  const ownerState = {
+    ...props,
     anchorOrigin,
     anchorReference,
     elevation,
@@ -123,7 +120,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
@@ -283,7 +280,7 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
   // If the anchorEl prop is provided, use its parent body element as the container
   // If neither are provided let the Modal take care of choosing the container
   const container = containerProp || (anchorEl ? ownerDocument(resolveAnchorEl(anchorEl)).body : undefined);
-  return /*#__PURE__*/_jsx(PopoverRoot, _extends({
+  return /*#__PURE__*/_jsx(PopoverRoot, {
     BackdropProps: {
       invisible: true
     },
@@ -291,30 +288,31 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
     container: container,
     open: open,
     ref: ref,
-    ownerState: ownerState
-  }, other, {
-    children: /*#__PURE__*/_jsx(TransitionComponent, _extends({
+    ownerState: ownerState,
+    ...other,
+    children: /*#__PURE__*/_jsx(TransitionComponent, {
       appear: true,
       in: open,
       onEntering: handleEntering,
       onExited: handleExited,
-      timeout: transitionDuration
-    }, TransitionProps, {
-      children: /*#__PURE__*/_jsx(PopoverPaper, _extends({
-        elevation: elevation
-      }, PaperProps, {
+      timeout: transitionDuration,
+      ...TransitionProps,
+      children: /*#__PURE__*/_jsx(PopoverPaper, {
+        elevation: elevation,
+        ...PaperProps,
         ref: handlePaperRef,
-        className: clsx(classes.paper, PaperProps.className)
-      }, isPositioned ? undefined : {
-        style: _extends({}, PaperProps.style, {
-          opacity: 0
-        })
-      }, {
+        className: clsx(classes.paper, PaperProps.className),
+        ...(isPositioned ? undefined : {
+          style: {
+            ...PaperProps.style,
+            opacity: 0
+          }
+        }),
         ownerState: ownerState,
         children: children
-      }))
-    }))
-  }));
+      })
+    })
+  });
 });
 process.env.NODE_ENV !== "production" ? Popover.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------

package/Popper/Popper.js

@@ -1,6 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["anchorEl", "component", "components", "componentsProps", "container", "disablePortal", "keepMounted", "modifiers", "open", "placement", "popperOptions", "popperRef", "transition", "slots", "slotProps"];
 import BasePopper from '@mui/base/Popper';
 import { useThemeWithoutDefault as useTheme } from '@mui/system';
 import { HTMLElementType, refType } from '@mui/utils';
@@ -34,25 +31,25 @@ const Popper = /*#__PURE__*/React.forwardRef(function Popper(inProps, ref) {
     name: 'MuiPopper'
   });
   const {
-      anchorEl,
-      component,
-      components,
-      componentsProps,
-      container,
-      disablePortal,
-      keepMounted,
-      modifiers,
-      open,
-      placement,
-      popperOptions,
-      popperRef,
-      transition,
-      slots,
-      slotProps
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    anchorEl,
+    component,
+    components,
+    componentsProps,
+    container,
+    disablePortal,
+    keepMounted,
+    modifiers,
+    open,
+    placement,
+    popperOptions,
+    popperRef,
+    transition,
+    slots,
+    slotProps,
+    ...other
+  } = props;
   const RootComponent = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : components == null ? void 0 : components.Root;
-  const otherProps = _extends({
+  const otherProps = {
     anchorEl,
     container,
     disablePortal,
@@ -62,18 +59,19 @@ const Popper = /*#__PURE__*/React.forwardRef(function Popper(inProps, ref) {
     placement,
     popperOptions,
     popperRef,
-    transition
-  }, other);
-  return /*#__PURE__*/_jsx(PopperRoot, _extends({
+    transition,
+    ...other
+  };
+  return /*#__PURE__*/_jsx(PopperRoot, {
     as: component,
     direction: theme == null ? void 0 : theme.direction,
     slots: {
       root: RootComponent
     },
-    slotProps: slotProps != null ? slotProps : componentsProps
-  }, otherProps, {
+    slotProps: slotProps != null ? slotProps : componentsProps,
+    ...otherProps,
     ref: ref
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? Popper.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------

package/README.md

@@ -79,7 +79,7 @@ npm install @mui/base
 yarn add @mui/base
 ```
 
-**Note**: Base UI is still in alpha.
+**Note**: Base UI is still in beta.
 We are adding new components regularly and you're welcome to contribute!
 
 ### MUI System