@mui/material 6.3.1 → 6.4.0

package/CardHeader/CardHeader.d.ts

@@ -3,8 +3,116 @@ import { SxProps } from '@mui/system';
 import { TypographyProps } from '../Typography';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 import { Theme } from '..';
+import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
 import { CardHeaderClasses } from './cardHeaderClasses';
 
+export interface CardHeaderRootSlotPropsOverrides {}
+
+export interface CardHeaderAvatarSlotPropsOverrides {}
+
+export interface CardHeaderActionSlotPropsOverrides {}
+
+export interface CardHeaderContentSlotPropsOverrides {}
+
+export interface CardHeaderTitleSlotPropsOverrides {}
+
+export interface CardHeaderSubheaderSlotPropsOverrides {}
+
+export interface CardHeaderSlots {
+  /**
+   * The component that renders the root slot.
+   * @default 'div'
+   */
+  root: React.ElementType;
+  /**
+   * The component that renders the avatar slot.
+   * @default 'div'
+   */
+  avatar: React.ElementType;
+  /**
+   * The component that renders the action slot.
+   * @default 'div'
+   */
+  action: React.ElementType;
+  /**
+   * The component that renders the content slot.
+   * @default 'div'
+   */
+  content: React.ElementType;
+  /**
+   * The component that renders the title slot (as long as disableTypography is not `true`).
+   * [Follow this guide](https://mui.com/material-ui/api/typography/#props) to learn more about the requirements for this component.
+   * @default Typography
+   */
+  title: React.ElementType;
+  /**
+   * The component that renders the subheader slot (as long as disableTypography is not `true`).
+   * [Follow this guide](https://mui.com/material-ui/api/typography/#props) to learn more about the requirements for this component.
+   * @default Typography
+   */
+  subheader: React.ElementType;
+}
+
+export type CardHeaderSlotsAndSlotProps = CreateSlotsAndSlotProps<
+  CardHeaderSlots,
+  {
+    /**
+     * Props forwarded to the root slot.
+     * By default, the avaible props are based on the div element.
+     */
+    root: SlotProps<
+      React.ElementType<React.DetailsHTMLAttributes<HTMLDivElement>>,
+      CardHeaderRootSlotPropsOverrides,
+      CardHeaderOwnerState
+    >;
+    /**
+     * Props forwarded to the avatar slot.
+     * By default, the avaible props are based on the div element.
+     */
+    avatar: SlotProps<
+      React.ElementType<React.DetailsHTMLAttributes<HTMLDivElement>>,
+      CardHeaderAvatarSlotPropsOverrides,
+      CardHeaderOwnerState
+    >;
+    /**
+     * Props forwarded to the action slot.
+     * By default, the avaible props are based on the div element.
+     */
+    action: SlotProps<
+      React.ElementType<React.DetailsHTMLAttributes<HTMLDivElement>>,
+      CardHeaderActionSlotPropsOverrides,
+      CardHeaderOwnerState
+    >;
+    /**
+     * Props forwarded to the content slot.
+     * By default, the avaible props are based on the div element.
+     */
+    content: SlotProps<
+      React.ElementType<React.DetailsHTMLAttributes<HTMLDivElement>>,
+      CardHeaderContentSlotPropsOverrides,
+      CardHeaderOwnerState
+    >;
+    /**
+     * Props forwarded to the title slot (as long as disableTypography is not `true`).
+     * By default, the avaible props are based on the [Typography](https://mui.com/material-ui/api/typography/#props) component.
+     */
+    title: SlotProps<
+      React.ElementType<TypographyProps>,
+      CardHeaderTitleSlotPropsOverrides,
+      CardHeaderOwnerState
+    >;
+    /**
+     * Props forwarded to the subheader slot (as long as disableTypography is not `true`).
+     * By default, the avaible props are based on the [Typography](https://mui.com/material-ui/api/typography/#props) component.
+     */
+    subheader: SlotProps<
+      React.ElementType<TypographyProps>,
+      CardHeaderSubheaderSlotPropsOverrides,
+      CardHeaderOwnerState
+    >;
+  }
+>;
+
 export interface CardHeaderOwnProps<
   TitleTypographyComponent extends React.ElementType = 'span',
   SubheaderTypographyComponent extends React.ElementType = 'span',
