[pickers] Refactor owner state typing

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.d.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/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/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,33 @@ export type ExtendMui<C, Removals extends keyof C = never> = Omit<
   C,
   'classes' | 'theme' | Removals
 >;
+
+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);
+};

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

@@ -1,94 +1,114 @@
-import { ComponentsProps, ComponentsOverrides } from '@mui/material/styles';
+import { ComponentsProps } from '@mui/material/styles';
+import { ComponentsOverrides } from '../internals/models/helpers';
+import { PickerTextFieldOwnerState } from '../models/fields';
+import { ClockOwnerState } from '../TimeClock/Clock';
+import { ClockNumberOwnerState } from '../TimeClock/ClockNumber';
+import { ClockPointerOwnerState } from '../TimeClock/ClockPointer';
+import { PickerOwnerState } from '../models/pickers';
+import { PickerToolbarOwnerState } from '../internals/hooks/useToolbarOwnerState';
+import { PickerDayOwnerState } from '../PickersDay';
+import { DigitalClockOwnerState } from '../DigitalClock/DigitalClock.types';
+import { MultiSectionDigitalClockSectionOwnerState } from '../MultiSectionDigitalClock/MultiSectionDigitalClockSection';
+import { PickerPopperOwnerState } from '../internals/components/PickerPopper/PickerPopper';
+import { PickerLayoutOwnerState } from '../PickersLayout';
+import { PickerInputOwnerState } from '../PickersTextField/PickersInput/PickersInput';
+import { PickerFilledInputOwnerState } from '../PickersTextField/PickersFilledInput/PickersFilledInput';
 
 export interface PickerComponents<Theme = unknown> {
   MuiClock?: {
     defaultProps?: ComponentsProps['MuiClock'];
-    styleOverrides?: ComponentsOverrides<Theme>['MuiClock'];
+    styleOverrides?: ComponentsOverrides<Theme, ClockOwnerState>['MuiClock'];
   };
   MuiClockNumber?: {
     defaultProps?: ComponentsProps['MuiClockNumber'];
-    styleOverrides?: ComponentsOverrides<Theme>['MuiClockNumber'];
+    styleOverrides?: ComponentsOverrides<Theme, ClockNumberOwnerState>['MuiClockNumber'];
   };
   MuiClockPointer?: {
     defaultProps?: ComponentsProps['MuiClockPointer'];
-    styleOverrides?: ComponentsOverrides<Theme>['MuiClockPointer'];
+    styleOverrides?: ComponentsOverrides<Theme, ClockPointerOwnerState>['MuiClockPointer'];
   };
   MuiDateCalendar?: {
     defaultProps?: ComponentsProps['MuiDateCalendar'];
-    styleOverrides?: ComponentsOverrides<Theme>['MuiDateCalendar'];
+    styleOverrides?: ComponentsOverrides<Theme, PickerOwnerState>['MuiDateCalendar'];
   };
   MuiDateField?: {
     defaultProps?: ComponentsProps['MuiDateField'];
   };
   MuiDatePickerToolbar?: {
     defaultProps?: ComponentsProps['MuiDatePickerToolbar'];
-    styleOverrides?: ComponentsOverrides<Theme>['MuiDatePickerToolbar'];
+    styleOverrides?: ComponentsOverrides<Theme, PickerToolbarOwnerState>['MuiDatePickerToolbar'];
   };
   MuiDateTimeField?: {
     defaultProps?: ComponentsProps['MuiDateTimeField'];
   };
   MuiDateTimePickerTabs?: {
     defaultProps?: ComponentsProps['MuiDateTimePickerTabs'];
-    styleOverrides?: ComponentsOverrides<Theme>['MuiDateTimePickerTabs'];
+    styleOverrides?: ComponentsOverrides<Theme, PickerOwnerState>['MuiDateTimePickerTabs'];
   };
   MuiDateTimePickerToolbar?: {
     defaultProps?: ComponentsProps['MuiDateTimePickerToolbar'];
-    styleOverrides?: ComponentsOverrides<Theme>['MuiDateTimePickerToolbar'];
+    styleOverrides?: ComponentsOverrides<
+      Theme,
+      PickerToolbarOwnerState
+    >['MuiDateTimePickerToolbar'];
   };
   MuiDayCalendar?: {
     defaultProps?: ComponentsProps['MuiDayCalendar'];
-    styleOverrides?: ComponentsOverrides<Theme>['MuiDayCalendar'];
+    styleOverrides?: ComponentsOverrides<Theme, PickerDayOwnerState>['MuiDayCalendar'];
   };
   MuiDayCalendarSkeleton?: {
     defaultProps?: ComponentsProps['MuiDayCalendarSkeleton'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiDayCalendarSkeleton'];
   };
   MuiDigitalClock?: {
     defaultProps?: ComponentsProps['MuiDigitalClock'];
-    styleOverrides?: ComponentsOverrides<Theme>['MuiDigitalClock'];
+    styleOverrides?: ComponentsOverrides<Theme, DigitalClockOwnerState>['MuiDigitalClock'];
   };
   MuiLocalizationProvider?: {
     defaultProps?: ComponentsProps['MuiLocalizationProvider'];
   };
   MuiMonthCalendar?: {
     defaultProps?: ComponentsProps['MuiMonthCalendar'];
-    styleOverrides?: ComponentsOverrides<Theme>['MuiMonthCalendar'];
+    styleOverrides?: ComponentsOverrides<Theme, PickerOwnerState>['MuiMonthCalendar'];
   };
   MuiMultiSectionDigitalClock?: {
     defaultProps?: ComponentsProps['MuiMultiSectionDigitalClock'];
-    styleOverrides?: ComponentsOverrides<Theme>['MuiMultiSectionDigitalClock'];
+    styleOverrides?: ComponentsOverrides<Theme, PickerOwnerState>['MuiMultiSectionDigitalClock'];
   };
   MuiMultiSectionDigitalClockSection?: {
     defaultProps?: ComponentsProps['MuiMultiSectionDigitalClockSection'];
-    styleOverrides?: ComponentsOverrides<Theme>['MuiMultiSectionDigitalClockSection'];
+    styleOverrides?: ComponentsOverrides<
+      Theme,
+      MultiSectionDigitalClockSectionOwnerState
+    >['MuiMultiSectionDigitalClockSection'];
   };
   MuiPickersArrowSwitcher?: {
     defaultProps?: ComponentsProps['MuiPickersArrowSwitcher'];
-    styleOverrides?: ComponentsOverrides<Theme>['MuiPickersArrowSwitcher'];
+    styleOverrides?: ComponentsOverrides<Theme, PickerOwnerState>['MuiPickersArrowSwitcher'];
   };
   MuiPickersCalendarHeader?: {
     defaultProps?: ComponentsProps['MuiPickersCalendarHeader'];
-    styleOverrides?: ComponentsOverrides<Theme>['MuiPickersCalendarHeader'];
+    styleOverrides?: ComponentsOverrides<Theme, PickerOwnerState>['MuiPickersCalendarHeader'];
   };
   MuiPickersDay?: {
     defaultProps?: ComponentsProps['MuiPickersDay'];
-    styleOverrides?: ComponentsOverrides<Theme>['MuiPickersDay'];
+    styleOverrides?: ComponentsOverrides<Theme, PickerDayOwnerState>['MuiPickersDay'];
   };
   MuiPickersFadeTransitionGroup?: {
     defaultProps?: ComponentsProps['MuiPickersFadeTransitionGroup'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiPickersFadeTransitionGroup'];
   };
   MuiPickerPopper?: {
     defaultProps?: ComponentsProps['MuiPickerPopper'];
-    styleOverrides?: ComponentsOverrides<Theme>['MuiPickerPopper'];
+    styleOverrides?: ComponentsOverrides<Theme, PickerPopperOwnerState>['MuiPickerPopper'];
   };
   MuiPickersSlideTransition?: {
     defaultProps?: ComponentsProps['MuiPickersSlideTransition'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiPickersSlideTransition'];
   };
   MuiPickersToolbar?: {
     defaultProps?: ComponentsProps['MuiPickersToolbar'];
-    styleOverrides?: ComponentsOverrides<Theme>['MuiPickersToolbar'];
+    styleOverrides?: ComponentsOverrides<Theme, PickerToolbarOwnerState>['MuiPickersToolbar'];
   };
   MuiPickersToolbarButton?: {
     defaultProps?: ComponentsProps['MuiPickersToolbarButton'];
@@ -100,22 +120,22 @@ export interface PickerComponents<Theme = unknown> {
   };
   MuiPickersLayout?: {
     defaultProps?: ComponentsProps['MuiPickersLayout'];
-    styleOverrides?: ComponentsOverrides<Theme>['MuiPickersLayout'];
+    styleOverrides?: ComponentsOverrides<Theme, PickerLayoutOwnerState>['MuiPickersLayout'];
   };
   MuiTimeClock?: {
     defaultProps?: ComponentsProps['MuiTimeClock'];
-    styleOverrides?: ComponentsOverrides<Theme>['MuiTimeClock'];
+    styleOverrides?: ComponentsOverrides<Theme, PickerOwnerState>['MuiTimeClock'];
   };
   MuiTimeField?: {
     defaultProps?: ComponentsProps['MuiTimeField'];
   };
   MuiTimePickerToolbar?: {
     defaultProps?: ComponentsProps['MuiTimePickerToolbar'];
-    styleOverrides?: ComponentsOverrides<Theme>['MuiTimePickerToolbar'];
+    styleOverrides?: ComponentsOverrides<Theme, PickerToolbarOwnerState>['MuiTimePickerToolbar'];
   };
   MuiYearCalendar?: {
     defaultProps?: ComponentsProps['MuiYearCalendar'];
-    styleOverrides?: ComponentsOverrides<Theme>['MuiYearCalendar'];
+    styleOverrides?: ComponentsOverrides<Theme, PickerOwnerState>['MuiYearCalendar'];
   };
 
   // Date Pickers
@@ -163,27 +183,33 @@ export interface PickerComponents<Theme = unknown> {
   // PickersTextField
   MuiPickersTextField?: {
     defaultProps?: ComponentsProps['MuiPickersTextField'];
-    styleOverrides?: ComponentsOverrides<Theme>['MuiPickersTextField'];
+    styleOverrides?: ComponentsOverrides<Theme, PickerTextFieldOwnerState>['MuiPickersTextField'];
   };
   MuiPickersInputBase?: {
     defaultProps?: ComponentsProps['MuiPickersInputBase'];
-    styleOverrides?: ComponentsOverrides<Theme>['MuiPickersInputBase'];
+    styleOverrides?: ComponentsOverrides<Theme, PickerTextFieldOwnerState>['MuiPickersInputBase'];
   };
   MuiPickersInput?: {
     defaultProps?: ComponentsProps['MuiPickersInput'];
-    styleOverrides?: ComponentsOverrides<Theme>['MuiPickersInput'];
+    styleOverrides?: ComponentsOverrides<Theme, PickerInputOwnerState>['MuiPickersInput'];
   };
   MuiPickersFilledInput?: {
     defaultProps?: ComponentsProps['MuiPickersFilledInput'];
-    styleOverrides?: ComponentsOverrides<Theme>['MuiPickersFilledInput'];
+    styleOverrides?: ComponentsOverrides<
+      Theme,
+      PickerFilledInputOwnerState
+    >['MuiPickersFilledInput'];
   };
   MuiPickersOutlinedInput?: {
     defaultProps?: ComponentsProps['MuiPickersOutlinedInput'];
-    styleOverrides?: ComponentsOverrides<Theme>['MuiPickersOutlinedInput'];
+    styleOverrides?: ComponentsOverrides<
+      Theme,
+      PickerTextFieldOwnerState
+    >['MuiPickersOutlinedInput'];
   };
   MuiPickersSectionList?: {
     defaultProps?: ComponentsProps['MuiPickersSectionList'];
-    styleOverrides?: ComponentsOverrides<Theme>['MuiPickersSectionList'];
+    styleOverrides?: ComponentsOverrides<Theme, PickerOwnerState>['MuiPickersSectionList'];
   };
 }