@mui/material 5.12.3 → 5.13.1

package/modern/TableSortLabel/TableSortLabel.js

@@ -1,6 +1,3 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["active", "children", "className", "direction", "hideSortIcon", "IconComponent"];
 import { unstable_composeClasses as composeClasses } from '@mui/base';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
@@ -71,7 +68,7 @@ const TableSortLabelIcon = styled('span', {
 })(({
   theme,
   ownerState
-}) => _extends({
+}) => ({
   fontSize: 18,
   marginRight: 4,
   marginLeft: 4,
@@ -79,11 +76,13 @@ const TableSortLabelIcon = styled('span', {
   transition: theme.transitions.create(['opacity', 'transform'], {
     duration: theme.transitions.duration.shorter
   }),
-  userSelect: 'none'
-}, ownerState.direction === 'desc' && {
-  transform: 'rotate(0deg)'
-}, ownerState.direction === 'asc' && {
-  transform: 'rotate(180deg)'
+  userSelect: 'none',
+  ...(ownerState.direction === 'desc' && {
+    transform: 'rotate(0deg)'
+  }),
+  ...(ownerState.direction === 'asc' && {
+    transform: 'rotate(180deg)'
+  })
 }));
 
 /**
@@ -95,34 +94,35 @@ const TableSortLabel = /*#__PURE__*/React.forwardRef(function TableSortLabel(inP
     name: 'MuiTableSortLabel'
   });
   const {
-      active = false,
-      children,
-      className,
-      direction = 'asc',
-      hideSortIcon = false,
-      IconComponent = ArrowDownwardIcon
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    active = false,
+    children,
+    className,
+    direction = 'asc',
+    hideSortIcon = false,
+    IconComponent = ArrowDownwardIcon,
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     active,
     direction,
     hideSortIcon,
     IconComponent
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsxs(TableSortLabelRoot, _extends({
+  return /*#__PURE__*/_jsxs(TableSortLabelRoot, {
     className: clsx(classes.root, className),
     component: "span",
     disableRipple: true,
     ownerState: ownerState,
-    ref: ref
-  }, other, {
+    ref: ref,
+    ...other,
     children: [children, hideSortIcon && !active ? null : /*#__PURE__*/_jsx(TableSortLabelIcon, {
       as: IconComponent,
       className: clsx(classes.icon),
       ownerState: ownerState
     })]
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? TableSortLabel.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------

package/modern/Tabs/ScrollbarSize.js

@@ -1,6 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["onChange"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import debounce from '../utils/debounce';
@@ -21,9 +18,9 @@ const styles = {
  */
 export default function ScrollbarSize(props) {
   const {
-      onChange
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    onChange,
+    ...other
+  } = props;
   const scrollbarHeight = React.useRef();
   const nodeRef = React.useRef(null);
   const setMeasurements = () => {
@@ -48,10 +45,11 @@ export default function ScrollbarSize(props) {
     setMeasurements();
     onChange(scrollbarHeight.current);
   }, [onChange]);
-  return /*#__PURE__*/_jsx("div", _extends({
+  return /*#__PURE__*/_jsx("div", {
     style: styles,
-    ref: nodeRef
-  }, other));
+    ref: nodeRef,
+    ...other
+  });
 }
 process.env.NODE_ENV !== "production" ? ScrollbarSize.propTypes = {
   onChange: PropTypes.func.isRequired

package/modern/Tabs/Tabs.js

@@ -1,6 +1,3 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["aria-label", "aria-labelledby", "action", "centered", "children", "className", "component", "allowScrollButtonsMobile", "indicatorColor", "onChange", "orientation", "ScrollButtonComponent", "scrollButtons", "selectionFollowsFocus", "slots", "slotProps", "TabIndicatorProps", "TabScrollButtonProps", "textColor", "value", "variant", "visibleScrollbar"];
 import * as React from 'react';
 import { isFragment } from 'react-is';
 import PropTypes from 'prop-types';
@@ -100,20 +97,22 @@ const TabsRoot = styled('div', {
 })(({
   ownerState,
   theme
-}) => _extends({
+}) => ({
   overflow: 'hidden',
   minHeight: 48,
   // Add iOS momentum scrolling for iOS < 13.0
   WebkitOverflowScrolling: 'touch',
-  display: 'flex'
-}, ownerState.vertical && {
-  flexDirection: 'column'
-}, ownerState.scrollButtonsHideMobile && {
-  [`& .${tabsClasses.scrollButtons}`]: {
-    [theme.breakpoints.down('sm')]: {
-      display: 'none'
+  display: 'flex',
+  ...(ownerState.vertical && {
+    flexDirection: 'column'
+  }),
+  ...(ownerState.scrollButtonsHideMobile && {
+    [`& .${tabsClasses.scrollButtons}`]: {
+      [theme.breakpoints.down('sm')]: {
+        display: 'none'
+      }
     }
-  }
+  })
 }));
 const TabsScroller = styled('div', {
   name: 'MuiTabs',
@@ -126,27 +125,32 @@ const TabsScroller = styled('div', {
   }
 })(({
   ownerState
-}) => _extends({
+}) => ({
   position: 'relative',
   display: 'inline-block',
   flex: '1 1 auto',
-  whiteSpace: 'nowrap'
-}, ownerState.fixed && {
-  overflowX: 'hidden',
-  width: '100%'
-}, ownerState.hideScrollbar && {
-  // Hide dimensionless scrollbar on macOS
-  scrollbarWidth: 'none',
-  // Firefox
-  '&::-webkit-scrollbar': {
-    display: 'none' // Safari + Chrome
-  }
-}, ownerState.scrollableX && {
-  overflowX: 'auto',
-  overflowY: 'hidden'
-}, ownerState.scrollableY && {
-  overflowY: 'auto',
-  overflowX: 'hidden'
+  whiteSpace: 'nowrap',
+  ...(ownerState.fixed && {
+    overflowX: 'hidden',
+    width: '100%'
+  }),
+  ...(ownerState.hideScrollbar && {
+    // Hide dimensionless scrollbar on macOS
+    scrollbarWidth: 'none',
+    // Firefox
+    '&::-webkit-scrollbar': {
+      display: 'none' // Safari + Chrome
+    }
+  }),
+
+  ...(ownerState.scrollableX && {
+    overflowX: 'auto',
+    overflowY: 'hidden'
+  }),
+  ...(ownerState.scrollableY && {
+    overflowY: 'auto',
+    overflowX: 'hidden'
+  })
 }));
 const FlexContainer = styled('div', {
   name: 'MuiTabs',
@@ -159,12 +163,14 @@ const FlexContainer = styled('div', {
   }
 })(({
   ownerState
-}) => _extends({
-  display: 'flex'
-}, ownerState.vertical && {
-  flexDirection: 'column'
-}, ownerState.centered && {
-  justifyContent: 'center'
+}) => ({
+  display: 'flex',
+  ...(ownerState.vertical && {
+    flexDirection: 'column'
+  }),
+  ...(ownerState.centered && {
+    justifyContent: 'center'
+  })
 }));
 const TabsIndicator = styled('span', {
   name: 'MuiTabs',
@@ -173,20 +179,23 @@ const TabsIndicator = styled('span', {
 })(({
   ownerState,
   theme
-}) => _extends({
+}) => ({
   position: 'absolute',
   height: 2,
   bottom: 0,
   width: '100%',
-  transition: theme.transitions.create()
-}, ownerState.indicatorColor === 'primary' && {
-  backgroundColor: (theme.vars || theme).palette.primary.main
-}, ownerState.indicatorColor === 'secondary' && {
-  backgroundColor: (theme.vars || theme).palette.secondary.main
-}, ownerState.vertical && {
-  height: '100%',
-  width: 2,
-  right: 0
+  transition: theme.transitions.create(),
+  ...(ownerState.indicatorColor === 'primary' && {
+    backgroundColor: (theme.vars || theme).palette.primary.main
+  }),
+  ...(ownerState.indicatorColor === 'secondary' && {
+    backgroundColor: (theme.vars || theme).palette.secondary.main
+  }),
+  ...(ownerState.vertical && {
+    height: '100%',
+    width: 2,
+    right: 0
+  })
 }));
 const TabsScrollbarSize = styled(ScrollbarSize, {
   name: 'MuiTabs',
@@ -212,30 +221,30 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
   const theme = useTheme();
   const isRtl = theme.direction === 'rtl';
   const {
-      'aria-label': ariaLabel,
-      'aria-labelledby': ariaLabelledBy,
-      action,
-      centered = false,
-      children: childrenProp,
-      className,
-      component = 'div',
-      allowScrollButtonsMobile = false,
-      indicatorColor = 'primary',
-      onChange,
-      orientation = 'horizontal',
-      ScrollButtonComponent = TabScrollButton,
-      scrollButtons = 'auto',
-      selectionFollowsFocus,
-      slots = {},
-      slotProps = {},
-      TabIndicatorProps = {},
-      TabScrollButtonProps = {},
-      textColor = 'primary',
-      value,
-      variant = 'standard',
-      visibleScrollbar = false
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
+    action,
+    centered = false,
+    children: childrenProp,
+    className,
+    component = 'div',
+    allowScrollButtonsMobile = false,
+    indicatorColor = 'primary',
+    onChange,
+    orientation = 'horizontal',
+    ScrollButtonComponent = TabScrollButton,
+    scrollButtons = 'auto',
+    selectionFollowsFocus,
+    slots = {},
+    slotProps = {},
+    TabIndicatorProps = {},
+    TabScrollButtonProps = {},
+    textColor = 'primary',
+    value,
+    variant = 'standard',
+    visibleScrollbar = false,
+    ...other
+  } = props;
   const scrollable = variant === 'scrollable';
   const vertical = orientation === 'vertical';
   const scrollStart = vertical ? 'scrollTop' : 'scrollLeft';
@@ -243,7 +252,8 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
   const end = vertical ? 'bottom' : 'right';
   const clientSize = vertical ? 'clientHeight' : 'clientWidth';
   const size = vertical ? 'height' : 'width';
-  const ownerState = _extends({}, props, {
+  const ownerState = {
+    ...props,
     component,
     allowScrollButtonsMobile,
     indicatorColor,
@@ -259,7 +269,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     scrollableY: scrollable && vertical,
     centered: centered && !scrollable,
     scrollButtonsHideMobile: !allowScrollButtonsMobile
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   const startScrollButtonIconProps = useSlotProps({
     elementType: slots.StartScrollButtonIcon,
@@ -434,7 +444,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     }) : null;
     const scrollButtonsActive = displayScroll.start || displayScroll.end;
     const showScrollButtons = scrollable && (scrollButtons === 'auto' && scrollButtonsActive || scrollButtons === true);
-    conditionalElements.scrollButtonStart = showScrollButtons ? /*#__PURE__*/_jsx(ScrollButtonComponent, _extends({
+    conditionalElements.scrollButtonStart = showScrollButtons ? /*#__PURE__*/_jsx(ScrollButtonComponent, {
       slots: {
         StartScrollButtonIcon: slots.StartScrollButtonIcon
       },
@@ -444,11 +454,11 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       orientation: orientation,
       direction: isRtl ? 'right' : 'left',
       onClick: handleStartScrollClick,
-      disabled: !displayScroll.start
-    }, TabScrollButtonProps, {
+      disabled: !displayScroll.start,
+      ...TabScrollButtonProps,
       className: clsx(classes.scrollButtons, TabScrollButtonProps.className)
-    })) : null;
-    conditionalElements.scrollButtonEnd = showScrollButtons ? /*#__PURE__*/_jsx(ScrollButtonComponent, _extends({
+    }) : null;
+    conditionalElements.scrollButtonEnd = showScrollButtons ? /*#__PURE__*/_jsx(ScrollButtonComponent, {
       slots: {
         EndScrollButtonIcon: slots.EndScrollButtonIcon
       },
@@ -458,10 +468,10 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       orientation: orientation,
       direction: isRtl ? 'left' : 'right',
       onClick: handleEndScrollClick,
-      disabled: !displayScroll.end
-    }, TabScrollButtonProps, {
+      disabled: !displayScroll.end,
+      ...TabScrollButtonProps,
       className: clsx(classes.scrollButtons, TabScrollButtonProps.className)
-    })) : null;
+    }) : null;
     return conditionalElements;
   };
   const scrollSelectedIntoView = useEventCallback(animation => {
@@ -567,11 +577,15 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     updateIndicator: updateIndicatorState,
     updateScrollButtons: updateScrollButtonState
   }), [updateIndicatorState, updateScrollButtonState]);
-  const indicator = /*#__PURE__*/_jsx(TabsIndicator, _extends({}, TabIndicatorProps, {
+  const indicator = /*#__PURE__*/_jsx(TabsIndicator, {
+    ...TabIndicatorProps,
     className: clsx(classes.indicator, TabIndicatorProps.className),
     ownerState: ownerState,
-    style: _extends({}, indicatorStyle, TabIndicatorProps.style)
-  }));
+    style: {
+      ...indicatorStyle,
+      ...TabIndicatorProps.style
+    }
+  });
   let childIndex = 0;
   const children = React.Children.map(childrenProp, child => {
     if (! /*#__PURE__*/React.isValidElement(child)) {
@@ -586,17 +600,18 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     valueToIndex.set(childValue, childIndex);
     const selected = childValue === value;
     childIndex += 1;
-    return /*#__PURE__*/React.cloneElement(child, _extends({
+    return /*#__PURE__*/React.cloneElement(child, {
       fullWidth: variant === 'fullWidth',
       indicator: selected && !mounted && indicator,
       selected,
       selectionFollowsFocus,
       onChange,
       textColor,
-      value: childValue
-    }, childIndex === 1 && value === false && !child.props.tabIndex ? {
-      tabIndex: 0
-    } : {}));
+      value: childValue,
+      ...(childIndex === 1 && value === false && !child.props.tabIndex ? {
+        tabIndex: 0
+      } : {})
+    });
   });
   const handleKeyDown = event => {
     const list = tabListRef.current;
@@ -637,12 +652,12 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     }
   };
   const conditionalElements = getConditionalElements();
-  return /*#__PURE__*/_jsxs(TabsRoot, _extends({
+  return /*#__PURE__*/_jsxs(TabsRoot, {
     className: clsx(classes.root, className),
     ownerState: ownerState,
     ref: ref,
-    as: component
-  }, other, {
+    as: component,
+    ...other,
     children: [conditionalElements.scrollButtonStart, conditionalElements.scrollbarSizeListener, /*#__PURE__*/_jsxs(TabsScroller, {
       className: classes.scroller,
       ownerState: ownerState,
@@ -664,7 +679,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
         children: children
       }), mounted && indicator]
     }), conditionalElements.scrollButtonEnd]
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? Tabs.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------

package/modern/TextField/TextField.js

@@ -1,6 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["autoComplete", "autoFocus", "children", "className", "color", "defaultValue", "disabled", "error", "FormHelperTextProps", "fullWidth", "helperText", "id", "InputLabelProps", "inputProps", "InputProps", "inputRef", "label", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onClick", "onFocus", "placeholder", "required", "rows", "select", "SelectProps", "type", "value", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -76,42 +73,43 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(inProps, ref)
     name: 'MuiTextField'
   });
   const {
-      autoComplete,
-      autoFocus = false,
-      children,
-      className,
-      color = 'primary',
-      defaultValue,
-      disabled = false,
-      error = false,
-      FormHelperTextProps,
-      fullWidth = false,
-      helperText,
-      id: idOverride,
-      InputLabelProps,
-      inputProps,
-      InputProps,
-      inputRef,
-      label,
-      maxRows,
-      minRows,
-      multiline = false,
-      name,
-      onBlur,
-      onChange,
-      onClick,
-      onFocus,
-      placeholder,
-      required = false,
-      rows,
-      select = false,
-      SelectProps,
-      type,
-      value,
-      variant = 'outlined'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    autoComplete,
+    autoFocus = false,
+    children,
+    className,
+    color = 'primary',
+    defaultValue,
+    disabled = false,
+    error = false,
+    FormHelperTextProps,
+    fullWidth = false,
+    helperText,
+    id: idOverride,
+    InputLabelProps,
+    inputProps,
+    InputProps,
+    inputRef,
+    label,
+    maxRows,
+    minRows,
+    multiline = false,
+    name,
+    onBlur,
+    onChange,
+    onClick,
+    onFocus,
+    placeholder,
+    required = false,
+    rows,
+    select = false,
+    SelectProps,
+    type,
+    value,
+    variant = 'outlined',
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     autoFocus,
     color,
     disabled,
@@ -121,7 +119,7 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(inProps, ref)
     required,
     select,
     variant
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   if (process.env.NODE_ENV !== 'production') {
     if (select && !children) {
@@ -146,7 +144,7 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(inProps, ref)
   const helperTextId = helperText && id ? `${id}-helper-text` : undefined;
   const inputLabelId = label && id ? `${id}-label` : undefined;
   const InputComponent = variantComponent[variant];
-  const InputElement = /*#__PURE__*/_jsx(InputComponent, _extends({
+  const InputElement = /*#__PURE__*/_jsx(InputComponent, {
     "aria-describedby": helperTextId,
     autoComplete: autoComplete,
     autoFocus: autoFocus,
@@ -166,9 +164,11 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(inProps, ref)
     onFocus: onFocus,
     onClick: onClick,
     placeholder: placeholder,
-    inputProps: inputProps
-  }, InputMore, InputProps));
-  return /*#__PURE__*/_jsxs(TextFieldRoot, _extends({
+    inputProps: inputProps,
+    ...InputMore,
+    ...InputProps
+  });
+  return /*#__PURE__*/_jsxs(TextFieldRoot, {
     className: clsx(classes.root, className),
     disabled: disabled,
     error: error,
@@ -177,27 +177,27 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(inProps, ref)
     required: required,
     color: color,
     variant: variant,
-    ownerState: ownerState
-  }, other, {
-    children: [label != null && label !== '' && /*#__PURE__*/_jsx(InputLabel, _extends({
+    ownerState: ownerState,
+    ...other,
+    children: [label != null && label !== '' && /*#__PURE__*/_jsx(InputLabel, {
       htmlFor: id,
-      id: inputLabelId
-    }, InputLabelProps, {
+      id: inputLabelId,
+      ...InputLabelProps,
       children: label
-    })), select ? /*#__PURE__*/_jsx(Select, _extends({
+    }), select ? /*#__PURE__*/_jsx(Select, {
       "aria-describedby": helperTextId,
       id: id,
       labelId: inputLabelId,
       value: value,
-      input: InputElement
-    }, SelectProps, {
+      input: InputElement,
+      ...SelectProps,
       children: children
-    })) : InputElement, helperText && /*#__PURE__*/_jsx(FormHelperText, _extends({
-      id: helperTextId
-    }, FormHelperTextProps, {
+    }) : InputElement, helperText && /*#__PURE__*/_jsx(FormHelperText, {
+      id: helperTextId,
+      ...FormHelperTextProps,
       children: helperText
-    }))]
-  }));
+    })]
+  });
 });
 process.env.NODE_ENV !== "production" ? TextField.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------