@mui/material 6.0.0-alpha.7 → 6.0.0-alpha.9

package/SwipeableDrawer/SwipeableDrawer.js

@@ -1,9 +1,5 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["BackdropProps"],
-  _excluded2 = ["anchor", "disableBackdropTransition", "disableDiscovery", "disableSwipeToOpen", "hideBackdrop", "hysteresis", "allowSwipeInChildren", "minFlingVelocity", "ModalProps", "onClose", "onOpen", "open", "PaperProps", "SwipeAreaProps", "swipeAreaWidth", "transitionDuration", "variant"];
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
@@ -128,28 +124,29 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
     exit: theme.transitions.duration.leavingScreen
   };
   const {
-      anchor = 'left',
-      disableBackdropTransition = false,
-      disableDiscovery = false,
-      disableSwipeToOpen = iOS,
-      hideBackdrop,
-      hysteresis = 0.52,
-      allowSwipeInChildren = false,
-      minFlingVelocity = 450,
-      ModalProps: {
-        BackdropProps
-      } = {},
-      onClose,
-      onOpen,
-      open = false,
-      PaperProps = {},
-      SwipeAreaProps,
-      swipeAreaWidth = 20,
-      transitionDuration = transitionDurationDefault,
-      variant = 'temporary' // Mobile first.
-    } = props,
-    ModalPropsProp = _objectWithoutPropertiesLoose(props.ModalProps, _excluded),
-    other = _objectWithoutPropertiesLoose(props, _excluded2);
+    anchor = 'left',
+    disableBackdropTransition = false,
+    disableDiscovery = false,
+    disableSwipeToOpen = iOS,
+    hideBackdrop,
+    hysteresis = 0.52,
+    allowSwipeInChildren = false,
+    minFlingVelocity = 450,
+    ModalProps: {
+      BackdropProps,
+      ...ModalPropsProp
+    } = {},
+    onClose,
+    onOpen,
+    open = false,
+    PaperProps = {},
+    SwipeAreaProps,
+    swipeAreaWidth = 20,
+    transitionDuration = transitionDurationDefault,
+    variant = 'temporary',
+    // Mobile first.
+    ...other
+  } = props;
   const [maybeSwiping, setMaybeSwiping] = React.useState(false);
   const swipeInstance = React.useRef({
     isSwiping: null
@@ -453,33 +450,42 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
     }
   }, [open]);
   return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [/*#__PURE__*/_jsx(Drawer, _extends({
+    children: [/*#__PURE__*/_jsx(Drawer, {
       open: variant === 'temporary' && maybeSwiping ? true : open,
       variant: variant,
-      ModalProps: _extends({
-        BackdropProps: _extends({}, BackdropProps, {
+      ModalProps: {
+        BackdropProps: {
+          ...BackdropProps,
           ref: backdropRef
-        })
-      }, variant === 'temporary' && {
-        keepMounted: true
-      }, ModalPropsProp),
+        },
+        // Ensures that paperRef.current will be defined inside the touch start event handler
+        // See https://github.com/mui/material-ui/issues/30414 for more information
+        ...(variant === 'temporary' && {
+          keepMounted: true
+        }),
+        ...ModalPropsProp
+      },
       hideBackdrop: hideBackdrop,
-      PaperProps: _extends({}, PaperProps, {
-        style: _extends({
-          pointerEvents: variant === 'temporary' && !open && !allowSwipeInChildren ? 'none' : ''
-        }, PaperProps.style),
+      PaperProps: {
+        ...PaperProps,
+        style: {
+          pointerEvents: variant === 'temporary' && !open && !allowSwipeInChildren ? 'none' : '',
+          ...PaperProps.style
+        },
         ref: handleRef
-      }),
+      },
       anchor: anchor,
       transitionDuration: calculatedDurationRef.current || transitionDuration,
       onClose: onClose,
-      ref: ref
-    }, other)), !disableSwipeToOpen && variant === 'temporary' && /*#__PURE__*/_jsx(NoSsr, {
-      children: /*#__PURE__*/_jsx(SwipeArea, _extends({
+      ref: ref,
+      ...other
+    }), !disableSwipeToOpen && variant === 'temporary' && /*#__PURE__*/_jsx(NoSsr, {
+      children: /*#__PURE__*/_jsx(SwipeArea, {
         anchor: anchor,
         ref: swipeAreaRef,
-        width: swipeAreaWidth
-      }, SwipeAreaProps))
+        width: swipeAreaWidth,
+        ...SwipeAreaProps
+      })
     })]
   });
 });

