@mui/material 6.0.0-dev.240424162023-9968b4889d → 6.0.0

package/modern/FilledInput/FilledInput.js

@@ -1,30 +1,39 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["disableUnderline", "components", "componentsProps", "fullWidth", "hiddenLabel", "inputComponent", "multiline", "slotProps", "slots", "type"];
 import * as React from 'react';
 import deepmerge from '@mui/utils/deepmerge';
 import refType from '@mui/utils/refType';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
-import InputBase from '../InputBase';
-import styled, { rootShouldForwardProp } from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
-import filledInputClasses, { getFilledInputUtilityClass } from './filledInputClasses';
-import { rootOverridesResolver as inputBaseRootOverridesResolver, inputOverridesResolver as inputBaseInputOverridesResolver, InputBaseRoot, InputBaseComponent as InputBaseInput } from '../InputBase/InputBase';
+import InputBase from "../InputBase/index.js";
+import rootShouldForwardProp from "../styles/rootShouldForwardProp.js";
+import { styled } from "../zero-styled/index.js";
+import memoTheme from "../utils/memoTheme.js";
+import { useDefaultProps } from "../DefaultPropsProvider/index.js";
+import filledInputClasses, { getFilledInputUtilityClass } from "./filledInputClasses.js";
+import { rootOverridesResolver as inputBaseRootOverridesResolver, inputOverridesResolver as inputBaseInputOverridesResolver, InputBaseRoot, InputBaseInput } from "../InputBase/InputBase.js";
+import { capitalize } from "../utils/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
     classes,
-    disableUnderline
+    disableUnderline,
+    startAdornment,
+    endAdornment,
+    size,
+    hiddenLabel,
+    multiline
   } = ownerState;
   const slots = {
-    root: ['root', !disableUnderline && 'underline'],
+    root: ['root', !disableUnderline && 'underline', startAdornment && 'adornedStart', endAdornment && 'adornedEnd', size === 'small' && `size${capitalize(size)}`, hiddenLabel && 'hiddenLabel', multiline && 'multiline'],
     input: ['input']
   };
   const composedClasses = composeClasses(slots, getFilledInputUtilityClass, classes);
