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

package/modern/FormControlLabel/FormControlLabel.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 = ["checked", "className", "componentsProps", "control", "disabled", "disableTypography", "inputRef", "label", "labelPlacement", "name", "onChange", "required", "slotProps", "value"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -15,6 +12,7 @@ import Typography from '../Typography';
 import capitalize from '../utils/capitalize';
 import formControlLabelClasses, { getFormControlLabelUtilityClasses } from './formControlLabelClasses';
 import formControlState from '../FormControl/formControlState';
+import useSlot from '../utils/useSlot';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useThemeProps = createUseThemeProps('MuiFormControlLabel');
 const useUtilityClasses = ownerState => {
@@ -116,17 +114,23 @@ const FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel
     name: 'MuiFormControlLabel'
   });
   const {
-      className,
-      componentsProps = {},
-      control,
-      disabled: disabledProp,
-      disableTypography,
-      label: labelProp,
-      labelPlacement = 'end',
-      required: requiredProp,
-      slotProps = {}
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    checked,
+    className,
+    componentsProps = {},
+    control,
+    disabled: disabledProp,
+    disableTypography,
+    inputRef,
+    label: labelProp,
+    labelPlacement = 'end',
+    name,
+    onChange,
+    required: requiredProp,
+    slots = {},
+    slotProps = {},
+    value,
+    ...other
+  } = props;
   const muiFormControl = useFormControl();
   const disabled = disabledProp ?? control.props.disabled ?? muiFormControl?.disabled;
   const required = requiredProp ?? control.props.required;
@@ -144,28 +148,40 @@ const FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel
     muiFormControl,
     states: ['error']
   });
