[pickers] Refactor owner state typing (#17517)

Author: LukasTy

packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.test.tsx

@@ -9,7 +9,7 @@ import {
   openPicker,
   stubMatchMedia,
 } from 'test/utils/pickers';
-import { pickerPopperClasses } from '@mui/x-date-pickers/internals/components/PickerPopper';
+import { pickerPopperClasses } from '@mui/x-date-pickers/internals';
 import { MultiInputDateRangeField } from '../MultiInputDateRangeField';
 
 describe('<DateRangePicker />', () => {

packages/x-date-pickers-pro/src/themeAugmentation/components.ts

@@ -1,25 +1,41 @@
-import { ComponentsProps, ComponentsOverrides } from '@mui/material/styles';
+import { ComponentsProps } from '@mui/material/styles';
+import { ComponentsOverrides, PickerToolbarOwnerState } from '@mui/x-date-pickers/internals';
+import { FieldOwnerState, PickerOwnerState } from '@mui/x-date-pickers/models';
+import { DateRangeCalendarOwnerState } from '../DateRangeCalendar/DateRangeCalendar.types';
+import { DateRangePickerDayOwnerState } from '../DateRangePickerDay/DateRangePickerDay.types';
 
 export interface PickersProComponents<Theme = unknown> {
   MuiDateRangeCalendar?: {
     defaultProps?: ComponentsProps['MuiDateRangeCalendar'];
-    styleOverrides?: ComponentsOverrides<Theme>['MuiDateRangeCalendar'];
+    styleOverrides?: ComponentsOverrides<
+      Theme,
+      DateRangeCalendarOwnerState
+    >['MuiDateRangeCalendar'];
   };
   MuiDateRangePickerDay?: {
     defaultProps?: ComponentsProps['MuiDateRangePickerDay'];
-    styleOverrides?: ComponentsOverrides<Theme>['MuiDateRangePickerDay'];
+    styleOverrides?: ComponentsOverrides<
+      Theme,
+      DateRangePickerDayOwnerState
+    >['MuiDateRangePickerDay'];
   };
   MuiDateTimeRangePickerTabs?: {
     defaultProps?: ComponentsProps['MuiDateTimeRangePickerTabs'];
-    styleOverrides?: ComponentsOverrides<Theme>['MuiDateTimeRangePickerTabs'];
+    styleOverrides?: ComponentsOverrides<Theme, PickerOwnerState>['MuiDateTimeRangePickerTabs'];
   };
   MuiDateRangePickerToolbar?: {
     defaultProps?: ComponentsProps['MuiDateRangePickerToolbar'];
-    styleOverrides?: ComponentsOverrides<Theme>['MuiDateRangePickerToolbar'];
+    styleOverrides?: ComponentsOverrides<
+      Theme,
+      PickerToolbarOwnerState
+    >['MuiDateRangePickerToolbar'];
   };
   MuiDateTimeRangePickerToolbar?: {
     defaultProps?: ComponentsProps['MuiDateTimeRangePickerToolbar'];
-    styleOverrides?: ComponentsOverrides<Theme>['MuiDateTimeRangePickerToolbar'];
+    styleOverrides?: ComponentsOverrides<
+      Theme,
+      PickerToolbarOwnerState
+    >['MuiDateTimeRangePickerToolbar'];
   };
   MuiPickersRangeCalendarHeader?: {
     defaultProps?: ComponentsProps['MuiPickersRangeCalendarHeader'];
@@ -28,15 +44,15 @@ export interface PickersProComponents<Theme = unknown> {
   // Multi input range fields
   MuiMultiInputDateRangeField?: {
     defaultProps?: ComponentsProps['MuiMultiInputDateRangeField'];
-    styleOverrides?: ComponentsOverrides<Theme>['MuiMultiInputDateRangeField'];
+    styleOverrides?: ComponentsOverrides<Theme, FieldOwnerState>['MuiMultiInputDateRangeField'];
   };
   MuiMultiInputDateTimeRangeField?: {
     defaultProps?: ComponentsProps['MuiMultiInputDateTimeRangeField'];
-    styleOverrides?: ComponentsOverrides<Theme>['MuiMultiInputDateTimeRangeField'];
+    styleOverrides?: ComponentsOverrides<Theme, FieldOwnerState>['MuiMultiInputDateTimeRangeField'];
   };
   MuiMultiInputTimeRangeField?: {
     defaultProps?: ComponentsProps['MuiMultiInputTimeRangeField'];
-    styleOverrides?: ComponentsOverrides<Theme>['MuiMultiInputTimeRangeField'];
+    styleOverrides?: ComponentsOverrides<Theme, FieldOwnerState>['MuiMultiInputTimeRangeField'];
   };
 
   // Single input range fields

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

@@ -9,8 +9,7 @@ import {
   PickersFadeTransitionGroupClasses,
 } from './pickersFadeTransitionGroupClasses';
 
-export interface PickersFadeTransitionGroupProps {
-  children: React.ReactElement<any>;
+export interface ExportedPickersFadeTransitionGroupProps {
   className?: string;
   reduceAnimations: boolean;
   transKey: React.Key;
@@ -20,6 +19,10 @@ export interface PickersFadeTransitionGroupProps {
   classes?: Partial<PickersFadeTransitionGroupClasses>;
 }
 
+export interface PickersFadeTransitionGroupProps extends ExportedPickersFadeTransitionGroupProps {
+  children: React.ReactElement<any>;
+}
+
 const useUtilityClasses = (classes: Partial<PickersFadeTransitionGroupClasses> | undefined) => {
   const slots = {
     root: ['root'],
@@ -31,7 +34,7 @@ const useUtilityClasses = (classes: Partial<PickersFadeTransitionGroupClasses> |
 const PickersFadeTransitionGroupRoot = styled(TransitionGroup, {
   name: 'MuiPickersFadeTransitionGroup',
   slot: 'Root',
-})({
+})<{ ownerState: ExportedPickersFadeTransitionGroupProps }>({
   display: 'block',
   position: 'relative',
 });
@@ -41,16 +44,21 @@ const PickersFadeTransitionGroupRoot = styled(TransitionGroup, {
  */
 export function PickersFadeTransitionGroup(inProps: PickersFadeTransitionGroupProps) {
   const props = useThemeProps({ props: inProps, name: 'MuiPickersFadeTransitionGroup' });
-  const { children, className, reduceAnimations, transKey, classes: classesProp } = props;
+  const { className, reduceAnimations, transKey, classes: classesProp } = props;
+  const { children, ...other } = props;
   const classes = useUtilityClasses(classesProp);
   const theme = useTheme();
 
   if (reduceAnimations) {
     return children;
   }
+  const ownerState = { ...other };
 
   return (
-    <PickersFadeTransitionGroupRoot className={clsx(classes.root, className)}>
+    <PickersFadeTransitionGroupRoot
+      className={clsx(classes.root, className)}
+      ownerState={ownerState}
+    >
       <Fade
         appear={false}
         mountOnEnter

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

@@ -15,7 +15,7 @@ import { usePickerPrivateContext } from '../internals/hooks/usePickerPrivateCont
 
 export type SlideDirection = 'right' | 'left';
 
-interface PickerSlideTransitionOwnerState extends PickerOwnerState {
+export interface PickerSlideTransitionOwnerState extends PickerOwnerState {
   slideDirection: SlideDirection;
 }
 
@@ -70,7 +70,7 @@ const PickersSlideTransitionRoot = styled(TransitionGroup, {
         styles['slideExitActiveLeft-right'],
     },
   ],
-})<TransitionGroupProps>(({ theme }) => {
+})<TransitionGroupProps & { ownerState?: PickerSlideTransitionOwnerState }>(({ theme }) => {
   const slideTransition = theme.transitions.create('transform', {
     duration: theme.transitions.duration.complex,
     easing: 'cubic-bezier(0.35, 0.8, 0.4, 1)',
@@ -156,6 +156,7 @@ export function PickersSlideTransition(inProps: SlideTransitionProps) {
         })
       }
       role="presentation"
+      ownerState={ownerState}
     >
       <CSSTransition
         mountOnEnter

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

@@ -9,7 +9,10 @@ export { getDateCalendarUtilityClass, dateCalendarClasses } from './dateCalendar
 export type { DateCalendarClassKey, DateCalendarClasses } from './dateCalendarClasses';
 export { dayCalendarClasses } from './dayCalendarClasses';
 export type { DayCalendarClassKey, DayCalendarClasses } from './dayCalendarClasses';
-export type { PickersFadeTransitionGroupProps } from './PickersFadeTransitionGroup';
+export type {
+  PickersFadeTransitionGroupProps,
+  ExportedPickersFadeTransitionGroupProps,
+} from './PickersFadeTransitionGroup';
 export { pickersFadeTransitionGroupClasses } from './pickersFadeTransitionGroupClasses';
 export type {
   PickersFadeTransitionGroupClassKey,

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

@@ -39,7 +39,7 @@ const useUtilityClasses = (classes: Partial<DayCalendarSkeletonClasses> | undefi
 const DayCalendarSkeletonRoot = styled('div', {
   name: 'MuiDayCalendarSkeleton',
   slot: 'Root',
-})({
+})<{ ownerState: DayCalendarSkeletonProps }>({
   alignSelf: 'start',
 });
 
@@ -90,7 +90,11 @@ function DayCalendarSkeleton(inProps: DayCalendarSkeletonProps) {
   const classes = useUtilityClasses(classesProp);
 
   return (
-    <DayCalendarSkeletonRoot className={clsx(classes.root, className)} {...other}>
+    <DayCalendarSkeletonRoot
+      className={clsx(classes.root, className)}
+      ownerState={props}
+      {...other}
+    >
       {monthMap.map((week, index) => (
         <DayCalendarSkeletonWeek key={index} className={classes.week}>
           {week.map((dayInMonth, index2) => (

packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClockSection.tsx

@@ -43,7 +43,7 @@ export interface MultiSectionDigitalClockSectionProps<TSectionValue extends numb
   role?: string;
 }
 
-interface MultiSectionDigitalClockSectionOwnerState extends PickerOwnerState {
+export interface MultiSectionDigitalClockSectionOwnerState extends PickerOwnerState {
   /**
    * `true` if this is not the initial render of the digital clock.
    */

packages/x-date-pickers/src/PickersTextField/PickersInput/PickersInput.tsx

@@ -18,7 +18,7 @@ export interface PickersInputProps extends PickersInputBaseProps {
   disableUnderline?: boolean;
 }
 
-interface PickerInputOwnerState extends PickerTextFieldOwnerState {
+export interface PickerInputOwnerState extends PickerTextFieldOwnerState {
   /**
    * `true` if the input has an underline, `false` otherwise.
    */

packages/x-date-pickers/src/TimeClock/Clock.tsx

@@ -50,7 +50,7 @@ export interface ClockProps extends ReturnType<typeof useMeridiemMode>, FormProp
   classes?: Partial<ClockClasses>;
 }
 
-interface ClockOwnerState extends PickerOwnerState {
+export interface ClockOwnerState extends PickerOwnerState {
   /**
    * `true` if the clock is disabled, `false` otherwise.
    */

packages/x-date-pickers/src/TimeClock/ClockNumber.tsx

@@ -25,7 +25,7 @@ export interface ClockNumberProps extends React.HTMLAttributes<HTMLSpanElement>
   classes?: Partial<ClockNumberClasses>;
 }
 
-interface ClockNumberOwnerState extends PickerOwnerState {
+export interface ClockNumberOwnerState extends PickerOwnerState {
   /**
    * `true` if the clock number is in the inner clock ring.
    * When used with meridiem, all the hours are in the outer ring.

packages/x-date-pickers/src/TimeClock/ClockPointer.tsx

@@ -21,7 +21,7 @@ export interface ClockPointerProps extends React.HTMLAttributes<HTMLDivElement>
   classes?: Partial<ClockPointerClasses>;
 }
 
-interface ClockPointerOwnerState extends PickerOwnerState {
+export interface ClockPointerOwnerState extends PickerOwnerState {
   /**
    * `true` if the clock pointer should animate.
    */

packages/x-date-pickers/src/internals/components/PickerPopper/PickerPopper.tsx

@@ -26,7 +26,7 @@ import { usePickerPrivateContext } from '../../hooks/usePickerPrivateContext';
 import { PickerOwnerState } from '../../../models';
 import { usePickerContext } from '../../../hooks';
 
-interface PickerPopperOwnerState extends PickerOwnerState {
+export interface PickerPopperOwnerState extends PickerOwnerState {
   popperPlacement: PopperPlacementType;
 }
 

packages/x-date-pickers/src/internals/components/PickersToolbarButton.tsx

@@ -30,7 +30,7 @@ const useUtilityClasses = (classes: Partial<PickersToolbarButtonClasses> | undef
 const PickersToolbarButtonRoot = styled(Button, {
   name: 'MuiPickersToolbarButton',
   slot: 'Root',
-})({
+})<{ ownerState: PickersToolbarButtonProps }>({
   padding: 0,
   minWidth: 16,
   textTransform: 'none',
@@ -61,6 +61,7 @@ export const PickersToolbarButton = React.forwardRef(function PickersToolbarButt
       variant="text"
       ref={ref}
       className={clsx(classes.root, className)}
+      ownerState={props}
       {...(width ? { sx: { width } } : {})}
       {...other}
     >

packages/x-date-pickers/src/internals/components/PickersToolbarText.tsx

@@ -33,6 +33,7 @@ const PickersToolbarTextRoot = styled(Typography, {
   slot: 'Root',
 })<{
   component?: React.ElementType;
+  ownerState: PickersToolbarTextProps;
 }>(({ theme }) => ({
   transition: theme.transitions.create('color'),
   color: (theme.vars || theme).palette.text.secondary,
@@ -52,6 +53,7 @@ export const PickersToolbarText = React.forwardRef<HTMLSpanElement, PickersToolb
         ref={ref}
         className={clsx(classes.root, className)}
         component="span"
+        ownerState={props}
         {...(selected && { 'data-selected': true })}
         {...other}
       >

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

@@ -31,6 +31,7 @@ export type {
   PickerPopperSlots,
   PickerPopperSlotProps,
 } from './components/PickerPopper/PickerPopper';
+export { pickerPopperClasses } from './components/PickerPopper/pickerPopperClasses';
 export { PickersToolbar } from './components/PickersToolbar';
 export type { PickersToolbarProps } from './components/PickersToolbar';
 export { pickersToolbarClasses } from './components/pickersToolbarClasses';
@@ -154,6 +155,7 @@ export type {
   InferNonNullablePickerValue,
   PickerValidValue,
 } from './models/value';
+export type { ComponentsOverrides } from './models/helpers';
 
 export { createStepNavigation } from './utils/createStepNavigation';
 export {

packages/x-date-pickers/src/internals/models/helpers.ts

@@ -1,3 +1,5 @@
+import { ComponentNameToClassKey, ComponentsPropsList } from '@mui/material/styles';
+import { CSSObject, CSSInterpolation, Interpolation } from '@mui/system';
 /**
  * All standard components exposed by `material-ui` are `StyledComponents` with
  * certain `classes`, on which one can also set a top-level `className` and inline
@@ -7,3 +9,35 @@ export type ExtendMui<C, Removals extends keyof C = never> = Omit<
   C,
   'classes' | 'theme' | Removals
 >;
+
+// This and `ComponentsOverrides` are extracted from the `@mui/material/styles` package
+// with the addition of supporting explicit `OwnerState` type.
+// https://github.com/mui/material-ui/blob/master/packages/mui-material/src/styles/overrides.ts
+type OverridesStyleRules<
+  ClassKey extends string = string,
+  ComponentName = keyof ComponentsPropsList,
+  Theme = unknown,
+  OwnerState = unknown,
+> = Record<
+  ClassKey,
+  Interpolation<
+    (ComponentName extends keyof ComponentsPropsList
+      ? ComponentsPropsList[ComponentName] &
+          Record<string, unknown> & {
+            ownerState: OwnerState extends Object
+              ? OwnerState
+              : ComponentsPropsList[ComponentName] & Record<string, unknown>;
+          }
+      : {}) & {
+      theme: Theme;
+    } & Record<string, unknown>
+  >
+>;
+
+export type ComponentsOverrides<Theme = unknown, OwnerState = unknown> = {
+  [Name in keyof ComponentNameToClassKey]?: Partial<
+    OverridesStyleRules<ComponentNameToClassKey[Name], Name, Theme, OwnerState>
+  >;
+} & {
+  MuiCssBaseline?: CSSObject | string | ((theme: Theme) => CSSInterpolation);
+};