[pickers] Use the new ownerState in DateCalendar, `DateRangeCalen…

…dar`, `MonthCalendar` and `YearCalendar` (#15171)

packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.tsx

@@ -26,11 +26,13 @@ import {
   useControlledValueWithTimezone,
   useViews,
   PickerRangeValue,
+  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';
@@ -134,12 +136,14 @@ function useDateRangeCalendarDefaultizedProps(
   };
 }
 
-const useUtilityClasses = (ownerState: DateRangeCalendarOwnerState) => {
-  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);
@@ -174,6 +178,7 @@ const DateRangeCalendar = React.forwardRef(function DateRangeCalendar(
     referenceDate,
     onChange,
     className,
+    classes: classesProp,
     disableFuture,
     disablePast,
     minDate,
@@ -300,8 +305,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<PickerRangeValue>(() => {
     if (!valueDayRange[0] || !valueDayRange[1] || !rangeDragDay) {
@@ -369,7 +378,7 @@ const DateRangeCalendar = React.forwardRef(function DateRangeCalendar(
         slots,
         slotProps,
       },
-      ownerState: props,
+      ownerState,
     });
 
   const prevValue = React.useRef<PickerRangeValue | null>(null);
@@ -454,7 +463,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];
@@ -487,7 +496,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,

packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.types.ts

@@ -3,20 +3,20 @@ import { SxProps } from '@mui/system';
 import { SlotComponentProps } from '@mui/utils';
 import { Theme } from '@mui/material/styles';
 import { DefaultizedProps } from '@mui/x-internals/types';
-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 { PickerDayOwnerState } from '@mui/x-date-pickers/DateCalendar';
 import {
   BaseDateValidationProps,
   ExportedDayCalendarProps,
   DayCalendarSlots,
   DayCalendarSlotProps,
   PickersArrowSwitcherSlots,
   PickersArrowSwitcherSlotProps,
-  DayCalendarProps,
   ExportedUseViewsOptions,
   PickerRangeValue,
 } from '@mui/x-date-pickers/internals';
@@ -49,12 +49,12 @@ export interface DateRangeCalendarSlotProps
   extends PickersArrowSwitcherSlotProps,
     Omit<DayCalendarSlotProps, 'day'>,
     PickersCalendarHeaderSlotProps {
-  calendarHeader?: SlotComponentProps<typeof PickersCalendarHeader, {}, DateRangeCalendarProps>;
-  day?: SlotComponentProps<
-    typeof DateRangePickerDay,
+  calendarHeader?: SlotComponentProps<
+    typeof PickersCalendarHeader,
     {},
-    DayCalendarProps & { day: PickerValidDate; selected: boolean }
+    DateRangeCalendarOwnerState
   >;
+  day?: SlotComponentProps<typeof DateRangePickerDay, {}, PickerDayOwnerState>;
 }
 
 export interface ExportedDateRangeCalendarProps
@@ -151,8 +151,8 @@ export interface DateRangeCalendarProps
   availableRangePositions?: RangePosition[];
 }
 
-export interface DateRangeCalendarOwnerState extends DateRangeCalendarProps {
-  isDragging: boolean;
+export interface DateRangeCalendarOwnerState extends PickerOwnerState {
+  isDraggingDay: boolean;
 }
 
 export type DateRangeCalendarDefaultizedProps = DefaultizedProps<

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) => {
-  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 }>({
+})<{ 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 }>({});
+})<{ ownerState: PickerOwnerState }>({});
 
 type DateCalendarComponent = ((
   props: DateCalendarProps & React.RefAttributes<HTMLDivElement>,
@@ -105,6 +105,7 @@ export const DateCalendar = React.forwardRef(function DateCalendar(
   ref: React.Ref<HTMLDivElement>,
 ) {
   const utils = useUtils();
+  const { ownerState } = usePickersPrivateContext();
   const id = useId();
   const props = useDateCalendarDefaultizedProps(inProps, 'MuiDateCalendar');
 
@@ -127,6 +128,7 @@ export const DateCalendar = React.forwardRef(function DateCalendar(
     views,
     openTo,
     className,
+    classes: classesProp,
     disabled,
     readOnly,
     minDate,
@@ -217,7 +219,7 @@ export const DateCalendar = React.forwardRef(function DateCalendar(
       timezone,
       labelId: gridLabelId,
     },
-    ownerState: props,
+    ownerState,
   });
 
   const handleDateMonthChange = useEventCallback((newDate: PickerValidDate) => {
@@ -295,8 +297,7 @@ export const DateCalendar = React.forwardRef(function DateCalendar(
     }
   }, [value]); // eslint-disable-line
 
-  const ownerState = props;
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(classesProp);
 
   const baseDateValidationProps: Required<BaseDateValidationProps> = {
     disablePast,

packages/x-date-pickers/src/DateCalendar/DateCalendar.types.ts

@@ -13,7 +13,7 @@ import { DayCalendarSlots, DayCalendarSlotProps, ExportedDayCalendarProps } from
 import { DateCalendarClasses } from './dateCalendarClasses';
 import { BaseDateValidationProps } from '../internals/models/validation';
 import { ExportedUseViewsOptions } from '../internals/hooks/useViews';
-import { DateView, PickerValidDate, TimezoneProps } from '../models';
+import { DateView, PickerOwnerState, PickerValidDate, TimezoneProps } from '../models';
 import {
   ExportedYearCalendarProps,
   YearCalendarSlots,
@@ -44,7 +44,7 @@ export interface DateCalendarSlotProps
     DayCalendarSlotProps,
     MonthCalendarSlotProps,
     YearCalendarSlotProps {
-  calendarHeader?: SlotComponentProps<typeof PickersCalendarHeader, {}, DateCalendarProps>;
+  calendarHeader?: SlotComponentProps<typeof PickersCalendarHeader, {}, PickerOwnerState>;
 }
 
 export interface ExportedDateCalendarProps

packages/x-date-pickers/src/DateCalendar/DayCalendar.tsx

@@ -29,7 +29,9 @@ 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 { usePickersPrivateContext } from '../internals/hooks/usePickersPrivateContext';
+import { DateCalendarClasses } from './dateCalendarClasses';
 
 export interface DayCalendarSlots {
   /**
@@ -41,11 +43,13 @@ export interface DayCalendarSlots {
 }
 
 export interface DayCalendarSlotProps {
-  day?: SlotComponentPropsFromProps<
-    PickersDayProps,
-    {},
-    DayCalendarProps & { day: PickerValidDate; selected: boolean }
-  >;
+  day?: SlotComponentPropsFromProps<PickersDayProps, {}, PickerDayOwnerState>;
+}
+
+export interface PickerDayOwnerState extends PickerOwnerState {
+  isDaySelected: boolean;
+  isDayDisabled: boolean;
+  day: PickerValidDate;
 }
 
 export interface ExportedDayCalendarProps extends ExportedPickersDayProps {
@@ -119,8 +123,7 @@ export interface DayCalendarProps
   slotProps?: DayCalendarSlotProps;
 }
 
-const useUtilityClasses = (ownerState: DayCalendarProps) => {
-  const { classes } = ownerState;
+const useUtilityClasses = (classes: Partial<DateCalendarClasses> | undefined) => {
   const slots = {
     root: ['root'],
     header: ['header'],
@@ -266,11 +269,17 @@ function WrappedDay({
 
   const utils = useUtils();
   const now = useNow(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({
@@ -285,14 +294,9 @@ function WrappedDay({
       '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],
@@ -342,6 +346,7 @@ export function DayCalendar(inProps: DayCalendarProps) {
   const {
     onFocusedDayChange,
     className,
+    classes: classesProp,
     currentMonth,
     selectedDays,
     focusedDay,
@@ -371,7 +376,7 @@ export function DayCalendar(inProps: DayCalendarProps) {
   } = props;
 
   const now = useNow(timezone);
-  const classes = useUtilityClasses(props);
+  const classes = useUtilityClasses(classesProp);
   const isRtl = useRtl();
 
   const isDateDisabled = useIsDateDisabled({

packages/x-date-pickers/src/DateCalendar/index.ts

@@ -4,6 +4,7 @@ export type {
   DateCalendarSlots,
   DateCalendarSlotProps,
 } from './DateCalendar.types';
+export type { PickerDayOwnerState } from './DayCalendar';
 
 export { getDateCalendarUtilityClass, dateCalendarClasses } from './dateCalendarClasses';
 export type { DateCalendarClassKey, DateCalendarClasses } from './dateCalendarClasses';

packages/x-date-pickers/src/MonthCalendar/MonthCalendar.tsx

@@ -12,18 +12,17 @@ import {
 import { DefaultizedProps } from '@mui/x-internals/types';
 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 { 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) => {
-  const { classes } = ownerState;
+import { PickerOwnerState, PickerValidDate } from '../models';
+import { usePickersPrivateContext } from '../internals/hooks/usePickersPrivateContext';
 
+const useUtilityClasses = (classes: Partial<MonthCalendarClasses> | undefined) => {
   const slots = {
     root: ['root'],
   };
@@ -55,7 +54,7 @@ const MonthCalendarRoot = styled('div', {
   name: 'MuiMonthCalendar',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root,
-})<{ ownerState: MonthCalendarProps }>({
+})<{ ownerState: PickerOwnerState }>({
   display: 'flex',
   flexWrap: 'wrap',
   alignContent: 'stretch',
@@ -85,6 +84,7 @@ export const MonthCalendar = React.forwardRef(function MonthCalendar(
   const props = useMonthCalendarDefaultizedProps(inProps, 'MuiMonthCalendar');
   const {
     className,
+    classes: classesProp,
     value: valueProp,
     defaultValue,
     referenceDate: referenceDateProp,
@@ -121,6 +121,7 @@ export const MonthCalendar = React.forwardRef(function MonthCalendar(
   const now = useNow(timezone);
   const isRtl = useRtl();
   const utils = useUtils();
+  const { ownerState } = usePickersPrivateContext();
 
   const referenceDate = React.useMemo(
     () =>
@@ -135,8 +136,7 @@ export const MonthCalendar = React.forwardRef(function MonthCalendar(
     [], // 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]);