@@ -36,6 +144,7 @@ export interface CardHeaderOwnProps<
   /**
    * These props will be forwarded to the subheader
    * (as long as disableTypography is not `true`).
+   * @deprecated Use `slotProps.subheader` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   subheaderTypographyProps?: TypographyProps<
     SubheaderTypographyComponent,
@@ -54,6 +163,7 @@ export interface CardHeaderOwnProps<
   /**
    * These props will be forwarded to the title
    * (as long as disableTypography is not `true`).
+   * @deprecated Use `slotProps.title` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   titleTypographyProps?: TypographyProps<
     TitleTypographyComponent,
@@ -63,6 +173,8 @@ export interface CardHeaderOwnProps<
   >;
 }
 
+export interface CardHeaderOwnerState extends CardHeaderOwnProps {}
+
 export interface CardHeaderTypeMap<
   AdditionalProps = {},
   RootComponent extends React.ElementType = 'div',
@@ -70,7 +182,8 @@ export interface CardHeaderTypeMap<
   SubheaderTypographyComponent extends React.ElementType = 'span',
 > {
   props: AdditionalProps &
-    CardHeaderOwnProps<TitleTypographyComponent, SubheaderTypographyComponent>;
+    CardHeaderOwnProps<TitleTypographyComponent, SubheaderTypographyComponent> &
+    CardHeaderSlotsAndSlotProps;
   defaultComponent: RootComponent;
 }
 /**

package/CardHeader/CardHeader.js

@@ -2,12 +2,12 @@
 
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import Typography, { typographyClasses } from "../Typography/index.js";
 import { styled } from "../zero-styled/index.js";
 import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import cardHeaderClasses, { getCardHeaderUtilityClass } from "./cardHeaderClasses.js";
+import useSlot from "../utils/useSlot.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -79,13 +79,14 @@ const CardHeader = /*#__PURE__*/React.forwardRef(function CardHeader(inProps, re
   const {
     action,
     avatar,
-    className,
     component = 'div',
     disableTypography = false,
     subheader: subheaderProp,
     subheaderTypographyProps,
     title: titleProp,
     titleTypographyProps,
+    slots = {},
+    slotProps = {},
     ...other
   } = props;
   const ownerState = {
@@ -94,44 +95,88 @@ const CardHeader = /*#__PURE__*/React.forwardRef(function CardHeader(inProps, re
     disableTypography
   };
   const classes = useUtilityClasses(ownerState);
+  const externalForwardedProps = {
+    slots,
+    slotProps: {
+      title: titleTypographyProps,
+      subheader: subheaderTypographyProps,
+      ...slotProps
+    }
+  };
   let title = titleProp;
-  if (title != null && title.type !== Typography && !disableTypography) {
-    title = /*#__PURE__*/_jsx(Typography, {
+  const [TitleSlot, titleSlotProps] = useSlot('title', {
+    className: classes.title,
+    elementType: Typography,
+    externalForwardedProps,
+    ownerState,
+    additionalProps: {
       variant: avatar ? 'body2' : 'h5',
-      className: classes.title,
-      component: "span",
-      ...titleTypographyProps,
+      component: 'span'
+    }
+  });
+  if (title != null && title.type !== Typography && !disableTypography) {
+    title = /*#__PURE__*/_jsx(TitleSlot, {
+      ...titleSlotProps,
       children: title
     });
   }
   let subheader = subheaderProp;
-  if (subheader != null && subheader.type !== Typography && !disableTypography) {
-    subheader = /*#__PURE__*/_jsx(Typography, {
+  const [SubheaderSlot, subheaderSlotProps] = useSlot('subheader', {
+    className: classes.subheader,
+    elementType: Typography,
+    externalForwardedProps,
+    ownerState,
+    additionalProps: {
       variant: avatar ? 'body2' : 'body1',
-      className: classes.subheader,
-      color: "textSecondary",
-      component: "span",
-      ...subheaderTypographyProps,
+      color: 'textSecondary',
+      component: 'span'
+    }
+  });
+  if (subheader != null && subheader.type !== Typography && !disableTypography) {
+    subheader = /*#__PURE__*/_jsx(SubheaderSlot, {
+      ...subheaderSlotProps,
       children: subheader
     });
   }
-  return /*#__PURE__*/_jsxs(CardHeaderRoot, {
-    className: clsx(classes.root, className),
-    as: component,
-    ref: ref,
-    ownerState: ownerState,
-    ...other,
-    children: [avatar && /*#__PURE__*/_jsx(CardHeaderAvatar, {
-      className: classes.avatar,
-      ownerState: ownerState,
+  const [RootSlot, rootSlotProps] = useSlot('root', {
+    ref,
+    className: classes.root,
+    elementType: CardHeaderRoot,
+    externalForwardedProps: {
+      ...externalForwardedProps,
+      ...other,
+      component
+    },
+    ownerState
+  });
+  const [AvatarSlot, avatarSlotProps] = useSlot('avatar', {
+    className: classes.avatar,
+    elementType: CardHeaderAvatar,
+    externalForwardedProps,
+    ownerState
+  });
+  const [ContentSlot, contentSlotProps] = useSlot('content', {
+    className: classes.content,
+    elementType: CardHeaderContent,
+    externalForwardedProps,
+    ownerState
+  });
+  const [ActionSlot, actionSlotProps] = useSlot('action', {
+    className: classes.action,
+    elementType: CardHeaderAction,
+    externalForwardedProps,
+    ownerState
+  });
+  return /*#__PURE__*/_jsxs(RootSlot, {
+    ...rootSlotProps,
+    children: [avatar && /*#__PURE__*/_jsx(AvatarSlot, {
+      ...avatarSlotProps,
       children: avatar
-    }), /*#__PURE__*/_jsxs(CardHeaderContent, {
-      className: classes.content,
-      ownerState: ownerState,
+    }), /*#__PURE__*/_jsxs(ContentSlot, {
+      ...contentSlotProps,
       children: [title, subheader]
-    }), action && /*#__PURE__*/_jsx(CardHeaderAction, {
-      className: classes.action,
-      ownerState: ownerState,
+    }), action && /*#__PURE__*/_jsx(ActionSlot, {
+      ...actionSlotProps,
       children: action
     })]
   });
@@ -157,10 +202,6 @@ process.env.NODE_ENV !== "production" ? CardHeader.propTypes /* remove-proptypes
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
   /**
    * The component used for the root node.
    * Either a string to use a HTML element or a component.
@@ -174,6 +215,30 @@ process.env.NODE_ENV !== "production" ? CardHeader.propTypes /* remove-proptypes
    * @default false
    */
   disableTypography: PropTypes.bool,
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    action: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    avatar: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    content: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    subheader: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    title: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    action: PropTypes.elementType,
+    avatar: PropTypes.elementType,
+    content: PropTypes.elementType,
+    root: PropTypes.elementType,
+    subheader: PropTypes.elementType,
+    title: PropTypes.elementType
+  }),
   /**
    * The content of the component.
    */
@@ -181,6 +246,7 @@ process.env.NODE_ENV !== "production" ? CardHeader.propTypes /* remove-proptypes
   /**
    * These props will be forwarded to the subheader
    * (as long as disableTypography is not `true`).
+   * @deprecated Use `slotProps.subheader` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   subheaderTypographyProps: PropTypes.object,
   /**
@@ -194,6 +260,7 @@ process.env.NODE_ENV !== "production" ? CardHeader.propTypes /* remove-proptypes
   /**
    * These props will be forwarded to the title
    * (as long as disableTypography is not `true`).
+   * @deprecated Use `slotProps.title` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   titleTypographyProps: PropTypes.object
 } : void 0;

package/CircularProgress/CircularProgress.js

@@ -34,8 +34,8 @@ const circularDashKeyframe = keyframes`
   }
 
   100% {
-    stroke-dasharray: 100px, 200px;
-    stroke-dashoffset: -125px;
+    stroke-dasharray: 1px, 200px;
+    stroke-dashoffset: -126px;
   }
 `;
 

package/IconButton/IconButton.d.ts

@@ -47,6 +47,18 @@ export interface IconButtonOwnProps {
    * @default false
    */
   edge?: 'start' | 'end' | false;
+  /**
+   * If `true`, the loading indicator is visible and the button is disabled.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * Element placed before the children if the button is in loading state.
+   * The node should contain an element with `role="progressbar"` with an accessible name.
+   * By default, it renders a `CircularProgress` that is labeled by the button itself.
+   * @default <CircularProgress color="inherit" size={16} />
+   */
+  loadingIndicator?: React.ReactNode;
   /**
    * The size of the component.
    * `small` is equivalent to the dense button styling.

package/IconButton/IconButton.js

@@ -5,25 +5,29 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import chainPropTypes from '@mui/utils/chainPropTypes';
 import composeClasses from '@mui/utils/composeClasses';
+import { unstable_useId as useId } from '@mui/material/utils';
 import { alpha } from '@mui/system/colorManipulator';
 import { styled } from "../zero-styled/index.js";
 import memoTheme from "../utils/memoTheme.js";
 import createSimplePaletteValueFilter from "../utils/createSimplePaletteValueFilter.js";
 import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import ButtonBase from "../ButtonBase/index.js";
+import CircularProgress from "../CircularProgress/index.js";
 import capitalize from "../utils/capitalize.js";
 import iconButtonClasses, { getIconButtonUtilityClass } from "./iconButtonClasses.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
     classes,
     disabled,
     color,
     edge,
-    size
+    size,
+    loading
   } = ownerState;
   const slots = {
-    root: ['root', disabled && 'disabled', color !== 'default' && `color${capitalize(color)}`, edge && `edge${capitalize(edge)}`, `size${capitalize(size)}`]
+    root: ['root', loading && 'loading', disabled && 'disabled', color !== 'default' && `color${capitalize(color)}`, edge && `edge${capitalize(edge)}`, `size${capitalize(size)}`],
+    loadingIndicator: ['loadingIndicator']
   };
   return composeClasses(slots, getIconButtonUtilityClass, classes);
 };
@@ -34,7 +38,7 @@ const IconButtonRoot = styled(ButtonBase, {
     const {
       ownerState
     } = props;
-    return [styles.root, ownerState.color !== 'default' && styles[`color${capitalize(ownerState.color)}`], ownerState.edge && styles[`edge${capitalize(ownerState.edge)}`], styles[`size${capitalize(ownerState.size)}`]];
+    return [styles.root, ownerState.loading && styles.loading, ownerState.color !== 'default' && styles[`color${capitalize(ownerState.color)}`], ownerState.edge && styles[`edge${capitalize(ownerState.edge)}`], styles[`size${capitalize(ownerState.size)}`]];
   }
 })(memoTheme(({
   theme
@@ -137,8 +141,34 @@ const IconButtonRoot = styled(ButtonBase, {
   [`&.${iconButtonClasses.disabled}`]: {
     backgroundColor: 'transparent',
     color: (theme.vars || theme).palette.action.disabled
+  },
+  [`&.${iconButtonClasses.loading}`]: {
+    color: 'transparent'
   }
 })));
+const IconButtonLoadingIndicator = styled('span', {
+  name: 'MuiIconButton',
+  slot: 'LoadingIndicator',
+  overridesResolver: (props, styles) => styles.loadingIndicator
+})(({
+  theme
+}) => ({
+  display: 'none',
+  position: 'absolute',
+  visibility: 'visible',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  color: (theme.vars || theme).palette.action.disabled,
+  variants: [{
+    props: {
+      loading: true
+    },
+    style: {
+      display: 'flex'
+    }
+  }]
+}));
 
 /**
  * Refer to the [Icons](/material-ui/icons/) section of the documentation
@@ -157,26 +187,42 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, re
     disabled = false,
     disableFocusRipple = false,
     size = 'medium',
+    id: idProp,
+    loading = false,
+    loadingIndicator: loadingIndicatorProp,
     ...other
   } = props;
+  const id = useId(idProp);
+  const loadingIndicator = loadingIndicatorProp ?? /*#__PURE__*/_jsx(CircularProgress, {
+    "aria-labelledby": id,
+    color: "inherit",
+    size: 16
+  });
   const ownerState = {
     ...props,
     edge,
     color,
     disabled,
     disableFocusRipple,
+    loading,
+    loadingIndicator,
     size
   };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(IconButtonRoot, {
+  return /*#__PURE__*/_jsxs(IconButtonRoot, {
+    id: id,
     className: clsx(classes.root, className),
     centerRipple: true,
     focusRipple: !disableFocusRipple,
-    disabled: disabled,
+    disabled: disabled || loading,
     ref: ref,
     ...other,
     ownerState: ownerState,
-    children: children
+    children: [/*#__PURE__*/_jsx(IconButtonLoadingIndicator, {
+      className: classes.loadingIndicator,
+      ownerState: ownerState,
+      children: loading && loadingIndicator
+    }), children]
   });
 });
 process.env.NODE_ENV !== "production" ? IconButton.propTypes /* remove-proptypes */ = {
@@ -235,6 +281,22 @@ process.env.NODE_ENV !== "production" ? IconButton.propTypes /* remove-proptypes
    * @default false
    */
   edge: PropTypes.oneOf(['end', 'start', false]),
+  /**
+   * @ignore
+   */
+  id: PropTypes.string,
+  /**
+   * If `true`, the loading indicator is visible and the button is disabled.
+   * @default false
+   */
+  loading: PropTypes.bool,
+  /**
+   * Element placed before the children if the button is in loading state.
+   * The node should contain an element with `role="progressbar"` with an accessible name.
+   * By default, it renders a `CircularProgress` that is labeled by the button itself.
+   * @default <CircularProgress color="inherit" size={16} />
+   */
+  loadingIndicator: PropTypes.node,
   /**
    * The size of the component.
    * `small` is equivalent to the dense button styling.

package/IconButton/iconButtonClasses.d.ts

@@ -27,6 +27,10 @@ export interface IconButtonClasses {
     sizeMedium: string;
     /** Styles applied to the root element if `size="large"`. */
     sizeLarge: string;
+    /** Styles applied to the root element if `loading={true}`. */
+    loading: string;
+    /** Styles applied to the loadingIndicator element. */
+    loadingIndicator: string;
 }
 export type IconButtonClassKey = keyof IconButtonClasses;
 export declare function getIconButtonUtilityClass(slot: string): string;

package/IconButton/iconButtonClasses.js

@@ -3,5 +3,5 @@ import generateUtilityClass from '@mui/utils/generateUtilityClass';
 export function getIconButtonUtilityClass(slot) {
   return generateUtilityClass('MuiIconButton', slot);
 }
-const iconButtonClasses = generateUtilityClasses('MuiIconButton', ['root', 'disabled', 'colorInherit', 'colorPrimary', 'colorSecondary', 'colorError', 'colorInfo', 'colorSuccess', 'colorWarning', 'edgeStart', 'edgeEnd', 'sizeSmall', 'sizeMedium', 'sizeLarge']);
+const iconButtonClasses = generateUtilityClasses('MuiIconButton', ['root', 'disabled', 'colorInherit', 'colorPrimary', 'colorSecondary', 'colorError', 'colorInfo', 'colorSuccess', 'colorWarning', 'edgeStart', 'edgeEnd', 'sizeSmall', 'sizeMedium', 'sizeLarge', 'loading', 'loadingIndicator']);
 export default iconButtonClasses;

package/LinearProgress/LinearProgress.js

@@ -84,8 +84,8 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['root', `color${capitalize(color)}`, variant],
     dashed: ['dashed', `dashedColor${capitalize(color)}`],
-    bar1: ['bar', `barColor${capitalize(color)}`, (variant === 'indeterminate' || variant === 'query') && 'bar1Indeterminate', variant === 'determinate' && 'bar1Determinate', variant === 'buffer' && 'bar1Buffer'],
-    bar2: ['bar', variant !== 'buffer' && `barColor${capitalize(color)}`, variant === 'buffer' && `color${capitalize(color)}`, (variant === 'indeterminate' || variant === 'query') && 'bar2Indeterminate', variant === 'buffer' && 'bar2Buffer']
+    bar1: ['bar', 'bar1', `barColor${capitalize(color)}`, (variant === 'indeterminate' || variant === 'query') && 'bar1Indeterminate', variant === 'determinate' && 'bar1Determinate', variant === 'buffer' && 'bar1Buffer'],
+    bar2: ['bar', 'bar2', variant !== 'buffer' && `barColor${capitalize(color)}`, variant === 'buffer' && `color${capitalize(color)}`, (variant === 'indeterminate' || variant === 'query') && 'bar2Indeterminate', variant === 'buffer' && 'bar2Buffer']
   };
   return composeClasses(slots, getLinearProgressUtilityClass, classes);
 };
@@ -203,7 +203,7 @@ const LinearProgressBar1 = styled('span', {
     const {
       ownerState
     } = props;
-    return [styles.bar, styles[`barColor${capitalize(ownerState.color)}`], (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && styles.bar1Indeterminate, ownerState.variant === 'determinate' && styles.bar1Determinate, ownerState.variant === 'buffer' && styles.bar1Buffer];
+    return [styles.bar, styles.bar1, styles[`barColor${capitalize(ownerState.color)}`], (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && styles.bar1Indeterminate, ownerState.variant === 'determinate' && styles.bar1Determinate, ownerState.variant === 'buffer' && styles.bar1Buffer];
   }
 })(memoTheme(({
   theme
@@ -267,7 +267,7 @@ const LinearProgressBar2 = styled('span', {
     const {
       ownerState
     } = props;
-    return [styles.bar, styles[`barColor${capitalize(ownerState.color)}`], (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && styles.bar2Indeterminate, ownerState.variant === 'buffer' && styles.bar2Buffer];
+    return [styles.bar, styles.bar2, styles[`barColor${capitalize(ownerState.color)}`], (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && styles.bar2Indeterminate, ownerState.variant === 'buffer' && styles.bar2Buffer];
   }
 })(memoTheme(({
   theme

package/LinearProgress/linearProgressClasses.d.ts

@@ -15,25 +15,47 @@ export interface LinearProgressClasses {
     query: string;
     /** Styles applied to the additional bar element if `variant="buffer"`. */
     dashed: string;
-    /** Styles applied to the additional bar element if `variant="buffer"` and `color="primary"`. */
+    /** Styles applied to the additional bar element if `variant="buffer"` and `color="primary"`.
+     * @deprecated Combine the [.MuiLinearProgress-dashed](/material-ui/api/linear-progress/#linear-progress-classes-dashed) and [.MuiLinearProgress-colorPrimary](/material-ui/api/linear-progress/#linear-progress-classes-colorPrimary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     */
     dashedColorPrimary: string;
-    /** Styles applied to the additional bar element if `variant="buffer"` and `color="secondary"`. */
+    /** Styles applied to the additional bar element if `variant="buffer"` and `color="secondary"`.
+     * @deprecated Combine the [.MuiLinearProgress-dashed](/material-ui/api/linear-progress/#linear-progress-classes-dashed) and [.MuiLinearProgress-colorSecondary](/material-ui/api/linear-progress/#linear-progress-classes-colorSecondary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     */
     dashedColorSecondary: string;
     /** Styles applied to the layered bar1 and bar2 elements. */
     bar: string;
-    /** Styles applied to the bar elements if `color="primary"`; bar2 if `variant` not "buffer". */
+    /** Styles applied to the bar1 element. */
+    bar1: string;
+    /** Styles applied to the bar2 element. */
+    bar2: string;
+    /** Styles applied to the bar elements if `color="primary"`; bar2 if `variant` not "buffer".
+     * @deprecated Use the [.MuiLinearProgress-bar](/material-ui/api/linear-progress/#linear-progress-classes-bar) and [.MuiLinearProgress-colorPrimary](/material-ui/api/linear-progress/#linear-progress-classes-colorPrimary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     */
     barColorPrimary: string;
-    /** Styles applied to the bar elements if `color="secondary"`; bar2 if `variant` not "buffer". */
+    /** Styles applied to the bar elements if `color="secondary"`; bar2 if `variant` not "buffer".
+     * @deprecated Use the [.MuiLinearProgress-bar](/material-ui/api/linear-progress/#linear-progress-classes-bar) and [.MuiLinearProgress-colorSecondary](/material-ui/api/linear-progress/#linear-progress-classes-colorSecondary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     */
     barColorSecondary: string;
-    /** Styles applied to the bar1 element if `variant="indeterminate or query"`. */
+    /** Styles applied to the bar1 element if `variant="indeterminate or query"`.
+     * @deprecated Use the [.MuiLinearProgress-bar1](/material-ui/api/linear-progress/#linear-progress-classes-bar1) and [.MuiLinearProgress-indeterminate](/material-ui/api/linear-progress/#linear-progress-classes-indeterminate) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     */
     bar1Indeterminate: string;
-    /** Styles applied to the bar1 element if `variant="determinate"`. */
+    /** Styles applied to the bar1 element if `variant="determinate"`.
+     * @deprecated Use the [.MuiLinearProgress-bar1](/material-ui/api/linear-progress/#linear-progress-classes-bar1) and [.MuiLinearProgress-determinate](/material-ui/api/linear-progress/#linear-progress-classes-determinate) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     */
     bar1Determinate: string;
-    /** Styles applied to the bar1 element if `variant="buffer"`. */
+    /** Styles applied to the bar1 element if `variant="buffer"`.
+     * @deprecated Use the [.MuiLinearProgress-bar1](/material-ui/api/linear-progress/#linear-progress-classes-bar1) and [.MuiLinearProgress-buffer](/material-ui/api/linear-progress/#linear-progress-classes-buffer) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     */
     bar1Buffer: string;
-    /** Styles applied to the bar2 element if `variant="indeterminate or query"`. */
+    /** Styles applied to the bar2 element if `variant="indeterminate or query"`.
+     * @deprecated Use the [.MuiLinearProgress-bar2](/material-ui/api/linear-progress/#linear-progress-classes-bar2) and [.MuiLinearProgress-indeterminate](/material-ui/api/linear-progress/#linear-progress-classes-indeterminate) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     */
     bar2Indeterminate: string;
-    /** Styles applied to the bar2 element if `variant="buffer"`. */
+    /** Styles applied to the bar2 element if `variant="buffer"`.
+     * @deprecated Use the [.MuiLinearProgress-bar2](/material-ui/api/linear-progress/#linear-progress-classes-bar2) and [.MuiLinearProgress-buffer](/material-ui/api/linear-progress/#linear-progress-classes-buffer) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     */
     bar2Buffer: string;
 }
 export type LinearProgressClassKey = keyof LinearProgressClasses;

package/LinearProgress/linearProgressClasses.js

@@ -3,5 +3,5 @@ import generateUtilityClass from '@mui/utils/generateUtilityClass';
 export function getLinearProgressUtilityClass(slot) {
   return generateUtilityClass('MuiLinearProgress', slot);
 }
-const linearProgressClasses = generateUtilityClasses('MuiLinearProgress', ['root', 'colorPrimary', 'colorSecondary', 'determinate', 'indeterminate', 'buffer', 'query', 'dashed', 'dashedColorPrimary', 'dashedColorSecondary', 'bar', 'barColorPrimary', 'barColorSecondary', 'bar1Indeterminate', 'bar1Determinate', 'bar1Buffer', 'bar2Indeterminate', 'bar2Buffer']);
+const linearProgressClasses = generateUtilityClasses('MuiLinearProgress', ['root', 'colorPrimary', 'colorSecondary', 'determinate', 'indeterminate', 'buffer', 'query', 'dashed', 'dashedColorPrimary', 'dashedColorSecondary', 'bar', 'bar1', 'bar2', 'barColorPrimary', 'barColorSecondary', 'bar1Indeterminate', 'bar1Determinate', 'bar1Buffer', 'bar2Indeterminate', 'bar2Buffer']);
 export default linearProgressClasses;

package/Link/getTextDecoration.js

@@ -5,8 +5,9 @@ const getTextDecoration = ({
   ownerState
 }) => {
   const transformedColor = ownerState.color;
-  const color = getPath(theme, `palette.${transformedColor}`, false) || ownerState.color;
-  const channelColor = getPath(theme, `palette.${transformedColor}Channel`);
+  // check the `main` color first for a custom palette, then fallback to the color itself
+  const color = getPath(theme, `palette.${transformedColor}.main`, false) || getPath(theme, `palette.${transformedColor}`, false) || ownerState.color;
+  const channelColor = getPath(theme, `palette.${transformedColor}.mainChannel`) || getPath(theme, `palette.${transformedColor}Channel`);
   if ('vars' in theme && channelColor) {
     return `rgba(${channelColor} / 0.4)`;
   }