[pickers] Fix theme augmentation issues (#7800)

Author: LukasTy

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

@@ -9,3 +9,7 @@ export {
   getDateRangeCalendarUtilityClass,
   dateRangeCalendarClasses,
 } from './dateRangeCalendarClasses';
+export type {
+  DateRangeCalendarClassKey,
+  DateRangeCalendarClasses,
+} from './dateRangeCalendarClasses';

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

@@ -13,14 +13,34 @@ export interface PickersProComponents<Theme = unknown> {
     defaultProps?: ComponentsProps['MuiDateRangePickerToolbar'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiDateRangePickerToolbar'];
   };
+
+  // Multi input range fields
   MuiMultiInputDateRangeField?: {
     defaultProps?: ComponentsProps['MuiMultiInputDateRangeField'];
     styleOverrides?: ComponentsOverrides['MuiMultiInputDateRangeField'];
   };
+  MuiMultiInputDateTimeRangeField?: {
+    defaultProps?: ComponentsProps['MuiMultiInputDateTimeRangeField'];
+    styleOverrides?: ComponentsOverrides['MuiMultiInputDateTimeRangeField'];
+  };
+  MuiMultiInputTimeRangeField?: {
+    defaultProps?: ComponentsProps['MuiMultiInputTimeRangeField'];
+    styleOverrides?: ComponentsOverrides['MuiMultiInputTimeRangeField'];
+  };
+
+  // Single input range fields
   MuiSingleInputDateRangeField?: {
     defaultProps?: ComponentsProps['MuiSingleInputDateRangeField'];
     styleOverrides?: ComponentsOverrides['MuiSingleInputDateRangeField'];
   };
+  MuiSingleInputDateTimeRangeField?: {
+    defaultProps?: ComponentsProps['MuiSingleInputDateTimeRangeField'];
+    styleOverrides?: ComponentsOverrides['MuiSingleInputDateTimeRangeField'];
+  };
+  MuiSingleInputTimeRangeField?: {
+    defaultProps?: ComponentsProps['MuiSingleInputTimeRangeField'];
+    styleOverrides?: ComponentsOverrides['MuiSingleInputTimeRangeField'];
+  };
 
   // Date Range Pickers
   MuiDateRangePicker?: {

packages/x-date-pickers-pro/src/themeAugmentation/overrides.d.ts

@@ -4,12 +4,19 @@ import { DateRangePickerToolbarClassKey } from '../DateRangePicker';
 
 // prettier-ignore
 export interface PickersProComponentNameToClassKey {
-  MuiDateRangeCalendar: DateRangeCalendarClassKey
+  MuiDateRangeCalendar: DateRangeCalendarClassKey;
   MuiDateRangePickerDay: DateRangePickerDayClassKey;
   MuiDateRangePickerToolbar: DateRangePickerToolbarClassKey;
-  MuiDateRangePickerViewDesktop: DateRangePickerViewDesktopClassKey;
+
+  // Multi input range fields
   MuiMultiInputDateRangeField: never;
+  MuiMultiInputDateTimeRangeField: never;
+  MuiMultiInputTimeRangeField: never;
+
+  // Single input range fields
   MuiSingleInputDateRangeField: never;
+  MuiSingleInputDateTimeRangeField: never;
+  MuiSingleInputTimeRangeField: never;
 
   // Date Range Pickers
   MuiDateRangePicker: never;

packages/x-date-pickers-pro/src/themeAugmentation/props.d.ts

@@ -7,13 +7,25 @@ import { DateRangePickerProps, DateRangePickerToolbarProps } from '../DateRangeP
 import { DesktopDateRangePickerProps } from '../DesktopDateRangePicker';
 import { MobileDateRangePickerProps } from '../MobileDateRangePicker';
 import { StaticDateRangePickerProps } from '../StaticDateRangePicker';
+import { MultiInputDateTimeRangeFieldProps } from '../MultiInputDateTimeRangeField';
+import { MultiInputTimeRangeFieldProps } from '../MultiInputTimeRangeField';
+import { SingleInputDateTimeRangeFieldProps } from '../SingleInputDateTimeRangeField';
+import { SingleInputTimeRangeFieldProps } from '../SingleInputTimeRangeField';
 
 export interface PickersProComponentsPropsList {
   MuiDateRangeCalendar: DateRangeCalendarProps<unknown>;
   MuiDateRangePickerDay: DateRangePickerDayProps<unknown>;
   MuiDateRangePickerToolbar: DateRangePickerToolbarProps<unknown>;
-  MuiMultiInputDateRangeField: MultiInputDateRangeFieldProps<unknown, unknown>;
-  MuiSingleInputDateRangeField: SingleInputDateRangeFieldProps<unknown, unknown>;
+
+  // Multi input range fields
+  MuiMultiInputDateRangeField: MultiInputDateRangeFieldProps<unknown>;
+  MuiMultiInputDateTimeRangeField: MultiInputDateTimeRangeFieldProps<unknown>;
+  MuiMultiInputTimeRangeField: MultiInputTimeRangeFieldProps<unknown>;
+
+  // Single input range fields
+  MuiSingleInputDateRangeField: SingleInputDateRangeFieldProps<unknown>;
+  MuiSingleInputDateTimeRangeField: SingleInputDateTimeRangeFieldProps<unknown>;
+  MuiSingleInputTimeRangeField: SingleInputTimeRangeFieldProps<unknown>;
 
   // Date Range Pickers
   MuiDateRangePicker: DateRangePickerProps<unknown>;

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

@@ -1,20 +1,112 @@
 import { createTheme } from '@mui/material/styles';
+import { dateRangeCalendarClasses } from '../DateRangeCalendar';
+import { dateRangePickerToolbarClasses } from '../DateRangePicker';
+import { dateRangePickerDayClasses } from '../DateRangePickerDay';
 
 createTheme({
   components: {
+    MuiDateRangeCalendar: {
+      defaultProps: {
+        calendars: 3,
+        // @ts-expect-error invalid MuiDateRangeCalendar prop
+        someRandomProp: true,
+      },
+      styleOverrides: {
+        root: {
+          backgroundColor: 'red',
+          [`.${dateRangeCalendarClasses.monthContainer}`]: {
+            backgroundColor: 'green',
+          },
+        },
+        // @ts-expect-error invalid MuiDateRangeCalendar class key
+        content: {
+          backgroundColor: 'blue',
+        },
+      },
+    },
     MuiDateRangePickerDay: {
       defaultProps: {
         color: 'red',
         // @ts-expect-error invalid MuiDateRangePickerDay prop
         someRandomProp: true,
       },
+      styleOverrides: {
+        root: {
+          backgroundColor: 'red',
+          [`.${dateRangePickerDayClasses.day}`]: {
+            backgroundColor: 'green',
+          },
+        },
+        // @ts-expect-error invalid MuiDateTimePickerToolbar class key
+        content: {
+          backgroundColor: 'blue',
+        },
+      },
     },
     MuiDateRangePickerToolbar: {
       defaultProps: {
         toolbarPlaceholder: 'empty',
         // @ts-expect-error invalid MuiDateRangePickerToolbar prop
         someRandomProp: true,
       },
+      styleOverrides: {
+        root: {
+          backgroundColor: 'red',
+          [`.${dateRangePickerToolbarClasses.container}`]: {
+            backgroundColor: 'green',
+          },
+        },
+        // @ts-expect-error invalid MuiDateRangePickerToolbar class key
+        content: {
+          backgroundColor: 'blue',
+        },
+      },
+    },
+
+    // Multi input range fields
+    MuiMultiInputDateRangeField: {
+      defaultProps: {
+        disabled: true,
+        // @ts-expect-error invalid MuiMultiInputDateRangeField prop
+        someRandomProp: true,
+      },
+    },
+    MuiMultiInputDateTimeRangeField: {
+      defaultProps: {
+        disabled: true,
+        // @ts-expect-error invalid MuiMultiInputDateTimeRangeField prop
+        someRandomProp: true,
+      },
+    },
+    MuiMultiInputTimeRangeField: {
+      defaultProps: {
+        disabled: true,
+        // @ts-expect-error invalid MuiMultiInputTimeRangeField prop
+        someRandomProp: true,
+      },
+    },
+
+    // Single input range fields
+    MuiSingleInputDateRangeField: {
+      defaultProps: {
+        disabled: true,
+        // @ts-expect-error invalid MuiSingleInputDateRangeField prop
+        someRandomProp: true,
+      },
+    },
+    MuiSingleInputDateTimeRangeField: {
+      defaultProps: {
+        disabled: true,
+        // @ts-expect-error invalid MuiSingleInputDateTimeRangeField prop
+        someRandomProp: true,
+      },
+    },
+    MuiSingleInputTimeRangeField: {
+      defaultProps: {
+        disabled: true,
+        // @ts-expect-error invalid MuiSingleInputTimeRangeField prop
+        someRandomProp: true,
+      },
     },
 
     // Date Range Pickers

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

@@ -18,7 +18,7 @@ import { PickersYearClassKey, YearCalendarClassKey } from '../YearCalendar';
 import { PickersLayoutClassKey } from '../PickersLayout';
 import { DatePickerToolbarClassKey } from '../DatePicker';
 import { TimePickerToolbarClassKey } from '../TimePicker';
-import { DateTimePickerToolbarClassKey } from '../DateTimePicker';
+import { DateTimePickerToolbarClassKey, DateTimePickerTabsClassKey } from '../DateTimePicker';
 import {
   PickersArrowSwitcherClassKey,
   PickersPopperClassKey,

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

@@ -12,7 +12,6 @@ import { DateFieldProps } from '../DateField';
 import { LocalizationProviderProps } from '../LocalizationProvider';
 import { PickersLayoutProps } from '../PickersLayout';
 import {
-  CalendarOrClockPickerProps,
   DayCalendarProps,
   ExportedPickersArrowSwitcherProps,
   PickerPopperProps,
@@ -43,7 +42,6 @@ import { MobileTimePickerProps } from '../MobileTimePicker';
 import { StaticTimePickerProps } from '../StaticTimePicker';
 
 export interface PickersComponentsPropsList {
-  MuiCalendarOrClockPicker: CalendarOrClockPickerProps<unknown, DateOrTimeView>;
   MuiClock: ClockProps<unknown>;
   MuiClockNumber: ClockNumberProps;
   MuiClockPointer: ClockPointerProps;
@@ -63,7 +61,7 @@ export interface PickersComponentsPropsList {
   MuiPickersMonth: ExportedPickersMonthProps;
   MuiPickersPopper: PickerPopperProps;
   MuiPickersSlideTransition: ExportedSlideTransitionProps;
-  MuiPickersToolbar: PickersToolbarProps<unknown, unknown>;
+  MuiPickersToolbar: PickersToolbarProps<unknown, DateOrTimeView>;
   MuiPickersToolbarButton: PickersToolbarButtonProps;
   MuiPickersToolbarText: ExportedPickersToolbarTextProps;
   MuiPickersLayout: PickersLayoutProps<unknown, unknown, DateOrTimeView>;