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

package/Modal/Modal.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 = ["BackdropComponent", "BackdropProps", "classes", "className", "closeAfterTransition", "children", "container", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "onBackdropClick", "onClose", "onTransitionEnter", "onTransitionExited", "open", "slotProps", "slots", "theme"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -86,31 +83,37 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     props: inProps
   });
   const {
-      BackdropComponent = ModalBackdrop,
-      BackdropProps,
-      className,
-      closeAfterTransition = false,
-      children,
-      container,
-      component,
-      components = {},
-      componentsProps = {},
-      disableAutoFocus = false,
-      disableEnforceFocus = false,
-      disableEscapeKeyDown = false,
-      disablePortal = false,
-      disableRestoreFocus = false,
-      disableScrollLock = false,
-      hideBackdrop = false,
-      keepMounted = false,
-      onBackdropClick,
-      open,
-      slotProps,
-      slots
-      // eslint-disable-next-line react/prop-types
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const propsWithDefaults = _extends({}, props, {
+    BackdropComponent = ModalBackdrop,
+    BackdropProps,
+    classes: classesProp,
+    className,
+    closeAfterTransition = false,
+    children,
+    container,
+    component,
+    components = {},
+    componentsProps = {},
+    disableAutoFocus = false,
+    disableEnforceFocus = false,
+    disableEscapeKeyDown = false,
+    disablePortal = false,
+    disableRestoreFocus = false,
+    disableScrollLock = false,
+    hideBackdrop = false,
+    keepMounted = false,
+    onBackdropClick,
+    onClose,
+    onTransitionEnter,
+    onTransitionExited,
+    open,
+    slotProps,
+    slots,
+    // eslint-disable-next-line react/prop-types
+    theme,
+    ...other
+  } = props;
+  const propsWithDefaults = {
+    ...props,
     closeAfterTransition,
     disableAutoFocus,
     disableEnforceFocus,
@@ -120,7 +123,7 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     disableScrollLock,
     hideBackdrop,
     keepMounted
-  });
+  };
   const {
     getRootProps,
     getBackdropProps,
@@ -129,12 +132,14 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     isTopModal,
     exited,
     hasTransition
-  } = useModal(_extends({}, propsWithDefaults, {
+  } = useModal({
+    ...propsWithDefaults,
     rootRef: ref
-  }));
-  const ownerState = _extends({}, propsWithDefaults, {
-    exited
   });
+  const ownerState = {
+    ...propsWithDefaults,
+    exited
+  };
   const classes = useUtilityClasses(ownerState);
   const childProps = {};
   if (children.props.tabIndex === undefined) {
@@ -171,7 +176,8 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     externalSlotProps: backdropSlotProps,
     additionalProps: BackdropProps,
     getSlotProps: otherHandlers => {
-      return getBackdropProps(_extends({}, otherHandlers, {
+      return getBackdropProps({
+        ...otherHandlers,
         onClick: e => {
           if (onBackdropClick) {
             onBackdropClick(e);
@@ -180,7 +186,7 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
             otherHandlers.onClick(e);
           }
         }
-      }));
+      });
     },
     className: clsx(backdropSlotProps?.className, BackdropProps?.className, classes?.backdrop),
     ownerState
@@ -192,8 +198,11 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     ref: portalRef,
     container: container,
     disablePortal: disablePortal,
-    children: /*#__PURE__*/_jsxs(RootSlot, _extends({}, rootProps, {
-      children: [!hideBackdrop && BackdropComponent ? /*#__PURE__*/_jsx(BackdropSlot, _extends({}, backdropProps)) : null, /*#__PURE__*/_jsx(FocusTrap, {
+    children: /*#__PURE__*/_jsxs(RootSlot, {
+      ...rootProps,
+      children: [!hideBackdrop && BackdropComponent ? /*#__PURE__*/_jsx(BackdropSlot, {
+        ...backdropProps
+      }) : null, /*#__PURE__*/_jsx(FocusTrap, {
         disableEnforceFocus: disableEnforceFocus,
         disableAutoFocus: disableAutoFocus,
         disableRestoreFocus: disableRestoreFocus,
@@ -201,7 +210,7 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
         open: open,
         children: /*#__PURE__*/React.cloneElement(children, childProps)
       })]
-    }))
+    })
   });
 });
 process.env.NODE_ENV !== "production" ? Modal.propTypes /* remove-proptypes */ = {

package/NativeSelect/NativeSelect.d.ts

@@ -64,6 +64,6 @@ export interface NativeSelectProps
  * - [NativeSelect API](https://mui.com/material-ui/api/native-select/)
  * - inherits [Input API](https://mui.com/material-ui/api/input/)
  */
-declare const NativeSelect: ((props: NativeSelectProps) => JSX.Element) & { muiName: string };
+declare const NativeSelect: ((props: NativeSelectProps) => React.JSX.Element) & { muiName: string };
 
 export default NativeSelect;

package/NativeSelect/NativeSelect.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 = ["className", "children", "classes", "IconComponent", "input", "inputProps", "variant"],
-  _excluded2 = ["root"];
 import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
@@ -35,41 +31,49 @@ const NativeSelect = /*#__PURE__*/React.forwardRef(function NativeSelect(inProps
     props: inProps
   });
   const {
-      className,
-      children,
-      classes: classesProp = {},
-      IconComponent = ArrowDropDownIcon,
-      input = defaultInput,
-      inputProps
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    className,
+    children,
+    classes: classesProp = {},
+    IconComponent = ArrowDropDownIcon,
+    input = defaultInput,
+    inputProps,
+    variant,
+    ...other
+  } = props;
   const muiFormControl = useFormControl();
   const fcs = formControlState({
     props,
     muiFormControl,
     states: ['variant']
   });
-  const ownerState = _extends({}, props, {
+  const ownerState = {
+    ...props,
     classes: classesProp
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  const otherClasses = _objectWithoutPropertiesLoose(classesProp, _excluded2);
+  const {
+    root,
+    ...otherClasses
+  } = classesProp;
   return /*#__PURE__*/_jsx(React.Fragment, {
-    children: /*#__PURE__*/React.cloneElement(input, _extends({
+    children: /*#__PURE__*/React.cloneElement(input, {
       // Most of the logic is implemented in `NativeSelectInput`.
       // The `Select` component is a simple API wrapper to expose something better to play with.
       inputComponent: NativeSelectInput,
-      inputProps: _extends({
+      inputProps: {
         children,
         classes: otherClasses,
         IconComponent,
         variant: fcs.variant,
-        type: undefined
-      }, inputProps, input ? input.props.inputProps : {}),
-      ref
-    }, other, {
+        type: undefined,
+        // We render a select. We can ignore the type provided by the `Input`.
+        ...inputProps,
+        ...(input ? input.props.inputProps : {})
+      },
+      ref,
+      ...other,
       className: clsx(classes.root, input.props.className, className)
-    }))
+    })
   });
 });
 process.env.NODE_ENV !== "production" ? NativeSelect.propTypes /* remove-proptypes */ = {

package/NativeSelect/NativeSelectInput.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", "disabled", "error", "IconComponent", "inputRef", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -160,27 +157,29 @@ const NativeSelectIcon = styled(StyledSelectIcon, {
  */
 const NativeSelectInput = /*#__PURE__*/React.forwardRef(function NativeSelectInput(props, ref) {
   const {
-      className,
-      disabled,
-      error,
-      IconComponent,
-      inputRef,
-      variant = 'standard'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    className,
+    disabled,
+    error,
+    IconComponent,
+    inputRef,
+    variant = 'standard',
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     disabled,
     variant,
     error
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [/*#__PURE__*/_jsx(NativeSelectSelect, _extends({
+    children: [/*#__PURE__*/_jsx(NativeSelectSelect, {
       ownerState: ownerState,
       className: clsx(classes.select, className),
       disabled: disabled,
-      ref: inputRef || ref
-    }, other)), props.multiple ? null : /*#__PURE__*/_jsx(NativeSelectIcon, {
+      ref: inputRef || ref,
+      ...other
+    }), props.multiple ? null : /*#__PURE__*/_jsx(NativeSelectIcon, {
       as: IconComponent,
       ownerState: ownerState,
       className: classes.icon

package/OutlinedInput/NotchedOutline.js

@@ -1,9 +1,6 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 var _span;
-const _excluded = ["children", "classes", "className", "label", "notched"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import rootShouldForwardProp from '../styles/rootShouldForwardProp';
@@ -97,21 +94,24 @@ const NotchedOutlineLegend = styled('legend', {
  */
 export default function NotchedOutline(props) {
   const {
-      className,
-      label,
-      notched
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    children,
+    classes,
+    className,
+    label,
+    notched,
+    ...other
+  } = props;
   const withLabel = label != null && label !== '';
-  const ownerState = _extends({}, props, {
+  const ownerState = {
+    ...props,
     notched,
     withLabel
-  });
-  return /*#__PURE__*/_jsx(NotchedOutlineRoot, _extends({
+  };
+  return /*#__PURE__*/_jsx(NotchedOutlineRoot, {
     "aria-hidden": true,
     className: className,
-    ownerState: ownerState
-  }, other, {
+    ownerState: ownerState,
+    ...other,
     children: /*#__PURE__*/_jsx(NotchedOutlineLegend, {
       ownerState: ownerState,
       children: withLabel ? /*#__PURE__*/_jsx("span", {
@@ -122,7 +122,7 @@ export default function NotchedOutline(props) {
         children: "\u200B"
       }))
     })
-  }));
+  });
 }
 process.env.NODE_ENV !== "production" ? NotchedOutline.propTypes /* remove-proptypes */ = {
   /**

package/OutlinedInput/OutlinedInput.d.ts

@@ -35,6 +35,8 @@ export interface OutlinedInputProps extends StandardProps<InputBaseProps> {
  * - [OutlinedInput API](https://mui.com/material-ui/api/outlined-input/)
  * - inherits [InputBase API](https://mui.com/material-ui/api/input-base/)
  */
-declare const OutlinedInput: ((props: OutlinedInputProps) => JSX.Element) & { muiName: string };
+declare const OutlinedInput: ((props: OutlinedInputProps) => React.JSX.Element) & {
+  muiName: string;
+};
 
 export default OutlinedInput;

package/OutlinedInput/OutlinedInput.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 = ["components", "fullWidth", "inputComponent", "label", "multiline", "notched", "slots", "type"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import refType from '@mui/utils/refType';
@@ -26,7 +23,11 @@ const useUtilityClasses = ownerState => {
     input: ['input']
   };
   const composedClasses = composeClasses(slots, getOutlinedInputUtilityClass, classes);
-  return _extends({}, classes, composedClasses);
+  return {
+    ...classes,
+    // forward classes to the InputBase
+    ...composedClasses
+  };
 };
 const OutlinedInputRoot = styled(InputBaseRoot, {
   shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes',
@@ -46,7 +47,7 @@ const OutlinedInputRoot = styled(InputBaseRoot, {
     [`&.${outlinedInputClasses.focused} .${outlinedInputClasses.notchedOutline}`]: {
       borderWidth: 2
     },
-    variants: [...Object.entries(theme.palette).filter(([, value]) => value.main).map(([color]) => ({
+    variants: [...Object.entries(theme.palette).filter(([, value]) => value && value.main).map(([color]) => ({
       props: {
         color
       },
@@ -122,27 +123,28 @@ const OutlinedInputInput = styled(InputBaseInput, {
   overridesResolver: inputBaseInputOverridesResolver
 })(({
   theme
-}) => _extends({
-  padding: '16.5px 14px'
-}, !theme.vars && {
-  '&:-webkit-autofill': {
-    WebkitBoxShadow: theme.palette.mode === 'light' ? null : '0 0 0 100px #266798 inset',
-    WebkitTextFillColor: theme.palette.mode === 'light' ? null : '#fff',
-    caretColor: theme.palette.mode === 'light' ? null : '#fff',
-    borderRadius: 'inherit'
-  }
-}, theme.vars && {
-  '&:-webkit-autofill': {
-    borderRadius: 'inherit'
-  },
-  [theme.getColorSchemeSelector('dark')]: {
+}) => ({
+  padding: '16.5px 14px',
+  ...(!theme.vars && {
+    '&:-webkit-autofill': {
+      WebkitBoxShadow: theme.palette.mode === 'light' ? null : '0 0 0 100px #266798 inset',
+      WebkitTextFillColor: theme.palette.mode === 'light' ? null : '#fff',
+      caretColor: theme.palette.mode === 'light' ? null : '#fff',
+      borderRadius: 'inherit'
+    }
+  }),
+  ...(theme.vars && {
     '&:-webkit-autofill': {
-      WebkitBoxShadow: '0 0 0 100px #266798 inset',
-      WebkitTextFillColor: '#fff',
-      caretColor: '#fff'
+      borderRadius: 'inherit'
+    },
+    [theme.getColorSchemeSelector('dark')]: {
+      '&:-webkit-autofill': {
+        WebkitBoxShadow: '0 0 0 100px #266798 inset',
+        WebkitTextFillColor: '#fff',
+        caretColor: '#fff'
+      }
     }
-  }
-}, {
+  }),
   variants: [{
     props: {
       size: 'small'
@@ -180,16 +182,16 @@ const OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inPro
     name: 'MuiOutlinedInput'
   });
   const {
-      components = {},
-      fullWidth = false,
-      inputComponent = 'input',
-      label,
-      multiline = false,
-      notched,
-      slots = {},
-      type = 'text'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    components = {},
+    fullWidth = false,
+    inputComponent = 'input',
+    label,
+    multiline = false,
+    notched,
+    slots = {},
+    type = 'text',
+    ...other
+  } = props;
   const classes = useUtilityClasses(props);
   const muiFormControl = useFormControl();
   const fcs = formControlState({
@@ -197,7 +199,8 @@ const OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inPro
     muiFormControl,
     states: ['color', 'disabled', 'error', 'focused', 'hiddenLabel', 'size', 'required']
   });
-  const ownerState = _extends({}, props, {
+  const ownerState = {
+    ...props,
     color: fcs.color || 'primary',
     disabled: fcs.disabled,
     error: fcs.error,
@@ -208,10 +211,10 @@ const OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inPro
     multiline,
     size: fcs.size,
     type
-  });
+  };
   const RootSlot = slots.root ?? components.Root ?? OutlinedInputRoot;
   const InputSlot = slots.input ?? components.Input ?? OutlinedInputInput;
-  return /*#__PURE__*/_jsx(InputBase, _extends({
+  return /*#__PURE__*/_jsx(InputBase, {
     slots: {
       root: RootSlot,
       input: InputSlot
@@ -228,12 +231,13 @@ const OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inPro
     inputComponent: inputComponent,
     multiline: multiline,
     ref: ref,
-    type: type
-  }, other, {
-    classes: _extends({}, classes, {
+    type: type,
+    ...other,
+    classes: {
+      ...classes,
       notchedOutline: null
-    })
-  }));
+    }
+  });
 });
 process.env.NODE_ENV !== "production" ? OutlinedInput.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/OutlinedInput/outlinedInputClasses.js

@@ -1,9 +1,11 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import { inputBaseClasses } from '../InputBase';
 export function getOutlinedInputUtilityClass(slot) {
   return generateUtilityClass('MuiOutlinedInput', slot);
 }
-const outlinedInputClasses = _extends({}, inputBaseClasses, generateUtilityClasses('MuiOutlinedInput', ['root', 'notchedOutline', 'input']));
+const outlinedInputClasses = {
+  ...inputBaseClasses,
+  ...generateUtilityClasses('MuiOutlinedInput', ['root', 'notchedOutline', 'input'])
+};
 export default outlinedInputClasses;

package/OverridableComponent.d.ts

@@ -20,8 +20,8 @@ export interface OverridableComponent<TypeMap extends OverridableTypeMap> {
        */
       component: RootComponent;
     } & OverrideProps<TypeMap, RootComponent>,
-  ): JSX.Element | null;
-  (props: DefaultComponentProps<TypeMap>): JSX.Element | null;
+  ): React.JSX.Element | null;
+  (props: DefaultComponentProps<TypeMap>): React.JSX.Element | null;
 }
 
 /**

package/Pagination/Pagination.d.ts

@@ -86,4 +86,4 @@ export interface PaginationProps
  *
  * - [Pagination API](https://mui.com/material-ui/api/pagination/)
  */
-export default function Pagination(props: PaginationProps): JSX.Element;
+export default function Pagination(props: PaginationProps): React.JSX.Element;

package/Pagination/Pagination.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 = ["boundaryCount", "className", "color", "count", "defaultPage", "disabled", "getItemAriaLabel", "hideNextButton", "hidePrevButton", "onChange", "page", "renderItem", "shape", "showFirstButton", "showLastButton", "siblingCount", "size", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -59,30 +56,36 @@ const Pagination = /*#__PURE__*/React.forwardRef(function Pagination(inProps, re
     name: 'MuiPagination'
   });
   const {
-      boundaryCount = 1,
-      className,
-      color = 'standard',
-      count = 1,
-      defaultPage = 1,
-      disabled = false,
-      getItemAriaLabel = defaultGetAriaLabel,
-      hideNextButton = false,
-      hidePrevButton = false,
-      renderItem = item => /*#__PURE__*/_jsx(PaginationItem, _extends({}, item)),
-      shape = 'circular',
-      showFirstButton = false,
-      showLastButton = false,
-      siblingCount = 1,
-      size = 'medium',
-      variant = 'text'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    boundaryCount = 1,
+    className,
+    color = 'standard',
+    count = 1,
+    defaultPage = 1,
+    disabled = false,
+    getItemAriaLabel = defaultGetAriaLabel,
+    hideNextButton = false,
+    hidePrevButton = false,
+    onChange,
+    page,
+    renderItem = item => /*#__PURE__*/_jsx(PaginationItem, {
+      ...item
+    }),
+    shape = 'circular',
+    showFirstButton = false,
+    showLastButton = false,
+    siblingCount = 1,
+    size = 'medium',
+    variant = 'text',
+    ...other
+  } = props;
   const {
     items
-  } = usePagination(_extends({}, props, {
+  } = usePagination({
+    ...props,
     componentName: 'Pagination'
-  }));
-  const ownerState = _extends({}, props, {
+  });
+  const ownerState = {
+    ...props,
     boundaryCount,
     color,
     count,
@@ -98,28 +101,29 @@ const Pagination = /*#__PURE__*/React.forwardRef(function Pagination(inProps, re
     siblingCount,
     size,
     variant
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(PaginationRoot, _extends({
+  return /*#__PURE__*/_jsx(PaginationRoot, {
     "aria-label": "pagination navigation",
     className: clsx(classes.root, className),
     ownerState: ownerState,
-    ref: ref
-  }, other, {
+    ref: ref,
+    ...other,
     children: /*#__PURE__*/_jsx(PaginationUl, {
       className: classes.ul,
       ownerState: ownerState,
       children: items.map((item, index) => /*#__PURE__*/_jsx("li", {
-        children: renderItem(_extends({}, item, {
+        children: renderItem({
+          ...item,
           color,
           'aria-label': getItemAriaLabel(item.type, item.page, item.selected),
           shape,
           size,
           variant
-        }))
+        })
       }, index))
     })
-  }));
+  });
 });
 
 // @default tags synced with default values from usePagination
@@ -193,7 +197,7 @@ process.env.NODE_ENV !== "production" ? Pagination.propTypes /* remove-proptypes
    */
   onChange: PropTypes.func,
   /**
-   * The current page.
+   * The current page. Unlike `TablePagination`, which starts numbering from `0`, this pagination starts from `1`.
    */
   page: integerPropType,
   /**