Apple useSlot to more components

Author: hbjORbj

packages/mui-joy/src/Checkbox/Checkbox.tsx

@@ -3,9 +3,9 @@ import PropTypes from 'prop-types';
 import { OverridableComponent } from '@mui/types';
 import { unstable_useId as useId, unstable_capitalize as capitalize } from '@mui/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
-import { useSlotProps } from '@mui/base/utils';
 import { useSwitch } from '@mui/base/SwitchUnstyled';
 import { styled, useThemeProps } from '../styles';
+import useSlot from '../utils/useSlot';
 import checkboxClasses, { getCheckboxUtilityClass } from './checkboxClasses';
 import { CheckboxOwnerState, CheckboxTypeMap } from './CheckboxProps';
 import CheckIcon from '../internal/svg-icons/Check';
@@ -188,8 +188,7 @@ const Checkbox = React.forwardRef(function Checkbox(inProps, ref) {
     uncheckedIcon,
     checkedIcon = defaultCheckedIcon,
     label,
-    component,
-    componentsProps = {},
+    component = 'span',
     defaultChecked,
     disabled: disabledExternalProp,
     disableIcon = false,
@@ -261,38 +260,31 @@ const Checkbox = React.forwardRef(function Checkbox(inProps, ref) {
   };
 
   const classes = useUtilityClasses(ownerState);
+  const externalForwardedProps = { ...other, component };
 
-  const rootProps = useSlotProps({
+  const [SlotRoot, rootProps] = useSlot('root', {
+    ref,
+    className: classes.root,
     elementType: CheckboxRoot,
-    externalSlotProps: componentsProps.root,
-    externalForwardedProps: other,
+    externalForwardedProps,
     ownerState,
-    additionalProps: {
-      ref,
-      as: component,
-    },
-    className: classes.root,
   });
 
-  const checkboxProps = useSlotProps({
+  const [SlotCheckbox, checkboxProps] = useSlot('checkbox', {
+    className: classes.checkbox,
     elementType: CheckboxCheckbox,
-    externalSlotProps: componentsProps.checkbox,
+    externalForwardedProps,
     ownerState,
-    className: classes.checkbox,
   });
 
-  const actionProps = useSlotProps({
+  const [SlotAction, actionProps] = useSlot('action', {
+    className: classes.action,
     elementType: CheckboxAction,
-    externalSlotProps: componentsProps.action,
+    externalForwardedProps,
     ownerState,
-    className: classes.action,
   });
 
-  const inputProps = useSlotProps({
-    elementType: CheckboxInput,
-    getSlotProps: getInputProps,
-    externalSlotProps: componentsProps.input,
-    ownerState,
+  const [SlotInput, inputProps] = useSlot('input', {
     additionalProps: {
       id,
       name,
@@ -306,34 +298,38 @@ const Checkbox = React.forwardRef(function Checkbox(inProps, ref) {
       }),
     },
     className: classes.input,
+    elementType: CheckboxInput,
+    externalForwardedProps,
+    getSlotProps: getInputProps,
+    ownerState,
   });
 
-  const labelProps = useSlotProps({
-    elementType: CheckboxLabel,
-    externalSlotProps: componentsProps.label,
-    ownerState,
+  const [SlotLabel, labelProps] = useSlot('label', {
     additionalProps: {
       htmlFor: id,
     },
     className: classes.label,
+    elementType: CheckboxLabel,
+    externalForwardedProps,
+    ownerState,
   });
 
   return (
-    <CheckboxRoot {...rootProps}>
-      <CheckboxCheckbox {...checkboxProps}>
-        <CheckboxAction {...actionProps}>
-          <CheckboxInput {...inputProps} />
-        </CheckboxAction>
+    <SlotRoot {...rootProps}>
+      <SlotCheckbox {...checkboxProps}>
+        <SlotAction {...actionProps}>
+          <SlotInput {...inputProps} />
+        </SlotAction>
         {indeterminate && !checked && !disableIcon && indeterminateIcon}
         {checked && !disableIcon && checkedIcon}
         {!checked && !disableIcon && !indeterminate && uncheckedIcon}
-      </CheckboxCheckbox>
+      </SlotCheckbox>
       {label && (
         <TypographyContext.Provider value>
-          <CheckboxLabel {...labelProps}>{label}</CheckboxLabel>
+          <SlotLabel {...labelProps}>{label}</SlotLabel>
         </TypographyContext.Provider>
       )}
-    </CheckboxRoot>
+    </SlotRoot>
   );
 }) as OverridableComponent<CheckboxTypeMap>;
 
@@ -376,7 +372,7 @@ Checkbox.propTypes /* remove-proptypes */ = {
    * The props used for each slot inside the component.
    * @default {}
    */
-  componentsProps: PropTypes.shape({
+  slotProps: PropTypes.shape({
     action: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     checkbox: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     input: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),

packages/mui-joy/src/Checkbox/CheckboxProps.ts

@@ -7,17 +7,35 @@ import { ColorPaletteProp, VariantProp, SxProps } from '../styles/types';
 export type CheckboxSlot = 'root' | 'checkbox' | 'action' | 'input' | 'label';
 
 export interface CheckboxPropsVariantOverrides {}
-
 export interface CheckboxPropsColorOverrides {}
-
 export interface CheckboxPropsSizeOverrides {}
 
 interface ComponentsProps {
-  root?: SlotComponentProps<'span', { sx?: SxProps }, CheckboxOwnerState>;
-  checkbox?: SlotComponentProps<'span', { sx?: SxProps }, CheckboxOwnerState>;
-  action?: SlotComponentProps<'span', { sx?: SxProps }, CheckboxOwnerState>;
-  input?: SlotComponentProps<'input', { sx?: SxProps }, CheckboxOwnerState>;
-  label?: SlotComponentProps<'label', { sx?: SxProps }, CheckboxOwnerState>;
+  root?: SlotComponentProps<
+    'span',
+    { component?: React.ElementType; sx?: SxProps },
+    CheckboxOwnerState
+  >;
+  checkbox?: SlotComponentProps<
+    'span',
+    { component?: React.ElementType; sx?: SxProps },
+    CheckboxOwnerState
+  >;
+  action?: SlotComponentProps<
+    'span',
+    { component?: React.ElementType; sx?: SxProps },
+    CheckboxOwnerState
+  >;
+  input?: SlotComponentProps<
+    'input',
+    { component?: React.ElementType; sx?: SxProps },
+    CheckboxOwnerState
+  >;
+  label?: SlotComponentProps<
+    'label',
+    { component?: React.ElementType; sx?: SxProps },
+    CheckboxOwnerState
+  >;
 }
 
 export interface CheckboxTypeMap<P = {}, D extends React.ElementType = 'span'> {
@@ -32,11 +50,21 @@ export interface CheckboxTypeMap<P = {}, D extends React.ElementType = 'span'> {
        * Class name applied to the root element.
        */
       className?: string;
+      /**
+       * Replace the default slots.
+       */
+      slots?: {
+        root?: React.ElementType;
+        checkbox?: React.ElementType;
+        action?: React.ElementType;
+        input?: React.ElementType;
+        label?: React.ElementType;
+      };
       /**
        * The props used for each slot inside the component.
        * @default {}
        */
-      componentsProps?: ComponentsProps;
+      slotProps?: ComponentsProps;
       /**
        * The color of the component. It supports those theme colors that make sense for this component.
        * @default 'neutral'

packages/mui-joy/src/Divider/Divider.tsx

@@ -5,6 +5,7 @@ import { unstable_capitalize as capitalize } from '@mui/utils';
 import { OverridableComponent } from '@mui/types';
 import composeClasses from '@mui/base/composeClasses';
 import { styled, useThemeProps } from '../styles';
+import useSlot from '../utils/useSlot';
 import { DividerOwnerState, DividerTypeMap } from './DividerProps';
 import { getDividerUtilityClass } from './dividerClasses';
 
@@ -117,24 +118,24 @@ const Divider = React.forwardRef(function Divider(inProps, ref) {
 
   const classes = useUtilityClasses(ownerState);
 
-  return (
-    <DividerRoot
-      ref={ref}
-      as={component}
-      className={clsx(classes.root, className)}
-      ownerState={ownerState}
-      role={role}
-      {...(role === 'separator' &&
+  const [SlotRoot, rootProps] = useSlot('root', {
+    additionalProps: {
+      role,
+      ...(role === 'separator' &&
         orientation === 'vertical' && {
           // The implicit aria-orientation of separator is 'horizontal'
           // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/separator_role
           'aria-orientation': 'vertical',
-        })}
-      {...other}
-    >
-      {children}
-    </DividerRoot>
-  );
+        }),
+    },
+    ref,
+    className: clsx(classes.root, className),
+    elementType: DividerRoot,
+    externalForwardedProps: { ...other, component },
+    ownerState,
+  });
+
+  return <SlotRoot {...rootProps}>{children}</SlotRoot>;
 }) as OverridableComponent<DividerTypeMap>;
 
 Divider.propTypes /* remove-proptypes */ = {

packages/mui-joy/src/FormControl/FormControl.tsx

@@ -5,6 +5,7 @@ import { OverridableComponent } from '@mui/types';
 import { unstable_useId as useId, unstable_capitalize as capitalize } from '@mui/utils';
 import composeClasses from '@mui/base/composeClasses';
 import { useThemeProps } from '../styles';
+import useSlot from '../utils/useSlot';
 import styled from '../styles/styled';
 import FormControlContext from './FormControlContext';
 import formControlClasses, { getFormControlUtilityClass } from './formControlClasses';
@@ -131,15 +132,17 @@ const FormControl = React.forwardRef(function FormControl(inProps, ref) {
     [color, disabled, error, helperText, id, registerEffect, required, size],
   );
 
+  const [SlotRoot, rootProps] = useSlot('root', {
+    ref,
+    className: clsx(classes.root, className),
+    elementType: FormControlRoot,
+    externalForwardedProps: { ...other, component },
+    ownerState,
+  });
+
   return (
     <FormControlContext.Provider value={formControlContextValue}>
-      <FormControlRoot
-        as={component}
-        ownerState={ownerState}
-        className={clsx(classes.root, className)}
-        ref={ref}
-        {...other}
-      />
+      <SlotRoot {...rootProps} />
     </FormControlContext.Provider>
   );
 }) as OverridableComponent<FormControlTypeMap>;

packages/mui-joy/src/FormHelperText/FormHelperText.tsx

@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 import { OverridableComponent } from '@mui/types';
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
 import composeClasses from '@mui/base/composeClasses';
-import { useSlotProps } from '@mui/base/utils';
 import { styled, useThemeProps } from '../styles';
+import useSlot from '../utils/useSlot';
 import { FormHelperTextProps, FormHelperTextTypeMap } from './FormHelperTextProps';
 import { getFormHelperTextUtilityClass } from './formHelperTextClasses';
 import FormControlContext from '../FormControl/FormControlContext';
@@ -41,7 +41,7 @@ const FormHelperText = React.forwardRef(function FormHelperText(inProps, ref) {
     name: 'JoyFormHelperText',
   });
 
-  const { children, component, ...other } = props;
+  const { children, component = 'p', ...other } = props;
   const rootRef = React.useRef<HTMLElement | null>(null);
   const handleRef = useForkRef(rootRef, ref);
   const formControl = React.useContext(FormControlContext);
@@ -60,20 +60,18 @@ const FormHelperText = React.forwardRef(function FormHelperText(inProps, ref) {
 
   const classes = useUtilityClasses();
 
-  const rootProps = useSlotProps({
-    elementType: FormHelperTextRoot,
-    externalSlotProps: {},
-    externalForwardedProps: other,
-    ownerState,
+  const [SlotRoot, rootProps] = useSlot('root', {
     additionalProps: {
-      ref: handleRef,
-      as: component,
       id: formControl?.['aria-describedby'],
     },
+    ref: handleRef,
     className: classes.root,
+    elementType: FormHelperTextRoot,
+    externalForwardedProps: { ...other, component },
+    ownerState,
   });
 
-  return <FormHelperTextRoot {...rootProps}>{children}</FormHelperTextRoot>;
+  return <SlotRoot {...rootProps}>{children}</SlotRoot>;
 }) as OverridableComponent<FormHelperTextTypeMap>;
 
 FormHelperText.propTypes /* remove-proptypes */ = {