[pickers] Fix componentsProps.dialog propagation (#8509)

mui · Apr 6, 2023 · 6ea7abb · 6ea7abb
1 parent 46411d4
commit 6ea7abb
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 82 deletions.
diff --git a/packages/x-date-pickers/src/DateCalendar/DateCalendar.tsx b/packages/x-date-pickers/src/DateCalendar/DateCalendar.tsx
@@ -310,8 +310,6 @@ export const DateCalendar = React.forwardRef(function DateCalendar<TDate>(
         disableFuture={disableFuture}
         reduceAnimations={reduceAnimations}
         labelId={gridLabelId}
-        components={components}
-        componentsProps={componentsProps}
         slots={slots}
         slotProps={slotProps}
       />

diff --git a/packages/x-date-pickers/src/DateCalendar/PickersCalendarHeader.tsx b/packages/x-date-pickers/src/DateCalendar/PickersCalendarHeader.tsx
@@ -65,18 +65,6 @@ export interface PickersCalendarHeaderSlotsComponentsProps<TDate>
 export interface PickersCalendarHeaderProps<TDate>
   extends ExportedPickersArrowSwitcherProps,
     DateComponentValidationProps<TDate> {
-  /**
-   * Overridable components.
-   * @default {}
-   * @deprecated Please use `slots`.
-   */
-  components?: PickersCalendarHeaderSlotsComponent;
-  /**
-   * The props used for each component slot.
-   * @default {}
-   * @deprecated Please use `slotProps`.
-   */
-  componentsProps?: PickersCalendarHeaderSlotsComponentsProps<TDate>;
   /**
    * Overridable component slots.
    * @default {}
@@ -190,8 +178,6 @@ export function PickersCalendarHeader<TDate>(inProps: PickersCalendarHeaderProps
   const props = useThemeProps({ props: inProps, name: 'MuiPickersCalendarHeader' });
 
   const {
-    components,
-    componentsProps,
     slots,
     slotProps,
     currentMonth: month,
@@ -212,13 +198,10 @@ export function PickersCalendarHeader<TDate>(inProps: PickersCalendarHeaderProps
 
   const classes = useUtilityClasses(props);
 
-  const SwitchViewButton =
-    slots?.switchViewButton ??
-    components?.SwitchViewButton ??
-    PickersCalendarHeaderSwitchViewButton;
+  const SwitchViewButton = slots?.switchViewButton ?? PickersCalendarHeaderSwitchViewButton;
   const switchViewButtonProps = useSlotProps({
     elementType: SwitchViewButton,
-    externalSlotProps: slotProps?.switchViewButton ?? componentsProps?.switchViewButton,
+    externalSlotProps: slotProps?.switchViewButton,
     additionalProps: {
       size: 'small',
       'aria-label': localeText.calendarViewSwitchingButtonAriaLabel(view),
@@ -227,12 +210,11 @@ export function PickersCalendarHeader<TDate>(inProps: PickersCalendarHeaderProps
     className: classes.switchViewButton,
   });
 
-  const SwitchViewIcon =
-    slots?.switchViewIcon ?? components?.SwitchViewIcon ?? PickersCalendarHeaderSwitchViewIcon;
+  const SwitchViewIcon = slots?.switchViewIcon ?? PickersCalendarHeaderSwitchViewIcon;
   // The spread is here to avoid this bug mui/material-ui#34056
   const { ownerState: switchViewIconOwnerState, ...switchViewIconProps } = useSlotProps({
     elementType: SwitchViewIcon,
-    externalSlotProps: slotProps?.switchViewIcon ?? componentsProps?.switchViewIcon,
+    externalSlotProps: slotProps?.switchViewIcon,
     ownerState: undefined,
     className: classes.switchViewIcon,
   });
@@ -299,8 +281,6 @@ export function PickersCalendarHeader<TDate>(inProps: PickersCalendarHeaderProps
       </PickersCalendarHeaderLabelContainer>
       <Fade in={view === 'day'}>
         <PickersArrowSwitcher
-          components={components}
-          componentsProps={componentsProps}
           slots={slots}
           slotProps={slotProps}
           onGoToPrevious={selectPreviousMonth}

diff --git a/packages/x-date-pickers/src/TimeClock/TimeClock.tsx b/packages/x-date-pickers/src/TimeClock/TimeClock.tsx
@@ -20,6 +20,7 @@ import { getTimeClockUtilityClass } from './timeClockClasses';
 import { Clock, ClockProps } from './Clock';
 import { TimeClockProps } from './TimeClock.types';
 import { getHourNumbers, getMinutesNumbers } from './ClockNumbers';
+import { uncapitalizeObjectKeys } from '../internals/utils/slots-migration';
 
 const useUtilityClasses = (ownerState: TimeClockProps<any>) => {
   const { classes } = ownerState;
@@ -80,8 +81,8 @@ export const TimeClock = React.forwardRef(function TimeClock<TDate extends unkno
     autoFocus,
     components,
     componentsProps,
-    slots,
-    slotProps,
+    slots: innerSlots,
+    slotProps: innerSlotProps,
     value: valueProp,
     disableIgnoringDatePartForTimeValidation = false,
     maxTime,
@@ -104,6 +105,9 @@ export const TimeClock = React.forwardRef(function TimeClock<TDate extends unkno
     ...other
   } = props;
 
+  const slots = innerSlots ?? uncapitalizeObjectKeys(components);
+  const slotProps = innerSlotProps ?? componentsProps;
+
   const [value, setValue] = useControlled({
     name: 'DateCalendar',
     state: 'value',
@@ -361,8 +365,6 @@ export const TimeClock = React.forwardRef(function TimeClock<TDate extends unkno
       {showViewSwitcher && (
         <TimeClockArrowSwitcher
           className={classes.arrowSwitcher}
-          components={components}
-          componentsProps={componentsProps}
           slots={slots}
           slotProps={slotProps}
           onGoToPrevious={() => setView(previousView!)}

diff --git a/...ges/x-date-pickers/src/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.tsx b/...ges/x-date-pickers/src/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.tsx
@@ -67,8 +67,6 @@ export const PickersArrowSwitcher = React.forwardRef(function PickersArrowSwitch
   const {
     children,
     className,
-    components,
-    componentsProps,
     slots,
     slotProps,
     isNextDisabled,
@@ -102,11 +100,10 @@ export const PickersArrowSwitcher = React.forwardRef(function PickersArrowSwitch
 
   const [leftProps, rightProps] = isRTL ? [nextProps, previousProps] : [previousProps, nextProps];
 
-  const PreviousIconButton =
-    slots?.previousIconButton ?? components?.PreviousIconButton ?? PickersArrowSwitcherButton;
+  const PreviousIconButton = slots?.previousIconButton ?? PickersArrowSwitcherButton;
   const previousIconButtonProps = useSlotProps({
     elementType: PreviousIconButton,
-    externalSlotProps: slotProps?.previousIconButton ?? componentsProps?.previousIconButton,
+    externalSlotProps: slotProps?.previousIconButton,
     additionalProps: {
       size: 'medium',
       title: leftProps.label,
@@ -119,11 +116,10 @@ export const PickersArrowSwitcher = React.forwardRef(function PickersArrowSwitch
     className: classes.button,
   });
 
-  const NextIconButton =
-    slots?.nextIconButton ?? components?.NextIconButton ?? PickersArrowSwitcherButton;
+  const NextIconButton = slots?.nextIconButton ?? PickersArrowSwitcherButton;
   const nextIconButtonProps = useSlotProps({
     elementType: NextIconButton,
-    externalSlotProps: slotProps?.nextIconButton ?? componentsProps?.nextIconButton,
+    externalSlotProps: slotProps?.nextIconButton,
     additionalProps: {
       size: 'medium',
       title: rightProps.label,
@@ -136,22 +132,22 @@ export const PickersArrowSwitcher = React.forwardRef(function PickersArrowSwitch
     className: classes.button,
   });
 
-  const LeftArrowIcon = slots?.leftArrowIcon ?? components?.LeftArrowIcon ?? ArrowLeft;
+  const LeftArrowIcon = slots?.leftArrowIcon ?? ArrowLeft;
   // The spread is here to avoid this bug mui/material-ui#34056
   const { ownerState: leftArrowIconOwnerState, ...leftArrowIconProps } = useSlotProps({
     elementType: LeftArrowIcon,
-    externalSlotProps: slotProps?.leftArrowIcon ?? componentsProps?.leftArrowIcon,
+    externalSlotProps: slotProps?.leftArrowIcon,
     additionalProps: {
       fontSize: 'inherit',
     },
     ownerState: undefined,
   });
 
-  const RightArrowIcon = slots?.rightArrowIcon ?? components?.RightArrowIcon ?? ArrowRight;
+  const RightArrowIcon = slots?.rightArrowIcon ?? ArrowRight;
   // The spread is here to avoid this bug mui/material-ui#34056
   const { ownerState: rightArrowIconOwnerState, ...rightArrowIconProps } = useSlotProps({
     elementType: RightArrowIcon,
-    externalSlotProps: slotProps?.rightArrowIcon ?? componentsProps?.rightArrowIcon,
+    externalSlotProps: slotProps?.rightArrowIcon,
     additionalProps: {
       fontSize: 'inherit',
     },

diff --git a/...date-pickers/src/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.types.tsx b/...date-pickers/src/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.types.tsx
@@ -6,18 +6,6 @@ import { PickersArrowSwitcherClasses } from './pickersArrowSwitcherClasses';
 import { UncapitalizeObjectKeys } from '../../utils/slots-migration';
 
 export interface ExportedPickersArrowSwitcherProps {
-  /**
-   * Overridable components.
-   * @default {}
-   * @deprecated Please use `slots`.
-   */
-  components?: PickersArrowSwitcherSlotsComponent;
-  /**
-   * The props used for each component slot.
-   * @default {}
-   * @deprecated Please use `slotProps`.
-   */
-  componentsProps?: PickersArrowSwitcherSlotsComponentsProps;
   /**
    * Overridable component slots.
    * @default {}

diff --git a/packages/x-date-pickers/src/internals/components/PickersModalDialog.tsx b/packages/x-date-pickers/src/internals/components/PickersModalDialog.tsx
@@ -43,18 +43,6 @@ export interface PickersModalDialogSlotsComponentsProps {
 }
 
 export interface PickersModalDialogProps extends UsePickerValueActions {
-  /**
-   * Overridable components.
-   * @default {}
-   * @deprecated Please use `slots`.
-   */
-  components?: PickersModalDialogSlotsComponent;
-  /**
-   * The props used for each component slot.
-   * @default {}
-   * @deprecated Please use `slotProps`.
-   */
-  componentsProps?: PickersModalDialogSlotsComponentsProps;
   /**
    * Overridable component slots.
    * @default {}
@@ -85,20 +73,20 @@ const PickersModalDialogContent = styled(DialogContent)({
 });
 
 export function PickersModalDialog(props: React.PropsWithChildren<PickersModalDialogProps>) {
-  const { children, onDismiss, open, components, componentsProps, slots, slotProps } = props;
+  const { children, onDismiss, open, slots, slotProps } = props;
 
-  const Dialog = slots?.dialog ?? components?.Dialog ?? PickersModalDialogRoot;
-  const Transition = slots?.mobileTransition ?? components?.MobileTransition ?? Fade;
+  const Dialog = slots?.dialog ?? PickersModalDialogRoot;
+  const Transition = slots?.mobileTransition ?? Fade;
 
   return (
     <Dialog
       open={open}
       onClose={onDismiss}
-      {...componentsProps?.dialog}
+      {...slotProps?.dialog}
       TransitionComponent={Transition}
-      TransitionProps={slotProps?.mobileTransition ?? componentsProps?.mobileTransition}
-      PaperComponent={slots?.mobilePaper ?? components?.MobilePaper}
-      PaperProps={slotProps?.mobilePaper ?? componentsProps?.mobilePaper}
+      TransitionProps={slotProps?.mobileTransition}
+      PaperComponent={slots?.mobilePaper}
+      PaperProps={slotProps?.mobilePaper}
     >
       <PickersModalDialogContent>{children}</PickersModalDialogContent>
     </Dialog>

diff --git a/packages/x-date-pickers/src/internals/components/PickersPopper.tsx b/packages/x-date-pickers/src/internals/components/PickersPopper.tsx
@@ -19,7 +19,7 @@ import { styled, useThemeProps } from '@mui/material/styles';
 import { TransitionProps as MuiTransitionProps } from '@mui/material/transitions';
 import { getPickersPopperUtilityClass, PickersPopperClasses } from './pickersPopperClasses';
 import { getActiveElement } from '../utils/utils';
-import { uncapitalizeObjectKeys, UncapitalizeObjectKeys } from '../utils/slots-migration';
+import { UncapitalizeObjectKeys } from '../utils/slots-migration';
 import { UsePickerValueActions } from '../hooks/usePicker/usePickerValue';
 
 export interface PickersPopperSlotsComponent {
@@ -76,8 +76,6 @@ export interface PickerPopperProps extends UsePickerValueActions {
   containerRef?: React.Ref<HTMLDivElement>;
   children?: React.ReactNode;
   onBlur?: () => void;
-  components?: PickersPopperSlotsComponent;
-  componentsProps?: PickersPopperSlotsComponentsProps;
   slots?: UncapitalizeObjectKeys<PickersPopperSlotsComponent>;
   slotProps?: PickersPopperSlotsComponentsProps;
   classes?: Partial<PickersPopperClasses>;
@@ -273,13 +271,9 @@ export function PickersPopper(inProps: PickerPopperProps) {
     open,
     role,
     placement,
-    components,
-    componentsProps,
-    slots: innerSlots,
-    slotProps: innerSlotProps,
+    slots,
+    slotProps,
   } = props;
-  const slots = innerSlots ?? uncapitalizeObjectKeys(components);
-  const slotProps = innerSlotProps ?? componentsProps;
 
   React.useEffect(() => {
     function handleKeyDown(nativeEvent: KeyboardEvent) {