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

package/ImageListItem/ImageListItem.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 = ["children", "className", "cols", "component", "rows", "style"];
 import composeClasses from '@mui/utils/composeClasses';
 import integerPropType from '@mui/utils/integerPropType';
 import clsx from 'clsx';
@@ -10,11 +7,11 @@ import PropTypes from 'prop-types';
 import * as React from 'react';
 import { isFragment } from 'react-is';
 import ImageListContext from '../ImageList/ImageListContext';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import isMuiElement from '../utils/isMuiElement';
 import imageListItemClasses, { getImageListItemUtilityClass } from './imageListItemClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiImageListItem');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -37,32 +34,47 @@ const ImageListItemRoot = styled('li', {
       [`& .${imageListItemClasses.img}`]: styles.img
     }, styles.root, styles[ownerState.variant]];
   }
-})(({
-  ownerState
-}) => _extends({
+})({
   display: 'block',
-  position: 'relative'
-}, ownerState.variant === 'standard' && {
-  // For titlebar under list item
-  display: 'flex',
-  flexDirection: 'column'
-}, ownerState.variant === 'woven' && {
-  height: '100%',
-  alignSelf: 'center',
-  '&:nth-of-type(even)': {
-    height: '70%'
-  }
-}, {
-  [`& .${imageListItemClasses.img}`]: _extends({
+  position: 'relative',
+  [`& .${imageListItemClasses.img}`]: {
     objectFit: 'cover',
     width: '100%',
     height: '100%',
     display: 'block'
-  }, ownerState.variant === 'standard' && {
-    height: 'auto',
-    flexGrow: 1
-  })
-}));
+  },
+  variants: [{
+    props: {
+      variant: 'standard'
+    },
+    style: {
+      // For titlebar under list item
+      display: 'flex',
+      flexDirection: 'column'
+    }
+  }, {
+    props: {
+      variant: 'woven'
+    },
+    style: {
+      height: '100%',
+      alignSelf: 'center',
+      '&:nth-of-type(even)': {
+        height: '70%'
+      }
+    }
+  }, {
+    props: {
+      variant: 'standard'
+    },
+    style: {
+      [`& .${imageListItemClasses.img}`]: {
+        height: 'auto',
+        flexGrow: 1
+      }
+    }
+  }]
+});
 const ImageListItem = /*#__PURE__*/React.forwardRef(function ImageListItem(inProps, ref) {
   const props = useThemeProps({
     props: inProps,
@@ -71,14 +83,14 @@ const ImageListItem = /*#__PURE__*/React.forwardRef(function ImageListItem(inPro
 
   // TODO: - Use jsdoc @default?: "cols rows default values are for docs only"
   const {
-      children,
-      className,
-      cols = 1,
-      component = 'li',
-      rows = 1,
-      style
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    children,
+    className,
+    cols = 1,
+    component = 'li',
+    rows = 1,
+    style,
+    ...other
+  } = props;
   const {
     rowHeight = 'auto',
     gap,
@@ -90,28 +102,30 @@ const ImageListItem = /*#__PURE__*/React.forwardRef(function ImageListItem(inPro
   } else if (rowHeight !== 'auto') {
     height = rowHeight * rows + gap * (rows - 1);
   }
-  const ownerState = _extends({}, props, {
+  const ownerState = {
+    ...props,
     cols,
     component,
     gap,
     rowHeight,
     rows,
     variant
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(ImageListItemRoot, _extends({
+  return /*#__PURE__*/_jsx(ImageListItemRoot, {
     as: component,
     className: clsx(classes.root, classes[variant], className),
     ref: ref,
-    style: _extends({
+    style: {
       height,
       gridColumnEnd: variant !== 'masonry' ? `span ${cols}` : undefined,
       gridRowEnd: variant !== 'masonry' ? `span ${rows}` : undefined,
       marginBottom: variant === 'masonry' ? gap : undefined,
-      breakInside: variant === 'masonry' ? 'avoid' : undefined
-    }, style),
-    ownerState: ownerState
-  }, other, {
+      breakInside: variant === 'masonry' ? 'avoid' : undefined,
+      ...style
+    },
+    ownerState: ownerState,
+    ...other,
     children: React.Children.map(children, child => {
       if (! /*#__PURE__*/React.isValidElement(child)) {
         return null;
@@ -128,7 +142,7 @@ const ImageListItem = /*#__PURE__*/React.forwardRef(function ImageListItem(inPro
       }
       return child;
     })
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? ImageListItem.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/ImageListItemBar/ImageListItemBar.d.ts

@@ -42,10 +42,10 @@ export interface ImageListItemBarProps
  *
  * Demos:
  *
- * - [Image List](https://mui.com/material-ui/react-image-list/)
+ * - [Image List](https://next.mui.com/material-ui/react-image-list/)
  *
  * API:
  *
- * - [ImageListItemBar API](https://mui.com/material-ui/api/image-list-item-bar/)
+ * - [ImageListItemBar API](https://next.mui.com/material-ui/api/image-list-item-bar/)
  */
-export default function ImageListItemBar(props: ImageListItemBarProps): JSX.Element;
+export default function ImageListItemBar(props: ImageListItemBarProps): React.JSX.Element;

package/ImageListItemBar/ImageListItemBar.js

@@ -1,17 +1,14 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["actionIcon", "actionPosition", "className", "subtitle", "title", "position"];
 import composeClasses from '@mui/utils/composeClasses';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import * as React from 'react';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import capitalize from '../utils/capitalize';
 import { getImageListItemBarUtilityClass } from './imageListItemBarClasses';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiImageListItemBar');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -38,26 +35,41 @@ const ImageListItemBarRoot = styled('div', {
     return [styles.root, styles[`position${capitalize(ownerState.position)}`]];
   }
 })(({
-  theme,
-  ownerState
+  theme
 }) => {
-  return _extends({
+  return {
     position: 'absolute',
     left: 0,
     right: 0,
     background: 'rgba(0, 0, 0, 0.5)',
     display: 'flex',
     alignItems: 'center',
-    fontFamily: theme.typography.fontFamily
-  }, ownerState.position === 'bottom' && {
-    bottom: 0
-  }, ownerState.position === 'top' && {
-    top: 0
-  }, ownerState.position === 'below' && {
-    position: 'relative',
-    background: 'transparent',
-    alignItems: 'normal'
-  });
+    fontFamily: theme.typography.fontFamily,
+    variants: [{
+      props: {
+        position: 'bottom'
+      },
+      style: {
+        bottom: 0
+      }
+    }, {
+      props: {
+        position: 'top'
+      },
+      style: {
+        top: 0
+      }
+    }, {
+      props: {
+        position: 'below'
+      },
+      style: {
+        position: 'relative',
+        background: 'transparent',
+        alignItems: 'normal'
+      }
+    }]
+  };
 });
 const ImageListItemBarTitleWrap = styled('div', {
   name: 'MuiImageListItemBar',
@@ -69,22 +81,37 @@ const ImageListItemBarTitleWrap = styled('div', {
     return [styles.titleWrap, styles[`titleWrap${capitalize(ownerState.position)}`], ownerState.actionIcon && styles[`titleWrapActionPos${capitalize(ownerState.actionPosition)}`]];
   }
 })(({
-  theme,
-  ownerState
+  theme
 }) => {
-  return _extends({
+  return {
     flexGrow: 1,
     padding: '12px 16px',
     color: (theme.vars || theme).palette.common.white,
-    overflow: 'hidden'
-  }, ownerState.position === 'below' && {
-    padding: '6px 0 12px',
-    color: 'inherit'
-  }, ownerState.actionIcon && ownerState.actionPosition === 'left' && {
-    paddingLeft: 0
-  }, ownerState.actionIcon && ownerState.actionPosition === 'right' && {
-    paddingRight: 0
-  });
+    overflow: 'hidden',
+    variants: [{
+      props: {
+        position: 'below'
+      },
+      style: {
+        padding: '6px 0 12px',
+        color: 'inherit'
+      }
+    }, {
+      props: ({
+        ownerState
+      }) => ownerState.actionIcon && ownerState.actionPosition === 'left',
+      style: {
+        paddingLeft: 0
+      }
+    }, {
+      props: ({
+        ownerState
+      }) => ownerState.actionIcon && ownerState.actionPosition === 'right',
+      style: {
+        paddingRight: 0
+      }
+    }]
+  };
 });
 const ImageListItemBarTitle = styled('div', {
   name: 'MuiImageListItemBar',
@@ -125,12 +152,15 @@ const ImageListItemBarActionIcon = styled('div', {
     } = props;
     return [styles.actionIcon, styles[`actionIconActionPos${capitalize(ownerState.actionPosition)}`]];
   }
-})(({
-  ownerState
-}) => {
-  return _extends({}, ownerState.actionPosition === 'left' && {
-    order: -1
-  });
+})({
+  variants: [{
+    props: {
+      actionPosition: 'left'
+    },
+    style: {
+      order: -1
+    }
+  }]
 });
 const ImageListItemBar = /*#__PURE__*/React.forwardRef(function ImageListItemBar(inProps, ref) {
   const props = useThemeProps({
@@ -138,24 +168,25 @@ const ImageListItemBar = /*#__PURE__*/React.forwardRef(function ImageListItemBar
     name: 'MuiImageListItemBar'
   });
   const {
-      actionIcon,
-      actionPosition = 'right',
-      className,
-      subtitle,
-      title,
-      position = 'bottom'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    actionIcon,
+    actionPosition = 'right',
+    className,
+    subtitle,
+    title,
+    position = 'bottom',
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     position,
     actionPosition
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsxs(ImageListItemBarRoot, _extends({
+  return /*#__PURE__*/_jsxs(ImageListItemBarRoot, {
     ownerState: ownerState,
     className: clsx(classes.root, className),
-    ref: ref
-  }, other, {
+    ref: ref,
+    ...other,
     children: [/*#__PURE__*/_jsxs(ImageListItemBarTitleWrap, {
       ownerState: ownerState,
       className: classes.titleWrap,
@@ -171,7 +202,7 @@ const ImageListItemBar = /*#__PURE__*/React.forwardRef(function ImageListItemBar
       className: classes.actionIcon,
       children: actionIcon
     }) : null]
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? ImageListItemBar.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/Input/Input.d.ts

@@ -10,6 +10,7 @@ export interface InputProps extends StandardProps<InputBaseProps> {
   classes?: Partial<InputClasses>;
   /**
    * If `true`, the `input` will not have an underline.
+   * @default false
    */
   disableUnderline?: boolean;
   /**
@@ -22,13 +23,13 @@ export interface InputProps extends StandardProps<InputBaseProps> {
  *
  * Demos:
  *
- * - [Text Field](https://mui.com/material-ui/react-text-field/)
+ * - [Text Field](https://next.mui.com/material-ui/react-text-field/)
  *
  * API:
  *
- * - [Input API](https://mui.com/material-ui/api/input/)
- * - inherits [InputBase API](https://mui.com/material-ui/api/input-base/)
+ * - [Input API](https://next.mui.com/material-ui/api/input/)
+ * - inherits [InputBase API](https://next.mui.com/material-ui/api/input-base/)
  */
-declare const Input: ((props: InputProps) => JSX.Element) & { muiName: string };
+declare const Input: ((props: InputProps) => React.JSX.Element) & { muiName: string };
 
 export default Input;

package/Input/Input.js

@@ -1,19 +1,17 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["disableUnderline", "components", "componentsProps", "fullWidth", "inputComponent", "multiline", "slotProps", "slots", "type"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
 import deepmerge from '@mui/utils/deepmerge';
 import refType from '@mui/utils/refType';
 import InputBase from '../InputBase';
-import styled, { rootShouldForwardProp } from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import rootShouldForwardProp from '../styles/rootShouldForwardProp';
+import { styled, createUseThemeProps } from '../zero-styled';
 import inputClasses, { getInputUtilityClass } from './inputClasses';
-import { rootOverridesResolver as inputBaseRootOverridesResolver, inputOverridesResolver as inputBaseInputOverridesResolver, InputBaseRoot, InputBaseComponent as InputBaseInput } from '../InputBase/InputBase';
+import { rootOverridesResolver as inputBaseRootOverridesResolver, inputOverridesResolver as inputBaseInputOverridesResolver, InputBaseRoot, InputBaseInput } from '../InputBase/InputBase';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiInput');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -24,7 +22,11 @@ const useUtilityClasses = ownerState => {
     input: ['input']
   };
   const composedClasses = composeClasses(slots, getInputUtilityClass, classes);
-  return _extends({}, classes, composedClasses);
+  return {
+    ...classes,
+    // forward classes to the InputBase
+    ...composedClasses
+  };
 };
 const InputRoot = styled(InputBaseRoot, {
   shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes',
@@ -37,70 +39,87 @@ const InputRoot = styled(InputBaseRoot, {
     return [...inputBaseRootOverridesResolver(props, styles), !ownerState.disableUnderline && styles.underline];
   }
 })(({
-  theme,
-  ownerState
+  theme
 }) => {
   const light = theme.palette.mode === 'light';
   let bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)';
   if (theme.vars) {
     bottomLineColor = `rgba(${theme.vars.palette.common.onBackgroundChannel} / ${theme.vars.opacity.inputUnderline})`;
   }
-  return _extends({
-    position: 'relative'
-  }, ownerState.formControl && {
-    'label + &': {
-      marginTop: 16
-    }
-  }, !ownerState.disableUnderline && {
-    '&::after': {
-      borderBottom: `2px solid ${(theme.vars || theme).palette[ownerState.color].main}`,
-      left: 0,
-      bottom: 0,
-      // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
-      content: '""',
-      position: 'absolute',
-      right: 0,
-      transform: 'scaleX(0)',
-      transition: theme.transitions.create('transform', {
-        duration: theme.transitions.duration.shorter,
-        easing: theme.transitions.easing.easeOut
-      }),
-      pointerEvents: 'none' // Transparent to the hover style.
-    },
-    [`&.${inputClasses.focused}:after`]: {
-      // translateX(0) is a workaround for Safari transform scale bug
-      // See https://github.com/mui/material-ui/issues/31766
-      transform: 'scaleX(1) translateX(0)'
-    },
-    [`&.${inputClasses.error}`]: {
-      '&::before, &::after': {
-        borderBottomColor: (theme.vars || theme).palette.error.main
+  return {
+    position: 'relative',
+    variants: [{
+      props: ({
+        ownerState
+      }) => ownerState.formControl,
+      style: {
+        'label + &': {
+          marginTop: 16
+        }
       }
-    },
-    '&::before': {
-      borderBottom: `1px solid ${bottomLineColor}`,
-      left: 0,
-      bottom: 0,
-      // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
-      content: '"\\00a0"',
-      position: 'absolute',
-      right: 0,
-      transition: theme.transitions.create('border-bottom-color', {
-        duration: theme.transitions.duration.shorter
-      }),
-      pointerEvents: 'none' // Transparent to the hover style.
-    },
-    [`&:hover:not(.${inputClasses.disabled}, .${inputClasses.error}):before`]: {
-      borderBottom: `2px solid ${(theme.vars || theme).palette.text.primary}`,
-      // Reset on touch devices, it doesn't add specificity
-      '@media (hover: none)': {
-        borderBottom: `1px solid ${bottomLineColor}`
+    }, {
+      props: ({
+        ownerState
+      }) => !ownerState.disableUnderline,
+      style: {
+        '&::after': {
+          left: 0,
+          bottom: 0,
+          content: '""',
+          position: 'absolute',
+          right: 0,
+          transform: 'scaleX(0)',
+          transition: theme.transitions.create('transform', {
+            duration: theme.transitions.duration.shorter,
+            easing: theme.transitions.easing.easeOut
+          }),
+          pointerEvents: 'none' // Transparent to the hover style.
+        },
+        [`&.${inputClasses.focused}:after`]: {
+          // translateX(0) is a workaround for Safari transform scale bug
+          // See https://github.com/mui/material-ui/issues/31766
+          transform: 'scaleX(1) translateX(0)'
+        },
+        [`&.${inputClasses.error}`]: {
+          '&::before, &::after': {
+            borderBottomColor: (theme.vars || theme).palette.error.main
+          }
+        },
+        '&::before': {
+          borderBottom: `1px solid ${bottomLineColor}`,
+          left: 0,
+          bottom: 0,
+          content: '"\\00a0"',
+          position: 'absolute',
+          right: 0,
+          transition: theme.transitions.create('border-bottom-color', {
+            duration: theme.transitions.duration.shorter
+          }),
+          pointerEvents: 'none' // Transparent to the hover style.
+        },
+        [`&:hover:not(.${inputClasses.disabled}, .${inputClasses.error}):before`]: {
+          borderBottom: `2px solid ${(theme.vars || theme).palette.text.primary}`,
+          // Reset on touch devices, it doesn't add specificity
+          '@media (hover: none)': {
+            borderBottom: `1px solid ${bottomLineColor}`
+          }
+        },
+        [`&.${inputClasses.disabled}:before`]: {
+          borderBottomStyle: 'dotted'
+        }
       }
-    },
-    [`&.${inputClasses.disabled}:before`]: {
-      borderBottomStyle: 'dotted'
-    }
-  });
+    }, ...Object.entries(theme.palette).filter(([, value]) => value && value.main).map(([color]) => ({
+      props: {
+        color,
+        disableUnderline: false
+      },
+      style: {
+        '&::after': {
+          borderBottom: `2px solid ${(theme.vars || theme).palette[color].main}`
+        }
+      }
+    }))]
+  };
 });
 const InputInput = styled(InputBaseInput, {
   name: 'MuiInput',
@@ -113,17 +132,17 @@ const Input = /*#__PURE__*/React.forwardRef(function Input(inProps, ref) {
     name: 'MuiInput'
   });
   const {
-      disableUnderline,
-      components = {},
-      componentsProps: componentsPropsProp,
-      fullWidth = false,
-      inputComponent = 'input',
-      multiline = false,
-      slotProps,
-      slots = {},
-      type = 'text'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    disableUnderline = false,
+    components = {},
+    componentsProps: componentsPropsProp,
+    fullWidth = false,
+    inputComponent = 'input',
+    multiline = false,
+    slotProps,
+    slots = {},
+    type = 'text',
+    ...other
+  } = props;
   const classes = useUtilityClasses(props);
   const ownerState = {
     disableUnderline
@@ -136,7 +155,7 @@ const Input = /*#__PURE__*/React.forwardRef(function Input(inProps, ref) {
   const componentsProps = slotProps ?? componentsPropsProp ? deepmerge(slotProps ?? componentsPropsProp, inputComponentsProps) : inputComponentsProps;
   const RootSlot = slots.root ?? components.Root ?? InputRoot;
   const InputSlot = slots.input ?? components.Input ?? InputInput;
-  return /*#__PURE__*/_jsx(InputBase, _extends({
+  return /*#__PURE__*/_jsx(InputBase, {
     slots: {
       root: RootSlot,
       input: InputSlot
@@ -146,10 +165,10 @@ const Input = /*#__PURE__*/React.forwardRef(function Input(inProps, ref) {
     inputComponent: inputComponent,
     multiline: multiline,
     ref: ref,
-    type: type
-  }, other, {
+    type: type,
+    ...other,
     classes: classes
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? Input.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
@@ -180,8 +199,7 @@ process.env.NODE_ENV !== "production" ? Input.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 {}
    */
@@ -193,8 +211,7 @@ process.env.NODE_ENV !== "production" ? Input.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 {}
    */
@@ -213,6 +230,7 @@ process.env.NODE_ENV !== "production" ? Input.propTypes /* remove-proptypes */ =
   disabled: PropTypes.bool,
   /**
    * If `true`, the `input` will not have an underline.
+   * @default false
    */
   disableUnderline: PropTypes.bool,
   /**
@@ -337,5 +355,7 @@ process.env.NODE_ENV !== "production" ? Input.propTypes /* remove-proptypes */ =
    */
   value: PropTypes.any
 } : void 0;
-Input.muiName = 'Input';
+if (Input) {
+  Input.muiName = 'Input';
+}
 export default Input;