-  return _extends({}, classes, composedClasses);
+  return {
+    ...classes,
+    // forward classes to the InputBase
+    ...composedClasses
+  };
 };
 const FilledInputRoot = styled(InputBaseRoot, {
   shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes',
@@ -36,16 +45,15 @@ const FilledInputRoot = styled(InputBaseRoot, {
     } = props;
     return [...inputBaseRootOverridesResolver(props, styles), !ownerState.disableUnderline && styles.underline];
   }
-})(({
-  theme,
-  ownerState
+})(memoTheme(({
+  theme
 }) => {
   const light = theme.palette.mode === 'light';
   const bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)';
   const backgroundColor = light ? 'rgba(0, 0, 0, 0.06)' : 'rgba(255, 255, 255, 0.09)';
   const hoverBackground = light ? 'rgba(0, 0, 0, 0.09)' : 'rgba(255, 255, 255, 0.13)';
   const disabledBackground = light ? 'rgba(0, 0, 0, 0.12)' : 'rgba(255, 255, 255, 0.12)';
-  return _extends({
+  return {
     position: 'relative',
     backgroundColor: theme.vars ? theme.vars.palette.FilledInput.bg : backgroundColor,
     borderTopLeftRadius: (theme.vars || theme).shape.borderRadius,
@@ -66,143 +74,224 @@ const FilledInputRoot = styled(InputBaseRoot, {
     },
     [`&.${filledInputClasses.disabled}`]: {
       backgroundColor: theme.vars ? theme.vars.palette.FilledInput.disabledBg : disabledBackground
-    }
-  }, !ownerState.disableUnderline && {
-    '&::after': {
-      borderBottom: `2px solid ${(theme.vars || theme).palette[ownerState.color || 'primary']?.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.
-    },
-    [`&.${filledInputClasses.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)'
     },
-    [`&.${filledInputClasses.error}`]: {
-      '&::before, &::after': {
-        borderBottomColor: (theme.vars || theme).palette.error.main
+    variants: [{
+      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.
+        },
+        [`&.${filledInputClasses.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)'
+        },
+        [`&.${filledInputClasses.error}`]: {
+          '&::before, &::after': {
+            borderBottomColor: (theme.vars || theme).palette.error.main
+          }
+        },
+        '&::before': {
+          borderBottom: `1px solid ${theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / ${theme.vars.opacity.inputUnderline})` : 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(.${filledInputClasses.disabled}, .${filledInputClasses.error}):before`]: {
+          borderBottom: `1px solid ${(theme.vars || theme).palette.text.primary}`
+        },
+        [`&.${filledInputClasses.disabled}:before`]: {
+          borderBottomStyle: 'dotted'
+        }
       }
-    },
-    '&::before': {
-      borderBottom: `1px solid ${theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / ${theme.vars.opacity.inputUnderline})` : 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(.${filledInputClasses.disabled}, .${filledInputClasses.error}):before`]: {
-      borderBottom: `1px solid ${(theme.vars || theme).palette.text.primary}`
-    },
-    [`&.${filledInputClasses.disabled}:before`]: {
-      borderBottomStyle: 'dotted'
-    }
-  }, ownerState.startAdornment && {
-    paddingLeft: 12
-  }, ownerState.endAdornment && {
-    paddingRight: 12
-  }, ownerState.multiline && _extends({
-    padding: '25px 12px 8px'
-  }, ownerState.size === 'small' && {
-    paddingTop: 21,
-    paddingBottom: 4
-  }, ownerState.hiddenLabel && {
-    paddingTop: 16,
-    paddingBottom: 17
-  }, ownerState.hiddenLabel && ownerState.size === 'small' && {
-    paddingTop: 8,
-    paddingBottom: 9
-  }));
-});
+    }, ...Object.entries(theme.palette).filter(([, value]) => value && value.main) // check all the used fields in the style below
+    .map(([color]) => ({
+      props: {
+        disableUnderline: false,
+        color
+      },
+      style: {
+        '&::after': {
+          borderBottom: `2px solid ${(theme.vars || theme).palette[color]?.main}`
+        }
+      }
+    })), {
+      props: ({
+        ownerState
+      }) => ownerState.startAdornment,
+      style: {
+        paddingLeft: 12
+      }
+    }, {
+      props: ({
+        ownerState
+      }) => ownerState.endAdornment,
+      style: {
+        paddingRight: 12
+      }
+    }, {
+      props: ({
+        ownerState
+      }) => ownerState.multiline,
+      style: {
+        padding: '25px 12px 8px'
+      }
+    }, {
+      props: ({
+        ownerState,
+        size
+      }) => ownerState.multiline && size === 'small',
+      style: {
+        paddingTop: 21,
+        paddingBottom: 4
+      }
+    }, {
+      props: ({
+        ownerState
+      }) => ownerState.multiline && ownerState.hiddenLabel,
+      style: {
+        paddingTop: 16,
+        paddingBottom: 17
+      }
+    }, {
+      props: ({
+        ownerState
+      }) => ownerState.multiline && ownerState.hiddenLabel && ownerState.size === 'small',
+      style: {
+        paddingTop: 8,
+        paddingBottom: 9
+      }
+    }]
+  };
+}));
 const FilledInputInput = styled(InputBaseInput, {
   name: 'MuiFilledInput',
   slot: 'Input',
   overridesResolver: inputBaseInputOverridesResolver
-})(({
-  theme,
-  ownerState
-}) => _extends({
+})(memoTheme(({
+  theme
+}) => ({
   paddingTop: 25,
   paddingRight: 12,
   paddingBottom: 8,
-  paddingLeft: 12
-}, !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',
-    borderTopLeftRadius: 'inherit',
-    borderTopRightRadius: 'inherit'
-  }
-}, theme.vars && {
-  '&:-webkit-autofill': {
-    borderTopLeftRadius: 'inherit',
-    borderTopRightRadius: 'inherit'
-  },
-  [theme.getColorSchemeSelector('dark')]: {
+  paddingLeft: 12,
+  ...(!theme.vars && {
     '&:-webkit-autofill': {
-      WebkitBoxShadow: '0 0 0 100px #266798 inset',
-      WebkitTextFillColor: '#fff',
-      caretColor: '#fff'
+      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',
+      borderTopLeftRadius: 'inherit',
+      borderTopRightRadius: 'inherit'
     }
-  }
-}, ownerState.size === 'small' && {
-  paddingTop: 21,
-  paddingBottom: 4
-}, ownerState.hiddenLabel && {
-  paddingTop: 16,
-  paddingBottom: 17
-}, ownerState.startAdornment && {
-  paddingLeft: 0
-}, ownerState.endAdornment && {
-  paddingRight: 0
-}, ownerState.hiddenLabel && ownerState.size === 'small' && {
-  paddingTop: 8,
-  paddingBottom: 9
-}, ownerState.multiline && {
-  paddingTop: 0,
-  paddingBottom: 0,
-  paddingLeft: 0,
-  paddingRight: 0
-}));
+  }),
+  ...(theme.vars && {
+    '&:-webkit-autofill': {
+      borderTopLeftRadius: 'inherit',
+      borderTopRightRadius: 'inherit'
+    },
+    [theme.getColorSchemeSelector('dark')]: {
+      '&:-webkit-autofill': {
+        WebkitBoxShadow: '0 0 0 100px #266798 inset',
+        WebkitTextFillColor: '#fff',
+        caretColor: '#fff'
+      }
+    }
+  }),
+  variants: [{
+    props: {
+      size: 'small'
+    },
+    style: {
+      paddingTop: 21,
+      paddingBottom: 4
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.hiddenLabel,
+    style: {
+      paddingTop: 16,
+      paddingBottom: 17
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.startAdornment,
+    style: {
+      paddingLeft: 0
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.endAdornment,
+    style: {
+      paddingRight: 0
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.hiddenLabel && ownerState.size === 'small',
+    style: {
+      paddingTop: 8,
+      paddingBottom: 9
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.multiline,
+    style: {
+      paddingTop: 0,
+      paddingBottom: 0,
+      paddingLeft: 0,
+      paddingRight: 0
+    }
+  }]
+})));
 const FilledInput = /*#__PURE__*/React.forwardRef(function FilledInput(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiFilledInput'
   });
   const {
-      components = {},
-      componentsProps: componentsPropsProp,
-      fullWidth = false,
-      // declare here to prevent spreading to DOM
-      inputComponent = 'input',
-      multiline = false,
-      slotProps,
-      slots = {},
-      type = 'text'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    disableUnderline = false,
+    components = {},
+    componentsProps: componentsPropsProp,
+    fullWidth = false,
+    hiddenLabel,
+    // declare here to prevent spreading to DOM
+    inputComponent = 'input',
+    multiline = false,
+    slotProps,
+    slots = {},
+    type = 'text',
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
+    disableUnderline,
     fullWidth,
     inputComponent,
     multiline,
     type
-  });
+  };
   const classes = useUtilityClasses(props);
   const filledInputComponentsProps = {
     root: {
@@ -215,7 +304,7 @@ const FilledInput = /*#__PURE__*/React.forwardRef(function FilledInput(inProps,
   const componentsProps = slotProps ?? componentsPropsProp ? deepmerge(filledInputComponentsProps, slotProps ?? componentsPropsProp) : filledInputComponentsProps;
   const RootSlot = slots.root ?? components.Root ?? FilledInputRoot;
   const InputSlot = slots.input ?? components.Input ?? FilledInputInput;
-  return /*#__PURE__*/_jsx(InputBase, _extends({
+  return /*#__PURE__*/_jsx(InputBase, {
     slots: {
       root: RootSlot,
       input: InputSlot
@@ -225,10 +314,10 @@ const FilledInput = /*#__PURE__*/React.forwardRef(function FilledInput(inProps,
     inputComponent: inputComponent,
     multiline: multiline,
     ref: ref,
-    type: type
-  }, other, {
+    type: type,
+    ...other,
     classes: classes
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? FilledInput.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
@@ -259,8 +348,7 @@ process.env.NODE_ENV !== "production" ? FilledInput.propTypes /* remove-proptype
   /**
    * 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 {}
    */
@@ -272,8 +360,7 @@ process.env.NODE_ENV !== "production" ? FilledInput.propTypes /* remove-proptype
    * 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 {}
    */
@@ -292,6 +379,7 @@ process.env.NODE_ENV !== "production" ? FilledInput.propTypes /* remove-proptype
   disabled: PropTypes.bool,
   /**
    * If `true`, the input will not have an underline.
+   * @default false
    */
   disableUnderline: PropTypes.bool,
   /**
@@ -423,5 +511,7 @@ process.env.NODE_ENV !== "production" ? FilledInput.propTypes /* remove-proptype
    */
   value: PropTypes.any
 } : void 0;
-FilledInput.muiName = 'Input';
+if (FilledInput) {
+  FilledInput.muiName = 'Input';
+}
 export default FilledInput;

package/modern/FilledInput/filledInputClasses.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';
+import { inputBaseClasses } from "../InputBase/index.js";
 export function getFilledInputUtilityClass(slot) {
   return generateUtilityClass('MuiFilledInput', slot);
 }
-const filledInputClasses = _extends({}, inputBaseClasses, generateUtilityClasses('MuiFilledInput', ['root', 'underline', 'input']));
+const filledInputClasses = {
+  ...inputBaseClasses,
+  ...generateUtilityClasses('MuiFilledInput', ['root', 'underline', 'input', 'adornedStart', 'adornedEnd', 'sizeSmall', 'multiline', 'hiddenLabel'])
+};
 export default filledInputClasses;

package/modern/FilledInput/index.js

@@ -1,5 +1,5 @@
 'use client';
 
-export { default } from './FilledInput';
-export { default as filledInputClasses } from './filledInputClasses';
-export * from './filledInputClasses';
+export { default } from "./FilledInput.js";
+export { default as filledInputClasses } from "./filledInputClasses.js";
+export * from "./filledInputClasses.js";

package/modern/FormControl/FormControl.js

@@ -1,20 +1,17 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["children", "className", "color", "component", "disabled", "error", "focused", "fullWidth", "hiddenLabel", "margin", "required", "size", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import { styled, createUseThemeProps } from '../zero-styled';
-import { isFilled, isAdornedStart } from '../InputBase/utils';
-import capitalize from '../utils/capitalize';
-import isMuiElement from '../utils/isMuiElement';
-import FormControlContext from './FormControlContext';
-import { getFormControlUtilityClasses } from './formControlClasses';
+import { styled } from "../zero-styled/index.js";
+import { useDefaultProps } from "../DefaultPropsProvider/index.js";
+import { isFilled, isAdornedStart } from "../InputBase/utils.js";
+import capitalize from "../utils/capitalize.js";
+import isMuiElement from "../utils/isMuiElement.js";
+import FormControlContext from "./FormControlContext.js";
+import { getFormControlUtilityClasses } from "./formControlClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiFormControl');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -32,7 +29,11 @@ const FormControlRoot = styled('div', {
   overridesResolver: ({
     ownerState
   }, styles) => {
-    return _extends({}, styles.root, styles[`margin${capitalize(ownerState.margin)}`], ownerState.fullWidth && styles.fullWidth);
+    return {
+      ...styles.root,
+      ...styles[`margin${capitalize(ownerState.margin)}`],
+      ...(ownerState.fullWidth && styles.fullWidth)
+    };
   }
 })({
   display: 'inline-flex',
@@ -96,27 +97,28 @@ const FormControlRoot = styled('div', {
  * For instance, only one input can be focused at the same time, the state shouldn't be shared.
  */
 const FormControl = /*#__PURE__*/React.forwardRef(function FormControl(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiFormControl'
   });
   const {
-      children,
-      className,
-      color = 'primary',
-      component = 'div',
-      disabled = false,
-      error = false,
-      focused: visuallyFocused,
-      fullWidth = false,
-      hiddenLabel = false,
-      margin = 'none',
-      required = false,
-      size = 'medium',
-      variant = 'outlined'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    children,
+    className,
+    color = 'primary',
+    component = 'div',
+    disabled = false,
+    error = false,
+    focused: visuallyFocused,
+    fullWidth = false,
+    hiddenLabel = false,
+    margin = 'none',
+    required = false,
+    size = 'medium',
+    variant = 'outlined',
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     color,
     component,
     disabled,
@@ -127,7 +129,7 @@ const FormControl = /*#__PURE__*/React.forwardRef(function FormControl(inProps,
     required,
     size,
     variant
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   const [adornedStart, setAdornedStart] = React.useState(() => {
     // We need to iterate through the children and find the Input in order
@@ -212,14 +214,14 @@ const FormControl = /*#__PURE__*/React.forwardRef(function FormControl(inProps,
   }, [adornedStart, color, disabled, error, filled, focused, fullWidth, hiddenLabel, registerEffect, required, size, variant]);
   return /*#__PURE__*/_jsx(FormControlContext.Provider, {
     value: childContext,
-    children: /*#__PURE__*/_jsx(FormControlRoot, _extends({
+    children: /*#__PURE__*/_jsx(FormControlRoot, {
       as: component,
       ownerState: ownerState,
       className: clsx(classes.root, className),
-      ref: ref
-    }, other, {
+      ref: ref,
+      ...other,
       children: children
-    }))
+    })
   });
 });
 process.env.NODE_ENV !== "production" ? FormControl.propTypes /* remove-proptypes */ = {

package/modern/FormControl/index.js

@@ -1,6 +1,6 @@
 'use client';
 
-export { default } from './FormControl';
-export { default as useFormControl } from './useFormControl';
-export { default as formControlClasses } from './formControlClasses';
-export * from './formControlClasses';
+export { default } from "./FormControl.js";
+export { default as useFormControl } from "./useFormControl.js";
+export { default as formControlClasses } from "./formControlClasses.js";
+export * from "./formControlClasses.js";

package/modern/FormControl/useFormControl.js

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import FormControlContext from './FormControlContext';
+import FormControlContext from "./FormControlContext.js";
 export default function useFormControl() {
   return React.useContext(FormControlContext);
 }