@mui/material 6.4.5 → 6.4.6

package/Accordion/Accordion.d.ts

@@ -5,7 +5,7 @@ import { TransitionProps } from '../transitions/transition';
 import { AccordionClasses } from './accordionClasses';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 import { ExtendPaperTypeMap } from '../Paper/Paper';
-import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
+import { CreateSlotsAndSlotProps, SlotComponentProps, SlotProps } from '../utils/types';
 
 export interface AccordionSlots {
   /**
@@ -18,9 +18,7 @@ export interface AccordionSlots {
    * [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> }
-  >;
+  transition: React.ElementType;
 }
 
 export interface AccordionTransitionSlotPropsOverrides {}
@@ -29,14 +27,18 @@ export interface AccordionHeadingSlotPropsOverrides {}
 export type AccordionSlotsAndSlotProps = CreateSlotsAndSlotProps<
   AccordionSlots,
   {
-    heading: SlotProps<
-      React.ElementType<React.HTMLProps<HTMLHeadingElement>>,
-      AccordionHeadingSlotPropsOverrides,
-      AccordionOwnerState
-    >;
-    transition: SlotProps<
-      React.ElementType<TransitionProps>,
-      AccordionTransitionSlotPropsOverrides,
+    /**
+     * Props forwarded to the heading slot.
+     * By default, the avaible props are based on the h3 element.
+     */
+    heading: SlotProps<'h3', AccordionHeadingSlotPropsOverrides, AccordionOwnerState>;
+    /**
+     * Props forwarded to the transition slot.
+     * By default, the avaible props are based on the [Collapse](https://mui.com/material-ui/api/collapse/#props) component.
+     */
+    transition: SlotComponentProps<
+      React.ElementType,
+      TransitionProps & AccordionTransitionSlotPropsOverrides,
       AccordionOwnerState
     >;
   }

package/Alert/Alert.d.ts

@@ -67,29 +67,17 @@ export type AlertSlotsAndSlotProps = CreateSlotsAndSlotProps<
      * Props forwarded to the icon slot.
      * By default, the avaible props are based on a div element.
      */
-    icon: SlotProps<
-      React.ElementType<React.DetailsHTMLAttributes<HTMLDivElement>>,
-      AlertIconSlotPropsOverrides,
-      AlertOwnerState
-    >;
+    icon: SlotProps<'div', AlertIconSlotPropsOverrides, AlertOwnerState>;
     /**
      * Props forwarded to the message slot.
      * By default, the avaible props are based on a div element.
      */
-    message: SlotProps<
-      React.ElementType<React.DetailsHTMLAttributes<HTMLDivElement>>,
-      AlertMessageSlotPropsOverrides,
-      AlertOwnerState
-    >;
+    message: SlotProps<'div', AlertMessageSlotPropsOverrides, AlertOwnerState>;
     /**
      * Props forwarded to the action slot.
      * By default, the avaible props are based on a div element.
      */
-    action: SlotProps<
-      React.ElementType<React.DetailsHTMLAttributes<HTMLDivElement>>,
-      AlertActionSlotPropsOverrides,
-      AlertOwnerState
-    >;
+    action: SlotProps<'div', AlertActionSlotPropsOverrides, AlertOwnerState>;
     /**
      * Props forwarded to the closeButton slot.
      * By default, the avaible props are based on the [IconButton](https://mui.com/material-ui/api/icon-button/#props) component.

package/Backdrop/Backdrop.d.ts

@@ -5,7 +5,7 @@ import { TransitionProps } from '../transitions/transition';
 import { Theme } from '../styles';
 import { BackdropClasses } from './backdropClasses';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
-import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
+import { CreateSlotsAndSlotProps, SlotComponentProps, SlotProps } from '../utils/types';
 
 export interface BackdropSlots {
   /**
@@ -18,9 +18,7 @@ export interface BackdropSlots {
    * [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
    * @default Fade
    */
