@mui/material 6.0.0-alpha.1 → 6.0.0-alpha.10

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 */ = {
@@ -254,8 +263,7 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes /* remove-proptypes */ =
   /**
    * The components used for each slot inside.
    *
-   * This prop is an alias for the `slots` prop.
-   * It's recommended to use the `slots` prop instead.
+   * @deprecated Use the `slots` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    *
    * @default {}
    */
@@ -267,8 +275,7 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes /* remove-proptypes */ =
    * The extra props for the slot components.
    * You can override the existing props or add new ones.
    *
-   * This prop is an alias for the `slotProps` prop.
-   * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
+   * @deprecated Use the `slotProps` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    *
    * @default {}
    */

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 _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["className", "disabled", "error", "IconComponent", "inputRef", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -10,7 +7,8 @@ import refType from '@mui/utils/refType';
 import composeClasses from '@mui/utils/composeClasses';
 import capitalize from '../utils/capitalize';
 import nativeSelectClasses, { getNativeSelectUtilityClasses } from './nativeSelectClasses';
-import styled, { rootShouldForwardProp } from '../styles/styled';
+import { styled } from '../zero-styled';
+import rootShouldForwardProp from '../styles/rootShouldForwardProp';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -27,30 +25,22 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getNativeSelectUtilityClasses, classes);
 };
-export const nativeSelectSelectStyles = ({
-  ownerState,
+export const StyledSelectSelect = styled('select')(({
   theme
-}) => _extends({
+}) => ({
+  // Reset
   MozAppearance: 'none',
   // Reset
   WebkitAppearance: 'none',
-  // Reset
   // When interacting quickly, the text can end up selected.
   // Native select can't be selected either.
   userSelect: 'none',
-  borderRadius: 0,
   // Reset
+  borderRadius: 0,
   cursor: 'pointer',
-  '&:focus': _extends({}, theme.vars ? {
-    backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.05)`
-  } : {
-    backgroundColor: theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.05)' : 'rgba(255, 255, 255, 0.05)'
-  }, {
-    borderRadius: 0 // Reset Chrome style
-  }),
-  // Remove IE11 arrow
-  '&::-ms-expand': {
-    display: 'none'
+  '&:focus': {
+    // Reset Chrome style
+    borderRadius: 0
   },
   [`&.${nativeSelectClasses.disabled}`]: {
     cursor: 'default'
@@ -61,25 +51,42 @@ export const nativeSelectSelectStyles = ({
   '&:not([multiple]) option, &:not([multiple]) optgroup': {
     backgroundColor: (theme.vars || theme).palette.background.paper
   },
-  // Bump specificity to allow extending custom inputs
-  '&&&': {
-    paddingRight: 24,
-    minWidth: 16 // So it doesn't collapse.
-  }
-}, ownerState.variant === 'filled' && {
-  '&&&': {
-    paddingRight: 32
-  }
-}, ownerState.variant === 'outlined' && {
-  borderRadius: (theme.vars || theme).shape.borderRadius,
-  '&:focus': {
-    borderRadius: (theme.vars || theme).shape.borderRadius // Reset the reset for Chrome style
-  },
-  '&&&': {
-    paddingRight: 32
-  }
-});
-const NativeSelectSelect = styled('select', {
+  variants: [{
+    props: ({
+      ownerState
+    }) => ownerState.variant !== 'filled' && ownerState.variant !== 'outlined',
+    style: {
+      // Bump specificity to allow extending custom inputs
+      '&&&': {
+        paddingRight: 24,
+        minWidth: 16 // So it doesn't collapse.
+      }
+    }
+  }, {
+    props: {
+      variant: 'filled'
+    },
+    style: {
+      '&&&': {
+        paddingRight: 32
+      }
+    }
+  }, {
+    props: {
+      variant: 'outlined'
+    },
+    style: {
+      borderRadius: (theme.vars || theme).shape.borderRadius,
+      '&:focus': {
+        borderRadius: (theme.vars || theme).shape.borderRadius // Reset the reset for Chrome style
+      },
+      '&&&': {
+        paddingRight: 32
+      }
+    }
+  }]
+}));
+const NativeSelectSelect = styled(StyledSelectSelect, {
   name: 'MuiNativeSelect',
   slot: 'Select',
   shouldForwardProp: rootShouldForwardProp,
@@ -91,31 +98,46 @@ const NativeSelectSelect = styled('select', {
       [`&.${nativeSelectClasses.multiple}`]: styles.multiple
     }];
   }
-})(nativeSelectSelectStyles);
-export const nativeSelectIconStyles = ({
-  ownerState,
+})({});
+export const StyledSelectIcon = styled('svg')(({
   theme
-}) => _extends({
+}) => ({
   // We use a position absolute over a flexbox in order to forward the pointer events
   // to the input and to support wrapping tags..
   position: 'absolute',
   right: 0,
-  top: 'calc(50% - .5em)',
   // Center vertically, height is 1em
-  pointerEvents: 'none',
+  top: 'calc(50% - .5em)',
   // Don't block pointer events on the select under the icon.
+  pointerEvents: 'none',
   color: (theme.vars || theme).palette.action.active,
   [`&.${nativeSelectClasses.disabled}`]: {
     color: (theme.vars || theme).palette.action.disabled
-  }
-}, ownerState.open && {
-  transform: 'rotate(180deg)'
-}, ownerState.variant === 'filled' && {
-  right: 7
-}, ownerState.variant === 'outlined' && {
-  right: 7
-});
-const NativeSelectIcon = styled('svg', {
+  },
+  variants: [{
+    props: ({
+      ownerState
+    }) => ownerState.open,
+    style: {
+      transform: 'rotate(180deg)'
+    }
+  }, {
+    props: {
+      variant: 'filled'
+    },
+    style: {
+      right: 7
+    }
+  }, {
+    props: {
+      variant: 'outlined'
+    },
+    style: {
+      right: 7
+    }
+  }]
+}));
+const NativeSelectIcon = styled(StyledSelectIcon, {
   name: 'MuiNativeSelect',
   slot: 'Icon',
   overridesResolver: (props, styles) => {
@@ -124,34 +146,36 @@ const NativeSelectIcon = styled('svg', {
     } = props;
     return [styles.icon, ownerState.variant && styles[`icon${capitalize(ownerState.variant)}`], ownerState.open && styles.iconOpen];
   }
-})(nativeSelectIconStyles);
+})({});
 
 /**
  * @ignore - internal component.
  */
 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,12 +1,10 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
 var _span;
-const _excluded = ["children", "classes", "className", "label", "notched"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import styled, { rootShouldForwardProp } from '../styles/styled';
+import rootShouldForwardProp from '../styles/rootShouldForwardProp';
+import { styled } from '../zero-styled';
 import { jsx as _jsx } from "react/jsx-runtime";
 const NotchedOutlineRoot = styled('fieldset', {
   shouldForwardProp: rootShouldForwardProp
@@ -29,72 +27,91 @@ const NotchedOutlineRoot = styled('fieldset', {
 const NotchedOutlineLegend = styled('legend', {
   shouldForwardProp: rootShouldForwardProp
 })(({
-  ownerState,
   theme
-}) => _extends({
+}) => ({
   float: 'unset',
   // Fix conflict with bootstrap
   width: 'auto',
   // Fix conflict with bootstrap
-  overflow: 'hidden'
-}, !ownerState.withLabel && {
-  padding: 0,
-  lineHeight: '11px',
-  // sync with `height` in `legend` styles
-  transition: theme.transitions.create('width', {
-    duration: 150,
-    easing: theme.transitions.easing.easeOut
-  })
-}, ownerState.withLabel && _extends({
-  display: 'block',
-  // Fix conflict with normalize.css and sanitize.css
-  padding: 0,
-  height: 11,
-  // sync with `lineHeight` in `legend` styles
-  fontSize: '0.75em',
-  visibility: 'hidden',
-  maxWidth: 0.01,
-  transition: theme.transitions.create('max-width', {
-    duration: 50,
-    easing: theme.transitions.easing.easeOut
-  }),
-  whiteSpace: 'nowrap',
-  '& > span': {
-    paddingLeft: 5,
-    paddingRight: 5,
-    display: 'inline-block',
-    opacity: 0,
-    visibility: 'visible'
-  }
-}, ownerState.notched && {
-  maxWidth: '100%',
-  transition: theme.transitions.create('max-width', {
-    duration: 100,
-    easing: theme.transitions.easing.easeOut,
-    delay: 50
-  })
-})));
+  overflow: 'hidden',
+  // Fix Horizontal scroll when label too long
+  variants: [{
+    props: ({
+      ownerState
+    }) => !ownerState.withLabel,
+    style: {
+      padding: 0,
+      lineHeight: '11px',
+      // sync with `height` in `legend` styles
+      transition: theme.transitions.create('width', {
+        duration: 150,
+        easing: theme.transitions.easing.easeOut
+      })
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.withLabel,
+    style: {
+      display: 'block',
+      // Fix conflict with normalize.css and sanitize.css
+      padding: 0,
+      height: 11,
+      // sync with `lineHeight` in `legend` styles
+      fontSize: '0.75em',
+      visibility: 'hidden',
+      maxWidth: 0.01,
+      transition: theme.transitions.create('max-width', {
+        duration: 50,
+        easing: theme.transitions.easing.easeOut
+      }),
+      whiteSpace: 'nowrap',
+      '& > span': {
+        paddingLeft: 5,
+        paddingRight: 5,
+        display: 'inline-block',
+        opacity: 0,
+        visibility: 'visible'
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.withLabel && ownerState.notched,
+    style: {
+      maxWidth: '100%',
+      transition: theme.transitions.create('max-width', {
+        duration: 100,
+        easing: theme.transitions.easing.easeOut,
+        delay: 50
+      })
+    }
+  }]
+}));
 
 /**
  * @ignore - internal component.
  */
 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", {
@@ -105,9 +122,9 @@ export default function NotchedOutline(props) {
         children: "\u200B"
       }))
     })
-  }));
+  });
 }
-process.env.NODE_ENV !== "production" ? NotchedOutline.propTypes = {
+process.env.NODE_ENV !== "production" ? NotchedOutline.propTypes /* remove-proptypes */ = {
   /**
    * The content of the component.
    */

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;