From c41bfaa2ec5ac8412b30b506bff0208fffedb3f0 Mon Sep 17 00:00:00 2001 From: Flavien DELANGLE Date: Tue, 5 Nov 2024 15:22:18 +0100 Subject: [PATCH] [pickers] Remove `TDate` generics in favor of `PickerValidDate` direct usage (#15001) Signed-off-by: Flavien DELANGLE Co-authored-by: Lukas Tyla --- .circleci/config.yml | 11 + .../custom-components/TypescriptCasting.js | 1 - .../custom-components/TypescriptCasting.tsx | 7 +- .../TypescriptCasting.tsx.preview | 4 +- .../custom-components/custom-components.md | 11 +- .../CalendarHeaderComponent.js | 1 - .../CalendarHeaderComponent.tsx | 3 +- .../CalendarHeaderComponentRange.js | 1 - .../CalendarHeaderComponentRange.tsx | 3 +- .../custom-components/ToolbarComponent.tsx | 4 +- .../custom-field/BrowserV7Field.js | 6 +- .../custom-field/BrowserV7Field.tsx | 15 +- .../BrowserV7MultiInputRangeField.js | 2 +- .../BrowserV7MultiInputRangeField.tsx | 11 +- .../BrowserV7SingleInputRangeField.js | 6 +- .../BrowserV7SingleInputRangeField.tsx | 22 +- .../date-pickers/custom-field/JoyV6Field.js | 1 - .../date-pickers/custom-field/JoyV6Field.tsx | 12 +- .../custom-field/JoyV6MultiInputRangeField.js | 2 +- .../JoyV6MultiInputRangeField.tsx | 11 +- .../JoyV6SingleInputRangeField.js | 1 - .../JoyV6SingleInputRangeField.tsx | 15 +- .../SingleInputDateRangePickerWrapped.js | 1 - .../SingleInputDateRangePickerWrapped.tsx | 12 +- .../MaterialDatePicker.tsx | 4 +- .../behavior-button/MaterialDatePicker.js | 1 - .../behavior-button/MaterialDatePicker.tsx | 5 +- .../MaterialDateRangePicker.tsx | 6 +- .../MaskedMaterialTextField.tsx | 4 +- .../MaterialDatePicker.js | 1 - .../MaterialDatePicker.tsx | 5 +- .../date-pickers/custom-field/custom-field.md | 6 +- .../custom-layout/AddComponent.tsx | 2 +- .../DateCalendarServerRequest.tsx | 2 +- .../date-pickers/date-calendar/WeekPicker.tsx | 4 +- .../date-picker/examplesConfig.styling.tsx | 8 +- .../CustomDateRangePickerDay.js | 1 + .../CustomDateRangePickerDay.tsx | 5 +- .../date-range-field/DateRangeFieldValue.js | 1 - .../date-range-field/DateRangeFieldValue.tsx | 2 +- .../digital-clock/DigitalClockSkipDisabled.js | 6 +- .../DigitalClockSkipDisabled.tsx | 6 +- .../lifecycle/ServerInteraction.tsx | 2 +- .../date-pickers/timezone/LuxonTimezone.tsx | 2 +- docs/data/date-pickers/timezone/LuxonUTC.tsx | 2 +- .../TimeValidationShouldDisableTime.tsx | 8 +- .../MobileKeyboardView.tsx | 6 +- docs/data/pickersAdapterOverride.ts | 9 + .../x/api/date-pickers/date-calendar.json | 17 +- docs/pages/x/api/date-pickers/date-field.json | 6 +- .../pages/x/api/date-pickers/date-picker.json | 17 +- .../api/date-pickers/date-range-calendar.json | 11 +- .../x/api/date-pickers/date-range-picker.json | 11 +- .../x/api/date-pickers/date-time-field.json | 8 +- .../x/api/date-pickers/date-time-picker.json | 19 +- .../date-pickers/date-time-range-picker.json | 13 +- .../api/date-pickers/desktop-date-picker.json | 17 +- .../desktop-date-range-picker.json | 11 +- .../desktop-date-time-picker.json | 19 +- .../desktop-date-time-range-picker.json | 13 +- .../api/date-pickers/desktop-time-picker.json | 2 +- .../x/api/date-pickers/digital-clock.json | 2 +- .../api/date-pickers/mobile-date-picker.json | 17 +- .../mobile-date-range-picker.json | 11 +- .../date-pickers/mobile-date-time-picker.json | 19 +- .../mobile-date-time-range-picker.json | 13 +- .../api/date-pickers/mobile-time-picker.json | 2 +- .../x/api/date-pickers/month-calendar.json | 7 +- .../multi-input-date-range-field.json | 2 +- .../multi-input-date-time-range-field.json | 4 +- .../multi-input-time-range-field.json | 2 +- .../multi-section-digital-clock.json | 2 +- .../single-input-date-range-field.json | 2 +- .../single-input-date-time-range-field.json | 4 +- .../single-input-time-range-field.json | 2 +- .../api/date-pickers/static-date-picker.json | 17 +- .../static-date-range-picker.json | 11 +- .../date-pickers/static-date-time-picker.json | 19 +- .../api/date-pickers/static-time-picker.json | 2 +- docs/pages/x/api/date-pickers/time-clock.json | 2 +- docs/pages/x/api/date-pickers/time-field.json | 2 +- .../pages/x/api/date-pickers/time-picker.json | 2 +- .../x/api/date-pickers/year-calendar.json | 7 +- docs/scripts/generateProptypes.ts | 10 +- .../modules/components/PickersPlayground.tsx | 2 +- .../components/overview/mainDemo/Clock.tsx | 2 +- .../mainDemo/DateRangeWithShortcuts.tsx | 2 +- .../overview/mainDemo/DigitalClock.tsx | 4 +- .../overview/mainDemo/PickerButton.tsx | 11 +- .../DateRangeCalendar/DateRangeCalendar.tsx | 119 +++--- .../DateRangeCalendar.types.ts | 61 ++- .../src/DateRangeCalendar/useDragRange.ts | 41 +- .../src/DateRangePicker/DateRangePicker.tsx | 21 +- .../DateRangePicker/DateRangePicker.types.ts | 57 +-- .../DateRangePickerToolbar.tsx | 26 +- .../src/DateRangePicker/shared.tsx | 42 +-- .../DateRangePickerDay/DateRangePickerDay.tsx | 26 +- .../DateTimeRangePicker.tsx | 24 +- .../DateTimeRangePicker.types.ts | 44 ++- .../DateTimeRangePickerTabs.tsx | 5 +- .../DateTimeRangePickerTimeWrapper.tsx | 22 +- .../DateTimeRangePickerToolbar.tsx | 50 +-- .../src/DateTimeRangePicker/shared.tsx | 76 ++-- .../DesktopDateRangePicker.tsx | 37 +- .../DesktopDateRangePicker.types.ts | 22 +- .../tests/DesktopDateRangePicker.test.tsx | 15 +- .../DesktopDateTimeRangePicker.tsx | 43 +-- .../DesktopDateTimeRangePicker.types.ts | 23 +- .../MobileDateRangePicker.tsx | 37 +- .../MobileDateRangePicker.types.ts | 22 +- .../tests/MobileDateRangePicker.test.tsx | 13 +- .../MobileDateTimeRangePicker.tsx | 45 +-- .../MobileDateTimeRangePicker.types.ts | 23 +- .../MultiInputDateRangeField.tsx | 21 +- .../MultiInputDateRangeField.types.ts | 26 +- .../MultiInputDateTimeRangeField.tsx | 24 +- .../MultiInputDateTimeRangeField.types.ts | 23 +- .../MultiInputTimeRangeField.tsx | 21 +- .../MultiInputTimeRangeField.types.ts | 26 +- .../PickersRangeCalendarHeader.tsx | 16 +- .../PickersRangeCalendarHeader.types.ts | 9 +- .../SingleInputDateRangeField.tsx | 17 +- .../SingleInputDateRangeField.types.ts | 21 +- .../useSingleInputDateRangeField.ts | 16 +- .../SingleInputDateTimeRangeField.tsx | 20 +- .../SingleInputDateTimeRangeField.types.ts | 22 +- .../useSingleInputDateTimeRangeField.ts | 23 +- .../SingleInputTimeRangeField.tsx | 17 +- .../SingleInputTimeRangeField.types.ts | 22 +- .../useSingleInputTimeRangeField.ts | 16 +- .../StaticDateRangePicker.test.tsx | 2 +- .../StaticDateRangePicker.tsx | 37 +- .../StaticDateRangePicker.types.ts | 21 +- .../dateRangeViewRenderers.tsx | 11 +- .../internals/hooks/models/useRangePicker.ts | 32 +- .../useDesktopRangePicker.tsx | 28 +- .../useDesktopRangePicker.types.ts | 27 +- .../hooks/useEnrichedRangePickerFieldProps.ts | 45 +-- .../useMobileRangePicker.tsx | 28 +- .../useMobileRangePicker.types.ts | 34 +- .../useMultiInputFieldSelectedSections.ts | 2 +- .../useMultiInputDateRangeField.ts | 21 +- .../useMultiInputDateTimeRangeField.ts | 14 +- .../useMultiInputTimeRangeField.ts | 21 +- .../useStaticRangePicker.tsx | 16 +- .../useStaticRangePicker.types.ts | 30 +- .../src/internals/models/dateRange.ts | 7 +- .../src/internals/models/dateTimeRange.ts | 14 +- .../src/internals/models/timeRange.ts | 15 +- .../utils/date-range-manager.test.ts | 5 +- .../src/internals/utils/date-range-manager.ts | 30 +- .../src/internals/utils/date-utils.ts | 34 +- .../src/internals/utils/valueManagers.ts | 21 +- .../src/models/dateRange.ts | 15 +- .../x-date-pickers-pro/src/models/fields.ts | 4 +- .../x-date-pickers-pro/src/models/range.ts | 4 +- .../src/themeAugmentation/props.d.ts | 33 +- .../src/validation/validateDateRange.ts | 22 +- .../src/validation/validateDateTimeRange.ts | 24 +- .../src/validation/validateTimeRange.ts | 22 +- .../AdapterDateFns/AdapterDateFns.test.tsx | 6 +- .../src/AdapterDateFns/AdapterDateFns.ts | 2 +- .../AdapterDateFnsBase/AdapterDateFnsBase.ts | 14 +- .../AdapterDateFnsJalali.test.tsx | 2 +- .../AdapterDateFnsJalali.ts | 2 +- .../AdapterDateFnsJalaliV3.test.tsx | 2 +- .../AdapterDateFnsJalaliV3.ts | 2 +- .../src/AdapterDateFnsV3/AdapterDateFnsV3.ts | 2 +- .../src/AdapterDayjs/AdapterDayjs.test.tsx | 12 +- .../src/AdapterDayjs/AdapterDayjs.ts | 12 +- .../src/AdapterLuxon/AdapterLuxon.test.tsx | 6 +- .../src/AdapterLuxon/AdapterLuxon.ts | 6 +- .../src/AdapterMoment/AdapterMoment.test.tsx | 10 +- .../src/AdapterMoment/AdapterMoment.ts | 14 +- .../AdapterMomentHijri.test.tsx | 4 +- .../AdapterMomentHijri/AdapterMomentHijri.ts | 12 +- .../AdapterMomentJalaali.test.tsx | 4 +- .../AdapterMomentJalaali.ts | 15 +- .../src/DateCalendar/DateCalendar.tsx | 61 ++- .../src/DateCalendar/DateCalendar.types.ts | 52 ++- .../src/DateCalendar/DayCalendar.tsx | 104 ++--- .../DateCalendar/tests/DateCalendar.spec.tsx | 21 -- .../tests/describes.DateCalendar.test.tsx | 2 +- .../tests/validation.DateCalendar.test.tsx | 8 +- .../src/DateCalendar/useCalendarState.tsx | 50 +-- .../src/DateCalendar/useIsDateDisabled.ts | 8 +- .../src/DateField/DateField.tsx | 34 +- .../src/DateField/DateField.types.ts | 36 +- .../tests/describes.DateField.test.tsx | 2 +- .../src/DateField/useDateField.ts | 9 +- .../src/DatePicker/DatePicker.tsx | 34 +- .../src/DatePicker/DatePicker.types.ts | 38 +- .../src/DatePicker/DatePickerToolbar.tsx | 23 +- .../x-date-pickers/src/DatePicker/shared.tsx | 44 +-- .../src/DateTimeField/DateTimeField.tsx | 33 +- .../src/DateTimeField/DateTimeField.types.ts | 36 +- .../tests/describes.DateTimeField.test.tsx | 2 +- .../tests/timezone.DateTimeField.test.tsx | 3 +- .../src/DateTimeField/useDateTimeField.ts | 9 +- .../src/DateTimePicker/DateTimePicker.tsx | 35 +- .../DateTimePicker/DateTimePicker.types.ts | 58 ++- .../src/DateTimePicker/DateTimePickerTabs.tsx | 7 +- .../DateTimePicker/DateTimePickerToolbar.tsx | 37 +- .../src/DateTimePicker/shared.tsx | 49 +-- .../DesktopDatePicker/DesktopDatePicker.tsx | 41 +- .../DesktopDatePicker.types.ts | 26 +- .../describes.DesktopDatePicker.test.tsx | 2 +- .../tests/field.DesktopDatePicker.test.tsx | 2 +- .../DesktopDateTimePicker.tsx | 52 +-- .../DesktopDateTimePicker.types.ts | 27 +- .../DesktopDateTimePickerLayout.tsx | 12 +- .../describes.DesktopDateTimePicker.test.tsx | 6 +- .../field.DesktopDateTimePicker.test.tsx | 2 +- .../DesktopTimePicker/DesktopTimePicker.tsx | 27 +- .../DesktopTimePicker.types.ts | 32 +- .../describes.DesktopTimePicker.test.tsx | 6 +- .../tests/field.DesktopTimePicker.test.tsx | 2 +- .../src/DigitalClock/DigitalClock.tsx | 31 +- .../src/DigitalClock/DigitalClock.types.ts | 12 +- .../tests/describes.DigitalClock.test.tsx | 2 +- .../LocalizationProvider.tsx | 52 ++- .../src/MobileDatePicker/MobileDatePicker.tsx | 41 +- .../MobileDatePicker.types.ts | 26 +- .../tests/describes.MobileDatePicker.test.tsx | 2 +- .../MobileDateTimePicker.tsx | 44 +-- .../MobileDateTimePicker.types.ts | 22 +- .../describes.MobileDateTimePicker.test.tsx | 4 +- .../src/MobileTimePicker/MobileTimePicker.tsx | 25 +- .../MobileTimePicker.types.ts | 20 +- .../tests/describes.MobileTimePicker.test.tsx | 4 +- .../src/MonthCalendar/MonthCalendar.tsx | 39 +- .../src/MonthCalendar/MonthCalendar.types.ts | 17 +- .../tests/describes.MonthCalendar.test.tsx | 2 +- .../MultiSectionDigitalClock.tsx | 40 +- .../MultiSectionDigitalClock.types.ts | 11 +- .../MultiSectionDigitalClock.utils.ts | 22 +- .../tests/MultiSectionDigitalClock.test.tsx | 2 +- ...escribes.MultiSectionDigitalClock.test.tsx | 2 +- .../PickersCalendarHeader.tsx | 28 +- .../PickersCalendarHeader.types.ts | 24 +- .../src/PickersDay/PickersDay.spec.tsx | 4 +- .../src/PickersDay/PickersDay.tsx | 28 +- .../src/PickersLayout/PickersLayout.tsx | 16 +- .../src/PickersLayout/PickersLayout.types.ts | 43 +-- .../src/PickersLayout/usePickerLayout.tsx | 22 +- .../src/StaticDatePicker/StaticDatePicker.tsx | 35 +- .../StaticDatePicker.types.ts | 22 +- .../StaticDateTimePicker.tsx | 42 +-- .../StaticDateTimePicker.types.ts | 22 +- .../src/StaticTimePicker/StaticTimePicker.tsx | 26 +- .../StaticTimePicker.types.ts | 20 +- .../x-date-pickers/src/TimeClock/Clock.tsx | 19 +- .../src/TimeClock/ClockNumbers.tsx | 14 +- .../src/TimeClock/TimeClock.spec.tsx | 5 - .../src/TimeClock/TimeClock.tsx | 35 +- .../src/TimeClock/TimeClock.types.ts | 13 +- .../tests/describes.TimeClock.test.tsx | 2 +- .../src/TimeField/TimeField.tsx | 28 +- .../src/TimeField/TimeField.types.ts | 36 +- .../tests/describes.TimeField.test.tsx | 2 +- .../src/TimeField/useTimeField.ts | 9 +- .../src/TimePicker/TimePicker.tsx | 20 +- .../src/TimePicker/TimePicker.types.ts | 43 +-- .../src/TimePicker/TimePickerToolbar.tsx | 25 +- .../x-date-pickers/src/TimePicker/shared.tsx | 31 +- .../src/YearCalendar/YearCalendar.tsx | 36 +- .../src/YearCalendar/YearCalendar.types.ts | 17 +- .../tests/describes.YearCalendar.test.tsx | 2 +- .../dateViewRenderers/dateViewRenderers.tsx | 15 +- .../src/hooks/useParsedFormat.ts | 11 +- .../src/hooks/usePickersTranslations.ts | 4 +- .../internals/hooks/date-helpers-hooks.tsx | 32 +- .../internals/hooks/defaultizedFieldProps.ts | 33 +- .../internals/hooks/useClockReferenceDate.ts | 10 +- .../useDesktopPicker/useDesktopPicker.tsx | 11 +- .../useDesktopPicker.types.ts | 34 +- .../hooks/useField/buildSectionsFromFormat.ts | 37 +- .../src/internals/hooks/useField/useField.ts | 9 +- .../hooks/useField/useField.types.ts | 102 ++--- .../hooks/useField/useField.utils.ts | 89 ++--- .../useField/useFieldCharacterEditing.ts | 18 +- .../internals/hooks/useField/useFieldState.ts | 26 +- .../hooks/useMobilePicker/useMobilePicker.tsx | 11 +- .../useMobilePicker/useMobilePicker.types.ts | 34 +- .../internals/hooks/usePicker/usePicker.ts | 16 +- .../hooks/usePicker/usePicker.types.ts | 19 +- .../hooks/usePicker/usePickerOwnerState.ts | 4 +- .../hooks/usePicker/usePickerValue.ts | 14 +- .../hooks/usePicker/usePickerValue.types.ts | 75 ++-- .../hooks/usePicker/usePickerViews.ts | 25 +- .../hooks/useStaticPicker/useStaticPicker.tsx | 8 +- .../useStaticPicker/useStaticPicker.types.ts | 26 +- .../src/internals/hooks/useUtils.ts | 15 +- .../internals/hooks/useValueWithTimezone.ts | 20 +- .../src/internals/hooks/useViews.tsx | 8 +- .../x-date-pickers/src/internals/index.ts | 1 + .../src/internals/models/fields.ts | 5 +- .../src/internals/models/index.ts | 1 + .../models/props/basePickerProps.tsx | 18 +- .../src/internals/models/props/time.ts | 22 +- .../src/internals/models/validation.ts | 45 +-- .../src/internals/models/value.ts | 5 + .../src/internals/utils/date-time-utils.ts | 20 +- .../src/internals/utils/date-utils.test.ts | 2 +- .../src/internals/utils/date-utils.ts | 82 ++-- .../utils/getDefaultReferenceDate.ts | 26 +- .../src/internals/utils/time-utils.ts | 30 +- .../src/internals/utils/valueManagers.ts | 6 +- .../locales/utils/getPickersLocalization.ts | 6 +- .../x-date-pickers/src/models/adapters.ts | 355 ++++++++---------- packages/x-date-pickers/src/models/fields.ts | 4 +- .../tests/fieldKeyboardInteraction.test.tsx | 14 +- .../src/themeAugmentation/props.d.ts | 56 +-- .../timeViewRenderers/timeViewRenderers.tsx | 22 +- .../src/validation/extractValidationProps.ts | 12 +- .../src/validation/useValidation.ts | 34 +- .../src/validation/validateDate.ts | 25 +- .../src/validation/validateDateTime.ts | 17 +- .../src/validation/validateTime.ts | 13 +- test/utils/pickers/adapters.ts | 4 +- .../describeGregorianAdapter.ts | 22 +- .../describeGregorianAdapter.types.ts | 20 +- .../testCalculations.ts | 5 +- .../describeHijriAdapter.ts | 6 +- .../describeHijriAdapter.types.ts | 6 +- .../describeJalaliAdapter.ts | 6 +- .../describeJalaliAdapter.types.ts | 6 +- .../testTextFieldKeyboardRangeValidation.tsx | 12 +- .../pickers/describeValue/describeValue.tsx | 3 +- test/utils/pickers/misc.ts | 10 +- test/utils/pickers/viewHandlers.ts | 6 +- 331 files changed, 2705 insertions(+), 3636 deletions(-) create mode 100644 docs/data/pickersAdapterOverride.ts delete mode 100644 packages/x-date-pickers/src/DateCalendar/tests/DateCalendar.spec.tsx delete mode 100644 packages/x-date-pickers/src/TimeClock/TimeClock.spec.tsx create mode 100644 packages/x-date-pickers/src/internals/models/value.ts diff --git a/.circleci/config.yml b/.circleci/config.yml index c1146e554f23..a5685e260757 100644 --- a/.circleci/config.yml +++ b/.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 diff --git a/docs/data/common-concepts/custom-components/TypescriptCasting.js b/docs/data/common-concepts/custom-components/TypescriptCasting.js index 4d0346ef92f1..045e2b06a2c7 100644 --- a/docs/data/common-concepts/custom-components/TypescriptCasting.js +++ b/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'; diff --git a/docs/data/common-concepts/custom-components/TypescriptCasting.tsx b/docs/data/common-concepts/custom-components/TypescriptCasting.tsx index 2d68d2c1e6be..394187d805d2 100644 --- a/docs/data/common-concepts/custom-components/TypescriptCasting.tsx +++ b/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['calendarHeader']> { + extends PropsFromSlot { 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['calendarHeader'], + CustomCalendarHeader as DateCalendarSlots['calendarHeader'], }} slotProps={{ calendarHeader: { displayWeekNumber, setDisplayWeekNumber, - } as DateCalendarSlotProps['calendarHeader'], + } as DateCalendarSlotProps['calendarHeader'], }} /> diff --git a/docs/data/common-concepts/custom-components/TypescriptCasting.tsx.preview b/docs/data/common-concepts/custom-components/TypescriptCasting.tsx.preview index 461108b0d9c5..6f7e58781ac3 100644 --- a/docs/data/common-concepts/custom-components/TypescriptCasting.tsx.preview +++ b/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['calendarHeader'], + CustomCalendarHeader as DateCalendarSlots['calendarHeader'], }} slotProps={{ calendarHeader: { displayWeekNumber, setDisplayWeekNumber, - } as DateCalendarSlotProps['calendarHeader'], + } as DateCalendarSlotProps['calendarHeader'], }} /> \ No newline at end of file diff --git a/docs/data/common-concepts/custom-components/custom-components.md b/docs/data/common-concepts/custom-components/custom-components.md index 1875037ac5bf..e5605eb8ddc9 100644 --- a/docs/data/common-concepts/custom-components/custom-components.md +++ b/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['calendarHeader']>) { +}: PropsFromSlot) { return
{currentMonth?.format('MM-DD-YYYY')}
; } ``` @@ -129,7 +129,7 @@ import { DateCalendarSlots } from '@mui/x-date-pickers'; type ToolbarProps = PropsFromSlot; // Most of the picker slots interfaces need to receive the date type as a generic. -type CalendarHeaderProps = PropsFromSlot['calendarHeader']>; +type CalendarHeaderProps = PropsFromSlot; ``` ::: @@ -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['calendarHeader']> { + extends PropsFromSlot { displayWeekNumber: boolean; setDisplayWeekNumber: (displayWeekNumber: boolean) => void; } @@ -178,14 +178,13 @@ function MyApp() { ['calendarHeader'], + calendarHeader: CustomCalendarHeader as DateCalendarSlots['calendarHeader'], }} slotProps={{ calendarHeader: { displayWeekNumber, setDisplayWeekNumber, - } as DateCalendarSlotProps['calendarHeader'], + } as DateCalendarSlotProps['calendarHeader'], }} /> ); diff --git a/docs/data/date-pickers/custom-components/CalendarHeaderComponent.js b/docs/data/date-pickers/custom-components/CalendarHeaderComponent.js index 053d4fc857fc..03a95b966892 100644 --- a/docs/data/date-pickers/custom-components/CalendarHeaderComponent.js +++ b/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'; diff --git a/docs/data/date-pickers/custom-components/CalendarHeaderComponent.tsx b/docs/data/date-pickers/custom-components/CalendarHeaderComponent.tsx index 3cec6edb80b3..1485aff154fc 100644 --- a/docs/data/date-pickers/custom-components/CalendarHeaderComponent.tsx +++ b/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) { +function CustomCalendarHeader(props: PickersCalendarHeaderProps) { const { currentMonth, onMonthChange } = props; const selectNextMonth = () => onMonthChange(currentMonth.add(1, 'month'), 'left'); diff --git a/docs/data/date-pickers/custom-components/CalendarHeaderComponentRange.js b/docs/data/date-pickers/custom-components/CalendarHeaderComponentRange.js index 881a6630a012..77e1ef974b77 100644 --- a/docs/data/date-pickers/custom-components/CalendarHeaderComponentRange.js +++ b/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'; diff --git a/docs/data/date-pickers/custom-components/CalendarHeaderComponentRange.tsx b/docs/data/date-pickers/custom-components/CalendarHeaderComponentRange.tsx index e150031d943e..5d94074bf0ca 100644 --- a/docs/data/date-pickers/custom-components/CalendarHeaderComponentRange.tsx +++ b/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) { +function CustomCalendarHeader(props: PickersRangeCalendarHeaderProps) { const { currentMonth, onMonthChange, month, calendars, monthIndex } = props; const selectNextMonth = () => diff --git a/docs/data/date-pickers/custom-components/ToolbarComponent.tsx b/docs/data/date-pickers/custom-components/ToolbarComponent.tsx index 1bd91ecaf27d..3d24bc3a483a 100644 --- a/docs/data/date-pickers/custom-components/ToolbarComponent.tsx +++ b/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) { +function CustomToolbar(props: DatePickerToolbarProps) { return ( { 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({ diff --git a/docs/data/date-pickers/custom-field/BrowserV7Field.tsx b/docs/data/date-pickers/custom-field/BrowserV7Field.tsx index 202c6dd74e0a..00e3b3388d57 100644 --- a/docs/data/date-pickers/custom-field/BrowserV7Field.tsx +++ b/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, + extends UseDateFieldProps, 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) => { 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({ @@ -135,7 +132,7 @@ const BrowserDateField = React.forwardRef( ); const BrowserDatePicker = React.forwardRef( - (props: DatePickerProps, ref: React.Ref) => { + (props: DatePickerProps, ref: React.Ref) => { return ( , + extends UseDateRangeFieldProps, BaseMultiInputFieldProps< - DateRange, - Dayjs, + // This usage of PickerValidDate will go away with TIsRange + DateRange, 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, ref: React.Ref) => { + (props: DateRangePickerProps, ref: React.Ref) => { return ( { ), }; - 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({ diff --git a/docs/data/date-pickers/custom-field/BrowserV7SingleInputRangeField.tsx b/docs/data/date-pickers/custom-field/BrowserV7SingleInputRangeField.tsx index 5c925effbaab..adfe26146591 100644 --- a/docs/data/date-pickers/custom-field/BrowserV7SingleInputRangeField.tsx +++ b/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, + extends UseSingleInputDateRangeFieldProps, BaseSingleInputFieldProps< - DateRange, - Dayjs, + // This usage of PickerValidDate will go away with TIsRange + DateRange, RangeFieldSection, true, DateRangeValidationError @@ -151,11 +153,9 @@ const BrowserSingleInputDateRangeField = React.forwardRef( ), }; - const fieldResponse = useSingleInputDateRangeField< - Dayjs, - true, - typeof textFieldProps - >({ ...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({ @@ -179,7 +179,7 @@ const BrowserSingleInputDateRangeField = React.forwardRef( BrowserSingleInputDateRangeField.fieldType = 'single-input'; const BrowserSingleInputDateRangePicker = React.forwardRef( - (props: DateRangePickerProps, ref: React.Ref) => { + (props: DateRangePickerProps, ref: React.Ref) => { const [isOpen, setIsOpen] = React.useState(false); const toggleOpen = () => setIsOpen((currentOpen) => !currentOpen); diff --git a/docs/data/date-pickers/custom-field/JoyV6Field.js b/docs/data/date-pickers/custom-field/JoyV6Field.js index 29f4e14ce291..9d6802c1ecef 100644 --- a/docs/data/date-pickers/custom-field/JoyV6Field.js +++ b/docs/data/date-pickers/custom-field/JoyV6Field.js @@ -1,5 +1,4 @@ import * as React from 'react'; - import { useTheme as useMaterialTheme, useColorScheme as useMaterialColorScheme, diff --git a/docs/data/date-pickers/custom-field/JoyV6Field.tsx b/docs/data/date-pickers/custom-field/JoyV6Field.tsx index 05c311984ebf..a2dfdebe9255 100644 --- a/docs/data/date-pickers/custom-field/JoyV6Field.tsx +++ b/docs/data/date-pickers/custom-field/JoyV6Field.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import { Dayjs } from 'dayjs'; import { useTheme as useMaterialTheme, useColorScheme as useMaterialColorScheme, @@ -26,6 +25,7 @@ import { BaseSingleInputFieldProps, DateValidationError, FieldSection, + PickerValidDate, } from '@mui/x-date-pickers/models'; const joyTheme = extendJoyTheme(); @@ -100,10 +100,10 @@ const JoyField = React.forwardRef( ) as JoyFieldComponent; interface JoyDateFieldProps - extends UseDateFieldProps, + extends UseDateFieldProps, BaseSingleInputFieldProps< - Dayjs | null, - Dayjs, + // This usage of PickerValidDate will go away with TIsRange + PickerValidDate | null, FieldSection, false, DateValidationError @@ -113,7 +113,7 @@ const JoyDateField = React.forwardRef( (props: JoyDateFieldProps, ref: React.Ref) => { const { slots, slotProps, ...textFieldProps } = props; - const fieldResponse = useDateField({ + const fieldResponse = useDateField({ ...textFieldProps, enableAccessibleFieldDOMStructure: false, }); @@ -130,7 +130,7 @@ const JoyDateField = React.forwardRef( ); const JoyDatePicker = React.forwardRef( - (props: DatePickerProps, ref: React.Ref) => { + (props: DatePickerProps, ref: React.Ref) => { return ( , + extends UseDateRangeFieldProps, BaseMultiInputFieldProps< - DateRange, - Dayjs, + // This usage of PickerValidDate will go away with TIsRange + DateRange, RangeFieldSection, false, DateRangeValidationError @@ -179,7 +179,6 @@ const JoyMultiInputDateRangeField = React.forwardRef( }) as MultiInputFieldSlotTextFieldProps; const fieldResponse = useMultiInputDateRangeField< - Dayjs, false, MultiInputFieldSlotTextFieldProps >({ @@ -215,7 +214,7 @@ const JoyMultiInputDateRangeField = React.forwardRef( ) as JoyMultiInputDateRangeFieldComponent; const JoyDateRangePicker = React.forwardRef( - (props: DateRangePickerProps, ref: React.Ref) => { + (props: DateRangePickerProps, ref: React.Ref) => { return ( , + extends UseSingleInputDateRangeFieldProps, BaseSingleInputFieldProps< - DateRange, - Dayjs, + // This usage of PickerValidDate will go away with TIsRange + DateRange, RangeFieldSection, false, DateRangeValidationError @@ -128,7 +130,6 @@ const JoySingleInputDateRangeField = React.forwardRef( }); const fieldResponse = useSingleInputDateRangeField< - Dayjs, false, JoySingleInputDateRangeFieldProps >({ ...textFieldProps, enableAccessibleFieldDOMStructure: false }); @@ -162,7 +163,7 @@ const JoySingleInputDateRangeField = React.forwardRef( JoySingleInputDateRangeField.fieldType = 'single-input'; const JoySingleInputDateRangePicker = React.forwardRef( - (props: DateRangePickerProps, ref: React.Ref) => { + (props: DateRangePickerProps, ref: React.Ref) => { const [isOpen, setIsOpen] = React.useState(false); const toggleOpen = (event: React.PointerEvent) => { diff --git a/docs/data/date-pickers/custom-field/SingleInputDateRangePickerWrapped.js b/docs/data/date-pickers/custom-field/SingleInputDateRangePickerWrapped.js index aa20bda0c427..c701e767e0c3 100644 --- a/docs/data/date-pickers/custom-field/SingleInputDateRangePickerWrapped.js +++ b/docs/data/date-pickers/custom-field/SingleInputDateRangePickerWrapped.js @@ -1,5 +1,4 @@ import * as React from 'react'; - 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'; diff --git a/docs/data/date-pickers/custom-field/SingleInputDateRangePickerWrapped.tsx b/docs/data/date-pickers/custom-field/SingleInputDateRangePickerWrapped.tsx index 21ea29ee17dd..470c3de71092 100644 --- a/docs/data/date-pickers/custom-field/SingleInputDateRangePickerWrapped.tsx +++ b/docs/data/date-pickers/custom-field/SingleInputDateRangePickerWrapped.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import { Dayjs } from 'dayjs'; 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'; @@ -8,19 +7,14 @@ import { SingleInputDateRangeFieldProps, } from '@mui/x-date-pickers-pro/SingleInputDateRangeField'; import { DemoContainer } from '@mui/x-date-pickers/internals/demo'; -import { PickerValidDate } from '@mui/x-date-pickers/models'; import { FieldType } from '@mui/x-date-pickers-pro/models'; -type FieldComponent = (( - props: SingleInputDateRangeFieldProps & - React.RefAttributes, +type FieldComponent = (( + props: SingleInputDateRangeFieldProps & React.RefAttributes, ) => React.JSX.Element) & { fieldType?: FieldType }; const WrappedSingleInputDateRangeField = React.forwardRef( - ( - props: SingleInputDateRangeFieldProps, - ref: React.Ref, - ) => { + (props: SingleInputDateRangeFieldProps, ref: React.Ref) => { return ; }, ) as FieldComponent; diff --git a/docs/data/date-pickers/custom-field/behavior-autocomplete/MaterialDatePicker.tsx b/docs/data/date-pickers/custom-field/behavior-autocomplete/MaterialDatePicker.tsx index 18b2201a1b3a..10228ff08be1 100644 --- a/docs/data/date-pickers/custom-field/behavior-autocomplete/MaterialDatePicker.tsx +++ b/docs/data/date-pickers/custom-field/behavior-autocomplete/MaterialDatePicker.tsx @@ -13,7 +13,7 @@ import { import { useSplitFieldProps } from '@mui/x-date-pickers/hooks'; import { useValidation, validateDate } from '@mui/x-date-pickers/validation'; -interface AutocompleteFieldProps extends DatePickerFieldProps { +interface AutocompleteFieldProps extends DatePickerFieldProps { /** * @typescript-to-proptypes-ignore */ @@ -105,7 +105,7 @@ function AutocompleteField(props: AutocompleteFieldProps) { ); } -interface AutocompleteDatePickerProps extends DatePickerProps { +interface AutocompleteDatePickerProps extends DatePickerProps { /** * @typescript-to-proptypes-ignore */ diff --git a/docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.js b/docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.js index 11da4bc2ba23..6082f6580ca7 100644 --- a/docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.js +++ b/docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.js @@ -1,5 +1,4 @@ import * as React from 'react'; - import Button from '@mui/material/Button'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; diff --git a/docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.tsx b/docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.tsx index 1f31f5d63e6a..ae9ffb08d896 100644 --- a/docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.tsx +++ b/docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import { Dayjs } from 'dayjs'; import Button from '@mui/material/Button'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; @@ -15,7 +14,7 @@ import { usePickersContext, } from '@mui/x-date-pickers/hooks'; -function ButtonDateField(props: DatePickerFieldProps) { +function ButtonDateField(props: DatePickerFieldProps) { const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date'); const { value, timezone, format } = internalProps; const { @@ -62,7 +61,7 @@ function ButtonDateField(props: DatePickerFieldProps) { ); } -function ButtonFieldDatePicker(props: DatePickerProps) { +function ButtonFieldDatePicker(props: DatePickerProps) { return ( ); diff --git a/docs/data/date-pickers/custom-field/behavior-button/MaterialDateRangePicker.tsx b/docs/data/date-pickers/custom-field/behavior-button/MaterialDateRangePicker.tsx index bc154d9a2b9f..522fe8a047b4 100644 --- a/docs/data/date-pickers/custom-field/behavior-button/MaterialDateRangePicker.tsx +++ b/docs/data/date-pickers/custom-field/behavior-button/MaterialDateRangePicker.tsx @@ -16,7 +16,7 @@ import { usePickersContext, } from '@mui/x-date-pickers/hooks'; -function ButtonDateRangeField(props: DateRangePickerFieldProps) { +function ButtonDateRangeField(props: DateRangePickerFieldProps) { const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date'); const { value, timezone, format } = internalProps; const { @@ -49,7 +49,7 @@ function ButtonDateRangeField(props: DateRangePickerFieldProps) { }; const formattedValue = (value ?? [null, null]) - .map((date) => (date == null ? parsedFormat : date.format(format))) + .map((date: Dayjs) => (date == null ? parsedFormat : date.format(format))) .join(' – '); return ( @@ -68,7 +68,7 @@ function ButtonDateRangeField(props: DateRangePickerFieldProps) { // TODO v8: Will be removed before the end of the alpha since single input will become the default field. ButtonDateRangeField.fieldType = 'single-input'; -function ButtonFieldDateRangePicker(props: DateRangePickerProps) { +function ButtonFieldDateRangePicker(props: DateRangePickerProps) { return ( ) { +function MaskedField(props: DatePickerFieldProps) { const { slots, slotProps, ...other } = props; const { forwardedProps, internalProps } = useSplitFieldProps(other, 'date'); @@ -155,7 +155,7 @@ function MaskedField(props: DatePickerFieldProps) { ); } -function MaskedFieldDatePicker(props: DatePickerProps) { +function MaskedFieldDatePicker(props: DatePickerProps) { return ; } diff --git a/docs/data/date-pickers/custom-field/behavior-read-only-text-field/MaterialDatePicker.js b/docs/data/date-pickers/custom-field/behavior-read-only-text-field/MaterialDatePicker.js index 5f1cdc46e732..7c83e6a7480a 100644 --- a/docs/data/date-pickers/custom-field/behavior-read-only-text-field/MaterialDatePicker.js +++ b/docs/data/date-pickers/custom-field/behavior-read-only-text-field/MaterialDatePicker.js @@ -1,5 +1,4 @@ import * as React from 'react'; - import TextField from '@mui/material/TextField'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; diff --git a/docs/data/date-pickers/custom-field/behavior-read-only-text-field/MaterialDatePicker.tsx b/docs/data/date-pickers/custom-field/behavior-read-only-text-field/MaterialDatePicker.tsx index d8a54a2bebdb..9c06797fc2fc 100644 --- a/docs/data/date-pickers/custom-field/behavior-read-only-text-field/MaterialDatePicker.tsx +++ b/docs/data/date-pickers/custom-field/behavior-read-only-text-field/MaterialDatePicker.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import { Dayjs } from 'dayjs'; import TextField from '@mui/material/TextField'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; @@ -16,7 +15,7 @@ import { } from '@mui/x-date-pickers/hooks'; import { CalendarIcon } from '@mui/x-date-pickers/icons'; -function ReadOnlyDateField(props: DatePickerFieldProps) { +function ReadOnlyDateField(props: DatePickerFieldProps) { const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date'); const { value, timezone, format } = internalProps; const { InputProps, slotProps, slots, ...other } = forwardedProps; @@ -56,7 +55,7 @@ function ReadOnlyDateField(props: DatePickerFieldProps) { ); } -function ReadOnlyFieldDatePicker(props: DatePickerProps) { +function ReadOnlyFieldDatePicker(props: DatePickerProps) { return ( ); diff --git a/docs/data/date-pickers/custom-field/custom-field.md b/docs/data/date-pickers/custom-field/custom-field.md index c8e92edb523c..3b9459feb141 100644 --- a/docs/data/date-pickers/custom-field/custom-field.md +++ b/docs/data/date-pickers/custom-field/custom-field.md @@ -163,20 +163,18 @@ On the examples below, you can see that the typing of the props received by a cu ```tsx interface JoyDateFieldProps - extends UseDateFieldProps, // The headless field props + extends UseDateFieldProps, // The headless field props BaseSingleInputFieldProps< Dayjs | null, - Dayjs, FieldSection, true, // `false` for `enableAccessibleFieldDOMStructure={false}` DateValidationError > {} // The DOM field props interface JoyDateTimeFieldProps - extends UseDateTimeFieldProps, // The headless field props + extends UseDateTimeFieldProps, // The headless field props BaseSingleInputFieldProps< Dayjs | null, - Dayjs, FieldSection, true, // `false` for `enableAccessibleFieldDOMStructure={false}` DateTimeValidationError diff --git a/docs/data/date-pickers/custom-layout/AddComponent.tsx b/docs/data/date-pickers/custom-layout/AddComponent.tsx index a509a29f2175..2584a13756ed 100644 --- a/docs/data/date-pickers/custom-layout/AddComponent.tsx +++ b/docs/data/date-pickers/custom-layout/AddComponent.tsx @@ -58,7 +58,7 @@ function RestaurantHeader() { ); } -function CustomLayout(props: PickersLayoutProps) { +function CustomLayout(props: PickersLayoutProps) { const { toolbar, tabs, content, actionBar } = usePickerLayout(props); return ( diff --git a/docs/data/date-pickers/date-calendar/DateCalendarServerRequest.tsx b/docs/data/date-pickers/date-calendar/DateCalendarServerRequest.tsx index 99acbc802a79..8064aa7b44a8 100644 --- a/docs/data/date-pickers/date-calendar/DateCalendarServerRequest.tsx +++ b/docs/data/date-pickers/date-calendar/DateCalendarServerRequest.tsx @@ -33,7 +33,7 @@ function fakeFetch(date: Dayjs, { signal }: { signal: AbortSignal }) { const initialValue = dayjs('2022-04-17'); -function ServerDay(props: PickersDayProps & { highlightedDays?: number[] }) { +function ServerDay(props: PickersDayProps & { highlightedDays?: number[] }) { const { highlightedDays = [], day, outsideCurrentMonth, ...other } = props; const isSelected = diff --git a/docs/data/date-pickers/date-calendar/WeekPicker.tsx b/docs/data/date-pickers/date-calendar/WeekPicker.tsx index 7e46c36ba876..fd987bd9c82c 100644 --- a/docs/data/date-pickers/date-calendar/WeekPicker.tsx +++ b/docs/data/date-pickers/date-calendar/WeekPicker.tsx @@ -9,7 +9,7 @@ import { PickersDay, PickersDayProps } from '@mui/x-date-pickers/PickersDay'; dayjs.extend(isBetweenPlugin); -interface CustomPickerDayProps extends PickersDayProps { +interface CustomPickerDayProps extends PickersDayProps { isSelected: boolean; isHovered: boolean; } @@ -56,7 +56,7 @@ const isInSameWeek = (dayA: Dayjs, dayB: Dayjs | null | undefined) => { }; function Day( - props: PickersDayProps & { + props: PickersDayProps & { selectedDay?: Dayjs | null; hoveredDay?: Dayjs | null; }, diff --git a/docs/data/date-pickers/date-picker/examplesConfig.styling.tsx b/docs/data/date-pickers/date-picker/examplesConfig.styling.tsx index e5ade00e61d4..11158f2a9c50 100644 --- a/docs/data/date-pickers/date-picker/examplesConfig.styling.tsx +++ b/docs/data/date-pickers/date-picker/examplesConfig.styling.tsx @@ -10,7 +10,7 @@ import { DesktopDatePickerProps, } from '@mui/x-date-pickers/DesktopDatePicker'; import { DatePickerProps } from '@mui/x-date-pickers/DatePicker'; -import dayjs, { Dayjs } from 'dayjs'; +import dayjs from 'dayjs'; import { PickersSubcomponentType } from 'docsx/src/modules/utils/useCustomizationPlayground'; type PickerExamplesType = { @@ -291,7 +291,7 @@ export const datePickerExamples: PickersSubcomponentType = { }, }; -const pickerProps: DatePickerProps = { +const pickerProps: DatePickerProps = { views: ['day', 'month', 'year'], monthsPerRow: 3, yearsPerRow: 3, @@ -306,7 +306,7 @@ export const pickerExamples = [ component: StaticDatePicker, componentProps: { ...pickerProps, orientation: 'portrait' }, examples: staticDatePickerExamples, - } as PickerExamplesType>, + } as PickerExamplesType, { name: 'DesktopDatePicker', component: DesktopDatePicker, @@ -331,5 +331,5 @@ export const pickerExamples = [ ...pickerProps, }, examples: datePickerExamples, - } as PickerExamplesType>, + } as PickerExamplesType, ]; diff --git a/docs/data/date-pickers/date-range-calendar/CustomDateRangePickerDay.js b/docs/data/date-pickers/date-range-calendar/CustomDateRangePickerDay.js index 6f1dbf791830..7d61206f6173 100644 --- a/docs/data/date-pickers/date-range-calendar/CustomDateRangePickerDay.js +++ b/docs/data/date-pickers/date-range-calendar/CustomDateRangePickerDay.js @@ -37,6 +37,7 @@ const DateRangePickerDay = styled(MuiDateRangePickerDay)(({ theme }) => ({ }, ], })); + export default function CustomDateRangePickerDay() { return ( diff --git a/docs/data/date-pickers/date-range-calendar/CustomDateRangePickerDay.tsx b/docs/data/date-pickers/date-range-calendar/CustomDateRangePickerDay.tsx index caf9d98b2c8f..2734106cb610 100644 --- a/docs/data/date-pickers/date-range-calendar/CustomDateRangePickerDay.tsx +++ b/docs/data/date-pickers/date-range-calendar/CustomDateRangePickerDay.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { DemoContainer } from '@mui/x-date-pickers/internals/demo'; -import dayjs, { Dayjs } from 'dayjs'; +import dayjs from 'dayjs'; import { styled } from '@mui/material/styles'; import { LocalizationProvider } from '@mui/x-date-pickers-pro/LocalizationProvider'; import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs'; @@ -39,7 +39,8 @@ const DateRangePickerDay = styled(MuiDateRangePickerDay)(({ theme }) => ({ }, }, ], -})) as React.ComponentType>; +})) as React.ComponentType; + export default function CustomDateRangePickerDay() { return ( diff --git a/docs/data/date-pickers/date-range-field/DateRangeFieldValue.js b/docs/data/date-pickers/date-range-field/DateRangeFieldValue.js index 447469e63d63..7b8a8ff02cf1 100644 --- a/docs/data/date-pickers/date-range-field/DateRangeFieldValue.js +++ b/docs/data/date-pickers/date-range-field/DateRangeFieldValue.js @@ -2,7 +2,6 @@ import * as React from 'react'; import dayjs from 'dayjs'; import { DemoContainer } from '@mui/x-date-pickers/internals/demo'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; - import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { SingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField'; diff --git a/docs/data/date-pickers/date-range-field/DateRangeFieldValue.tsx b/docs/data/date-pickers/date-range-field/DateRangeFieldValue.tsx index 68feea759a44..bafc74db3e09 100644 --- a/docs/data/date-pickers/date-range-field/DateRangeFieldValue.tsx +++ b/docs/data/date-pickers/date-range-field/DateRangeFieldValue.tsx @@ -2,9 +2,9 @@ import * as React from 'react'; import dayjs, { Dayjs } from 'dayjs'; import { DemoContainer } from '@mui/x-date-pickers/internals/demo'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; -import { DateRange } from '@mui/x-date-pickers-pro/models'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { SingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField'; +import { DateRange } from '@mui/x-date-pickers-pro/models'; export default function DateRangeFieldValue() { const [value, setValue] = React.useState>(() => [ diff --git a/docs/data/date-pickers/digital-clock/DigitalClockSkipDisabled.js b/docs/data/date-pickers/digital-clock/DigitalClockSkipDisabled.js index 240a8f343ad8..9906d038dd16 100644 --- a/docs/data/date-pickers/digital-clock/DigitalClockSkipDisabled.js +++ b/docs/data/date-pickers/digital-clock/DigitalClockSkipDisabled.js @@ -6,13 +6,13 @@ import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { DigitalClock } from '@mui/x-date-pickers/DigitalClock'; import { MultiSectionDigitalClock } from '@mui/x-date-pickers/MultiSectionDigitalClock'; -const shouldDisableTime = (value, view) => { - const hour = value.hour(); +const shouldDisableTime = (date, view) => { + const hour = date.hour(); if (view === 'hours') { return hour < 9 || hour > 13; } if (view === 'minutes') { - const minute = value.minute(); + const minute = date.minute(); return minute > 20 && hour === 13; } return false; diff --git a/docs/data/date-pickers/digital-clock/DigitalClockSkipDisabled.tsx b/docs/data/date-pickers/digital-clock/DigitalClockSkipDisabled.tsx index cd8c8127fc04..bd54ab9775cc 100644 --- a/docs/data/date-pickers/digital-clock/DigitalClockSkipDisabled.tsx +++ b/docs/data/date-pickers/digital-clock/DigitalClockSkipDisabled.tsx @@ -7,13 +7,13 @@ import { DigitalClock } from '@mui/x-date-pickers/DigitalClock'; import { MultiSectionDigitalClock } from '@mui/x-date-pickers/MultiSectionDigitalClock'; import { TimeView } from '@mui/x-date-pickers/models'; -const shouldDisableTime = (value: Dayjs, view: TimeView) => { - const hour = value.hour(); +const shouldDisableTime = (date: Dayjs, view: TimeView) => { + const hour = date.hour(); if (view === 'hours') { return hour < 9 || hour > 13; } if (view === 'minutes') { - const minute = value.minute(); + const minute = date.minute(); return minute > 20 && hour === 13; } return false; diff --git a/docs/data/date-pickers/lifecycle/ServerInteraction.tsx b/docs/data/date-pickers/lifecycle/ServerInteraction.tsx index c265b005dd90..231e0dbeaa06 100644 --- a/docs/data/date-pickers/lifecycle/ServerInteraction.tsx +++ b/docs/data/date-pickers/lifecycle/ServerInteraction.tsx @@ -57,7 +57,7 @@ function debounce(func: (...arg: any) => void, wait = 500) { } function DateFieldWithAccept( - props: DateFieldProps & { onAccept: (value: Dayjs | null) => void }, + props: DateFieldProps & { onAccept: (value: Dayjs | null) => void }, ) { const { value: valueProp, onAccept, onChange, ...other } = props; diff --git a/docs/data/date-pickers/timezone/LuxonTimezone.tsx b/docs/data/date-pickers/timezone/LuxonTimezone.tsx index d0f95909ebb9..a80ccfbc26f8 100644 --- a/docs/data/date-pickers/timezone/LuxonTimezone.tsx +++ b/docs/data/date-pickers/timezone/LuxonTimezone.tsx @@ -7,7 +7,7 @@ import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker'; export default function LuxonTimezone() { - const [value, setValue] = React.useState | DateTime | null>( + const [value, setValue] = React.useState( DateTime.fromISO('2022-04-17T15:30', { zone: 'America/New_York' }), ); diff --git a/docs/data/date-pickers/timezone/LuxonUTC.tsx b/docs/data/date-pickers/timezone/LuxonUTC.tsx index 8948b050208a..fad298a38155 100644 --- a/docs/data/date-pickers/timezone/LuxonUTC.tsx +++ b/docs/data/date-pickers/timezone/LuxonUTC.tsx @@ -7,7 +7,7 @@ import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker'; export default function LuxonUTC() { - const [value, setValue] = React.useState | DateTime | null>( + const [value, setValue] = React.useState( DateTime.fromISO('2022-04-17T15:30', { zone: 'UTC' }), ); diff --git a/docs/data/date-pickers/validation/TimeValidationShouldDisableTime.tsx b/docs/data/date-pickers/validation/TimeValidationShouldDisableTime.tsx index 2af87819746b..ce9497c0c85e 100644 --- a/docs/data/date-pickers/validation/TimeValidationShouldDisableTime.tsx +++ b/docs/data/date-pickers/validation/TimeValidationShouldDisableTime.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import dayjs, { Dayjs } from 'dayjs'; +import dayjs from 'dayjs'; import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; @@ -7,10 +7,8 @@ import { TimePicker, TimePickerProps } from '@mui/x-date-pickers/TimePicker'; import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker'; import { DateTimeRangePicker } from '@mui/x-date-pickers-pro/DateTimeRangePicker'; -const shouldDisableTime: TimePickerProps['shouldDisableTime'] = ( - value, - view, -) => view === 'minutes' && value.minute() >= 45; +const shouldDisableTime: TimePickerProps['shouldDisableTime'] = (value, view) => + view === 'minutes' && value.minute() >= 45; const defaultValue = dayjs().set('hour', 10).set('minute', 50).startOf('minute'); diff --git a/docs/data/migration/migration-pickers-v5/MobileKeyboardView.tsx b/docs/data/migration/migration-pickers-v5/MobileKeyboardView.tsx index 08a963f789ba..97a25bbfc036 100644 --- a/docs/data/migration/migration-pickers-v5/MobileKeyboardView.tsx +++ b/docs/data/migration/migration-pickers-v5/MobileKeyboardView.tsx @@ -22,9 +22,7 @@ import { DatePickerToolbarProps, } from '@mui/x-date-pickers/DatePicker'; -function LayoutWithKeyboardView( - props: PickersLayoutProps, -) { +function LayoutWithKeyboardView(props: PickersLayoutProps) { const { value, onChange } = props; const [showKeyboardView, setShowKeyboardView] = React.useState(false); @@ -61,7 +59,7 @@ function LayoutWithKeyboardView( } function ToolbarWithKeyboardViewSwitch( - props: DatePickerToolbarProps & { + props: DatePickerToolbarProps & { showKeyboardViewSwitch?: boolean; showKeyboardView?: boolean; setShowKeyboardView?: React.Dispatch>; diff --git a/docs/data/pickersAdapterOverride.ts b/docs/data/pickersAdapterOverride.ts new file mode 100644 index 000000000000..1e3fec79c0a9 --- /dev/null +++ b/docs/data/pickersAdapterOverride.ts @@ -0,0 +1,9 @@ +// This module override mark all the date object in the doc to be any instead of Date | Dayjs | Moment | DateTime. +// That way we can use date library methods without casting the date object to a specific type. +declare module '@mui/x-date-pickers/models' { + interface PickerValidDateLookup { + fakeDocAdapter: any; + } +} + +export {}; diff --git a/docs/pages/x/api/date-pickers/date-calendar.json b/docs/pages/x/api/date-pickers/date-calendar.json index 55aee6f102ab..e38e7f86edc4 100644 --- a/docs/pages/x/api/date-pickers/date-calendar.json +++ b/docs/pages/x/api/date-pickers/date-calendar.json @@ -4,9 +4,9 @@ "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } }, "dayOfWeekFormatter": { "type": { "name": "func" }, - "default": "(date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()", + "default": "(date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()", "signature": { - "type": "function(date: TDate) => string", + "type": "function(date: PickerValidDate) => string", "describedArgs": ["date"], "returned": "string" } @@ -47,7 +47,10 @@ }, "onMonthChange": { "type": { "name": "func" }, - "signature": { "type": "function(month: TDate) => void", "describedArgs": ["month"] } + "signature": { + "type": "function(month: PickerValidDate) => void", + "describedArgs": ["month"] + } }, "onViewChange": { "type": { "name": "func" }, @@ -55,7 +58,7 @@ }, "onYearChange": { "type": { "name": "func" }, - "signature": { "type": "function(year: TDate) => void", "describedArgs": ["year"] } + "signature": { "type": "function(year: PickerValidDate) => void", "describedArgs": ["year"] } }, "openTo": { "type": { @@ -84,7 +87,7 @@ "shouldDisableDate": { "type": { "name": "func" }, "signature": { - "type": "function(day: TDate) => boolean", + "type": "function(day: PickerValidDate) => boolean", "describedArgs": ["day"], "returned": "boolean" } @@ -92,7 +95,7 @@ "shouldDisableMonth": { "type": { "name": "func" }, "signature": { - "type": "function(month: TDate) => boolean", + "type": "function(month: PickerValidDate) => boolean", "describedArgs": ["month"], "returned": "boolean" } @@ -100,7 +103,7 @@ "shouldDisableYear": { "type": { "name": "func" }, "signature": { - "type": "function(year: TDate) => boolean", + "type": "function(year: PickerValidDate) => boolean", "describedArgs": ["year"], "returned": "boolean" } diff --git a/docs/pages/x/api/date-pickers/date-field.json b/docs/pages/x/api/date-pickers/date-field.json index 6aa1c3a910ad..6a53307f3dc3 100644 --- a/docs/pages/x/api/date-pickers/date-field.json +++ b/docs/pages/x/api/date-pickers/date-field.json @@ -76,7 +76,7 @@ "shouldDisableDate": { "type": { "name": "func" }, "signature": { - "type": "function(day: TDate) => boolean", + "type": "function(day: PickerValidDate) => boolean", "describedArgs": ["day"], "returned": "boolean" } @@ -84,7 +84,7 @@ "shouldDisableMonth": { "type": { "name": "func" }, "signature": { - "type": "function(month: TDate) => boolean", + "type": "function(month: PickerValidDate) => boolean", "describedArgs": ["month"], "returned": "boolean" } @@ -92,7 +92,7 @@ "shouldDisableYear": { "type": { "name": "func" }, "signature": { - "type": "function(year: TDate) => boolean", + "type": "function(year: PickerValidDate) => boolean", "describedArgs": ["year"], "returned": "boolean" } diff --git a/docs/pages/x/api/date-pickers/date-picker.json b/docs/pages/x/api/date-pickers/date-picker.json index d3099c56a971..33b4cd3a0f78 100644 --- a/docs/pages/x/api/date-pickers/date-picker.json +++ b/docs/pages/x/api/date-pickers/date-picker.json @@ -7,9 +7,9 @@ }, "dayOfWeekFormatter": { "type": { "name": "func" }, - "default": "(date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()", + "default": "(date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()", "signature": { - "type": "function(date: TDate) => string", + "type": "function(date: PickerValidDate) => string", "describedArgs": ["date"], "returned": "string" } @@ -66,7 +66,10 @@ }, "onMonthChange": { "type": { "name": "func" }, - "signature": { "type": "function(month: TDate) => void", "describedArgs": ["month"] } + "signature": { + "type": "function(month: PickerValidDate) => void", + "describedArgs": ["month"] + } }, "onOpen": { "type": { "name": "func" } }, "onSelectedSectionsChange": { @@ -82,7 +85,7 @@ }, "onYearChange": { "type": { "name": "func" }, - "signature": { "type": "function(year: TDate) => void", "describedArgs": ["year"] } + "signature": { "type": "function(year: PickerValidDate) => void", "describedArgs": ["year"] } }, "open": { "type": { "name": "bool" }, "default": "false" }, "openTo": { @@ -120,7 +123,7 @@ "shouldDisableDate": { "type": { "name": "func" }, "signature": { - "type": "function(day: TDate) => boolean", + "type": "function(day: PickerValidDate) => boolean", "describedArgs": ["day"], "returned": "boolean" } @@ -128,7 +131,7 @@ "shouldDisableMonth": { "type": { "name": "func" }, "signature": { - "type": "function(month: TDate) => boolean", + "type": "function(month: PickerValidDate) => boolean", "describedArgs": ["month"], "returned": "boolean" } @@ -136,7 +139,7 @@ "shouldDisableYear": { "type": { "name": "func" }, "signature": { - "type": "function(year: TDate) => boolean", + "type": "function(year: PickerValidDate) => boolean", "describedArgs": ["year"], "returned": "boolean" } diff --git a/docs/pages/x/api/date-pickers/date-range-calendar.json b/docs/pages/x/api/date-pickers/date-range-calendar.json index cdf5928d090c..c8273a887566 100644 --- a/docs/pages/x/api/date-pickers/date-range-calendar.json +++ b/docs/pages/x/api/date-pickers/date-range-calendar.json @@ -16,9 +16,9 @@ }, "dayOfWeekFormatter": { "type": { "name": "func" }, - "default": "(date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()", + "default": "(date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()", "signature": { - "type": "function(date: TDate) => string", + "type": "function(date: PickerValidDate) => string", "describedArgs": ["date"], "returned": "string" } @@ -56,7 +56,10 @@ }, "onMonthChange": { "type": { "name": "func" }, - "signature": { "type": "function(month: TDate) => void", "describedArgs": ["month"] } + "signature": { + "type": "function(month: PickerValidDate) => void", + "describedArgs": ["month"] + } }, "onRangePositionChange": { "type": { "name": "func" }, @@ -92,7 +95,7 @@ "shouldDisableDate": { "type": { "name": "func" }, "signature": { - "type": "function(day: TDate, position: string) => boolean", + "type": "function(day: PickerValidDate, position: string) => boolean", "describedArgs": ["day", "position"], "returned": "boolean" } diff --git a/docs/pages/x/api/date-pickers/date-range-picker.json b/docs/pages/x/api/date-pickers/date-range-picker.json index a64156ea0d03..a357693be539 100644 --- a/docs/pages/x/api/date-pickers/date-range-picker.json +++ b/docs/pages/x/api/date-pickers/date-range-picker.json @@ -15,9 +15,9 @@ }, "dayOfWeekFormatter": { "type": { "name": "func" }, - "default": "(date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()", + "default": "(date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()", "signature": { - "type": "function(date: TDate) => string", + "type": "function(date: PickerValidDate) => string", "describedArgs": ["date"], "returned": "string" } @@ -76,7 +76,10 @@ }, "onMonthChange": { "type": { "name": "func" }, - "signature": { "type": "function(month: TDate) => void", "describedArgs": ["month"] } + "signature": { + "type": "function(month: PickerValidDate) => void", + "describedArgs": ["month"] + } }, "onOpen": { "type": { "name": "func" } }, "onRangePositionChange": { @@ -121,7 +124,7 @@ "shouldDisableDate": { "type": { "name": "func" }, "signature": { - "type": "function(day: TDate, position: string) => boolean", + "type": "function(day: PickerValidDate, position: string) => boolean", "describedArgs": ["day", "position"], "returned": "boolean" } diff --git a/docs/pages/x/api/date-pickers/date-time-field.json b/docs/pages/x/api/date-pickers/date-time-field.json index 28e462156626..8ddb6b01c5cc 100644 --- a/docs/pages/x/api/date-pickers/date-time-field.json +++ b/docs/pages/x/api/date-pickers/date-time-field.json @@ -83,7 +83,7 @@ "shouldDisableDate": { "type": { "name": "func" }, "signature": { - "type": "function(day: TDate) => boolean", + "type": "function(day: PickerValidDate) => boolean", "describedArgs": ["day"], "returned": "boolean" } @@ -91,7 +91,7 @@ "shouldDisableMonth": { "type": { "name": "func" }, "signature": { - "type": "function(month: TDate) => boolean", + "type": "function(month: PickerValidDate) => boolean", "describedArgs": ["month"], "returned": "boolean" } @@ -99,7 +99,7 @@ "shouldDisableTime": { "type": { "name": "func" }, "signature": { - "type": "function(value: TDate, view: TimeView) => boolean", + "type": "function(value: PickerValidDate, view: TimeView) => boolean", "describedArgs": ["value", "view"], "returned": "boolean" } @@ -107,7 +107,7 @@ "shouldDisableYear": { "type": { "name": "func" }, "signature": { - "type": "function(year: TDate) => boolean", + "type": "function(year: PickerValidDate) => boolean", "describedArgs": ["year"], "returned": "boolean" } diff --git a/docs/pages/x/api/date-pickers/date-time-picker.json b/docs/pages/x/api/date-pickers/date-time-picker.json index 7a40cea6d2a2..c0d304a92e66 100644 --- a/docs/pages/x/api/date-pickers/date-time-picker.json +++ b/docs/pages/x/api/date-pickers/date-time-picker.json @@ -9,9 +9,9 @@ }, "dayOfWeekFormatter": { "type": { "name": "func" }, - "default": "(date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()", + "default": "(date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()", "signature": { - "type": "function(date: TDate) => string", + "type": "function(date: PickerValidDate) => string", "describedArgs": ["date"], "returned": "string" } @@ -74,7 +74,10 @@ }, "onMonthChange": { "type": { "name": "func" }, - "signature": { "type": "function(month: TDate) => void", "describedArgs": ["month"] } + "signature": { + "type": "function(month: PickerValidDate) => void", + "describedArgs": ["month"] + } }, "onOpen": { "type": { "name": "func" } }, "onSelectedSectionsChange": { @@ -90,7 +93,7 @@ }, "onYearChange": { "type": { "name": "func" }, - "signature": { "type": "function(year: TDate) => void", "describedArgs": ["year"] } + "signature": { "type": "function(year: PickerValidDate) => void", "describedArgs": ["year"] } }, "open": { "type": { "name": "bool" }, "default": "false" }, "openTo": { @@ -128,7 +131,7 @@ "shouldDisableDate": { "type": { "name": "func" }, "signature": { - "type": "function(day: TDate) => boolean", + "type": "function(day: PickerValidDate) => boolean", "describedArgs": ["day"], "returned": "boolean" } @@ -136,7 +139,7 @@ "shouldDisableMonth": { "type": { "name": "func" }, "signature": { - "type": "function(month: TDate) => boolean", + "type": "function(month: PickerValidDate) => boolean", "describedArgs": ["month"], "returned": "boolean" } @@ -144,7 +147,7 @@ "shouldDisableTime": { "type": { "name": "func" }, "signature": { - "type": "function(value: TDate, view: TimeView) => boolean", + "type": "function(value: PickerValidDate, view: TimeView) => boolean", "describedArgs": ["value", "view"], "returned": "boolean" } @@ -152,7 +155,7 @@ "shouldDisableYear": { "type": { "name": "func" }, "signature": { - "type": "function(year: TDate) => boolean", + "type": "function(year: PickerValidDate) => boolean", "describedArgs": ["year"], "returned": "boolean" } diff --git a/docs/pages/x/api/date-pickers/date-time-range-picker.json b/docs/pages/x/api/date-pickers/date-time-range-picker.json index d1820b9ce74e..d3901e8bc3a0 100644 --- a/docs/pages/x/api/date-pickers/date-time-range-picker.json +++ b/docs/pages/x/api/date-pickers/date-time-range-picker.json @@ -16,9 +16,9 @@ }, "dayOfWeekFormatter": { "type": { "name": "func" }, - "default": "(date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()", + "default": "(date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()", "signature": { - "type": "function(date: TDate) => string", + "type": "function(date: PickerValidDate) => string", "describedArgs": ["date"], "returned": "string" } @@ -83,7 +83,10 @@ }, "onMonthChange": { "type": { "name": "func" }, - "signature": { "type": "function(month: TDate) => void", "describedArgs": ["month"] } + "signature": { + "type": "function(month: PickerValidDate) => void", + "describedArgs": ["month"] + } }, "onOpen": { "type": { "name": "func" } }, "onRangePositionChange": { @@ -138,7 +141,7 @@ "shouldDisableDate": { "type": { "name": "func" }, "signature": { - "type": "function(day: TDate, position: string) => boolean", + "type": "function(day: PickerValidDate, position: string) => boolean", "describedArgs": ["day", "position"], "returned": "boolean" } @@ -146,7 +149,7 @@ "shouldDisableTime": { "type": { "name": "func" }, "signature": { - "type": "function(value: TDate, view: TimeView) => boolean", + "type": "function(value: PickerValidDate, view: TimeView) => boolean", "describedArgs": ["value", "view"], "returned": "boolean" } diff --git a/docs/pages/x/api/date-pickers/desktop-date-picker.json b/docs/pages/x/api/date-pickers/desktop-date-picker.json index 4c39c52f7bea..cc8dee6f79e6 100644 --- a/docs/pages/x/api/date-pickers/desktop-date-picker.json +++ b/docs/pages/x/api/date-pickers/desktop-date-picker.json @@ -7,9 +7,9 @@ }, "dayOfWeekFormatter": { "type": { "name": "func" }, - "default": "(date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()", + "default": "(date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()", "signature": { - "type": "function(date: TDate) => string", + "type": "function(date: PickerValidDate) => string", "describedArgs": ["date"], "returned": "string" } @@ -62,7 +62,10 @@ }, "onMonthChange": { "type": { "name": "func" }, - "signature": { "type": "function(month: TDate) => void", "describedArgs": ["month"] } + "signature": { + "type": "function(month: PickerValidDate) => void", + "describedArgs": ["month"] + } }, "onOpen": { "type": { "name": "func" } }, "onSelectedSectionsChange": { @@ -78,7 +81,7 @@ }, "onYearChange": { "type": { "name": "func" }, - "signature": { "type": "function(year: TDate) => void", "describedArgs": ["year"] } + "signature": { "type": "function(year: PickerValidDate) => void", "describedArgs": ["year"] } }, "open": { "type": { "name": "bool" }, "default": "false" }, "openTo": { @@ -116,7 +119,7 @@ "shouldDisableDate": { "type": { "name": "func" }, "signature": { - "type": "function(day: TDate) => boolean", + "type": "function(day: PickerValidDate) => boolean", "describedArgs": ["day"], "returned": "boolean" } @@ -124,7 +127,7 @@ "shouldDisableMonth": { "type": { "name": "func" }, "signature": { - "type": "function(month: TDate) => boolean", + "type": "function(month: PickerValidDate) => boolean", "describedArgs": ["month"], "returned": "boolean" } @@ -132,7 +135,7 @@ "shouldDisableYear": { "type": { "name": "func" }, "signature": { - "type": "function(year: TDate) => boolean", + "type": "function(year: PickerValidDate) => boolean", "describedArgs": ["year"], "returned": "boolean" } diff --git a/docs/pages/x/api/date-pickers/desktop-date-range-picker.json b/docs/pages/x/api/date-pickers/desktop-date-range-picker.json index 911ec96679f0..32abb59adbbf 100644 --- a/docs/pages/x/api/date-pickers/desktop-date-range-picker.json +++ b/docs/pages/x/api/date-pickers/desktop-date-range-picker.json @@ -15,9 +15,9 @@ }, "dayOfWeekFormatter": { "type": { "name": "func" }, - "default": "(date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()", + "default": "(date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()", "signature": { - "type": "function(date: TDate) => string", + "type": "function(date: PickerValidDate) => string", "describedArgs": ["date"], "returned": "string" } @@ -72,7 +72,10 @@ }, "onMonthChange": { "type": { "name": "func" }, - "signature": { "type": "function(month: TDate) => void", "describedArgs": ["month"] } + "signature": { + "type": "function(month: PickerValidDate) => void", + "describedArgs": ["month"] + } }, "onOpen": { "type": { "name": "func" } }, "onRangePositionChange": { @@ -117,7 +120,7 @@ "shouldDisableDate": { "type": { "name": "func" }, "signature": { - "type": "function(day: TDate, position: string) => boolean", + "type": "function(day: PickerValidDate, position: string) => boolean", "describedArgs": ["day", "position"], "returned": "boolean" } diff --git a/docs/pages/x/api/date-pickers/desktop-date-time-picker.json b/docs/pages/x/api/date-pickers/desktop-date-time-picker.json index 88f2d64e03d3..62a9ffa7411c 100644 --- a/docs/pages/x/api/date-pickers/desktop-date-time-picker.json +++ b/docs/pages/x/api/date-pickers/desktop-date-time-picker.json @@ -9,9 +9,9 @@ }, "dayOfWeekFormatter": { "type": { "name": "func" }, - "default": "(date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()", + "default": "(date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()", "signature": { - "type": "function(date: TDate) => string", + "type": "function(date: PickerValidDate) => string", "describedArgs": ["date"], "returned": "string" } @@ -70,7 +70,10 @@ }, "onMonthChange": { "type": { "name": "func" }, - "signature": { "type": "function(month: TDate) => void", "describedArgs": ["month"] } + "signature": { + "type": "function(month: PickerValidDate) => void", + "describedArgs": ["month"] + } }, "onOpen": { "type": { "name": "func" } }, "onSelectedSectionsChange": { @@ -86,7 +89,7 @@ }, "onYearChange": { "type": { "name": "func" }, - "signature": { "type": "function(year: TDate) => void", "describedArgs": ["year"] } + "signature": { "type": "function(year: PickerValidDate) => void", "describedArgs": ["year"] } }, "open": { "type": { "name": "bool" }, "default": "false" }, "openTo": { @@ -124,7 +127,7 @@ "shouldDisableDate": { "type": { "name": "func" }, "signature": { - "type": "function(day: TDate) => boolean", + "type": "function(day: PickerValidDate) => boolean", "describedArgs": ["day"], "returned": "boolean" } @@ -132,7 +135,7 @@ "shouldDisableMonth": { "type": { "name": "func" }, "signature": { - "type": "function(month: TDate) => boolean", + "type": "function(month: PickerValidDate) => boolean", "describedArgs": ["month"], "returned": "boolean" } @@ -140,7 +143,7 @@ "shouldDisableTime": { "type": { "name": "func" }, "signature": { - "type": "function(value: TDate, view: TimeView) => boolean", + "type": "function(value: PickerValidDate, view: TimeView) => boolean", "describedArgs": ["value", "view"], "returned": "boolean" } @@ -148,7 +151,7 @@ "shouldDisableYear": { "type": { "name": "func" }, "signature": { - "type": "function(year: TDate) => boolean", + "type": "function(year: PickerValidDate) => boolean", "describedArgs": ["year"], "returned": "boolean" } diff --git a/docs/pages/x/api/date-pickers/desktop-date-time-range-picker.json b/docs/pages/x/api/date-pickers/desktop-date-time-range-picker.json index 2ffe9722be4a..7f2205b1922d 100644 --- a/docs/pages/x/api/date-pickers/desktop-date-time-range-picker.json +++ b/docs/pages/x/api/date-pickers/desktop-date-time-range-picker.json @@ -16,9 +16,9 @@ }, "dayOfWeekFormatter": { "type": { "name": "func" }, - "default": "(date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()", + "default": "(date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()", "signature": { - "type": "function(date: TDate) => string", + "type": "function(date: PickerValidDate) => string", "describedArgs": ["date"], "returned": "string" } @@ -79,7 +79,10 @@ }, "onMonthChange": { "type": { "name": "func" }, - "signature": { "type": "function(month: TDate) => void", "describedArgs": ["month"] } + "signature": { + "type": "function(month: PickerValidDate) => void", + "describedArgs": ["month"] + } }, "onOpen": { "type": { "name": "func" } }, "onRangePositionChange": { @@ -134,7 +137,7 @@ "shouldDisableDate": { "type": { "name": "func" }, "signature": { - "type": "function(day: TDate, position: string) => boolean", + "type": "function(day: PickerValidDate, position: string) => boolean", "describedArgs": ["day", "position"], "returned": "boolean" } @@ -142,7 +145,7 @@ "shouldDisableTime": { "type": { "name": "func" }, "signature": { - "type": "function(value: TDate, view: TimeView) => boolean", + "type": "function(value: PickerValidDate, view: TimeView) => boolean", "describedArgs": ["value", "view"], "returned": "boolean" } diff --git a/docs/pages/x/api/date-pickers/desktop-time-picker.json b/docs/pages/x/api/date-pickers/desktop-time-picker.json index 5ed580f886e8..bc22f8994e8c 100644 --- a/docs/pages/x/api/date-pickers/desktop-time-picker.json +++ b/docs/pages/x/api/date-pickers/desktop-time-picker.json @@ -86,7 +86,7 @@ "shouldDisableTime": { "type": { "name": "func" }, "signature": { - "type": "function(value: TDate, view: TimeView) => boolean", + "type": "function(value: PickerValidDate, view: TimeView) => boolean", "describedArgs": ["value", "view"], "returned": "boolean" } diff --git a/docs/pages/x/api/date-pickers/digital-clock.json b/docs/pages/x/api/date-pickers/digital-clock.json index 332f062056cf..1d06e31bfb38 100644 --- a/docs/pages/x/api/date-pickers/digital-clock.json +++ b/docs/pages/x/api/date-pickers/digital-clock.json @@ -39,7 +39,7 @@ "shouldDisableTime": { "type": { "name": "func" }, "signature": { - "type": "function(value: TDate, view: TimeView) => boolean", + "type": "function(value: PickerValidDate, view: TimeView) => boolean", "describedArgs": ["value", "view"], "returned": "boolean" } diff --git a/docs/pages/x/api/date-pickers/mobile-date-picker.json b/docs/pages/x/api/date-pickers/mobile-date-picker.json index 9f638cdc4f40..6dcd610f508e 100644 --- a/docs/pages/x/api/date-pickers/mobile-date-picker.json +++ b/docs/pages/x/api/date-pickers/mobile-date-picker.json @@ -7,9 +7,9 @@ }, "dayOfWeekFormatter": { "type": { "name": "func" }, - "default": "(date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()", + "default": "(date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()", "signature": { - "type": "function(date: TDate) => string", + "type": "function(date: PickerValidDate) => string", "describedArgs": ["date"], "returned": "string" } @@ -62,7 +62,10 @@ }, "onMonthChange": { "type": { "name": "func" }, - "signature": { "type": "function(month: TDate) => void", "describedArgs": ["month"] } + "signature": { + "type": "function(month: PickerValidDate) => void", + "describedArgs": ["month"] + } }, "onOpen": { "type": { "name": "func" } }, "onSelectedSectionsChange": { @@ -78,7 +81,7 @@ }, "onYearChange": { "type": { "name": "func" }, - "signature": { "type": "function(year: TDate) => void", "describedArgs": ["year"] } + "signature": { "type": "function(year: PickerValidDate) => void", "describedArgs": ["year"] } }, "open": { "type": { "name": "bool" }, "default": "false" }, "openTo": { @@ -116,7 +119,7 @@ "shouldDisableDate": { "type": { "name": "func" }, "signature": { - "type": "function(day: TDate) => boolean", + "type": "function(day: PickerValidDate) => boolean", "describedArgs": ["day"], "returned": "boolean" } @@ -124,7 +127,7 @@ "shouldDisableMonth": { "type": { "name": "func" }, "signature": { - "type": "function(month: TDate) => boolean", + "type": "function(month: PickerValidDate) => boolean", "describedArgs": ["month"], "returned": "boolean" } @@ -132,7 +135,7 @@ "shouldDisableYear": { "type": { "name": "func" }, "signature": { - "type": "function(year: TDate) => boolean", + "type": "function(year: PickerValidDate) => boolean", "describedArgs": ["year"], "returned": "boolean" } diff --git a/docs/pages/x/api/date-pickers/mobile-date-range-picker.json b/docs/pages/x/api/date-pickers/mobile-date-range-picker.json index b5b1d54a04cd..4f50f20ccf6b 100644 --- a/docs/pages/x/api/date-pickers/mobile-date-range-picker.json +++ b/docs/pages/x/api/date-pickers/mobile-date-range-picker.json @@ -11,9 +11,9 @@ }, "dayOfWeekFormatter": { "type": { "name": "func" }, - "default": "(date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()", + "default": "(date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()", "signature": { - "type": "function(date: TDate) => string", + "type": "function(date: PickerValidDate) => string", "describedArgs": ["date"], "returned": "string" } @@ -68,7 +68,10 @@ }, "onMonthChange": { "type": { "name": "func" }, - "signature": { "type": "function(month: TDate) => void", "describedArgs": ["month"] } + "signature": { + "type": "function(month: PickerValidDate) => void", + "describedArgs": ["month"] + } }, "onOpen": { "type": { "name": "func" } }, "onRangePositionChange": { @@ -113,7 +116,7 @@ "shouldDisableDate": { "type": { "name": "func" }, "signature": { - "type": "function(day: TDate, position: string) => boolean", + "type": "function(day: PickerValidDate, position: string) => boolean", "describedArgs": ["day", "position"], "returned": "boolean" } diff --git a/docs/pages/x/api/date-pickers/mobile-date-time-picker.json b/docs/pages/x/api/date-pickers/mobile-date-time-picker.json index d90b474d9a77..79eb455f2379 100644 --- a/docs/pages/x/api/date-pickers/mobile-date-time-picker.json +++ b/docs/pages/x/api/date-pickers/mobile-date-time-picker.json @@ -9,9 +9,9 @@ }, "dayOfWeekFormatter": { "type": { "name": "func" }, - "default": "(date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()", + "default": "(date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()", "signature": { - "type": "function(date: TDate) => string", + "type": "function(date: PickerValidDate) => string", "describedArgs": ["date"], "returned": "string" } @@ -70,7 +70,10 @@ }, "onMonthChange": { "type": { "name": "func" }, - "signature": { "type": "function(month: TDate) => void", "describedArgs": ["month"] } + "signature": { + "type": "function(month: PickerValidDate) => void", + "describedArgs": ["month"] + } }, "onOpen": { "type": { "name": "func" } }, "onSelectedSectionsChange": { @@ -86,7 +89,7 @@ }, "onYearChange": { "type": { "name": "func" }, - "signature": { "type": "function(year: TDate) => void", "describedArgs": ["year"] } + "signature": { "type": "function(year: PickerValidDate) => void", "describedArgs": ["year"] } }, "open": { "type": { "name": "bool" }, "default": "false" }, "openTo": { @@ -124,7 +127,7 @@ "shouldDisableDate": { "type": { "name": "func" }, "signature": { - "type": "function(day: TDate) => boolean", + "type": "function(day: PickerValidDate) => boolean", "describedArgs": ["day"], "returned": "boolean" } @@ -132,7 +135,7 @@ "shouldDisableMonth": { "type": { "name": "func" }, "signature": { - "type": "function(month: TDate) => boolean", + "type": "function(month: PickerValidDate) => boolean", "describedArgs": ["month"], "returned": "boolean" } @@ -140,7 +143,7 @@ "shouldDisableTime": { "type": { "name": "func" }, "signature": { - "type": "function(value: TDate, view: TimeView) => boolean", + "type": "function(value: PickerValidDate, view: TimeView) => boolean", "describedArgs": ["value", "view"], "returned": "boolean" } @@ -148,7 +151,7 @@ "shouldDisableYear": { "type": { "name": "func" }, "signature": { - "type": "function(year: TDate) => boolean", + "type": "function(year: PickerValidDate) => boolean", "describedArgs": ["year"], "returned": "boolean" } diff --git a/docs/pages/x/api/date-pickers/mobile-date-time-range-picker.json b/docs/pages/x/api/date-pickers/mobile-date-time-range-picker.json index 1f6d76bd4612..9228bf05b26d 100644 --- a/docs/pages/x/api/date-pickers/mobile-date-time-range-picker.json +++ b/docs/pages/x/api/date-pickers/mobile-date-time-range-picker.json @@ -12,9 +12,9 @@ }, "dayOfWeekFormatter": { "type": { "name": "func" }, - "default": "(date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()", + "default": "(date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()", "signature": { - "type": "function(date: TDate) => string", + "type": "function(date: PickerValidDate) => string", "describedArgs": ["date"], "returned": "string" } @@ -75,7 +75,10 @@ }, "onMonthChange": { "type": { "name": "func" }, - "signature": { "type": "function(month: TDate) => void", "describedArgs": ["month"] } + "signature": { + "type": "function(month: PickerValidDate) => void", + "describedArgs": ["month"] + } }, "onOpen": { "type": { "name": "func" } }, "onRangePositionChange": { @@ -130,7 +133,7 @@ "shouldDisableDate": { "type": { "name": "func" }, "signature": { - "type": "function(day: TDate, position: string) => boolean", + "type": "function(day: PickerValidDate, position: string) => boolean", "describedArgs": ["day", "position"], "returned": "boolean" } @@ -138,7 +141,7 @@ "shouldDisableTime": { "type": { "name": "func" }, "signature": { - "type": "function(value: TDate, view: TimeView) => boolean", + "type": "function(value: PickerValidDate, view: TimeView) => boolean", "describedArgs": ["value", "view"], "returned": "boolean" } diff --git a/docs/pages/x/api/date-pickers/mobile-time-picker.json b/docs/pages/x/api/date-pickers/mobile-time-picker.json index 89ddfed4d56b..64336f642f90 100644 --- a/docs/pages/x/api/date-pickers/mobile-time-picker.json +++ b/docs/pages/x/api/date-pickers/mobile-time-picker.json @@ -86,7 +86,7 @@ "shouldDisableTime": { "type": { "name": "func" }, "signature": { - "type": "function(value: TDate, view: TimeView) => boolean", + "type": "function(value: PickerValidDate, view: TimeView) => boolean", "describedArgs": ["value", "view"], "returned": "boolean" } diff --git a/docs/pages/x/api/date-pickers/month-calendar.json b/docs/pages/x/api/date-pickers/month-calendar.json index d1b1fb06b8bb..5794619b01fc 100644 --- a/docs/pages/x/api/date-pickers/month-calendar.json +++ b/docs/pages/x/api/date-pickers/month-calendar.json @@ -14,7 +14,10 @@ }, "onChange": { "type": { "name": "func" }, - "signature": { "type": "function(value: TDate) => void", "describedArgs": ["value"] } + "signature": { + "type": "function(value: PickerValidDate) => void", + "describedArgs": ["value"] + } }, "readOnly": { "type": { "name": "bool" } }, "referenceDate": { @@ -24,7 +27,7 @@ "shouldDisableMonth": { "type": { "name": "func" }, "signature": { - "type": "function(month: TDate) => boolean", + "type": "function(month: PickerValidDate) => boolean", "describedArgs": ["month"], "returned": "boolean" } diff --git a/docs/pages/x/api/date-pickers/multi-input-date-range-field.json b/docs/pages/x/api/date-pickers/multi-input-date-range-field.json index 244b3c3ff67f..d9e6f2cbf77d 100644 --- a/docs/pages/x/api/date-pickers/multi-input-date-range-field.json +++ b/docs/pages/x/api/date-pickers/multi-input-date-range-field.json @@ -57,7 +57,7 @@ "shouldDisableDate": { "type": { "name": "func" }, "signature": { - "type": "function(day: TDate, position: string) => boolean", + "type": "function(day: PickerValidDate, position: string) => boolean", "describedArgs": ["day", "position"], "returned": "boolean" } diff --git a/docs/pages/x/api/date-pickers/multi-input-date-time-range-field.json b/docs/pages/x/api/date-pickers/multi-input-date-time-range-field.json index eccae7c10c52..783e9b93b467 100644 --- a/docs/pages/x/api/date-pickers/multi-input-date-time-range-field.json +++ b/docs/pages/x/api/date-pickers/multi-input-date-time-range-field.json @@ -64,7 +64,7 @@ "shouldDisableDate": { "type": { "name": "func" }, "signature": { - "type": "function(day: TDate, position: string) => boolean", + "type": "function(day: PickerValidDate, position: string) => boolean", "describedArgs": ["day", "position"], "returned": "boolean" } @@ -72,7 +72,7 @@ "shouldDisableTime": { "type": { "name": "func" }, "signature": { - "type": "function(value: TDate, view: TimeView) => boolean", + "type": "function(value: PickerValidDate, view: TimeView) => boolean", "describedArgs": ["value", "view"], "returned": "boolean" } diff --git a/docs/pages/x/api/date-pickers/multi-input-time-range-field.json b/docs/pages/x/api/date-pickers/multi-input-time-range-field.json index 6065a53110fa..120e10742bd0 100644 --- a/docs/pages/x/api/date-pickers/multi-input-time-range-field.json +++ b/docs/pages/x/api/date-pickers/multi-input-time-range-field.json @@ -60,7 +60,7 @@ "shouldDisableTime": { "type": { "name": "func" }, "signature": { - "type": "function(value: TDate, view: TimeView) => boolean", + "type": "function(value: PickerValidDate, view: TimeView) => boolean", "describedArgs": ["value", "view"], "returned": "boolean" } diff --git a/docs/pages/x/api/date-pickers/multi-section-digital-clock.json b/docs/pages/x/api/date-pickers/multi-section-digital-clock.json index 50b3e3ded3d7..d2b097c5e763 100644 --- a/docs/pages/x/api/date-pickers/multi-section-digital-clock.json +++ b/docs/pages/x/api/date-pickers/multi-section-digital-clock.json @@ -49,7 +49,7 @@ "shouldDisableTime": { "type": { "name": "func" }, "signature": { - "type": "function(value: TDate, view: TimeView) => boolean", + "type": "function(value: PickerValidDate, view: TimeView) => boolean", "describedArgs": ["value", "view"], "returned": "boolean" } diff --git a/docs/pages/x/api/date-pickers/single-input-date-range-field.json b/docs/pages/x/api/date-pickers/single-input-date-range-field.json index d029a9c08222..179b58765222 100644 --- a/docs/pages/x/api/date-pickers/single-input-date-range-field.json +++ b/docs/pages/x/api/date-pickers/single-input-date-range-field.json @@ -77,7 +77,7 @@ "shouldDisableDate": { "type": { "name": "func" }, "signature": { - "type": "function(day: TDate, position: string) => boolean", + "type": "function(day: PickerValidDate, position: string) => boolean", "describedArgs": ["day", "position"], "returned": "boolean" } diff --git a/docs/pages/x/api/date-pickers/single-input-date-time-range-field.json b/docs/pages/x/api/date-pickers/single-input-date-time-range-field.json index dfc1fa601465..483f9c001649 100644 --- a/docs/pages/x/api/date-pickers/single-input-date-time-range-field.json +++ b/docs/pages/x/api/date-pickers/single-input-date-time-range-field.json @@ -84,7 +84,7 @@ "shouldDisableDate": { "type": { "name": "func" }, "signature": { - "type": "function(day: TDate, position: string) => boolean", + "type": "function(day: PickerValidDate, position: string) => boolean", "describedArgs": ["day", "position"], "returned": "boolean" } @@ -92,7 +92,7 @@ "shouldDisableTime": { "type": { "name": "func" }, "signature": { - "type": "function(value: TDate, view: TimeView) => boolean", + "type": "function(value: PickerValidDate, view: TimeView) => boolean", "describedArgs": ["value", "view"], "returned": "boolean" } diff --git a/docs/pages/x/api/date-pickers/single-input-time-range-field.json b/docs/pages/x/api/date-pickers/single-input-time-range-field.json index 9fcb5181883d..fbfcdcd2781e 100644 --- a/docs/pages/x/api/date-pickers/single-input-time-range-field.json +++ b/docs/pages/x/api/date-pickers/single-input-time-range-field.json @@ -80,7 +80,7 @@ "shouldDisableTime": { "type": { "name": "func" }, "signature": { - "type": "function(value: TDate, view: TimeView) => boolean", + "type": "function(value: PickerValidDate, view: TimeView) => boolean", "describedArgs": ["value", "view"], "returned": "boolean" } diff --git a/docs/pages/x/api/date-pickers/static-date-picker.json b/docs/pages/x/api/date-pickers/static-date-picker.json index 8def7ccac462..812b43b131ea 100644 --- a/docs/pages/x/api/date-pickers/static-date-picker.json +++ b/docs/pages/x/api/date-pickers/static-date-picker.json @@ -3,9 +3,9 @@ "autoFocus": { "type": { "name": "bool" } }, "dayOfWeekFormatter": { "type": { "name": "func" }, - "default": "(date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()", + "default": "(date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()", "signature": { - "type": "function(date: TDate) => string", + "type": "function(date: PickerValidDate) => string", "describedArgs": ["date"], "returned": "string" } @@ -57,7 +57,10 @@ }, "onMonthChange": { "type": { "name": "func" }, - "signature": { "type": "function(month: TDate) => void", "describedArgs": ["month"] } + "signature": { + "type": "function(month: PickerValidDate) => void", + "describedArgs": ["month"] + } }, "onViewChange": { "type": { "name": "func" }, @@ -65,7 +68,7 @@ }, "onYearChange": { "type": { "name": "func" }, - "signature": { "type": "function(year: TDate) => void", "describedArgs": ["year"] } + "signature": { "type": "function(year: PickerValidDate) => void", "describedArgs": ["year"] } }, "openTo": { "type": { @@ -96,7 +99,7 @@ "shouldDisableDate": { "type": { "name": "func" }, "signature": { - "type": "function(day: TDate) => boolean", + "type": "function(day: PickerValidDate) => boolean", "describedArgs": ["day"], "returned": "boolean" } @@ -104,7 +107,7 @@ "shouldDisableMonth": { "type": { "name": "func" }, "signature": { - "type": "function(month: TDate) => boolean", + "type": "function(month: PickerValidDate) => boolean", "describedArgs": ["month"], "returned": "boolean" } @@ -112,7 +115,7 @@ "shouldDisableYear": { "type": { "name": "func" }, "signature": { - "type": "function(year: TDate) => boolean", + "type": "function(year: PickerValidDate) => boolean", "describedArgs": ["year"], "returned": "boolean" } diff --git a/docs/pages/x/api/date-pickers/static-date-range-picker.json b/docs/pages/x/api/date-pickers/static-date-range-picker.json index eb9b535b7bd5..6948a339c0f0 100644 --- a/docs/pages/x/api/date-pickers/static-date-range-picker.json +++ b/docs/pages/x/api/date-pickers/static-date-range-picker.json @@ -11,9 +11,9 @@ }, "dayOfWeekFormatter": { "type": { "name": "func" }, - "default": "(date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()", + "default": "(date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()", "signature": { - "type": "function(date: TDate) => string", + "type": "function(date: PickerValidDate) => string", "describedArgs": ["date"], "returned": "string" } @@ -67,7 +67,10 @@ }, "onMonthChange": { "type": { "name": "func" }, - "signature": { "type": "function(month: TDate) => void", "describedArgs": ["month"] } + "signature": { + "type": "function(month: PickerValidDate) => void", + "describedArgs": ["month"] + } }, "onRangePositionChange": { "type": { "name": "func" }, @@ -97,7 +100,7 @@ "shouldDisableDate": { "type": { "name": "func" }, "signature": { - "type": "function(day: TDate, position: string) => boolean", + "type": "function(day: PickerValidDate, position: string) => boolean", "describedArgs": ["day", "position"], "returned": "boolean" } diff --git a/docs/pages/x/api/date-pickers/static-date-time-picker.json b/docs/pages/x/api/date-pickers/static-date-time-picker.json index ed807f2ccfab..cf48a45f5b7f 100644 --- a/docs/pages/x/api/date-pickers/static-date-time-picker.json +++ b/docs/pages/x/api/date-pickers/static-date-time-picker.json @@ -5,9 +5,9 @@ "autoFocus": { "type": { "name": "bool" } }, "dayOfWeekFormatter": { "type": { "name": "func" }, - "default": "(date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()", + "default": "(date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()", "signature": { - "type": "function(date: TDate) => string", + "type": "function(date: PickerValidDate) => string", "describedArgs": ["date"], "returned": "string" } @@ -65,7 +65,10 @@ }, "onMonthChange": { "type": { "name": "func" }, - "signature": { "type": "function(month: TDate) => void", "describedArgs": ["month"] } + "signature": { + "type": "function(month: PickerValidDate) => void", + "describedArgs": ["month"] + } }, "onViewChange": { "type": { "name": "func" }, @@ -73,7 +76,7 @@ }, "onYearChange": { "type": { "name": "func" }, - "signature": { "type": "function(year: TDate) => void", "describedArgs": ["year"] } + "signature": { "type": "function(year: PickerValidDate) => void", "describedArgs": ["year"] } }, "openTo": { "type": { @@ -104,7 +107,7 @@ "shouldDisableDate": { "type": { "name": "func" }, "signature": { - "type": "function(day: TDate) => boolean", + "type": "function(day: PickerValidDate) => boolean", "describedArgs": ["day"], "returned": "boolean" } @@ -112,7 +115,7 @@ "shouldDisableMonth": { "type": { "name": "func" }, "signature": { - "type": "function(month: TDate) => boolean", + "type": "function(month: PickerValidDate) => boolean", "describedArgs": ["month"], "returned": "boolean" } @@ -120,7 +123,7 @@ "shouldDisableTime": { "type": { "name": "func" }, "signature": { - "type": "function(value: TDate, view: TimeView) => boolean", + "type": "function(value: PickerValidDate, view: TimeView) => boolean", "describedArgs": ["value", "view"], "returned": "boolean" } @@ -128,7 +131,7 @@ "shouldDisableYear": { "type": { "name": "func" }, "signature": { - "type": "function(year: TDate) => boolean", + "type": "function(year: PickerValidDate) => boolean", "describedArgs": ["year"], "returned": "boolean" } diff --git a/docs/pages/x/api/date-pickers/static-time-picker.json b/docs/pages/x/api/date-pickers/static-time-picker.json index b7d4ba33f30f..8e2fefb00aee 100644 --- a/docs/pages/x/api/date-pickers/static-time-picker.json +++ b/docs/pages/x/api/date-pickers/static-time-picker.json @@ -66,7 +66,7 @@ "shouldDisableTime": { "type": { "name": "func" }, "signature": { - "type": "function(value: TDate, view: TimeView) => boolean", + "type": "function(value: PickerValidDate, view: TimeView) => boolean", "describedArgs": ["value", "view"], "returned": "boolean" } diff --git a/docs/pages/x/api/date-pickers/time-clock.json b/docs/pages/x/api/date-pickers/time-clock.json index 9a0eb6b0e057..2b59bb35d2d4 100644 --- a/docs/pages/x/api/date-pickers/time-clock.json +++ b/docs/pages/x/api/date-pickers/time-clock.json @@ -50,7 +50,7 @@ "shouldDisableTime": { "type": { "name": "func" }, "signature": { - "type": "function(value: TDate, view: TimeView) => boolean", + "type": "function(value: PickerValidDate, view: TimeView) => boolean", "describedArgs": ["value", "view"], "returned": "boolean" } diff --git a/docs/pages/x/api/date-pickers/time-field.json b/docs/pages/x/api/date-pickers/time-field.json index fe2713222b37..fb99ace144ee 100644 --- a/docs/pages/x/api/date-pickers/time-field.json +++ b/docs/pages/x/api/date-pickers/time-field.json @@ -79,7 +79,7 @@ "shouldDisableTime": { "type": { "name": "func" }, "signature": { - "type": "function(value: TDate, view: TimeView) => boolean", + "type": "function(value: PickerValidDate, view: TimeView) => boolean", "describedArgs": ["value", "view"], "returned": "boolean" } diff --git a/docs/pages/x/api/date-pickers/time-picker.json b/docs/pages/x/api/date-pickers/time-picker.json index fc3050e0d0c8..e4ce5e054eeb 100644 --- a/docs/pages/x/api/date-pickers/time-picker.json +++ b/docs/pages/x/api/date-pickers/time-picker.json @@ -90,7 +90,7 @@ "shouldDisableTime": { "type": { "name": "func" }, "signature": { - "type": "function(value: TDate, view: TimeView) => boolean", + "type": "function(value: PickerValidDate, view: TimeView) => boolean", "describedArgs": ["value", "view"], "returned": "boolean" } diff --git a/docs/pages/x/api/date-pickers/year-calendar.json b/docs/pages/x/api/date-pickers/year-calendar.json index 3efe3212590e..67c5c221d51e 100644 --- a/docs/pages/x/api/date-pickers/year-calendar.json +++ b/docs/pages/x/api/date-pickers/year-calendar.json @@ -10,7 +10,10 @@ "minDate": { "type": { "name": "object" }, "default": "1900-01-01" }, "onChange": { "type": { "name": "func" }, - "signature": { "type": "function(value: TDate) => void", "describedArgs": ["value"] } + "signature": { + "type": "function(value: PickerValidDate) => void", + "describedArgs": ["value"] + } }, "readOnly": { "type": { "name": "bool" } }, "referenceDate": { @@ -20,7 +23,7 @@ "shouldDisableYear": { "type": { "name": "func" }, "signature": { - "type": "function(year: TDate) => boolean", + "type": "function(year: PickerValidDate) => boolean", "describedArgs": ["year"], "returned": "boolean" } diff --git a/docs/scripts/generateProptypes.ts b/docs/scripts/generateProptypes.ts index c68602a94873..b15053b7c1fd 100644 --- a/docs/scripts/generateProptypes.ts +++ b/docs/scripts/generateProptypes.ts @@ -13,9 +13,9 @@ import { createXTypeScriptProjects, XTypeScriptProject } from './createXTypeScri const COMPONENTS_WITHOUT_PROPTYPES = ['ChartsAxisTooltipContent', 'ChartsItemTooltipContent']; async function generateProptypes(project: XTypeScriptProject, sourceFile: string) { - const isTDate = (name: string) => { + const isDateObject = (name: string) => { if (['x-date-pickers', 'x-date-pickers-pro'].includes(project.name)) { - const T_DATE_PROPS = [ + const DATE_OBJECT_PROPS = [ 'value', 'defaultValue', 'minDate', @@ -30,7 +30,7 @@ async function generateProptypes(project: XTypeScriptProject, sourceFile: string 'month', ]; - if (T_DATE_PROPS.includes(name)) { + if (DATE_OBJECT_PROPS.includes(name)) { return true; } } @@ -80,13 +80,13 @@ async function generateProptypes(project: XTypeScriptProject, sourceFile: string return false; } - if (isTDate(name)) { + if (isDateObject(name)) { return false; } return undefined; }, - shouldUseObjectForDate: ({ name }) => isTDate(name), + shouldUseObjectForDate: ({ name }) => isDateObject(name), }); if (components.length === 0) { diff --git a/docs/src/modules/components/PickersPlayground.tsx b/docs/src/modules/components/PickersPlayground.tsx index 5980b1565b98..7366b804e184 100644 --- a/docs/src/modules/components/PickersPlayground.tsx +++ b/docs/src/modules/components/PickersPlayground.tsx @@ -370,7 +370,7 @@ export default function PickersPlayground() { const dateViews = React.useMemo(() => availableViews.filter(isDatePickerView), [availableViews]); const timeViews = React.useMemo(() => availableViews.filter(isTimeView), [availableViews]); - const commonProps = React.useMemo>( + const commonProps = React.useMemo( () => ({ orientation: isLandscape ? 'landscape' : 'portrait', showDaysOutsideCurrentMonth, diff --git a/docs/src/modules/components/overview/mainDemo/Clock.tsx b/docs/src/modules/components/overview/mainDemo/Clock.tsx index 2b1b1d5eb80b..6ca16f44532e 100644 --- a/docs/src/modules/components/overview/mainDemo/Clock.tsx +++ b/docs/src/modules/components/overview/mainDemo/Clock.tsx @@ -31,7 +31,7 @@ const StyledLayout = styled(PickersLayoutRoot)({ }, }); -function CustomLayout(props: PickersLayoutProps) { +function CustomLayout(props: PickersLayoutProps) { const { actionBar, content, toolbar } = usePickerLayout(props); return ( diff --git a/docs/src/modules/components/overview/mainDemo/DateRangeWithShortcuts.tsx b/docs/src/modules/components/overview/mainDemo/DateRangeWithShortcuts.tsx index a197487ce22d..c8a9df4ce611 100644 --- a/docs/src/modules/components/overview/mainDemo/DateRangeWithShortcuts.tsx +++ b/docs/src/modules/components/overview/mainDemo/DateRangeWithShortcuts.tsx @@ -55,7 +55,7 @@ const shortcutsItems: PickersShortcutsItem>[] = [ { label: 'Reset', getValue: () => [null, null] }, ]; -interface CustomLayoutProps extends PickersLayoutProps, Dayjs, 'day'> { +interface CustomLayoutProps extends PickersLayoutProps, 'day'> { isHorizontal?: boolean; } function CustomLayout(props: CustomLayoutProps) { diff --git a/docs/src/modules/components/overview/mainDemo/DigitalClock.tsx b/docs/src/modules/components/overview/mainDemo/DigitalClock.tsx index d7c96867004b..b6959d39ed3f 100644 --- a/docs/src/modules/components/overview/mainDemo/DigitalClock.tsx +++ b/docs/src/modules/components/overview/mainDemo/DigitalClock.tsx @@ -24,7 +24,7 @@ const StyledLayout = styled(PickersLayoutRoot)({ }, }); -function CustomLayout(props: PickersLayoutProps) { +function CustomLayout(props: PickersLayoutProps) { const { actionBar, content } = usePickerLayout(props); return ( @@ -57,7 +57,7 @@ export default function DigitalClock() { hours: renderMultiSectionDigitalClockTimeView, minutes: renderMultiSectionDigitalClockTimeView, meridiem: renderMultiSectionDigitalClockTimeView, - } as StaticTimePickerProps['viewRenderers'] + } as StaticTimePickerProps['viewRenderers'] } /> diff --git a/docs/src/modules/components/overview/mainDemo/PickerButton.tsx b/docs/src/modules/components/overview/mainDemo/PickerButton.tsx index 27b6857feed5..7dee0bad4fed 100644 --- a/docs/src/modules/components/overview/mainDemo/PickerButton.tsx +++ b/docs/src/modules/components/overview/mainDemo/PickerButton.tsx @@ -9,11 +9,18 @@ import { BaseSingleInputFieldProps, DateValidationError, FieldSection, + PickerValidDate, } from '@mui/x-date-pickers/models'; interface ButtonFieldProps - extends UseDateFieldProps, - BaseSingleInputFieldProps { + extends UseDateFieldProps, + BaseSingleInputFieldProps< + // This usage of PickerValidDate will go away with TIsRange + PickerValidDate | null, + FieldSection, + true, + DateValidationError + > { setOpen?: React.Dispatch>; } diff --git a/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.tsx b/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.tsx index e41859e4304f..0e7a18a2e7af 100644 --- a/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.tsx +++ b/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.tsx @@ -25,6 +25,7 @@ import { DEFAULT_DESKTOP_MODE_MEDIA_QUERY, useControlledValueWithTimezone, useViews, + PickerRangeValue, } from '@mui/x-date-pickers/internals'; import { warnOnce } from '@mui/x-internals/warning'; import { PickerValidDate } from '@mui/x-date-pickers/models'; @@ -45,7 +46,7 @@ import { isWithinRange, } from '../internals/utils/date-utils'; import { calculateRangeChange, calculateRangePreview } from '../internals/utils/date-range-manager'; -import { DateRange, RangePosition } from '../models'; +import { RangePosition } from '../models'; import { DateRangePickerDay, dateRangePickerDayClasses as dayClasses } from '../DateRangePickerDay'; import { rangeValueManager } from '../internals/utils/valueManagers'; import { useDragRange } from './useDragRange'; @@ -62,7 +63,7 @@ const DateRangeCalendarRoot = styled('div', { name: 'MuiDateRangeCalendar', slot: 'Root', overridesResolver: (_, styles) => styles.root, -})<{ ownerState: DateRangeCalendarOwnerState }>({ +})<{ ownerState: DateRangeCalendarOwnerState }>({ display: 'flex', flexDirection: 'row', }); @@ -103,12 +104,12 @@ const InnerDayCalendarForRange = styled(DayCalendar)(({ theme }) => ({ const DayCalendarForRange = InnerDayCalendarForRange as typeof DayCalendar; -function useDateRangeCalendarDefaultizedProps( - props: DateRangeCalendarProps, +function useDateRangeCalendarDefaultizedProps( + props: DateRangeCalendarProps, name: string, -): DateRangeCalendarDefaultizedProps { - const utils = useUtils(); - const defaultDates = useDefaultDates(); +): DateRangeCalendarDefaultizedProps { + const utils = useUtils(); + const defaultDates = useDefaultDates(); const defaultReduceAnimations = useDefaultReduceAnimations(); const themeProps = useThemeProps({ props, @@ -133,7 +134,7 @@ function useDateRangeCalendarDefaultizedProps( }; } -const useUtilityClasses = (ownerState: DateRangeCalendarOwnerState) => { +const useUtilityClasses = (ownerState: DateRangeCalendarOwnerState) => { const { classes, isDragging } = ownerState; const slots = { root: ['root'], @@ -144,8 +145,8 @@ const useUtilityClasses = (ownerState: DateRangeCalendarOwnerState) => { return composeClasses(slots, getDateRangeCalendarUtilityClass, classes); }; -type DateRangeCalendarComponent = (( - props: DateRangeCalendarProps & React.RefAttributes, +type DateRangeCalendarComponent = (( + props: DateRangeCalendarProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; /** @@ -158,9 +159,10 @@ type DateRangeCalendarComponent = (( * * - [DateRangeCalendar API](https://mui.com/x/api/date-pickers/date-range-calendar/) */ -const DateRangeCalendar = React.forwardRef(function DateRangeCalendar< - TDate extends PickerValidDate, ->(inProps: DateRangeCalendarProps, ref: React.Ref) { +const DateRangeCalendar = React.forwardRef(function DateRangeCalendar( + inProps: DateRangeCalendarProps, + ref: React.Ref, +) { const props = useDateRangeCalendarDefaultizedProps(inProps, 'MuiDateRangeCalendar'); const shouldHavePreview = useMediaQuery(DEFAULT_DESKTOP_MODE_MEDIA_QUERY, { defaultMatches: false, @@ -208,8 +210,7 @@ const DateRangeCalendar = React.forwardRef(function DateRangeCalendar< } = props; const { value, handleValueChange, timezone } = useControlledValueWithTimezone< - TDate, - DateRange, + PickerRangeValue, NonNullable >({ name: 'DateRangeCalendar', @@ -229,8 +230,8 @@ const DateRangeCalendar = React.forwardRef(function DateRangeCalendar< autoFocus, }); - const utils = useUtils(); - const now = useNow(timezone); + const utils = useUtils(); + const now = useNow(timezone); const id = useId(); const { rangePosition, onRangePositionChange } = useRangePosition({ @@ -247,7 +248,7 @@ const DateRangeCalendar = React.forwardRef(function DateRangeCalendar< const handleSelectedDayChange = useEventCallback( ( - newDate: TDate | null, + newDate: PickerValidDate | null, selectionState: PickerSelectionState | undefined, allowRangeFlip: boolean = false, ) => { @@ -274,7 +275,7 @@ const DateRangeCalendar = React.forwardRef(function DateRangeCalendar< }, ); - const handleDrop = useEventCallback((newDate: TDate) => { + const handleDrop = useEventCallback((newDate: PickerValidDate) => { handleSelectedDayChange(newDate, undefined, true); }); @@ -282,7 +283,7 @@ const DateRangeCalendar = React.forwardRef(function DateRangeCalendar< // Range going for the start of the start day to the end of the end day. // This makes sure that `isWithinRange` works with any time in the start and end day. - const valueDayRange = React.useMemo>( + const valueDayRange = React.useMemo( () => [ value[0] == null || !utils.isValid(value[0]) ? value[0] : utils.startOfDay(value[0]), value[1] == null || !utils.isValid(value[1]) ? value[1] : utils.endOfDay(value[1]), @@ -302,7 +303,7 @@ const DateRangeCalendar = React.forwardRef(function DateRangeCalendar< const ownerState = { ...props, isDragging }; const classes = useUtilityClasses(ownerState); - const draggingRange = React.useMemo>(() => { + const draggingRange = React.useMemo(() => { if (!valueDayRange[0] || !valueDayRange[1] || !rangeDragDay) { return [null, null]; } @@ -323,7 +324,7 @@ const DateRangeCalendar = React.forwardRef(function DateRangeCalendar< return undefined; } - return (dayToTest: TDate) => + return (dayToTest: PickerValidDate) => shouldDisableDate(dayToTest, draggingDatePosition || rangePosition); }, [shouldDisableDate, rangePosition, draggingDatePosition]); @@ -333,7 +334,7 @@ const DateRangeCalendar = React.forwardRef(function DateRangeCalendar< changeMonth, handleChangeMonth, onMonthSwitchingAnimationEnd, - } = useCalendarState({ + } = useCalendarState({ value: value[0] || value[1], referenceDate, disableFuture, @@ -348,32 +349,30 @@ const DateRangeCalendar = React.forwardRef(function DateRangeCalendar< }); const CalendarHeader = slots?.calendarHeader ?? PickersRangeCalendarHeader; - const calendarHeaderProps: Omit< - PickersRangeCalendarHeaderProps, - 'month' | 'monthIndex' - > = useSlotProps({ - elementType: CalendarHeader, - externalSlotProps: slotProps?.calendarHeader, - additionalProps: { - calendars, - views: ['day'], - view: 'day', - currentMonth: calendarState.currentMonth, - onMonthChange: (newMonth, direction) => handleChangeMonth({ newMonth, direction }), - minDate, - maxDate, - disabled, - disablePast, - disableFuture, - reduceAnimations, - timezone, - slots, - slotProps, - }, - ownerState: props, - }); + const calendarHeaderProps: Omit = + useSlotProps({ + elementType: CalendarHeader, + externalSlotProps: slotProps?.calendarHeader, + additionalProps: { + calendars, + views: ['day'], + view: 'day', + currentMonth: calendarState.currentMonth, + onMonthChange: (newMonth, direction) => handleChangeMonth({ newMonth, direction }), + minDate, + maxDate, + disabled, + disablePast, + disableFuture, + reduceAnimations, + timezone, + slots, + slotProps, + }, + ownerState: props, + }); - const prevValue = React.useRef | null>(null); + const prevValue = React.useRef(null); React.useEffect(() => { const date = rangePosition === 'start' ? value[0] : value[1]; if (!date || !utils.isValid(date)) { @@ -408,7 +407,7 @@ const DateRangeCalendar = React.forwardRef(function DateRangeCalendar< } }, [rangePosition, value]); // eslint-disable-line - const baseDateValidationProps: Required> = { + const baseDateValidationProps: Required = { disablePast, disableFuture, maxDate, @@ -421,7 +420,7 @@ const DateRangeCalendar = React.forwardRef(function DateRangeCalendar< disabled, }; - const [rangePreviewDay, setRangePreviewDay] = React.useState(null); + const [rangePreviewDay, setRangePreviewDay] = React.useState(null); const CalendarTransitionProps = React.useMemo( () => ({ @@ -438,7 +437,7 @@ const DateRangeCalendar = React.forwardRef(function DateRangeCalendar< }); const handleDayMouseEnter = useEventCallback( - (event: React.MouseEvent, newPreviewRequest: TDate) => { + (event: React.MouseEvent, newPreviewRequest: PickerValidDate) => { if (!isWithinRange(utils, newPreviewRequest, valueDayRange)) { setRangePreviewDay(newPreviewRequest); } else { @@ -450,7 +449,7 @@ const DateRangeCalendar = React.forwardRef(function DateRangeCalendar< const slotsForDayCalendar = { day: DateRangePickerDay, ...slots, - } as DayCalendarSlots; + } as DayCalendarSlots; const slotPropsForDayCalendar = { ...slotProps, @@ -495,7 +494,7 @@ const DateRangeCalendar = React.forwardRef(function DateRangeCalendar< ...(resolveComponentProps(slotProps?.day, dayOwnerState) ?? {}), }; }, - } as DayCalendarSlotProps; + } as DayCalendarSlotProps; const calendarMonths = React.useMemo( () => Array.from({ length: calendars }).map((_, index) => index), @@ -556,13 +555,13 @@ const DateRangeCalendar = React.forwardRef(function DateRangeCalendar< return ( - + - + adapter.format(date, 'weekdayShort').charAt(0).toUpperCase() + * @default (date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase() */ dayOfWeekFormatter: PropTypes.func, /** @@ -724,8 +723,7 @@ DateRangeCalendar.propTypes = { onFocusedViewChange: PropTypes.func, /** * Callback fired on month change. - * @template TDate - * @param {TDate} month The new month. + * @param {PickerValidDate} month The new month. */ onMonthChange: PropTypes.func, /** @@ -776,8 +774,7 @@ DateRangeCalendar.propTypes = { * * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance. * - * @template TDate - * @param {TDate} day The date to test. + * @param {PickerValidDate} day The date to test. * @param {string} position The date to test, 'start' or 'end'. * @returns {boolean} Returns `true` if the date should be disabled. */ diff --git a/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.types.ts b/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.types.ts index aaae131ea45c..4bb144a7c0cb 100644 --- a/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.types.ts +++ b/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.types.ts @@ -18,51 +18,48 @@ import { PickersArrowSwitcherSlotProps, DayCalendarProps, ExportedUseViewsOptions, + PickerRangeValue, } from '@mui/x-date-pickers/internals'; -import { DateRange, RangePosition } from '../models'; +import { RangePosition } from '../models'; import { DateRangeCalendarClasses } from './dateRangeCalendarClasses'; import { DateRangePickerDay, DateRangePickerDayProps } from '../DateRangePickerDay'; import { UseRangePositionProps } from '../internals/hooks/useRangePosition'; import { PickersRangeCalendarHeaderProps } from '../PickersRangeCalendarHeader'; import { ExportedValidateDateRangeProps } from '../validation/validateDateRange'; -export interface DateRangeCalendarSlots +export interface DateRangeCalendarSlots extends PickersArrowSwitcherSlots, - Omit, 'day'>, + Omit, PickersCalendarHeaderSlots { /** * Custom component for calendar header. * Check the [PickersCalendarHeader](https://mui.com/x/api/date-pickers/pickers-calendar-header/) component. * @default PickersCalendarHeader */ - calendarHeader?: React.ElementType>; + calendarHeader?: React.ElementType; /** * Custom component for day in range pickers. * Check the [DateRangePickersDay](https://mui.com/x/api/date-pickers/date-range-picker-day/) component. * @default DateRangePickersDay */ - day?: React.ElementType>; + day?: React.ElementType; } -export interface DateRangeCalendarSlotProps +export interface DateRangeCalendarSlotProps extends PickersArrowSwitcherSlotProps, - Omit, 'day'>, - PickersCalendarHeaderSlotProps { - calendarHeader?: SlotComponentProps< - typeof PickersCalendarHeader, - {}, - DateRangeCalendarProps - >; + Omit, + PickersCalendarHeaderSlotProps { + calendarHeader?: SlotComponentProps; day?: SlotComponentProps< typeof DateRangePickerDay, {}, - DayCalendarProps & { day: TDate; selected: boolean } + DayCalendarProps & { day: PickerValidDate; selected: boolean } >; } -export interface ExportedDateRangeCalendarProps - extends ExportedDayCalendarProps, - ExportedValidateDateRangeProps, +export interface ExportedDateRangeCalendarProps + extends ExportedDayCalendarProps, + ExportedValidateDateRangeProps, TimezoneProps { /** * If `true`, after selecting `start` date calendar will not automatically switch to the month of `end` date. @@ -86,10 +83,9 @@ export interface ExportedDateRangeCalendarProps reduceAnimations?: boolean; /** * Callback fired on month change. - * @template TDate - * @param {TDate} month The new month. + * @param {PickerValidDate} month The new month. */ - onMonthChange?: (month: TDate) => void; + onMonthChange?: (month: PickerValidDate) => void; /** * Position the current month is rendered in. * @default 1 @@ -102,25 +98,25 @@ export interface ExportedDateRangeCalendarProps disableDragEditing?: boolean; } -export interface DateRangeCalendarProps - extends ExportedDateRangeCalendarProps, +export interface DateRangeCalendarProps + extends ExportedDateRangeCalendarProps, UseRangePositionProps, - ExportedUseViewsOptions<'day'> { + ExportedUseViewsOptions { /** * The selected value. * Used when the component is controlled. */ - value?: DateRange; + value?: PickerRangeValue; /** * The default selected value. * Used when the component is not controlled. */ - defaultValue?: DateRange; + defaultValue?: PickerRangeValue; /** * The date used to generate the new value when both `value` and `defaultValue` are empty. * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. */ - referenceDate?: TDate; + referenceDate?: PickerValidDate; /** * The number of calendars to render. * @default 2 @@ -139,12 +135,12 @@ export interface DateRangeCalendarProps * Overridable component slots. * @default {} */ - slots?: DateRangeCalendarSlots; + slots?: DateRangeCalendarSlots; /** * The props used for each component slot. * @default {} */ - slotProps?: DateRangeCalendarSlotProps; + slotProps?: DateRangeCalendarSlotProps; /** * Range positions available for selection. * This list is checked against when checking if a next range position can be selected. @@ -155,18 +151,17 @@ export interface DateRangeCalendarProps availableRangePositions?: RangePosition[]; } -export interface DateRangeCalendarOwnerState - extends DateRangeCalendarProps { +export interface DateRangeCalendarOwnerState extends DateRangeCalendarProps { isDragging: boolean; } -export type DateRangeCalendarDefaultizedProps = DefaultizedProps< - DateRangeCalendarProps, +export type DateRangeCalendarDefaultizedProps = DefaultizedProps< + DateRangeCalendarProps, | 'views' | 'openTo' | 'reduceAnimations' | 'calendars' | 'disableDragEditing' | 'availableRangePositions' - | keyof BaseDateValidationProps + | keyof BaseDateValidationProps >; diff --git a/packages/x-date-pickers-pro/src/DateRangeCalendar/useDragRange.ts b/packages/x-date-pickers-pro/src/DateRangeCalendar/useDragRange.ts index 25db9f81dcb1..a25b6fe4f2bc 100644 --- a/packages/x-date-pickers-pro/src/DateRangeCalendar/useDragRange.ts +++ b/packages/x-date-pickers-pro/src/DateRangeCalendar/useDragRange.ts @@ -2,18 +2,19 @@ import * as React from 'react'; import useEventCallback from '@mui/utils/useEventCallback'; import { MuiPickersAdapter, PickersTimezone, PickerValidDate } from '@mui/x-date-pickers/models'; -import { DateRange, RangePosition } from '../models'; +import { PickerRangeValue } from '@mui/x-date-pickers/internals'; +import { RangePosition } from '../models'; import { isEndOfRange, isStartOfRange } from '../internals/utils/date-utils'; -interface UseDragRangeParams { +interface UseDragRangeParams { disableDragEditing?: boolean; - utils: MuiPickersAdapter; - setRangeDragDay: (value: TDate | null) => void; + utils: MuiPickersAdapter; + setRangeDragDay: (value: PickerValidDate | null) => void; setIsDragging: (value: boolean) => void; isDragging: boolean; onDatePositionChange: (position: RangePosition) => void; - onDrop: (newDate: TDate) => void; - dateRange: DateRange; + onDrop: (newDate: PickerValidDate) => void; + dateRange: PickerRangeValue; timezone: PickersTimezone; } @@ -29,15 +30,15 @@ interface UseDragRangeEvents { onTouchEnd?: React.TouchEventHandler; } -interface UseDragRangeResponse extends UseDragRangeEvents { +interface UseDragRangeResponse extends UseDragRangeEvents { isDragging: boolean; - rangeDragDay: TDate | null; + rangeDragDay: PickerValidDate | null; draggingDatePosition: RangePosition | null; } -const resolveDateFromTarget = ( +const resolveDateFromTarget = ( target: EventTarget, - utils: MuiPickersAdapter, + utils: MuiPickersAdapter, timezone: PickersTimezone, ) => { const timestampString = (target as HTMLElement).dataset.timestamp; @@ -87,7 +88,7 @@ const resolveElementFromTouch = ( return null; }; -const useDragRangeEvents = ({ +const useDragRangeEvents = ({ utils, setRangeDragDay, setIsDragging, @@ -97,7 +98,7 @@ const useDragRangeEvents = ({ disableDragEditing, dateRange, timezone, -}: UseDragRangeParams): UseDragRangeEvents => { +}: UseDragRangeParams): UseDragRangeEvents => { const emptyDragImgRef = React.useRef(null); React.useEffect(() => { // Preload the image - required for Safari support: https://stackoverflow.com/a/40923520/3303436 @@ -106,7 +107,7 @@ const useDragRangeEvents = ({ 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'; }, []); - const isElementDraggable = (day: TDate | null): day is TDate => { + const isElementDraggable = (day: PickerValidDate | null): day is PickerValidDate => { if (day == null) { return false; } @@ -276,7 +277,7 @@ const useDragRangeEvents = ({ }; }; -export const useDragRange = ({ +export const useDragRange = ({ disableDragEditing, utils, onDatePositionChange, @@ -284,15 +285,15 @@ export const useDragRange = ({ dateRange, timezone, }: Omit< - UseDragRangeParams, + UseDragRangeParams, 'setRangeDragDay' | 'setIsDragging' | 'isDragging' ->): UseDragRangeResponse => { +>): UseDragRangeResponse => { const [isDragging, setIsDragging] = React.useState(false); - const [rangeDragDay, setRangeDragDay] = React.useState(null); + const [rangeDragDay, setRangeDragDay] = React.useState(null); - const handleRangeDragDayChange = useEventCallback((val: TDate | null) => { - if (!utils.isEqual(val, rangeDragDay)) { - setRangeDragDay(val); + const handleRangeDragDayChange = useEventCallback((newValue: PickerValidDate | null) => { + if (!utils.isEqual(newValue, rangeDragDay)) { + setRangeDragDay(newValue); } }); diff --git a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.tsx b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.tsx index cc96fb4d9bbe..4c4ada8e4094 100644 --- a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.tsx @@ -4,16 +4,12 @@ import PropTypes from 'prop-types'; import useMediaQuery from '@mui/material/useMediaQuery'; import { useThemeProps } from '@mui/material/styles'; import { refType } from '@mui/utils'; -import { PickerValidDate } from '@mui/x-date-pickers/models'; import { DesktopDateRangePicker } from '../DesktopDateRangePicker'; import { MobileDateRangePicker } from '../MobileDateRangePicker'; import { DateRangePickerProps } from './DateRangePicker.types'; -type DatePickerComponent = (< - TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = true, ->( - props: DateRangePickerProps & +type DatePickerComponent = (( + props: DateRangePickerProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; @@ -28,10 +24,9 @@ type DatePickerComponent = (< * - [DateRangePicker API](https://mui.com/x/api/date-pickers/date-range-picker/) */ const DateRangePicker = React.forwardRef(function DateRangePicker< - TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = true, >( - inProps: DateRangePickerProps, + inProps: DateRangePickerProps, ref: React.Ref, ) { const props = useThemeProps({ props: inProps, name: 'MuiDateRangePicker' }); @@ -78,9 +73,9 @@ DateRangePicker.propTypes = { currentMonthCalendarPosition: PropTypes.oneOf([1, 2, 3]), /** * Formats the day of week displayed in the calendar header. - * @param {TDate} date The date of the day of week provided by the adapter. + * @param {PickerValidDate} date The date of the day of week provided by the adapter. * @returns {string} The name to display. - * @default (date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase() + * @default (date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase() */ dayOfWeekFormatter: PropTypes.func, /** @@ -228,8 +223,7 @@ DateRangePicker.propTypes = { onError: PropTypes.func, /** * Callback fired on month change. - * @template TDate - * @param {TDate} month The new month. + * @param {PickerValidDate} month The new month. */ onMonthChange: PropTypes.func, /** @@ -303,8 +297,7 @@ DateRangePicker.propTypes = { * * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance. * - * @template TDate - * @param {TDate} day The date to test. + * @param {PickerValidDate} day The date to test. * @param {string} position The date to test, 'start' or 'end'. * @returns {boolean} Returns `true` if the date should be disabled. */ diff --git a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.types.ts b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.types.ts index 13b43f713faf..326c9b650e99 100644 --- a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.types.ts +++ b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.types.ts @@ -1,6 +1,6 @@ import { MakeRequired } from '@mui/x-internals/types'; -import { BaseDateValidationProps } from '@mui/x-date-pickers/internals'; -import { BaseSingleInputFieldProps, PickerValidDate } from '@mui/x-date-pickers/models'; +import { BaseDateValidationProps, PickerRangeValue } from '@mui/x-date-pickers/internals'; +import { BaseSingleInputFieldProps } from '@mui/x-date-pickers/models'; import { DesktopDateRangePickerProps, DesktopDateRangePickerSlots, @@ -11,28 +11,19 @@ import { MobileDateRangePickerSlots, MobileDateRangePickerSlotProps, } from '../MobileDateRangePicker'; -import { - DateRange, - DateRangeValidationError, - RangeFieldSection, - UseDateRangeFieldProps, -} from '../models'; +import { DateRangeValidationError, RangeFieldSection, UseDateRangeFieldProps } from '../models'; -export interface DateRangePickerSlots - extends DesktopDateRangePickerSlots, - MobileDateRangePickerSlots {} +export interface DateRangePickerSlots + extends DesktopDateRangePickerSlots, + MobileDateRangePickerSlots {} -export interface DateRangePickerSlotProps< - TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean, -> extends DesktopDateRangePickerSlotProps, - MobileDateRangePickerSlotProps {} +export interface DateRangePickerSlotProps + extends DesktopDateRangePickerSlotProps, + MobileDateRangePickerSlotProps {} -export interface DateRangePickerProps< - TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = true, -> extends DesktopDateRangePickerProps, - MobileDateRangePickerProps { +export interface DateRangePickerProps + extends DesktopDateRangePickerProps, + MobileDateRangePickerProps { /** * CSS media query when `Mobile` mode will be changed to `Desktop`. * @default '@media (pointer: fine)' @@ -43,28 +34,20 @@ export interface DateRangePickerProps< * Overridable component slots. * @default {} */ - slots?: DateRangePickerSlots; + slots?: DateRangePickerSlots; /** * The props used for each component slot. * @default {} */ - slotProps?: DateRangePickerSlotProps; + slotProps?: DateRangePickerSlotProps; } /** * Props the field can receive when used inside a `DateRangePicker`, `DesktopDateRangePicker` or `MobileDateRangePicker` component. */ -export type DateRangePickerFieldProps< - TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = true, -> = MakeRequired< - UseDateRangeFieldProps, - 'format' | 'timezone' | 'value' | keyof BaseDateValidationProps -> & - BaseSingleInputFieldProps< - DateRange, - TDate, - RangeFieldSection, - false, - DateRangeValidationError - >; +export type DateRangePickerFieldProps = + MakeRequired< + UseDateRangeFieldProps, + 'format' | 'timezone' | 'value' | keyof BaseDateValidationProps + > & + BaseSingleInputFieldProps; diff --git a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerToolbar.tsx b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerToolbar.tsx index a3b4ff70d6d6..8273067b4870 100644 --- a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerToolbar.tsx +++ b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerToolbar.tsx @@ -11,17 +11,16 @@ import { useUtils, BaseToolbarProps, ExportedBaseToolbarProps, + PickerRangeValue, } from '@mui/x-date-pickers/internals'; import { usePickersTranslations } from '@mui/x-date-pickers/hooks'; -import { PickerValidDate } from '@mui/x-date-pickers/models'; -import { DateRange } from '../models'; import { UseRangePositionResponse } from '../internals/hooks/useRangePosition'; import { DateRangePickerToolbarClasses, getDateRangePickerToolbarUtilityClass, } from './dateRangePickerToolbarClasses'; -const useUtilityClasses = (ownerState: DateRangePickerToolbarProps) => { +const useUtilityClasses = (ownerState: DateRangePickerToolbarProps) => { const { classes } = ownerState; const slots = { root: ['root'], @@ -31,9 +30,9 @@ const useUtilityClasses = (ownerState: DateRangePickerToolbarProps) => { return composeClasses(slots, getDateRangePickerToolbarUtilityClass, classes); }; -export interface DateRangePickerToolbarProps +export interface DateRangePickerToolbarProps extends ExportedDateRangePickerToolbarProps, - Omit, 'day'>, 'onChange' | 'isLandscape'>, + Omit, 'onChange' | 'isLandscape'>, Pick {} export interface ExportedDateRangePickerToolbarProps extends ExportedBaseToolbarProps { @@ -48,7 +47,7 @@ const DateRangePickerToolbarRoot = styled(PickersToolbar, { slot: 'Root', overridesResolver: (_, styles) => styles.root, })<{ - ownerState: DateRangePickerToolbarProps; + ownerState: DateRangePickerToolbarProps; }>({}); const DateRangePickerToolbarContainer = styled('div', { @@ -59,8 +58,8 @@ const DateRangePickerToolbarContainer = styled('div', { display: 'flex', }); -type DateRangePickerToolbarComponent = (( - props: DateRangePickerToolbarProps & React.RefAttributes, +type DateRangePickerToolbarComponent = (( + props: DateRangePickerToolbarProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; /** @@ -73,10 +72,11 @@ type DateRangePickerToolbarComponent = (( * * - [DateRangePickerToolbar API](https://mui.com/x/api/date-pickers/date-range-picker-toolbar/) */ -const DateRangePickerToolbar = React.forwardRef(function DateRangePickerToolbar< - TDate extends PickerValidDate, ->(inProps: DateRangePickerToolbarProps, ref: React.Ref) { - const utils = useUtils(); +const DateRangePickerToolbar = React.forwardRef(function DateRangePickerToolbar( + inProps: DateRangePickerToolbarProps, + ref: React.Ref, +) { + const utils = useUtils(); const props = useThemeProps({ props: inProps, name: 'MuiDateRangePickerToolbar' }); const { @@ -91,7 +91,7 @@ const DateRangePickerToolbar = React.forwardRef(function DateRangePickerToolbar< ...other } = props; - const translations = usePickersTranslations(); + const translations = usePickersTranslations(); const startDateValue = start ? utils.formatByString(start, toolbarFormat || utils.formats.shortDate) diff --git a/packages/x-date-pickers-pro/src/DateRangePicker/shared.tsx b/packages/x-date-pickers-pro/src/DateRangePicker/shared.tsx index 86b567391d97..b098d57cfb0f 100644 --- a/packages/x-date-pickers-pro/src/DateRangePicker/shared.tsx +++ b/packages/x-date-pickers-pro/src/DateRangePicker/shared.tsx @@ -9,9 +9,9 @@ import { BaseDateValidationProps, BasePickerInputProps, PickerViewRendererLookup, + PickerRangeValue, } from '@mui/x-date-pickers/internals'; -import { PickerValidDate } from '@mui/x-date-pickers/models'; -import { DateRangeValidationError, DateRange } from '../models'; +import { DateRangeValidationError } from '../models'; import { DateRangeCalendarSlots, DateRangeCalendarSlotProps, @@ -24,57 +24,53 @@ import { } from './DateRangePickerToolbar'; import { DateRangeViewRendererProps } from '../dateRangeViewRenderers'; -export interface BaseDateRangePickerSlots - extends DateRangeCalendarSlots { +export interface BaseDateRangePickerSlots extends DateRangeCalendarSlots { /** * Custom component for the toolbar rendered above the views. * @default DateTimePickerToolbar */ - toolbar?: React.JSXElementConstructor>; + toolbar?: React.JSXElementConstructor; } -export interface BaseDateRangePickerSlotProps - extends DateRangeCalendarSlotProps { +export interface BaseDateRangePickerSlotProps extends DateRangeCalendarSlotProps { toolbar?: ExportedDateRangePickerToolbarProps; } -export interface BaseDateRangePickerProps +export interface BaseDateRangePickerProps extends Omit< - BasePickerInputProps, TDate, 'day', DateRangeValidationError>, + BasePickerInputProps, 'view' | 'views' | 'openTo' | 'onViewChange' | 'orientation' >, - ExportedDateRangeCalendarProps { + ExportedDateRangeCalendarProps { /** * Overridable component slots. * @default {} */ - slots?: BaseDateRangePickerSlots; + slots?: BaseDateRangePickerSlots; /** * The props used for each component slot. * @default {} */ - slotProps?: BaseDateRangePickerSlotProps; + slotProps?: BaseDateRangePickerSlotProps; /** * Define custom view renderers for each section. * If `null`, the section will only have field editing. * If `undefined`, internally defined view will be used. */ viewRenderers?: Partial< - PickerViewRendererLookup, 'day', DateRangeViewRendererProps, {}> + PickerViewRendererLookup, {}> >; } -type UseDateRangePickerDefaultizedProps< - TDate extends PickerValidDate, - Props extends BaseDateRangePickerProps, -> = LocalizedComponent>>; +type UseDateRangePickerDefaultizedProps = + LocalizedComponent>; -export function useDateRangePickerDefaultizedProps< - TDate extends PickerValidDate, - Props extends BaseDateRangePickerProps, ->(props: Props, name: string): UseDateRangePickerDefaultizedProps { - const utils = useUtils(); - const defaultDates = useDefaultDates(); +export function useDateRangePickerDefaultizedProps( + props: Props, + name: string, +): UseDateRangePickerDefaultizedProps { + const utils = useUtils(); + const defaultDates = useDefaultDates(); const themeProps = useThemeProps({ props, name, diff --git a/packages/x-date-pickers-pro/src/DateRangePickerDay/DateRangePickerDay.tsx b/packages/x-date-pickers-pro/src/DateRangePickerDay/DateRangePickerDay.tsx index f5ee14896d79..76de35070d63 100644 --- a/packages/x-date-pickers-pro/src/DateRangePickerDay/DateRangePickerDay.tsx +++ b/packages/x-date-pickers-pro/src/DateRangePickerDay/DateRangePickerDay.tsx @@ -6,7 +6,6 @@ import { useLicenseVerifier } from '@mui/x-license'; import { alpha, styled, useThemeProps } from '@mui/material/styles'; import composeClasses from '@mui/utils/composeClasses'; import { useUtils } from '@mui/x-date-pickers/internals'; -import { PickerValidDate } from '@mui/x-date-pickers/models'; import { PickersDay, PickersDayProps } from '@mui/x-date-pickers/PickersDay'; import { DateRangePickerDayClasses, @@ -17,8 +16,8 @@ import { getReleaseInfo } from '../internals/utils/releaseInfo'; const releaseInfo = getReleaseInfo(); -export interface DateRangePickerDayProps - extends Omit, 'classes' | 'onBlur' | 'onFocus' | 'onKeyDown'> { +export interface DateRangePickerDayProps + extends Omit { /** * Set to `true` if the `day` is in a highlighted date range. */ @@ -58,7 +57,7 @@ export interface DateRangePickerDayProps draggable?: boolean; } -type OwnerState = DateRangePickerDayProps & { +type OwnerState = DateRangePickerDayProps & { isEndOfMonth: boolean; isStartOfMonth: boolean; isFirstVisibleCell: boolean; @@ -291,17 +290,16 @@ const DateRangePickerDayDay = styled(PickersDay, { }, }, ], -}) as unknown as ( - props: PickersDayProps & { ownerState: OwnerState }, -) => React.JSX.Element; +}) as (props: PickersDayProps & { ownerState: OwnerState }) => React.JSX.Element; -type DateRangePickerDayComponent = ( - props: DateRangePickerDayProps & React.RefAttributes, +type DateRangePickerDayComponent = ( + props: DateRangePickerDayProps & React.RefAttributes, ) => React.JSX.Element; -const DateRangePickerDayRaw = React.forwardRef(function DateRangePickerDay< - TDate extends PickerValidDate, ->(inProps: DateRangePickerDayProps, ref: React.Ref) { +const DateRangePickerDayRaw = React.forwardRef(function DateRangePickerDay( + inProps: DateRangePickerDayProps, + ref: React.Ref, +) { const props = useThemeProps({ props: inProps, name: 'MuiDateRangePickerDay' }); const { className, @@ -323,7 +321,7 @@ const DateRangePickerDayRaw = React.forwardRef(function DateRangePickerDay< } = props; useLicenseVerifier('x-date-pickers-pro', releaseInfo); - const utils = useUtils(); + const utils = useUtils(); const isEndOfMonth = utils.isSameDay(day, utils.endOfMonth(day)); const isStartOfMonth = utils.isSameDay(day, utils.startOfMonth(day)); @@ -356,7 +354,7 @@ const DateRangePickerDayRaw = React.forwardRef(function DateRangePickerDay< className={classes.rangeIntervalPreview} ownerState={ownerState} > - + ( - props: DateTimeRangePickerProps & +type DateTimeRangePickerComponent = (( + props: DateTimeRangePickerProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; @@ -28,10 +24,9 @@ type DateTimeRangePickerComponent = (< * - [DateTimeRangePicker API](https://mui.com/x/api/date-pickers/date-time-range-picker/) */ const DateTimeRangePicker = React.forwardRef(function DateTimeRangePicker< - TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = true, >( - inProps: DateTimeRangePickerProps, + inProps: DateTimeRangePickerProps, ref: React.Ref, ) { const props = useThemeProps({ props: inProps, name: 'MuiDateTimeRangePicker' }); @@ -83,9 +78,9 @@ DateTimeRangePicker.propTypes = { currentMonthCalendarPosition: PropTypes.oneOf([1, 2, 3]), /** * Formats the day of week displayed in the calendar header. - * @param {TDate} date The date of the day of week provided by the adapter. + * @param {PickerValidDate} date The date of the day of week provided by the adapter. * @returns {string} The name to display. - * @default (date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase() + * @default (date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase() */ dayOfWeekFormatter: PropTypes.func, /** @@ -261,8 +256,7 @@ DateTimeRangePicker.propTypes = { onError: PropTypes.func, /** * Callback fired on month change. - * @template TDate - * @param {TDate} month The new month. + * @param {PickerValidDate} month The new month. */ onMonthChange: PropTypes.func, /** @@ -348,16 +342,14 @@ DateTimeRangePicker.propTypes = { * * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance. * - * @template TDate - * @param {TDate} day The date to test. + * @param {PickerValidDate} day The date to test. * @param {string} position The date to test, 'start' or 'end'. * @returns {boolean} Returns `true` if the date should be disabled. */ shouldDisableDate: PropTypes.func, /** * Disable specific time. - * @template TDate - * @param {TDate} value The value to check. + * @param {PickerValidDate} value The value to check. * @param {TimeView} view The clock type of the timeValue. * @returns {boolean} If `true` the time will be disabled. */ diff --git a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePicker.types.ts b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePicker.types.ts index 29d8c32cf3c4..43998205dc64 100644 --- a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePicker.types.ts +++ b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePicker.types.ts @@ -1,6 +1,10 @@ import { MakeRequired } from '@mui/x-internals/types'; -import { BaseDateValidationProps, BaseTimeValidationProps } from '@mui/x-date-pickers/internals'; -import { BaseSingleInputFieldProps, PickerValidDate } from '@mui/x-date-pickers/models'; +import { + BaseDateValidationProps, + BaseTimeValidationProps, + PickerRangeValue, +} from '@mui/x-date-pickers/internals'; +import { BaseSingleInputFieldProps } from '@mui/x-date-pickers/models'; import { DesktopDateTimeRangePickerProps, DesktopDateTimeRangePickerSlots, @@ -12,23 +16,19 @@ import { MobileDateTimeRangePickerSlotProps, } from '../MobileDateTimeRangePicker'; import { UseDateTimeRangeFieldProps } from '../internals/models'; -import { DateRange, DateTimeRangeValidationError, RangeFieldSection } from '../models'; +import { DateTimeRangeValidationError, RangeFieldSection } from '../models'; -export interface DateTimeRangePickerSlots - extends DesktopDateTimeRangePickerSlots, - MobileDateTimeRangePickerSlots {} +export interface DateTimeRangePickerSlots + extends DesktopDateTimeRangePickerSlots, + MobileDateTimeRangePickerSlots {} -export interface DateTimeRangePickerSlotProps< - TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean, -> extends DesktopDateTimeRangePickerSlotProps, - MobileDateTimeRangePickerSlotProps {} +export interface DateTimeRangePickerSlotProps + extends DesktopDateTimeRangePickerSlotProps, + MobileDateTimeRangePickerSlotProps {} -export interface DateTimeRangePickerProps< - TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = true, -> extends DesktopDateTimeRangePickerProps, - MobileDateTimeRangePickerProps { +export interface DateTimeRangePickerProps + extends DesktopDateTimeRangePickerProps, + MobileDateTimeRangePickerProps { /** * CSS media query when `Mobile` mode will be changed to `Desktop`. * @default '@media (pointer: fine)' @@ -39,32 +39,30 @@ export interface DateTimeRangePickerProps< * Overridable component slots. * @default {} */ - slots?: DateTimeRangePickerSlots; + slots?: DateTimeRangePickerSlots; /** * The props used for each component slot. * @default {} */ - slotProps?: DateTimeRangePickerSlotProps; + slotProps?: DateTimeRangePickerSlotProps; } /** * Props the field can receive when used inside a `DateTimeRangePicker`, `DesktopDateTimeRangePicker` or `MobileDateTimeRangePicker` component. */ export type DateTimeRangePickerFieldProps< - TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = true, > = MakeRequired< - UseDateTimeRangeFieldProps, + UseDateTimeRangeFieldProps, | 'format' | 'timezone' | 'value' | 'ampm' - | keyof BaseDateValidationProps + | keyof BaseDateValidationProps | keyof BaseTimeValidationProps > & BaseSingleInputFieldProps< - DateRange, - TDate, + PickerRangeValue, RangeFieldSection, false, DateTimeRangeValidationError diff --git a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerTabs.tsx b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerTabs.tsx index 60e1a9f533f2..dac5929e2567 100644 --- a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerTabs.tsx +++ b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerTabs.tsx @@ -6,7 +6,6 @@ import { styled, useThemeProps } from '@mui/material/styles'; import composeClasses from '@mui/utils/composeClasses'; import useEventCallback from '@mui/utils/useEventCallback'; import { TimeIcon, DateRangeIcon, ArrowLeftIcon, ArrowRightIcon } from '@mui/x-date-pickers/icons'; -import { PickerValidDate } from '@mui/x-date-pickers/models'; import { DateOrTimeViewWithMeridiem, BaseTabsProps, @@ -108,7 +107,7 @@ const DateTimeRangePickerTabFiller = styled('div', { const tabOptions: TabValue[] = ['start-date', 'start-time', 'end-date', 'end-time']; -const DateTimeRangePickerTabs = function DateTimeRangePickerTabs( +const DateTimeRangePickerTabs = function DateTimeRangePickerTabs( inProps: DateTimeRangePickerTabsProps, ) { const props = useThemeProps({ props: inProps, name: 'MuiDateTimeRangePickerTabs' }); @@ -124,7 +123,7 @@ const DateTimeRangePickerTabs = function DateTimeRangePickerTabs(); + const translations = usePickersTranslations(); const classes = useUtilityClasses(props); const value = React.useMemo(() => viewToTab(view, rangePosition), [view, rangePosition]); const isPreviousHidden = value === 'start-date'; diff --git a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerTimeWrapper.tsx b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerTimeWrapper.tsx index c37429a3e3bc..653a818b33b6 100644 --- a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerTimeWrapper.tsx +++ b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerTimeWrapper.tsx @@ -7,18 +7,17 @@ import { useUtils, TimeViewWithMeridiem, BaseClockProps, + PickerRangeValue, } from '@mui/x-date-pickers/internals'; import { PickerValidDate } from '@mui/x-date-pickers/models'; -import { DateRange } from '../models'; import { UseRangePositionResponse } from '../internals/hooks/useRangePosition'; import { isRangeValid } from '../internals/utils/date-utils'; import { calculateRangeChange } from '../internals/utils/date-range-manager'; export type DateTimeRangePickerTimeWrapperProps< - TDate extends PickerValidDate, TView extends TimeViewWithMeridiem, TComponentProps extends DefaultizedProps< - Omit, 'value' | 'defaultValue' | 'onChange'>, + Omit, 'value' | 'defaultValue' | 'onChange'>, 'views' >, > = Pick & @@ -29,14 +28,14 @@ export type DateTimeRangePickerTimeWrapperProps< view: TView; onViewChange?: (view: TView) => void; views: readonly TView[]; - value?: DateRange; - defaultValue?: DateRange; + value?: PickerRangeValue; + defaultValue?: PickerRangeValue; onChange?: ( - value: DateRange, + value: PickerRangeValue, selectionState: PickerSelectionState, selectedView: TView, ) => void; - viewRenderer?: PickerViewRenderer, TView, TComponentProps, any> | null; + viewRenderer?: PickerViewRenderer | null; openTo?: TView; }; @@ -44,17 +43,16 @@ export type DateTimeRangePickerTimeWrapperProps< * @ignore - internal component. */ function DateTimeRangePickerTimeWrapper< - TDate extends PickerValidDate, TView extends TimeViewWithMeridiem, TComponentProps extends DefaultizedProps< - Omit, 'value' | 'defaultValue' | 'onChange'>, + Omit, 'value' | 'defaultValue' | 'onChange'>, 'views' >, >( - props: DateTimeRangePickerTimeWrapperProps, + props: DateTimeRangePickerTimeWrapperProps, ref: React.Ref, ) { - const utils = useUtils(); + const utils = useUtils(); const { rangePosition, @@ -77,7 +75,7 @@ function DateTimeRangePickerTimeWrapper< const currentDefaultValue = (rangePosition === 'start' ? defaultValue?.[0] : defaultValue?.[1]) ?? null; const handleOnChange = ( - newDate: TDate | null, + newDate: PickerValidDate | null, selectionState: PickerSelectionState, selectedView: TView, ) => { diff --git a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerToolbar.tsx b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerToolbar.tsx index 7ae6e7853319..cb78335558ed 100644 --- a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerToolbar.tsx +++ b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerToolbar.tsx @@ -10,6 +10,7 @@ import { useUtils, DateOrTimeViewWithMeridiem, WrapperVariant, + PickerRangeValue, } from '@mui/x-date-pickers/internals'; import { usePickersTranslations } from '@mui/x-date-pickers/hooks'; import { PickerValidDate } from '@mui/x-date-pickers/models'; @@ -17,7 +18,6 @@ import { DateTimePickerToolbarProps, DateTimePickerToolbar, } from '@mui/x-date-pickers/DateTimePicker'; -import { DateRange } from '../models'; import { UseRangePositionResponse } from '../internals/hooks/useRangePosition'; import { DateTimeRangePickerToolbarClasses, @@ -25,7 +25,7 @@ import { } from './dateTimeRangePickerToolbarClasses'; import { calculateRangeChange } from '../internals/utils/date-range-manager'; -const useUtilityClasses = (ownerState: DateTimeRangePickerToolbarProps) => { +const useUtilityClasses = (ownerState: DateTimeRangePickerToolbarProps) => { const { classes } = ownerState; const slots = { root: ['root'], @@ -38,8 +38,8 @@ const useUtilityClasses = (ownerState: DateTimeRangePickerToolbarProps) => type DateTimeRangeViews = Exclude; -export interface DateTimeRangePickerToolbarProps - extends BaseToolbarProps, DateTimeRangeViews>, +export interface DateTimeRangePickerToolbarProps + extends BaseToolbarProps, Pick, ExportedDateTimeRangePickerToolbarProps { ampm?: boolean; @@ -58,30 +58,29 @@ const DateTimeRangePickerToolbarRoot = styled('div', { slot: 'Root', overridesResolver: (_, styles) => styles.root, })<{ - ownerState: DateTimeRangePickerToolbarProps; + ownerState: DateTimeRangePickerToolbarProps; }>({ display: 'flex', flexDirection: 'column', }); -type DateTimeRangePickerStartOrEndToolbarProps = - DateTimePickerToolbarProps & { - ownerState?: DateTimeRangePickerToolbarProps; - }; +type DateTimeRangePickerStartOrEndToolbarProps = DateTimePickerToolbarProps & { + ownerState?: DateTimeRangePickerToolbarProps; +}; -type DateTimeRangePickerStartOrEndToolbarComponent = ( - props: DateTimeRangePickerStartOrEndToolbarProps, +type DateTimeRangePickerStartOrEndToolbarComponent = ( + props: DateTimeRangePickerStartOrEndToolbarProps, ) => React.JSX.Element; const DateTimeRangePickerToolbarStart = styled(DateTimePickerToolbar, { name: 'MuiDateTimeRangePickerToolbar', slot: 'StartToolbar', overridesResolver: (_, styles) => styles.startToolbar, -})>({ +})({ borderBottom: 'none', variants: [ { - props: ({ toolbarVariant }: DateTimeRangePickerStartOrEndToolbarProps) => + props: ({ toolbarVariant }: DateTimeRangePickerStartOrEndToolbarProps) => toolbarVariant !== 'desktop', style: { padding: '12px 8px 0 12px', @@ -100,10 +99,10 @@ const DateTimeRangePickerToolbarEnd = styled(DateTimePickerToolbar, { name: 'MuiDateTimeRangePickerToolbar', slot: 'EndToolbar', overridesResolver: (_, styles) => styles.endToolbar, -})>({ +})({ variants: [ { - props: ({ toolbarVariant }: DateTimeRangePickerStartOrEndToolbarProps) => + props: ({ toolbarVariant }: DateTimeRangePickerStartOrEndToolbarProps) => toolbarVariant !== 'desktop', style: { padding: '12px 8px 12px 12px', @@ -112,15 +111,16 @@ const DateTimeRangePickerToolbarEnd = styled(DateTimePickerToolbar, { ], }) as DateTimeRangePickerStartOrEndToolbarComponent; -type DateTimeRangePickerToolbarComponent = (( - props: DateTimeRangePickerToolbarProps & React.RefAttributes, +type DateTimeRangePickerToolbarComponent = (( + props: DateTimeRangePickerToolbarProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; -const DateTimeRangePickerToolbar = React.forwardRef(function DateTimeRangePickerToolbar< - TDate extends PickerValidDate, ->(inProps: DateTimeRangePickerToolbarProps, ref: React.Ref) { +const DateTimeRangePickerToolbar = React.forwardRef(function DateTimeRangePickerToolbar( + inProps: DateTimeRangePickerToolbarProps, + ref: React.Ref, +) { const props = useThemeProps({ props: inProps, name: 'MuiDateTimeRangePickerToolbar' }); - const utils = useUtils(); + const utils = useUtils(); const { value: [start, end], @@ -156,7 +156,7 @@ const DateTimeRangePickerToolbar = React.forwardRef(function DateTimeRangePicker toolbarPlaceholder, }; - const translations = usePickersTranslations(); + const translations = usePickersTranslations(); const ownerState = props; const classes = useUtilityClasses(ownerState); @@ -188,7 +188,7 @@ const DateTimeRangePickerToolbar = React.forwardRef(function DateTimeRangePicker ); const handleOnChange = React.useCallback( - (newDate: TDate | null) => { + (newDate: PickerValidDate | null) => { const { nextSelection, newRange } = calculateRangeChange({ newDate, utils, @@ -214,7 +214,7 @@ const DateTimeRangePickerToolbar = React.forwardRef(function DateTimeRangePicker sx={sx} {...other} > - + - + - extends DateRangeCalendarSlots, +export interface BaseDateTimeRangePickerSlots + extends DateRangeCalendarSlots, DigitalClockSlots, MultiSectionDigitalClockSlots { /** @@ -57,11 +57,11 @@ export interface BaseDateTimeRangePickerSlots * Custom component for the toolbar rendered above the views. * @default DateTimeRangePickerToolbar */ - toolbar?: React.JSXElementConstructor>; + toolbar?: React.JSXElementConstructor; } -export interface BaseDateTimeRangePickerSlotProps - extends DateRangeCalendarSlotProps, +export interface BaseDateTimeRangePickerSlotProps + extends DateRangeCalendarSlotProps, DigitalClockSlotProps, MultiSectionDigitalClockSlotProps { /** @@ -75,71 +75,63 @@ export interface BaseDateTimeRangePickerSlotProps } export type DateTimeRangePickerRenderers< - TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TAdditionalProps extends {} = {}, > = PickerViewRendererLookup< - DateRange, + PickerRangeValue, TView, - Omit, 'view' | 'slots' | 'slotProps'> & + Omit, 'view' | 'slots' | 'slotProps'> & Omit< - TimeViewRendererProps>, + TimeViewRendererProps>, 'view' | 'slots' | 'slotProps' > & { view: TView }, TAdditionalProps >; -export interface BaseDateTimeRangePickerProps +export interface BaseDateTimeRangePickerProps extends Omit< - BasePickerInputProps< - DateRange, - TDate, - DateTimeRangePickerView, - DateTimeRangeValidationError - >, + BasePickerInputProps, 'orientation' | 'views' | 'openTo' >, - ExportedDateRangeCalendarProps, - BaseDateValidationProps, - DesktopOnlyTimePickerProps, + ExportedDateRangeCalendarProps, + BaseDateValidationProps, + DesktopOnlyTimePickerProps, Partial< - Pick, DateTimeRangePickerViewExternal>, 'openTo' | 'views'> + Pick, 'openTo' | 'views'> >, - DateTimeValidationProps { + DateTimeValidationProps { /** * Overridable component slots. * @default {} */ - slots?: BaseDateTimeRangePickerSlots; + slots?: BaseDateTimeRangePickerSlots; /** * The props used for each component slot. * @default {} */ - slotProps?: BaseDateTimeRangePickerSlotProps; + slotProps?: BaseDateTimeRangePickerSlotProps; /** * Define custom view renderers for each section. * If `null`, the section will only have field editing. * If `undefined`, internally defined view will be used. */ - viewRenderers?: Partial>; + viewRenderers?: Partial>; } -type UseDateTimeRangePickerDefaultizedProps< - TDate extends PickerValidDate, - Props extends BaseDateTimeRangePickerProps, -> = LocalizedComponent< - Omit>, 'views'> -> & { - shouldRenderTimeInASingleColumn: boolean; - views: readonly DateTimeRangePickerView[]; -}; +type UseDateTimeRangePickerDefaultizedProps = + LocalizedComponent< + Omit, 'views'> + > & { + shouldRenderTimeInASingleColumn: boolean; + views: readonly DateTimeRangePickerView[]; + }; -export function useDateTimeRangePickerDefaultizedProps< - TDate extends PickerValidDate, - Props extends BaseDateTimeRangePickerProps, ->(props: Props, name: string): UseDateTimeRangePickerDefaultizedProps { - const utils = useUtils(); - const defaultDates = useDefaultDates(); +export function useDateTimeRangePickerDefaultizedProps( + props: Props, + name: string, +): UseDateTimeRangePickerDefaultizedProps { + const utils = useUtils(); + const defaultDates = useDefaultDates(); const themeProps = useThemeProps({ props, name, @@ -157,7 +149,7 @@ export function useDateTimeRangePickerDefaultizedProps< thresholdToRenderTimeInASingleColumn, views, timeSteps, - } = resolveTimeViewsResponse({ + } = resolveTimeViewsResponse({ thresholdToRenderTimeInASingleColumn: themeProps.thresholdToRenderTimeInASingleColumn, ampm, timeSteps: themeProps.timeSteps, diff --git a/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.tsx b/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.tsx index a395e353576e..ce29eb7a0e8f 100644 --- a/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.tsx @@ -1,9 +1,13 @@ 'use client'; import * as React from 'react'; import PropTypes from 'prop-types'; -import { PickerViewRendererLookup, useUtils } from '@mui/x-date-pickers/internals'; +import { + PickerViewRendererLookup, + useUtils, + PickerRangeValue, +} from '@mui/x-date-pickers/internals'; import { extractValidationProps } from '@mui/x-date-pickers/validation'; -import { PickerOwnerState, PickerValidDate } from '@mui/x-date-pickers/models'; +import { PickerOwnerState } from '@mui/x-date-pickers/models'; import resolveComponentProps from '@mui/utils/resolveComponentProps'; import { refType } from '@mui/utils'; import { rangeValueManager } from '../internals/utils/valueManagers'; @@ -13,13 +17,9 @@ import { renderDateRangeViewCalendar } from '../dateRangeViewRenderers'; import { MultiInputDateRangeField } from '../MultiInputDateRangeField'; import { useDesktopRangePicker } from '../internals/hooks/useDesktopRangePicker'; import { validateDateRange } from '../validation'; -import { DateRange } from '../models'; -type DesktopDateRangePickerComponent = (< - TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = true, ->( - props: DesktopDateRangePickerProps & +type DesktopDateRangePickerComponent = (( + props: DesktopDateRangePickerProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; @@ -34,21 +34,19 @@ type DesktopDateRangePickerComponent = (< * - [DesktopDateRangePicker API](https://mui.com/x/api/date-pickers/desktop-date-range-picker/) */ const DesktopDateRangePicker = React.forwardRef(function DesktopDateRangePicker< - TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = true, >( - inProps: DesktopDateRangePickerProps, + inProps: DesktopDateRangePickerProps, ref: React.Ref, ) { - const utils = useUtils(); + const utils = useUtils(); // Props with the default values common to all date time pickers const defaultizedProps = useDateRangePickerDefaultizedProps< - TDate, - DesktopDateRangePickerProps + DesktopDateRangePickerProps >(inProps, 'MuiDesktopDateRangePicker'); - const viewRenderers: PickerViewRendererLookup, 'day', any, {}> = { + const viewRenderers: PickerViewRendererLookup = { day: renderDateRangeViewCalendar, ...defaultizedProps.viewRenderers, }; @@ -79,7 +77,6 @@ const DesktopDateRangePicker = React.forwardRef(function DesktopDateRangePicker< }; const { renderPicker } = useDesktopRangePicker< - TDate, 'day', TEnableAccessibleFieldDOMStructure, typeof props @@ -123,9 +120,9 @@ DesktopDateRangePicker.propTypes = { currentMonthCalendarPosition: PropTypes.oneOf([1, 2, 3]), /** * Formats the day of week displayed in the calendar header. - * @param {TDate} date The date of the day of week provided by the adapter. + * @param {PickerValidDate} date The date of the day of week provided by the adapter. * @returns {string} The name to display. - * @default (date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase() + * @default (date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase() */ dayOfWeekFormatter: PropTypes.func, /** @@ -267,8 +264,7 @@ DesktopDateRangePicker.propTypes = { onError: PropTypes.func, /** * Callback fired on month change. - * @template TDate - * @param {TDate} month The new month. + * @param {PickerValidDate} month The new month. */ onMonthChange: PropTypes.func, /** @@ -342,8 +338,7 @@ DesktopDateRangePicker.propTypes = { * * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance. * - * @template TDate - * @param {TDate} day The date to test. + * @param {PickerValidDate} day The date to test. * @param {string} position The date to test, 'start' or 'end'. * @returns {boolean} Returns `true` if the date should be disabled. */ diff --git a/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.types.ts b/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.types.ts index fc13a15c86b6..5b238ebbf61d 100644 --- a/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.types.ts +++ b/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.types.ts @@ -1,5 +1,4 @@ import { MakeOptional } from '@mui/x-internals/types'; -import { PickerValidDate } from '@mui/x-date-pickers/models'; import { UseDesktopRangePickerSlots, UseDesktopRangePickerSlotProps, @@ -11,23 +10,20 @@ import { BaseDateRangePickerSlotProps, } from '../DateRangePicker/shared'; -export interface DesktopDateRangePickerSlots - extends BaseDateRangePickerSlots, - MakeOptional, 'field'> {} +export interface DesktopDateRangePickerSlots + extends BaseDateRangePickerSlots, + MakeOptional, 'field'> {} -export interface DesktopDateRangePickerSlotProps< - TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean, -> extends BaseDateRangePickerSlotProps, +export interface DesktopDateRangePickerSlotProps + extends BaseDateRangePickerSlotProps, Omit< - UseDesktopRangePickerSlotProps, + UseDesktopRangePickerSlotProps<'day', TEnableAccessibleFieldDOMStructure>, 'tabs' | 'toolbar' > {} export interface DesktopDateRangePickerProps< - TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = true, -> extends BaseDateRangePickerProps, +> extends BaseDateRangePickerProps, DesktopRangeOnlyPickerProps { /** * The number of calendars to render on **desktop**. @@ -38,10 +34,10 @@ export interface DesktopDateRangePickerProps< * Overridable component slots. * @default {} */ - slots?: DesktopDateRangePickerSlots; + slots?: DesktopDateRangePickerSlots; /** * The props used for each component slot. * @default {} */ - slotProps?: DesktopDateRangePickerSlotProps; + slotProps?: DesktopDateRangePickerSlotProps; } diff --git a/packages/x-date-pickers-pro/src/DesktopDateRangePicker/tests/DesktopDateRangePicker.test.tsx b/packages/x-date-pickers-pro/src/DesktopDateRangePicker/tests/DesktopDateRangePicker.test.tsx index 7febfb5df6bb..807b5511d78a 100644 --- a/packages/x-date-pickers-pro/src/DesktopDateRangePicker/tests/DesktopDateRangePicker.test.tsx +++ b/packages/x-date-pickers-pro/src/DesktopDateRangePicker/tests/DesktopDateRangePicker.test.tsx @@ -6,6 +6,7 @@ import { createTheme, ThemeProvider } from '@mui/material/styles'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { DesktopDateRangePicker } from '@mui/x-date-pickers-pro/DesktopDateRangePicker'; import { DateRange } from '@mui/x-date-pickers-pro/models'; +import { PickerValidDate } from '@mui/x-date-pickers/models'; import { SingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField'; import { createPickerRenderer, @@ -220,7 +221,7 @@ describe('', () => { const onChange = spy(); const onAccept = spy(); const onClose = spy(); - const defaultValue: DateRange = [ + const defaultValue: DateRange = [ adapterToUse.date('2018-01-01'), adapterToUse.date('2018-01-06'), ]; @@ -262,7 +263,7 @@ describe('', () => { const onChange = spy(); const onAccept = spy(); const onClose = spy(); - const defaultValue: DateRange = [ + const defaultValue: DateRange = [ adapterToUse.date('2018-01-01'), adapterToUse.date('2018-01-06'), ]; @@ -296,7 +297,7 @@ describe('', () => { it('should not call onClose and onAccept when selecting the end date if props.closeOnSelect = false', () => { const onAccept = spy(); const onClose = spy(); - const defaultValue: DateRange = [ + const defaultValue: DateRange = [ adapterToUse.date('2018-01-01'), adapterToUse.date('2018-01-06'), ]; @@ -323,7 +324,7 @@ describe('', () => { const onChange = spy(); const onAccept = spy(); const onClose = spy(); - const defaultValue: DateRange = [ + const defaultValue: DateRange = [ adapterToUse.date('2018-01-01'), adapterToUse.date('2018-01-06'), ]; @@ -385,7 +386,7 @@ describe('', () => { const onChange = spy(); const onAccept = spy(); const onClose = spy(); - const defaultValue: DateRange = [ + const defaultValue: DateRange = [ adapterToUse.date('2018-01-01'), adapterToUse.date('2018-01-06'), ]; @@ -475,7 +476,7 @@ describe('', () => { const onChange = spy(); const onAccept = spy(); const onClose = spy(); - const defaultValue: DateRange = [ + const defaultValue: DateRange = [ adapterToUse.date('2018-01-01'), adapterToUse.date('2018-01-06'), ]; @@ -515,7 +516,7 @@ describe('', () => { const onChange = spy(); const onAccept = spy(); const onClose = spy(); - const defaultValue: DateRange = [ + const defaultValue: DateRange = [ adapterToUse.date('2018-01-01'), adapterToUse.date('2018-01-06'), ]; diff --git a/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.tsx b/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.tsx index 098456e7a1ad..e40fc1df38fe 100644 --- a/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.tsx @@ -9,9 +9,10 @@ import { PickerViewsRendererProps, resolveDateTimeFormat, useUtils, + PickerRangeValue, } from '@mui/x-date-pickers/internals'; import { extractValidationProps } from '@mui/x-date-pickers/validation'; -import { PickerOwnerState, PickerValidDate } from '@mui/x-date-pickers/models'; +import { PickerOwnerState } from '@mui/x-date-pickers/models'; import { PickersLayoutOwnerState } from '@mui/x-date-pickers/PickersLayout'; import resolveComponentProps from '@mui/utils/resolveComponentProps'; import { refType } from '@mui/utils'; @@ -36,7 +37,6 @@ import { } from '../internals/hooks/useDesktopRangePicker'; import { validateDateTimeRange } from '../validation'; import { DateTimeRangePickerView } from '../internals/models'; -import { DateRange } from '../models'; import { DateTimeRangePickerRenderers, useDateTimeRangePickerDefaultizedProps, @@ -46,18 +46,16 @@ import { DateTimeRangePickerTimeWrapper } from '../DateTimeRangePicker/DateTimeR import { RANGE_VIEW_HEIGHT } from '../internals/constants/dimensions'; const rendererInterceptor = function rendererInterceptor< - TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean, >( - inViewRenderers: DateTimeRangePickerRenderers, + inViewRenderers: DateTimeRangePickerRenderers, popperView: DateTimeRangePickerView, rendererProps: PickerViewsRendererProps< - DateRange, + PickerRangeValue, DateTimeRangePickerView, DefaultizedProps< Omit< UseDesktopRangePickerProps< - TDate, DateTimeRangePickerView, TEnableAccessibleFieldDOMStructure, any, @@ -105,7 +103,7 @@ const rendererInterceptor = function rendererInterceptor< openTo={isInternalTimeView(openTo) ? openTo : 'hours'} viewRenderer={ inViewRenderers[isTimeViewActive ? popperView : 'hours'] as PickerViewRenderer< - DateRange, + PickerRangeValue, DateTimeRangePickerView, any, {} @@ -117,11 +115,8 @@ const rendererInterceptor = function rendererInterceptor< ); }; -type DesktopDateRangePickerComponent = (< - TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = true, ->( - props: DesktopDateTimeRangePickerProps & +type DesktopDateRangePickerComponent = (( + props: DesktopDateTimeRangePickerProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; @@ -136,24 +131,22 @@ type DesktopDateRangePickerComponent = (< * - [DesktopDateTimeRangePicker API](https://mui.com/x/api/date-pickers/desktop-date-time-range-picker/) */ const DesktopDateTimeRangePicker = React.forwardRef(function DesktopDateTimeRangePicker< - TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = true, >( - inProps: DesktopDateTimeRangePickerProps, + inProps: DesktopDateTimeRangePickerProps, ref: React.Ref, ) { - const utils = useUtils(); + const utils = useUtils(); // Props with the default values common to all date time range pickers const defaultizedProps = useDateTimeRangePickerDefaultizedProps< - TDate, - DesktopDateTimeRangePickerProps + DesktopDateTimeRangePickerProps >(inProps, 'MuiDesktopDateTimeRangePicker'); const renderTimeView = defaultizedProps.shouldRenderTimeInASingleColumn ? renderDigitalClockTimeView : renderMultiSectionDigitalClockTimeView; - const viewRenderers: DateTimeRangePickerRenderers = { + const viewRenderers: DateTimeRangePickerRenderers = { day: renderDateRangeViewCalendar, hours: renderTimeView, minutes: renderTimeView, @@ -208,7 +201,6 @@ const DesktopDateTimeRangePicker = React.forwardRef(function DesktopDateTimeRang }; const { renderPicker } = useDesktopRangePicker< - TDate, DateTimeRangePickerView, TEnableAccessibleFieldDOMStructure, typeof props @@ -258,9 +250,9 @@ DesktopDateTimeRangePicker.propTypes = { currentMonthCalendarPosition: PropTypes.oneOf([1, 2, 3]), /** * Formats the day of week displayed in the calendar header. - * @param {TDate} date The date of the day of week provided by the adapter. + * @param {PickerValidDate} date The date of the day of week provided by the adapter. * @returns {string} The name to display. - * @default (date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase() + * @default (date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase() */ dayOfWeekFormatter: PropTypes.func, /** @@ -430,8 +422,7 @@ DesktopDateTimeRangePicker.propTypes = { onError: PropTypes.func, /** * Callback fired on month change. - * @template TDate - * @param {TDate} month The new month. + * @param {PickerValidDate} month The new month. */ onMonthChange: PropTypes.func, /** @@ -517,16 +508,14 @@ DesktopDateTimeRangePicker.propTypes = { * * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance. * - * @template TDate - * @param {TDate} day The date to test. + * @param {PickerValidDate} day The date to test. * @param {string} position The date to test, 'start' or 'end'. * @returns {boolean} Returns `true` if the date should be disabled. */ shouldDisableDate: PropTypes.func, /** * Disable specific time. - * @template TDate - * @param {TDate} value The value to check. + * @param {PickerValidDate} value The value to check. * @param {TimeView} view The clock type of the timeValue. * @returns {boolean} If `true` the time will be disabled. */ diff --git a/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.types.ts b/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.types.ts index 08dbe49484f2..0cd82589c67b 100644 --- a/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.types.ts +++ b/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.types.ts @@ -1,5 +1,4 @@ import { MakeOptional } from '@mui/x-internals/types'; -import { PickerValidDate } from '@mui/x-date-pickers/models'; import { UseDesktopRangePickerSlots, UseDesktopRangePickerSlotProps, @@ -12,27 +11,21 @@ import { } from '../DateTimeRangePicker/shared'; import { DateTimeRangePickerView } from '../internals/models'; -export interface DesktopDateTimeRangePickerSlots - extends BaseDateTimeRangePickerSlots, - MakeOptional, 'field'> {} +export interface DesktopDateTimeRangePickerSlots + extends BaseDateTimeRangePickerSlots, + MakeOptional, 'field'> {} export interface DesktopDateTimeRangePickerSlotProps< - TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean, -> extends BaseDateTimeRangePickerSlotProps, +> extends BaseDateTimeRangePickerSlotProps, Omit< - UseDesktopRangePickerSlotProps< - TDate, - DateTimeRangePickerView, - TEnableAccessibleFieldDOMStructure - >, + UseDesktopRangePickerSlotProps, 'tabs' | 'toolbar' > {} export interface DesktopDateTimeRangePickerProps< - TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = true, -> extends BaseDateTimeRangePickerProps, +> extends BaseDateTimeRangePickerProps, DesktopRangeOnlyPickerProps { /** * The number of calendars to render on **desktop**. @@ -43,10 +36,10 @@ export interface DesktopDateTimeRangePickerProps< * Overridable component slots. * @default {} */ - slots?: DesktopDateTimeRangePickerSlots; + slots?: DesktopDateTimeRangePickerSlots; /** * The props used for each component slot. * @default {} */ - slotProps?: DesktopDateTimeRangePickerSlotProps; + slotProps?: DesktopDateTimeRangePickerSlotProps; } diff --git a/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.tsx b/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.tsx index 712683c2ef7a..63694b969229 100644 --- a/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.tsx @@ -1,9 +1,13 @@ 'use client'; import * as React from 'react'; import PropTypes from 'prop-types'; -import { PickerViewRendererLookup, useUtils } from '@mui/x-date-pickers/internals'; +import { + PickerViewRendererLookup, + useUtils, + PickerRangeValue, +} from '@mui/x-date-pickers/internals'; import { extractValidationProps } from '@mui/x-date-pickers/validation'; -import { PickerOwnerState, PickerValidDate } from '@mui/x-date-pickers/models'; +import { PickerOwnerState } from '@mui/x-date-pickers/models'; import resolveComponentProps from '@mui/utils/resolveComponentProps'; import { refType } from '@mui/utils'; import { rangeValueManager } from '../internals/utils/valueManagers'; @@ -13,13 +17,9 @@ import { renderDateRangeViewCalendar } from '../dateRangeViewRenderers'; import { MultiInputDateRangeField } from '../MultiInputDateRangeField'; import { useMobileRangePicker } from '../internals/hooks/useMobileRangePicker'; import { validateDateRange } from '../validation'; -import { DateRange } from '../models'; -type MobileDateRangePickerComponent = (< - TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = true, ->( - props: MobileDateRangePickerProps & +type MobileDateRangePickerComponent = (( + props: MobileDateRangePickerProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; @@ -34,21 +34,19 @@ type MobileDateRangePickerComponent = (< * - [MobileDateRangePicker API](https://mui.com/x/api/date-pickers/mobile-date-range-picker/) */ const MobileDateRangePicker = React.forwardRef(function MobileDateRangePicker< - TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = true, >( - inProps: MobileDateRangePickerProps, + inProps: MobileDateRangePickerProps, ref: React.Ref, ) { - const utils = useUtils(); + const utils = useUtils(); // Props with the default values common to all date time pickers const defaultizedProps = useDateRangePickerDefaultizedProps< - TDate, - MobileDateRangePickerProps + MobileDateRangePickerProps >(inProps, 'MuiMobileDateRangePicker'); - const viewRenderers: PickerViewRendererLookup, 'day', any, {}> = { + const viewRenderers: PickerViewRendererLookup = { day: renderDateRangeViewCalendar, ...defaultizedProps.viewRenderers, }; @@ -80,7 +78,6 @@ const MobileDateRangePicker = React.forwardRef(function MobileDateRangePicker< }; const { renderPicker } = useMobileRangePicker< - TDate, 'day', TEnableAccessibleFieldDOMStructure, typeof props @@ -119,9 +116,9 @@ MobileDateRangePicker.propTypes = { currentMonthCalendarPosition: PropTypes.oneOf([1, 2, 3]), /** * Formats the day of week displayed in the calendar header. - * @param {TDate} date The date of the day of week provided by the adapter. + * @param {PickerValidDate} date The date of the day of week provided by the adapter. * @returns {string} The name to display. - * @default (date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase() + * @default (date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase() */ dayOfWeekFormatter: PropTypes.func, /** @@ -263,8 +260,7 @@ MobileDateRangePicker.propTypes = { onError: PropTypes.func, /** * Callback fired on month change. - * @template TDate - * @param {TDate} month The new month. + * @param {PickerValidDate} month The new month. */ onMonthChange: PropTypes.func, /** @@ -338,8 +334,7 @@ MobileDateRangePicker.propTypes = { * * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance. * - * @template TDate - * @param {TDate} day The date to test. + * @param {PickerValidDate} day The date to test. * @param {string} position The date to test, 'start' or 'end'. * @returns {boolean} Returns `true` if the date should be disabled. */ diff --git a/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.types.ts b/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.types.ts index 7422759aadd8..567a57d4495c 100644 --- a/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.types.ts +++ b/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.types.ts @@ -1,5 +1,4 @@ import { MakeOptional } from '@mui/x-internals/types'; -import { PickerValidDate } from '@mui/x-date-pickers/models'; import { UseMobileRangePickerSlots, UseMobileRangePickerSlotProps, @@ -11,32 +10,29 @@ import { BaseDateRangePickerSlotProps, } from '../DateRangePicker/shared'; -export interface MobileDateRangePickerSlots - extends BaseDateRangePickerSlots, - MakeOptional, 'field'> {} +export interface MobileDateRangePickerSlots + extends BaseDateRangePickerSlots, + MakeOptional, 'field'> {} -export interface MobileDateRangePickerSlotProps< - TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean, -> extends BaseDateRangePickerSlotProps, +export interface MobileDateRangePickerSlotProps + extends BaseDateRangePickerSlotProps, Omit< - UseMobileRangePickerSlotProps, + UseMobileRangePickerSlotProps<'day', TEnableAccessibleFieldDOMStructure>, 'tabs' | 'toolbar' > {} export interface MobileDateRangePickerProps< - TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = true, -> extends BaseDateRangePickerProps, +> extends BaseDateRangePickerProps, MobileRangeOnlyPickerProps { /** * Overridable component slots. * @default {} */ - slots?: MobileDateRangePickerSlots; + slots?: MobileDateRangePickerSlots; /** * The props used for each component slot. * @default {} */ - slotProps?: MobileDateRangePickerSlotProps; + slotProps?: MobileDateRangePickerSlotProps; } diff --git a/packages/x-date-pickers-pro/src/MobileDateRangePicker/tests/MobileDateRangePicker.test.tsx b/packages/x-date-pickers-pro/src/MobileDateRangePicker/tests/MobileDateRangePicker.test.tsx index 795ff256ed4f..83fee1c9814b 100644 --- a/packages/x-date-pickers-pro/src/MobileDateRangePicker/tests/MobileDateRangePicker.test.tsx +++ b/packages/x-date-pickers-pro/src/MobileDateRangePicker/tests/MobileDateRangePicker.test.tsx @@ -10,6 +10,7 @@ import { getFieldSectionsContainer, } from 'test/utils/pickers'; import { DateRange } from '@mui/x-date-pickers-pro/models'; +import { PickerValidDate } from '@mui/x-date-pickers/models'; import { SingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField'; describe('', () => { @@ -64,7 +65,7 @@ describe('', () => { const onChange = spy(); const onAccept = spy(); const onClose = spy(); - const defaultValue: DateRange = [ + const defaultValue: DateRange = [ adapterToUse.date('2018-01-01'), adapterToUse.date('2018-01-06'), ]; @@ -104,7 +105,7 @@ describe('', () => { const onChange = spy(); const onAccept = spy(); const onClose = spy(); - const defaultValue: DateRange = [ + const defaultValue: DateRange = [ adapterToUse.date('2018-01-01'), adapterToUse.date('2018-01-06'), ]; @@ -136,7 +137,7 @@ describe('', () => { it('should call onClose and onAccept when selecting the end date if props.closeOnSelect = true', () => { const onAccept = spy(); const onClose = spy(); - const defaultValue: DateRange = [ + const defaultValue: DateRange = [ adapterToUse.date('2018-01-01'), adapterToUse.date('2018-01-06'), ]; @@ -165,7 +166,7 @@ describe('', () => { const onChange = spy(); const onAccept = spy(); const onClose = spy(); - const defaultValue: DateRange = [ + const defaultValue: DateRange = [ adapterToUse.date('2018-01-01'), adapterToUse.date('2018-01-06'), ]; @@ -198,7 +199,7 @@ describe('', () => { const onChange = spy(); const onAccept = spy(); const onClose = spy(); - const defaultValue: DateRange = [ + const defaultValue: DateRange = [ adapterToUse.date('2018-01-01'), adapterToUse.date('2018-01-06'), ]; @@ -230,7 +231,7 @@ describe('', () => { const onChange = spy(); const onAccept = spy(); const onClose = spy(); - const defaultValue: DateRange = [ + const defaultValue: DateRange = [ adapterToUse.date('2018-01-01'), adapterToUse.date('2018-01-06'), ]; diff --git a/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/MobileDateTimeRangePicker.tsx b/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/MobileDateTimeRangePicker.tsx index 6e5b4fe2d8cc..9ceb784539b2 100644 --- a/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/MobileDateTimeRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/MobileDateTimeRangePicker.tsx @@ -13,9 +13,10 @@ import { TimeViewWithMeridiem, resolveDateTimeFormat, useUtils, + PickerRangeValue, } from '@mui/x-date-pickers/internals'; import { extractValidationProps } from '@mui/x-date-pickers/validation'; -import { PickerOwnerState, PickerValidDate } from '@mui/x-date-pickers/models'; +import { PickerOwnerState } from '@mui/x-date-pickers/models'; import resolveComponentProps from '@mui/utils/resolveComponentProps'; import { renderDigitalClockTimeView, @@ -35,7 +36,6 @@ import { } from '../internals/hooks/useMobileRangePicker'; import { validateDateTimeRange } from '../validation'; import { DateTimeRangePickerView } from '../internals/models'; -import { DateRange } from '../models'; import { DateTimeRangePickerRenderers, useDateTimeRangePickerDefaultizedProps, @@ -45,17 +45,15 @@ import { DateTimeRangePickerTimeWrapper } from '../DateTimeRangePicker/DateTimeR import { RANGE_VIEW_HEIGHT } from '../internals/constants/dimensions'; const rendererInterceptor = function rendererInterceptor< - TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean, >( - inViewRenderers: DateTimeRangePickerRenderers, + inViewRenderers: DateTimeRangePickerRenderers, popperView: DateTimeRangePickerView, rendererProps: PickerViewsRendererProps< - DateRange, + PickerRangeValue, DateTimeRangePickerView, DefaultizedProps< UseMobileRangePickerProps< - TDate, DateTimeRangePickerView, TEnableAccessibleFieldDOMStructure, any, @@ -105,7 +103,7 @@ const rendererInterceptor = function rendererInterceptor< , TimeViewWithMeridiem, any, {}> + viewRenderer as PickerViewRenderer } view={view && isInternalTimeView(view) ? view : 'hours'} views={finalProps.views as TimeViewWithMeridiem[]} @@ -114,7 +112,7 @@ const rendererInterceptor = function rendererInterceptor< ); } // avoiding problem of `props: never` - const typedViewRenderer = viewRenderer as PickerViewRenderer, 'day', any, any>; + const typedViewRenderer = viewRenderer as PickerViewRenderer; return typedViewRenderer({ ...finalProps, @@ -125,11 +123,8 @@ const rendererInterceptor = function rendererInterceptor< }); }; -type MobileDateRangePickerComponent = (< - TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = true, ->( - props: MobileDateTimeRangePickerProps & +type MobileDateRangePickerComponent = (( + props: MobileDateTimeRangePickerProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; @@ -144,24 +139,22 @@ type MobileDateRangePickerComponent = (< * - [MobileDateTimeRangePicker API](https://mui.com/x/api/date-pickers/mobile-date-time-range-picker/) */ const MobileDateTimeRangePicker = React.forwardRef(function MobileDateTimeRangePicker< - TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = true, >( - inProps: MobileDateTimeRangePickerProps, + inProps: MobileDateTimeRangePickerProps, ref: React.Ref, ) { - const utils = useUtils(); + const utils = useUtils(); // Props with the default values common to all date time range pickers const defaultizedProps = useDateTimeRangePickerDefaultizedProps< - TDate, - MobileDateTimeRangePickerProps + MobileDateTimeRangePickerProps >(inProps, 'MuiMobileDateTimeRangePicker'); const renderTimeView = defaultizedProps.shouldRenderTimeInASingleColumn ? renderDigitalClockTimeView : renderMultiSectionDigitalClockTimeView; - const viewRenderers: DateTimeRangePickerRenderers = { + const viewRenderers: DateTimeRangePickerRenderers = { day: renderDateRangeViewCalendar, hours: renderTimeView, minutes: renderTimeView, @@ -202,7 +195,6 @@ const MobileDateTimeRangePicker = React.forwardRef(function MobileDateTimeRangeP }; const { renderPicker } = useMobileRangePicker< - TDate, DateTimeRangePickerView, TEnableAccessibleFieldDOMStructure, typeof props @@ -247,9 +239,9 @@ MobileDateTimeRangePicker.propTypes = { currentMonthCalendarPosition: PropTypes.oneOf([1, 2, 3]), /** * Formats the day of week displayed in the calendar header. - * @param {TDate} date The date of the day of week provided by the adapter. + * @param {PickerValidDate} date The date of the day of week provided by the adapter. * @returns {string} The name to display. - * @default (date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase() + * @default (date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase() */ dayOfWeekFormatter: PropTypes.func, /** @@ -419,8 +411,7 @@ MobileDateTimeRangePicker.propTypes = { onError: PropTypes.func, /** * Callback fired on month change. - * @template TDate - * @param {TDate} month The new month. + * @param {PickerValidDate} month The new month. */ onMonthChange: PropTypes.func, /** @@ -506,16 +497,14 @@ MobileDateTimeRangePicker.propTypes = { * * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance. * - * @template TDate - * @param {TDate} day The date to test. + * @param {PickerValidDate} day The date to test. * @param {string} position The date to test, 'start' or 'end'. * @returns {boolean} Returns `true` if the date should be disabled. */ shouldDisableDate: PropTypes.func, /** * Disable specific time. - * @template TDate - * @param {TDate} value The value to check. + * @param {PickerValidDate} value The value to check. * @param {TimeView} view The clock type of the timeValue. * @returns {boolean} If `true` the time will be disabled. */ diff --git a/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/MobileDateTimeRangePicker.types.ts b/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/MobileDateTimeRangePicker.types.ts index 1a8761c7b99a..4dd3305f8d9b 100644 --- a/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/MobileDateTimeRangePicker.types.ts +++ b/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/MobileDateTimeRangePicker.types.ts @@ -1,5 +1,4 @@ import { MakeOptional } from '@mui/x-internals/types'; -import { PickerValidDate } from '@mui/x-date-pickers/models'; import { UseMobileRangePickerSlots, UseMobileRangePickerSlotProps, @@ -12,36 +11,30 @@ import { } from '../DateTimeRangePicker/shared'; import { DateTimeRangePickerView } from '../internals/models'; -export interface MobileDateTimeRangePickerSlots - extends BaseDateTimeRangePickerSlots, - MakeOptional, 'field'> {} +export interface MobileDateTimeRangePickerSlots + extends BaseDateTimeRangePickerSlots, + MakeOptional, 'field'> {} export interface MobileDateTimeRangePickerSlotProps< - TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean, -> extends BaseDateTimeRangePickerSlotProps, +> extends BaseDateTimeRangePickerSlotProps, Omit< - UseMobileRangePickerSlotProps< - TDate, - DateTimeRangePickerView, - TEnableAccessibleFieldDOMStructure - >, + UseMobileRangePickerSlotProps, 'tabs' | 'toolbar' > {} export interface MobileDateTimeRangePickerProps< - TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = true, -> extends BaseDateTimeRangePickerProps, +> extends BaseDateTimeRangePickerProps, MobileRangeOnlyPickerProps { /** * Overridable component slots. * @default {} */ - slots?: MobileDateTimeRangePickerSlots; + slots?: MobileDateTimeRangePickerSlots; /** * The props used for each component slot. * @default {} */ - slotProps?: MobileDateTimeRangePickerSlotProps; + slotProps?: MobileDateTimeRangePickerSlotProps; } diff --git a/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx b/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx index cc6a93f9eec3..3c73332f550a 100644 --- a/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx +++ b/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx @@ -14,7 +14,6 @@ import { } from '@mui/utils'; import { convertFieldResponseIntoMuiTextFieldProps } from '@mui/x-date-pickers/internals'; import { useSplitFieldProps } from '@mui/x-date-pickers/hooks'; -import { PickerValidDate } from '@mui/x-date-pickers/models'; import { PickersTextField } from '@mui/x-date-pickers/PickersTextField'; import { MultiInputDateRangeFieldProps, @@ -31,7 +30,7 @@ export const multiInputDateRangeFieldClasses: MultiInputRangeFieldClasses = gene export const getMultiInputDateRangeFieldUtilityClass = (slot: string) => generateUtilityClass('MuiMultiInputDateRangeField', slot); -const useUtilityClasses = (ownerState: MultiInputDateRangeFieldProps) => { +const useUtilityClasses = (ownerState: MultiInputDateRangeFieldProps) => { const { classes } = ownerState; const slots = { root: ['root'], @@ -61,10 +60,9 @@ const MultiInputDateRangeFieldSeparator = styled(Typography, { }); type MultiInputDateRangeFieldComponent = (< - TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = true, >( - props: MultiInputDateRangeFieldProps & + props: MultiInputDateRangeFieldProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; @@ -79,10 +77,9 @@ type MultiInputDateRangeFieldComponent = (< * - [MultiInputDateRangeField API](https://mui.com/x/api/multi-input-date-range-field/) */ const MultiInputDateRangeField = React.forwardRef(function MultiInputDateRangeField< - TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = true, >( - inProps: MultiInputDateRangeFieldProps, + inProps: MultiInputDateRangeFieldProps, ref: React.Ref, ) { const themeProps = useThemeProps({ @@ -121,9 +118,9 @@ const MultiInputDateRangeField = React.forwardRef(function MultiInputDateRangeFi (inProps.enableAccessibleFieldDOMStructure === false ? MuiTextField : PickersTextField); const startTextFieldProps = useSlotProps< typeof TextField, - MultiInputDateRangeFieldSlotProps['textField'], + MultiInputDateRangeFieldSlotProps['textField'], {}, - MultiInputDateRangeFieldProps & { + MultiInputDateRangeFieldProps & { position: RangePosition; } >({ @@ -133,9 +130,9 @@ const MultiInputDateRangeField = React.forwardRef(function MultiInputDateRangeFi }); const endTextFieldProps = useSlotProps< typeof TextField, - MultiInputDateRangeFieldSlotProps['textField'], + MultiInputDateRangeFieldSlotProps['textField'], {}, - MultiInputDateRangeFieldProps & { + MultiInputDateRangeFieldProps & { position: RangePosition; } >({ @@ -156,7 +153,6 @@ const MultiInputDateRangeField = React.forwardRef(function MultiInputDateRangeFi }); const fieldResponse = useMultiInputDateRangeField< - TDate, TEnableAccessibleFieldDOMStructure, typeof startTextFieldProps >({ @@ -320,8 +316,7 @@ MultiInputDateRangeField.propTypes = { * * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance. * - * @template TDate - * @param {TDate} day The date to test. + * @param {PickerValidDate} day The date to test. * @param {string} position The date to test, 'start' or 'end'. * @returns {boolean} Returns `true` if the date should be disabled. */ diff --git a/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.types.ts b/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.types.ts index 626441962f9a..8b31315cee9f 100644 --- a/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.types.ts +++ b/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.types.ts @@ -1,5 +1,4 @@ import * as React from 'react'; -import { PickerValidDate } from '@mui/x-date-pickers/models'; import { SlotComponentProps } from '@mui/utils'; import Typography from '@mui/material/Typography'; import Stack, { StackProps } from '@mui/material/Stack'; @@ -13,38 +12,30 @@ import { } from '../models'; export type UseMultiInputDateRangeFieldParams< - TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean, TTextFieldSlotProps extends {}, > = UseMultiInputRangeFieldParams< - UseMultiInputDateRangeFieldProps, + UseMultiInputDateRangeFieldProps, TTextFieldSlotProps >; export interface UseMultiInputDateRangeFieldProps< - TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean, > extends Omit< - UseDateRangeFieldProps, + UseDateRangeFieldProps, 'unstableFieldRef' | 'clearable' | 'onClear' >, MultiInputFieldRefs {} export type UseMultiInputDateRangeFieldComponentProps< - TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean, TChildProps extends {}, -> = Omit< - TChildProps, - keyof UseMultiInputDateRangeFieldProps -> & - UseMultiInputDateRangeFieldProps; +> = Omit> & + UseMultiInputDateRangeFieldProps; export interface MultiInputDateRangeFieldProps< - TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = true, > extends UseMultiInputDateRangeFieldComponentProps< - TDate, TEnableAccessibleFieldDOMStructure, Omit > { @@ -62,7 +53,7 @@ export interface MultiInputDateRangeFieldProps< * The props used for each component slot. * @default {} */ - slotProps?: MultiInputDateRangeFieldSlotProps; + slotProps?: MultiInputDateRangeFieldSlotProps; } export interface MultiInputDateRangeFieldSlots { @@ -85,24 +76,23 @@ export interface MultiInputDateRangeFieldSlots { } export interface MultiInputDateRangeFieldSlotProps< - TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean, > { root?: SlotComponentProps< typeof Stack, {}, - MultiInputDateRangeFieldProps + MultiInputDateRangeFieldProps >; textField?: SlotComponentProps< typeof TextField, {}, - MultiInputDateRangeFieldProps & { + MultiInputDateRangeFieldProps & { position: RangePosition; } >; separator?: SlotComponentProps< typeof Typography, {}, - MultiInputDateRangeFieldProps + MultiInputDateRangeFieldProps >; } diff --git a/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx b/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx index 0500db59e40b..2046a04999ba 100644 --- a/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx +++ b/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx @@ -14,7 +14,6 @@ import { } from '@mui/utils'; import { convertFieldResponseIntoMuiTextFieldProps } from '@mui/x-date-pickers/internals'; import { useSplitFieldProps } from '@mui/x-date-pickers/hooks'; -import { PickerValidDate } from '@mui/x-date-pickers/models'; import { PickersTextField } from '@mui/x-date-pickers/PickersTextField'; import { MultiInputDateTimeRangeFieldProps, @@ -29,7 +28,7 @@ export const multiInputDateTimeRangeFieldClasses: MultiInputRangeFieldClasses = export const getMultiInputDateTimeRangeFieldUtilityClass = (slot: string) => generateUtilityClass('MuiMultiInputDateTimeRangeField', slot); -const useUtilityClasses = (ownerState: MultiInputDateTimeRangeFieldProps) => { +const useUtilityClasses = (ownerState: MultiInputDateTimeRangeFieldProps) => { const { classes } = ownerState; const slots = { root: ['root'], @@ -59,10 +58,9 @@ const MultiInputDateTimeRangeFieldSeparator = styled(Typography, { }); type MultiInputDateTimeRangeFieldComponent = (< - TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = true, >( - props: MultiInputDateTimeRangeFieldProps & + props: MultiInputDateTimeRangeFieldProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; @@ -77,10 +75,9 @@ type MultiInputDateTimeRangeFieldComponent = (< * - [MultiInputDateTimeRangeField API](https://mui.com/x/api/multi-input-date-time-range-field/) */ const MultiInputDateTimeRangeField = React.forwardRef(function MultiInputDateTimeRangeField< - TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = true, >( - inProps: MultiInputDateTimeRangeFieldProps, + inProps: MultiInputDateTimeRangeFieldProps, ref: React.Ref, ) { const themeProps = useThemeProps({ @@ -119,9 +116,9 @@ const MultiInputDateTimeRangeField = React.forwardRef(function MultiInputDateTim (inProps.enableAccessibleFieldDOMStructure === false ? MuiTextField : PickersTextField); const startTextFieldProps = useSlotProps< typeof TextField, - MultiInputDateTimeRangeFieldSlotProps['textField'], + MultiInputDateTimeRangeFieldSlotProps['textField'], {}, - MultiInputDateTimeRangeFieldProps & { + MultiInputDateTimeRangeFieldProps & { position: RangePosition; } >({ @@ -131,9 +128,9 @@ const MultiInputDateTimeRangeField = React.forwardRef(function MultiInputDateTim }); const endTextFieldProps = useSlotProps< typeof TextField, - MultiInputDateTimeRangeFieldSlotProps['textField'], + MultiInputDateTimeRangeFieldSlotProps['textField'], {}, - MultiInputDateTimeRangeFieldProps & { + MultiInputDateTimeRangeFieldProps & { position: RangePosition; } >({ @@ -154,7 +151,6 @@ const MultiInputDateTimeRangeField = React.forwardRef(function MultiInputDateTim }); const fieldResponse = useMultiInputDateTimeRangeField< - TDate, TEnableAccessibleFieldDOMStructure, typeof startTextFieldProps >({ @@ -351,16 +347,14 @@ MultiInputDateTimeRangeField.propTypes = { * * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance. * - * @template TDate - * @param {TDate} day The date to test. + * @param {PickerValidDate} day The date to test. * @param {string} position The date to test, 'start' or 'end'. * @returns {boolean} Returns `true` if the date should be disabled. */ shouldDisableDate: PropTypes.func, /** * Disable specific time. - * @template TDate - * @param {TDate} value The value to check. + * @param {PickerValidDate} value The value to check. * @param {TimeView} view The clock type of the timeValue. * @returns {boolean} If `true` the time will be disabled. */ diff --git a/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.types.ts b/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.types.ts index 72d7722f37dc..e66073ee71f5 100644 --- a/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.types.ts +++ b/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.types.ts @@ -3,44 +3,38 @@ import { SlotComponentProps } from '@mui/utils'; import Typography from '@mui/material/Typography'; import Stack, { StackProps } from '@mui/material/Stack'; import TextField from '@mui/material/TextField'; -import { PickerValidDate } from '@mui/x-date-pickers/models'; import { UseDateTimeRangeFieldProps } from '../internals/models/dateTimeRange'; import { UseMultiInputRangeFieldParams } from '../internals/hooks/useMultiInputRangeField/useMultiInputRangeField.types'; import { MultiInputFieldRefs, MultiInputRangeFieldClasses, RangePosition } from '../models'; export type UseMultiInputDateTimeRangeFieldParams< - TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean, TTextFieldSlotProps extends {}, > = UseMultiInputRangeFieldParams< - UseMultiInputDateTimeRangeFieldProps, + UseMultiInputDateTimeRangeFieldProps, TTextFieldSlotProps >; export interface UseMultiInputDateTimeRangeFieldProps< - TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean, > extends Omit< - UseDateTimeRangeFieldProps, + UseDateTimeRangeFieldProps, 'unstableFieldRef' | 'clearable' | 'onClear' >, MultiInputFieldRefs {} export type UseMultiInputDateTimeRangeFieldComponentProps< - TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean, TChildProps extends {}, > = Omit< TChildProps, - keyof UseMultiInputDateTimeRangeFieldProps + keyof UseMultiInputDateTimeRangeFieldProps > & - UseMultiInputDateTimeRangeFieldProps; + UseMultiInputDateTimeRangeFieldProps; export interface MultiInputDateTimeRangeFieldProps< - TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = true, > extends UseMultiInputDateTimeRangeFieldComponentProps< - TDate, TEnableAccessibleFieldDOMStructure, Omit > { @@ -58,7 +52,7 @@ export interface MultiInputDateTimeRangeFieldProps< * The props used for each component slot. * @default {} */ - slotProps?: MultiInputDateTimeRangeFieldSlotProps; + slotProps?: MultiInputDateTimeRangeFieldSlotProps; } export interface MultiInputDateTimeRangeFieldSlots { @@ -81,24 +75,23 @@ export interface MultiInputDateTimeRangeFieldSlots { } export interface MultiInputDateTimeRangeFieldSlotProps< - TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean, > { root?: SlotComponentProps< typeof Stack, {}, - MultiInputDateTimeRangeFieldProps + MultiInputDateTimeRangeFieldProps >; textField?: SlotComponentProps< typeof TextField, {}, - MultiInputDateTimeRangeFieldProps & { + MultiInputDateTimeRangeFieldProps & { position: RangePosition; } >; separator?: SlotComponentProps< typeof Typography, {}, - MultiInputDateTimeRangeFieldProps + MultiInputDateTimeRangeFieldProps >; } diff --git a/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx b/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx index 68e21e119e14..118d671e70d3 100644 --- a/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx +++ b/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx @@ -14,7 +14,6 @@ import { } from '@mui/utils'; import { convertFieldResponseIntoMuiTextFieldProps } from '@mui/x-date-pickers/internals'; import { useSplitFieldProps } from '@mui/x-date-pickers/hooks'; -import { PickerValidDate } from '@mui/x-date-pickers/models'; import { PickersTextField } from '@mui/x-date-pickers/PickersTextField'; import { MultiInputTimeRangeFieldProps, @@ -31,7 +30,7 @@ export const multiInputTimeRangeFieldClasses: MultiInputRangeFieldClasses = gene export const getMultiInputTimeRangeFieldUtilityClass = (slot: string) => generateUtilityClass('MuiMultiInputTimeRangeField', slot); -const useUtilityClasses = (ownerState: MultiInputTimeRangeFieldProps) => { +const useUtilityClasses = (ownerState: MultiInputTimeRangeFieldProps) => { const { classes } = ownerState; const slots = { root: ['root'], @@ -61,10 +60,9 @@ const MultiInputTimeRangeFieldSeparator = styled(Typography, { }); type MultiInputTimeRangeFieldComponent = (< - TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = true, >( - props: MultiInputTimeRangeFieldProps & + props: MultiInputTimeRangeFieldProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; @@ -79,10 +77,9 @@ type MultiInputTimeRangeFieldComponent = (< * - [MultiInputTimeRangeField API](https://mui.com/x/api/multi-input-time-range-field/) */ const MultiInputTimeRangeField = React.forwardRef(function MultiInputTimeRangeField< - TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = true, >( - inProps: MultiInputTimeRangeFieldProps, + inProps: MultiInputTimeRangeFieldProps, ref: React.Ref, ) { const themeProps = useThemeProps({ @@ -121,9 +118,9 @@ const MultiInputTimeRangeField = React.forwardRef(function MultiInputTimeRangeFi (inProps.enableAccessibleFieldDOMStructure === false ? MuiTextField : PickersTextField); const startTextFieldProps = useSlotProps< typeof TextField, - MultiInputTimeRangeFieldSlotProps['textField'], + MultiInputTimeRangeFieldSlotProps['textField'], {}, - MultiInputTimeRangeFieldProps & { + MultiInputTimeRangeFieldProps & { position: RangePosition; } >({ @@ -134,9 +131,9 @@ const MultiInputTimeRangeField = React.forwardRef(function MultiInputTimeRangeFi const endTextFieldProps = useSlotProps< typeof TextField, - MultiInputTimeRangeFieldSlotProps['textField'], + MultiInputTimeRangeFieldSlotProps['textField'], {}, - MultiInputTimeRangeFieldProps & { + MultiInputTimeRangeFieldProps & { position: RangePosition; } >({ @@ -157,7 +154,6 @@ const MultiInputTimeRangeField = React.forwardRef(function MultiInputTimeRangeFi }); const fieldResponse = useMultiInputTimeRangeField< - TDate, TEnableAccessibleFieldDOMStructure, typeof startTextFieldProps >({ @@ -333,8 +329,7 @@ MultiInputTimeRangeField.propTypes = { ]), /** * Disable specific time. - * @template TDate - * @param {TDate} value The value to check. + * @param {PickerValidDate} value The value to check. * @param {TimeView} view The clock type of the timeValue. * @returns {boolean} If `true` the time will be disabled. */ diff --git a/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.types.ts b/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.types.ts index 34d466bb20e2..a9fcc0831311 100644 --- a/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.types.ts +++ b/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.types.ts @@ -3,44 +3,35 @@ import { SlotComponentProps } from '@mui/utils'; import Typography from '@mui/material/Typography'; import Stack, { StackProps } from '@mui/material/Stack'; import TextField from '@mui/material/TextField'; -import { PickerValidDate } from '@mui/x-date-pickers/models'; import { UseTimeRangeFieldProps } from '../internals/models/timeRange'; import { UseMultiInputRangeFieldParams } from '../internals/hooks/useMultiInputRangeField/useMultiInputRangeField.types'; import { MultiInputFieldRefs, MultiInputRangeFieldClasses, RangePosition } from '../models'; export type UseMultiInputTimeRangeFieldParams< - TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean, TTextFieldSlotProps extends {}, > = UseMultiInputRangeFieldParams< - UseMultiInputTimeRangeFieldProps, + UseMultiInputTimeRangeFieldProps, TTextFieldSlotProps >; export interface UseMultiInputTimeRangeFieldProps< - TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean, > extends Omit< - UseTimeRangeFieldProps, + UseTimeRangeFieldProps, 'unstableFieldRef' | 'clearable' | 'onClear' >, MultiInputFieldRefs {} export type UseMultiInputTimeRangeFieldComponentProps< - TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean, TChildProps extends {}, -> = Omit< - TChildProps, - keyof UseMultiInputTimeRangeFieldProps -> & - UseMultiInputTimeRangeFieldProps; +> = Omit> & + UseMultiInputTimeRangeFieldProps; export interface MultiInputTimeRangeFieldProps< - TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = true, > extends UseMultiInputTimeRangeFieldComponentProps< - TDate, TEnableAccessibleFieldDOMStructure, Omit > { @@ -58,7 +49,7 @@ export interface MultiInputTimeRangeFieldProps< * The props used for each component slot. * @default {} */ - slotProps?: MultiInputTimeRangeFieldSlotProps; + slotProps?: MultiInputTimeRangeFieldSlotProps; } export interface MultiInputTimeRangeFieldSlots { @@ -81,24 +72,23 @@ export interface MultiInputTimeRangeFieldSlots { } export interface MultiInputTimeRangeFieldSlotProps< - TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean, > { root?: SlotComponentProps< typeof Stack, {}, - MultiInputTimeRangeFieldProps + MultiInputTimeRangeFieldProps >; textField?: SlotComponentProps< typeof TextField, {}, - MultiInputTimeRangeFieldProps & { + MultiInputTimeRangeFieldProps & { position: RangePosition; } >; separator?: SlotComponentProps< typeof Typography, {}, - MultiInputTimeRangeFieldProps + MultiInputTimeRangeFieldProps >; } diff --git a/packages/x-date-pickers-pro/src/PickersRangeCalendarHeader/PickersRangeCalendarHeader.tsx b/packages/x-date-pickers-pro/src/PickersRangeCalendarHeader/PickersRangeCalendarHeader.tsx index 46c70f5f5de0..af72f72fd33a 100644 --- a/packages/x-date-pickers-pro/src/PickersRangeCalendarHeader/PickersRangeCalendarHeader.tsx +++ b/packages/x-date-pickers-pro/src/PickersRangeCalendarHeader/PickersRangeCalendarHeader.tsx @@ -3,7 +3,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { styled } from '@mui/material/styles'; import { PickersCalendarHeader } from '@mui/x-date-pickers/PickersCalendarHeader'; -import { PickerValidDate } from '@mui/x-date-pickers/models'; import { PickersArrowSwitcher, useNextMonthDisabled, @@ -13,8 +12,8 @@ import { import { usePickersTranslations } from '@mui/x-date-pickers/hooks'; import { PickersRangeCalendarHeaderProps } from './PickersRangeCalendarHeader.types'; -type PickersRangeCalendarHeaderComponent = (( - props: PickersRangeCalendarHeaderProps & React.RefAttributes, +type PickersRangeCalendarHeaderComponent = (( + props: PickersRangeCalendarHeaderProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; const PickersRangeCalendarHeaderContentMultipleCalendars = styled(PickersArrowSwitcher)({ @@ -24,11 +23,12 @@ const PickersRangeCalendarHeaderContentMultipleCalendars = styled(PickersArrowSw justifyContent: 'space-between', }); -const PickersRangeCalendarHeader = React.forwardRef(function PickersRangeCalendarHeader< - TDate extends PickerValidDate, ->(props: PickersRangeCalendarHeaderProps, ref: React.Ref) { - const utils = useUtils(); - const translations = usePickersTranslations(); +const PickersRangeCalendarHeader = React.forwardRef(function PickersRangeCalendarHeader( + props: PickersRangeCalendarHeaderProps, + ref: React.Ref, +) { + const utils = useUtils(); + const translations = usePickersTranslations(); const { calendars, month, monthIndex, labelId, ...other } = props; const { diff --git a/packages/x-date-pickers-pro/src/PickersRangeCalendarHeader/PickersRangeCalendarHeader.types.ts b/packages/x-date-pickers-pro/src/PickersRangeCalendarHeader/PickersRangeCalendarHeader.types.ts index aa758a482737..2b86d5dbc203 100644 --- a/packages/x-date-pickers-pro/src/PickersRangeCalendarHeader/PickersRangeCalendarHeader.types.ts +++ b/packages/x-date-pickers-pro/src/PickersRangeCalendarHeader/PickersRangeCalendarHeader.types.ts @@ -4,8 +4,7 @@ import { PickersCalendarHeaderProps, } from '@mui/x-date-pickers/PickersCalendarHeader'; -export interface PickersRangeCalendarHeaderProps - extends PickersCalendarHeaderProps { +export interface PickersRangeCalendarHeaderProps extends PickersCalendarHeaderProps { /** * The number of calendars rendered. */ @@ -13,12 +12,12 @@ export interface PickersRangeCalendarHeaderProps /** * Month used for this header. */ - month: TDate; + month: PickerValidDate; /** * Index of the month used for this header. */ monthIndex: number; } -export interface ExportedPickersRangeCalendarHeaderProps - extends ExportedPickersCalendarHeaderProps {} +export interface ExportedPickersRangeCalendarHeaderProps + extends ExportedPickersCalendarHeaderProps {} diff --git a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx index a621db2cd46a..c4559c007dac 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx +++ b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx @@ -7,17 +7,13 @@ import useSlotProps from '@mui/utils/useSlotProps'; import { refType } from '@mui/utils'; import { useClearableField } from '@mui/x-date-pickers/hooks'; import { convertFieldResponseIntoMuiTextFieldProps } from '@mui/x-date-pickers/internals'; -import { PickerValidDate } from '@mui/x-date-pickers/models'; import { PickersTextField } from '@mui/x-date-pickers/PickersTextField'; import { SingleInputDateRangeFieldProps } from './SingleInputDateRangeField.types'; import { useSingleInputDateRangeField } from './useSingleInputDateRangeField'; import { FieldType } from '../models'; -type DateRangeFieldComponent = (< - TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = true, ->( - props: SingleInputDateRangeFieldProps & +type DateRangeFieldComponent = (( + props: SingleInputDateRangeFieldProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any; fieldType?: FieldType }; @@ -32,10 +28,9 @@ type DateRangeFieldComponent = (< * - [SingleInputDateRangeField API](https://mui.com/x/api/single-input-date-range-field/) */ const SingleInputDateRangeField = React.forwardRef(function SingleInputDateRangeField< - TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = true, >( - inProps: SingleInputDateRangeFieldProps, + inProps: SingleInputDateRangeFieldProps, inRef: React.Ref, ) { const themeProps = useThemeProps({ @@ -58,14 +53,13 @@ const SingleInputDateRangeField = React.forwardRef(function SingleInputDateRange additionalProps: { ref: inRef, }, - }) as SingleInputDateRangeFieldProps; + }) as SingleInputDateRangeFieldProps; // TODO: Remove when mui/material-ui#35088 will be merged textFieldProps.inputProps = { ...inputProps, ...textFieldProps.inputProps }; textFieldProps.InputProps = { ...InputProps, ...textFieldProps.InputProps }; const fieldResponse = useSingleInputDateRangeField< - TDate, TEnableAccessibleFieldDOMStructure, typeof textFieldProps >(textFieldProps); @@ -291,8 +285,7 @@ SingleInputDateRangeField.propTypes = { * * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance. * - * @template TDate - * @param {TDate} day The date to test. + * @param {PickerValidDate} day The date to test. * @param {string} position The date to test, 'start' or 'end'. * @returns {boolean} Returns `true` if the date should be disabled. */ diff --git a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.types.ts b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.types.ts index eb179ea277ba..da88995ac304 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.types.ts +++ b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.types.ts @@ -1,29 +1,26 @@ import * as React from 'react'; import { SlotComponentProps } from '@mui/utils'; import TextField from '@mui/material/TextField'; -import { UseFieldInternalProps } from '@mui/x-date-pickers/internals'; -import { BuiltInFieldTextFieldProps, PickerValidDate } from '@mui/x-date-pickers/models'; +import { UseFieldInternalProps, PickerRangeValue } from '@mui/x-date-pickers/internals'; +import { BuiltInFieldTextFieldProps } from '@mui/x-date-pickers/models'; import { ExportedUseClearableFieldProps, UseClearableFieldSlots, UseClearableFieldSlotProps, } from '@mui/x-date-pickers/hooks'; import type { - DateRange, RangeFieldSection, DateRangeValidationError, UseDateRangeFieldProps, } from '../models'; export interface UseSingleInputDateRangeFieldProps< - TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean, -> extends UseDateRangeFieldProps, +> extends UseDateRangeFieldProps, ExportedUseClearableFieldProps, Pick< UseFieldInternalProps< - DateRange, - TDate, + PickerRangeValue, RangeFieldSection, TEnableAccessibleFieldDOMStructure, DateRangeValidationError @@ -32,13 +29,12 @@ export interface UseSingleInputDateRangeFieldProps< > {} export type SingleInputDateRangeFieldProps< - TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = true, > = Omit< BuiltInFieldTextFieldProps, - keyof UseSingleInputDateRangeFieldProps + keyof UseSingleInputDateRangeFieldProps > & - UseSingleInputDateRangeFieldProps & { + UseSingleInputDateRangeFieldProps & { /** * Overridable component slots. * @default {} @@ -48,7 +44,7 @@ export type SingleInputDateRangeFieldProps< * The props used for each component slot. * @default {} */ - slotProps?: SingleInputDateRangeFieldSlotProps; + slotProps?: SingleInputDateRangeFieldSlotProps; }; export interface SingleInputDateRangeFieldSlots extends UseClearableFieldSlots { @@ -60,12 +56,11 @@ export interface SingleInputDateRangeFieldSlots extends UseClearableFieldSlots { } export interface SingleInputDateRangeFieldSlotProps< - TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean, > extends UseClearableFieldSlotProps { textField?: SlotComponentProps< typeof TextField, {}, - SingleInputDateRangeFieldProps + SingleInputDateRangeFieldProps >; } diff --git a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/useSingleInputDateRangeField.ts b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/useSingleInputDateRangeField.ts index b210aab9d2de..628a548326c4 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/useSingleInputDateRangeField.ts +++ b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/useSingleInputDateRangeField.ts @@ -1,36 +1,32 @@ 'use client'; import * as React from 'react'; -import { useField, useDefaultizedDateField } from '@mui/x-date-pickers/internals'; +import { useField, useDefaultizedDateField, PickerRangeValue } from '@mui/x-date-pickers/internals'; import { useSplitFieldProps } from '@mui/x-date-pickers/hooks'; -import { PickerValidDate } from '@mui/x-date-pickers/models'; import { UseSingleInputDateRangeFieldProps } from './SingleInputDateRangeField.types'; import { rangeValueManager, getRangeFieldValueManager } from '../internals/utils/valueManagers'; import { validateDateRange } from '../validation'; -import { RangeFieldSection, DateRange } from '../models'; +import { RangeFieldSection } from '../models'; export const useSingleInputDateRangeField = < - TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean, - TAllProps extends UseSingleInputDateRangeFieldProps, + TAllProps extends UseSingleInputDateRangeFieldProps, >( inProps: TAllProps, ) => { const props = useDefaultizedDateField< - TDate, - UseSingleInputDateRangeFieldProps, + UseSingleInputDateRangeFieldProps, TAllProps >(inProps); const { forwardedProps, internalProps } = useSplitFieldProps(props, 'date'); const fieldValueManager = React.useMemo( - () => getRangeFieldValueManager({ dateSeparator: internalProps.dateSeparator }), + () => getRangeFieldValueManager({ dateSeparator: internalProps.dateSeparator }), [internalProps.dateSeparator], ); return useField< - DateRange, - TDate, + PickerRangeValue, RangeFieldSection, TEnableAccessibleFieldDOMStructure, typeof forwardedProps, diff --git a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx index 40e3af41c1a5..931316f32d63 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx +++ b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx @@ -8,16 +8,12 @@ import { useThemeProps } from '@mui/material/styles'; import { refType } from '@mui/utils'; import useSlotProps from '@mui/utils/useSlotProps'; import { useClearableField } from '@mui/x-date-pickers/hooks'; -import { PickerValidDate } from '@mui/x-date-pickers/models'; import { SingleInputDateTimeRangeFieldProps } from './SingleInputDateTimeRangeField.types'; import { useSingleInputDateTimeRangeField } from './useSingleInputDateTimeRangeField'; import { FieldType } from '../models'; -type DateRangeFieldComponent = (< - TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = true, ->( - props: SingleInputDateTimeRangeFieldProps & +type DateRangeFieldComponent = (( + props: SingleInputDateTimeRangeFieldProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any; fieldType?: FieldType }; @@ -32,10 +28,9 @@ type DateRangeFieldComponent = (< * - [SingleInputDateTimeRangeField API](https://mui.com/x/api/single-input-date-time-range-field/) */ const SingleInputDateTimeRangeField = React.forwardRef(function SingleInputDateTimeRangeField< - TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = true, >( - inProps: SingleInputDateTimeRangeFieldProps, + inProps: SingleInputDateTimeRangeFieldProps, inRef: React.Ref, ) { const themeProps = useThemeProps({ @@ -58,14 +53,13 @@ const SingleInputDateTimeRangeField = React.forwardRef(function SingleInputDateT additionalProps: { ref: inRef, }, - }) as SingleInputDateTimeRangeFieldProps; + }) as SingleInputDateTimeRangeFieldProps; // TODO: Remove when mui/material-ui#35088 will be merged textFieldProps.inputProps = { ...inputProps, ...textFieldProps.inputProps }; textFieldProps.InputProps = { ...InputProps, ...textFieldProps.InputProps }; const fieldResponse = useSingleInputDateTimeRangeField< - TDate, TEnableAccessibleFieldDOMStructure, typeof textFieldProps >(textFieldProps); @@ -324,16 +318,14 @@ SingleInputDateTimeRangeField.propTypes = { * * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance. * - * @template TDate - * @param {TDate} day The date to test. + * @param {PickerValidDate} day The date to test. * @param {string} position The date to test, 'start' or 'end'. * @returns {boolean} Returns `true` if the date should be disabled. */ shouldDisableDate: PropTypes.func, /** * Disable specific time. - * @template TDate - * @param {TDate} value The value to check. + * @param {PickerValidDate} value The value to check. * @param {TimeView} view The clock type of the timeValue. * @returns {boolean} If `true` the time will be disabled. */ diff --git a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.types.ts b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.types.ts index 4d5f80635c65..6632d68fc3eb 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.types.ts +++ b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.types.ts @@ -1,25 +1,23 @@ import * as React from 'react'; import { SlotComponentProps } from '@mui/utils'; import TextField from '@mui/material/TextField'; -import { UseFieldInternalProps } from '@mui/x-date-pickers/internals'; -import { BuiltInFieldTextFieldProps, PickerValidDate } from '@mui/x-date-pickers/models'; +import { UseFieldInternalProps, PickerRangeValue } from '@mui/x-date-pickers/internals'; +import { BuiltInFieldTextFieldProps } from '@mui/x-date-pickers/models'; import { ExportedUseClearableFieldProps, UseClearableFieldSlots, UseClearableFieldSlotProps, } from '@mui/x-date-pickers/hooks'; import { UseDateTimeRangeFieldProps } from '../internals/models'; -import { DateRange, RangeFieldSection, DateTimeRangeValidationError } from '../models'; +import { RangeFieldSection, DateTimeRangeValidationError } from '../models'; export interface UseSingleInputDateTimeRangeFieldProps< - TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean, -> extends UseDateTimeRangeFieldProps, +> extends UseDateTimeRangeFieldProps, ExportedUseClearableFieldProps, Pick< UseFieldInternalProps< - DateRange, - TDate, + PickerRangeValue, RangeFieldSection, TEnableAccessibleFieldDOMStructure, DateTimeRangeValidationError @@ -28,13 +26,12 @@ export interface UseSingleInputDateTimeRangeFieldProps< > {} export type SingleInputDateTimeRangeFieldProps< - TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = true, > = Omit< BuiltInFieldTextFieldProps, - keyof UseSingleInputDateTimeRangeFieldProps + keyof UseSingleInputDateTimeRangeFieldProps > & - UseSingleInputDateTimeRangeFieldProps & { + UseSingleInputDateTimeRangeFieldProps & { /** * Overridable component slots. * @default {} @@ -44,7 +41,7 @@ export type SingleInputDateTimeRangeFieldProps< * The props used for each component slot. * @default {} */ - slotProps?: SingleInputDateTimeRangeFieldSlotProps; + slotProps?: SingleInputDateTimeRangeFieldSlotProps; }; export interface SingleInputDateTimeRangeFieldSlots extends UseClearableFieldSlots { @@ -56,12 +53,11 @@ export interface SingleInputDateTimeRangeFieldSlots extends UseClearableFieldSlo } export interface SingleInputDateTimeRangeFieldSlotProps< - TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean, > extends UseClearableFieldSlotProps { textField?: SlotComponentProps< typeof TextField, {}, - SingleInputDateTimeRangeFieldProps + SingleInputDateTimeRangeFieldProps >; } diff --git a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.ts b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.ts index 312668956ad5..f96bfe35fd10 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.ts +++ b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.ts @@ -1,39 +1,36 @@ 'use client'; import * as React from 'react'; -import { useField, useDefaultizedDateTimeField } from '@mui/x-date-pickers/internals'; +import { + useField, + useDefaultizedDateTimeField, + PickerRangeValue, +} from '@mui/x-date-pickers/internals'; import { useSplitFieldProps } from '@mui/x-date-pickers/hooks'; -import { PickerValidDate } from '@mui/x-date-pickers/models'; import { UseSingleInputDateTimeRangeFieldProps } from './SingleInputDateTimeRangeField.types'; import { rangeValueManager, getRangeFieldValueManager } from '../internals/utils/valueManagers'; import { validateDateTimeRange } from '../validation'; -import { RangeFieldSection, DateRange } from '../models'; +import { RangeFieldSection } from '../models'; export const useSingleInputDateTimeRangeField = < - TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean, - TAllProps extends UseSingleInputDateTimeRangeFieldProps< - TDate, - TEnableAccessibleFieldDOMStructure - >, + TAllProps extends UseSingleInputDateTimeRangeFieldProps, >( inProps: TAllProps, ) => { const props = useDefaultizedDateTimeField< - TDate, - UseSingleInputDateTimeRangeFieldProps, + UseSingleInputDateTimeRangeFieldProps, TAllProps >(inProps); const { forwardedProps, internalProps } = useSplitFieldProps(props, 'date-time'); const fieldValueManager = React.useMemo( - () => getRangeFieldValueManager({ dateSeparator: internalProps.dateSeparator }), + () => getRangeFieldValueManager({ dateSeparator: internalProps.dateSeparator }), [internalProps.dateSeparator], ); return useField< - DateRange, - TDate, + PickerRangeValue, RangeFieldSection, TEnableAccessibleFieldDOMStructure, typeof forwardedProps, diff --git a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx index 81466c3a90d4..5641de679ac9 100644 --- a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx +++ b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx @@ -4,7 +4,6 @@ import PropTypes from 'prop-types'; import MuiTextField from '@mui/material/TextField'; import { useClearableField } from '@mui/x-date-pickers/hooks'; import { convertFieldResponseIntoMuiTextFieldProps } from '@mui/x-date-pickers/internals'; -import { PickerValidDate } from '@mui/x-date-pickers/models'; import { PickersTextField } from '@mui/x-date-pickers/PickersTextField'; import { useThemeProps } from '@mui/material/styles'; import useSlotProps from '@mui/utils/useSlotProps'; @@ -13,11 +12,8 @@ import { SingleInputTimeRangeFieldProps } from './SingleInputTimeRangeField.type import { useSingleInputTimeRangeField } from './useSingleInputTimeRangeField'; import { FieldType } from '../models'; -type DateRangeFieldComponent = (< - TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = true, ->( - props: SingleInputTimeRangeFieldProps & +type DateRangeFieldComponent = (( + props: SingleInputTimeRangeFieldProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any; fieldType?: FieldType }; @@ -32,10 +28,9 @@ type DateRangeFieldComponent = (< * - [SingleInputTimeRangeField API](https://mui.com/x/api/single-input-time-range-field/) */ const SingleInputTimeRangeField = React.forwardRef(function SingleInputTimeRangeField< - TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = true, >( - inProps: SingleInputTimeRangeFieldProps, + inProps: SingleInputTimeRangeFieldProps, inRef: React.Ref, ) { const themeProps = useThemeProps({ @@ -58,14 +53,13 @@ const SingleInputTimeRangeField = React.forwardRef(function SingleInputTimeRange additionalProps: { ref: inRef, }, - }) as SingleInputTimeRangeFieldProps; + }) as SingleInputTimeRangeFieldProps; // TODO: Remove when mui/material-ui#35088 will be merged textFieldProps.inputProps = { ...inputProps, ...textFieldProps.inputProps }; textFieldProps.InputProps = { ...InputProps, ...textFieldProps.InputProps }; const fieldResponse = useSingleInputTimeRangeField< - TDate, TEnableAccessibleFieldDOMStructure, typeof textFieldProps >(textFieldProps); @@ -303,8 +297,7 @@ SingleInputTimeRangeField.propTypes = { ]), /** * Disable specific time. - * @template TDate - * @param {TDate} value The value to check. + * @param {PickerValidDate} value The value to check. * @param {TimeView} view The clock type of the timeValue. * @returns {boolean} If `true` the time will be disabled. */ diff --git a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.types.ts b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.types.ts index b651def68965..1cc0fa3fd483 100644 --- a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.types.ts +++ b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.types.ts @@ -1,25 +1,23 @@ import * as React from 'react'; import { SlotComponentProps } from '@mui/utils'; import TextField from '@mui/material/TextField'; -import { UseFieldInternalProps } from '@mui/x-date-pickers/internals'; -import { PickerValidDate, BuiltInFieldTextFieldProps } from '@mui/x-date-pickers/models'; +import { PickerRangeValue, UseFieldInternalProps } from '@mui/x-date-pickers/internals'; +import { BuiltInFieldTextFieldProps } from '@mui/x-date-pickers/models'; import { ExportedUseClearableFieldProps, UseClearableFieldSlots, UseClearableFieldSlotProps, } from '@mui/x-date-pickers/hooks'; import { UseTimeRangeFieldProps } from '../internals/models'; -import { DateRange, RangeFieldSection, TimeRangeValidationError } from '../models'; +import { RangeFieldSection, TimeRangeValidationError } from '../models'; export interface UseSingleInputTimeRangeFieldProps< - TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean, -> extends UseTimeRangeFieldProps, +> extends UseTimeRangeFieldProps, ExportedUseClearableFieldProps, Pick< UseFieldInternalProps< - DateRange, - TDate, + PickerRangeValue, RangeFieldSection, TEnableAccessibleFieldDOMStructure, TimeRangeValidationError @@ -28,13 +26,12 @@ export interface UseSingleInputTimeRangeFieldProps< > {} export type SingleInputTimeRangeFieldProps< - TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = true, > = Omit< BuiltInFieldTextFieldProps, - keyof UseSingleInputTimeRangeFieldProps + keyof UseSingleInputTimeRangeFieldProps > & - UseSingleInputTimeRangeFieldProps & { + UseSingleInputTimeRangeFieldProps & { /** * Overridable component slots. * @default {} @@ -44,7 +41,7 @@ export type SingleInputTimeRangeFieldProps< * The props used for each component slot. * @default {} */ - slotProps?: SingleInputTimeRangeFieldSlotProps; + slotProps?: SingleInputTimeRangeFieldSlotProps; }; export interface SingleInputTimeRangeFieldSlots extends UseClearableFieldSlots { @@ -56,12 +53,11 @@ export interface SingleInputTimeRangeFieldSlots extends UseClearableFieldSlots { } export interface SingleInputTimeRangeFieldSlotProps< - TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean, > extends UseClearableFieldSlotProps { textField?: SlotComponentProps< typeof TextField, {}, - SingleInputTimeRangeFieldProps + SingleInputTimeRangeFieldProps >; } diff --git a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/useSingleInputTimeRangeField.ts b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/useSingleInputTimeRangeField.ts index a995ab3db746..f7a4eec521e6 100644 --- a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/useSingleInputTimeRangeField.ts +++ b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/useSingleInputTimeRangeField.ts @@ -1,36 +1,32 @@ 'use client'; import * as React from 'react'; -import { useField, useDefaultizedTimeField } from '@mui/x-date-pickers/internals'; +import { useField, useDefaultizedTimeField, PickerRangeValue } from '@mui/x-date-pickers/internals'; import { useSplitFieldProps } from '@mui/x-date-pickers/hooks'; -import { PickerValidDate } from '@mui/x-date-pickers/models'; import { UseSingleInputTimeRangeFieldProps } from './SingleInputTimeRangeField.types'; import { rangeValueManager, getRangeFieldValueManager } from '../internals/utils/valueManagers'; import { validateTimeRange } from '../validation'; -import { RangeFieldSection, DateRange } from '../models'; +import { RangeFieldSection } from '../models'; export const useSingleInputTimeRangeField = < - TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean, - TAllProps extends UseSingleInputTimeRangeFieldProps, + TAllProps extends UseSingleInputTimeRangeFieldProps, >( inProps: TAllProps, ) => { const props = useDefaultizedTimeField< - TDate, - UseSingleInputTimeRangeFieldProps, + UseSingleInputTimeRangeFieldProps, TAllProps >(inProps); const { forwardedProps, internalProps } = useSplitFieldProps(props, 'time'); const fieldValueManager = React.useMemo( - () => getRangeFieldValueManager({ dateSeparator: internalProps.dateSeparator }), + () => getRangeFieldValueManager({ dateSeparator: internalProps.dateSeparator }), [internalProps.dateSeparator], ); return useField< - DateRange, - TDate, + PickerRangeValue, RangeFieldSection, TEnableAccessibleFieldDOMStructure, typeof forwardedProps, diff --git a/packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.test.tsx b/packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.test.tsx index 8c9bd1b40913..b79aa2643aaa 100644 --- a/packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.test.tsx +++ b/packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.test.tsx @@ -40,7 +40,7 @@ describe('', () => { render( , ); diff --git a/packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.tsx b/packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.tsx index 845427eff980..7696f3168f6a 100644 --- a/packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.tsx @@ -1,18 +1,16 @@ 'use client'; import * as React from 'react'; import PropTypes from 'prop-types'; -import { PickerViewRendererLookup } from '@mui/x-date-pickers/internals'; -import { PickerValidDate } from '@mui/x-date-pickers/models'; +import { PickerRangeValue, PickerViewRendererLookup } from '@mui/x-date-pickers/internals'; import { useStaticRangePicker } from '../internals/hooks/useStaticRangePicker'; import { StaticDateRangePickerProps } from './StaticDateRangePicker.types'; import { useDateRangePickerDefaultizedProps } from '../DateRangePicker/shared'; import { renderDateRangeViewCalendar } from '../dateRangeViewRenderers'; import { rangeValueManager } from '../internals/utils/valueManagers'; import { validateDateRange } from '../validation'; -import { DateRange } from '../models'; -type StaticDateRangePickerComponent = (( - props: StaticDateRangePickerProps & React.RefAttributes, +type StaticDateRangePickerComponent = (( + props: StaticDateRangePickerProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; /** @@ -25,17 +23,18 @@ type StaticDateRangePickerComponent = (( * * - [StaticDateRangePicker API](https://mui.com/x/api/date-pickers/static-date-range-picker/) */ -const StaticDateRangePicker = React.forwardRef(function StaticDateRangePicker< - TDate extends PickerValidDate, ->(inProps: StaticDateRangePickerProps, ref: React.Ref) { - const defaultizedProps = useDateRangePickerDefaultizedProps< - TDate, - StaticDateRangePickerProps - >(inProps, 'MuiStaticDateRangePicker'); +const StaticDateRangePicker = React.forwardRef(function StaticDateRangePicker( + inProps: StaticDateRangePickerProps, + ref: React.Ref, +) { + const defaultizedProps = useDateRangePickerDefaultizedProps( + inProps, + 'MuiStaticDateRangePicker', + ); const displayStaticWrapperAs = defaultizedProps.displayStaticWrapperAs ?? 'mobile'; - const viewRenderers: PickerViewRendererLookup, 'day', any, {}> = { + const viewRenderers: PickerViewRendererLookup = { day: renderDateRangeViewCalendar, ...defaultizedProps.viewRenderers, }; @@ -57,7 +56,7 @@ const StaticDateRangePicker = React.forwardRef(function StaticDateRangePicker< }, }; - const { renderPicker } = useStaticRangePicker({ + const { renderPicker } = useStaticRangePicker<'day', typeof props>({ props, valueManager: rangeValueManager, valueType: 'date', @@ -93,9 +92,9 @@ StaticDateRangePicker.propTypes = { currentMonthCalendarPosition: PropTypes.oneOf([1, 2, 3]), /** * Formats the day of week displayed in the calendar header. - * @param {TDate} date The date of the day of week provided by the adapter. + * @param {PickerValidDate} date The date of the day of week provided by the adapter. * @returns {string} The name to display. - * @default (date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase() + * @default (date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase() */ dayOfWeekFormatter: PropTypes.func, /** @@ -208,8 +207,7 @@ StaticDateRangePicker.propTypes = { onError: PropTypes.func, /** * Callback fired on month change. - * @template TDate - * @param {TDate} month The new month. + * @param {PickerValidDate} month The new month. */ onMonthChange: PropTypes.func, /** @@ -244,8 +242,7 @@ StaticDateRangePicker.propTypes = { * * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance. * - * @template TDate - * @param {TDate} day The date to test. + * @param {PickerValidDate} day The date to test. * @param {string} position The date to test, 'start' or 'end'. * @returns {boolean} Returns `true` if the date should be disabled. */ diff --git a/packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.types.ts b/packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.types.ts index ec54ee4a3f1d..071fd9b1f215 100644 --- a/packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.types.ts +++ b/packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.types.ts @@ -1,5 +1,4 @@ import { MakeOptional } from '@mui/x-internals/types'; -import { PickerValidDate } from '@mui/x-date-pickers/models'; import { StaticRangeOnlyPickerProps, UseStaticRangePickerSlots, @@ -11,16 +10,16 @@ import { BaseDateRangePickerSlotProps, } from '../DateRangePicker/shared'; -export interface StaticDateRangePickerSlots - extends BaseDateRangePickerSlots, - UseStaticRangePickerSlots {} +export interface StaticDateRangePickerSlots + extends BaseDateRangePickerSlots, + UseStaticRangePickerSlots<'day'> {} -export interface StaticDateRangePickerSlotProps - extends BaseDateRangePickerSlotProps, - Omit, 'toolbar'> {} +export interface StaticDateRangePickerSlotProps + extends BaseDateRangePickerSlotProps, + Omit, 'toolbar'> {} -export interface StaticDateRangePickerProps - extends BaseDateRangePickerProps, +export interface StaticDateRangePickerProps + extends BaseDateRangePickerProps, MakeOptional { /** * The number of calendars to render. @@ -31,10 +30,10 @@ export interface StaticDateRangePickerProps * Overridable component slots. * @default {} */ - slots?: StaticDateRangePickerSlots; + slots?: StaticDateRangePickerSlots; /** * The props used for each component slot. * @default {} */ - slotProps?: StaticDateRangePickerSlotProps; + slotProps?: StaticDateRangePickerSlotProps; } diff --git a/packages/x-date-pickers-pro/src/dateRangeViewRenderers/dateRangeViewRenderers.tsx b/packages/x-date-pickers-pro/src/dateRangeViewRenderers/dateRangeViewRenderers.tsx index 7253a0cd14c8..5feb22ed9312 100644 --- a/packages/x-date-pickers-pro/src/dateRangeViewRenderers/dateRangeViewRenderers.tsx +++ b/packages/x-date-pickers-pro/src/dateRangeViewRenderers/dateRangeViewRenderers.tsx @@ -1,12 +1,9 @@ import * as React from 'react'; import { DateOrTimeViewWithMeridiem } from '@mui/x-date-pickers/internals'; -import { PickerValidDate } from '@mui/x-date-pickers/models'; import { DateRangeCalendar, DateRangeCalendarProps } from '../DateRangeCalendar'; -export interface DateRangeViewRendererProps< - TDate extends PickerValidDate, - TView extends DateOrTimeViewWithMeridiem, -> extends Omit, 'views'> { +export interface DateRangeViewRendererProps + extends Omit { views: readonly TView[]; } @@ -14,7 +11,7 @@ export interface DateRangeViewRendererProps< * We don't pass all the props down to `DateRangeCalendar`, * because otherwise some unwanted props would be passed to the HTML element. */ -export const renderDateRangeViewCalendar = ({ +export const renderDateRangeViewCalendar = ({ value, defaultValue, referenceDate, @@ -53,7 +50,7 @@ export const renderDateRangeViewCalendar = ({ views, view, onViewChange, -}: DateRangeViewRendererProps) => ( +}: DateRangeViewRendererProps<'day'>) => ( extends ExportedPickersLayoutSlots, TDate, TView>, +export interface UseRangePickerSlots + extends ExportedPickersLayoutSlots, RangePickerFieldSlots {} export interface UseRangePickerSlotProps< - TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, -> extends ExportedPickersLayoutSlotProps, TDate, TView>, - RangePickerFieldSlotProps { +> extends ExportedPickersLayoutSlotProps, + RangePickerFieldSlotProps { tabs?: ExportedBaseTabsProps; toolbar?: ExportedBaseToolbarProps; } @@ -46,32 +43,23 @@ export interface RangeOnlyPickerProps UseRangePositionProps {} export interface UseRangePickerProps< - TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TError, - TExternalProps extends UsePickerViewsProps, + TExternalProps extends UsePickerViewsProps, TAdditionalViewProps extends {}, > extends RangeOnlyPickerProps, - BasePickerProps, TDate, TView, TError, TExternalProps, TAdditionalViewProps> {} + BasePickerProps {} export interface RangePickerAdditionalViewProps extends Pick {} export interface UseRangePickerParams< - TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, - TExternalProps extends UseRangePickerProps< - TDate, - TView, - any, - TExternalProps, - TAdditionalViewProps - >, + TExternalProps extends UseRangePickerProps, TAdditionalViewProps extends {}, > extends Pick< UsePickerParams< - DateRange, - TDate, + PickerRangeValue, TView, RangeFieldSection, TExternalProps, diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.tsx b/packages/x-date-pickers-pro/src/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.tsx index ac09ecea1cb9..a5d29869d304 100644 --- a/packages/x-date-pickers-pro/src/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.tsx @@ -11,13 +11,9 @@ import { DateOrTimeViewWithMeridiem, ExportedBaseTabsProps, PickersProvider, + PickerRangeValue, } from '@mui/x-date-pickers/internals'; -import { - PickerValidDate, - FieldRef, - InferError, - PickerOwnerState, -} from '@mui/x-date-pickers/models'; +import { FieldRef, InferError, PickerOwnerState } from '@mui/x-date-pickers/models'; import { DesktopRangePickerAdditionalViewProps, UseDesktopRangePickerParams, @@ -29,17 +25,15 @@ import { useEnrichedRangePickerFieldProps, } from '../useEnrichedRangePickerFieldProps'; import { getReleaseInfo } from '../../utils/releaseInfo'; -import { DateRange, RangeFieldSection } from '../../../models'; +import { RangeFieldSection } from '../../../models'; import { useRangePosition } from '../useRangePosition'; const releaseInfo = getReleaseInfo(); export const useDesktopRangePicker = < - TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseDesktopRangePickerProps< - TDate, TView, TEnableAccessibleFieldDOMStructure, any, @@ -48,12 +42,7 @@ export const useDesktopRangePicker = < >({ props, ...pickerParams -}: UseDesktopRangePickerParams< - TDate, - TView, - TEnableAccessibleFieldDOMStructure, - TExternalProps ->) => { +}: UseDesktopRangePickerParams) => { useLicenseVerifier('x-date-pickers-pro', releaseInfo); const { @@ -101,8 +90,7 @@ export const useDesktopRangePicker = < fieldProps: pickerFieldProps, ownerState, } = usePicker< - DateRange, - TDate, + PickerRangeValue, TView, RangeFieldSection, TExternalProps, @@ -143,10 +131,9 @@ export const useDesktopRangePicker = < const Field = slots.field; const fieldProps = useSlotProps< typeof Field, - UseDesktopRangePickerSlotProps['field'], + UseDesktopRangePickerSlotProps['field'], RangePickerPropsForFieldSlot< boolean, - TDate, TEnableAccessibleFieldDOMStructure, InferError >, @@ -174,7 +161,6 @@ export const useDesktopRangePicker = < }); const enrichedFieldProps = useEnrichedRangePickerFieldProps< - TDate, TView, TEnableAccessibleFieldDOMStructure, InferError @@ -201,7 +187,7 @@ export const useDesktopRangePicker = < onViewChange: layoutProps.onViewChange, }); - const slotPropsForLayout: PickersLayoutSlotProps, TDate, TView> = { + const slotPropsForLayout: PickersLayoutSlotProps = { ...slotProps, tabs: { ...slotProps?.tabs, diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.types.ts b/packages/x-date-pickers-pro/src/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.types.ts index 47649e3d352b..3b49eff80e25 100644 --- a/packages/x-date-pickers-pro/src/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.types.ts +++ b/packages/x-date-pickers-pro/src/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.types.ts @@ -4,7 +4,6 @@ import { UsePickerViewsProps, DateOrTimeViewWithMeridiem, } from '@mui/x-date-pickers/internals'; -import { PickerValidDate } from '@mui/x-date-pickers/models'; import { RangeOnlyPickerProps, RangePickerAdditionalViewProps, @@ -14,17 +13,14 @@ import { UseRangePickerSlots, } from '../models/useRangePicker'; -export interface UseDesktopRangePickerSlots< - TDate extends PickerValidDate, - TView extends DateOrTimeViewWithMeridiem, -> extends UseRangePickerSlots, +export interface UseDesktopRangePickerSlots + extends UseRangePickerSlots, PickersPopperSlots {} export interface UseDesktopRangePickerSlotProps< - TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, -> extends UseRangePickerSlotProps, +> extends UseRangePickerSlotProps, PickersPopperSlotProps {} export interface DesktopRangeOnlyPickerProps extends RangeOnlyPickerProps { @@ -35,13 +31,11 @@ export interface DesktopRangeOnlyPickerProps extends RangeOnlyPickerProps { } export interface UseDesktopRangePickerProps< - TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError, - TExternalProps extends UsePickerViewsProps, + TExternalProps extends UsePickerViewsProps, > extends UseRangePickerProps< - TDate, TView, TError, TExternalProps, @@ -51,30 +45,23 @@ export interface UseDesktopRangePickerProps< * Overridable component slots. * @default {} */ - slots: UseDesktopRangePickerSlots; + slots: UseDesktopRangePickerSlots; /** * The props used for each component slot. * @default {} */ - slotProps?: UseDesktopRangePickerSlotProps; + slotProps?: UseDesktopRangePickerSlotProps; } export interface DesktopRangePickerAdditionalViewProps extends RangePickerAdditionalViewProps {} export interface UseDesktopRangePickerParams< - TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseDesktopRangePickerProps< - TDate, TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps >, -> extends UseRangePickerParams< - TDate, - TView, - TExternalProps, - DesktopRangePickerAdditionalViewProps - > {} +> extends UseRangePickerParams {} diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerFieldProps.ts b/packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerFieldProps.ts index b1c6ab49004e..efe41c95ec79 100644 --- a/packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerFieldProps.ts +++ b/packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerFieldProps.ts @@ -11,7 +11,6 @@ import { BaseSingleInputFieldProps, FieldSelectedSections, FieldRef, - PickerValidDate, PickerOwnerState, } from '@mui/x-date-pickers/models'; import { @@ -25,13 +24,13 @@ import { UsePickerResponse, WrapperVariant, DateOrTimeViewWithMeridiem, + PickerRangeValue, } from '@mui/x-date-pickers/internals'; import { BaseMultiInputFieldProps, MultiInputFieldSlotRootProps, MultiInputFieldSlotTextFieldProps, RangeFieldSection, - DateRange, RangePosition, FieldType, UseDateRangeFieldProps, @@ -58,14 +57,11 @@ export interface RangePickerFieldSlots extends UseClearableFieldSlots { textField?: React.ElementType; } -export interface RangePickerFieldSlotProps< - TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean, -> extends UseClearableFieldSlotProps { +export interface RangePickerFieldSlotProps + extends UseClearableFieldSlotProps { field?: SlotComponentPropsFromProps< BaseMultiInputFieldProps< - DateRange, - TDate, + PickerRangeValue, RangeFieldSection, TEnableAccessibleFieldDOMStructure, unknown @@ -78,20 +74,18 @@ export interface RangePickerFieldSlotProps< textField?: SlotComponentProps< typeof TextField, {}, - UseDateRangeFieldProps & { position?: RangePosition } + UseDateRangeFieldProps & { position?: RangePosition } >; } export type RangePickerPropsForFieldSlot< TIsSingleInput extends boolean, - TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean, TError, > = | (TIsSingleInput extends true ? BaseSingleInputFieldProps< - DateRange, - TDate, + PickerRangeValue, RangeFieldSection, TEnableAccessibleFieldDOMStructure, TError @@ -99,8 +93,7 @@ export type RangePickerPropsForFieldSlot< : never) | (TIsSingleInput extends false ? BaseMultiInputFieldProps< - DateRange, - TDate, + PickerRangeValue, RangeFieldSection, TEnableAccessibleFieldDOMStructure, TError @@ -109,12 +102,11 @@ export type RangePickerPropsForFieldSlot< export interface UseEnrichedRangePickerFieldPropsParams< TIsSingleInput extends boolean, - TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError, > extends Pick< - UsePickerResponse, TView, RangeFieldSection, any>, + UsePickerResponse, 'open' | 'actions' >, UseRangePositionResponse { @@ -126,11 +118,10 @@ export interface UseEnrichedRangePickerFieldPropsParams< onBlur?: () => void; label?: React.ReactNode; localeText: PickersInputLocaleText | undefined; - pickerSlotProps: RangePickerFieldSlotProps | undefined; + pickerSlotProps: RangePickerFieldSlotProps | undefined; pickerSlots: RangePickerFieldSlots | undefined; fieldProps: RangePickerPropsForFieldSlot< TIsSingleInput, - TDate, TEnableAccessibleFieldDOMStructure, TError >; @@ -143,7 +134,6 @@ export interface UseEnrichedRangePickerFieldPropsParams< } const useMultiInputFieldSlotProps = < - TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError, @@ -169,20 +159,18 @@ const useMultiInputFieldSlotProps = < endFieldRef, }: UseEnrichedRangePickerFieldPropsParams< false, - TDate, TView, TEnableAccessibleFieldDOMStructure, TError >) => { type ReturnType = BaseMultiInputFieldProps< - DateRange, - TDate, + PickerRangeValue, RangeFieldSection, TEnableAccessibleFieldDOMStructure, TError >; - const translations = usePickersTranslations(); + const translations = usePickersTranslations(); const handleStartFieldRef = useForkRef(fieldProps.unstableStartFieldRef, startFieldRef); const handleEndFieldRef = useForkRef(fieldProps.unstableEndFieldRef, endFieldRef); @@ -324,7 +312,6 @@ const useMultiInputFieldSlotProps = < }; const useSingleInputFieldSlotProps = < - TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError, @@ -348,14 +335,12 @@ const useSingleInputFieldSlotProps = < currentView, }: UseEnrichedRangePickerFieldPropsParams< true, - TDate, TView, TEnableAccessibleFieldDOMStructure, TError >) => { type ReturnType = BaseSingleInputFieldProps< - DateRange, - TDate, + PickerRangeValue, RangeFieldSection, TEnableAccessibleFieldDOMStructure, TError @@ -452,14 +437,12 @@ const useSingleInputFieldSlotProps = < }; export const useEnrichedRangePickerFieldProps = < - TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError, >( params: UseEnrichedRangePickerFieldPropsParams< boolean, - TDate, TView, TEnableAccessibleFieldDOMStructure, TError @@ -477,9 +460,8 @@ export const useEnrichedRangePickerFieldProps = < if (params.fieldType === 'multi-input') { return useMultiInputFieldSlotProps( - params as unknown as UseEnrichedRangePickerFieldPropsParams< + params as UseEnrichedRangePickerFieldPropsParams< false, - TDate, TView, TEnableAccessibleFieldDOMStructure, TError @@ -490,7 +472,6 @@ export const useEnrichedRangePickerFieldProps = < return useSingleInputFieldSlotProps( params as UseEnrichedRangePickerFieldPropsParams< true, - TDate, TView, TEnableAccessibleFieldDOMStructure, TError diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useMobileRangePicker/useMobileRangePicker.tsx b/packages/x-date-pickers-pro/src/internals/hooks/useMobileRangePicker/useMobileRangePicker.tsx index c6e759ffd24c..aa9ab1b34b53 100644 --- a/packages/x-date-pickers-pro/src/internals/hooks/useMobileRangePicker/useMobileRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/internals/hooks/useMobileRangePicker/useMobileRangePicker.tsx @@ -9,14 +9,10 @@ import { DateOrTimeViewWithMeridiem, ExportedBaseTabsProps, PickersProvider, + PickerRangeValue, } from '@mui/x-date-pickers/internals'; import { usePickersTranslations } from '@mui/x-date-pickers/hooks'; -import { - PickerValidDate, - FieldRef, - InferError, - PickerOwnerState, -} from '@mui/x-date-pickers/models'; +import { FieldRef, InferError, PickerOwnerState } from '@mui/x-date-pickers/models'; import useId from '@mui/utils/useId'; import { MobileRangePickerAdditionalViewProps, @@ -29,17 +25,15 @@ import { useEnrichedRangePickerFieldProps, } from '../useEnrichedRangePickerFieldProps'; import { getReleaseInfo } from '../../utils/releaseInfo'; -import { DateRange, RangeFieldSection } from '../../../models'; +import { RangeFieldSection } from '../../../models'; import { useRangePosition } from '../useRangePosition'; const releaseInfo = getReleaseInfo(); export const useMobileRangePicker = < - TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseMobileRangePickerProps< - TDate, TView, TEnableAccessibleFieldDOMStructure, any, @@ -48,12 +42,7 @@ export const useMobileRangePicker = < >({ props, ...pickerParams -}: UseMobileRangePickerParams< - TDate, - TView, - TEnableAccessibleFieldDOMStructure, - TExternalProps ->) => { +}: UseMobileRangePickerParams) => { useLicenseVerifier('x-date-pickers-pro', releaseInfo); const { @@ -96,8 +85,7 @@ export const useMobileRangePicker = < fieldProps: pickerFieldProps, ownerState, } = usePicker< - DateRange, - TDate, + PickerRangeValue, TView, RangeFieldSection, TExternalProps, @@ -119,10 +107,9 @@ export const useMobileRangePicker = < const fieldProps = useSlotProps< typeof Field, - UseMobileRangePickerSlotProps['field'], + UseMobileRangePickerSlotProps['field'], RangePickerPropsForFieldSlot< boolean, - TDate, TEnableAccessibleFieldDOMStructure, InferError >, @@ -150,7 +137,6 @@ export const useMobileRangePicker = < const isToolbarHidden = innerSlotProps?.toolbar?.hidden ?? false; const enrichedFieldProps = useEnrichedRangePickerFieldProps< - TDate, TView, TEnableAccessibleFieldDOMStructure, InferError @@ -173,7 +159,7 @@ export const useMobileRangePicker = < endFieldRef, }); - const slotPropsForLayout: PickersLayoutSlotProps, TDate, TView> = { + const slotPropsForLayout: PickersLayoutSlotProps = { ...innerSlotProps, tabs: { ...innerSlotProps?.tabs, diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useMobileRangePicker/useMobileRangePicker.types.ts b/packages/x-date-pickers-pro/src/internals/hooks/useMobileRangePicker/useMobileRangePicker.types.ts index 7305b4516470..fb6d4901af27 100644 --- a/packages/x-date-pickers-pro/src/internals/hooks/useMobileRangePicker/useMobileRangePicker.types.ts +++ b/packages/x-date-pickers-pro/src/internals/hooks/useMobileRangePicker/useMobileRangePicker.types.ts @@ -4,7 +4,6 @@ import { UsePickerViewsProps, DateOrTimeViewWithMeridiem, } from '@mui/x-date-pickers/internals'; -import { PickerValidDate } from '@mui/x-date-pickers/models'; import { RangeOnlyPickerProps, RangePickerAdditionalViewProps, @@ -14,62 +13,45 @@ import { UseRangePickerSlots, } from '../models/useRangePicker'; -export interface UseMobileRangePickerSlots< - TDate extends PickerValidDate, - TView extends DateOrTimeViewWithMeridiem, -> extends UseRangePickerSlots, +export interface UseMobileRangePickerSlots + extends UseRangePickerSlots, PickersModalDialogSlots {} export interface UseMobileRangePickerSlotProps< - TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, -> extends UseRangePickerSlotProps, +> extends UseRangePickerSlotProps, PickersModalDialogSlotProps {} export interface MobileRangeOnlyPickerProps extends RangeOnlyPickerProps {} export interface UseMobileRangePickerProps< - TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError, - TExternalProps extends UsePickerViewsProps, -> extends UseRangePickerProps< - TDate, - TView, - TError, - TExternalProps, - MobileRangePickerAdditionalViewProps - > { + TExternalProps extends UsePickerViewsProps, +> extends UseRangePickerProps { /** * Overridable component slots. * @default {} */ - slots: UseMobileRangePickerSlots; + slots: UseMobileRangePickerSlots; /** * The props used for each component slot. * @default {} */ - slotProps?: UseMobileRangePickerSlotProps; + slotProps?: UseMobileRangePickerSlotProps; } export interface MobileRangePickerAdditionalViewProps extends RangePickerAdditionalViewProps {} export interface UseMobileRangePickerParams< - TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseMobileRangePickerProps< - TDate, TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps >, -> extends UseRangePickerParams< - TDate, - TView, - TExternalProps, - MobileRangePickerAdditionalViewProps - > {} +> extends UseRangePickerParams {} diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputFieldSelectedSections.ts b/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputFieldSelectedSections.ts index 4f6987aa2361..68e10d651b1a 100644 --- a/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputFieldSelectedSections.ts +++ b/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputFieldSelectedSections.ts @@ -7,7 +7,7 @@ import { RangeFieldSection } from '../../models'; interface UseMultiInputFieldSelectedSectionsParams extends Pick< - UseFieldInternalProps, + UseFieldInternalProps, 'selectedSections' | 'onSelectedSectionsChange' > { unstableStartFieldRef?: React.Ref>; diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/useMultiInputDateRangeField.ts b/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/useMultiInputDateRangeField.ts index 977073fc4725..5aecc79b1600 100644 --- a/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/useMultiInputDateRangeField.ts +++ b/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/useMultiInputDateRangeField.ts @@ -3,6 +3,7 @@ import { unstable_useDateField as useDateField } from '@mui/x-date-pickers/DateF import { FieldChangeHandler, FieldChangeHandlerContext, + PickerRangeValue, UseFieldResponse, useControlledValueWithTimezone, useDefaultizedDateField, @@ -16,12 +17,11 @@ import { import { validateDateRange } from '../../../validation'; import { rangeValueManager } from '../../utils/valueManagers'; import type { UseMultiInputRangeFieldResponse } from './useMultiInputRangeField.types'; -import { DateRangeValidationError, DateRange } from '../../../models'; +import { DateRangeValidationError } from '../../../models'; import { excludeProps } from './shared'; import { useMultiInputFieldSelectedSections } from '../useMultiInputFieldSelectedSections'; export const useMultiInputDateRangeField = < - TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean, TTextFieldSlotProps extends {}, >({ @@ -31,13 +31,11 @@ export const useMultiInputDateRangeField = < endTextFieldProps, unstableEndFieldRef, }: UseMultiInputDateRangeFieldParams< - TDate, TEnableAccessibleFieldDOMStructure, TTextFieldSlotProps >): UseMultiInputRangeFieldResponse => { const sharedProps = useDefaultizedDateField< - TDate, - UseMultiInputDateRangeFieldProps, + UseMultiInputDateRangeFieldProps, typeof inSharedProps >(inSharedProps); @@ -77,9 +75,9 @@ export const useMultiInputDateRangeField = < // TODO: Maybe export utility from `useField` instead of copy/pasting the logic const buildChangeHandler = ( index: 0 | 1, - ): FieldChangeHandler => { + ): FieldChangeHandler => { return (newDate, rawContext) => { - const newDateRange: DateRange = + const newDateRange: PickerRangeValue = index === 0 ? [newDate, value[1]] : [value[0], newDate]; const context: FieldChangeHandlerContext = { @@ -135,16 +133,13 @@ export const useMultiInputDateRangeField = < }; const startDateResponse = useDateField< - TDate, TEnableAccessibleFieldDOMStructure, typeof startFieldProps >(startFieldProps) as UseFieldResponse; - const endDateResponse = useDateField< - TDate, - TEnableAccessibleFieldDOMStructure, - typeof endFieldProps - >(endFieldProps) as UseFieldResponse; + const endDateResponse = useDateField( + endFieldProps, + ) as UseFieldResponse; /* TODO: Undo this change when a clearable behavior for multiple input range fields is implemented */ return { diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.ts b/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.ts index 14c14747d4e6..6fee46fcc61a 100644 --- a/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.ts +++ b/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.ts @@ -3,6 +3,7 @@ import { unstable_useDateTimeField as useDateTimeField } from '@mui/x-date-picke import { FieldChangeHandler, FieldChangeHandlerContext, + PickerRangeValue, UseFieldResponse, useControlledValueWithTimezone, useDefaultizedDateTimeField, @@ -13,7 +14,7 @@ import type { UseMultiInputDateTimeRangeFieldParams, UseMultiInputDateTimeRangeFieldProps, } from '../../../MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.types'; -import { DateTimeRangeValidationError, DateRange } from '../../../models'; +import { DateTimeRangeValidationError } from '../../../models'; import { validateDateTimeRange } from '../../../validation'; import { rangeValueManager } from '../../utils/valueManagers'; import type { UseMultiInputRangeFieldResponse } from './useMultiInputRangeField.types'; @@ -21,7 +22,6 @@ import { excludeProps } from './shared'; import { useMultiInputFieldSelectedSections } from '../useMultiInputFieldSelectedSections'; export const useMultiInputDateTimeRangeField = < - TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean, TTextFieldSlotProps extends {}, >({ @@ -31,13 +31,11 @@ export const useMultiInputDateTimeRangeField = < endTextFieldProps, unstableEndFieldRef, }: UseMultiInputDateTimeRangeFieldParams< - TDate, TEnableAccessibleFieldDOMStructure, TTextFieldSlotProps >): UseMultiInputRangeFieldResponse => { const sharedProps = useDefaultizedDateTimeField< - TDate, - UseMultiInputDateTimeRangeFieldProps, + UseMultiInputDateTimeRangeFieldProps, typeof inSharedProps >(inSharedProps); @@ -77,9 +75,9 @@ export const useMultiInputDateTimeRangeField = < // TODO: Maybe export utility from `useField` instead of copy/pasting the logic const buildChangeHandler = ( index: 0 | 1, - ): FieldChangeHandler => { + ): FieldChangeHandler => { return (newDate, rawContext) => { - const newDateRange: DateRange = + const newDateRange: PickerRangeValue = index === 0 ? [newDate, value[1]] : [value[0], newDate]; const context: FieldChangeHandlerContext = { @@ -135,13 +133,11 @@ export const useMultiInputDateTimeRangeField = < }; const startDateResponse = useDateTimeField< - TDate, TEnableAccessibleFieldDOMStructure, typeof startFieldProps >(startFieldProps) as UseFieldResponse; const endDateResponse = useDateTimeField< - TDate, TEnableAccessibleFieldDOMStructure, typeof endFieldProps >(endFieldProps) as UseFieldResponse; diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/useMultiInputTimeRangeField.ts b/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/useMultiInputTimeRangeField.ts index 1fc2affc9ac6..6fbf229d94f6 100644 --- a/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/useMultiInputTimeRangeField.ts +++ b/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/useMultiInputTimeRangeField.ts @@ -3,6 +3,7 @@ import { unstable_useTimeField as useTimeField } from '@mui/x-date-pickers/TimeF import { FieldChangeHandler, FieldChangeHandlerContext, + PickerRangeValue, UseFieldResponse, useControlledValueWithTimezone, useDefaultizedTimeField, @@ -10,7 +11,7 @@ import { import { useValidation } from '@mui/x-date-pickers/validation'; import { PickerValidDate, TimeValidationError } from '@mui/x-date-pickers/models'; import { validateTimeRange } from '../../../validation'; -import { TimeRangeValidationError, DateRange } from '../../../models'; +import { TimeRangeValidationError } from '../../../models'; import type { UseMultiInputTimeRangeFieldParams, UseMultiInputTimeRangeFieldProps, @@ -21,7 +22,6 @@ import { excludeProps } from './shared'; import { useMultiInputFieldSelectedSections } from '../useMultiInputFieldSelectedSections'; export const useMultiInputTimeRangeField = < - TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean, TTextFieldSlotProps extends {}, >({ @@ -31,13 +31,11 @@ export const useMultiInputTimeRangeField = < endTextFieldProps, unstableEndFieldRef, }: UseMultiInputTimeRangeFieldParams< - TDate, TEnableAccessibleFieldDOMStructure, TTextFieldSlotProps >): UseMultiInputRangeFieldResponse => { const sharedProps = useDefaultizedTimeField< - TDate, - UseMultiInputTimeRangeFieldProps, + UseMultiInputTimeRangeFieldProps, typeof inSharedProps >(inSharedProps); @@ -77,9 +75,9 @@ export const useMultiInputTimeRangeField = < // TODO: Maybe export utility from `useField` instead of copy/pasting the logic const buildChangeHandler = ( index: 0 | 1, - ): FieldChangeHandler => { + ): FieldChangeHandler => { return (newDate, rawContext) => { - const newDateRange: DateRange = + const newDateRange: PickerRangeValue = index === 0 ? [newDate, value[1]] : [value[0], newDate]; const context: FieldChangeHandlerContext = { @@ -135,16 +133,13 @@ export const useMultiInputTimeRangeField = < }; const startDateResponse = useTimeField< - TDate, TEnableAccessibleFieldDOMStructure, typeof startFieldProps >(startFieldProps) as UseFieldResponse; - const endDateResponse = useTimeField< - TDate, - TEnableAccessibleFieldDOMStructure, - typeof endFieldProps - >(endFieldProps) as UseFieldResponse; + const endDateResponse = useTimeField( + endFieldProps, + ) as UseFieldResponse; /* TODO: Undo this change when a clearable behavior for multiple input range fields is implemented */ return { diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useStaticRangePicker/useStaticRangePicker.tsx b/packages/x-date-pickers-pro/src/internals/hooks/useStaticRangePicker/useStaticRangePicker.tsx index 24b10402c689..7fdd442279fc 100644 --- a/packages/x-date-pickers-pro/src/internals/hooks/useStaticRangePicker/useStaticRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/internals/hooks/useStaticRangePicker/useStaticRangePicker.tsx @@ -8,41 +8,39 @@ import { ExportedBaseToolbarProps, DateOrTimeViewWithMeridiem, PickersProvider, + PickerRangeValue, } from '@mui/x-date-pickers/internals'; -import { PickerValidDate } from '@mui/x-date-pickers/models'; import { UseStaticRangePickerParams, UseStaticRangePickerProps, } from './useStaticRangePicker.types'; -import { DateRange, RangeFieldSection } from '../../../models'; +import { RangeFieldSection } from '../../../models'; import { useRangePosition } from '../useRangePosition'; const PickerStaticLayout = styled(PickersLayout)(({ theme }) => ({ overflow: 'hidden', minWidth: DIALOG_WIDTH, backgroundColor: (theme.vars || theme).palette.background.paper, -})) as unknown as typeof PickersLayout; +})) as typeof PickersLayout; /** * Hook managing all the range static pickers: * - StaticDateRangePicker */ export const useStaticRangePicker = < - TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, - TExternalProps extends UseStaticRangePickerProps, + TExternalProps extends UseStaticRangePickerProps, >({ props, ref, ...pickerParams -}: UseStaticRangePickerParams) => { +}: UseStaticRangePickerParams) => { const { localeText, slots, slotProps, className, sx, displayStaticWrapperAs, autoFocus } = props; const { rangePosition, onRangePositionChange } = useRangePosition(props); const { layoutProps, providerProps, renderCurrentView } = usePicker< - DateRange, - TDate, + PickerRangeValue, TView, RangeFieldSection, TExternalProps, @@ -61,7 +59,7 @@ export const useStaticRangePicker = < }); const Layout = slots?.layout ?? PickerStaticLayout; - const slotPropsForLayout: PickersLayoutSlotProps, TDate, TView> = { + const slotPropsForLayout: PickersLayoutSlotProps = { ...slotProps, toolbar: { ...slotProps?.toolbar, diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useStaticRangePicker/useStaticRangePicker.types.ts b/packages/x-date-pickers-pro/src/internals/hooks/useStaticRangePicker/useStaticRangePicker.types.ts index dbabeb05d587..ebe5fcbf95d1 100644 --- a/packages/x-date-pickers-pro/src/internals/hooks/useStaticRangePicker/useStaticRangePicker.types.ts +++ b/packages/x-date-pickers-pro/src/internals/hooks/useStaticRangePicker/useStaticRangePicker.types.ts @@ -5,54 +5,48 @@ import { ExportedBaseToolbarProps, StaticOnlyPickerProps, DateOrTimeViewWithMeridiem, + PickerRangeValue, } from '@mui/x-date-pickers/internals'; -import { PickerValidDate } from '@mui/x-date-pickers/models'; import { ExportedPickersLayoutSlots, ExportedPickersLayoutSlotProps, } from '@mui/x-date-pickers/PickersLayout'; -import { RangeFieldSection, DateRange } from '../../../models'; +import { RangeFieldSection } from '../../../models'; import { UseRangePositionProps } from '../useRangePosition'; -export interface UseStaticRangePickerSlots< - TDate extends PickerValidDate, - TView extends DateOrTimeViewWithMeridiem, -> extends ExportedPickersLayoutSlots, TDate, TView> {} +export interface UseStaticRangePickerSlots + extends ExportedPickersLayoutSlots {} -export interface UseStaticRangePickerSlotProps< - TDate extends PickerValidDate, - TView extends DateOrTimeViewWithMeridiem, -> extends ExportedPickersLayoutSlotProps, TDate, TView> { +export interface UseStaticRangePickerSlotProps + extends ExportedPickersLayoutSlotProps { toolbar?: ExportedBaseToolbarProps; } export interface StaticRangeOnlyPickerProps extends StaticOnlyPickerProps, UseRangePositionProps {} export interface UseStaticRangePickerProps< - TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TError, - TExternalProps extends UseStaticRangePickerProps, -> extends BasePickerProps, TDate, TView, TError, TExternalProps, {}>, + TExternalProps extends UseStaticRangePickerProps, +> extends BasePickerProps, StaticRangeOnlyPickerProps { /** * Overridable components. * @default {} */ - slots?: UseStaticRangePickerSlots; + slots?: UseStaticRangePickerSlots; /** * The props used for each component slot. * @default {} */ - slotProps?: UseStaticRangePickerSlotProps; + slotProps?: UseStaticRangePickerSlotProps; } export interface UseStaticRangePickerParams< - TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, - TExternalProps extends UseStaticRangePickerProps, + TExternalProps extends UseStaticRangePickerProps, > extends Pick< - UsePickerParams, TDate, TView, RangeFieldSection, TExternalProps, {}>, + UsePickerParams, 'valueManager' | 'valueType' | 'validator' > { props: TExternalProps; diff --git a/packages/x-date-pickers-pro/src/internals/models/dateRange.ts b/packages/x-date-pickers-pro/src/internals/models/dateRange.ts index 0921a74b2caa..63f03bea15a8 100644 --- a/packages/x-date-pickers-pro/src/internals/models/dateRange.ts +++ b/packages/x-date-pickers-pro/src/internals/models/dateRange.ts @@ -3,16 +3,15 @@ import { PickerValidDate } from '@mui/x-date-pickers/models'; /** * Props used to validate a day value in range pickers. */ -export interface DayRangeValidationProps { +export interface DayRangeValidationProps { /** * Disable specific date. * * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance. * - * @template TDate - * @param {TDate} day The date to test. + * @param {PickerValidDate} day The date to test. * @param {string} position The date to test, 'start' or 'end'. * @returns {boolean} Returns `true` if the date should be disabled. */ - shouldDisableDate?: (day: TDate, position: 'start' | 'end') => boolean; + shouldDisableDate?: (day: PickerValidDate, position: 'start' | 'end') => boolean; } diff --git a/packages/x-date-pickers-pro/src/internals/models/dateTimeRange.ts b/packages/x-date-pickers-pro/src/internals/models/dateTimeRange.ts index 992a8d27ebff..efcd335df353 100644 --- a/packages/x-date-pickers-pro/src/internals/models/dateTimeRange.ts +++ b/packages/x-date-pickers-pro/src/internals/models/dateTimeRange.ts @@ -3,24 +3,20 @@ import { UseFieldInternalProps, DateOrTimeViewWithMeridiem, AmPmProps, + PickerRangeValue, } from '@mui/x-date-pickers/internals'; -import { PickerValidDate } from '@mui/x-date-pickers/models'; import { DateTimeRangeValidationError, RangeFieldSection, - DateRange, RangeFieldSeparatorProps, } from '../../models'; import { ExportedValidateDateTimeRangeProps } from '../../validation/validateDateTimeRange'; -export interface UseDateTimeRangeFieldProps< - TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean, -> extends MakeOptional< +export interface UseDateTimeRangeFieldProps + extends MakeOptional< Omit< UseFieldInternalProps< - DateRange, - TDate, + PickerRangeValue, RangeFieldSection, TEnableAccessibleFieldDOMStructure, DateTimeRangeValidationError @@ -30,7 +26,7 @@ export interface UseDateTimeRangeFieldProps< 'format' >, RangeFieldSeparatorProps, - ExportedValidateDateTimeRangeProps, + ExportedValidateDateTimeRangeProps, AmPmProps {} export type DateTimeRangePickerView = Exclude; diff --git a/packages/x-date-pickers-pro/src/internals/models/timeRange.ts b/packages/x-date-pickers-pro/src/internals/models/timeRange.ts index 297b75e8f4a9..129069c9df56 100644 --- a/packages/x-date-pickers-pro/src/internals/models/timeRange.ts +++ b/packages/x-date-pickers-pro/src/internals/models/timeRange.ts @@ -1,22 +1,17 @@ import { MakeOptional } from '@mui/x-internals/types'; -import { UseFieldInternalProps, AmPmProps } from '@mui/x-date-pickers/internals'; -import { PickerValidDate } from '@mui/x-date-pickers/models'; +import { UseFieldInternalProps, AmPmProps, PickerRangeValue } from '@mui/x-date-pickers/internals'; import { TimeRangeValidationError, RangeFieldSection, - DateRange, RangeFieldSeparatorProps, } from '../../models'; import type { ExportedValidateTimeRangeProps } from '../../validation/validateTimeRange'; -export interface UseTimeRangeFieldProps< - TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean, -> extends MakeOptional< +export interface UseTimeRangeFieldProps + extends MakeOptional< Omit< UseFieldInternalProps< - DateRange, - TDate, + PickerRangeValue, RangeFieldSection, TEnableAccessibleFieldDOMStructure, TimeRangeValidationError @@ -26,5 +21,5 @@ export interface UseTimeRangeFieldProps< 'format' >, RangeFieldSeparatorProps, - ExportedValidateTimeRangeProps, + ExportedValidateTimeRangeProps, AmPmProps {} diff --git a/packages/x-date-pickers-pro/src/internals/utils/date-range-manager.test.ts b/packages/x-date-pickers-pro/src/internals/utils/date-range-manager.test.ts index 1b49f7b99c60..6f96c2411492 100644 --- a/packages/x-date-pickers-pro/src/internals/utils/date-range-manager.test.ts +++ b/packages/x-date-pickers-pro/src/internals/utils/date-range-manager.test.ts @@ -1,5 +1,6 @@ import { expect } from 'chai'; import { adapterToUse } from 'test/utils/pickers'; +import { PickerValidDate } from '@mui/x-date-pickers/models'; import { calculateRangeChange, calculateRangePreview } from './date-range-manager'; import { DateRange } from '../../models'; @@ -103,7 +104,7 @@ describe('date-range-manager', () => { expect( calculateRangeChange({ utils: adapterToUse, - range: range as DateRange, + range: range as DateRange, newDate, rangePosition, allowRangeFlip, @@ -170,7 +171,7 @@ describe('date-range-manager', () => { expect( calculateRangePreview({ utils: adapterToUse, - range: range as DateRange, + range: range as DateRange, newDate, rangePosition, }), diff --git a/packages/x-date-pickers-pro/src/internals/utils/date-range-manager.ts b/packages/x-date-pickers-pro/src/internals/utils/date-range-manager.ts index 94d5d02e0eb0..32f5e29d2a16 100644 --- a/packages/x-date-pickers-pro/src/internals/utils/date-range-manager.ts +++ b/packages/x-date-pickers-pro/src/internals/utils/date-range-manager.ts @@ -1,11 +1,11 @@ import { MuiPickersAdapter, PickerValidDate } from '@mui/x-date-pickers/models'; -import { mergeDateAndTime } from '@mui/x-date-pickers/internals'; -import { DateRange, RangePosition } from '../../models'; +import { mergeDateAndTime, PickerRangeValue } from '@mui/x-date-pickers/internals'; +import { RangePosition } from '../../models'; -interface CalculateRangeChangeOptions { - utils: MuiPickersAdapter; - range: DateRange; - newDate: TDate | null; +interface CalculateRangeChangeOptions { + utils: MuiPickersAdapter; + range: PickerRangeValue; + newDate: PickerValidDate | null; rangePosition: RangePosition; /** * Should allow flipping range `start` and `end` dates if the `newDate` would result in a new range creation. @@ -16,19 +16,19 @@ interface CalculateRangeChangeOptions { shouldMergeDateAndTime?: boolean; } -interface CalculateRangeChangeResponse { +interface CalculateRangeChangeResponse { nextSelection: RangePosition; - newRange: DateRange; + newRange: PickerRangeValue; } -export function calculateRangeChange({ +export function calculateRangeChange({ utils, range, newDate: selectedDate, rangePosition, allowRangeFlip = false, shouldMergeDateAndTime = false, -}: CalculateRangeChangeOptions): CalculateRangeChangeResponse { +}: CalculateRangeChangeOptions): CalculateRangeChangeResponse { const [start, end] = range; if (shouldMergeDateAndTime && selectedDate) { @@ -42,7 +42,7 @@ export function calculateRangeChange({ } if (rangePosition === 'start') { - const truthyResult: CalculateRangeChangeResponse = allowRangeFlip + const truthyResult: CalculateRangeChangeResponse = allowRangeFlip ? { nextSelection: 'start', newRange: [end!, selectedDate] } : { nextSelection: 'end', newRange: [selectedDate, null] }; return Boolean(end) && utils.isAfter(selectedDate!, end!) @@ -50,7 +50,7 @@ export function calculateRangeChange({ : { nextSelection: 'end', newRange: [selectedDate, end] }; } - const truthyResult: CalculateRangeChangeResponse = allowRangeFlip + const truthyResult: CalculateRangeChangeResponse = allowRangeFlip ? { nextSelection: 'end', newRange: [selectedDate, start!] } : { nextSelection: 'end', newRange: [selectedDate, null] }; return Boolean(start) && utils.isBeforeDay(selectedDate!, start!) @@ -58,15 +58,13 @@ export function calculateRangeChange({ : { nextSelection: 'start', newRange: [start, selectedDate] }; } -export function calculateRangePreview( - options: CalculateRangeChangeOptions, -): DateRange { +export function calculateRangePreview(options: CalculateRangeChangeOptions): PickerRangeValue { if (options.newDate == null) { return [null, null]; } const [start, end] = options.range; - const { newRange } = calculateRangeChange(options as CalculateRangeChangeOptions); + const { newRange } = calculateRangeChange(options as CalculateRangeChangeOptions); if (!start || !end) { return newRange; diff --git a/packages/x-date-pickers-pro/src/internals/utils/date-utils.ts b/packages/x-date-pickers-pro/src/internals/utils/date-utils.ts index 1d35d15cf667..8ca8620be892 100644 --- a/packages/x-date-pickers-pro/src/internals/utils/date-utils.ts +++ b/packages/x-date-pickers-pro/src/internals/utils/date-utils.ts @@ -1,33 +1,33 @@ import { MuiPickersAdapter, PickerValidDate } from '@mui/x-date-pickers/models'; -import { DateRange, NonEmptyDateRange } from '../../models'; +import { PickerRangeValue } from '@mui/x-date-pickers/internals'; -export const isRangeValid = ( - utils: MuiPickersAdapter, - range: DateRange | null, -): range is NonEmptyDateRange => { +export const isRangeValid = ( + utils: MuiPickersAdapter, + range: PickerRangeValue | null, +): range is [PickerValidDate, PickerValidDate] => { return Boolean(range && range[0] && range[1] && !utils.isBefore(range[1], range[0])); }; -export const isWithinRange = ( - utils: MuiPickersAdapter, - day: TDate, - range: DateRange | null, +export const isWithinRange = ( + utils: MuiPickersAdapter, + day: PickerValidDate, + range: PickerRangeValue | null, ) => { return isRangeValid(utils, range) && utils.isWithinRange(day, range); }; -export const isStartOfRange = ( - utils: MuiPickersAdapter, - day: TDate, - range: DateRange | null, +export const isStartOfRange = ( + utils: MuiPickersAdapter, + day: PickerValidDate, + range: PickerRangeValue | null, ) => { return isRangeValid(utils, range) && utils.isSameDay(day, range[0]!); }; -export const isEndOfRange = ( - utils: MuiPickersAdapter, - day: TDate, - range: DateRange | null, +export const isEndOfRange = ( + utils: MuiPickersAdapter, + day: PickerValidDate, + range: PickerRangeValue | null, ) => { return isRangeValid(utils, range) && utils.isSameDay(day, range[1]!); }; diff --git a/packages/x-date-pickers-pro/src/internals/utils/valueManagers.ts b/packages/x-date-pickers-pro/src/internals/utils/valueManagers.ts index 54d0c7234c51..f3f8200c6795 100644 --- a/packages/x-date-pickers-pro/src/internals/utils/valueManagers.ts +++ b/packages/x-date-pickers-pro/src/internals/utils/valueManagers.ts @@ -7,6 +7,7 @@ import { areDatesEqual, getTodayDate, getDefaultReferenceDate, + PickerRangeValue, } from '@mui/x-date-pickers/internals'; import { PickerValidDate } from '@mui/x-date-pickers/models'; import { splitDateRangeSections, removeLastSeparator } from './date-fields-utils'; @@ -15,18 +16,16 @@ import type { DateTimeRangeValidationError, TimeRangeValidationError, RangeFieldSection, - DateRange, RangePosition, } from '../../models'; export type RangePickerValueManager< TValue = [any, any], - TDate extends PickerValidDate = any, TError extends | DateRangeValidationError | TimeRangeValidationError | DateTimeRangeValidationError = any, -> = PickerValueManager; +> = PickerValueManager; export const rangeValueManager: RangePickerValueManager = { emptyValue: [null, null], @@ -50,7 +49,7 @@ export const rangeValueManager: RangePickerValueManager = { ]; }, cleanValue: (utils, value) => - value.map((date) => replaceInvalidDateByNull(utils, date)) as DateRange, + value.map((date) => replaceInvalidDateByNull(utils, date)) as PickerRangeValue, areValuesEqual: (utils, a, b) => areDatesEqual(utils, a[0], b[0]) && areDatesEqual(utils, a[1], b[1]), isSameError: (a, b) => b !== null && a[1] === b[1] && a[0] === b[0], @@ -74,11 +73,11 @@ export const rangeValueManager: RangePickerValueManager = { ], }; -export const getRangeFieldValueManager = ({ +export const getRangeFieldValueManager = ({ dateSeparator = '–', }: { dateSeparator: string | undefined; -}): FieldValueManager, TDate, RangeFieldSection> => ({ +}): FieldValueManager => ({ updateReferenceValue: (utils, value, prevReferenceValue) => { const shouldKeepStartDate = value[0] != null && utils.isValid(value[0]); const shouldKeepEndDate = value[1] != null && utils.isValid(value[1]); @@ -104,7 +103,7 @@ export const getRangeFieldValueManager = ({ : splitDateRangeSections(fallbackSections); const getSections = ( - newDate: any | null, + newDate: PickerValidDate | null, fallbackDateSections: RangeFieldSection[] | null, position: RangePosition, ) => { @@ -114,7 +113,7 @@ export const getRangeFieldValueManager = ({ return fallbackDateSections; } - const sections = getSectionsFromDate(newDate); + const sections = getSectionsFromDate(newDate!); return sections.map((section, sectionIndex) => { if (sectionIndex === sections.length - 1 && position === 'start') { return { @@ -162,13 +161,13 @@ export const getRangeFieldValueManager = ({ } return parseDate(dateStr.trim(), referenceValue[index]!); - }) as DateRange; + }) as PickerRangeValue; }, getActiveDateManager: (utils, state, activeSection) => { const index = activeSection.dateName === 'start' ? 0 : 1; - const updateDateInRange = (newDate: TDate | null, prevDateRange: DateRange) => - (index === 0 ? [newDate, prevDateRange[1]] : [prevDateRange[0], newDate]) as DateRange; + const updateDateInRange = (newDate: PickerValidDate | null, prevDateRange: PickerRangeValue) => + (index === 0 ? [newDate, prevDateRange[1]] : [prevDateRange[0], newDate]) as PickerRangeValue; return { date: state.value[index], diff --git a/packages/x-date-pickers-pro/src/models/dateRange.ts b/packages/x-date-pickers-pro/src/models/dateRange.ts index 039b9962c768..88511e4c0e6a 100644 --- a/packages/x-date-pickers-pro/src/models/dateRange.ts +++ b/packages/x-date-pickers-pro/src/models/dateRange.ts @@ -1,19 +1,14 @@ import { MakeOptional } from '@mui/x-internals/types'; -import { UseFieldInternalProps } from '@mui/x-date-pickers/internals'; -import { PickerValidDate } from '@mui/x-date-pickers/models'; +import { UseFieldInternalProps, PickerRangeValue } from '@mui/x-date-pickers/internals'; import { RangeFieldSection, RangeFieldSeparatorProps } from './fields'; import { DateRangeValidationError } from './validation'; -import { DateRange } from './range'; import type { ExportedValidateDateRangeProps } from '../validation/validateDateRange'; -export interface UseDateRangeFieldProps< - TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean, -> extends MakeOptional< +export interface UseDateRangeFieldProps + extends MakeOptional< Omit< UseFieldInternalProps< - DateRange, - TDate, + PickerRangeValue, RangeFieldSection, TEnableAccessibleFieldDOMStructure, DateRangeValidationError @@ -23,4 +18,4 @@ export interface UseDateRangeFieldProps< 'format' >, RangeFieldSeparatorProps, - ExportedValidateDateRangeProps {} + ExportedValidateDateRangeProps {} diff --git a/packages/x-date-pickers-pro/src/models/fields.ts b/packages/x-date-pickers-pro/src/models/fields.ts index 169c946d77c3..12060a16d003 100644 --- a/packages/x-date-pickers-pro/src/models/fields.ts +++ b/packages/x-date-pickers-pro/src/models/fields.ts @@ -5,7 +5,6 @@ import { BaseSingleInputPickersTextFieldProps, FieldRef, FieldSection, - PickerValidDate, } from '@mui/x-date-pickers/models'; import { UseClearableFieldResponse } from '@mui/x-date-pickers/hooks'; import { SxProps } from '@mui/material/styles'; @@ -64,12 +63,11 @@ export interface RangeFieldSeparatorProps { */ export interface BaseMultiInputFieldProps< TValue, - TDate extends PickerValidDate, TSection extends FieldSection, TEnableAccessibleFieldDOMStructure extends boolean, TError, > extends Omit< - BaseFieldProps, + BaseFieldProps, 'unstableFieldRef' >, RangeFieldSeparatorProps { diff --git a/packages/x-date-pickers-pro/src/models/range.ts b/packages/x-date-pickers-pro/src/models/range.ts index 92bbff21e1d1..d0a4b4de2b1d 100644 --- a/packages/x-date-pickers-pro/src/models/range.ts +++ b/packages/x-date-pickers-pro/src/models/range.ts @@ -1,7 +1,9 @@ import { PickerValidDate } from '@mui/x-date-pickers/models'; +// Should not be used in our packages, instead use `PickerRangeValue` from the community package. export type DateRange = [TDate | null, TDate | null]; -export type NonEmptyDateRange = [TDate, TDate]; +// TODO v8: Remove +export type NonEmptyDateRange = [PickerValidDate, PickerValidDate]; export type RangePosition = 'start' | 'end'; diff --git a/packages/x-date-pickers-pro/src/themeAugmentation/props.d.ts b/packages/x-date-pickers-pro/src/themeAugmentation/props.d.ts index 6536f000c494..c2254363c7ac 100644 --- a/packages/x-date-pickers-pro/src/themeAugmentation/props.d.ts +++ b/packages/x-date-pickers-pro/src/themeAugmentation/props.d.ts @@ -1,4 +1,3 @@ -import { PickerValidDate } from '@mui/x-date-pickers/models'; import { DateRangePickerDayProps } from '../DateRangePickerDay'; import { MultiInputDateRangeFieldProps } from '../MultiInputDateRangeField/MultiInputDateRangeField.types'; import { SingleInputDateRangeFieldProps } from '../SingleInputDateRangeField/SingleInputDateRangeField.types'; @@ -20,33 +19,33 @@ import { ExportedDateTimeRangePickerToolbarProps } from '../DateTimeRangePicker/ import { ExportedPickersRangeCalendarHeaderProps } from '../PickersRangeCalendarHeader'; export interface PickersProComponentsPropsList { - MuiDateRangeCalendar: DateRangeCalendarProps; - MuiDateRangePickerDay: DateRangePickerDayProps; + MuiDateRangeCalendar: DateRangeCalendarProps; + MuiDateRangePickerDay: DateRangePickerDayProps; MuiDateTimeRangePickerTabs: ExportedDateTimeRangePickerTabsProps; MuiDateRangePickerToolbar: ExportedDateRangePickerToolbarProps; MuiDateTimeRangePickerToolbar: ExportedDateTimeRangePickerToolbarProps; - MuiPickersRangeCalendarHeader: ExportedPickersRangeCalendarHeaderProps; + MuiPickersRangeCalendarHeader: ExportedPickersRangeCalendarHeaderProps; // Multi input range fields - MuiMultiInputDateRangeField: MultiInputDateRangeFieldProps; - MuiMultiInputDateTimeRangeField: MultiInputDateTimeRangeFieldProps; - MuiMultiInputTimeRangeField: MultiInputTimeRangeFieldProps; + MuiMultiInputDateRangeField: MultiInputDateRangeFieldProps; + MuiMultiInputDateTimeRangeField: MultiInputDateTimeRangeFieldProps; + MuiMultiInputTimeRangeField: MultiInputTimeRangeFieldProps; // Single input range fields - MuiSingleInputDateRangeField: SingleInputDateRangeFieldProps; - MuiSingleInputDateTimeRangeField: SingleInputDateTimeRangeFieldProps; - MuiSingleInputTimeRangeField: SingleInputTimeRangeFieldProps; + MuiSingleInputDateRangeField: SingleInputDateRangeFieldProps; + MuiSingleInputDateTimeRangeField: SingleInputDateTimeRangeFieldProps; + MuiSingleInputTimeRangeField: SingleInputTimeRangeFieldProps; // Date Range Pickers - MuiDateRangePicker: DateRangePickerProps; - MuiDesktopDateRangePicker: DesktopDateRangePickerProps; - MuiMobileDateRangePicker: MobileDateRangePickerProps; - MuiStaticDateRangePicker: StaticDateRangePickerProps; + MuiDateRangePicker: DateRangePickerProps; + MuiDesktopDateRangePicker: DesktopDateRangePickerProps; + MuiMobileDateRangePicker: MobileDateRangePickerProps; + MuiStaticDateRangePicker: StaticDateRangePickerProps; // Date Time Range Pickers - MuiDateTimeRangePicker: DateTimeRangePickerProps; - MuiDesktopDateTimeRangePicker: DesktopDateTimeRangePickerProps; - MuiMobileDateTimeRangePicker: MobileDateTimeRangePickerProps; + MuiDateTimeRangePicker: DateTimeRangePickerProps; + MuiDesktopDateTimeRangePicker: DesktopDateTimeRangePickerProps; + MuiMobileDateTimeRangePicker: MobileDateTimeRangePickerProps; } declare module '@mui/material/styles' { diff --git a/packages/x-date-pickers-pro/src/validation/validateDateRange.ts b/packages/x-date-pickers-pro/src/validation/validateDateRange.ts index bf05511c9a38..44effa217b60 100644 --- a/packages/x-date-pickers-pro/src/validation/validateDateRange.ts +++ b/packages/x-date-pickers-pro/src/validation/validateDateRange.ts @@ -1,27 +1,25 @@ -import { PickerValidDate } from '@mui/x-date-pickers/models'; import { validateDate, Validator } from '@mui/x-date-pickers/validation'; -import { BaseDateValidationProps } from '@mui/x-date-pickers/internals'; +import { BaseDateValidationProps, PickerRangeValue } from '@mui/x-date-pickers/internals'; import { isRangeValid } from '../internals/utils/date-utils'; import { DayRangeValidationProps } from '../internals/models/dateRange'; -import { DateRangeValidationError, DateRange } from '../models'; +import { DateRangeValidationError } from '../models'; import { rangeValueManager } from '../internals/utils/valueManagers'; /** * Validation props used by the Date Range Picker, Date Range Field and Date Range Calendar components. */ -export interface ExportedValidateDateRangeProps - extends DayRangeValidationProps, - BaseDateValidationProps {} +export interface ExportedValidateDateRangeProps + extends DayRangeValidationProps, + BaseDateValidationProps {} -export interface ValidateDateRangeProps - extends DayRangeValidationProps, - Required> {} +export interface ValidateDateRangeProps + extends DayRangeValidationProps, + Required {} export const validateDateRange: Validator< - DateRange, - any, + PickerRangeValue, DateRangeValidationError, - ValidateDateRangeProps + ValidateDateRangeProps > = ({ adapter, value, timezone, props }) => { const [start, end] = value; diff --git a/packages/x-date-pickers-pro/src/validation/validateDateTimeRange.ts b/packages/x-date-pickers-pro/src/validation/validateDateTimeRange.ts index 754e8053c639..743360be7d7d 100644 --- a/packages/x-date-pickers-pro/src/validation/validateDateTimeRange.ts +++ b/packages/x-date-pickers-pro/src/validation/validateDateTimeRange.ts @@ -1,8 +1,7 @@ -import { PickerValidDate } from '@mui/x-date-pickers/models'; -import { DateTimeValidationProps } from '@mui/x-date-pickers/internals'; +import { DateTimeValidationProps, PickerRangeValue } from '@mui/x-date-pickers/internals'; import { validateDateTime, Validator } from '@mui/x-date-pickers/validation'; import { isRangeValid } from '../internals/utils/date-utils'; -import { DateTimeRangeValidationError, DateRange } from '../models'; +import { DateTimeRangeValidationError } from '../models'; import { rangeValueManager } from '../internals/utils/valueManagers'; import { ExportedValidateDateRangeProps, ValidateDateRangeProps } from './validateDateRange'; import { ExportedValidateTimeRangeProps, ValidateTimeRangeProps } from './validateTimeRange'; @@ -10,20 +9,19 @@ import { ExportedValidateTimeRangeProps, ValidateTimeRangeProps } from './valida /** * Validation props used by the Date Time Range Picker and Date Time Range Field. */ -export interface ExportedValidateDateTimeRangeProps - extends ExportedValidateDateRangeProps, - ExportedValidateTimeRangeProps, - DateTimeValidationProps {} +export interface ExportedValidateDateTimeRangeProps + extends ExportedValidateDateRangeProps, + ExportedValidateTimeRangeProps, + DateTimeValidationProps {} -export interface ValidateDateTimeRangeProps - extends ValidateDateRangeProps, - ValidateTimeRangeProps {} +export interface ValidateDateTimeRangeProps + extends ValidateDateRangeProps, + ValidateTimeRangeProps {} export const validateDateTimeRange: Validator< - DateRange, - any, + PickerRangeValue, DateTimeRangeValidationError, - ValidateDateTimeRangeProps + ValidateDateTimeRangeProps > = ({ adapter, value, timezone, props }) => { const [start, end] = value; diff --git a/packages/x-date-pickers-pro/src/validation/validateTimeRange.ts b/packages/x-date-pickers-pro/src/validation/validateTimeRange.ts index f6d48949de2e..2f5cd591cd86 100644 --- a/packages/x-date-pickers-pro/src/validation/validateTimeRange.ts +++ b/packages/x-date-pickers-pro/src/validation/validateTimeRange.ts @@ -1,26 +1,28 @@ import { validateTime, Validator } from '@mui/x-date-pickers/validation'; -import { PickerValidDate } from '@mui/x-date-pickers/models'; -import { TimeValidationProps, BaseTimeValidationProps } from '@mui/x-date-pickers/internals'; +import { + TimeValidationProps, + BaseTimeValidationProps, + PickerRangeValue, +} from '@mui/x-date-pickers/internals'; import { isRangeValid } from '../internals/utils/date-utils'; -import { TimeRangeValidationError, DateRange } from '../models'; +import { TimeRangeValidationError } from '../models'; import { rangeValueManager } from '../internals/utils/valueManagers'; /** * Validation props used by the Time Range Picker and Time Range Field. */ -export interface ExportedValidateTimeRangeProps +export interface ExportedValidateTimeRangeProps extends BaseTimeValidationProps, - TimeValidationProps {} + TimeValidationProps {} -export interface ValidateTimeRangeProps +export interface ValidateTimeRangeProps extends Required, - TimeValidationProps {} + TimeValidationProps {} export const validateTimeRange: Validator< - DateRange, - any, + PickerRangeValue, TimeRangeValidationError, - ValidateTimeRangeProps + ValidateTimeRangeProps > = ({ adapter, value, timezone, props }) => { const [start, end] = value; diff --git a/packages/x-date-pickers/src/AdapterDateFns/AdapterDateFns.test.tsx b/packages/x-date-pickers/src/AdapterDateFns/AdapterDateFns.test.tsx index 3f51bd19e5d0..f2e610050cf8 100644 --- a/packages/x-date-pickers/src/AdapterDateFns/AdapterDateFns.test.tsx +++ b/packages/x-date-pickers/src/AdapterDateFns/AdapterDateFns.test.tsx @@ -29,7 +29,7 @@ describe('', () => { describe('English', () => { const adapter = new AdapterDateFns({ locale: enUS }); - const date = adapter.date(TEST_DATE_ISO_STRING)!; + const date = adapter.date(TEST_DATE_ISO_STRING) as Date; it('getWeekArray: should start on Sunday', () => { const result = adapter.getWeekArray(date); @@ -45,7 +45,7 @@ describe('', () => { const adapter = new AdapterDateFns({ locale: ru }); it('getWeekArray: should start on Monday', () => { - const date = adapter.date(TEST_DATE_ISO_STRING)!; + const date = adapter.date(TEST_DATE_ISO_STRING) as Date; const result = adapter.getWeekArray(date); expect(adapter.formatByString(result[0][0], 'EEEEEE')).to.equal('пн'); }); @@ -68,7 +68,7 @@ describe('', () => { expectedWithEn: string, expectedWithRu: string, ) => { - const date = adapter.date('2020-02-01T23:44:00.000Z')!; + const date = adapter.date('2020-02-01T23:44:00.000Z') as Date; expect(adapter.format(date, format)).to.equal(expectedWithEn); expect(adapterRu.format(date, format)).to.equal(expectedWithRu); diff --git a/packages/x-date-pickers/src/AdapterDateFns/AdapterDateFns.ts b/packages/x-date-pickers/src/AdapterDateFns/AdapterDateFns.ts index 10cbe15fe7cf..12713e43a059 100644 --- a/packages/x-date-pickers/src/AdapterDateFns/AdapterDateFns.ts +++ b/packages/x-date-pickers/src/AdapterDateFns/AdapterDateFns.ts @@ -82,7 +82,7 @@ declare module '@mui/x-date-pickers/models' { */ export class AdapterDateFns extends AdapterDateFnsBase - implements MuiPickersAdapter + implements MuiPickersAdapter { constructor({ locale, formats }: AdapterOptions = {}) { /* istanbul ignore next */ diff --git a/packages/x-date-pickers/src/AdapterDateFnsBase/AdapterDateFnsBase.ts b/packages/x-date-pickers/src/AdapterDateFnsBase/AdapterDateFnsBase.ts index 08a03b6e555f..8696490f13b2 100644 --- a/packages/x-date-pickers/src/AdapterDateFnsBase/AdapterDateFnsBase.ts +++ b/packages/x-date-pickers/src/AdapterDateFnsBase/AdapterDateFnsBase.ts @@ -151,7 +151,7 @@ type DateFnsAdapterBaseOptions = MakeRe export class AdapterDateFnsBase implements Pick< - MuiPickersAdapter, + MuiPickersAdapter, | 'date' | 'getInvalidDate' | 'getTimezone' @@ -187,19 +187,17 @@ export class AdapterDateFnsBase this.lib = lib || 'date-fns'; } - public date = ( - value?: T, - ): DateBuilderReturnType => { - type R = DateBuilderReturnType; + public date = (value?: T): DateBuilderReturnType => { + type R = DateBuilderReturnType; if (typeof value === 'undefined') { - return new Date(); + return new Date() as unknown as R; } if (value === null) { - return null; + return null as unknown as R; } - return new Date(value); + return new Date(value) as unknown as R; }; public getInvalidDate = () => new Date('Invalid Date'); diff --git a/packages/x-date-pickers/src/AdapterDateFnsJalali/AdapterDateFnsJalali.test.tsx b/packages/x-date-pickers/src/AdapterDateFnsJalali/AdapterDateFnsJalali.test.tsx index 03caf784f4f1..aeebce13303b 100644 --- a/packages/x-date-pickers/src/AdapterDateFnsJalali/AdapterDateFnsJalali.test.tsx +++ b/packages/x-date-pickers/src/AdapterDateFnsJalali/AdapterDateFnsJalali.test.tsx @@ -26,7 +26,7 @@ describe('', () => { const adapter = new AdapterDateFnsJalali(); const expectDate = (format: keyof AdapterFormats, expectedWithFaIR: string) => { - const date = adapter.date('2020-02-01T23:44:00.000Z')!; + const date = adapter.date('2020-02-01T23:44:00.000Z') as Date; expect(adapter.format(date, format)).to.equal(expectedWithFaIR); }; diff --git a/packages/x-date-pickers/src/AdapterDateFnsJalali/AdapterDateFnsJalali.ts b/packages/x-date-pickers/src/AdapterDateFnsJalali/AdapterDateFnsJalali.ts index 6fc2d35761f9..7e654168e9ae 100644 --- a/packages/x-date-pickers/src/AdapterDateFnsJalali/AdapterDateFnsJalali.ts +++ b/packages/x-date-pickers/src/AdapterDateFnsJalali/AdapterDateFnsJalali.ts @@ -123,7 +123,7 @@ declare module '@mui/x-date-pickers/models' { */ export class AdapterDateFnsJalali extends AdapterDateFnsBase - implements MuiPickersAdapter + implements MuiPickersAdapter { constructor({ locale, formats }: AdapterOptions = {}) { /* istanbul ignore next */ diff --git a/packages/x-date-pickers/src/AdapterDateFnsJalaliV3/AdapterDateFnsJalaliV3.test.tsx b/packages/x-date-pickers/src/AdapterDateFnsJalaliV3/AdapterDateFnsJalaliV3.test.tsx index f97f309af0fd..59446a64a9c5 100644 --- a/packages/x-date-pickers/src/AdapterDateFnsJalaliV3/AdapterDateFnsJalaliV3.test.tsx +++ b/packages/x-date-pickers/src/AdapterDateFnsJalaliV3/AdapterDateFnsJalaliV3.test.tsx @@ -18,7 +18,7 @@ describe('', () => { const adapter = new AdapterDateFnsJalali(); const expectDate = (format: keyof AdapterFormats, expectedWithFaIR: string) => { - const date = adapter.date('2020-02-01T23:44:00.000Z')!; + const date = adapter.date('2020-02-01T23:44:00.000Z') as Date; expect(adapter.format(date, format)).to.equal(expectedWithFaIR); }; diff --git a/packages/x-date-pickers/src/AdapterDateFnsJalaliV3/AdapterDateFnsJalaliV3.ts b/packages/x-date-pickers/src/AdapterDateFnsJalaliV3/AdapterDateFnsJalaliV3.ts index 1dc566b74605..4c0035c21af2 100644 --- a/packages/x-date-pickers/src/AdapterDateFnsJalaliV3/AdapterDateFnsJalaliV3.ts +++ b/packages/x-date-pickers/src/AdapterDateFnsJalaliV3/AdapterDateFnsJalaliV3.ts @@ -124,7 +124,7 @@ declare module '@mui/x-date-pickers/models' { */ export class AdapterDateFnsJalali extends AdapterDateFnsBase - implements MuiPickersAdapter + implements MuiPickersAdapter { constructor({ locale, formats }: AdapterOptions = {}) { /* istanbul ignore next */ diff --git a/packages/x-date-pickers/src/AdapterDateFnsV3/AdapterDateFnsV3.ts b/packages/x-date-pickers/src/AdapterDateFnsV3/AdapterDateFnsV3.ts index 910823d8a55e..b7021804a98e 100644 --- a/packages/x-date-pickers/src/AdapterDateFnsV3/AdapterDateFnsV3.ts +++ b/packages/x-date-pickers/src/AdapterDateFnsV3/AdapterDateFnsV3.ts @@ -84,7 +84,7 @@ declare module '@mui/x-date-pickers/models' { */ export class AdapterDateFns extends AdapterDateFnsBase - implements MuiPickersAdapter + implements MuiPickersAdapter { constructor({ locale, formats }: AdapterOptions = {}) { /* istanbul ignore next */ diff --git a/packages/x-date-pickers/src/AdapterDayjs/AdapterDayjs.test.tsx b/packages/x-date-pickers/src/AdapterDayjs/AdapterDayjs.test.tsx index 9095ecc60cc6..a6a6fb2e0507 100644 --- a/packages/x-date-pickers/src/AdapterDayjs/AdapterDayjs.test.tsx +++ b/packages/x-date-pickers/src/AdapterDayjs/AdapterDayjs.test.tsx @@ -1,7 +1,7 @@ import dayjs, { Dayjs } from 'dayjs'; import { DateTimeField } from '@mui/x-date-pickers/DateTimeField'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; -import { AdapterFormats } from '@mui/x-date-pickers/models'; +import { AdapterFormats, PickerValidDate } from '@mui/x-date-pickers/models'; import { expect } from 'chai'; import { expectFieldValueV7, @@ -20,7 +20,7 @@ describe('', () => { const commonParams = { formatDateTime: 'YYYY-MM-DD HH:mm:ss', setDefaultTimezone: dayjs.tz.setDefault, - getLocaleFromDate: (value: Dayjs) => value.locale(), + getLocaleFromDate: (value: PickerValidDate) => (value as Dayjs).locale(), frenchLocale: 'fr', }; @@ -45,7 +45,7 @@ describe('', () => { // @ts-ignore modifiedAdapter.hasTimezonePlugin = () => false; - const date = modifiedAdapter.date(TEST_DATE_ISO_STRING)!; + const date = modifiedAdapter.date(TEST_DATE_ISO_STRING) as Dayjs; expect(() => modifiedAdapter.setTimezone(date, 'Europe/London')).to.throw(); }); }); @@ -53,7 +53,7 @@ describe('', () => { describe('Adapter localization', () => { describe('English', () => { const adapter = new AdapterDayjs({ locale: 'en' }); - const date = adapter.date(TEST_DATE_ISO_STRING)!; + const date = adapter.date(TEST_DATE_ISO_STRING) as Dayjs; it('getWeekArray: should start on Sunday', () => { const result = adapter.getWeekArray(date); @@ -69,7 +69,7 @@ describe('', () => { const adapter = new AdapterDayjs({ locale: 'ru' }); it('getWeekArray: should start on Monday', () => { - const date = adapter.date(TEST_DATE_ISO_STRING)!; + const date = adapter.date(TEST_DATE_ISO_STRING) as Dayjs; const result = adapter.getWeekArray(date); expect(result[0][0].format('dd')).to.equal('пн'); }); @@ -92,7 +92,7 @@ describe('', () => { expectedWithEn: string, expectedWithRu: string, ) => { - const date = adapter.date('2020-02-01T23:44:00.000Z')!; + const date = adapter.date('2020-02-01T23:44:00.000Z') as Dayjs; expect(adapter.format(date, format)).to.equal(expectedWithEn); expect(adapterRu.format(date, format)).to.equal(expectedWithRu); diff --git a/packages/x-date-pickers/src/AdapterDayjs/AdapterDayjs.ts b/packages/x-date-pickers/src/AdapterDayjs/AdapterDayjs.ts index e04397414e85..6dc2ee4cbbbd 100644 --- a/packages/x-date-pickers/src/AdapterDayjs/AdapterDayjs.ts +++ b/packages/x-date-pickers/src/AdapterDayjs/AdapterDayjs.ts @@ -138,7 +138,7 @@ declare module '@mui/x-date-pickers/models' { * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * SOFTWARE. */ -export class AdapterDayjs implements MuiPickersAdapter { +export class AdapterDayjs implements MuiPickersAdapter { public isMUIAdapter = true; public isTimezoneCompatible = true; @@ -296,10 +296,10 @@ export class AdapterDayjs implements MuiPickersAdapter { public date = ( value?: T, timezone: PickersTimezone = 'default', - ): DateBuilderReturnType => { - type R = DateBuilderReturnType; + ): DateBuilderReturnType => { + type R = DateBuilderReturnType; if (value === null) { - return null; + return null as unknown as R; } let parsedValue: Dayjs; @@ -312,10 +312,10 @@ export class AdapterDayjs implements MuiPickersAdapter { } if (this.locale === undefined) { - return parsedValue; + return parsedValue as unknown as R; } - return parsedValue.locale(this.locale); + return parsedValue.locale(this.locale) as unknown as R; }; public getInvalidDate = () => defaultDayjs(new Date('Invalid date')); diff --git a/packages/x-date-pickers/src/AdapterLuxon/AdapterLuxon.test.tsx b/packages/x-date-pickers/src/AdapterLuxon/AdapterLuxon.test.tsx index 372dbfab75f6..339c074aacfd 100644 --- a/packages/x-date-pickers/src/AdapterLuxon/AdapterLuxon.test.tsx +++ b/packages/x-date-pickers/src/AdapterLuxon/AdapterLuxon.test.tsx @@ -18,7 +18,7 @@ describe('', () => { setDefaultTimezone: (timezone) => { Settings.defaultZone = timezone ?? 'system'; }, - getLocaleFromDate: (value: DateTime) => value.locale!, + getLocaleFromDate: (value) => (value as DateTime).locale!, frenchLocale: 'fr', }); @@ -35,7 +35,7 @@ describe('', () => { const adapter = new AdapterLuxon({ locale: 'ru' }); it('getWeekArray: should start on Monday', () => { - const date = adapter.date(TEST_DATE_ISO_STRING)!; + const date = adapter.date(TEST_DATE_ISO_STRING) as DateTime; const result = adapter.getWeekArray(date); expect(result[0][0].toFormat('ccc')).to.equal('пн'); }); @@ -58,7 +58,7 @@ describe('', () => { expectedWithEn: string, expectedWithRu: string, ) => { - const date = adapter.date('2020-02-01T23:44:00.000Z')!; + const date = adapter.date('2020-02-01T23:44:00.000Z') as DateTime; expect(cleanText(adapter.format(date, format))).to.equal(expectedWithEn); expect(cleanText(adapterRu.format(date, format))).to.equal(expectedWithRu); diff --git a/packages/x-date-pickers/src/AdapterLuxon/AdapterLuxon.ts b/packages/x-date-pickers/src/AdapterLuxon/AdapterLuxon.ts index edaee013c9be..53d71bfac904 100644 --- a/packages/x-date-pickers/src/AdapterLuxon/AdapterLuxon.ts +++ b/packages/x-date-pickers/src/AdapterLuxon/AdapterLuxon.ts @@ -117,7 +117,7 @@ declare module '@mui/x-date-pickers/models' { * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * SOFTWARE. */ -export class AdapterLuxon implements MuiPickersAdapter { +export class AdapterLuxon implements MuiPickersAdapter { public isMUIAdapter = true; public isTimezoneCompatible = true; @@ -149,8 +149,8 @@ export class AdapterLuxon implements MuiPickersAdapter { public date = ( value?: T, timezone: PickersTimezone = 'default', - ): DateBuilderReturnType => { - type R = DateBuilderReturnType; + ): DateBuilderReturnType => { + type R = DateBuilderReturnType; if (value === null) { return null; } diff --git a/packages/x-date-pickers/src/AdapterMoment/AdapterMoment.test.tsx b/packages/x-date-pickers/src/AdapterMoment/AdapterMoment.test.tsx index fa684d96e860..5389040482dd 100644 --- a/packages/x-date-pickers/src/AdapterMoment/AdapterMoment.test.tsx +++ b/packages/x-date-pickers/src/AdapterMoment/AdapterMoment.test.tsx @@ -2,7 +2,7 @@ import moment, { Moment } from 'moment'; import momentTZ from 'moment-timezone'; import { DateTimeField } from '@mui/x-date-pickers/DateTimeField'; import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment'; -import { AdapterFormats } from '@mui/x-date-pickers/models'; +import { AdapterFormats, PickerValidDate } from '@mui/x-date-pickers/models'; import { expect } from 'chai'; import { spy } from 'sinon'; import { @@ -21,7 +21,7 @@ describe('', () => { formatDateTime: 'YYYY-MM-DD HH:mm:ss', dateLibInstanceWithTimezoneSupport: momentTZ, setDefaultTimezone: momentTZ.tz.setDefault, - getLocaleFromDate: (value: Moment) => value.locale(), + getLocaleFromDate: (value: PickerValidDate) => (value as Moment).locale(), frenchLocale: 'fr', }; @@ -41,7 +41,7 @@ describe('', () => { describe('Adapter localization', () => { describe('English', () => { const adapter = new AdapterMoment({ locale: 'en' }); - const date = adapter.date(TEST_DATE_ISO_STRING)!; + const date = adapter.date(TEST_DATE_ISO_STRING) as Moment; it('getWeekArray: week should start on Monday', () => { const result = adapter.getWeekArray(date); @@ -59,7 +59,7 @@ describe('', () => { describe('Russian', () => { const adapter = new AdapterMoment({ locale: 'ru' }); - const date = adapter.date(TEST_DATE_ISO_STRING)!; + const date = adapter.date(TEST_DATE_ISO_STRING) as Moment; beforeEach(() => { moment.locale('ru'); @@ -112,7 +112,7 @@ describe('', () => { expectedWithEn: string, expectedWithRu: string, ) => { - const date = adapter.date('2020-02-01T23:44:00.000Z')!; + const date = adapter.date('2020-02-01T23:44:00.000Z') as Moment; expect(adapter.format(date, format)).to.equal(expectedWithEn); expect(adapterRu.format(date, format)).to.equal(expectedWithRu); diff --git a/packages/x-date-pickers/src/AdapterMoment/AdapterMoment.ts b/packages/x-date-pickers/src/AdapterMoment/AdapterMoment.ts index 426d0404f487..e92f7c9a06fe 100644 --- a/packages/x-date-pickers/src/AdapterMoment/AdapterMoment.ts +++ b/packages/x-date-pickers/src/AdapterMoment/AdapterMoment.ts @@ -121,7 +121,7 @@ declare module '@mui/x-date-pickers/models' { * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * SOFTWARE. */ -export class AdapterMoment implements MuiPickersAdapter { +export class AdapterMoment implements MuiPickersAdapter { public isMUIAdapter = true; public isTimezoneCompatible = true; @@ -194,21 +194,21 @@ export class AdapterMoment implements MuiPickersAdapter { public date = ( value?: T, timezone: PickersTimezone = 'default', - ): DateBuilderReturnType => { - type R = DateBuilderReturnType; + ): DateBuilderReturnType => { + type R = DateBuilderReturnType; if (value === null) { - return null; + return null as unknown as R; } if (timezone === 'UTC') { - return this.createUTCDate(value); + return this.createUTCDate(value) as unknown as R; } if (timezone === 'system' || (timezone === 'default' && !this.hasTimezonePlugin())) { - return this.createSystemDate(value); + return this.createSystemDate(value) as unknown as R; } - return this.createTZDate(value, timezone); + return this.createTZDate(value, timezone) as unknown as R; }; public getInvalidDate = () => this.moment(new Date('Invalid Date')); diff --git a/packages/x-date-pickers/src/AdapterMomentHijri/AdapterMomentHijri.test.tsx b/packages/x-date-pickers/src/AdapterMomentHijri/AdapterMomentHijri.test.tsx index bd86f319abe6..bbfc4923e532 100644 --- a/packages/x-date-pickers/src/AdapterMomentHijri/AdapterMomentHijri.test.tsx +++ b/packages/x-date-pickers/src/AdapterMomentHijri/AdapterMomentHijri.test.tsx @@ -1,4 +1,4 @@ -import moment from 'moment'; +import moment, { Moment } from 'moment'; import { expect } from 'chai'; import { DateTimeField } from '@mui/x-date-pickers/DateTimeField'; import { AdapterMomentHijri } from '@mui/x-date-pickers/AdapterMomentHijri'; @@ -26,7 +26,7 @@ describe('', () => { const adapter = new AdapterMomentHijri(); const expectDate = (format: keyof AdapterFormats, expectedWithArSA: string) => { - const date = adapter.date('2020-01-01T23:44:00.000Z')!; + const date = adapter.date('2020-01-01T23:44:00.000Z') as Moment; expect(adapter.format(date, format)).to.equal(expectedWithArSA); }; diff --git a/packages/x-date-pickers/src/AdapterMomentHijri/AdapterMomentHijri.ts b/packages/x-date-pickers/src/AdapterMomentHijri/AdapterMomentHijri.ts index aabf13d31b85..1a827a426ed4 100644 --- a/packages/x-date-pickers/src/AdapterMomentHijri/AdapterMomentHijri.ts +++ b/packages/x-date-pickers/src/AdapterMomentHijri/AdapterMomentHijri.ts @@ -120,7 +120,7 @@ declare module '@mui/x-date-pickers/models' { * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * SOFTWARE. */ -export class AdapterMomentHijri extends AdapterMoment implements MuiPickersAdapter { +export class AdapterMomentHijri extends AdapterMoment implements MuiPickersAdapter { public lib = 'moment-hijri'; public moment: typeof defaultHMoment; @@ -137,15 +137,13 @@ export class AdapterMomentHijri extends AdapterMoment implements MuiPickersAdapt this.formats = { ...defaultFormats, ...formats }; } - public date = ( - value?: T, - ): DateBuilderReturnType => { - type R = DateBuilderReturnType; + public date = (value?: T): DateBuilderReturnType => { + type R = DateBuilderReturnType; if (value === null) { - return null; + return null as unknown as R; } - return this.moment(value).locale('ar-SA'); + return this.moment(value).locale('ar-SA') as unknown as R; }; public getTimezone = (): string => { diff --git a/packages/x-date-pickers/src/AdapterMomentJalaali/AdapterMomentJalaali.test.tsx b/packages/x-date-pickers/src/AdapterMomentJalaali/AdapterMomentJalaali.test.tsx index 9a30e357c05d..aba54377eaa8 100644 --- a/packages/x-date-pickers/src/AdapterMomentJalaali/AdapterMomentJalaali.test.tsx +++ b/packages/x-date-pickers/src/AdapterMomentJalaali/AdapterMomentJalaali.test.tsx @@ -1,6 +1,6 @@ import { expect } from 'chai'; import moment from 'moment'; -import jMoment from 'moment-jalaali'; +import jMoment, { Moment } from 'moment-jalaali'; import { DateTimeField } from '@mui/x-date-pickers/DateTimeField'; import { AdapterMomentJalaali } from '@mui/x-date-pickers/AdapterMomentJalaali'; import { @@ -35,7 +35,7 @@ describe('', () => { const adapter = new AdapterMomentJalaali(); const expectDate = (format: keyof AdapterFormats, expectedWithFaIR: string) => { - const date = adapter.date('2020-02-01T23:44:00.000Z')!; + const date = adapter.date('2020-02-01T23:44:00.000Z') as Moment; expect(adapter.format(date, format)).to.equal(expectedWithFaIR); }; diff --git a/packages/x-date-pickers/src/AdapterMomentJalaali/AdapterMomentJalaali.ts b/packages/x-date-pickers/src/AdapterMomentJalaali/AdapterMomentJalaali.ts index 435022269f28..c548b50439ce 100644 --- a/packages/x-date-pickers/src/AdapterMomentJalaali/AdapterMomentJalaali.ts +++ b/packages/x-date-pickers/src/AdapterMomentJalaali/AdapterMomentJalaali.ts @@ -119,10 +119,7 @@ declare module '@mui/x-date-pickers/models' { * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * SOFTWARE. */ -export class AdapterMomentJalaali - extends AdapterMoment - implements MuiPickersAdapter -{ +export class AdapterMomentJalaali extends AdapterMoment implements MuiPickersAdapter { public isTimezoneCompatible = false; public lib = 'moment-jalaali'; @@ -139,15 +136,13 @@ export class AdapterMomentJalaali this.formats = { ...defaultFormats, ...formats }; } - public date = ( - value?: T, - ): DateBuilderReturnType => { - type R = DateBuilderReturnType; + public date = (value?: T): DateBuilderReturnType => { + type R = DateBuilderReturnType; if (value === null) { - return null; + return null as unknown as R; } - return this.moment(value).locale('fa'); + return this.moment(value).locale('fa') as unknown as R; }; public getTimezone = (): string => { diff --git a/packages/x-date-pickers/src/DateCalendar/DateCalendar.tsx b/packages/x-date-pickers/src/DateCalendar/DateCalendar.tsx index 77af1660e28f..f5bd789a6862 100644 --- a/packages/x-date-pickers/src/DateCalendar/DateCalendar.tsx +++ b/packages/x-date-pickers/src/DateCalendar/DateCalendar.tsx @@ -32,7 +32,7 @@ import { singleItemValueManager } from '../internals/utils/valueManagers'; import { VIEW_HEIGHT } from '../internals/constants/dimensions'; import { PickerValidDate } from '../models'; -const useUtilityClasses = (ownerState: DateCalendarProps) => { +const useUtilityClasses = (ownerState: DateCalendarProps) => { const { classes } = ownerState; const slots = { root: ['root'], @@ -42,12 +42,12 @@ const useUtilityClasses = (ownerState: DateCalendarProps) => { return composeClasses(slots, getDateCalendarUtilityClass, classes); }; -function useDateCalendarDefaultizedProps( - props: DateCalendarProps, +function useDateCalendarDefaultizedProps( + props: DateCalendarProps, name: string, -): DateCalendarDefaultizedProps { - const utils = useUtils(); - const defaultDates = useDefaultDates(); +): DateCalendarDefaultizedProps { + const utils = useUtils(); + const defaultDates = useDefaultDates(); const defaultReduceAnimations = useDefaultReduceAnimations(); const themeProps = useThemeProps({ props, @@ -73,7 +73,7 @@ const DateCalendarRoot = styled(PickerViewRoot, { name: 'MuiDateCalendar', slot: 'Root', overridesResolver: (props, styles) => styles.root, -})<{ ownerState: DateCalendarProps }>({ +})<{ ownerState: DateCalendarProps }>({ display: 'flex', flexDirection: 'column', height: VIEW_HEIGHT, @@ -83,10 +83,10 @@ const DateCalendarViewTransitionContainer = styled(PickersFadeTransitionGroup, { name: 'MuiDateCalendar', slot: 'ViewTransitionContainer', overridesResolver: (props, styles) => styles.viewTransitionContainer, -})<{ ownerState: DateCalendarProps }>({}); +})<{ ownerState: DateCalendarProps }>({}); -type DateCalendarComponent = (( - props: DateCalendarProps & React.RefAttributes, +type DateCalendarComponent = (( + props: DateCalendarProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; /** @@ -100,11 +100,11 @@ type DateCalendarComponent = (( * * - [DateCalendar API](https://mui.com/x/api/date-pickers/date-calendar/) */ -export const DateCalendar = React.forwardRef(function DateCalendar( - inProps: DateCalendarProps, +export const DateCalendar = React.forwardRef(function DateCalendar( + inProps: DateCalendarProps, ref: React.Ref, ) { - const utils = useUtils(); + const utils = useUtils(); const id = useId(); const props = useDateCalendarDefaultizedProps(inProps, 'MuiDateCalendar'); @@ -199,7 +199,7 @@ export const DateCalendar = React.forwardRef(function DateCalendar = useSlotProps({ + const calendarHeaderProps: PickersCalendarHeaderProps = useSlotProps({ elementType: CalendarHeader, externalSlotProps: slotProps?.calendarHeader, additionalProps: { @@ -220,7 +220,7 @@ export const DateCalendar = React.forwardRef(function DateCalendar { + const handleDateMonthChange = useEventCallback((newDate: PickerValidDate) => { const startOfMonth = utils.startOfMonth(newDate); const endOfMonth = utils.endOfMonth(newDate); @@ -248,7 +248,7 @@ export const DateCalendar = React.forwardRef(function DateCalendar { + const handleDateYearChange = useEventCallback((newDate: PickerValidDate) => { const startOfYear = utils.startOfYear(newDate); const endOfYear = utils.endOfYear(newDate); @@ -276,7 +276,7 @@ export const DateCalendar = React.forwardRef(function DateCalendar { + const handleSelectedDayChange = useEventCallback((day: PickerValidDate | null) => { if (day) { // If there is a date already selected, then we want to keep its time return handleValueChange( @@ -298,7 +298,7 @@ export const DateCalendar = React.forwardRef(function DateCalendar> = { + const baseDateValidationProps: Required = { disablePast, disableFuture, maxDate, @@ -347,7 +347,7 @@ export const DateCalendar = React.forwardRef(function DateCalendar
{view === 'year' && ( - + + + adapter.format(date, 'weekdayShort').charAt(0).toUpperCase() + * @default (date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase() */ dayOfWeekFormatter: PropTypes.func, /** @@ -506,8 +506,7 @@ DateCalendar.propTypes = { onFocusedViewChange: PropTypes.func, /** * Callback fired on month change. - * @template TDate - * @param {TDate} month The new month. + * @param {PickerValidDate} month The new month. */ onMonthChange: PropTypes.func, /** @@ -518,8 +517,7 @@ DateCalendar.propTypes = { onViewChange: PropTypes.func, /** * Callback fired on year change. - * @template TDate - * @param {TDate} year The new year. + * @param {PickerValidDate} year The new year. */ onYearChange: PropTypes.func, /** @@ -554,22 +552,19 @@ DateCalendar.propTypes = { * * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance. * - * @template TDate - * @param {TDate} day The date to test. + * @param {PickerValidDate} day The date to test. * @returns {boolean} If `true` the date will be disabled. */ shouldDisableDate: PropTypes.func, /** * Disable specific month. - * @template TDate - * @param {TDate} month The month to test. + * @param {PickerValidDate} month The month to test. * @returns {boolean} If `true`, the month will be disabled. */ shouldDisableMonth: PropTypes.func, /** * Disable specific year. - * @template TDate - * @param {TDate} year The year to test. + * @param {PickerValidDate} year The year to test. * @returns {boolean} If `true`, the year will be disabled. */ shouldDisableYear: PropTypes.func, diff --git a/packages/x-date-pickers/src/DateCalendar/DateCalendar.types.ts b/packages/x-date-pickers/src/DateCalendar/DateCalendar.types.ts index 2c17ab1fc62a..09e7c7d3067b 100644 --- a/packages/x-date-pickers/src/DateCalendar/DateCalendar.types.ts +++ b/packages/x-date-pickers/src/DateCalendar/DateCalendar.types.ts @@ -26,9 +26,9 @@ import { } from '../MonthCalendar/MonthCalendar.types'; import { ExportedValidateDateProps } from '../validation/validateDate'; -export interface DateCalendarSlots +export interface DateCalendarSlots extends PickersCalendarHeaderSlots, - DayCalendarSlots, + DayCalendarSlots, MonthCalendarSlots, YearCalendarSlots { /** @@ -36,22 +36,22 @@ export interface DateCalendarSlots * Check the [PickersCalendarHeader](https://mui.com/x/api/date-pickers/pickers-calendar-header/) component. * @default PickersCalendarHeader */ - calendarHeader?: React.ElementType>; + calendarHeader?: React.ElementType; } -export interface DateCalendarSlotProps - extends PickersCalendarHeaderSlotProps, - DayCalendarSlotProps, +export interface DateCalendarSlotProps + extends PickersCalendarHeaderSlotProps, + DayCalendarSlotProps, MonthCalendarSlotProps, YearCalendarSlotProps { - calendarHeader?: SlotComponentProps>; + calendarHeader?: SlotComponentProps; } -export interface ExportedDateCalendarProps - extends ExportedDayCalendarProps, +export interface ExportedDateCalendarProps + extends ExportedDayCalendarProps, ExportedMonthCalendarProps, ExportedYearCalendarProps, - ExportedValidateDateProps, + ExportedValidateDateProps, TimezoneProps { /** * If `true`, the picker and text field are disabled. @@ -76,36 +76,34 @@ export interface ExportedDateCalendarProps renderLoading?: () => React.ReactNode; /** * Callback fired on year change. - * @template TDate - * @param {TDate} year The new year. + * @param {PickerValidDate} year The new year. */ - onYearChange?: (year: TDate) => void; + onYearChange?: (year: PickerValidDate) => void; /** * Callback fired on month change. - * @template TDate - * @param {TDate} month The new month. + * @param {PickerValidDate} month The new month. */ - onMonthChange?: (month: TDate) => void; + onMonthChange?: (month: PickerValidDate) => void; } -export interface DateCalendarProps - extends ExportedDateCalendarProps, - ExportedUseViewsOptions { +export interface DateCalendarProps + extends ExportedDateCalendarProps, + ExportedUseViewsOptions { /** * The selected value. * Used when the component is controlled. */ - value?: TDate | null; + value?: PickerValidDate | null; /** * The default selected value. * Used when the component is not controlled. */ - defaultValue?: TDate | null; + defaultValue?: PickerValidDate | null; /** * The date used to generate the new value when both `value` and `defaultValue` are empty. * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. */ - referenceDate?: TDate; + referenceDate?: PickerValidDate; className?: string; /** * Override or extend the styles applied to the component. @@ -119,20 +117,20 @@ export interface DateCalendarProps * Overridable component slots. * @default {} */ - slots?: DateCalendarSlots; + slots?: DateCalendarSlots; /** * The props used for each component slot. * @default {} */ - slotProps?: DateCalendarSlotProps; + slotProps?: DateCalendarSlotProps; } -export type DateCalendarDefaultizedProps = DefaultizedProps< - DateCalendarProps, +export type DateCalendarDefaultizedProps = DefaultizedProps< + DateCalendarProps, | 'views' | 'openTo' | 'loading' | 'reduceAnimations' | 'renderLoading' - | keyof BaseDateValidationProps + | keyof BaseDateValidationProps >; diff --git a/packages/x-date-pickers/src/DateCalendar/DayCalendar.tsx b/packages/x-date-pickers/src/DateCalendar/DayCalendar.tsx index c73e0a15ac5a..b11eb878113d 100644 --- a/packages/x-date-pickers/src/DateCalendar/DayCalendar.tsx +++ b/packages/x-date-pickers/src/DateCalendar/DayCalendar.tsx @@ -31,25 +31,24 @@ import { findClosestEnabledDate, getWeekdays } from '../internals/utils/date-uti import { DayCalendarClasses, getDayCalendarUtilityClass } from './dayCalendarClasses'; import { PickerValidDate, TimezoneProps } from '../models'; -export interface DayCalendarSlots { +export interface DayCalendarSlots { /** * Custom component for day. * Check the [PickersDay](https://mui.com/x/api/date-pickers/pickers-day/) component. * @default PickersDay */ - day?: React.ElementType>; + day?: React.ElementType; } -export interface DayCalendarSlotProps { +export interface DayCalendarSlotProps { day?: SlotComponentPropsFromProps< - PickersDayProps, + PickersDayProps, {}, - DayCalendarProps & { day: TDate; selected: boolean } + DayCalendarProps & { day: PickerValidDate; selected: boolean } >; } -export interface ExportedDayCalendarProps - extends ExportedPickersDayProps { +export interface ExportedDayCalendarProps extends ExportedPickersDayProps { /** * If `true`, calls `renderLoading` instead of rendering the day calendar. * Can be used to preload information and show it in calendar. @@ -64,11 +63,11 @@ export interface ExportedDayCalendarProps renderLoading?: () => React.ReactNode; /** * Formats the day of week displayed in the calendar header. - * @param {TDate} date The date of the day of week provided by the adapter. + * @param {PickerValidDate} date The date of the day of week provided by the adapter. * @returns {string} The name to display. - * @default (date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase() + * @default (date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase() */ - dayOfWeekFormatter?: (date: TDate) => string; + dayOfWeekFormatter?: (date: PickerValidDate) => string; /** * If `true`, the week number will be display in the calendar. */ @@ -80,22 +79,22 @@ export interface ExportedDayCalendarProps fixedWeekNumber?: number; } -export interface DayCalendarProps - extends ExportedDayCalendarProps, - DayValidationProps, - MonthValidationProps, - YearValidationProps, - Required>, +export interface DayCalendarProps + extends ExportedDayCalendarProps, + DayValidationProps, + MonthValidationProps, + YearValidationProps, + Required, DefaultizedProps { autoFocus?: boolean; className?: string; - currentMonth: TDate; - selectedDays: (TDate | null)[]; - onSelectedDaysChange: PickerOnChangeFn; + currentMonth: PickerValidDate; + selectedDays: (PickerValidDate | null)[]; + onSelectedDaysChange: PickerOnChangeFn; disabled?: boolean; - focusedDay: TDate | null; + focusedDay: PickerValidDate | null; isMonthSwitchingAnimating: boolean; - onFocusedDayChange: (newFocusedDay: TDate) => void; + onFocusedDayChange: (newFocusedDay: PickerValidDate) => void; onMonthSwitchingAnimationEnd: () => void; readOnly?: boolean; reduceAnimations: boolean; @@ -112,15 +111,15 @@ export interface DayCalendarProps * Overridable component slots. * @default {} */ - slots?: DayCalendarSlots; + slots?: DayCalendarSlots; /** * The props used for each component slot. * @default {} */ - slotProps?: DayCalendarSlotProps; + slotProps?: DayCalendarSlotProps; } -const useUtilityClasses = (ownerState: DayCalendarProps) => { +const useUtilityClasses = (ownerState: DayCalendarProps) => { const { classes } = ownerState; const slots = { root: ['root'], @@ -237,7 +236,7 @@ const PickersCalendarWeek = styled('div', { justifyContent: 'center', }); -function WrappedDay({ +function WrappedDay({ parentProps, day, focusableDay, @@ -246,12 +245,12 @@ function WrappedDay({ currentMonthNumber, isViewFocused, ...other -}: Pick, 'onFocus' | 'onBlur' | 'onKeyDown' | 'onDaySelect'> & { - parentProps: DayCalendarProps; - day: TDate; - focusableDay: TDate | null; - selectedDays: TDate[]; - isDateDisabled: (date: TDate | null) => boolean; +}: Pick & { + parentProps: DayCalendarProps; + day: PickerValidDate; + focusableDay: PickerValidDate | null; + selectedDays: PickerValidDate[]; + isDateDisabled: (date: PickerValidDate | null) => boolean; currentMonthNumber: number; isViewFocused: boolean; }) { @@ -265,8 +264,8 @@ function WrappedDay({ timezone, } = parentProps; - const utils = useUtils(); - const now = useNow(timezone); + const utils = useUtils(); + const now = useNow(timezone); const isFocusableDay = focusableDay !== null && utils.isSameDay(day, focusableDay); const isSelected = selectedDays.some((selectedDay) => utils.isSameDay(selectedDay, day)); @@ -336,9 +335,9 @@ function WrappedDay({ /** * @ignore - do not document. */ -export function DayCalendar(inProps: DayCalendarProps) { +export function DayCalendar(inProps: DayCalendarProps) { const props = useThemeProps({ props: inProps, name: 'MuiDayCalendar' }); - const utils = useUtils(); + const utils = useUtils(); const { onFocusedDayChange, @@ -371,7 +370,7 @@ export function DayCalendar(inProps: DayCalendarP timezone, } = props; - const now = useNow(timezone); + const now = useNow(timezone); const classes = useUtilityClasses(props); const isRtl = useRtl(); @@ -386,7 +385,7 @@ export function DayCalendar(inProps: DayCalendarP timezone, }); - const translations = usePickersTranslations(); + const translations = usePickersTranslations(); const [internalHasFocus, setInternalHasFocus] = useControlled({ name: 'DayCalendar', @@ -395,11 +394,11 @@ export function DayCalendar(inProps: DayCalendarP default: autoFocus ?? false, }); - const [internalFocusedDay, setInternalFocusedDay] = React.useState( + const [internalFocusedDay, setInternalFocusedDay] = React.useState( () => focusedDay || now, ); - const handleDaySelect = useEventCallback((day: TDate) => { + const handleDaySelect = useEventCallback((day: PickerValidDate) => { if (readOnly) { return; } @@ -407,7 +406,7 @@ export function DayCalendar(inProps: DayCalendarP onSelectedDaysChange(day); }); - const focusDay = (day: TDate) => { + const focusDay = (day: PickerValidDate) => { if (!isDateDisabled(day)) { onFocusedDayChange(day); setInternalFocusedDay(day); @@ -418,7 +417,7 @@ export function DayCalendar(inProps: DayCalendarP }; const handleKeyDown = useEventCallback( - (event: React.KeyboardEvent, day: TDate) => { + (event: React.KeyboardEvent, day: PickerValidDate) => { switch (event.key) { case 'ArrowUp': focusDay(utils.addDays(day, -7)); @@ -482,19 +481,24 @@ export function DayCalendar(inProps: DayCalendarP }, ); - const handleFocus = useEventCallback((event: React.FocusEvent, day: TDate) => - focusDay(day), + const handleFocus = useEventCallback( + (event: React.FocusEvent, day: PickerValidDate) => focusDay(day), + ); + const handleBlur = useEventCallback( + (event: React.FocusEvent, day: PickerValidDate) => { + if (internalHasFocus && utils.isSameDay(internalFocusedDay, day)) { + onFocusedViewChange?.(false); + } + }, ); - const handleBlur = useEventCallback((event: React.FocusEvent, day: TDate) => { - if (internalHasFocus && utils.isSameDay(internalFocusedDay, day)) { - onFocusedViewChange?.(false); - } - }); const currentMonthNumber = utils.getMonth(currentMonth); const currentYearNumber = utils.getYear(currentMonth); const validSelectedDays = React.useMemo( - () => selectedDays.filter((day): day is TDate => !!day).map((day) => utils.startOfDay(day)), + () => + selectedDays + .filter((day): day is PickerValidDate => !!day) + .map((day) => utils.startOfDay(day)), [utils, selectedDays], ); @@ -503,7 +507,7 @@ export function DayCalendar(inProps: DayCalendarP // eslint-disable-next-line react-hooks/exhaustive-deps const slideNodeRef = React.useMemo(() => React.createRef(), [transitionKey]); - const focusableDay = React.useMemo(() => { + const focusableDay = React.useMemo(() => { const startOfMonth = utils.startOfMonth(currentMonth); const endOfMonth = utils.endOfMonth(currentMonth); if ( diff --git a/packages/x-date-pickers/src/DateCalendar/tests/DateCalendar.spec.tsx b/packages/x-date-pickers/src/DateCalendar/tests/DateCalendar.spec.tsx deleted file mode 100644 index 53ff42ee719a..000000000000 --- a/packages/x-date-pickers/src/DateCalendar/tests/DateCalendar.spec.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import * as React from 'react'; -import moment, { Moment } from 'moment'; -import { DateCalendar } from '@mui/x-date-pickers/DateCalendar'; - -; - -; - -; - -; - -// External components are generic as well - - view="day" - views={['day']} - value={moment()} - minDate={moment()} - maxDate={moment()} - onChange={(date) => date?.format()} -/>; diff --git a/packages/x-date-pickers/src/DateCalendar/tests/describes.DateCalendar.test.tsx b/packages/x-date-pickers/src/DateCalendar/tests/describes.DateCalendar.test.tsx index 248fbb6e620e..10df9befa2fa 100644 --- a/packages/x-date-pickers/src/DateCalendar/tests/describes.DateCalendar.test.tsx +++ b/packages/x-date-pickers/src/DateCalendar/tests/describes.DateCalendar.test.tsx @@ -46,7 +46,7 @@ describe(' - Describes', () => { } }, setNewValue: (value) => { - const newValue = adapterToUse.addDays(value, 1); + const newValue = adapterToUse.addDays(value!, 1); fireEvent.click( screen.getByRole('gridcell', { name: adapterToUse.getDate(newValue).toString() }), ); diff --git a/packages/x-date-pickers/src/DateCalendar/tests/validation.DateCalendar.test.tsx b/packages/x-date-pickers/src/DateCalendar/tests/validation.DateCalendar.test.tsx index f8a75f48ff17..67b9d003c42d 100644 --- a/packages/x-date-pickers/src/DateCalendar/tests/validation.DateCalendar.test.tsx +++ b/packages/x-date-pickers/src/DateCalendar/tests/validation.DateCalendar.test.tsx @@ -5,14 +5,14 @@ import { DateCalendar, DateCalendarProps } from '@mui/x-date-pickers/DateCalenda import { PickerValidDate } from '@mui/x-date-pickers/models'; import { createPickerRenderer, adapterToUse } from 'test/utils/pickers'; -function WrappedDateCalendar( - props: Omit, 'value' | 'onChange'> & { initialValue: TDate }, +function WrappedDateCalendar( + props: Omit & { initialValue: PickerValidDate }, ) { const { initialValue, ...other } = props; - const [value, setValue] = React.useState(initialValue); + const [value, setValue] = React.useState(initialValue); - const handleChange = React.useCallback((newValue: TDate | null) => { + const handleChange = React.useCallback((newValue: PickerValidDate | null) => { setValue(newValue); }, []); diff --git a/packages/x-date-pickers/src/DateCalendar/useCalendarState.tsx b/packages/x-date-pickers/src/DateCalendar/useCalendarState.tsx index 5e772c5d742d..0fca874dbcb0 100644 --- a/packages/x-date-pickers/src/DateCalendar/useCalendarState.tsx +++ b/packages/x-date-pickers/src/DateCalendar/useCalendarState.tsx @@ -9,22 +9,22 @@ import { DateCalendarDefaultizedProps } from './DateCalendar.types'; import { singleItemValueManager } from '../internals/utils/valueManagers'; import { SECTION_TYPE_GRANULARITY } from '../internals/utils/getDefaultReferenceDate'; -interface CalendarState { - currentMonth: TDate; - focusedDay: TDate | null; +interface CalendarState { + currentMonth: PickerValidDate; + focusedDay: PickerValidDate | null; isMonthSwitchingAnimating: boolean; slideDirection: SlideDirection; } type ReducerAction = { type: TType } & TAdditional; -interface ChangeMonthPayload { +interface ChangeMonthPayload { direction: SlideDirection; - newMonth: TDate; + newMonth: PickerValidDate; } -interface ChangeFocusedDayPayload { - focusedDay: TDate | null; +interface ChangeFocusedDayPayload { + focusedDay: PickerValidDate | null; /** * The update does not trigger month switching animation. * For example: when selecting month from the month view. @@ -33,19 +33,15 @@ interface ChangeFocusedDayPayload { } export const createCalendarStateReducer = - ( - reduceAnimations: boolean, - disableSwitchToMonthOnDayFocus: boolean, - utils: MuiPickersAdapter, - ) => + (reduceAnimations: boolean, disableSwitchToMonthOnDayFocus: boolean, utils: MuiPickersAdapter) => ( - state: CalendarState, + state: CalendarState, action: | ReducerAction<'finishMonthSwitchingAnimation'> - | ReducerAction<'changeMonth', ChangeMonthPayload> + | ReducerAction<'changeMonth', ChangeMonthPayload> | ReducerAction<'changeMonthTimezone', { newTimezone: string }> - | ReducerAction<'changeFocusedDay', ChangeFocusedDayPayload>, - ): CalendarState => { + | ReducerAction<'changeFocusedDay', ChangeFocusedDayPayload>, + ): CalendarState => { switch (action.type) { case 'changeMonth': return { @@ -110,9 +106,9 @@ export const createCalendarStateReducer = } }; -interface UseCalendarStateParams +interface UseCalendarStateParams extends Pick< - DateCalendarDefaultizedProps, + DateCalendarDefaultizedProps, | 'value' | 'referenceDate' | 'disableFuture' @@ -127,9 +123,7 @@ interface UseCalendarStateParams timezone: PickersTimezone; } -export const useCalendarState = ( - params: UseCalendarStateParams, -) => { +export const useCalendarState = (params: UseCalendarStateParams) => { const { value, referenceDate: referenceDateProp, @@ -144,14 +138,10 @@ export const useCalendarState = ( timezone, } = params; - const utils = useUtils(); + const utils = useUtils(); const reducerFn = React.useRef( - createCalendarStateReducer( - Boolean(reduceAnimations), - disableSwitchToMonthOnDayFocus, - utils, - ), + createCalendarStateReducer(Boolean(reduceAnimations), disableSwitchToMonthOnDayFocus, utils), ).current; const referenceDate = React.useMemo( @@ -187,7 +177,7 @@ export const useCalendarState = ( }, [referenceDate, utils]); const handleChangeMonth = React.useCallback( - (payload: ChangeMonthPayload) => { + (payload: ChangeMonthPayload) => { dispatch({ type: 'changeMonth', ...payload, @@ -201,7 +191,7 @@ export const useCalendarState = ( ); const changeMonth = React.useCallback( - (newDate: TDate) => { + (newDate: PickerValidDate) => { const newDateRequested = newDate; if (utils.isSameMonth(newDateRequested, calendarState.currentMonth)) { return; @@ -231,7 +221,7 @@ export const useCalendarState = ( }, []); const changeFocusedDay = useEventCallback( - (newFocusedDate: TDate | null, withoutMonthSwitchingAnimation?: boolean) => { + (newFocusedDate: PickerValidDate | null, withoutMonthSwitchingAnimation?: boolean) => { if (!isDateDisabled(newFocusedDate)) { dispatch({ type: 'changeFocusedDay', diff --git a/packages/x-date-pickers/src/DateCalendar/useIsDateDisabled.ts b/packages/x-date-pickers/src/DateCalendar/useIsDateDisabled.ts index d611d2281103..8d855a446ee3 100644 --- a/packages/x-date-pickers/src/DateCalendar/useIsDateDisabled.ts +++ b/packages/x-date-pickers/src/DateCalendar/useIsDateDisabled.ts @@ -5,7 +5,7 @@ import { ValidateDateProps, validateDate } from '../validation'; import { useLocalizationContext } from '../internals/hooks/useUtils'; import { PickerValidDate, TimezoneProps } from '../models'; -export const useIsDateDisabled = ({ +export const useIsDateDisabled = ({ shouldDisableDate, shouldDisableMonth, shouldDisableYear, @@ -14,11 +14,11 @@ export const useIsDateDisabled = ({ disableFuture, disablePast, timezone, -}: ValidateDateProps & DefaultizedProps) => { - const adapter = useLocalizationContext(); +}: ValidateDateProps & DefaultizedProps) => { + const adapter = useLocalizationContext(); return React.useCallback( - (day: TDate | null) => + (day: PickerValidDate | null) => validateDate({ adapter, value: day, diff --git a/packages/x-date-pickers/src/DateField/DateField.tsx b/packages/x-date-pickers/src/DateField/DateField.tsx index 197f03a7a9e7..5a67f249f3a4 100644 --- a/packages/x-date-pickers/src/DateField/DateField.tsx +++ b/packages/x-date-pickers/src/DateField/DateField.tsx @@ -10,14 +10,9 @@ import { useDateField } from './useDateField'; import { useClearableField } from '../hooks'; import { PickersTextField } from '../PickersTextField'; import { convertFieldResponseIntoMuiTextFieldProps } from '../internals/utils/convertFieldResponseIntoMuiTextFieldProps'; -import { PickerValidDate } from '../models'; -type DateFieldComponent = (< - TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = true, ->( - props: DateFieldProps & - React.RefAttributes, +type DateFieldComponent = (( + props: DateFieldProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; /** @@ -31,12 +26,8 @@ type DateFieldComponent = (< * - [DateField API](https://mui.com/x/api/date-pickers/date-field/) */ const DateField = React.forwardRef(function DateField< - TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = true, ->( - inProps: DateFieldProps, - inRef: React.Ref, -) { +>(inProps: DateFieldProps, inRef: React.Ref) { const themeProps = useThemeProps({ props: inProps, name: 'MuiDateField', @@ -57,17 +48,15 @@ const DateField = React.forwardRef(function DateField< ref: inRef, }, ownerState, - }) as DateFieldProps; + }) as DateFieldProps; // TODO: Remove when mui/material-ui#35088 will be merged textFieldProps.inputProps = { ...inputProps, ...textFieldProps.inputProps }; textFieldProps.InputProps = { ...InputProps, ...textFieldProps.InputProps }; - const fieldResponse = useDateField< - TDate, - TEnableAccessibleFieldDOMStructure, - typeof textFieldProps - >(textFieldProps); + const fieldResponse = useDateField( + textFieldProps, + ); const convertedFieldResponse = convertFieldResponseIntoMuiTextFieldProps(fieldResponse); const processedFieldProps = useClearableField({ @@ -283,22 +272,19 @@ DateField.propTypes = { * * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance. * - * @template TDate - * @param {TDate} day The date to test. + * @param {PickerValidDate} day The date to test. * @returns {boolean} If `true` the date will be disabled. */ shouldDisableDate: PropTypes.func, /** * Disable specific month. - * @template TDate - * @param {TDate} month The month to test. + * @param {PickerValidDate} month The month to test. * @returns {boolean} If `true`, the month will be disabled. */ shouldDisableMonth: PropTypes.func, /** * Disable specific year. - * @template TDate - * @param {TDate} year The year to test. + * @param {PickerValidDate} year The year to test. * @returns {boolean} If `true`, the year will be disabled. */ shouldDisableYear: PropTypes.func, diff --git a/packages/x-date-pickers/src/DateField/DateField.types.ts b/packages/x-date-pickers/src/DateField/DateField.types.ts index 453a25c8d7ac..3a7c21470f5b 100644 --- a/packages/x-date-pickers/src/DateField/DateField.types.ts +++ b/packages/x-date-pickers/src/DateField/DateField.types.ts @@ -16,32 +16,26 @@ import { import { UseFieldInternalProps } from '../internals/hooks/useField'; import { ExportedValidateDateProps } from '../validation/validateDate'; -export interface UseDateFieldProps< - TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean, -> extends MakeOptional< +export interface UseDateFieldProps + extends MakeOptional< UseFieldInternalProps< - TDate | null, - TDate, + PickerValidDate | null, FieldSection, TEnableAccessibleFieldDOMStructure, DateValidationError >, 'format' >, - ExportedValidateDateProps, + ExportedValidateDateProps, ExportedUseClearableFieldProps {} -export type DateFieldProps< - TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = true, -> = +export type DateFieldProps = // The hook props - UseDateFieldProps & + UseDateFieldProps & // The TextField props Omit< BuiltInFieldTextFieldProps, - keyof UseDateFieldProps + keyof UseDateFieldProps > & { /** * Overridable component slots. @@ -52,13 +46,11 @@ export type DateFieldProps< * The props used for each component slot. * @default {} */ - slotProps?: DateFieldSlotProps; + slotProps?: DateFieldSlotProps; }; -export type DateFieldOwnerState< - TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean, -> = DateFieldProps; +export type DateFieldOwnerState = + DateFieldProps; export interface DateFieldSlots extends UseClearableFieldSlots { /** @@ -68,13 +60,11 @@ export interface DateFieldSlots extends UseClearableFieldSlots { textField?: React.ElementType; } -export interface DateFieldSlotProps< - TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean, -> extends UseClearableFieldSlotProps { +export interface DateFieldSlotProps + extends UseClearableFieldSlotProps { textField?: SlotComponentProps< typeof TextField, {}, - DateFieldOwnerState + DateFieldOwnerState >; } diff --git a/packages/x-date-pickers/src/DateField/tests/describes.DateField.test.tsx b/packages/x-date-pickers/src/DateField/tests/describes.DateField.test.tsx index b5fdeb6d272a..6f7090a606a6 100644 --- a/packages/x-date-pickers/src/DateField/tests/describes.DateField.test.tsx +++ b/packages/x-date-pickers/src/DateField/tests/describes.DateField.test.tsx @@ -46,7 +46,7 @@ describe(' - Describes', () => { expectFieldValueV7(fieldRoot, expectedValueStr); }, setNewValue: (value, { selectSection, pressKey }) => { - const newValue = adapterToUse.addDays(value, 1); + const newValue = adapterToUse.addDays(value!, 1); selectSection('day'); pressKey(undefined, 'ArrowUp'); diff --git a/packages/x-date-pickers/src/DateField/useDateField.ts b/packages/x-date-pickers/src/DateField/useDateField.ts index 575ada997d44..c5f7e8da6210 100644 --- a/packages/x-date-pickers/src/DateField/useDateField.ts +++ b/packages/x-date-pickers/src/DateField/useDateField.ts @@ -11,23 +11,20 @@ import { FieldSection, PickerValidDate } from '../models'; import { useDefaultizedDateField } from '../internals/hooks/defaultizedFieldProps'; export const useDateField = < - TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean, - TAllProps extends UseDateFieldProps, + TAllProps extends UseDateFieldProps, >( inProps: TAllProps, ) => { const props = useDefaultizedDateField< - TDate, - UseDateFieldProps, + UseDateFieldProps, TAllProps >(inProps); const { forwardedProps, internalProps } = useSplitFieldProps(props, 'date'); return useField< - TDate | null, - TDate, + PickerValidDate | null, FieldSection, TEnableAccessibleFieldDOMStructure, typeof forwardedProps, diff --git a/packages/x-date-pickers/src/DatePicker/DatePicker.tsx b/packages/x-date-pickers/src/DatePicker/DatePicker.tsx index d85567d1eae3..c535422d9455 100644 --- a/packages/x-date-pickers/src/DatePicker/DatePicker.tsx +++ b/packages/x-date-pickers/src/DatePicker/DatePicker.tsx @@ -8,14 +8,9 @@ import { DesktopDatePicker } from '../DesktopDatePicker'; import { MobileDatePicker } from '../MobileDatePicker'; import { DatePickerProps } from './DatePicker.types'; import { DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from '../internals/utils/utils'; -import { PickerValidDate } from '../models'; -type DatePickerComponent = (< - TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = true, ->( - props: DatePickerProps & - React.RefAttributes, +type DatePickerComponent = (( + props: DatePickerProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; /** @@ -29,12 +24,8 @@ type DatePickerComponent = (< * - [DatePicker API](https://mui.com/x/api/date-pickers/date-picker/) */ const DatePicker = React.forwardRef(function DatePicker< - TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = true, ->( - inProps: DatePickerProps, - ref: React.Ref, -) { +>(inProps: DatePickerProps, ref: React.Ref) { const props = useThemeProps({ props: inProps, name: 'MuiDatePicker' }); const { desktopModeMediaQuery = DEFAULT_DESKTOP_MODE_MEDIA_QUERY, ...other } = props; @@ -69,9 +60,9 @@ DatePicker.propTypes = { closeOnSelect: PropTypes.bool, /** * Formats the day of week displayed in the calendar header. - * @param {TDate} date The date of the day of week provided by the adapter. + * @param {PickerValidDate} date The date of the day of week provided by the adapter. * @returns {string} The name to display. - * @default (date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase() + * @default (date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase() */ dayOfWeekFormatter: PropTypes.func, /** @@ -205,8 +196,7 @@ DatePicker.propTypes = { onError: PropTypes.func, /** * Callback fired on month change. - * @template TDate - * @param {TDate} month The new month. + * @param {PickerValidDate} month The new month. */ onMonthChange: PropTypes.func, /** @@ -227,8 +217,7 @@ DatePicker.propTypes = { onViewChange: PropTypes.func, /** * Callback fired on year change. - * @template TDate - * @param {TDate} year The new year. + * @param {PickerValidDate} year The new year. */ onYearChange: PropTypes.func, /** @@ -292,22 +281,19 @@ DatePicker.propTypes = { * * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance. * - * @template TDate - * @param {TDate} day The date to test. + * @param {PickerValidDate} day The date to test. * @returns {boolean} If `true` the date will be disabled. */ shouldDisableDate: PropTypes.func, /** * Disable specific month. - * @template TDate - * @param {TDate} month The month to test. + * @param {PickerValidDate} month The month to test. * @returns {boolean} If `true`, the month will be disabled. */ shouldDisableMonth: PropTypes.func, /** * Disable specific year. - * @template TDate - * @param {TDate} year The year to test. + * @param {PickerValidDate} year The year to test. * @returns {boolean} If `true`, the year will be disabled. */ shouldDisableYear: PropTypes.func, diff --git a/packages/x-date-pickers/src/DatePicker/DatePicker.types.ts b/packages/x-date-pickers/src/DatePicker/DatePicker.types.ts index 89cb1829db62..3b80ff310dad 100644 --- a/packages/x-date-pickers/src/DatePicker/DatePicker.types.ts +++ b/packages/x-date-pickers/src/DatePicker/DatePicker.types.ts @@ -18,21 +18,15 @@ import { PickerValidDate, } from '../models'; -export interface DatePickerSlots - extends DesktopDatePickerSlots, - MobileDatePickerSlots {} +export interface DatePickerSlots extends DesktopDatePickerSlots, MobileDatePickerSlots {} -export interface DatePickerSlotProps< - TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean, -> extends DesktopDatePickerSlotProps, - MobileDatePickerSlotProps {} +export interface DatePickerSlotProps + extends DesktopDatePickerSlotProps, + MobileDatePickerSlotProps {} -export interface DatePickerProps< - TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = true, -> extends DesktopDatePickerProps, - MobileDatePickerProps { +export interface DatePickerProps + extends DesktopDatePickerProps, + MobileDatePickerProps { /** * CSS media query when `Mobile` mode will be changed to `Desktop`. * @default '@media (pointer: fine)' @@ -43,12 +37,12 @@ export interface DatePickerProps< * Overridable component slots. * @default {} */ - slots?: DatePickerSlots; + slots?: DatePickerSlots; /** * The props used for each component slot. * @default {} */ - slotProps?: DatePickerSlotProps; + slotProps?: DatePickerSlotProps; /** * Years rendered per row. * @default 4 on desktop, 3 on mobile @@ -59,11 +53,9 @@ export interface DatePickerProps< /** * Props the field can receive when used inside a `DatePicker`, `DesktopDatePicker` or `MobileDatePicker` component. */ -export type DatePickerFieldProps< - TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = true, -> = MakeRequired< - UseDateFieldProps, - 'format' | 'timezone' | 'value' | keyof BaseDateValidationProps -> & - BaseSingleInputFieldProps; +export type DatePickerFieldProps = + MakeRequired< + UseDateFieldProps, + 'format' | 'timezone' | 'value' | keyof BaseDateValidationProps + > & + BaseSingleInputFieldProps; diff --git a/packages/x-date-pickers/src/DatePicker/DatePickerToolbar.tsx b/packages/x-date-pickers/src/DatePicker/DatePickerToolbar.tsx index 833964b60278..518a67af8914 100644 --- a/packages/x-date-pickers/src/DatePicker/DatePickerToolbar.tsx +++ b/packages/x-date-pickers/src/DatePicker/DatePickerToolbar.tsx @@ -16,8 +16,8 @@ import { } from './datePickerToolbarClasses'; import { resolveDateFormat } from '../internals/utils/date-utils'; -export interface DatePickerToolbarProps - extends BaseToolbarProps, +export interface DatePickerToolbarProps + extends BaseToolbarProps, ExportedDatePickerToolbarProps {} export interface ExportedDatePickerToolbarProps extends ExportedBaseToolbarProps { @@ -27,7 +27,7 @@ export interface ExportedDatePickerToolbarProps extends ExportedBaseToolbarProps classes?: Partial; } -const useUtilityClasses = (ownerState: DatePickerToolbarProps) => { +const useUtilityClasses = (ownerState: DatePickerToolbarProps) => { const { classes } = ownerState; const slots = { root: ['root'], @@ -47,7 +47,7 @@ const DatePickerToolbarTitle = styled(Typography, { name: 'MuiDatePickerToolbar', slot: 'Title', overridesResolver: (_, styles) => styles.title, -})<{ ownerState: DatePickerToolbarProps }>({ +})<{ ownerState: DatePickerToolbarProps }>({ variants: [ { props: { isLandscape: true }, @@ -58,8 +58,8 @@ const DatePickerToolbarTitle = styled(Typography, { ], }); -type DatePickerToolbarComponent = (( - props: DatePickerToolbarProps & React.RefAttributes, +type DatePickerToolbarComponent = (( + props: DatePickerToolbarProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; /** @@ -72,9 +72,10 @@ type DatePickerToolbarComponent = (( * * - [DatePickerToolbar API](https://mui.com/x/api/date-pickers/date-picker-toolbar/) */ -export const DatePickerToolbar = React.forwardRef(function DatePickerToolbar< - TDate extends PickerValidDate, ->(inProps: DatePickerToolbarProps, ref: React.Ref) { +export const DatePickerToolbar = React.forwardRef(function DatePickerToolbar( + inProps: DatePickerToolbarProps, + ref: React.Ref, +) { const props = useThemeProps({ props: inProps, name: 'MuiDatePickerToolbar' }); const { value, @@ -88,8 +89,8 @@ export const DatePickerToolbar = React.forwardRef(function DatePickerToolbar< view, ...other } = props; - const utils = useUtils(); - const translations = usePickersTranslations(); + const utils = useUtils(); + const translations = usePickersTranslations(); const classes = useUtilityClasses(props); const dateText = React.useMemo(() => { diff --git a/packages/x-date-pickers/src/DatePicker/shared.tsx b/packages/x-date-pickers/src/DatePicker/shared.tsx index 87d88d68c978..05573e1cc9e2 100644 --- a/packages/x-date-pickers/src/DatePicker/shared.tsx +++ b/packages/x-date-pickers/src/DatePicker/shared.tsx @@ -21,65 +21,59 @@ import { import { PickerViewRendererLookup } from '../internals/hooks/usePicker/usePickerViews'; import { DateViewRendererProps } from '../dateViewRenderers'; -export interface BaseDatePickerSlots - extends DateCalendarSlots { +export interface BaseDatePickerSlots extends DateCalendarSlots { /** * Custom component for the toolbar rendered above the views. * @default DatePickerToolbar */ - toolbar?: React.JSXElementConstructor>; + toolbar?: React.JSXElementConstructor; } -export interface BaseDatePickerSlotProps - extends DateCalendarSlotProps { +export interface BaseDatePickerSlotProps extends DateCalendarSlotProps { toolbar?: ExportedDatePickerToolbarProps; } export type DatePickerViewRenderers< - TDate extends PickerValidDate, TView extends DateView, TAdditionalProps extends {} = {}, > = PickerViewRendererLookup< - TDate | null, + PickerValidDate | null, TView, - DateViewRendererProps, + DateViewRendererProps, TAdditionalProps >; -export interface BaseDatePickerProps - extends BasePickerInputProps, - ExportedDateCalendarProps { +export interface BaseDatePickerProps + extends BasePickerInputProps, + ExportedDateCalendarProps { /** * Overridable component slots. * @default {} */ - slots?: BaseDatePickerSlots; + slots?: BaseDatePickerSlots; /** * The props used for each component slot. * @default {} */ - slotProps?: BaseDatePickerSlotProps; + slotProps?: BaseDatePickerSlotProps; /** * Define custom view renderers for each section. * If `null`, the section will only have field editing. * If `undefined`, internally defined view will be used. */ - viewRenderers?: Partial>; + viewRenderers?: Partial>; } -type UseDatePickerDefaultizedProps< - TDate extends PickerValidDate, - Props extends BaseDatePickerProps, -> = LocalizedComponent< - DefaultizedProps> +type UseDatePickerDefaultizedProps = LocalizedComponent< + DefaultizedProps >; -export function useDatePickerDefaultizedProps< - TDate extends PickerValidDate, - Props extends BaseDatePickerProps, ->(props: Props, name: string): UseDatePickerDefaultizedProps { - const utils = useUtils(); - const defaultDates = useDefaultDates(); +export function useDatePickerDefaultizedProps( + props: Props, + name: string, +): UseDatePickerDefaultizedProps { + const utils = useUtils(); + const defaultDates = useDefaultDates(); const themeProps = useThemeProps({ props, name, diff --git a/packages/x-date-pickers/src/DateTimeField/DateTimeField.tsx b/packages/x-date-pickers/src/DateTimeField/DateTimeField.tsx index 85fdbc0f272b..3bfe549177c0 100644 --- a/packages/x-date-pickers/src/DateTimeField/DateTimeField.tsx +++ b/packages/x-date-pickers/src/DateTimeField/DateTimeField.tsx @@ -10,13 +10,9 @@ import { useDateTimeField } from './useDateTimeField'; import { useClearableField } from '../hooks'; import { PickersTextField } from '../PickersTextField'; import { convertFieldResponseIntoMuiTextFieldProps } from '../internals/utils/convertFieldResponseIntoMuiTextFieldProps'; -import { PickerValidDate } from '../models'; -type DateTimeFieldComponent = (< - TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = true, ->( - props: DateTimeFieldProps & +type DateTimeFieldComponent = (( + props: DateTimeFieldProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; @@ -31,10 +27,9 @@ type DateTimeFieldComponent = (< * - [DateTimeField API](https://mui.com/x/api/date-pickers/date-time-field/) */ const DateTimeField = React.forwardRef(function DateTimeField< - TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = true, >( - inProps: DateTimeFieldProps, + inProps: DateTimeFieldProps, inRef: React.Ref, ) { const themeProps = useThemeProps({ @@ -57,17 +52,15 @@ const DateTimeField = React.forwardRef(function DateTimeField< additionalProps: { ref: inRef, }, - }) as DateTimeFieldProps; + }) as DateTimeFieldProps; // TODO: Remove when mui/material-ui#35088 will be merged textFieldProps.inputProps = { ...inputProps, ...textFieldProps.inputProps }; textFieldProps.InputProps = { ...InputProps, ...textFieldProps.InputProps }; - const fieldResponse = useDateTimeField< - TDate, - TEnableAccessibleFieldDOMStructure, - typeof textFieldProps - >(textFieldProps); + const fieldResponse = useDateTimeField( + textFieldProps, + ); const convertedFieldResponse = convertFieldResponseIntoMuiTextFieldProps(fieldResponse); const processedFieldProps = useClearableField({ @@ -316,30 +309,26 @@ DateTimeField.propTypes = { * * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance. * - * @template TDate - * @param {TDate} day The date to test. + * @param {PickerValidDate} day The date to test. * @returns {boolean} If `true` the date will be disabled. */ shouldDisableDate: PropTypes.func, /** * Disable specific month. - * @template TDate - * @param {TDate} month The month to test. + * @param {PickerValidDate} month The month to test. * @returns {boolean} If `true`, the month will be disabled. */ shouldDisableMonth: PropTypes.func, /** * Disable specific time. - * @template TDate - * @param {TDate} value The value to check. + * @param {PickerValidDate} value The value to check. * @param {TimeView} view The clock type of the timeValue. * @returns {boolean} If `true` the time will be disabled. */ shouldDisableTime: PropTypes.func, /** * Disable specific year. - * @template TDate - * @param {TDate} year The year to test. + * @param {PickerValidDate} year The year to test. * @returns {boolean} If `true`, the year will be disabled. */ shouldDisableYear: PropTypes.func, diff --git a/packages/x-date-pickers/src/DateTimeField/DateTimeField.types.ts b/packages/x-date-pickers/src/DateTimeField/DateTimeField.types.ts index ef06fc0c191a..b306ed6dbd2b 100644 --- a/packages/x-date-pickers/src/DateTimeField/DateTimeField.types.ts +++ b/packages/x-date-pickers/src/DateTimeField/DateTimeField.types.ts @@ -17,33 +17,27 @@ import { import { ExportedValidateDateTimeProps } from '../validation/validateDateTime'; import { AmPmProps } from '../internals/models/props/time'; -export interface UseDateTimeFieldProps< - TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean, -> extends MakeOptional< +export interface UseDateTimeFieldProps + extends MakeOptional< UseFieldInternalProps< - TDate | null, - TDate, + PickerValidDate | null, FieldSection, TEnableAccessibleFieldDOMStructure, DateTimeValidationError >, 'format' >, - ExportedValidateDateTimeProps, + ExportedValidateDateTimeProps, ExportedUseClearableFieldProps, AmPmProps {} -export type DateTimeFieldProps< - TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = true, -> = +export type DateTimeFieldProps = // The hook props - UseDateTimeFieldProps & + UseDateTimeFieldProps & // The TextField props Omit< BuiltInFieldTextFieldProps, - keyof UseDateTimeFieldProps + keyof UseDateTimeFieldProps > & { /** * Overridable component slots. @@ -54,13 +48,11 @@ export type DateTimeFieldProps< * The props used for each component slot. * @default {} */ - slotProps?: DateTimeFieldSlotProps; + slotProps?: DateTimeFieldSlotProps; }; -export type DateTimeFieldOwnerState< - TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean, -> = DateTimeFieldProps; +export type DateTimeFieldOwnerState = + DateTimeFieldProps; export interface DateTimeFieldSlots extends UseClearableFieldSlots { /** @@ -70,13 +62,11 @@ export interface DateTimeFieldSlots extends UseClearableFieldSlots { textField?: React.ElementType; } -export interface DateTimeFieldSlotProps< - TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean, -> extends UseClearableFieldSlotProps { +export interface DateTimeFieldSlotProps + extends UseClearableFieldSlotProps { textField?: SlotComponentProps< typeof TextField, {}, - DateTimeFieldOwnerState + DateTimeFieldOwnerState >; } diff --git a/packages/x-date-pickers/src/DateTimeField/tests/describes.DateTimeField.test.tsx b/packages/x-date-pickers/src/DateTimeField/tests/describes.DateTimeField.test.tsx index 2ac6de801e45..f18c33dd44b2 100644 --- a/packages/x-date-pickers/src/DateTimeField/tests/describes.DateTimeField.test.tsx +++ b/packages/x-date-pickers/src/DateTimeField/tests/describes.DateTimeField.test.tsx @@ -53,7 +53,7 @@ describe(' - Describes', () => { expectFieldValueV7(fieldRoot, expectedValueStr); }, setNewValue: (value, { selectSection, pressKey }) => { - const newValue = adapterToUse.addDays(value, 1); + const newValue = adapterToUse.addDays(value!, 1); selectSection('day'); pressKey(undefined, 'ArrowUp'); diff --git a/packages/x-date-pickers/src/DateTimeField/tests/timezone.DateTimeField.test.tsx b/packages/x-date-pickers/src/DateTimeField/tests/timezone.DateTimeField.test.tsx index 2e7ba63cb8c5..e746a264a443 100644 --- a/packages/x-date-pickers/src/DateTimeField/tests/timezone.DateTimeField.test.tsx +++ b/packages/x-date-pickers/src/DateTimeField/tests/timezone.DateTimeField.test.tsx @@ -1,5 +1,6 @@ import { spy } from 'sinon'; import { expect } from 'chai'; +import { DateTime } from 'luxon'; import { fireEvent } from '@mui/internal-test-utils'; import { DateTimeField } from '@mui/x-date-pickers/DateTimeField'; import { @@ -129,7 +130,7 @@ describe(' - Timezone', () => { it('should update the field when time zone changes (timestamp remains the same)', () => { const view = renderWithProps({ enableAccessibleFieldDOMStructure: true }); - const date = adapter.date('2020-06-18T14:30:10.000Z').setZone('UTC'); + const date = (adapter.date('2020-06-18T14:30:10.000Z') as DateTime).setZone('UTC'); view.setProps({ value: date }); expectFieldValueV7(view.getSectionsContainer(), '06/18/2020 02:30 PM'); diff --git a/packages/x-date-pickers/src/DateTimeField/useDateTimeField.ts b/packages/x-date-pickers/src/DateTimeField/useDateTimeField.ts index e422c12493f6..33e215fd4c7d 100644 --- a/packages/x-date-pickers/src/DateTimeField/useDateTimeField.ts +++ b/packages/x-date-pickers/src/DateTimeField/useDateTimeField.ts @@ -11,23 +11,20 @@ import { FieldSection, PickerValidDate } from '../models'; import { useDefaultizedDateTimeField } from '../internals/hooks/defaultizedFieldProps'; export const useDateTimeField = < - TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean, - TAllProps extends UseDateTimeFieldProps, + TAllProps extends UseDateTimeFieldProps, >( inProps: TAllProps, ) => { const props = useDefaultizedDateTimeField< - TDate, - UseDateTimeFieldProps, + UseDateTimeFieldProps, TAllProps >(inProps); const { forwardedProps, internalProps } = useSplitFieldProps(props, 'date-time'); return useField< - TDate | null, - TDate, + PickerValidDate | null, FieldSection, TEnableAccessibleFieldDOMStructure, typeof forwardedProps, diff --git a/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.tsx b/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.tsx index d18db93743ae..24dfddb480e3 100644 --- a/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.tsx +++ b/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.tsx @@ -8,13 +8,9 @@ import { DesktopDateTimePicker } from '../DesktopDateTimePicker'; import { MobileDateTimePicker, MobileDateTimePickerProps } from '../MobileDateTimePicker'; import { DateTimePickerProps } from './DateTimePicker.types'; import { DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from '../internals/utils/utils'; -import { PickerValidDate } from '../models'; -type DateTimePickerComponent = (< - TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = true, ->( - props: DateTimePickerProps & +type DateTimePickerComponent = (( + props: DateTimePickerProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; @@ -29,10 +25,9 @@ type DateTimePickerComponent = (< * - [DateTimePicker API](https://mui.com/x/api/date-pickers/date-time-picker/) */ const DateTimePicker = React.forwardRef(function DateTimePicker< - TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = true, >( - inProps: DateTimePickerProps, + inProps: DateTimePickerProps, ref: React.Ref, ) { const props = useThemeProps({ props: inProps, name: 'MuiDateTimePicker' }); @@ -46,7 +41,7 @@ const DateTimePicker = React.forwardRef(function DateTimePicker< return ; } - return )} />; + return ; }) as DateTimePickerComponent; DateTimePicker.propTypes = { @@ -79,9 +74,9 @@ DateTimePicker.propTypes = { closeOnSelect: PropTypes.bool, /** * Formats the day of week displayed in the calendar header. - * @param {TDate} date The date of the day of week provided by the adapter. + * @param {PickerValidDate} date The date of the day of week provided by the adapter. * @returns {string} The name to display. - * @default (date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase() + * @default (date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase() */ dayOfWeekFormatter: PropTypes.func, /** @@ -243,8 +238,7 @@ DateTimePicker.propTypes = { onError: PropTypes.func, /** * Callback fired on month change. - * @template TDate - * @param {TDate} month The new month. + * @param {PickerValidDate} month The new month. */ onMonthChange: PropTypes.func, /** @@ -265,8 +259,7 @@ DateTimePicker.propTypes = { onViewChange: PropTypes.func, /** * Callback fired on year change. - * @template TDate - * @param {TDate} year The new year. + * @param {PickerValidDate} year The new year. */ onYearChange: PropTypes.func, /** @@ -330,30 +323,26 @@ DateTimePicker.propTypes = { * * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance. * - * @template TDate - * @param {TDate} day The date to test. + * @param {PickerValidDate} day The date to test. * @returns {boolean} If `true` the date will be disabled. */ shouldDisableDate: PropTypes.func, /** * Disable specific month. - * @template TDate - * @param {TDate} month The month to test. + * @param {PickerValidDate} month The month to test. * @returns {boolean} If `true`, the month will be disabled. */ shouldDisableMonth: PropTypes.func, /** * Disable specific time. - * @template TDate - * @param {TDate} value The value to check. + * @param {PickerValidDate} value The value to check. * @param {TimeView} view The clock type of the timeValue. * @returns {boolean} If `true` the time will be disabled. */ shouldDisableTime: PropTypes.func, /** * Disable specific year. - * @template TDate - * @param {TDate} year The year to test. + * @param {PickerValidDate} year The year to test. * @returns {boolean} If `true`, the year will be disabled. */ shouldDisableYear: PropTypes.func, diff --git a/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.types.ts b/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.types.ts index 6717c44f69b7..fd81624ee3bd 100644 --- a/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.types.ts +++ b/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.types.ts @@ -20,31 +20,19 @@ import { } from '../models'; import { ExportedYearCalendarProps } from '../YearCalendar/YearCalendar.types'; -export interface DateTimePickerSlots - extends DesktopDateTimePickerSlots, - MobileDateTimePickerSlots {} +export interface DateTimePickerSlots + extends DesktopDateTimePickerSlots, + MobileDateTimePickerSlots {} -export interface DateTimePickerSlotProps< - TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean, -> extends DesktopDateTimePickerSlotProps, - MobileDateTimePickerSlotProps< - TDate, - DateOrTimeViewWithMeridiem, - TEnableAccessibleFieldDOMStructure - > {} +export interface DateTimePickerSlotProps + extends DesktopDateTimePickerSlotProps, + MobileDateTimePickerSlotProps {} -export interface DateTimePickerProps< - TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = true, -> extends DesktopDateTimePickerProps, +export interface DateTimePickerProps + extends DesktopDateTimePickerProps, ExportedYearCalendarProps, Omit< - MobileDateTimePickerProps< - TDate, - DateOrTimeViewWithMeridiem, - TEnableAccessibleFieldDOMStructure - >, + MobileDateTimePickerProps, 'views' > { /** @@ -57,12 +45,12 @@ export interface DateTimePickerProps< * Overridable component slots. * @default {} */ - slots?: DateTimePickerSlots; + slots?: DateTimePickerSlots; /** * The props used for each component slot. * @default {} */ - slotProps?: DateTimePickerSlotProps; + slotProps?: DateTimePickerSlotProps; /** * Years rendered per row. * @default 4 on desktop, 3 on mobile @@ -74,16 +62,14 @@ export interface DateTimePickerProps< * Props the field can receive when used inside a date time picker. * (`DateTimePicker`, `DesktopDateTimePicker` or `MobileDateTimePicker` component). */ -export type DateTimePickerFieldProps< - TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = true, -> = MakeRequired< - UseDateTimeFieldProps, - | 'format' - | 'timezone' - | 'value' - | 'ampm' - | keyof BaseDateValidationProps - | keyof BaseTimeValidationProps -> & - BaseSingleInputFieldProps; +export type DateTimePickerFieldProps = + MakeRequired< + UseDateTimeFieldProps, + | 'format' + | 'timezone' + | 'value' + | 'ampm' + | keyof BaseDateValidationProps + | keyof BaseTimeValidationProps + > & + BaseSingleInputFieldProps; diff --git a/packages/x-date-pickers/src/DateTimePicker/DateTimePickerTabs.tsx b/packages/x-date-pickers/src/DateTimePicker/DateTimePickerTabs.tsx index a9042194162d..6f5a2a802b49 100644 --- a/packages/x-date-pickers/src/DateTimePicker/DateTimePickerTabs.tsx +++ b/packages/x-date-pickers/src/DateTimePicker/DateTimePickerTabs.tsx @@ -15,7 +15,6 @@ import { } from './dateTimePickerTabsClasses'; import { BaseTabsProps, ExportedBaseTabsProps } from '../internals/models/props/tabs'; import { isDatePickerView } from '../internals/utils/date-utils'; -import { PickerValidDate } from '../models'; type TabValue = 'date' | 'time'; @@ -95,9 +94,7 @@ const DateTimePickerTabsRoot = styled(Tabs, { * * - [DateTimePickerTabs API](https://mui.com/x/api/date-pickers/date-time-picker-tabs/) */ -const DateTimePickerTabs = function DateTimePickerTabs( - inProps: DateTimePickerTabsProps, -) { +const DateTimePickerTabs = function DateTimePickerTabs(inProps: DateTimePickerTabsProps) { const props = useThemeProps({ props: inProps, name: 'MuiDateTimePickerTabs' }); const { dateIcon = , @@ -109,7 +106,7 @@ const DateTimePickerTabs = function DateTimePickerTabs(); + const translations = usePickersTranslations(); const classes = useUtilityClasses(props); const handleChange = (event: React.SyntheticEvent, value: TabValue) => { diff --git a/packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx b/packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx index e7c992ca940e..760e09626006 100644 --- a/packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx +++ b/packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx @@ -32,9 +32,9 @@ export interface ExportedDateTimePickerToolbarProps extends ExportedBaseToolbarP classes?: Partial; } -export interface DateTimePickerToolbarProps +export interface DateTimePickerToolbarProps extends ExportedDateTimePickerToolbarProps, - MakeOptional, 'view'> { + MakeOptional, 'view'> { toolbarVariant?: WrapperVariant; /** * If provided, it will be used instead of `dateTimePickerToolbarTitle` from localization. @@ -44,12 +44,11 @@ export interface DateTimePickerToolbarProps ampmInClock?: boolean; } -interface DateTimePickerToolbarOwnerState - extends DateTimePickerToolbarProps { +interface DateTimePickerToolbarOwnerState extends DateTimePickerToolbarProps { isRtl: boolean; } -const useUtilityClasses = (ownerState: DateTimePickerToolbarOwnerState) => { +const useUtilityClasses = (ownerState: DateTimePickerToolbarOwnerState) => { const { classes, isLandscape, isRtl } = ownerState; const slots = { @@ -69,7 +68,7 @@ const DateTimePickerToolbarRoot = styled(PickersToolbar, { name: 'MuiDateTimePickerToolbar', slot: 'Root', overridesResolver: (props, styles) => styles.root, -})<{ ownerState: DateTimePickerToolbarOwnerState }>(({ theme }) => ({ +})<{ ownerState: DateTimePickerToolbarOwnerState }>(({ theme }) => ({ paddingLeft: 16, paddingRight: 16, justifyContent: 'space-around', @@ -105,7 +104,7 @@ const DateTimePickerToolbarDateContainer = styled('div', { name: 'MuiDateTimePickerToolbar', slot: 'DateContainer', overridesResolver: (props, styles) => styles.dateContainer, -})<{ ownerState: DateTimePickerToolbarOwnerState }>({ +})<{ ownerState: DateTimePickerToolbarOwnerState }>({ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', @@ -115,7 +114,7 @@ const DateTimePickerToolbarTimeContainer = styled('div', { name: 'MuiDateTimePickerToolbar', slot: 'TimeContainer', overridesResolver: (props, styles) => styles.timeContainer, -})<{ ownerState: DateTimePickerToolbarOwnerState }>({ +})<{ ownerState: DateTimePickerToolbarOwnerState }>({ display: 'flex', flexDirection: 'row', variants: [ @@ -134,14 +133,14 @@ const DateTimePickerToolbarTimeContainer = styled('div', { }, }, { - props: ({ isLandscape, toolbarVariant }: DateTimePickerToolbarOwnerState) => + props: ({ isLandscape, toolbarVariant }: DateTimePickerToolbarOwnerState) => isLandscape && toolbarVariant !== 'desktop', style: { flexDirection: 'column', }, }, { - props: ({ isLandscape, toolbarVariant, isRtl }: DateTimePickerToolbarOwnerState) => + props: ({ isLandscape, toolbarVariant, isRtl }: DateTimePickerToolbarOwnerState) => isLandscape && toolbarVariant !== 'desktop' && isRtl, style: { flexDirection: 'column-reverse', @@ -154,7 +153,7 @@ const DateTimePickerToolbarTimeDigitsContainer = styled('div', { name: 'MuiDateTimePickerToolbar', slot: 'TimeDigitsContainer', overridesResolver: (props, styles) => styles.timeDigitsContainer, -})<{ ownerState: DateTimePickerToolbarOwnerState }>({ +})<{ ownerState: DateTimePickerToolbarOwnerState }>({ display: 'flex', variants: [ { @@ -175,7 +174,7 @@ const DateTimePickerToolbarSeparator = styled(PickersToolbarText, { slot: 'Separator', overridesResolver: (props, styles) => styles.separator, })<{ - ownerState: DateTimePickerToolbarOwnerState; + ownerState: DateTimePickerToolbarOwnerState; }>({ margin: '0 4px 0 2px', cursor: 'default', @@ -199,7 +198,7 @@ const DateTimePickerToolbarAmPmSelection = styled('div', { styles.ampmSelection, ], })<{ - ownerState: DateTimePickerToolbarProps; + ownerState: DateTimePickerToolbarProps; }>({ display: 'flex', flexDirection: 'column', @@ -231,9 +230,7 @@ const DateTimePickerToolbarAmPmSelection = styled('div', { * * - [DateTimePickerToolbar API](https://mui.com/x/api/date-pickers/date-time-picker-toolbar/) */ -function DateTimePickerToolbar( - inProps: DateTimePickerToolbarProps, -) { +function DateTimePickerToolbar(inProps: DateTimePickerToolbarProps) { const props = useThemeProps({ props: inProps, name: 'MuiDateTimePickerToolbar' }); const { ampm, @@ -255,18 +252,18 @@ function DateTimePickerToolbar( } = props; const isRtl = useRtl(); - const ownerState: DateTimePickerToolbarOwnerState = { ...props, isRtl }; - const utils = useUtils(); + const ownerState: DateTimePickerToolbarOwnerState = { ...props, isRtl }; + const utils = useUtils(); const { meridiemMode, handleMeridiemChange } = useMeridiemMode(value, ampm, onChange); const showAmPmControl = Boolean(ampm && !ampmInClock); const isDesktop = toolbarVariant === 'desktop'; - const translations = usePickersTranslations(); + const translations = usePickersTranslations(); const classes = useUtilityClasses(ownerState); const toolbarTitle = inToolbarTitle ?? translations.dateTimePickerToolbarTitle; - const formatHours = (time: TDate) => + const formatHours = (time: PickerValidDate) => ampm ? utils.format(time, 'hours12h') : utils.format(time, 'hours24h'); const dateText = React.useMemo(() => { diff --git a/packages/x-date-pickers/src/DateTimePicker/shared.tsx b/packages/x-date-pickers/src/DateTimePicker/shared.tsx index 1299905a138c..10bb9510bcba 100644 --- a/packages/x-date-pickers/src/DateTimePicker/shared.tsx +++ b/packages/x-date-pickers/src/DateTimePicker/shared.tsx @@ -34,9 +34,7 @@ import { applyDefaultViewProps } from '../internals/utils/views'; import { BaseClockProps, ExportedBaseClockProps } from '../internals/models/props/time'; import { DateOrTimeViewWithMeridiem, TimeViewWithMeridiem } from '../internals/models'; -export interface BaseDateTimePickerSlots - extends DateCalendarSlots, - TimeClockSlots { +export interface BaseDateTimePickerSlots extends DateCalendarSlots, TimeClockSlots { /** * Tabs enabling toggling between date and time pickers. * @default DateTimePickerTabs @@ -46,12 +44,10 @@ export interface BaseDateTimePickerSlots * Custom component for the toolbar rendered above the views. * @default DateTimePickerToolbar */ - toolbar?: React.JSXElementConstructor>; + toolbar?: React.JSXElementConstructor; } -export interface BaseDateTimePickerSlotProps - extends DateCalendarSlotProps, - TimeClockSlotProps { +export interface BaseDateTimePickerSlotProps extends DateCalendarSlotProps, TimeClockSlotProps { /** * Props passed down to the tabs component. */ @@ -63,27 +59,24 @@ export interface BaseDateTimePickerSlotProps } export type DateTimePickerViewRenderers< - TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TAdditionalProps extends {} = {}, > = PickerViewRendererLookup< - TDate | null, + PickerValidDate | null, TView, - Omit, 'slots' | 'slotProps'> & + Omit, 'slots' | 'slotProps'> & Omit< - TimeViewRendererProps>, + TimeViewRendererProps>, 'slots' | 'slotProps' >, TAdditionalProps >; -export interface BaseDateTimePickerProps< - TDate extends PickerValidDate, - TView extends DateOrTimeViewWithMeridiem, -> extends BasePickerInputProps, - Omit, 'onViewChange'>, - ExportedBaseClockProps, - DateTimeValidationProps { +export interface BaseDateTimePickerProps + extends BasePickerInputProps, + Omit, + ExportedBaseClockProps, + DateTimeValidationProps { /** * Display ampm controls under the clock (instead of in the toolbar). * @default true on desktop, false on mobile @@ -93,24 +86,23 @@ export interface BaseDateTimePickerProps< * Overridable component slots. * @default {} */ - slots?: BaseDateTimePickerSlots; + slots?: BaseDateTimePickerSlots; /** * The props used for each component slot. * @default {} */ - slotProps?: BaseDateTimePickerSlotProps; + slotProps?: BaseDateTimePickerSlotProps; /** * Define custom view renderers for each section. * If `null`, the section will only have field editing. * If `undefined`, internally defined view will be used. */ - viewRenderers?: Partial>; + viewRenderers?: Partial>; } type UseDateTimePickerDefaultizedProps< - TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, - Props extends BaseDateTimePickerProps, + Props extends BaseDateTimePickerProps, > = LocalizedComponent< DefaultizedProps< Props, @@ -118,18 +110,17 @@ type UseDateTimePickerDefaultizedProps< | 'openTo' | 'orientation' | 'ampm' - | keyof BaseDateValidationProps + | keyof BaseDateValidationProps | keyof BaseTimeValidationProps > >; export function useDateTimePickerDefaultizedProps< - TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, - Props extends BaseDateTimePickerProps, ->(props: Props, name: string): UseDateTimePickerDefaultizedProps { - const utils = useUtils(); - const defaultDates = useDefaultDates(); + Props extends BaseDateTimePickerProps, +>(props: Props, name: string): UseDateTimePickerDefaultizedProps { + const utils = useUtils(); + const defaultDates = useDefaultDates(); const themeProps = useThemeProps({ props, name, diff --git a/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.tsx b/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.tsx index a13c557ae11d..2965274f7051 100644 --- a/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.tsx +++ b/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.tsx @@ -9,7 +9,7 @@ import { DatePickerViewRenderers, useDatePickerDefaultizedProps } from '../DateP import { usePickersTranslations } from '../hooks/usePickersTranslations'; import { useUtils } from '../internals/hooks/useUtils'; import { validateDate, extractValidationProps } from '../validation'; -import { DateView, PickerOwnerState, PickerValidDate } from '../models'; +import { DateView, PickerOwnerState } from '../models'; import { useDesktopPicker } from '../internals/hooks/useDesktopPicker'; import { CalendarIcon } from '../icons'; import { DateField } from '../DateField'; @@ -17,11 +17,8 @@ import { renderDateViewCalendar } from '../dateViewRenderers'; import { resolveDateFormat } from '../internals/utils/date-utils'; import { buildGetOpenDialogAriaText } from '../locales/utils/getPickersLocalization'; -type DesktopDatePickerComponent = (< - TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = true, ->( - props: DesktopDatePickerProps & +type DesktopDatePickerComponent = (( + props: DesktopDatePickerProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; @@ -36,22 +33,20 @@ type DesktopDatePickerComponent = (< * - [DesktopDatePicker API](https://mui.com/x/api/date-pickers/desktop-date-picker/) */ const DesktopDatePicker = React.forwardRef(function DesktopDatePicker< - TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = true, >( - inProps: DesktopDatePickerProps, + inProps: DesktopDatePickerProps, ref: React.Ref, ) { - const translations = usePickersTranslations(); - const utils = useUtils(); + const translations = usePickersTranslations(); + const utils = useUtils(); // Props with the default values common to all date pickers const defaultizedProps = useDatePickerDefaultizedProps< - TDate, - DesktopDatePickerProps + DesktopDatePickerProps >(inProps, 'MuiDesktopDatePicker'); - const viewRenderers: DatePickerViewRenderers = { + const viewRenderers: DatePickerViewRenderers = { day: renderDateViewCalendar, month: renderDateViewCalendar, year: renderDateViewCalendar, @@ -84,7 +79,6 @@ const DesktopDatePicker = React.forwardRef(function DesktopDatePicker< }; const { renderPicker } = useDesktopPicker< - TDate, DateView, TEnableAccessibleFieldDOMStructure, typeof props @@ -124,9 +118,9 @@ DesktopDatePicker.propTypes = { closeOnSelect: PropTypes.bool, /** * Formats the day of week displayed in the calendar header. - * @param {TDate} date The date of the day of week provided by the adapter. + * @param {PickerValidDate} date The date of the day of week provided by the adapter. * @returns {string} The name to display. - * @default (date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase() + * @default (date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase() */ dayOfWeekFormatter: PropTypes.func, /** @@ -254,8 +248,7 @@ DesktopDatePicker.propTypes = { onError: PropTypes.func, /** * Callback fired on month change. - * @template TDate - * @param {TDate} month The new month. + * @param {PickerValidDate} month The new month. */ onMonthChange: PropTypes.func, /** @@ -276,8 +269,7 @@ DesktopDatePicker.propTypes = { onViewChange: PropTypes.func, /** * Callback fired on year change. - * @template TDate - * @param {TDate} year The new year. + * @param {PickerValidDate} year The new year. */ onYearChange: PropTypes.func, /** @@ -341,22 +333,19 @@ DesktopDatePicker.propTypes = { * * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance. * - * @template TDate - * @param {TDate} day The date to test. + * @param {PickerValidDate} day The date to test. * @returns {boolean} If `true` the date will be disabled. */ shouldDisableDate: PropTypes.func, /** * Disable specific month. - * @template TDate - * @param {TDate} month The month to test. + * @param {PickerValidDate} month The month to test. * @returns {boolean} If `true`, the month will be disabled. */ shouldDisableMonth: PropTypes.func, /** * Disable specific year. - * @template TDate - * @param {TDate} year The year to test. + * @param {PickerValidDate} year The year to test. * @returns {boolean} If `true`, the year will be disabled. */ shouldDisableYear: PropTypes.func, diff --git a/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.types.ts b/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.types.ts index 3f5ce418a81f..168d39f4a34b 100644 --- a/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.types.ts +++ b/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.types.ts @@ -9,35 +9,31 @@ import { BaseDatePickerSlots, BaseDatePickerSlotProps, } from '../DatePicker/shared'; -import { DateView, PickerValidDate } from '../models'; +import { DateView } from '../models'; import { ExportedYearCalendarProps } from '../YearCalendar/YearCalendar.types'; -export interface DesktopDatePickerSlots - extends BaseDatePickerSlots, - MakeOptional, 'field' | 'openPickerIcon'> {} +export interface DesktopDatePickerSlots + extends BaseDatePickerSlots, + MakeOptional, 'field' | 'openPickerIcon'> {} -export interface DesktopDatePickerSlotProps< - TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean, -> extends BaseDatePickerSlotProps, - ExportedUseDesktopPickerSlotProps {} +export interface DesktopDatePickerSlotProps + extends BaseDatePickerSlotProps, + ExportedUseDesktopPickerSlotProps {} -export interface DesktopDatePickerProps< - TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = true, -> extends BaseDatePickerProps, +export interface DesktopDatePickerProps + extends BaseDatePickerProps, DesktopOnlyPickerProps, ExportedYearCalendarProps { /** * Overridable component slots. * @default {} */ - slots?: DesktopDatePickerSlots; + slots?: DesktopDatePickerSlots; /** * The props used for each component slot. * @default {} */ - slotProps?: DesktopDatePickerSlotProps; + slotProps?: DesktopDatePickerSlotProps; /** * Years rendered per row. * @default 4 diff --git a/packages/x-date-pickers/src/DesktopDatePicker/tests/describes.DesktopDatePicker.test.tsx b/packages/x-date-pickers/src/DesktopDatePicker/tests/describes.DesktopDatePicker.test.tsx index 5c56072e2b19..3f8d4cabb075 100644 --- a/packages/x-date-pickers/src/DesktopDatePicker/tests/describes.DesktopDatePicker.test.tsx +++ b/packages/x-date-pickers/src/DesktopDatePicker/tests/describes.DesktopDatePicker.test.tsx @@ -59,7 +59,7 @@ describe(' - Describes', () => { expectFieldValueV7(fieldRoot, expectedValueStr); }, setNewValue: (value, { isOpened, applySameValue, selectSection, pressKey }) => { - const newValue = applySameValue ? value : adapterToUse.addDays(value, 1); + const newValue = applySameValue ? value! : adapterToUse.addDays(value!, 1); if (isOpened) { fireEvent.click( diff --git a/packages/x-date-pickers/src/DesktopDatePicker/tests/field.DesktopDatePicker.test.tsx b/packages/x-date-pickers/src/DesktopDatePicker/tests/field.DesktopDatePicker.test.tsx index 48deec371ed3..b3a986e7e1ed 100644 --- a/packages/x-date-pickers/src/DesktopDatePicker/tests/field.DesktopDatePicker.test.tsx +++ b/packages/x-date-pickers/src/DesktopDatePicker/tests/field.DesktopDatePicker.test.tsx @@ -71,7 +71,7 @@ describe(' - Field', () => { }); it('should adapt the default field format based on the props of the picker', () => { - const testFormat = (props: DesktopDatePickerProps, expectedFormat: string) => { + const testFormat = (props: DesktopDatePickerProps, expectedFormat: string) => { // Test with accessible DOM structure let view = renderWithProps( { ...props, enableAccessibleFieldDOMStructure: true as const }, diff --git a/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx b/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx index bb675bbb7b72..38cd175d522d 100644 --- a/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx +++ b/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx @@ -45,22 +45,20 @@ import { buildGetOpenDialogAriaText } from '../locales/utils/getPickersLocalizat import { PickersLayoutOwnerState } from '../PickersLayout'; const rendererInterceptor = function rendererInterceptor< - TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, >( - inViewRenderers: DateTimePickerViewRenderers, + inViewRenderers: DateTimePickerViewRenderers, popperView: TView, rendererProps: PickerViewsRendererProps< - TDate | null, + PickerValidDate | null, TView, DefaultizedProps< UseDesktopPickerProps< - TDate, TView, TEnableAccessibleFieldDOMStructure, any, - UsePickerViewsProps + UsePickerViewsProps >, 'openTo' >, @@ -111,11 +109,8 @@ const rendererInterceptor = function rendererInterceptor< ); }; -type DesktopDateTimePickerComponent = (< - TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = true, ->( - props: DesktopDateTimePickerProps & +type DesktopDateTimePickerComponent = (( + props: DesktopDateTimePickerProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; @@ -130,20 +125,18 @@ type DesktopDateTimePickerComponent = (< * - [DesktopDateTimePicker API](https://mui.com/x/api/date-pickers/desktop-date-time-picker/) */ const DesktopDateTimePicker = React.forwardRef(function DesktopDateTimePicker< - TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean, >( - inProps: DesktopDateTimePickerProps, + inProps: DesktopDateTimePickerProps, ref: React.Ref, ) { - const translations = usePickersTranslations(); - const utils = useUtils(); + const translations = usePickersTranslations(); + const utils = useUtils(); // Props with the default values common to all date time pickers const defaultizedProps = useDateTimePickerDefaultizedProps< - TDate, DateOrTimeViewWithMeridiem, - DesktopDateTimePickerProps + DesktopDateTimePickerProps >(inProps, 'MuiDesktopDateTimePicker'); const { @@ -151,13 +144,13 @@ const DesktopDateTimePicker = React.forwardRef(function DesktopDateTimePicker< thresholdToRenderTimeInASingleColumn, views: resolvedViews, timeSteps, - } = resolveTimeViewsResponse(defaultizedProps); + } = resolveTimeViewsResponse(defaultizedProps); const renderTimeView = shouldRenderTimeInASingleColumn ? renderDigitalClockTimeView : renderMultiSectionDigitalClockTimeView; - const viewRenderers: DateTimePickerViewRenderers = { + const viewRenderers: DateTimePickerViewRenderers = { day: renderDateViewCalendar, month: renderDateViewCalendar, year: renderDateViewCalendar, @@ -220,7 +213,6 @@ const DesktopDateTimePicker = React.forwardRef(function DesktopDateTimePicker< }; const { renderPicker } = useDesktopPicker< - TDate, DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure, typeof props @@ -271,9 +263,9 @@ DesktopDateTimePicker.propTypes = { closeOnSelect: PropTypes.bool, /** * Formats the day of week displayed in the calendar header. - * @param {TDate} date The date of the day of week provided by the adapter. + * @param {PickerValidDate} date The date of the day of week provided by the adapter. * @returns {string} The name to display. - * @default (date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase() + * @default (date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase() */ dayOfWeekFormatter: PropTypes.func, /** @@ -429,8 +421,7 @@ DesktopDateTimePicker.propTypes = { onError: PropTypes.func, /** * Callback fired on month change. - * @template TDate - * @param {TDate} month The new month. + * @param {PickerValidDate} month The new month. */ onMonthChange: PropTypes.func, /** @@ -451,8 +442,7 @@ DesktopDateTimePicker.propTypes = { onViewChange: PropTypes.func, /** * Callback fired on year change. - * @template TDate - * @param {TDate} year The new year. + * @param {PickerValidDate} year The new year. */ onYearChange: PropTypes.func, /** @@ -516,30 +506,26 @@ DesktopDateTimePicker.propTypes = { * * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance. * - * @template TDate - * @param {TDate} day The date to test. + * @param {PickerValidDate} day The date to test. * @returns {boolean} If `true` the date will be disabled. */ shouldDisableDate: PropTypes.func, /** * Disable specific month. - * @template TDate - * @param {TDate} month The month to test. + * @param {PickerValidDate} month The month to test. * @returns {boolean} If `true`, the month will be disabled. */ shouldDisableMonth: PropTypes.func, /** * Disable specific time. - * @template TDate - * @param {TDate} value The value to check. + * @param {PickerValidDate} value The value to check. * @param {TimeView} view The clock type of the timeValue. * @returns {boolean} If `true` the time will be disabled. */ shouldDisableTime: PropTypes.func, /** * Disable specific year. - * @template TDate - * @param {TDate} year The year to test. + * @param {PickerValidDate} year The year to test. * @returns {boolean} If `true`, the year will be disabled. */ shouldDisableYear: PropTypes.func, diff --git a/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.types.ts b/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.types.ts index 85d024d0bf56..2d46378b7296 100644 --- a/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.types.ts +++ b/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.types.ts @@ -9,7 +9,7 @@ import { BaseDateTimePickerSlots, BaseDateTimePickerSlotProps, } from '../DateTimePicker/shared'; -import { DateOrTimeView, PickerValidDate } from '../models'; +import { DateOrTimeView } from '../models'; import { DesktopOnlyTimePickerProps } from '../internals/models/props/time'; import { DateOrTimeViewWithMeridiem } from '../internals/models'; import { @@ -19,21 +19,15 @@ import { import { DigitalClockSlots, DigitalClockSlotProps } from '../DigitalClock'; import { ExportedYearCalendarProps } from '../YearCalendar/YearCalendar.types'; -export interface DesktopDateTimePickerSlots - extends BaseDateTimePickerSlots, - MakeOptional< - UseDesktopPickerSlots, - 'field' | 'openPickerIcon' - >, +export interface DesktopDateTimePickerSlots + extends BaseDateTimePickerSlots, + MakeOptional, 'field' | 'openPickerIcon'>, DigitalClockSlots, MultiSectionDigitalClockSlots {} -export interface DesktopDateTimePickerSlotProps< - TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean, -> extends BaseDateTimePickerSlotProps, +export interface DesktopDateTimePickerSlotProps + extends BaseDateTimePickerSlotProps, ExportedUseDesktopPickerSlotProps< - TDate, DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure >, @@ -41,22 +35,21 @@ export interface DesktopDateTimePickerSlotProps< MultiSectionDigitalClockSlotProps {} export interface DesktopDateTimePickerProps< - TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = true, -> extends BaseDateTimePickerProps, +> extends BaseDateTimePickerProps, DesktopOnlyPickerProps, - DesktopOnlyTimePickerProps, + DesktopOnlyTimePickerProps, ExportedYearCalendarProps { /** * Overridable component slots. * @default {} */ - slots?: DesktopDateTimePickerSlots; + slots?: DesktopDateTimePickerSlots; /** * The props used for each component slot. * @default {} */ - slotProps?: DesktopDateTimePickerSlotProps; + slotProps?: DesktopDateTimePickerSlotProps; /** * Available views. */ diff --git a/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePickerLayout.tsx b/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePickerLayout.tsx index 58e637006847..9368acefdfc7 100644 --- a/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePickerLayout.tsx +++ b/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePickerLayout.tsx @@ -10,15 +10,10 @@ import { pickersLayoutClasses, usePickerLayout, } from '../PickersLayout'; -import { PickerValidDate } from '../models'; import { DateOrTimeViewWithMeridiem } from '../internals/models/common'; -type DesktopDateTimePickerLayoutComponent = (< - TValue, - TDate extends PickerValidDate, - TView extends DateOrTimeViewWithMeridiem, ->( - props: PickersLayoutProps & React.RefAttributes, +type DesktopDateTimePickerLayoutComponent = (( + props: PickersLayoutProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; /** @@ -26,9 +21,8 @@ type DesktopDateTimePickerLayoutComponent = (< */ const DesktopDateTimePickerLayout = React.forwardRef(function DesktopDateTimePickerLayout< TValue, - TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, ->(props: PickersLayoutProps, ref: React.Ref) { +>(props: PickersLayoutProps, ref: React.Ref) { const isRtl = useRtl(); const { toolbar, tabs, content, actionBar, shortcuts } = usePickerLayout(props); const { sx, className, isLandscape, classes } = props; diff --git a/packages/x-date-pickers/src/DesktopDateTimePicker/tests/describes.DesktopDateTimePicker.test.tsx b/packages/x-date-pickers/src/DesktopDateTimePicker/tests/describes.DesktopDateTimePicker.test.tsx index c59e43a86486..65f18f9d8090 100644 --- a/packages/x-date-pickers/src/DesktopDateTimePicker/tests/describes.DesktopDateTimePicker.test.tsx +++ b/packages/x-date-pickers/src/DesktopDateTimePicker/tests/describes.DesktopDateTimePicker.test.tsx @@ -80,8 +80,8 @@ describe(' - Describes', () => { }, setNewValue: (value, { isOpened, applySameValue, selectSection, pressKey }) => { const newValue = applySameValue - ? value - : adapterToUse.addMinutes(adapterToUse.addHours(adapterToUse.addDays(value, 1), 1), 5); + ? value! + : adapterToUse.addMinutes(adapterToUse.addHours(adapterToUse.addDays(value!, 1), 1), 5); if (isOpened) { fireEvent.click( @@ -112,7 +112,7 @@ describe(' - Describes', () => { const hasMeridiem = adapterToUse.is12HourCycleInCurrentLocale(); if (hasMeridiem) { selectSection('meridiem'); - const previousHours = adapterToUse.getHours(value); + const previousHours = adapterToUse.getHours(value!); const newHours = adapterToUse.getHours(newValue); // update meridiem section if it changed if ((previousHours < 12 && newHours >= 12) || (previousHours >= 12 && newHours < 12)) { diff --git a/packages/x-date-pickers/src/DesktopDateTimePicker/tests/field.DesktopDateTimePicker.test.tsx b/packages/x-date-pickers/src/DesktopDateTimePicker/tests/field.DesktopDateTimePicker.test.tsx index 37a7ca21c689..b98144f0a221 100644 --- a/packages/x-date-pickers/src/DesktopDateTimePicker/tests/field.DesktopDateTimePicker.test.tsx +++ b/packages/x-date-pickers/src/DesktopDateTimePicker/tests/field.DesktopDateTimePicker.test.tsx @@ -31,7 +31,7 @@ describe(' - Field', () => { }); it('should adapt the default field format based on the props of the picker', () => { - const testFormat = (props: DesktopDateTimePickerProps, expectedFormat: string) => { + const testFormat = (props: DesktopDateTimePickerProps, expectedFormat: string) => { // Test with accessible DOM structure let view = renderWithProps( { ...props, enableAccessibleFieldDOMStructure: true as const }, diff --git a/packages/x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.tsx b/packages/x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.tsx index a090898a3adc..7496b80d2e26 100644 --- a/packages/x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.tsx +++ b/packages/x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.tsx @@ -20,14 +20,11 @@ import { PickersActionBarAction } from '../PickersActionBar'; import { TimeViewWithMeridiem } from '../internals/models'; import { resolveTimeFormat } from '../internals/utils/time-utils'; import { resolveTimeViewsResponse } from '../internals/utils/date-time-utils'; -import { TimeView, PickerValidDate, PickerOwnerState } from '../models'; +import { TimeView, PickerOwnerState } from '../models'; import { buildGetOpenDialogAriaText } from '../locales/utils/getPickersLocalization'; -type DesktopTimePickerComponent = (< - TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = true, ->( - props: DesktopTimePickerProps & +type DesktopTimePickerComponent = (( + props: DesktopTimePickerProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; @@ -42,33 +39,31 @@ type DesktopTimePickerComponent = (< * - [DesktopTimePicker API](https://mui.com/x/api/date-pickers/desktop-time-picker/) */ const DesktopTimePicker = React.forwardRef(function DesktopTimePicker< - TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = true, >( - inProps: DesktopTimePickerProps, + inProps: DesktopTimePickerProps, ref: React.Ref, ) { - const translations = usePickersTranslations(); - const utils = useUtils(); + const translations = usePickersTranslations(); + const utils = useUtils(); // Props with the default values common to all time pickers const defaultizedProps = useTimePickerDefaultizedProps< - TDate, TimeViewWithMeridiem, - DesktopTimePickerProps + DesktopTimePickerProps >(inProps, 'MuiDesktopTimePicker'); const { shouldRenderTimeInASingleColumn, views: resolvedViews, timeSteps, - } = resolveTimeViewsResponse(defaultizedProps); + } = resolveTimeViewsResponse(defaultizedProps); const renderTimeView = shouldRenderTimeInASingleColumn ? renderDigitalClockTimeView : renderMultiSectionDigitalClockTimeView; - const viewRenderers: TimePickerViewRenderers = { + const viewRenderers: TimePickerViewRenderers = { hours: renderTimeView, minutes: renderTimeView, seconds: renderTimeView, @@ -122,7 +117,6 @@ const DesktopTimePicker = React.forwardRef(function DesktopTimePicker< }; const { renderPicker } = useDesktopPicker< - TDate, TimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure, typeof props @@ -346,8 +340,7 @@ DesktopTimePicker.propTypes = { ]), /** * Disable specific time. - * @template TDate - * @param {TDate} value The value to check. + * @param {PickerValidDate} value The value to check. * @param {TimeView} view The clock type of the timeValue. * @returns {boolean} If `true` the time will be disabled. */ diff --git a/packages/x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.types.ts b/packages/x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.types.ts index 11485bf1c8a0..91f223ad80e6 100644 --- a/packages/x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.types.ts +++ b/packages/x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.types.ts @@ -16,32 +16,24 @@ import { MultiSectionDigitalClockSlots, MultiSectionDigitalClockSlotProps, } from '../MultiSectionDigitalClock'; -import { PickerValidDate, TimeView } from '../models'; +import { TimeView } from '../models'; -export interface DesktopTimePickerSlots - extends BaseTimePickerSlots, - MakeOptional, 'field' | 'openPickerIcon'>, +export interface DesktopTimePickerSlots + extends BaseTimePickerSlots, + MakeOptional, 'field' | 'openPickerIcon'>, DigitalClockSlots, MultiSectionDigitalClockSlots {} -export interface DesktopTimePickerSlotProps< - TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean, -> extends BaseTimePickerSlotProps, - ExportedUseDesktopPickerSlotProps< - TDate, - TimeViewWithMeridiem, - TEnableAccessibleFieldDOMStructure - >, +export interface DesktopTimePickerSlotProps + extends BaseTimePickerSlotProps, + ExportedUseDesktopPickerSlotProps, DigitalClockSlotProps, MultiSectionDigitalClockSlotProps {} -export interface DesktopTimePickerProps< - TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = true, -> extends BaseTimePickerProps, +export interface DesktopTimePickerProps + extends BaseTimePickerProps, DesktopOnlyPickerProps, - DesktopOnlyTimePickerProps { + DesktopOnlyTimePickerProps { /** * Available views. */ @@ -50,10 +42,10 @@ export interface DesktopTimePickerProps< * Overridable component slots. * @default {} */ - slots?: DesktopTimePickerSlots; + slots?: DesktopTimePickerSlots; /** * The props used for each component slot. * @default {} */ - slotProps?: DesktopTimePickerSlotProps; + slotProps?: DesktopTimePickerSlotProps; } diff --git a/packages/x-date-pickers/src/DesktopTimePicker/tests/describes.DesktopTimePicker.test.tsx b/packages/x-date-pickers/src/DesktopTimePicker/tests/describes.DesktopTimePicker.test.tsx index 8cb34d2fcf85..48d8a67aa0d2 100644 --- a/packages/x-date-pickers/src/DesktopTimePicker/tests/describes.DesktopTimePicker.test.tsx +++ b/packages/x-date-pickers/src/DesktopTimePicker/tests/describes.DesktopTimePicker.test.tsx @@ -69,8 +69,8 @@ describe(' - Describes', () => { }, setNewValue: (value, { isOpened, applySameValue, selectSection, pressKey }) => { const newValue = applySameValue - ? value - : adapterToUse.addMinutes(adapterToUse.addHours(value, 1), 5); + ? value! + : adapterToUse.addMinutes(adapterToUse.addHours(value!, 1), 5); if (isOpened) { const hasMeridiem = adapterToUse.is12HourCycleInCurrentLocale(); @@ -95,7 +95,7 @@ describe(' - Describes', () => { const hasMeridiem = adapterToUse.is12HourCycleInCurrentLocale(); if (hasMeridiem) { selectSection('meridiem'); - const previousHours = adapterToUse.getHours(value); + const previousHours = adapterToUse.getHours(value!); const newHours = adapterToUse.getHours(newValue); // update meridiem section if it changed if ((previousHours < 12 && newHours >= 12) || (previousHours >= 12 && newHours < 12)) { diff --git a/packages/x-date-pickers/src/DesktopTimePicker/tests/field.DesktopTimePicker.test.tsx b/packages/x-date-pickers/src/DesktopTimePicker/tests/field.DesktopTimePicker.test.tsx index 19a51f1dd600..6e3433f82f18 100644 --- a/packages/x-date-pickers/src/DesktopTimePicker/tests/field.DesktopTimePicker.test.tsx +++ b/packages/x-date-pickers/src/DesktopTimePicker/tests/field.DesktopTimePicker.test.tsx @@ -28,7 +28,7 @@ describe(' - Field', () => { }); it('should adapt the default field format based on the props of the picker', () => { - const testFormat = (props: DesktopTimePickerProps, expectedFormat: string) => { + const testFormat = (props: DesktopTimePickerProps, expectedFormat: string) => { // Test with accessible DOM structure let view = renderWithProps( { ...props, enableAccessibleFieldDOMStructure: true as const }, diff --git a/packages/x-date-pickers/src/DigitalClock/DigitalClock.tsx b/packages/x-date-pickers/src/DigitalClock/DigitalClock.tsx index 3660a704f409..a5e1f5813a6b 100644 --- a/packages/x-date-pickers/src/DigitalClock/DigitalClock.tsx +++ b/packages/x-date-pickers/src/DigitalClock/DigitalClock.tsx @@ -23,7 +23,7 @@ import { singleItemValueManager } from '../internals/utils/valueManagers'; import { useClockReferenceDate } from '../internals/hooks/useClockReferenceDate'; import { getFocusedListItemIndex } from '../internals/utils/utils'; -const useUtilityClasses = (ownerState: DigitalClockProps) => { +const useUtilityClasses = (ownerState: DigitalClockProps) => { const { classes } = ownerState; const slots = { root: ['root'], @@ -38,7 +38,7 @@ const DigitalClockRoot = styled(PickerViewRoot, { name: 'MuiDigitalClock', slot: 'Root', overridesResolver: (props, styles) => styles.root, -})<{ ownerState: DigitalClockProps & { alreadyRendered: boolean } }>({ +})<{ ownerState: DigitalClockProps & { alreadyRendered: boolean } }>({ overflowY: 'auto', width: '100%', '@media (prefers-reduced-motion: no-preference)': { @@ -94,8 +94,8 @@ const DigitalClockItem = styled(MenuItem, { }, })); -type DigitalClockComponent = (( - props: DigitalClockProps & React.RefAttributes, +type DigitalClockComponent = (( + props: DigitalClockProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; /** @@ -108,11 +108,11 @@ type DigitalClockComponent = (( * * - [DigitalClock API](https://mui.com/x/api/date-pickers/digital-clock/) */ -export const DigitalClock = React.forwardRef(function DigitalClock( - inProps: DigitalClockProps, +export const DigitalClock = React.forwardRef(function DigitalClock( + inProps: DigitalClockProps, ref: React.Ref, ) { - const utils = useUtils(); + const utils = useUtils(); const containerRef = React.useRef(null); const handleRef = useForkRef(ref, containerRef); @@ -167,8 +167,8 @@ export const DigitalClock = React.forwardRef(function DigitalClock(); - const now = useNow(timezone); + const translations = usePickersTranslations(); + const now = useNow(timezone); const ownerState = React.useMemo( () => ({ ...props, alreadyRendered: !!containerRef.current }), @@ -193,11 +193,11 @@ export const DigitalClock = React.forwardRef(function DigitalClock + const handleValueChange = useEventCallback((newValue: PickerValidDate | null) => handleRawValueChange(newValue, 'finish', 'hours'), ); - const { setValueAndGoToNextView } = useViews>({ + const { setValueAndGoToNextView } = useViews>({ view: inView, views, openTo, @@ -207,7 +207,7 @@ export const DigitalClock = React.forwardRef(function DigitalClock { + const handleItemSelect = useEventCallback((newValue: PickerValidDate | null) => { setValueAndGoToNextView(newValue, 'finish'); }); @@ -232,7 +232,7 @@ export const DigitalClock = React.forwardRef(function DigitalClock { + (valueToCheck: PickerValidDate) => { const isAfter = createIsAfterIgnoreDatePart(disableIgnoringDatePartForTimeValidation, utils); const containsValidTime = () => { @@ -283,7 +283,7 @@ export const DigitalClock = React.forwardRef(function DigitalClock { - const result: TDate[] = []; + const result: PickerValidDate[] = []; const startOfDay = utils.startOfDay(valueOrReferenceDate); let nextTimeStepOption = startOfDay; while (utils.isSameDay(valueOrReferenceDate, nextTimeStepOption)) { @@ -478,8 +478,7 @@ DigitalClock.propTypes = { referenceDate: PropTypes.object, /** * Disable specific time. - * @template TDate - * @param {TDate} value The value to check. + * @param {PickerValidDate} value The value to check. * @param {TimeView} view The clock type of the timeValue. * @returns {boolean} If `true` the time will be disabled. */ diff --git a/packages/x-date-pickers/src/DigitalClock/DigitalClock.types.ts b/packages/x-date-pickers/src/DigitalClock/DigitalClock.types.ts index b68d5903dba5..926d926c3cf8 100644 --- a/packages/x-date-pickers/src/DigitalClock/DigitalClock.types.ts +++ b/packages/x-date-pickers/src/DigitalClock/DigitalClock.types.ts @@ -7,11 +7,9 @@ import { DigitalClockOnlyProps, ExportedBaseClockProps, } from '../internals/models/props/time'; -import { PickerValidDate, TimeView } from '../models'; +import { TimeView } from '../models'; -export interface ExportedDigitalClockProps - extends ExportedBaseClockProps, - DigitalClockOnlyProps {} +export interface ExportedDigitalClockProps extends ExportedBaseClockProps, DigitalClockOnlyProps {} export interface DigitalClockSlots { /** @@ -25,9 +23,9 @@ export interface DigitalClockSlotProps { digitalClockItem?: SlotComponentProps>; } -export interface DigitalClockProps - extends ExportedDigitalClockProps, - BaseClockProps> { +export interface DigitalClockProps + extends ExportedDigitalClockProps, + BaseClockProps> { /** * Available views. * @default ['hours'] diff --git a/packages/x-date-pickers/src/DigitalClock/tests/describes.DigitalClock.test.tsx b/packages/x-date-pickers/src/DigitalClock/tests/describes.DigitalClock.test.tsx index 19fcd99802c1..e5c35a2387ef 100644 --- a/packages/x-date-pickers/src/DigitalClock/tests/describes.DigitalClock.test.tsx +++ b/packages/x-date-pickers/src/DigitalClock/tests/describes.DigitalClock.test.tsx @@ -52,7 +52,7 @@ describe(' - Describes', () => { } }, setNewValue: (value) => { - const newValue = adapterToUse.addMinutes(adapterToUse.addHours(value, 1), 30); + const newValue = adapterToUse.addMinutes(adapterToUse.addHours(value!, 1), 30); digitalClockHandler.setViewValue(adapterToUse, newValue); return newValue; diff --git a/packages/x-date-pickers/src/LocalizationProvider/LocalizationProvider.tsx b/packages/x-date-pickers/src/LocalizationProvider/LocalizationProvider.tsx index cff47afa4d34..b385faf48f53 100644 --- a/packages/x-date-pickers/src/LocalizationProvider/LocalizationProvider.tsx +++ b/packages/x-date-pickers/src/LocalizationProvider/LocalizationProvider.tsx @@ -5,34 +5,34 @@ import { useThemeProps } from '@mui/material/styles'; import { AdapterFormats, MuiPickersAdapter, PickerValidDate } from '../models'; import { PickersInputLocaleText } from '../locales'; -export interface MuiPickersAdapterContextValue { +export interface MuiPickersAdapterContextValue { defaultDates: { - minDate: TDate; - maxDate: TDate; + minDate: PickerValidDate; + maxDate: PickerValidDate; }; - utils: MuiPickersAdapter; + utils: MuiPickersAdapter; localeText: PickersInputLocaleText | undefined; } -export type MuiPickersAdapterContextNullableValue = { - [K in keyof MuiPickersAdapterContextValue]: MuiPickersAdapterContextValue[K] | null; +export type MuiPickersAdapterContextNullableValue = { + [K in keyof MuiPickersAdapterContextValue]: MuiPickersAdapterContextValue[K] | null; }; export const MuiPickersAdapterContext = - React.createContext | null>(null); + React.createContext(null); if (process.env.NODE_ENV !== 'production') { MuiPickersAdapterContext.displayName = 'MuiPickersAdapterContext'; } -export interface LocalizationProviderProps { +export interface LocalizationProviderProps { children?: React.ReactNode; /** * Date library adapter class function. * @see See the localization provider {@link https://mui.com/x/react-date-pickers/getting-started/#setup-your-date-library-adapter date adapter setup section} for more details. */ - dateAdapter?: new (...args: any) => MuiPickersAdapter; + dateAdapter?: new (...args: any) => MuiPickersAdapter; /** Formats that are used for any child pickers */ dateFormats?: Partial; /** @@ -52,8 +52,8 @@ export interface LocalizationProviderProps( - props: LocalizationProviderProps, +type LocalizationProviderComponent = (( + props: LocalizationProviderProps, ) => React.JSX.Element) & { propTypes?: any }; /** @@ -68,17 +68,16 @@ type LocalizationProviderComponent = (( * * - [LocalizationProvider API](https://mui.com/x/api/date-pickers/localization-provider/) */ -export const LocalizationProvider = function LocalizationProvider< - TDate extends PickerValidDate, - TLocale, ->(inProps: LocalizationProviderProps) { +export const LocalizationProvider = function LocalizationProvider( + inProps: LocalizationProviderProps, +) { const { localeText: inLocaleText, ...otherInProps } = inProps; const { utils: parentUtils, localeText: parentLocaleText } = React.useContext( MuiPickersAdapterContext, ) ?? { utils: undefined, localeText: undefined }; - const props: LocalizationProviderProps = useThemeProps({ + const props: LocalizationProviderProps = useThemeProps({ // We don't want to pass the `localeText` prop to the theme, that way it will always return the theme value, // We will then merge this theme value with our value manually props: otherInProps, @@ -127,19 +126,18 @@ export const LocalizationProvider = function LocalizationProvider< return adapter; }, [DateAdapter, adapterLocale, dateFormats, dateLibInstance, parentUtils]); - const defaultDates: MuiPickersAdapterContextNullableValue['defaultDates'] = - React.useMemo(() => { - if (!utils) { - return null; - } + const defaultDates: MuiPickersAdapterContextNullableValue['defaultDates'] = React.useMemo(() => { + if (!utils) { + return null; + } - return { - minDate: utils.date('1900-01-01T00:00:00.000'), - maxDate: utils.date('2099-12-31T00:00:00.000'), - }; - }, [utils]); + return { + minDate: utils.date('1900-01-01T00:00:00.000'), + maxDate: utils.date('2099-12-31T00:00:00.000'), + }; + }, [utils]); - const contextValue: MuiPickersAdapterContextNullableValue = React.useMemo(() => { + const contextValue: MuiPickersAdapterContextNullableValue = React.useMemo(() => { return { utils, defaultDates, diff --git a/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.tsx b/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.tsx index 14400dd2e990..4db881d75251 100644 --- a/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.tsx +++ b/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.tsx @@ -9,18 +9,15 @@ import { DatePickerViewRenderers, useDatePickerDefaultizedProps } from '../DateP import { usePickersTranslations } from '../hooks/usePickersTranslations'; import { useUtils } from '../internals/hooks/useUtils'; import { extractValidationProps, validateDate } from '../validation'; -import { DateView, PickerOwnerState, PickerValidDate } from '../models'; +import { DateView, PickerOwnerState } from '../models'; import { DateField } from '../DateField'; import { singleItemValueManager } from '../internals/utils/valueManagers'; import { renderDateViewCalendar } from '../dateViewRenderers'; import { resolveDateFormat } from '../internals/utils/date-utils'; import { buildGetOpenDialogAriaText } from '../locales/utils/getPickersLocalization'; -type MobileDatePickerComponent = (< - TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = true, ->( - props: MobileDatePickerProps & +type MobileDatePickerComponent = (( + props: MobileDatePickerProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; @@ -35,22 +32,20 @@ type MobileDatePickerComponent = (< * - [MobileDatePicker API](https://mui.com/x/api/date-pickers/mobile-date-picker/) */ const MobileDatePicker = React.forwardRef(function MobileDatePicker< - TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = true, >( - inProps: MobileDatePickerProps, + inProps: MobileDatePickerProps, ref: React.Ref, ) { - const translations = usePickersTranslations(); - const utils = useUtils(); + const translations = usePickersTranslations(); + const utils = useUtils(); // Props with the default values common to all date pickers const defaultizedProps = useDatePickerDefaultizedProps< - TDate, - MobileDatePickerProps + MobileDatePickerProps >(inProps, 'MuiMobileDatePicker'); - const viewRenderers: DatePickerViewRenderers = { + const viewRenderers: DatePickerViewRenderers = { day: renderDateViewCalendar, month: renderDateViewCalendar, year: renderDateViewCalendar, @@ -81,7 +76,6 @@ const MobileDatePicker = React.forwardRef(function MobileDatePicker< }; const { renderPicker } = useMobilePicker< - TDate, DateView, TEnableAccessibleFieldDOMStructure, typeof props @@ -121,9 +115,9 @@ MobileDatePicker.propTypes = { closeOnSelect: PropTypes.bool, /** * Formats the day of week displayed in the calendar header. - * @param {TDate} date The date of the day of week provided by the adapter. + * @param {PickerValidDate} date The date of the day of week provided by the adapter. * @returns {string} The name to display. - * @default (date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase() + * @default (date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase() */ dayOfWeekFormatter: PropTypes.func, /** @@ -251,8 +245,7 @@ MobileDatePicker.propTypes = { onError: PropTypes.func, /** * Callback fired on month change. - * @template TDate - * @param {TDate} month The new month. + * @param {PickerValidDate} month The new month. */ onMonthChange: PropTypes.func, /** @@ -273,8 +266,7 @@ MobileDatePicker.propTypes = { onViewChange: PropTypes.func, /** * Callback fired on year change. - * @template TDate - * @param {TDate} year The new year. + * @param {PickerValidDate} year The new year. */ onYearChange: PropTypes.func, /** @@ -338,22 +330,19 @@ MobileDatePicker.propTypes = { * * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance. * - * @template TDate - * @param {TDate} day The date to test. + * @param {PickerValidDate} day The date to test. * @returns {boolean} If `true` the date will be disabled. */ shouldDisableDate: PropTypes.func, /** * Disable specific month. - * @template TDate - * @param {TDate} month The month to test. + * @param {PickerValidDate} month The month to test. * @returns {boolean} If `true`, the month will be disabled. */ shouldDisableMonth: PropTypes.func, /** * Disable specific year. - * @template TDate - * @param {TDate} year The year to test. + * @param {PickerValidDate} year The year to test. * @returns {boolean} If `true`, the year will be disabled. */ shouldDisableYear: PropTypes.func, diff --git a/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.types.ts b/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.types.ts index 32e3d81ff2f7..f826ccce7d7a 100644 --- a/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.types.ts +++ b/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.types.ts @@ -9,33 +9,29 @@ import { BaseDatePickerSlots, BaseDatePickerSlotProps, } from '../DatePicker/shared'; -import { DateView, PickerValidDate } from '../models'; +import { DateView } from '../models'; -export interface MobileDatePickerSlots - extends BaseDatePickerSlots, - MakeOptional, 'field'> {} +export interface MobileDatePickerSlots + extends BaseDatePickerSlots, + MakeOptional, 'field'> {} -export interface MobileDatePickerSlotProps< - TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean, -> extends BaseDatePickerSlotProps, - ExportedUseMobilePickerSlotProps {} +export interface MobileDatePickerSlotProps + extends BaseDatePickerSlotProps, + ExportedUseMobilePickerSlotProps {} -export interface MobileDatePickerProps< - TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = true, -> extends BaseDatePickerProps, +export interface MobileDatePickerProps + extends BaseDatePickerProps, MobileOnlyPickerProps { /** * Overridable component slots. * @default {} */ - slots?: MobileDatePickerSlots; + slots?: MobileDatePickerSlots; /** * The props used for each component slot. * @default {} */ - slotProps?: MobileDatePickerSlotProps; + slotProps?: MobileDatePickerSlotProps; /** * Years rendered per row. * @default 3 diff --git a/packages/x-date-pickers/src/MobileDatePicker/tests/describes.MobileDatePicker.test.tsx b/packages/x-date-pickers/src/MobileDatePicker/tests/describes.MobileDatePicker.test.tsx index 431e6682e182..4423b3276797 100644 --- a/packages/x-date-pickers/src/MobileDatePicker/tests/describes.MobileDatePicker.test.tsx +++ b/packages/x-date-pickers/src/MobileDatePicker/tests/describes.MobileDatePicker.test.tsx @@ -63,7 +63,7 @@ describe(' - Describes', () => { openPicker({ type: 'date', variant: 'mobile' }); } - const newValue = applySameValue ? value : adapterToUse.addDays(value, 1); + const newValue = applySameValue ? value! : adapterToUse.addDays(value!, 1); fireEvent.click( screen.getByRole('gridcell', { name: adapterToUse.getDate(newValue).toString() }), ); diff --git a/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.tsx b/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.tsx index 8e597a58c28b..6d9c1b3c7bb5 100644 --- a/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.tsx +++ b/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.tsx @@ -13,18 +13,15 @@ import { import { usePickersTranslations } from '../hooks/usePickersTranslations'; import { useUtils } from '../internals/hooks/useUtils'; import { extractValidationProps, validateDateTime } from '../validation'; -import { DateOrTimeView, PickerOwnerState, PickerValidDate } from '../models'; +import { DateOrTimeView, PickerOwnerState } from '../models'; import { useMobilePicker } from '../internals/hooks/useMobilePicker'; import { renderDateViewCalendar } from '../dateViewRenderers'; import { renderTimeViewClock } from '../timeViewRenderers'; import { resolveDateTimeFormat } from '../internals/utils/date-time-utils'; import { buildGetOpenDialogAriaText } from '../locales/utils/getPickersLocalization'; -type MobileDateTimePickerComponent = (< - TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = true, ->( - props: MobileDateTimePickerProps & +type MobileDateTimePickerComponent = (( + props: MobileDateTimePickerProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; @@ -39,23 +36,21 @@ type MobileDateTimePickerComponent = (< * - [MobileDateTimePicker API](https://mui.com/x/api/date-pickers/mobile-date-time-picker/) */ const MobileDateTimePicker = React.forwardRef(function MobileDateTimePicker< - TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = true, >( - inProps: MobileDateTimePickerProps, + inProps: MobileDateTimePickerProps, ref: React.Ref, ) { - const translations = usePickersTranslations(); - const utils = useUtils(); + const translations = usePickersTranslations(); + const utils = useUtils(); // Props with the default values common to all date time pickers const defaultizedProps = useDateTimePickerDefaultizedProps< - TDate, DateOrTimeView, - MobileDateTimePickerProps + MobileDateTimePickerProps >(inProps, 'MuiMobileDateTimePicker'); - const viewRenderers: DateTimePickerViewRenderers = { + const viewRenderers: DateTimePickerViewRenderers = { day: renderDateViewCalendar, month: renderDateViewCalendar, year: renderDateViewCalendar, @@ -96,7 +91,6 @@ const MobileDateTimePicker = React.forwardRef(function MobileDateTimePicker< }; const { renderPicker } = useMobilePicker< - TDate, DateOrTimeView, TEnableAccessibleFieldDOMStructure, typeof props @@ -146,9 +140,9 @@ MobileDateTimePicker.propTypes = { closeOnSelect: PropTypes.bool, /** * Formats the day of week displayed in the calendar header. - * @param {TDate} date The date of the day of week provided by the adapter. + * @param {PickerValidDate} date The date of the day of week provided by the adapter. * @returns {string} The name to display. - * @default (date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase() + * @default (date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase() */ dayOfWeekFormatter: PropTypes.func, /** @@ -304,8 +298,7 @@ MobileDateTimePicker.propTypes = { onError: PropTypes.func, /** * Callback fired on month change. - * @template TDate - * @param {TDate} month The new month. + * @param {PickerValidDate} month The new month. */ onMonthChange: PropTypes.func, /** @@ -326,8 +319,7 @@ MobileDateTimePicker.propTypes = { onViewChange: PropTypes.func, /** * Callback fired on year change. - * @template TDate - * @param {TDate} year The new year. + * @param {PickerValidDate} year The new year. */ onYearChange: PropTypes.func, /** @@ -391,30 +383,26 @@ MobileDateTimePicker.propTypes = { * * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance. * - * @template TDate - * @param {TDate} day The date to test. + * @param {PickerValidDate} day The date to test. * @returns {boolean} If `true` the date will be disabled. */ shouldDisableDate: PropTypes.func, /** * Disable specific month. - * @template TDate - * @param {TDate} month The month to test. + * @param {PickerValidDate} month The month to test. * @returns {boolean} If `true`, the month will be disabled. */ shouldDisableMonth: PropTypes.func, /** * Disable specific time. - * @template TDate - * @param {TDate} value The value to check. + * @param {PickerValidDate} value The value to check. * @param {TimeView} view The clock type of the timeValue. * @returns {boolean} If `true` the time will be disabled. */ shouldDisableTime: PropTypes.func, /** * Disable specific year. - * @template TDate - * @param {TDate} year The year to test. + * @param {PickerValidDate} year The year to test. * @returns {boolean} If `true`, the year will be disabled. */ shouldDisableYear: PropTypes.func, diff --git a/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.types.ts b/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.types.ts index 5943170d3617..6ba454d95810 100644 --- a/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.types.ts +++ b/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.types.ts @@ -9,36 +9,32 @@ import { BaseDateTimePickerSlots, BaseDateTimePickerSlotProps, } from '../DateTimePicker/shared'; -import { DateOrTimeView, PickerValidDate } from '../models'; +import { DateOrTimeView } from '../models'; import { DateOrTimeViewWithMeridiem } from '../internals/models'; -export interface MobileDateTimePickerSlots< - TDate extends PickerValidDate, - TView extends DateOrTimeViewWithMeridiem, -> extends BaseDateTimePickerSlots, - MakeOptional, 'field'> {} +export interface MobileDateTimePickerSlots + extends BaseDateTimePickerSlots, + MakeOptional, 'field'> {} export interface MobileDateTimePickerSlotProps< - TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, -> extends BaseDateTimePickerSlotProps, - ExportedUseMobilePickerSlotProps {} +> extends BaseDateTimePickerSlotProps, + ExportedUseMobilePickerSlotProps {} export interface MobileDateTimePickerProps< - TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem = DateOrTimeView, TEnableAccessibleFieldDOMStructure extends boolean = true, -> extends BaseDateTimePickerProps, +> extends BaseDateTimePickerProps, MobileOnlyPickerProps { /** * Overridable component slots. * @default {} */ - slots?: MobileDateTimePickerSlots; + slots?: MobileDateTimePickerSlots; /** * The props used for each component slot. * @default {} */ - slotProps?: MobileDateTimePickerSlotProps; + slotProps?: MobileDateTimePickerSlotProps; } diff --git a/packages/x-date-pickers/src/MobileDateTimePicker/tests/describes.MobileDateTimePicker.test.tsx b/packages/x-date-pickers/src/MobileDateTimePicker/tests/describes.MobileDateTimePicker.test.tsx index b853a30d627e..d504885dad82 100644 --- a/packages/x-date-pickers/src/MobileDateTimePicker/tests/describes.MobileDateTimePicker.test.tsx +++ b/packages/x-date-pickers/src/MobileDateTimePicker/tests/describes.MobileDateTimePicker.test.tsx @@ -76,8 +76,8 @@ describe(' - Describes', () => { } const newValue = applySameValue - ? value - : adapterToUse.addMinutes(adapterToUse.addHours(adapterToUse.addDays(value, 1), 1), 5); + ? value! + : adapterToUse.addMinutes(adapterToUse.addHours(adapterToUse.addDays(value!, 1), 1), 5); fireEvent.click( screen.getByRole('gridcell', { name: adapterToUse.getDate(newValue).toString() }), ); diff --git a/packages/x-date-pickers/src/MobileTimePicker/MobileTimePicker.tsx b/packages/x-date-pickers/src/MobileTimePicker/MobileTimePicker.tsx index 409dd225325f..43c653c1661a 100644 --- a/packages/x-date-pickers/src/MobileTimePicker/MobileTimePicker.tsx +++ b/packages/x-date-pickers/src/MobileTimePicker/MobileTimePicker.tsx @@ -10,17 +10,14 @@ import { TimePickerViewRenderers, useTimePickerDefaultizedProps } from '../TimeP import { usePickersTranslations } from '../hooks/usePickersTranslations'; import { useUtils } from '../internals/hooks/useUtils'; import { extractValidationProps, validateTime } from '../validation'; -import { PickerOwnerState, PickerValidDate, TimeView } from '../models'; +import { PickerOwnerState, TimeView } from '../models'; import { useMobilePicker } from '../internals/hooks/useMobilePicker'; import { renderTimeViewClock } from '../timeViewRenderers'; import { resolveTimeFormat } from '../internals/utils/time-utils'; import { buildGetOpenDialogAriaText } from '../locales/utils/getPickersLocalization'; -type MobileTimePickerComponent = (< - TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = true, ->( - props: MobileTimePickerProps & +type MobileTimePickerComponent = (( + props: MobileTimePickerProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; @@ -35,23 +32,21 @@ type MobileTimePickerComponent = (< * - [MobileTimePicker API](https://mui.com/x/api/date-pickers/mobile-time-picker/) */ const MobileTimePicker = React.forwardRef(function MobileTimePicker< - TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = true, >( - inProps: MobileTimePickerProps, + inProps: MobileTimePickerProps, ref: React.Ref, ) { - const translations = usePickersTranslations(); - const utils = useUtils(); + const translations = usePickersTranslations(); + const utils = useUtils(); // Props with the default values common to all time pickers const defaultizedProps = useTimePickerDefaultizedProps< - TDate, TimeView, - MobileTimePickerProps + MobileTimePickerProps >(inProps, 'MuiMobileTimePicker'); - const viewRenderers: TimePickerViewRenderers = { + const viewRenderers: TimePickerViewRenderers = { hours: renderTimeViewClock, minutes: renderTimeViewClock, seconds: renderTimeViewClock, @@ -85,7 +80,6 @@ const MobileTimePicker = React.forwardRef(function MobileTimePicker< }; const { renderPicker } = useMobilePicker< - TDate, TimeView, TEnableAccessibleFieldDOMStructure, typeof props @@ -309,8 +303,7 @@ MobileTimePicker.propTypes = { ]), /** * Disable specific time. - * @template TDate - * @param {TDate} value The value to check. + * @param {PickerValidDate} value The value to check. * @param {TimeView} view The clock type of the timeValue. * @returns {boolean} If `true` the time will be disabled. */ diff --git a/packages/x-date-pickers/src/MobileTimePicker/MobileTimePicker.types.ts b/packages/x-date-pickers/src/MobileTimePicker/MobileTimePicker.types.ts index d8758610997b..1304bfb6d8b4 100644 --- a/packages/x-date-pickers/src/MobileTimePicker/MobileTimePicker.types.ts +++ b/packages/x-date-pickers/src/MobileTimePicker/MobileTimePicker.types.ts @@ -9,36 +9,32 @@ import { BaseTimePickerSlots, BaseTimePickerSlotProps, } from '../TimePicker/shared'; -import { PickerValidDate, TimeView } from '../models'; +import { TimeView } from '../models'; import { TimeViewWithMeridiem } from '../internals/models'; -export interface MobileTimePickerSlots< - TDate extends PickerValidDate, - TView extends TimeViewWithMeridiem, -> extends BaseTimePickerSlots, - MakeOptional, 'field'> {} +export interface MobileTimePickerSlots + extends BaseTimePickerSlots, + MakeOptional, 'field'> {} export interface MobileTimePickerSlotProps< - TDate extends PickerValidDate, TView extends TimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, > extends BaseTimePickerSlotProps, - ExportedUseMobilePickerSlotProps {} + ExportedUseMobilePickerSlotProps {} export interface MobileTimePickerProps< - TDate extends PickerValidDate, TView extends TimeViewWithMeridiem = TimeView, TEnableAccessibleFieldDOMStructure extends boolean = true, -> extends BaseTimePickerProps, +> extends BaseTimePickerProps, MobileOnlyPickerProps { /** * Overridable component slots. * @default {} */ - slots?: MobileTimePickerSlots; + slots?: MobileTimePickerSlots; /** * The props used for each component slot. * @default {} */ - slotProps?: MobileTimePickerSlotProps; + slotProps?: MobileTimePickerSlotProps; } diff --git a/packages/x-date-pickers/src/MobileTimePicker/tests/describes.MobileTimePicker.test.tsx b/packages/x-date-pickers/src/MobileTimePicker/tests/describes.MobileTimePicker.test.tsx index e84bc91b94ff..34f8c027a14f 100644 --- a/packages/x-date-pickers/src/MobileTimePicker/tests/describes.MobileTimePicker.test.tsx +++ b/packages/x-date-pickers/src/MobileTimePicker/tests/describes.MobileTimePicker.test.tsx @@ -74,8 +74,8 @@ describe(' - Describes', () => { } const newValue = applySameValue - ? value - : adapterToUse.addMinutes(adapterToUse.addHours(value, 1), 5); + ? value! + : adapterToUse.addMinutes(adapterToUse.addHours(value!, 1), 5); const hasMeridiem = adapterToUse.is12HourCycleInCurrentLocale(); // change hours const hourClockEvent = getClockTouchEvent( diff --git a/packages/x-date-pickers/src/MonthCalendar/MonthCalendar.tsx b/packages/x-date-pickers/src/MonthCalendar/MonthCalendar.tsx index a3c0bb17a93d..546fc4061421 100644 --- a/packages/x-date-pickers/src/MonthCalendar/MonthCalendar.tsx +++ b/packages/x-date-pickers/src/MonthCalendar/MonthCalendar.tsx @@ -21,7 +21,7 @@ import { useControlledValueWithTimezone } from '../internals/hooks/useValueWithT import { DIALOG_WIDTH } from '../internals/constants/dimensions'; import { PickerValidDate } from '../models'; -const useUtilityClasses = (ownerState: MonthCalendarProps) => { +const useUtilityClasses = (ownerState: MonthCalendarProps) => { const { classes } = ownerState; const slots = { @@ -31,15 +31,12 @@ const useUtilityClasses = (ownerState: MonthCalendarProps) => { return composeClasses(slots, getMonthCalendarUtilityClass, classes); }; -export function useMonthCalendarDefaultizedProps( - props: MonthCalendarProps, +export function useMonthCalendarDefaultizedProps( + props: MonthCalendarProps, name: string, -): DefaultizedProps< - MonthCalendarProps, - 'minDate' | 'maxDate' | 'disableFuture' | 'disablePast' -> { - const utils = useUtils(); - const defaultDates = useDefaultDates(); +): DefaultizedProps { + const utils = useUtils(); + const defaultDates = useDefaultDates(); const themeProps = useThemeProps({ props, name, @@ -58,7 +55,7 @@ const MonthCalendarRoot = styled('div', { name: 'MuiMonthCalendar', slot: 'Root', overridesResolver: (props, styles) => styles.root, -})<{ ownerState: MonthCalendarProps }>({ +})<{ ownerState: MonthCalendarProps }>({ display: 'flex', flexWrap: 'wrap', alignContent: 'stretch', @@ -68,8 +65,8 @@ const MonthCalendarRoot = styled('div', { boxSizing: 'border-box', }); -type MonthCalendarComponent = (( - props: MonthCalendarProps & React.RefAttributes, +type MonthCalendarComponent = (( + props: MonthCalendarProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; /** @@ -81,8 +78,8 @@ type MonthCalendarComponent = (( * * - [MonthCalendar API](https://mui.com/x/api/date-pickers/month-calendar/) */ -export const MonthCalendar = React.forwardRef(function MonthCalendar( - inProps: MonthCalendarProps, +export const MonthCalendar = React.forwardRef(function MonthCalendar( + inProps: MonthCalendarProps, ref: React.Ref, ) { const props = useMonthCalendarDefaultizedProps(inProps, 'MuiMonthCalendar'); @@ -117,13 +114,13 @@ export const MonthCalendar = React.forwardRef(function MonthCalendar void, + onChange, valueManager: singleItemValueManager, }); - const now = useNow(timezone); + const now = useNow(timezone); const isRtl = useRtl(); - const utils = useUtils(); + const utils = useUtils(); const referenceDate = React.useMemo( () => @@ -170,7 +167,7 @@ export const MonthCalendar = React.forwardRef(function MonthCalendar { + (dateToValidate: PickerValidDate) => { const firstEnabledMonth = utils.startOfMonth( disablePast && utils.isAfter(now, minDate) ? now : minDate, ); @@ -359,8 +356,7 @@ MonthCalendar.propTypes = { monthsPerRow: PropTypes.oneOf([3, 4]), /** * Callback fired when the value changes. - * @template TDate - * @param {TDate} value The new value. + * @param {PickerValidDate} value The new value. */ onChange: PropTypes.func, onFocusedViewChange: PropTypes.func, @@ -376,8 +372,7 @@ MonthCalendar.propTypes = { referenceDate: PropTypes.object, /** * Disable specific month. - * @template TDate - * @param {TDate} month The month to test. + * @param {PickerValidDate} month The month to test. * @returns {boolean} If `true`, the month will be disabled. */ shouldDisableMonth: PropTypes.func, diff --git a/packages/x-date-pickers/src/MonthCalendar/MonthCalendar.types.ts b/packages/x-date-pickers/src/MonthCalendar/MonthCalendar.types.ts index 3224676d66e3..8aef916e9f0d 100644 --- a/packages/x-date-pickers/src/MonthCalendar/MonthCalendar.types.ts +++ b/packages/x-date-pickers/src/MonthCalendar/MonthCalendar.types.ts @@ -30,10 +30,10 @@ export interface ExportedMonthCalendarProps { */ monthsPerRow?: 3 | 4; } -export interface MonthCalendarProps +export interface MonthCalendarProps extends ExportedMonthCalendarProps, - MonthValidationProps, - BaseDateValidationProps, + MonthValidationProps, + BaseDateValidationProps, TimezoneProps { autoFocus?: boolean; className?: string; @@ -61,23 +61,22 @@ export interface MonthCalendarProps * The selected value. * Used when the component is controlled. */ - value?: TDate | null; + value?: PickerValidDate | null; /** * The default selected value. * Used when the component is not controlled. */ - defaultValue?: TDate | null; + defaultValue?: PickerValidDate | null; /** * The date used to generate the new value when both `value` and `defaultValue` are empty. * @default The closest valid month using the validation props, except callbacks such as `shouldDisableMonth`. */ - referenceDate?: TDate; + referenceDate?: PickerValidDate; /** * Callback fired when the value changes. - * @template TDate - * @param {TDate} value The new value. + * @param {PickerValidDate} value The new value. */ - onChange?: (value: TDate) => void; + onChange?: (value: PickerValidDate) => void; /** If `true` picker is readonly */ readOnly?: boolean; /** diff --git a/packages/x-date-pickers/src/MonthCalendar/tests/describes.MonthCalendar.test.tsx b/packages/x-date-pickers/src/MonthCalendar/tests/describes.MonthCalendar.test.tsx index 2f289f70a552..6b13c8e125e9 100644 --- a/packages/x-date-pickers/src/MonthCalendar/tests/describes.MonthCalendar.test.tsx +++ b/packages/x-date-pickers/src/MonthCalendar/tests/describes.MonthCalendar.test.tsx @@ -52,7 +52,7 @@ describe(' - Describes', () => { } }, setNewValue: (value) => { - const newValue = adapterToUse.addMonths(value, 1); + const newValue = adapterToUse.addMonths(value!, 1); fireEvent.click(screen.getByRole('radio', { name: adapterToUse.format(newValue, 'month') })); diff --git a/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClock.tsx b/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClock.tsx index f9db7217d238..5648dbcc8d88 100644 --- a/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClock.tsx +++ b/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClock.tsx @@ -27,7 +27,7 @@ import { singleItemValueManager } from '../internals/utils/valueManagers'; import { useClockReferenceDate } from '../internals/hooks/useClockReferenceDate'; import { formatMeridiem } from '../internals/utils/date-utils'; -const useUtilityClasses = (ownerState: MultiSectionDigitalClockProps) => { +const useUtilityClasses = (ownerState: MultiSectionDigitalClockProps) => { const { classes } = ownerState; const slots = { root: ['root'], @@ -40,15 +40,15 @@ const MultiSectionDigitalClockRoot = styled(PickerViewRoot, { name: 'MuiMultiSectionDigitalClock', slot: 'Root', overridesResolver: (_, styles) => styles.root, -})<{ ownerState: MultiSectionDigitalClockProps }>(({ theme }) => ({ +})<{ ownerState: MultiSectionDigitalClockProps }>(({ theme }) => ({ display: 'flex', flexDirection: 'row', width: '100%', borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`, })); -type MultiSectionDigitalClockComponent = (( - props: MultiSectionDigitalClockProps & React.RefAttributes, +type MultiSectionDigitalClockComponent = (( + props: MultiSectionDigitalClockProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; /** @@ -61,10 +61,11 @@ type MultiSectionDigitalClockComponent = (( * * - [MultiSectionDigitalClock API](https://mui.com/x/api/date-pickers/multi-section-digital-clock/) */ -export const MultiSectionDigitalClock = React.forwardRef(function MultiSectionDigitalClock< - TDate extends PickerValidDate, ->(inProps: MultiSectionDigitalClockProps, ref: React.Ref) { - const utils = useUtils(); +export const MultiSectionDigitalClock = React.forwardRef(function MultiSectionDigitalClock( + inProps: MultiSectionDigitalClockProps, + ref: React.Ref, +) { + const utils = useUtils(); const isRtl = useRtl(); const props = useThemeProps({ @@ -116,8 +117,8 @@ export const MultiSectionDigitalClock = React.forwardRef(function MultiSectionDi valueManager: singleItemValueManager, }); - const translations = usePickersTranslations(); - const now = useNow(timezone); + const translations = usePickersTranslations(); + const now = useNow(timezone); const timeSteps = React.useMemo>( () => ({ @@ -139,7 +140,7 @@ export const MultiSectionDigitalClock = React.forwardRef(function MultiSectionDi const handleValueChange = useEventCallback( ( - newValue: TDate | null, + newValue: PickerValidDate | null, selectionState?: PickerSelectionState, selectedView?: TimeViewWithMeridiem, ) => handleRawValueChange(newValue, selectionState, selectedView), @@ -153,7 +154,7 @@ export const MultiSectionDigitalClock = React.forwardRef(function MultiSectionDi }, [ampm, inViews]); const { view, setValueAndGoToNextView, focusedView } = useViews< - TDate | null, + PickerValidDate | null, TimeViewWithMeridiem >({ view: inView, @@ -165,11 +166,11 @@ export const MultiSectionDigitalClock = React.forwardRef(function MultiSectionDi onFocusedViewChange, }); - const handleMeridiemValueChange = useEventCallback((newValue: TDate | null) => { + const handleMeridiemValueChange = useEventCallback((newValue: PickerValidDate | null) => { setValueAndGoToNextView(newValue, 'finish', 'meridiem'); }); - const { meridiemMode, handleMeridiemChange } = useMeridiemMode( + const { meridiemMode, handleMeridiemChange } = useMeridiemMode( valueOrReferenceDate, ampm, handleMeridiemValueChange, @@ -182,7 +183,13 @@ export const MultiSectionDigitalClock = React.forwardRef(function MultiSectionDi const shouldCheckPastEnd = viewType === 'hours' || (viewType === 'minutes' && views.includes('seconds')); - const containsValidTime = ({ start, end }: { start: TDate; end: TDate }) => { + const containsValidTime = ({ + start, + end, + }: { + start: PickerValidDate; + end: PickerValidDate; + }) => { if (minTime && isAfter(minTime, end)) { return false; } @@ -550,8 +557,7 @@ MultiSectionDigitalClock.propTypes = { referenceDate: PropTypes.object, /** * Disable specific time. - * @template TDate - * @param {TDate} value The value to check. + * @param {PickerValidDate} value The value to check. * @param {TimeView} view The clock type of the timeValue. * @returns {boolean} If `true` the time will be disabled. */ diff --git a/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClock.types.ts b/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClock.types.ts index 5efc2fc42143..ae4b27536239 100644 --- a/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClock.types.ts +++ b/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClock.types.ts @@ -9,7 +9,6 @@ import { } from '../internals/models/props/time'; import { MultiSectionDigitalClockSectionProps } from './MultiSectionDigitalClockSection'; import { TimeViewWithMeridiem } from '../internals/models'; -import { PickerValidDate } from '../models'; export interface MultiSectionDigitalClockOption { isDisabled?: (value: TValue) => boolean; @@ -20,8 +19,8 @@ export interface MultiSectionDigitalClockOption { ariaLabel: string; } -export interface ExportedMultiSectionDigitalClockProps - extends ExportedBaseClockProps, +export interface ExportedMultiSectionDigitalClockProps + extends ExportedBaseClockProps, MultiSectionDigitalClockOnlyProps {} export interface MultiSectionDigitalClockViewProps @@ -39,9 +38,9 @@ export interface MultiSectionDigitalClockSlotProps { digitalClockSectionItem?: SlotComponentProps>; } -export interface MultiSectionDigitalClockProps - extends ExportedMultiSectionDigitalClockProps, - BaseClockProps { +export interface MultiSectionDigitalClockProps + extends ExportedMultiSectionDigitalClockProps, + BaseClockProps { /** * Available views. * @default ['hours', 'minutes'] diff --git a/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClock.utils.ts b/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClock.utils.ts index 643fcb5e0c18..95966d5dec67 100644 --- a/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClock.utils.ts +++ b/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClock.utils.ts @@ -1,18 +1,18 @@ import { MuiPickersAdapter, PickerValidDate } from '../models'; import { MultiSectionDigitalClockOption } from './MultiSectionDigitalClock.types'; -interface IGetHoursSectionOptions { - now: TDate; - value: TDate | null; - utils: MuiPickersAdapter; +interface GetHoursSectionOptionsParameters { + now: PickerValidDate; + value: PickerValidDate | null; + utils: MuiPickersAdapter; ampm: boolean; isDisabled: (value: number) => boolean; timeStep: number; resolveAriaLabel: (value: string) => string; - valueOrReferenceDate: TDate; + valueOrReferenceDate: PickerValidDate; } -export const getHourSectionOptions = ({ +export const getHourSectionOptions = ({ now, value, utils, @@ -21,7 +21,7 @@ export const getHourSectionOptions = ({ resolveAriaLabel, timeStep, valueOrReferenceDate, -}: IGetHoursSectionOptions): MultiSectionDigitalClockOption[] => { +}: GetHoursSectionOptionsParameters): MultiSectionDigitalClockOption[] => { const currentHours = value ? utils.getHours(value) : null; const result: MultiSectionDigitalClockOption[] = []; @@ -66,9 +66,9 @@ export const getHourSectionOptions = ({ return result; }; -interface IGetTimeSectionOptions { +interface GetTimeSectionOptionsParameters { value: number | null; - utils: MuiPickersAdapter; + utils: MuiPickersAdapter; isDisabled: (value: number) => boolean; timeStep: number; resolveLabel: (value: number) => string; @@ -76,7 +76,7 @@ interface IGetTimeSectionOptions { resolveAriaLabel: (value: string) => string; } -export const getTimeSectionOptions = ({ +export const getTimeSectionOptions = ({ value, utils, isDisabled, @@ -84,7 +84,7 @@ export const getTimeSectionOptions = ({ resolveLabel, resolveAriaLabel, hasValue = true, -}: IGetTimeSectionOptions): MultiSectionDigitalClockOption[] => { +}: GetTimeSectionOptionsParameters): MultiSectionDigitalClockOption[] => { const isSelected = (timeValue: number) => { if (value === null) { return false; diff --git a/packages/x-date-pickers/src/MultiSectionDigitalClock/tests/MultiSectionDigitalClock.test.tsx b/packages/x-date-pickers/src/MultiSectionDigitalClock/tests/MultiSectionDigitalClock.test.tsx index f1701f1ba588..0a6fd7b8c712 100644 --- a/packages/x-date-pickers/src/MultiSectionDigitalClock/tests/MultiSectionDigitalClock.test.tsx +++ b/packages/x-date-pickers/src/MultiSectionDigitalClock/tests/MultiSectionDigitalClock.test.tsx @@ -56,7 +56,7 @@ describe('', () => { it('should not use `referenceDate` when a value is defined', () => { const onChange = spy(); - function ControlledMultiSectionDigitalClock(props: MultiSectionDigitalClockProps) { + function ControlledMultiSectionDigitalClock(props: MultiSectionDigitalClockProps) { const [value, setValue] = React.useState(props.value); return ( diff --git a/packages/x-date-pickers/src/MultiSectionDigitalClock/tests/describes.MultiSectionDigitalClock.test.tsx b/packages/x-date-pickers/src/MultiSectionDigitalClock/tests/describes.MultiSectionDigitalClock.test.tsx index 1693d7b84d2b..06c7858b913e 100644 --- a/packages/x-date-pickers/src/MultiSectionDigitalClock/tests/describes.MultiSectionDigitalClock.test.tsx +++ b/packages/x-date-pickers/src/MultiSectionDigitalClock/tests/describes.MultiSectionDigitalClock.test.tsx @@ -64,7 +64,7 @@ describe(' - Describes', () => { } }, setNewValue: (value) => { - const newValue = adapterToUse.addMinutes(adapterToUse.addHours(value, 1), 5); + const newValue = adapterToUse.addMinutes(adapterToUse.addHours(value!, 1), 5); multiSectionDigitalClockHandler.setViewValue(adapterToUse, newValue); return newValue; diff --git a/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.tsx b/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.tsx index 770d131235cf..238618dea463 100644 --- a/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.tsx +++ b/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.tsx @@ -24,9 +24,8 @@ import { PickersCalendarHeaderOwnerState, PickersCalendarHeaderProps, } from './PickersCalendarHeader.types'; -import { PickerValidDate } from '../models'; -const useUtilityClasses = (ownerState: PickersCalendarHeaderOwnerState) => { +const useUtilityClasses = (ownerState: PickersCalendarHeaderOwnerState) => { const { classes } = ownerState; const slots = { root: ['root'], @@ -44,7 +43,7 @@ const PickersCalendarHeaderRoot = styled('div', { slot: 'Root', overridesResolver: (_, styles) => styles.root, })<{ - ownerState: PickersCalendarHeaderOwnerState; + ownerState: PickersCalendarHeaderOwnerState; }>({ display: 'flex', alignItems: 'center', @@ -62,7 +61,7 @@ const PickersCalendarHeaderLabelContainer = styled('div', { slot: 'LabelContainer', overridesResolver: (_, styles) => styles.labelContainer, })<{ - ownerState: PickersCalendarHeaderOwnerState; + ownerState: PickersCalendarHeaderOwnerState; }>(({ theme }) => ({ display: 'flex', overflow: 'hidden', @@ -78,7 +77,7 @@ const PickersCalendarHeaderLabel = styled('div', { slot: 'Label', overridesResolver: (_, styles) => styles.label, })<{ - ownerState: PickersCalendarHeaderOwnerState; + ownerState: PickersCalendarHeaderOwnerState; }>({ marginRight: 6, }); @@ -88,7 +87,7 @@ const PickersCalendarHeaderSwitchViewButton = styled(IconButton, { slot: 'SwitchViewButton', overridesResolver: (_, styles) => styles.switchViewButton, })<{ - ownerState: PickersCalendarHeaderOwnerState; + ownerState: PickersCalendarHeaderOwnerState; }>({ marginRight: 'auto', variants: [ @@ -108,15 +107,15 @@ const PickersCalendarHeaderSwitchViewIcon = styled(ArrowDropDownIcon, { slot: 'SwitchViewIcon', overridesResolver: (_, styles) => styles.switchViewIcon, })<{ - ownerState: PickersCalendarHeaderOwnerState; + ownerState: PickersCalendarHeaderOwnerState; }>(({ theme }) => ({ willChange: 'transform', transition: theme.transitions.create('transform'), transform: 'rotate(0deg)', })); -type PickersCalendarHeaderComponent = (( - props: PickersCalendarHeaderProps & React.RefAttributes, +type PickersCalendarHeaderComponent = (( + props: PickersCalendarHeaderProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; /** @@ -130,11 +129,12 @@ type PickersCalendarHeaderComponent = (( * * - [PickersCalendarHeader API](https://mui.com/x/api/date-pickers/pickers-calendar-header/) */ -const PickersCalendarHeader = React.forwardRef(function PickersCalendarHeader< - TDate extends PickerValidDate, ->(inProps: PickersCalendarHeaderProps, ref: React.Ref) { - const translations = usePickersTranslations(); - const utils = useUtils(); +const PickersCalendarHeader = React.forwardRef(function PickersCalendarHeader( + inProps: PickersCalendarHeaderProps, + ref: React.Ref, +) { + const translations = usePickersTranslations(); + const utils = useUtils(); const props = useThemeProps({ props: inProps, name: 'MuiPickersCalendarHeader' }); diff --git a/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.types.ts b/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.types.ts index 8b1147682bbd..0e058fe60e8d 100644 --- a/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.types.ts +++ b/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.types.ts @@ -29,27 +29,25 @@ export interface PickersCalendarHeaderSlots extends PickersArrowSwitcherSlots { // We keep the interface to allow module augmentation export interface PickersCalendarHeaderSlotPropsOverrides {} -export type PickersCalendarHeaderOwnerState = - PickersCalendarHeaderProps; +export type PickersCalendarHeaderOwnerState = PickersCalendarHeaderProps; -export interface PickersCalendarHeaderSlotProps - extends PickersArrowSwitcherSlotProps { +export interface PickersCalendarHeaderSlotProps extends PickersArrowSwitcherSlotProps { switchViewButton?: SlotComponentProps< typeof IconButton, PickersCalendarHeaderSlotPropsOverrides, - PickersCalendarHeaderOwnerState + PickersCalendarHeaderOwnerState >; switchViewIcon?: SlotComponentProps< typeof SvgIcon, PickersCalendarHeaderSlotPropsOverrides, - PickersCalendarHeaderOwnerState + PickersCalendarHeaderOwnerState >; } -export interface PickersCalendarHeaderProps +export interface PickersCalendarHeaderProps extends ExportedPickersArrowSwitcherProps, - MonthValidationOptions { + MonthValidationOptions { /** * Overridable component slots. * @default {} @@ -59,11 +57,11 @@ export interface PickersCalendarHeaderProps * The props used for each component slot. * @default {} */ - slotProps?: PickersCalendarHeaderSlotProps; - currentMonth: TDate; + slotProps?: PickersCalendarHeaderSlotProps; + currentMonth: PickerValidDate; disabled?: boolean; views: readonly DateView[]; - onMonthChange: (date: TDate, slideDirection: SlideDirection) => void; + onMonthChange: (date: PickerValidDate, slideDirection: SlideDirection) => void; view: DateView; reduceAnimations: boolean; onViewChange?: (view: DateView) => void; @@ -83,7 +81,7 @@ export interface PickersCalendarHeaderProps sx?: SxProps; } -export type ExportedPickersCalendarHeaderProps = Pick< - PickersCalendarHeaderProps, +export type ExportedPickersCalendarHeaderProps = Pick< + PickersCalendarHeaderProps, 'classes' | 'slots' | 'slotProps' >; diff --git a/packages/x-date-pickers/src/PickersDay/PickersDay.spec.tsx b/packages/x-date-pickers/src/PickersDay/PickersDay.spec.tsx index 65e368cdf06d..be7ee0319c95 100644 --- a/packages/x-date-pickers/src/PickersDay/PickersDay.spec.tsx +++ b/packages/x-date-pickers/src/PickersDay/PickersDay.spec.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; import { PickersDay } from '@mui/x-date-pickers/PickersDay'; - + date?.getDay()} + onDaySelect={() => {}} isFirstVisibleCell={false} isLastVisibleCell={false} />; diff --git a/packages/x-date-pickers/src/PickersDay/PickersDay.tsx b/packages/x-date-pickers/src/PickersDay/PickersDay.tsx index cdb1f16acead..d832423611f0 100644 --- a/packages/x-date-pickers/src/PickersDay/PickersDay.tsx +++ b/packages/x-date-pickers/src/PickersDay/PickersDay.tsx @@ -40,7 +40,7 @@ export interface ExportedPickersDayProps { showDaysOutsideCurrentMonth?: boolean; } -export interface PickersDayProps +export interface PickersDayProps extends ExportedPickersDayProps, Omit< ExtendMui, @@ -53,7 +53,7 @@ export interface PickersDayProps /** * The date to show. */ - day: TDate; + day: PickerValidDate; /** * If `true`, renders as disabled. * @default false @@ -65,11 +65,11 @@ export interface PickersDayProps */ disableMargin?: boolean; isAnimating?: boolean; - onFocus?: (event: React.FocusEvent, day: TDate) => void; - onBlur?: (event: React.FocusEvent, day: TDate) => void; - onKeyDown?: (event: React.KeyboardEvent, day: TDate) => void; - onMouseEnter?: (event: React.MouseEvent, day: TDate) => void; - onDaySelect: (day: TDate) => void; + onFocus?: (event: React.FocusEvent, day: PickerValidDate) => void; + onBlur?: (event: React.FocusEvent, day: PickerValidDate) => void; + onKeyDown?: (event: React.KeyboardEvent, day: PickerValidDate) => void; + onMouseEnter?: (event: React.MouseEvent, day: PickerValidDate) => void; + onDaySelect: (day: PickerValidDate) => void; /** * If `true`, day is outside of month and will be hidden. */ @@ -96,9 +96,9 @@ export interface PickersDayProps today?: boolean; } -type OwnerState = Partial>; +type OwnerState = Partial; -const useUtilityClasses = (ownerState: PickersDayProps) => { +const useUtilityClasses = (ownerState: PickersDayProps) => { const { selected, disableMargin, @@ -231,12 +231,12 @@ const PickersDayFiller = styled('div', { const noop = () => {}; -type PickersDayComponent = (( - props: PickersDayProps & React.RefAttributes, +type PickersDayComponent = (( + props: PickersDayProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; -const PickersDayRaw = React.forwardRef(function PickersDay( - inProps: PickersDayProps, +const PickersDayRaw = React.forwardRef(function PickersDay( + inProps: PickersDayProps, forwardedRef: React.Ref, ) { const props = useThemeProps({ @@ -283,7 +283,7 @@ const PickersDayRaw = React.forwardRef(function PickersDay(); + const utils = useUtils(); const ref = React.useRef(null); const handleRef = useForkRef(ref, forwardedRef); diff --git a/packages/x-date-pickers/src/PickersLayout/PickersLayout.tsx b/packages/x-date-pickers/src/PickersLayout/PickersLayout.tsx index f0d559429a3c..8cdefb9500a2 100644 --- a/packages/x-date-pickers/src/PickersLayout/PickersLayout.tsx +++ b/packages/x-date-pickers/src/PickersLayout/PickersLayout.tsx @@ -8,9 +8,8 @@ import { PickersLayoutProps } from './PickersLayout.types'; import { pickersLayoutClasses, getPickersLayoutUtilityClass } from './pickersLayoutClasses'; import usePickerLayout from './usePickerLayout'; import { DateOrTimeViewWithMeridiem } from '../internals/models'; -import { PickerValidDate } from '../models'; -const useUtilityClasses = (ownerState: PickersLayoutProps) => { +const useUtilityClasses = (ownerState: PickersLayoutProps) => { const { isLandscape, classes } = ownerState; const slots = { root: ['root', isLandscape && 'landscape'], @@ -24,7 +23,7 @@ export const PickersLayoutRoot = styled('div', { name: 'MuiPickersLayout', slot: 'Root', overridesResolver: (props, styles) => styles.root, -})<{ ownerState: PickersLayoutProps }>({ +})<{ ownerState: PickersLayoutProps }>({ display: 'grid', gridAutoColumns: 'max-content auto max-content', gridAutoRows: 'max-content auto max-content', @@ -80,12 +79,8 @@ export const PickersLayoutContentWrapper = styled('div', { flexDirection: 'column', }); -type PickersLayoutComponent = (< - TValue, - TDate extends PickerValidDate, - TView extends DateOrTimeViewWithMeridiem, ->( - props: PickersLayoutProps & React.RefAttributes, +type PickersLayoutComponent = (( + props: PickersLayoutProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; /** @@ -99,9 +94,8 @@ type PickersLayoutComponent = (< */ const PickersLayout = React.forwardRef(function PickersLayout< TValue, - TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, ->(inProps: PickersLayoutProps, ref: React.Ref) { +>(inProps: PickersLayoutProps, ref: React.Ref) { const props = useThemeProps({ props: inProps, name: 'MuiPickersLayout' }); const { toolbar, content, tabs, actionBar, shortcuts } = usePickerLayout(props); diff --git a/packages/x-date-pickers/src/PickersLayout/PickersLayout.types.ts b/packages/x-date-pickers/src/PickersLayout/PickersLayout.types.ts index c63477c40062..503256858729 100644 --- a/packages/x-date-pickers/src/PickersLayout/PickersLayout.types.ts +++ b/packages/x-date-pickers/src/PickersLayout/PickersLayout.types.ts @@ -12,13 +12,9 @@ import { ExportedPickersShortcutProps, PickersShortcuts, } from '../PickersShortcuts/PickersShortcuts'; -import { PickerOwnerState, PickerValidDate } from '../models'; +import { PickerOwnerState } from '../models'; -export interface ExportedPickersLayoutSlots< - TValue, - TDate extends PickerValidDate, - TView extends DateOrTimeViewWithMeridiem, -> { +export interface ExportedPickersLayoutSlots { /** * Custom component for the action bar, it is placed below the picker views. * @default PickersActionBar @@ -34,7 +30,7 @@ export interface ExportedPickersLayoutSlots< * It wraps the toolbar, views, action bar, and shortcuts. */ layout?: React.JSXElementConstructor< - PickersLayoutProps & React.RefAttributes + PickersLayoutProps & React.RefAttributes >; } @@ -43,11 +39,7 @@ export interface PickersLayoutOwnerState extends PickerOwnerState { isLandscape: boolean; } -export interface ExportedPickersLayoutSlotProps< - TValue, - TDate extends PickerValidDate, - TView extends DateOrTimeViewWithMeridiem, -> { +export interface ExportedPickersLayoutSlotProps { /** * Props passed down to the action bar component. */ @@ -59,14 +51,11 @@ export interface ExportedPickersLayoutSlotProps< /** * Props passed down to the layoutRoot component. */ - layout?: Partial>; + layout?: Partial>; } -export interface PickersLayoutSlots< - TValue, - TDate extends PickerValidDate, - TView extends DateOrTimeViewWithMeridiem, -> extends ExportedPickersLayoutSlots { +export interface PickersLayoutSlots + extends ExportedPickersLayoutSlots { /** * Tabs enabling toggling between views. */ @@ -78,11 +67,8 @@ export interface PickersLayoutSlots< toolbar?: React.JSXElementConstructor>; } -export interface PickersLayoutSlotProps< - TValue, - TDate extends PickerValidDate, - TView extends DateOrTimeViewWithMeridiem, -> extends ExportedPickersLayoutSlotProps { +export interface PickersLayoutSlotProps + extends ExportedPickersLayoutSlotProps { /** * Props passed down to the tabs component. */ @@ -93,11 +79,8 @@ export interface PickersLayoutSlotProps< toolbar?: ExportedBaseToolbarProps; } -export interface PickersLayoutProps< - TValue, - TDate extends PickerValidDate, - TView extends DateOrTimeViewWithMeridiem, -> extends Omit, 'value'> { +export interface PickersLayoutProps + extends Omit, 'value'> { value?: TValue; className?: string; children?: React.ReactNode; @@ -113,12 +96,12 @@ export interface PickersLayoutProps< * Overridable component slots. * @default {} */ - slots?: PickersLayoutSlots; + slots?: PickersLayoutSlots; /** * The props used for each component slot. * @default {} */ - slotProps?: PickersLayoutSlotProps; + slotProps?: PickersLayoutSlotProps; /** * `true` if the application is in right-to-left direction. */ diff --git a/packages/x-date-pickers/src/PickersLayout/usePickerLayout.tsx b/packages/x-date-pickers/src/PickersLayout/usePickerLayout.tsx index aa0b068d1a67..aa34a0a0c06a 100644 --- a/packages/x-date-pickers/src/PickersLayout/usePickerLayout.tsx +++ b/packages/x-date-pickers/src/PickersLayout/usePickerLayout.tsx @@ -8,7 +8,6 @@ import { getPickersLayoutUtilityClass, PickersLayoutClasses } from './pickersLay import { PickersShortcuts } from '../PickersShortcuts'; import { BaseToolbarProps } from '../internals/models/props/toolbar'; import { DateOrTimeViewWithMeridiem } from '../internals/models'; -import { PickerValidDate } from '../models'; import { usePickersPrivateContext } from '../internals/hooks/usePickersPrivateContext'; function toolbarHasView( @@ -35,21 +34,14 @@ const useUtilityClasses = ( return composeClasses(slots, getPickersLayoutUtilityClass, classes); }; -interface PickersLayoutPropsWithValueRequired< - TValue, - TDate extends PickerValidDate, - TView extends DateOrTimeViewWithMeridiem, -> extends PickersLayoutProps { +interface PickersLayoutPropsWithValueRequired + extends PickersLayoutProps { value: TValue; } interface UsePickerLayoutResponse extends SubComponents {} -const usePickerLayout = < - TValue, - TDate extends PickerValidDate, - TView extends DateOrTimeViewWithMeridiem, ->( - props: PickersLayoutProps, +const usePickerLayout = ( + props: PickersLayoutProps, ): UsePickerLayoutResponse => { const { ownerState: pickersOwnerState } = usePickersPrivateContext(); @@ -75,9 +67,9 @@ const usePickerLayout = < classes: classesProp, // TODO: Remove this "as" hack. It get introduced to mark `value` prop in PickersLayoutProps as not required. // The true type should be - // - For pickers value: TDate | null - // - For range pickers value: [TDate | null, TDate | null] - } = props as PickersLayoutPropsWithValueRequired; + // - For pickers value: PickerValidDate | null + // - For range pickers value: [PickerValidDate | null, PickerValidDate | null] + } = props as PickersLayoutPropsWithValueRequired; const ownerState: PickersLayoutOwnerState = { ...pickersOwnerState, diff --git a/packages/x-date-pickers/src/StaticDatePicker/StaticDatePicker.tsx b/packages/x-date-pickers/src/StaticDatePicker/StaticDatePicker.tsx index 64c8f52cf503..ca4f3aa7362d 100644 --- a/packages/x-date-pickers/src/StaticDatePicker/StaticDatePicker.tsx +++ b/packages/x-date-pickers/src/StaticDatePicker/StaticDatePicker.tsx @@ -6,11 +6,11 @@ import { DatePickerViewRenderers, useDatePickerDefaultizedProps } from '../DateP import { renderDateViewCalendar } from '../dateViewRenderers'; import { useStaticPicker } from '../internals/hooks/useStaticPicker'; import { validateDate } from '../validation'; -import { DateView, PickerValidDate } from '../models'; +import { DateView } from '../models'; import { singleItemValueManager } from '../internals/utils/valueManagers'; -type StaticDatePickerComponent = (( - props: StaticDatePickerProps & React.RefAttributes, +type StaticDatePickerComponent = (( + props: StaticDatePickerProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; /** @@ -23,18 +23,18 @@ type StaticDatePickerComponent = (( * * - [StaticDatePicker API](https://mui.com/x/api/date-pickers/static-date-picker/) */ -const StaticDatePicker = React.forwardRef(function StaticDatePicker( - inProps: StaticDatePickerProps, +const StaticDatePicker = React.forwardRef(function StaticDatePicker( + inProps: StaticDatePickerProps, ref: React.Ref, ) { - const defaultizedProps = useDatePickerDefaultizedProps>( + const defaultizedProps = useDatePickerDefaultizedProps( inProps, 'MuiStaticDatePicker', ); const displayStaticWrapperAs = defaultizedProps.displayStaticWrapperAs ?? 'mobile'; - const viewRenderers: DatePickerViewRenderers = { + const viewRenderers: DatePickerViewRenderers = { day: renderDateViewCalendar, month: renderDateViewCalendar, year: renderDateViewCalendar, @@ -56,7 +56,7 @@ const StaticDatePicker = React.forwardRef(function StaticDatePicker({ + const { renderPicker } = useStaticPicker({ props, valueManager: singleItemValueManager, valueType: 'date', @@ -82,9 +82,9 @@ StaticDatePicker.propTypes = { className: PropTypes.string, /** * Formats the day of week displayed in the calendar header. - * @param {TDate} date The date of the day of week provided by the adapter. + * @param {PickerValidDate} date The date of the day of week provided by the adapter. * @returns {string} The name to display. - * @default (date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase() + * @default (date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase() */ dayOfWeekFormatter: PropTypes.func, /** @@ -186,8 +186,7 @@ StaticDatePicker.propTypes = { onError: PropTypes.func, /** * Callback fired on month change. - * @template TDate - * @param {TDate} month The new month. + * @param {PickerValidDate} month The new month. */ onMonthChange: PropTypes.func, /** @@ -198,8 +197,7 @@ StaticDatePicker.propTypes = { onViewChange: PropTypes.func, /** * Callback fired on year change. - * @template TDate - * @param {TDate} year The new year. + * @param {PickerValidDate} year The new year. */ onYearChange: PropTypes.func, /** @@ -234,22 +232,19 @@ StaticDatePicker.propTypes = { * * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance. * - * @template TDate - * @param {TDate} day The date to test. + * @param {PickerValidDate} day The date to test. * @returns {boolean} If `true` the date will be disabled. */ shouldDisableDate: PropTypes.func, /** * Disable specific month. - * @template TDate - * @param {TDate} month The month to test. + * @param {PickerValidDate} month The month to test. * @returns {boolean} If `true`, the month will be disabled. */ shouldDisableMonth: PropTypes.func, /** * Disable specific year. - * @template TDate - * @param {TDate} year The year to test. + * @param {PickerValidDate} year The year to test. * @returns {boolean} If `true`, the year will be disabled. */ shouldDisableYear: PropTypes.func, diff --git a/packages/x-date-pickers/src/StaticDatePicker/StaticDatePicker.types.ts b/packages/x-date-pickers/src/StaticDatePicker/StaticDatePicker.types.ts index a595449b5f47..27271bbcca56 100644 --- a/packages/x-date-pickers/src/StaticDatePicker/StaticDatePicker.types.ts +++ b/packages/x-date-pickers/src/StaticDatePicker/StaticDatePicker.types.ts @@ -9,29 +9,29 @@ import { UseStaticPickerSlots, UseStaticPickerSlotProps, } from '../internals/hooks/useStaticPicker'; -import { DateView, PickerValidDate } from '../models'; +import { DateView } from '../models'; -export interface StaticDatePickerSlots - extends BaseDatePickerSlots, - UseStaticPickerSlots {} +export interface StaticDatePickerSlots + extends BaseDatePickerSlots, + UseStaticPickerSlots {} -export interface StaticDatePickerSlotProps - extends BaseDatePickerSlotProps, - UseStaticPickerSlotProps {} +export interface StaticDatePickerSlotProps + extends BaseDatePickerSlotProps, + UseStaticPickerSlotProps {} -export interface StaticDatePickerProps - extends BaseDatePickerProps, +export interface StaticDatePickerProps + extends BaseDatePickerProps, MakeOptional { /** * Overridable component slots. * @default {} */ - slots?: StaticDatePickerSlots; + slots?: StaticDatePickerSlots; /** * The props used for each component slot. * @default {} */ - slotProps?: StaticDatePickerSlotProps; + slotProps?: StaticDatePickerSlotProps; /** * Years rendered per row. * @default `4` when `displayStaticWrapperAs === 'desktop'`, `3` otherwise. diff --git a/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.tsx b/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.tsx index 144c3a8cdfec..ba3702d7f9ae 100644 --- a/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.tsx +++ b/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.tsx @@ -10,11 +10,11 @@ import { renderTimeViewClock } from '../timeViewRenderers'; import { renderDateViewCalendar } from '../dateViewRenderers'; import { singleItemValueManager } from '../internals/utils/valueManagers'; import { useStaticPicker } from '../internals/hooks/useStaticPicker'; -import { DateOrTimeView, PickerValidDate } from '../models'; +import { DateOrTimeView } from '../models'; import { validateDateTime } from '../validation'; -type StaticDateTimePickerComponent = (( - props: StaticDateTimePickerProps & React.RefAttributes, +type StaticDateTimePickerComponent = (( + props: StaticDateTimePickerProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; /** @@ -27,19 +27,19 @@ type StaticDateTimePickerComponent = (( * * - [StaticDateTimePicker API](https://mui.com/x/api/date-pickers/static-date-time-picker/) */ -const StaticDateTimePicker = React.forwardRef(function StaticDateTimePicker< - TDate extends PickerValidDate, ->(inProps: StaticDateTimePickerProps, ref: React.Ref) { +const StaticDateTimePicker = React.forwardRef(function StaticDateTimePicker( + inProps: StaticDateTimePickerProps, + ref: React.Ref, +) { const defaultizedProps = useDateTimePickerDefaultizedProps< - TDate, DateOrTimeView, - StaticDateTimePickerProps + StaticDateTimePickerProps >(inProps, 'MuiStaticDateTimePicker'); const displayStaticWrapperAs = defaultizedProps.displayStaticWrapperAs ?? 'mobile'; const ampmInClock = defaultizedProps.ampmInClock ?? displayStaticWrapperAs === 'desktop'; - const viewRenderers: DateTimePickerViewRenderers = { + const viewRenderers: DateTimePickerViewRenderers = { day: renderDateViewCalendar, month: renderDateViewCalendar, year: renderDateViewCalendar, @@ -70,7 +70,7 @@ const StaticDateTimePicker = React.forwardRef(function StaticDateTimePicker< }, }; - const { renderPicker } = useStaticPicker({ + const { renderPicker } = useStaticPicker({ props, valueManager: singleItemValueManager, valueType: 'date-time', @@ -106,9 +106,9 @@ StaticDateTimePicker.propTypes = { className: PropTypes.string, /** * Formats the day of week displayed in the calendar header. - * @param {TDate} date The date of the day of week provided by the adapter. + * @param {PickerValidDate} date The date of the day of week provided by the adapter. * @returns {string} The name to display. - * @default (date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase() + * @default (date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase() */ dayOfWeekFormatter: PropTypes.func, /** @@ -238,8 +238,7 @@ StaticDateTimePicker.propTypes = { onError: PropTypes.func, /** * Callback fired on month change. - * @template TDate - * @param {TDate} month The new month. + * @param {PickerValidDate} month The new month. */ onMonthChange: PropTypes.func, /** @@ -250,8 +249,7 @@ StaticDateTimePicker.propTypes = { onViewChange: PropTypes.func, /** * Callback fired on year change. - * @template TDate - * @param {TDate} year The new year. + * @param {PickerValidDate} year The new year. */ onYearChange: PropTypes.func, /** @@ -286,30 +284,26 @@ StaticDateTimePicker.propTypes = { * * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance. * - * @template TDate - * @param {TDate} day The date to test. + * @param {PickerValidDate} day The date to test. * @returns {boolean} If `true` the date will be disabled. */ shouldDisableDate: PropTypes.func, /** * Disable specific month. - * @template TDate - * @param {TDate} month The month to test. + * @param {PickerValidDate} month The month to test. * @returns {boolean} If `true`, the month will be disabled. */ shouldDisableMonth: PropTypes.func, /** * Disable specific time. - * @template TDate - * @param {TDate} value The value to check. + * @param {PickerValidDate} value The value to check. * @param {TimeView} view The clock type of the timeValue. * @returns {boolean} If `true` the time will be disabled. */ shouldDisableTime: PropTypes.func, /** * Disable specific year. - * @template TDate - * @param {TDate} year The year to test. + * @param {PickerValidDate} year The year to test. * @returns {boolean} If `true`, the year will be disabled. */ shouldDisableYear: PropTypes.func, diff --git a/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.types.ts b/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.types.ts index 71015958570d..c6591da17a8b 100644 --- a/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.types.ts +++ b/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.types.ts @@ -9,29 +9,29 @@ import { UseStaticPickerSlots, UseStaticPickerSlotProps, } from '../internals/hooks/useStaticPicker'; -import { DateOrTimeView, PickerValidDate } from '../models'; +import { DateOrTimeView } from '../models'; -export interface StaticDateTimePickerSlots - extends BaseDateTimePickerSlots, - UseStaticPickerSlots {} +export interface StaticDateTimePickerSlots + extends BaseDateTimePickerSlots, + UseStaticPickerSlots {} -export interface StaticDateTimePickerSlotProps - extends BaseDateTimePickerSlotProps, - UseStaticPickerSlotProps {} +export interface StaticDateTimePickerSlotProps + extends BaseDateTimePickerSlotProps, + UseStaticPickerSlotProps {} -export interface StaticDateTimePickerProps - extends BaseDateTimePickerProps, +export interface StaticDateTimePickerProps + extends BaseDateTimePickerProps, MakeOptional { /** * Overridable component slots. * @default {} */ - slots?: StaticDateTimePickerSlots; + slots?: StaticDateTimePickerSlots; /** * The props used for each component slot. * @default {} */ - slotProps?: StaticDateTimePickerSlotProps; + slotProps?: StaticDateTimePickerSlotProps; /** * Years rendered per row. * @default `4` when `displayStaticWrapperAs === 'desktop'`, `3` otherwise. diff --git a/packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.tsx b/packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.tsx index f8497d2a5299..d3ab866dbc7c 100644 --- a/packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.tsx +++ b/packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.tsx @@ -1,7 +1,7 @@ 'use client'; import * as React from 'react'; import PropTypes from 'prop-types'; -import { PickerValidDate, TimeView } from '../models'; +import { TimeView } from '../models'; import { StaticTimePickerProps } from './StaticTimePicker.types'; import { TimePickerViewRenderers, useTimePickerDefaultizedProps } from '../TimePicker/shared'; import { renderTimeViewClock } from '../timeViewRenderers'; @@ -9,8 +9,8 @@ import { singleItemValueManager } from '../internals/utils/valueManagers'; import { useStaticPicker } from '../internals/hooks/useStaticPicker'; import { validateTime } from '../validation'; -type StaticTimePickerComponent = (( - props: StaticTimePickerProps & React.RefAttributes, +type StaticTimePickerComponent = (( + props: StaticTimePickerProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; /** @@ -23,20 +23,19 @@ type StaticTimePickerComponent = (( * * - [StaticTimePicker API](https://mui.com/x/api/date-pickers/static-time-picker/) */ -const StaticTimePicker = React.forwardRef(function StaticTimePicker( - inProps: StaticTimePickerProps, +const StaticTimePicker = React.forwardRef(function StaticTimePicker( + inProps: StaticTimePickerProps, ref: React.Ref, ) { - const defaultizedProps = useTimePickerDefaultizedProps< - TDate, - TimeView, - StaticTimePickerProps - >(inProps, 'MuiStaticTimePicker'); + const defaultizedProps = useTimePickerDefaultizedProps( + inProps, + 'MuiStaticTimePicker', + ); const displayStaticWrapperAs = defaultizedProps.displayStaticWrapperAs ?? 'mobile'; const ampmInClock = defaultizedProps.ampmInClock ?? displayStaticWrapperAs === 'desktop'; - const viewRenderers: TimePickerViewRenderers = { + const viewRenderers: TimePickerViewRenderers = { hours: renderTimeViewClock, minutes: renderTimeViewClock, seconds: renderTimeViewClock, @@ -59,7 +58,7 @@ const StaticTimePicker = React.forwardRef(function StaticTimePicker({ + const { renderPicker } = useStaticPicker({ props, valueManager: singleItemValueManager, valueType: 'time', @@ -204,8 +203,7 @@ StaticTimePicker.propTypes = { referenceDate: PropTypes.object, /** * Disable specific time. - * @template TDate - * @param {TDate} value The value to check. + * @param {PickerValidDate} value The value to check. * @param {TimeView} view The clock type of the timeValue. * @returns {boolean} If `true` the time will be disabled. */ diff --git a/packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.types.ts b/packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.types.ts index a949d06af26e..8de99acfe5c1 100644 --- a/packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.types.ts +++ b/packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.types.ts @@ -9,27 +9,27 @@ import { UseStaticPickerSlots, UseStaticPickerSlotProps, } from '../internals/hooks/useStaticPicker'; -import { PickerValidDate, TimeView } from '../models'; +import { TimeView } from '../models'; -export interface StaticTimePickerSlots - extends BaseTimePickerSlots, - UseStaticPickerSlots {} +export interface StaticTimePickerSlots + extends BaseTimePickerSlots, + UseStaticPickerSlots {} -export interface StaticTimePickerSlotProps +export interface StaticTimePickerSlotProps extends BaseTimePickerSlotProps, - UseStaticPickerSlotProps {} + UseStaticPickerSlotProps {} -export interface StaticTimePickerProps - extends BaseTimePickerProps, +export interface StaticTimePickerProps + extends BaseTimePickerProps, MakeOptional { /** * Overridable component slots. * @default {} */ - slots?: StaticTimePickerSlots; + slots?: StaticTimePickerSlots; /** * The props used for each component slot. * @default {} */ - slotProps?: StaticTimePickerSlotProps; + slotProps?: StaticTimePickerSlotProps; } diff --git a/packages/x-date-pickers/src/TimeClock/Clock.tsx b/packages/x-date-pickers/src/TimeClock/Clock.tsx index c75bf158cca7..216f6d29d5a1 100644 --- a/packages/x-date-pickers/src/TimeClock/Clock.tsx +++ b/packages/x-date-pickers/src/TimeClock/Clock.tsx @@ -18,8 +18,7 @@ import { ClockClasses, getClockUtilityClass } from './clockClasses'; import { formatMeridiem } from '../internals/utils/date-utils'; import { Meridiem } from '../internals/utils/time-utils'; -export interface ClockProps - extends ReturnType { +export interface ClockProps extends ReturnType { ampm: boolean; ampmInClock: boolean; autoFocus?: boolean; @@ -40,14 +39,14 @@ export interface ClockProps /** * The current full date value. */ - value: TDate | null; + value: PickerValidDate | null; disabled?: boolean; readOnly?: boolean; className?: string; classes?: Partial; } -const useUtilityClasses = (ownerState: ClockProps) => { +const useUtilityClasses = (ownerState: ClockProps) => { const { classes, meridiemMode } = ownerState; const slots = { root: ['root'], @@ -99,7 +98,7 @@ const ClockWrapper = styled('div', { }); type ClockSquareMaskOwnerState = { - disabled?: ClockProps['disabled']; + disabled?: ClockProps['disabled']; }; const ClockSquareMask = styled('div', { @@ -170,7 +169,7 @@ const ClockAmButton = styled(IconButton, { name: 'MuiClock', slot: 'AmButton', overridesResolver: (_, styles) => styles.amButton, -})<{ ownerState: ClockProps }>(({ theme }) => ({ +})<{ ownerState: ClockProps }>(({ theme }) => ({ ...meridiemButtonCommonStyles(theme, 'am'), // keeping it here to make TS happy position: 'absolute', @@ -181,7 +180,7 @@ const ClockPmButton = styled(IconButton, { name: 'MuiClock', slot: 'PmButton', overridesResolver: (_, styles) => styles.pmButton, -})<{ ownerState: ClockProps }>(({ theme }) => ({ +})<{ ownerState: ClockProps }>(({ theme }) => ({ ...meridiemButtonCommonStyles(theme, 'pm'), // keeping it here to make TS happy position: 'absolute', @@ -201,7 +200,7 @@ const ClockMeridiemText = styled(Typography, { /** * @ignore - internal component. */ -export function Clock(inProps: ClockProps) { +export function Clock(inProps: ClockProps) { const props = useThemeProps({ props: inProps, name: 'MuiClock' }); const { ampm, @@ -224,8 +223,8 @@ export function Clock(inProps: ClockProps) const ownerState = props; - const utils = useUtils(); - const translations = usePickersTranslations(); + const utils = useUtils(); + const translations = usePickersTranslations(); const isMoving = React.useRef(false); const classes = useUtilityClasses(ownerState); diff --git a/packages/x-date-pickers/src/TimeClock/ClockNumbers.tsx b/packages/x-date-pickers/src/TimeClock/ClockNumbers.tsx index 28c34d15caf5..ba55de5fceb8 100644 --- a/packages/x-date-pickers/src/TimeClock/ClockNumbers.tsx +++ b/packages/x-date-pickers/src/TimeClock/ClockNumbers.tsx @@ -3,9 +3,9 @@ import { ClockNumber } from './ClockNumber'; import { MuiPickersAdapter, PickerValidDate } from '../models'; import type { PickerSelectionState } from '../internals/hooks/usePicker'; -interface GetHourNumbersOptions { +interface GetHourNumbersOptions { ampm: boolean; - value: TDate | null; + value: PickerValidDate | null; getClockNumberText: (hour: string) => string; isDisabled: (value: number) => boolean; onChange: (value: number, isFinish?: PickerSelectionState) => void; @@ -14,20 +14,20 @@ interface GetHourNumbersOptions { * Should only be `undefined` on the server */ selectedId: string | undefined; - utils: MuiPickersAdapter; + utils: MuiPickersAdapter; } /** * @ignore - internal component. */ -export const getHourNumbers = ({ +export const getHourNumbers = ({ ampm, value, getClockNumberText, isDisabled, selectedId, utils, -}: GetHourNumbersOptions) => { +}: GetHourNumbersOptions) => { const currentHours = value ? utils.getHours(value) : null; const hourNumbers: React.JSX.Element[] = []; @@ -79,13 +79,13 @@ export const getHourNumbers = ({ return hourNumbers; }; -export const getMinutesNumbers = ({ +export const getMinutesNumbers = ({ utils, value, isDisabled, getClockNumberText, selectedId, -}: Omit, 'ampm' | 'value'> & { value: number }) => { +}: Omit & { value: number }) => { const f = utils.formatNumber; return ( diff --git a/packages/x-date-pickers/src/TimeClock/TimeClock.spec.tsx b/packages/x-date-pickers/src/TimeClock/TimeClock.spec.tsx deleted file mode 100644 index d229f7c83b24..000000000000 --- a/packages/x-date-pickers/src/TimeClock/TimeClock.spec.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import * as React from 'react'; -import { TimeClock } from '@mui/x-date-pickers/TimeClock'; - -// External components are generic - view="hours" value={null} onChange={(date) => date?.getDate()} />; diff --git a/packages/x-date-pickers/src/TimeClock/TimeClock.tsx b/packages/x-date-pickers/src/TimeClock/TimeClock.tsx index df5213454067..07e885a20193 100644 --- a/packages/x-date-pickers/src/TimeClock/TimeClock.tsx +++ b/packages/x-date-pickers/src/TimeClock/TimeClock.tsx @@ -51,8 +51,8 @@ const TimeClockArrowSwitcher = styled(PickersArrowSwitcher, { top: 15, }); -type TimeClockComponent = (( - props: TimeClockProps & React.RefAttributes, +type TimeClockComponent = (( + props: TimeClockProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; const TIME_CLOCK_DEFAULT_VIEWS: TimeView[] = ['hours', 'minutes']; @@ -67,11 +67,11 @@ const TIME_CLOCK_DEFAULT_VIEWS: TimeView[] = ['hours', 'minutes']; * * - [TimeClock API](https://mui.com/x/api/date-pickers/time-clock/) */ -export const TimeClock = React.forwardRef(function TimeClock( - inProps: TimeClockProps, +export const TimeClock = React.forwardRef(function TimeClock( + inProps: TimeClockProps, ref: React.Ref, ) { - const utils = useUtils(); + const utils = useUtils(); const props = useThemeProps({ props: inProps, @@ -126,8 +126,8 @@ export const TimeClock = React.forwardRef(function TimeClock(); - const now = useNow(timezone); + const translations = usePickersTranslations(); + const now = useNow(timezone); const { view, setView, previousView, nextView, setValueAndGoToNextView } = useViews({ view: inView, @@ -139,7 +139,7 @@ export const TimeClock = React.forwardRef(function TimeClock( + const { meridiemMode, handleMeridiemChange } = useMeridiemMode( valueOrReferenceDate, ampm, setValueAndGoToNextView, @@ -151,7 +151,13 @@ export const TimeClock = React.forwardRef(function TimeClock { + const containsValidTime = ({ + start, + end, + }: { + start: PickerValidDate; + end: PickerValidDate; + }) => { if (minTime && isAfter(minTime, end)) { return false; } @@ -247,9 +253,7 @@ export const TimeClock = React.forwardRef(function TimeClock, 'onChange' | 'viewValue' | 'children'> - >(() => { + const viewProps = React.useMemo>(() => { switch (view) { case 'hours': { const handleHoursChange = (hourValue: number, isFinish?: PickerSelectionState) => { @@ -289,7 +293,7 @@ export const TimeClock = React.forwardRef(function TimeClock({ + children: getMinutesNumbers({ utils, value: minutesValue, onChange: handleMinutesChange, @@ -353,7 +357,7 @@ export const TimeClock = React.forwardRef(function TimeClock - + - extends ExportedBaseClockProps { +export interface ExportedTimeClockProps extends ExportedBaseClockProps { /** * Display ampm controls under the clock (instead of in the toolbar). * @default false @@ -20,11 +19,9 @@ export interface TimeClockSlots extends PickersArrowSwitcherSlots {} export interface TimeClockSlotProps extends PickersArrowSwitcherSlotProps {} -export interface TimeClockProps< - TDate extends PickerValidDate, - TView extends TimeViewWithMeridiem = TimeView, -> extends ExportedTimeClockProps, - BaseClockProps { +export interface TimeClockProps + extends ExportedTimeClockProps, + BaseClockProps { /** * Available views. * @default ['hours', 'minutes'] diff --git a/packages/x-date-pickers/src/TimeClock/tests/describes.TimeClock.test.tsx b/packages/x-date-pickers/src/TimeClock/tests/describes.TimeClock.test.tsx index dc295643b47c..d7286b18d86b 100644 --- a/packages/x-date-pickers/src/TimeClock/tests/describes.TimeClock.test.tsx +++ b/packages/x-date-pickers/src/TimeClock/tests/describes.TimeClock.test.tsx @@ -51,7 +51,7 @@ describe(' - Describes', () => { } }, setNewValue: (value) => { - const newValue = adapterToUse.addMinutes(adapterToUse.addHours(value, 1), 5); + const newValue = adapterToUse.addMinutes(adapterToUse.addHours(value!, 1), 5); timeClockHandler.setViewValue(adapterToUse, newValue, 'hours'); timeClockHandler.setViewValue(adapterToUse, newValue, 'minutes'); diff --git a/packages/x-date-pickers/src/TimeField/TimeField.tsx b/packages/x-date-pickers/src/TimeField/TimeField.tsx index 6471420f1630..417ad69f94c8 100644 --- a/packages/x-date-pickers/src/TimeField/TimeField.tsx +++ b/packages/x-date-pickers/src/TimeField/TimeField.tsx @@ -10,14 +10,9 @@ import { useTimeField } from './useTimeField'; import { useClearableField } from '../hooks'; import { PickersTextField } from '../PickersTextField'; import { convertFieldResponseIntoMuiTextFieldProps } from '../internals/utils/convertFieldResponseIntoMuiTextFieldProps'; -import { PickerValidDate } from '../models'; -type TimeFieldComponent = (< - TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = true, ->( - props: TimeFieldProps & - React.RefAttributes, +type TimeFieldComponent = (( + props: TimeFieldProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; /** @@ -31,12 +26,8 @@ type TimeFieldComponent = (< * - [TimeField API](https://mui.com/x/api/date-pickers/time-field/) */ const TimeField = React.forwardRef(function TimeField< - TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = true, ->( - inProps: TimeFieldProps, - inRef: React.Ref, -) { +>(inProps: TimeFieldProps, inRef: React.Ref) { const themeProps = useThemeProps({ props: inProps, name: 'MuiTimeField', @@ -57,17 +48,15 @@ const TimeField = React.forwardRef(function TimeField< additionalProps: { ref: inRef, }, - }) as TimeFieldProps; + }) as TimeFieldProps; // TODO: Remove when mui/material-ui#35088 will be merged textFieldProps.inputProps = { ...inputProps, ...textFieldProps.inputProps }; textFieldProps.InputProps = { ...InputProps, ...textFieldProps.InputProps }; - const fieldResponse = useTimeField< - TDate, - TEnableAccessibleFieldDOMStructure, - typeof textFieldProps - >(textFieldProps); + const fieldResponse = useTimeField( + textFieldProps, + ); const convertedFieldResponse = convertFieldResponseIntoMuiTextFieldProps(fieldResponse); const processedFieldProps = useClearableField({ @@ -295,8 +284,7 @@ TimeField.propTypes = { ]), /** * Disable specific time. - * @template TDate - * @param {TDate} value The value to check. + * @param {PickerValidDate} value The value to check. * @param {TimeView} view The clock type of the timeValue. * @returns {boolean} If `true` the time will be disabled. */ diff --git a/packages/x-date-pickers/src/TimeField/TimeField.types.ts b/packages/x-date-pickers/src/TimeField/TimeField.types.ts index 24c340025443..af41f53ee623 100644 --- a/packages/x-date-pickers/src/TimeField/TimeField.types.ts +++ b/packages/x-date-pickers/src/TimeField/TimeField.types.ts @@ -17,33 +17,27 @@ import { import { ExportedValidateTimeProps } from '../validation/validateTime'; import { AmPmProps } from '../internals/models/props/time'; -export interface UseTimeFieldProps< - TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean, -> extends MakeOptional< +export interface UseTimeFieldProps + extends MakeOptional< UseFieldInternalProps< - TDate | null, - TDate, + PickerValidDate | null, FieldSection, TEnableAccessibleFieldDOMStructure, TimeValidationError >, 'format' >, - ExportedValidateTimeProps, + ExportedValidateTimeProps, ExportedUseClearableFieldProps, AmPmProps {} -export type TimeFieldProps< - TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = true, -> = +export type TimeFieldProps = // The hook props - UseTimeFieldProps & + UseTimeFieldProps & // The TextField props Omit< BuiltInFieldTextFieldProps, - keyof UseTimeFieldProps + keyof UseTimeFieldProps > & { /** * Overridable component slots. @@ -54,13 +48,11 @@ export type TimeFieldProps< * The props used for each component slot. * @default {} */ - slotProps?: TimeFieldSlotProps; + slotProps?: TimeFieldSlotProps; }; -export type TimeFieldOwnerState< - TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean, -> = TimeFieldProps; +export type TimeFieldOwnerState = + TimeFieldProps; export interface TimeFieldSlots extends UseClearableFieldSlots { /** @@ -70,13 +62,11 @@ export interface TimeFieldSlots extends UseClearableFieldSlots { textField?: React.ElementType; } -export interface TimeFieldSlotProps< - TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean, -> extends UseClearableFieldSlotProps { +export interface TimeFieldSlotProps + extends UseClearableFieldSlotProps { textField?: SlotComponentProps< typeof TextField, {}, - TimeFieldOwnerState + TimeFieldOwnerState >; } diff --git a/packages/x-date-pickers/src/TimeField/tests/describes.TimeField.test.tsx b/packages/x-date-pickers/src/TimeField/tests/describes.TimeField.test.tsx index 88f95a134af9..35b9339620ac 100644 --- a/packages/x-date-pickers/src/TimeField/tests/describes.TimeField.test.tsx +++ b/packages/x-date-pickers/src/TimeField/tests/describes.TimeField.test.tsx @@ -51,7 +51,7 @@ describe(' - Describes', () => { expectFieldValueV7(fieldRoot, expectedValueStr); }, setNewValue: (value, { selectSection, pressKey }) => { - const newValue = adapterToUse.addHours(value, 1); + const newValue = adapterToUse.addHours(value!, 1); selectSection('hours'); pressKey(undefined, 'ArrowUp'); diff --git a/packages/x-date-pickers/src/TimeField/useTimeField.ts b/packages/x-date-pickers/src/TimeField/useTimeField.ts index 5e7e72998e26..5ec3eba335b5 100644 --- a/packages/x-date-pickers/src/TimeField/useTimeField.ts +++ b/packages/x-date-pickers/src/TimeField/useTimeField.ts @@ -11,23 +11,20 @@ import { PickerValidDate, FieldSection } from '../models'; import { useDefaultizedTimeField } from '../internals/hooks/defaultizedFieldProps'; export const useTimeField = < - TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean, - TAllProps extends UseTimeFieldProps, + TAllProps extends UseTimeFieldProps, >( inProps: TAllProps, ) => { const props = useDefaultizedTimeField< - TDate, - UseTimeFieldProps, + UseTimeFieldProps, TAllProps >(inProps); const { forwardedProps, internalProps } = useSplitFieldProps(props, 'time'); return useField< - TDate | null, - TDate, + PickerValidDate | null, FieldSection, TEnableAccessibleFieldDOMStructure, typeof forwardedProps, diff --git a/packages/x-date-pickers/src/TimePicker/TimePicker.tsx b/packages/x-date-pickers/src/TimePicker/TimePicker.tsx index 30fcfd7e9ebc..090d3c50b962 100644 --- a/packages/x-date-pickers/src/TimePicker/TimePicker.tsx +++ b/packages/x-date-pickers/src/TimePicker/TimePicker.tsx @@ -8,14 +8,9 @@ import { DesktopTimePicker } from '../DesktopTimePicker'; import { MobileTimePicker, MobileTimePickerProps } from '../MobileTimePicker'; import { TimePickerProps } from './TimePicker.types'; import { DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from '../internals/utils/utils'; -import { PickerValidDate } from '../models'; -type TimePickerComponent = (< - TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = true, ->( - props: TimePickerProps & - React.RefAttributes, +type TimePickerComponent = (( + props: TimePickerProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; /** @@ -29,12 +24,8 @@ type TimePickerComponent = (< * - [TimePicker API](https://mui.com/x/api/date-pickers/time-picker/) */ const TimePicker = React.forwardRef(function TimePicker< - TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = true, ->( - inProps: TimePickerProps, - ref: React.Ref, -) { +>(inProps: TimePickerProps, ref: React.Ref) { const props = useThemeProps({ props: inProps, name: 'MuiTimePicker' }); const { desktopModeMediaQuery = DEFAULT_DESKTOP_MODE_MEDIA_QUERY, ...other } = props; @@ -46,7 +37,7 @@ const TimePicker = React.forwardRef(function TimePicker< return ; } - return )} />; + return ; }) as TimePickerComponent; TimePicker.propTypes = { @@ -259,8 +250,7 @@ TimePicker.propTypes = { ]), /** * Disable specific time. - * @template TDate - * @param {TDate} value The value to check. + * @param {PickerValidDate} value The value to check. * @param {TimeView} view The clock type of the timeValue. * @returns {boolean} If `true` the time will be disabled. */ diff --git a/packages/x-date-pickers/src/TimePicker/TimePicker.types.ts b/packages/x-date-pickers/src/TimePicker/TimePicker.types.ts index 057f5ecda86d..4a22286b2b10 100644 --- a/packages/x-date-pickers/src/TimePicker/TimePicker.types.ts +++ b/packages/x-date-pickers/src/TimePicker/TimePicker.types.ts @@ -19,24 +19,17 @@ import { } from '../models'; import { UseTimeFieldProps } from '../TimeField'; -export interface TimePickerSlots - extends DesktopTimePickerSlots, - MobileTimePickerSlots {} +export interface TimePickerSlots + extends DesktopTimePickerSlots, + MobileTimePickerSlots {} -export interface TimePickerSlotProps< - TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean, -> extends DesktopTimePickerSlotProps, - MobileTimePickerSlotProps {} +export interface TimePickerSlotProps + extends DesktopTimePickerSlotProps, + MobileTimePickerSlotProps {} -export interface TimePickerProps< - TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = true, -> extends DesktopTimePickerProps, - Omit< - MobileTimePickerProps, - 'views' - > { +export interface TimePickerProps + extends DesktopTimePickerProps, + Omit, 'views'> { /** * CSS media query when `Mobile` mode will be changed to `Desktop`. * @default '@media (pointer: fine)' @@ -47,23 +40,21 @@ export interface TimePickerProps< * Overridable component slots. * @default {} */ - slots?: TimePickerSlots; + slots?: TimePickerSlots; /** * The props used for each component slot. * @default {} */ - slotProps?: TimePickerSlotProps; + slotProps?: TimePickerSlotProps; } /** * Props the field can receive when used inside a time picker. * (`TimePicker`, `DesktopTimePicker` or `MobileTimePicker` component). */ -export type TimePickerFieldProps< - TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = true, -> = MakeRequired< - UseTimeFieldProps, - 'format' | 'timezone' | 'value' | 'ampm' | keyof BaseTimeValidationProps -> & - BaseSingleInputFieldProps; +export type TimePickerFieldProps = + MakeRequired< + UseTimeFieldProps, + 'format' | 'timezone' | 'value' | 'ampm' | keyof BaseTimeValidationProps + > & + BaseSingleInputFieldProps; diff --git a/packages/x-date-pickers/src/TimePicker/TimePickerToolbar.tsx b/packages/x-date-pickers/src/TimePicker/TimePickerToolbar.tsx index da6d7ae1d88a..bd5f40f736b8 100644 --- a/packages/x-date-pickers/src/TimePicker/TimePickerToolbar.tsx +++ b/packages/x-date-pickers/src/TimePicker/TimePickerToolbar.tsx @@ -22,15 +22,14 @@ import { TimeViewWithMeridiem } from '../internals/models'; import { formatMeridiem } from '../internals/utils/date-utils'; import { PickerValidDate } from '../models'; -export interface TimePickerToolbarProps - extends BaseToolbarProps, +export interface TimePickerToolbarProps + extends BaseToolbarProps, ExportedTimePickerToolbarProps { ampm?: boolean; ampmInClock?: boolean; } -interface TimePickerToolbarOwnerState - extends TimePickerToolbarProps { +interface TimePickerToolbarOwnerState extends TimePickerToolbarProps { isRtl: boolean; } @@ -41,7 +40,7 @@ export interface ExportedTimePickerToolbarProps extends ExportedBaseToolbarProps classes?: Partial; } -const useUtilityClasses = (ownerState: TimePickerToolbarOwnerState) => { +const useUtilityClasses = (ownerState: TimePickerToolbarOwnerState) => { const { isLandscape, classes, isRtl } = ownerState; const slots = { @@ -64,7 +63,7 @@ const TimePickerToolbarRoot = styled(PickersToolbar, { slot: 'Root', overridesResolver: (props, styles) => styles.root, })<{ - ownerState: TimePickerToolbarProps; + ownerState: TimePickerToolbarProps; }>({}); const TimePickerToolbarSeparator = styled(PickersToolbarText, { @@ -88,7 +87,7 @@ const TimePickerToolbarHourMinuteLabel = styled('div', { styles.hourMinuteLabel, ], })<{ - ownerState: TimePickerToolbarOwnerState; + ownerState: TimePickerToolbarOwnerState; }>({ display: 'flex', justifyContent: 'flex-end', @@ -118,7 +117,7 @@ const TimePickerToolbarAmPmSelection = styled('div', { styles.ampmSelection, ], })<{ - ownerState: TimePickerToolbarProps; + ownerState: TimePickerToolbarProps; }>({ display: 'flex', flexDirection: 'column', @@ -150,7 +149,7 @@ const TimePickerToolbarAmPmSelection = styled('div', { * * - [TimePickerToolbar API](https://mui.com/x/api/date-pickers/time-picker-toolbar/) */ -function TimePickerToolbar(inProps: TimePickerToolbarProps) { +function TimePickerToolbar(inProps: TimePickerToolbarProps) { const props = useThemeProps({ props: inProps, name: 'MuiTimePickerToolbar' }); const { ampm, @@ -166,17 +165,17 @@ function TimePickerToolbar(inProps: TimePickerToo className, ...other } = props; - const utils = useUtils(); - const translations = usePickersTranslations(); + const utils = useUtils(); + const translations = usePickersTranslations(); const isRtl = useRtl(); const showAmPmControl = Boolean(ampm && !ampmInClock && views.includes('hours')); const { meridiemMode, handleMeridiemChange } = useMeridiemMode(value, ampm, onChange); - const formatHours = (time: TDate) => + const formatHours = (time: PickerValidDate) => ampm ? utils.format(time, 'hours12h') : utils.format(time, 'hours24h'); - const ownerState: TimePickerToolbarOwnerState = { ...props, isRtl }; + const ownerState: TimePickerToolbarOwnerState = { ...props, isRtl }; const classes = useUtilityClasses(ownerState); const separator = ( diff --git a/packages/x-date-pickers/src/TimePicker/shared.tsx b/packages/x-date-pickers/src/TimePicker/shared.tsx index ddb97440a9c9..e5a9a8368f29 100644 --- a/packages/x-date-pickers/src/TimePicker/shared.tsx +++ b/packages/x-date-pickers/src/TimePicker/shared.tsx @@ -18,12 +18,12 @@ import { applyDefaultViewProps } from '../internals/utils/views'; import { BaseClockProps, ExportedBaseClockProps } from '../internals/models/props/time'; import { TimeViewWithMeridiem } from '../internals/models'; -export interface BaseTimePickerSlots extends TimeClockSlots { +export interface BaseTimePickerSlots extends TimeClockSlots { /** * Custom component for the toolbar rendered above the views. * @default TimePickerToolbar */ - toolbar?: React.JSXElementConstructor>; + toolbar?: React.JSXElementConstructor; } export interface BaseTimePickerSlotProps extends TimeClockSlotProps { @@ -31,21 +31,18 @@ export interface BaseTimePickerSlotProps extends TimeClockSlotProps { } export type TimePickerViewRenderers< - TDate extends PickerValidDate, TView extends TimeViewWithMeridiem, TAdditionalProps extends {} = {}, > = PickerViewRendererLookup< - TDate | null, + PickerValidDate | null, TView, - TimeViewRendererProps>, + TimeViewRendererProps>, TAdditionalProps >; -export interface BaseTimePickerProps< - TDate extends PickerValidDate, - TView extends TimeViewWithMeridiem, -> extends BasePickerInputProps, - ExportedBaseClockProps { +export interface BaseTimePickerProps + extends BasePickerInputProps, + ExportedBaseClockProps { /** * Display ampm controls under the clock (instead of in the toolbar). * @default true on desktop, false on mobile @@ -55,7 +52,7 @@ export interface BaseTimePickerProps< * Overridable component slots. * @default {} */ - slots?: BaseTimePickerSlots; + slots?: BaseTimePickerSlots; /** * The props used for each component slot. * @default {} @@ -66,23 +63,21 @@ export interface BaseTimePickerProps< * If `null`, the section will only have field editing. * If `undefined`, internally defined view will be used. */ - viewRenderers?: Partial>; + viewRenderers?: Partial>; } type UseTimePickerDefaultizedProps< - TDate extends PickerValidDate, TView extends TimeViewWithMeridiem, - Props extends BaseTimePickerProps, + Props extends BaseTimePickerProps, > = LocalizedComponent< DefaultizedProps >; export function useTimePickerDefaultizedProps< - TDate extends PickerValidDate, TView extends TimeViewWithMeridiem, - Props extends BaseTimePickerProps, ->(props: Props, name: string): UseTimePickerDefaultizedProps { - const utils = useUtils(); + Props extends BaseTimePickerProps, +>(props: Props, name: string): UseTimePickerDefaultizedProps { + const utils = useUtils(); const themeProps = useThemeProps({ props, name, diff --git a/packages/x-date-pickers/src/YearCalendar/YearCalendar.tsx b/packages/x-date-pickers/src/YearCalendar/YearCalendar.tsx index 776049639c34..72cc8c460cde 100644 --- a/packages/x-date-pickers/src/YearCalendar/YearCalendar.tsx +++ b/packages/x-date-pickers/src/YearCalendar/YearCalendar.tsx @@ -22,7 +22,7 @@ import { useControlledValueWithTimezone } from '../internals/hooks/useValueWithT import { DIALOG_WIDTH, MAX_CALENDAR_HEIGHT } from '../internals/constants/dimensions'; import { PickerValidDate } from '../models'; -const useUtilityClasses = (ownerState: YearCalendarProps) => { +const useUtilityClasses = (ownerState: YearCalendarProps) => { const { classes } = ownerState; const slots = { @@ -32,15 +32,15 @@ const useUtilityClasses = (ownerState: YearCalendarProps) => { return composeClasses(slots, getYearCalendarUtilityClass, classes); }; -function useYearCalendarDefaultizedProps( - props: YearCalendarProps, +function useYearCalendarDefaultizedProps( + props: YearCalendarProps, name: string, ): DefaultizedProps< - YearCalendarProps, + YearCalendarProps, 'minDate' | 'maxDate' | 'disableFuture' | 'disablePast' | 'yearsPerRow' > { - const utils = useUtils(); - const defaultDates = useDefaultDates(); + const utils = useUtils(); + const defaultDates = useDefaultDates(); const themeProps = useThemeProps({ props, name, @@ -60,7 +60,7 @@ const YearCalendarRoot = styled('div', { name: 'MuiYearCalendar', slot: 'Root', overridesResolver: (props, styles) => styles.root, -})<{ ownerState: YearCalendarProps }>({ +})<{ ownerState: YearCalendarProps }>({ display: 'flex', flexDirection: 'row', flexWrap: 'wrap', @@ -74,9 +74,7 @@ const YearCalendarRoot = styled('div', { position: 'relative', }); -type YearCalendarComponent = (( - props: YearCalendarProps, -) => React.JSX.Element) & { +type YearCalendarComponent = ((props: YearCalendarProps) => React.JSX.Element) & { propTypes?: any; }; @@ -89,8 +87,8 @@ type YearCalendarComponent = (( * * - [YearCalendar API](https://mui.com/x/api/date-pickers/year-calendar/) */ -export const YearCalendar = React.forwardRef(function YearCalendar( - inProps: YearCalendarProps, +export const YearCalendar = React.forwardRef(function YearCalendar( + inProps: YearCalendarProps, ref: React.Ref, ) { const props = useYearCalendarDefaultizedProps(inProps, 'MuiYearCalendar'); @@ -126,13 +124,13 @@ export const YearCalendar = React.forwardRef(function YearCalendar void, + onChange, valueManager: singleItemValueManager, }); - const now = useNow(timezone); + const now = useNow(timezone); const isRtl = useRtl(); - const utils = useUtils(); + const utils = useUtils(); const referenceDate = React.useMemo( () => @@ -178,7 +176,7 @@ export const YearCalendar = React.forwardRef(function YearCalendar { + (dateToValidate: PickerValidDate) => { if (disablePast && utils.isBeforeYear(dateToValidate, now)) { return true; } @@ -383,8 +381,7 @@ YearCalendar.propTypes = { minDate: PropTypes.object, /** * Callback fired when the value changes. - * @template TDate - * @param {TDate} value The new value. + * @param {PickerValidDate} value The new value. */ onChange: PropTypes.func, onFocusedViewChange: PropTypes.func, @@ -400,8 +397,7 @@ YearCalendar.propTypes = { referenceDate: PropTypes.object, /** * Disable specific year. - * @template TDate - * @param {TDate} year The year to test. + * @param {PickerValidDate} year The year to test. * @returns {boolean} If `true`, the year will be disabled. */ shouldDisableYear: PropTypes.func, diff --git a/packages/x-date-pickers/src/YearCalendar/YearCalendar.types.ts b/packages/x-date-pickers/src/YearCalendar/YearCalendar.types.ts index 9a0879ba4b6f..4e7ec216856c 100644 --- a/packages/x-date-pickers/src/YearCalendar/YearCalendar.types.ts +++ b/packages/x-date-pickers/src/YearCalendar/YearCalendar.types.ts @@ -37,10 +37,10 @@ export interface ExportedYearCalendarProps { yearsPerRow?: 3 | 4; } -export interface YearCalendarProps +export interface YearCalendarProps extends ExportedYearCalendarProps, - YearValidationProps, - BaseDateValidationProps, + YearValidationProps, + BaseDateValidationProps, TimezoneProps { autoFocus?: boolean; className?: string; @@ -68,23 +68,22 @@ export interface YearCalendarProps * The selected value. * Used when the component is controlled. */ - value?: TDate | null; + value?: PickerValidDate | null; /** * The default selected value. * Used when the component is not controlled. */ - defaultValue?: TDate | null; + defaultValue?: PickerValidDate | null; /** * The date used to generate the new value when both `value` and `defaultValue` are empty. * @default The closest valid year using the validation props, except callbacks such as `shouldDisableYear`. */ - referenceDate?: TDate; + referenceDate?: PickerValidDate; /** * Callback fired when the value changes. - * @template TDate - * @param {TDate} value The new value. + * @param {PickerValidDate} value The new value. */ - onChange?: (value: TDate) => void; + onChange?: (value: PickerValidDate) => void; /** If `true` picker is readonly */ readOnly?: boolean; /** diff --git a/packages/x-date-pickers/src/YearCalendar/tests/describes.YearCalendar.test.tsx b/packages/x-date-pickers/src/YearCalendar/tests/describes.YearCalendar.test.tsx index 06c4de6035f4..a779c25c2194 100644 --- a/packages/x-date-pickers/src/YearCalendar/tests/describes.YearCalendar.test.tsx +++ b/packages/x-date-pickers/src/YearCalendar/tests/describes.YearCalendar.test.tsx @@ -50,7 +50,7 @@ describe(' - Describes', () => { } }, setNewValue: (value) => { - const newValue = adapterToUse.addYears(value, 1); + const newValue = adapterToUse.addYears(value!, 1); fireEvent.click( screen.getByRole('radio', { name: adapterToUse.getYear(newValue).toString() }), ); diff --git a/packages/x-date-pickers/src/dateViewRenderers/dateViewRenderers.tsx b/packages/x-date-pickers/src/dateViewRenderers/dateViewRenderers.tsx index 30d7376df088..489ea7401e77 100644 --- a/packages/x-date-pickers/src/dateViewRenderers/dateViewRenderers.tsx +++ b/packages/x-date-pickers/src/dateViewRenderers/dateViewRenderers.tsx @@ -1,23 +1,18 @@ import * as React from 'react'; import { DateCalendar, DateCalendarProps } from '../DateCalendar'; -import { DateView, PickerValidDate } from '../models'; +import { DateView } from '../models'; import { DateOrTimeViewWithMeridiem } from '../internals/models'; import { isDatePickerView } from '../internals/utils/date-utils'; -export interface DateViewRendererProps< - TDate extends PickerValidDate, - TView extends DateOrTimeViewWithMeridiem, -> extends Omit< - DateCalendarProps, - 'views' | 'openTo' | 'view' | 'onViewChange' | 'focusedView' - > { +export interface DateViewRendererProps + extends Omit { view: TView; onViewChange?: (view: TView) => void; views: readonly TView[]; focusedView: TView | null; } -export const renderDateViewCalendar = ({ +export const renderDateViewCalendar = ({ view, onViewChange, views, @@ -56,7 +51,7 @@ export const renderDateViewCalendar = ({ fixedWeekNumber, displayWeekNumber, timezone, -}: DateViewRendererProps) => ( +}: DateViewRendererProps) => ( , + UseFieldInternalProps, 'format' | 'formatDensity' | 'shouldRespectLeadingZeros' > {} @@ -23,13 +22,11 @@ interface UseParsedFormatParameters * @param {boolean} params.shouldRespectLeadingZeros If `true`, the format will respect the leading zeroes, if `false`, the format will always add leading zeroes. * @returns */ -export const useParsedFormat = ( - parameters: UseParsedFormatParameters, -) => { +export const useParsedFormat = (parameters: UseParsedFormatParameters) => { const { format, formatDensity = 'dense', shouldRespectLeadingZeros = false } = parameters; - const utils = useUtils(); + const utils = useUtils(); const isRtl = useRtl(); - const translations = usePickersTranslations(); + const translations = usePickersTranslations(); const localizedDigits = React.useMemo(() => getLocalizedDigits(utils), [utils]); return React.useMemo(() => { diff --git a/packages/x-date-pickers/src/hooks/usePickersTranslations.ts b/packages/x-date-pickers/src/hooks/usePickersTranslations.ts index e6acceff1df0..02c0e6399d6b 100644 --- a/packages/x-date-pickers/src/hooks/usePickersTranslations.ts +++ b/packages/x-date-pickers/src/hooks/usePickersTranslations.ts @@ -1,6 +1,4 @@ 'use client'; -import { PickerValidDate } from '../models'; import { useLocalizationContext } from '../internals/hooks/useUtils'; -export const usePickersTranslations = () => - useLocalizationContext().localeText; +export const usePickersTranslations = () => useLocalizationContext().localeText; diff --git a/packages/x-date-pickers/src/internals/hooks/date-helpers-hooks.tsx b/packages/x-date-pickers/src/internals/hooks/date-helpers-hooks.tsx index 7fcdcba1b2c9..74b280b9e42c 100644 --- a/packages/x-date-pickers/src/internals/hooks/date-helpers-hooks.tsx +++ b/packages/x-date-pickers/src/internals/hooks/date-helpers-hooks.tsx @@ -5,23 +5,23 @@ import { getMeridiem, convertToMeridiem } from '../utils/time-utils'; import { PickerSelectionState } from './usePicker'; import { PickersTimezone, PickerValidDate } from '../../models'; -export interface MonthValidationOptions { +export interface MonthValidationOptions { disablePast?: boolean; disableFuture?: boolean; - minDate: TDate; - maxDate: TDate; + minDate: PickerValidDate; + maxDate: PickerValidDate; timezone: PickersTimezone; } -export function useNextMonthDisabled( - month: TDate, +export function useNextMonthDisabled( + month: PickerValidDate, { disableFuture, maxDate, timezone, - }: Pick, 'disableFuture' | 'maxDate' | 'timezone'>, + }: Pick, ) { - const utils = useUtils(); + const utils = useUtils(); return React.useMemo(() => { const now = utils.date(undefined, timezone); const lastEnabledMonth = utils.startOfMonth( @@ -31,15 +31,15 @@ export function useNextMonthDisabled( }, [disableFuture, maxDate, month, utils, timezone]); } -export function usePreviousMonthDisabled( - month: TDate, +export function usePreviousMonthDisabled( + month: PickerValidDate, { disablePast, minDate, timezone, - }: Pick, 'disablePast' | 'minDate' | 'timezone'>, + }: Pick, ) { - const utils = useUtils(); + const utils = useUtils(); return React.useMemo(() => { const now = utils.date(undefined, timezone); @@ -50,19 +50,19 @@ export function usePreviousMonthDisabled( }, [disablePast, minDate, month, utils, timezone]); } -export function useMeridiemMode( - date: TDate | null, +export function useMeridiemMode( + date: PickerValidDate | null, ampm: boolean | undefined, - onChange: PickerOnChangeFn, + onChange: PickerOnChangeFn, selectionState?: PickerSelectionState, ) { - const utils = useUtils(); + const utils = useUtils(); const meridiemMode = getMeridiem(date, utils); const handleMeridiemChange = React.useCallback( (mode: 'am' | 'pm') => { const timeWithMeridiem = - date == null ? null : convertToMeridiem(date, mode, Boolean(ampm), utils); + date == null ? null : convertToMeridiem(date, mode, Boolean(ampm), utils); onChange(timeWithMeridiem, selectionState ?? 'partial'); }, [ampm, date, onChange, selectionState, utils], diff --git a/packages/x-date-pickers/src/internals/hooks/defaultizedFieldProps.ts b/packages/x-date-pickers/src/internals/hooks/defaultizedFieldProps.ts index 93bfee7e576f..9a68e75919d4 100644 --- a/packages/x-date-pickers/src/internals/hooks/defaultizedFieldProps.ts +++ b/packages/x-date-pickers/src/internals/hooks/defaultizedFieldProps.ts @@ -7,22 +7,19 @@ import { DateTimeValidationProps, TimeValidationProps, } from '../models/validation'; -import { PickerValidDate } from '../../models'; -export interface UseDefaultizedDateFieldBaseProps - extends BaseDateValidationProps { +export interface UseDefaultizedDateFieldBaseProps extends BaseDateValidationProps { format?: string; } export const useDefaultizedDateField = < - TDate extends PickerValidDate, - TKnownProps extends UseDefaultizedDateFieldBaseProps, + TKnownProps extends UseDefaultizedDateFieldBaseProps, TAllProps extends {}, >( props: TKnownProps & TAllProps, -): TAllProps & DefaultizedProps> => { - const utils = useUtils(); - const defaultDates = useDefaultDates(); +): TAllProps & DefaultizedProps => { + const utils = useUtils(); + const defaultDates = useDefaultDates(); return { ...props, @@ -39,13 +36,12 @@ export interface UseDefaultizedTimeFieldBaseProps extends BaseTimeValidationProp } export const useDefaultizedTimeField = < - TDate extends PickerValidDate, TKnownProps extends UseDefaultizedTimeFieldBaseProps & { ampm?: boolean }, TAllProps extends {}, >( props: TKnownProps & TAllProps, ): TAllProps & DefaultizedProps => { - const utils = useUtils(); + const utils = useUtils(); const ampm = props.ampm ?? utils.is12HourCycleInCurrentLocale(); const defaultFormat = ampm ? utils.formats.fullTime12h : utils.formats.fullTime24h; @@ -58,23 +54,22 @@ export const useDefaultizedTimeField = < }; }; -export interface UseDefaultizedDateTimeFieldBaseProps - extends BaseDateValidationProps, +export interface UseDefaultizedDateTimeFieldBaseProps + extends BaseDateValidationProps, BaseTimeValidationProps { format?: string; } export const useDefaultizedDateTimeField = < - TDate extends PickerValidDate, - TKnownProps extends UseDefaultizedDateTimeFieldBaseProps & - DateTimeValidationProps & - TimeValidationProps & { ampm?: boolean }, + TKnownProps extends UseDefaultizedDateTimeFieldBaseProps & + DateTimeValidationProps & + TimeValidationProps & { ampm?: boolean }, TAllProps extends {}, >( props: TKnownProps & TAllProps, -): TAllProps & DefaultizedProps> => { - const utils = useUtils(); - const defaultDates = useDefaultDates(); +): TAllProps & DefaultizedProps => { + const utils = useUtils(); + const defaultDates = useDefaultDates(); const ampm = props.ampm ?? utils.is12HourCycleInCurrentLocale(); const defaultFormat = ampm diff --git a/packages/x-date-pickers/src/internals/hooks/useClockReferenceDate.ts b/packages/x-date-pickers/src/internals/hooks/useClockReferenceDate.ts index 03afe046d50c..cef4af021371 100644 --- a/packages/x-date-pickers/src/internals/hooks/useClockReferenceDate.ts +++ b/packages/x-date-pickers/src/internals/hooks/useClockReferenceDate.ts @@ -4,19 +4,19 @@ import { singleItemValueManager } from '../utils/valueManagers'; import { getTodayDate } from '../utils/date-utils'; import { SECTION_TYPE_GRANULARITY } from '../utils/getDefaultReferenceDate'; -export const useClockReferenceDate = ({ +export const useClockReferenceDate = ({ value, referenceDate: referenceDateProp, utils, props, timezone, }: { - value: TDate; - referenceDate: TDate | undefined; - utils: MuiPickersAdapter; + value: PickerValidDate; + referenceDate: PickerValidDate | undefined; + utils: MuiPickersAdapter; props: TProps; timezone: PickersTimezone; -}) => { +}): PickerValidDate => { const referenceDate = React.useMemo( () => singleItemValueManager.getInitialReferenceValue({ diff --git a/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.tsx b/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.tsx index c564adee2636..9158434b71af 100644 --- a/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.tsx +++ b/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.tsx @@ -30,11 +30,9 @@ import { PickersProvider } from '../../components/PickersProvider'; * - DesktopTimePicker */ export const useDesktopPicker = < - TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseDesktopPickerProps< - TDate, TView, TEnableAccessibleFieldDOMStructure, any, @@ -44,7 +42,7 @@ export const useDesktopPicker = < props, getOpenDialogAriaText, ...pickerParams -}: UseDesktopPickerParams) => { +}: UseDesktopPickerParams) => { const { slots, slotProps: innerSlotProps, @@ -82,7 +80,7 @@ export const useDesktopPicker = < shouldRestoreFocus, fieldProps: pickerFieldProps, ownerState, - } = usePicker({ + } = usePicker({ ...pickerParams, props, fieldRef, @@ -125,11 +123,10 @@ export const useDesktopPicker = < const Field = slots.field; const fieldProps = useSlotProps< typeof Field, - UseDesktopPickerSlotProps['field'], + UseDesktopPickerSlotProps['field'], Partial< BaseSingleInputFieldProps< - TDate | null, - TDate, + PickerValidDate | null, FieldSection, TEnableAccessibleFieldDOMStructure, InferError diff --git a/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.types.ts b/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.types.ts index b126bf5135ed..3e207b42029a 100644 --- a/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.types.ts +++ b/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.types.ts @@ -30,14 +30,12 @@ import { UseClearableFieldSlotProps, } from '../../../hooks/useClearableField'; -export interface UseDesktopPickerSlots< - TDate extends PickerValidDate, - TView extends DateOrTimeViewWithMeridiem, -> extends Pick< +export interface UseDesktopPickerSlots + extends Pick< PickersPopperSlots, 'desktopPaper' | 'desktopTransition' | 'desktopTrapFocus' | 'popper' >, - ExportedPickersLayoutSlots, + ExportedPickersLayoutSlots, UseClearableFieldSlots { /** * Component used to enter the date with the keyboard. @@ -65,23 +63,20 @@ export interface UseDesktopPickerSlots< } export interface UseDesktopPickerSlotProps< - TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, -> extends ExportedUseDesktopPickerSlotProps, - Pick, 'toolbar'> {} +> extends ExportedUseDesktopPickerSlotProps, + Pick, 'toolbar'> {} export interface ExportedUseDesktopPickerSlotProps< - TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, > extends PickersPopperSlotProps, - ExportedPickersLayoutSlotProps, + ExportedPickersLayoutSlotProps, UseClearableFieldSlotProps { field?: SlotComponentPropsFromProps< BaseSingleInputFieldProps< - TDate | null, - TDate, + PickerValidDate | null, FieldSection, TEnableAccessibleFieldDOMStructure, unknown @@ -108,40 +103,37 @@ export interface DesktopOnlyPickerProps } export interface UseDesktopPickerProps< - TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError, - TExternalProps extends UsePickerViewsProps, -> extends BasePickerProps, + TExternalProps extends UsePickerViewsProps, +> extends BasePickerProps, DesktopOnlyPickerProps { /** * Overridable component slots. * @default {} */ - slots: UseDesktopPickerSlots; + slots: UseDesktopPickerSlots; /** * The props used for each component slot. * @default {} */ - slotProps?: UseDesktopPickerSlotProps; + slotProps?: UseDesktopPickerSlotProps; } export interface UseDesktopPickerParams< - TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseDesktopPickerProps< - TDate, TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps >, > extends Pick< - UsePickerParams, + UsePickerParams, 'valueManager' | 'valueType' | 'validator' | 'rendererInterceptor' > { props: TExternalProps; - getOpenDialogAriaText: (date: TDate | null) => string; + getOpenDialogAriaText: (date: PickerValidDate | null) => string; } diff --git a/packages/x-date-pickers/src/internals/hooks/useField/buildSectionsFromFormat.ts b/packages/x-date-pickers/src/internals/hooks/useField/buildSectionsFromFormat.ts index 41133f171e69..c65f83ee46a2 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/buildSectionsFromFormat.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/buildSectionsFromFormat.ts @@ -8,24 +8,21 @@ import { removeLocalizedDigits, } from './useField.utils'; -interface BuildSectionsFromFormatParams { - utils: MuiPickersAdapter; +interface BuildSectionsFromFormatParams { + utils: MuiPickersAdapter; format: string; formatDensity: 'dense' | 'spacious'; isRtl: boolean; shouldRespectLeadingZeros: boolean; localeText: PickersLocaleText; localizedDigits: string[]; - date: TDate | null; + date: PickerValidDate | null; enableAccessibleFieldDOMStructure: boolean; } type FormatEscapedParts = { start: number; end: number }[]; -const expandFormat = ({ - utils, - format, -}: BuildSectionsFromFormatParams) => { +const expandFormat = ({ utils, format }: BuildSectionsFromFormatParams) => { // Expand the provided format let formatExpansionOverflow = 10; let prevFormat = format; @@ -44,10 +41,10 @@ const expandFormat = ({ return nextFormat; }; -const getEscapedPartsFromFormat = ({ +const getEscapedPartsFromFormat = ({ utils, expandedFormat, -}: BuildSectionsFromFormatParams & { expandedFormat: string }) => { +}: BuildSectionsFromFormatParams & { expandedFormat: string }) => { const escapedParts: FormatEscapedParts = []; const { start: startChar, end: endChar } = utils.escapedCharacters; const regExp = new RegExp(`(\\${startChar}[^\\${endChar}]*\\${endChar})+`, 'g'); @@ -61,8 +58,8 @@ const getEscapedPartsFromFormat = ({ return escapedParts; }; -const getSectionPlaceholder = ( - utils: MuiPickersAdapter, +const getSectionPlaceholder = ( + utils: MuiPickersAdapter, localeText: PickersLocaleText, sectionConfig: Pick, sectionFormat: string, @@ -115,7 +112,7 @@ const getSectionPlaceholder = ( } }; -const createSection = ({ +const createSection = ({ utils, date, shouldRespectLeadingZeros, @@ -124,8 +121,8 @@ const createSection = ({ now, token, startSeparator, -}: BuildSectionsFromFormatParams & { - now: TDate; +}: BuildSectionsFromFormatParams & { + now: PickerValidDate; token: string; startSeparator: string; }): FieldSection => { @@ -186,8 +183,8 @@ const createSection = ({ }; }; -const buildSections = ( - params: BuildSectionsFromFormatParams & { +const buildSections = ( + params: BuildSectionsFromFormatParams & { expandedFormat: string; escapedParts: FormatEscapedParts; }, @@ -273,11 +270,11 @@ const buildSections = ( return sections; }; -const postProcessSections = ({ +const postProcessSections = ({ isRtl, formatDensity, sections, -}: BuildSectionsFromFormatParams & { +}: BuildSectionsFromFormatParams & { sections: FieldSection[]; }) => { return sections.map((section) => { @@ -301,9 +298,7 @@ const postProcessSections = ({ }); }; -export const buildSectionsFromFormat = ( - params: BuildSectionsFromFormatParams, -) => { +export const buildSectionsFromFormat = (params: BuildSectionsFromFormatParams) => { let expandedFormat = expandFormat(params); if (params.isRtl && params.enableAccessibleFieldDOMStructure) { expandedFormat = expandedFormat.split(' ').reverse().join(' '); diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useField.ts b/packages/x-date-pickers/src/internals/hooks/useField/useField.ts index 6fb6529b949e..d12d5263f6b0 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useField.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useField.ts @@ -17,19 +17,17 @@ import { import { adjustSectionValue, getSectionOrder } from './useField.utils'; import { useFieldState } from './useFieldState'; import { useFieldCharacterEditing } from './useFieldCharacterEditing'; -import { PickerValidDate, FieldSection } from '../../../models'; +import { FieldSection } from '../../../models'; import { useFieldV7TextField } from './useFieldV7TextField'; import { useFieldV6TextField } from './useFieldV6TextField'; export const useField = < TValue, - TDate extends PickerValidDate, TSection extends FieldSection, TEnableAccessibleFieldDOMStructure extends boolean, TForwardedProps extends UseFieldCommonForwardedProps & UseFieldForwardedProps, TInternalProps extends UseFieldInternalProps< - any, any, any, TEnableAccessibleFieldDOMStructure, @@ -40,14 +38,13 @@ export const useField = < >( params: UseFieldParams< TValue, - TDate, TSection, TEnableAccessibleFieldDOMStructure, TForwardedProps, TInternalProps >, ): UseFieldResponse => { - const utils = useUtils(); + const utils = useUtils(); const { internalProps, @@ -81,7 +78,7 @@ export const useField = < timezone, } = stateResponse; - const characterEditingResponse = useFieldCharacterEditing({ + const characterEditingResponse = useFieldCharacterEditing({ sections: state.sections, updateSectionValue, sectionsValueBoundaries, diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useField.types.ts b/packages/x-date-pickers/src/internals/hooks/useField/useField.types.ts index 4b3535b1bff2..44be2122260a 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useField.types.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useField.types.ts @@ -21,30 +21,22 @@ import { ExportedUseClearableFieldProps } from '../../../hooks/useClearableField export interface UseFieldParams< TValue, - TDate extends PickerValidDate, TSection extends FieldSection, TEnableAccessibleFieldDOMStructure extends boolean, TForwardedProps extends UseFieldCommonForwardedProps & UseFieldForwardedProps, - TInternalProps extends UseFieldInternalProps< - any, - any, - any, - TEnableAccessibleFieldDOMStructure, - any - >, + TInternalProps extends UseFieldInternalProps, > { forwardedProps: TForwardedProps; internalProps: TInternalProps; - valueManager: PickerValueManager>; - fieldValueManager: FieldValueManager; - validator: Validator, TInternalProps>; + valueManager: PickerValueManager>; + fieldValueManager: FieldValueManager; + validator: Validator, TInternalProps>; valueType: FieldValueType; } export interface UseFieldInternalProps< TValue, - TDate extends PickerValidDate, TSection extends FieldSection, TEnableAccessibleFieldDOMStructure extends boolean, TError, @@ -64,7 +56,7 @@ export interface UseFieldInternalProps< * For example, on time fields it will be used to determine the date to set. * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used. */ - referenceDate?: TDate; + referenceDate?: PickerValidDate; /** * Callback fired when the value changes. * @template TValue The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value. @@ -140,7 +132,7 @@ export interface UseFieldInternalProps< } export interface UseFieldCommonAdditionalProps - extends Required, 'disabled' | 'readOnly'>> {} + extends Required, 'disabled' | 'readOnly'>> {} export interface UseFieldCommonForwardedProps extends ExportedUseClearableFieldProps { onKeyDown?: React.KeyboardEventHandler; @@ -203,20 +195,17 @@ export type UseFieldResponse< ? UseFieldV6AdditionalProps & Required : UseFieldV7AdditionalProps & Required); -export type FieldSectionValueBoundaries< - TDate extends PickerValidDate, - SectionType extends FieldSectionType, -> = { +export type FieldSectionValueBoundaries = { minimum: number; maximum: number; -} & (SectionType extends 'day' ? { longestMonth: TDate } : {}); +} & (SectionType extends 'day' ? { longestMonth: PickerValidDate } : {}); -export type FieldSectionsValueBoundaries = { +export type FieldSectionsValueBoundaries = { [SectionType in FieldSectionType]: (params: { - currentDate: TDate | null; + currentDate: PickerValidDate | null; format: string; contentType: FieldSectionContentType; - }) => FieldSectionValueBoundaries; + }) => FieldSectionValueBoundaries; }; export type FieldSectionsBoundaries = { @@ -239,19 +228,15 @@ export interface FieldChangeHandlerContext { * Object used to access and update the active date (i.e: the date containing the active section). * Mainly useful in the range fields where we need to update the date containing the active section without impacting the other one. */ -interface FieldActiveDateManager< - TValue, - TDate extends PickerValidDate, - TSection extends FieldSection, -> { +interface FieldActiveDateManager { /** * Active date from `state.value`. */ - date: TDate | null; + date: PickerValidDate | null; /** * Active date from the `state.referenceValue`. */ - referenceDate: TDate; + referenceDate: PickerValidDate; /** * @template TSection * @param {TSection[]} sections The sections of the full value. @@ -261,37 +246,33 @@ interface FieldActiveDateManager< getSections: (sections: TSection[]) => TSection[]; /** * Creates the new value and reference value based on the new active date and the current state. - * @template TValue, TDate - * @param {TDate | null} newActiveDate The new value of the date containing the active section. + * @template TValue + * @param {PickerValidDate | null} newActiveDate The new value of the date containing the active section. * @returns {Pick, 'value' | 'referenceValue'>} The new value and reference value to publish and store in the state. */ getNewValuesFromNewActiveDate: ( - newActiveDate: TDate | null, + newActiveDate: PickerValidDate | null, ) => Pick, 'value' | 'referenceValue'>; } export type FieldParsedSelectedSections = number | 'all' | null; -export interface FieldValueManager< - TValue, - TDate extends PickerValidDate, - TSection extends FieldSection, -> { +export interface FieldValueManager { /** * Creates the section list from the current value. * The `prevSections` are used on the range fields to avoid losing the sections of a partially filled date when editing the other date. - * @template TValue, TDate, TSection - * @param {MuiPickersAdapter} utils The utils to manipulate the date. + * @template TValue, TSection + * @param {MuiPickersAdapter} utils The utils to manipulate the date. * @param {TValue} value The current value to generate sections from. * @param {TSection[] | null} fallbackSections The sections to use as a fallback if a date is null or invalid. - * @param {(date: TDate) => FieldSection[]} getSectionsFromDate Returns the sections of the given date. + * @param {(date: PickerValidDate) => FieldSection[]} getSectionsFromDate Returns the sections of the given date. * @returns {TSection[]} The new section list. */ getSectionsFromValue: ( - utils: MuiPickersAdapter, + utils: MuiPickersAdapter, value: TValue, fallbackSections: TSection[] | null, - getSectionsFromDate: (date: TDate) => FieldSection[], + getSectionsFromDate: (date: PickerValidDate) => FieldSection[], ) => TSection[]; /** * Creates the string value to render in the input based on the current section list. @@ -315,42 +296,42 @@ export interface FieldValueManager< getV7HiddenInputValueFromSections: (sections: TSection[]) => string; /** * Returns the manager of the active date. - * @template TValue, TDate, TSection - * @param {MuiPickersAdapter} utils The utils to manipulate the date. + * @template TValue, TSection + * @param {MuiPickersAdapter} utils The utils to manipulate the date. * @param {UseFieldState} state The current state of the field. * @param {TSection} activeSection The active section. - * @returns {FieldActiveDateManager} The manager of the active date. + * @returns {FieldActiveDateManager} The manager of the active date. */ getActiveDateManager: ( - utils: MuiPickersAdapter, + utils: MuiPickersAdapter, state: UseFieldState, activeSection: TSection, - ) => FieldActiveDateManager; + ) => FieldActiveDateManager; /** * Parses a string version (most of the time coming from the input). * This method should only be used when the change does not come from a single section. - * @template TValue, TDate + * @template TValue * @param {string} valueStr The string value to parse. * @param {TValue} referenceValue The reference value currently stored in state. - * @param {(dateStr: string, referenceDate: TDate) => TDate | null} parseDate A method to convert a string date into a parsed one. + * @param {(dateStr: string, referenceDate: PickerValidDate) => PickerValidDate | null} parseDate A method to convert a string date into a parsed one. * @returns {TValue} The new parsed value. */ parseValueStr: ( valueStr: string, referenceValue: TValue, - parseDate: (dateStr: string, referenceDate: TDate) => TDate | null, + parseDate: (dateStr: string, referenceDate: PickerValidDate) => PickerValidDate | null, ) => TValue; /** * Update the reference value with the new value. * This method must make sure that no date inside the returned `referenceValue` is invalid. - * @template TValue, TDate - * @param {MuiPickersAdapter} utils The utils to manipulate the date. + * @template TValue + * @param {MuiPickersAdapter} utils The utils to manipulate the date. * @param {TValue} value The new value from which we want to take all valid dates in the `referenceValue` state. * @param {TValue} prevReferenceValue The previous reference value. It is used as a fallback for invalid dates in the new value. * @returns {TValue} The new reference value with no invalid date. */ updateReferenceValue: ( - utils: MuiPickersAdapter, + utils: MuiPickersAdapter, value: TValue, prevReferenceValue: TValue, ) => TValue; @@ -443,13 +424,11 @@ export interface UseFieldTextFieldInteractions { export type UseFieldTextField = < TValue, - TDate extends PickerValidDate, TSection extends FieldSection, TForwardedProps extends TEnableAccessibleFieldDOMStructure extends false ? UseFieldV6ForwardedProps : UseFieldV7ForwardedProps, TInternalProps extends UseFieldInternalProps< - any, any, any, TEnableAccessibleFieldDOMStructure, @@ -460,7 +439,6 @@ export type UseFieldTextField( params: UseFieldTextFieldParams< TValue, - TDate, TSection, TEnableAccessibleFieldDOMStructure, TForwardedProps, @@ -475,28 +453,20 @@ export type UseFieldTextField, + TInternalProps extends UseFieldInternalProps, > extends UseFieldParams< TValue, - TDate, TSection, TEnableAccessibleFieldDOMStructure, TForwardedProps, TInternalProps >, - UseFieldStateResponse, + UseFieldStateResponse, UseFieldCharacterEditingResponse { areAllSectionsEmpty: boolean; sectionOrder: SectionOrdering; diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useField.utils.ts b/packages/x-date-pickers/src/internals/hooks/useField/useField.utils.ts index e56f7029886f..f3d00d85af1d 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useField.utils.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useField.utils.ts @@ -18,8 +18,8 @@ import { } from '../../../models'; import { getMonthsInYear } from '../../utils/date-utils'; -export const getDateSectionConfigFromFormatToken = ( - utils: MuiPickersAdapter, +export const getDateSectionConfigFromFormatToken = ( + utils: MuiPickersAdapter, formatToken: string, ): Pick & { maxLength: number | undefined } => { const config = utils.formatTokenMap[formatToken]; @@ -63,11 +63,8 @@ const getDeltaFromKeyCode = (keyCode: Omit( - utils: MuiPickersAdapter, - format: string, -) => { - const elements: TDate[] = []; +export const getDaysInWeekStr = (utils: MuiPickersAdapter, format: string) => { + const elements: PickerValidDate[] = []; const now = utils.date(undefined, 'default'); const startDate = utils.startOfWeek(now); @@ -82,8 +79,8 @@ export const getDaysInWeekStr = ( return elements.map((weekDay) => utils.formatByString(weekDay, format)); }; -export const getLetterEditingOptions = ( - utils: MuiPickersAdapter, +export const getLetterEditingOptions = ( + utils: MuiPickersAdapter, timezone: PickersTimezone, sectionType: FieldSectionType, format: string, @@ -118,9 +115,7 @@ export const FORMAT_SECONDS_NO_LEADING_ZEROS = 's'; const NON_LOCALIZED_DIGITS = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']; -export const getLocalizedDigits = ( - utils: MuiPickersAdapter, -) => { +export const getLocalizedDigits = (utils: MuiPickersAdapter) => { const today = utils.date(undefined); const formattedZero = utils.formatByString( utils.setSeconds(today, 0), @@ -191,10 +186,10 @@ export const cleanLeadingZeros = (valueStr: string, size: number) => { return cleanValueStr; }; -export const cleanDigitSectionValue = ( - utils: MuiPickersAdapter, +export const cleanDigitSectionValue = ( + utils: MuiPickersAdapter, value: number, - sectionBoundaries: FieldSectionValueBoundaries, + sectionBoundaries: FieldSectionValueBoundaries, localizedDigits: string[], section: Pick< FieldSection, @@ -219,7 +214,7 @@ export const cleanDigitSectionValue = ( if (section.type === 'day' && section.contentType === 'digit-with-letter') { const date = utils.setDate( - (sectionBoundaries as FieldSectionValueBoundaries).longestMonth, + (sectionBoundaries as FieldSectionValueBoundaries<'day'>).longestMonth, value, ); return utils.formatByString(date, section.format); @@ -235,14 +230,14 @@ export const cleanDigitSectionValue = ( return applyLocalizedDigits(valueStr, localizedDigits); }; -export const adjustSectionValue = ( - utils: MuiPickersAdapter, +export const adjustSectionValue = ( + utils: MuiPickersAdapter, timezone: PickersTimezone, section: TSection, keyCode: AvailableAdjustKeyCode, - sectionsValueBoundaries: FieldSectionsValueBoundaries, + sectionsValueBoundaries: FieldSectionsValueBoundaries, localizedDigits: string[], - activeDate: TDate | null, + activeDate: PickerValidDate | null, stepsAttributes?: { minutesStep?: number }, ): string => { const delta = getDeltaFromKeyCode(keyCode); @@ -375,8 +370,8 @@ export const getSectionVisibleValue = ( return value; }; -export const changeSectionValueFormat = ( - utils: MuiPickersAdapter, +export const changeSectionValueFormat = ( + utils: MuiPickersAdapter, valueStr: string, currentFormat: string, newFormat: string, @@ -390,13 +385,11 @@ export const changeSectionValueFormat = ( return utils.formatByString(utils.parse(valueStr, currentFormat)!, newFormat); }; -const isFourDigitYearFormat = ( - utils: MuiPickersAdapter, - format: string, -) => utils.formatByString(utils.date(undefined, 'system'), format).length === 4; +const isFourDigitYearFormat = (utils: MuiPickersAdapter, format: string) => + utils.formatByString(utils.date(undefined, 'system'), format).length === 4; -export const doesSectionFormatHaveLeadingZeros = ( - utils: MuiPickersAdapter, +export const doesSectionFormatHaveLeadingZeros = ( + utils: MuiPickersAdapter, contentType: FieldSectionContentType, sectionType: FieldSectionType, format: string, @@ -453,11 +446,11 @@ export const doesSectionFormatHaveLeadingZeros = * Some date libraries like `dayjs` don't support parsing from date with escaped characters. * To make sure that the parsing works, we are building a format and a date without any separator. */ -export const getDateFromDateSections = ( - utils: MuiPickersAdapter, +export const getDateFromDateSections = ( + utils: MuiPickersAdapter, sections: FieldSection[], localizedDigits: string[], -) => { +): PickerValidDate => { // If we have both a day and a weekDay section, // Then we skip the weekDay in the parsing because libraries like dayjs can't parse complicated formats containing a weekDay. // dayjs(dayjs().format('dddd MMMM D YYYY'), 'dddd MMMM D YYYY')) // returns `Invalid Date` even if the format is valid. @@ -519,11 +512,11 @@ export const createDateStrForV6InputFromSections = ( return `\u2066${dateStr}\u2069`; }; -export const getSectionsBoundaries = ( - utils: MuiPickersAdapter, +export const getSectionsBoundaries = ( + utils: MuiPickersAdapter, localizedDigits: string[], timezone: PickersTimezone, -): FieldSectionsValueBoundaries => { +): FieldSectionsValueBoundaries => { const today = utils.date(undefined, timezone); const endOfYear = utils.endOfYear(today); const endOfDay = utils.endOfDay(today); @@ -538,7 +531,7 @@ export const getSectionsBoundaries = ( return acc; }, - { maxDaysInMonth: 0, longestMonth: null as TDate | null }, + { maxDaysInMonth: 0, longestMonth: null as PickerValidDate | null }, ); return { @@ -648,11 +641,11 @@ export const validateSections = ( } }; -const transferDateSectionValue = ( - utils: MuiPickersAdapter, +const transferDateSectionValue = ( + utils: MuiPickersAdapter, section: FieldSection, - dateToTransferFrom: TDate, - dateToTransferTo: TDate, + dateToTransferFrom: PickerValidDate, + dateToTransferTo: PickerValidDate, ) => { switch (section.type) { case 'year': { @@ -722,13 +715,13 @@ const reliableSectionModificationOrder: Record = { empty: 9, }; -export const mergeDateIntoReferenceDate = ( - utils: MuiPickersAdapter, - dateToTransferFrom: TDate, +export const mergeDateIntoReferenceDate = ( + utils: MuiPickersAdapter, + dateToTransferFrom: PickerValidDate, sections: FieldSection[], - referenceDate: TDate, + referenceDate: PickerValidDate, shouldLimitToEditedSections: boolean, -) => +): PickerValidDate => // cloning sections before sort to avoid mutating it [...sections] .sort( @@ -818,9 +811,9 @@ export const parseSelectedSections = ( return selectedSections; }; -export const getSectionValueText = ( +export const getSectionValueText = ( section: FieldSection, - utils: MuiPickersAdapter, + utils: MuiPickersAdapter, ): string | undefined => { if (!section.value) { return undefined; @@ -848,9 +841,9 @@ export const getSectionValueText = ( } }; -export const getSectionValueNow = ( +export const getSectionValueNow = ( section: FieldSection, - utils: MuiPickersAdapter, + utils: MuiPickersAdapter, ): number | undefined => { if (!section.value) { return undefined; diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useFieldCharacterEditing.ts b/packages/x-date-pickers/src/internals/hooks/useField/useFieldCharacterEditing.ts index cb2d63d0a16e..7e3ff21ee74f 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useFieldCharacterEditing.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useFieldCharacterEditing.ts @@ -1,6 +1,6 @@ import * as React from 'react'; import useEventCallback from '@mui/utils/useEventCallback'; -import { FieldSectionType, FieldSection, PickersTimezone, PickerValidDate } from '../../../models'; +import { FieldSectionType, FieldSection, PickersTimezone } from '../../../models'; import { useUtils } from '../useUtils'; import { FieldSectionsValueBoundaries } from './useField.types'; import { @@ -27,13 +27,10 @@ export interface ApplyCharacterEditingParams { sectionIndex: number; } -interface UseFieldCharacterEditingParams< - TDate extends PickerValidDate, - TSection extends FieldSection, -> { +interface UseFieldCharacterEditingParams { sections: TSection[]; updateSectionValue: (params: UpdateSectionValueParams) => void; - sectionsValueBoundaries: FieldSectionsValueBoundaries; + sectionsValueBoundaries: FieldSectionsValueBoundaries; localizedDigits: string[]; setTempAndroidValueStr: (newValue: string | null) => void; timezone: PickersTimezone; @@ -86,18 +83,15 @@ const isQueryResponseWithoutValue = ( * 1. The numeric editing when the user presses a digit * 2. The letter editing when the user presses another key */ -export const useFieldCharacterEditing = < - TDate extends PickerValidDate, - TSection extends FieldSection, ->({ +export const useFieldCharacterEditing = ({ sections, updateSectionValue, sectionsValueBoundaries, localizedDigits, setTempAndroidValueStr, timezone, -}: UseFieldCharacterEditingParams): UseFieldCharacterEditingResponse => { - const utils = useUtils(); +}: UseFieldCharacterEditingParams): UseFieldCharacterEditingResponse => { + const utils = useUtils(); const [query, setQuery] = React.useState(null); diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useFieldState.ts b/packages/x-date-pickers/src/internals/hooks/useField/useFieldState.ts index 735f80229ed9..1282c4c6b578 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useFieldState.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useFieldState.ts @@ -49,11 +49,7 @@ export interface UpdateSectionValueParams { shouldGoToNextSection: boolean; } -export interface UseFieldStateResponse< - TValue, - TDate extends PickerValidDate, - TSection extends FieldSection, -> { +export interface UseFieldStateResponse { state: UseFieldState; activeSectionIndex: number | null; parsedSelectedSections: FieldParsedSelectedSections; @@ -63,7 +59,7 @@ export interface UseFieldStateResponse< updateSectionValue: (params: UpdateSectionValueParams) => void; updateValueFromValueStr: (valueStr: string) => void; setTempAndroidValueStr: (tempAndroidValueStr: string | null) => void; - sectionsValueBoundaries: FieldSectionsValueBoundaries; + sectionsValueBoundaries: FieldSectionsValueBoundaries; getSectionsFromValue: (value: TValue, fallbackSections?: TSection[] | null) => TSection[]; localizedDigits: string[]; timezone: PickersTimezone; @@ -71,24 +67,22 @@ export interface UseFieldStateResponse< export const useFieldState = < TValue, - TDate extends PickerValidDate, TSection extends FieldSection, TEnableAccessibleFieldDOMStructure extends boolean, TForwardedProps extends UseFieldForwardedProps, - TInternalProps extends UseFieldInternalProps, + TInternalProps extends UseFieldInternalProps, >( params: UseFieldParams< TValue, - TDate, TSection, TEnableAccessibleFieldDOMStructure, TForwardedProps, TInternalProps >, -): UseFieldStateResponse => { - const utils = useUtils(); - const translations = usePickersTranslations(); - const adapter = useLocalizationContext(); +): UseFieldStateResponse => { + const utils = useUtils(); + const translations = usePickersTranslations(); + const adapter = useLocalizationContext(); const isRtl = useRtl(); const { @@ -127,7 +121,7 @@ export const useFieldState = < const localizedDigits = React.useMemo(() => getLocalizedDigits(utils), [utils]); const sectionsValueBoundaries = React.useMemo( - () => getSectionsBoundaries(utils, localizedDigits, timezone), + () => getSectionsBoundaries(utils, localizedDigits, timezone), [utils, localizedDigits, timezone], ); @@ -175,7 +169,7 @@ export const useFieldState = < referenceDate: referenceDateProp, value: valueFromTheOutside, utils, - props: internalProps as GetDefaultReferenceDateProps, + props: internalProps as GetDefaultReferenceDateProps, granularity, timezone, }); @@ -276,7 +270,7 @@ export const useFieldState = < }; const updateValueFromValueStr = (valueStr: string) => { - const parseDateStr = (dateStr: string, referenceDate: TDate) => { + const parseDateStr = (dateStr: string, referenceDate: PickerValidDate) => { const date = utils.parse(dateStr, format); if (date == null || !utils.isValid(date)) { return null; diff --git a/packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.tsx b/packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.tsx index 7fce7070a4db..917c358b6737 100644 --- a/packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.tsx +++ b/packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.tsx @@ -29,11 +29,9 @@ import { PickersProvider } from '../../components/PickersProvider'; * - MobileTimePicker */ export const useMobilePicker = < - TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseMobilePickerProps< - TDate, TView, TEnableAccessibleFieldDOMStructure, any, @@ -43,7 +41,7 @@ export const useMobilePicker = < props, getOpenDialogAriaText, ...pickerParams -}: UseMobilePickerParams) => { +}: UseMobilePickerParams) => { const { slots, slotProps: innerSlotProps, @@ -76,7 +74,7 @@ export const useMobilePicker = < renderCurrentView, fieldProps: pickerFieldProps, ownerState, - } = usePicker({ + } = usePicker({ ...pickerParams, props, fieldRef, @@ -89,11 +87,10 @@ export const useMobilePicker = < const Field = slots.field; const fieldProps = useSlotProps< typeof Field, - UseMobilePickerSlotProps['field'], + UseMobilePickerSlotProps['field'], Partial< BaseSingleInputFieldProps< - TDate | null, - TDate, + PickerValidDate | null, FieldSection, TEnableAccessibleFieldDOMStructure, InferError diff --git a/packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.types.ts b/packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.types.ts index 3ab00efff0ca..27824fd3df82 100644 --- a/packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.types.ts +++ b/packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.types.ts @@ -27,11 +27,9 @@ import { UsePickerValueNonStaticProps } from '../usePicker/usePickerValue.types' import { UsePickerViewsNonStaticProps, UsePickerViewsProps } from '../usePicker/usePickerViews'; import { DateOrTimeViewWithMeridiem } from '../../models'; -export interface UseMobilePickerSlots< - TDate extends PickerValidDate, - TView extends DateOrTimeViewWithMeridiem, -> extends PickersModalDialogSlots, - ExportedPickersLayoutSlots { +export interface UseMobilePickerSlots + extends PickersModalDialogSlots, + ExportedPickersLayoutSlots { /** * Component used to enter the date with the keyboard. */ @@ -44,15 +42,13 @@ export interface UseMobilePickerSlots< } export interface ExportedUseMobilePickerSlotProps< - TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, > extends PickersModalDialogSlotProps, - ExportedPickersLayoutSlotProps { + ExportedPickersLayoutSlotProps { field?: SlotComponentPropsFromProps< BaseSingleInputFieldProps< - TDate | null, - TDate, + PickerValidDate | null, FieldSection, TEnableAccessibleFieldDOMStructure, unknown @@ -64,11 +60,10 @@ export interface ExportedUseMobilePickerSlotProps< } export interface UseMobilePickerSlotProps< - TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, -> extends ExportedUseMobilePickerSlotProps, - Pick, 'toolbar'> {} +> extends ExportedUseMobilePickerSlotProps, + Pick, 'toolbar'> {} export interface MobileOnlyPickerProps extends BaseNonStaticPickerProps, @@ -77,40 +72,37 @@ export interface MobileOnlyPickerProps UsePickerViewsNonStaticProps {} export interface UseMobilePickerProps< - TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError, - TExternalProps extends UsePickerViewsProps, -> extends BasePickerProps, + TExternalProps extends UsePickerViewsProps, +> extends BasePickerProps, MobileOnlyPickerProps { /** * Overridable component slots. * @default {} */ - slots: UseMobilePickerSlots; + slots: UseMobilePickerSlots; /** * The props used for each component slot. * @default {} */ - slotProps?: UseMobilePickerSlotProps; + slotProps?: UseMobilePickerSlotProps; } export interface UseMobilePickerParams< - TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseMobilePickerProps< - TDate, TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps >, > extends Pick< - UsePickerParams, + UsePickerParams, 'valueManager' | 'valueType' | 'validator' > { props: TExternalProps; - getOpenDialogAriaText: (date: TDate | null) => string; + getOpenDialogAriaText: (date: PickerValidDate | null) => string; } diff --git a/packages/x-date-pickers/src/internals/hooks/usePicker/usePicker.ts b/packages/x-date-pickers/src/internals/hooks/usePicker/usePicker.ts index 9d2be881f90d..d9693d260b45 100644 --- a/packages/x-date-pickers/src/internals/hooks/usePicker/usePicker.ts +++ b/packages/x-date-pickers/src/internals/hooks/usePicker/usePicker.ts @@ -3,17 +3,16 @@ import { UsePickerParams, UsePickerProps, UsePickerResponse } from './usePicker. import { usePickerValue } from './usePickerValue'; import { usePickerViews } from './usePickerViews'; import { usePickerLayoutProps } from './usePickerLayoutProps'; -import { FieldSection, PickerValidDate, InferError } from '../../../models'; +import { FieldSection, InferError } from '../../../models'; import { DateOrTimeViewWithMeridiem } from '../../models'; import { usePickerOwnerState } from './usePickerOwnerState'; import { usePickerProvider } from './usePickerProvider'; export const usePicker = < TValue, - TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TSection extends FieldSection, - TExternalProps extends UsePickerProps, + TExternalProps extends UsePickerProps, TAdditionalProps extends {}, >({ props, @@ -26,14 +25,12 @@ export const usePicker = < rendererInterceptor, fieldRef, localeText, -}: UsePickerParams< +}: UsePickerParams): UsePickerResponse< TValue, - TDate, TView, TSection, - TExternalProps, - TAdditionalProps ->): UsePickerResponse> => { + InferError +> => { if (process.env.NODE_ENV !== 'production') { if ((props as any).renderInput != null) { warnOnce([ @@ -43,7 +40,7 @@ export const usePicker = < ]); } } - const pickerValueResponse = usePickerValue({ + const pickerValueResponse = usePickerValue({ props, valueManager, valueType, @@ -53,7 +50,6 @@ export const usePicker = < const pickerViewsResponse = usePickerViews< TValue, - TDate, TView, TSection, TExternalProps, diff --git a/packages/x-date-pickers/src/internals/hooks/usePicker/usePicker.types.ts b/packages/x-date-pickers/src/internals/hooks/usePicker/usePicker.types.ts index cad5e32bf7c1..7d10cee30cff 100644 --- a/packages/x-date-pickers/src/internals/hooks/usePicker/usePicker.types.ts +++ b/packages/x-date-pickers/src/internals/hooks/usePicker/usePicker.types.ts @@ -11,7 +11,7 @@ import { UsePickerViewsBaseProps, } from './usePickerViews'; import { UsePickerLayoutProps, UsePickerLayoutPropsResponse } from './usePickerLayoutProps'; -import { FieldSection, PickerOwnerState, PickerValidDate } from '../../../models'; +import { FieldSection, PickerOwnerState } from '../../../models'; import { DateOrTimeViewWithMeridiem } from '../../models'; import { UsePickerProviderParameters, UsePickerProviderReturnValue } from './usePickerProvider'; @@ -20,39 +20,36 @@ import { UsePickerProviderParameters, UsePickerProviderReturnValue } from './use */ export interface UsePickerBaseProps< TValue, - TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TError, - TExternalProps extends UsePickerViewsProps, + TExternalProps extends UsePickerViewsProps, TAdditionalProps extends {}, > extends UsePickerValueBaseProps, - UsePickerViewsBaseProps, + UsePickerViewsBaseProps, UsePickerLayoutProps {} export interface UsePickerProps< TValue, - TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TError, - TExternalProps extends UsePickerViewsProps, + TExternalProps extends UsePickerViewsProps, TAdditionalProps extends {}, > extends UsePickerValueProps, - UsePickerViewsProps, + UsePickerViewsProps, UsePickerLayoutProps {} export interface UsePickerParams< TValue, - TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TSection extends FieldSection, - TExternalProps extends UsePickerProps, + TExternalProps extends UsePickerProps, TAdditionalProps extends {}, > extends Pick< - UsePickerValueParams, + UsePickerValueParams, 'valueManager' | 'valueType' | 'wrapperVariant' | 'validator' >, Pick< - UsePickerViewParams, + UsePickerViewParams, 'additionalViewProps' | 'autoFocusView' | 'rendererInterceptor' | 'fieldRef' >, Pick, 'localeText'> { diff --git a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerOwnerState.ts b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerOwnerState.ts index 7fe68d2d836b..32da73815c61 100644 --- a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerOwnerState.ts +++ b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerOwnerState.ts @@ -5,9 +5,9 @@ import { PickerValueManager, UsePickerValueResponse } from './usePickerValue.typ import { useUtils } from '../useUtils'; interface UsePickerOwnerStateParameters { - props: UsePickerProps; + props: UsePickerProps; pickerValueResponse: UsePickerValueResponse; - valueManager: PickerValueManager; + valueManager: PickerValueManager; } export function usePickerOwnerState( diff --git a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerValue.ts b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerValue.ts index 8d6255b5f562..f24d9e11a718 100644 --- a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerValue.ts +++ b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerValue.ts @@ -4,12 +4,7 @@ import { useOpenState } from '../useOpenState'; import { useLocalizationContext, useUtils } from '../useUtils'; import { FieldChangeHandlerContext } from '../useField'; import { useValidation } from '../../../validation'; -import { - FieldSection, - PickerChangeHandlerContext, - PickerValidDate, - InferError, -} from '../../../models'; +import { FieldSection, PickerChangeHandlerContext, InferError } from '../../../models'; import { PickerShortcutChangeImportance, PickersShortcutsItemContext, @@ -151,7 +146,6 @@ const shouldClosePicker = ( */ export const usePickerValue = < TValue, - TDate extends PickerValidDate, TSection extends FieldSection, TExternalProps extends UsePickerValueProps, >({ @@ -160,7 +154,7 @@ export const usePickerValue = < valueType, wrapperVariant, validator, -}: UsePickerValueParams): UsePickerValueResponse< +}: UsePickerValueParams): UsePickerValueResponse< TValue, TSection, InferError @@ -211,8 +205,8 @@ export const usePickerValue = < } /* eslint-enable react-hooks/rules-of-hooks, react-hooks/exhaustive-deps */ - const utils = useUtils(); - const adapter = useLocalizationContext(); + const utils = useUtils(); + const adapter = useLocalizationContext(); const { isOpen, setIsOpen } = useOpenState(props); const { diff --git a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerValue.types.ts b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerValue.types.ts index a2882f62f57f..d78af26b4c96 100644 --- a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerValue.types.ts +++ b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerValue.types.ts @@ -18,80 +18,72 @@ import { PickersShortcutsItemContext, } from '../../../PickersShortcuts'; -export interface PickerValueManager { +export interface PickerValueManager { /** * Determines if two values are equal. - * @template TDate, TValue - * @param {MuiPickersAdapter} utils The adapter. + * @template TValue + * @param {MuiPickersAdapter} utils The adapter. * @param {TValue} valueLeft The first value to compare. * @param {TValue} valueRight The second value to compare. * @returns {boolean} A boolean indicating if the two values are equal. */ - areValuesEqual: ( - utils: MuiPickersAdapter, - valueLeft: TValue, - valueRight: TValue, - ) => boolean; + areValuesEqual: (utils: MuiPickersAdapter, valueLeft: TValue, valueRight: TValue) => boolean; /** * Value to set when clicking the "Clear" button. */ emptyValue: TValue; /** * Method returning the value to set when clicking the "Today" button - * @template TDate, TValue - * @param {MuiPickersAdapter} utils The adapter. + * @template TValue + * @param {MuiPickersAdapter} utils The adapter. * @param {PickersTimezone} timezone The current timezone. * @param {FieldValueType} valueType The type of the value being edited. * @returns {TValue} The value to set when clicking the "Today" button. */ getTodayValue: ( - utils: MuiPickersAdapter, + utils: MuiPickersAdapter, timezone: PickersTimezone, valueType: FieldValueType, ) => TValue; /** - * @template TDate, TValue + * @template TValue * Method returning the reference value to use when mounting the component. * @param {object} params The params of the method. - * @param {TDate | undefined} params.referenceDate The referenceDate provided by the user. + * @param {PickerValidDate | undefined} params.referenceDate The referenceDate provided by the user. * @param {TValue} params.value The value provided by the user. - * @param {GetDefaultReferenceDateProps} params.props The validation props needed to compute the reference value. - * @param {MuiPickersAdapter} params.utils The adapter. + * @param {GetDefaultReferenceDateProps} params.props The validation props needed to compute the reference value. + * @param {MuiPickersAdapter} params.utils The adapter. * @param {number} params.granularity The granularity of the selection possible on this component. * @param {PickersTimezone} params.timezone The current timezone. - * @param {() => TDate} params.getTodayDate The reference date to use if no reference date is passed to the component. + * @param {() => PickerValidDate} params.getTodayDate The reference date to use if no reference date is passed to the component. * @returns {TValue} The reference value to use for non-provided dates. */ getInitialReferenceValue: (params: { - referenceDate: TDate | undefined; + referenceDate: PickerValidDate | undefined; value: TValue; - props: GetDefaultReferenceDateProps; - utils: MuiPickersAdapter; + props: GetDefaultReferenceDateProps; + utils: MuiPickersAdapter; granularity: number; timezone: PickersTimezone; - getTodayDate?: () => TDate; + getTodayDate?: () => PickerValidDate; }) => TValue; /** * Method parsing the input value to replace all invalid dates by `null`. - * @template TDate, TValue - * @param {MuiPickersAdapter} utils The adapter. + * @template TValue + * @param {MuiPickersAdapter} utils The adapter. * @param {TValue} value The value to parse. * @returns {TValue} The value without invalid date. */ - cleanValue: (utils: MuiPickersAdapter, value: TValue) => TValue; + cleanValue: (utils: MuiPickersAdapter, value: TValue) => TValue; /** * Generates the new value, given the previous value and the new proposed value. - * @template TDate, TValue - * @param {MuiPickersAdapter} utils The adapter. + * @template TValue + * @param {MuiPickersAdapter} utils The adapter. * @param {TValue} lastValidDateValue The last valid value. * @param {TValue} value The proposed value. * @returns {TValue} The new value. */ - valueReducer?: ( - utils: MuiPickersAdapter, - lastValidDateValue: TValue, - value: TValue, - ) => TValue; + valueReducer?: (utils: MuiPickersAdapter, lastValidDateValue: TValue, value: TValue) => TValue; /** * Compare two errors to know if they are equal. * @template TError @@ -114,25 +106,21 @@ export interface PickerValueManager} utils The utils to manipulate the date. + @template TValue + @param {MuiPickersAdapter} utils The utils to manipulate the date. @param {TValue} value The current value. @returns {string | null} The timezone of the current value. */ - getTimezone: (utils: MuiPickersAdapter, value: TValue) => string | null; + getTimezone: (utils: MuiPickersAdapter, value: TValue) => string | null; /** * Change the timezone of the dates inside a value. - @template TValue, TDate - @param {MuiPickersAdapter} utils The utils to manipulate the date. + @template TValue + @param {MuiPickersAdapter} utils The utils to manipulate the date. @param {PickersTimezone} timezone The current timezone. @param {TValue} value The value to convert. @returns {TValue} The value with the new dates in the new timezone. */ - setTimezone: ( - utils: MuiPickersAdapter, - timezone: PickersTimezone, - value: TValue, - ) => TValue; + setTimezone: (utils: MuiPickersAdapter, timezone: PickersTimezone, value: TValue) => TValue; } export type PickerSelectionState = 'partial' | 'shallow' | 'finish'; @@ -273,14 +261,13 @@ export interface UsePickerValueProps export interface UsePickerValueParams< TValue, - TDate extends PickerValidDate, TExternalProps extends UsePickerValueProps, > { props: TExternalProps; - valueManager: PickerValueManager>; + valueManager: PickerValueManager>; valueType: FieldValueType; wrapperVariant: WrapperVariant; - validator: Validator, TExternalProps>; + validator: Validator, TExternalProps>; } export interface UsePickerValueActions { @@ -294,7 +281,7 @@ export interface UsePickerValueActions { } export type UsePickerValueFieldResponse = Required< - Pick, 'value' | 'onChange'> + Pick, 'value' | 'onChange'> >; /** diff --git a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerViews.ts b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerViews.ts index e96e3754fe94..44c47ddc696d 100644 --- a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerViews.ts +++ b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerViews.ts @@ -10,7 +10,7 @@ import { DateOrTimeViewWithMeridiem } from '../../models'; import { FieldRef, FieldSection, PickerValidDate, TimezoneProps } from '../../../models'; interface PickerViewsRendererBaseExternalProps - extends Omit, 'openTo' | 'viewRenderers'> {} + extends Omit, 'openTo' | 'viewRenderers'> {} export type PickerViewsRendererProps< TValue, @@ -51,9 +51,8 @@ export type PickerViewRendererLookup< */ export interface UsePickerViewsBaseProps< TValue, - TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, - TExternalProps extends UsePickerViewsProps, + TExternalProps extends UsePickerViewsProps, TAdditionalProps extends {}, > extends Omit, 'onChange' | 'onFocusedViewChange' | 'focusedView'>, TimezoneProps { @@ -76,7 +75,7 @@ export interface UsePickerViewsBaseProps< * The date used to generate the new value when both `value` and `defaultValue` are empty. * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`. */ - referenceDate?: TDate; + referenceDate?: PickerValidDate; } /** @@ -95,27 +94,19 @@ export interface UsePickerViewsNonStaticProps { */ export interface UsePickerViewsProps< TValue, - TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, - TExternalProps extends UsePickerViewsProps, + TExternalProps extends UsePickerViewsProps, TAdditionalProps extends {}, -> extends UsePickerViewsBaseProps { +> extends UsePickerViewsBaseProps { className?: string; sx?: SxProps; } export interface UsePickerViewParams< TValue, - TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TSection extends FieldSection, - TExternalProps extends UsePickerViewsProps< - TValue, - TDate, - TView, - TExternalProps, - TAdditionalProps - >, + TExternalProps extends UsePickerViewsProps, TAdditionalProps extends {}, > { props: TExternalProps; @@ -162,10 +153,9 @@ export interface UsePickerViewsLayoutResponse, + TExternalProps extends UsePickerViewsProps, TAdditionalProps extends {}, >({ props, @@ -176,7 +166,6 @@ export const usePickerViews = < fieldRef, }: UsePickerViewParams< TValue, - TDate, TView, TSection, TExternalProps, diff --git a/packages/x-date-pickers/src/internals/hooks/useStaticPicker/useStaticPicker.tsx b/packages/x-date-pickers/src/internals/hooks/useStaticPicker/useStaticPicker.tsx index 9d06d0e630c3..38dc4787f8d1 100644 --- a/packages/x-date-pickers/src/internals/hooks/useStaticPicker/useStaticPicker.tsx +++ b/packages/x-date-pickers/src/internals/hooks/useStaticPicker/useStaticPicker.tsx @@ -22,19 +22,17 @@ const PickerStaticLayout = styled(PickersLayout)(({ theme }) => ({ * - StaticTimePicker */ export const useStaticPicker = < - TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, - TExternalProps extends UseStaticPickerProps, + TExternalProps extends UseStaticPickerProps, >({ props, ref, ...pickerParams -}: UseStaticPickerParams) => { +}: UseStaticPickerParams) => { const { localeText, slots, slotProps, className, sx, displayStaticWrapperAs, autoFocus } = props; const { layoutProps, providerProps, renderCurrentView } = usePicker< - TDate | null, - TDate, + PickerValidDate | null, TView, FieldSection, TExternalProps, diff --git a/packages/x-date-pickers/src/internals/hooks/useStaticPicker/useStaticPicker.types.ts b/packages/x-date-pickers/src/internals/hooks/useStaticPicker/useStaticPicker.types.ts index bb8a8127c72f..0b2af3ccd50d 100644 --- a/packages/x-date-pickers/src/internals/hooks/useStaticPicker/useStaticPicker.types.ts +++ b/packages/x-date-pickers/src/internals/hooks/useStaticPicker/useStaticPicker.types.ts @@ -9,15 +9,11 @@ import { UsePickerViewsProps } from '../usePicker/usePickerViews'; import { FieldSection, PickerValidDate } from '../../../models'; import { DateOrTimeViewWithMeridiem } from '../../models'; -export interface UseStaticPickerSlots< - TDate extends PickerValidDate, - TView extends DateOrTimeViewWithMeridiem, -> extends ExportedPickersLayoutSlots {} +export interface UseStaticPickerSlots + extends ExportedPickersLayoutSlots {} -export interface UseStaticPickerSlotProps< - TDate extends PickerValidDate, - TView extends DateOrTimeViewWithMeridiem, -> extends ExportedPickersLayoutSlotProps {} +export interface UseStaticPickerSlotProps + extends ExportedPickersLayoutSlotProps {} export interface StaticOnlyPickerProps { /** @@ -39,30 +35,28 @@ export interface StaticOnlyPickerProps { } export interface UseStaticPickerProps< - TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TError, - TExternalProps extends UsePickerViewsProps, -> extends BasePickerProps, + TExternalProps extends UsePickerViewsProps, +> extends BasePickerProps, StaticOnlyPickerProps { /** * Overridable component slots. * @default {} */ - slots?: UseStaticPickerSlots; + slots?: UseStaticPickerSlots; /** * The props used for each component slot. * @default {} */ - slotProps?: UseStaticPickerSlotProps; + slotProps?: UseStaticPickerSlotProps; } export interface UseStaticPickerParams< - TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, - TExternalProps extends UseStaticPickerProps, + TExternalProps extends UseStaticPickerProps, > extends Pick< - UsePickerParams, + UsePickerParams, 'valueManager' | 'valueType' | 'validator' > { props: TExternalProps; diff --git a/packages/x-date-pickers/src/internals/hooks/useUtils.ts b/packages/x-date-pickers/src/internals/hooks/useUtils.ts index 9a300562aede..170075ddef74 100644 --- a/packages/x-date-pickers/src/internals/hooks/useUtils.ts +++ b/packages/x-date-pickers/src/internals/hooks/useUtils.ts @@ -7,7 +7,7 @@ import { DEFAULT_LOCALE } from '../../locales/enUS'; import { PickersLocaleText } from '../../locales/utils/pickersLocaleTextApi'; import { PickersTimezone, PickerValidDate } from '../../models'; -export const useLocalizationContext = () => { +export const useLocalizationContext = () => { const localization = React.useContext(MuiPickersAdapterContext); if (localization === null) { throw new Error( @@ -38,22 +38,21 @@ export const useLocalizationContext = () => { ({ ...localization, localeText, - }) as Omit, 'localeText'> & { + }) as Omit & { localeText: PickersLocaleText; }, [localization, localeText], ); }; -export const useUtils = () => useLocalizationContext().utils; +export const useUtils = () => useLocalizationContext().utils; -export const useDefaultDates = () => - useLocalizationContext().defaultDates; +export const useDefaultDates = () => useLocalizationContext().defaultDates; -export const useNow = (timezone: PickersTimezone): TDate => { - const utils = useUtils(); +export const useNow = (timezone: PickersTimezone): PickerValidDate => { + const utils = useUtils(); - const now = React.useRef() as React.MutableRefObject; + const now = React.useRef() as React.MutableRefObject; if (now.current === undefined) { now.current = utils.date(undefined, timezone); } diff --git a/packages/x-date-pickers/src/internals/hooks/useValueWithTimezone.ts b/packages/x-date-pickers/src/internals/hooks/useValueWithTimezone.ts index dd892c5d1c9d..f16b6f51410d 100644 --- a/packages/x-date-pickers/src/internals/hooks/useValueWithTimezone.ts +++ b/packages/x-date-pickers/src/internals/hooks/useValueWithTimezone.ts @@ -3,18 +3,14 @@ import useEventCallback from '@mui/utils/useEventCallback'; import useControlled from '@mui/utils/useControlled'; import { useUtils } from './useUtils'; import type { PickerValueManager } from './usePicker'; -import { PickersTimezone, PickerValidDate } from '../../models'; +import { PickersTimezone } from '../../models'; /** * Hooks making sure that: * - The value returned by `onChange` always have the timezone of `props.value` or `props.defaultValue` if defined * - The value rendered is always the one from `props.timezone` if defined */ -export const useValueWithTimezone = < - TDate extends PickerValidDate, - TValue, - TChange extends (...params: any[]) => void, ->({ +export const useValueWithTimezone = void>({ timezone: timezoneProp, value: valueProp, defaultValue, @@ -25,9 +21,9 @@ export const useValueWithTimezone = < value: TValue | undefined; defaultValue: TValue | undefined; onChange: TChange | undefined; - valueManager: PickerValueManager; + valueManager: PickerValueManager; }) => { - const utils = useUtils(); + const utils = useUtils(); const firstDefaultValue = React.useRef(defaultValue); const inputValue = valueProp ?? firstDefaultValue.current ?? valueManager.emptyValue; @@ -63,11 +59,7 @@ export const useValueWithTimezone = < /** * Wrapper around `useControlled` and `useValueWithTimezone` */ -export const useControlledValueWithTimezone = < - TDate extends PickerValidDate, - TValue, - TChange extends (...params: any[]) => void, ->({ +export const useControlledValueWithTimezone = void>({ name, timezone: timezoneProp, value: valueProp, @@ -80,7 +72,7 @@ export const useControlledValueWithTimezone = < value: TValue | undefined; defaultValue: TValue | undefined; onChange: TChange | undefined; - valueManager: PickerValueManager; + valueManager: PickerValueManager; }) => { const [valueWithInputTimezone, setValue] = useControlled({ name, diff --git a/packages/x-date-pickers/src/internals/hooks/useViews.tsx b/packages/x-date-pickers/src/internals/hooks/useViews.tsx index 3af630333bb9..cf72cc620f30 100644 --- a/packages/x-date-pickers/src/internals/hooks/useViews.tsx +++ b/packages/x-date-pickers/src/internals/hooks/useViews.tsx @@ -6,8 +6,8 @@ import type { PickerSelectionState } from './usePicker'; import { DateOrTimeViewWithMeridiem } from '../models'; import { PickerValidDate } from '../../models'; -export type PickerOnChangeFn = ( - date: TDate | null, +export type PickerOnChangeFn = ( + date: PickerValidDate | null, selectionState?: PickerSelectionState, ) => void; @@ -63,8 +63,8 @@ export interface UseViewsOptions void; } -export interface ExportedUseViewsOptions - extends MakeOptional, 'onChange' | 'openTo' | 'views'> {} +export interface ExportedUseViewsOptions + extends MakeOptional, 'onChange' | 'openTo' | 'views'> {} let warnedOnceNotValidView = false; diff --git a/packages/x-date-pickers/src/internals/index.ts b/packages/x-date-pickers/src/internals/index.ts index 288d0341cf96..11a6e4657b7f 100644 --- a/packages/x-date-pickers/src/internals/index.ts +++ b/packages/x-date-pickers/src/internals/index.ts @@ -118,6 +118,7 @@ export type { DayValidationProps, DateTimeValidationProps, } from './models/validation'; +export type { PickerRangeValue } from './models/value'; export { convertFieldResponseIntoMuiTextFieldProps } from './utils/convertFieldResponseIntoMuiTextFieldProps'; export { diff --git a/packages/x-date-pickers/src/internals/models/fields.ts b/packages/x-date-pickers/src/internals/models/fields.ts index e3097519c27d..f31216d2f8c7 100644 --- a/packages/x-date-pickers/src/internals/models/fields.ts +++ b/packages/x-date-pickers/src/internals/models/fields.ts @@ -1,16 +1,15 @@ import * as React from 'react'; import type { UseFieldInternalProps } from '../hooks/useField'; -import { FieldSection, PickerOwnerState, PickerValidDate } from '../../models'; +import { FieldSection, PickerOwnerState } from '../../models'; import type { ExportedUseClearableFieldProps } from '../../hooks/useClearableField'; export interface BaseFieldProps< TValue, - TDate extends PickerValidDate, TSection extends FieldSection, TEnableAccessibleFieldDOMStructure extends boolean, TError, > extends Omit< - UseFieldInternalProps, + UseFieldInternalProps, 'format' >, ExportedUseClearableFieldProps { diff --git a/packages/x-date-pickers/src/internals/models/index.ts b/packages/x-date-pickers/src/internals/models/index.ts index 7bb9a9cf63ac..165d396e9531 100644 --- a/packages/x-date-pickers/src/internals/models/index.ts +++ b/packages/x-date-pickers/src/internals/models/index.ts @@ -1,2 +1,3 @@ export * from './fields'; export * from './common'; +export * from './value'; diff --git a/packages/x-date-pickers/src/internals/models/props/basePickerProps.tsx b/packages/x-date-pickers/src/internals/models/props/basePickerProps.tsx index a9370c3ab823..c271a5322988 100644 --- a/packages/x-date-pickers/src/internals/models/props/basePickerProps.tsx +++ b/packages/x-date-pickers/src/internals/models/props/basePickerProps.tsx @@ -7,19 +7,17 @@ import { PickersInputComponentLocaleText } from '../../../locales/utils/pickersL import type { UsePickerViewsProps } from '../../hooks/usePicker/usePickerViews'; import { DateOrTimeViewWithMeridiem } from '../common'; import { UseFieldInternalProps } from '../../hooks/useField'; -import { PickerValidDate } from '../../../models'; /** * Props common to all pickers after applying the default props on each picker. */ export interface BasePickerProps< TValue, - TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TError, - TExternalProps extends UsePickerViewsProps, + TExternalProps extends UsePickerViewsProps, TAdditionalProps extends {}, -> extends UsePickerBaseProps { +> extends UsePickerBaseProps { className?: string; /** * The system prop that allows defining system overrides as well as additional CSS styles. @@ -35,13 +33,9 @@ export interface BasePickerProps< /** * Props common to all pickers before applying the default props on each picker. */ -export interface BasePickerInputProps< - TValue, - TDate extends PickerValidDate, - TView extends DateOrTimeViewWithMeridiem, - TError, -> extends Omit< - MakeOptional, 'openTo' | 'views'>, +export interface BasePickerInputProps + extends Omit< + MakeOptional, 'openTo' | 'views'>, 'viewRenderers' > {} @@ -52,7 +46,7 @@ export interface BasePickerInputProps< */ export interface BaseNonStaticPickerProps extends Pick< - UseFieldInternalProps, + UseFieldInternalProps, | 'formatDensity' | 'enableAccessibleFieldDOMStructure' | 'selectedSections' diff --git a/packages/x-date-pickers/src/internals/models/props/time.ts b/packages/x-date-pickers/src/internals/models/props/time.ts index 5683afbc1e4e..2d30d90a4704 100644 --- a/packages/x-date-pickers/src/internals/models/props/time.ts +++ b/packages/x-date-pickers/src/internals/models/props/time.ts @@ -14,14 +14,14 @@ export interface AmPmProps { ampm?: boolean; } -export interface ExportedBaseClockProps - extends ExportedValidateTimeProps, +export interface ExportedBaseClockProps + extends ExportedValidateTimeProps, TimezoneProps, AmPmProps {} -export interface BaseClockProps - extends ExportedUseViewsOptions, - ExportedBaseClockProps { +export interface BaseClockProps + extends ExportedUseViewsOptions, + ExportedBaseClockProps { className?: string; /** * The system prop that allows defining system overrides as well as additional CSS styles. @@ -31,12 +31,12 @@ export interface BaseClockProps - extends Omit, 'timeStep'>, - Omit, 'timeSteps'> { +export interface DesktopOnlyTimePickerProps + extends Omit, + Omit { /** * Amount of time options below or at which the single column time renderer is used. * @default 24 diff --git a/packages/x-date-pickers/src/internals/models/validation.ts b/packages/x-date-pickers/src/internals/models/validation.ts index 1d2e7f46d8ec..bd4f6aee2fc2 100644 --- a/packages/x-date-pickers/src/internals/models/validation.ts +++ b/packages/x-date-pickers/src/internals/models/validation.ts @@ -22,17 +22,17 @@ export interface BaseTimeValidationProps extends FutureAndPastValidationProps {} /** * Props used to validate a time value. */ -export interface TimeValidationProps { +export interface TimeValidationProps { /** * Minimal selectable time. * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`. */ - minTime?: TDate; + minTime?: PickerValidDate; /** * Maximal selectable time. * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`. */ - maxTime?: TDate; + maxTime?: PickerValidDate; /** * Step over minutes. * @default 1 @@ -40,12 +40,11 @@ export interface TimeValidationProps { minutesStep?: number; /** * Disable specific time. - * @template TDate - * @param {TDate} value The value to check. + * @param {PickerValidDate} value The value to check. * @param {TimeView} view The clock type of the timeValue. * @returns {boolean} If `true` the time will be disabled. */ - shouldDisableTime?: (value: TDate, view: TimeView) => boolean; + shouldDisableTime?: (value: PickerValidDate, view: TimeView) => boolean; /** * Do not ignore date part when validating min/max time. * @default false @@ -57,72 +56,68 @@ export interface TimeValidationProps { * Validation props common to all the date views. * All these props have a default value when used inside a field / picker / calendar. */ -export interface BaseDateValidationProps - extends FutureAndPastValidationProps { +export interface BaseDateValidationProps extends FutureAndPastValidationProps { /** * Maximal selectable date. * @default 2099-12-31 */ - maxDate?: TDate; + maxDate?: PickerValidDate; /** * Minimal selectable date. * @default 1900-01-01 */ - minDate?: TDate; + minDate?: PickerValidDate; } /** * Props used to validate a date value (validates day + month + year). */ -export interface DayValidationProps { +export interface DayValidationProps { /** * Disable specific date. * * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance. * - * @template TDate - * @param {TDate} day The date to test. + * @param {PickerValidDate} day The date to test. * @returns {boolean} If `true` the date will be disabled. */ - shouldDisableDate?: (day: TDate) => boolean; + shouldDisableDate?: (day: PickerValidDate) => boolean; } /** * Props used to validate a month value */ -export interface MonthValidationProps { +export interface MonthValidationProps { /** * Disable specific month. - * @template TDate - * @param {TDate} month The month to test. + * @param {PickerValidDate} month The month to test. * @returns {boolean} If `true`, the month will be disabled. */ - shouldDisableMonth?: (month: TDate) => boolean; + shouldDisableMonth?: (month: PickerValidDate) => boolean; } /** * Props used to validate a year value */ -export interface YearValidationProps { +export interface YearValidationProps { /** * Disable specific year. - * @template TDate - * @param {TDate} year The year to test. + * @param {PickerValidDate} year The year to test. * @returns {boolean} If `true`, the year will be disabled. */ - shouldDisableYear?: (year: TDate) => boolean; + shouldDisableYear?: (year: PickerValidDate) => boolean; } /** * Props used to validate a date time value. */ -export interface DateTimeValidationProps { +export interface DateTimeValidationProps { /** * Minimal selectable moment of time with binding to date, to set min time in each day use `minTime`. */ - minDateTime?: TDate; + minDateTime?: PickerValidDate; /** * Maximal selectable moment of time with binding to date, to set max time in each day use `maxTime`. */ - maxDateTime?: TDate; + maxDateTime?: PickerValidDate; } diff --git a/packages/x-date-pickers/src/internals/models/value.ts b/packages/x-date-pickers/src/internals/models/value.ts new file mode 100644 index 000000000000..7429c2df5c39 --- /dev/null +++ b/packages/x-date-pickers/src/internals/models/value.ts @@ -0,0 +1,5 @@ +import { PickerValidDate } from '../../models/pickers'; + +export type PickerValue = PickerValidDate | null; + +export type PickerRangeValue = [PickerValidDate | null, PickerValidDate | null]; diff --git a/packages/x-date-pickers/src/internals/utils/date-time-utils.ts b/packages/x-date-pickers/src/internals/utils/date-time-utils.ts index b34b93bc2cbf..b58e083974e2 100644 --- a/packages/x-date-pickers/src/internals/utils/date-time-utils.ts +++ b/packages/x-date-pickers/src/internals/utils/date-time-utils.ts @@ -3,7 +3,6 @@ import { DateOrTimeView, DateView, MuiPickersAdapter, - PickerValidDate, TimeStepOptions, TimeView, } from '../../models'; @@ -12,8 +11,8 @@ import { isDatePickerView, resolveDateFormat } from './date-utils'; import { DateOrTimeViewWithMeridiem } from '../models'; import { DesktopOnlyTimePickerProps } from '../models/props/time'; -export const resolveDateTimeFormat = ( - utils: MuiPickersAdapter, +export const resolveDateTimeFormat = ( + utils: MuiPickersAdapter, { views, format, @@ -70,17 +69,15 @@ const resolveViews = (24 * 60) / ((timeSteps.hours ?? 1) * (timeSteps.minutes ?? 5)) <= threshold; -interface DefaultizedTimeViewsProps - extends DefaultizedProps, 'ampm'> { +interface DefaultizedTimeViewsProps + extends DefaultizedProps { views: readonly TView[]; } -interface DefaultizedTimeViewsResponse< - TDate extends PickerValidDate, - TView = DateOrTimeViewWithMeridiem, -> extends Required< +interface DefaultizedTimeViewsResponse + extends Required< Pick< - DefaultizedTimeViewsProps, + DefaultizedTimeViewsProps, 'thresholdToRenderTimeInASingleColumn' | 'timeSteps' | 'views' > > { @@ -88,7 +85,6 @@ interface DefaultizedTimeViewsResponse< } export function resolveTimeViewsResponse< - TDate extends PickerValidDate, InTView extends DateOrTimeView = DateOrTimeView, OutTView extends DateOrTimeViewWithMeridiem = DateOrTimeViewWithMeridiem, >({ @@ -96,7 +92,7 @@ export function resolveTimeViewsResponse< ampm, timeSteps: inTimeSteps, views, -}: DefaultizedTimeViewsProps): DefaultizedTimeViewsResponse { +}: DefaultizedTimeViewsProps): DefaultizedTimeViewsResponse { const thresholdToRenderTimeInASingleColumn = inThreshold ?? 24; const timeSteps = { hours: 1, minutes: 5, seconds: 5, ...inTimeSteps }; const shouldRenderTimeInASingleColumn = resolveShouldRenderTimeInASingleColumn( diff --git a/packages/x-date-pickers/src/internals/utils/date-utils.test.ts b/packages/x-date-pickers/src/internals/utils/date-utils.test.ts index a9d642959c4e..ecc52a872b1e 100644 --- a/packages/x-date-pickers/src/internals/utils/date-utils.test.ts +++ b/packages/x-date-pickers/src/internals/utils/date-utils.test.ts @@ -78,7 +78,7 @@ describe('findClosestEnabledDate', () => { disableFuture: false, disablePast: true, timezone: 'default', - }); + })!; expect(adapterToUse.isBefore(result, today)).to.equal(false); expect(adapterToUse.isBefore(result, adapterToUse.addDays(today, 31))).to.equal(true); diff --git a/packages/x-date-pickers/src/internals/utils/date-utils.ts b/packages/x-date-pickers/src/internals/utils/date-utils.ts index 781ca434fba6..08c294e0bc23 100644 --- a/packages/x-date-pickers/src/internals/utils/date-utils.ts +++ b/packages/x-date-pickers/src/internals/utils/date-utils.ts @@ -8,11 +8,11 @@ import { import { DateOrTimeViewWithMeridiem } from '../models'; import { areViewsEqual } from './views'; -export const mergeDateAndTime = ( - utils: MuiPickersAdapter, - dateParam: TDate, - timeParam: TDate, -) => { +export const mergeDateAndTime = ( + utils: MuiPickersAdapter, + dateParam: PickerValidDate, + timeParam: PickerValidDate, +): PickerValidDate => { let mergedDate = dateParam; mergedDate = utils.setHours(mergedDate, utils.getHours(timeParam)); mergedDate = utils.setMinutes(mergedDate, utils.getMinutes(timeParam)); @@ -22,18 +22,18 @@ export const mergeDateAndTime = ( return mergedDate; }; -interface FindClosestDateParams { - date: TDate; +interface FindClosestDateParams { + date: PickerValidDate; disableFuture?: boolean; disablePast?: boolean; - maxDate: TDate; - minDate: TDate; - isDateDisabled: (date: TDate) => boolean; - utils: MuiPickersAdapter; + maxDate: PickerValidDate; + minDate: PickerValidDate; + isDateDisabled: (date: PickerValidDate) => boolean; + utils: MuiPickersAdapter; timezone: PickersTimezone; } -export const findClosestEnabledDate = ({ +export const findClosestEnabledDate = ({ date, disableFuture, disablePast, @@ -42,7 +42,7 @@ export const findClosestEnabledDate = ({ isDateDisabled, utils, timezone, -}: FindClosestDateParams) => { +}: FindClosestDateParams): PickerValidDate | null => { const today = mergeDateAndTime(utils, utils.date(undefined, timezone), date); if (disablePast && utils.isBefore(minDate!, today)) { minDate = today; @@ -52,8 +52,8 @@ export const findClosestEnabledDate = ({ maxDate = today; } - let forward: TDate | null = date; - let backward: TDate | null = date; + let forward: PickerValidDate | null = date; + let backward: PickerValidDate | null = date; if (utils.isBefore(date, minDate)) { forward = minDate; backward = null; @@ -93,16 +93,16 @@ export const findClosestEnabledDate = ({ return null; }; -export const replaceInvalidDateByNull = ( - utils: MuiPickersAdapter, - value: TDate | null, -) => (value == null || !utils.isValid(value) ? null : value); +export const replaceInvalidDateByNull = ( + utils: MuiPickersAdapter, + value: PickerValidDate | null, +): PickerValidDate | null => (value == null || !utils.isValid(value) ? null : value); -export const applyDefaultDate = ( - utils: MuiPickersAdapter, - value: TDate | null | undefined, - defaultValue: TDate, -): TDate => { +export const applyDefaultDate = ( + utils: MuiPickersAdapter, + value: PickerValidDate | null | undefined, + defaultValue: PickerValidDate, +): PickerValidDate => { if (value == null || !utils.isValid(value)) { return defaultValue; } @@ -110,11 +110,7 @@ export const applyDefaultDate = ( return value; }; -export const areDatesEqual = ( - utils: MuiPickersAdapter, - a: TDate, - b: TDate, -) => { +export const areDatesEqual = (utils: MuiPickersAdapter, a: PickerValidDate, b: PickerValidDate) => { if (!utils.isValid(a) && a != null && !utils.isValid(b) && b != null) { return true; } @@ -122,10 +118,10 @@ export const areDatesEqual = ( return utils.isEqual(a, b); }; -export const getMonthsInYear = ( - utils: MuiPickersAdapter, - year: TDate, -) => { +export const getMonthsInYear = ( + utils: MuiPickersAdapter, + year: PickerValidDate, +): PickerValidDate[] => { const firstMonth = utils.startOfYear(year); const months = [firstMonth]; @@ -137,19 +133,16 @@ export const getMonthsInYear = ( return months; }; -export const getTodayDate = ( - utils: MuiPickersAdapter, +export const getTodayDate = ( + utils: MuiPickersAdapter, timezone: PickersTimezone, valueType?: FieldValueType, -) => +): PickerValidDate => valueType === 'date' ? utils.startOfDay(utils.date(undefined, timezone)) : utils.date(undefined, timezone); -export const formatMeridiem = ( - utils: MuiPickersAdapter, - meridiem: 'am' | 'pm', -) => { +export const formatMeridiem = (utils: MuiPickersAdapter, meridiem: 'am' | 'pm') => { const date = utils.setHours(utils.date(), meridiem === 'am' ? 2 : 14); return utils.format(date, 'meridiem'); }; @@ -158,8 +151,8 @@ const dateViews = ['year', 'month', 'day']; export const isDatePickerView = (view: DateOrTimeViewWithMeridiem): view is DateView => dateViews.includes(view); -export const resolveDateFormat = ( - utils: MuiPickersAdapter, +export const resolveDateFormat = ( + utils: MuiPickersAdapter, { format, views }: { format?: string; views: readonly DateView[] }, isInToolbar: boolean, ) => { @@ -200,10 +193,7 @@ export const resolveDateFormat = ( return formats.keyboardDate; }; -export const getWeekdays = ( - utils: MuiPickersAdapter, - date: TDate, -) => { +export const getWeekdays = (utils: MuiPickersAdapter, date: PickerValidDate): PickerValidDate[] => { const start = utils.startOfWeek(date); return [0, 1, 2, 3, 4, 5, 6].map((diff) => utils.addDays(start, diff)); }; diff --git a/packages/x-date-pickers/src/internals/utils/getDefaultReferenceDate.ts b/packages/x-date-pickers/src/internals/utils/getDefaultReferenceDate.ts index 7d31ee708ee0..951efc5be178 100644 --- a/packages/x-date-pickers/src/internals/utils/getDefaultReferenceDate.ts +++ b/packages/x-date-pickers/src/internals/utils/getDefaultReferenceDate.ts @@ -2,11 +2,11 @@ import { createIsAfterIgnoreDatePart } from './time-utils'; import { mergeDateAndTime, getTodayDate } from './date-utils'; import { FieldSection, MuiPickersAdapter, PickersTimezone, PickerValidDate } from '../../models'; -export interface GetDefaultReferenceDateProps { - maxDate?: TDate; - minDate?: TDate; - minTime?: TDate; - maxTime?: TDate; +export interface GetDefaultReferenceDateProps { + maxDate?: PickerValidDate; + minDate?: PickerValidDate; + minTime?: PickerValidDate; + maxTime?: PickerValidDate; disableIgnoringDatePartForTimeValidation?: boolean; } @@ -28,11 +28,7 @@ export const getSectionTypeGranularity = (sections: FieldSection[]) => ), ); -const roundDate = ( - utils: MuiPickersAdapter, - granularity: number, - date: TDate, -) => { +const roundDate = (utils: MuiPickersAdapter, granularity: number, date: PickerValidDate) => { if (granularity === SECTION_TYPE_GRANULARITY.year) { return utils.startOfYear(date); } @@ -58,19 +54,19 @@ const roundDate = ( return roundedDate; }; -export const getDefaultReferenceDate = ({ +export const getDefaultReferenceDate = ({ props, utils, granularity, timezone, getTodayDate: inGetTodayDate, }: { - props: GetDefaultReferenceDateProps; - utils: MuiPickersAdapter; + props: GetDefaultReferenceDateProps; + utils: MuiPickersAdapter; granularity: number; timezone: PickersTimezone; - getTodayDate?: () => TDate; -}) => { + getTodayDate?: () => PickerValidDate; +}): PickerValidDate => { let referenceDate = inGetTodayDate ? inGetTodayDate() : roundDate(utils, granularity, getTodayDate(utils, timezone)); diff --git a/packages/x-date-pickers/src/internals/utils/time-utils.ts b/packages/x-date-pickers/src/internals/utils/time-utils.ts index 01faa1cf7862..b833de786fb7 100644 --- a/packages/x-date-pickers/src/internals/utils/time-utils.ts +++ b/packages/x-date-pickers/src/internals/utils/time-utils.ts @@ -11,9 +11,9 @@ export const isInternalTimeView = ( export type Meridiem = 'am' | 'pm'; -export const getMeridiem = ( - date: TDate | null, - utils: MuiPickersAdapter, +export const getMeridiem = ( + date: PickerValidDate | null, + utils: MuiPickersAdapter, ): Meridiem | null => { if (!date) { return null; @@ -33,29 +33,23 @@ export const convertValueToMeridiem = (value: number, meridiem: Meridiem | null, return value; }; -export const convertToMeridiem = ( - time: TDate, +export const convertToMeridiem = ( + time: PickerValidDate, meridiem: Meridiem, ampm: boolean, - utils: MuiPickersAdapter, -) => { + utils: MuiPickersAdapter, +): PickerValidDate => { const newHoursAmount = convertValueToMeridiem(utils.getHours(time), meridiem, ampm); return utils.setHours(time, newHoursAmount); }; -export const getSecondsInDay = ( - date: TDate, - utils: MuiPickersAdapter, -) => { +export const getSecondsInDay = (date: PickerValidDate, utils: MuiPickersAdapter) => { return utils.getHours(date) * 3600 + utils.getMinutes(date) * 60 + utils.getSeconds(date); }; export const createIsAfterIgnoreDatePart = - ( - disableIgnoringDatePartForTimeValidation: boolean, - utils: MuiPickersAdapter, - ) => - (dateLeft: TDate, dateRight: TDate) => { + (disableIgnoringDatePartForTimeValidation: boolean, utils: MuiPickersAdapter) => + (dateLeft: PickerValidDate, dateRight: PickerValidDate) => { if (disableIgnoringDatePartForTimeValidation) { return utils.isAfter(dateLeft, dateRight); } @@ -63,8 +57,8 @@ export const createIsAfterIgnoreDatePart = return getSecondsInDay(dateLeft, utils) > getSecondsInDay(dateRight, utils); }; -export const resolveTimeFormat = ( - utils: MuiPickersAdapter, +export const resolveTimeFormat = ( + utils: MuiPickersAdapter, { format, views, ampm }: { format?: string; views: readonly TimeView[]; ampm: boolean }, ) => { if (format != null) { diff --git a/packages/x-date-pickers/src/internals/utils/valueManagers.ts b/packages/x-date-pickers/src/internals/utils/valueManagers.ts index 658b5b1e5138..3e507fe925c1 100644 --- a/packages/x-date-pickers/src/internals/utils/valueManagers.ts +++ b/packages/x-date-pickers/src/internals/utils/valueManagers.ts @@ -4,7 +4,6 @@ import { TimeValidationError, DateTimeValidationError, FieldSection, - PickerValidDate, } from '../../models'; import type { FieldValueManager } from '../hooks/useField'; import { areDatesEqual, getTodayDate, replaceInvalidDateByNull } from './date-utils'; @@ -16,9 +15,8 @@ import { export type SingleItemPickerValueManager< TValue = any, - TDate extends PickerValidDate = any, TError extends DateValidationError | TimeValidationError | DateTimeValidationError = any, -> = PickerValueManager; +> = PickerValueManager; export const singleItemValueManager: SingleItemPickerValueManager = { emptyValue: null, @@ -45,7 +43,7 @@ export const singleItemValueManager: SingleItemPickerValueManager = { value == null ? null : utils.setTimezone(value, timezone), }; -export const singleItemFieldValueManager: FieldValueManager = { +export const singleItemFieldValueManager: FieldValueManager = { updateReferenceValue: (utils, value, prevReferenceValue) => value == null || !utils.isValid(value) ? prevReferenceValue : value, getSectionsFromValue: (utils, date, prevSections, getSectionsFromDate) => { diff --git a/packages/x-date-pickers/src/locales/utils/getPickersLocalization.ts b/packages/x-date-pickers/src/locales/utils/getPickersLocalization.ts index bc791367a8a2..598e90d7079e 100644 --- a/packages/x-date-pickers/src/locales/utils/getPickersLocalization.ts +++ b/packages/x-date-pickers/src/locales/utils/getPickersLocalization.ts @@ -13,15 +13,15 @@ export const getPickersLocalization = (pickersTranslations: Partial(params: { - utils: MuiPickersAdapter; +export const buildGetOpenDialogAriaText = (params: { + utils: MuiPickersAdapter; formatKey: keyof AdapterFormats; contextTranslation: (formattedValue: string | null) => string; propsTranslation: ((formattedValue: string | null) => string) | undefined; }) => { const { utils, formatKey, contextTranslation, propsTranslation } = params; - return (value: TDate | null) => { + return (value: PickerValidDate | null) => { const formattedValue = value !== null && utils.isValid(value) ? utils.format(value, formatKey) : null; const translation = propsTranslation ?? contextTranslation; diff --git a/packages/x-date-pickers/src/models/adapters.ts b/packages/x-date-pickers/src/models/adapters.ts index 17c58ab20d99..3f038b208532 100644 --- a/packages/x-date-pickers/src/models/adapters.ts +++ b/packages/x-date-pickers/src/models/adapters.ts @@ -155,11 +155,11 @@ export type AdapterOptions = { locale?: TLocale; } & PropertyIfNotNever<'instance', TInstance>; -export type DateBuilderReturnType = [T] extends [null] +export type DateBuilderReturnType = [T] extends [null] ? null - : TDate; + : PickerValidDate; -export interface MuiPickersAdapter { +export interface MuiPickersAdapter { /** * A boolean confirming that the adapter used is an MUI adapter. */ @@ -183,49 +183,45 @@ export interface MuiPickersAdapter * Create a date in the date library format. * If no `value` parameter is provided, creates a date with the current timestamp. * If a `value` parameter is provided, pass it to the date library to try to parse it. - * @template TDate * @param {string | null | undefined} value The optional value to parse. * @param {PickersTimezone} timezone The timezone of the date. Default: "default" - * @returns {TDate | null} The parsed date. + * @returns {PickerValidDate | null} The parsed date. */ date( value?: T, timezone?: PickersTimezone, - ): DateBuilderReturnType; + ): DateBuilderReturnType; /** * Creates an invalid date in the date library format. - * @returns {TDate} The invalid date. + * @returns {PickerValidDate} The invalid date. */ - getInvalidDate(): TDate; + getInvalidDate(): PickerValidDate; /** * Extracts the timezone from a date. - * @template TDate - * @param {TDate} value The date from which we want to get the timezone. + * @param {PickerValidDate | null} value The date from which we want to get the timezone. + * @returns {PickerValidDate} The timezone of the date. */ - getTimezone(value: TDate | null): string; + getTimezone(value: PickerValidDate | null): PickersTimezone; /** * Convert a date to another timezone. - * @template TDate - * @param {TDate} value The date to convert. + * @param {PickerValidDate} value The date to convert. * @param {PickersTimezone} timezone The timezone to convert the date to. - * @returns {TDate} The converted date. + * @returns {PickerValidDate} The converted date. */ - setTimezone(value: TDate, timezone: PickersTimezone): TDate; + setTimezone(value: PickerValidDate, timezone: PickersTimezone): PickerValidDate; /** * Convert a date in the library format into a JavaScript `Date` object. - * @template TDate - * @param {TDate} value The value to convert. - * @returns {Date} the JavaScript date. + * @param {PickerValidDate} value The value to convert. + * @returns {PickerValidDate} the JavaScript date. */ - toJsDate(value: TDate): Date; + toJsDate(value: PickerValidDate): Date; /** * Parse a string date in a specific format. - * @template TDate * @param {string} value The string date to parse. * @param {string} format The format in which the string date is. - * @returns {TDate | null} The parsed date. + * @returns {PickerValidDate | null} The parsed date. */ - parse(value: string, format: string): TDate | null; + parse(value: string, format: string): PickerValidDate | null; /** * Get the code of the locale currently used by the adapter. * @returns {string} The code of the locale. @@ -244,26 +240,24 @@ export interface MuiPickersAdapter expandFormat(format: string): string; /** * Check if the date is valid. - * @param {TDate | null} value The value to test. + * @param {PickerValidDate | null} value The value to test. * @returns {boolean} `true` if the value is a valid date according to the date library. */ - isValid(value: TDate | null): boolean; + isValid(value: PickerValidDate | null): boolean; /** * Format a date using an adapter format string (see the `AdapterFormats` interface) - * @template TDate - * @param {TDate} value The date to format. + * @param {PickerValidDate} value The date to format. * @param {keyof AdapterFormats} formatKey The formatKey to use. * @returns {string} The stringify date. */ - format(value: TDate, formatKey: keyof AdapterFormats): string; + format(value: PickerValidDate, formatKey: keyof AdapterFormats): string; /** * Format a date using a format of the date library. - * @template TDate - * @param {TDate} value The date to format. + * @param {PickerValidDate} value The date to format. * @param {string} formatString The format to use. * @returns {string} The stringify date. */ - formatByString(value: TDate, formatString: string): string; + formatByString(value: PickerValidDate, formatString: string): string; /** * Format a number to be rendered in the clock. * Is being used in hijri and jalali adapters. @@ -273,355 +267,310 @@ export interface MuiPickersAdapter formatNumber(numberToFormat: string): string; /** * Check if the two dates are equal (e.g: they represent the same timestamp). - * @param {TDate | null} value The reference date. - * @param {TDate | null} comparing The date to compare with the reference date. + * @param {PickerValidDate | null} value The reference date. + * @param {PickerValidDate | null} comparing The date to compare with the reference date. * @returns {boolean} `true` if the two dates are equal. */ - isEqual(value: TDate | null, comparing: TDate | null): boolean; + isEqual(value: PickerValidDate | null, comparing: PickerValidDate | null): boolean; /** * Check if the two dates are in the same year (using the timezone of the reference date). - * @template TDate - * @param {TDate} value The reference date. - * @param {TDate} comparing The date to compare with the reference date. + * @param {PickerValidDate} value The reference date. + * @param {PickerValidDate} comparing The date to compare with the reference date. * @returns {boolean} `true` if the two dates are in the same year. */ - isSameYear(value: TDate, comparing: TDate): boolean; + isSameYear(value: PickerValidDate, comparing: PickerValidDate): boolean; /** * Check if the two dates are in the same month (using the timezone of the reference date). - * @template TDate - * @param {TDate} value The reference date. - * @param {TDate} comparing The date to compare with the reference date. + * @param {PickerValidDate} value The reference date. + * @param {PickerValidDate} comparing The date to compare with the reference date. * @returns {boolean} `true` if the two dates are in the same month. */ - isSameMonth(value: TDate, comparing: TDate): boolean; + isSameMonth(value: PickerValidDate, comparing: PickerValidDate): boolean; /** * Check if the two dates are in the same day (using the timezone of the reference date). - * @template TDate - * @param {TDate} value The reference date. - * @param {TDate} comparing The date to compare with the reference date. + * @param {PickerValidDate} value The reference date. + * @param {PickerValidDate} comparing The date to compare with the reference date. * @returns {boolean} `true` if the two dates are in the same day. */ - isSameDay(value: TDate, comparing: TDate): boolean; + isSameDay(value: PickerValidDate, comparing: PickerValidDate): boolean; /** * Check if the two dates are at the same hour (using the timezone of the reference date). - * @template TDate - * @param {TDate} value The reference date. - * @param {TDate} comparing The date to compare with the reference date. + * @param {PickerValidDate} value The reference date. + * @param {PickerValidDate} comparing The date to compare with the reference date. * @returns {boolean} `true` if the two dates are in the same hour. */ - isSameHour(value: TDate, comparing: TDate): boolean; + isSameHour(value: PickerValidDate, comparing: PickerValidDate): boolean; /** * Check if the reference date is after the second date. - * @template TDate - * @param {TDate} value The reference date. - * @param {TDate} comparing The date to compare with the reference date. + * @param {PickerValidDate} value The reference date. + * @param {PickerValidDate} comparing The date to compare with the reference date. * @returns {boolean} `true` if the reference date is after the second date. */ - isAfter(value: TDate, comparing: TDate): boolean; + isAfter(value: PickerValidDate, comparing: PickerValidDate): boolean; // TODO v7: Consider adding a `unit` param to `isAfter` and drop this method. /** * Check if the year of the reference date is after the year of the second date (using the timezone of the reference date). - * @template TDate - * @param {TDate} value The reference date. - * @param {TDate} comparing The date to compare with the reference date. + * @param {PickerValidDate} value The reference date. + * @param {PickerValidDate} comparing The date to compare with the reference date. * @returns {boolean} `true` if the year of the reference date is after the year of the second date. */ - isAfterYear(value: TDate, comparing: TDate): boolean; + isAfterYear(value: PickerValidDate, comparing: PickerValidDate): boolean; // TODO v7: Consider adding a `unit` param to `isAfter` and drop this method. /** * Check if the day of the reference date is after the day of the second date (using the timezone of the reference date). - * @template TDate - * @param {TDate} value The reference date. - * @param {TDate} comparing The date to compare with the reference date. + * @param {PickerValidDate} value The reference date. + * @param {PickerValidDate} comparing The date to compare with the reference date. * @returns {boolean} `true` if the day of the reference date is after the day of the second date. */ - isAfterDay(value: TDate, comparing: TDate): boolean; + isAfterDay(value: PickerValidDate, comparing: PickerValidDate): boolean; /** * Check if the reference date is before the second date. - * @template TDate - * @param {TDate} value The reference date. - * @param {TDate} comparing The date to compare with the reference date. + * @param {PickerValidDate} value The reference date. + * @param {PickerValidDate} comparing The date to compare with the reference date. * @returns {boolean} `true` if the reference date is before the second date. */ - isBefore(value: TDate, comparing: TDate): boolean; + isBefore(value: PickerValidDate, comparing: PickerValidDate): boolean; // TODO v7: Consider adding a `unit` param to `isBefore` and drop this method. /** * Check if the year of the reference date is before the year of the second date (using the timezone of the reference date). - * @template TDate - * @param {TDate} value The reference date. - * @param {TDate} comparing The date to compare with the reference date. + * @param {PickerValidDate} value The reference date. + * @param {PickerValidDate} comparing The date to compare with the reference date. * @returns {boolean} `true` if the year of the reference date is before the year of the second date. */ - isBeforeYear(value: TDate, comparing: TDate): boolean; + isBeforeYear(value: PickerValidDate, comparing: PickerValidDate): boolean; // TODO v7: Consider adding a `unit` param to `isBefore` and drop this method. /** * Check if the day of the reference date is before the day of the second date (using the timezone of the reference date). - * @template TDate - * @param {TDate} value The reference date. - * @param {TDate} comparing The date to compare with the reference date. + * @param {PickerValidDate} value The reference date. + * @param {PickerValidDate} comparing The date to compare with the reference date. * @returns {boolean} `true` if the day of the reference date is before the day of the second date. */ - isBeforeDay(value: TDate, comparing: TDate): boolean; + isBeforeDay(value: PickerValidDate, comparing: PickerValidDate): boolean; /** * Check if the value is within the provided range. - * @template TDate - * @param {TDate} value The value to test. - * @param {[TDate, TDate]} range The range in which the value should be. + * @param {PickerValidDate} value The value to test. + * @param {[PickerValidDate, PickerValidDate]} range The range in which the value should be. * @returns {boolean} `true` if the value is within the provided range. */ - isWithinRange(value: TDate, range: [TDate, TDate]): boolean; + isWithinRange(value: PickerValidDate, range: [PickerValidDate, PickerValidDate]): boolean; /** * Return the start of the year for the given date. - * @template TDate - * @param {TDate} value The original date. - * @returns {TDate} The start of the year of the given date. + * @param {PickerValidDate} value The original date. + * @returns {PickerValidDate} The start of the year of the given date. */ - startOfYear(value: TDate): TDate; + startOfYear(value: PickerValidDate): PickerValidDate; /** * Return the start of the month for the given date. - * @template TDate - * @param {TDate} value The original date. - * @returns {TDate} The start of the month of the given date. + * @param {PickerValidDate} value The original date. + * @returns {PickerValidDate} The start of the month of the given date. */ - startOfMonth(value: TDate): TDate; + startOfMonth(value: PickerValidDate): PickerValidDate; /** * Return the start of the week for the given date. - * @template TDate - * @param {TDate} value The original date. - * @returns {TDate} The start of the week of the given date. + * @param {PickerValidDate} value The original date. + * @returns {PickerValidDate} The start of the week of the given date. */ - startOfWeek(value: TDate): TDate; + startOfWeek(value: PickerValidDate): PickerValidDate; /** * Return the start of the day for the given date. - * @template TDate - * @param {TDate} value The original date. - * @returns {TDate} The start of the day of the given date. + * @param {PickerValidDate} value The original date. + * @returns {PickerValidDate} The start of the day of the given date. */ - startOfDay(value: TDate): TDate; + startOfDay(value: PickerValidDate): PickerValidDate; /** * Return the end of the year for the given date. - * @template TDate - * @param {TDate} value The original date. - * @returns {TDate} The end of the year of the given date. + * @param {PickerValidDate} value The original date. + * @returns {PickerValidDate} The end of the year of the given date. */ - endOfYear(value: TDate): TDate; + endOfYear(value: PickerValidDate): PickerValidDate; /** * Return the end of the month for the given date. - * @template TDate - * @param {TDate} value The original date. - * @returns {TDate} The end of the month of the given date. + * @param {PickerValidDate} value The original date. + * @returns {PickerValidDate} The end of the month of the given date. */ - endOfMonth(value: TDate): TDate; + endOfMonth(value: PickerValidDate): PickerValidDate; /** * Return the end of the week for the given date. - * @template TDate - * @param {TDate} value The original date. - * @returns {TDate} The end of the week of the given date. + * @param {PickerValidDate} value The original date. + * @returns {PickerValidDate} The end of the week of the given date. */ - endOfWeek(value: TDate): TDate; + endOfWeek(value: PickerValidDate): PickerValidDate; /** * Return the end of the day for the given date. - * @template TDate - * @param {TDate} value The original date. - * @returns {TDate} The end of the day of the given date. + * @param {PickerValidDate} value The original date. + * @returns {PickerValidDate} The end of the day of the given date. */ - endOfDay(value: TDate): TDate; + endOfDay(value: PickerValidDate): PickerValidDate; /** * Add the specified number of years to the given date. - * @template TDate - * @param {TDate} value The date to be changed. + * @param {PickerValidDate} value The date to be changed. * @param {number} amount The amount of years to be added. - * @returns {TDate} The new date with the years added. + * @returns {PickerValidDate} The new date with the years added. */ - addYears(value: TDate, amount: number): TDate; + addYears(value: PickerValidDate, amount: number): PickerValidDate; /** * Add the specified number of months to the given date. - * @template TDate - * @param {TDate} value The date to be changed. + * @param {PickerValidDate} value The date to be changed. * @param {number} amount The amount of months to be added. - * @returns {TDate} The new date with the months added. + * @returns {PickerValidDate} The new date with the months added. */ - addMonths(value: TDate, amount: number): TDate; + addMonths(value: PickerValidDate, amount: number): PickerValidDate; /** * Add the specified number of weeks to the given date. - * @template TDate - * @param {TDate} value The date to be changed. + * @param {PickerValidDate} value The date to be changed. * @param {number} amount The amount of weeks to be added. - * @returns {TDate} The new date with the weeks added. + * @returns {PickerValidDate} The new date with the weeks added. */ - addWeeks(value: TDate, amount: number): TDate; + addWeeks(value: PickerValidDate, amount: number): PickerValidDate; /** * Add the specified number of days to the given date. - * @template TDate - * @param {TDate} value The date to be changed. + * @param {PickerValidDate} value The date to be changed. * @param {number} amount The amount of days to be added. - * @returns {TDate} The new date with the days added. + * @returns {PickerValidDate} The new date with the days added. */ - addDays(value: TDate, amount: number): TDate; + addDays(value: PickerValidDate, amount: number): PickerValidDate; /** * Add the specified number of hours to the given date. - * @template TDate - * @param {TDate} value The date to be changed. + * @param {PickerValidDate} value The date to be changed. * @param {number} amount The amount of hours to be added. - * @returns {TDate} The new date with the hours added. + * @returns {PickerValidDate} The new date with the hours added. */ - addHours(value: TDate, amount: number): TDate; + addHours(value: PickerValidDate, amount: number): PickerValidDate; /** * Add the specified number of minutes to the given date. - * @template TDate - * @param {TDate} value The date to be changed. + * @param {PickerValidDate} value The date to be changed. * @param {number} amount The amount of minutes to be added. - * @returns {TDate} The new date with the minutes added. + * @returns {PickerValidDate} The new date with the minutes added. */ - addMinutes(value: TDate, amount: number): TDate; + addMinutes(value: PickerValidDate, amount: number): PickerValidDate; /** * Add the specified number of seconds to the given date. - * @template TDate - * @param {TDate} value The date to be changed. + * @param {PickerValidDate} value The date to be changed. * @param {number} amount The amount of seconds to be added. - * @returns {TDate} The new date with the seconds added. + * @returns {PickerValidDate} The new date with the seconds added. */ - addSeconds(value: TDate, amount: number): TDate; + addSeconds(value: PickerValidDate, amount: number): PickerValidDate; /** * Get the year of the given date. - * @template TDate - * @param {TDate} value The given date. + * @param {PickerValidDate} value The given date. * @returns {number} The year of the given date. */ - getYear(value: TDate): number; + getYear(value: PickerValidDate): number; /** * Get the month of the given date. * The value is 0-based, in the Gregorian calendar January = 0, February = 1, ... - * @template TDate - * @param {TDate} value The given date. + * @param {PickerValidDate} value The given date. * @returns {number} The month of the given date. */ - getMonth(value: TDate): number; + getMonth(value: PickerValidDate): number; /** * Get the date (e.g: the day in the month) of the given date. - * @template TDate - * @param {TDate} value The given date. + * @param {PickerValidDate} value The given date. * @returns {number} The date of the given date. */ - getDate(value: TDate): number; + getDate(value: PickerValidDate): number; /** * Get the hours of the given date. - * @template TDate - * @param {TDate} value The given date. + * @param {PickerValidDate} value The given date. * @returns {number} The hours of the given date. */ - getHours(value: TDate): number; + getHours(value: PickerValidDate): number; /** * Get the minutes of the given date. - * @template TDate - * @param {TDate} value The given date. + * @param {PickerValidDate} value The given date. * @returns {number} The minutes of the given date. */ - getMinutes(value: TDate): number; + getMinutes(value: PickerValidDate): number; /** * Get the seconds of the given date. - * @template TDate - * @param {TDate} value The given date. + * @param {PickerValidDate} value The given date. * @returns {number} The seconds of the given date. */ - getSeconds(value: TDate): number; + getSeconds(value: PickerValidDate): number; /** * Get the milliseconds of the given date. - * @template TDate - * @param {TDate} value The given date. + * @param {PickerValidDate} value The given date. * @returns {number} The milliseconds of the given date. */ - getMilliseconds(value: TDate): number; + getMilliseconds(value: PickerValidDate): number; /** * Set the year to the given date. - * @template TDate - * @param {TDate} value The date to be changed. + * @param {PickerValidDate} value The date to be changed. * @param {number} year The year of the new date. - * @returns {TDate} The new date with the year set. + * @returns {PickerValidDate} The new date with the year set. */ - setYear(value: TDate, year: number): TDate; + setYear(value: PickerValidDate, year: number): PickerValidDate; /** * Set the month to the given date. - * @template TDate - * @param {TDate} value The date to be changed. + * @param {PickerValidDate} value The date to be changed. * @param {number} month The month of the new date. - * @returns {TDate} The new date with the month set. + * @returns {PickerValidDate} The new date with the month set. */ - setMonth(value: TDate, month: number): TDate; + setMonth(value: PickerValidDate, month: number): PickerValidDate; /** * Set the date (e.g: the day in the month) to the given date. - * @template TDate - * @param {TDate} value The date to be changed. + * @param {PickerValidDate} value The date to be changed. * @param {number} date The date of the new date. - * @returns {TDate} The new date with the date set. + * @returns {PickerValidDate} The new date with the date set. */ - setDate(value: TDate, date: number): TDate; + setDate(value: PickerValidDate, date: number): PickerValidDate; /** * Set the hours to the given date. - * @template TDate - * @param {TDate} value The date to be changed. + * @param {PickerValidDate} value The date to be changed. * @param {number} hours The hours of the new date. - * @returns {TDate} The new date with the hours set. + * @returns {PickerValidDate} The new date with the hours set. */ - setHours(value: TDate, hours: number): TDate; + setHours(value: PickerValidDate, hours: number): PickerValidDate; /** * Set the minutes to the given date. - * @template TDate - * @param {TDate} value The date to be changed. + * @param {PickerValidDate} value The date to be changed. * @param {number} minutes The minutes of the new date. - * @returns {TDate} The new date with the minutes set. + * @returns {PickerValidDate} The new date with the minutes set. */ - setMinutes(value: TDate, minutes: number): TDate; + setMinutes(value: PickerValidDate, minutes: number): PickerValidDate; /** * Set the seconds to the given date. - * @template TDate - * @param {TDate} value The date to be changed. + * @param {PickerValidDate} value The date to be changed. * @param {number} seconds The seconds of the new date. - * @returns {TDate} The new date with the seconds set. + * @returns {PickerValidDate} The new date with the seconds set. */ - setSeconds(value: TDate, seconds: number): TDate; + setSeconds(value: PickerValidDate, seconds: number): PickerValidDate; /** * Set the milliseconds to the given date. - * @template TDate - * @param {TDate} value The date to be changed. + * @param {PickerValidDate} value The date to be changed. * @param {number} milliseconds The milliseconds of the new date. - * @returns {TDate} The new date with the milliseconds set. + * @returns {PickerValidDate} The new date with the milliseconds set. */ - setMilliseconds(value: TDate, milliseconds: number): TDate; + setMilliseconds(value: PickerValidDate, milliseconds: number): PickerValidDate; /** * Get the number of days in a month of the given date. - * @template TDate - * @param {TDate} value The given date. + * @param {PickerValidDate} value The given date. * @returns {number} The number of days in the month */ - getDaysInMonth(value: TDate): number; + getDaysInMonth(value: PickerValidDate): number; /** * Create a nested list with all the days of the month of the given date grouped by week. - * @template TDate - * @param {TDate} value The given date. - * @returns {TDate[][]} A nested list with all the days of the month grouped by week. + * @param {PickerValidDate} value The given date. + * @returns {PickerValidDate[][]} A nested list with all the days of the month grouped by week. */ - getWeekArray(value: TDate): TDate[][]; + getWeekArray(value: PickerValidDate): PickerValidDate[][]; /** * Get the number of the week of the given date. - * @template TDate - * @param {TDate} value The given date. + * @param {PickerValidDate} value The given date. * @returns {number} The number of the week of the given date. */ - getWeekNumber(value: TDate): number; + getWeekNumber(value: PickerValidDate): number; /** * Get the number of the day of the week of the given date. * The value is 1-based, 1 - first day of the week, 7 - last day of the week. - * @template TDate - * @param {TDate} value The given date. + * @param {PickerValidDate} value The given date. * @returns {number} The number of the day of the week of the given date. */ - getDayOfWeek(value: TDate): number; + getDayOfWeek(value: PickerValidDate): number; /** * Create a list with all the years between the start and the end date. - * @template TDate - * @param {[TDate, TDate]} range The range of year to create. - * @returns {TDate[]} List of all the years between the start end the end date. + * @param {[PickerValidDate, PickerValidDate]} range The range of year to create. + * @returns {PickerValidDate[]} List of all the years between the start end the end date. */ - getYearRange(range: [TDate, TDate]): TDate[]; + getYearRange(range: [PickerValidDate, PickerValidDate]): PickerValidDate[]; } diff --git a/packages/x-date-pickers/src/models/fields.ts b/packages/x-date-pickers/src/models/fields.ts index fbd88d920e5b..9d853e8d2ed8 100644 --- a/packages/x-date-pickers/src/models/fields.ts +++ b/packages/x-date-pickers/src/models/fields.ts @@ -11,7 +11,6 @@ import type { import { ExportedPickersSectionListProps, PickersSectionListRef } from '../PickersSectionList'; import type { UseFieldResponse } from '../internals/hooks/useField'; import type { PickersTextFieldProps } from '../PickersTextField'; -import { PickerValidDate } from './pickers'; // Update PickersComponentAgnosticLocaleText -> viewNames when adding new entries export type FieldSectionType = @@ -167,11 +166,10 @@ type BaseForwardedSingleInputFieldProps = BaseFieldProps & +> = BaseFieldProps & BaseForwardedSingleInputFieldProps; /** diff --git a/packages/x-date-pickers/src/tests/fieldKeyboardInteraction.test.tsx b/packages/x-date-pickers/src/tests/fieldKeyboardInteraction.test.tsx index ee3c5b235f79..c6f5c9471117 100644 --- a/packages/x-date-pickers/src/tests/fieldKeyboardInteraction.test.tsx +++ b/packages/x-date-pickers/src/tests/fieldKeyboardInteraction.test.tsx @@ -18,9 +18,9 @@ import { const testDate = '2018-05-15T09:35:10'; -function updateDate( - date: TDate, - adapter: MuiPickersAdapter, +function updateDate( + date: PickerValidDate, + adapter: MuiPickersAdapter, sectionType: FieldSectionType, diff: number, ) { @@ -41,7 +41,7 @@ function updateDate( case 'meridiem': return adapter.setHours(date, (adapter.getHours(date) + 12 * diff) % 24); default: - return null; + throw new Error('Unsupported section type'); } } @@ -240,7 +240,7 @@ adapterToTest.forEach((adapterName) => { return valueStr; }; - const testKeyPress = ({ + const testKeyPress = ({ key, format, initialValue, @@ -249,8 +249,8 @@ adapterToTest.forEach((adapterName) => { }: { key: string; format: string; - initialValue: TDate; - expectedValue: TDate; + initialValue: PickerValidDate; + expectedValue: PickerValidDate; sectionConfig: ReturnType; }) => { const view = renderWithProps({ diff --git a/packages/x-date-pickers/src/themeAugmentation/props.d.ts b/packages/x-date-pickers/src/themeAugmentation/props.d.ts index c8fc7f3949c2..9fb69436bbad 100644 --- a/packages/x-date-pickers/src/themeAugmentation/props.d.ts +++ b/packages/x-date-pickers/src/themeAugmentation/props.d.ts @@ -17,7 +17,7 @@ import { PickerPopperProps } from '../internals/components/PickersPopper'; import { PickersToolbarProps } from '../internals/components/PickersToolbar'; import { PickersToolbarButtonProps } from '../internals/components/PickersToolbarButton'; import { ExportedPickersToolbarTextProps } from '../internals/components/PickersToolbarText'; -import { DateOrTimeView, PickerValidDate } from '../models'; +import { DateOrTimeView } from '../models'; import { DatePickerProps } from '../DatePicker'; import { ExportedDatePickerToolbarProps } from '../DatePicker/DatePickerToolbar'; @@ -54,25 +54,25 @@ import { import { PickersSectionListProps } from '../PickersSectionList'; export interface PickersComponentsPropsList { - MuiClock: ClockProps; + MuiClock: ClockProps; MuiClockNumber: ClockNumberProps; MuiClockPointer: ClockPointerProps; - MuiDateCalendar: DateCalendarProps; - MuiDateField: DateFieldProps; + MuiDateCalendar: DateCalendarProps; + MuiDateField: DateFieldProps; MuiDatePickerToolbar: ExportedDatePickerToolbarProps; - MuiDateTimeField: DateTimeFieldProps; + MuiDateTimeField: DateTimeFieldProps; MuiDateTimePickerTabs: DateTimePickerTabsProps; MuiDateTimePickerToolbar: ExportedDateTimePickerToolbarProps; - MuiDayCalendar: DayCalendarProps; + MuiDayCalendar: DayCalendarProps; MuiDayCalendarSkeleton: DayCalendarSkeletonProps; - MuiDigitalClock: ExportedDigitalClockProps; - MuiLocalizationProvider: LocalizationProviderProps; - MuiMonthCalendar: MonthCalendarProps; - MuiMultiSectionDigitalClock: MultiSectionDigitalClockProps; + MuiDigitalClock: ExportedDigitalClockProps; + MuiLocalizationProvider: LocalizationProviderProps; + MuiMonthCalendar: MonthCalendarProps; + MuiMultiSectionDigitalClock: MultiSectionDigitalClockProps; MuiMultiSectionDigitalClockSection: ExportedMultiSectionDigitalClockSectionProps; MuiPickersArrowSwitcher: ExportedPickersArrowSwitcherProps; - MuiPickersCalendarHeader: ExportedPickersCalendarHeaderProps; - MuiPickersDay: PickersDayProps; + MuiPickersCalendarHeader: ExportedPickersCalendarHeaderProps; + MuiPickersDay: PickersDayProps; MuiPickersFadeTransitionGroup: PickersFadeTransitionGroupProps; MuiPickersMonth: ExportedPickersMonthProps; MuiPickersPopper: PickerPopperProps; @@ -80,30 +80,30 @@ export interface PickersComponentsPropsList { MuiPickersToolbar: PickersToolbarProps; MuiPickersToolbarButton: PickersToolbarButtonProps; MuiPickersToolbarText: ExportedPickersToolbarTextProps; - MuiPickersLayout: PickersLayoutProps; + MuiPickersLayout: PickersLayoutProps; MuiPickersYear: ExportedPickersYearProps; - MuiTimeClock: TimeClockProps; - MuiTimeField: TimeFieldProps; + MuiTimeClock: TimeClockProps; + MuiTimeField: TimeFieldProps; MuiTimePickerToolbar: ExportedTimePickerToolbarProps; - MuiYearCalendar: YearCalendarProps; + MuiYearCalendar: YearCalendarProps; // Date Pickers - MuiDatePicker: DatePickerProps; - MuiDesktopDatePicker: DesktopDatePickerProps; - MuiMobileDatePicker: MobileDatePickerProps; - MuiStaticDatePicker: StaticDatePickerProps; + MuiDatePicker: DatePickerProps; + MuiDesktopDatePicker: DesktopDatePickerProps; + MuiMobileDatePicker: MobileDatePickerProps; + MuiStaticDatePicker: StaticDatePickerProps; // Time Pickers - MuiTimePicker: TimePickerProps; - MuiDesktopTimePicker: DesktopTimePickerProps; - MuiMobileTimePicker: MobileTimePickerProps; - MuiStaticTimePicker: StaticTimePickerProps; + MuiTimePicker: TimePickerProps; + MuiDesktopTimePicker: DesktopTimePickerProps; + MuiMobileTimePicker: MobileTimePickerProps; + MuiStaticTimePicker: StaticTimePickerProps; // Date Time Pickers - MuiDateTimePicker: DateTimePickerProps; - MuiDesktopDateTimePicker: DesktopDateTimePickerProps; - MuiMobileDateTimePicker: MobileDateTimePickerProps; - MuiStaticDateTimePicker: StaticDateTimePickerProps; + MuiDateTimePicker: DateTimePickerProps; + MuiDesktopDateTimePicker: DesktopDateTimePickerProps; + MuiMobileDateTimePicker: MobileDateTimePickerProps; + MuiStaticDateTimePicker: StaticDateTimePickerProps; // V7 Picker's TextField MuiPickersTextField: PickersTextFieldProps; diff --git a/packages/x-date-pickers/src/timeViewRenderers/timeViewRenderers.tsx b/packages/x-date-pickers/src/timeViewRenderers/timeViewRenderers.tsx index da0f02d44890..d82ea51d018b 100644 --- a/packages/x-date-pickers/src/timeViewRenderers/timeViewRenderers.tsx +++ b/packages/x-date-pickers/src/timeViewRenderers/timeViewRenderers.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { TimeClock, TimeClockProps } from '../TimeClock'; -import { PickerValidDate, TimeView } from '../models'; +import { TimeView } from '../models'; import { DigitalClock, DigitalClockProps } from '../DigitalClock'; import { BaseClockProps } from '../internals/models/props/time'; import { @@ -13,14 +13,14 @@ import type { TimePickerProps } from '../TimePicker/TimePicker.types'; export type TimeViewRendererProps< TView extends TimeViewWithMeridiem, - TComponentProps extends BaseClockProps, + TComponentProps extends BaseClockProps, > = Omit & { view: TView; onViewChange?: (view: TView) => void; views: readonly TView[]; }; -export const renderTimeViewClock = ({ +export const renderTimeViewClock = ({ view, onViewChange, focusedView, @@ -49,8 +49,8 @@ export const renderTimeViewClock = ({ showViewSwitcher, disableIgnoringDatePartForTimeValidation, timezone, -}: TimeViewRendererProps>) => ( - +}: TimeViewRendererProps>) => ( + ({ /> ); -export const renderDigitalClockTimeView = ({ +export const renderDigitalClockTimeView = ({ view, onViewChange, focusedView, @@ -113,9 +113,9 @@ export const renderDigitalClockTimeView = ({ timezone, }: TimeViewRendererProps< Extract, - Omit, 'timeStep'> & Pick, 'timeSteps'> + Omit & Pick >) => ( - + ({ /> ); -export const renderMultiSectionDigitalClockTimeView = ({ +export const renderMultiSectionDigitalClockTimeView = ({ view, onViewChange, focusedView, @@ -176,8 +176,8 @@ export const renderMultiSectionDigitalClockTimeView = >) => ( - +}: TimeViewRendererProps) => ( + - | keyof YearValidationProps - | keyof MonthValidationProps - | keyof DayValidationProps + | keyof BaseDateValidationProps + | keyof YearValidationProps + | keyof MonthValidationProps + | keyof DayValidationProps )[] = [ 'disablePast', 'disableFuture', @@ -25,7 +25,7 @@ export const DATE_VALIDATION_PROP_NAMES: ( export const TIME_VALIDATION_PROP_NAMES: ( | keyof BaseTimeValidationProps - | keyof TimeValidationProps + | keyof TimeValidationProps | 'ampm' )[] = [ 'disablePast', @@ -38,7 +38,7 @@ export const TIME_VALIDATION_PROP_NAMES: ( 'disableIgnoringDatePartForTimeValidation', ]; -export const DATE_TIME_VALIDATION_PROP_NAMES: (keyof DateTimeValidationProps)[] = [ +export const DATE_TIME_VALIDATION_PROP_NAMES: (keyof DateTimeValidationProps)[] = [ 'minDateTime', 'maxDateTime', ]; diff --git a/packages/x-date-pickers/src/validation/useValidation.ts b/packages/x-date-pickers/src/validation/useValidation.ts index 7de1f1b83a08..b09787bed9f0 100644 --- a/packages/x-date-pickers/src/validation/useValidation.ts +++ b/packages/x-date-pickers/src/validation/useValidation.ts @@ -3,25 +3,21 @@ import * as React from 'react'; import useEventCallback from '@mui/utils/useEventCallback'; import { useLocalizationContext } from '../internals/hooks/useUtils'; import { MuiPickersAdapterContextValue } from '../LocalizationProvider/LocalizationProvider'; -import { OnErrorProps, PickersTimezone, PickerValidDate } from '../models'; +import { OnErrorProps, PickersTimezone } from '../models'; import type { PickerValueManager } from '../internals/hooks/usePicker'; -export type Validator = { +export type Validator = { (params: { - adapter: MuiPickersAdapterContextValue; + adapter: MuiPickersAdapterContextValue; value: TValue; timezone: PickersTimezone; props: TValidationProps; }): TError; - valueManager: PickerValueManager; + valueManager: PickerValueManager; }; -interface UseValidationOptions< - TValue, - TDate extends PickerValidDate, - TError, - TValidationProps extends {}, -> extends OnErrorProps { +interface UseValidationOptions + extends OnErrorProps { /** * The value to validate. */ @@ -36,7 +32,7 @@ interface UseValidationOptions< * It is recommended to only use the validator exported by the MUI X packages, * otherwise you may have inconsistent behaviors between the field and the views. */ - validator: Validator; + validator: Validator; /** * The validation props, they differ depending on the component. * For example, the `validateTime` function supports `minTime`, `maxTime`, etc. @@ -67,27 +63,21 @@ interface UseValidationReturnValue { /** * Utility hook to check if a given value is valid based on the provided validation props. - * @template TDate * @template TValue The value type. It will be either the same type as `value` or `null`. It can be in `[start, end]` format in case of range value. * @template TError The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value. - * @param {UseValidationOptions} options The options to configure the hook. + * @param {UseValidationOptions} options The options to configure the hook. * @param {TValue} options.value The value to validate. * @param {PickersTimezone} options.timezone The timezone to use for the validation. - * @param {Validator} options.validator The validator function to use. + * @param {Validator} options.validator The validator function to use. * @param {TValidationProps} options.props The validation props, they differ depending on the component. * @param {(error: TError, value: TValue) => void} options.onError Callback fired when the error associated with the current value changes. */ -export function useValidation< - TValue, - TDate extends PickerValidDate, - TError, - TValidationProps extends {}, ->( - options: UseValidationOptions, +export function useValidation( + options: UseValidationOptions, ): UseValidationReturnValue { const { props, validator, value, timezone, onError } = options; - const adapter = useLocalizationContext(); + const adapter = useLocalizationContext(); const previousValidationErrorRef = React.useRef( validator.valueManager.defaultErrorState, ); diff --git a/packages/x-date-pickers/src/validation/validateDate.ts b/packages/x-date-pickers/src/validation/validateDate.ts index a47967e44d6f..3c53ee7acb38 100644 --- a/packages/x-date-pickers/src/validation/validateDate.ts +++ b/packages/x-date-pickers/src/validation/validateDate.ts @@ -12,23 +12,22 @@ import { singleItemValueManager } from '../internals/utils/valueManagers'; /** * Validation props used by the Date Picker, Date Field and Date Calendar components. */ -export interface ExportedValidateDateProps - extends DayValidationProps, - MonthValidationProps, - YearValidationProps, - BaseDateValidationProps {} +export interface ExportedValidateDateProps + extends DayValidationProps, + MonthValidationProps, + YearValidationProps, + BaseDateValidationProps {} -export interface ValidateDateProps - extends DayValidationProps, - MonthValidationProps, - YearValidationProps, - Required> {} +export interface ValidateDateProps + extends DayValidationProps, + MonthValidationProps, + YearValidationProps, + Required {} export const validateDate: Validator< - any | null, - any, + PickerValidDate | null, DateValidationError, - ValidateDateProps + ValidateDateProps > = ({ props, value, timezone, adapter }): DateValidationError => { if (value === null) { return null; diff --git a/packages/x-date-pickers/src/validation/validateDateTime.ts b/packages/x-date-pickers/src/validation/validateDateTime.ts index fa0968313b3c..34ef257efba2 100644 --- a/packages/x-date-pickers/src/validation/validateDateTime.ts +++ b/packages/x-date-pickers/src/validation/validateDateTime.ts @@ -8,20 +8,17 @@ import { DateTimeValidationProps } from '../internals/models/validation'; /** * Validation props used by the Date Time Picker and Date Time Field components. */ -export interface ExportedValidateDateTimeProps - extends ExportedValidateDateProps, - ExportedValidateTimeProps, - DateTimeValidationProps {} +export interface ExportedValidateDateTimeProps + extends ExportedValidateDateProps, + ExportedValidateTimeProps, + DateTimeValidationProps {} -export interface ValidateDateTimeProps - extends ValidateDateProps, - ValidateTimeProps {} +export interface ValidateDateTimeProps extends ValidateDateProps, ValidateTimeProps {} export const validateDateTime: Validator< - any | null, - any, + PickerValidDate | null, DateTimeValidationError, - ValidateDateTimeProps + ValidateDateTimeProps > = ({ adapter, value, timezone, props }) => { const dateValidationResult = validateDate({ adapter, diff --git a/packages/x-date-pickers/src/validation/validateTime.ts b/packages/x-date-pickers/src/validation/validateTime.ts index 4bf9ae6e1403..2979aa6864e1 100644 --- a/packages/x-date-pickers/src/validation/validateTime.ts +++ b/packages/x-date-pickers/src/validation/validateTime.ts @@ -7,19 +7,14 @@ import { singleItemValueManager } from '../internals/utils/valueManagers'; /** * Validation props used by the Time Picker, Time Field and Clock components. */ -export interface ExportedValidateTimeProps - extends BaseTimeValidationProps, - TimeValidationProps {} +export interface ExportedValidateTimeProps extends BaseTimeValidationProps, TimeValidationProps {} -export interface ValidateTimeProps - extends Required, - TimeValidationProps {} +export interface ValidateTimeProps extends Required, TimeValidationProps {} export const validateTime: Validator< - any | null, - any, + PickerValidDate | null, TimeValidationError, - ValidateTimeProps + ValidateTimeProps > = ({ adapter, value, timezone, props }): TimeValidationError => { if (value === null) { return null; diff --git a/test/utils/pickers/adapters.ts b/test/utils/pickers/adapters.ts index a236fc563a46..2aa34e1d3663 100644 --- a/test/utils/pickers/adapters.ts +++ b/test/utils/pickers/adapters.ts @@ -19,7 +19,7 @@ export type AdapterName = | 'date-fns-jalali'; export const availableAdapters: { - [key in AdapterName]: new (...args: any) => MuiPickersAdapter; + [key in AdapterName]: new (...args: any) => MuiPickersAdapter; } = { 'date-fns': AdapterDateFns, dayjs: AdapterDayjs, @@ -59,4 +59,4 @@ if (/jsdom/.test(window.navigator.userAgent)) { export class AdapterClassToUse extends AdapterClassToExtend {} -export const adapterToUse = new AdapterClassToUse(); +export const adapterToUse = new AdapterClassToUse() as MuiPickersAdapter; diff --git a/test/utils/pickers/describeGregorianAdapter/describeGregorianAdapter.ts b/test/utils/pickers/describeGregorianAdapter/describeGregorianAdapter.ts index 9b457d082181..3fb54da667c5 100644 --- a/test/utils/pickers/describeGregorianAdapter/describeGregorianAdapter.ts +++ b/test/utils/pickers/describeGregorianAdapter/describeGregorianAdapter.ts @@ -1,5 +1,5 @@ import createDescribe from '@mui/internal-test-utils/createDescribe'; -import { MuiPickersAdapter, PickerValidDate } from '@mui/x-date-pickers/models'; +import { MuiPickersAdapter } from '@mui/x-date-pickers/models'; import { testCalculations } from './testCalculations'; import { testLocalization } from './testLocalization'; import { testFormat } from './testFormat'; @@ -8,9 +8,9 @@ import { DescribeGregorianAdapterTestSuiteParams, } from './describeGregorianAdapter.types'; -function innerGregorianDescribeAdapter( - Adapter: new (...args: any) => MuiPickersAdapter, - params: DescribeGregorianAdapterParams, +function innerGregorianDescribeAdapter( + Adapter: new (...args: any) => MuiPickersAdapter, + params: DescribeGregorianAdapterParams, ) { const prepareAdapter = params.prepareAdapter ?? ((adapter) => adapter); @@ -29,7 +29,7 @@ function innerGregorianDescribeAdapter( prepareAdapter(adapterTZ); describe(adapter.lib, () => { - const testSuitParams: DescribeGregorianAdapterTestSuiteParams = { + const testSuitParams: DescribeGregorianAdapterTestSuiteParams = { ...params, adapter, adapterTZ, @@ -42,15 +42,15 @@ function innerGregorianDescribeAdapter( }); } -type Params = [ - Adapter: new (...args: any) => MuiPickersAdapter, - params: DescribeGregorianAdapterParams, +type Params = [ + Adapter: new (...args: any) => MuiPickersAdapter, + params: DescribeGregorianAdapterParams, ]; type DescribeGregorianAdapter = { - (...args: Params): void; - skip: (...args: Params) => void; - only: (...args: Params) => void; + (...args: Params): void; + skip: (...args: Params) => void; + only: (...args: Params) => void; }; export const describeGregorianAdapter = createDescribe( diff --git a/test/utils/pickers/describeGregorianAdapter/describeGregorianAdapter.types.ts b/test/utils/pickers/describeGregorianAdapter/describeGregorianAdapter.types.ts index 2f1c49b76d2d..3840f7db22ad 100644 --- a/test/utils/pickers/describeGregorianAdapter/describeGregorianAdapter.types.ts +++ b/test/utils/pickers/describeGregorianAdapter/describeGregorianAdapter.types.ts @@ -1,21 +1,21 @@ import { MuiPickersAdapter, PickersTimezone, PickerValidDate } from '@mui/x-date-pickers/models'; -export interface DescribeGregorianAdapterParams { - prepareAdapter?: (adapter: MuiPickersAdapter) => void; +export interface DescribeGregorianAdapterParams { + prepareAdapter?: (adapter: MuiPickersAdapter) => void; formatDateTime: string; - getLocaleFromDate?: (value: TDate) => string; + getLocaleFromDate?: (value: PickerValidDate) => string; dateLibInstanceWithTimezoneSupport?: any; setDefaultTimezone: (timezone: PickersTimezone | undefined) => void; frenchLocale: TLocale; } -export interface DescribeGregorianAdapterTestSuiteParams - extends Omit, 'frenchLocale'> { - adapter: MuiPickersAdapter; - adapterTZ: MuiPickersAdapter; - adapterFr: MuiPickersAdapter; +export interface DescribeGregorianAdapterTestSuiteParams + extends Omit, 'frenchLocale'> { + adapter: MuiPickersAdapter; + adapterTZ: MuiPickersAdapter; + adapterFr: MuiPickersAdapter; } -export type DescribeGregorianAdapterTestSuite = ( - params: DescribeGregorianAdapterTestSuiteParams, +export type DescribeGregorianAdapterTestSuite = ( + params: DescribeGregorianAdapterTestSuiteParams, ) => void; diff --git a/test/utils/pickers/describeGregorianAdapter/testCalculations.ts b/test/utils/pickers/describeGregorianAdapter/testCalculations.ts index 10ef8845ec08..8e698658e7e0 100644 --- a/test/utils/pickers/describeGregorianAdapter/testCalculations.ts +++ b/test/utils/pickers/describeGregorianAdapter/testCalculations.ts @@ -10,10 +10,7 @@ import { TEST_DATE_ISO_STRING, TEST_DATE_LOCALE_STRING } from './describeGregori * then we check that both dates have the same hour value. */ // We change to -const expectSameTimeInMonacoTZ = ( - adapter: MuiPickersAdapter, - value: TDate, -) => { +const expectSameTimeInMonacoTZ = (adapter: MuiPickersAdapter, value: PickerValidDate) => { const valueInMonacoTz = adapter.setTimezone(value, 'Europe/Monaco'); expect(adapter.getHours(value)).to.equal(adapter.getHours(valueInMonacoTz)); }; diff --git a/test/utils/pickers/describeHijriAdapter/describeHijriAdapter.ts b/test/utils/pickers/describeHijriAdapter/describeHijriAdapter.ts index 8f5c520b3e15..21b591e25eb9 100644 --- a/test/utils/pickers/describeHijriAdapter/describeHijriAdapter.ts +++ b/test/utils/pickers/describeHijriAdapter/describeHijriAdapter.ts @@ -1,12 +1,12 @@ import createDescribe from '@mui/internal-test-utils/createDescribe'; -import { MuiPickersAdapter, PickerValidDate } from '@mui/x-date-pickers/models'; +import { MuiPickersAdapter } from '@mui/x-date-pickers/models'; import { testCalculations } from './testCalculations'; import { testLocalization } from './testLocalization'; import { testFormat } from './testFormat'; import { DescribeHijriAdapterParams } from './describeHijriAdapter.types'; -function innerJalaliDescribeAdapter( - Adapter: new (...args: any) => MuiPickersAdapter, +function innerJalaliDescribeAdapter( + Adapter: new (...args: any) => MuiPickersAdapter, params: DescribeHijriAdapterParams, ) { const adapter = new Adapter(); diff --git a/test/utils/pickers/describeHijriAdapter/describeHijriAdapter.types.ts b/test/utils/pickers/describeHijriAdapter/describeHijriAdapter.types.ts index 09c2da3616a8..588c5a6d7b99 100644 --- a/test/utils/pickers/describeHijriAdapter/describeHijriAdapter.types.ts +++ b/test/utils/pickers/describeHijriAdapter/describeHijriAdapter.types.ts @@ -1,10 +1,8 @@ -import { MuiPickersAdapter, PickerValidDate } from '@mui/x-date-pickers/models'; +import { MuiPickersAdapter } from '@mui/x-date-pickers/models'; export interface DescribeHijriAdapterParams { before?: () => void; after?: () => void; } -export type DescribeHijriAdapterTestSuite = (params: { - adapter: MuiPickersAdapter; -}) => void; +export type DescribeHijriAdapterTestSuite = (params: { adapter: MuiPickersAdapter }) => void; diff --git a/test/utils/pickers/describeJalaliAdapter/describeJalaliAdapter.ts b/test/utils/pickers/describeJalaliAdapter/describeJalaliAdapter.ts index 15c7968352d7..b31048d1fcd2 100644 --- a/test/utils/pickers/describeJalaliAdapter/describeJalaliAdapter.ts +++ b/test/utils/pickers/describeJalaliAdapter/describeJalaliAdapter.ts @@ -1,12 +1,12 @@ import createDescribe from '@mui/internal-test-utils/createDescribe'; -import { MuiPickersAdapter, PickerValidDate } from '@mui/x-date-pickers/models'; +import { MuiPickersAdapter } from '@mui/x-date-pickers/models'; import { testCalculations } from './testCalculations'; import { testLocalization } from './testLocalization'; import { testFormat } from './testFormat'; import { DescribeJalaliAdapterParams } from './describeJalaliAdapter.types'; -function innerJalaliDescribeAdapter( - Adapter: new (...args: any) => MuiPickersAdapter, +function innerJalaliDescribeAdapter( + Adapter: new (...args: any) => MuiPickersAdapter, params: DescribeJalaliAdapterParams, ) { const adapter = new Adapter(); diff --git a/test/utils/pickers/describeJalaliAdapter/describeJalaliAdapter.types.ts b/test/utils/pickers/describeJalaliAdapter/describeJalaliAdapter.types.ts index 176319483313..12c1df5edf5d 100644 --- a/test/utils/pickers/describeJalaliAdapter/describeJalaliAdapter.types.ts +++ b/test/utils/pickers/describeJalaliAdapter/describeJalaliAdapter.types.ts @@ -1,10 +1,8 @@ -import { MuiPickersAdapter, PickerValidDate } from '@mui/x-date-pickers/models'; +import { MuiPickersAdapter } from '@mui/x-date-pickers/models'; export interface DescribeJalaliAdapterParams { before?: () => void; after?: () => void; } -export type DescribeJalaliAdapterTestSuite = (params: { - adapter: MuiPickersAdapter; -}) => void; +export type DescribeJalaliAdapterTestSuite = (params: { adapter: MuiPickersAdapter }) => void; diff --git a/test/utils/pickers/describeRangeValidation/testTextFieldKeyboardRangeValidation.tsx b/test/utils/pickers/describeRangeValidation/testTextFieldKeyboardRangeValidation.tsx index 3d0c49c30f1a..37ce52823b4a 100644 --- a/test/utils/pickers/describeRangeValidation/testTextFieldKeyboardRangeValidation.tsx +++ b/test/utils/pickers/describeRangeValidation/testTextFieldKeyboardRangeValidation.tsx @@ -113,7 +113,7 @@ export const testTextFieldKeyboardRangeValidation: DescribeRangeValidationTestSu } act(() => { - setValue(adapterToUse.date(past)); + setValue(past); }); expect(onErrorMock.callCount).to.equal(1); @@ -121,7 +121,7 @@ export const testTextFieldKeyboardRangeValidation: DescribeRangeValidationTestSu testInvalidStatus([true, false], isSingleInput); act(() => { - setValue(adapterToUse.date(past), { setEndDate: true }); + setValue(past, { setEndDate: true }); }); expect(onErrorMock.callCount).to.equal(2); @@ -129,7 +129,7 @@ export const testTextFieldKeyboardRangeValidation: DescribeRangeValidationTestSu testInvalidStatus([true, true], isSingleInput); act(() => { - setValue(adapterToUse.date(now)); + setValue(now); }); expect(onErrorMock.callCount).to.equal(3); expect(onErrorMock.lastCall.args[0]).to.deep.equal([null, 'disablePast']); @@ -154,7 +154,7 @@ export const testTextFieldKeyboardRangeValidation: DescribeRangeValidationTestSu } act(() => { - setValue(adapterToUse.date(future), { setEndDate: true }); + setValue(future, { setEndDate: true }); }); expect(onErrorMock.callCount).to.equal(1); @@ -162,7 +162,7 @@ export const testTextFieldKeyboardRangeValidation: DescribeRangeValidationTestSu testInvalidStatus([false, true], isSingleInput); act(() => { - setValue(adapterToUse.date(future)); + setValue(future); }); expect(onErrorMock.callCount).to.equal(2); @@ -170,7 +170,7 @@ export const testTextFieldKeyboardRangeValidation: DescribeRangeValidationTestSu testInvalidStatus([true, true], isSingleInput); act(() => { - setValue(adapterToUse.date(now)); + setValue(now); }); expect(onErrorMock.callCount).to.equal(3); diff --git a/test/utils/pickers/describeValue/describeValue.tsx b/test/utils/pickers/describeValue/describeValue.tsx index 26d42b7204c7..766fe523f9d0 100644 --- a/test/utils/pickers/describeValue/describeValue.tsx +++ b/test/utils/pickers/describeValue/describeValue.tsx @@ -24,8 +24,7 @@ function innerDescribeValue( const { defaultProps, render, clock, componentFamily } = options; function WrappedElementToTest( - props: BasePickerInputProps & - UsePickerValueNonStaticProps & { hook?: any }, + props: BasePickerInputProps & UsePickerValueNonStaticProps & { hook?: any }, ) { const { hook, ...other } = props; const hookResult = hook?.(props); diff --git a/test/utils/pickers/misc.ts b/test/utils/pickers/misc.ts index f5fcf9c40ee7..76e9ba1d5068 100644 --- a/test/utils/pickers/misc.ts +++ b/test/utils/pickers/misc.ts @@ -56,19 +56,13 @@ export const getExpectedOnChangeCount = ( return getChangeCountForComponentFamily(componentFamily); }; -export const getDateOffset = ( - adapter: MuiPickersAdapter, - date: TDate, -) => { +export const getDateOffset = (adapter: MuiPickersAdapter, date: PickerValidDate) => { const utcHour = adapter.getHours(adapter.setTimezone(adapter.startOfDay(date), 'UTC')); const cleanUtcHour = utcHour > 12 ? 24 - utcHour : -utcHour; return cleanUtcHour * 60; }; -export const formatFullTimeValue = ( - adapter: MuiPickersAdapter, - value: TDate, -) => { +export const formatFullTimeValue = (adapter: MuiPickersAdapter, value: PickerValidDate) => { const hasMeridiem = adapter.is12HourCycleInCurrentLocale(); return adapter.format(value, hasMeridiem ? 'fullTime12h' : 'fullTime24h'); }; diff --git a/test/utils/pickers/viewHandlers.ts b/test/utils/pickers/viewHandlers.ts index 84086aa10029..8c78a199e8cc 100644 --- a/test/utils/pickers/viewHandlers.ts +++ b/test/utils/pickers/viewHandlers.ts @@ -1,12 +1,10 @@ import { fireEvent, fireTouchChangedEvent, screen } from '@mui/internal-test-utils'; import { getClockTouchEvent, formatFullTimeValue } from 'test/utils/pickers'; -import { MuiPickersAdapter, TimeView } from '@mui/x-date-pickers/models'; +import { MuiPickersAdapter, PickerValidDate, TimeView } from '@mui/x-date-pickers/models'; import { formatMeridiem } from '@mui/x-date-pickers/internals'; -type TDate = any; - interface ViewHandler { - setViewValue: (utils: MuiPickersAdapter, viewValue: TDate, view?: TView) => void; + setViewValue: (utils: MuiPickersAdapter, viewValue: PickerValidDate, view?: TView) => void; } export const timeClockHandler: ViewHandler = {