[pickers] Remove TDate generics in favor of PickerValidDate direct usage

.circleci/config.yml

@@ -210,6 +210,17 @@ jobs:
               pnpm --filter @mui/x-charts-vendor build
               git add -A && git diff --exit-code --staged
             fi
+      - run:
+          name: 'No dynamic date library import in the Pickers built types?'
+          command: |
+            pnpm --filter @mui/x-date-pickers* prebuild
+            pnpm --filter @mui/x-date-pickers* build:types
+            if grep -nr 'import("luxon")\|import("dayjs")\|import("moment")' --exclude Adapter*.d.ts packages/{x-date-pickers,x-date-pickers-pro}/build
+            then
+                exit 1
+            else
+                exit 0
+            fi
 
   test_browser:
     <<: *default-job

docs/data/common-concepts/custom-components/TypescriptCasting.js

@@ -1,5 +1,4 @@
 import * as React from 'react';
-
 import Stack from '@mui/material/Stack';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Switch from '@mui/material/Switch';

docs/data/common-concepts/custom-components/TypescriptCasting.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Dayjs } from 'dayjs';
 import Stack from '@mui/material/Stack';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Switch from '@mui/material/Switch';
@@ -35,7 +34,7 @@ function DisplayWeekNumberToggle({
 }
 
 interface CustomCalendarHeaderProps
-  extends PropsFromSlot<DateCalendarSlots<Dayjs>['calendarHeader']> {
+  extends PropsFromSlot<DateCalendarSlots['calendarHeader']> {
   displayWeekNumber: boolean;
   setDisplayWeekNumber: (displayWeekNumber: boolean) => void;
 }
@@ -66,13 +65,13 @@ export default function TypescriptCasting() {
         // Cast the custom component to the type expected by the X component
         slots={{
           calendarHeader:
-            CustomCalendarHeader as DateCalendarSlots<Dayjs>['calendarHeader'],
+            CustomCalendarHeader as DateCalendarSlots['calendarHeader'],
         }}
         slotProps={{
           calendarHeader: {
             displayWeekNumber,
             setDisplayWeekNumber,
-          } as DateCalendarSlotProps<Dayjs>['calendarHeader'],
+          } as DateCalendarSlotProps['calendarHeader'],
         }}
       />
     </LocalizationProvider>

docs/data/common-concepts/custom-components/TypescriptCasting.tsx.preview

@@ -3,12 +3,12 @@
   // Cast the custom component to the type expected by the X component
   slots={{
     calendarHeader:
-      CustomCalendarHeader as DateCalendarSlots<Dayjs>['calendarHeader'],
+      CustomCalendarHeader as DateCalendarSlots['calendarHeader'],
   }}
   slotProps={{
     calendarHeader: {
       displayWeekNumber,
       setDisplayWeekNumber,
-    } as DateCalendarSlotProps<Dayjs>['calendarHeader'],
+    } as DateCalendarSlotProps['calendarHeader'],
   }}
 />

docs/data/common-concepts/custom-components/custom-components.md

@@ -105,7 +105,7 @@ you can declare your component using the `PropsFromSlot` interface:
 ```tsx
 function CustomCalendarHeader({
   currentMonth,
-}: PropsFromSlot<DateCalendarSlots<Dayjs>['calendarHeader']>) {
+}: PropsFromSlot<DateCalendarSlots['calendarHeader']>) {
   return <div>{currentMonth?.format('MM-DD-YYYY')}</div>;
 }
 ```
@@ -129,7 +129,7 @@ import { DateCalendarSlots } from '@mui/x-date-pickers';
 type ToolbarProps = PropsFromSlot<GridSlots['toolbar']>;
 
 // Most of the picker slots interfaces need to receive the date type as a generic.
-type CalendarHeaderProps = PropsFromSlot<DateCalendarSlots<Dayjs>['calendarHeader']>;
+type CalendarHeaderProps = PropsFromSlot<DateCalendarSlots['calendarHeader']>;
 ```
 
 :::
@@ -140,7 +140,7 @@ If you are passing additional props to your slot, you can add them to the props
 
 ```ts
 interface CustomCalendarHeaderProps
-  extends PropsFromSlot<DateCalendarSlots<Dayjs>['calendarHeader']> {
+  extends PropsFromSlot<DateCalendarSlots['calendarHeader']> {
   displayWeekNumber: boolean;
   setDisplayWeekNumber: (displayWeekNumber: boolean) => void;
 }
@@ -178,14 +178,13 @@ function MyApp() {
     <DateCalendar
       displayWeekNumber={displayWeekNumber}
       slots={{
-        calendarHeader:
-          CustomCalendarHeader as DateCalendarSlots<Dayjs>['calendarHeader'],
+        calendarHeader: CustomCalendarHeader as DateCalendarSlots['calendarHeader'],
       }}
       slotProps={{
         calendarHeader: {
           displayWeekNumber,
           setDisplayWeekNumber,
-        } as DateCalendarSlotProps<Dayjs>['calendarHeader'],
+        } as DateCalendarSlotProps['calendarHeader'],
       }}
     />
   );

docs/data/date-pickers/custom-components/CalendarHeaderComponent.js

@@ -1,5 +1,4 @@
 import * as React from 'react';
-
 import { styled } from '@mui/material/styles';
 import Typography from '@mui/material/Typography';
 import Stack from '@mui/material/Stack';

docs/data/date-pickers/custom-components/CalendarHeaderComponent.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Dayjs } from 'dayjs';
 import { styled } from '@mui/material/styles';
 import Typography from '@mui/material/Typography';
 import Stack from '@mui/material/Stack';
