@mui/material 5.13.1 → 5.13.2

package/Tabs/Tabs.js

@@ -1,3 +1,6 @@
+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';
@@ -97,22 +100,20 @@ 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',
@@ -125,32 +126,27 @@ 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',
@@ -163,14 +159,12 @@ const FlexContainer = styled('div', {
   }
 })(({
   ownerState
-}) => ({
-  display: 'flex',
-  ...(ownerState.vertical && {
-    flexDirection: 'column'
-  }),
-  ...(ownerState.centered && {
-    justifyContent: 'center'
-  })
+}) => _extends({
+  display: 'flex'
+}, ownerState.vertical && {
+  flexDirection: 'column'
+}, ownerState.centered && {
+  justifyContent: 'center'
 }));
 const TabsIndicator = styled('span', {
   name: 'MuiTabs',
@@ -179,23 +173,20 @@ 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',
@@ -221,30 +212,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,
-    ...other
-  } = props;
+      '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);
   const scrollable = variant === 'scrollable';
   const vertical = orientation === 'vertical';
   const scrollStart = vertical ? 'scrollTop' : 'scrollLeft';
@@ -252,8 +243,7 @@ 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 = {
-    ...props,
+  const ownerState = _extends({}, props, {
     component,
     allowScrollButtonsMobile,
     indicatorColor,
@@ -269,7 +259,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,
@@ -444,7 +434,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, {
+    conditionalElements.scrollButtonStart = showScrollButtons ? /*#__PURE__*/_jsx(ScrollButtonComponent, _extends({
       slots: {
         StartScrollButtonIcon: slots.StartScrollButtonIcon
       },
@@ -454,11 +444,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, {
+    })) : null;
+    conditionalElements.scrollButtonEnd = showScrollButtons ? /*#__PURE__*/_jsx(ScrollButtonComponent, _extends({
       slots: {
         EndScrollButtonIcon: slots.EndScrollButtonIcon
       },
@@ -468,10 +458,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 => {
@@ -577,15 +567,11 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     updateIndicator: updateIndicatorState,
     updateScrollButtons: updateScrollButtonState
   }), [updateIndicatorState, updateScrollButtonState]);
-  const indicator = /*#__PURE__*/_jsx(TabsIndicator, {
-    ...TabIndicatorProps,
+  const indicator = /*#__PURE__*/_jsx(TabsIndicator, _extends({}, TabIndicatorProps, {
     className: clsx(classes.indicator, TabIndicatorProps.className),
     ownerState: ownerState,
-    style: {
-      ...indicatorStyle,
-      ...TabIndicatorProps.style
-    }
-  });
+    style: _extends({}, indicatorStyle, TabIndicatorProps.style)
+  }));
   let childIndex = 0;
   const children = React.Children.map(childrenProp, child => {
     if (! /*#__PURE__*/React.isValidElement(child)) {
@@ -600,18 +586,17 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     valueToIndex.set(childValue, childIndex);
     const selected = childValue === value;
     childIndex += 1;
-    return /*#__PURE__*/React.cloneElement(child, {
+    return /*#__PURE__*/React.cloneElement(child, _extends({
       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;
@@ -652,12 +637,12 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     }
   };
   const conditionalElements = getConditionalElements();
-  return /*#__PURE__*/_jsxs(TabsRoot, {
+  return /*#__PURE__*/_jsxs(TabsRoot, _extends({
     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,
@@ -679,7 +664,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/Tabs/tabsClasses.d.ts

@@ -1,32 +1,32 @@
-export interface TabsClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if `orientation="vertical"`. */
-    vertical: string;
-    /** Styles applied to the flex container element. */
-    flexContainer: string;
-    /** Styles applied to the flex container element if `orientation="vertical"`. */
-    flexContainerVertical: string;
-    /** Styles applied to the flex container element if `centered={true}` & `!variant="scrollable"`. */
-    centered: string;
-    /** Styles applied to the tablist element. */
-    scroller: string;
-    /** Styles applied to the tablist element if `!variant="scrollable"`. */
-    fixed: string;
-    /** Styles applied to the tablist element if `variant="scrollable"` and `orientation="horizontal"`. */
-    scrollableX: string;
-    /** Styles applied to the tablist element if `variant="scrollable"` and `orientation="vertical"`. */
-    scrollableY: string;
-    /** Styles applied to the tablist element if `variant="scrollable"` and `visibleScrollbar={false}`. */
-    hideScrollbar: string;
-    /** Styles applied to the ScrollButtonComponent component. */
-    scrollButtons: string;
-    /** Styles applied to the ScrollButtonComponent component if `allowScrollButtonsMobile={true}`. */
-    scrollButtonsHideMobile: string;
-    /** Styles applied to the TabIndicator component. */
-    indicator: string;
-}
-export type TabsClassKey = keyof TabsClasses;
-export declare function getTabsUtilityClass(slot: string): string;
-declare const tabsClasses: TabsClasses;
-export default tabsClasses;
+export interface TabsClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if `orientation="vertical"`. */
+    vertical: string;
+    /** Styles applied to the flex container element. */
+    flexContainer: string;
+    /** Styles applied to the flex container element if `orientation="vertical"`. */
+    flexContainerVertical: string;
+    /** Styles applied to the flex container element if `centered={true}` & `!variant="scrollable"`. */
+    centered: string;
+    /** Styles applied to the tablist element. */
+    scroller: string;
+    /** Styles applied to the tablist element if `!variant="scrollable"`. */
+    fixed: string;
+    /** Styles applied to the tablist element if `variant="scrollable"` and `orientation="horizontal"`. */
+    scrollableX: string;
+    /** Styles applied to the tablist element if `variant="scrollable"` and `orientation="vertical"`. */
+    scrollableY: string;
+    /** Styles applied to the tablist element if `variant="scrollable"` and `visibleScrollbar={false}`. */
+    hideScrollbar: string;
+    /** Styles applied to the ScrollButtonComponent component. */
+    scrollButtons: string;
+    /** Styles applied to the ScrollButtonComponent component if `allowScrollButtonsMobile={true}`. */
+    scrollButtonsHideMobile: string;
+    /** Styles applied to the TabIndicator component. */
+    indicator: string;
+}
+export type TabsClassKey = keyof TabsClasses;
+export declare function getTabsUtilityClass(slot: string): string;
+declare const tabsClasses: TabsClasses;
+export default tabsClasses;

package/TextField/TextField.js

@@ -1,3 +1,6 @@
+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';
@@ -73,43 +76,42 @@ 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',
-    ...other
-  } = props;
-  const ownerState = {
-    ...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'
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const ownerState = _extends({}, props, {
     autoFocus,
     color,
     disabled,
@@ -119,7 +121,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) {
@@ -144,7 +146,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, {
+  const InputElement = /*#__PURE__*/_jsx(InputComponent, _extends({
     "aria-describedby": helperTextId,
     autoComplete: autoComplete,
     autoFocus: autoFocus,
@@ -164,11 +166,9 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(inProps, ref)
     onFocus: onFocus,
     onClick: onClick,
     placeholder: placeholder,
-    inputProps: inputProps,
-    ...InputMore,
-    ...InputProps
-  });
-  return /*#__PURE__*/_jsxs(TextFieldRoot, {
+    inputProps: inputProps
+  }, InputMore, InputProps));
+  return /*#__PURE__*/_jsxs(TextFieldRoot, _extends({
     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, {
+    ownerState: ownerState
+  }, other, {
+    children: [label != null && label !== '' && /*#__PURE__*/_jsx(InputLabel, _extends({
       htmlFor: id,
-      id: inputLabelId,
-      ...InputLabelProps,
+      id: inputLabelId
+    }, InputLabelProps, {
       children: label
-    }), select ? /*#__PURE__*/_jsx(Select, {
+    })), select ? /*#__PURE__*/_jsx(Select, _extends({
       "aria-describedby": helperTextId,
       id: id,
       labelId: inputLabelId,
       value: value,
-      input: InputElement,
-      ...SelectProps,
+      input: InputElement
+    }, SelectProps, {
       children: children
-    }) : InputElement, helperText && /*#__PURE__*/_jsx(FormHelperText, {
-      id: helperTextId,
-      ...FormHelperTextProps,
+    })) : InputElement, helperText && /*#__PURE__*/_jsx(FormHelperText, _extends({
+      id: helperTextId
+    }, FormHelperTextProps, {
       children: helperText
-    })]
-  });
+    }))]
+  }));
 });
 process.env.NODE_ENV !== "production" ? TextField.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------

package/TextField/textFieldClasses.d.ts

@@ -1,8 +1,8 @@
-export interface TextFieldClasses {
-    /** Styles applied to the root element. */
-    root: string;
-}
-export type TextFieldClassKey = keyof TextFieldClasses;
-export declare function getTextFieldUtilityClass(slot: string): string;
-declare const textFieldClasses: TextFieldClasses;
-export default textFieldClasses;
+export interface TextFieldClasses {
+    /** Styles applied to the root element. */
+    root: string;
+}
+export type TextFieldClassKey = keyof TextFieldClasses;
+export declare function getTextFieldUtilityClass(slot: string): string;
+declare const textFieldClasses: TextFieldClasses;
+export default textFieldClasses;