[pickers] Use the new ownerState in DateCalendar, DateRangeCalendar, …

…MonthCalendar and YearCalendar
mui · Oct 29, 2024 · a235cea · a235cea
1 parent 48ec9c9
commit a235cea
Show file tree

Hide file tree

Showing 15 changed files with 150 additions and 92 deletions.
diff --git a/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.tsx b/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.tsx
@@ -25,11 +25,13 @@ import {
   DEFAULT_DESKTOP_MODE_MEDIA_QUERY,
   useControlledValueWithTimezone,
   useViews,
+  usePickersPrivateContext,
 } from '@mui/x-date-pickers/internals';
 import { warnOnce } from '@mui/x-internals/warning';
 import { PickerValidDate } from '@mui/x-date-pickers/models';
 import { getReleaseInfo } from '../internals/utils/releaseInfo';
 import {
+  DateRangeCalendarClasses,
   dateRangeCalendarClasses,
   getDateRangeCalendarUtilityClass,
 } from './dateRangeCalendarClasses';
@@ -62,7 +64,7 @@ const DateRangeCalendarRoot = styled('div', {
   name: 'MuiDateRangeCalendar',
   slot: 'Root',
   overridesResolver: (_, styles) => styles.root,
-})<{ ownerState: DateRangeCalendarOwnerState<any> }>({
+})<{ ownerState: DateRangeCalendarOwnerState }>({
   display: 'flex',
   flexDirection: 'row',
 });
@@ -133,12 +135,14 @@ function useDateRangeCalendarDefaultizedProps<TDate extends PickerValidDate>(
   };
 }
 
-const useUtilityClasses = (ownerState: DateRangeCalendarOwnerState<any>) => {
-  const { classes, isDragging } = ownerState;
+const useUtilityClasses = (
+  classes: Partial<DateRangeCalendarClasses> | undefined,
+  ownerState: DateRangeCalendarOwnerState,
+) => {
   const slots = {
     root: ['root'],
     monthContainer: ['monthContainer'],
-    dayCalendar: [isDragging && 'dayDragging'],
+    dayCalendar: [ownerState.isDraggingDay && 'dayDragging'],
   };
 
   return composeClasses(slots, getDateRangeCalendarUtilityClass, classes);
@@ -172,6 +176,7 @@ const DateRangeCalendar = React.forwardRef(function DateRangeCalendar<
     referenceDate,
     onChange,
     className,
+    classes: classesProp,
     disableFuture,
     disablePast,
     minDate,
@@ -299,8 +304,12 @@ const DateRangeCalendar = React.forwardRef(function DateRangeCalendar<
     timezone,
   });
 
-  const ownerState = { ...props, isDragging };
-  const classes = useUtilityClasses(ownerState);
+  const { ownerState: pickersOwnerState } = usePickersPrivateContext();
+  const ownerState: DateRangeCalendarOwnerState = {
+    ...pickersOwnerState,
+    isDraggingDay: isDragging,
+  };
+  const classes = useUtilityClasses(classesProp, ownerState);
 
   const draggingRange = React.useMemo<DateRange<TDate>>(() => {
     if (!valueDayRange[0] || !valueDayRange[1] || !rangeDragDay) {
@@ -370,7 +379,7 @@ const DateRangeCalendar = React.forwardRef(function DateRangeCalendar<
       slots,
       slotProps,
     },
-    ownerState: props,
+    ownerState,
   });
 
   const prevValue = React.useRef<DateRange<TDate> | null>(null);
@@ -455,7 +464,7 @@ const DateRangeCalendar = React.forwardRef(function DateRangeCalendar<
   const slotPropsForDayCalendar = {
     ...slotProps,
     day: (dayOwnerState) => {
-      const { day } = dayOwnerState;
+      const { day, isDaySelected } = dayOwnerState;
       const isSelectedStartDate = isStartOfRange(utils, day, valueDayRange);
       const isSelectedEndDate = isEndOfRange(utils, day, valueDayRange);
       const shouldInitDragging = !shouldDisableDragEditing && valueDayRange[0] && valueDayRange[1];
@@ -488,7 +497,7 @@ const DateRangeCalendar = React.forwardRef(function DateRangeCalendar<
         onMouseEnter: shouldHavePreview ? handleDayMouseEnter : undefined,
         // apply selected styling to the dragging start or end day
         isVisuallySelected:
-          dayOwnerState.selected || (isDragging && (isStartOfHighlighting || isEndOfHighlighting)),
+          isDaySelected || (isDragging && (isStartOfHighlighting || isEndOfHighlighting)),
         'data-position': datePosition,
         ...dragEventHandlers,
         draggable: isElementDraggable ? true : undefined,

diff --git a/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.types.ts b/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.types.ts
@@ -2,12 +2,13 @@ import * as React from 'react';
 import { SxProps } from '@mui/system';
 import { SlotComponentProps } from '@mui/utils';
 import { Theme } from '@mui/material/styles';
-import { PickerValidDate, TimezoneProps } from '@mui/x-date-pickers/models';
+import { PickerOwnerState, PickerValidDate, TimezoneProps } from '@mui/x-date-pickers/models';
 import {
   PickersCalendarHeader,
   PickersCalendarHeaderSlots,
   PickersCalendarHeaderSlotProps,
 } from '@mui/x-date-pickers/PickersCalendarHeader';
+import { PickersDayOwnerState } from '@mui/x-date-pickers/DateCalendar';
 import {
   BaseDateValidationProps,
   DefaultizedProps,
@@ -16,7 +17,6 @@ import {
   DayCalendarSlotProps,
   PickersArrowSwitcherSlots,
   PickersArrowSwitcherSlotProps,
-  DayCalendarProps,
   ExportedUseViewsOptions,
 } from '@mui/x-date-pickers/internals';
 import { DayRangeValidationProps } from '../internals/models/dateRange';
@@ -51,13 +51,9 @@ export interface DateRangeCalendarSlotProps<TDate extends PickerValidDate>
   calendarHeader?: SlotComponentProps<
     typeof PickersCalendarHeader,
     {},
-    DateRangeCalendarProps<TDate>
-  >;
-  day?: SlotComponentProps<
-    typeof DateRangePickerDay,
-    {},
-    DayCalendarProps<TDate> & { day: TDate; selected: boolean }
+    DateRangeCalendarOwnerState
   >;
+  day?: SlotComponentProps<typeof DateRangePickerDay, {}, PickersDayOwnerState<TDate>>;
 }
 
 export interface ExportedDateRangeCalendarProps<TDate extends PickerValidDate>
@@ -156,9 +152,8 @@ export interface DateRangeCalendarProps<TDate extends PickerValidDate>
   availableRangePositions?: RangePosition[];
 }
 
-export interface DateRangeCalendarOwnerState<TDate extends PickerValidDate>
-  extends DateRangeCalendarProps<TDate> {
-  isDragging: boolean;
+export interface DateRangeCalendarOwnerState extends PickerOwnerState {
+  isDraggingDay: boolean;
 }
 
 export type DateRangeCalendarDefaultizedProps<TDate extends PickerValidDate> = DefaultizedProps<

diff --git a/packages/x-date-pickers/src/DateCalendar/DateCalendar.tsx b/packages/x-date-pickers/src/DateCalendar/DateCalendar.tsx
@@ -25,15 +25,15 @@ import {
 } from '../internals/utils/date-utils';
 import { PickerViewRoot } from '../internals/components/PickerViewRoot';
 import { useDefaultReduceAnimations } from '../internals/hooks/useDefaultReduceAnimations';
-import { getDateCalendarUtilityClass } from './dateCalendarClasses';
+import { DateCalendarClasses, getDateCalendarUtilityClass } from './dateCalendarClasses';
 import { BaseDateValidationProps } from '../internals/models/validation';
 import { useControlledValueWithTimezone } from '../internals/hooks/useValueWithTimezone';
 import { singleItemValueManager } from '../internals/utils/valueManagers';
 import { VIEW_HEIGHT } from '../internals/constants/dimensions';
-import { PickerValidDate } from '../models';
+import { PickerOwnerState, PickerValidDate } from '../models';
+import { usePickersPrivateContext } from '../internals/hooks/usePickersPrivateContext';
 
-const useUtilityClasses = (ownerState: DateCalendarProps<any>) => {
-  const { classes } = ownerState;
+const useUtilityClasses = (classes: Partial<DateCalendarClasses> | undefined) => {
   const slots = {
     root: ['root'],
     viewTransitionContainer: ['viewTransitionContainer'],
@@ -73,7 +73,7 @@ const DateCalendarRoot = styled(PickerViewRoot, {
   name: 'MuiDateCalendar',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root,
-})<{ ownerState: DateCalendarProps<any> }>({
+})<{ ownerState: PickerOwnerState }>({
   display: 'flex',
   flexDirection: 'column',
   height: VIEW_HEIGHT,
@@ -83,7 +83,7 @@ const DateCalendarViewTransitionContainer = styled(PickersFadeTransitionGroup, {
   name: 'MuiDateCalendar',
   slot: 'ViewTransitionContainer',
   overridesResolver: (props, styles) => styles.viewTransitionContainer,
-})<{ ownerState: DateCalendarProps<any> }>({});
+})<{ ownerState: PickerOwnerState }>({});
 
 type DateCalendarComponent = (<TDate extends PickerValidDate>(
   props: DateCalendarProps<TDate> & React.RefAttributes<HTMLDivElement>,
@@ -105,6 +105,7 @@ export const DateCalendar = React.forwardRef(function DateCalendar<TDate extends
   ref: React.Ref<HTMLDivElement>,
 ) {
   const utils = useUtils<TDate>();
+  const { ownerState } = usePickersPrivateContext();
   const id = useId();
   const props = useDateCalendarDefaultizedProps(inProps, 'MuiDateCalendar');
 
@@ -127,6 +128,7 @@ export const DateCalendar = React.forwardRef(function DateCalendar<TDate extends
     views,
     openTo,
     className,
+    classes: classesProp,
     disabled,
     readOnly,
     minDate,
@@ -217,7 +219,7 @@ export const DateCalendar = React.forwardRef(function DateCalendar<TDate extends
       timezone,
       labelId: gridLabelId,
     },
-    ownerState: props,
+    ownerState,
   });
 
   const handleDateMonthChange = useEventCallback((newDate: TDate) => {
@@ -295,8 +297,7 @@ export const DateCalendar = React.forwardRef(function DateCalendar<TDate extends
     }
   }, [value]); // eslint-disable-line
 
-  const ownerState = props;
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(classesProp);
 
   const baseDateValidationProps: Required<BaseDateValidationProps<TDate>> = {
     disablePast,

diff --git a/packages/x-date-pickers/src/DateCalendar/DateCalendar.types.ts b/packages/x-date-pickers/src/DateCalendar/DateCalendar.types.ts
@@ -17,7 +17,7 @@ import {
   DayValidationProps,
 } from '../internals/models/validation';
 import { ExportedUseViewsOptions } from '../internals/hooks/useViews';
-import { DateView, PickerValidDate, TimezoneProps } from '../models';
+import { DateView, PickerOwnerState, PickerValidDate, TimezoneProps } from '../models';
 import { DefaultizedProps } from '../internals/models/helpers';
 import {
   ExportedYearCalendarProps,
@@ -48,7 +48,7 @@ export interface DateCalendarSlotProps<TDate extends PickerValidDate>
     DayCalendarSlotProps<TDate>,
     MonthCalendarSlotProps,
     YearCalendarSlotProps {
-  calendarHeader?: SlotComponentProps<typeof PickersCalendarHeader, {}, DateCalendarProps<TDate>>;
+  calendarHeader?: SlotComponentProps<typeof PickersCalendarHeader, {}, PickerOwnerState>;
 }
 
 export interface ExportedDateCalendarProps<TDate extends PickerValidDate>

diff --git a/packages/x-date-pickers/src/DateCalendar/DayCalendar.tsx b/packages/x-date-pickers/src/DateCalendar/DayCalendar.tsx
@@ -28,8 +28,10 @@ import {
 import { useIsDateDisabled } from './useIsDateDisabled';
 import { findClosestEnabledDate, getWeekdays } from '../internals/utils/date-utils';
 import { DayCalendarClasses, getDayCalendarUtilityClass } from './dayCalendarClasses';
-import { PickerValidDate, TimezoneProps } from '../models';
+import { PickerOwnerState, PickerValidDate, TimezoneProps } from '../models';
 import { DefaultizedProps, SlotComponentPropsFromProps } from '../internals/models/helpers';
+import { usePickersPrivateContext } from '../internals/hooks/usePickersPrivateContext';
+import { DateCalendarClasses } from './dateCalendarClasses';
 
 export interface DayCalendarSlots<TDate extends PickerValidDate> {
   /**
@@ -41,11 +43,13 @@ export interface DayCalendarSlots<TDate extends PickerValidDate> {
 }
 
 export interface DayCalendarSlotProps<TDate extends PickerValidDate> {
-  day?: SlotComponentPropsFromProps<
-    PickersDayProps<TDate>,
-    {},
-    DayCalendarProps<TDate> & { day: TDate; selected: boolean }
-  >;
+  day?: SlotComponentPropsFromProps<PickersDayProps<TDate>, {}, PickersDayOwnerState<TDate>>;
+}
+
+export interface PickersDayOwnerState<TDate extends PickerValidDate> extends PickerOwnerState {
+  isDaySelected: boolean;
+  isDayDisabled: boolean;
+  day: TDate;
 }
 
 export interface ExportedDayCalendarProps<TDate extends PickerValidDate>
@@ -120,8 +124,7 @@ export interface DayCalendarProps<TDate extends PickerValidDate>
   slotProps?: DayCalendarSlotProps<TDate>;
 }
 
-const useUtilityClasses = (ownerState: DayCalendarProps<any>) => {
-  const { classes } = ownerState;
+const useUtilityClasses = (classes: Partial<DateCalendarClasses> | undefined) => {
   const slots = {
     root: ['root'],
     header: ['header'],
@@ -267,11 +270,17 @@ function WrappedDay<TDate extends PickerValidDate>({
 
   const utils = useUtils<TDate>();
   const now = useNow<TDate>(timezone);
+  const { ownerState } = usePickersPrivateContext();
 
   const isFocusableDay = focusableDay !== null && utils.isSameDay(day, focusableDay);
   const isSelected = selectedDays.some((selectedDay) => utils.isSameDay(selectedDay, day));
   const isToday = utils.isSameDay(day, now);
 
+  const isDisabled = React.useMemo(
+    () => disabled || isDateDisabled(day),
+    [disabled, isDateDisabled, day],
+  );
+
   const Day = slots?.day ?? PickersDay;
   // We don't want to pass to ownerState down, to avoid re-rendering all the day whenever a prop changes.
   const { ownerState: dayOwnerState, ...dayProps } = useSlotProps({
@@ -286,14 +295,9 @@ function WrappedDay<TDate extends PickerValidDate>({
       'data-timestamp': utils.toJsDate(day).valueOf(),
       ...other,
     },
-    ownerState: { ...parentProps, day, selected: isSelected },
+    ownerState: { ...ownerState, day, isDayDisabled: isDisabled, isDaySelected: isSelected },
   });
 
-  const isDisabled = React.useMemo(
-    () => disabled || isDateDisabled(day),
-    [disabled, isDateDisabled, day],
-  );
-
   const outsideCurrentMonth = React.useMemo(
     () => utils.getMonth(day) !== currentMonthNumber,
     [utils, day, currentMonthNumber],
@@ -343,6 +347,7 @@ export function DayCalendar<TDate extends PickerValidDate>(inProps: DayCalendarP
   const {
     onFocusedDayChange,
     className,
+    classes: classesProp,
     currentMonth,
     selectedDays,
     focusedDay,
@@ -372,7 +377,7 @@ export function DayCalendar<TDate extends PickerValidDate>(inProps: DayCalendarP
   } = props;
 
   const now = useNow<TDate>(timezone);
-  const classes = useUtilityClasses(props);
+  const classes = useUtilityClasses(classesProp);
   const isRtl = useRtl();
 
   const isDateDisabled = useIsDateDisabled({

diff --git a/packages/x-date-pickers/src/DateCalendar/index.ts b/packages/x-date-pickers/src/DateCalendar/index.ts
@@ -4,6 +4,7 @@ export type {
   DateCalendarSlots,
   DateCalendarSlotProps,
 } from './DateCalendar.types';
+export type { PickersDayOwnerState } from './DayCalendar';
 
 export { getDateCalendarUtilityClass, dateCalendarClasses } from './dateCalendarClasses';
 export type { DateCalendarClassKey, DateCalendarClasses } from './dateCalendarClasses';

diff --git a/packages/x-date-pickers/src/MonthCalendar/MonthCalendar.tsx b/packages/x-date-pickers/src/MonthCalendar/MonthCalendar.tsx
@@ -11,19 +11,18 @@ import {
 } from '@mui/utils';
 import { PickersMonth } from './PickersMonth';
 import { useUtils, useNow, useDefaultDates } from '../internals/hooks/useUtils';
-import { getMonthCalendarUtilityClass } from './monthCalendarClasses';
+import { getMonthCalendarUtilityClass, MonthCalendarClasses } from './monthCalendarClasses';
 import { applyDefaultDate, getMonthsInYear } from '../internals/utils/date-utils';
 import { DefaultizedProps } from '../internals/models/helpers';
 import { MonthCalendarProps } from './MonthCalendar.types';
 import { singleItemValueManager } from '../internals/utils/valueManagers';
 import { SECTION_TYPE_GRANULARITY } from '../internals/utils/getDefaultReferenceDate';
 import { useControlledValueWithTimezone } from '../internals/hooks/useValueWithTimezone';
 import { DIALOG_WIDTH } from '../internals/constants/dimensions';
-import { PickerValidDate } from '../models';
-
-const useUtilityClasses = (ownerState: MonthCalendarProps<any>) => {
-  const { classes } = ownerState;
+import { PickerOwnerState, PickerValidDate } from '../models';
+import { usePickersPrivateContext } from '../internals/hooks/usePickersPrivateContext';
 
+const useUtilityClasses = (classes: Partial<MonthCalendarClasses> | undefined) => {
   const slots = {
     root: ['root'],
   };
@@ -58,7 +57,7 @@ const MonthCalendarRoot = styled('div', {
   name: 'MuiMonthCalendar',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root,
-})<{ ownerState: MonthCalendarProps<any> }>({
+})<{ ownerState: PickerOwnerState }>({
   display: 'flex',
   flexWrap: 'wrap',
   alignContent: 'stretch',
@@ -88,6 +87,7 @@ export const MonthCalendar = React.forwardRef(function MonthCalendar<TDate exten
   const props = useMonthCalendarDefaultizedProps(inProps, 'MuiMonthCalendar');
   const {
     className,
+    classes: classesProp,
     value: valueProp,
     defaultValue,
     referenceDate: referenceDateProp,
@@ -124,6 +124,7 @@ export const MonthCalendar = React.forwardRef(function MonthCalendar<TDate exten
   const now = useNow<TDate>(timezone);
   const isRtl = useRtl();
   const utils = useUtils<TDate>();
+  const { ownerState } = usePickersPrivateContext();
 
   const referenceDate = React.useMemo(
     () =>
@@ -138,8 +139,7 @@ export const MonthCalendar = React.forwardRef(function MonthCalendar<TDate exten
     [], // eslint-disable-line react-hooks/exhaustive-deps
   );
 
-  const ownerState = props;
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(classesProp);
 
   const todayMonth = React.useMemo(() => utils.getMonth(now), [utils, now]);