-  transition: React.JSXElementConstructor<
-    TransitionProps & { children: React.ReactElement<unknown, any> }
-  >;
+  transition: React.ElementType;
 }
 export interface BackdropComponentsPropsOverrides {}
 
@@ -29,14 +27,18 @@ export interface BackdropTransitionSlotPropsOverrides {}
 export type BackdropSlotsAndSlotProps = CreateSlotsAndSlotProps<
   BackdropSlots,
   {
-    root: SlotProps<
-      React.ElementType<HTMLDivElement>,
-      BackdropComponentsPropsOverrides,
-      BackdropOwnerState
-    >;
-    transition: SlotProps<
-      React.JSXElementConstructor<TransitionProps>,
-      BackdropTransitionSlotPropsOverrides,
+    /**
+     * Props forwarded to the transition slot.
+     * By default, the avaible props are based on the div element.
+     */
+    root: SlotProps<'div', BackdropComponentsPropsOverrides, BackdropOwnerState>;
+    /**
+     * Props forwarded to the transition slot.
+     * By default, the avaible props are based on the [Fade](https://mui.com/material-ui/api/fade/#props) component.
+     */
+    transition: SlotComponentProps<
+      React.ElementType,
+      TransitionProps & BackdropTransitionSlotPropsOverrides,
       BackdropOwnerState
     >;
   }

package/CHANGELOG.md

@@ -1,5 +1,43 @@
 # [Versions](https://mui.com/versions/)
 
