@mui/material 6.4.5 → 6.4.6

package/Tooltip/Tooltip.d.ts

@@ -41,26 +41,34 @@ export interface TooltipSlots {
 export type TooltipSlotsAndSlotProps = CreateSlotsAndSlotProps<
   TooltipSlots,
   {
+    /**
+     * Props forwarded to the popper slot.
+     * By default, the avaible props are based on the [Popper](https://mui.com/material-ui/api/popper/#props) component.
+     */
     popper: SlotProps<
       React.ElementType<PopperProps>,
       TooltipPopperSlotPropsOverrides,
       TooltipOwnerState
     >;
+    /**
+     * Props forwarded to the transition slot.
+     * By default, the avaible props are based on the [Grow](https://mui.com/material-ui/api/grow/#props) component.
+     */
     transition: SlotProps<
-      React.ElementType<TransitionProps>,
-      TooltipTransitionSlotPropsOverrides,
-      TooltipOwnerState
-    >;
-    tooltip: SlotProps<
-      React.ElementType<React.HTMLProps<HTMLDivElement>>,
-      TooltipTooltipSlotPropsOverrides,
-      TooltipOwnerState
-    >;
-    arrow: SlotProps<
-      React.ElementType<React.HTMLProps<HTMLSpanElement>>,
-      TooltipArrowSlotPropsOverrides,
+      React.ElementType,
+      TransitionProps & TooltipTransitionSlotPropsOverrides,
       TooltipOwnerState
     >;
+    /**
+     * Props forwarded to the tooltip slot.
+     * By default, the avaible props are based on the div element.
+     */
+    tooltip: SlotProps<'div', TooltipTooltipSlotPropsOverrides, TooltipOwnerState>;
+    /**
+     * Props forwarded to the tooltip slot.
+     * By default, the avaible props are based on the span element.
+     */
+    arrow: SlotProps<'span', TooltipArrowSlotPropsOverrides, TooltipOwnerState>;
   }
 >;
 

package/index.js

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

package/internal/SwitchBase.d.ts

@@ -2,9 +2,39 @@ import * as React from 'react';
 import { InternalStandardProps as StandardProps } from '..';
 import { ButtonBaseProps } from '../ButtonBase';
 import { SwitchBaseClasses } from './switchBaseClasses';
+import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
+
+interface SwitchBaseSlots {
+  /**
+   * The component that renders the root slot.
+   * @default ButtonBase
+   */
+  root: React.ElementType;
+  /**
+   * The component that renders the input slot.
+   * @default 'input'
+   */
+  input: React.ElementType;
+}
+
+type SwitchBaseSlotsAndSlotProps = CreateSlotsAndSlotProps<
+  SwitchBaseSlots,
+  {
+    /**
+     * Props forwarded to the root slot.
+     * By default, the avaible props are based on the [ButtonBase](https://mui.com/material-ui/api/button-base/#props) component.
+     */
+    root: SlotProps<React.ElementType<ButtonBaseProps>, {}, SwitchBaseOwnerState>;
+    /**
+     * Props forwarded to the input slot.
+     */
+    input: SlotProps<'input', {}, SwitchBaseOwnerState>;
+  }
+>;
 
 export interface SwitchBaseProps
-  extends StandardProps<ButtonBaseProps, 'children' | 'onChange' | 'type' | 'value'> {
+  extends StandardProps<ButtonBaseProps, 'children' | 'onChange' | 'type' | 'value'>,
+    SwitchBaseSlotsAndSlotProps {
   autoFocus?: boolean;
   /**
    * If `true`, the component is checked.
@@ -48,10 +78,12 @@ export interface SwitchBaseProps
   id?: string;
   /**
    * [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?: React.InputHTMLAttributes<HTMLInputElement>;
   /**
    * Pass a ref to the `input` element.
+   * @deprecated Use `slotProps.input.ref` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   inputRef?: React.Ref<any>;
   /**
@@ -80,6 +112,8 @@ export interface SwitchBaseProps
   value?: unknown;
 }
 
+export interface SwitchBaseOwnerState extends Omit<SwitchBaseProps, 'slots' | 'slotProps'> {}
+
 declare const SwitchBase: React.JSXElementConstructor<SwitchBaseProps>;
 
 export default SwitchBase;

package/internal/SwitchBase.js

@@ -2,7 +2,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 capitalize from "../utils/capitalize.js";
@@ -12,6 +11,7 @@ import useControlled from "../utils/useControlled.js";
 import useFormControl from "../FormControl/useFormControl.js";
 import ButtonBase from "../ButtonBase/index.js";
 import { getSwitchBaseUtilityClass } from "./switchBaseClasses.js";
+import useSlot from "../utils/useSlot.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -86,7 +86,6 @@ const SwitchBase = /*#__PURE__*/React.forwardRef(function SwitchBase(props, ref)
     autoFocus,
     checked: checkedProp,
     checkedIcon,
-    className,
     defaultChecked,
     disabled: disabledProp,
     disableFocusRipple = false,
@@ -104,6 +103,8 @@ const SwitchBase = /*#__PURE__*/React.forwardRef(function SwitchBase(props, ref)
     tabIndex,
     type,
     value,
+    slots = {},
+    slotProps = {},
     ...other
   } = props;
   const [checked, setCheckedState] = useControlled({
@@ -156,38 +157,75 @@ const SwitchBase = /*#__PURE__*/React.forwardRef(function SwitchBase(props, ref)
     edge
   };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsxs(SwitchBaseRoot, {
-    component: "span",
-    className: clsx(classes.root, className),
-    centerRipple: true,
-    focusRipple: !disableFocusRipple,
-    disabled: disabled,
-    tabIndex: null,
-    role: undefined,
-    onFocus: handleFocus,
-    onBlur: handleBlur,
-    ownerState: ownerState,
-    ref: ref,
-    ...other,
-    children: [/*#__PURE__*/_jsx(SwitchBaseInput, {
-      autoFocus: autoFocus,
+  const externalForwardedProps = {
+    slots,
+    slotProps: {
+      input: inputProps,
+      ...slotProps
+    }
+  };
+  const [RootSlot, rootSlotProps] = useSlot('root', {
+    ref,
+    elementType: SwitchBaseRoot,
+    className: classes.root,
+    shouldForwardComponentProp: true,
+    externalForwardedProps: {
+      ...externalForwardedProps,
+      component: 'span',
+      ...other
+    },
+    getSlotProps: handlers => ({
+      ...handlers,
+      onFocus: event => {
+        handlers.onFocus?.(event);
+        handleFocus(event);
+      },
+      onBlur: event => {
+        handlers.onBlur?.(event);
+        handleBlur(event);
+      }
+    }),
+    ownerState,
+    additionalProps: {
+      centerRipple: true,
+      focusRipple: !disableFocusRipple,
+      disabled,
+      role: undefined,
+      tabIndex: null
+    }
+  });
+  const [InputSlot, inputSlotProps] = useSlot('input', {
+    ref: inputRef,
+    elementType: SwitchBaseInput,
+    className: classes.input,
+    externalForwardedProps,
+    getSlotProps: handlers => ({
+      onChange: event => {
+        handlers.onChange?.(event);
+        handleInputChange(event);
+      }
+    }),
+    ownerState,
+    additionalProps: {
+      autoFocus,
       checked: checkedProp,
-      defaultChecked: defaultChecked,
-      className: classes.input,
-      disabled: disabled,
+      defaultChecked,
+      disabled,
       id: hasLabelFor ? id : undefined,
-      name: name,
-      onChange: handleInputChange,
-      readOnly: readOnly,
-      ref: inputRef,
-      required: required,
-      ownerState: ownerState,
-      tabIndex: tabIndex,
-      type: type,
+      name,
+      readOnly,
+      required,
+      tabIndex,
+      type,
       ...(type === 'checkbox' && value === undefined ? {} : {
         value
-      }),
-      ...inputProps
+      })
+    }
+  });
+  return /*#__PURE__*/_jsxs(RootSlot, {
+    ...rootSlotProps,
+    children: [/*#__PURE__*/_jsx(InputSlot, {
+      ...inputSlotProps
     }), checked ? checkedIcon : icon]
   });
 });
@@ -280,6 +318,22 @@ process.env.NODE_ENV !== "production" ? SwitchBase.propTypes = {
    * If `true`, the `input` element is required.
    */
   required: PropTypes.bool,
+  /**
+   * 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/modern/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/modern/Drawer/Drawer.js

@@ -15,6 +15,8 @@ import { styled, useTheme } from "../zero-styled/index.js";
 import memoTheme from "../utils/memoTheme.js";
 import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import { getDrawerUtilityClass } from "./drawerClasses.js";
+import useSlot from "../utils/useSlot.js";
+import { mergeSlotProps } from "../utils/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const overridesResolver = (props, styles) => {
   const {
@@ -194,9 +196,11 @@ const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
     PaperProps = {},
     SlideProps,
     // eslint-disable-next-line react/prop-types
-    TransitionComponent = Slide,
+    TransitionComponent,
     transitionDuration = defaultTransitionDuration,
     variant = 'temporary',
+    slots = {},
+    slotProps = {},
     ...other
   } = props;
 
@@ -220,56 +224,100 @@ const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
     ...other
   };
   const classes = useUtilityClasses(ownerState);
-  const drawer = /*#__PURE__*/_jsx(DrawerPaper, {
-    elevation: variant === 'temporary' ? elevation : 0,
-    square: true,
-    ...PaperProps,
+  const externalForwardedProps = {
+    slots: {
+      transition: TransitionComponent,
+      ...slots
+    },
+    slotProps: {
+      paper: PaperProps,
+      transition: SlideProps,
+      ...slotProps,
+      backdrop: mergeSlotProps(slotProps.backdrop || {
+        ...BackdropProps,
+        ...BackdropPropsProp
+      }, {
+        transitionDuration
+      })
+    }
+  };
+  const [RootSlot, rootSlotProps] = useSlot('root', {
+    ref,
+    elementType: DrawerRoot,
+    className: clsx(classes.root, classes.modal, className),
+    shouldForwardComponentProp: true,
+    ownerState,
+    externalForwardedProps: {
+      ...externalForwardedProps,
+      ...other,
+      ...ModalProps
+    },
+    additionalProps: {
+      open,
+      onClose,
+      hideBackdrop,
+      slots: {
+        backdrop: externalForwardedProps.slots.backdrop
+      },
+      slotProps: {
+        backdrop: externalForwardedProps.slotProps.backdrop
+      }
+    }
+  });
+  const [PaperSlot, paperSlotProps] = useSlot('paper', {
+    elementType: DrawerPaper,
+    shouldForwardComponentProp: true,
     className: clsx(classes.paper, PaperProps.className),
-    ownerState: ownerState,
+    ownerState,
+    externalForwardedProps,
+    additionalProps: {
+      elevation: variant === 'temporary' ? elevation : 0,
+      square: true
+    }
+  });
+  const [DockedSlot, dockedSlotProps] = useSlot('docked', {
+    elementType: DrawerDockedRoot,
+    ref,
+    className: clsx(classes.root, classes.docked, className),
+    ownerState,
+    externalForwardedProps,
+    additionalProps: other // pass `other` here because `DockedSlot` is also a root slot for some variants
+  });
+  const [TransitionSlot, transitionSlotProps] = useSlot('transition', {
+    elementType: Slide,
+    ownerState,
+    externalForwardedProps,
+    additionalProps: {
+      in: open,
+      direction: oppositeDirection[anchorInvariant],
+      timeout: transitionDuration,
+      appear: mounted.current
+    }
+  });
+  const drawer = /*#__PURE__*/_jsx(PaperSlot, {
+    ...paperSlotProps,
     children: children
   });
   if (variant === 'permanent') {
-    return /*#__PURE__*/_jsx(DrawerDockedRoot, {
-      className: clsx(classes.root, classes.docked, className),
-      ownerState: ownerState,
-      ref: ref,
-      ...other,
+    return /*#__PURE__*/_jsx(DockedSlot, {
+      ...dockedSlotProps,
       children: drawer
     });
   }
-  const slidingDrawer = /*#__PURE__*/_jsx(TransitionComponent, {
-    in: open,
-    direction: oppositeDirection[anchorInvariant],
-    timeout: transitionDuration,
-    appear: mounted.current,
-    ...SlideProps,
+  const slidingDrawer = /*#__PURE__*/_jsx(TransitionSlot, {
+    ...transitionSlotProps,
     children: drawer
   });
   if (variant === 'persistent') {
-    return /*#__PURE__*/_jsx(DrawerDockedRoot, {
-      className: clsx(classes.root, classes.docked, className),
-      ownerState: ownerState,
-      ref: ref,
-      ...other,
+    return /*#__PURE__*/_jsx(DockedSlot, {
+      ...dockedSlotProps,
       children: slidingDrawer
     });
   }
 
   // variant === temporary
-  return /*#__PURE__*/_jsx(DrawerRoot, {
-    BackdropProps: {
-      ...BackdropProps,
-      ...BackdropPropsProp,
-      transitionDuration
-    },
-    className: clsx(classes.root, classes.modal, className),
-    open: open,
-    ownerState: ownerState,
-    onClose: onClose,
-    hideBackdrop: hideBackdrop,
-    ref: ref,
-    ...other,
-    ...ModalProps,
+  return /*#__PURE__*/_jsx(RootSlot, {
+    ...rootSlotProps,
     children: slidingDrawer
   });
 });
@@ -329,13 +377,37 @@ process.env.NODE_ENV !== "production" ? Drawer.propTypes /* remove-proptypes */
   open: PropTypes.bool,
   /**
    * 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: PropTypes.object,
   /**
    * 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: PropTypes.object,
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    backdrop: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    docked: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    paper: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    transition: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    backdrop: PropTypes.elementType,
+    docked: PropTypes.elementType,
+    paper: PropTypes.elementType,
+    root: PropTypes.elementType,
+    transition: PropTypes.elementType
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */