@mui/material 5.12.3 → 5.13.1

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/Popover/popoverClasses.d.ts

@@ -1,10 +1,10 @@
-export interface PopoverClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the Paper component. */
-    paper: string;
-}
-export type PopoverClassKey = keyof PopoverClasses;
-export declare function getPopoverUtilityClass(slot: string): string;
-declare const popoverClasses: PopoverClasses;
-export default popoverClasses;
+export interface PopoverClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the Paper component. */
+    paper: string;
+}
+export type PopoverClassKey = keyof PopoverClasses;
+export declare function getPopoverUtilityClass(slot: string): string;
+declare const popoverClasses: PopoverClasses;
+export default popoverClasses;

package/Popper/Popper.d.ts

@@ -1,65 +1,65 @@
-import { PopperProps as BasePopperProps } from '@mui/base/Popper';
-import { SxProps } from '@mui/system';
-import * as React from 'react';
-import { Theme } from '../styles';
-export type PopperProps = Omit<BasePopperProps, 'direction'> & {
-    /**
-     * The component used for the root node.
-     * Either a string to use a HTML element or a component.
-     */
-    component?: React.ElementType;
-    /**
-     * The components used for each slot inside the Popper.
-     * Either a string to use a HTML element or a component.
-     * @default {}
-     */
-    components?: {
-        Root?: React.ElementType;
-    };
-    /**
-     * The props used for each slot inside the Popper.
-     * @default {}
-     */
-    componentsProps?: BasePopperProps['slotProps'];
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-};
-/**
- *
- * Demos:
- *
- * - [Autocomplete](https://mui.com/material-ui/react-autocomplete/)
- * - [Menu](https://mui.com/material-ui/react-menu/)
- * - [Popper](https://mui.com/material-ui/react-popper/)
- *
- * API:
- *
- * - [Popper API](https://mui.com/material-ui/api/popper/)
- */
-declare const Popper: React.ForwardRefExoticComponent<Omit<BasePopperProps<"div">, "direction"> & {
-    /**
-     * The component used for the root node.
-     * Either a string to use a HTML element or a component.
-     */
-    component?: React.ElementType<any> | undefined;
-    /**
-     * The components used for each slot inside the Popper.
-     * Either a string to use a HTML element or a component.
-     * @default {}
-     */
-    components?: {
-        Root?: React.ElementType<any> | undefined;
-    } | undefined;
-    /**
-     * The props used for each slot inside the Popper.
-     * @default {}
-     */
-    componentsProps?: BasePopperProps['slotProps'];
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme> | undefined;
-} & React.RefAttributes<HTMLDivElement>>;
-export default Popper;
+import { PopperProps as BasePopperProps } from '@mui/base/Popper';
+import { SxProps } from '@mui/system';
+import * as React from 'react';
+import { Theme } from '../styles';
+export type PopperProps = Omit<BasePopperProps, 'direction'> & {
+    /**
+     * The component used for the root node.
+     * Either a string to use a HTML element or a component.
+     */
+    component?: React.ElementType;
+    /**
+     * The components used for each slot inside the Popper.
+     * Either a string to use a HTML element or a component.
+     * @default {}
+     */
+    components?: {
+        Root?: React.ElementType;
+    };
+    /**
+     * The props used for each slot inside the Popper.
+     * @default {}
+     */
+    componentsProps?: BasePopperProps['slotProps'];
+    /**
+     * The system prop that allows defining system overrides as well as additional CSS styles.
+     */
+    sx?: SxProps<Theme>;
+};
+/**
+ *
+ * Demos:
+ *
+ * - [Autocomplete](https://mui.com/material-ui/react-autocomplete/)
+ * - [Menu](https://mui.com/material-ui/react-menu/)
+ * - [Popper](https://mui.com/material-ui/react-popper/)
+ *
+ * API:
+ *
+ * - [Popper API](https://mui.com/material-ui/api/popper/)
+ */
+declare const Popper: React.ForwardRefExoticComponent<Omit<BasePopperProps<"div">, "direction"> & {
+    /**
+     * The component used for the root node.
+     * Either a string to use a HTML element or a component.
+     */
+    component?: React.ElementType<any> | undefined;
+    /**
+     * The components used for each slot inside the Popper.
+     * Either a string to use a HTML element or a component.
+     * @default {}
+     */
+    components?: {
+        Root?: React.ElementType<any> | undefined;
+    } | undefined;
+    /**
+     * The props used for each slot inside the Popper.
+     * @default {}
+     */
+    componentsProps?: BasePopperProps['slotProps'];
+    /**
+     * The system prop that allows defining system overrides as well as additional CSS styles.
+     */
+    sx?: SxProps<Theme> | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export default Popper;

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

package/Radio/Radio.js

@@ -1,6 +1,3 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["checked", "checkedIcon", "color", "icon", "name", "onChange", "size", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -24,7 +21,10 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['root', `color${capitalize(color)}`]
   };
-  return _extends({}, classes, composeClasses(slots, getRadioUtilityClass, classes));
+  return {
+    ...classes,
+    ...composeClasses(slots, getRadioUtilityClass, classes)
+  };
 };
 const RadioRoot = styled(SwitchBase, {
   shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes',
@@ -39,21 +39,22 @@ const RadioRoot = styled(SwitchBase, {
 })(({
   theme,
   ownerState
-}) => _extends({
-  color: (theme.vars || theme).palette.text.secondary
-}, !ownerState.disableRipple && {
-  '&:hover': {
-    backgroundColor: theme.vars ? `rgba(${ownerState.color === 'default' ? theme.vars.palette.action.activeChannel : theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(ownerState.color === 'default' ? theme.palette.action.active : theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
-    // Reset on touch devices, it doesn't add specificity
-    '@media (hover: none)': {
-      backgroundColor: 'transparent'
+}) => ({
+  color: (theme.vars || theme).palette.text.secondary,
+  ...(!ownerState.disableRipple && {
+    '&:hover': {
+      backgroundColor: theme.vars ? `rgba(${ownerState.color === 'default' ? theme.vars.palette.action.activeChannel : theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(ownerState.color === 'default' ? theme.palette.action.active : theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
+      // Reset on touch devices, it doesn't add specificity
+      '@media (hover: none)': {
+        backgroundColor: 'transparent'
+      }
     }
-  }
-}, ownerState.color !== 'default' && {
-  [`&.${radioClasses.checked}`]: {
-    color: (theme.vars || theme).palette[ownerState.color].main
-  }
-}, {
+  }),
+  ...(ownerState.color !== 'default' && {
+    [`&.${radioClasses.checked}`]: {
+      color: (theme.vars || theme).palette[ownerState.color].main
+    }
+  }),
   [`&.${radioClasses.disabled}`]: {
     color: (theme.vars || theme).palette.action.disabled
   }
@@ -77,20 +78,21 @@ const Radio = /*#__PURE__*/React.forwardRef(function Radio(inProps, ref) {
     name: 'MuiRadio'
   });
   const {
-      checked: checkedProp,
-      checkedIcon = defaultCheckedIcon,
-      color = 'primary',
-      icon = defaultIcon,
-      name: nameProp,
-      onChange: onChangeProp,
-      size = 'medium',
-      className
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    checked: checkedProp,
+    checkedIcon = defaultCheckedIcon,
+    color = 'primary',
+    icon = defaultIcon,
+    name: nameProp,
+    onChange: onChangeProp,
+    size = 'medium',
+    className,
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     color,
     size
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   const radioGroup = useRadioGroup();
   let checked = checkedProp;
@@ -104,7 +106,7 @@ const Radio = /*#__PURE__*/React.forwardRef(function Radio(inProps, ref) {
       name = radioGroup.name;
     }
   }
-  return /*#__PURE__*/_jsx(RadioRoot, _extends({
+  return /*#__PURE__*/_jsx(RadioRoot, {
     type: "radio",
     icon: /*#__PURE__*/React.cloneElement(icon, {
       fontSize: (_defaultIcon$props$fo = defaultIcon.props.fontSize) != null ? _defaultIcon$props$fo : size
@@ -118,8 +120,9 @@ const Radio = /*#__PURE__*/React.forwardRef(function Radio(inProps, ref) {
     checked: checked,
     onChange: onChange,
     ref: ref,
-    className: clsx(classes.root, className)
-  }, other));
+    className: clsx(classes.root, className),
+    ...other
+  });
 });
 process.env.NODE_ENV !== "production" ? Radio.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------

package/Radio/RadioButtonIcon.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import RadioButtonUncheckedIcon from '../internal/svg-icons/RadioButtonUnchecked';
@@ -17,19 +16,20 @@ const RadioButtonIconBackground = styled(RadioButtonUncheckedIcon)({
 const RadioButtonIconDot = styled(RadioButtonCheckedIcon)(({
   theme,
   ownerState
-}) => _extends({
+}) => ({
   left: 0,
   position: 'absolute',
   transform: 'scale(0)',
   transition: theme.transitions.create('transform', {
     easing: theme.transitions.easing.easeIn,
     duration: theme.transitions.duration.shortest
-  })
-}, ownerState.checked && {
-  transform: 'scale(1)',
-  transition: theme.transitions.create('transform', {
-    easing: theme.transitions.easing.easeOut,
-    duration: theme.transitions.duration.shortest
+  }),
+  ...(ownerState.checked && {
+    transform: 'scale(1)',
+    transition: theme.transitions.create('transform', {
+      easing: theme.transitions.easing.easeOut,
+      duration: theme.transitions.duration.shortest
+    })
   })
 }));
 
@@ -42,9 +42,10 @@ function RadioButtonIcon(props) {
     classes = {},
     fontSize
   } = props;
-  const ownerState = _extends({}, props, {
+  const ownerState = {
+    ...props,
     checked
-  });
+  };
   return /*#__PURE__*/_jsxs(RadioButtonIconRoot, {
     className: classes.root,
     ownerState: ownerState,

package/Radio/radioClasses.d.ts

@@ -1,16 +1,16 @@
-export interface RadioClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** State class applied to the root element if `checked={true}`. */
-    checked: string;
-    /** State class applied to the root element if `disabled={true}`. */
-    disabled: string;
-    /** Styles applied to the root element if `color="primary"`. */
-    colorPrimary: string;
-    /** Styles applied to the root element if `color="secondary"`. */
-    colorSecondary: string;
-}
-export type RadioClassKey = keyof RadioClasses;
-export declare function getRadioUtilityClass(slot: string): string;
-declare const radioClasses: RadioClasses;
-export default radioClasses;
+export interface RadioClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** State class applied to the root element if `checked={true}`. */
+    checked: string;
+    /** State class applied to the root element if `disabled={true}`. */
+    disabled: string;
+    /** Styles applied to the root element if `color="primary"`. */
+    colorPrimary: string;
+    /** Styles applied to the root element if `color="secondary"`. */
+    colorSecondary: string;
+}
+export type RadioClassKey = keyof RadioClasses;
+export declare function getRadioUtilityClass(slot: string): string;
+declare const radioClasses: RadioClasses;
+export default radioClasses;

package/RadioGroup/RadioGroup.js

@@ -1,6 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["actions", "children", "defaultValue", "name", "onChange", "value"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import FormGroup from '../FormGroup';
@@ -11,16 +8,16 @@ import useId from '../utils/useId';
 import { jsx as _jsx } from "react/jsx-runtime";
 const RadioGroup = /*#__PURE__*/React.forwardRef(function RadioGroup(props, ref) {
   const {
-      // private
-      // eslint-disable-next-line react/prop-types
-      actions,
-      children,
-      defaultValue,
-      name: nameProp,
-      onChange,
-      value: valueProp
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    // private
+    // eslint-disable-next-line react/prop-types
+    actions,
+    children,
+    defaultValue,
+    name: nameProp,
+    onChange,
+    value: valueProp,
+    ...other
+  } = props;
   const rootRef = React.useRef(null);
   const [value, setValueState] = useControlled({
     controlled: valueProp,
@@ -52,12 +49,12 @@ const RadioGroup = /*#__PURE__*/React.forwardRef(function RadioGroup(props, ref)
   }), [name, onChange, setValueState, value]);
   return /*#__PURE__*/_jsx(RadioGroupContext.Provider, {
     value: contextValue,
-    children: /*#__PURE__*/_jsx(FormGroup, _extends({
+    children: /*#__PURE__*/_jsx(FormGroup, {
       role: "radiogroup",
-      ref: handleRef
-    }, other, {
+      ref: handleRef,
+      ...other,
       children: children
-    }))
+    })
   });
 });
 process.env.NODE_ENV !== "production" ? RadioGroup.propTypes /* remove-proptypes */ = {

package/RadioGroup/RadioGroupContext.d.ts

@@ -1,11 +1,11 @@
-import * as React from 'react';
-export interface RadioGroupContextValue {
-    name: string | undefined;
-    onChange: (event: React.ChangeEvent<HTMLInputElement>, value: string) => void;
-    value: any;
-}
-/**
- * @ignore - internal component.
- */
-declare const RadioGroupContext: React.Context<RadioGroupContextValue | undefined>;
-export default RadioGroupContext;
+import * as React from 'react';
+export interface RadioGroupContextValue {
+    name: string | undefined;
+    onChange: (event: React.ChangeEvent<HTMLInputElement>, value: string) => void;
+    value: any;
+}
+/**
+ * @ignore - internal component.
+ */
+declare const RadioGroupContext: React.Context<RadioGroupContextValue | undefined>;
+export default RadioGroupContext;

package/RadioGroup/useRadioGroup.d.ts

@@ -1,4 +1,4 @@
-import { RadioGroupContextValue } from './RadioGroupContext';
-export interface RadioGroupState extends RadioGroupContextValue {
-}
-export default function useRadioGroup(): RadioGroupState | undefined;
+import { RadioGroupContextValue } from './RadioGroupContext';
+export interface RadioGroupState extends RadioGroupContextValue {
+}
+export default function useRadioGroup(): RadioGroupState | undefined;