[pickers] Use the new ownerState in <PickersCalendarHeader />, `<…

…PickersArrowSwitcher />` and `<DayCalendarSkeleton />` (#15499)
mui · Nov 28, 2024 · 7cc3ead · 7cc3ead
1 parent 4108634
commit 7cc3ead
Show file tree

Hide file tree

Showing 10 changed files with 86 additions and 66 deletions.
diff --git a/packages/x-date-pickers/src/DateCalendar/PickersFadeTransitionGroup.tsx b/packages/x-date-pickers/src/DateCalendar/PickersFadeTransitionGroup.tsx
@@ -20,8 +20,7 @@ export interface PickersFadeTransitionGroupProps {
   classes?: Partial<PickersFadeTransitionGroupClasses>;
 }
 
-const useUtilityClasses = (ownerState: PickersFadeTransitionGroupProps) => {
-  const { classes } = ownerState;
+const useUtilityClasses = (classes: Partial<PickersFadeTransitionGroupClasses> | undefined) => {
   const slots = {
     root: ['root'],
   };
@@ -43,9 +42,10 @@ const PickersFadeTransitionGroupRoot = styled(TransitionGroup, {
  */
 export function PickersFadeTransitionGroup(inProps: PickersFadeTransitionGroupProps) {
   const props = useThemeProps({ props: inProps, name: 'MuiPickersFadeTransitionGroup' });
-  const { children, className, reduceAnimations, transKey } = props;
-  const classes = useUtilityClasses(props);
+  const { children, className, reduceAnimations, transKey, classes: classesProp } = props;
+  const classes = useUtilityClasses(classesProp);
   const theme = useTheme();
+
   if (reduceAnimations) {
     return children;
   }

diff --git a/packages/x-date-pickers/src/DateCalendar/PickersSlideTransition.tsx b/packages/x-date-pickers/src/DateCalendar/PickersSlideTransition.tsx
@@ -10,8 +10,15 @@ import {
   pickersSlideTransitionClasses,
   PickersSlideTransitionClasses,
 } from './pickersSlideTransitionClasses';
+import { PickerOwnerState } from '../models/pickers';
+import { usePickerPrivateContext } from '../internals/hooks/usePickerPrivateContext';
 
 export type SlideDirection = 'right' | 'left';
+
+interface PickerSlideTransitionOwnerState extends PickerOwnerState {
+  slideDirection: SlideDirection;
+}
+
 export interface ExportedSlideTransitionProps {
   /**
    * Override or extend the styles applied to the component.
@@ -28,8 +35,12 @@ export interface SlideTransitionProps
   transKey: React.Key;
 }
 
-const useUtilityClasses = (ownerState: SlideTransitionProps) => {
-  const { classes, slideDirection } = ownerState;
+const useUtilityClasses = (
+  classes: Partial<PickersSlideTransitionClasses> | undefined,
+  ownerState: PickerSlideTransitionOwnerState,
+) => {
+  const { slideDirection } = ownerState;
+
   const slots = {
     root: ['root'],
     exit: ['slideExit'],
@@ -117,11 +128,13 @@ export function PickersSlideTransition(inProps: SlideTransitionProps) {
     reduceAnimations,
     slideDirection,
     transKey,
-    // extracting `classes` from `other`
-    classes: providedClasses,
+    classes: classesProp,
     ...other
   } = props;
-  const classes = useUtilityClasses(props);
+
+  const { ownerState: pickerOwnerState } = usePickerPrivateContext();
+  const ownerState = { ...pickerOwnerState, slideDirection };
+  const classes = useUtilityClasses(classesProp, ownerState);
   const theme = useTheme();
   if (reduceAnimations) {
     return <div className={clsx(classes.root, className)}>{children}</div>;

diff --git a/packages/x-date-pickers/src/DayCalendarSkeleton/DayCalendarSkeleton.tsx b/packages/x-date-pickers/src/DayCalendarSkeleton/DayCalendarSkeleton.tsx
@@ -26,8 +26,7 @@ export interface DayCalendarSkeletonProps extends HTMLDivProps {
   ref?: React.Ref<HTMLDivElement>;
 }
 
-const useUtilityClasses = (ownerState: DayCalendarSkeletonProps) => {
-  const { classes } = ownerState;
+const useUtilityClasses = (classes: Partial<DayCalendarSkeletonClasses> | undefined) => {
   const slots = {
     root: ['root'],
     week: ['week'],
@@ -59,14 +58,11 @@ const DayCalendarSkeletonDay = styled(Skeleton, {
   name: 'MuiDayCalendarSkeleton',
   slot: 'DaySkeleton',
   overridesResolver: (props, styles) => styles.daySkeleton,
-})<{ ownerState: { day: number } }>({
+})({
   margin: `0 ${DAY_MARGIN}px`,
-  variants: [
-    {
-      props: { day: 0 },
-      style: { visibility: 'hidden' },
-    },
-  ],
+  '&[data-day-in-month="0"]': {
+    visibility: 'hidden',
+  },
 });
 
 const monthMap = [
@@ -92,22 +88,22 @@ function DayCalendarSkeleton(inProps: DayCalendarSkeletonProps) {
     name: 'MuiDayCalendarSkeleton',
   });
 
-  const { className, ...other } = props;
+  const { className, classes: classesProp, ...other } = props;
 
-  const classes = useUtilityClasses(other);
+  const classes = useUtilityClasses(classesProp);
 
   return (
     <DayCalendarSkeletonRoot className={clsx(classes.root, className)} {...other}>
       {monthMap.map((week, index) => (
         <DayCalendarSkeletonWeek key={index} className={classes.week}>
-          {week.map((day, index2) => (
+          {week.map((dayInMonth, index2) => (
             <DayCalendarSkeletonDay
               key={index2}
               variant="circular"
               width={DAY_SIZE}
               height={DAY_SIZE}
               className={classes.daySkeleton}
-              ownerState={{ day }}
+              data-day-in-month={dayInMonth}
             />
           ))}
         </DayCalendarSkeletonWeek>

diff --git a/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.tsx b/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.tsx
@@ -18,15 +18,14 @@ import {
 } from '../internals/hooks/date-helpers-hooks';
 import {
   getPickersCalendarHeaderUtilityClass,
+  PickersCalendarHeaderClasses,
   pickersCalendarHeaderClasses,
 } from './pickersCalendarHeaderClasses';
-import {
-  PickersCalendarHeaderOwnerState,
-  PickersCalendarHeaderProps,
-} from './PickersCalendarHeader.types';
+import { PickersCalendarHeaderProps } from './PickersCalendarHeader.types';
+import { PickerOwnerState } from '../models/pickers';
+import { usePickerPrivateContext } from '../internals/hooks/usePickerPrivateContext';
 
-const useUtilityClasses = (ownerState: PickersCalendarHeaderOwnerState) => {
-  const { classes } = ownerState;
+const useUtilityClasses = (classes: Partial<PickersCalendarHeaderClasses> | undefined) => {
   const slots = {
     root: ['root'],
     labelContainer: ['labelContainer'],
@@ -43,7 +42,7 @@ const PickersCalendarHeaderRoot = styled('div', {
   slot: 'Root',
   overridesResolver: (_, styles) => styles.root,
 })<{
-  ownerState: PickersCalendarHeaderOwnerState;
+  ownerState: PickerOwnerState;
 }>({
   display: 'flex',
   alignItems: 'center',
@@ -61,7 +60,7 @@ const PickersCalendarHeaderLabelContainer = styled('div', {
   slot: 'LabelContainer',
   overridesResolver: (_, styles) => styles.labelContainer,
 })<{
-  ownerState: PickersCalendarHeaderOwnerState;
+  ownerState: PickerOwnerState;
 }>(({ theme }) => ({
   display: 'flex',
   overflow: 'hidden',
@@ -77,7 +76,7 @@ const PickersCalendarHeaderLabel = styled('div', {
   slot: 'Label',
   overridesResolver: (_, styles) => styles.label,
 })<{
-  ownerState: PickersCalendarHeaderOwnerState;
+  ownerState: PickerOwnerState;
 }>({
   marginRight: 6,
 });
@@ -87,7 +86,7 @@ const PickersCalendarHeaderSwitchViewButton = styled(IconButton, {
   slot: 'SwitchViewButton',
   overridesResolver: (_, styles) => styles.switchViewButton,
 })<{
-  ownerState: PickersCalendarHeaderOwnerState;
+  ownerState: PickerOwnerState;
 }>({
   marginRight: 'auto',
   variants: [
@@ -107,7 +106,7 @@ const PickersCalendarHeaderSwitchViewIcon = styled(ArrowDropDownIcon, {
   slot: 'SwitchViewIcon',
   overridesResolver: (_, styles) => styles.switchViewIcon,
 })<{
-  ownerState: PickersCalendarHeaderOwnerState;
+  ownerState: PickerOwnerState;
 }>(({ theme }) => ({
   willChange: 'transform',
   transition: theme.transitions.create('transform'),
@@ -154,14 +153,14 @@ const PickersCalendarHeader = React.forwardRef(function PickersCalendarHeader(
     views,
     labelId,
     className,
+    classes: classesProp,
     timezone,
     format = `${utils.formats.month} ${utils.formats.year}`,
     ...other
   } = props;
 
-  const ownerState = props;
-
-  const classes = useUtilityClasses(props);
+  const { ownerState } = usePickerPrivateContext();
+  const classes = useUtilityClasses(classesProp);
 
   const SwitchViewButton = slots?.switchViewButton ?? PickersCalendarHeaderSwitchViewButton;
   const switchViewButtonProps = useSlotProps({

diff --git a/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.types.ts b/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.types.ts
@@ -9,7 +9,7 @@ import {
   PickersArrowSwitcherSlotProps,
 } from '../internals/components/PickersArrowSwitcher';
 import { MonthValidationOptions } from '../internals/hooks/date-helpers-hooks';
-import { PickerValidDate, DateView } from '../models';
+import { PickerValidDate, DateView, PickerOwnerState } from '../models';
 import { SlideDirection } from '../DateCalendar/PickersSlideTransition';
 import { PickersCalendarHeaderClasses } from './pickersCalendarHeaderClasses';
 
@@ -29,19 +29,17 @@ export interface PickersCalendarHeaderSlots extends PickersArrowSwitcherSlots {
 // We keep the interface to allow module augmentation
 export interface PickersCalendarHeaderSlotPropsOverrides {}
 
-export type PickersCalendarHeaderOwnerState = PickersCalendarHeaderProps;
-
 export interface PickersCalendarHeaderSlotProps extends PickersArrowSwitcherSlotProps {
   switchViewButton?: SlotComponentProps<
     typeof IconButton,
     PickersCalendarHeaderSlotPropsOverrides,
-    PickersCalendarHeaderOwnerState
+    PickerOwnerState
   >;
 
   switchViewIcon?: SlotComponentProps<
     typeof SvgIcon,
     PickersCalendarHeaderSlotPropsOverrides,
-    PickersCalendarHeaderOwnerState
+    PickerOwnerState
   >;
 }
 

diff --git a/packages/x-date-pickers/src/PickersCalendarHeader/describes.PickersCalendarHeader.test.tsx b/packages/x-date-pickers/src/PickersCalendarHeader/describes.PickersCalendarHeader.test.tsx
@@ -24,7 +24,12 @@ describe('<PickersCalendarHeader /> - Describes', () => {
       render,
       muiName: 'MuiPickersCalendarHeader',
       refInstanceof: window.HTMLDivElement,
-      skip: ['componentProp', 'componentsProp', 'themeVariants'],
+      skip: [
+        'componentProp',
+        'componentsProp',
+        'themeVariants',
+        'slotPropsCallbackWithPropsAsOwnerState',
+      ],
       slots: {
         switchViewButton: {
           expectedClassName: pickersCalendarHeaderClasses.switchViewButton,

diff --git a/...ges/x-date-pickers/src/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.tsx b/...ges/x-date-pickers/src/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.tsx
@@ -7,18 +7,20 @@ import composeClasses from '@mui/utils/composeClasses';
 import useSlotProps from '@mui/utils/useSlotProps';
 import IconButton from '@mui/material/IconButton';
 import { ArrowLeftIcon, ArrowRightIcon } from '../../../icons';
+import { PickersArrowSwitcherProps } from './PickersArrowSwitcher.types';
 import {
-  PickersArrowSwitcherOwnerState,
-  PickersArrowSwitcherProps,
-} from './PickersArrowSwitcher.types';
-import { getPickersArrowSwitcherUtilityClass } from './pickersArrowSwitcherClasses';
+  getPickersArrowSwitcherUtilityClass,
+  PickersArrowSwitcherClasses,
+} from './pickersArrowSwitcherClasses';
+import { usePickerPrivateContext } from '../../hooks/usePickerPrivateContext';
+import { PickerOwnerState } from '../../../models';
 
 const PickersArrowSwitcherRoot = styled('div', {
   name: 'MuiPickersArrowSwitcher',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root,
 })<{
-  ownerState: PickersArrowSwitcherProps;
+  ownerState: PickerOwnerState;
 }>({
   display: 'flex',
 });
@@ -28,7 +30,7 @@ const PickersArrowSwitcherSpacer = styled('div', {
   slot: 'Spacer',
   overridesResolver: (props, styles) => styles.spacer,
 })<{
-  ownerState: PickersArrowSwitcherProps;
+  ownerState: PickerOwnerState;
 }>(({ theme }) => ({
   width: theme.spacing(3),
 }));
@@ -38,7 +40,7 @@ const PickersArrowSwitcherButton = styled(IconButton, {
   slot: 'Button',
   overridesResolver: (props, styles) => styles.button,
 })<{
-  ownerState: PickersArrowSwitcherProps;
+  ownerState: PickerOwnerState;
 }>({
   variants: [
     {
@@ -48,8 +50,7 @@ const PickersArrowSwitcherButton = styled(IconButton, {
   ],
 });
 
-const useUtilityClasses = (ownerState: PickersArrowSwitcherOwnerState) => {
-  const { classes } = ownerState;
+const useUtilityClasses = (classes: Partial<PickersArrowSwitcherClasses> | undefined) => {
   const slots = {
     root: ['root'],
     spacer: ['spacer'],
@@ -84,12 +85,13 @@ export const PickersArrowSwitcher = React.forwardRef(function PickersArrowSwitch
     onGoToPrevious,
     previousLabel,
     labelId,
+    classes: classesProp,
     ...other
   } = props;
 
-  const ownerState = props;
+  const { ownerState } = usePickerPrivateContext();
 
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(classesProp);
 
   const nextProps = {
     isDisabled: isNextDisabled,
@@ -117,7 +119,7 @@ export const PickersArrowSwitcher = React.forwardRef(function PickersArrowSwitch
       edge: 'end',
       onClick: previousProps.goTo,
     },
-    ownerState: { ...ownerState, hidden: previousProps.isHidden },
+    ownerState: { ...ownerState, hidden: previousProps.isHidden ?? false },
     className: clsx(classes.button, classes.previousIconButton),
   });
 
@@ -133,7 +135,7 @@ export const PickersArrowSwitcher = React.forwardRef(function PickersArrowSwitch
       edge: 'start',
       onClick: nextProps.goTo,
     },
-    ownerState: { ...ownerState, hidden: nextProps.isHidden },
+    ownerState: { ...ownerState, hidden: nextProps.isHidden ?? false },
     className: clsx(classes.button, classes.nextIconButton),
   });
 

diff --git a/...date-pickers/src/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.types.tsx b/...date-pickers/src/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.types.tsx
@@ -3,6 +3,7 @@ import { SlotComponentProps } from '@mui/utils';
 import IconButton from '@mui/material/IconButton';
 import SvgIcon from '@mui/material/SvgIcon';
 import { PickersArrowSwitcherClasses } from './pickersArrowSwitcherClasses';
+import { PickerOwnerState } from '../../../models';
 
 export interface ExportedPickersArrowSwitcherProps {
   /**
@@ -41,7 +42,12 @@ export interface PickersArrowSwitcherProps
   labelId?: string;
 }
 
-export type PickersArrowSwitcherOwnerState = PickersArrowSwitcherProps;
+export interface PickersArrowSwitcherOwnerState extends PickerOwnerState {
+  /**
+   * If `true`, this button should be hidden.
+   */
+  hidden: boolean;
+}
 
 export interface PickersArrowSwitcherSlotPropsOverrides {}
 
@@ -68,29 +74,25 @@ export interface PickersArrowSwitcherSlots {
   rightArrowIcon?: React.ElementType;
 }
 
-export interface PickersArrowSwitcherButtonSlotOwnerState extends PickersArrowSwitcherOwnerState {
-  hidden?: boolean;
-}
-
 export interface PickersArrowSwitcherSlotProps {
   previousIconButton?: SlotComponentProps<
     typeof IconButton,
     PickersArrowSwitcherSlotPropsOverrides,
-    PickersArrowSwitcherButtonSlotOwnerState
+    PickersArrowSwitcherOwnerState
   >;
   nextIconButton?: SlotComponentProps<
     typeof IconButton,
     PickersArrowSwitcherSlotPropsOverrides,
-    PickersArrowSwitcherButtonSlotOwnerState
+    PickersArrowSwitcherOwnerState
   >;
   leftArrowIcon?: SlotComponentProps<
     typeof SvgIcon,
     PickersArrowSwitcherSlotPropsOverrides,
-    PickersArrowSwitcherButtonSlotOwnerState
+    PickerOwnerState
   >;
   rightArrowIcon?: SlotComponentProps<
     typeof SvgIcon,
     PickersArrowSwitcherSlotPropsOverrides,
-    PickersArrowSwitcherButtonSlotOwnerState
+    PickerOwnerState
   >;
 }