@mui/material 6.2.1 → 6.3.0

package/AccordionSummary/AccordionSummary.js

@@ -38,6 +38,7 @@ const AccordionSummaryRoot = styled(ButtonBase, {
   };
   return {
     display: 'flex',
+    width: '100%',
     minHeight: 48,
     padding: theme.spacing(0, 2),
     transition: theme.transitions.create(['min-height', 'background-color'], transition),
@@ -60,7 +61,7 @@ const AccordionSummaryRoot = styled(ButtonBase, {
     }]
   };
 }));
-const AccordionSummaryContent = styled('div', {
+const AccordionSummaryContent = styled('span', {
   name: 'MuiAccordionSummary',
   slot: 'Content',
   overridesResolver: (props, styles) => styles.content
@@ -68,6 +69,7 @@ const AccordionSummaryContent = styled('div', {
   theme
 }) => ({
   display: 'flex',
+  textAlign: 'start',
   flexGrow: 1,
   margin: '12px 0',
   variants: [{
@@ -82,7 +84,7 @@ const AccordionSummaryContent = styled('div', {
     }
   }]
 })));
-const AccordionSummaryExpandIconWrapper = styled('div', {
+const AccordionSummaryExpandIconWrapper = styled('span', {
   name: 'MuiAccordionSummary',
   slot: 'ExpandIconWrapper',
   overridesResolver: (props, styles) => styles.expandIconWrapper
@@ -137,7 +139,6 @@ const AccordionSummary = /*#__PURE__*/React.forwardRef(function AccordionSummary
     focusRipple: false,
     disableRipple: true,
     disabled: disabled,
-    component: "div",
     "aria-expanded": expanded,
     className: clsx(classes.root, className),
     focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),

package/Autocomplete/Autocomplete.js

@@ -952,7 +952,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    * If provided, the options will be grouped under the returned string.
    * The groupBy value is also used as the text for group headings when `renderGroup` is not provided.
    *
-   * @param {Value} options The options to group.
+   * @param {Value} option The Autocomplete option.
    * @returns {string}
    */
   groupBy: PropTypes.func,

package/Backdrop/Backdrop.js

@@ -10,13 +10,6 @@ import useSlot from "../utils/useSlot.js";
 import Fade from "../Fade/index.js";
 import { getBackdropUtilityClass } from "./backdropClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const removeOwnerState = props => {
-  const {
-    ownerState,
-    ...rest
-  } = props;
-  return rest;
-};
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -105,12 +98,11 @@ const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
     externalForwardedProps,
     ownerState
   });
-  const transitionPropsRemoved = removeOwnerState(transitionProps);
   return /*#__PURE__*/_jsx(TransitionSlot, {
     in: open,
     timeout: transitionDuration,
     ...other,
-    ...transitionPropsRemoved,
+    ...transitionProps,
     children: /*#__PURE__*/_jsx(RootSlot, {
       "aria-hidden": true,
       ...rootProps,

package/CHANGELOG.md

@@ -1,5 +1,46 @@
 # [Versions](https://mui.com/versions/)
 
+## 6.3.0
+
+<!-- generated comparing v6.2.1..master -->
+
+_Dec 23, 2024_
+
+A big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
+
+- Fix invalid HTML structure in the Accordion component (#44408) @ZeeshanTamboli
+  The HTML elements of the Accordion summary have been updated:
+  - the root element is now button (previously div).
+  - summary content and the icon wrapper are now span (previously div).
+    This will only impact you if you used the HTML element as selectors in your styles.
+
+### `@mui/material@6.3.0`
+
+- [Accordion] Fix invalid HTML inside heading (#44408) @ZeeshanTamboli
+- [useAutocomplete] Improve TS typing of `groupedOptions` prop (#44657) @lewxdev
+- Prevent `ownerState` propagation for transition slots (#44401) @ZeeshanTamboli
+- [StepContent] Add slots and slotProps (#44742) @sai6855
+- [TablePagination] Add the rest of `slots` and `slotProps`. (#44570) @siriwatknp
+
+### `@mui/system@6.3.0`
+
+- Set `before` directly without using prepend for global styles (#44648) @siriwatknp
+
+### Docs
+
+- [material-ui] Improve `theme.applyStyles()` docs (#44658) @DiegoAndai
+- [material-ui] Update MD callout (#43958) @aarongarciah
+
+### Core
+
+- Remove unnecessary conditional around `.muiName =` (#44071) @Janpot
+- [blog] Material UI: 2024 EOY updates blog post (#44722) @alelthomas
+- Fix quickstart command in pigment docs (#44806) @yash49
+- [docs-infra] Remove Next.js production profiler (#44823) @romgrk
+- [docs-infra] Remove no longer support `optimizeFonts` Next.js option (#44802) @LukasTy
+
+All contributors of this release in alphabetical order: @aarongarciah, @alelthomas, @DiegoAndai, @Janpot, @lewxdev, @LukasTy, @romgrk, @sai6855, @siriwatknp, @yash49, @ZeeshanTamboli
+
 ## 6.2.1
 
 <!-- generated comparing v6.2.0..master -->

package/Collapse/Collapse.js

@@ -272,7 +272,10 @@ const Collapse = /*#__PURE__*/React.forwardRef(function Collapse(inProps, ref) {
     nodeRef: nodeRef,
     timeout: timeout === 'auto' ? null : timeout,
     ...other,
-    children: (state, childProps) => /*#__PURE__*/_jsx(CollapseRoot, {
+    children: (state, {
+      ownerState: incomingOwnerState,
+      ...restChildProps
+    }) => /*#__PURE__*/_jsx(CollapseRoot, {
       as: component,
       className: clsx(classes.root, className, {
         'entered': classes.entered,
@@ -283,13 +286,11 @@ const Collapse = /*#__PURE__*/React.forwardRef(function Collapse(inProps, ref) {
         ...style
       },
       ref: handleRef,
-      ...childProps,
-      // `ownerState` is set after `childProps` to override any existing `ownerState` property in `childProps`
-      // that might have been forwarded from the Transition component.
       ownerState: {
         ...ownerState,
         state
       },
+      ...restChildProps,
       children: /*#__PURE__*/_jsx(CollapseWrapper, {
         ownerState: {
           ...ownerState,

package/Fade/Fade.js

@@ -114,7 +114,10 @@ const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
     addEndListener: handleAddEndListener,
     timeout: timeout,
     ...other,
-    children: (state, childProps) => {
+    children: (state, {
+      ownerState,
+      ...restChildProps
+    }) => {
       return /*#__PURE__*/React.cloneElement(children, {
         style: {
           opacity: 0,
@@ -124,7 +127,7 @@ const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
           ...children.props.style
         },
         ref: handleRef,
-        ...childProps
+        ...restChildProps
       });
     }
   });

package/FilledInput/FilledInput.js

@@ -512,7 +512,5 @@ process.env.NODE_ENV !== "production" ? FilledInput.propTypes /* remove-proptype
    */
   value: PropTypes.any
 } : void 0;
-if (FilledInput) {
-  FilledInput.muiName = 'Input';
-}
+FilledInput.muiName = 'Input';
 export default FilledInput;

package/Grow/Grow.js

@@ -163,7 +163,10 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
     addEndListener: handleAddEndListener,
     timeout: timeout === 'auto' ? null : timeout,
     ...other,
-    children: (state, childProps) => {
+    children: (state, {
+      ownerState,
+      ...restChildProps
+    }) => {
       return /*#__PURE__*/React.cloneElement(children, {
         style: {
           opacity: 0,
@@ -174,7 +177,7 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
           ...children.props.style
         },
         ref: handleRef,
-        ...childProps
+        ...restChildProps
       });
     }
   });

package/Icon/Icon.js

@@ -181,7 +181,5 @@ process.env.NODE_ENV !== "production" ? Icon.propTypes /* remove-proptypes */ =
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
 } : void 0;
-if (Icon) {
-  Icon.muiName = 'Icon';
-}
+Icon.muiName = 'Icon';
 export default Icon;

package/Input/Input.js

@@ -357,7 +357,5 @@ process.env.NODE_ENV !== "production" ? Input.propTypes /* remove-proptypes */ =
    */
   value: PropTypes.any
 } : void 0;
-if (Input) {
-  Input.muiName = 'Input';
-}
+Input.muiName = 'Input';
 export default Input;

package/OutlinedInput/OutlinedInput.js

@@ -406,7 +406,5 @@ process.env.NODE_ENV !== "production" ? OutlinedInput.propTypes /* remove-propty
    */
   value: PropTypes.any
 } : void 0;
-if (OutlinedInput) {
-  OutlinedInput.muiName = 'Input';
-}
+OutlinedInput.muiName = 'Input';
 export default OutlinedInput;

package/Slide/Slide.js

@@ -217,7 +217,10 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
     in: inProp,
     timeout: timeout,
     ...other,
-    children: (state, childProps) => {
+    children: (state, {
+      ownerState,
+      ...restChildProps
+    }) => {
       return /*#__PURE__*/React.cloneElement(children, {
         ref: handleRef,
         style: {
@@ -225,7 +228,7 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
           ...style,
           ...children.props.style
         },
-        ...childProps
+        ...restChildProps
       });
     }
   });

package/StepContent/StepContent.d.ts

@@ -1,11 +1,38 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
-import { InternalStandardProps as StandardProps } from '..';
+import { CollapseProps, InternalStandardProps as StandardProps } from '..';
 import { Theme } from '../styles';
 import { TransitionProps } from '../transitions/transition';
 import { StepContentClasses } from './stepContentClasses';
+import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
 
-export interface StepContentProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>> {
+export interface StepContentSlots {
+  /**
+   * The component that renders the transition slot.
+   * [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
+   * @default Collapse
+   */
+  transition?: React.JSXElementConstructor<
+    TransitionProps & { children?: React.ReactElement<unknown, any> }
+  >;
+}
+
+export type StepContentSlotsAndSlotProps = CreateSlotsAndSlotProps<
+  StepContentSlots,
+  {
+    /**
+     * Props forwared to the transition slot.
+     * By default, the available props are based on the [Collapse](https://mui.com/material-ui/api/collapse/#props) component
+     */
+    transition: SlotProps<React.ElementType<CollapseProps>, {}, StepContentOwnerState>;
+  }
+>;
+
+export interface StepContentOwnerState extends StepContentProps {}
+
+export interface StepContentProps
+  extends StandardProps<React.HTMLAttributes<HTMLDivElement>>,
+    StepContentSlotsAndSlotProps {
   /**
    * The content of the component.
    */
@@ -22,6 +49,7 @@ export interface StepContentProps extends StandardProps<React.HTMLAttributes<HTM
    * The component used for the transition.
    * [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
    * @default Collapse
+   * @deprecated Use `slots.transition` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    */
   TransitionComponent?: React.JSXElementConstructor<
     TransitionProps & { children: React.ReactElement<unknown, any> }
@@ -37,6 +65,7 @@ export interface StepContentProps extends StandardProps<React.HTMLAttributes<HTM
   /**
    * Props applied to the transition element.
    * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component.
+   * @deprecated Use `slotProps.transition` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   TransitionProps?: TransitionProps;
 }

package/StepContent/StepContent.js

@@ -11,6 +11,7 @@ import Collapse from "../Collapse/index.js";
 import StepperContext from "../Stepper/StepperContext.js";
 import StepContext from "../Step/StepContext.js";
 import { getStepContentUtilityClass } from "./stepContentClasses.js";
+import useSlot from "../utils/useSlot.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -66,6 +67,8 @@ const StepContent = /*#__PURE__*/React.forwardRef(function StepContent(inProps,
     TransitionComponent = Collapse,
     transitionDuration: transitionDurationProp = 'auto',
     TransitionProps,
+    slots = {},
+    slotProps = {},
     ...other
   } = props;
   const {
@@ -90,19 +93,32 @@ const StepContent = /*#__PURE__*/React.forwardRef(function StepContent(inProps,
   if (transitionDurationProp === 'auto' && !TransitionComponent.muiSupportAuto) {
     transitionDuration = undefined;
   }
+  const externalForwardedProps = {
+    slots,
+    slotProps: {
+      transition: TransitionProps,
+      ...slotProps
+    }
+  };
+  const [TransitionSlot, transitionProps] = useSlot('transition', {
+    elementType: StepContentTransition,
+    externalForwardedProps,
+    ownerState,
+    className: classes.transition,
+    additionalProps: {
+      in: active || expanded,
+      timeout: transitionDuration,
+      unmountOnExit: true
+    }
+  });
   return /*#__PURE__*/_jsx(StepContentRoot, {
     className: clsx(classes.root, className),
     ref: ref,
     ownerState: ownerState,
     ...other,
-    children: /*#__PURE__*/_jsx(StepContentTransition, {
+    children: /*#__PURE__*/_jsx(TransitionSlot, {
       as: TransitionComponent,
-      in: active || expanded,
-      className: classes.transition,
-      ownerState: ownerState,
-      timeout: transitionDuration,
-      unmountOnExit: true,
-      ...TransitionProps,
+      ...transitionProps,
       children: children
     })
   });
@@ -124,6 +140,20 @@ process.env.NODE_ENV !== "production" ? StepContent.propTypes /* remove-proptype
    * @ignore
    */
   className: PropTypes.string,
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    transition: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    transition: PropTypes.elementType
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
@@ -132,6 +162,7 @@ process.env.NODE_ENV !== "production" ? StepContent.propTypes /* remove-proptype
    * The component used for the transition.
    * [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
    * @default Collapse
+   * @deprecated Use `slots.transition` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    */
   TransitionComponent: PropTypes.elementType,
   /**
@@ -149,6 +180,7 @@ process.env.NODE_ENV !== "production" ? StepContent.propTypes /* remove-proptype
   /**
    * Props applied to the transition element.
    * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component.
+   * @deprecated Use `slotProps.transition` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   TransitionProps: PropTypes.object
 } : void 0;

package/StepLabel/StepLabel.js

@@ -267,7 +267,5 @@ process.env.NODE_ENV !== "production" ? StepLabel.propTypes /* remove-proptypes
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
 } : void 0;
-if (StepLabel) {
-  StepLabel.muiName = 'StepLabel';
-}
+StepLabel.muiName = 'StepLabel';
 export default StepLabel;

package/SvgIcon/SvgIcon.js

@@ -230,7 +230,5 @@ process.env.NODE_ENV !== "production" ? SvgIcon.propTypes /* remove-proptypes */
    */
   viewBox: PropTypes.string
 } : void 0;
-if (SvgIcon) {
-  SvgIcon.muiName = 'SvgIcon';
-}
+SvgIcon.muiName = 'SvgIcon';
 export default SvgIcon;

package/TablePagination/TablePagination.d.ts

@@ -2,11 +2,14 @@ import * as React from 'react';
 import { SxProps } from '@mui/system';
 import { Theme } from '../styles';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
-import { TablePaginationActionsProps } from './TablePaginationActions';
+import { TablePaginationActionsProps, TablePaginationActionsSlots } from './TablePaginationActions';
 import { TableCellProps } from '../TableCell';
 import { IconButtonProps } from '../IconButton';
 import { SelectProps } from '../Select';
 import { TablePaginationClasses } from './tablePaginationClasses';
+import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
+import { ToolbarProps } from '../Toolbar';
+import { MenuItemProps } from '../MenuItem';
 
 export interface LabelDisplayedRowsArgs {
   from: number;
@@ -15,6 +18,133 @@ export interface LabelDisplayedRowsArgs {
   page: number;
 }
 
+export interface TablePaginationRootSlotPropsOverrides {}
+
+export interface TablePaginationToolbarSlotPropsOverrides {}
+
+export interface TablePaginationSpacerSlotPropsOverrides {}
+
+export interface TablePaginationSelectLabelSlotPropsOverrides {}
+
+export interface TablePaginationSelectSlotPropsOverrides {}
+
+export interface TablePaginationMenuItemSlotPropsOverrides {}
+
+export interface TablePaginationDisplayedRowsSlotPropsOverrides {}
+
+export interface TablePaginationActionsSlotPropsOverrides {}
+
+export interface TablePaginationSlots {
+  /**
+   * The component that renders the root slot.
+   * [Follow this guide](https://mui.com/material-ui/api/table-cell/#props) to learn more about the requirements for this component.
+   * @default TableCell
+   */
+  root: React.ElementType;
+  /**
+   * The component that renders the toolbar slot.
+   * [Follow this guide](https://mui.com/material-ui/api/toolbar/#props) to learn more about the requirements for this component.
+   * @default Toolbar
+   */
+  toolbar: React.ElementType;
+  /**
+   * The tag that renders the spacer slot.
+   * @default 'div'
+   */
+  spacer: React.ElementType;
+  /**
+   * The tag that renders the selectLabel slot.
+   * @default 'p'
+   */
+  selectLabel: React.ElementType;
+  /**
+   * The component that renders the select slot.
+   * [Follow this guide](https://mui.com/material-ui/api/select/#props) to learn more about the requirements for this component.
+   * @default Select
+   */
+  select: React.ElementType;
+  /**
+   * The component that renders the select slot.
+   * [Follow this guide](https://mui.com/material-ui/api/menu-item/#props) to learn more about the requirements for this component.
+   * @default MenuItem
+   */
+  menuItem: React.ElementType;
+  /**
+   * The tag that renders the displayedRows slot.
+   * @default 'p'
+   */
+  displayedRows: React.ElementType;
+  /**
+   * The slots that passed to the actions slot.
+   */
+  actions: TablePaginationActionsSlots;
+}
+
+export type TablePaginationSlotsAndSlotProps = CreateSlotsAndSlotProps<
+  TablePaginationSlots,
+  {
+    /**
+     * Props forwarded to the root slot.
+     * By default, the avaible props are based on the [TableCell](https://mui.com/material-ui/api/table-cell/#props) component.
+     */
+    root: SlotProps<
+      React.ElementType<TableCellProps>,
+      TablePaginationRootSlotPropsOverrides,
+      TablePaginationOwnerState
+    >;
+    /**
+     * Props forwarded to the toolbar slot.
+     * By default, the avaible props are based on the [Toolbar](https://mui.com/material-ui/api/toolbar/#props) component.
+     */
+    toolbar: SlotProps<
+      React.ElementType<ToolbarProps>,
+      TablePaginationToolbarSlotPropsOverrides,
+      TablePaginationOwnerState
+    >;
+    /**
+     * Props forwarded to the spacer slot.
+     * By default, the avaible props are based on the div element.
+     */
+    spacer: SlotProps<'div', TablePaginationSpacerSlotPropsOverrides, TablePaginationOwnerState>;
+    /**
+     * Props forwarded to the selectLabel slot.
+     * By default, the avaible props are based on the paragraph element.
+     */
+    selectLabel: SlotProps<
+      'p',
+      TablePaginationSelectLabelSlotPropsOverrides,
+      TablePaginationOwnerState
+    >;
+    /**
+     * Props forwarded to the select slot.
+     * By default, the avaible props are based on the [Select](https://mui.com/material-ui/api/select/#props) component.
+     */
+    select: Partial<SelectProps> & TablePaginationSelectSlotPropsOverrides;
+    /**
+     * Props forwarded to the menuItem slot.
+     * By default, the avaible props are based on the [MenuItem](https://mui.com/material-ui/api/menu-item/#props) component.
+     */
+    menuItem: SlotProps<
+      React.ElementType<MenuItemProps>,
+      TablePaginationMenuItemSlotPropsOverrides,
+      TablePaginationOwnerState
+    >;
+    /**
+     * Props forwarded to the displayedRows slot.
+     * By default, the avaible props are based on the paragraph element.
+     */
+    displayedRows: SlotProps<
+      'p',
+      TablePaginationDisplayedRowsSlotPropsOverrides,
+      TablePaginationOwnerState
+    >;
+    /**
+     * Props forwarded to the actions slot.
+     */
+    actions: TablePaginationActionsProps['slotProps'] & TablePaginationActionsSlotPropsOverrides;
+  }
+>;
+
 /**
  * This type is kept for compatibility. Use `TablePaginationOwnProps` instead.
  */
@@ -134,30 +264,16 @@ export interface TablePaginationOwnProps extends TablePaginationBaseProps {
    * @default false
    */
   showLastButton?: boolean;
-  /**
-   * The props used for each slot inside the TablePagination.
-   * @default {}
-   */
-  slotProps?: {
-    actions?: TablePaginationActionsProps['slotProps'];
-    select?: Partial<SelectProps>;
-  };
-  /**
-   * The components used for each slot inside the TablePagination.
-   * Either a string to use a HTML element or a component.
-   * @default {}
-   */
-  slots?: {
-    actions?: TablePaginationActionsProps['slots'];
-  };
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx?: SxProps<Theme>;
 }
 
+export interface TablePaginationOwnerState extends TablePaginationOwnProps {}
+
 export interface TablePaginationTypeMap<AdditionalProps, RootComponent extends React.ElementType> {
-  props: AdditionalProps & TablePaginationOwnProps;
+  props: AdditionalProps & TablePaginationOwnProps & TablePaginationSlotsAndSlotProps;
   defaultComponent: RootComponent;
 }