package/Switch/Switch.d.ts

@@ -66,4 +66,4 @@ export interface SwitchProps
  * - [Switch API](https://mui.com/material-ui/api/switch/)
  * - inherits [IconButton API](https://mui.com/material-ui/api/icon-button/)
  */
-export default function Switch(props: SwitchProps): JSX.Element;
+export default function Switch(props: SwitchProps): React.JSX.Element;

package/Switch/Switch.js

@@ -1,9 +1,6 @@
 'use client';
 
 // @inheritedComponent IconButton
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["className", "color", "edge", "size", "sx"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -33,7 +30,11 @@ const useUtilityClasses = ownerState => {
     input: ['input']
   };
   const composedClasses = composeClasses(slots, getSwitchUtilityClass, classes);
-  return _extends({}, classes, composedClasses);
+  return {
+    ...classes,
+    // forward the disabled and checked classes to the SwitchBase
+    ...composedClasses
+  };
 };
 const SwitchRoot = styled('span', {
   name: 'MuiSwitch',
@@ -144,7 +145,7 @@ const SwitchSwitchBase = styled(SwitchBase, {
       backgroundColor: 'transparent'
     }
   },
-  variants: [...Object.entries(theme.palette).filter(([, value]) => value.main && value.light) // check all the used fields in the style below
+  variants: [...Object.entries(theme.palette).filter(([, value]) => value && value.main && value.light) // check all the used fields in the style below
   .map(([color]) => ({
     props: {
       color
@@ -204,18 +205,19 @@ const Switch = /*#__PURE__*/React.forwardRef(function Switch(inProps, ref) {
     name: 'MuiSwitch'
   });
   const {
-      className,
-      color = 'primary',
-      edge = false,
-      size = 'medium',
-      sx
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    className,
+    color = 'primary',
+    edge = false,
+    size = 'medium',
+    sx,
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     color,
     edge,
     size
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   const icon = /*#__PURE__*/_jsx(SwitchThumb, {
     className: classes.thumb,
@@ -225,17 +227,18 @@ const Switch = /*#__PURE__*/React.forwardRef(function Switch(inProps, ref) {
     className: clsx(classes.root, className),
     sx: sx,
     ownerState: ownerState,
-    children: [/*#__PURE__*/_jsx(SwitchSwitchBase, _extends({
+    children: [/*#__PURE__*/_jsx(SwitchSwitchBase, {
       type: "checkbox",
       icon: icon,
       checkedIcon: icon,
       ref: ref,
-      ownerState: ownerState
-    }, other, {
-      classes: _extends({}, classes, {
+      ownerState: ownerState,
+      ...other,
+      classes: {
+        ...classes,
         root: classes.switchBase
-      })
-    })), /*#__PURE__*/_jsx(SwitchTrack, {
+      }
+    }), /*#__PURE__*/_jsx(SwitchTrack, {
       className: classes.track,
       ownerState: ownerState
     })]

package/Tab/Tab.d.ts

@@ -28,7 +28,7 @@ export interface TabOwnProps {
   /**
    * The icon to display.
    */
-  icon?: string | React.ReactElement;
+  icon?: string | React.ReactElement<any>;
   /**
    * The position of the icon relative to the label.
    * @default 'top'

package/Tab/Tab.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", "disabled", "disableFocusRipple", "fullWidth", "icon", "iconPosition", "indicator", "label", "onChange", "onClick", "onFocus", "selected", "selectionFollowsFocus", "textColor", "value", "wrapped"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -42,7 +39,8 @@ const TabRoot = styled(ButtonBase, {
   }
 })(({
   theme
-}) => _extends({}, theme.typography.button, {
+}) => ({
+  ...theme.typography.button,
   maxWidth: 360,
   minWidth: 90,
   position: 'relative',
@@ -182,30 +180,31 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab(inProps, ref) {
     name: 'MuiTab'
   });
   const {
-      className,
-      disabled = false,
-      disableFocusRipple = false,
-      // eslint-disable-next-line react/prop-types
-      fullWidth,
-      icon: iconProp,
-      iconPosition = 'top',
-      // eslint-disable-next-line react/prop-types
-      indicator,
-      label,
-      onChange,
-      onClick,
-      onFocus,
-      // eslint-disable-next-line react/prop-types
-      selected,
-      // eslint-disable-next-line react/prop-types
-      selectionFollowsFocus,
-      // eslint-disable-next-line react/prop-types
-      textColor = 'inherit',
-      value,
-      wrapped = false
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    className,
+    disabled = false,
+    disableFocusRipple = false,
+    // eslint-disable-next-line react/prop-types
+    fullWidth,
+    icon: iconProp,
+    iconPosition = 'top',
+    // eslint-disable-next-line react/prop-types
+    indicator,
+    label,
+    onChange,
+    onClick,
+    onFocus,
+    // eslint-disable-next-line react/prop-types
+    selected,
+    // eslint-disable-next-line react/prop-types
+    selectionFollowsFocus,
+    // eslint-disable-next-line react/prop-types
+    textColor = 'inherit',
+    value,
+    wrapped = false,
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     disabled,
     disableFocusRipple,
     selected,
@@ -215,7 +214,7 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab(inProps, ref) {
     fullWidth,
     textColor,
     wrapped
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   const icon = iconProp && label && /*#__PURE__*/React.isValidElement(iconProp) ? /*#__PURE__*/React.cloneElement(iconProp, {
     className: clsx(classes.iconWrapper, iconProp.props.className)
@@ -236,7 +235,7 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab(inProps, ref) {
       onFocus(event);
     }
   };
-  return /*#__PURE__*/_jsxs(TabRoot, _extends({
+  return /*#__PURE__*/_jsxs(TabRoot, {
     focusRipple: !disableFocusRipple,
     className: clsx(classes.root, className),
     ref: ref,
@@ -246,14 +245,14 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab(inProps, ref) {
     onClick: handleClick,
     onFocus: handleFocus,
     ownerState: ownerState,
-    tabIndex: selected ? 0 : -1
-  }, other, {
+    tabIndex: selected ? 0 : -1,
+    ...other,
     children: [iconPosition === 'top' || iconPosition === 'start' ? /*#__PURE__*/_jsxs(React.Fragment, {
       children: [icon, label]
     }) : /*#__PURE__*/_jsxs(React.Fragment, {
       children: [label, icon]
     }), indicator]
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? Tab.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/TabScrollButton/TabScrollButton.d.ts

@@ -75,4 +75,4 @@ export interface TabScrollButtonProps extends ButtonBaseProps {
  *
  * - [TabScrollButton API](https://mui.com/material-ui/api/tab-scroll-button/)
  */
-export default function TabScrollButton(props: TabScrollButtonProps): JSX.Element;
+export default function TabScrollButton(props: TabScrollButtonProps): React.JSX.Element;

package/TabScrollButton/TabScrollButton.js

@@ -1,9 +1,6 @@
 'use client';
 
 /* eslint-disable jsx-a11y/aria-role */
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["className", "slots", "slotProps", "direction", "orientation", "disabled"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -63,17 +60,19 @@ const TabScrollButton = /*#__PURE__*/React.forwardRef(function TabScrollButton(i
     name: 'MuiTabScrollButton'
   });
   const {
-      className,
-      slots = {},
-      slotProps = {},
-      direction,
-      orientation
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    className,
+    slots = {},
+    slotProps = {},
+    direction,
+    orientation,
+    disabled,
+    ...other
+  } = props;
   const isRtl = useRtl();
-  const ownerState = _extends({
-    isRtl
-  }, props);
+  const ownerState = {
+    isRtl,
+    ...props
+  };
   const classes = useUtilityClasses(ownerState);
   const StartButtonIcon = slots.StartScrollButtonIcon ?? KeyboardArrowLeft;
   const EndButtonIcon = slots.EndScrollButtonIcon ?? KeyboardArrowRight;
@@ -93,19 +92,26 @@ const TabScrollButton = /*#__PURE__*/React.forwardRef(function TabScrollButton(i
     },
     ownerState
   });
-  return /*#__PURE__*/_jsx(TabScrollButtonRoot, _extends({
+  return /*#__PURE__*/_jsx(TabScrollButtonRoot, {
     component: "div",
     className: clsx(classes.root, className),
     ref: ref,
     role: null,
     ownerState: ownerState,
-    tabIndex: null
-  }, other, {
-    style: _extends({}, other.style, orientation === 'vertical' && {
-      '--TabScrollButton-svgRotate': `rotate(${isRtl ? -90 : 90}deg)`
-    }),
-    children: direction === 'left' ? /*#__PURE__*/_jsx(StartButtonIcon, _extends({}, startButtonIconProps)) : /*#__PURE__*/_jsx(EndButtonIcon, _extends({}, endButtonIconProps))
-  }));
+    tabIndex: null,
+    ...other,
+    style: {
+      ...other.style,
+      ...(orientation === 'vertical' && {
+        '--TabScrollButton-svgRotate': `rotate(${isRtl ? -90 : 90}deg)`
+      })
+    },
+    children: direction === 'left' ? /*#__PURE__*/_jsx(StartButtonIcon, {
+      ...startButtonIconProps
+    }) : /*#__PURE__*/_jsx(EndButtonIcon, {
+      ...endButtonIconProps
+    })
+  });
 });
 process.env.NODE_ENV !== "production" ? TabScrollButton.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/Table/Table.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", "component", "padding", "size", "stickyHeader"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -38,12 +35,13 @@ const TableRoot = styled('table', {
   width: '100%',
   borderCollapse: 'collapse',
   borderSpacing: 0,
-  '& caption': _extends({}, theme.typography.body2, {
+  '& caption': {
+    ...theme.typography.body2,
     padding: theme.spacing(2),
     color: (theme.vars || theme).palette.text.secondary,
     textAlign: 'left',
     captionSide: 'bottom'
-  }),
+  },
   variants: [{
     props: ({
       ownerState
@@ -60,19 +58,20 @@ const Table = /*#__PURE__*/React.forwardRef(function Table(inProps, ref) {
     name: 'MuiTable'
   });
   const {
-      className,
-      component = defaultComponent,
-      padding = 'normal',
-      size = 'medium',
-      stickyHeader = false
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    className,
+    component = defaultComponent,
+    padding = 'normal',
+    size = 'medium',
+    stickyHeader = false,
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     component,
     padding,
     size,
     stickyHeader
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   const table = React.useMemo(() => ({
     padding,
@@ -81,13 +80,14 @@ const Table = /*#__PURE__*/React.forwardRef(function Table(inProps, ref) {
   }), [padding, size, stickyHeader]);
   return /*#__PURE__*/_jsx(TableContext.Provider, {
     value: table,
-    children: /*#__PURE__*/_jsx(TableRoot, _extends({
+    children: /*#__PURE__*/_jsx(TableRoot, {
       as: component,
       role: component === defaultComponent ? null : 'table',
       ref: ref,
       className: clsx(classes.root, className),
-      ownerState: ownerState
-    }, other))
+      ownerState: ownerState,
+      ...other
+    })
   });
 });
 process.env.NODE_ENV !== "production" ? Table.propTypes /* remove-proptypes */ = {

package/TableBody/TableBody.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"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -38,23 +35,25 @@ const TableBody = /*#__PURE__*/React.forwardRef(function TableBody(inProps, ref)
     name: 'MuiTableBody'
   });
   const {
-      className,
-      component = defaultComponent
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    className,
+    component = defaultComponent,
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     component
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsx(Tablelvl2Context.Provider, {
     value: tablelvl2,
-    children: /*#__PURE__*/_jsx(TableBodyRoot, _extends({
+    children: /*#__PURE__*/_jsx(TableBodyRoot, {
       className: clsx(classes.root, className),
       as: component,
       ref: ref,
       role: component === defaultComponent ? null : 'rowgroup',
-      ownerState: ownerState
-    }, other))
+      ownerState: ownerState,
+      ...other
+    })
   });
 });
 process.env.NODE_ENV !== "production" ? TableBody.propTypes /* remove-proptypes */ = {

package/TableCell/TableCell.d.ts

@@ -83,4 +83,4 @@ export type SortDirection = 'asc' | 'desc' | false;
  *
  * - [TableCell API](https://mui.com/material-ui/api/table-cell/)
  */
-export default function TableCell(props: TableCellProps): JSX.Element;
+export default function TableCell(props: TableCellProps): React.JSX.Element;

package/TableCell/TableCell.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 = ["align", "className", "component", "padding", "scope", "size", "sortDirection", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -40,7 +37,8 @@ const TableCellRoot = styled('td', {
   }
 })(({
   theme
-}) => _extends({}, theme.typography.body2, {
+}) => ({
+  ...theme.typography.body2,
   display: 'table-cell',
   verticalAlign: 'inherit',
   // Workaround for a rendering bug with spanned columns in Chrome 62.0.
@@ -157,16 +155,16 @@ const TableCell = /*#__PURE__*/React.forwardRef(function TableCell(inProps, ref)
     name: 'MuiTableCell'
   });
   const {
-      align = 'inherit',
-      className,
-      component: componentProp,
-      padding: paddingProp,
-      scope: scopeProp,
-      size: sizeProp,
-      sortDirection,
-      variant: variantProp
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    align = 'inherit',
+    className,
+    component: componentProp,
+    padding: paddingProp,
+    scope: scopeProp,
+    size: sizeProp,
+    sortDirection,
+    variant: variantProp,
+    ...other
+  } = props;
   const table = React.useContext(TableContext);
   const tablelvl2 = React.useContext(Tablelvl2Context);
   const isHeadCell = tablelvl2 && tablelvl2.variant === 'head';
@@ -185,7 +183,8 @@ const TableCell = /*#__PURE__*/React.forwardRef(function TableCell(inProps, ref)
     scope = 'col';
   }
   const variant = variantProp || tablelvl2 && tablelvl2.variant;
-  const ownerState = _extends({}, props, {
+  const ownerState = {
+    ...props,
     align,
     component,
     padding: paddingProp || (table && table.padding ? table.padding : 'normal'),
@@ -193,20 +192,21 @@ const TableCell = /*#__PURE__*/React.forwardRef(function TableCell(inProps, ref)
     sortDirection,
     stickyHeader: variant === 'head' && table && table.stickyHeader,
     variant
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   let ariaSort = null;
   if (sortDirection) {
     ariaSort = sortDirection === 'asc' ? 'ascending' : 'descending';
   }
-  return /*#__PURE__*/_jsx(TableCellRoot, _extends({
+  return /*#__PURE__*/_jsx(TableCellRoot, {
     as: component,
     ref: ref,
     className: clsx(classes.root, className),
     "aria-sort": ariaSort,
     scope: scope,
-    ownerState: ownerState
-  }, other));
+    ownerState: ownerState,
+    ...other
+  });
 });
 process.env.NODE_ENV !== "production" ? TableCell.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/TableContainer/TableContainer.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"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -34,20 +31,22 @@ const TableContainer = /*#__PURE__*/React.forwardRef(function TableContainer(inP
     name: 'MuiTableContainer'
   });
   const {
-      className,
-      component = 'div'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    className,
+    component = 'div',
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     component
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(TableContainerRoot, _extends({
+  return /*#__PURE__*/_jsx(TableContainerRoot, {
     ref: ref,
     as: component,
     className: clsx(classes.root, className),
-    ownerState: ownerState
-  }, other));
+    ownerState: ownerState,
+    ...other
+  });
 });
 process.env.NODE_ENV !== "production" ? TableContainer.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