@mui/material 6.0.0-alpha.4 → 6.0.0-alpha.6

package/modern/NativeSelect/NativeSelectInput.js

@@ -1,7 +1,7 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 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';
@@ -10,7 +10,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,27 +28,23 @@ 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
-  }),
+  '&:focus': {
+    // Reset Chrome style
+    borderRadius: 0
+  },
   // Remove IE11 arrow
   '&::-ms-expand': {
     display: 'none'
@@ -61,25 +58,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 +105,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,7 +153,7 @@ const NativeSelectIcon = styled('svg', {
     } = props;
     return [styles.icon, ownerState.variant && styles[`icon${capitalize(ownerState.variant)}`], ownerState.open && styles.iconOpen];
   }
-})(nativeSelectIconStyles);
+})({});
 
 /**
  * @ignore - internal component.

package/modern/OutlinedInput/NotchedOutline.js

@@ -1,12 +1,13 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 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 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,51 +30,67 @@ 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.
@@ -107,7 +124,7 @@ export default function NotchedOutline(props) {
     })
   }));
 }
-process.env.NODE_ENV !== "production" ? NotchedOutline.propTypes = {
+process.env.NODE_ENV !== "production" ? NotchedOutline.propTypes /* remove-proptypes */ = {
   /**
    * The content of the component.
    */

package/modern/OutlinedInput/OutlinedInput.js

@@ -10,11 +10,12 @@ import composeClasses from '@mui/utils/composeClasses';
 import NotchedOutline from './NotchedOutline';
 import useFormControl from '../FormControl/useFormControl';
 import formControlState from '../FormControl/formControlState';
-import styled, { rootShouldForwardProp } from '../styles/styled';
+import rootShouldForwardProp from '../styles/rootShouldForwardProp';
+import { styled, createUseThemeProps } from '../zero-styled';
 import outlinedInputClasses, { getOutlinedInputUtilityClass } from './outlinedInputClasses';
-import InputBase, { rootOverridesResolver as inputBaseRootOverridesResolver, inputOverridesResolver as inputBaseInputOverridesResolver, InputBaseRoot, InputBaseComponent as InputBaseInput } from '../InputBase/InputBase';
-import useThemeProps from '../styles/useThemeProps';
+import InputBase, { rootOverridesResolver as inputBaseRootOverridesResolver, inputOverridesResolver as inputBaseInputOverridesResolver, InputBaseRoot, InputBaseInput } from '../InputBase/InputBase';
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiOutlinedInput');
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -33,41 +34,75 @@ const OutlinedInputRoot = styled(InputBaseRoot, {
   slot: 'Root',
   overridesResolver: inputBaseRootOverridesResolver
 })(({
-  theme,
-  ownerState
+  theme
 }) => {
   const borderColor = theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)';
-  return _extends({
+  return {
     position: 'relative',
     borderRadius: (theme.vars || theme).shape.borderRadius,
     [`&:hover .${outlinedInputClasses.notchedOutline}`]: {
       borderColor: (theme.vars || theme).palette.text.primary
     },
-    // Reset on touch devices, it doesn't add specificity
-    '@media (hover: none)': {
-      [`&:hover .${outlinedInputClasses.notchedOutline}`]: {
-        borderColor: theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : borderColor
-      }
-    },
     [`&.${outlinedInputClasses.focused} .${outlinedInputClasses.notchedOutline}`]: {
-      borderColor: (theme.vars || theme).palette[ownerState.color].main,
       borderWidth: 2
     },
-    [`&.${outlinedInputClasses.error} .${outlinedInputClasses.notchedOutline}`]: {
-      borderColor: (theme.vars || theme).palette.error.main
-    },
-    [`&.${outlinedInputClasses.disabled} .${outlinedInputClasses.notchedOutline}`]: {
-      borderColor: (theme.vars || theme).palette.action.disabled
-    }
-  }, ownerState.startAdornment && {
-    paddingLeft: 14
-  }, ownerState.endAdornment && {
-    paddingRight: 14
-  }, ownerState.multiline && _extends({
-    padding: '16.5px 14px'
-  }, ownerState.size === 'small' && {
-    padding: '8.5px 14px'
-  }));
+    variants: [...Object.entries(theme.palette).filter(([, value]) => value.main).map(([color]) => ({
+      props: {
+        color
+      },
+      style: {
+        [`&.${outlinedInputClasses.focused} .${outlinedInputClasses.notchedOutline}`]: {
+          borderColor: (theme.vars || theme).palette[color].main
+        }
+      }
+    })), {
+      props: {},
+      // to overide the above style
+      style: {
+        // Reset on touch devices, it doesn't add specificity
+        '@media (hover: none)': {
+          [`&:hover .${outlinedInputClasses.notchedOutline}`]: {
+            borderColor: theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : borderColor
+          }
+        },
+        [`&.${outlinedInputClasses.error} .${outlinedInputClasses.notchedOutline}`]: {
+          borderColor: (theme.vars || theme).palette.error.main
+        },
+        [`&.${outlinedInputClasses.disabled} .${outlinedInputClasses.notchedOutline}`]: {
+          borderColor: (theme.vars || theme).palette.action.disabled
+        }
+      }
+    }, {
+      props: ({
+        ownerState
+      }) => ownerState.startAdornment,
+      style: {
+        paddingLeft: 14
+      }
+    }, {
+      props: ({
+        ownerState
+      }) => ownerState.endAdornment,
+      style: {
+        paddingRight: 14
+      }
+    }, {
+      props: ({
+        ownerState
+      }) => ownerState.multiline,
+      style: {
+        padding: '16.5px 14px'
+      }
+    }, {
+      props: ({
+        ownerState,
+        size
+      }) => ownerState.multiline && size === 'small',
+      style: {
+        padding: '8.5px 14px'
+      }
+    }]
+  };
 });
 const NotchedOutlineRoot = styled(NotchedOutline, {
   name: 'MuiOutlinedInput',
@@ -86,8 +121,7 @@ const OutlinedInputInput = styled(InputBaseInput, {
   slot: 'Input',
   overridesResolver: inputBaseInputOverridesResolver
 })(({
-  theme,
-  ownerState
+  theme
 }) => _extends({
   padding: '16.5px 14px'
 }, !theme.vars && {
@@ -108,14 +142,36 @@ const OutlinedInputInput = styled(InputBaseInput, {
       caretColor: '#fff'
     }
   }
-}, ownerState.size === 'small' && {
-  padding: '8.5px 14px'
-}, ownerState.multiline && {
-  padding: 0
-}, ownerState.startAdornment && {
-  paddingLeft: 0
-}, ownerState.endAdornment && {
-  paddingRight: 0
+}, {
+  variants: [{
+    props: {
+      size: 'small'
+    },
+    style: {
+      padding: '8.5px 14px'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.multiline,
+    style: {
+      padding: 0
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.startAdornment,
+    style: {
+      paddingLeft: 0
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.endAdornment,
+    style: {
+      paddingRight: 0
+    }
+  }]
 }));
 const OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inProps, ref) {
   var _React$Fragment;
@@ -345,5 +401,7 @@ process.env.NODE_ENV !== "production" ? OutlinedInput.propTypes /* remove-propty
    */
   value: PropTypes.any
 } : void 0;
-OutlinedInput.muiName = 'Input';
+if (OutlinedInput) {
+  OutlinedInput.muiName = 'Input';
+}
 export default OutlinedInput;

package/modern/Pagination/Pagination.js

@@ -8,12 +8,12 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import integerPropType from '@mui/utils/integerPropType';
-import useThemeProps from '../styles/useThemeProps';
 import { getPaginationUtilityClass } from './paginationClasses';
 import usePagination from '../usePagination';
 import PaginationItem from '../PaginationItem';
-import styled from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiPagination');
 const useUtilityClasses = ownerState => {
   const {
     classes,

package/modern/PaginationItem/PaginationItem.js

@@ -2,7 +2,7 @@
 
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["className", "color", "component", "components", "disabled", "page", "selected", "shape", "size", "slots", "type", "variant"];
+const _excluded = ["className", "color", "component", "components", "disabled", "page", "selected", "shape", "size", "slots", "slotProps", "type", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -16,6 +16,7 @@ import FirstPageIcon from '../internal/svg-icons/FirstPage';
 import LastPageIcon from '../internal/svg-icons/LastPage';
 import NavigateBeforeIcon from '../internal/svg-icons/NavigateBefore';
 import NavigateNextIcon from '../internal/svg-icons/NavigateNext';
+import useSlot from '../utils/useSlot';
 import { styled, createUseThemeProps } from '../zero-styled';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useThemeProps = createUseThemeProps('MuiPaginationItem');
@@ -281,6 +282,7 @@ const PaginationItem = /*#__PURE__*/React.forwardRef(function PaginationItem(inP
       shape = 'circular',
       size = 'medium',
       slots = {},
+      slotProps = {},
       type = 'page',
       variant = 'text'
     } = props,
@@ -296,18 +298,53 @@ const PaginationItem = /*#__PURE__*/React.forwardRef(function PaginationItem(inP
   });
   const isRtl = useRtl();
   const classes = useUtilityClasses(ownerState);
-  const normalizedIcons = isRtl ? {
-    previous: slots.next || components.next || NavigateNextIcon,
-    next: slots.previous || components.previous || NavigateBeforeIcon,
-    last: slots.first || components.first || FirstPageIcon,
-    first: slots.last || components.last || LastPageIcon
-  } : {
-    previous: slots.previous || components.previous || NavigateBeforeIcon,
-    next: slots.next || components.next || NavigateNextIcon,
-    first: slots.first || components.first || FirstPageIcon,
-    last: slots.last || components.last || LastPageIcon
+  const externalForwardedProps = {
+    slots: {
+      previous: slots.previous ?? components.previous,
+      next: slots.next ?? components.next,
+      first: slots.first ?? components.first,
+      last: slots.last ?? components.last
+    },
+    slotProps
   };
-  const Icon = normalizedIcons[type];
+  const [PreviousSlot, previousSlotProps] = useSlot('previous', {
+    elementType: NavigateBeforeIcon,
+    externalForwardedProps,
+    ownerState
+  });
+  const [NextSlot, nextSlotProps] = useSlot('next', {
+    elementType: NavigateNextIcon,
+    externalForwardedProps,
+    ownerState
+  });
+  const [FirstSlot, firstSlotProps] = useSlot('first', {
+    elementType: FirstPageIcon,
+    externalForwardedProps,
+    ownerState
+  });
+  const [LastSlot, lastSlotProps] = useSlot('last', {
+    elementType: LastPageIcon,
+    externalForwardedProps,
+    ownerState
+  });
+  const rtlAwareType = isRtl ? {
+    previous: 'next',
+    next: 'previous',
+    first: 'last',
+    last: 'first'
+  }[type] : type;
+  const IconSlot = {
+    previous: PreviousSlot,
+    next: NextSlot,
+    first: FirstSlot,
+    last: LastSlot
+  }[rtlAwareType];
+  const iconSlotProps = {
+    previous: previousSlotProps,
+    next: nextSlotProps,
+    first: firstSlotProps,
+    last: lastSlotProps
+  }[rtlAwareType];
   return type === 'start-ellipsis' || type === 'end-ellipsis' ? /*#__PURE__*/_jsx(PaginationItemEllipsis, {
     ref: ref,
     ownerState: ownerState,
@@ -320,11 +357,10 @@ const PaginationItem = /*#__PURE__*/React.forwardRef(function PaginationItem(inP
     disabled: disabled,
     className: clsx(classes.root, className)
   }, other, {
-    children: [type === 'page' && page, Icon ? /*#__PURE__*/_jsx(PaginationItemPageIcon, {
-      as: Icon,
-      ownerState: ownerState,
-      className: classes.icon
-    }) : null]
+    children: [type === 'page' && page, IconSlot ? /*#__PURE__*/_jsx(PaginationItemPageIcon, _extends({}, iconSlotProps, {
+      className: classes.icon,
+      as: IconSlot
+    })) : null]
   }));
 });
 process.env.NODE_ENV !== "production" ? PaginationItem.propTypes /* remove-proptypes */ = {
@@ -363,6 +399,7 @@ process.env.NODE_ENV !== "production" ? PaginationItem.propTypes /* remove-propt
    * It's recommended to use the `slots` prop instead.
    *
    * @default {}
+   * @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.
    */
   components: PropTypes.shape({
     first: PropTypes.elementType,
@@ -394,11 +431,18 @@ process.env.NODE_ENV !== "production" ? PaginationItem.propTypes /* remove-propt
    * @default 'medium'
    */
   size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['small', 'medium', 'large']), PropTypes.string]),
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    first: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    last: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    next: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    previous: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
   /**
    * The components used for each slot inside.
-   *
-   * This prop is an alias for the `components` prop, which will be deprecated in the future.
-   *
    * @default {}
    */
   slots: PropTypes.shape({