+## 6.4.6
+
+<!-- generated comparing v6.4.5..v6.x -->
+
+_Feb 26, 2025_
+
+A big thanks to the 4 contributors who made this release possible.
+
+### `@mui/material@6.4.6`
+
+- [Checkbox] Add slots and slotProps (#45361) @siriwatknp
+- [Drawer] Deprecate *Props and complete `slots`, `slotProps` (#45377) @siriwatknp
+- [Grid] Improve Grid2 upgrade experience (#45372) @DiegoAndai
+- [InputBase] Deprecate composed classes (#45366) @siriwatknp
+- Fix `slotProps.transition` types (#45367) @siriwatknp
+- Allow nested theme creation with `vars` (#45368) @siriwatknp
+- Fix wrong slotProps of DetailsHTMLAttributes types (#45356) @siriwatknp
+- [Popover] Deprecate *Props and complete `slots`, `slotProps` (#45337) @siriwatknp
+- [Radio] Add slots and slotProps (#45364) @siriwatknp
+- [Slider] Fix css class selector in migration guide (#45409) @sai6855
+- [Slider] Fix spacings in .md files (#45393) @sai6855
+- [Snackbar] Add Slots and SlotProps (#45103) (#45352) @siriwatknp
+- [SpeedDialAction] Add slots and slotProps (#45365) @siriwatknp
+- [SwitchBase] Deprecate `inputProps` and complete slots, slotProps (#45338) @siriwatknp
+- [Tabs] Deprecate *Props and complete slots, slotProps (#45012) (#45355) @siriwatknp
+- [Menu] Deprecate *Props and complete `slots`, `slotProps`  (#45369) @siriwatknp
+
+### Docs
+
+- [Autocomplete] Remove unnecessary renderTags prop from Sizes demo (#45403) @ZeeshanTamboli
+- Fix typo in slider docs (#45392) @sai6855
+
+### Core
+
+- [test] Remove unused renderTags prop and fix key warning in Autocomplete regression test (#45412) @ZeeshanTamboli
+
+All contributors of this release in alphabetical order: @DiegoAndai, @sai6855, @siriwatknp, @ZeeshanTamboli
+
 ## 6.4.5
 
 <!-- generated comparing v6.4.4..v6.x -->

package/CardHeader/CardHeader.d.ts

@@ -60,38 +60,22 @@ export type CardHeaderSlotsAndSlotProps = CreateSlotsAndSlotProps<
      * 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
-    >;
+    root: SlotProps<'div', 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
-    >;
+    avatar: SlotProps<'div', 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
-    >;
+    action: SlotProps<'div', 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
-    >;
+    content: SlotProps<'div', 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.

package/Checkbox/Checkbox.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { SxProps } from '@mui/system';
 import { OverridableStringUnion } from '@mui/types';
 import { InternalStandardProps as StandardProps, Theme } from '..';
+import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
 import { SwitchBaseProps } from '../internal/SwitchBase';
 import { CheckboxClasses } from './checkboxClasses';
 
@@ -9,8 +10,49 @@ export interface CheckboxPropsSizeOverrides {}
 
 export interface CheckboxPropsColorOverrides {}
 
+export interface CheckboxRootSlotPropsOverrides {}
+
+export interface CheckboxInputSlotPropsOverrides {}
+
+export interface CheckboxSlots {
+  /**
+   * The component that renders the root slot.
+   * @default SwitchBase
+   */
+  root: React.ElementType;
+  /**
+   * The component that renders the input slot.
+   * @default SwitchBase's input
+   */
+  input: React.ElementType;
+}
+
+export type CheckboxSlotsAndSlotProps = CreateSlotsAndSlotProps<
+  CheckboxSlots,
+  {
+    /**
+     * Props forwarded to the root slot.
+     * By default, the avaible props are based on the div element.
+     */
+    root: SlotProps<
+      React.ElementType<SwitchBaseProps>,
+      CheckboxRootSlotPropsOverrides,
+      CheckboxOwnerState
+    >;
+    /**
+     * Props forwarded to the input slot.
+     * By default, the avaible props are based on the input element.
+     */
+    input: SlotProps<'input', CheckboxInputSlotPropsOverrides, CheckboxOwnerState>;
+  }
+>;
+
 export interface CheckboxProps
-  extends StandardProps<SwitchBaseProps, 'checkedIcon' | 'color' | 'icon' | 'type'> {
+  extends StandardProps<
+      SwitchBaseProps,
+      'checkedIcon' | 'color' | 'icon' | 'type' | 'slots' | 'slotProps'
+    >,
+    CheckboxSlotsAndSlotProps {
   /**
    * If `true`, the component is checked.
    */
@@ -66,14 +108,6 @@ export interface CheckboxProps
    * @default <IndeterminateCheckBoxIcon />
    */
   indeterminateIcon?: React.ReactNode;
-  /**
-   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.
-   */
-  inputProps?: SwitchBaseProps['inputProps'];
-  /**
-   * Pass a ref to the `input` element.
-   */
-  inputRef?: React.Ref<HTMLInputElement>;
   /**
    * Callback fired when the state is changed.
    *
@@ -103,6 +137,8 @@ export interface CheckboxProps
   value?: SwitchBaseProps['value'];
 }
 
+export interface CheckboxOwnerState extends Omit<CheckboxProps, 'slots' | 'slotProps'> {}
+
 /**
  *
  * Demos:

package/Checkbox/Checkbox.js

@@ -3,7 +3,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import refType from '@mui/utils/refType';
 import composeClasses from '@mui/utils/composeClasses';
 import { alpha } from '@mui/system/colorManipulator';
 import SwitchBase from "../internal/SwitchBase.js";
@@ -17,6 +16,8 @@ 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 { mergeSlotProps } from "../utils/index.js";
+import useSlot from "../utils/useSlot.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -114,6 +115,8 @@ const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(inProps, ref) {
     size = 'medium',
     disableRipple = false,
     className,
+    slots = {},
+    slotProps = {},
     ...other
   } = props;
   const icon = indeterminate ? indeterminateIconProp : iconProp;
@@ -126,23 +129,37 @@ const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(inProps, ref) {
     size
   };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(CheckboxRoot, {
-    type: "checkbox",
-    inputProps: {
-      'data-indeterminate': indeterminate,
-      ...inputProps
-    },
-    icon: /*#__PURE__*/React.cloneElement(icon, {
-      fontSize: icon.props.fontSize ?? size
-    }),
-    checkedIcon: /*#__PURE__*/React.cloneElement(indeterminateIcon, {
-      fontSize: indeterminateIcon.props.fontSize ?? size
-    }),
-    ownerState: ownerState,
-    ref: ref,
+  const externalInputProps = slotProps.input ?? inputProps;
+  const [RootSlot, rootSlotProps] = useSlot('root', {
+    ref,
+    elementType: CheckboxRoot,
     className: clsx(classes.root, className),
-    disableRipple: disableRipple,
-    ...other,
+    shouldForwardComponentProp: true,
+    externalForwardedProps: {
+      slots,
+      slotProps,
+      ...other
+    },
+    ownerState,
+    additionalProps: {
+      type: 'checkbox',
+      icon: /*#__PURE__*/React.cloneElement(icon, {
+        fontSize: icon.props.fontSize ?? size
+      }),
+      checkedIcon: /*#__PURE__*/React.cloneElement(indeterminateIcon, {
+        fontSize: indeterminateIcon.props.fontSize ?? size
+      }),
+      disableRipple,
+      slots,
+      slotProps: {
+        input: mergeSlotProps(typeof externalInputProps === 'function' ? externalInputProps(ownerState) : externalInputProps, {
+          'data-indeterminate': indeterminate
+        })
+      }
+    }
+  });
+  return /*#__PURE__*/_jsx(RootSlot, {
+    ...rootSlotProps,
     classes: classes
   });
 });
@@ -213,12 +230,9 @@ process.env.NODE_ENV !== "production" ? Checkbox.propTypes /* remove-proptypes *
   indeterminateIcon: PropTypes.node,
   /**
    * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.
+   * @deprecated Use `slotProps.input` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   inputProps: PropTypes.object,
-  /**
-   * Pass a ref to the `input` element.
-   */
-  inputRef: refType,
   /**
    * Callback fired when the state is changed.
    *
@@ -237,6 +251,22 @@ process.env.NODE_ENV !== "production" ? Checkbox.propTypes /* remove-proptypes *
    * @default 'medium'
    */
   size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['medium', 'small']), PropTypes.string]),
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    input: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    input: PropTypes.elementType,
+    root: PropTypes.elementType
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/Dialog/Dialog.d.ts

@@ -6,7 +6,7 @@ import { PaperProps } from '../Paper';
 import { ModalProps } from '../Modal';
 import { TransitionProps } from '../transitions/transition';
 import { DialogClasses } from './dialogClasses';
-import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
+import { CreateSlotsAndSlotProps, SlotComponentProps, SlotProps } from '../utils/types';
 
 export interface DialogSlots {
   /**
@@ -66,9 +66,9 @@ export type DialogSlotsAndSlotProps = CreateSlotsAndSlotProps<
      * Props forwarded to the transition slot.
      * By default, the avaible props are based on the [Fade](https://mui.com/material-ui/api/fade/#props) component.
      */
-    transition: SlotProps<
-      React.ElementType<TransitionProps>,
-      DialogTransitionSlotPropsOverrides,
+    transition: SlotComponentProps<
+      React.ElementType,
+      TransitionProps & DialogTransitionSlotPropsOverrides,
       DialogOwnerState
     >;
     /**

package/Drawer/Drawer.d.ts

@@ -1,13 +1,99 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
 import { InternalStandardProps as StandardProps, Theme } from '..';
+import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
 import { ModalProps } from '../Modal';
+import { BackdropProps } from '../Backdrop';
 import { SlideProps } from '../Slide';
 import { PaperProps } from '../Paper';
 import { TransitionProps } from '../transitions/transition';
 import { DrawerClasses } from './drawerClasses';
 
-export interface DrawerProps extends StandardProps<ModalProps, 'open' | 'children'> {
+export interface DrawerRootSlotPropsOverrides {}
+
+export interface DrawerDockedSlotPropsOverrides {}
+
+export interface DrawerPaperSlotPropsOverrides {}
+
+export interface DrawerTransitionSlotPropsOverrides {}
+
+export interface DrawerBackdropSlotPropsOverrides {}
+
+export interface DrawerSlots {
+  /**
+   * The component used for the root when the variant is `temporary`.
+   * @default Modal
+   */
+  root: React.ElementType;
+  /**
+   * The component used for the Modal backdrop.
+   * @default Backdrop
+   */
+  backdrop: React.ElementType;
+  /**
+   * The component used for the root element when the variant is `permanent` or `persistent`.
+   * @default div
+   */
+  docked: React.ElementType;
+  /**
+   * The component used for the paper.
+   * @default Paper
+   */
+  paper: React.ElementType;
+  /**
+   * 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 Slide
+   */
+  transition: React.ElementType;
+}
+
+export type DrawerSlotsAndSlotProps = CreateSlotsAndSlotProps<
+  DrawerSlots,
+  {
+    /**
+     * Props forwarded to the root slot.
+     * By default, the avaible props are based on the [Modal](https://mui.com/material-ui/api/modal/#props) component.
+     */
+    root: SlotProps<React.ElementType<ModalProps>, DrawerRootSlotPropsOverrides, DrawerOwnerState>;
+    /**
+     * Props forwarded to the backdrop slot.
+     * By default, the avaible props are based on the [Backdrop](https://mui.com/material-ui/api/backdrop/#props) component.
+     */
+    backdrop: SlotProps<
+      React.ElementType<BackdropProps>,
+      DrawerBackdropSlotPropsOverrides,
+      DrawerOwnerState
+    >;
+    /**
+     * Props forwarded to the docked slot.
+     * By default, the avaible props are based on a div element.
+     */
+    docked: SlotProps<'div', DrawerDockedSlotPropsOverrides, DrawerOwnerState>;
+    /**
+     * Props forwarded to the paper slot.
+     * By default, the avaible props are based on the [Paper](https://mui.com/material-ui/api/paper/#props) component.
+     */
+    paper: SlotProps<
+      React.ElementType<PaperProps>,
+      DrawerPaperSlotPropsOverrides,
+      DrawerOwnerState
+    >;
+    /**
+     * Props forwarded to the transition slot.
+     * By default, the avaible props are based on the [Slide](https://mui.com/material-ui/api/slide/#props) component.
+     */
+    transition: SlotProps<
+      React.ElementType,
+      TransitionProps & DrawerTransitionSlotPropsOverrides,
+      DrawerOwnerState
+    >;
+  }
+>;
+
+export interface DrawerProps
+  extends StandardProps<ModalProps, 'open' | 'children' | 'slots' | 'slotProps'>,
+    DrawerSlotsAndSlotProps {
   /**
    * Side from which the drawer will appear.
    * @default 'left'
@@ -46,11 +132,13 @@ export interface DrawerProps extends StandardProps<ModalProps, 'open' | 'childre
   open?: boolean;
   /**
    * Props applied to the [`Paper`](https://mui.com/material-ui/api/paper/) element.
+   * @deprecated use the `slotProps.paper` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    * @default {}
    */
   PaperProps?: Partial<PaperProps<React.ElementType>>;
   /**
    * Props applied to the [`Slide`](https://mui.com/material-ui/api/slide/) element.
+   * @deprecated use the `slotProps.transition` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   SlideProps?: Partial<SlideProps>;
   /**
@@ -73,6 +161,9 @@ export interface DrawerProps extends StandardProps<ModalProps, 'open' | 'childre
   variant?: 'permanent' | 'persistent' | 'temporary';
 }
 
+// omit `slots` and `slotProps` to prevent recusion
+export interface DrawerOwnerState extends Omit<DrawerProps, 'slots' | 'slotProps'> {}
+
 /**
  * The props of the [Modal](https://mui.com/material-ui/api/modal/) component are available
  * when `variant="temporary"` is set.