@@ -21,7 +20,7 @@ const CustomCalendarHeaderRoot = styled('div')({
   alignItems: 'center',
 });
 
-function CustomCalendarHeader(props: PickersCalendarHeaderProps<Dayjs>) {
+function CustomCalendarHeader(props: PickersCalendarHeaderProps) {
   const { currentMonth, onMonthChange } = props;
 
   const selectNextMonth = () => onMonthChange(currentMonth.add(1, 'month'), 'left');

docs/data/date-pickers/custom-components/CalendarHeaderComponentRange.js

@@ -1,5 +1,4 @@
 import * as React from 'react';
-
 import { styled } from '@mui/material/styles';
 import Typography from '@mui/material/Typography';
 import IconButton from '@mui/material/IconButton';

docs/data/date-pickers/custom-components/CalendarHeaderComponentRange.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Dayjs } from 'dayjs';
 import { styled } from '@mui/material/styles';
 import Typography from '@mui/material/Typography';
 import IconButton from '@mui/material/IconButton';
@@ -18,7 +17,7 @@ const CustomCalendarHeaderRoot = styled('div')({
   alignItems: 'center',
 });
 
-function CustomCalendarHeader(props: PickersRangeCalendarHeaderProps<Dayjs>) {
+function CustomCalendarHeader(props: PickersRangeCalendarHeaderProps) {
   const { currentMonth, onMonthChange, month, calendars, monthIndex } = props;
 
   const selectNextMonth = () =>

docs/data/date-pickers/custom-components/ToolbarComponent.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import dayjs, { Dayjs } from 'dayjs';
+import dayjs from 'dayjs';
 import Box from '@mui/material/Box';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
@@ -10,7 +10,7 @@ import {
   DatePickerToolbarProps,
 } from '@mui/x-date-pickers/DatePicker';
 
-function CustomToolbar(props: DatePickerToolbarProps<Dayjs>) {
+function CustomToolbar(props: DatePickerToolbarProps) {
   return (
     <Box
       // Pass the className to the root element to get correct layout

docs/data/date-pickers/custom-field/BrowserV7Field.js

@@ -1,5 +1,4 @@
 import * as React from 'react';
-
 import useForkRef from '@mui/utils/useForkRef';
 import { styled } from '@mui/material/styles';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
@@ -84,10 +83,7 @@ const BrowserTextField = React.forwardRef((props, ref) => {
 const BrowserDateField = React.forwardRef((props, ref) => {
   const { slots, slotProps, ...textFieldProps } = props;
 
-  const fieldResponse = useDateField({
-    ...textFieldProps,
-    enableAccessibleFieldDOMStructure: true,
-  });
+  const fieldResponse = useDateField(textFieldProps);
 
   /* If you don't need a clear button, you can skip the use of this hook */
   const processedFieldProps = useClearableField({

docs/data/date-pickers/custom-field/BrowserV7Field.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Dayjs } from 'dayjs';
 import useForkRef from '@mui/utils/useForkRef';
 import { styled } from '@mui/material/styles';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
@@ -15,6 +14,7 @@ import {
   BaseSingleInputFieldProps,
   DateValidationError,
   FieldSection,
+  PickerValidDate,
 } from '@mui/x-date-pickers/models';
 import { Unstable_PickersSectionList as PickersSectionList } from '@mui/x-date-pickers/PickersSectionList';
 
@@ -105,10 +105,10 @@ const BrowserTextField = React.forwardRef(
 );
 
 interface BrowserDateFieldProps
-  extends UseDateFieldProps<Dayjs, true>,
+  extends UseDateFieldProps<true>,
     BaseSingleInputFieldProps<
-      Dayjs | null,
-      Dayjs,
+      // This usage of PickerValidDate will go away with TIsRange
+      PickerValidDate | null,
       FieldSection,
       true,
       DateValidationError
@@ -118,10 +118,7 @@ const BrowserDateField = React.forwardRef(
   (props: BrowserDateFieldProps, ref: React.Ref<HTMLDivElement>) => {
     const { slots, slotProps, ...textFieldProps } = props;
 
-    const fieldResponse = useDateField<Dayjs, true, typeof textFieldProps>({
-      ...textFieldProps,
-      enableAccessibleFieldDOMStructure: true,
-    });
+    const fieldResponse = useDateField<true, typeof textFieldProps>(textFieldProps);
 
     /* If you don't need a clear button, you can skip the use of this hook */
     const processedFieldProps = useClearableField({
@@ -135,7 +132,7 @@ const BrowserDateField = React.forwardRef(
 );
 
 const BrowserDatePicker = React.forwardRef(
-  (props: DatePickerProps<Dayjs>, ref: React.Ref<HTMLDivElement>) => {
+  (props: DatePickerProps, ref: React.Ref<HTMLDivElement>) => {
     return (
       <DatePicker
         ref={ref}

docs/data/date-pickers/custom-field/BrowserV7MultiInputRangeField.js

@@ -1,11 +1,11 @@
 import * as React from 'react';
-
 import useForkRef from '@mui/utils/useForkRef';
 import useSlotProps from '@mui/utils/useSlotProps';
 import { styled } from '@mui/material/styles';
 import Stack from '@mui/material/Stack';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+
 import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
 import { unstable_useMultiInputDateRangeField as useMultiInputDateRangeField } from '@mui/x-date-pickers-pro/MultiInputDateRangeField';
 import { Unstable_PickersSectionList as PickersSectionList } from '@mui/x-date-pickers/PickersSectionList';

docs/data/date-pickers/custom-field/BrowserV7MultiInputRangeField.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
-import { Dayjs } from 'dayjs';
 import useForkRef from '@mui/utils/useForkRef';
 import useSlotProps from '@mui/utils/useSlotProps';
 import { styled } from '@mui/material/styles';
 import Stack from '@mui/material/Stack';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { PickerValidDate } from '@mui/x-date-pickers/models';
 import {
   DateRangePicker,
   DateRangePickerProps,
@@ -108,10 +108,10 @@ const BrowserTextField = React.forwardRef(
 );
 
 interface BrowserMultiInputDateRangeFieldProps
-  extends UseDateRangeFieldProps<Dayjs, true>,
+  extends UseDateRangeFieldProps<true>,
     BaseMultiInputFieldProps<
-      DateRange<Dayjs>,
-      Dayjs,
+      // This usage of PickerValidDate will go away with TIsRange
+      DateRange<PickerValidDate>,
       RangeFieldSection,
       true,
       DateRangeValidationError
@@ -157,7 +157,6 @@ const BrowserMultiInputDateRangeField = React.forwardRef(
     }) as MultiInputFieldSlotTextFieldProps;
 
     const fieldResponse = useMultiInputDateRangeField<
-      Dayjs,
       true,
       MultiInputFieldSlotTextFieldProps
     >({
@@ -201,7 +200,7 @@ const BrowserMultiInputDateRangeField = React.forwardRef(
 ) as BrowserMultiInputDateRangeFieldComponent;
 
 const BrowserDateRangePicker = React.forwardRef(
-  (props: DateRangePickerProps<Dayjs>, ref: React.Ref<HTMLDivElement>) => {
+  (props: DateRangePickerProps, ref: React.Ref<HTMLDivElement>) => {
     return (
       <DateRangePicker
         ref={ref}

docs/data/date-pickers/custom-field/BrowserV7SingleInputRangeField.js

@@ -1,5 +1,4 @@
 import * as React from 'react';
-
 import useForkRef from '@mui/utils/useForkRef';
 import useSlotProps from '@mui/utils/useSlotProps';
 import { styled } from '@mui/material/styles';
@@ -105,10 +104,7 @@ const BrowserSingleInputDateRangeField = React.forwardRef((props, ref) => {
     ),
   };
 
-  const fieldResponse = useSingleInputDateRangeField({
-    ...textFieldProps,
-    enableAccessibleFieldDOMStructure: true,
-  });
+  const fieldResponse = useSingleInputDateRangeField(textFieldProps);
 
   /* If you don't need a clear button, you can skip the use of this hook */
   const processedFieldProps = useClearableField({

docs/data/date-pickers/custom-field/BrowserV7SingleInputRangeField.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Dayjs } from 'dayjs';
 import useForkRef from '@mui/utils/useForkRef';
 import useSlotProps from '@mui/utils/useSlotProps';
 import { styled } from '@mui/material/styles';
@@ -25,7 +24,10 @@ import {
   DateRange,
   FieldType,
 } from '@mui/x-date-pickers-pro/models';
-import { BaseSingleInputFieldProps } from '@mui/x-date-pickers/models';
+import {
+  BaseSingleInputFieldProps,
+  PickerValidDate,
+} from '@mui/x-date-pickers/models';
 
 const BrowserFieldRoot = styled('div', { name: 'BrowserField', slot: 'Root' })({
   display: 'flex',
@@ -114,10 +116,10 @@ const BrowserTextField = React.forwardRef(
 );
 
 interface BrowserSingleInputDateRangeFieldProps
-  extends UseSingleInputDateRangeFieldProps<Dayjs, true>,
+  extends UseSingleInputDateRangeFieldProps<true>,
     BaseSingleInputFieldProps<
-      DateRange<Dayjs>,
-      Dayjs,
+      // This usage of PickerValidDate will go away with TIsRange
+      DateRange<PickerValidDate>,
       RangeFieldSection,
       true,
       DateRangeValidationError
@@ -151,11 +153,9 @@ const BrowserSingleInputDateRangeField = React.forwardRef(
       ),
     };
 
-    const fieldResponse = useSingleInputDateRangeField<
-      Dayjs,
-      true,
-      typeof textFieldProps
-    >({ ...textFieldProps, enableAccessibleFieldDOMStructure: true });
+    const fieldResponse = useSingleInputDateRangeField<true, typeof textFieldProps>(
+      textFieldProps,
+    );
 
     /* If you don't need a clear button, you can skip the use of this hook */
     const processedFieldProps = useClearableField({
@@ -179,7 +179,7 @@ const BrowserSingleInputDateRangeField = React.forwardRef(
 BrowserSingleInputDateRangeField.fieldType = 'single-input';
 
 const BrowserSingleInputDateRangePicker = React.forwardRef(
-  (props: DateRangePickerProps<Dayjs>, ref: React.Ref<HTMLDivElement>) => {
+  (props: DateRangePickerProps, ref: React.Ref<HTMLDivElement>) => {
     const [isOpen, setIsOpen] = React.useState(false);
 
     const toggleOpen = () => setIsOpen((currentOpen) => !currentOpen);

docs/data/date-pickers/custom-field/JoyV6Field.js

@@ -1,5 +1,4 @@
 import * as React from 'react';
-
 import {
   useTheme as useMaterialTheme,
   useColorScheme as useMaterialColorScheme,