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

package/CHANGELOG.md

@@ -1,5 +1,43 @@
 # [Versions](https://mui.com/versions/)
 
+## v6.0.0-alpha.5
+
+<!-- generated comparing v6.0.0-alpha.4..next -->
+
+_May 1, 2024_
+
+A big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
+
+### `@mui/material@6.0.0-alpha.5`
+
+- [FormControlLabel] Deprecate `componentsProps` (#41767) @sai6855
+- [PaginationItem] Deprecate components prop (#41777) @sai6855
+- [SvgIcon] Convert to support CSS extraction (#41779) @aarongarciah
+
+### `@mui/base@5.0.0-beta.43`
+
+- [TextareaAutosize] Fix resizing instability (#41638) @ZeeshanTamboli
+
+### Docs
+
+- Fix small SEO issues @oliviertassinari
+- [material-ui] Fix minor spelling error in the "About the lab" page (#42073) @ryanhartwig
+- [material-ui] Update Figma plugin name (#41967) @danilo-leal
+- [material-ui][templates] Fix input props attributes in Landing Page template (#42013) @5-tom
+- [system] Update typo on the sx prop page (#42035) @bricker
+
+### Core
+
+- [docs-infra] Clean up branding theme file and improve font-face readibility (#42023) @danilo-leal
+- [docs-infra] Simplify docs demo (#42016) @oliviertassinari
+- [website] Add content about the Sync plugin in the Material UI page (#40515) @danilo-leal
+- [website] Sync career roles (#42058) @oliviertassinari
+- [website] Add Nadja on the about page (#42021) @mnajdova
+- [website] Fix code block design by changing the `MarkdownElement` import (#42022) @danilo-leal
+- [wesbite] Remove duplicate MarkdownElement component (#42028) @danilo-leal
+
+All contributors of this release in alphabetical order: @5-tom, @aarongarciah, @bricker, @danilo-leal, @mnajdova, @oliviertassinari, @ryanhartwig, @sai6855, @ZeeshanTamboli
+
 ## v6.0.0-alpha.4
 
 <!-- generated comparing v6.0.0-alpha.3..next -->

package/FormControlLabel/FormControlLabel.d.ts

@@ -1,11 +1,29 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
 import { Theme, InternalStandardProps as StandardProps } from '..';
-import { TypographyProps } from '../Typography';
+import Typography, { TypographyProps } from '../Typography';
 import { FormControlLabelClasses } from './formControlLabelClasses';
+import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
+
+export interface FormControlLabelSlots {
+  /**
+   * The component that renders the label.
+   * This is unused if `disableTypography` is true.
+   * @default Typography
+   */
+  typography?: React.ElementType;
+}
+
+export type FormControlLabelSlotsAndSlotProps = CreateSlotsAndSlotProps<
+  FormControlLabelSlots,
+  {
+    typography: SlotProps<typeof Typography, {}, FormControlLabelProps>;
+  }
+>;
 
 export interface FormControlLabelProps
-  extends StandardProps<React.LabelHTMLAttributes<HTMLLabelElement>, 'children' | 'onChange'> {
+  extends StandardProps<React.LabelHTMLAttributes<HTMLLabelElement>, 'children' | 'onChange'>,
+    FormControlLabelSlotsAndSlotProps {
   /**
    * If `true`, the component appears selected.
    */
@@ -17,6 +35,7 @@ export interface FormControlLabelProps
   /**
    * The props used for each slot inside.
    * @default {}
+   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    */
   componentsProps?: {
     /**
@@ -63,18 +82,6 @@ export interface FormControlLabelProps
    * If `true`, the label will indicate that the `input` is required.
    */
   required?: boolean;
-  /**
-   * The props used for each slot inside.
-   * @default {}
-   */
-  slotProps?: {
-    /**
-     * Props applied to the Typography wrapper of the passed label.
-     * This is unused if disableTypography is true.
-     * @default {}
-     */
-    typography?: TypographyProps;
-  };
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/FormControlLabel/FormControlLabel.js

@@ -2,7 +2,7 @@
 
 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"];
+const _excluded = ["checked", "className", "componentsProps", "control", "disabled", "disableTypography", "inputRef", "label", "labelPlacement", "name", "onChange", "required", "slots", "slotProps", "value"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -15,6 +15,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 => {
@@ -124,6 +125,7 @@ const FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel
       label: labelProp,
       labelPlacement = 'end',
       required: requiredProp,
+      slots = {},
       slotProps = {}
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
@@ -151,10 +153,18 @@ const FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel
     error: fcs.error
   });
   const classes = useUtilityClasses(ownerState);
-  const typographySlotProps = slotProps.typography ?? componentsProps.typography;
+  const externalForwardedProps = {
+    slots,
+    slotProps: _extends({}, 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({
+    label = /*#__PURE__*/_jsx(TypographySlot, _extends({
       component: "span"
     }, typographySlotProps, {
       className: clsx(classes.label, typographySlotProps?.className),
@@ -197,6 +207,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. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    */
   componentsProps: PropTypes.shape({
     typography: PropTypes.object
@@ -246,7 +257,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/PaginationItem/PaginationItem.d.ts

@@ -5,6 +5,7 @@ import { OverridableComponent, OverrideProps } from '@mui/material/OverridableCo
 import { Theme } from '../styles';
 import { UsePaginationItem } from '../usePagination/usePagination';
 import { PaginationItemClasses } from './paginationItemClasses';
+import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
 
 export interface PaginationItemPropsVariantOverrides {}
 
@@ -12,7 +13,30 @@ export interface PaginationItemPropsSizeOverrides {}
 
 export interface PaginationItemPropsColorOverrides {}
 
-export interface PaginationItemOwnProps {
+export interface PaginationItemSlots {
+  first?: React.ElementType;
+  last?: React.ElementType;
+  next?: React.ElementType;
+  previous?: React.ElementType;
+}
+
+export type PaginationItemSlotsAndSlotProps = CreateSlotsAndSlotProps<
+  PaginationItemSlots,
+  {
+    first: SlotProps<React.ElementType<React.HTMLProps<HTMLElement>>, {}, PaginationItemOwnerState>;
+    last: SlotProps<React.ElementType<React.HTMLProps<HTMLElement>>, {}, PaginationItemOwnerState>;
+    next: SlotProps<React.ElementType<React.HTMLProps<HTMLElement>>, {}, PaginationItemOwnerState>;
+    previous: SlotProps<
+      React.ElementType<React.HTMLProps<HTMLElement>>,
+      {},
+      PaginationItemOwnerState
+    >;
+  }
+>;
+
+export interface PaginationItemOwnerState extends PaginationItemProps {}
+
+export interface PaginationItemOwnProps extends PaginationItemSlotsAndSlotProps {
   /**
    * Override or extend the styles applied to the component.
    */
@@ -34,6 +58,7 @@ export interface PaginationItemOwnProps {
    * It's recommended to use the `slots` prop instead.
    *
    * @default {}
+   * @deprecated use the `slots` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    */
   components?: {
     first?: React.ElementType;
@@ -65,19 +90,6 @@ export interface PaginationItemOwnProps {
    * @default 'medium'
    */
   size?: OverridableStringUnion<'small' | 'medium' | 'large', PaginationItemPropsSizeOverrides>;
-  /**
-   * 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?: {
-    first?: React.ElementType;
-    last?: React.ElementType;
-    next?: React.ElementType;
-    previous?: React.ElementType;
-  };
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/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. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    */
   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({

package/SvgIcon/SvgIcon.js

@@ -8,10 +8,10 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import capitalize from '../utils/capitalize';
-import useThemeProps from '../styles/useThemeProps';
-import styled from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
 import { getSvgIconUtilityClass } from './svgIconClasses';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiSvgIcon');
 const useUtilityClasses = ownerState => {
   const {
     color,
@@ -33,32 +33,82 @@ const SvgIconRoot = styled('svg', {
     return [styles.root, ownerState.color !== 'inherit' && styles[`color${capitalize(ownerState.color)}`], styles[`fontSize${capitalize(ownerState.fontSize)}`]];
   }
 })(({
-  theme,
-  ownerState
+  theme
 }) => ({
   userSelect: 'none',
   width: '1em',
   height: '1em',
   display: 'inline-block',
-  // the <svg> will define the property that has `currentColor`
-  // for example heroicons uses fill="none" and stroke="currentColor"
-  fill: ownerState.hasSvgAsChild ? undefined : 'currentColor',
   flexShrink: 0,
   transition: theme.transitions?.create?.('fill', {
-    duration: theme.transitions?.duration?.shorter
+    duration: (theme.vars ?? theme).transitions?.duration?.shorter
   }),
-  fontSize: {
-    inherit: 'inherit',
-    small: theme.typography?.pxToRem?.(20) || '1.25rem',
-    medium: theme.typography?.pxToRem?.(24) || '1.5rem',
-    large: theme.typography?.pxToRem?.(35) || '2.1875rem'
-  }[ownerState.fontSize],
-  // TODO v5 deprecate, v6 remove for sx
-  color: (theme.vars || theme).palette?.[ownerState.color]?.main ?? {
-    action: (theme.vars || theme).palette?.action?.active,
-    disabled: (theme.vars || theme).palette?.action?.disabled,
-    inherit: undefined
-  }[ownerState.color]
+  variants: [{
+    props: props => !props.hasSvgAsChild,
+    style: {
+      // the <svg> will define the property that has `currentColor`
+      // for example heroicons uses fill="none" and stroke="currentColor"
+      fill: 'currentColor'
+    }
+  }, {
+    props: {
+      fontSize: 'inherit'
+    },
+    style: {
+      fontSize: 'inherit'
+    }
+  }, {
+    props: {
+      fontSize: 'small'
+    },
+    style: {
+      fontSize: theme.typography?.pxToRem?.(20) || '1.25rem'
+    }
+  }, {
+    props: {
+      fontSize: 'medium'
+    },
+    style: {
+      fontSize: theme.typography?.pxToRem?.(24) || '1.5rem'
+    }
+  }, {
+    props: {
+      fontSize: 'large'
+    },
+    style: {
+      fontSize: theme.typography?.pxToRem?.(35) || '2.1875rem'
+    }
+  },
+  // TODO v5 deprecate color prop, v6 remove for sx
+  ...Object.entries((theme.vars ?? theme).palette).filter(([, value]) => value.main).map(([color]) => ({
+    props: {
+      color
+    },
+    style: {
+      color: (theme.vars ?? theme).palette?.[color]?.main
+    }
+  })), {
+    props: {
+      color: 'action'
+    },
+    style: {
+      color: (theme.vars ?? theme).palette?.action?.active
+    }
+  }, {
+    props: {
+      color: 'disabled'
+    },
+    style: {
+      color: (theme.vars ?? theme).palette?.action?.disabled
+    }
+  }, {
+    props: {
+      color: 'inherit'
+    },
+    style: {
+      color: undefined
+    }
+  }]
 }));
 const SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(inProps, ref) {
   const props = useThemeProps({
@@ -179,5 +229,7 @@ process.env.NODE_ENV !== "production" ? SvgIcon.propTypes /* remove-proptypes */
    */
   viewBox: PropTypes.string
 } : void 0;
-SvgIcon.muiName = 'SvgIcon';
+if (SvgIcon) {
+  SvgIcon.muiName = 'SvgIcon';
+}
 export default SvgIcon;

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v6.0.0-alpha.4
+ * @mui/material v6.0.0-alpha.5
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/FormControlLabel/FormControlLabel.js

@@ -2,7 +2,7 @@
 
 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"];
+const _excluded = ["checked", "className", "componentsProps", "control", "disabled", "disableTypography", "inputRef", "label", "labelPlacement", "name", "onChange", "required", "slots", "slotProps", "value"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -15,6 +15,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 => {
@@ -124,6 +125,7 @@ const FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel
       label: labelProp,
       labelPlacement = 'end',
       required: requiredProp,
+      slots = {},
       slotProps = {}
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
@@ -151,10 +153,18 @@ const FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel
     error: fcs.error
   });
   const classes = useUtilityClasses(ownerState);
-  const typographySlotProps = slotProps.typography ?? componentsProps.typography;
+  const externalForwardedProps = {
+    slots,
+    slotProps: _extends({}, 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({
+    label = /*#__PURE__*/_jsx(TypographySlot, _extends({
       component: "span"
     }, typographySlotProps, {
       className: clsx(classes.label, typographySlotProps?.className),
@@ -197,6 +207,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. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    */
   componentsProps: PropTypes.shape({
     typography: PropTypes.object
@@ -246,7 +257,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.