-  const ownerState = _extends({}, props, {
+  const ownerState = {
+    ...props,
     disabled,
     labelPlacement,
     required,
     error: fcs.error
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  const typographySlotProps = slotProps.typography ?? componentsProps.typography;
+  const externalForwardedProps = {
+    slots,
+    slotProps: {
+      ...componentsProps,
+      ...slotProps
+    }
+  };
+  const [TypographySlot, typographySlotProps] = useSlot('typography', {
+    elementType: Typography,
+    externalForwardedProps,
+    ownerState
+  });
   let label = labelProp;
   if (label != null && label.type !== Typography && !disableTypography) {
-    label = /*#__PURE__*/_jsx(Typography, _extends({
-      component: "span"
-    }, typographySlotProps, {
+    label = /*#__PURE__*/_jsx(TypographySlot, {
+      component: "span",
+      ...typographySlotProps,
       className: clsx(classes.label, typographySlotProps?.className),
       children: label
-    }));
+    });
   }
-  return /*#__PURE__*/_jsxs(FormControlLabelRoot, _extends({
+  return /*#__PURE__*/_jsxs(FormControlLabelRoot, {
     className: clsx(classes.root, className),
     ownerState: ownerState,
-    ref: ref
-  }, other, {
+    ref: ref,
+    ...other,
     children: [/*#__PURE__*/React.cloneElement(control, controlProps), required ? /*#__PURE__*/_jsxs(Stack, {
       display: "block",
       children: [label, /*#__PURE__*/_jsxs(AsteriskComponent, {
@@ -175,7 +191,7 @@ const FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel
         children: ["\u2009", '*']
       })]
     }) : label]
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? FormControlLabel.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
@@ -197,6 +213,7 @@ process.env.NODE_ENV !== "production" ? FormControlLabel.propTypes /* remove-pro
   /**
    * The props used for each slot inside.
    * @default {}
+   * @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.
    */
   componentsProps: PropTypes.shape({
     typography: PropTypes.object
@@ -246,7 +263,14 @@ process.env.NODE_ENV !== "production" ? FormControlLabel.propTypes /* remove-pro
    * @default {}
    */
   slotProps: PropTypes.shape({
-    typography: PropTypes.object
+    typography: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    typography: PropTypes.elementType
   }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.

package/modern/FormGroup/FormGroup.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", "row"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -58,26 +55,28 @@ const FormGroup = /*#__PURE__*/React.forwardRef(function FormGroup(inProps, ref)
     name: 'MuiFormGroup'
   });
   const {
-      className,
-      row = false
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    className,
+    row = false,
+    ...other
+  } = props;
   const muiFormControl = useFormControl();
   const fcs = formControlState({
     props,
     muiFormControl,
     states: ['error']
   });
-  const ownerState = _extends({}, props, {
+  const ownerState = {
+    ...props,
     row,
     error: fcs.error
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(FormGroupRoot, _extends({
+  return /*#__PURE__*/_jsx(FormGroupRoot, {
     className: clsx(classes.root, className),
     ownerState: ownerState,
-    ref: ref
-  }, other));
+    ref: ref,
+    ...other
+  });
 });
 process.env.NODE_ENV !== "production" ? FormGroup.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/modern/FormHelperText/FormHelperText.js

@@ -1,20 +1,17 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
 var _span;
-const _excluded = ["children", "className", "component", "disabled", "error", "filled", "focused", "margin", "required", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import formControlState from '../FormControl/formControlState';
 import useFormControl from '../FormControl/useFormControl';
-import styled from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
 import capitalize from '../utils/capitalize';
 import formHelperTextClasses, { getFormHelperTextUtilityClasses } from './formHelperTextClasses';
-import useThemeProps from '../styles/useThemeProps';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiFormHelperText');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -41,11 +38,10 @@ const FormHelperTextRoot = styled('p', {
     return [styles.root, ownerState.size && styles[`size${capitalize(ownerState.size)}`], ownerState.contained && styles.contained, ownerState.filled && styles.filled];
   }
 })(({
-  theme,
-  ownerState
-}) => _extends({
-  color: (theme.vars || theme).palette.text.secondary
-}, theme.typography.caption, {
+  theme
+}) => ({
+  color: (theme.vars || theme).palette.text.secondary,
+  ...theme.typography.caption,
   textAlign: 'left',
   marginTop: 3,
   marginRight: 0,
@@ -56,12 +52,23 @@ const FormHelperTextRoot = styled('p', {
   },
   [`&.${formHelperTextClasses.error}`]: {
     color: (theme.vars || theme).palette.error.main
-  }
-}, ownerState.size === 'small' && {
-  marginTop: 4
-}, ownerState.contained && {
-  marginLeft: 14,
-  marginRight: 14
+  },
+  variants: [{
+    props: {
+      size: 'small'
+    },
+    style: {
+      marginTop: 4
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.contained,
+    style: {
+      marginLeft: 14,
+      marginRight: 14
+    }
+  }]
 }));
 const FormHelperText = /*#__PURE__*/React.forwardRef(function FormHelperText(inProps, ref) {
   const props = useThemeProps({
@@ -69,18 +76,26 @@ const FormHelperText = /*#__PURE__*/React.forwardRef(function FormHelperText(inP
     name: 'MuiFormHelperText'
   });
   const {
-      children,
-      className,
-      component = 'p'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    children,
+    className,
+    component = 'p',
+    disabled,
+    error,
+    filled,
+    focused,
+    margin,
+    required,
+    variant,
+    ...other
+  } = props;
   const muiFormControl = useFormControl();
   const fcs = formControlState({
     props,
     muiFormControl,
     states: ['variant', 'size', 'disabled', 'error', 'filled', 'focused', 'required']
   });
-  const ownerState = _extends({}, props, {
+  const ownerState = {
+    ...props,
     component,
     contained: fcs.variant === 'filled' || fcs.variant === 'outlined',
     variant: fcs.variant,
@@ -90,20 +105,23 @@ const FormHelperText = /*#__PURE__*/React.forwardRef(function FormHelperText(inP
     filled: fcs.filled,
     focused: fcs.focused,
     required: fcs.required
-  });
+  };
+
+  // This issue explains why this is required: https://github.com/mui/material-ui/issues/42184
+  delete ownerState.ownerState;
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(FormHelperTextRoot, _extends({
+  return /*#__PURE__*/_jsx(FormHelperTextRoot, {
     as: component,
-    ownerState: ownerState,
     className: clsx(classes.root, className),
-    ref: ref
-  }, other, {
+    ref: ref,
+    ...other,
+    ownerState: ownerState,
     children: children === ' ' ? // notranslate needed while Google Translate will not fix zero-width space issue
     _span || (_span = /*#__PURE__*/_jsx("span", {
       className: "notranslate",
       children: "\u200B"
     })) : children
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? FormHelperText.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/modern/FormLabel/FormLabel.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", "color", "component", "disabled", "error", "filled", "focused", "required"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -10,10 +7,10 @@ import composeClasses from '@mui/utils/composeClasses';
 import formControlState from '../FormControl/formControlState';
 import useFormControl from '../FormControl/useFormControl';
 import capitalize from '../utils/capitalize';
-import useThemeProps from '../styles/useThemeProps';
-import styled from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
 import formLabelClasses, { getFormLabelUtilityClasses } from './formLabelClasses';
 import { jsxs as _jsxs } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiFormLabel');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -36,26 +33,40 @@ export const FormLabelRoot = styled('label', {
   overridesResolver: ({
     ownerState
   }, styles) => {
-    return _extends({}, styles.root, ownerState.color === 'secondary' && styles.colorSecondary, ownerState.filled && styles.filled);
+    return {
+      ...styles.root,
+      ...(ownerState.color === 'secondary' && styles.colorSecondary),
+      ...(ownerState.filled && styles.filled)
+    };
   }
 })(({
-  theme,
-  ownerState
-}) => _extends({
-  color: (theme.vars || theme).palette.text.secondary
-}, theme.typography.body1, {
+  theme
+}) => ({
+  color: (theme.vars || theme).palette.text.secondary,
+  ...theme.typography.body1,
   lineHeight: '1.4375em',
   padding: 0,
   position: 'relative',
-  [`&.${formLabelClasses.focused}`]: {
-    color: (theme.vars || theme).palette[ownerState.color].main
-  },
-  [`&.${formLabelClasses.disabled}`]: {
-    color: (theme.vars || theme).palette.text.disabled
-  },
-  [`&.${formLabelClasses.error}`]: {
-    color: (theme.vars || theme).palette.error.main
-  }
+  variants: [...Object.entries(theme.palette).filter(([, value]) => value && value.main).map(([color]) => ({
+    props: {
+      color
+    },
+    style: {
+      [`&.${formLabelClasses.focused}`]: {
+        color: (theme.vars || theme).palette[color].main
+      }
+    }
+  })), {
+    props: {},
+    style: {
+      [`&.${formLabelClasses.disabled}`]: {
+        color: (theme.vars || theme).palette.text.disabled
+      },
+      [`&.${formLabelClasses.error}`]: {
+        color: (theme.vars || theme).palette.error.main
+      }
+    }
+  }]
 }));
 const AsteriskComponent = styled('span', {
   name: 'MuiFormLabel',
@@ -74,18 +85,25 @@ const FormLabel = /*#__PURE__*/React.forwardRef(function FormLabel(inProps, ref)
     name: 'MuiFormLabel'
   });
   const {
-      children,
-      className,
-      component = 'label'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    children,
+    className,
+    color,
+    component = 'label',
+    disabled,
+    error,
+    filled,
+    focused,
+    required,
+    ...other
+  } = props;
   const muiFormControl = useFormControl();
   const fcs = formControlState({
     props,
     muiFormControl,
     states: ['color', 'required', 'focused', 'disabled', 'error', 'filled']
   });
-  const ownerState = _extends({}, props, {
+  const ownerState = {
+    ...props,
     color: fcs.color || 'primary',
     component,
     disabled: fcs.disabled,
@@ -93,21 +111,21 @@ const FormLabel = /*#__PURE__*/React.forwardRef(function FormLabel(inProps, ref)
     filled: fcs.filled,
     focused: fcs.focused,
     required: fcs.required
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsxs(FormLabelRoot, _extends({
+  return /*#__PURE__*/_jsxs(FormLabelRoot, {
     as: component,
     ownerState: ownerState,
     className: clsx(classes.root, className),
-    ref: ref
-  }, other, {
+    ref: ref,
+    ...other,
     children: [children, fcs.required && /*#__PURE__*/_jsxs(AsteriskComponent, {
       ownerState: ownerState,
       "aria-hidden": true,
       className: classes.asterisk,
       children: ["\u2009", '*']
     })]
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? FormLabel.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/modern/GlobalStyles/GlobalStyles.js

@@ -1,6 +1,5 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { GlobalStyles as SystemGlobalStyles } from '@mui/system';
@@ -8,10 +7,11 @@ import defaultTheme from '../styles/defaultTheme';
 import THEME_ID from '../styles/identifier';
 import { jsx as _jsx } from "react/jsx-runtime";
 function GlobalStyles(props) {
-  return /*#__PURE__*/_jsx(SystemGlobalStyles, _extends({}, props, {
+  return /*#__PURE__*/_jsx(SystemGlobalStyles, {
+    ...props,
     defaultTheme: defaultTheme,
     themeId: THEME_ID
-  }));
+  });
 }
 process.env.NODE_ENV !== "production" ? GlobalStyles.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/modern/Grid/Grid.js

@@ -10,9 +10,6 @@
 //
 // Follow this flexbox Guide to better understand the underlying model:
 // - https://css-tricks.com/snippets/css/a-guide-to-flexbox/
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["className", "columns", "columnSpacing", "component", "container", "direction", "item", "rowSpacing", "spacing", "wrap", "zeroMinWidth"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -28,6 +25,9 @@ import gridClasses, { getGridUtilityClass } from './gridClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 function getOffset(val) {
   const parse = parseFloat(val);
+  if (Number.isNaN(parse)) {
+    return val;
+  }
   return `${parse}${String(val).replace(String(parse), '') || 'px'}`;
 }
 export function generateGrid({
@@ -84,11 +84,12 @@ export function generateGrid({
 
       // Close to the bootstrap implementation:
       // https://github.com/twbs/bootstrap/blob/8fccaa2439e97ec72a4b7dc42ccc1f649790adb0/scss/mixins/_grid.scss#L41
-      styles = _extends({
+      styles = {
         flexBasis: width,
         flexGrow: 0,
-        maxWidth: width
-      }, more);
+        maxWidth: width,
+        ...more
+      };
     }
 
     // No need for a media query for the first size.
@@ -299,18 +300,22 @@ const GridRoot = styled('div', {
   }
 })(({
   ownerState
-}) => _extends({
-  boxSizing: 'border-box'
-}, ownerState.container && {
-  display: 'flex',
-  flexWrap: 'wrap',
-  width: '100%'
-}, ownerState.item && {
-  margin: 0 // For instance, it's useful when used with a `figure` element.
-}, ownerState.zeroMinWidth && {
-  minWidth: 0
-}, ownerState.wrap !== 'wrap' && {
-  flexWrap: ownerState.wrap
+}) => ({
+  boxSizing: 'border-box',
+  ...(ownerState.container && {
+    display: 'flex',
+    flexWrap: 'wrap',
+    width: '100%'
+  }),
+  ...(ownerState.item && {
+    margin: 0 // For instance, it's useful when used with a `figure` element.
+  }),
+  ...(ownerState.zeroMinWidth && {
+    minWidth: 0
+  }),
+  ...(ownerState.wrap !== 'wrap' && {
+    flexWrap: ownerState.wrap
+  })
 }), generateDirection, generateRowGap, generateColumnGap, generateGrid);
 export function resolveSpacingClasses(spacing, breakpoints) {
   // undefined/null or `spacing` <= 0
@@ -371,19 +376,19 @@ const Grid = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
   } = useTheme();
   const props = extendSxProp(themeProps);
   const {
-      className,
-      columns: columnsProp,
-      columnSpacing: columnSpacingProp,
-      component = 'div',
-      container = false,
-      direction = 'row',
-      item = false,
-      rowSpacing: rowSpacingProp,
-      spacing = 0,
-      wrap = 'wrap',
-      zeroMinWidth = false
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    className,
+    columns: columnsProp,
+    columnSpacing: columnSpacingProp,
+    component = 'div',
+    container = false,
+    direction = 'row',
+    item = false,
+    rowSpacing: rowSpacingProp,
+    spacing = 0,
+    wrap = 'wrap',
+    zeroMinWidth = false,
+    ...other
+  } = props;
   const rowSpacing = rowSpacingProp || spacing;
   const columnSpacing = columnSpacingProp || spacing;
   const columnsContext = React.useContext(GridContext);
@@ -391,14 +396,17 @@ const Grid = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
   // columns set with default breakpoint unit of 12
   const columns = container ? columnsProp || 12 : columnsContext;
   const breakpointsValues = {};
-  const otherFiltered = _extends({}, other);
+  const otherFiltered = {
+    ...other
+  };
   breakpoints.keys.forEach(breakpoint => {
     if (other[breakpoint] != null) {
       breakpointsValues[breakpoint] = other[breakpoint];
       delete otherFiltered[breakpoint];
     }
   });
-  const ownerState = _extends({}, props, {
+  const ownerState = {
+    ...props,
     columns,
     container,
     direction,
@@ -407,19 +415,20 @@ const Grid = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
     columnSpacing,
     wrap,
     zeroMinWidth,
-    spacing
-  }, breakpointsValues, {
+    spacing,
+    ...breakpointsValues,
     breakpoints: breakpoints.keys
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsx(GridContext.Provider, {
     value: columns,
-    children: /*#__PURE__*/_jsx(GridRoot, _extends({
+    children: /*#__PURE__*/_jsx(GridRoot, {
       ownerState: ownerState,
       className: clsx(classes.root, className),
       as: component,
-      ref: ref
-    }, otherFiltered))
+      ref: ref,
+      ...otherFiltered
+    })
   });
 });
 process.env.NODE_ENV !== "production" ? Grid.propTypes /* remove-proptypes */ = {
@@ -521,6 +530,7 @@ process.env.NODE_ENV !== "production" ? Grid.propTypes /* remove-proptypes */ =
    * Defines the `flex-wrap` style property.
    * It's applied for all screen sizes.
    * @default 'wrap'
+   * @deprecated Use `flexWrap` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   wrap: PropTypes.oneOf(['nowrap', 'wrap-reverse', 'wrap']),
   /**
@@ -553,7 +563,9 @@ process.env.NODE_ENV !== "production" ? Grid.propTypes /* remove-proptypes */ =
 if (process.env.NODE_ENV !== 'production') {
   const requireProp = requirePropFactory('Grid', Grid);
   // eslint-disable-next-line no-useless-concat
-  Grid['propTypes' + ''] = _extends({}, Grid.propTypes, {
+  Grid['propTypes' + ''] = {
+    // eslint-disable-next-line react/forbid-foreign-prop-types
+    ...Grid.propTypes,
     direction: requireProp('container'),
     lg: requireProp('item'),
     md: requireProp('item'),
@@ -562,6 +574,6 @@ if (process.env.NODE_ENV !== 'production') {
     wrap: requireProp('container'),
     xs: requireProp('item'),
     zeroMinWidth: requireProp('item')
-  });
+  };
 }
 export default Grid;