From 5d145b6a2475091dee8aad8061fb30e394293b5c Mon Sep 17 00:00:00 2001 From: flavien Date: Tue, 5 Nov 2024 17:45:38 +0100 Subject: [PATCH 01/14] [pickers] Replace TValue and TSection generics with TIsRange --- .../custom-field/BrowserV7Field.tsx | 10 +- .../BrowserV7MultiInputRangeField.js | 1 - .../BrowserV7MultiInputRangeField.tsx | 11 +- .../BrowserV7SingleInputRangeField.tsx | 15 +- .../date-pickers/custom-field/JoyV6Field.tsx | 10 +- .../custom-field/JoyV6MultiInputRangeField.js | 1 - .../JoyV6MultiInputRangeField.tsx | 11 +- .../JoyV6SingleInputRangeField.tsx | 20 +- .../date-pickers/custom-field/custom-field.md | 6 +- .../custom-layout/AddComponent.js | 1 - .../custom-layout/AddComponent.tsx | 3 +- .../date-range-picker/BasicRangeShortcuts.tsx | 5 +- ...dSelectedSectionsSingleInputRangeField.tsx | 4 +- .../shortcuts/AdvancedRangeShortcuts.tsx | 3 +- .../shortcuts/BasicRangeShortcuts.tsx | 5 +- .../date-pickers/shortcuts/BasicShortcuts.tsx | 4 +- .../shortcuts/ChangeImportance.tsx | 4 +- .../shortcuts/CustomizedRangeShortcuts.js | 2 +- .../shortcuts/CustomizedRangeShortcuts.tsx | 7 +- .../shortcuts/DisabledDatesShortcuts.tsx | 4 +- .../shortcuts/OnChangeShortcutLabel.tsx | 2 +- .../MobileKeyboardView.js | 1 - .../MobileKeyboardView.tsx | 3 +- .../x/api/date-pickers/date-calendar.json | 2 +- docs/pages/x/api/date-pickers/date-field.json | 4 +- .../pages/x/api/date-pickers/date-picker.json | 6 +- .../api/date-pickers/date-range-calendar.json | 2 +- .../x/api/date-pickers/date-range-picker.json | 6 +- .../x/api/date-pickers/date-time-field.json | 4 +- .../x/api/date-pickers/date-time-picker.json | 6 +- .../date-pickers/date-time-range-picker.json | 6 +- .../api/date-pickers/desktop-date-picker.json | 6 +- .../desktop-date-range-picker.json | 6 +- .../desktop-date-time-picker.json | 6 +- .../desktop-date-time-range-picker.json | 6 +- .../api/date-pickers/desktop-time-picker.json | 6 +- .../x/api/date-pickers/digital-clock.json | 2 +- .../api/date-pickers/mobile-date-picker.json | 6 +- .../mobile-date-range-picker.json | 6 +- .../date-pickers/mobile-date-time-picker.json | 6 +- .../mobile-date-time-range-picker.json | 6 +- .../api/date-pickers/mobile-time-picker.json | 6 +- .../multi-input-date-range-field.json | 4 +- .../multi-input-date-time-range-field.json | 4 +- .../multi-input-time-range-field.json | 4 +- .../multi-section-digital-clock.json | 2 +- .../single-input-date-range-field.json | 4 +- .../single-input-date-time-range-field.json | 4 +- .../single-input-time-range-field.json | 4 +- .../api/date-pickers/static-date-picker.json | 6 +- .../static-date-range-picker.json | 6 +- .../date-pickers/static-date-time-picker.json | 6 +- .../api/date-pickers/static-time-picker.json | 6 +- docs/pages/x/api/date-pickers/time-clock.json | 2 +- docs/pages/x/api/date-pickers/time-field.json | 4 +- .../pages/x/api/date-pickers/time-picker.json | 6 +- .../modules/components/PickersPlayground.tsx | 5 +- .../components/overview/mainDemo/Clock.tsx | 4 +- .../mainDemo/DateRangeWithShortcuts.tsx | 7 +- .../overview/mainDemo/DigitalClock.tsx | 3 +- .../overview/mainDemo/PickerButton.tsx | 15 +- .../DateRangeCalendar/DateRangeCalendar.tsx | 8 +- .../DateRangeCalendar.types.ts | 2 +- .../src/DateRangePicker/DateRangePicker.tsx | 12 +- .../DateRangePicker/DateRangePicker.types.ts | 6 +- .../DateRangePickerToolbar.tsx | 3 +- .../src/DateRangePicker/shared.tsx | 5 +- .../DateTimeRangePicker.tsx | 12 +- .../DateTimeRangePicker.types.ts | 15 +- .../DateTimeRangePickerTimeWrapper.tsx | 2 +- .../DateTimeRangePickerToolbar.tsx | 3 +- .../src/DateTimeRangePicker/shared.tsx | 9 +- .../DesktopDateRangePicker.tsx | 20 +- .../describes.DesktopDateRangePicker.test.tsx | 9 +- .../DesktopDateTimeRangePicker.tsx | 17 +- ...cribes.DesktopDateTimeRangePicker.test.tsx | 5 +- .../MobileDateRangePicker.tsx | 20 +- .../describes.MobileDateRangePicker.test.tsx | 5 +- .../MobileDateTimeRangePicker.tsx | 21 +-- ...scribes.MobileDateTimeRangePicker.test.tsx | 5 +- .../MultiInputDateRangeField.tsx | 8 +- .../MultiInputDateTimeRangeField.tsx | 8 +- .../MultiInputTimeRangeField.tsx | 8 +- .../SingleInputDateRangeField.tsx | 8 +- .../SingleInputDateRangeField.types.ts | 15 +- .../useSingleInputDateRangeField.ts | 6 +- .../SingleInputDateTimeRangeField.tsx | 8 +- .../SingleInputDateTimeRangeField.types.ts | 11 +- .../useSingleInputDateTimeRangeField.ts | 10 +- .../SingleInputTimeRangeField.tsx | 8 +- .../SingleInputTimeRangeField.types.ts | 11 +- .../useSingleInputTimeRangeField.ts | 6 +- .../StaticDateRangePicker.tsx | 16 +- .../internals/hooks/models/useRangePicker.ts | 16 +- .../useDesktopRangePicker.tsx | 16 +- .../hooks/useEnrichedRangePickerFieldProps.ts | 46 +---- .../useMobileRangePicker.tsx | 16 +- .../useMultiInputFieldSelectedSections.ts | 13 +- .../useMultiInputDateRangeField.ts | 6 +- .../useMultiInputDateTimeRangeField.ts | 6 +- .../useMultiInputTimeRangeField.ts | 6 +- .../src/internals/hooks/useRangePosition.ts | 4 +- .../useStaticRangePicker.tsx | 7 +- .../useStaticRangePicker.types.ts | 10 +- .../src/internals/models/dateTimeRange.ts | 10 +- .../src/internals/models/timeRange.ts | 15 +- .../src/internals/utils/date-fields-utils.ts | 10 +- .../src/internals/utils/valueManagers.ts | 29 +-- .../src/models/dateRange.ts | 11 +- .../x-date-pickers-pro/src/models/fields.ts | 25 +-- .../x-date-pickers-pro/src/models/index.ts | 2 + .../x-date-pickers-pro/src/models/range.ts | 2 - .../src/validation/validateDateRange.ts | 4 +- .../src/validation/validateDateTimeRange.ts | 4 +- .../src/validation/validateTimeRange.ts | 8 +- .../src/DateCalendar/DateCalendar.tsx | 8 +- .../src/DateCalendar/DateCalendar.types.ts | 2 +- .../tests/describes.DateCalendar.test.tsx | 2 +- .../src/DateCalendar/useCalendarState.tsx | 2 +- .../src/DateField/DateField.tsx | 8 +- .../src/DateField/DateField.types.ts | 14 +- .../tests/describes.DateField.test.tsx | 2 +- .../src/DateField/useDateField.ts | 4 +- .../src/DatePicker/DatePicker.tsx | 12 +- .../src/DatePicker/DatePicker.types.ts | 9 +- .../src/DatePicker/DatePickerToolbar.tsx | 4 +- .../x-date-pickers/src/DatePicker/shared.tsx | 11 +- .../src/DateTimeField/DateTimeField.tsx | 8 +- .../src/DateTimeField/DateTimeField.types.ts | 14 +- .../tests/describes.DateTimeField.test.tsx | 2 +- .../src/DateTimeField/useDateTimeField.ts | 4 +- .../src/DateTimePicker/DateTimePicker.tsx | 12 +- .../DateTimePicker/DateTimePicker.types.ts | 9 +- .../DateTimePicker/DateTimePickerToolbar.tsx | 2 +- .../src/DateTimePicker/shared.tsx | 6 +- .../DesktopDatePicker/DesktopDatePicker.tsx | 12 +- .../describes.DesktopDatePicker.test.tsx | 2 +- .../DesktopDateTimePicker.tsx | 18 +- .../DesktopDateTimePickerLayout.tsx | 13 +- .../describes.DesktopDateTimePicker.test.tsx | 2 +- .../DesktopTimePicker/DesktopTimePicker.tsx | 12 +- .../describes.DesktopTimePicker.test.tsx | 2 +- .../src/DigitalClock/DigitalClock.tsx | 6 +- .../tests/describes.DigitalClock.test.tsx | 2 +- .../src/MobileDatePicker/MobileDatePicker.tsx | 12 +- .../tests/describes.MobileDatePicker.test.tsx | 2 +- .../MobileDateTimePicker.tsx | 12 +- .../describes.MobileDateTimePicker.test.tsx | 2 +- .../src/MobileTimePicker/MobileTimePicker.tsx | 12 +- .../tests/describes.MobileTimePicker.test.tsx | 2 +- .../tests/describes.MonthCalendar.test.tsx | 2 +- .../MultiSectionDigitalClock.tsx | 9 +- .../MultiSectionDigitalClock.types.ts | 14 +- .../MultiSectionDigitalClockSection.tsx | 15 +- ...escribes.MultiSectionDigitalClock.test.tsx | 2 +- .../src/PickersLayout/PickersLayout.tsx | 8 +- .../src/PickersLayout/PickersLayout.types.ts | 47 +++-- .../src/PickersLayout/usePickerLayout.tsx | 27 +-- .../src/PickersShortcuts/PickersShortcuts.tsx | 25 +-- .../src/StaticDatePicker/StaticDatePicker.tsx | 12 +- .../StaticDateTimePicker.tsx | 12 +- .../src/StaticTimePicker/StaticTimePicker.tsx | 12 +- .../src/TimeClock/TimeClock.tsx | 13 +- .../tests/describes.TimeClock.test.tsx | 2 +- .../src/TimeField/TimeField.tsx | 8 +- .../src/TimeField/TimeField.types.ts | 14 +- .../tests/describes.TimeField.test.tsx | 2 +- .../src/TimeField/useTimeField.ts | 4 +- .../src/TimePicker/TimePicker.tsx | 12 +- .../src/TimePicker/TimePicker.types.ts | 9 +- .../src/TimePicker/TimePickerToolbar.tsx | 2 +- .../x-date-pickers/src/TimePicker/shared.tsx | 6 +- .../tests/describes.YearCalendar.test.tsx | 2 +- .../src/hooks/useParsedFormat.ts | 2 +- .../internals/components/PickersToolbar.tsx | 17 +- .../internals/hooks/useClockReferenceDate.ts | 2 +- .../useDesktopPicker/useDesktopPicker.tsx | 16 +- .../useDesktopPicker.types.ts | 26 +-- .../src/internals/hooks/useField/useField.ts | 12 +- .../hooks/useField/useField.types.ts | 145 +++++++-------- .../hooks/useField/useField.utils.ts | 9 +- .../useField/useFieldCharacterEditing.ts | 37 ++-- .../internals/hooks/useField/useFieldState.ts | 44 +++-- .../hooks/useField/useFieldV6TextField.ts | 12 +- .../hooks/useMobilePicker/useMobilePicker.tsx | 16 +- .../useMobilePicker/useMobilePicker.types.ts | 24 +-- .../internals/hooks/usePicker/usePicker.ts | 22 +-- .../hooks/usePicker/usePicker.types.ts | 36 ++-- .../hooks/usePicker/usePickerLayoutProps.ts | 30 ++- .../hooks/usePicker/usePickerOwnerState.ts | 14 +- .../hooks/usePicker/usePickerProvider.ts | 10 +- .../hooks/usePicker/usePickerValue.ts | 47 +++-- .../hooks/usePicker/usePickerValue.types.ts | 175 ++++++++++-------- .../hooks/usePicker/usePickerViews.ts | 51 +++-- .../hooks/useStaticPicker/useStaticPicker.tsx | 4 +- .../useStaticPicker/useStaticPicker.types.ts | 11 +- .../internals/hooks/useValueWithTimezone.ts | 45 +++-- .../src/internals/hooks/useViews.tsx | 37 ++-- .../x-date-pickers/src/internals/index.ts | 8 +- .../src/internals/models/fields.ts | 7 +- .../src/internals/models/pickers.ts | 1 + .../models/props/basePickerProps.tsx | 17 +- .../src/internals/models/props/time.ts | 2 +- .../src/internals/models/props/toolbar.ts | 11 +- .../src/internals/models/value.ts | 14 ++ .../src/internals/utils/date-utils.ts | 6 +- .../src/internals/utils/valueManagers.ts | 14 +- packages/x-date-pickers/src/models/fields.ts | 22 ++- .../x-date-pickers/src/models/validation.ts | 17 +- .../src/themeAugmentation/props.d.ts | 4 +- .../src/validation/useValidation.ts | 41 ++-- .../src/validation/validateDate.ts | 13 +- .../src/validation/validateDateTime.ts | 13 +- .../src/validation/validateTime.ts | 13 +- scripts/x-date-pickers-pro.exports.json | 3 +- scripts/x-date-pickers.exports.json | 2 + .../pickers/describeValue/describeValue.tsx | 23 ++- .../describeValue/describeValue.types.ts | 25 +-- .../describeValue/testPickerActionBar.tsx | 3 +- .../testPickerOpenCloseLifeCycle.tsx | 13 +- test/utils/pickers/fields.tsx | 6 +- 221 files changed, 1156 insertions(+), 1366 deletions(-) create mode 100644 packages/x-date-pickers/src/internals/models/pickers.ts diff --git a/docs/data/date-pickers/custom-field/BrowserV7Field.tsx b/docs/data/date-pickers/custom-field/BrowserV7Field.tsx index 00e3b3388d57..8dde2eaf5cb4 100644 --- a/docs/data/date-pickers/custom-field/BrowserV7Field.tsx +++ b/docs/data/date-pickers/custom-field/BrowserV7Field.tsx @@ -13,8 +13,6 @@ import { BaseSingleInputPickersTextFieldProps, BaseSingleInputFieldProps, DateValidationError, - FieldSection, - PickerValidDate, } from '@mui/x-date-pickers/models'; import { Unstable_PickersSectionList as PickersSectionList } from '@mui/x-date-pickers/PickersSectionList'; @@ -106,13 +104,7 @@ const BrowserTextField = React.forwardRef( interface BrowserDateFieldProps extends UseDateFieldProps, - BaseSingleInputFieldProps< - // This usage of PickerValidDate will go away with TIsRange - PickerValidDate | null, - FieldSection, - true, - DateValidationError - > {} + BaseSingleInputFieldProps {} const BrowserDateField = React.forwardRef( (props: BrowserDateFieldProps, ref: React.Ref) => { diff --git a/docs/data/date-pickers/custom-field/BrowserV7MultiInputRangeField.js b/docs/data/date-pickers/custom-field/BrowserV7MultiInputRangeField.js index 0023e32e477f..a189e0c1a1fc 100644 --- a/docs/data/date-pickers/custom-field/BrowserV7MultiInputRangeField.js +++ b/docs/data/date-pickers/custom-field/BrowserV7MultiInputRangeField.js @@ -5,7 +5,6 @@ import { styled } from '@mui/material/styles'; import Stack from '@mui/material/Stack'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; - import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker'; import { unstable_useMultiInputDateRangeField as useMultiInputDateRangeField } from '@mui/x-date-pickers-pro/MultiInputDateRangeField'; import { Unstable_PickersSectionList as PickersSectionList } from '@mui/x-date-pickers/PickersSectionList'; diff --git a/docs/data/date-pickers/custom-field/BrowserV7MultiInputRangeField.tsx b/docs/data/date-pickers/custom-field/BrowserV7MultiInputRangeField.tsx index 725a629ce03f..1aef1765678f 100644 --- a/docs/data/date-pickers/custom-field/BrowserV7MultiInputRangeField.tsx +++ b/docs/data/date-pickers/custom-field/BrowserV7MultiInputRangeField.tsx @@ -5,7 +5,6 @@ import { styled } from '@mui/material/styles'; import Stack from '@mui/material/Stack'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; -import { PickerValidDate } from '@mui/x-date-pickers/models'; import { DateRangePicker, DateRangePickerProps, @@ -13,12 +12,10 @@ import { import { unstable_useMultiInputDateRangeField as useMultiInputDateRangeField } from '@mui/x-date-pickers-pro/MultiInputDateRangeField'; import { Unstable_PickersSectionList as PickersSectionList } from '@mui/x-date-pickers/PickersSectionList'; import { - RangeFieldSection, BaseMultiInputFieldProps, BasePickersTextFieldProps, MultiInputFieldSlotTextFieldProps, DateRangeValidationError, - DateRange, UseDateRangeFieldProps, } from '@mui/x-date-pickers-pro/models'; @@ -109,13 +106,7 @@ const BrowserTextField = React.forwardRef( interface BrowserMultiInputDateRangeFieldProps extends UseDateRangeFieldProps, - BaseMultiInputFieldProps< - // This usage of PickerValidDate will go away with TIsRange - DateRange, - RangeFieldSection, - true, - DateRangeValidationError - > {} + BaseMultiInputFieldProps {} type BrowserMultiInputDateRangeFieldComponent = (( props: BrowserMultiInputDateRangeFieldProps & React.RefAttributes, diff --git a/docs/data/date-pickers/custom-field/BrowserV7SingleInputRangeField.tsx b/docs/data/date-pickers/custom-field/BrowserV7SingleInputRangeField.tsx index adfe26146591..645ad6a40d3e 100644 --- a/docs/data/date-pickers/custom-field/BrowserV7SingleInputRangeField.tsx +++ b/docs/data/date-pickers/custom-field/BrowserV7SingleInputRangeField.tsx @@ -20,14 +20,9 @@ import { Unstable_PickersSectionList as PickersSectionList } from '@mui/x-date-p import { BasePickersTextFieldProps, DateRangeValidationError, - RangeFieldSection, - DateRange, FieldType, } from '@mui/x-date-pickers-pro/models'; -import { - BaseSingleInputFieldProps, - PickerValidDate, -} from '@mui/x-date-pickers/models'; +import { BaseSingleInputFieldProps } from '@mui/x-date-pickers/models'; const BrowserFieldRoot = styled('div', { name: 'BrowserField', slot: 'Root' })({ display: 'flex', @@ -117,13 +112,7 @@ const BrowserTextField = React.forwardRef( interface BrowserSingleInputDateRangeFieldProps extends UseSingleInputDateRangeFieldProps, - BaseSingleInputFieldProps< - // This usage of PickerValidDate will go away with TIsRange - DateRange, - RangeFieldSection, - true, - DateRangeValidationError - > { + BaseSingleInputFieldProps { onAdornmentClick?: () => void; } diff --git a/docs/data/date-pickers/custom-field/JoyV6Field.tsx b/docs/data/date-pickers/custom-field/JoyV6Field.tsx index a2dfdebe9255..3e6fe512b018 100644 --- a/docs/data/date-pickers/custom-field/JoyV6Field.tsx +++ b/docs/data/date-pickers/custom-field/JoyV6Field.tsx @@ -24,8 +24,6 @@ import { useClearableField } from '@mui/x-date-pickers/hooks'; import { BaseSingleInputFieldProps, DateValidationError, - FieldSection, - PickerValidDate, } from '@mui/x-date-pickers/models'; const joyTheme = extendJoyTheme(); @@ -101,13 +99,7 @@ const JoyField = React.forwardRef( interface JoyDateFieldProps extends UseDateFieldProps, - BaseSingleInputFieldProps< - // This usage of PickerValidDate will go away with TIsRange - PickerValidDate | null, - FieldSection, - false, - DateValidationError - > {} + BaseSingleInputFieldProps {} const JoyDateField = React.forwardRef( (props: JoyDateFieldProps, ref: React.Ref) => { diff --git a/docs/data/date-pickers/custom-field/JoyV6MultiInputRangeField.js b/docs/data/date-pickers/custom-field/JoyV6MultiInputRangeField.js index 74b17040c152..f02e1a7fa227 100644 --- a/docs/data/date-pickers/custom-field/JoyV6MultiInputRangeField.js +++ b/docs/data/date-pickers/custom-field/JoyV6MultiInputRangeField.js @@ -19,7 +19,6 @@ import FormLabel from '@mui/joy/FormLabel'; import Typography from '@mui/joy/Typography'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; - import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker'; import { unstable_useMultiInputDateRangeField as useMultiInputDateRangeField } from '@mui/x-date-pickers-pro/MultiInputDateRangeField'; diff --git a/docs/data/date-pickers/custom-field/JoyV6MultiInputRangeField.tsx b/docs/data/date-pickers/custom-field/JoyV6MultiInputRangeField.tsx index ce976dd69843..f8bfb47aad8e 100644 --- a/docs/data/date-pickers/custom-field/JoyV6MultiInputRangeField.tsx +++ b/docs/data/date-pickers/custom-field/JoyV6MultiInputRangeField.tsx @@ -19,7 +19,6 @@ import FormLabel from '@mui/joy/FormLabel'; import Typography, { TypographyProps } from '@mui/joy/Typography'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; -import { PickerValidDate } from '@mui/x-date-pickers/models'; import { DateRangePicker, DateRangePickerProps, @@ -27,10 +26,8 @@ import { import { unstable_useMultiInputDateRangeField as useMultiInputDateRangeField } from '@mui/x-date-pickers-pro/MultiInputDateRangeField'; import { BaseMultiInputFieldProps, - DateRange, DateRangeValidationError, MultiInputFieldSlotTextFieldProps, - RangeFieldSection, UseDateRangeFieldProps, } from '@mui/x-date-pickers-pro/models'; @@ -133,13 +130,7 @@ const MultiInputJoyDateRangeFieldSeparator = styled( interface JoyMultiInputDateRangeFieldProps extends UseDateRangeFieldProps, - BaseMultiInputFieldProps< - // This usage of PickerValidDate will go away with TIsRange - DateRange, - RangeFieldSection, - false, - DateRangeValidationError - > {} + BaseMultiInputFieldProps {} type JoyMultiInputDateRangeFieldComponent = (( props: JoyMultiInputDateRangeFieldProps & React.RefAttributes, diff --git a/docs/data/date-pickers/custom-field/JoyV6SingleInputRangeField.tsx b/docs/data/date-pickers/custom-field/JoyV6SingleInputRangeField.tsx index e2815f70d823..f587a5760d7b 100644 --- a/docs/data/date-pickers/custom-field/JoyV6SingleInputRangeField.tsx +++ b/docs/data/date-pickers/custom-field/JoyV6SingleInputRangeField.tsx @@ -27,16 +27,8 @@ import { UseSingleInputDateRangeFieldProps, } from '@mui/x-date-pickers-pro/SingleInputDateRangeField'; import { useClearableField } from '@mui/x-date-pickers/hooks'; -import { - BaseSingleInputFieldProps, - PickerValidDate, -} from '@mui/x-date-pickers/models'; -import { - RangeFieldSection, - DateRange, - DateRangeValidationError, - FieldType, -} from '@mui/x-date-pickers-pro/models'; +import { BaseSingleInputFieldProps } from '@mui/x-date-pickers/models'; +import { DateRangeValidationError, FieldType } from '@mui/x-date-pickers-pro/models'; const joyTheme = extendJoyTheme(); @@ -104,13 +96,7 @@ const JoyField = React.forwardRef( interface JoySingleInputDateRangeFieldProps extends UseSingleInputDateRangeFieldProps, - BaseSingleInputFieldProps< - // This usage of PickerValidDate will go away with TIsRange - DateRange, - RangeFieldSection, - false, - DateRangeValidationError - > { + BaseSingleInputFieldProps { onAdornmentClick?: () => void; } diff --git a/docs/data/date-pickers/custom-field/custom-field.md b/docs/data/date-pickers/custom-field/custom-field.md index 3b9459feb141..a2f66e7a004e 100644 --- a/docs/data/date-pickers/custom-field/custom-field.md +++ b/docs/data/date-pickers/custom-field/custom-field.md @@ -165,8 +165,7 @@ On the examples below, you can see that the typing of the props received by a cu interface JoyDateFieldProps extends UseDateFieldProps, // The headless field props BaseSingleInputFieldProps< - Dayjs | null, - FieldSection, + false, true, // `false` for `enableAccessibleFieldDOMStructure={false}` DateValidationError > {} // The DOM field props @@ -174,8 +173,7 @@ interface JoyDateFieldProps interface JoyDateTimeFieldProps extends UseDateTimeFieldProps, // The headless field props BaseSingleInputFieldProps< - Dayjs | null, - FieldSection, + false, true, // `false` for `enableAccessibleFieldDOMStructure={false}` DateTimeValidationError > {} // The DOM field props diff --git a/docs/data/date-pickers/custom-layout/AddComponent.js b/docs/data/date-pickers/custom-layout/AddComponent.js index d6e0d1db8b6f..e2c6f4604305 100644 --- a/docs/data/date-pickers/custom-layout/AddComponent.js +++ b/docs/data/date-pickers/custom-layout/AddComponent.js @@ -1,5 +1,4 @@ import * as React from 'react'; - import Box from '@mui/material/Box'; import List from '@mui/material/List'; import ListItem from '@mui/material/ListItem'; diff --git a/docs/data/date-pickers/custom-layout/AddComponent.tsx b/docs/data/date-pickers/custom-layout/AddComponent.tsx index 2584a13756ed..4a519d02f790 100644 --- a/docs/data/date-pickers/custom-layout/AddComponent.tsx +++ b/docs/data/date-pickers/custom-layout/AddComponent.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import { Dayjs } from 'dayjs'; import Box from '@mui/material/Box'; import List from '@mui/material/List'; import ListItem from '@mui/material/ListItem'; @@ -58,7 +57,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-range-picker/BasicRangeShortcuts.tsx b/docs/data/date-pickers/date-range-picker/BasicRangeShortcuts.tsx index 765d9e982a81..542449ecbd80 100644 --- a/docs/data/date-pickers/date-range-picker/BasicRangeShortcuts.tsx +++ b/docs/data/date-pickers/date-range-picker/BasicRangeShortcuts.tsx @@ -1,12 +1,11 @@ import * as React from 'react'; -import dayjs, { Dayjs } from 'dayjs'; +import dayjs from 'dayjs'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { StaticDateRangePicker } from '@mui/x-date-pickers-pro/StaticDateRangePicker'; import { PickersShortcutsItem } from '@mui/x-date-pickers/PickersShortcuts'; -import { DateRange } from '@mui/x-date-pickers-pro/models'; -const shortcutsItems: PickersShortcutsItem>[] = [ +const shortcutsItems: PickersShortcutsItem[] = [ { label: 'This Week', getValue: () => { diff --git a/docs/data/date-pickers/fields/ControlledSelectedSectionsSingleInputRangeField.tsx b/docs/data/date-pickers/fields/ControlledSelectedSectionsSingleInputRangeField.tsx index 68995de41ed1..745dc885db66 100644 --- a/docs/data/date-pickers/fields/ControlledSelectedSectionsSingleInputRangeField.tsx +++ b/docs/data/date-pickers/fields/ControlledSelectedSectionsSingleInputRangeField.tsx @@ -9,14 +9,14 @@ import { FieldSelectedSections, FieldRef, } from '@mui/x-date-pickers/models'; -import { RangeFieldSection, RangePosition } from '@mui/x-date-pickers-pro/models'; +import { RangePosition } from '@mui/x-date-pickers-pro/models'; import { SingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField'; export default function ControlledSelectedSectionsSingleInputRangeField() { const [selectedSections, setSelectedSections] = React.useState(null); const inputRef = React.useRef(null); - const fieldRef = React.useRef>(null); + const fieldRef = React.useRef>(null); const setSelectedSectionType = ( selectedSectionType: FieldSectionType, diff --git a/docs/data/date-pickers/shortcuts/AdvancedRangeShortcuts.tsx b/docs/data/date-pickers/shortcuts/AdvancedRangeShortcuts.tsx index 0cd7c557d3a8..b9a10aac2623 100644 --- a/docs/data/date-pickers/shortcuts/AdvancedRangeShortcuts.tsx +++ b/docs/data/date-pickers/shortcuts/AdvancedRangeShortcuts.tsx @@ -4,9 +4,8 @@ import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { StaticDateRangePicker } from '@mui/x-date-pickers-pro/StaticDateRangePicker'; import { PickersShortcutsItem } from '@mui/x-date-pickers/PickersShortcuts'; -import { DateRange } from '@mui/x-date-pickers-pro/models'; -const shortcutsItems: PickersShortcutsItem>[] = [ +const shortcutsItems: PickersShortcutsItem[] = [ { label: 'Next Available Weekend', getValue: ({ isValid }) => { diff --git a/docs/data/date-pickers/shortcuts/BasicRangeShortcuts.tsx b/docs/data/date-pickers/shortcuts/BasicRangeShortcuts.tsx index 6c63788ef095..fddda2042f82 100644 --- a/docs/data/date-pickers/shortcuts/BasicRangeShortcuts.tsx +++ b/docs/data/date-pickers/shortcuts/BasicRangeShortcuts.tsx @@ -1,12 +1,11 @@ import * as React from 'react'; -import dayjs, { Dayjs } from 'dayjs'; +import dayjs from 'dayjs'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { StaticDateRangePicker } from '@mui/x-date-pickers-pro/StaticDateRangePicker'; import { PickersShortcutsItem } from '@mui/x-date-pickers/PickersShortcuts'; -import { DateRange } from '@mui/x-date-pickers-pro/models'; -const shortcutsItems: PickersShortcutsItem>[] = [ +const shortcutsItems: PickersShortcutsItem[] = [ { label: 'This Week', getValue: () => { diff --git a/docs/data/date-pickers/shortcuts/BasicShortcuts.tsx b/docs/data/date-pickers/shortcuts/BasicShortcuts.tsx index 3ce1d19e7966..3545b5bac0a5 100644 --- a/docs/data/date-pickers/shortcuts/BasicShortcuts.tsx +++ b/docs/data/date-pickers/shortcuts/BasicShortcuts.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import dayjs, { Dayjs } from 'dayjs'; +import dayjs from 'dayjs'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { StaticDatePicker } from '@mui/x-date-pickers/StaticDatePicker'; @@ -24,7 +24,7 @@ const getMonthWeekday = ( ); }; -const shortcutsItems: PickersShortcutsItem[] = [ +const shortcutsItems: PickersShortcutsItem[] = [ { label: "New Year's Day", getValue: () => { diff --git a/docs/data/date-pickers/shortcuts/ChangeImportance.tsx b/docs/data/date-pickers/shortcuts/ChangeImportance.tsx index 5ef6c1e18d3e..a147a9b74c46 100644 --- a/docs/data/date-pickers/shortcuts/ChangeImportance.tsx +++ b/docs/data/date-pickers/shortcuts/ChangeImportance.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import dayjs, { Dayjs } from 'dayjs'; +import dayjs from 'dayjs'; import Stack from '@mui/material/Stack'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; @@ -30,7 +30,7 @@ const getMonthWeekday = ( ); }; -const shortcutsItems: PickersShortcutsItem[] = [ +const shortcutsItems: PickersShortcutsItem[] = [ { label: "New Year's Day", getValue: () => { diff --git a/docs/data/date-pickers/shortcuts/CustomizedRangeShortcuts.js b/docs/data/date-pickers/shortcuts/CustomizedRangeShortcuts.js index 31c77d7d7420..478f2dcb5455 100644 --- a/docs/data/date-pickers/shortcuts/CustomizedRangeShortcuts.js +++ b/docs/data/date-pickers/shortcuts/CustomizedRangeShortcuts.js @@ -1,10 +1,10 @@ import * as React from 'react'; +import dayjs from 'dayjs'; import List from '@mui/material/List'; import ListItem from '@mui/material/ListItem'; import Chip from '@mui/material/Chip'; import Divider from '@mui/material/Divider'; import Box from '@mui/material/Box'; -import dayjs from 'dayjs'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { StaticDateRangePicker } from '@mui/x-date-pickers-pro/StaticDateRangePicker'; diff --git a/docs/data/date-pickers/shortcuts/CustomizedRangeShortcuts.tsx b/docs/data/date-pickers/shortcuts/CustomizedRangeShortcuts.tsx index 3e3d6fda53c9..fc2170ffbd29 100644 --- a/docs/data/date-pickers/shortcuts/CustomizedRangeShortcuts.tsx +++ b/docs/data/date-pickers/shortcuts/CustomizedRangeShortcuts.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; +import dayjs from 'dayjs'; import List from '@mui/material/List'; import ListItem from '@mui/material/ListItem'; import Chip from '@mui/material/Chip'; import Divider from '@mui/material/Divider'; import Box from '@mui/material/Box'; -import dayjs, { Dayjs } from 'dayjs'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { StaticDateRangePicker } from '@mui/x-date-pickers-pro/StaticDateRangePicker'; @@ -12,9 +12,8 @@ import { PickersShortcutsItem, PickersShortcutsProps, } from '@mui/x-date-pickers/PickersShortcuts'; -import { DateRange } from '@mui/x-date-pickers-pro/models'; -const shortcutsItems: PickersShortcutsItem>[] = [ +const shortcutsItems: PickersShortcutsItem[] = [ { label: 'This Week', getValue: () => { @@ -55,7 +54,7 @@ const shortcutsItems: PickersShortcutsItem>[] = [ { label: 'Reset', getValue: () => [null, null] }, ]; -function CustomRangeShortcuts(props: PickersShortcutsProps>) { +function CustomRangeShortcuts(props: PickersShortcutsProps) { const { items, onChange, isValid, changeImportance = 'accept' } = props; if (items == null || items.length === 0) { diff --git a/docs/data/date-pickers/shortcuts/DisabledDatesShortcuts.tsx b/docs/data/date-pickers/shortcuts/DisabledDatesShortcuts.tsx index e6224b559851..ab851fd9258b 100644 --- a/docs/data/date-pickers/shortcuts/DisabledDatesShortcuts.tsx +++ b/docs/data/date-pickers/shortcuts/DisabledDatesShortcuts.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import dayjs, { Dayjs } from 'dayjs'; +import dayjs from 'dayjs'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { StaticDatePicker } from '@mui/x-date-pickers/StaticDatePicker'; @@ -24,7 +24,7 @@ const getMonthWeekday = ( ); }; -const shortcutsItems: PickersShortcutsItem[] = [ +const shortcutsItems: PickersShortcutsItem[] = [ { label: "New Year's Day", getValue: () => { diff --git a/docs/data/date-pickers/shortcuts/OnChangeShortcutLabel.tsx b/docs/data/date-pickers/shortcuts/OnChangeShortcutLabel.tsx index bb5243101049..56b9c54f33c0 100644 --- a/docs/data/date-pickers/shortcuts/OnChangeShortcutLabel.tsx +++ b/docs/data/date-pickers/shortcuts/OnChangeShortcutLabel.tsx @@ -32,7 +32,7 @@ const getMonthWeekday = ( ); }; -const shortcutsItems: PickersShortcutsItem[] = [ +const shortcutsItems: PickersShortcutsItem[] = [ { label: "New Year's Day", getValue: () => { diff --git a/docs/data/migration/migration-pickers-v5/MobileKeyboardView.js b/docs/data/migration/migration-pickers-v5/MobileKeyboardView.js index 95819b45ed99..502bdd7ec9c0 100644 --- a/docs/data/migration/migration-pickers-v5/MobileKeyboardView.js +++ b/docs/data/migration/migration-pickers-v5/MobileKeyboardView.js @@ -1,5 +1,4 @@ import * as React from 'react'; - import Box from '@mui/material/Box'; import Stack from '@mui/material/Stack'; import IconButton from '@mui/material/IconButton'; diff --git a/docs/data/migration/migration-pickers-v5/MobileKeyboardView.tsx b/docs/data/migration/migration-pickers-v5/MobileKeyboardView.tsx index 97a25bbfc036..8a8b7511afb3 100644 --- a/docs/data/migration/migration-pickers-v5/MobileKeyboardView.tsx +++ b/docs/data/migration/migration-pickers-v5/MobileKeyboardView.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import { Dayjs } from 'dayjs'; import Box from '@mui/material/Box'; import Stack from '@mui/material/Stack'; import IconButton from '@mui/material/IconButton'; @@ -22,7 +21,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); diff --git a/docs/pages/x/api/date-pickers/date-calendar.json b/docs/pages/x/api/date-pickers/date-calendar.json index e38e7f86edc4..51c6444ec164 100644 --- a/docs/pages/x/api/date-pickers/date-calendar.json +++ b/docs/pages/x/api/date-pickers/date-calendar.json @@ -34,7 +34,7 @@ "onChange": { "type": { "name": "func" }, "signature": { - "type": "function(value: TValue, selectionState: PickerSelectionState | undefined, selectedView: TView | undefined) => void", + "type": "function(value: InferPickerValue, selectionState: PickerSelectionState | undefined, selectedView: TView | undefined) => void", "describedArgs": ["value", "selectionState", "selectedView"] } }, diff --git a/docs/pages/x/api/date-pickers/date-field.json b/docs/pages/x/api/date-pickers/date-field.json index 6a53307f3dc3..70a5d85c1ab2 100644 --- a/docs/pages/x/api/date-pickers/date-field.json +++ b/docs/pages/x/api/date-pickers/date-field.json @@ -42,7 +42,7 @@ "onChange": { "type": { "name": "func" }, "signature": { - "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, @@ -50,7 +50,7 @@ "onError": { "type": { "name": "func" }, "signature": { - "type": "function(error: TError, value: TValue) => void", + "type": "function(error: TError, value: InferPickerValue) => void", "describedArgs": ["error", "value"] } }, diff --git a/docs/pages/x/api/date-pickers/date-picker.json b/docs/pages/x/api/date-pickers/date-picker.json index 33b4cd3a0f78..cc766eae9dc5 100644 --- a/docs/pages/x/api/date-pickers/date-picker.json +++ b/docs/pages/x/api/date-pickers/date-picker.json @@ -45,14 +45,14 @@ "onAccept": { "type": { "name": "func" }, "signature": { - "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, "onChange": { "type": { "name": "func" }, "signature": { - "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, @@ -60,7 +60,7 @@ "onError": { "type": { "name": "func" }, "signature": { - "type": "function(error: TError, value: TValue) => void", + "type": "function(error: TError, value: InferPickerValue) => void", "describedArgs": ["error", "value"] } }, 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 c8273a887566..6bf85b33aa76 100644 --- a/docs/pages/x/api/date-pickers/date-range-calendar.json +++ b/docs/pages/x/api/date-pickers/date-range-calendar.json @@ -43,7 +43,7 @@ "onChange": { "type": { "name": "func" }, "signature": { - "type": "function(value: TValue, selectionState: PickerSelectionState | undefined, selectedView: TView | undefined) => void", + "type": "function(value: InferPickerValue, selectionState: PickerSelectionState | undefined, selectedView: TView | undefined) => void", "describedArgs": ["value", "selectionState", "selectedView"] } }, 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 a357693be539..43c9bf32a1e1 100644 --- a/docs/pages/x/api/date-pickers/date-range-picker.json +++ b/docs/pages/x/api/date-pickers/date-range-picker.json @@ -55,14 +55,14 @@ "onAccept": { "type": { "name": "func" }, "signature": { - "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, "onChange": { "type": { "name": "func" }, "signature": { - "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, @@ -70,7 +70,7 @@ "onError": { "type": { "name": "func" }, "signature": { - "type": "function(error: TError, value: TValue) => void", + "type": "function(error: TError, value: InferPickerValue) => void", "describedArgs": ["error", "value"] } }, 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 8ddb6b01c5cc..902607f0b4bd 100644 --- a/docs/pages/x/api/date-pickers/date-time-field.json +++ b/docs/pages/x/api/date-pickers/date-time-field.json @@ -49,7 +49,7 @@ "onChange": { "type": { "name": "func" }, "signature": { - "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, @@ -57,7 +57,7 @@ "onError": { "type": { "name": "func" }, "signature": { - "type": "function(error: TError, value: TValue) => void", + "type": "function(error: TError, value: InferPickerValue) => void", "describedArgs": ["error", "value"] } }, 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 c0d304a92e66..b4e2ae5943a4 100644 --- a/docs/pages/x/api/date-pickers/date-time-picker.json +++ b/docs/pages/x/api/date-pickers/date-time-picker.json @@ -53,14 +53,14 @@ "onAccept": { "type": { "name": "func" }, "signature": { - "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, "onChange": { "type": { "name": "func" }, "signature": { - "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, @@ -68,7 +68,7 @@ "onError": { "type": { "name": "func" }, "signature": { - "type": "function(error: TError, value: TValue) => void", + "type": "function(error: TError, value: InferPickerValue) => void", "describedArgs": ["error", "value"] } }, 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 d3901e8bc3a0..2ee3cfe1381e 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 @@ -62,14 +62,14 @@ "onAccept": { "type": { "name": "func" }, "signature": { - "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, "onChange": { "type": { "name": "func" }, "signature": { - "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, @@ -77,7 +77,7 @@ "onError": { "type": { "name": "func" }, "signature": { - "type": "function(error: TError, value: TValue) => void", + "type": "function(error: TError, value: InferPickerValue) => void", "describedArgs": ["error", "value"] } }, 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 cc8dee6f79e6..5f30815d175a 100644 --- a/docs/pages/x/api/date-pickers/desktop-date-picker.json +++ b/docs/pages/x/api/date-pickers/desktop-date-picker.json @@ -41,14 +41,14 @@ "onAccept": { "type": { "name": "func" }, "signature": { - "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, "onChange": { "type": { "name": "func" }, "signature": { - "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, @@ -56,7 +56,7 @@ "onError": { "type": { "name": "func" }, "signature": { - "type": "function(error: TError, value: TValue) => void", + "type": "function(error: TError, value: InferPickerValue) => void", "describedArgs": ["error", "value"] } }, 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 32abb59adbbf..e6f454169b6b 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 @@ -51,14 +51,14 @@ "onAccept": { "type": { "name": "func" }, "signature": { - "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, "onChange": { "type": { "name": "func" }, "signature": { - "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, @@ -66,7 +66,7 @@ "onError": { "type": { "name": "func" }, "signature": { - "type": "function(error: TError, value: TValue) => void", + "type": "function(error: TError, value: InferPickerValue) => void", "describedArgs": ["error", "value"] } }, 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 62a9ffa7411c..b315e698ae4b 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 @@ -49,14 +49,14 @@ "onAccept": { "type": { "name": "func" }, "signature": { - "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, "onChange": { "type": { "name": "func" }, "signature": { - "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, @@ -64,7 +64,7 @@ "onError": { "type": { "name": "func" }, "signature": { - "type": "function(error: TError, value: TValue) => void", + "type": "function(error: TError, value: InferPickerValue) => void", "describedArgs": ["error", "value"] } }, 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 7f2205b1922d..2ce992322877 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 @@ -58,14 +58,14 @@ "onAccept": { "type": { "name": "func" }, "signature": { - "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, "onChange": { "type": { "name": "func" }, "signature": { - "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, @@ -73,7 +73,7 @@ "onError": { "type": { "name": "func" }, "signature": { - "type": "function(error: TError, value: TValue) => void", + "type": "function(error: TError, value: InferPickerValue) => void", "describedArgs": ["error", "value"] } }, 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 bc22f8994e8c..8f537e759ee4 100644 --- a/docs/pages/x/api/date-pickers/desktop-time-picker.json +++ b/docs/pages/x/api/date-pickers/desktop-time-picker.json @@ -28,14 +28,14 @@ "onAccept": { "type": { "name": "func" }, "signature": { - "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, "onChange": { "type": { "name": "func" }, "signature": { - "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, @@ -43,7 +43,7 @@ "onError": { "type": { "name": "func" }, "signature": { - "type": "function(error: TError, value: TValue) => void", + "type": "function(error: TError, value: InferPickerValue) => void", "describedArgs": ["error", "value"] } }, diff --git a/docs/pages/x/api/date-pickers/digital-clock.json b/docs/pages/x/api/date-pickers/digital-clock.json index 1d06e31bfb38..a18b2ace56c7 100644 --- a/docs/pages/x/api/date-pickers/digital-clock.json +++ b/docs/pages/x/api/date-pickers/digital-clock.json @@ -15,7 +15,7 @@ "onChange": { "type": { "name": "func" }, "signature": { - "type": "function(value: TValue, selectionState: PickerSelectionState | undefined, selectedView: TView | undefined) => void", + "type": "function(value: InferPickerValue, selectionState: PickerSelectionState | undefined, selectedView: TView | undefined) => void", "describedArgs": ["value", "selectionState", "selectedView"] } }, 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 6dcd610f508e..9a8a12899f7c 100644 --- a/docs/pages/x/api/date-pickers/mobile-date-picker.json +++ b/docs/pages/x/api/date-pickers/mobile-date-picker.json @@ -41,14 +41,14 @@ "onAccept": { "type": { "name": "func" }, "signature": { - "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, "onChange": { "type": { "name": "func" }, "signature": { - "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, @@ -56,7 +56,7 @@ "onError": { "type": { "name": "func" }, "signature": { - "type": "function(error: TError, value: TValue) => void", + "type": "function(error: TError, value: InferPickerValue) => void", "describedArgs": ["error", "value"] } }, 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 4f50f20ccf6b..1c4dfb4d2c41 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 @@ -47,14 +47,14 @@ "onAccept": { "type": { "name": "func" }, "signature": { - "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, "onChange": { "type": { "name": "func" }, "signature": { - "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, @@ -62,7 +62,7 @@ "onError": { "type": { "name": "func" }, "signature": { - "type": "function(error: TError, value: TValue) => void", + "type": "function(error: TError, value: InferPickerValue) => void", "describedArgs": ["error", "value"] } }, 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 79eb455f2379..22a7358bcd84 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 @@ -49,14 +49,14 @@ "onAccept": { "type": { "name": "func" }, "signature": { - "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, "onChange": { "type": { "name": "func" }, "signature": { - "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, @@ -64,7 +64,7 @@ "onError": { "type": { "name": "func" }, "signature": { - "type": "function(error: TError, value: TValue) => void", + "type": "function(error: TError, value: InferPickerValue) => void", "describedArgs": ["error", "value"] } }, 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 9228bf05b26d..f67d4ec628dc 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 @@ -54,14 +54,14 @@ "onAccept": { "type": { "name": "func" }, "signature": { - "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, "onChange": { "type": { "name": "func" }, "signature": { - "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, @@ -69,7 +69,7 @@ "onError": { "type": { "name": "func" }, "signature": { - "type": "function(error: TError, value: TValue) => void", + "type": "function(error: TError, value: InferPickerValue) => void", "describedArgs": ["error", "value"] } }, 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 64336f642f90..d8880d48b86d 100644 --- a/docs/pages/x/api/date-pickers/mobile-time-picker.json +++ b/docs/pages/x/api/date-pickers/mobile-time-picker.json @@ -28,14 +28,14 @@ "onAccept": { "type": { "name": "func" }, "signature": { - "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, "onChange": { "type": { "name": "func" }, "signature": { - "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, @@ -43,7 +43,7 @@ "onError": { "type": { "name": "func" }, "signature": { - "type": "function(error: TError, value: TValue) => void", + "type": "function(error: TError, value: InferPickerValue) => void", "describedArgs": ["error", "value"] } }, 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 d9e6f2cbf77d..2c4e917acab5 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 @@ -25,14 +25,14 @@ "onChange": { "type": { "name": "func" }, "signature": { - "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, "onError": { "type": { "name": "func" }, "signature": { - "type": "function(error: TError, value: TValue) => void", + "type": "function(error: TError, value: InferPickerValue) => void", "describedArgs": ["error", "value"] } }, 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 783e9b93b467..5d8c4fc3e895 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 @@ -32,14 +32,14 @@ "onChange": { "type": { "name": "func" }, "signature": { - "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, "onError": { "type": { "name": "func" }, "signature": { - "type": "function(error: TError, value: TValue) => void", + "type": "function(error: TError, value: InferPickerValue) => void", "describedArgs": ["error", "value"] } }, 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 120e10742bd0..25b17636d1fe 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 @@ -28,14 +28,14 @@ "onChange": { "type": { "name": "func" }, "signature": { - "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, "onError": { "type": { "name": "func" }, "signature": { - "type": "function(error: TError, value: TValue) => void", + "type": "function(error: TError, value: InferPickerValue) => void", "describedArgs": ["error", "value"] } }, 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 d2b097c5e763..2789cb593ce7 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 @@ -20,7 +20,7 @@ "onChange": { "type": { "name": "func" }, "signature": { - "type": "function(value: TValue, selectionState: PickerSelectionState | undefined, selectedView: TView | undefined) => void", + "type": "function(value: InferPickerValue, selectionState: PickerSelectionState | undefined, selectedView: TView | undefined) => void", "describedArgs": ["value", "selectionState", "selectedView"] } }, 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 179b58765222..958a4ac0a4e3 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 @@ -43,7 +43,7 @@ "onChange": { "type": { "name": "func" }, "signature": { - "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, @@ -51,7 +51,7 @@ "onError": { "type": { "name": "func" }, "signature": { - "type": "function(error: TError, value: TValue) => void", + "type": "function(error: TError, value: InferPickerValue) => void", "describedArgs": ["error", "value"] } }, 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 483f9c001649..872b76d0f00b 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 @@ -50,7 +50,7 @@ "onChange": { "type": { "name": "func" }, "signature": { - "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, @@ -58,7 +58,7 @@ "onError": { "type": { "name": "func" }, "signature": { - "type": "function(error: TError, value: TValue) => void", + "type": "function(error: TError, value: InferPickerValue) => void", "describedArgs": ["error", "value"] } }, 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 fbfcdcd2781e..98339e02b012 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 @@ -46,7 +46,7 @@ "onChange": { "type": { "name": "func" }, "signature": { - "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, @@ -54,7 +54,7 @@ "onError": { "type": { "name": "func" }, "signature": { - "type": "function(error: TError, value: TValue) => void", + "type": "function(error: TError, value: InferPickerValue) => void", "describedArgs": ["error", "value"] } }, 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 812b43b131ea..af117c1864fa 100644 --- a/docs/pages/x/api/date-pickers/static-date-picker.json +++ b/docs/pages/x/api/date-pickers/static-date-picker.json @@ -32,14 +32,14 @@ "onAccept": { "type": { "name": "func" }, "signature": { - "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, "onChange": { "type": { "name": "func" }, "signature": { - "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, @@ -51,7 +51,7 @@ "onError": { "type": { "name": "func" }, "signature": { - "type": "function(error: TError, value: TValue) => void", + "type": "function(error: TError, value: InferPickerValue) => void", "describedArgs": ["error", "value"] } }, 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 6948a339c0f0..0711fda37a87 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 @@ -42,14 +42,14 @@ "onAccept": { "type": { "name": "func" }, "signature": { - "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, "onChange": { "type": { "name": "func" }, "signature": { - "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, @@ -61,7 +61,7 @@ "onError": { "type": { "name": "func" }, "signature": { - "type": "function(error: TError, value: TValue) => void", + "type": "function(error: TError, value: InferPickerValue) => void", "describedArgs": ["error", "value"] } }, 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 cf48a45f5b7f..18aa5b077748 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 @@ -40,14 +40,14 @@ "onAccept": { "type": { "name": "func" }, "signature": { - "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, "onChange": { "type": { "name": "func" }, "signature": { - "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, @@ -59,7 +59,7 @@ "onError": { "type": { "name": "func" }, "signature": { - "type": "function(error: TError, value: TValue) => void", + "type": "function(error: TError, value: InferPickerValue) => void", "describedArgs": ["error", "value"] } }, 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 8e2fefb00aee..e5e77709b7e3 100644 --- a/docs/pages/x/api/date-pickers/static-time-picker.json +++ b/docs/pages/x/api/date-pickers/static-time-picker.json @@ -19,14 +19,14 @@ "onAccept": { "type": { "name": "func" }, "signature": { - "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, "onChange": { "type": { "name": "func" }, "signature": { - "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, @@ -38,7 +38,7 @@ "onError": { "type": { "name": "func" }, "signature": { - "type": "function(error: TError, value: TValue) => void", + "type": "function(error: TError, value: InferPickerValue) => void", "describedArgs": ["error", "value"] } }, diff --git a/docs/pages/x/api/date-pickers/time-clock.json b/docs/pages/x/api/date-pickers/time-clock.json index 2b59bb35d2d4..c634a59038af 100644 --- a/docs/pages/x/api/date-pickers/time-clock.json +++ b/docs/pages/x/api/date-pickers/time-clock.json @@ -21,7 +21,7 @@ "onChange": { "type": { "name": "func" }, "signature": { - "type": "function(value: TValue, selectionState: PickerSelectionState | undefined, selectedView: TView | undefined) => void", + "type": "function(value: InferPickerValue, selectionState: PickerSelectionState | undefined, selectedView: TView | undefined) => void", "describedArgs": ["value", "selectionState", "selectedView"] } }, diff --git a/docs/pages/x/api/date-pickers/time-field.json b/docs/pages/x/api/date-pickers/time-field.json index fb99ace144ee..1c0dd01f9f32 100644 --- a/docs/pages/x/api/date-pickers/time-field.json +++ b/docs/pages/x/api/date-pickers/time-field.json @@ -45,7 +45,7 @@ "onChange": { "type": { "name": "func" }, "signature": { - "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, @@ -53,7 +53,7 @@ "onError": { "type": { "name": "func" }, "signature": { - "type": "function(error: TError, value: TValue) => void", + "type": "function(error: TError, value: InferPickerValue) => void", "describedArgs": ["error", "value"] } }, diff --git a/docs/pages/x/api/date-pickers/time-picker.json b/docs/pages/x/api/date-pickers/time-picker.json index e4ce5e054eeb..374337525805 100644 --- a/docs/pages/x/api/date-pickers/time-picker.json +++ b/docs/pages/x/api/date-pickers/time-picker.json @@ -32,14 +32,14 @@ "onAccept": { "type": { "name": "func" }, "signature": { - "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, "onChange": { "type": { "name": "func" }, "signature": { - "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, @@ -47,7 +47,7 @@ "onError": { "type": { "name": "func" }, "signature": { - "type": "function(error: TError, value: TValue) => void", + "type": "function(error: TError, value: InferPickerValue) => void", "describedArgs": ["error", "value"] } }, diff --git a/docs/src/modules/components/PickersPlayground.tsx b/docs/src/modules/components/PickersPlayground.tsx index 7366b804e184..188921e6e3e9 100644 --- a/docs/src/modules/components/PickersPlayground.tsx +++ b/docs/src/modules/components/PickersPlayground.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { alpha, styled } from '@mui/material/styles'; -import dayjs, { Dayjs } from 'dayjs'; +import dayjs from 'dayjs'; import Box from '@mui/material/Box'; import FormControl from '@mui/material/FormControl'; import FormLabel from '@mui/material/FormLabel'; @@ -33,7 +33,6 @@ import { } from '@mui/x-date-pickers/StaticDateTimePicker'; import { DateOrTimeView } from '@mui/x-date-pickers/models'; import { PickersShortcutsItem } from '@mui/x-date-pickers/PickersShortcuts'; -import { DateRange } from '@mui/x-date-pickers-pro/models'; import { DesktopDateRangePicker } from '@mui/x-date-pickers-pro/DesktopDateRangePicker'; import { MobileDateRangePicker } from '@mui/x-date-pickers-pro/MobileDateRangePicker'; import { StaticDateRangePicker } from '@mui/x-date-pickers-pro/StaticDateRangePicker'; @@ -176,7 +175,7 @@ interface ComponentFamilySet { props: Record; } -const shortcutsItems: PickersShortcutsItem>[] = [ +const shortcutsItems: PickersShortcutsItem[] = [ { label: 'This Week', getValue: () => { diff --git a/docs/src/modules/components/overview/mainDemo/Clock.tsx b/docs/src/modules/components/overview/mainDemo/Clock.tsx index 6ca16f44532e..75d467ebf5b7 100644 --- a/docs/src/modules/components/overview/mainDemo/Clock.tsx +++ b/docs/src/modules/components/overview/mainDemo/Clock.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import dayjs, { Dayjs } from 'dayjs'; +import dayjs from 'dayjs'; import { styled } from '@mui/material/styles'; import Card from '@mui/material/Card'; import { StaticTimePicker } from '@mui/x-date-pickers/StaticTimePicker'; @@ -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 c8a9df4ce611..734ddaea4a75 100644 --- a/docs/src/modules/components/overview/mainDemo/DateRangeWithShortcuts.tsx +++ b/docs/src/modules/components/overview/mainDemo/DateRangeWithShortcuts.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import dayjs, { Dayjs } from 'dayjs'; +import dayjs from 'dayjs'; import { useTheme } from '@mui/material/styles'; import useMediaQuery from '@mui/material/useMediaQuery'; import Card from '@mui/material/Card'; @@ -12,9 +12,8 @@ import { PickersLayoutRoot, PickersLayoutContentWrapper, } from '@mui/x-date-pickers/PickersLayout'; -import { DateRange } from '@mui/x-date-pickers-pro/models'; -const shortcutsItems: PickersShortcutsItem>[] = [ +const shortcutsItems: PickersShortcutsItem[] = [ { label: 'This Week', getValue: () => { @@ -55,7 +54,7 @@ const shortcutsItems: PickersShortcutsItem>[] = [ { label: 'Reset', getValue: () => [null, null] }, ]; -interface CustomLayoutProps extends PickersLayoutProps, 'day'> { +interface CustomLayoutProps extends PickersLayoutProps { 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 b6959d39ed3f..75fa5a658682 100644 --- a/docs/src/modules/components/overview/mainDemo/DigitalClock.tsx +++ b/docs/src/modules/components/overview/mainDemo/DigitalClock.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import { Dayjs } from 'dayjs'; import { styled } from '@mui/material/styles'; import Card from '@mui/material/Card'; import Paper from '@mui/material/Paper'; @@ -24,7 +23,7 @@ const StyledLayout = styled(PickersLayoutRoot)({ }, }); -function CustomLayout(props: PickersLayoutProps) { +function CustomLayout(props: PickersLayoutProps) { const { actionBar, content } = usePickerLayout(props); return ( diff --git a/docs/src/modules/components/overview/mainDemo/PickerButton.tsx b/docs/src/modules/components/overview/mainDemo/PickerButton.tsx index 7dee0bad4fed..1d973ae215e7 100644 --- a/docs/src/modules/components/overview/mainDemo/PickerButton.tsx +++ b/docs/src/modules/components/overview/mainDemo/PickerButton.tsx @@ -5,22 +5,11 @@ import Card from '@mui/material/Card'; import CalendarTodayRoundedIcon from '@mui/icons-material/CalendarTodayRounded'; import { UseDateFieldProps } from '@mui/x-date-pickers/DateField'; import { DatePicker } from '@mui/x-date-pickers/DatePicker'; -import { - BaseSingleInputFieldProps, - DateValidationError, - FieldSection, - PickerValidDate, -} from '@mui/x-date-pickers/models'; +import { BaseSingleInputFieldProps, DateValidationError } from '@mui/x-date-pickers/models'; interface ButtonFieldProps extends UseDateFieldProps, - BaseSingleInputFieldProps< - // This usage of PickerValidDate will go away with TIsRange - PickerValidDate | null, - FieldSection, - true, - DateValidationError - > { + BaseSingleInputFieldProps { 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 0e7a18a2e7af..7137558365f9 100644 --- a/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.tsx +++ b/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.tsx @@ -210,7 +210,7 @@ const DateRangeCalendar = React.forwardRef(function DateRangeCalendar( } = props; const { value, handleValueChange, timezone } = useControlledValueWithTimezone< - PickerRangeValue, + true, NonNullable >({ name: 'DateRangeCalendar', @@ -221,7 +221,7 @@ const DateRangeCalendar = React.forwardRef(function DateRangeCalendar( valueManager: rangeValueManager, }); - const { setValueAndGoToNextView, view } = useViews({ + const { setValueAndGoToNextView, view } = useViews({ view: inView, views, openTo, @@ -707,9 +707,9 @@ DateRangeCalendar.propTypes = { minDate: PropTypes.object, /** * 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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @template TView The view type. Will be one of date or time views. - * @param {TValue} value The new value. + * @param {InferPickerValue} value The new value. * @param {PickerSelectionState | undefined} selectionState Indicates if the date selection is complete. * @param {TView | undefined} selectedView Indicates the view in which the selection has been made. */ 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 4bb144a7c0cb..e601478754f4 100644 --- a/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.types.ts +++ b/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.types.ts @@ -101,7 +101,7 @@ export interface ExportedDateRangeCalendarProps export interface DateRangeCalendarProps extends ExportedDateRangeCalendarProps, UseRangePositionProps, - ExportedUseViewsOptions { + ExportedUseViewsOptions { /** * The selected value. * Used when the component is controlled. diff --git a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.tsx b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.tsx index 4c4ada8e4094..cb704411e7c7 100644 --- a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.tsx @@ -192,17 +192,17 @@ DateRangePicker.propTypes = { name: PropTypes.string, /** * Callback fired when the value is accepted. - * @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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @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 {TValue} value The value that was just accepted. + * @param {InferPickerValue} value The value that was just accepted. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onAccept: PropTypes.func, /** * 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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @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 {TValue} value The new value. + * @param {InferPickerValue} value The new value. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onChange: PropTypes.func, @@ -216,9 +216,9 @@ DateRangePicker.propTypes = { * When a validation error is detected, the `error` parameter contains a non-null value. * This can be used to render an appropriate form error. * @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. - * @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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @param {TError} error The reason why the current value is not valid. - * @param {TValue} value The value associated with the error. + * @param {InferPickerValue} value The value associated with the error. */ onError: PropTypes.func, /** 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 326c9b650e99..d7564c8bac5f 100644 --- a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.types.ts +++ b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.types.ts @@ -1,5 +1,5 @@ import { MakeRequired } from '@mui/x-internals/types'; -import { BaseDateValidationProps, PickerRangeValue } from '@mui/x-date-pickers/internals'; +import { BaseDateValidationProps } from '@mui/x-date-pickers/internals'; import { BaseSingleInputFieldProps } from '@mui/x-date-pickers/models'; import { DesktopDateRangePickerProps, @@ -11,7 +11,7 @@ import { MobileDateRangePickerSlots, MobileDateRangePickerSlotProps, } from '../MobileDateRangePicker'; -import { DateRangeValidationError, RangeFieldSection, UseDateRangeFieldProps } from '../models'; +import { DateRangeValidationError, UseDateRangeFieldProps } from '../models'; export interface DateRangePickerSlots extends DesktopDateRangePickerSlots, @@ -50,4 +50,4 @@ export type DateRangePickerFieldProps, 'format' | 'timezone' | 'value' | keyof BaseDateValidationProps > & - BaseSingleInputFieldProps; + BaseSingleInputFieldProps; diff --git a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerToolbar.tsx b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerToolbar.tsx index 8273067b4870..9c2ccc92d091 100644 --- a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerToolbar.tsx +++ b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerToolbar.tsx @@ -11,7 +11,6 @@ import { useUtils, BaseToolbarProps, ExportedBaseToolbarProps, - PickerRangeValue, } from '@mui/x-date-pickers/internals'; import { usePickersTranslations } from '@mui/x-date-pickers/hooks'; import { UseRangePositionResponse } from '../internals/hooks/useRangePosition'; @@ -32,7 +31,7 @@ const useUtilityClasses = (ownerState: DateRangePickerToolbarProps) => { export interface DateRangePickerToolbarProps extends ExportedDateRangePickerToolbarProps, - Omit, 'onChange' | 'isLandscape'>, + Omit, 'onChange' | 'isLandscape'>, Pick {} export interface ExportedDateRangePickerToolbarProps extends ExportedBaseToolbarProps { diff --git a/packages/x-date-pickers-pro/src/DateRangePicker/shared.tsx b/packages/x-date-pickers-pro/src/DateRangePicker/shared.tsx index b098d57cfb0f..4c44f8e7fab2 100644 --- a/packages/x-date-pickers-pro/src/DateRangePicker/shared.tsx +++ b/packages/x-date-pickers-pro/src/DateRangePicker/shared.tsx @@ -9,7 +9,6 @@ import { BaseDateValidationProps, BasePickerInputProps, PickerViewRendererLookup, - PickerRangeValue, } from '@mui/x-date-pickers/internals'; import { DateRangeValidationError } from '../models'; import { @@ -38,7 +37,7 @@ export interface BaseDateRangePickerSlotProps extends DateRangeCalendarSlotProps export interface BaseDateRangePickerProps extends Omit< - BasePickerInputProps, + BasePickerInputProps, 'view' | 'views' | 'openTo' | 'onViewChange' | 'orientation' >, ExportedDateRangeCalendarProps { @@ -58,7 +57,7 @@ export interface BaseDateRangePickerProps * If `undefined`, internally defined view will be used. */ viewRenderers?: Partial< - PickerViewRendererLookup, {}> + PickerViewRendererLookup, {}> >; } diff --git a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePicker.tsx b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePicker.tsx index 5236bd223247..5796142e35ae 100644 --- a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePicker.tsx @@ -225,17 +225,17 @@ DateTimeRangePicker.propTypes = { name: PropTypes.string, /** * Callback fired when the value is accepted. - * @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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @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 {TValue} value The value that was just accepted. + * @param {InferPickerValue} value The value that was just accepted. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onAccept: PropTypes.func, /** * 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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @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 {TValue} value The new value. + * @param {InferPickerValue} value The new value. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onChange: PropTypes.func, @@ -249,9 +249,9 @@ DateTimeRangePicker.propTypes = { * When a validation error is detected, the `error` parameter contains a non-null value. * This can be used to render an appropriate form error. * @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. - * @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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @param {TError} error The reason why the current value is not valid. - * @param {TValue} value The value associated with the error. + * @param {InferPickerValue} value The value associated with the error. */ onError: PropTypes.func, /** 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 43998205dc64..7f12c8fc8a4d 100644 --- a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePicker.types.ts +++ b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePicker.types.ts @@ -1,9 +1,5 @@ import { MakeRequired } from '@mui/x-internals/types'; -import { - BaseDateValidationProps, - BaseTimeValidationProps, - PickerRangeValue, -} from '@mui/x-date-pickers/internals'; +import { BaseDateValidationProps, BaseTimeValidationProps } from '@mui/x-date-pickers/internals'; import { BaseSingleInputFieldProps } from '@mui/x-date-pickers/models'; import { DesktopDateTimeRangePickerProps, @@ -16,7 +12,7 @@ import { MobileDateTimeRangePickerSlotProps, } from '../MobileDateTimeRangePicker'; import { UseDateTimeRangeFieldProps } from '../internals/models'; -import { DateTimeRangeValidationError, RangeFieldSection } from '../models'; +import { DateTimeRangeValidationError } from '../models'; export interface DateTimeRangePickerSlots extends DesktopDateTimeRangePickerSlots, @@ -61,9 +57,4 @@ export type DateTimeRangePickerFieldProps< | keyof BaseDateValidationProps | keyof BaseTimeValidationProps > & - BaseSingleInputFieldProps< - PickerRangeValue, - RangeFieldSection, - false, - DateTimeRangeValidationError - >; + BaseSingleInputFieldProps; diff --git a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerTimeWrapper.tsx b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerTimeWrapper.tsx index 653a818b33b6..832d51e38e2b 100644 --- a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerTimeWrapper.tsx +++ b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerTimeWrapper.tsx @@ -35,7 +35,7 @@ export type DateTimeRangePickerTimeWrapperProps< selectionState: PickerSelectionState, selectedView: TView, ) => void; - viewRenderer?: PickerViewRenderer | null; + viewRenderer?: PickerViewRenderer | null; openTo?: TView; }; diff --git a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerToolbar.tsx b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerToolbar.tsx index cb78335558ed..d0b75e135ee7 100644 --- a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerToolbar.tsx +++ b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerToolbar.tsx @@ -10,7 +10,6 @@ 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'; @@ -39,7 +38,7 @@ const useUtilityClasses = (ownerState: DateTimeRangePickerToolbarProps) => { type DateTimeRangeViews = Exclude; export interface DateTimeRangePickerToolbarProps - extends BaseToolbarProps, + extends BaseToolbarProps, Pick, ExportedDateTimeRangePickerToolbarProps { ampm?: boolean; diff --git a/packages/x-date-pickers-pro/src/DateTimeRangePicker/shared.tsx b/packages/x-date-pickers-pro/src/DateTimeRangePicker/shared.tsx index d3f2d3127fd9..575c9fd41bea 100644 --- a/packages/x-date-pickers-pro/src/DateTimeRangePicker/shared.tsx +++ b/packages/x-date-pickers-pro/src/DateTimeRangePicker/shared.tsx @@ -17,7 +17,6 @@ import { UseViewsOptions, DateTimeValidationProps, DateOrTimeViewWithMeridiem, - PickerRangeValue, } from '@mui/x-date-pickers/internals'; import { TimeViewRendererProps } from '@mui/x-date-pickers/timeViewRenderers'; import { DigitalClockSlots, DigitalClockSlotProps } from '@mui/x-date-pickers/DigitalClock'; @@ -78,7 +77,7 @@ export type DateTimeRangePickerRenderers< TView extends DateOrTimeViewWithMeridiem, TAdditionalProps extends {} = {}, > = PickerViewRendererLookup< - PickerRangeValue, + true, TView, Omit, 'view' | 'slots' | 'slotProps'> & Omit< @@ -90,15 +89,13 @@ export type DateTimeRangePickerRenderers< export interface BaseDateTimeRangePickerProps extends Omit< - BasePickerInputProps, + BasePickerInputProps, 'orientation' | 'views' | 'openTo' >, ExportedDateRangeCalendarProps, BaseDateValidationProps, DesktopOnlyTimePickerProps, - Partial< - Pick, 'openTo' | 'views'> - >, + Partial, 'openTo' | 'views'>>, DateTimeValidationProps { /** * Overridable component slots. diff --git a/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.tsx b/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.tsx index ce29eb7a0e8f..aabb66d51a3b 100644 --- a/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.tsx @@ -1,11 +1,7 @@ 'use client'; import * as React from 'react'; import PropTypes from 'prop-types'; -import { - PickerViewRendererLookup, - useUtils, - PickerRangeValue, -} from '@mui/x-date-pickers/internals'; +import { PickerViewRendererLookup, useUtils } from '@mui/x-date-pickers/internals'; import { extractValidationProps } from '@mui/x-date-pickers/validation'; import { PickerOwnerState } from '@mui/x-date-pickers/models'; import resolveComponentProps from '@mui/utils/resolveComponentProps'; @@ -46,7 +42,7 @@ const DesktopDateRangePicker = React.forwardRef(function DesktopDateRangePicker< DesktopDateRangePickerProps >(inProps, 'MuiDesktopDateRangePicker'); - const viewRenderers: PickerViewRendererLookup = { + const viewRenderers: PickerViewRendererLookup = { day: renderDateRangeViewCalendar, ...defaultizedProps.viewRenderers, }; @@ -233,17 +229,17 @@ DesktopDateRangePicker.propTypes = { name: PropTypes.string, /** * Callback fired when the value is accepted. - * @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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @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 {TValue} value The value that was just accepted. + * @param {InferPickerValue} value The value that was just accepted. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onAccept: PropTypes.func, /** * 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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @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 {TValue} value The new value. + * @param {InferPickerValue} value The new value. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onChange: PropTypes.func, @@ -257,9 +253,9 @@ DesktopDateRangePicker.propTypes = { * When a validation error is detected, the `error` parameter contains a non-null value. * This can be used to render an appropriate form error. * @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. - * @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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @param {TError} error The reason why the current value is not valid. - * @param {TValue} value The value associated with the error. + * @param {InferPickerValue} value The value associated with the error. */ onError: PropTypes.func, /** diff --git a/packages/x-date-pickers-pro/src/DesktopDateRangePicker/tests/describes.DesktopDateRangePicker.test.tsx b/packages/x-date-pickers-pro/src/DesktopDateRangePicker/tests/describes.DesktopDateRangePicker.test.tsx index 8fd06df96b68..69964b4838ba 100644 --- a/packages/x-date-pickers-pro/src/DesktopDateRangePicker/tests/describes.DesktopDateRangePicker.test.tsx +++ b/packages/x-date-pickers-pro/src/DesktopDateRangePicker/tests/describes.DesktopDateRangePicker.test.tsx @@ -12,6 +12,7 @@ import { } from 'test/utils/pickers'; import { DesktopDateRangePicker } from '@mui/x-date-pickers-pro/DesktopDateRangePicker'; import { SingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField'; +import { DateRange } from '@mui/x-date-pickers-pro/models'; import { describeConformance } from 'test/utils/describeConformance'; describe(' - Describes', () => { @@ -45,7 +46,7 @@ describe(' - Describes', () => { ], })); - describeValue(DesktopDateRangePicker, () => ({ + describeValue(DesktopDateRangePicker, () => ({ render, componentFamily: 'picker', type: 'date-range', @@ -76,7 +77,7 @@ describe(' - Describes', () => { value, { isOpened, applySameValue, setEndDate = false, selectSection, pressKey }, ) => { - let newValue: any[]; + let newValue: DateRange; if (applySameValue) { newValue = value; } else if (setEndDate) { @@ -101,7 +102,7 @@ describe(' - Describes', () => { })); // With single input field - describeValue(DesktopDateRangePicker, () => ({ + describeValue(DesktopDateRangePicker, () => ({ render, componentFamily: 'picker', type: 'date-range', @@ -138,7 +139,7 @@ describe(' - Describes', () => { value, { isOpened, applySameValue, setEndDate = false, selectSection, pressKey }, ) => { - let newValue: any[]; + let newValue: DateRange; if (applySameValue) { newValue = value; } else if (setEndDate) { diff --git a/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.tsx b/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.tsx index e40fc1df38fe..25e1a8e0f2ce 100644 --- a/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.tsx @@ -9,7 +9,6 @@ import { PickerViewsRendererProps, resolveDateTimeFormat, useUtils, - PickerRangeValue, } from '@mui/x-date-pickers/internals'; import { extractValidationProps } from '@mui/x-date-pickers/validation'; import { PickerOwnerState } from '@mui/x-date-pickers/models'; @@ -51,7 +50,7 @@ const rendererInterceptor = function rendererInterceptor< inViewRenderers: DateTimeRangePickerRenderers, popperView: DateTimeRangePickerView, rendererProps: PickerViewsRendererProps< - PickerRangeValue, + true, DateTimeRangePickerView, DefaultizedProps< Omit< @@ -103,7 +102,7 @@ const rendererInterceptor = function rendererInterceptor< openTo={isInternalTimeView(openTo) ? openTo : 'hours'} viewRenderer={ inViewRenderers[isTimeViewActive ? popperView : 'hours'] as PickerViewRenderer< - PickerRangeValue, + true, DateTimeRangePickerView, any, {} @@ -391,17 +390,17 @@ DesktopDateTimeRangePicker.propTypes = { name: PropTypes.string, /** * Callback fired when the value is accepted. - * @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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @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 {TValue} value The value that was just accepted. + * @param {InferPickerValue} value The value that was just accepted. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onAccept: PropTypes.func, /** * 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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @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 {TValue} value The new value. + * @param {InferPickerValue} value The new value. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onChange: PropTypes.func, @@ -415,9 +414,9 @@ DesktopDateTimeRangePicker.propTypes = { * When a validation error is detected, the `error` parameter contains a non-null value. * This can be used to render an appropriate form error. * @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. - * @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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @param {TError} error The reason why the current value is not valid. - * @param {TValue} value The value associated with the error. + * @param {InferPickerValue} value The value associated with the error. */ onError: PropTypes.func, /** diff --git a/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/tests/describes.DesktopDateTimeRangePicker.test.tsx b/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/tests/describes.DesktopDateTimeRangePicker.test.tsx index d3a4235ce6e1..25c6683aac2f 100644 --- a/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/tests/describes.DesktopDateTimeRangePicker.test.tsx +++ b/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/tests/describes.DesktopDateTimeRangePicker.test.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import { describeConformance, fireEvent, screen } from '@mui/internal-test-utils'; +import { DateRange } from '@mui/x-date-pickers-pro/models'; import { createPickerRenderer, adapterToUse, @@ -46,7 +47,7 @@ describe(' - Describes', () => { ], })); - describeValue(DesktopDateTimeRangePicker, () => ({ + describeValue(DesktopDateTimeRangePicker, () => ({ render, componentFamily: 'picker', type: 'date-time-range', @@ -86,7 +87,7 @@ describe(' - Describes', () => { value, { isOpened, applySameValue, setEndDate = false, selectSection, pressKey }, ) => { - let newValue: any[]; + let newValue: DateRange; if (applySameValue) { newValue = value; } else if (setEndDate) { diff --git a/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.tsx b/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.tsx index 63694b969229..9b5eb0a16901 100644 --- a/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.tsx @@ -1,11 +1,7 @@ 'use client'; import * as React from 'react'; import PropTypes from 'prop-types'; -import { - PickerViewRendererLookup, - useUtils, - PickerRangeValue, -} from '@mui/x-date-pickers/internals'; +import { PickerViewRendererLookup, useUtils } from '@mui/x-date-pickers/internals'; import { extractValidationProps } from '@mui/x-date-pickers/validation'; import { PickerOwnerState } from '@mui/x-date-pickers/models'; import resolveComponentProps from '@mui/utils/resolveComponentProps'; @@ -46,7 +42,7 @@ const MobileDateRangePicker = React.forwardRef(function MobileDateRangePicker< MobileDateRangePickerProps >(inProps, 'MuiMobileDateRangePicker'); - const viewRenderers: PickerViewRendererLookup = { + const viewRenderers: PickerViewRendererLookup = { day: renderDateRangeViewCalendar, ...defaultizedProps.viewRenderers, }; @@ -229,17 +225,17 @@ MobileDateRangePicker.propTypes = { name: PropTypes.string, /** * Callback fired when the value is accepted. - * @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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @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 {TValue} value The value that was just accepted. + * @param {InferPickerValue} value The value that was just accepted. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onAccept: PropTypes.func, /** * 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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @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 {TValue} value The new value. + * @param {InferPickerValue} value The new value. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onChange: PropTypes.func, @@ -253,9 +249,9 @@ MobileDateRangePicker.propTypes = { * When a validation error is detected, the `error` parameter contains a non-null value. * This can be used to render an appropriate form error. * @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. - * @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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @param {TError} error The reason why the current value is not valid. - * @param {TValue} value The value associated with the error. + * @param {InferPickerValue} value The value associated with the error. */ onError: PropTypes.func, /** diff --git a/packages/x-date-pickers-pro/src/MobileDateRangePicker/tests/describes.MobileDateRangePicker.test.tsx b/packages/x-date-pickers-pro/src/MobileDateRangePicker/tests/describes.MobileDateRangePicker.test.tsx index 981bd8819f28..f40358155963 100644 --- a/packages/x-date-pickers-pro/src/MobileDateRangePicker/tests/describes.MobileDateRangePicker.test.tsx +++ b/packages/x-date-pickers-pro/src/MobileDateRangePicker/tests/describes.MobileDateRangePicker.test.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { screen, fireDiscreteEvent, fireEvent } from '@mui/internal-test-utils'; import { MobileDateRangePicker } from '@mui/x-date-pickers-pro/MobileDateRangePicker'; +import { DateRange } from '@mui/x-date-pickers-pro/models'; import { adapterToUse, createPickerRenderer, @@ -45,7 +46,7 @@ describe(' - Describes', () => { ], })); - describeValue(MobileDateRangePicker, () => ({ + describeValue(MobileDateRangePicker, () => ({ render, componentFamily: 'picker', type: 'date-range', @@ -73,7 +74,7 @@ describe(' - Describes', () => { expectFieldValueV7(endFieldRoot, expectedEndValueStr); }, setNewValue: (value, { isOpened, applySameValue, setEndDate = false }) => { - let newValue: any[]; + let newValue: DateRange; if (applySameValue) { newValue = value; } else if (setEndDate) { diff --git a/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/MobileDateTimeRangePicker.tsx b/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/MobileDateTimeRangePicker.tsx index 9ceb784539b2..bcb151c30ccb 100644 --- a/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/MobileDateTimeRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/MobileDateTimeRangePicker.tsx @@ -13,7 +13,6 @@ import { TimeViewWithMeridiem, resolveDateTimeFormat, useUtils, - PickerRangeValue, } from '@mui/x-date-pickers/internals'; import { extractValidationProps } from '@mui/x-date-pickers/validation'; import { PickerOwnerState } from '@mui/x-date-pickers/models'; @@ -50,7 +49,7 @@ const rendererInterceptor = function rendererInterceptor< inViewRenderers: DateTimeRangePickerRenderers, popperView: DateTimeRangePickerView, rendererProps: PickerViewsRendererProps< - PickerRangeValue, + true, DateTimeRangePickerView, DefaultizedProps< UseMobileRangePickerProps< @@ -102,9 +101,7 @@ const rendererInterceptor = function rendererInterceptor< return ( - } + viewRenderer={viewRenderer as PickerViewRenderer} view={view && isInternalTimeView(view) ? view : 'hours'} views={finalProps.views as TimeViewWithMeridiem[]} openTo={isInternalTimeView(openTo) ? openTo : 'hours'} @@ -112,7 +109,7 @@ const rendererInterceptor = function rendererInterceptor< ); } // avoiding problem of `props: never` - const typedViewRenderer = viewRenderer as PickerViewRenderer; + const typedViewRenderer = viewRenderer as PickerViewRenderer; return typedViewRenderer({ ...finalProps, @@ -380,17 +377,17 @@ MobileDateTimeRangePicker.propTypes = { name: PropTypes.string, /** * Callback fired when the value is accepted. - * @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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @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 {TValue} value The value that was just accepted. + * @param {InferPickerValue} value The value that was just accepted. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onAccept: PropTypes.func, /** * 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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @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 {TValue} value The new value. + * @param {InferPickerValue} value The new value. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onChange: PropTypes.func, @@ -404,9 +401,9 @@ MobileDateTimeRangePicker.propTypes = { * When a validation error is detected, the `error` parameter contains a non-null value. * This can be used to render an appropriate form error. * @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. - * @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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @param {TError} error The reason why the current value is not valid. - * @param {TValue} value The value associated with the error. + * @param {InferPickerValue} value The value associated with the error. */ onError: PropTypes.func, /** diff --git a/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/tests/describes.MobileDateTimeRangePicker.test.tsx b/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/tests/describes.MobileDateTimeRangePicker.test.tsx index e0ba6d9c933a..2650507d38b5 100644 --- a/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/tests/describes.MobileDateTimeRangePicker.test.tsx +++ b/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/tests/describes.MobileDateTimeRangePicker.test.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import { describeConformance, fireEvent, screen } from '@mui/internal-test-utils'; +import { DateRange } from '@mui/x-date-pickers-pro/models'; import { createPickerRenderer, adapterToUse, @@ -47,7 +48,7 @@ describe(' - Describes', () => { ], })); - describeValue(MobileDateTimeRangePicker, () => ({ + describeValue(MobileDateTimeRangePicker, () => ({ render, componentFamily: 'picker', type: 'date-time-range', @@ -91,7 +92,7 @@ describe(' - Describes', () => { initialFocus: setEndDate ? 'end' : 'start', }); } - let newValue: any[]; + let newValue: DateRange; if (applySameValue) { newValue = value; } else if (setEndDate) { diff --git a/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx b/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx index 3c73332f550a..4f59a23d19c6 100644 --- a/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx +++ b/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx @@ -254,9 +254,9 @@ MultiInputDateRangeField.propTypes = { minDate: PropTypes.object, /** * 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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @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 {TValue} value The new value. + * @param {InferPickerValue} value The new value. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onChange: PropTypes.func, @@ -265,9 +265,9 @@ MultiInputDateRangeField.propTypes = { * When a validation error is detected, the `error` parameter contains a non-null value. * This can be used to render an appropriate form error. * @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. - * @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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @param {TError} error The reason why the current value is not valid. - * @param {TValue} value The value associated with the error. + * @param {InferPickerValue} value The value associated with the error. */ onError: PropTypes.func, /** diff --git a/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx b/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx index 2046a04999ba..d9dc7cb731e1 100644 --- a/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx +++ b/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx @@ -285,9 +285,9 @@ MultiInputDateTimeRangeField.propTypes = { minutesStep: PropTypes.number, /** * 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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @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 {TValue} value The new value. + * @param {InferPickerValue} value The new value. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onChange: PropTypes.func, @@ -296,9 +296,9 @@ MultiInputDateTimeRangeField.propTypes = { * When a validation error is detected, the `error` parameter contains a non-null value. * This can be used to render an appropriate form error. * @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. - * @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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @param {TError} error The reason why the current value is not valid. - * @param {TValue} value The value associated with the error. + * @param {InferPickerValue} value The value associated with the error. */ onError: PropTypes.func, /** diff --git a/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx b/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx index 118d671e70d3..201da7c3a5da 100644 --- a/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx +++ b/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx @@ -270,9 +270,9 @@ MultiInputTimeRangeField.propTypes = { minutesStep: PropTypes.number, /** * 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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @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 {TValue} value The new value. + * @param {InferPickerValue} value The new value. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onChange: PropTypes.func, @@ -281,9 +281,9 @@ MultiInputTimeRangeField.propTypes = { * When a validation error is detected, the `error` parameter contains a non-null value. * This can be used to render an appropriate form error. * @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. - * @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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @param {TError} error The reason why the current value is not valid. - * @param {TValue} value The value associated with the error. + * @param {InferPickerValue} value The value associated with the error. */ onError: PropTypes.func, /** diff --git a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx index c4559c007dac..f8dd6907eae9 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx +++ b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx @@ -213,9 +213,9 @@ SingleInputDateRangeField.propTypes = { onBlur: PropTypes.func, /** * 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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @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 {TValue} value The new value. + * @param {InferPickerValue} value The new value. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onChange: PropTypes.func, @@ -228,9 +228,9 @@ SingleInputDateRangeField.propTypes = { * When a validation error is detected, the `error` parameter contains a non-null value. * This can be used to render an appropriate form error. * @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. - * @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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @param {TError} error The reason why the current value is not valid. - * @param {TValue} value The value associated with the error. + * @param {InferPickerValue} value The value associated with the error. */ onError: PropTypes.func, onFocus: PropTypes.func, 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 da88995ac304..ac6817f6a3d9 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.types.ts +++ b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.types.ts @@ -1,30 +1,21 @@ import * as React from 'react'; import { SlotComponentProps } from '@mui/utils'; import TextField from '@mui/material/TextField'; -import { UseFieldInternalProps, PickerRangeValue } from '@mui/x-date-pickers/internals'; +import { 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 type { - RangeFieldSection, - DateRangeValidationError, - UseDateRangeFieldProps, -} from '../models'; +import type { DateRangeValidationError, UseDateRangeFieldProps } from '../models'; export interface UseSingleInputDateRangeFieldProps< TEnableAccessibleFieldDOMStructure extends boolean, > extends UseDateRangeFieldProps, ExportedUseClearableFieldProps, Pick< - UseFieldInternalProps< - PickerRangeValue, - RangeFieldSection, - TEnableAccessibleFieldDOMStructure, - DateRangeValidationError - >, + UseFieldInternalProps, 'unstableFieldRef' > {} diff --git a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/useSingleInputDateRangeField.ts b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/useSingleInputDateRangeField.ts index 628a548326c4..75ae6ce7b018 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/useSingleInputDateRangeField.ts +++ b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/useSingleInputDateRangeField.ts @@ -1,11 +1,10 @@ 'use client'; import * as React from 'react'; -import { useField, useDefaultizedDateField, PickerRangeValue } from '@mui/x-date-pickers/internals'; +import { useField, useDefaultizedDateField } from '@mui/x-date-pickers/internals'; import { useSplitFieldProps } from '@mui/x-date-pickers/hooks'; import { UseSingleInputDateRangeFieldProps } from './SingleInputDateRangeField.types'; import { rangeValueManager, getRangeFieldValueManager } from '../internals/utils/valueManagers'; import { validateDateRange } from '../validation'; -import { RangeFieldSection } from '../models'; export const useSingleInputDateRangeField = < TEnableAccessibleFieldDOMStructure extends boolean, @@ -26,8 +25,7 @@ export const useSingleInputDateRangeField = < ); return useField< - PickerRangeValue, - RangeFieldSection, + true, TEnableAccessibleFieldDOMStructure, typeof forwardedProps, typeof internalProps diff --git a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx index 931316f32d63..5ead5cf8ec97 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx +++ b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx @@ -246,9 +246,9 @@ SingleInputDateTimeRangeField.propTypes = { onBlur: PropTypes.func, /** * 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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @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 {TValue} value The new value. + * @param {InferPickerValue} value The new value. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onChange: PropTypes.func, @@ -261,9 +261,9 @@ SingleInputDateTimeRangeField.propTypes = { * When a validation error is detected, the `error` parameter contains a non-null value. * This can be used to render an appropriate form error. * @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. - * @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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @param {TError} error The reason why the current value is not valid. - * @param {TValue} value The value associated with the error. + * @param {InferPickerValue} value The value associated with the error. */ onError: PropTypes.func, onFocus: PropTypes.func, 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 6632d68fc3eb..da7292cfe120 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.types.ts +++ b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.types.ts @@ -1,7 +1,7 @@ import * as React from 'react'; import { SlotComponentProps } from '@mui/utils'; import TextField from '@mui/material/TextField'; -import { UseFieldInternalProps, PickerRangeValue } from '@mui/x-date-pickers/internals'; +import { UseFieldInternalProps } from '@mui/x-date-pickers/internals'; import { BuiltInFieldTextFieldProps } from '@mui/x-date-pickers/models'; import { ExportedUseClearableFieldProps, @@ -9,19 +9,14 @@ import { UseClearableFieldSlotProps, } from '@mui/x-date-pickers/hooks'; import { UseDateTimeRangeFieldProps } from '../internals/models'; -import { RangeFieldSection, DateTimeRangeValidationError } from '../models'; +import { DateTimeRangeValidationError } from '../models'; export interface UseSingleInputDateTimeRangeFieldProps< TEnableAccessibleFieldDOMStructure extends boolean, > extends UseDateTimeRangeFieldProps, ExportedUseClearableFieldProps, Pick< - UseFieldInternalProps< - PickerRangeValue, - RangeFieldSection, - TEnableAccessibleFieldDOMStructure, - DateTimeRangeValidationError - >, + UseFieldInternalProps, 'unstableFieldRef' > {} diff --git a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.ts b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.ts index f96bfe35fd10..2e2dc22065a5 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.ts +++ b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.ts @@ -1,15 +1,10 @@ 'use client'; import * as React from 'react'; -import { - useField, - useDefaultizedDateTimeField, - PickerRangeValue, -} from '@mui/x-date-pickers/internals'; +import { useField, useDefaultizedDateTimeField } from '@mui/x-date-pickers/internals'; import { useSplitFieldProps } from '@mui/x-date-pickers/hooks'; import { UseSingleInputDateTimeRangeFieldProps } from './SingleInputDateTimeRangeField.types'; import { rangeValueManager, getRangeFieldValueManager } from '../internals/utils/valueManagers'; import { validateDateTimeRange } from '../validation'; -import { RangeFieldSection } from '../models'; export const useSingleInputDateTimeRangeField = < TEnableAccessibleFieldDOMStructure extends boolean, @@ -30,8 +25,7 @@ export const useSingleInputDateTimeRangeField = < ); return useField< - PickerRangeValue, - RangeFieldSection, + true, TEnableAccessibleFieldDOMStructure, typeof forwardedProps, typeof internalProps diff --git a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx index 5641de679ac9..e06b597e0737 100644 --- a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx +++ b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx @@ -228,9 +228,9 @@ SingleInputTimeRangeField.propTypes = { onBlur: PropTypes.func, /** * 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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @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 {TValue} value The new value. + * @param {InferPickerValue} value The new value. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onChange: PropTypes.func, @@ -243,9 +243,9 @@ SingleInputTimeRangeField.propTypes = { * When a validation error is detected, the `error` parameter contains a non-null value. * This can be used to render an appropriate form error. * @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. - * @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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @param {TError} error The reason why the current value is not valid. - * @param {TValue} value The value associated with the error. + * @param {InferPickerValue} value The value associated with the error. */ onError: PropTypes.func, onFocus: PropTypes.func, 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 1cc0fa3fd483..2a19d339bd14 100644 --- a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.types.ts +++ b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.types.ts @@ -1,7 +1,7 @@ import * as React from 'react'; import { SlotComponentProps } from '@mui/utils'; import TextField from '@mui/material/TextField'; -import { PickerRangeValue, UseFieldInternalProps } from '@mui/x-date-pickers/internals'; +import { UseFieldInternalProps } from '@mui/x-date-pickers/internals'; import { BuiltInFieldTextFieldProps } from '@mui/x-date-pickers/models'; import { ExportedUseClearableFieldProps, @@ -9,19 +9,14 @@ import { UseClearableFieldSlotProps, } from '@mui/x-date-pickers/hooks'; import { UseTimeRangeFieldProps } from '../internals/models'; -import { RangeFieldSection, TimeRangeValidationError } from '../models'; +import { TimeRangeValidationError } from '../models'; export interface UseSingleInputTimeRangeFieldProps< TEnableAccessibleFieldDOMStructure extends boolean, > extends UseTimeRangeFieldProps, ExportedUseClearableFieldProps, Pick< - UseFieldInternalProps< - PickerRangeValue, - RangeFieldSection, - TEnableAccessibleFieldDOMStructure, - TimeRangeValidationError - >, + UseFieldInternalProps, 'unstableFieldRef' > {} diff --git a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/useSingleInputTimeRangeField.ts b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/useSingleInputTimeRangeField.ts index f7a4eec521e6..2c1933eae3e6 100644 --- a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/useSingleInputTimeRangeField.ts +++ b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/useSingleInputTimeRangeField.ts @@ -1,11 +1,10 @@ 'use client'; import * as React from 'react'; -import { useField, useDefaultizedTimeField, PickerRangeValue } from '@mui/x-date-pickers/internals'; +import { useField, useDefaultizedTimeField } from '@mui/x-date-pickers/internals'; import { useSplitFieldProps } from '@mui/x-date-pickers/hooks'; import { UseSingleInputTimeRangeFieldProps } from './SingleInputTimeRangeField.types'; import { rangeValueManager, getRangeFieldValueManager } from '../internals/utils/valueManagers'; import { validateTimeRange } from '../validation'; -import { RangeFieldSection } from '../models'; export const useSingleInputTimeRangeField = < TEnableAccessibleFieldDOMStructure extends boolean, @@ -26,8 +25,7 @@ export const useSingleInputTimeRangeField = < ); return useField< - PickerRangeValue, - RangeFieldSection, + true, TEnableAccessibleFieldDOMStructure, typeof forwardedProps, typeof internalProps diff --git a/packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.tsx b/packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.tsx index 7696f3168f6a..4e4bc49b23f1 100644 --- a/packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.tsx @@ -1,7 +1,7 @@ 'use client'; import * as React from 'react'; import PropTypes from 'prop-types'; -import { PickerRangeValue, PickerViewRendererLookup } from '@mui/x-date-pickers/internals'; +import { PickerViewRendererLookup } from '@mui/x-date-pickers/internals'; import { useStaticRangePicker } from '../internals/hooks/useStaticRangePicker'; import { StaticDateRangePickerProps } from './StaticDateRangePicker.types'; import { useDateRangePickerDefaultizedProps } from '../DateRangePicker/shared'; @@ -34,7 +34,7 @@ const StaticDateRangePicker = React.forwardRef(function StaticDateRangePicker( const displayStaticWrapperAs = defaultizedProps.displayStaticWrapperAs ?? 'mobile'; - const viewRenderers: PickerViewRendererLookup = { + const viewRenderers: PickerViewRendererLookup = { day: renderDateRangeViewCalendar, ...defaultizedProps.viewRenderers, }; @@ -175,17 +175,17 @@ StaticDateRangePicker.propTypes = { minDate: PropTypes.object, /** * Callback fired when the value is accepted. - * @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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @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 {TValue} value The value that was just accepted. + * @param {InferPickerValue} value The value that was just accepted. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onAccept: PropTypes.func, /** * 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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @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 {TValue} value The new value. + * @param {InferPickerValue} value The new value. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onChange: PropTypes.func, @@ -200,9 +200,9 @@ StaticDateRangePicker.propTypes = { * When a validation error is detected, the `error` parameter contains a non-null value. * This can be used to render an appropriate form error. * @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. - * @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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @param {TError} error The reason why the current value is not valid. - * @param {TValue} value The value associated with the error. + * @param {InferPickerValue} value The value associated with the error. */ onError: PropTypes.func, /** diff --git a/packages/x-date-pickers-pro/src/internals/hooks/models/useRangePicker.ts b/packages/x-date-pickers-pro/src/internals/hooks/models/useRangePicker.ts index 53e0cd5f8b16..4b016b05104d 100644 --- a/packages/x-date-pickers-pro/src/internals/hooks/models/useRangePicker.ts +++ b/packages/x-date-pickers-pro/src/internals/hooks/models/useRangePicker.ts @@ -8,7 +8,6 @@ import { UsePickerViewsNonStaticProps, DateOrTimeViewWithMeridiem, ExportedBaseTabsProps, - PickerRangeValue, } from '@mui/x-date-pickers/internals'; import { ExportedPickersLayoutSlots, @@ -20,16 +19,15 @@ import { RangePickerFieldSlots, RangePickerFieldSlotProps, } from '../useEnrichedRangePickerFieldProps'; -import { RangeFieldSection } from '../../../models'; export interface UseRangePickerSlots - extends ExportedPickersLayoutSlots, + extends ExportedPickersLayoutSlots, RangePickerFieldSlots {} export interface UseRangePickerSlotProps< TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, -> extends ExportedPickersLayoutSlotProps, +> extends ExportedPickersLayoutSlotProps, RangePickerFieldSlotProps { tabs?: ExportedBaseTabsProps; toolbar?: ExportedBaseToolbarProps; @@ -48,7 +46,7 @@ export interface UseRangePickerProps< TExternalProps extends UsePickerViewsProps, TAdditionalViewProps extends {}, > extends RangeOnlyPickerProps, - BasePickerProps {} + BasePickerProps {} export interface RangePickerAdditionalViewProps extends Pick {} @@ -58,13 +56,7 @@ export interface UseRangePickerParams< TExternalProps extends UseRangePickerProps, TAdditionalViewProps extends {}, > extends Pick< - UsePickerParams< - PickerRangeValue, - TView, - RangeFieldSection, - TExternalProps, - TAdditionalViewProps - >, + UsePickerParams, 'valueManager' | 'valueType' | 'validator' | 'rendererInterceptor' > { props: 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 a5d29869d304..74006d15f5a9 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,7 +11,6 @@ import { DateOrTimeViewWithMeridiem, ExportedBaseTabsProps, PickersProvider, - PickerRangeValue, } from '@mui/x-date-pickers/internals'; import { FieldRef, InferError, PickerOwnerState } from '@mui/x-date-pickers/models'; import { @@ -25,7 +24,6 @@ import { useEnrichedRangePickerFieldProps, } from '../useEnrichedRangePickerFieldProps'; import { getReleaseInfo } from '../../utils/releaseInfo'; -import { RangeFieldSection } from '../../../models'; import { useRangePosition } from '../useRangePosition'; const releaseInfo = getReleaseInfo(); @@ -70,8 +68,8 @@ export const useDesktopRangePicker = < const fieldContainerRef = React.useRef(null); const anchorRef = React.useRef(null); const popperRef = React.useRef(null); - const startFieldRef = React.useRef>(null); - const endFieldRef = React.useRef>(null); + const startFieldRef = React.useRef>(null); + const endFieldRef = React.useRef>(null); const initialView = React.useRef(props.openTo ?? null); const fieldType = (slots.field as any).fieldType ?? 'multi-input'; @@ -89,13 +87,7 @@ export const useDesktopRangePicker = < shouldRestoreFocus, fieldProps: pickerFieldProps, ownerState, - } = usePicker< - PickerRangeValue, - TView, - RangeFieldSection, - TExternalProps, - DesktopRangePickerAdditionalViewProps - >({ + } = usePicker({ ...pickerParams, props, wrapperVariant: 'desktop', @@ -187,7 +179,7 @@ export const useDesktopRangePicker = < onViewChange: layoutProps.onViewChange, }); - const slotPropsForLayout: PickersLayoutSlotProps = { + const slotPropsForLayout: PickersLayoutSlotProps = { ...slotProps, tabs: { ...slotProps?.tabs, 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 efe41c95ec79..010bb3b564b8 100644 --- a/packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerFieldProps.ts +++ b/packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerFieldProps.ts @@ -24,13 +24,11 @@ import { UsePickerResponse, WrapperVariant, DateOrTimeViewWithMeridiem, - PickerRangeValue, } from '@mui/x-date-pickers/internals'; import { BaseMultiInputFieldProps, MultiInputFieldSlotRootProps, MultiInputFieldSlotTextFieldProps, - RangeFieldSection, RangePosition, FieldType, UseDateRangeFieldProps, @@ -60,12 +58,7 @@ export interface RangePickerFieldSlots extends UseClearableFieldSlots { export interface RangePickerFieldSlotProps extends UseClearableFieldSlotProps { field?: SlotComponentPropsFromProps< - BaseMultiInputFieldProps< - PickerRangeValue, - RangeFieldSection, - TEnableAccessibleFieldDOMStructure, - unknown - >, + BaseMultiInputFieldProps, {}, PickerOwnerState >; @@ -84,20 +77,10 @@ export type RangePickerPropsForFieldSlot< TError, > = | (TIsSingleInput extends true - ? BaseSingleInputFieldProps< - PickerRangeValue, - RangeFieldSection, - TEnableAccessibleFieldDOMStructure, - TError - > + ? BaseSingleInputFieldProps : never) | (TIsSingleInput extends false - ? BaseMultiInputFieldProps< - PickerRangeValue, - RangeFieldSection, - TEnableAccessibleFieldDOMStructure, - TError - > + ? BaseMultiInputFieldProps : never); export interface UseEnrichedRangePickerFieldPropsParams< @@ -105,10 +88,7 @@ export interface UseEnrichedRangePickerFieldPropsParams< TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError, -> extends Pick< - UsePickerResponse, - 'open' | 'actions' - >, +> extends Pick, 'open' | 'actions'>, UseRangePositionResponse { wrapperVariant: WrapperVariant; fieldType: FieldType; @@ -129,8 +109,8 @@ export interface UseEnrichedRangePickerFieldPropsParams< currentView?: TView | null; initialView?: TView; onViewChange?: (view: TView) => void; - startFieldRef: React.RefObject>; - endFieldRef: React.RefObject>; + startFieldRef: React.RefObject>; + endFieldRef: React.RefObject>; } const useMultiInputFieldSlotProps = < @@ -163,12 +143,7 @@ const useMultiInputFieldSlotProps = < TEnableAccessibleFieldDOMStructure, TError >) => { - type ReturnType = BaseMultiInputFieldProps< - PickerRangeValue, - RangeFieldSection, - TEnableAccessibleFieldDOMStructure, - TError - >; + type ReturnType = BaseMultiInputFieldProps; const translations = usePickersTranslations(); const handleStartFieldRef = useForkRef(fieldProps.unstableStartFieldRef, startFieldRef); @@ -339,12 +314,7 @@ const useSingleInputFieldSlotProps = < TEnableAccessibleFieldDOMStructure, TError >) => { - type ReturnType = BaseSingleInputFieldProps< - PickerRangeValue, - RangeFieldSection, - TEnableAccessibleFieldDOMStructure, - TError - >; + type ReturnType = BaseSingleInputFieldProps; const handleFieldRef = useForkRef(fieldProps.unstableFieldRef, startFieldRef, endFieldRef); 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 aa9ab1b34b53..98a14b34a6e5 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,7 +9,6 @@ import { DateOrTimeViewWithMeridiem, ExportedBaseTabsProps, PickersProvider, - PickerRangeValue, } from '@mui/x-date-pickers/internals'; import { usePickersTranslations } from '@mui/x-date-pickers/hooks'; import { FieldRef, InferError, PickerOwnerState } from '@mui/x-date-pickers/models'; @@ -25,7 +24,6 @@ import { useEnrichedRangePickerFieldProps, } from '../useEnrichedRangePickerFieldProps'; import { getReleaseInfo } from '../../utils/releaseInfo'; -import { RangeFieldSection } from '../../../models'; import { useRangePosition } from '../useRangePosition'; const releaseInfo = getReleaseInfo(); @@ -65,8 +63,8 @@ export const useMobileRangePicker = < localeText, } = props; - const startFieldRef = React.useRef>(null); - const endFieldRef = React.useRef>(null); + const startFieldRef = React.useRef>(null); + const endFieldRef = React.useRef>(null); const fieldType = (slots.field as any).fieldType ?? 'multi-input'; const { rangePosition, onRangePositionChange } = useRangePosition( @@ -84,13 +82,7 @@ export const useMobileRangePicker = < renderCurrentView, fieldProps: pickerFieldProps, ownerState, - } = usePicker< - PickerRangeValue, - TView, - RangeFieldSection, - TExternalProps, - MobileRangePickerAdditionalViewProps - >({ + } = usePicker({ ...pickerParams, props, wrapperVariant: 'mobile', @@ -159,7 +151,7 @@ export const useMobileRangePicker = < endFieldRef, }); - const slotPropsForLayout: PickersLayoutSlotProps = { + const slotPropsForLayout: PickersLayoutSlotProps = { ...innerSlotProps, tabs: { ...innerSlotProps?.tabs, 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 68e10d651b1a..2a87c1d474bb 100644 --- a/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputFieldSelectedSections.ts +++ b/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputFieldSelectedSections.ts @@ -3,21 +3,20 @@ import useForkRef from '@mui/utils/useForkRef'; import useEventCallback from '@mui/utils/useEventCallback'; import { UseFieldInternalProps } from '@mui/x-date-pickers/internals'; import { FieldRef, FieldSelectedSections } from '@mui/x-date-pickers/models'; -import { RangeFieldSection } from '../../models'; interface UseMultiInputFieldSelectedSectionsParams extends Pick< - UseFieldInternalProps, + UseFieldInternalProps, 'selectedSections' | 'onSelectedSectionsChange' > { - unstableStartFieldRef?: React.Ref>; - unstableEndFieldRef?: React.Ref>; + unstableStartFieldRef?: React.Ref>; + unstableEndFieldRef?: React.Ref>; } export const useMultiInputFieldSelectedSections = ( params: UseMultiInputFieldSelectedSectionsParams, ) => { - const unstableEndFieldRef = React.useRef>(null); + const unstableEndFieldRef = React.useRef>(null); const handleUnstableEndFieldRef = useForkRef(params.unstableEndFieldRef, unstableEndFieldRef); const [startSelectedSection, setStartSelectedSection] = React.useState( @@ -55,7 +54,7 @@ export const useMultiInputFieldSelectedSections = ( return { start: { - unstableFieldRef: params.unstableStartFieldRef, + unstableFieldRef: params.unstableStartFieldRef as React.Ref>, selectedSections: activeField === 'start' && params.selectedSections !== undefined ? params.selectedSections @@ -63,7 +62,7 @@ export const useMultiInputFieldSelectedSections = ( onSelectedSectionsChange: handleStartSelectedSectionChange, }, end: { - unstableFieldRef: handleUnstableEndFieldRef, + unstableFieldRef: handleUnstableEndFieldRef as React.Ref>, selectedSections: activeField === 'end' && params.selectedSections !== undefined ? params.selectedSections 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 5aecc79b1600..1f48ae602878 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 @@ -9,7 +9,7 @@ import { useDefaultizedDateField, } from '@mui/x-date-pickers/internals'; import { useValidation } from '@mui/x-date-pickers/validation'; -import { DateValidationError, PickerValidDate } from '@mui/x-date-pickers/models'; +import { DateValidationError } from '@mui/x-date-pickers/models'; import { UseMultiInputDateRangeFieldParams, UseMultiInputDateRangeFieldProps, @@ -73,9 +73,7 @@ export const useMultiInputDateRangeField = < }); // TODO: Maybe export utility from `useField` instead of copy/pasting the logic - const buildChangeHandler = ( - index: 0 | 1, - ): FieldChangeHandler => { + const buildChangeHandler = (index: 0 | 1): FieldChangeHandler => { return (newDate, rawContext) => { const newDateRange: PickerRangeValue = index === 0 ? [newDate, value[1]] : [value[0], newDate]; 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 6fee46fcc61a..2eb4995fb511 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 @@ -8,7 +8,7 @@ import { useControlledValueWithTimezone, useDefaultizedDateTimeField, } from '@mui/x-date-pickers/internals'; -import { DateTimeValidationError, PickerValidDate } from '@mui/x-date-pickers/models'; +import { DateTimeValidationError } from '@mui/x-date-pickers/models'; import { useValidation } from '@mui/x-date-pickers/validation'; import type { UseMultiInputDateTimeRangeFieldParams, @@ -73,9 +73,7 @@ export const useMultiInputDateTimeRangeField = < }); // TODO: Maybe export utility from `useField` instead of copy/pasting the logic - const buildChangeHandler = ( - index: 0 | 1, - ): FieldChangeHandler => { + const buildChangeHandler = (index: 0 | 1): FieldChangeHandler => { return (newDate, rawContext) => { const newDateRange: PickerRangeValue = index === 0 ? [newDate, value[1]] : [value[0], newDate]; 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 6fbf229d94f6..13459313a1c3 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 @@ -9,7 +9,7 @@ import { useDefaultizedTimeField, } from '@mui/x-date-pickers/internals'; import { useValidation } from '@mui/x-date-pickers/validation'; -import { PickerValidDate, TimeValidationError } from '@mui/x-date-pickers/models'; +import { TimeValidationError } from '@mui/x-date-pickers/models'; import { validateTimeRange } from '../../../validation'; import { TimeRangeValidationError } from '../../../models'; import type { @@ -73,9 +73,7 @@ export const useMultiInputTimeRangeField = < }); // TODO: Maybe export utility from `useField` instead of copy/pasting the logic - const buildChangeHandler = ( - index: 0 | 1, - ): FieldChangeHandler => { + const buildChangeHandler = (index: 0 | 1): FieldChangeHandler => { return (newDate, rawContext) => { const newDateRange: PickerRangeValue = index === 0 ? [newDate, value[1]] : [value[0], newDate]; diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useRangePosition.ts b/packages/x-date-pickers-pro/src/internals/hooks/useRangePosition.ts index c5029471e4e8..898bf1253a07 100644 --- a/packages/x-date-pickers-pro/src/internals/hooks/useRangePosition.ts +++ b/packages/x-date-pickers-pro/src/internals/hooks/useRangePosition.ts @@ -2,7 +2,7 @@ import * as React from 'react'; import useControlled from '@mui/utils/useControlled'; import useEventCallback from '@mui/utils/useEventCallback'; import { FieldRef } from '@mui/x-date-pickers/models'; -import { RangePosition, RangeFieldSection } from '../../models'; +import { RangePosition } from '../../models'; export interface UseRangePositionProps { /** @@ -30,7 +30,7 @@ export interface UseRangePositionResponse { export const useRangePosition = ( props: UseRangePositionProps, - singleInputFieldRef?: React.RefObject>, + singleInputFieldRef?: React.RefObject>, ): UseRangePositionResponse => { const [rangePosition, setRangePosition] = useControlled({ name: 'useRangePosition', 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 7fdd442279fc..7355e9f4c17b 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,13 +8,11 @@ import { ExportedBaseToolbarProps, DateOrTimeViewWithMeridiem, PickersProvider, - PickerRangeValue, } from '@mui/x-date-pickers/internals'; import { UseStaticRangePickerParams, UseStaticRangePickerProps, } from './useStaticRangePicker.types'; -import { RangeFieldSection } from '../../../models'; import { useRangePosition } from '../useRangePosition'; const PickerStaticLayout = styled(PickersLayout)(({ theme }) => ({ @@ -40,9 +38,8 @@ export const useStaticRangePicker = < const { rangePosition, onRangePositionChange } = useRangePosition(props); const { layoutProps, providerProps, renderCurrentView } = usePicker< - PickerRangeValue, + true, TView, - RangeFieldSection, TExternalProps, {} >({ @@ -59,7 +56,7 @@ export const useStaticRangePicker = < }); const Layout = slots?.layout ?? PickerStaticLayout; - const slotPropsForLayout: PickersLayoutSlotProps = { + 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 ebe5fcbf95d1..75fe7c3b9075 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,20 +5,18 @@ import { ExportedBaseToolbarProps, StaticOnlyPickerProps, DateOrTimeViewWithMeridiem, - PickerRangeValue, } from '@mui/x-date-pickers/internals'; import { ExportedPickersLayoutSlots, ExportedPickersLayoutSlotProps, } from '@mui/x-date-pickers/PickersLayout'; -import { RangeFieldSection } from '../../../models'; import { UseRangePositionProps } from '../useRangePosition'; export interface UseStaticRangePickerSlots - extends ExportedPickersLayoutSlots {} + extends ExportedPickersLayoutSlots {} export interface UseStaticRangePickerSlotProps - extends ExportedPickersLayoutSlotProps { + extends ExportedPickersLayoutSlotProps { toolbar?: ExportedBaseToolbarProps; } @@ -28,7 +26,7 @@ export interface UseStaticRangePickerProps< TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UseStaticRangePickerProps, -> extends BasePickerProps, +> extends BasePickerProps, StaticRangeOnlyPickerProps { /** * Overridable components. @@ -46,7 +44,7 @@ export interface UseStaticRangePickerParams< TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseStaticRangePickerProps, > extends Pick< - UsePickerParams, + UsePickerParams, 'valueManager' | 'valueType' | 'validator' > { props: TExternalProps; 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 efcd335df353..26f59a768b5d 100644 --- a/packages/x-date-pickers-pro/src/internals/models/dateTimeRange.ts +++ b/packages/x-date-pickers-pro/src/internals/models/dateTimeRange.ts @@ -3,21 +3,15 @@ import { UseFieldInternalProps, DateOrTimeViewWithMeridiem, AmPmProps, - PickerRangeValue, } from '@mui/x-date-pickers/internals'; -import { - DateTimeRangeValidationError, - RangeFieldSection, - RangeFieldSeparatorProps, -} from '../../models'; +import { DateTimeRangeValidationError, RangeFieldSeparatorProps } from '../../models'; import { ExportedValidateDateTimeRangeProps } from '../../validation/validateDateTimeRange'; export interface UseDateTimeRangeFieldProps extends MakeOptional< Omit< UseFieldInternalProps< - PickerRangeValue, - RangeFieldSection, + true, TEnableAccessibleFieldDOMStructure, DateTimeRangeValidationError >, 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 129069c9df56..6bd2c88f6769 100644 --- a/packages/x-date-pickers-pro/src/internals/models/timeRange.ts +++ b/packages/x-date-pickers-pro/src/internals/models/timeRange.ts @@ -1,21 +1,12 @@ import { MakeOptional } from '@mui/x-internals/types'; -import { UseFieldInternalProps, AmPmProps, PickerRangeValue } from '@mui/x-date-pickers/internals'; -import { - TimeRangeValidationError, - RangeFieldSection, - RangeFieldSeparatorProps, -} from '../../models'; +import { UseFieldInternalProps, AmPmProps } from '@mui/x-date-pickers/internals'; +import { TimeRangeValidationError, RangeFieldSeparatorProps } from '../../models'; import type { ExportedValidateTimeRangeProps } from '../../validation/validateTimeRange'; export interface UseTimeRangeFieldProps extends MakeOptional< Omit< - UseFieldInternalProps< - PickerRangeValue, - RangeFieldSection, - TEnableAccessibleFieldDOMStructure, - TimeRangeValidationError - >, + UseFieldInternalProps, 'unstableFieldRef' >, 'format' diff --git a/packages/x-date-pickers-pro/src/internals/utils/date-fields-utils.ts b/packages/x-date-pickers-pro/src/internals/utils/date-fields-utils.ts index 9210c310244d..76d3d080eb78 100644 --- a/packages/x-date-pickers-pro/src/internals/utils/date-fields-utils.ts +++ b/packages/x-date-pickers-pro/src/internals/utils/date-fields-utils.ts @@ -1,8 +1,8 @@ -import { RangeFieldSection } from '../../models'; +import { FieldRangeSection } from '@mui/x-date-pickers/models'; -export const splitDateRangeSections = (sections: RangeFieldSection[]) => { - const startDateSections: RangeFieldSection[] = []; - const endDateSections: RangeFieldSection[] = []; +export const splitDateRangeSections = (sections: FieldRangeSection[]) => { + const startDateSections: FieldRangeSection[] = []; + const endDateSections: FieldRangeSection[] = []; sections.forEach((section) => { if (section.dateName === 'start') { startDateSections.push(section); @@ -14,7 +14,7 @@ export const splitDateRangeSections = (sections: RangeFieldSection[]) => { return { startDate: startDateSections, endDate: endDateSections }; }; -export const removeLastSeparator = (dateSections: RangeFieldSection[]) => +export const removeLastSeparator = (dateSections: FieldRangeSection[]) => dateSections.map((section, sectionIndex) => { if (sectionIndex === dateSections.length - 1) { return { ...section, separator: null }; 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 f3f8200c6795..e438da2e0ba4 100644 --- a/packages/x-date-pickers-pro/src/internals/utils/valueManagers.ts +++ b/packages/x-date-pickers-pro/src/internals/utils/valueManagers.ts @@ -8,24 +8,23 @@ import { getTodayDate, getDefaultReferenceDate, PickerRangeValue, + PickerNonNullableRangeValue, } from '@mui/x-date-pickers/internals'; -import { PickerValidDate } from '@mui/x-date-pickers/models'; +import { FieldRangeSection, PickerValidDate } from '@mui/x-date-pickers/models'; import { splitDateRangeSections, removeLastSeparator } from './date-fields-utils'; import type { DateRangeValidationError, DateTimeRangeValidationError, TimeRangeValidationError, - RangeFieldSection, RangePosition, } from '../../models'; -export type RangePickerValueManager< - TValue = [any, any], +type RangePickerValueManager< TError extends | DateRangeValidationError | TimeRangeValidationError | DateTimeRangeValidationError = any, -> = PickerValueManager; +> = PickerValueManager; export const rangeValueManager: RangePickerValueManager = { emptyValue: [null, null], @@ -38,14 +37,14 @@ export const rangeValueManager: RangePickerValueManager = { const shouldKeepEndDate = value[1] != null && params.utils.isValid(value[1]); if (shouldKeepStartDate && shouldKeepEndDate) { - return value; + return value as PickerNonNullableRangeValue; } const referenceDate = referenceDateProp ?? getDefaultReferenceDate(params); return [ - shouldKeepStartDate ? value[0] : referenceDate, - shouldKeepEndDate ? value[1] : referenceDate, + shouldKeepStartDate ? value[0]! : referenceDate, + shouldKeepEndDate ? value[1]! : referenceDate, ]; }, cleanValue: (utils, value) => @@ -77,7 +76,7 @@ export const getRangeFieldValueManager = ({ dateSeparator = '–', }: { dateSeparator: string | undefined; -}): FieldValueManager => ({ +}): FieldValueManager => ({ updateReferenceValue: (utils, value, prevReferenceValue) => { const shouldKeepStartDate = value[0] != null && utils.isValid(value[0]); const shouldKeepEndDate = value[1] != null && utils.isValid(value[1]); @@ -87,14 +86,14 @@ export const getRangeFieldValueManager = ({ } if (shouldKeepStartDate && shouldKeepEndDate) { - return value; + return value as PickerNonNullableRangeValue; } if (shouldKeepStartDate) { - return [value[0], prevReferenceValue[0]]; + return [value[0]!, prevReferenceValue[0]!]; } - return [prevReferenceValue[1], value[1]]; + return [prevReferenceValue[1]!, value[1]!]; }, getSectionsFromValue: (utils, [start, end], fallbackSections, getSectionsFromDate) => { const separatedFallbackSections = @@ -104,7 +103,7 @@ export const getRangeFieldValueManager = ({ const getSections = ( newDate: PickerValidDate | null, - fallbackDateSections: RangeFieldSection[] | null, + fallbackDateSections: FieldRangeSection[] | null, position: RangePosition, ) => { const shouldReUsePrevDateSections = !utils.isValid(newDate) && !!fallbackDateSections; @@ -167,7 +166,9 @@ export const getRangeFieldValueManager = ({ const index = activeSection.dateName === 'start' ? 0 : 1; const updateDateInRange = (newDate: PickerValidDate | null, prevDateRange: PickerRangeValue) => - (index === 0 ? [newDate, prevDateRange[1]] : [prevDateRange[0], newDate]) as PickerRangeValue; + (index === 0 + ? [newDate, prevDateRange[1]] + : [prevDateRange[0], newDate]) as PickerNonNullableRangeValue; 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 88511e4c0e6a..0d9c9e8e349f 100644 --- a/packages/x-date-pickers-pro/src/models/dateRange.ts +++ b/packages/x-date-pickers-pro/src/models/dateRange.ts @@ -1,18 +1,13 @@ import { MakeOptional } from '@mui/x-internals/types'; -import { UseFieldInternalProps, PickerRangeValue } from '@mui/x-date-pickers/internals'; -import { RangeFieldSection, RangeFieldSeparatorProps } from './fields'; +import { UseFieldInternalProps } from '@mui/x-date-pickers/internals'; +import { RangeFieldSeparatorProps } from './fields'; import { DateRangeValidationError } from './validation'; import type { ExportedValidateDateRangeProps } from '../validation/validateDateRange'; export interface UseDateRangeFieldProps extends MakeOptional< Omit< - UseFieldInternalProps< - PickerRangeValue, - RangeFieldSection, - TEnableAccessibleFieldDOMStructure, - DateRangeValidationError - >, + UseFieldInternalProps, 'unstableFieldRef' >, 'format' diff --git a/packages/x-date-pickers-pro/src/models/fields.ts b/packages/x-date-pickers-pro/src/models/fields.ts index 12060a16d003..1f509627decd 100644 --- a/packages/x-date-pickers-pro/src/models/fields.ts +++ b/packages/x-date-pickers-pro/src/models/fields.ts @@ -1,19 +1,10 @@ import * as React from 'react'; import { SlotComponentProps } from '@mui/utils'; -import { BaseFieldProps, UseFieldResponse } from '@mui/x-date-pickers/internals'; -import { - BaseSingleInputPickersTextFieldProps, - FieldRef, - FieldSection, -} from '@mui/x-date-pickers/models'; +import { BaseFieldProps, RangePosition, UseFieldResponse } from '@mui/x-date-pickers/internals'; +import { BaseSingleInputPickersTextFieldProps, FieldRef } from '@mui/x-date-pickers/models'; import { UseClearableFieldResponse } from '@mui/x-date-pickers/hooks'; import { SxProps } from '@mui/material/styles'; import TextField from '@mui/material/TextField'; -import { RangePosition } from './range'; - -export interface RangeFieldSection extends FieldSection { - dateName: RangePosition; -} export type FieldType = 'single-input' | 'multi-input'; @@ -44,8 +35,8 @@ export interface MultiInputFieldSlotRootProps { } export interface MultiInputFieldRefs { - unstableStartFieldRef?: React.Ref>; - unstableEndFieldRef?: React.Ref>; + unstableStartFieldRef?: React.Ref>; + unstableEndFieldRef?: React.Ref>; } export interface RangeFieldSeparatorProps { @@ -62,18 +53,16 @@ export interface RangeFieldSeparatorProps { * not what users can pass using the `props.slotProps.field`. */ export interface BaseMultiInputFieldProps< - TValue, - TSection extends FieldSection, TEnableAccessibleFieldDOMStructure extends boolean, TError, > extends Omit< - BaseFieldProps, + BaseFieldProps, 'unstableFieldRef' >, RangeFieldSeparatorProps { sx?: SxProps; - unstableStartFieldRef?: React.Ref>; - unstableEndFieldRef?: React.Ref>; + unstableStartFieldRef?: React.Ref>; + unstableEndFieldRef?: React.Ref>; slots?: { root?: React.ElementType; separator?: React.ElementType; diff --git a/packages/x-date-pickers-pro/src/models/index.ts b/packages/x-date-pickers-pro/src/models/index.ts index f97efb2767d1..f3b7d852521c 100644 --- a/packages/x-date-pickers-pro/src/models/index.ts +++ b/packages/x-date-pickers-pro/src/models/index.ts @@ -3,3 +3,5 @@ export * from './fields'; export * from './range'; export * from './validation'; export * from './multiInputRangeFieldClasses'; + +export type { RangePosition } from '@mui/x-date-pickers/internals'; diff --git a/packages/x-date-pickers-pro/src/models/range.ts b/packages/x-date-pickers-pro/src/models/range.ts index d0a4b4de2b1d..1dc74741d76b 100644 --- a/packages/x-date-pickers-pro/src/models/range.ts +++ b/packages/x-date-pickers-pro/src/models/range.ts @@ -5,5 +5,3 @@ export type DateRange = [TDate | null, TDate | nu // TODO v8: Remove export type NonEmptyDateRange = [PickerValidDate, PickerValidDate]; - -export type RangePosition = 'start' | 'end'; diff --git a/packages/x-date-pickers-pro/src/validation/validateDateRange.ts b/packages/x-date-pickers-pro/src/validation/validateDateRange.ts index 44effa217b60..02d776903e09 100644 --- a/packages/x-date-pickers-pro/src/validation/validateDateRange.ts +++ b/packages/x-date-pickers-pro/src/validation/validateDateRange.ts @@ -1,5 +1,5 @@ import { validateDate, Validator } from '@mui/x-date-pickers/validation'; -import { BaseDateValidationProps, PickerRangeValue } from '@mui/x-date-pickers/internals'; +import { BaseDateValidationProps } from '@mui/x-date-pickers/internals'; import { isRangeValid } from '../internals/utils/date-utils'; import { DayRangeValidationProps } from '../internals/models/dateRange'; import { DateRangeValidationError } from '../models'; @@ -17,7 +17,7 @@ export interface ValidateDateRangeProps Required {} export const validateDateRange: Validator< - PickerRangeValue, + true, DateRangeValidationError, ValidateDateRangeProps > = ({ adapter, value, timezone, props }) => { diff --git a/packages/x-date-pickers-pro/src/validation/validateDateTimeRange.ts b/packages/x-date-pickers-pro/src/validation/validateDateTimeRange.ts index 743360be7d7d..25543de73599 100644 --- a/packages/x-date-pickers-pro/src/validation/validateDateTimeRange.ts +++ b/packages/x-date-pickers-pro/src/validation/validateDateTimeRange.ts @@ -1,4 +1,4 @@ -import { DateTimeValidationProps, PickerRangeValue } from '@mui/x-date-pickers/internals'; +import { DateTimeValidationProps } from '@mui/x-date-pickers/internals'; import { validateDateTime, Validator } from '@mui/x-date-pickers/validation'; import { isRangeValid } from '../internals/utils/date-utils'; import { DateTimeRangeValidationError } from '../models'; @@ -19,7 +19,7 @@ export interface ValidateDateTimeRangeProps ValidateTimeRangeProps {} export const validateDateTimeRange: Validator< - PickerRangeValue, + true, DateTimeRangeValidationError, ValidateDateTimeRangeProps > = ({ adapter, value, timezone, props }) => { diff --git a/packages/x-date-pickers-pro/src/validation/validateTimeRange.ts b/packages/x-date-pickers-pro/src/validation/validateTimeRange.ts index 2f5cd591cd86..5ced51e9309a 100644 --- a/packages/x-date-pickers-pro/src/validation/validateTimeRange.ts +++ b/packages/x-date-pickers-pro/src/validation/validateTimeRange.ts @@ -1,9 +1,5 @@ import { validateTime, Validator } from '@mui/x-date-pickers/validation'; -import { - TimeValidationProps, - BaseTimeValidationProps, - PickerRangeValue, -} from '@mui/x-date-pickers/internals'; +import { TimeValidationProps, BaseTimeValidationProps } from '@mui/x-date-pickers/internals'; import { isRangeValid } from '../internals/utils/date-utils'; import { TimeRangeValidationError } from '../models'; import { rangeValueManager } from '../internals/utils/valueManagers'; @@ -20,7 +16,7 @@ export interface ValidateTimeRangeProps TimeValidationProps {} export const validateTimeRange: Validator< - PickerRangeValue, + true, TimeRangeValidationError, ValidateTimeRangeProps > = ({ adapter, value, timezone, props }) => { diff --git a/packages/x-date-pickers/src/DateCalendar/DateCalendar.tsx b/packages/x-date-pickers/src/DateCalendar/DateCalendar.tsx index f5bd789a6862..4e09b75f8674 100644 --- a/packages/x-date-pickers/src/DateCalendar/DateCalendar.tsx +++ b/packages/x-date-pickers/src/DateCalendar/DateCalendar.tsx @@ -30,7 +30,7 @@ import { BaseDateValidationProps } from '../internals/models/validation'; import { useControlledValueWithTimezone } from '../internals/hooks/useValueWithTimezone'; import { singleItemValueManager } from '../internals/utils/valueManagers'; import { VIEW_HEIGHT } from '../internals/constants/dimensions'; -import { PickerValidDate } from '../models'; +import { DateView, PickerValidDate } from '../models'; const useUtilityClasses = (ownerState: DateCalendarProps) => { const { classes } = ownerState; @@ -159,7 +159,7 @@ export const DateCalendar = React.forwardRef(function DateCalendar( }); const { view, setView, focusedView, setFocusedView, goToNextView, setValueAndGoToNextView } = - useViews({ + useViews({ view: inView, views, openTo, @@ -490,9 +490,9 @@ DateCalendar.propTypes = { monthsPerRow: PropTypes.oneOf([3, 4]), /** * 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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @template TView The view type. Will be one of date or time views. - * @param {TValue} value The new value. + * @param {InferPickerValue} value The new value. * @param {PickerSelectionState | undefined} selectionState Indicates if the date selection is complete. * @param {TView | undefined} selectedView Indicates the view in which the selection has been made. */ diff --git a/packages/x-date-pickers/src/DateCalendar/DateCalendar.types.ts b/packages/x-date-pickers/src/DateCalendar/DateCalendar.types.ts index 09e7c7d3067b..ee907b34364a 100644 --- a/packages/x-date-pickers/src/DateCalendar/DateCalendar.types.ts +++ b/packages/x-date-pickers/src/DateCalendar/DateCalendar.types.ts @@ -88,7 +88,7 @@ export interface ExportedDateCalendarProps export interface DateCalendarProps extends ExportedDateCalendarProps, - ExportedUseViewsOptions { + ExportedUseViewsOptions { /** * The selected value. * Used when the component is controlled. 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 10df9befa2fa..20719cfa5029 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 @@ -30,7 +30,7 @@ describe(' - Describes', () => { skip: ['componentProp', 'componentsProp', 'themeVariants'], })); - describeValue(DateCalendar, () => ({ + describeValue(DateCalendar, () => ({ render, componentFamily: 'calendar', values: [adapterToUse.date('2018-01-01'), adapterToUse.date('2018-01-02')], diff --git a/packages/x-date-pickers/src/DateCalendar/useCalendarState.tsx b/packages/x-date-pickers/src/DateCalendar/useCalendarState.tsx index 0fca874dbcb0..360023008c70 100644 --- a/packages/x-date-pickers/src/DateCalendar/useCalendarState.tsx +++ b/packages/x-date-pickers/src/DateCalendar/useCalendarState.tsx @@ -109,7 +109,6 @@ export const createCalendarStateReducer = interface UseCalendarStateParams extends Pick< DateCalendarDefaultizedProps, - | 'value' | 'referenceDate' | 'disableFuture' | 'disablePast' @@ -119,6 +118,7 @@ interface UseCalendarStateParams | 'reduceAnimations' | 'shouldDisableDate' > { + value: PickerValidDate | null; disableSwitchToMonthOnDayFocus?: boolean; timezone: PickersTimezone; } diff --git a/packages/x-date-pickers/src/DateField/DateField.tsx b/packages/x-date-pickers/src/DateField/DateField.tsx index 5a67f249f3a4..41445f50a860 100644 --- a/packages/x-date-pickers/src/DateField/DateField.tsx +++ b/packages/x-date-pickers/src/DateField/DateField.tsx @@ -200,9 +200,9 @@ DateField.propTypes = { onBlur: PropTypes.func, /** * 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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @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 {TValue} value The new value. + * @param {InferPickerValue} value The new value. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onChange: PropTypes.func, @@ -215,9 +215,9 @@ DateField.propTypes = { * When a validation error is detected, the `error` parameter contains a non-null value. * This can be used to render an appropriate form error. * @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. - * @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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @param {TError} error The reason why the current value is not valid. - * @param {TValue} value The value associated with the error. + * @param {InferPickerValue} value The value associated with the error. */ onError: PropTypes.func, onFocus: 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 3a7c21470f5b..21dd20cd0e5f 100644 --- a/packages/x-date-pickers/src/DateField/DateField.types.ts +++ b/packages/x-date-pickers/src/DateField/DateField.types.ts @@ -7,23 +7,13 @@ import { UseClearableFieldSlots, UseClearableFieldSlotProps, } from '../hooks/useClearableField'; -import { - DateValidationError, - FieldSection, - PickerValidDate, - BuiltInFieldTextFieldProps, -} from '../models'; +import { DateValidationError, BuiltInFieldTextFieldProps } from '../models'; import { UseFieldInternalProps } from '../internals/hooks/useField'; import { ExportedValidateDateProps } from '../validation/validateDate'; export interface UseDateFieldProps extends MakeOptional< - UseFieldInternalProps< - PickerValidDate | null, - FieldSection, - TEnableAccessibleFieldDOMStructure, - DateValidationError - >, + UseFieldInternalProps, 'format' >, ExportedValidateDateProps, 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 6f7090a606a6..6dd33c79d5d5 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 @@ -30,7 +30,7 @@ describe(' - Describes', () => { skip: ['componentProp', 'componentsProp', 'themeVariants', 'themeStyleOverrides'], })); - describeValue(DateField, () => ({ + describeValue(DateField, () => ({ render, componentFamily: 'field', values: [adapterToUse.date('2018-01-01'), adapterToUse.date('2018-01-02')], diff --git a/packages/x-date-pickers/src/DateField/useDateField.ts b/packages/x-date-pickers/src/DateField/useDateField.ts index c5f7e8da6210..358c87124e48 100644 --- a/packages/x-date-pickers/src/DateField/useDateField.ts +++ b/packages/x-date-pickers/src/DateField/useDateField.ts @@ -7,7 +7,6 @@ import { useField } from '../internals/hooks/useField'; import { UseDateFieldProps } from './DateField.types'; import { validateDate } from '../validation'; import { useSplitFieldProps } from '../hooks'; -import { FieldSection, PickerValidDate } from '../models'; import { useDefaultizedDateField } from '../internals/hooks/defaultizedFieldProps'; export const useDateField = < @@ -24,8 +23,7 @@ export const useDateField = < const { forwardedProps, internalProps } = useSplitFieldProps(props, 'date'); return useField< - PickerValidDate | null, - FieldSection, + false, TEnableAccessibleFieldDOMStructure, typeof forwardedProps, typeof internalProps diff --git a/packages/x-date-pickers/src/DatePicker/DatePicker.tsx b/packages/x-date-pickers/src/DatePicker/DatePicker.tsx index c535422d9455..8c632077e431 100644 --- a/packages/x-date-pickers/src/DatePicker/DatePicker.tsx +++ b/packages/x-date-pickers/src/DatePicker/DatePicker.tsx @@ -165,17 +165,17 @@ DatePicker.propTypes = { name: PropTypes.string, /** * Callback fired when the value is accepted. - * @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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @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 {TValue} value The value that was just accepted. + * @param {InferPickerValue} value The value that was just accepted. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onAccept: PropTypes.func, /** * 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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @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 {TValue} value The new value. + * @param {InferPickerValue} value The new value. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onChange: PropTypes.func, @@ -189,9 +189,9 @@ DatePicker.propTypes = { * When a validation error is detected, the `error` parameter contains a non-null value. * This can be used to render an appropriate form error. * @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. - * @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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @param {TError} error The reason why the current value is not valid. - * @param {TValue} value The value associated with the error. + * @param {InferPickerValue} value The value associated with the error. */ onError: 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 3b80ff310dad..220ddbb47b3c 100644 --- a/packages/x-date-pickers/src/DatePicker/DatePicker.types.ts +++ b/packages/x-date-pickers/src/DatePicker/DatePicker.types.ts @@ -11,12 +11,7 @@ import { MobileDatePickerSlots, MobileDatePickerSlotProps, } from '../MobileDatePicker'; -import { - BaseSingleInputFieldProps, - DateValidationError, - FieldSection, - PickerValidDate, -} from '../models'; +import { BaseSingleInputFieldProps, DateValidationError } from '../models'; export interface DatePickerSlots extends DesktopDatePickerSlots, MobileDatePickerSlots {} @@ -58,4 +53,4 @@ export type DatePickerFieldProps, 'format' | 'timezone' | 'value' | keyof BaseDateValidationProps > & - BaseSingleInputFieldProps; + BaseSingleInputFieldProps; diff --git a/packages/x-date-pickers/src/DatePicker/DatePickerToolbar.tsx b/packages/x-date-pickers/src/DatePicker/DatePickerToolbar.tsx index 518a67af8914..4087992b2ccb 100644 --- a/packages/x-date-pickers/src/DatePicker/DatePickerToolbar.tsx +++ b/packages/x-date-pickers/src/DatePicker/DatePickerToolbar.tsx @@ -9,7 +9,7 @@ import { PickersToolbar } from '../internals/components/PickersToolbar'; import { usePickersTranslations } from '../hooks/usePickersTranslations'; import { useUtils } from '../internals/hooks/useUtils'; import { BaseToolbarProps, ExportedBaseToolbarProps } from '../internals/models/props/toolbar'; -import { DateView, PickerValidDate } from '../models'; +import { DateView } from '../models'; import { DatePickerToolbarClasses, getDatePickerToolbarUtilityClass, @@ -17,7 +17,7 @@ import { import { resolveDateFormat } from '../internals/utils/date-utils'; export interface DatePickerToolbarProps - extends BaseToolbarProps, + extends BaseToolbarProps, ExportedDatePickerToolbarProps {} export interface ExportedDatePickerToolbarProps extends ExportedBaseToolbarProps { diff --git a/packages/x-date-pickers/src/DatePicker/shared.tsx b/packages/x-date-pickers/src/DatePicker/shared.tsx index 05573e1cc9e2..ce01d42a097d 100644 --- a/packages/x-date-pickers/src/DatePicker/shared.tsx +++ b/packages/x-date-pickers/src/DatePicker/shared.tsx @@ -8,7 +8,7 @@ import { } from '../DateCalendar/DateCalendar.types'; import { useDefaultDates, useUtils } from '../internals/hooks/useUtils'; import { applyDefaultViewProps } from '../internals/utils/views'; -import { DateValidationError, DateView, PickerValidDate } from '../models'; +import { DateValidationError, DateView } from '../models'; import { BasePickerInputProps } from '../internals/models/props/basePickerProps'; import { applyDefaultDate } from '../internals/utils/date-utils'; import { BaseDateValidationProps } from '../internals/models/validation'; @@ -36,15 +36,10 @@ export interface BaseDatePickerSlotProps extends DateCalendarSlotProps { export type DatePickerViewRenderers< TView extends DateView, TAdditionalProps extends {} = {}, -> = PickerViewRendererLookup< - PickerValidDate | null, - TView, - DateViewRendererProps, - TAdditionalProps ->; +> = PickerViewRendererLookup, TAdditionalProps>; export interface BaseDatePickerProps - extends BasePickerInputProps, + extends BasePickerInputProps, ExportedDateCalendarProps { /** * Overridable component slots. diff --git a/packages/x-date-pickers/src/DateTimeField/DateTimeField.tsx b/packages/x-date-pickers/src/DateTimeField/DateTimeField.tsx index 3bfe549177c0..7842125cf9ba 100644 --- a/packages/x-date-pickers/src/DateTimeField/DateTimeField.tsx +++ b/packages/x-date-pickers/src/DateTimeField/DateTimeField.tsx @@ -237,9 +237,9 @@ DateTimeField.propTypes = { onBlur: PropTypes.func, /** * 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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @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 {TValue} value The new value. + * @param {InferPickerValue} value The new value. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onChange: PropTypes.func, @@ -252,9 +252,9 @@ DateTimeField.propTypes = { * When a validation error is detected, the `error` parameter contains a non-null value. * This can be used to render an appropriate form error. * @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. - * @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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @param {TError} error The reason why the current value is not valid. - * @param {TValue} value The value associated with the error. + * @param {InferPickerValue} value The value associated with the error. */ onError: PropTypes.func, onFocus: 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 b306ed6dbd2b..8a5ecfac9f6f 100644 --- a/packages/x-date-pickers/src/DateTimeField/DateTimeField.types.ts +++ b/packages/x-date-pickers/src/DateTimeField/DateTimeField.types.ts @@ -2,12 +2,7 @@ import * as React from 'react'; import { SlotComponentProps } from '@mui/utils'; import { MakeOptional } from '@mui/x-internals/types'; import TextField from '@mui/material/TextField'; -import { - DateTimeValidationError, - FieldSection, - PickerValidDate, - BuiltInFieldTextFieldProps, -} from '../models'; +import { DateTimeValidationError, BuiltInFieldTextFieldProps } from '../models'; import { UseFieldInternalProps } from '../internals/hooks/useField'; import { ExportedUseClearableFieldProps, @@ -19,12 +14,7 @@ import { AmPmProps } from '../internals/models/props/time'; export interface UseDateTimeFieldProps extends MakeOptional< - UseFieldInternalProps< - PickerValidDate | null, - FieldSection, - TEnableAccessibleFieldDOMStructure, - DateTimeValidationError - >, + UseFieldInternalProps, 'format' >, ExportedValidateDateTimeProps, 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 f18c33dd44b2..7ee9a0ef256d 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 @@ -30,7 +30,7 @@ describe(' - Describes', () => { skip: ['componentProp', 'componentsProp', 'themeVariants', 'themeStyleOverrides'], })); - describeValue(DateTimeField, () => ({ + describeValue(DateTimeField, () => ({ render, componentFamily: 'field', values: [adapterToUse.date('2018-01-01'), adapterToUse.date('2018-01-02')], diff --git a/packages/x-date-pickers/src/DateTimeField/useDateTimeField.ts b/packages/x-date-pickers/src/DateTimeField/useDateTimeField.ts index 33e215fd4c7d..d95b01f4b62d 100644 --- a/packages/x-date-pickers/src/DateTimeField/useDateTimeField.ts +++ b/packages/x-date-pickers/src/DateTimeField/useDateTimeField.ts @@ -7,7 +7,6 @@ import { useField } from '../internals/hooks/useField'; import { UseDateTimeFieldProps } from './DateTimeField.types'; import { validateDateTime } from '../validation'; import { useSplitFieldProps } from '../hooks'; -import { FieldSection, PickerValidDate } from '../models'; import { useDefaultizedDateTimeField } from '../internals/hooks/defaultizedFieldProps'; export const useDateTimeField = < @@ -24,8 +23,7 @@ export const useDateTimeField = < const { forwardedProps, internalProps } = useSplitFieldProps(props, 'date-time'); return useField< - PickerValidDate | null, - FieldSection, + false, TEnableAccessibleFieldDOMStructure, typeof forwardedProps, typeof internalProps diff --git a/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.tsx b/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.tsx index 24dfddb480e3..5e813409e27e 100644 --- a/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.tsx +++ b/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.tsx @@ -207,17 +207,17 @@ DateTimePicker.propTypes = { name: PropTypes.string, /** * Callback fired when the value is accepted. - * @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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @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 {TValue} value The value that was just accepted. + * @param {InferPickerValue} value The value that was just accepted. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onAccept: PropTypes.func, /** * 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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @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 {TValue} value The new value. + * @param {InferPickerValue} value The new value. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onChange: PropTypes.func, @@ -231,9 +231,9 @@ DateTimePicker.propTypes = { * When a validation error is detected, the `error` parameter contains a non-null value. * This can be used to render an appropriate form error. * @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. - * @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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @param {TError} error The reason why the current value is not valid. - * @param {TValue} value The value associated with the error. + * @param {InferPickerValue} value The value associated with the error. */ onError: 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 fd81624ee3bd..add9afcc6927 100644 --- a/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.types.ts +++ b/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.types.ts @@ -12,12 +12,7 @@ import { MobileDateTimePickerSlots, MobileDateTimePickerSlotProps, } from '../MobileDateTimePicker'; -import { - BaseSingleInputFieldProps, - DateTimeValidationError, - FieldSection, - PickerValidDate, -} from '../models'; +import { BaseSingleInputFieldProps, DateTimeValidationError } from '../models'; import { ExportedYearCalendarProps } from '../YearCalendar/YearCalendar.types'; export interface DateTimePickerSlots @@ -72,4 +67,4 @@ export type DateTimePickerFieldProps & - BaseSingleInputFieldProps; + BaseSingleInputFieldProps; diff --git a/packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx b/packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx index 760e09626006..db7bf768a208 100644 --- a/packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx +++ b/packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx @@ -34,7 +34,7 @@ export interface ExportedDateTimePickerToolbarProps extends ExportedBaseToolbarP export interface DateTimePickerToolbarProps extends ExportedDateTimePickerToolbarProps, - MakeOptional, 'view'> { + MakeOptional, 'view'> { toolbarVariant?: WrapperVariant; /** * If provided, it will be used instead of `dateTimePickerToolbarTitle` from localization. diff --git a/packages/x-date-pickers/src/DateTimePicker/shared.tsx b/packages/x-date-pickers/src/DateTimePicker/shared.tsx index 10bb9510bcba..02328b6e28e3 100644 --- a/packages/x-date-pickers/src/DateTimePicker/shared.tsx +++ b/packages/x-date-pickers/src/DateTimePicker/shared.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useThemeProps } from '@mui/material/styles'; import { DefaultizedProps } from '@mui/x-internals/types'; -import { DateTimeValidationError, PickerValidDate } from '../models'; +import { DateTimeValidationError } from '../models'; import { useDefaultDates, useUtils } from '../internals/hooks/useUtils'; import { DateCalendarSlots, @@ -62,7 +62,7 @@ export type DateTimePickerViewRenderers< TView extends DateOrTimeViewWithMeridiem, TAdditionalProps extends {} = {}, > = PickerViewRendererLookup< - PickerValidDate | null, + false, TView, Omit, 'slots' | 'slotProps'> & Omit< @@ -73,7 +73,7 @@ export type DateTimePickerViewRenderers< >; export interface BaseDateTimePickerProps - extends BasePickerInputProps, + extends BasePickerInputProps, Omit, ExportedBaseClockProps, DateTimeValidationProps { diff --git a/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.tsx b/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.tsx index 2965274f7051..eaf056bd17e7 100644 --- a/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.tsx +++ b/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.tsx @@ -217,17 +217,17 @@ DesktopDatePicker.propTypes = { name: PropTypes.string, /** * Callback fired when the value is accepted. - * @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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @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 {TValue} value The value that was just accepted. + * @param {InferPickerValue} value The value that was just accepted. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onAccept: PropTypes.func, /** * 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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @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 {TValue} value The new value. + * @param {InferPickerValue} value The new value. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onChange: PropTypes.func, @@ -241,9 +241,9 @@ DesktopDatePicker.propTypes = { * When a validation error is detected, the `error` parameter contains a non-null value. * This can be used to render an appropriate form error. * @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. - * @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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @param {TError} error The reason why the current value is not valid. - * @param {TValue} value The value associated with the error. + * @param {InferPickerValue} value The value associated with the error. */ onError: PropTypes.func, /** 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 3f8d4cabb075..7ef97fbb5435 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 @@ -41,7 +41,7 @@ describe(' - Describes', () => { ], })); - describeValue(DesktopDatePicker, () => ({ + describeValue(DesktopDatePicker, () => ({ render, componentFamily: 'picker', type: 'date', diff --git a/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx b/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx index 38cd175d522d..fc4c3d5d7308 100644 --- a/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx +++ b/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx @@ -25,7 +25,7 @@ import { resolveTimeViewsResponse, } from '../internals/utils/date-time-utils'; import { PickersActionBarAction } from '../PickersActionBar'; -import { PickerOwnerState, PickerValidDate } from '../models'; +import { PickerOwnerState } from '../models'; import { renderDigitalClockTimeView, renderMultiSectionDigitalClockTimeView, @@ -51,14 +51,14 @@ const rendererInterceptor = function rendererInterceptor< inViewRenderers: DateTimePickerViewRenderers, popperView: TView, rendererProps: PickerViewsRendererProps< - PickerValidDate | null, + false, TView, DefaultizedProps< UseDesktopPickerProps< TView, TEnableAccessibleFieldDOMStructure, any, - UsePickerViewsProps + UsePickerViewsProps >, 'openTo' >, @@ -390,17 +390,17 @@ DesktopDateTimePicker.propTypes = { name: PropTypes.string, /** * Callback fired when the value is accepted. - * @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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @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 {TValue} value The value that was just accepted. + * @param {InferPickerValue} value The value that was just accepted. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onAccept: PropTypes.func, /** * 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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @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 {TValue} value The new value. + * @param {InferPickerValue} value The new value. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onChange: PropTypes.func, @@ -414,9 +414,9 @@ DesktopDateTimePicker.propTypes = { * When a validation error is detected, the `error` parameter contains a non-null value. * This can be used to render an appropriate form error. * @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. - * @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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @param {TError} error The reason why the current value is not valid. - * @param {TValue} value The value associated with the error. + * @param {InferPickerValue} value The value associated with the error. */ onError: PropTypes.func, /** diff --git a/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePickerLayout.tsx b/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePickerLayout.tsx index 9368acefdfc7..99187ca7f5eb 100644 --- a/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePickerLayout.tsx +++ b/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePickerLayout.tsx @@ -12,22 +12,25 @@ import { } from '../PickersLayout'; import { DateOrTimeViewWithMeridiem } from '../internals/models/common'; -type DesktopDateTimePickerLayoutComponent = (( - props: PickersLayoutProps & React.RefAttributes, +type DesktopDateTimePickerLayoutComponent = (< + TIsRange extends boolean, + TView extends DateOrTimeViewWithMeridiem, +>( + props: PickersLayoutProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; /** * @ignore - internal component. */ const DesktopDateTimePickerLayout = React.forwardRef(function DesktopDateTimePickerLayout< - TValue, + TIsRange extends boolean, 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; const isActionBarVisible = actionBar && (actionBar.props.actions?.length ?? 0) > 0; - const ownerState = { ...props, isRtl }; + const ownerState = { ...props, isRtl } as PickersLayoutProps; return ( - Describes', () => { ], })); - describeValue(DesktopDateTimePicker, () => ({ + describeValue(DesktopDateTimePicker, () => ({ render, componentFamily: 'picker', type: 'date-time', diff --git a/packages/x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.tsx b/packages/x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.tsx index 7496b80d2e26..5cdeee479908 100644 --- a/packages/x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.tsx +++ b/packages/x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.tsx @@ -243,17 +243,17 @@ DesktopTimePicker.propTypes = { name: PropTypes.string, /** * Callback fired when the value is accepted. - * @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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @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 {TValue} value The value that was just accepted. + * @param {InferPickerValue} value The value that was just accepted. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onAccept: PropTypes.func, /** * 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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @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 {TValue} value The new value. + * @param {InferPickerValue} value The new value. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onChange: PropTypes.func, @@ -267,9 +267,9 @@ DesktopTimePicker.propTypes = { * When a validation error is detected, the `error` parameter contains a non-null value. * This can be used to render an appropriate form error. * @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. - * @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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @param {TError} error The reason why the current value is not valid. - * @param {TValue} value The value associated with the error. + * @param {InferPickerValue} value The value associated with the error. */ onError: PropTypes.func, /** 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 48d8a67aa0d2..ca9ad873cd19 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 @@ -46,7 +46,7 @@ describe(' - Describes', () => { ], })); - describeValue(DesktopTimePicker, () => ({ + describeValue(DesktopTimePicker, () => ({ render, componentFamily: 'picker', type: 'time', diff --git a/packages/x-date-pickers/src/DigitalClock/DigitalClock.tsx b/packages/x-date-pickers/src/DigitalClock/DigitalClock.tsx index a5e1f5813a6b..72d4ce14a992 100644 --- a/packages/x-date-pickers/src/DigitalClock/DigitalClock.tsx +++ b/packages/x-date-pickers/src/DigitalClock/DigitalClock.tsx @@ -197,7 +197,7 @@ export const DigitalClock = React.forwardRef(function DigitalClock( handleRawValueChange(newValue, 'finish', 'hours'), ); - const { setValueAndGoToNextView } = useViews>({ + const { setValueAndGoToNextView } = useViews>({ view: inView, views, openTo, @@ -440,9 +440,9 @@ DigitalClock.propTypes = { minutesStep: PropTypes.number, /** * 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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @template TView The view type. Will be one of date or time views. - * @param {TValue} value The new value. + * @param {InferPickerValue} value The new value. * @param {PickerSelectionState | undefined} selectionState Indicates if the date selection is complete. * @param {TView | undefined} selectedView Indicates the view in which the selection has been made. */ 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 e5c35a2387ef..845d744cfba5 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 @@ -32,7 +32,7 @@ describe(' - Describes', () => { skip: ['componentProp', 'componentsProp', 'themeVariants'], })); - describeValue(DigitalClock, () => ({ + describeValue(DigitalClock, () => ({ render, componentFamily: 'digital-clock', type: 'time', diff --git a/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.tsx b/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.tsx index 4db881d75251..1d22be9f5062 100644 --- a/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.tsx +++ b/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.tsx @@ -214,17 +214,17 @@ MobileDatePicker.propTypes = { name: PropTypes.string, /** * Callback fired when the value is accepted. - * @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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @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 {TValue} value The value that was just accepted. + * @param {InferPickerValue} value The value that was just accepted. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onAccept: PropTypes.func, /** * 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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @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 {TValue} value The new value. + * @param {InferPickerValue} value The new value. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onChange: PropTypes.func, @@ -238,9 +238,9 @@ MobileDatePicker.propTypes = { * When a validation error is detected, the `error` parameter contains a non-null value. * This can be used to render an appropriate form error. * @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. - * @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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @param {TError} error The reason why the current value is not valid. - * @param {TValue} value The value associated with the error. + * @param {InferPickerValue} value The value associated with the error. */ onError: PropTypes.func, /** 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 4423b3276797..c53ef9a11e71 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 @@ -41,7 +41,7 @@ describe(' - Describes', () => { ], })); - describeValue(MobileDatePicker, () => ({ + describeValue(MobileDatePicker, () => ({ render, componentFamily: 'picker', type: 'date', diff --git a/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.tsx b/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.tsx index 6d9c1b3c7bb5..7f0b456d8e81 100644 --- a/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.tsx +++ b/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.tsx @@ -267,17 +267,17 @@ MobileDateTimePicker.propTypes = { name: PropTypes.string, /** * Callback fired when the value is accepted. - * @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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @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 {TValue} value The value that was just accepted. + * @param {InferPickerValue} value The value that was just accepted. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onAccept: PropTypes.func, /** * 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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @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 {TValue} value The new value. + * @param {InferPickerValue} value The new value. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onChange: PropTypes.func, @@ -291,9 +291,9 @@ MobileDateTimePicker.propTypes = { * When a validation error is detected, the `error` parameter contains a non-null value. * This can be used to render an appropriate form error. * @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. - * @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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @param {TError} error The reason why the current value is not valid. - * @param {TValue} value The value associated with the error. + * @param {InferPickerValue} value The value associated with the error. */ onError: PropTypes.func, /** 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 d504885dad82..b66a0c6a6d6e 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 @@ -46,7 +46,7 @@ describe(' - Describes', () => { ], })); - describeValue(MobileDateTimePicker, () => ({ + describeValue(MobileDateTimePicker, () => ({ render, componentFamily: 'picker', type: 'date-time', diff --git a/packages/x-date-pickers/src/MobileTimePicker/MobileTimePicker.tsx b/packages/x-date-pickers/src/MobileTimePicker/MobileTimePicker.tsx index 43c653c1661a..458f18a19e77 100644 --- a/packages/x-date-pickers/src/MobileTimePicker/MobileTimePicker.tsx +++ b/packages/x-date-pickers/src/MobileTimePicker/MobileTimePicker.tsx @@ -206,17 +206,17 @@ MobileTimePicker.propTypes = { name: PropTypes.string, /** * Callback fired when the value is accepted. - * @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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @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 {TValue} value The value that was just accepted. + * @param {InferPickerValue} value The value that was just accepted. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onAccept: PropTypes.func, /** * 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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @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 {TValue} value The new value. + * @param {InferPickerValue} value The new value. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onChange: PropTypes.func, @@ -230,9 +230,9 @@ MobileTimePicker.propTypes = { * When a validation error is detected, the `error` parameter contains a non-null value. * This can be used to render an appropriate form error. * @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. - * @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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @param {TError} error The reason why the current value is not valid. - * @param {TValue} value The value associated with the error. + * @param {InferPickerValue} value The value associated with the error. */ onError: PropTypes.func, /** 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 34f8c027a14f..9107bdf8486d 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 @@ -47,7 +47,7 @@ describe(' - Describes', () => { ], })); - describeValue(MobileTimePicker, () => ({ + describeValue(MobileTimePicker, () => ({ render, componentFamily: 'picker', type: 'time', 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 6b13c8e125e9..5c726987d320 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 @@ -29,7 +29,7 @@ describe(' - Describes', () => { skip: ['componentProp', 'componentsProp', 'themeVariants'], })); - describeValue(MonthCalendar, () => ({ + describeValue(MonthCalendar, () => ({ render, componentFamily: 'calendar', values: [adapterToUse.date('2018-01-01'), adapterToUse.date('2018-02-01')], diff --git a/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClock.tsx b/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClock.tsx index 5648dbcc8d88..6f9d48856d31 100644 --- a/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClock.tsx +++ b/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClock.tsx @@ -153,10 +153,7 @@ export const MultiSectionDigitalClock = React.forwardRef(function MultiSectionDi return inViews.includes('meridiem') ? inViews : [...inViews, 'meridiem']; }, [ampm, inViews]); - const { view, setValueAndGoToNextView, focusedView } = useViews< - PickerValidDate | null, - TimeViewWithMeridiem - >({ + const { view, setValueAndGoToNextView, focusedView } = useViews({ view: inView, views, openTo, @@ -519,9 +516,9 @@ MultiSectionDigitalClock.propTypes = { minutesStep: PropTypes.number, /** * 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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @template TView The view type. Will be one of date or time views. - * @param {TValue} value The new value. + * @param {InferPickerValue} value The new value. * @param {PickerSelectionState | undefined} selectionState Indicates if the date selection is complete. * @param {TView | undefined} selectedView Indicates the view in which the selection has been made. */ diff --git a/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClock.types.ts b/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClock.types.ts index ae4b27536239..d5d7dece5344 100644 --- a/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClock.types.ts +++ b/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClock.types.ts @@ -10,12 +10,12 @@ import { import { MultiSectionDigitalClockSectionProps } from './MultiSectionDigitalClockSection'; import { TimeViewWithMeridiem } from '../internals/models'; -export interface MultiSectionDigitalClockOption { - isDisabled?: (value: TValue) => boolean; - isSelected: (value: TValue) => boolean; - isFocused: (value: TValue) => boolean; +export interface MultiSectionDigitalClockOption { + isDisabled?: (value: TSectionValue) => boolean; + isSelected: (value: TSectionValue) => boolean; + isFocused: (value: TSectionValue) => boolean; label: string; - value: TValue; + value: TSectionValue; ariaLabel: string; } @@ -23,8 +23,8 @@ export interface ExportedMultiSectionDigitalClockProps extends ExportedBaseClockProps, MultiSectionDigitalClockOnlyProps {} -export interface MultiSectionDigitalClockViewProps - extends Pick, 'onChange' | 'items'> {} +export interface MultiSectionDigitalClockViewProps + extends Pick, 'onChange' | 'items'> {} export interface MultiSectionDigitalClockSlots { /** diff --git a/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClockSection.tsx b/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClockSection.tsx index bd68beaba510..1173681a3da7 100644 --- a/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClockSection.tsx +++ b/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClockSection.tsx @@ -27,13 +27,13 @@ export interface ExportedMultiSectionDigitalClockSectionProps { slotProps?: MultiSectionDigitalClockSlotProps; } -export interface MultiSectionDigitalClockSectionProps +export interface MultiSectionDigitalClockSectionProps extends ExportedMultiSectionDigitalClockSectionProps { autoFocus?: boolean; disabled?: boolean; readOnly?: boolean; - items: MultiSectionDigitalClockOption[]; - onChange: (value: TValue) => void; + items: MultiSectionDigitalClockOption[]; + onChange: (value: TSectionValue) => void; active?: boolean; skipDisabled?: boolean; role?: string; @@ -123,16 +123,17 @@ const MultiSectionDigitalClockSectionItem = styled(MenuItem, { }, })); -type MultiSectionDigitalClockSectionComponent = ( - props: MultiSectionDigitalClockSectionProps & React.RefAttributes, +type MultiSectionDigitalClockSectionComponent = ( + props: MultiSectionDigitalClockSectionProps & + React.RefAttributes, ) => React.JSX.Element & { propTypes?: any }; /** * @ignore - internal component. */ export const MultiSectionDigitalClockSection = React.forwardRef( - function MultiSectionDigitalClockSection( - inProps: MultiSectionDigitalClockSectionProps, + function MultiSectionDigitalClockSection( + inProps: MultiSectionDigitalClockSectionProps, ref: React.Ref, ) { const containerRef = React.useRef(null); 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 06c7858b913e..469fcad2a475 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 @@ -35,7 +35,7 @@ describe(' - Describes', () => { skip: ['componentProp', 'componentsProp', 'themeVariants'], })); - describeValue(MultiSectionDigitalClock, () => ({ + describeValue(MultiSectionDigitalClock, () => ({ render, componentFamily: 'multi-section-digital-clock', type: 'time', diff --git a/packages/x-date-pickers/src/PickersLayout/PickersLayout.tsx b/packages/x-date-pickers/src/PickersLayout/PickersLayout.tsx index 8cdefb9500a2..578a4d6b7e4e 100644 --- a/packages/x-date-pickers/src/PickersLayout/PickersLayout.tsx +++ b/packages/x-date-pickers/src/PickersLayout/PickersLayout.tsx @@ -79,8 +79,8 @@ export const PickersLayoutContentWrapper = styled('div', { flexDirection: 'column', }); -type PickersLayoutComponent = (( - props: PickersLayoutProps & React.RefAttributes, +type PickersLayoutComponent = (( + props: PickersLayoutProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; /** @@ -93,9 +93,9 @@ type PickersLayoutComponent = ((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 503256858729..bdbc767c50cf 100644 --- a/packages/x-date-pickers/src/PickersLayout/PickersLayout.types.ts +++ b/packages/x-date-pickers/src/PickersLayout/PickersLayout.types.ts @@ -13,8 +13,12 @@ import { PickersShortcuts, } from '../PickersShortcuts/PickersShortcuts'; import { PickerOwnerState } from '../models'; +import { InferPickerValue } from '../internals/models'; -export interface ExportedPickersLayoutSlots { +export interface ExportedPickersLayoutSlots< + TIsRange extends boolean, + TView extends DateOrTimeViewWithMeridiem, +> { /** * Custom component for the action bar, it is placed below the picker views. * @default PickersActionBar @@ -24,13 +28,13 @@ export interface ExportedPickersLayoutSlots>; + shortcuts?: React.JSXElementConstructor>; /** * Custom component for wrapping the layout. * It wraps the toolbar, views, action bar, and shortcuts. */ layout?: React.JSXElementConstructor< - PickersLayoutProps & React.RefAttributes + PickersLayoutProps & React.RefAttributes >; } @@ -39,7 +43,10 @@ export interface PickersLayoutOwnerState extends PickerOwnerState { isLandscape: boolean; } -export interface ExportedPickersLayoutSlotProps { +export interface ExportedPickersLayoutSlotProps< + TIsRange extends boolean, + TView extends DateOrTimeViewWithMeridiem, +> { /** * Props passed down to the action bar component. */ @@ -51,11 +58,13 @@ export interface ExportedPickersLayoutSlotProps>; + layout?: Partial>; } -export interface PickersLayoutSlots - extends ExportedPickersLayoutSlots { +export interface PickersLayoutSlots< + TIsRange extends boolean, + TView extends DateOrTimeViewWithMeridiem, +> extends ExportedPickersLayoutSlots { /** * Tabs enabling toggling between views. */ @@ -64,11 +73,13 @@ export interface PickersLayoutSlots>; + toolbar?: React.JSXElementConstructor>; } -export interface PickersLayoutSlotProps - extends ExportedPickersLayoutSlotProps { +export interface PickersLayoutSlotProps< + TIsRange extends boolean, + TView extends DateOrTimeViewWithMeridiem, +> extends ExportedPickersLayoutSlotProps { /** * Props passed down to the tabs component. */ @@ -79,9 +90,11 @@ export interface PickersLayoutSlotProps - extends Omit, 'value'> { - value?: TValue; +export interface PickersLayoutProps< + TIsRange extends boolean, + TView extends DateOrTimeViewWithMeridiem, +> extends Omit, 'value'> { + value?: InferPickerValue; className?: string; children?: React.ReactNode; /** @@ -96,22 +109,22 @@ export interface PickersLayoutProps; + slots?: PickersLayoutSlots; /** * The props used for each component slot. * @default {} */ - slotProps?: PickersLayoutSlotProps; + slotProps?: PickersLayoutSlotProps; /** * `true` if the application is in right-to-left direction. */ isRtl: boolean; } -export interface SubComponents { +export interface SubComponents { toolbar: React.ReactElement | null; content: React.ReactNode; tabs: React.ReactElement | null; actionBar: React.ReactElement; - shortcuts: React.ReactElement> | null; + shortcuts: React.ReactElement> | null; } diff --git a/packages/x-date-pickers/src/PickersLayout/usePickerLayout.tsx b/packages/x-date-pickers/src/PickersLayout/usePickerLayout.tsx index aa34a0a0c06a..56c583b6560e 100644 --- a/packages/x-date-pickers/src/PickersLayout/usePickerLayout.tsx +++ b/packages/x-date-pickers/src/PickersLayout/usePickerLayout.tsx @@ -7,12 +7,12 @@ import { PickersLayoutOwnerState, PickersLayoutProps, SubComponents } from './Pi import { getPickersLayoutUtilityClass, PickersLayoutClasses } from './pickersLayoutClasses'; import { PickersShortcuts } from '../PickersShortcuts'; import { BaseToolbarProps } from '../internals/models/props/toolbar'; -import { DateOrTimeViewWithMeridiem } from '../internals/models'; +import { DateOrTimeViewWithMeridiem, InferPickerValue } from '../internals/models'; import { usePickersPrivateContext } from '../internals/hooks/usePickersPrivateContext'; -function toolbarHasView( - toolbarProps: BaseToolbarProps | any, -): toolbarProps is BaseToolbarProps { +function toolbarHasView( + toolbarProps: BaseToolbarProps | any, +): toolbarProps is BaseToolbarProps { return toolbarProps.view !== null; } @@ -34,15 +34,18 @@ const useUtilityClasses = ( return composeClasses(slots, getPickersLayoutUtilityClass, classes); }; -interface PickersLayoutPropsWithValueRequired - extends PickersLayoutProps { - value: TValue; +interface PickersLayoutPropsWithValueRequired< + TIsRange extends boolean, + TView extends DateOrTimeViewWithMeridiem, +> extends PickersLayoutProps { + value: InferPickerValue; } -interface UsePickerLayoutResponse extends SubComponents {} -const usePickerLayout = ( - props: PickersLayoutProps, -): UsePickerLayoutResponse => { +interface UsePickerLayoutResponse extends SubComponents {} + +const usePickerLayout = ( + props: PickersLayoutProps, +): UsePickerLayoutResponse => { const { ownerState: pickersOwnerState } = usePickersPrivateContext(); const { @@ -69,7 +72,7 @@ const usePickerLayout = ( // The true type should be // - For pickers value: PickerValidDate | null // - For range pickers value: [PickerValidDate | null, PickerValidDate | null] - } = props as PickersLayoutPropsWithValueRequired; + } = props as PickersLayoutPropsWithValueRequired; const ownerState: PickersLayoutOwnerState = { ...pickersOwnerState, diff --git a/packages/x-date-pickers/src/PickersShortcuts/PickersShortcuts.tsx b/packages/x-date-pickers/src/PickersShortcuts/PickersShortcuts.tsx index b164341349a3..1b6c822bb444 100644 --- a/packages/x-date-pickers/src/PickersShortcuts/PickersShortcuts.tsx +++ b/packages/x-date-pickers/src/PickersShortcuts/PickersShortcuts.tsx @@ -5,14 +5,15 @@ import List, { ListProps } from '@mui/material/List'; import ListItem from '@mui/material/ListItem'; import Chip from '@mui/material/Chip'; import { VIEW_HEIGHT } from '../internals/constants/dimensions'; +import { InferPickerValue } from '../internals/models'; -interface PickersShortcutsItemGetValueParams { - isValid: (value: TValue) => boolean; +interface PickersShortcutsItemGetValueParams { + isValid: (value: InferPickerValue) => boolean; } -export interface PickersShortcutsItem { +export interface PickersShortcutsItem { label: string; - getValue: (params: PickersShortcutsItemGetValueParams) => TValue; + getValue: (params: PickersShortcutsItemGetValueParams) => InferPickerValue; /** * Identifier of the shortcut. * If provided, it will be used as the key of the shortcut. @@ -20,17 +21,18 @@ export interface PickersShortcutsItem { id?: string; } -export type PickersShortcutsItemContext = Omit, 'getValue'>; +export type PickersShortcutsItemContext = Omit, 'getValue'>; export type PickerShortcutChangeImportance = 'set' | 'accept'; -export interface ExportedPickersShortcutProps extends Omit { +export interface ExportedPickersShortcutProps + extends Omit { /** * Ordered array of shortcuts to display. * If empty, does not display the shortcuts. * @default [] */ - items?: PickersShortcutsItem[]; + items?: PickersShortcutsItem[]; /** * Importance of the change when picking a shortcut: * - "accept": fires `onChange`, fires `onAccept` and closes the picker. @@ -40,14 +42,15 @@ export interface ExportedPickersShortcutProps extends Omit extends ExportedPickersShortcutProps { +export interface PickersShortcutsProps + extends ExportedPickersShortcutProps { isLandscape: boolean; onChange: ( - newValue: TValue, + newValue: InferPickerValue, changeImportance: PickerShortcutChangeImportance, shortcut: PickersShortcutsItemContext, ) => void; - isValid: (value: TValue) => boolean; + isValid: (value: InferPickerValue) => boolean; } /** @@ -59,7 +62,7 @@ export interface PickersShortcutsProps extends ExportedPickersShortcutPr * * - [PickersShortcuts API](https://mui.com/x/api/date-pickers/pickers-shortcuts/) */ -function PickersShortcuts(props: PickersShortcutsProps) { +function PickersShortcuts(props: PickersShortcutsProps) { const { items, changeImportance = 'accept', isLandscape, onChange, isValid, ...other } = props; if (items == null || items.length === 0) { diff --git a/packages/x-date-pickers/src/StaticDatePicker/StaticDatePicker.tsx b/packages/x-date-pickers/src/StaticDatePicker/StaticDatePicker.tsx index ca4f3aa7362d..f7d9740aab22 100644 --- a/packages/x-date-pickers/src/StaticDatePicker/StaticDatePicker.tsx +++ b/packages/x-date-pickers/src/StaticDatePicker/StaticDatePicker.tsx @@ -154,17 +154,17 @@ StaticDatePicker.propTypes = { monthsPerRow: PropTypes.oneOf([3, 4]), /** * Callback fired when the value is accepted. - * @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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @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 {TValue} value The value that was just accepted. + * @param {InferPickerValue} value The value that was just accepted. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onAccept: PropTypes.func, /** * 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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @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 {TValue} value The new value. + * @param {InferPickerValue} value The new value. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onChange: PropTypes.func, @@ -179,9 +179,9 @@ StaticDatePicker.propTypes = { * When a validation error is detected, the `error` parameter contains a non-null value. * This can be used to render an appropriate form error. * @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. - * @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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @param {TError} error The reason why the current value is not valid. - * @param {TValue} value The value associated with the error. + * @param {InferPickerValue} value The value associated with the error. */ onError: PropTypes.func, /** diff --git a/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.tsx b/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.tsx index ba3702d7f9ae..a40308bf3c36 100644 --- a/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.tsx +++ b/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.tsx @@ -206,17 +206,17 @@ StaticDateTimePicker.propTypes = { monthsPerRow: PropTypes.oneOf([3, 4]), /** * Callback fired when the value is accepted. - * @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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @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 {TValue} value The value that was just accepted. + * @param {InferPickerValue} value The value that was just accepted. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onAccept: PropTypes.func, /** * 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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @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 {TValue} value The new value. + * @param {InferPickerValue} value The new value. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onChange: PropTypes.func, @@ -231,9 +231,9 @@ StaticDateTimePicker.propTypes = { * When a validation error is detected, the `error` parameter contains a non-null value. * This can be used to render an appropriate form error. * @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. - * @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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @param {TError} error The reason why the current value is not valid. - * @param {TValue} value The value associated with the error. + * @param {InferPickerValue} value The value associated with the error. */ onError: PropTypes.func, /** diff --git a/packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.tsx b/packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.tsx index d3ab866dbc7c..01f03fb35ddb 100644 --- a/packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.tsx +++ b/packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.tsx @@ -144,17 +144,17 @@ StaticTimePicker.propTypes = { minutesStep: PropTypes.number, /** * Callback fired when the value is accepted. - * @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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @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 {TValue} value The value that was just accepted. + * @param {InferPickerValue} value The value that was just accepted. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onAccept: PropTypes.func, /** * 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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @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 {TValue} value The new value. + * @param {InferPickerValue} value The new value. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onChange: PropTypes.func, @@ -169,9 +169,9 @@ StaticTimePicker.propTypes = { * When a validation error is detected, the `error` parameter contains a non-null value. * This can be used to render an appropriate form error. * @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. - * @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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @param {TError} error The reason why the current value is not valid. - * @param {TValue} value The value associated with the error. + * @param {InferPickerValue} value The value associated with the error. */ onError: PropTypes.func, /** diff --git a/packages/x-date-pickers/src/TimeClock/TimeClock.tsx b/packages/x-date-pickers/src/TimeClock/TimeClock.tsx index 07e885a20193..3008ba377ab6 100644 --- a/packages/x-date-pickers/src/TimeClock/TimeClock.tsx +++ b/packages/x-date-pickers/src/TimeClock/TimeClock.tsx @@ -55,7 +55,7 @@ type TimeClockComponent = (( props: TimeClockProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; -const TIME_CLOCK_DEFAULT_VIEWS: TimeView[] = ['hours', 'minutes']; +const TIME_CLOCK_DEFAULT_VIEWS: readonly TimeView[] = ['hours', 'minutes']; /** * Demos: @@ -68,7 +68,7 @@ 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, + inProps: TimeClockProps, ref: React.Ref, ) { const utils = useUtils(); @@ -129,7 +129,10 @@ export const TimeClock = React.forwardRef(function TimeClock( const translations = usePickersTranslations(); const now = useNow(timezone); - const { view, setView, previousView, nextView, setValueAndGoToNextView } = useViews({ + const { view, setView, previousView, nextView, setValueAndGoToNextView } = useViews< + false, + TimeView + >({ view: inView, views, openTo, @@ -463,9 +466,9 @@ TimeClock.propTypes = { minutesStep: PropTypes.number, /** * 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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @template TView The view type. Will be one of date or time views. - * @param {TValue} value The new value. + * @param {InferPickerValue} value The new value. * @param {PickerSelectionState | undefined} selectionState Indicates if the date selection is complete. * @param {TView | undefined} selectedView Indicates the view in which the selection has been made. */ 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 d7286b18d86b..9cf6545bbce7 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 @@ -26,7 +26,7 @@ describe(' - Describes', () => { skip: ['componentProp', 'componentsProp', 'themeVariants'], })); - describeValue(TimeClock, () => ({ + describeValue(TimeClock, () => ({ render, componentFamily: 'clock', values: [adapterToUse.date('2018-01-01T12:30:00'), adapterToUse.date('2018-01-01T13:35:00')], diff --git a/packages/x-date-pickers/src/TimeField/TimeField.tsx b/packages/x-date-pickers/src/TimeField/TimeField.tsx index 417ad69f94c8..daa666c6a49e 100644 --- a/packages/x-date-pickers/src/TimeField/TimeField.tsx +++ b/packages/x-date-pickers/src/TimeField/TimeField.tsx @@ -215,9 +215,9 @@ TimeField.propTypes = { onBlur: PropTypes.func, /** * 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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @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 {TValue} value The new value. + * @param {InferPickerValue} value The new value. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onChange: PropTypes.func, @@ -230,9 +230,9 @@ TimeField.propTypes = { * When a validation error is detected, the `error` parameter contains a non-null value. * This can be used to render an appropriate form error. * @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. - * @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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @param {TError} error The reason why the current value is not valid. - * @param {TValue} value The value associated with the error. + * @param {InferPickerValue} value The value associated with the error. */ onError: PropTypes.func, onFocus: PropTypes.func, diff --git a/packages/x-date-pickers/src/TimeField/TimeField.types.ts b/packages/x-date-pickers/src/TimeField/TimeField.types.ts index af41f53ee623..907332c7fd71 100644 --- a/packages/x-date-pickers/src/TimeField/TimeField.types.ts +++ b/packages/x-date-pickers/src/TimeField/TimeField.types.ts @@ -3,12 +3,7 @@ import { SlotComponentProps } from '@mui/utils'; import { MakeOptional } from '@mui/x-internals/types'; import TextField from '@mui/material/TextField'; import { UseFieldInternalProps } from '../internals/hooks/useField'; -import { - FieldSection, - PickerValidDate, - TimeValidationError, - BuiltInFieldTextFieldProps, -} from '../models'; +import { TimeValidationError, BuiltInFieldTextFieldProps } from '../models'; import { ExportedUseClearableFieldProps, UseClearableFieldSlots, @@ -19,12 +14,7 @@ import { AmPmProps } from '../internals/models/props/time'; export interface UseTimeFieldProps extends MakeOptional< - UseFieldInternalProps< - PickerValidDate | null, - FieldSection, - TEnableAccessibleFieldDOMStructure, - TimeValidationError - >, + UseFieldInternalProps, 'format' >, ExportedValidateTimeProps, 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 35b9339620ac..dfc22c31bbac 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 @@ -31,7 +31,7 @@ describe(' - Describes', () => { skip: ['componentProp', 'componentsProp', 'themeVariants', 'themeStyleOverrides'], })); - describeValue(TimeField, () => ({ + describeValue(TimeField, () => ({ render, componentFamily: 'field', values: [adapterToUse.date('2018-01-01'), adapterToUse.date('2018-01-02')], diff --git a/packages/x-date-pickers/src/TimeField/useTimeField.ts b/packages/x-date-pickers/src/TimeField/useTimeField.ts index 5ec3eba335b5..601d593fe0b6 100644 --- a/packages/x-date-pickers/src/TimeField/useTimeField.ts +++ b/packages/x-date-pickers/src/TimeField/useTimeField.ts @@ -7,7 +7,6 @@ import { useField } from '../internals/hooks/useField'; import { UseTimeFieldProps } from './TimeField.types'; import { validateTime } from '../validation'; import { useSplitFieldProps } from '../hooks'; -import { PickerValidDate, FieldSection } from '../models'; import { useDefaultizedTimeField } from '../internals/hooks/defaultizedFieldProps'; export const useTimeField = < @@ -24,8 +23,7 @@ export const useTimeField = < const { forwardedProps, internalProps } = useSplitFieldProps(props, 'time'); return useField< - PickerValidDate | null, - FieldSection, + false, TEnableAccessibleFieldDOMStructure, typeof forwardedProps, typeof internalProps diff --git a/packages/x-date-pickers/src/TimePicker/TimePicker.tsx b/packages/x-date-pickers/src/TimePicker/TimePicker.tsx index 090d3c50b962..94b93de11ed3 100644 --- a/packages/x-date-pickers/src/TimePicker/TimePicker.tsx +++ b/packages/x-date-pickers/src/TimePicker/TimePicker.tsx @@ -153,17 +153,17 @@ TimePicker.propTypes = { name: PropTypes.string, /** * Callback fired when the value is accepted. - * @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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @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 {TValue} value The value that was just accepted. + * @param {InferPickerValue} value The value that was just accepted. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onAccept: PropTypes.func, /** * 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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @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 {TValue} value The new value. + * @param {InferPickerValue} value The new value. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onChange: PropTypes.func, @@ -177,9 +177,9 @@ TimePicker.propTypes = { * When a validation error is detected, the `error` parameter contains a non-null value. * This can be used to render an appropriate form error. * @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. - * @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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @param {TError} error The reason why the current value is not valid. - * @param {TValue} value The value associated with the error. + * @param {InferPickerValue} value The value associated with the error. */ onError: PropTypes.func, /** diff --git a/packages/x-date-pickers/src/TimePicker/TimePicker.types.ts b/packages/x-date-pickers/src/TimePicker/TimePicker.types.ts index 4a22286b2b10..82533fcaa83f 100644 --- a/packages/x-date-pickers/src/TimePicker/TimePicker.types.ts +++ b/packages/x-date-pickers/src/TimePicker/TimePicker.types.ts @@ -11,12 +11,7 @@ import { MobileTimePickerSlots, MobileTimePickerSlotProps, } from '../MobileTimePicker'; -import { - BaseSingleInputFieldProps, - FieldSection, - PickerValidDate, - TimeValidationError, -} from '../models'; +import { BaseSingleInputFieldProps, TimeValidationError } from '../models'; import { UseTimeFieldProps } from '../TimeField'; export interface TimePickerSlots @@ -57,4 +52,4 @@ export type TimePickerFieldProps, 'format' | 'timezone' | 'value' | 'ampm' | keyof BaseTimeValidationProps > & - BaseSingleInputFieldProps; + BaseSingleInputFieldProps; diff --git a/packages/x-date-pickers/src/TimePicker/TimePickerToolbar.tsx b/packages/x-date-pickers/src/TimePicker/TimePickerToolbar.tsx index bd5f40f736b8..8dd274c1391d 100644 --- a/packages/x-date-pickers/src/TimePicker/TimePickerToolbar.tsx +++ b/packages/x-date-pickers/src/TimePicker/TimePickerToolbar.tsx @@ -23,7 +23,7 @@ import { formatMeridiem } from '../internals/utils/date-utils'; import { PickerValidDate } from '../models'; export interface TimePickerToolbarProps - extends BaseToolbarProps, + extends BaseToolbarProps, ExportedTimePickerToolbarProps { ampm?: boolean; ampmInClock?: boolean; diff --git a/packages/x-date-pickers/src/TimePicker/shared.tsx b/packages/x-date-pickers/src/TimePicker/shared.tsx index e5a9a8368f29..f8660a447a9e 100644 --- a/packages/x-date-pickers/src/TimePicker/shared.tsx +++ b/packages/x-date-pickers/src/TimePicker/shared.tsx @@ -11,7 +11,7 @@ import { ExportedTimePickerToolbarProps, TimePickerToolbar, } from './TimePickerToolbar'; -import { PickerValidDate, TimeValidationError } from '../models'; +import { TimeValidationError } from '../models'; import { PickerViewRendererLookup } from '../internals/hooks/usePicker/usePickerViews'; import { TimeViewRendererProps } from '../timeViewRenderers'; import { applyDefaultViewProps } from '../internals/utils/views'; @@ -34,14 +34,14 @@ export type TimePickerViewRenderers< TView extends TimeViewWithMeridiem, TAdditionalProps extends {} = {}, > = PickerViewRendererLookup< - PickerValidDate | null, + false, TView, TimeViewRendererProps>, TAdditionalProps >; export interface BaseTimePickerProps - extends BasePickerInputProps, + extends BasePickerInputProps, ExportedBaseClockProps { /** * Display ampm controls under the clock (instead of in the toolbar). 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 a779c25c2194..b661a114096a 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 @@ -31,7 +31,7 @@ describe(' - Describes', () => { skip: ['componentProp', 'componentsProp', 'themeVariants'], })); - describeValue(YearCalendar, () => ({ + describeValue(YearCalendar, () => ({ render, componentFamily: 'calendar', values: [adapterToUse.date('2018-01-01'), adapterToUse.date('2018-01-01')], diff --git a/packages/x-date-pickers/src/hooks/useParsedFormat.ts b/packages/x-date-pickers/src/hooks/useParsedFormat.ts index a42e9c652416..0c7fbaea8452 100644 --- a/packages/x-date-pickers/src/hooks/useParsedFormat.ts +++ b/packages/x-date-pickers/src/hooks/useParsedFormat.ts @@ -9,7 +9,7 @@ import type { UseFieldInternalProps } from '../internals/hooks/useField'; interface UseParsedFormatParameters extends Pick< - UseFieldInternalProps, + UseFieldInternalProps, 'format' | 'formatDensity' | 'shouldRespectLeadingZeros' > {} diff --git a/packages/x-date-pickers/src/internals/components/PickersToolbar.tsx b/packages/x-date-pickers/src/internals/components/PickersToolbar.tsx index 47a6e0fa53da..9c868b0c81d4 100644 --- a/packages/x-date-pickers/src/internals/components/PickersToolbar.tsx +++ b/packages/x-date-pickers/src/internals/components/PickersToolbar.tsx @@ -7,8 +7,10 @@ import { BaseToolbarProps } from '../models/props/toolbar'; import { getPickersToolbarUtilityClass, PickersToolbarClasses } from './pickersToolbarClasses'; import { DateOrTimeViewWithMeridiem } from '../models'; -export interface PickersToolbarProps - extends Pick, 'isLandscape' | 'hidden' | 'titleId'> { +export interface PickersToolbarProps< + TIsRange extends boolean, + TView extends DateOrTimeViewWithMeridiem, +> extends Pick, 'isLandscape' | 'hidden' | 'titleId'> { className?: string; landscapeDirection?: 'row' | 'column'; toolbarTitle: React.ReactNode; @@ -84,16 +86,19 @@ const PickersToolbarContent = styled('div', { ], }); -type PickersToolbarComponent = (( - props: React.PropsWithChildren> & +type PickersToolbarComponent = (< + TIsRange extends boolean, + TView extends DateOrTimeViewWithMeridiem, +>( + props: React.PropsWithChildren> & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; export const PickersToolbar = React.forwardRef(function PickersToolbar< - TValue, + TIsRange extends boolean, TView extends DateOrTimeViewWithMeridiem, >( - inProps: React.PropsWithChildren>, + inProps: React.PropsWithChildren>, ref: React.Ref, ) { const props = useThemeProps({ props: inProps, name: 'MuiPickersToolbar' }); diff --git a/packages/x-date-pickers/src/internals/hooks/useClockReferenceDate.ts b/packages/x-date-pickers/src/internals/hooks/useClockReferenceDate.ts index cef4af021371..782fc444900a 100644 --- a/packages/x-date-pickers/src/internals/hooks/useClockReferenceDate.ts +++ b/packages/x-date-pickers/src/internals/hooks/useClockReferenceDate.ts @@ -11,7 +11,7 @@ export const useClockReferenceDate = ({ props, timezone, }: { - value: PickerValidDate; + value: PickerValidDate | null; referenceDate: PickerValidDate | undefined; utils: MuiPickersAdapter; props: TProps; 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 9158434b71af..7895473f2111 100644 --- a/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.tsx +++ b/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.tsx @@ -12,14 +12,7 @@ import { } from './useDesktopPicker.types'; import { usePicker } from '../usePicker'; import { PickersLayout } from '../../../PickersLayout'; -import { - FieldSection, - PickerValidDate, - FieldRef, - BaseSingleInputFieldProps, - InferError, - PickerOwnerState, -} from '../../../models'; +import { FieldRef, BaseSingleInputFieldProps, InferError, PickerOwnerState } from '../../../models'; import { DateOrTimeViewWithMeridiem } from '../../models'; import { PickersProvider } from '../../components/PickersProvider'; @@ -65,7 +58,7 @@ export const useDesktopPicker = < } = props; const containerRef = React.useRef(null); - const fieldRef = React.useRef>(null); + const fieldRef = React.useRef>(null); const labelId = useId(); const isToolbarHidden = innerSlotProps?.toolbar?.hidden ?? false; @@ -80,7 +73,7 @@ export const useDesktopPicker = < shouldRestoreFocus, fieldProps: pickerFieldProps, ownerState, - } = usePicker({ + } = usePicker({ ...pickerParams, props, fieldRef, @@ -126,8 +119,7 @@ export const useDesktopPicker = < UseDesktopPickerSlotProps['field'], Partial< BaseSingleInputFieldProps< - PickerValidDate | null, - FieldSection, + false, 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 3e207b42029a..335fcb79975d 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 @@ -11,12 +11,7 @@ import { } from '../../models/props/basePickerProps'; import { PickersPopperSlots, PickersPopperSlotProps } from '../../components/PickersPopper'; import { UsePickerParams } from '../usePicker'; -import { - BaseSingleInputFieldProps, - FieldSection, - PickerOwnerState, - PickerValidDate, -} from '../../../models'; +import { BaseSingleInputFieldProps, PickerOwnerState, PickerValidDate } from '../../../models'; import { ExportedPickersLayoutSlots, ExportedPickersLayoutSlotProps, @@ -35,7 +30,7 @@ export interface UseDesktopPickerSlots PickersPopperSlots, 'desktopPaper' | 'desktopTransition' | 'desktopTrapFocus' | 'popper' >, - ExportedPickersLayoutSlots, + ExportedPickersLayoutSlots, UseClearableFieldSlots { /** * Component used to enter the date with the keyboard. @@ -66,21 +61,16 @@ export interface UseDesktopPickerSlotProps< TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, > extends ExportedUseDesktopPickerSlotProps, - Pick, 'toolbar'> {} + Pick, 'toolbar'> {} export interface ExportedUseDesktopPickerSlotProps< TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, > extends PickersPopperSlotProps, - ExportedPickersLayoutSlotProps, + ExportedPickersLayoutSlotProps, UseClearableFieldSlotProps { field?: SlotComponentPropsFromProps< - BaseSingleInputFieldProps< - PickerValidDate | null, - FieldSection, - TEnableAccessibleFieldDOMStructure, - unknown - >, + BaseSingleInputFieldProps, {}, PickerOwnerState >; @@ -106,8 +96,8 @@ export interface UseDesktopPickerProps< TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError, - TExternalProps extends UsePickerViewsProps, -> extends BasePickerProps, + TExternalProps extends UsePickerViewsProps, +> extends BasePickerProps, DesktopOnlyPickerProps { /** * Overridable component slots. @@ -131,7 +121,7 @@ export interface UseDesktopPickerParams< TExternalProps >, > extends Pick< - UsePickerParams, + UsePickerParams, 'valueManager' | 'valueType' | 'validator' | 'rendererInterceptor' > { props: TExternalProps; 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 d12d5263f6b0..157777b5384f 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,16 @@ import { import { adjustSectionValue, getSectionOrder } from './useField.utils'; import { useFieldState } from './useFieldState'; import { useFieldCharacterEditing } from './useFieldCharacterEditing'; -import { FieldSection } from '../../../models'; import { useFieldV7TextField } from './useFieldV7TextField'; import { useFieldV6TextField } from './useFieldV6TextField'; export const useField = < - TValue, - TSection extends FieldSection, + TIsRange extends boolean, TEnableAccessibleFieldDOMStructure extends boolean, TForwardedProps extends UseFieldCommonForwardedProps & UseFieldForwardedProps, TInternalProps extends UseFieldInternalProps< - any, - any, + TIsRange, TEnableAccessibleFieldDOMStructure, any > & { @@ -37,8 +34,7 @@ export const useField = < }, >( params: UseFieldParams< - TValue, - TSection, + TIsRange, TEnableAccessibleFieldDOMStructure, TForwardedProps, TInternalProps @@ -78,7 +74,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 44be2122260a..8527e0b2c42f 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 @@ -11,6 +11,7 @@ import { FieldRef, OnErrorProps, InferError, + InferFieldSection, } from '../../../models'; import type { PickerValueManager } from '../usePicker'; import type { Validator } from '../../../validation'; @@ -18,39 +19,38 @@ import type { UseFieldStateResponse } from './useFieldState'; import type { UseFieldCharacterEditingResponse } from './useFieldCharacterEditing'; import { PickersSectionElement, PickersSectionListRef } from '../../../PickersSectionList'; import { ExportedUseClearableFieldProps } from '../../../hooks/useClearableField'; +import { InferNonNullablePickerValue, InferPickerValue } from '../../models'; export interface UseFieldParams< - TValue, - TSection extends FieldSection, + TIsRange extends boolean, TEnableAccessibleFieldDOMStructure extends boolean, TForwardedProps extends UseFieldCommonForwardedProps & UseFieldForwardedProps, - TInternalProps extends UseFieldInternalProps, + 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, - TSection extends FieldSection, + TIsRange extends boolean, TEnableAccessibleFieldDOMStructure extends boolean, TError, > extends TimezoneProps, - OnErrorProps { + OnErrorProps { /** * The selected value. * Used when the component is controlled. */ - value?: TValue; + value?: InferPickerValue; /** * The default value. Use when the component is not controlled. */ - defaultValue?: TValue; + defaultValue?: InferPickerValue; /** * The date used to generate a part of the new value that is not present in the format when both `value` and `defaultValue` are empty. * For example, on time fields it will be used to determine the date to set. @@ -59,12 +59,12 @@ export interface UseFieldInternalProps< 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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @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 {TValue} value The new value. + * @param {InferPickerValue} value The new value. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ - onChange?: FieldChangeHandler; + onChange?: FieldChangeHandler; /** * Format of the date when rendered in the input(s). */ @@ -114,7 +114,7 @@ export interface UseFieldInternalProps< /** * The ref object used to imperatively interact with the field. */ - unstableFieldRef?: React.Ref>; + unstableFieldRef?: React.Ref>; /** * @default true */ @@ -132,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; @@ -215,8 +215,8 @@ export type FieldSectionsBoundaries = { }; }; -export type FieldChangeHandler = ( - value: TValue, +export type FieldChangeHandler = ( + value: InferPickerValue, context: FieldChangeHandlerContext, ) => void; @@ -228,7 +228,7 @@ 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 { +interface FieldActiveDateManager { /** * Active date from `state.value`. */ @@ -238,113 +238,113 @@ interface FieldActiveDateManager { */ referenceDate: PickerValidDate; /** - * @template TSection - * @param {TSection[]} sections The sections of the full value. - * @returns {TSection[]} The sections of the active date. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @param {InferFieldSection[]} sections The sections of the full value. + * @returns {InferFieldSection[]} The sections of the active date. * Get the sections of the active date. */ - getSections: (sections: TSection[]) => TSection[]; + getSections: (sections: InferFieldSection[]) => InferFieldSection[]; /** * Creates the new value and reference value based on the new active date and the current state. - * @template TValue + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @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. + * @returns {Pick, 'value' | 'referenceValue'>} The new value and reference value to publish and store in the state. */ getNewValuesFromNewActiveDate: ( newActiveDate: PickerValidDate | null, - ) => Pick, 'value' | 'referenceValue'>; + ) => Pick, 'value' | 'referenceValue'>; } export type FieldParsedSelectedSections = number | 'all' | null; -export interface FieldValueManager { +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, TSection + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @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 {InferPickerValue} value The current value to generate sections from. + * @param {InferFieldSection[] | null} fallbackSections The sections to use as a fallback if a date is null or invalid. * @param {(date: PickerValidDate) => FieldSection[]} getSectionsFromDate Returns the sections of the given date. - * @returns {TSection[]} The new section list. + * @returns {InferFieldSection[]} The new section list. */ getSectionsFromValue: ( utils: MuiPickersAdapter, - value: TValue, - fallbackSections: TSection[] | null, + value: InferPickerValue, + fallbackSections: InferFieldSection[] | null, getSectionsFromDate: (date: PickerValidDate) => FieldSection[], - ) => TSection[]; + ) => InferFieldSection[]; /** * Creates the string value to render in the input based on the current section list. - * @template TSection - * @param {TSection[]} sections The current section list. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @param {InferFieldSection[]} sections The current section list. * @param {string} localizedDigits The conversion table from localized to 0-9 digits. * @param {boolean} isRtl `true` if the current orientation is "right to left" * @returns {string} The string value to render in the input. */ getV6InputValueFromSections: ( - sections: TSection[], + sections: InferFieldSection[], localizedDigits: string[], isRtl: boolean, ) => string; /** * Creates the string value to render in the input based on the current section list. - * @template TSection - * @param {TSection[]} sections The current section list. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @param {InferFieldSection[]} sections The current section list. * @returns {string} The string value to render in the input. */ - getV7HiddenInputValueFromSections: (sections: TSection[]) => string; + getV7HiddenInputValueFromSections: (sections: InferFieldSection[]) => string; /** * Returns the manager of the active date. - * @template TValue, TSection + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @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. + * @param {UseFieldState} state The current state of the field. + * @param {InferFieldSection} activeSection The active section. + * @returns {FieldActiveDateManager} The manager of the active date. */ getActiveDateManager: ( utils: MuiPickersAdapter, - state: UseFieldState, - activeSection: TSection, - ) => FieldActiveDateManager; + state: UseFieldState, + activeSection: InferFieldSection, + ) => 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 + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @param {string} valueStr The string value to parse. - * @param {TValue} referenceValue The reference value currently stored in state. + * @param {InferPickerValue} referenceValue The reference value currently stored in state. * @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. + * @returns {InferPickerValue} The new parsed value. */ parseValueStr: ( valueStr: string, - referenceValue: TValue, + referenceValue: InferNonNullablePickerValue, parseDate: (dateStr: string, referenceDate: PickerValidDate) => PickerValidDate | null, - ) => TValue; + ) => InferPickerValue; /** * Update the reference value with the new value. * This method must make sure that no date inside the returned `referenceValue` is invalid. - * @template TValue + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @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. + * @param {InferPickerValue} value The new value from which we want to take all valid dates in the `referenceValue` state. + * @param {InferPickerValue} prevReferenceValue The previous reference value. It is used as a fallback for invalid dates in the new value. + * @returns {InferPickerValue} The new reference value with no invalid date. */ updateReferenceValue: ( utils: MuiPickersAdapter, - value: TValue, - prevReferenceValue: TValue, - ) => TValue; + value: InferPickerValue, + prevReferenceValue: InferNonNullablePickerValue, + ) => InferNonNullablePickerValue; } -export interface UseFieldState { - value: TValue; +export interface UseFieldState { + value: InferPickerValue; /** * Non-nullable value used to keep trace of the timezone and the date parts not present in the format. * It is updated whenever we have a valid date (for the range picker we update only the portion of the range that is valid). */ - referenceValue: TValue; - sections: TSection[]; + referenceValue: InferNonNullablePickerValue; + sections: InferFieldSection[]; /** * Android `onChange` behavior when the input selection is not empty is quite different from a desktop behavior. * There are two `onChange` calls: @@ -423,14 +423,12 @@ export interface UseFieldTextFieldInteractions { } export type UseFieldTextField = < - TValue, - TSection extends FieldSection, + TIsRange extends boolean, TForwardedProps extends TEnableAccessibleFieldDOMStructure extends false ? UseFieldV6ForwardedProps : UseFieldV7ForwardedProps, TInternalProps extends UseFieldInternalProps< - any, - any, + TIsRange, TEnableAccessibleFieldDOMStructure, any > & { @@ -438,8 +436,7 @@ export type UseFieldTextField( params: UseFieldTextFieldParams< - TValue, - TSection, + TIsRange, TEnableAccessibleFieldDOMStructure, TForwardedProps, TInternalProps @@ -452,21 +449,19 @@ export type UseFieldTextField, + TInternalProps extends UseFieldInternalProps, > extends UseFieldParams< - TValue, - TSection, + TIsRange, 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 f3d00d85af1d..de8b8eb6b894 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 @@ -15,6 +15,7 @@ import { PickersTimezone, PickerValidDate, FieldSelectedSections, + InferFieldSection, } from '../../../models'; import { getMonthsInYear } from '../../utils/date-utils'; @@ -230,10 +231,10 @@ export const cleanDigitSectionValue = ( return applyLocalizedDigits(valueStr, localizedDigits); }; -export const adjustSectionValue = ( +export const adjustSectionValue = ( utils: MuiPickersAdapter, timezone: PickersTimezone, - section: TSection, + section: InferFieldSection, keyCode: AvailableAdjustKeyCode, sectionsValueBoundaries: FieldSectionsValueBoundaries, localizedDigits: string[], @@ -614,8 +615,8 @@ export const getSectionsBoundaries = ( let warnedOnceInvalidSection = false; -export const validateSections = ( - sections: TSection[], +export const validateSections = ( + sections: InferFieldSection[], valueType: FieldValueType, ) => { if (process.env.NODE_ENV !== 'production') { 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 7e3ff21ee74f..5c890b8f4b46 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,11 @@ import * as React from 'react'; import useEventCallback from '@mui/utils/useEventCallback'; -import { FieldSectionType, FieldSection, PickersTimezone } from '../../../models'; +import { + FieldSectionType, + FieldSection, + PickersTimezone, + InferFieldSection, +} from '../../../models'; import { useUtils } from '../useUtils'; import { FieldSectionsValueBoundaries } from './useField.types'; import { @@ -27,9 +32,9 @@ export interface ApplyCharacterEditingParams { sectionIndex: number; } -interface UseFieldCharacterEditingParams { - sections: TSection[]; - updateSectionValue: (params: UpdateSectionValueParams) => void; +interface UseFieldCharacterEditingParams { + sections: InferFieldSection[]; + updateSectionValue: (params: UpdateSectionValueParams) => void; sectionsValueBoundaries: FieldSectionsValueBoundaries; localizedDigits: string[]; setTempAndroidValueStr: (newValue: string | null) => void; @@ -65,15 +70,15 @@ type CharacterEditingApplier = ( * If it returns `{ saveQuery: false }, * Then we do nothing. */ -type QueryApplier = ( +type QueryApplier = ( queryValue: string, - activeSection: TSection, + activeSection: InferFieldSection, ) => { sectionValue: string; shouldGoToNextSection: boolean } | { saveQuery: boolean }; const QUERY_LIFE_DURATION_MS = 5000; -const isQueryResponseWithoutValue = ( - response: ReturnType>, +const isQueryResponseWithoutValue = ( + response: ReturnType>, ): response is { saveQuery: boolean } => (response as { saveQuery: boolean }).saveQuery != null; /** @@ -83,14 +88,14 @@ 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 = ({ +export const useFieldCharacterEditing = ({ sections, updateSectionValue, sectionsValueBoundaries, localizedDigits, setTempAndroidValueStr, timezone, -}: UseFieldCharacterEditingParams): UseFieldCharacterEditingResponse => { +}: UseFieldCharacterEditingParams): UseFieldCharacterEditingResponse => { const utils = useUtils(); const [query, setQuery] = React.useState(null); @@ -117,7 +122,7 @@ export const useFieldCharacterEditing = ({ const applyQuery = ( { keyPressed, sectionIndex }: ApplyCharacterEditingParams, - getFirstSectionValueMatchingWithQuery: QueryApplier, + getFirstSectionValueMatchingWithQuery: QueryApplier, isValidQueryValue?: (queryValue: string) => boolean, ): ReturnType => { const cleanKeyPressed = keyPressed.toLowerCase(); @@ -170,7 +175,7 @@ export const useFieldCharacterEditing = ({ format: string, options: string[], queryValue: string, - ): ReturnType> => { + ): ReturnType> => { const matchingValues = options.filter((option) => option.toLowerCase().startsWith(queryValue), ); @@ -187,7 +192,7 @@ export const useFieldCharacterEditing = ({ const testQueryOnFormatAndFallbackFormat = ( queryValue: string, - activeSection: TSection, + activeSection: InferFieldSection, fallbackFormat?: string, formatFallbackValue?: (fallbackValue: string, fallbackOptions: string[]) => string, ) => { @@ -225,7 +230,7 @@ export const useFieldCharacterEditing = ({ return { saveQuery: false }; }; - const getFirstSectionValueMatchingWithQuery: QueryApplier = ( + const getFirstSectionValueMatchingWithQuery: QueryApplier = ( queryValue, activeSection, ) => { @@ -284,7 +289,7 @@ export const useFieldCharacterEditing = ({ | 'hasLeadingZerosInInput' | 'maxLength' >, - ): ReturnType> => { + ): ReturnType> => { const cleanQueryValue = removeLocalizedDigits(queryValue, localizedDigits); const queryValueNumber = Number(cleanQueryValue); const sectionBoundaries = sectionsValueBoundaries[section.type]({ @@ -319,7 +324,7 @@ export const useFieldCharacterEditing = ({ return { sectionValue: newSectionValue, shouldGoToNextSection }; }; - const getFirstSectionValueMatchingWithQuery: QueryApplier = ( + const getFirstSectionValueMatchingWithQuery: QueryApplier = ( queryValue, activeSection, ) => { 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 1282c4c6b578..221658d8462f 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useFieldState.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useFieldState.ts @@ -22,23 +22,24 @@ import { } from './useField.utils'; import { buildSectionsFromFormat } from './buildSectionsFromFormat'; import { - FieldSection, FieldSelectedSections, PickersTimezone, PickerValidDate, InferError, + InferFieldSection, } from '../../../models'; import { useValueWithTimezone } from '../useValueWithTimezone'; import { GetDefaultReferenceDateProps, getSectionTypeGranularity, } from '../../utils/getDefaultReferenceDate'; +import { InferPickerValue } from '../../models'; -export interface UpdateSectionValueParams { +export interface UpdateSectionValueParams { /** * The section on which we want to apply the new value. */ - activeSection: TSection; + activeSection: InferFieldSection; /** * Value to apply to the active section. */ @@ -49,37 +50,38 @@ export interface UpdateSectionValueParams { shouldGoToNextSection: boolean; } -export interface UseFieldStateResponse { - state: UseFieldState; +export interface UseFieldStateResponse { + state: UseFieldState; activeSectionIndex: number | null; parsedSelectedSections: FieldParsedSelectedSections; setSelectedSections: (sections: FieldSelectedSections) => void; clearValue: () => void; clearActiveSection: () => void; - updateSectionValue: (params: UpdateSectionValueParams) => void; + updateSectionValue: (params: UpdateSectionValueParams) => void; updateValueFromValueStr: (valueStr: string) => void; setTempAndroidValueStr: (tempAndroidValueStr: string | null) => void; sectionsValueBoundaries: FieldSectionsValueBoundaries; - getSectionsFromValue: (value: TValue, fallbackSections?: TSection[] | null) => TSection[]; + getSectionsFromValue: ( + value: InferPickerValue, + fallbackSections?: InferFieldSection[] | null, + ) => InferFieldSection[]; localizedDigits: string[]; timezone: PickersTimezone; } export const useFieldState = < - TValue, - TSection extends FieldSection, + TIsRange extends boolean, TEnableAccessibleFieldDOMStructure extends boolean, TForwardedProps extends UseFieldForwardedProps, - TInternalProps extends UseFieldInternalProps, + TInternalProps extends UseFieldInternalProps, >( params: UseFieldParams< - TValue, - TSection, + TIsRange, TEnableAccessibleFieldDOMStructure, TForwardedProps, TInternalProps >, -): UseFieldStateResponse => { +): UseFieldStateResponse => { const utils = useUtils(); const translations = usePickersTranslations(); const adapter = useLocalizationContext(); @@ -126,7 +128,10 @@ export const useFieldState = < ); const getSectionsFromValue = React.useCallback( - (value: TValue, fallbackSections: TSection[] | null = null) => + ( + value: InferPickerValue, + fallbackSections: InferFieldSection[] | null = null, + ) => fieldValueManager.getSectionsFromValue(utils, value, fallbackSections, (date) => buildSectionsFromFormat({ utils, @@ -153,14 +158,13 @@ export const useFieldState = < ], ); - const [state, setState] = React.useState>(() => { + const [state, setState] = React.useState>(() => { const sections = getSectionsFromValue(valueFromTheOutside); validateSections(sections, valueType); - const stateWithoutReferenceDate: UseFieldState = { + const stateWithoutReferenceDate: Omit, 'referenceValue'> = { sections, value: valueFromTheOutside, - referenceValue: valueManager.emptyValue, tempValueStrAndroid: null, }; @@ -203,7 +207,7 @@ export const useFieldState = < value, referenceValue, sections, - }: Pick, 'value' | 'referenceValue' | 'sections'>) => { + }: Pick, 'value' | 'referenceValue' | 'sections'>) => { setState((prevState) => ({ ...prevState, sections, @@ -309,7 +313,7 @@ export const useFieldState = < activeSection, newSectionValue, shouldGoToNextSection, - }: UpdateSectionValueParams) => { + }: UpdateSectionValueParams) => { /** * 1. Decide which section should be focused */ @@ -325,7 +329,7 @@ export const useFieldState = < const newActiveDateSections = activeDateManager.getSections(newSections); const newActiveDate = getDateFromDateSections(utils, newActiveDateSections, localizedDigits); - let values: Pick, 'value' | 'referenceValue'>; + let values: Pick, 'value' | 'referenceValue'>; let shouldPublish: boolean; /** diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useFieldV6TextField.ts b/packages/x-date-pickers/src/internals/hooks/useField/useFieldV6TextField.ts index 288b0ee44de9..5fdf2c07dfed 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useFieldV6TextField.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useFieldV6TextField.ts @@ -3,11 +3,11 @@ import { useRtl } from '@mui/system/RtlProvider'; import useEventCallback from '@mui/utils/useEventCallback'; import useForkRef from '@mui/utils/useForkRef'; import { UseFieldTextFieldInteractions, UseFieldTextField } from './useField.types'; -import { FieldSection } from '../../../models'; +import { InferFieldSection } from '../../../models'; import { getActiveElement } from '../../utils/utils'; import { getSectionVisibleValue, isAndroid } from './useField.utils'; -type FieldSectionWithPositions = TSection & { +type FieldSectionWithPositions = InferFieldSection & { /** * Start index of the section in the format */ @@ -30,14 +30,14 @@ type FieldSectionWithPositions = TSection & { const cleanString = (dirtyString: string) => dirtyString.replace(/[\u2066\u2067\u2068\u2069]/g, ''); -export const addPositionPropertiesToSections = ( - sections: TSection[], +export const addPositionPropertiesToSections = ( + sections: InferFieldSection[], localizedDigits: string[], isRtl: boolean, -): FieldSectionWithPositions[] => { +): FieldSectionWithPositions[] => { let position = 0; let positionInInput = isRtl ? 1 : 0; - const newSections: FieldSectionWithPositions[] = []; + const newSections: FieldSectionWithPositions[] = []; for (let i = 0; i < sections.length; i += 1) { const section = sections[i]; 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 917c358b6737..560b3b2cb4b5 100644 --- a/packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.tsx +++ b/packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.tsx @@ -11,14 +11,7 @@ import { import { usePicker } from '../usePicker'; import { onSpaceOrEnter } from '../../utils/utils'; import { PickersLayout } from '../../../PickersLayout'; -import { - FieldSection, - BaseSingleInputFieldProps, - PickerValidDate, - FieldRef, - InferError, - PickerOwnerState, -} from '../../../models'; +import { BaseSingleInputFieldProps, FieldRef, InferError, PickerOwnerState } from '../../../models'; import { DateOrTimeViewWithMeridiem } from '../../models'; import { PickersProvider } from '../../components/PickersProvider'; @@ -61,7 +54,7 @@ export const useMobilePicker = < localeText, } = props; - const fieldRef = React.useRef>(null); + const fieldRef = React.useRef>(null); const labelId = useId(); const isToolbarHidden = innerSlotProps?.toolbar?.hidden ?? false; @@ -74,7 +67,7 @@ export const useMobilePicker = < renderCurrentView, fieldProps: pickerFieldProps, ownerState, - } = usePicker({ + } = usePicker({ ...pickerParams, props, fieldRef, @@ -90,8 +83,7 @@ export const useMobilePicker = < UseMobilePickerSlotProps['field'], Partial< BaseSingleInputFieldProps< - PickerValidDate | null, - FieldSection, + false, 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 27824fd3df82..961ab47f87ec 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 @@ -12,12 +12,7 @@ import { PickersModalDialogSlotProps, } from '../../components/PickersModalDialog'; import { UsePickerParams } from '../usePicker'; -import { - BaseSingleInputFieldProps, - FieldSection, - PickerOwnerState, - PickerValidDate, -} from '../../../models'; +import { BaseSingleInputFieldProps, PickerOwnerState, PickerValidDate } from '../../../models'; import { ExportedPickersLayoutSlots, ExportedPickersLayoutSlotProps, @@ -29,7 +24,7 @@ import { DateOrTimeViewWithMeridiem } from '../../models'; export interface UseMobilePickerSlots extends PickersModalDialogSlots, - ExportedPickersLayoutSlots { + ExportedPickersLayoutSlots { /** * Component used to enter the date with the keyboard. */ @@ -45,14 +40,9 @@ export interface ExportedUseMobilePickerSlotProps< TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, > extends PickersModalDialogSlotProps, - ExportedPickersLayoutSlotProps { + ExportedPickersLayoutSlotProps { field?: SlotComponentPropsFromProps< - BaseSingleInputFieldProps< - PickerValidDate | null, - FieldSection, - TEnableAccessibleFieldDOMStructure, - unknown - >, + BaseSingleInputFieldProps, {}, PickerOwnerState >; @@ -63,7 +53,7 @@ export interface UseMobilePickerSlotProps< TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, > extends ExportedUseMobilePickerSlotProps, - Pick, 'toolbar'> {} + Pick, 'toolbar'> {} export interface MobileOnlyPickerProps extends BaseNonStaticPickerProps, @@ -76,7 +66,7 @@ export interface UseMobilePickerProps< TEnableAccessibleFieldDOMStructure extends boolean, TError, TExternalProps extends UsePickerViewsProps, -> extends BasePickerProps, +> extends BasePickerProps, MobileOnlyPickerProps { /** * Overridable component slots. @@ -100,7 +90,7 @@ export interface UseMobilePickerParams< TExternalProps >, > extends Pick< - UsePickerParams, + UsePickerParams, 'valueManager' | 'valueType' | 'validator' > { props: TExternalProps; 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 d9693d260b45..08fcf80e1c30 100644 --- a/packages/x-date-pickers/src/internals/hooks/usePicker/usePicker.ts +++ b/packages/x-date-pickers/src/internals/hooks/usePicker/usePicker.ts @@ -3,16 +3,15 @@ import { UsePickerParams, UsePickerProps, UsePickerResponse } from './usePicker. import { usePickerValue } from './usePickerValue'; import { usePickerViews } from './usePickerViews'; import { usePickerLayoutProps } from './usePickerLayoutProps'; -import { FieldSection, InferError } from '../../../models'; +import { InferError } from '../../../models'; import { DateOrTimeViewWithMeridiem } from '../../models'; import { usePickerOwnerState } from './usePickerOwnerState'; import { usePickerProvider } from './usePickerProvider'; export const usePicker = < - TValue, + TIsRange extends boolean, TView extends DateOrTimeViewWithMeridiem, - TSection extends FieldSection, - TExternalProps extends UsePickerProps, + TExternalProps extends UsePickerProps, TAdditionalProps extends {}, >({ props, @@ -25,10 +24,9 @@ export const usePicker = < rendererInterceptor, fieldRef, localeText, -}: UsePickerParams): UsePickerResponse< - TValue, +}: UsePickerParams): UsePickerResponse< + TIsRange, TView, - TSection, InferError > => { if (process.env.NODE_ENV !== 'production') { @@ -40,7 +38,7 @@ export const usePicker = < ]); } } - const pickerValueResponse = usePickerValue({ + const pickerValueResponse = usePickerValue({ props, valueManager, valueType, @@ -48,13 +46,7 @@ export const usePicker = < validator, }); - const pickerViewsResponse = usePickerViews< - TValue, - TView, - TSection, - TExternalProps, - TAdditionalProps - >({ + const pickerViewsResponse = usePickerViews({ props, additionalViewProps, autoFocusView, 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 7d10cee30cff..807204616ed3 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 } from '../../../models'; +import { PickerOwnerState } from '../../../models'; import { DateOrTimeViewWithMeridiem } from '../../models'; import { UsePickerProviderParameters, UsePickerProviderReturnValue } from './usePickerProvider'; @@ -19,51 +19,49 @@ import { UsePickerProviderParameters, UsePickerProviderReturnValue } from './use * Props common to all picker headless implementations. */ export interface UsePickerBaseProps< - TValue, + TIsRange extends boolean, TView extends DateOrTimeViewWithMeridiem, TError, - TExternalProps extends UsePickerViewsProps, + TExternalProps extends UsePickerViewsProps, TAdditionalProps extends {}, -> extends UsePickerValueBaseProps, - UsePickerViewsBaseProps, +> extends UsePickerValueBaseProps, + UsePickerViewsBaseProps, UsePickerLayoutProps {} export interface UsePickerProps< - TValue, + TIsRange extends boolean, TView extends DateOrTimeViewWithMeridiem, TError, - TExternalProps extends UsePickerViewsProps, + TExternalProps extends UsePickerViewsProps, TAdditionalProps extends {}, -> extends UsePickerValueProps, - UsePickerViewsProps, +> extends UsePickerValueProps, + UsePickerViewsProps, UsePickerLayoutProps {} export interface UsePickerParams< - TValue, + TIsRange extends boolean, 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'> { + Pick, 'localeText'> { props: TExternalProps; } export interface UsePickerResponse< - TValue, + TIsRange extends boolean, TView extends DateOrTimeViewWithMeridiem, - TSection extends FieldSection, TError, -> extends Omit, 'viewProps' | 'layoutProps'>, +> extends Omit, 'viewProps' | 'layoutProps'>, Omit, 'layoutProps'>, - UsePickerLayoutPropsResponse { + UsePickerLayoutPropsResponse { ownerState: PickerOwnerState; providerProps: UsePickerProviderReturnValue; } diff --git a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerLayoutProps.ts b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerLayoutProps.ts index f4084f8b3222..7b33e2fb2032 100644 --- a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerLayoutProps.ts +++ b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerLayoutProps.ts @@ -3,6 +3,7 @@ import { useIsLandscape } from '../useIsLandscape'; import { UsePickerValueLayoutResponse } from './usePickerValue.types'; import { UsePickerViewsLayoutResponse } from './usePickerViews'; import { DateOrTimeViewWithMeridiem, WrapperVariant } from '../../models/common'; +import { InferPickerValue } from '../../models'; /** * Props used to create the layout of the views. @@ -18,24 +19,30 @@ export interface UsePickerLayoutProps { } export interface UsePickerLayoutPropsResponseLayoutProps< - TValue, + TIsRange extends boolean, TView extends DateOrTimeViewWithMeridiem, -> extends UsePickerValueLayoutResponse, +> extends UsePickerValueLayoutResponse, UsePickerViewsLayoutResponse, UsePickerLayoutProps { isLandscape: boolean; isRtl: boolean; wrapperVariant: WrapperVariant; - isValid: (value: TValue) => boolean; + isValid: (value: InferPickerValue) => boolean; } -export interface UsePickerLayoutPropsResponse { - layoutProps: UsePickerLayoutPropsResponseLayoutProps; +export interface UsePickerLayoutPropsResponse< + TIsRange extends boolean, + TView extends DateOrTimeViewWithMeridiem, +> { + layoutProps: UsePickerLayoutPropsResponseLayoutProps; } -export interface UsePickerLayoutPropsParams { +export interface UsePickerLayoutPropsParams< + TIsRange extends boolean, + TView extends DateOrTimeViewWithMeridiem, +> { props: UsePickerLayoutProps; - propsFromPickerValue: UsePickerValueLayoutResponse; + propsFromPickerValue: UsePickerValueLayoutResponse; propsFromPickerViews: UsePickerViewsLayoutResponse; wrapperVariant: WrapperVariant; } @@ -43,17 +50,20 @@ export interface UsePickerLayoutPropsParams({ +export const usePickerLayoutProps = < + TIsRange extends boolean, + TView extends DateOrTimeViewWithMeridiem, +>({ props, propsFromPickerValue, propsFromPickerViews, wrapperVariant, -}: UsePickerLayoutPropsParams): UsePickerLayoutPropsResponse => { +}: UsePickerLayoutPropsParams): UsePickerLayoutPropsResponse => { const { orientation } = props; const isLandscape = useIsLandscape(propsFromPickerViews.views, orientation); const isRtl = useRtl(); - const layoutProps: UsePickerLayoutPropsResponseLayoutProps = { + const layoutProps: UsePickerLayoutPropsResponseLayoutProps = { ...propsFromPickerViews, ...propsFromPickerValue, isLandscape, 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 32da73815c61..5014acb9c999 100644 --- a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerOwnerState.ts +++ b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerOwnerState.ts @@ -1,17 +1,17 @@ import * as React from 'react'; -import { FieldSection, PickerOwnerState } from '../../../models'; +import { PickerOwnerState } from '../../../models'; import type { UsePickerProps } from './usePicker.types'; import { PickerValueManager, UsePickerValueResponse } from './usePickerValue.types'; import { useUtils } from '../useUtils'; -interface UsePickerOwnerStateParameters { - props: UsePickerProps; - pickerValueResponse: UsePickerValueResponse; - valueManager: PickerValueManager; +interface UsePickerOwnerStateParameters { + props: UsePickerProps; + pickerValueResponse: UsePickerValueResponse; + valueManager: PickerValueManager; } -export function usePickerOwnerState( - parameters: UsePickerOwnerStateParameters, +export function usePickerOwnerState( + parameters: UsePickerOwnerStateParameters, ): PickerOwnerState { const { props, pickerValueResponse, valueManager } = parameters; diff --git a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerProvider.ts b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerProvider.ts index e3bec5e1b8e1..2d3a83e6d02c 100644 --- a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerProvider.ts +++ b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerProvider.ts @@ -1,5 +1,5 @@ import * as React from 'react'; -import { FieldSection, PickerOwnerState } from '../../../models'; +import { PickerOwnerState } from '../../../models'; import { UsePickerValueResponse } from './usePickerValue.types'; import { PickersProviderProps, @@ -7,16 +7,16 @@ import { PickersPrivateContextValue, } from '../../components/PickersProvider'; -export interface UsePickerProviderParameters +export interface UsePickerProviderParameters extends Pick { - pickerValueResponse: UsePickerValueResponse; + pickerValueResponse: UsePickerValueResponse; ownerState: PickerOwnerState; } export interface UsePickerProviderReturnValue extends Omit {} -export function usePickerProvider( - parameters: UsePickerProviderParameters, +export function usePickerProvider( + parameters: UsePickerProviderParameters, ): UsePickerProviderReturnValue { const { pickerValueResponse, ownerState, localeText } = parameters; 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 f24d9e11a718..0853a147a7e3 100644 --- a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerValue.ts +++ b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerValue.ts @@ -4,7 +4,7 @@ import { useOpenState } from '../useOpenState'; import { useLocalizationContext, useUtils } from '../useUtils'; import { FieldChangeHandlerContext } from '../useField'; import { useValidation } from '../../../validation'; -import { FieldSection, PickerChangeHandlerContext, InferError } from '../../../models'; +import { PickerChangeHandlerContext, InferError } from '../../../models'; import { PickerShortcutChangeImportance, PickersShortcutsItemContext, @@ -23,13 +23,14 @@ import { PickerValueUpdaterParams, } from './usePickerValue.types'; import { useValueWithTimezone } from '../useValueWithTimezone'; +import { InferPickerValue } from '../../models'; /** * Decide if the new value should be published * The published value will be passed to `onChange` if defined. */ -const shouldPublishValue = ( - params: PickerValueUpdaterParams, +const shouldPublishValue = ( + params: PickerValueUpdaterParams, ): boolean => { const { action, hasChanged, dateState, isControlled } = params; @@ -81,8 +82,8 @@ const shouldPublishValue = ( * The committed value will be passed to `onAccept` if defined. * It will also be used as a reset target when calling the `cancel` picker action (when clicking on the "Cancel" button). */ -const shouldCommitValue = ( - params: PickerValueUpdaterParams, +const shouldCommitValue = ( + params: PickerValueUpdaterParams, ): boolean => { const { action, hasChanged, dateState, isControlled, closeOnSelect } = params; @@ -121,8 +122,8 @@ const shouldCommitValue = ( /** * Decide if the picker should be closed after the value is updated. */ -const shouldClosePicker = ( - params: PickerValueUpdaterParams, +const shouldClosePicker = ( + params: PickerValueUpdaterParams, ): boolean => { const { action, closeOnSelect } = params; @@ -145,18 +146,16 @@ const shouldClosePicker = ( * Manage the value lifecycle of all the pickers. */ export const usePickerValue = < - TValue, - TSection extends FieldSection, - TExternalProps extends UsePickerValueProps, + TIsRange extends boolean, + TExternalProps extends UsePickerValueProps, >({ props, valueManager, valueType, wrapperVariant, validator, -}: UsePickerValueParams): UsePickerValueResponse< - TValue, - TSection, +}: UsePickerValueParams): UsePickerValueResponse< + TIsRange, InferError > => { type TError = InferError; @@ -221,8 +220,8 @@ export const usePickerValue = < valueManager, }); - const [dateState, setDateState] = React.useState>(() => { - let initialValue: TValue; + const [dateState, setDateState] = React.useState>(() => { + let initialValue: InferPickerValue; if (inValueWithTimezoneToRender !== undefined) { initialValue = inValueWithTimezoneToRender; } else if (defaultValue !== undefined) { @@ -248,8 +247,8 @@ export const usePickerValue = < onError: props.onError, }); - const updateDate = useEventCallback((action: PickerValueUpdateAction) => { - const updaterParams: PickerValueUpdaterParams = { + const updateDate = useEventCallback((action: PickerValueUpdateAction) => { + const updaterParams: PickerValueUpdaterParams = { action, dateState, hasChanged: (comparison) => !valueManager.areValuesEqual(utils, action.value, comparison), @@ -382,13 +381,13 @@ export const usePickerValue = < }); const handleChange = useEventCallback( - (newValue: TValue, selectionState: PickerSelectionState = 'partial') => + (newValue: InferPickerValue, selectionState: PickerSelectionState = 'partial') => updateDate({ name: 'setValueFromView', value: newValue, selectionState }), ); const handleSelectShortcut = useEventCallback( ( - newValue: TValue, + newValue: InferPickerValue, changeImportance: PickerShortcutChangeImportance, shortcut: PickersShortcutsItemContext, ) => @@ -401,7 +400,7 @@ export const usePickerValue = < ); const handleChangeFromField = useEventCallback( - (newValue: TValue, context: FieldChangeHandlerContext) => + (newValue: InferPickerValue, context: FieldChangeHandlerContext) => updateDate({ name: 'setValueFromField', value: newValue, context }), ); @@ -415,7 +414,7 @@ export const usePickerValue = < onClose: handleClose, }; - const fieldResponse: UsePickerValueFieldResponse = { + const fieldResponse: UsePickerValueFieldResponse = { value: dateState.draft, onChange: handleChangeFromField, }; @@ -425,14 +424,14 @@ export const usePickerValue = < [utils, valueManager, dateState.draft], ); - const viewResponse: UsePickerValueViewsResponse = { + const viewResponse: UsePickerValueViewsResponse = { value: viewValue, onChange: handleChange, onClose: handleClose, open: isOpen, }; - const isValid = (testedValue: TValue) => { + const isValid = (testedValue: InferPickerValue) => { const error = validator({ adapter, value: testedValue, @@ -443,7 +442,7 @@ export const usePickerValue = < return !valueManager.hasError(error); }; - const layoutResponse: UsePickerValueLayoutResponse = { + const layoutResponse: UsePickerValueLayoutResponse = { ...actions, value: viewValue, onChange: handleChange, 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 d78af26b4c96..4ff3bac4a343 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 @@ -2,7 +2,6 @@ import { FieldChangeHandlerContext, UseFieldInternalProps } from '../useField'; import { Validator } from '../../../validation'; import { WrapperVariant } from '../../models/common'; import { - FieldSection, FieldValueType, TimezoneProps, MuiPickersAdapter, @@ -17,73 +16,85 @@ import { PickerShortcutChangeImportance, PickersShortcutsItemContext, } from '../../../PickersShortcuts'; +import { InferNonNullablePickerValue, InferPickerValue } from '../../models'; -export interface PickerValueManager { +export interface PickerValueManager { /** * Determines if two values are equal. - * @template TValue + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @param {MuiPickersAdapter} utils The adapter. - * @param {TValue} valueLeft The first value to compare. - * @param {TValue} valueRight The second value to compare. + * @param {InferPickerValue} valueLeft The first value to compare. + * @param {InferPickerValue} 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: InferPickerValue, + valueRight: InferPickerValue, + ) => boolean; /** * Value to set when clicking the "Clear" button. */ - emptyValue: TValue; + emptyValue: InferPickerValue; /** * Method returning the value to set when clicking the "Today" button - * @template TValue + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @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. + * @returns {InferPickerValue} The value to set when clicking the "Today" button. */ getTodayValue: ( utils: MuiPickersAdapter, timezone: PickersTimezone, valueType: FieldValueType, - ) => TValue; + ) => InferPickerValue; /** - * @template TValue + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * Method returning the reference value to use when mounting the component. * @param {object} params The params of the method. * @param {PickerValidDate | undefined} params.referenceDate The referenceDate provided by the user. - * @param {TValue} params.value The value provided by the user. + * @param {InferPickerValue} 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 {number} params.granularity The granularity of the selection possible on this component. * @param {PickersTimezone} params.timezone The current timezone. * @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. + * @returns {InferPickerValue} The reference value to use for non-provided dates. */ getInitialReferenceValue: (params: { referenceDate: PickerValidDate | undefined; - value: TValue; + value: InferPickerValue; props: GetDefaultReferenceDateProps; utils: MuiPickersAdapter; granularity: number; timezone: PickersTimezone; getTodayDate?: () => PickerValidDate; - }) => TValue; + }) => InferNonNullablePickerValue; /** * Method parsing the input value to replace all invalid dates by `null`. - * @template TValue + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @param {MuiPickersAdapter} utils The adapter. - * @param {TValue} value The value to parse. - * @returns {TValue} The value without invalid date. + * @param {InferPickerValue} value The value to parse. + * @returns {InferPickerValue} The value without invalid date. */ - cleanValue: (utils: MuiPickersAdapter, value: TValue) => TValue; + cleanValue: ( + utils: MuiPickersAdapter, + value: InferPickerValue, + ) => InferPickerValue; /** * Generates the new value, given the previous value and the new proposed value. - * @template TValue + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @param {MuiPickersAdapter} utils The adapter. - * @param {TValue} lastValidDateValue The last valid value. - * @param {TValue} value The proposed value. - * @returns {TValue} The new value. + * @param {InferPickerValue} lastValidDateValue The last valid value. + * @param {InferPickerValue} value The proposed value. + * @returns {InferPickerValue} The new value. */ - valueReducer?: (utils: MuiPickersAdapter, lastValidDateValue: TValue, value: TValue) => TValue; + valueReducer?: ( + utils: MuiPickersAdapter, + lastValidDateValue: InferPickerValue, + value: InferPickerValue, + ) => InferPickerValue; /** * Compare two errors to know if they are equal. * @template TError @@ -106,46 +117,50 @@ export interface PickerValueManager { /** * Return the timezone of the date inside a value. * Throw an error on range picker if both values don't have the same timezone. - @template TValue + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. @param {MuiPickersAdapter} utils The utils to manipulate the date. - @param {TValue} value The current value. + @param {InferPickerValue} value The current value. @returns {string | null} The timezone of the current value. */ - getTimezone: (utils: MuiPickersAdapter, value: TValue) => string | null; + getTimezone: (utils: MuiPickersAdapter, value: InferPickerValue) => string | null; /** * Change the timezone of the dates inside a value. - @template TValue + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. @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. + @param {InferPickerValue} value The value to convert. + @returns {InferPickerValue} The value with the new dates in the new timezone. */ - setTimezone: (utils: MuiPickersAdapter, timezone: PickersTimezone, value: TValue) => TValue; + setTimezone: ( + utils: MuiPickersAdapter, + timezone: PickersTimezone, + value: InferPickerValue, + ) => InferPickerValue; } export type PickerSelectionState = 'partial' | 'shallow' | 'finish'; -export interface UsePickerValueState { +export interface UsePickerValueState { /** * Date displayed on the views and the field. * It is updated whenever the user modifies something. */ - draft: TValue; + draft: InferPickerValue; /** * Last value published (e.g: the last value for which `shouldPublishValue` returned `true`). * If `onChange` is defined, it's the value that was passed on the last call to this callback. */ - lastPublishedValue: TValue; + lastPublishedValue: InferPickerValue; /** * Last value committed (e.g: the last value for which `shouldCommitValue` returned `true`). * If `onAccept` is defined, it's the value that was passed on the last call to this callback. */ - lastCommittedValue: TValue; + lastCommittedValue: InferPickerValue; /** * Last value passed with `props.value`. * Used to update the `draft` value whenever the `value` prop changes. */ - lastControlledValue: TValue | undefined; + lastControlledValue: InferPickerValue | undefined; /** * If we never modified the value since the mount of the component, * Then we might want to apply some custom logic. @@ -156,39 +171,39 @@ export interface UsePickerValueState { hasBeenModifiedSinceMount: boolean; } -export interface PickerValueUpdaterParams { - action: PickerValueUpdateAction; - dateState: UsePickerValueState; +export interface PickerValueUpdaterParams { + action: PickerValueUpdateAction; + dateState: UsePickerValueState; /** * Check if the new draft value has changed compared to some given value. - * @template TValue - * @param {TValue} comparisonValue The value to compare the new draft value with. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @param {InferPickerValue} comparisonValue The value to compare the new draft value with. * @returns {boolean} `true` if the new draft value is equal to the comparison value. */ - hasChanged: (comparisonValue: TValue) => boolean; + hasChanged: (comparisonValue: InferPickerValue) => boolean; isControlled: boolean; closeOnSelect: boolean; } -export type PickerValueUpdateAction = +export type PickerValueUpdateAction = | { name: 'setValueFromView'; - value: TValue; + value: InferPickerValue; selectionState: PickerSelectionState; } | { name: 'setValueFromField'; - value: TValue; + value: InferPickerValue; context: FieldChangeHandlerContext; } | { name: 'setValueFromAction'; - value: TValue; + value: InferPickerValue; pickerAction: 'accept' | 'today' | 'cancel' | 'dismiss' | 'clear'; } | { name: 'setValueFromShortcut'; - value: TValue; + value: InferPickerValue; changeImportance: PickerShortcutChangeImportance; shortcut: PickersShortcutsItemContext; }; @@ -196,33 +211,40 @@ export type PickerValueUpdateAction = /** * Props used to handle the value that are common to all pickers. */ -export interface UsePickerValueBaseProps extends OnErrorProps { +export interface UsePickerValueBaseProps + extends OnErrorProps { /** * The selected value. * Used when the component is controlled. */ - value?: TValue; + value?: InferPickerValue; /** * The default value. * Used when the component is not controlled. */ - defaultValue?: TValue; + defaultValue?: InferPickerValue; /** * 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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @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 {TValue} value The new value. + * @param {InferPickerValue} value The new value. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ - onChange?: (value: TValue, context: PickerChangeHandlerContext) => void; + onChange?: ( + value: InferPickerValue, + context: PickerChangeHandlerContext, + ) => void; /** * Callback fired when the value is accepted. - * @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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @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 {TValue} value The value that was just accepted. + * @param {InferPickerValue} value The value that was just accepted. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ - onAccept?: (value: TValue, context: PickerChangeHandlerContext) => void; + onAccept?: ( + value: InferPickerValue, + context: PickerChangeHandlerContext, + ) => void; } /** @@ -254,20 +276,20 @@ export interface UsePickerValueNonStaticProps { /** * Props used to handle the value of the pickers. */ -export interface UsePickerValueProps - extends UsePickerValueBaseProps, +export interface UsePickerValueProps + extends UsePickerValueBaseProps, UsePickerValueNonStaticProps, TimezoneProps {} export interface UsePickerValueParams< - TValue, - TExternalProps extends UsePickerValueProps, + TIsRange extends boolean, + TExternalProps extends UsePickerValueProps, > { props: TExternalProps; - valueManager: PickerValueManager>; + valueManager: PickerValueManager>; valueType: FieldValueType; wrapperVariant: WrapperVariant; - validator: Validator, TExternalProps>; + validator: Validator, TExternalProps>; } export interface UsePickerValueActions { @@ -280,16 +302,16 @@ export interface UsePickerValueActions { onClose: (event?: React.UIEvent) => void; } -export type UsePickerValueFieldResponse = Required< - Pick, 'value' | 'onChange'> +export type UsePickerValueFieldResponse = Required< + Pick, 'value' | 'onChange'> >; /** * Props passed to `usePickerViews`. */ -export interface UsePickerValueViewsResponse { - value: TValue; - onChange: (value: TValue, selectionState?: PickerSelectionState) => void; +export interface UsePickerValueViewsResponse { + value: InferPickerValue; + onChange: (value: InferPickerValue, selectionState?: PickerSelectionState) => void; open: boolean; onClose: (event?: React.MouseEvent) => void; } @@ -297,21 +319,22 @@ export interface UsePickerValueViewsResponse { /** * Props passed to `usePickerLayoutProps`. */ -export interface UsePickerValueLayoutResponse extends UsePickerValueActions { - value: TValue; - onChange: (newValue: TValue) => void; +export interface UsePickerValueLayoutResponse + extends UsePickerValueActions { + value: InferPickerValue; + onChange: (newValue: InferPickerValue) => void; onSelectShortcut: ( - newValue: TValue, + newValue: InferPickerValue, changeImportance: PickerShortcutChangeImportance, shortcut: PickersShortcutsItemContext, ) => void; - isValid: (value: TValue) => boolean; + isValid: (value: InferPickerValue) => boolean; } -export interface UsePickerValueResponse { +export interface UsePickerValueResponse { open: boolean; actions: UsePickerValueActions; - viewProps: UsePickerValueViewsResponse; - fieldProps: UsePickerValueFieldResponse; - layoutProps: UsePickerValueLayoutResponse; + viewProps: UsePickerValueViewsResponse; + fieldProps: UsePickerValueFieldResponse; + layoutProps: UsePickerValueLayoutResponse; } 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 44c47ddc696d..c3c841d5f3d9 100644 --- a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerViews.ts +++ b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerViews.ts @@ -7,19 +7,19 @@ import { useViews, UseViewsOptions } from '../useViews'; import type { UsePickerValueViewsResponse } from './usePickerValue.types'; import { isTimeView } from '../../utils/time-utils'; import { DateOrTimeViewWithMeridiem } from '../../models'; -import { FieldRef, FieldSection, PickerValidDate, TimezoneProps } from '../../../models'; +import { FieldRef, PickerValidDate, TimezoneProps } from '../../../models'; interface PickerViewsRendererBaseExternalProps extends Omit, 'openTo' | 'viewRenderers'> {} export type PickerViewsRendererProps< - TValue, + TIsRange extends boolean, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends PickerViewsRendererBaseExternalProps, TAdditionalProps extends {}, > = Omit & TAdditionalProps & - UsePickerValueViewsResponse & { + UsePickerValueViewsResponse & { view: TView; views: readonly TView[]; focusedView: TView | null; @@ -29,30 +29,30 @@ export type PickerViewsRendererProps< }; export type PickerViewRenderer< - TValue, + TIsRange extends boolean, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends PickerViewsRendererBaseExternalProps, TAdditionalProps extends {}, > = ( - props: PickerViewsRendererProps, + props: PickerViewsRendererProps, ) => React.ReactNode; export type PickerViewRendererLookup< - TValue, + TIsRange extends boolean, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends PickerViewsRendererBaseExternalProps, TAdditionalProps extends {}, > = { - [K in TView]: PickerViewRenderer | null; + [K in TView]: PickerViewRenderer | null; }; /** * Props used to handle the views that are common to all pickers. */ export interface UsePickerViewsBaseProps< - TValue, + TIsRange extends boolean, TView extends DateOrTimeViewWithMeridiem, - TExternalProps extends UsePickerViewsProps, + TExternalProps extends UsePickerViewsProps, TAdditionalProps extends {}, > extends Omit, 'onChange' | 'onFocusedViewChange' | 'focusedView'>, TimezoneProps { @@ -65,7 +65,7 @@ export interface UsePickerViewsBaseProps< * If `null`, the section will only have field editing. * If `undefined`, internally defined view will be used. */ - viewRenderers: PickerViewRendererLookup; + viewRenderers: PickerViewRendererLookup; /** * If `true`, disable heavy animations. * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13 @@ -93,39 +93,38 @@ export interface UsePickerViewsNonStaticProps { * Props used to handle the value of the pickers. */ export interface UsePickerViewsProps< - TValue, + TIsRange extends boolean, TView extends DateOrTimeViewWithMeridiem, - TExternalProps extends UsePickerViewsProps, + TExternalProps extends UsePickerViewsProps, TAdditionalProps extends {}, -> extends UsePickerViewsBaseProps { +> extends UsePickerViewsBaseProps { className?: string; sx?: SxProps; } export interface UsePickerViewParams< - TValue, + TIsRange extends boolean, TView extends DateOrTimeViewWithMeridiem, - TSection extends FieldSection, - TExternalProps extends UsePickerViewsProps, + TExternalProps extends UsePickerViewsProps, TAdditionalProps extends {}, > { props: TExternalProps; - propsFromPickerValue: UsePickerValueViewsResponse; + propsFromPickerValue: UsePickerValueViewsResponse; additionalViewProps: TAdditionalProps; autoFocusView: boolean; - fieldRef: React.RefObject> | undefined; + fieldRef: React.RefObject> | undefined; /** * A function that intercepts the regular picker rendering. * Can be used to consume the provided `viewRenderers` and render a custom component wrapping them. - * @param {PickerViewRendererLookup} viewRenderers The `viewRenderers` that were provided to the picker component. + * @param {PickerViewRendererLookup} viewRenderers The `viewRenderers` that were provided to the picker component. * @param {TView} popperView The current picker view. * @param {any} rendererProps All the props that are being passed down to the renderer. * @returns {React.ReactNode} A React node that will be rendered instead of the default renderer. */ rendererInterceptor?: ( - viewRenderers: PickerViewRendererLookup, + viewRenderers: PickerViewRendererLookup, popperView: TView, - rendererProps: PickerViewsRendererProps, + rendererProps: PickerViewsRendererProps, ) => React.ReactNode; } @@ -152,10 +151,9 @@ export interface UsePickerViewsLayoutResponse, + TExternalProps extends UsePickerViewsProps, TAdditionalProps extends {}, >({ props, @@ -165,9 +163,8 @@ export const usePickerViews = < rendererInterceptor, fieldRef, }: UsePickerViewParams< - TValue, + TIsRange, TView, - TSection, TExternalProps, TAdditionalProps >): UsePickerViewsResponse => { @@ -290,7 +287,7 @@ export const usePickerViews = < } const rendererProps: PickerViewsRendererProps< - TValue, + TIsRange, TView, TExternalProps, TAdditionalProps 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 38dc4787f8d1..da4300cdfce6 100644 --- a/packages/x-date-pickers/src/internals/hooks/useStaticPicker/useStaticPicker.tsx +++ b/packages/x-date-pickers/src/internals/hooks/useStaticPicker/useStaticPicker.tsx @@ -6,7 +6,6 @@ import { usePicker } from '../usePicker'; import { PickersProvider } from '../../components/PickersProvider'; import { PickersLayout } from '../../../PickersLayout'; import { DIALOG_WIDTH } from '../../constants/dimensions'; -import { FieldSection, PickerValidDate } from '../../../models'; import { DateOrTimeViewWithMeridiem } from '../../models'; const PickerStaticLayout = styled(PickersLayout)(({ theme }) => ({ @@ -32,9 +31,8 @@ export const useStaticPicker = < const { localeText, slots, slotProps, className, sx, displayStaticWrapperAs, autoFocus } = props; const { layoutProps, providerProps, renderCurrentView } = usePicker< - PickerValidDate | null, + false, 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 0b2af3ccd50d..a72efbd8592e 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 @@ -6,14 +6,13 @@ import { import { BasePickerProps } from '../../models/props/basePickerProps'; import { UsePickerParams } from '../usePicker'; import { UsePickerViewsProps } from '../usePicker/usePickerViews'; -import { FieldSection, PickerValidDate } from '../../../models'; import { DateOrTimeViewWithMeridiem } from '../../models'; export interface UseStaticPickerSlots - extends ExportedPickersLayoutSlots {} + extends ExportedPickersLayoutSlots {} export interface UseStaticPickerSlotProps - extends ExportedPickersLayoutSlotProps {} + extends ExportedPickersLayoutSlotProps {} export interface StaticOnlyPickerProps { /** @@ -37,8 +36,8 @@ export interface StaticOnlyPickerProps { export interface UseStaticPickerProps< TView extends DateOrTimeViewWithMeridiem, TError, - TExternalProps extends UsePickerViewsProps, -> extends BasePickerProps, + TExternalProps extends UsePickerViewsProps, +> extends BasePickerProps, StaticOnlyPickerProps { /** * Overridable component slots. @@ -56,7 +55,7 @@ export interface UseStaticPickerParams< TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseStaticPickerProps, > extends Pick< - UsePickerParams, + UsePickerParams, 'valueManager' | 'valueType' | 'validator' > { props: TExternalProps; diff --git a/packages/x-date-pickers/src/internals/hooks/useValueWithTimezone.ts b/packages/x-date-pickers/src/internals/hooks/useValueWithTimezone.ts index f16b6f51410d..a0ef4482a46f 100644 --- a/packages/x-date-pickers/src/internals/hooks/useValueWithTimezone.ts +++ b/packages/x-date-pickers/src/internals/hooks/useValueWithTimezone.ts @@ -4,13 +4,17 @@ import useControlled from '@mui/utils/useControlled'; import { useUtils } from './useUtils'; import type { PickerValueManager } from './usePicker'; import { PickersTimezone } from '../../models'; +import { InferPickerValue } 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 = void>({ +export const useValueWithTimezone = < + TIsRange extends boolean, + TChange extends (...params: any[]) => void, +>({ timezone: timezoneProp, value: valueProp, defaultValue, @@ -18,10 +22,10 @@ export const useValueWithTimezone = | undefined; + defaultValue: InferPickerValue | undefined; onChange: TChange | undefined; - valueManager: PickerValueManager; + valueManager: PickerValueManager; }) => { const utils = useUtils(); @@ -33,7 +37,7 @@ export const useValueWithTimezone = { + const setInputTimezone = useEventCallback((newValue: InferPickerValue) => { if (inputTimezone == null) { return newValue; } @@ -48,10 +52,12 @@ export const useValueWithTimezone = { - const newValueWithInputTimezone = setInputTimezone(newValue); - onChange?.(newValueWithInputTimezone, ...otherParams); - }) as TChange; + const handleValueChange = useEventCallback( + (newValue: InferPickerValue, ...otherParams: any[]) => { + const newValueWithInputTimezone = setInputTimezone(newValue); + onChange?.(newValueWithInputTimezone, ...otherParams); + }, + ) as TChange; return { value: valueWithTimezoneToRender, handleValueChange, timezone: timezoneToRender }; }; @@ -59,7 +65,10 @@ export const useValueWithTimezone = void>({ +export const useControlledValueWithTimezone = < + TIsRange extends boolean, + TChange extends (...params: any[]) => void, +>({ name, timezone: timezoneProp, value: valueProp, @@ -69,10 +78,10 @@ export const useControlledValueWithTimezone = | undefined; + defaultValue: InferPickerValue | undefined; onChange: TChange | undefined; - valueManager: PickerValueManager; + valueManager: PickerValueManager; }) => { const [valueWithInputTimezone, setValue] = useControlled({ name, @@ -81,10 +90,12 @@ export const useControlledValueWithTimezone = { - setValue(newValue); - onChangeProp?.(newValue, ...otherParams); - }) as TChange; + const onChange = useEventCallback( + (newValue: InferPickerValue, ...otherParams: any[]) => { + setValue(newValue); + onChangeProp?.(newValue, ...otherParams); + }, + ) as TChange; return useValueWithTimezone({ timezone: timezoneProp, diff --git a/packages/x-date-pickers/src/internals/hooks/useViews.tsx b/packages/x-date-pickers/src/internals/hooks/useViews.tsx index cf72cc620f30..a493cc36553c 100644 --- a/packages/x-date-pickers/src/internals/hooks/useViews.tsx +++ b/packages/x-date-pickers/src/internals/hooks/useViews.tsx @@ -3,7 +3,7 @@ import useEventCallback from '@mui/utils/useEventCallback'; import useControlled from '@mui/utils/useControlled'; import { MakeOptional } from '@mui/x-internals/types'; import type { PickerSelectionState } from './usePicker'; -import { DateOrTimeViewWithMeridiem } from '../models'; +import { DateOrTimeViewWithMeridiem, InferPickerValue } from '../models'; import { PickerValidDate } from '../../models'; export type PickerOnChangeFn = ( @@ -11,16 +11,23 @@ export type PickerOnChangeFn = ( selectionState?: PickerSelectionState, ) => void; -export interface UseViewsOptions { +export interface UseViewsOptions< + TIsRange extends boolean, + TView extends DateOrTimeViewWithMeridiem, +> { /** * 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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @template TView The view type. Will be one of date or time views. - * @param {TValue} value The new value. + * @param {InferPickerValue} value The new value. * @param {PickerSelectionState | undefined} selectionState Indicates if the date selection is complete. * @param {TView | undefined} selectedView Indicates the view in which the selection has been made. */ - onChange: (value: TValue, selectionState?: PickerSelectionState, selectedView?: TView) => void; + onChange: ( + value: InferPickerValue, + selectionState?: PickerSelectionState, + selectedView?: TView, + ) => void; /** * Callback fired on view change. * @template TView @@ -63,12 +70,14 @@ export interface UseViewsOptions void; } -export interface ExportedUseViewsOptions - extends MakeOptional, 'onChange' | 'openTo' | 'views'> {} +export interface ExportedUseViewsOptions< + TIsRange extends boolean, + TView extends DateOrTimeViewWithMeridiem, +> extends MakeOptional, 'onChange' | 'openTo' | 'views'> {} let warnedOnceNotValidView = false; -interface UseViewsResponse { +interface UseViewsResponse { view: TView; setView: (view: TView) => void; focusedView: TView | null; @@ -78,13 +87,13 @@ interface UseViewsResponse { defaultView: TView; goToNextView: () => void; setValueAndGoToNextView: ( - value: TValue, + value: InferPickerValue, currentViewSelectionState?: PickerSelectionState, selectedView?: TView, ) => void; } -export function useViews({ +export function useViews({ onChange, onViewChange, openTo, @@ -93,7 +102,7 @@ export function useViews({ autoFocus, focusedView: inFocusedView, onFocusedViewChange, -}: UseViewsOptions): UseViewsResponse { +}: UseViewsOptions): UseViewsResponse { if (process.env.NODE_ENV !== 'production') { if (!warnedOnceNotValidView) { if (inView != null && !views.includes(inView)) { @@ -182,7 +191,11 @@ export function useViews({ }); const setValueAndGoToNextView = useEventCallback( - (value: TValue, currentViewSelectionState?: PickerSelectionState, selectedView?: TView) => { + ( + value: InferPickerValue, + currentViewSelectionState?: PickerSelectionState, + selectedView?: TView, + ) => { const isSelectionFinishedOnCurrentView = currentViewSelectionState === 'finish'; const hasMoreViews = selectedView ? // handles case like `DateTimePicker`, where a view might return a `finish` selection state diff --git a/packages/x-date-pickers/src/internals/index.ts b/packages/x-date-pickers/src/internals/index.ts index 11a6e4657b7f..714b239bbcc3 100644 --- a/packages/x-date-pickers/src/internals/index.ts +++ b/packages/x-date-pickers/src/internals/index.ts @@ -96,6 +96,7 @@ export { useViews } from './hooks/useViews'; export { usePreviousMonthDisabled, useNextMonthDisabled } from './hooks/date-helpers-hooks'; export type { BaseFieldProps } from './models/fields'; +export type { RangePosition } from './models/pickers'; export type { BasePickerProps, BasePickerInputProps, @@ -118,7 +119,12 @@ export type { DayValidationProps, DateTimeValidationProps, } from './models/validation'; -export type { PickerRangeValue } from './models/value'; +export type { + PickerRangeValue, + PickerNonNullableRangeValue, + InferPickerValue, + InferNonNullablePickerValue, +} 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 f31216d2f8c7..cd3de4f99ba2 100644 --- a/packages/x-date-pickers/src/internals/models/fields.ts +++ b/packages/x-date-pickers/src/internals/models/fields.ts @@ -1,15 +1,14 @@ import * as React from 'react'; import type { UseFieldInternalProps } from '../hooks/useField'; -import { FieldSection, PickerOwnerState } from '../../models'; +import { PickerOwnerState } from '../../models'; import type { ExportedUseClearableFieldProps } from '../../hooks/useClearableField'; export interface BaseFieldProps< - TValue, - TSection extends FieldSection, + TIsRange extends boolean, TEnableAccessibleFieldDOMStructure extends boolean, TError, > extends Omit< - UseFieldInternalProps, + UseFieldInternalProps, 'format' >, ExportedUseClearableFieldProps { diff --git a/packages/x-date-pickers/src/internals/models/pickers.ts b/packages/x-date-pickers/src/internals/models/pickers.ts new file mode 100644 index 000000000000..ff214a929bb7 --- /dev/null +++ b/packages/x-date-pickers/src/internals/models/pickers.ts @@ -0,0 +1 @@ +export type RangePosition = 'start' | 'end'; 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 c271a5322988..1a72e6c59ba2 100644 --- a/packages/x-date-pickers/src/internals/models/props/basePickerProps.tsx +++ b/packages/x-date-pickers/src/internals/models/props/basePickerProps.tsx @@ -12,12 +12,12 @@ import { UseFieldInternalProps } from '../../hooks/useField'; * Props common to all pickers after applying the default props on each picker. */ export interface BasePickerProps< - TValue, + TIsRange extends boolean, 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. @@ -33,9 +33,12 @@ export interface BasePickerProps< /** * Props common to all pickers before applying the default props on each picker. */ -export interface BasePickerInputProps - extends Omit< - MakeOptional, 'openTo' | 'views'>, +export interface BasePickerInputProps< + TIsRange extends boolean, + TView extends DateOrTimeViewWithMeridiem, + TError, +> extends Omit< + MakeOptional, 'openTo' | 'views'>, 'viewRenderers' > {} @@ -46,7 +49,7 @@ export interface BasePickerInputProps, + 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 2d30d90a4704..c08d8c8ecfcf 100644 --- a/packages/x-date-pickers/src/internals/models/props/time.ts +++ b/packages/x-date-pickers/src/internals/models/props/time.ts @@ -20,7 +20,7 @@ export interface ExportedBaseClockProps AmPmProps {} export interface BaseClockProps - extends ExportedUseViewsOptions, + extends ExportedUseViewsOptions, ExportedBaseClockProps { className?: string; /** diff --git a/packages/x-date-pickers/src/internals/models/props/toolbar.ts b/packages/x-date-pickers/src/internals/models/props/toolbar.ts index e4791d572f7c..7bf8221f28a1 100644 --- a/packages/x-date-pickers/src/internals/models/props/toolbar.ts +++ b/packages/x-date-pickers/src/internals/models/props/toolbar.ts @@ -2,12 +2,15 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; import { Theme } from '@mui/material/styles'; import { DateOrTimeViewWithMeridiem } from '../common'; +import { InferPickerValue } from '../value'; -export interface BaseToolbarProps - extends ExportedBaseToolbarProps { +export interface BaseToolbarProps< + TIsRange extends boolean, + TView extends DateOrTimeViewWithMeridiem, +> extends ExportedBaseToolbarProps { isLandscape: boolean; - onChange: (newValue: TValue) => void; - value: TValue; + onChange: (newValue: InferPickerValue) => void; + value: InferPickerValue; /** * Currently visible picker view. */ diff --git a/packages/x-date-pickers/src/internals/models/value.ts b/packages/x-date-pickers/src/internals/models/value.ts index 7429c2df5c39..371c126d3c76 100644 --- a/packages/x-date-pickers/src/internals/models/value.ts +++ b/packages/x-date-pickers/src/internals/models/value.ts @@ -3,3 +3,17 @@ import { PickerValidDate } from '../../models/pickers'; export type PickerValue = PickerValidDate | null; export type PickerRangeValue = [PickerValidDate | null, PickerValidDate | null]; + +export type PickerNonNullableRangeValue = [PickerValidDate, PickerValidDate]; + +export type InferPickerValue = TIsRange extends true + ? TIsRange extends false + ? PickerValue | PickerRangeValue + : PickerRangeValue + : PickerValue; + +export type InferNonNullablePickerValue = TIsRange extends true + ? TIsRange extends false + ? PickerValidDate | PickerNonNullableRangeValue + : PickerNonNullableRangeValue + : PickerValidDate; 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 08c294e0bc23..b99c46a3948a 100644 --- a/packages/x-date-pickers/src/internals/utils/date-utils.ts +++ b/packages/x-date-pickers/src/internals/utils/date-utils.ts @@ -110,7 +110,11 @@ export const applyDefaultDate = ( return value; }; -export const areDatesEqual = (utils: MuiPickersAdapter, a: PickerValidDate, b: PickerValidDate) => { +export const areDatesEqual = ( + utils: MuiPickersAdapter, + a: PickerValidDate | null, + b: PickerValidDate | null, +) => { if (!utils.isValid(a) && a != null && !utils.isValid(b) && b != null) { return true; } diff --git a/packages/x-date-pickers/src/internals/utils/valueManagers.ts b/packages/x-date-pickers/src/internals/utils/valueManagers.ts index 3e507fe925c1..5c476694b18a 100644 --- a/packages/x-date-pickers/src/internals/utils/valueManagers.ts +++ b/packages/x-date-pickers/src/internals/utils/valueManagers.ts @@ -1,10 +1,5 @@ import type { PickerValueManager } from '../hooks/usePicker'; -import { - DateValidationError, - TimeValidationError, - DateTimeValidationError, - FieldSection, -} from '../../models'; +import { DateValidationError, TimeValidationError, DateTimeValidationError } from '../../models'; import type { FieldValueManager } from '../hooks/useField'; import { areDatesEqual, getTodayDate, replaceInvalidDateByNull } from './date-utils'; import { getDefaultReferenceDate } from './getDefaultReferenceDate'; @@ -14,9 +9,8 @@ import { } from '../hooks/useField/useField.utils'; export type SingleItemPickerValueManager< - TValue = any, TError extends DateValidationError | TimeValidationError | DateTimeValidationError = any, -> = PickerValueManager; +> = PickerValueManager; export const singleItemValueManager: SingleItemPickerValueManager = { emptyValue: null, @@ -43,7 +37,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) => { @@ -53,7 +47,7 @@ export const singleItemFieldValueManager: FieldValueManager = return prevSections; } - return getSectionsFromDate(date); + return getSectionsFromDate(date!); }, getV7HiddenInputValueFromSections: createDateStrForV7HiddenInputFromSections, getV6InputValueFromSections: createDateStrForV6InputFromSections, diff --git a/packages/x-date-pickers/src/models/fields.ts b/packages/x-date-pickers/src/models/fields.ts index 9d853e8d2ed8..c777fbaf0d1f 100644 --- a/packages/x-date-pickers/src/models/fields.ts +++ b/packages/x-date-pickers/src/models/fields.ts @@ -11,6 +11,7 @@ import type { import { ExportedPickersSectionListProps, PickersSectionListRef } from '../PickersSectionList'; import type { UseFieldResponse } from '../internals/hooks/useField'; import type { PickersTextFieldProps } from '../PickersTextField'; +import { RangePosition } from '../internals/models/pickers'; // Update PickersComponentAgnosticLocaleText -> viewNames when adding new entries export type FieldSectionType = @@ -91,12 +92,22 @@ export interface FieldSection { endSeparator: string; } -export interface FieldRef { +export interface FieldRangeSection extends FieldSection { + dateName: RangePosition; +} + +export type InferFieldSection = TIsRange extends true + ? TIsRange extends false + ? FieldSection | FieldRangeSection + : FieldRangeSection + : FieldSection; + +export interface FieldRef { /** * Returns the sections of the current value. - * @returns {TSection[]} The sections of the current value. + * @returns {InferFieldSection[]} The sections of the current value. */ - getSections: () => TSection[]; + getSections: () => InferFieldSection[]; /** * Returns the index of the active section (the first focused section). * If no section is active, returns `null`. @@ -165,11 +176,10 @@ type BaseForwardedSingleInputFieldProps = BaseFieldProps & +> = BaseFieldProps & BaseForwardedSingleInputFieldProps; /** diff --git a/packages/x-date-pickers/src/models/validation.ts b/packages/x-date-pickers/src/models/validation.ts index 5dcee050db5f..735751aec51a 100644 --- a/packages/x-date-pickers/src/models/validation.ts +++ b/packages/x-date-pickers/src/models/validation.ts @@ -1,3 +1,5 @@ +import type { InferPickerValue } from '../internals/models'; + /** * Validation error types applicable to both date and time validation */ @@ -22,20 +24,19 @@ export type TimeValidationError = export type DateTimeValidationError = DateValidationError | TimeValidationError; -export interface OnErrorProps { +export interface OnErrorProps { /** * Callback fired when the error associated with the current value changes. * When a validation error is detected, the `error` parameter contains a non-null value. * This can be used to render an appropriate form error. * @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. - * @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. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @param {TError} error The reason why the current value is not valid. - * @param {TValue} value The value associated with the error. + * @param {InferPickerValue} value The value associated with the error. */ - onError?: (error: TError, value: TValue) => void; + onError?: (error: TError, value: InferPickerValue) => void; } -export type InferError = - TProps extends Pick, 'onError'> - ? Parameters>[0] - : never; +export type InferError = TProps extends { onError?: (error: any, value: any) => void } + ? Parameters>[0] + : never; diff --git a/packages/x-date-pickers/src/themeAugmentation/props.d.ts b/packages/x-date-pickers/src/themeAugmentation/props.d.ts index 9fb69436bbad..19c3066219df 100644 --- a/packages/x-date-pickers/src/themeAugmentation/props.d.ts +++ b/packages/x-date-pickers/src/themeAugmentation/props.d.ts @@ -77,10 +77,10 @@ export interface PickersComponentsPropsList { MuiPickersMonth: ExportedPickersMonthProps; MuiPickersPopper: PickerPopperProps; MuiPickersSlideTransition: ExportedSlideTransitionProps; - MuiPickersToolbar: PickersToolbarProps; + MuiPickersToolbar: PickersToolbarProps; MuiPickersToolbarButton: PickersToolbarButtonProps; MuiPickersToolbarText: ExportedPickersToolbarTextProps; - MuiPickersLayout: PickersLayoutProps; + MuiPickersLayout: PickersLayoutProps; MuiPickersYear: ExportedPickersYearProps; MuiTimeClock: TimeClockProps; MuiTimeField: TimeFieldProps; diff --git a/packages/x-date-pickers/src/validation/useValidation.ts b/packages/x-date-pickers/src/validation/useValidation.ts index b09787bed9f0..598b7af37787 100644 --- a/packages/x-date-pickers/src/validation/useValidation.ts +++ b/packages/x-date-pickers/src/validation/useValidation.ts @@ -5,23 +5,24 @@ import { useLocalizationContext } from '../internals/hooks/useUtils'; import { MuiPickersAdapterContextValue } from '../LocalizationProvider/LocalizationProvider'; import { OnErrorProps, PickersTimezone } from '../models'; import type { PickerValueManager } from '../internals/hooks/usePicker'; +import { InferPickerValue } from '../internals/models'; -export type Validator = { +export type Validator = { (params: { adapter: MuiPickersAdapterContextValue; - value: TValue; + value: InferPickerValue; timezone: PickersTimezone; props: TValidationProps; }): TError; - valueManager: PickerValueManager; + valueManager: PickerValueManager; }; -interface UseValidationOptions - extends OnErrorProps { +interface UseValidationOptions + extends OnErrorProps { /** * The value to validate. */ - value: TValue; + value: InferPickerValue; /** * The timezone to use for the validation. */ @@ -32,7 +33,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. @@ -40,7 +41,7 @@ interface UseValidationOptions props: TValidationProps; } -interface UseValidationReturnValue { +interface UseValidationReturnValue { /** * The validation error associated to the value passed to the `useValidation` hook. */ @@ -54,27 +55,27 @@ interface UseValidationReturnValue { /** * Get the validation error for a new value. * This can be used to validate the value in a change handler before updating the state. - * @template TValue The value type. - * @param {TValue} newValue The value to validate. + * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @param {InferPickerValue} newValue The value to validate. * @returns {TError} The validation error associated to the new value. */ - getValidationErrorForNewValue: (newValue: TValue) => TError; + getValidationErrorForNewValue: (newValue: InferPickerValue) => TError; } /** * Utility hook to check if a given value is valid based on the provided validation props. - * @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 TIsRange `true` if the value comes from a range picker, `false` otherwise. * @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 {TValue} options.value The value to validate. + * @param {UseValidationOptions} options The options to configure the hook. + * @param {InferPickerValue} 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. + * @param {(error: TError, value: InferPickerValue) => void} options.onError Callback fired when the error associated with the current value changes. */ -export function useValidation( - options: UseValidationOptions, -): UseValidationReturnValue { +export function useValidation( + options: UseValidationOptions, +): UseValidationReturnValue { const { props, validator, value, timezone, onError } = options; const adapter = useLocalizationContext(); @@ -96,7 +97,7 @@ export function useValidation( previousValidationErrorRef.current = validationError; }, [validator, onError, validationError, value]); - const getValidationErrorForNewValue = useEventCallback((newValue: TValue) => { + const getValidationErrorForNewValue = useEventCallback((newValue: InferPickerValue) => { return validator({ adapter, value: newValue, timezone, props }); }); diff --git a/packages/x-date-pickers/src/validation/validateDate.ts b/packages/x-date-pickers/src/validation/validateDate.ts index 3c53ee7acb38..cf6995363110 100644 --- a/packages/x-date-pickers/src/validation/validateDate.ts +++ b/packages/x-date-pickers/src/validation/validateDate.ts @@ -5,7 +5,7 @@ import { MonthValidationProps, YearValidationProps, } from '../internals/models/validation'; -import { DateValidationError, PickerValidDate } from '../models'; +import { DateValidationError } from '../models'; import { applyDefaultDate } from '../internals/utils/date-utils'; import { singleItemValueManager } from '../internals/utils/valueManagers'; @@ -24,11 +24,12 @@ export interface ValidateDateProps YearValidationProps, Required {} -export const validateDate: Validator< - PickerValidDate | null, - DateValidationError, - ValidateDateProps -> = ({ props, value, timezone, adapter }): DateValidationError => { +export const validateDate: Validator = ({ + 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 34ef257efba2..b827b21c888f 100644 --- a/packages/x-date-pickers/src/validation/validateDateTime.ts +++ b/packages/x-date-pickers/src/validation/validateDateTime.ts @@ -1,7 +1,7 @@ import { Validator } from './useValidation'; import { ExportedValidateDateProps, validateDate, ValidateDateProps } from './validateDate'; import { ExportedValidateTimeProps, validateTime, ValidateTimeProps } from './validateTime'; -import { DateTimeValidationError, PickerValidDate } from '../models'; +import { DateTimeValidationError } from '../models'; import { singleItemValueManager } from '../internals/utils/valueManagers'; import { DateTimeValidationProps } from '../internals/models/validation'; @@ -15,11 +15,12 @@ export interface ExportedValidateDateTimeProps export interface ValidateDateTimeProps extends ValidateDateProps, ValidateTimeProps {} -export const validateDateTime: Validator< - PickerValidDate | null, - DateTimeValidationError, - ValidateDateTimeProps -> = ({ adapter, value, timezone, props }) => { +export const validateDateTime: Validator = ({ + adapter, + value, + timezone, + props, +}) => { const dateValidationResult = validateDate({ adapter, value, diff --git a/packages/x-date-pickers/src/validation/validateTime.ts b/packages/x-date-pickers/src/validation/validateTime.ts index 2979aa6864e1..87e626d7aa67 100644 --- a/packages/x-date-pickers/src/validation/validateTime.ts +++ b/packages/x-date-pickers/src/validation/validateTime.ts @@ -1,7 +1,7 @@ import { createIsAfterIgnoreDatePart } from '../internals/utils/time-utils'; import { Validator } from './useValidation'; import { BaseTimeValidationProps, TimeValidationProps } from '../internals/models/validation'; -import { PickerValidDate, TimeValidationError } from '../models'; +import { TimeValidationError } from '../models'; import { singleItemValueManager } from '../internals/utils/valueManagers'; /** @@ -11,11 +11,12 @@ export interface ExportedValidateTimeProps extends BaseTimeValidationProps, Time export interface ValidateTimeProps extends Required, TimeValidationProps {} -export const validateTime: Validator< - PickerValidDate | null, - TimeValidationError, - ValidateTimeProps -> = ({ adapter, value, timezone, props }): TimeValidationError => { +export const validateTime: Validator = ({ + adapter, + value, + timezone, + props, +}): TimeValidationError => { if (value === null) { return null; } diff --git a/scripts/x-date-pickers-pro.exports.json b/scripts/x-date-pickers-pro.exports.json index 836e164724c1..b6c3112758fa 100644 --- a/scripts/x-date-pickers-pro.exports.json +++ b/scripts/x-date-pickers-pro.exports.json @@ -160,6 +160,7 @@ { "name": "ExportedUseClearableFieldProps", "kind": "Interface" }, { "name": "extractValidationProps", "kind": "Variable" }, { "name": "FieldFormatTokenMap", "kind": "TypeAlias" }, + { "name": "FieldRangeSection", "kind": "Interface" }, { "name": "FieldRef", "kind": "Interface" }, { "name": "FieldSection", "kind": "Interface" }, { "name": "FieldSectionContentType", "kind": "TypeAlias" }, @@ -190,6 +191,7 @@ { "name": "getTimeClockUtilityClass", "kind": "Function" }, { "name": "getYearCalendarUtilityClass", "kind": "Function" }, { "name": "InferError", "kind": "TypeAlias" }, + { "name": "InferFieldSection", "kind": "TypeAlias" }, { "name": "LocalizationProvider", "kind": "Variable" }, { "name": "LocalizationProviderProps", "kind": "Interface" }, { "name": "LocalizedComponent", "kind": "TypeAlias" }, @@ -337,7 +339,6 @@ { "name": "PickerValidDate", "kind": "TypeAlias" }, { "name": "PickerValidDateLookup", "kind": "Interface" }, { "name": "PropsFromSlot", "kind": "TypeAlias" }, - { "name": "RangeFieldSection", "kind": "Interface" }, { "name": "RangeFieldSeparatorProps", "kind": "Interface" }, { "name": "RangePosition", "kind": "TypeAlias" }, { "name": "renderDateRangeViewCalendar", "kind": "Variable" }, diff --git a/scripts/x-date-pickers.exports.json b/scripts/x-date-pickers.exports.json index 94e004c0da2d..335c04ea9cee 100644 --- a/scripts/x-date-pickers.exports.json +++ b/scripts/x-date-pickers.exports.json @@ -106,6 +106,7 @@ { "name": "ExportedUseClearableFieldProps", "kind": "Interface" }, { "name": "extractValidationProps", "kind": "Variable" }, { "name": "FieldFormatTokenMap", "kind": "TypeAlias" }, + { "name": "FieldRangeSection", "kind": "Interface" }, { "name": "FieldRef", "kind": "Interface" }, { "name": "FieldSection", "kind": "Interface" }, { "name": "FieldSectionContentType", "kind": "TypeAlias" }, @@ -127,6 +128,7 @@ { "name": "getTimeClockUtilityClass", "kind": "Function" }, { "name": "getYearCalendarUtilityClass", "kind": "Function" }, { "name": "InferError", "kind": "TypeAlias" }, + { "name": "InferFieldSection", "kind": "TypeAlias" }, { "name": "LocalizationProvider", "kind": "Variable" }, { "name": "LocalizationProviderProps", "kind": "Interface" }, { "name": "LocalizedComponent", "kind": "TypeAlias" }, diff --git a/test/utils/pickers/describeValue/describeValue.tsx b/test/utils/pickers/describeValue/describeValue.tsx index 766fe523f9d0..4e2e1aed3ab8 100644 --- a/test/utils/pickers/describeValue/describeValue.tsx +++ b/test/utils/pickers/describeValue/describeValue.tsx @@ -16,15 +16,15 @@ const TEST_SUITES: DescribeValueTestSuite[] = [ testShortcuts, ]; -function innerDescribeValue( +function innerDescribeValue( ElementToTest: React.FunctionComponent, - getOptions: () => DescribeValueOptions, + getOptions: () => DescribeValueOptions, ) { const options = getOptions(); 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); @@ -68,19 +68,24 @@ function innerDescribeValue( } TEST_SUITES.forEach((testSuite) => { - testSuite(WrappedElementToTest, { ...options, renderWithProps }); + const typedTestSuite = testSuite as DescribeValueTestSuite; + typedTestSuite(WrappedElementToTest, { ...options, renderWithProps }); }); } -type P = [ +type P = [ React.FunctionComponent, - () => DescribeValueOptions, + () => DescribeValueOptions, ]; type DescribeValue = { - (...args: P): void; - skip: (...args: P) => void; - only: (...args: P) => void; + (...args: P): void; + skip: ( + ...args: P + ) => void; + only: ( + ...args: P + ) => void; }; /** diff --git a/test/utils/pickers/describeValue/describeValue.types.ts b/test/utils/pickers/describeValue/describeValue.types.ts index 27332ec2b719..511a4935eeb3 100644 --- a/test/utils/pickers/describeValue/describeValue.types.ts +++ b/test/utils/pickers/describeValue/describeValue.types.ts @@ -1,5 +1,6 @@ import * as React from 'react'; import { createRenderer, MuiRenderResult } from '@mui/internal-test-utils/createRenderer'; +import { InferPickerValue, InferNonNullablePickerValue } from '@mui/x-date-pickers/internals'; import { BuildFieldInteractionsResponse, FieldPressCharacter, @@ -8,12 +9,12 @@ import { } from 'test/utils/pickers'; import { PickerComponentFamily } from '../describe.types'; -interface DescribeValueBaseOptions { +interface DescribeValueBaseOptions { componentFamily: C; render: (node: React.ReactElement) => MuiRenderResult; - assertRenderedValue: (expectedValue: TValue) => void; - values: [TValue, TValue]; - emptyValue: TValue; + assertRenderedValue: (expectedValue: InferPickerValue) => void; + values: [InferNonNullablePickerValue, InferNonNullablePickerValue]; + emptyValue: InferPickerValue; defaultProps?: object; // TODO: Export `Clock` from monorepo clock: ReturnType['clock']; @@ -21,12 +22,12 @@ interface DescribeValueBaseOptions { export type DescribeValueOptions< C extends PickerComponentFamily, - TValue, -> = DescribeValueBaseOptions & + TIsRange extends boolean, +> = DescribeValueBaseOptions & (C extends 'picker' ? OpenPickerParams & { setNewValue: ( - value: TValue, + value: InferNonNullablePickerValue, options: { selectSection: FieldSectionSelector; pressKey: FieldPressCharacter; @@ -34,18 +35,18 @@ export type DescribeValueOptions< applySameValue?: boolean; setEndDate?: boolean; }, - ) => TValue; + ) => InferNonNullablePickerValue; } : { setNewValue: ( - value: TValue, + value: InferPickerValue, options: { selectSection: FieldSectionSelector; pressKey: FieldPressCharacter }, - ) => TValue; + ) => InferPickerValue; }); -export type DescribeValueTestSuite = ( +export type DescribeValueTestSuite = ( ElementToTest: React.FunctionComponent, - options: DescribeValueOptions & { + options: DescribeValueOptions & { renderWithProps: BuildFieldInteractionsResponse['renderWithProps']; }, ) => void; diff --git a/test/utils/pickers/describeValue/testPickerActionBar.tsx b/test/utils/pickers/describeValue/testPickerActionBar.tsx index c223c52d2331..6bf1a2eadf20 100644 --- a/test/utils/pickers/describeValue/testPickerActionBar.tsx +++ b/test/utils/pickers/describeValue/testPickerActionBar.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import { expect } from 'chai'; import { spy } from 'sinon'; import { fireEvent, screen } from '@mui/internal-test-utils'; +import { DateRange } from '@mui/x-date-pickers-pro/models'; import { adapterToUse, getExpectedOnChangeCount, @@ -106,7 +107,7 @@ export const testPickerActionBar: DescribeValueTestSuite = ( getExpectedOnChangeCount(componentFamily, pickerParams) + 1, ); if (isRangeType) { - values[0].forEach((value, index) => { + (values[0] as DateRange).forEach((value, index) => { expect(onChange.lastCall.args[0][index]).toEqualDateTime(value); }); } else { diff --git a/test/utils/pickers/describeValue/testPickerOpenCloseLifeCycle.tsx b/test/utils/pickers/describeValue/testPickerOpenCloseLifeCycle.tsx index 9896bd8da947..c114367e9a20 100644 --- a/test/utils/pickers/describeValue/testPickerOpenCloseLifeCycle.tsx +++ b/test/utils/pickers/describeValue/testPickerOpenCloseLifeCycle.tsx @@ -2,11 +2,12 @@ import * as React from 'react'; import { expect } from 'chai'; import { spy } from 'sinon'; import { fireEvent, screen } from '@mui/internal-test-utils'; +import { DateRange } from '@mui/x-date-pickers-pro/models'; import { getExpectedOnChangeCount, getFieldInputRoot, openPicker } from 'test/utils/pickers'; import { DescribeValueTestSuite } from './describeValue.types'; import { fireUserEvent } from '../../fireUserEvent'; -export const testPickerOpenCloseLifeCycle: DescribeValueTestSuite = ( +export const testPickerOpenCloseLifeCycle: DescribeValueTestSuite = ( ElementToTest, options, ) => { @@ -78,7 +79,7 @@ export const testPickerOpenCloseLifeCycle: DescribeValueTestSuite selectSection, pressKey, }); - newValue.forEach((value, index) => { + (newValue as DateRange).forEach((value, index) => { expect(onChange.lastCall.args[0][index]).toEqualDateTime(value); }); } else { @@ -136,7 +137,7 @@ export const testPickerOpenCloseLifeCycle: DescribeValueTestSuite selectSection, pressKey, }); - newValue.forEach((value, index) => { + (newValue as DateRange).forEach((value, index) => { expect(onChange.lastCall.args[0][index]).toEqualDateTime(value); }); } else { @@ -212,7 +213,7 @@ export const testPickerOpenCloseLifeCycle: DescribeValueTestSuite selectSection, pressKey, }); - newValue.forEach((value, index) => { + (newValue as DateRange).forEach((value, index) => { expect(onChange.lastCall.args[0][index]).toEqualDateTime(value); }); } else { @@ -235,7 +236,7 @@ export const testPickerOpenCloseLifeCycle: DescribeValueTestSuite selectSection, pressKey, }); - newValueBis.forEach((value, index) => { + (newValueBis as DateRange).forEach((value, index) => { expect(onChange.lastCall.args[0][index]).toEqualDateTime(value); }); } else { @@ -277,7 +278,7 @@ export const testPickerOpenCloseLifeCycle: DescribeValueTestSuite expect(onChange.callCount).to.equal(getExpectedOnChangeCount(componentFamily, pickerParams)); expect(onAccept.callCount).to.equal(1); if (isRangeType) { - newValue.forEach((value, index) => { + (newValue as DateRange).forEach((value, index) => { expect(onChange.lastCall.args[0][index]).toEqualDateTime(value); }); } else { diff --git a/test/utils/pickers/fields.tsx b/test/utils/pickers/fields.tsx index 5b552398c467..ce2878952e41 100644 --- a/test/utils/pickers/fields.tsx +++ b/test/utils/pickers/fields.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { expect } from 'chai'; import { createTheme, ThemeProvider } from '@mui/material/styles'; import { createRenderer, screen, act, fireEvent } from '@mui/internal-test-utils'; -import { FieldRef, FieldSection, FieldSectionType } from '@mui/x-date-pickers/models'; +import { FieldRef, FieldSectionType } from '@mui/x-date-pickers/models'; import { pickersSectionListClasses } from '@mui/x-date-pickers/PickersSectionList'; import { pickersInputBaseClasses } from '@mui/x-date-pickers/PickersTextField'; import { fireUserEvent } from '../fireUserEvent'; @@ -88,10 +88,10 @@ export const buildFieldInteractions =

({ props, { hook, componentFamily = 'field', direction = 'ltr' } = {}, ) => { - let fieldRef: React.RefObject> = { current: null }; + let fieldRef: React.RefObject> = { current: null }; function WrappedComponent(propsFromRender: any) { - fieldRef = React.useRef>(null); + fieldRef = React.useRef>(null); const hookResult = hook?.(propsFromRender); const allProps = { From 6ed4952676ce517c84a76ae49de4bfe54a40578f Mon Sep 17 00:00:00 2001 From: flavien Date: Wed, 6 Nov 2024 11:37:07 +0100 Subject: [PATCH 02/14] Fix CI --- .../src/DateCalendar/useCalendarState.tsx | 21 ++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) diff --git a/packages/x-date-pickers/src/DateCalendar/useCalendarState.tsx b/packages/x-date-pickers/src/DateCalendar/useCalendarState.tsx index 360023008c70..a22917a0eceb 100644 --- a/packages/x-date-pickers/src/DateCalendar/useCalendarState.tsx +++ b/packages/x-date-pickers/src/DateCalendar/useCalendarState.tsx @@ -106,7 +106,7 @@ export const createCalendarStateReducer = } }; -interface UseCalendarStateParams +interface UseCalendarStateParameters extends Pick< DateCalendarDefaultizedProps, | 'referenceDate' @@ -123,7 +123,22 @@ interface UseCalendarStateParams timezone: PickersTimezone; } -export const useCalendarState = (params: UseCalendarStateParams) => { +interface UseCalendarStateReturnValue { + referenceDate: PickerValidDate; + calendarState: CalendarState; + changeMonth: (newDate: PickerValidDate) => void; + changeFocusedDay: ( + newFocusedDate: PickerValidDate | null, + withoutMonthSwitchingAnimation?: boolean, + ) => void; + isDateDisabled: (day: PickerValidDate | null) => boolean; + onMonthSwitchingAnimationEnd: () => void; + handleChangeMonth: (payload: ChangeMonthPayload) => void; +} + +export const useCalendarState = ( + params: UseCalendarStateParameters, +): UseCalendarStateReturnValue => { const { value, referenceDate: referenceDateProp, @@ -144,7 +159,7 @@ export const useCalendarState = (params: UseCalendarStateParams) => { createCalendarStateReducer(Boolean(reduceAnimations), disableSwitchToMonthOnDayFocus, utils), ).current; - const referenceDate = React.useMemo( + const referenceDate = React.useMemo( () => { return singleItemValueManager.getInitialReferenceValue({ value, From 3a52a82178973607443c4907f4a1ade1bb157d79 Mon Sep 17 00:00:00 2001 From: flavien Date: Thu, 14 Nov 2024 12:36:43 +0100 Subject: [PATCH 03/14] Review: Lukas --- .../src/internals/utils/date-fields-utils.ts | 2 +- packages/x-date-pickers-pro/src/models/fields.ts | 8 +++----- packages/x-date-pickers/src/internals/index.ts | 2 +- packages/x-date-pickers/src/internals/models/fields.ts | 7 ++++++- packages/x-date-pickers/src/models/fields.ts | 7 +------ scripts/x-date-pickers.exports.json | 1 - 6 files changed, 12 insertions(+), 15 deletions(-) diff --git a/packages/x-date-pickers-pro/src/internals/utils/date-fields-utils.ts b/packages/x-date-pickers-pro/src/internals/utils/date-fields-utils.ts index 76d3d080eb78..51000b91b1e8 100644 --- a/packages/x-date-pickers-pro/src/internals/utils/date-fields-utils.ts +++ b/packages/x-date-pickers-pro/src/internals/utils/date-fields-utils.ts @@ -1,4 +1,4 @@ -import { FieldRangeSection } from '@mui/x-date-pickers/models'; +import { FieldRangeSection } from '@mui/x-date-pickers/internals'; export const splitDateRangeSections = (sections: FieldRangeSection[]) => { const startDateSections: FieldRangeSection[] = []; diff --git a/packages/x-date-pickers-pro/src/models/fields.ts b/packages/x-date-pickers-pro/src/models/fields.ts index f415273c839d..f0bc65fba454 100644 --- a/packages/x-date-pickers-pro/src/models/fields.ts +++ b/packages/x-date-pickers-pro/src/models/fields.ts @@ -1,11 +1,9 @@ import * as React from 'react'; -import { UseFieldResponse, FormProps, RangePosition } from '@mui/x-date-pickers/internals'; -import { FieldRef, FieldSection, PickerFieldSlotProps } from '@mui/x-date-pickers/models'; +import { UseFieldResponse, FormProps } from '@mui/x-date-pickers/internals'; +import { FieldRef, PickerFieldSlotProps } from '@mui/x-date-pickers/models'; import { UseClearableFieldResponse } from '@mui/x-date-pickers/hooks'; -export interface RangeFieldSection extends FieldSection { - dateName: RangePosition; -} +export type { FieldRangeSection } from '@mui/x-date-pickers/internals'; export type FieldType = 'single-input' | 'multi-input'; diff --git a/packages/x-date-pickers/src/internals/index.ts b/packages/x-date-pickers/src/internals/index.ts index 1d05d936aef6..0c45e50833b9 100644 --- a/packages/x-date-pickers/src/internals/index.ts +++ b/packages/x-date-pickers/src/internals/index.ts @@ -97,7 +97,7 @@ export { useViews } from './hooks/useViews'; export { usePreviousMonthDisabled, useNextMonthDisabled } from './hooks/date-helpers-hooks'; export type { RangePosition } from './models/pickers'; -export type { BaseSingleInputFieldProps } from './models/fields'; +export type { BaseSingleInputFieldProps, FieldRangeSection } from './models/fields'; export type { BasePickerProps, BasePickerInputProps, diff --git a/packages/x-date-pickers/src/internals/models/fields.ts b/packages/x-date-pickers/src/internals/models/fields.ts index 1e71d21e5556..ffb08bbc7766 100644 --- a/packages/x-date-pickers/src/internals/models/fields.ts +++ b/packages/x-date-pickers/src/internals/models/fields.ts @@ -5,8 +5,13 @@ import type { UseClearableFieldSlotProps, UseClearableFieldSlots, } from '../../hooks/useClearableField'; -import type { PickerOwnerState } from '../../models'; +import type { FieldSection, PickerOwnerState } from '../../models'; import type { UseFieldInternalProps } from '../hooks/useField'; +import { RangePosition } from './pickers'; + +export interface FieldRangeSection extends FieldSection { + dateName: RangePosition; +} export interface BaseForwardedSingleInputFieldProps extends ExportedUseClearableFieldProps { className: string | undefined; diff --git a/packages/x-date-pickers/src/models/fields.ts b/packages/x-date-pickers/src/models/fields.ts index 485a0d674f0a..923ef3a3996a 100644 --- a/packages/x-date-pickers/src/models/fields.ts +++ b/packages/x-date-pickers/src/models/fields.ts @@ -7,8 +7,7 @@ import type { import { ExportedPickersSectionListProps } from '../PickersSectionList'; import type { UseFieldInternalProps, UseFieldResponse } from '../internals/hooks/useField'; import type { PickersTextFieldProps } from '../PickersTextField'; -import { RangePosition } from '../internals/models/pickers'; -import { BaseForwardedSingleInputFieldProps } from '../internals/models'; +import { BaseForwardedSingleInputFieldProps, FieldRangeSection } from '../internals/models'; // Update PickersComponentAgnosticLocaleText -> viewNames when adding new entries export type FieldSectionType = @@ -89,10 +88,6 @@ export interface FieldSection { endSeparator: string; } -export interface FieldRangeSection extends FieldSection { - dateName: RangePosition; -} - export type InferFieldSection = TIsRange extends true ? TIsRange extends false ? FieldSection | FieldRangeSection diff --git a/scripts/x-date-pickers.exports.json b/scripts/x-date-pickers.exports.json index 6063bdbfc83d..bc92b537fc95 100644 --- a/scripts/x-date-pickers.exports.json +++ b/scripts/x-date-pickers.exports.json @@ -105,7 +105,6 @@ { "name": "ExportedUseClearableFieldProps", "kind": "Interface" }, { "name": "extractValidationProps", "kind": "Variable" }, { "name": "FieldFormatTokenMap", "kind": "TypeAlias" }, - { "name": "FieldRangeSection", "kind": "Interface" }, { "name": "FieldRef", "kind": "Interface" }, { "name": "FieldSection", "kind": "Interface" }, { "name": "FieldSectionContentType", "kind": "TypeAlias" }, From 3e18240182b7a8bb8f0bdfa60b1d344cbf5a9bc4 Mon Sep 17 00:00:00 2001 From: flavien Date: Thu, 14 Nov 2024 12:38:53 +0100 Subject: [PATCH 04/14] Review: Lukas --- .../hooks/useMultiInputFieldSelectedSections.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) 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 2a87c1d474bb..65c7b308ac57 100644 --- a/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputFieldSelectedSections.ts +++ b/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputFieldSelectedSections.ts @@ -9,14 +9,14 @@ interface UseMultiInputFieldSelectedSectionsParams UseFieldInternalProps, 'selectedSections' | 'onSelectedSectionsChange' > { - unstableStartFieldRef?: React.Ref>; - unstableEndFieldRef?: React.Ref>; + unstableStartFieldRef?: React.Ref>; + unstableEndFieldRef?: React.Ref>; } export const useMultiInputFieldSelectedSections = ( params: UseMultiInputFieldSelectedSectionsParams, ) => { - const unstableEndFieldRef = React.useRef>(null); + const unstableEndFieldRef = React.useRef>(null); const handleUnstableEndFieldRef = useForkRef(params.unstableEndFieldRef, unstableEndFieldRef); const [startSelectedSection, setStartSelectedSection] = React.useState( @@ -54,7 +54,7 @@ export const useMultiInputFieldSelectedSections = ( return { start: { - unstableFieldRef: params.unstableStartFieldRef as React.Ref>, + unstableFieldRef: params.unstableStartFieldRef, selectedSections: activeField === 'start' && params.selectedSections !== undefined ? params.selectedSections @@ -62,7 +62,7 @@ export const useMultiInputFieldSelectedSections = ( onSelectedSectionsChange: handleStartSelectedSectionChange, }, end: { - unstableFieldRef: handleUnstableEndFieldRef as React.Ref>, + unstableFieldRef: handleUnstableEndFieldRef, selectedSections: activeField === 'end' && params.selectedSections !== undefined ? params.selectedSections From 8aae145b34daa00e1a8919e57ac16702d14da7ae Mon Sep 17 00:00:00 2001 From: flavien Date: Thu, 14 Nov 2024 12:50:10 +0100 Subject: [PATCH 05/14] Remove as --- .../src/internals/utils/valueManagers.ts | 3 ++- .../src/PickersLayout/usePickerLayout.tsx | 11 ++--------- 2 files changed, 4 insertions(+), 10 deletions(-) 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 e438da2e0ba4..8eebc7353404 100644 --- a/packages/x-date-pickers-pro/src/internals/utils/valueManagers.ts +++ b/packages/x-date-pickers-pro/src/internals/utils/valueManagers.ts @@ -9,8 +9,9 @@ import { getDefaultReferenceDate, PickerRangeValue, PickerNonNullableRangeValue, + FieldRangeSection, } from '@mui/x-date-pickers/internals'; -import { FieldRangeSection, PickerValidDate } from '@mui/x-date-pickers/models'; +import { PickerValidDate } from '@mui/x-date-pickers/models'; import { splitDateRangeSections, removeLastSeparator } from './date-fields-utils'; import type { DateRangeValidationError, diff --git a/packages/x-date-pickers/src/PickersLayout/usePickerLayout.tsx b/packages/x-date-pickers/src/PickersLayout/usePickerLayout.tsx index 28e331128344..bddf6e3e219a 100644 --- a/packages/x-date-pickers/src/PickersLayout/usePickerLayout.tsx +++ b/packages/x-date-pickers/src/PickersLayout/usePickerLayout.tsx @@ -7,7 +7,7 @@ import { PickerLayoutOwnerState, PickersLayoutProps, SubComponents } from './Pic import { getPickersLayoutUtilityClass, PickersLayoutClasses } from './pickersLayoutClasses'; import { PickersShortcuts } from '../PickersShortcuts'; import { BaseToolbarProps } from '../internals/models/props/toolbar'; -import { DateOrTimeViewWithMeridiem, InferPickerValue } from '../internals/models'; +import { DateOrTimeViewWithMeridiem } from '../internals/models'; import { usePickerPrivateContext } from '../internals/hooks/usePickerPrivateContext'; function toolbarHasView( @@ -34,13 +34,6 @@ const useUtilityClasses = ( return composeClasses(slots, getPickersLayoutUtilityClass, classes); }; -interface PickersLayoutPropsWithValueRequired< - TIsRange extends boolean, - TView extends DateOrTimeViewWithMeridiem, -> extends PickersLayoutProps { - value: InferPickerValue; -} - interface UsePickerLayoutResponse extends SubComponents {} const usePickerLayout = ( @@ -72,7 +65,7 @@ const usePickerLayout = ; + } = props; const ownerState: PickerLayoutOwnerState = { ...pickersOwnerState, From 9e7e9aa42ebd902e12558742683d16a81d583154 Mon Sep 17 00:00:00 2001 From: flavien Date: Thu, 14 Nov 2024 16:19:46 +0100 Subject: [PATCH 06/14] Fix --- .../useDesktopRangePicker.tsx | 19 +++++++++++--- .../hooks/useEnrichedRangePickerFieldProps.ts | 26 +++++++++---------- .../useMobileRangePicker.tsx | 19 +++++++++++--- .../x-date-pickers-pro/src/models/fields.ts | 4 +-- .../hooks/usePicker/usePickerViews.ts | 2 +- 5 files changed, 46 insertions(+), 24 deletions(-) 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 f0b97d90b6c3..fac517d4fa24 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 @@ -67,16 +67,26 @@ export const useDesktopRangePicker = < const fieldContainerRef = React.useRef(null); const anchorRef = React.useRef(null); const popperRef = React.useRef(null); - const startFieldRef = React.useRef>(null); - const endFieldRef = React.useRef>(null); + const startFieldRef = React.useRef>(null); + const endFieldRef = React.useRef>(null); + const singleInputFieldRef = React.useRef>(null); const initialView = React.useRef(props.openTo ?? null); const fieldType = (slots.field as any).fieldType ?? 'multi-input'; const { rangePosition, onRangePositionChange } = useRangePosition( props, - fieldType === 'single-input' ? startFieldRef : undefined, + fieldType === 'single-input' ? singleInputFieldRef : undefined, ); + let fieldRef: React.Ref>; + if (fieldType === 'single-input') { + fieldRef = singleInputFieldRef; + } else if (rangePosition === 'start') { + fieldRef = startFieldRef; + } else { + fieldRef = endFieldRef; + } + const { open, actions, @@ -91,7 +101,7 @@ export const useDesktopRangePicker = < props, wrapperVariant: 'desktop', autoFocusView: false, - fieldRef: rangePosition === 'start' ? startFieldRef : endFieldRef, + fieldRef, localeText, additionalViewProps: { rangePosition, @@ -173,6 +183,7 @@ export const useDesktopRangePicker = < anchorRef, startFieldRef, endFieldRef, + singleInputFieldRef, currentView: layoutProps.view !== props.openTo ? layoutProps.view : undefined, initialView: initialView.current ?? undefined, onViewChange: layoutProps.onViewChange, 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 35047291abb3..2b920f023710 100644 --- a/packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerFieldProps.ts +++ b/packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerFieldProps.ts @@ -106,8 +106,9 @@ export interface UseEnrichedRangePickerFieldPropsParams< currentView?: TView | null; initialView?: TView; onViewChange?: (view: TView) => void; - startFieldRef: React.RefObject>; - endFieldRef: React.RefObject>; + startFieldRef: React.RefObject>; + endFieldRef: React.RefObject>; + singleInputFieldRef: React.RefObject>; } const useMultiInputFieldSlotProps = < @@ -298,8 +299,7 @@ const useSingleInputFieldSlotProps = < onBlur, rangePosition, onRangePositionChange, - startFieldRef, - endFieldRef, + singleInputFieldRef, pickerSlots, pickerSlotProps, fieldProps, @@ -313,35 +313,35 @@ const useSingleInputFieldSlotProps = < >) => { type ReturnType = BaseSingleInputFieldProps; - const handleFieldRef = useForkRef(fieldProps.unstableFieldRef, startFieldRef, endFieldRef); + const handleFieldRef = useForkRef(fieldProps.unstableFieldRef, singleInputFieldRef); React.useEffect(() => { - if (!open || !startFieldRef.current) { + if (!open || !singleInputFieldRef.current) { return; } - if (startFieldRef.current.isFieldFocused()) { + if (singleInputFieldRef.current.isFieldFocused()) { return; } // bring back focus to the field with the current view section selected if (currentView) { - const sections = startFieldRef.current.getSections().map((section) => section.type); + const sections = singleInputFieldRef.current.getSections().map((section) => section.type); const newSelectedSection = rangePosition === 'start' ? sections.indexOf(currentView) : sections.lastIndexOf(currentView); - startFieldRef.current?.focusField(newSelectedSection); + singleInputFieldRef.current?.focusField(newSelectedSection); } - }, [rangePosition, open, currentView, startFieldRef]); + }, [rangePosition, open, currentView, singleInputFieldRef]); const updateRangePosition = () => { - if (!startFieldRef.current?.isFieldFocused()) { + if (!singleInputFieldRef.current?.isFieldFocused()) { return; } - const sections = startFieldRef.current.getSections(); - const activeSectionIndex = startFieldRef.current?.getActiveSectionIndex(); + const sections = singleInputFieldRef.current.getSections(); + const activeSectionIndex = singleInputFieldRef.current?.getActiveSectionIndex(); const domRangePosition = activeSectionIndex == null || activeSectionIndex < sections.length / 2 ? 'start' : 'end'; 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 593db2b15790..bd8938b29937 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 @@ -62,17 +62,27 @@ export const useMobileRangePicker = < localeText, } = props; - const startFieldRef = React.useRef>(null); - const endFieldRef = React.useRef>(null); + const startFieldRef = React.useRef>(null); + const endFieldRef = React.useRef>(null); + const singleInputFieldRef = React.useRef>(null); const fieldType = (slots.field as any).fieldType ?? 'multi-input'; const { rangePosition, onRangePositionChange } = useRangePosition( props, - fieldType === 'single-input' ? startFieldRef : undefined, + fieldType === 'single-input' ? singleInputFieldRef : undefined, ); const labelId = useId(); const contextTranslations = usePickerTranslations(); + let fieldRef: React.Ref>; + if (fieldType === 'single-input') { + fieldRef = singleInputFieldRef; + } else if (rangePosition === 'start') { + fieldRef = startFieldRef; + } else { + fieldRef = endFieldRef; + } + const { open, actions, @@ -86,7 +96,7 @@ export const useMobileRangePicker = < props, wrapperVariant: 'mobile', autoFocusView: true, - fieldRef: rangePosition === 'start' ? startFieldRef : endFieldRef, + fieldRef, localeText, additionalViewProps: { rangePosition, @@ -147,6 +157,7 @@ export const useMobileRangePicker = < fieldProps, startFieldRef, endFieldRef, + singleInputFieldRef, }); const slotPropsForLayout: PickersLayoutSlotProps = { diff --git a/packages/x-date-pickers-pro/src/models/fields.ts b/packages/x-date-pickers-pro/src/models/fields.ts index f0bc65fba454..ea23ffc5dee4 100644 --- a/packages/x-date-pickers-pro/src/models/fields.ts +++ b/packages/x-date-pickers-pro/src/models/fields.ts @@ -32,8 +32,8 @@ export interface MultiInputFieldSlotRootProps { } export interface MultiInputFieldRefs { - unstableStartFieldRef?: React.Ref>; - unstableEndFieldRef?: React.Ref>; + unstableStartFieldRef?: React.Ref>; + unstableEndFieldRef?: React.Ref>; } export interface RangeFieldSeparatorProps { 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 08d460fdcdfd..036c66e27957 100644 --- a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerViews.ts +++ b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerViews.ts @@ -107,7 +107,7 @@ export interface UsePickerViewParams< propsFromPickerValue: UsePickerValueViewsResponse; additionalViewProps: TAdditionalProps; autoFocusView: boolean; - fieldRef: React.RefObject> | undefined; + fieldRef: React.RefObject> | undefined; /** * A function that intercepts the regular picker rendering. * Can be used to consume the provided `viewRenderers` and render a custom component wrapping them. From d1ca6a413c8b9196e12edb0ac11fe079ed44308c Mon Sep 17 00:00:00 2001 From: flavien Date: Fri, 15 Nov 2024 11:36:23 +0100 Subject: [PATCH 07/14] Fix --- .../hooks/usePicker/usePickerValue.types.ts | 24 ++----------------- 1 file changed, 2 insertions(+), 22 deletions(-) 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 ed62ec94e5bd..be160a27c2e6 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 @@ -2,11 +2,6 @@ import { FieldChangeHandlerContext, UseFieldInternalProps } from '../useField'; import { Validator } from '../../../validation'; import { WrapperVariant } from '../../models/common'; import { -<<<<<<< HEAD - FieldValueType, -======= - FieldSection, ->>>>>>> master TimezoneProps, MuiPickersAdapter, PickersTimezone, @@ -46,24 +41,14 @@ export interface PickerValueManager { * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * @param {MuiPickersAdapter} utils The adapter. * @param {PickersTimezone} timezone The current timezone. -<<<<<<< HEAD - * @param {FieldValueType} valueType The type of the value being edited. - * @returns {InferPickerValue} The value to set when clicking the "Today" button. -======= * @param {PickerValueType} valueType The type of the value being edited. - * @returns {TValue} The value to set when clicking the "Today" button. ->>>>>>> master + * @returns {InferPickerValue} The value to set when clicking the "Today" button. */ getTodayValue: ( utils: MuiPickersAdapter, timezone: PickersTimezone, -<<<<<<< HEAD - valueType: FieldValueType, - ) => InferPickerValue; -======= valueType: PickerValueType, - ) => TValue; ->>>>>>> master + ) => InferPickerValue; /** * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. * Method returning the reference value to use when mounting the component. @@ -301,13 +286,8 @@ export interface UsePickerValueParams< TExternalProps extends UsePickerValueProps, > { props: TExternalProps; -<<<<<<< HEAD valueManager: PickerValueManager>; - valueType: FieldValueType; -======= - valueManager: PickerValueManager>; valueType: PickerValueType; ->>>>>>> master wrapperVariant: WrapperVariant; validator: Validator, TExternalProps>; } From 407ec45ef3d751415071e6535fda8affae1e59d9 Mon Sep 17 00:00:00 2001 From: flavien Date: Fri, 15 Nov 2024 13:46:31 +0100 Subject: [PATCH 08/14] [pickers] Remove TSection and stictly type TValue --- .../custom-layout/AddComponent.js | 1 + .../custom-layout/AddComponent.tsx | 3 +- .../date-range-picker/BasicRangeShortcuts.tsx | 5 +- ...edSelectedSectionsSingleInputRangeField.js | 1 + ...dSelectedSectionsSingleInputRangeField.tsx | 5 +- .../shortcuts/AdvancedRangeShortcuts.tsx | 3 +- .../shortcuts/BasicRangeShortcuts.tsx | 5 +- .../date-pickers/shortcuts/BasicShortcuts.tsx | 4 +- .../shortcuts/ChangeImportance.tsx | 4 +- .../shortcuts/CustomizedRangeShortcuts.tsx | 7 +- .../shortcuts/DisabledDatesShortcuts.tsx | 4 +- .../shortcuts/OnChangeShortcutLabel.tsx | 2 +- .../MobileKeyboardView.js | 1 + .../MobileKeyboardView.tsx | 3 +- .../x/api/date-pickers/date-calendar.json | 2 +- docs/pages/x/api/date-pickers/date-field.json | 4 +- .../pages/x/api/date-pickers/date-picker.json | 6 +- .../api/date-pickers/date-range-calendar.json | 2 +- .../x/api/date-pickers/date-range-picker.json | 6 +- .../x/api/date-pickers/date-time-field.json | 4 +- .../x/api/date-pickers/date-time-picker.json | 6 +- .../date-pickers/date-time-range-picker.json | 6 +- .../api/date-pickers/desktop-date-picker.json | 6 +- .../desktop-date-range-picker.json | 6 +- .../desktop-date-time-picker.json | 6 +- .../desktop-date-time-range-picker.json | 6 +- .../api/date-pickers/desktop-time-picker.json | 6 +- .../x/api/date-pickers/digital-clock.json | 2 +- .../api/date-pickers/mobile-date-picker.json | 6 +- .../mobile-date-range-picker.json | 6 +- .../date-pickers/mobile-date-time-picker.json | 6 +- .../mobile-date-time-range-picker.json | 6 +- .../api/date-pickers/mobile-time-picker.json | 6 +- .../multi-input-date-range-field.json | 4 +- .../multi-input-date-time-range-field.json | 4 +- .../multi-input-time-range-field.json | 4 +- .../multi-section-digital-clock.json | 2 +- .../single-input-date-range-field.json | 4 +- .../single-input-date-time-range-field.json | 4 +- .../single-input-time-range-field.json | 4 +- .../api/date-pickers/static-date-picker.json | 6 +- .../static-date-range-picker.json | 6 +- .../date-pickers/static-date-time-picker.json | 6 +- .../api/date-pickers/static-time-picker.json | 6 +- docs/pages/x/api/date-pickers/time-clock.json | 2 +- docs/pages/x/api/date-pickers/time-field.json | 4 +- .../pages/x/api/date-pickers/time-picker.json | 6 +- .../modules/components/PickersPlayground.tsx | 5 +- .../components/overview/mainDemo/Clock.tsx | 4 +- .../mainDemo/DateRangeWithShortcuts.tsx | 7 +- .../overview/mainDemo/DigitalClock.tsx | 3 +- .../DateRangeCalendar/DateRangeCalendar.tsx | 8 +- .../DateRangeCalendar.types.ts | 2 +- .../src/DateRangePicker/DateRangePicker.tsx | 12 +- .../DateRangePicker/DateRangePicker.types.ts | 8 +- .../DateRangePickerToolbar.tsx | 3 +- .../src/DateRangePicker/shared.tsx | 5 +- .../DateTimeRangePicker.tsx | 12 +- .../DateTimeRangePicker.types.ts | 8 +- .../DateTimeRangePickerTimeWrapper.tsx | 2 +- .../DateTimeRangePickerToolbar.tsx | 3 +- .../src/DateTimeRangePicker/shared.tsx | 9 +- .../DesktopDateRangePicker.tsx | 20 +- .../describes.DesktopDateRangePicker.test.tsx | 10 +- .../DesktopDateTimeRangePicker.tsx | 17 +- ...cribes.DesktopDateTimeRangePicker.test.tsx | 6 +- .../MobileDateRangePicker.tsx | 20 +- .../describes.MobileDateRangePicker.test.tsx | 6 +- .../MobileDateTimeRangePicker.tsx | 21 ++- ...scribes.MobileDateTimeRangePicker.test.tsx | 8 +- .../MultiInputDateRangeField.tsx | 8 +- .../MultiInputDateTimeRangeField.tsx | 8 +- .../MultiInputTimeRangeField.tsx | 8 +- .../SingleInputDateRangeField.tsx | 8 +- .../SingleInputDateRangeField.types.ts | 8 +- .../useSingleInputDateRangeField.ts | 4 +- .../SingleInputDateTimeRangeField.tsx | 8 +- .../SingleInputDateTimeRangeField.types.ts | 8 +- .../useSingleInputDateTimeRangeField.ts | 8 +- .../SingleInputTimeRangeField.tsx | 8 +- .../SingleInputTimeRangeField.types.ts | 8 +- .../useSingleInputTimeRangeField.ts | 4 +- .../StaticDateRangePicker.tsx | 16 +- .../internals/hooks/models/useRangePicker.ts | 9 +- .../useDesktopRangePicker.tsx | 14 +- .../hooks/useEnrichedRangePickerFieldProps.ts | 18 +- .../useMobileRangePicker.tsx | 14 +- .../useMultiInputFieldSelectedSections.ts | 14 +- .../useMultiInputDateRangeField.ts | 5 +- .../useMultiInputDateTimeRangeField.ts | 5 +- .../useMultiInputTimeRangeField.ts | 5 +- .../src/internals/hooks/useRangePosition.ts | 3 +- .../useStaticRangePicker.tsx | 5 +- .../useStaticRangePicker.types.ts | 9 +- .../src/internals/models/dateTimeRange.ts | 3 +- .../src/internals/models/fields.ts | 4 +- .../src/internals/models/timeRange.ts | 8 +- .../src/internals/utils/valueManagers.ts | 4 +- .../src/models/dateRange.ts | 8 +- .../x-date-pickers-pro/src/models/fields.ts | 14 +- .../src/validation/validateDateRange.ts | 4 +- .../src/validation/validateDateTimeRange.ts | 4 +- .../src/validation/validateTimeRange.ts | 8 +- .../src/DateCalendar/DateCalendar.tsx | 8 +- .../src/DateCalendar/DateCalendar.types.ts | 3 +- .../tests/describes.DateCalendar.test.tsx | 3 +- .../src/DateField/DateField.tsx | 8 +- .../src/DateField/DateField.types.ts | 3 +- .../tests/describes.DateField.test.tsx | 3 +- .../src/DateField/useDateField.ts | 3 +- .../src/DatePicker/DatePicker.tsx | 12 +- .../src/DatePicker/DatePicker.types.ts | 4 +- .../src/DatePicker/DatePickerToolbar.tsx | 3 +- .../x-date-pickers/src/DatePicker/shared.tsx | 5 +- .../src/DateTimeField/DateTimeField.tsx | 8 +- .../src/DateTimeField/DateTimeField.types.ts | 7 +- .../tests/describes.DateTimeField.test.tsx | 3 +- .../src/DateTimeField/useDateTimeField.ts | 3 +- .../src/DateTimePicker/DateTimePicker.tsx | 12 +- .../DateTimePicker/DateTimePicker.types.ts | 8 +- .../DateTimePicker/DateTimePickerToolbar.tsx | 4 +- .../src/DateTimePicker/shared.tsx | 6 +- .../DesktopDatePicker/DesktopDatePicker.tsx | 12 +- .../describes.DesktopDatePicker.test.tsx | 3 +- .../DesktopDateTimePicker.tsx | 18 +- .../DesktopDateTimePickerLayout.tsx | 13 +- .../describes.DesktopDateTimePicker.test.tsx | 7 +- .../DesktopTimePicker/DesktopTimePicker.tsx | 12 +- .../describes.DesktopTimePicker.test.tsx | 3 +- .../src/DigitalClock/DigitalClock.tsx | 8 +- .../tests/describes.DigitalClock.test.tsx | 3 +- .../src/MobileDatePicker/MobileDatePicker.tsx | 12 +- .../tests/describes.MobileDatePicker.test.tsx | 3 +- .../MobileDateTimePicker.tsx | 12 +- .../describes.MobileDateTimePicker.test.tsx | 3 +- .../src/MobileTimePicker/MobileTimePicker.tsx | 12 +- .../tests/describes.MobileTimePicker.test.tsx | 3 +- .../tests/describes.MonthCalendar.test.tsx | 3 +- .../MultiSectionDigitalClock.tsx | 6 +- ...escribes.MultiSectionDigitalClock.test.tsx | 4 +- .../src/PickersLayout/PickersLayout.tsx | 15 +- .../src/PickersLayout/PickersLayout.types.ts | 35 ++-- .../src/PickersLayout/usePickerLayout.tsx | 16 +- .../src/PickersShortcuts/PickersShortcuts.tsx | 26 +-- .../src/StaticDatePicker/StaticDatePicker.tsx | 12 +- .../StaticDateTimePicker.tsx | 12 +- .../src/StaticTimePicker/StaticTimePicker.tsx | 12 +- .../src/TimeClock/TimeClock.tsx | 10 +- .../tests/describes.TimeClock.test.tsx | 3 +- .../src/TimeField/TimeField.tsx | 8 +- .../src/TimeField/TimeField.types.ts | 3 +- .../tests/describes.TimeField.test.tsx | 3 +- .../src/TimeField/useTimeField.ts | 3 +- .../src/TimePicker/TimePicker.tsx | 12 +- .../src/TimePicker/TimePicker.types.ts | 4 +- .../src/TimePicker/TimePickerToolbar.tsx | 4 +- .../x-date-pickers/src/TimePicker/shared.tsx | 6 +- .../tests/describes.YearCalendar.test.tsx | 3 +- .../internals/components/PickersToolbar.tsx | 14 +- .../useDesktopPicker/useDesktopPicker.tsx | 8 +- .../useDesktopPicker.types.ts | 16 +- .../src/internals/hooks/useField/useField.ts | 13 +- .../hooks/useField/useField.types.ts | 140 +++++++------- .../hooks/useField/useField.utils.ts | 9 +- .../useField/useFieldCharacterEditing.ts | 31 ++-- .../internals/hooks/useField/useFieldState.ts | 41 ++-- .../hooks/useField/useFieldV6TextField.ts | 11 +- .../hooks/useMobilePicker/useMobilePicker.tsx | 8 +- .../useMobilePicker/useMobilePicker.types.ts | 14 +- .../internals/hooks/usePicker/usePicker.ts | 14 +- .../hooks/usePicker/usePicker.types.ts | 34 ++-- .../hooks/usePicker/usePickerLayoutProps.ts | 22 +-- .../hooks/usePicker/usePickerOwnerState.ts | 13 +- .../hooks/usePicker/usePickerProvider.ts | 9 +- .../hooks/usePicker/usePickerValue.ts | 44 ++--- .../hooks/usePicker/usePickerValue.types.ts | 175 ++++++++---------- .../hooks/usePicker/usePickerViews.ts | 53 +++--- .../hooks/useStaticPicker/useStaticPicker.tsx | 4 +- .../useStaticPicker/useStaticPicker.types.ts | 12 +- .../internals/hooks/useValueWithTimezone.ts | 40 ++-- .../src/internals/hooks/useViews.tsx | 38 ++-- .../x-date-pickers/src/internals/index.ts | 3 +- .../src/internals/models/fields.ts | 5 +- .../models/props/basePickerProps.tsx | 11 +- .../src/internals/models/props/time.ts | 3 +- .../src/internals/models/props/toolbar.ts | 8 +- .../src/internals/models/value.ts | 23 ++- .../src/internals/utils/valueManagers.ts | 5 +- packages/x-date-pickers/src/models/fields.ts | 31 ++-- .../x-date-pickers/src/models/validation.ts | 17 +- .../src/themeAugmentation/props.d.ts | 5 +- .../src/validation/useValidation.ts | 42 ++--- .../src/validation/validateDate.ts | 3 +- .../src/validation/validateDateTime.ts | 12 +- .../src/validation/validateTime.ts | 3 +- .../pickers/describeValue/describeValue.tsx | 28 +-- .../describeValue/describeValue.types.ts | 32 ++-- .../describeValue/testPickerActionBar.tsx | 4 +- .../testPickerOpenCloseLifeCycle.tsx | 14 +- test/utils/pickers/fields.tsx | 5 +- 200 files changed, 1127 insertions(+), 989 deletions(-) diff --git a/docs/data/date-pickers/custom-layout/AddComponent.js b/docs/data/date-pickers/custom-layout/AddComponent.js index e2c6f4604305..d6e0d1db8b6f 100644 --- a/docs/data/date-pickers/custom-layout/AddComponent.js +++ b/docs/data/date-pickers/custom-layout/AddComponent.js @@ -1,4 +1,5 @@ import * as React from 'react'; + import Box from '@mui/material/Box'; import List from '@mui/material/List'; import ListItem from '@mui/material/ListItem'; diff --git a/docs/data/date-pickers/custom-layout/AddComponent.tsx b/docs/data/date-pickers/custom-layout/AddComponent.tsx index 4a519d02f790..2584a13756ed 100644 --- a/docs/data/date-pickers/custom-layout/AddComponent.tsx +++ b/docs/data/date-pickers/custom-layout/AddComponent.tsx @@ -1,4 +1,5 @@ import * as React from 'react'; +import { Dayjs } from 'dayjs'; import Box from '@mui/material/Box'; import List from '@mui/material/List'; import ListItem from '@mui/material/ListItem'; @@ -57,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-range-picker/BasicRangeShortcuts.tsx b/docs/data/date-pickers/date-range-picker/BasicRangeShortcuts.tsx index 542449ecbd80..765d9e982a81 100644 --- a/docs/data/date-pickers/date-range-picker/BasicRangeShortcuts.tsx +++ b/docs/data/date-pickers/date-range-picker/BasicRangeShortcuts.tsx @@ -1,11 +1,12 @@ import * as React from 'react'; -import dayjs from 'dayjs'; +import dayjs, { Dayjs } from 'dayjs'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { StaticDateRangePicker } from '@mui/x-date-pickers-pro/StaticDateRangePicker'; import { PickersShortcutsItem } from '@mui/x-date-pickers/PickersShortcuts'; +import { DateRange } from '@mui/x-date-pickers-pro/models'; -const shortcutsItems: PickersShortcutsItem[] = [ +const shortcutsItems: PickersShortcutsItem>[] = [ { label: 'This Week', getValue: () => { diff --git a/docs/data/date-pickers/fields/ControlledSelectedSectionsSingleInputRangeField.js b/docs/data/date-pickers/fields/ControlledSelectedSectionsSingleInputRangeField.js index ab660eb554b9..e102430740bd 100644 --- a/docs/data/date-pickers/fields/ControlledSelectedSectionsSingleInputRangeField.js +++ b/docs/data/date-pickers/fields/ControlledSelectedSectionsSingleInputRangeField.js @@ -1,4 +1,5 @@ import * as React from 'react'; + import Typography from '@mui/material/Typography'; import Stack from '@mui/material/Stack'; import Button from '@mui/material/Button'; diff --git a/docs/data/date-pickers/fields/ControlledSelectedSectionsSingleInputRangeField.tsx b/docs/data/date-pickers/fields/ControlledSelectedSectionsSingleInputRangeField.tsx index 745dc885db66..6465a9a84a03 100644 --- a/docs/data/date-pickers/fields/ControlledSelectedSectionsSingleInputRangeField.tsx +++ b/docs/data/date-pickers/fields/ControlledSelectedSectionsSingleInputRangeField.tsx @@ -1,4 +1,5 @@ import * as React from 'react'; +import { Dayjs } from 'dayjs'; import Typography from '@mui/material/Typography'; import Stack from '@mui/material/Stack'; import Button from '@mui/material/Button'; @@ -9,14 +10,14 @@ import { FieldSelectedSections, FieldRef, } from '@mui/x-date-pickers/models'; -import { RangePosition } from '@mui/x-date-pickers-pro/models'; +import { DateRange, RangePosition } from '@mui/x-date-pickers-pro/models'; import { SingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField'; export default function ControlledSelectedSectionsSingleInputRangeField() { const [selectedSections, setSelectedSections] = React.useState(null); const inputRef = React.useRef(null); - const fieldRef = React.useRef>(null); + const fieldRef = React.useRef>>(null); const setSelectedSectionType = ( selectedSectionType: FieldSectionType, diff --git a/docs/data/date-pickers/shortcuts/AdvancedRangeShortcuts.tsx b/docs/data/date-pickers/shortcuts/AdvancedRangeShortcuts.tsx index b9a10aac2623..0cd7c557d3a8 100644 --- a/docs/data/date-pickers/shortcuts/AdvancedRangeShortcuts.tsx +++ b/docs/data/date-pickers/shortcuts/AdvancedRangeShortcuts.tsx @@ -4,8 +4,9 @@ import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { StaticDateRangePicker } from '@mui/x-date-pickers-pro/StaticDateRangePicker'; import { PickersShortcutsItem } from '@mui/x-date-pickers/PickersShortcuts'; +import { DateRange } from '@mui/x-date-pickers-pro/models'; -const shortcutsItems: PickersShortcutsItem[] = [ +const shortcutsItems: PickersShortcutsItem>[] = [ { label: 'Next Available Weekend', getValue: ({ isValid }) => { diff --git a/docs/data/date-pickers/shortcuts/BasicRangeShortcuts.tsx b/docs/data/date-pickers/shortcuts/BasicRangeShortcuts.tsx index fddda2042f82..6c63788ef095 100644 --- a/docs/data/date-pickers/shortcuts/BasicRangeShortcuts.tsx +++ b/docs/data/date-pickers/shortcuts/BasicRangeShortcuts.tsx @@ -1,11 +1,12 @@ import * as React from 'react'; -import dayjs from 'dayjs'; +import dayjs, { Dayjs } from 'dayjs'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { StaticDateRangePicker } from '@mui/x-date-pickers-pro/StaticDateRangePicker'; import { PickersShortcutsItem } from '@mui/x-date-pickers/PickersShortcuts'; +import { DateRange } from '@mui/x-date-pickers-pro/models'; -const shortcutsItems: PickersShortcutsItem[] = [ +const shortcutsItems: PickersShortcutsItem>[] = [ { label: 'This Week', getValue: () => { diff --git a/docs/data/date-pickers/shortcuts/BasicShortcuts.tsx b/docs/data/date-pickers/shortcuts/BasicShortcuts.tsx index 3545b5bac0a5..3ce1d19e7966 100644 --- a/docs/data/date-pickers/shortcuts/BasicShortcuts.tsx +++ b/docs/data/date-pickers/shortcuts/BasicShortcuts.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import dayjs from 'dayjs'; +import dayjs, { Dayjs } from 'dayjs'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { StaticDatePicker } from '@mui/x-date-pickers/StaticDatePicker'; @@ -24,7 +24,7 @@ const getMonthWeekday = ( ); }; -const shortcutsItems: PickersShortcutsItem[] = [ +const shortcutsItems: PickersShortcutsItem[] = [ { label: "New Year's Day", getValue: () => { diff --git a/docs/data/date-pickers/shortcuts/ChangeImportance.tsx b/docs/data/date-pickers/shortcuts/ChangeImportance.tsx index a147a9b74c46..5ef6c1e18d3e 100644 --- a/docs/data/date-pickers/shortcuts/ChangeImportance.tsx +++ b/docs/data/date-pickers/shortcuts/ChangeImportance.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import dayjs from 'dayjs'; +import dayjs, { Dayjs } from 'dayjs'; import Stack from '@mui/material/Stack'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; @@ -30,7 +30,7 @@ const getMonthWeekday = ( ); }; -const shortcutsItems: PickersShortcutsItem[] = [ +const shortcutsItems: PickersShortcutsItem[] = [ { label: "New Year's Day", getValue: () => { diff --git a/docs/data/date-pickers/shortcuts/CustomizedRangeShortcuts.tsx b/docs/data/date-pickers/shortcuts/CustomizedRangeShortcuts.tsx index fc2170ffbd29..87530990c3a8 100644 --- a/docs/data/date-pickers/shortcuts/CustomizedRangeShortcuts.tsx +++ b/docs/data/date-pickers/shortcuts/CustomizedRangeShortcuts.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import dayjs from 'dayjs'; +import dayjs, { Dayjs } from 'dayjs'; import List from '@mui/material/List'; import ListItem from '@mui/material/ListItem'; import Chip from '@mui/material/Chip'; @@ -12,8 +12,9 @@ import { PickersShortcutsItem, PickersShortcutsProps, } from '@mui/x-date-pickers/PickersShortcuts'; +import { DateRange } from '@mui/x-date-pickers-pro/models'; -const shortcutsItems: PickersShortcutsItem[] = [ +const shortcutsItems: PickersShortcutsItem>[] = [ { label: 'This Week', getValue: () => { @@ -54,7 +55,7 @@ const shortcutsItems: PickersShortcutsItem[] = [ { label: 'Reset', getValue: () => [null, null] }, ]; -function CustomRangeShortcuts(props: PickersShortcutsProps) { +function CustomRangeShortcuts(props: PickersShortcutsProps>) { const { items, onChange, isValid, changeImportance = 'accept' } = props; if (items == null || items.length === 0) { diff --git a/docs/data/date-pickers/shortcuts/DisabledDatesShortcuts.tsx b/docs/data/date-pickers/shortcuts/DisabledDatesShortcuts.tsx index ab851fd9258b..e6224b559851 100644 --- a/docs/data/date-pickers/shortcuts/DisabledDatesShortcuts.tsx +++ b/docs/data/date-pickers/shortcuts/DisabledDatesShortcuts.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import dayjs from 'dayjs'; +import dayjs, { Dayjs } from 'dayjs'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { StaticDatePicker } from '@mui/x-date-pickers/StaticDatePicker'; @@ -24,7 +24,7 @@ const getMonthWeekday = ( ); }; -const shortcutsItems: PickersShortcutsItem[] = [ +const shortcutsItems: PickersShortcutsItem[] = [ { label: "New Year's Day", getValue: () => { diff --git a/docs/data/date-pickers/shortcuts/OnChangeShortcutLabel.tsx b/docs/data/date-pickers/shortcuts/OnChangeShortcutLabel.tsx index 56b9c54f33c0..bb5243101049 100644 --- a/docs/data/date-pickers/shortcuts/OnChangeShortcutLabel.tsx +++ b/docs/data/date-pickers/shortcuts/OnChangeShortcutLabel.tsx @@ -32,7 +32,7 @@ const getMonthWeekday = ( ); }; -const shortcutsItems: PickersShortcutsItem[] = [ +const shortcutsItems: PickersShortcutsItem[] = [ { label: "New Year's Day", getValue: () => { diff --git a/docs/data/migration/migration-pickers-v5/MobileKeyboardView.js b/docs/data/migration/migration-pickers-v5/MobileKeyboardView.js index 502bdd7ec9c0..95819b45ed99 100644 --- a/docs/data/migration/migration-pickers-v5/MobileKeyboardView.js +++ b/docs/data/migration/migration-pickers-v5/MobileKeyboardView.js @@ -1,4 +1,5 @@ import * as React from 'react'; + import Box from '@mui/material/Box'; import Stack from '@mui/material/Stack'; import IconButton from '@mui/material/IconButton'; diff --git a/docs/data/migration/migration-pickers-v5/MobileKeyboardView.tsx b/docs/data/migration/migration-pickers-v5/MobileKeyboardView.tsx index 8a8b7511afb3..97a25bbfc036 100644 --- a/docs/data/migration/migration-pickers-v5/MobileKeyboardView.tsx +++ b/docs/data/migration/migration-pickers-v5/MobileKeyboardView.tsx @@ -1,4 +1,5 @@ import * as React from 'react'; +import { Dayjs } from 'dayjs'; import Box from '@mui/material/Box'; import Stack from '@mui/material/Stack'; import IconButton from '@mui/material/IconButton'; @@ -21,7 +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); diff --git a/docs/pages/x/api/date-pickers/date-calendar.json b/docs/pages/x/api/date-pickers/date-calendar.json index 51c6444ec164..e38e7f86edc4 100644 --- a/docs/pages/x/api/date-pickers/date-calendar.json +++ b/docs/pages/x/api/date-pickers/date-calendar.json @@ -34,7 +34,7 @@ "onChange": { "type": { "name": "func" }, "signature": { - "type": "function(value: InferPickerValue, selectionState: PickerSelectionState | undefined, selectedView: TView | undefined) => void", + "type": "function(value: TValue, selectionState: PickerSelectionState | undefined, selectedView: TView | undefined) => void", "describedArgs": ["value", "selectionState", "selectedView"] } }, diff --git a/docs/pages/x/api/date-pickers/date-field.json b/docs/pages/x/api/date-pickers/date-field.json index 70a5d85c1ab2..6a53307f3dc3 100644 --- a/docs/pages/x/api/date-pickers/date-field.json +++ b/docs/pages/x/api/date-pickers/date-field.json @@ -42,7 +42,7 @@ "onChange": { "type": { "name": "func" }, "signature": { - "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, @@ -50,7 +50,7 @@ "onError": { "type": { "name": "func" }, "signature": { - "type": "function(error: TError, value: InferPickerValue) => void", + "type": "function(error: TError, value: TValue) => void", "describedArgs": ["error", "value"] } }, diff --git a/docs/pages/x/api/date-pickers/date-picker.json b/docs/pages/x/api/date-pickers/date-picker.json index 7b7b27290afe..e27298dacae1 100644 --- a/docs/pages/x/api/date-pickers/date-picker.json +++ b/docs/pages/x/api/date-pickers/date-picker.json @@ -45,14 +45,14 @@ "onAccept": { "type": { "name": "func" }, "signature": { - "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, "onChange": { "type": { "name": "func" }, "signature": { - "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, @@ -60,7 +60,7 @@ "onError": { "type": { "name": "func" }, "signature": { - "type": "function(error: TError, value: InferPickerValue) => void", + "type": "function(error: TError, value: TValue) => void", "describedArgs": ["error", "value"] } }, 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 6bf85b33aa76..c8273a887566 100644 --- a/docs/pages/x/api/date-pickers/date-range-calendar.json +++ b/docs/pages/x/api/date-pickers/date-range-calendar.json @@ -43,7 +43,7 @@ "onChange": { "type": { "name": "func" }, "signature": { - "type": "function(value: InferPickerValue, selectionState: PickerSelectionState | undefined, selectedView: TView | undefined) => void", + "type": "function(value: TValue, selectionState: PickerSelectionState | undefined, selectedView: TView | undefined) => void", "describedArgs": ["value", "selectionState", "selectedView"] } }, 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 80c20357f818..9ee6734f4384 100644 --- a/docs/pages/x/api/date-pickers/date-range-picker.json +++ b/docs/pages/x/api/date-pickers/date-range-picker.json @@ -55,14 +55,14 @@ "onAccept": { "type": { "name": "func" }, "signature": { - "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, "onChange": { "type": { "name": "func" }, "signature": { - "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, @@ -70,7 +70,7 @@ "onError": { "type": { "name": "func" }, "signature": { - "type": "function(error: TError, value: InferPickerValue) => void", + "type": "function(error: TError, value: TValue) => void", "describedArgs": ["error", "value"] } }, 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 902607f0b4bd..8ddb6b01c5cc 100644 --- a/docs/pages/x/api/date-pickers/date-time-field.json +++ b/docs/pages/x/api/date-pickers/date-time-field.json @@ -49,7 +49,7 @@ "onChange": { "type": { "name": "func" }, "signature": { - "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, @@ -57,7 +57,7 @@ "onError": { "type": { "name": "func" }, "signature": { - "type": "function(error: TError, value: InferPickerValue) => void", + "type": "function(error: TError, value: TValue) => void", "describedArgs": ["error", "value"] } }, 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 ce1823f6ce4f..b2443301cad9 100644 --- a/docs/pages/x/api/date-pickers/date-time-picker.json +++ b/docs/pages/x/api/date-pickers/date-time-picker.json @@ -53,14 +53,14 @@ "onAccept": { "type": { "name": "func" }, "signature": { - "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, "onChange": { "type": { "name": "func" }, "signature": { - "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, @@ -68,7 +68,7 @@ "onError": { "type": { "name": "func" }, "signature": { - "type": "function(error: TError, value: InferPickerValue) => void", + "type": "function(error: TError, value: TValue) => void", "describedArgs": ["error", "value"] } }, 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 59e088e5d280..add2fd7dede4 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 @@ -62,14 +62,14 @@ "onAccept": { "type": { "name": "func" }, "signature": { - "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, "onChange": { "type": { "name": "func" }, "signature": { - "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, @@ -77,7 +77,7 @@ "onError": { "type": { "name": "func" }, "signature": { - "type": "function(error: TError, value: InferPickerValue) => void", + "type": "function(error: TError, value: TValue) => void", "describedArgs": ["error", "value"] } }, 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 cbe53bb4fe23..1418cf907e00 100644 --- a/docs/pages/x/api/date-pickers/desktop-date-picker.json +++ b/docs/pages/x/api/date-pickers/desktop-date-picker.json @@ -41,14 +41,14 @@ "onAccept": { "type": { "name": "func" }, "signature": { - "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, "onChange": { "type": { "name": "func" }, "signature": { - "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, @@ -56,7 +56,7 @@ "onError": { "type": { "name": "func" }, "signature": { - "type": "function(error: TError, value: InferPickerValue) => void", + "type": "function(error: TError, value: TValue) => void", "describedArgs": ["error", "value"] } }, 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 64329dc40481..23fd6ab65816 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 @@ -51,14 +51,14 @@ "onAccept": { "type": { "name": "func" }, "signature": { - "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, "onChange": { "type": { "name": "func" }, "signature": { - "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, @@ -66,7 +66,7 @@ "onError": { "type": { "name": "func" }, "signature": { - "type": "function(error: TError, value: InferPickerValue) => void", + "type": "function(error: TError, value: TValue) => void", "describedArgs": ["error", "value"] } }, 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 08acff4c444d..98a3cad44b43 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 @@ -49,14 +49,14 @@ "onAccept": { "type": { "name": "func" }, "signature": { - "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, "onChange": { "type": { "name": "func" }, "signature": { - "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, @@ -64,7 +64,7 @@ "onError": { "type": { "name": "func" }, "signature": { - "type": "function(error: TError, value: InferPickerValue) => void", + "type": "function(error: TError, value: TValue) => void", "describedArgs": ["error", "value"] } }, 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 3cd1b911bece..6706455ebb5b 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 @@ -58,14 +58,14 @@ "onAccept": { "type": { "name": "func" }, "signature": { - "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, "onChange": { "type": { "name": "func" }, "signature": { - "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, @@ -73,7 +73,7 @@ "onError": { "type": { "name": "func" }, "signature": { - "type": "function(error: TError, value: InferPickerValue) => void", + "type": "function(error: TError, value: TValue) => void", "describedArgs": ["error", "value"] } }, 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 6bd4992c9ce6..d372b04bdfc0 100644 --- a/docs/pages/x/api/date-pickers/desktop-time-picker.json +++ b/docs/pages/x/api/date-pickers/desktop-time-picker.json @@ -28,14 +28,14 @@ "onAccept": { "type": { "name": "func" }, "signature": { - "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, "onChange": { "type": { "name": "func" }, "signature": { - "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, @@ -43,7 +43,7 @@ "onError": { "type": { "name": "func" }, "signature": { - "type": "function(error: TError, value: InferPickerValue) => void", + "type": "function(error: TError, value: TValue) => void", "describedArgs": ["error", "value"] } }, diff --git a/docs/pages/x/api/date-pickers/digital-clock.json b/docs/pages/x/api/date-pickers/digital-clock.json index a18b2ace56c7..1d06e31bfb38 100644 --- a/docs/pages/x/api/date-pickers/digital-clock.json +++ b/docs/pages/x/api/date-pickers/digital-clock.json @@ -15,7 +15,7 @@ "onChange": { "type": { "name": "func" }, "signature": { - "type": "function(value: InferPickerValue, selectionState: PickerSelectionState | undefined, selectedView: TView | undefined) => void", + "type": "function(value: TValue, selectionState: PickerSelectionState | undefined, selectedView: TView | undefined) => void", "describedArgs": ["value", "selectionState", "selectedView"] } }, 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 f1c1c3fa9846..37e3b9e9be0b 100644 --- a/docs/pages/x/api/date-pickers/mobile-date-picker.json +++ b/docs/pages/x/api/date-pickers/mobile-date-picker.json @@ -41,14 +41,14 @@ "onAccept": { "type": { "name": "func" }, "signature": { - "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, "onChange": { "type": { "name": "func" }, "signature": { - "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, @@ -56,7 +56,7 @@ "onError": { "type": { "name": "func" }, "signature": { - "type": "function(error: TError, value: InferPickerValue) => void", + "type": "function(error: TError, value: TValue) => void", "describedArgs": ["error", "value"] } }, 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 6f45cc30f39f..82670cc2d753 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 @@ -47,14 +47,14 @@ "onAccept": { "type": { "name": "func" }, "signature": { - "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, "onChange": { "type": { "name": "func" }, "signature": { - "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, @@ -62,7 +62,7 @@ "onError": { "type": { "name": "func" }, "signature": { - "type": "function(error: TError, value: InferPickerValue) => void", + "type": "function(error: TError, value: TValue) => void", "describedArgs": ["error", "value"] } }, 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 8279db1828a3..23adb960d841 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 @@ -49,14 +49,14 @@ "onAccept": { "type": { "name": "func" }, "signature": { - "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, "onChange": { "type": { "name": "func" }, "signature": { - "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, @@ -64,7 +64,7 @@ "onError": { "type": { "name": "func" }, "signature": { - "type": "function(error: TError, value: InferPickerValue) => void", + "type": "function(error: TError, value: TValue) => void", "describedArgs": ["error", "value"] } }, 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 560915cf7b4b..32e3b7676d7d 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 @@ -54,14 +54,14 @@ "onAccept": { "type": { "name": "func" }, "signature": { - "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, "onChange": { "type": { "name": "func" }, "signature": { - "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, @@ -69,7 +69,7 @@ "onError": { "type": { "name": "func" }, "signature": { - "type": "function(error: TError, value: InferPickerValue) => void", + "type": "function(error: TError, value: TValue) => void", "describedArgs": ["error", "value"] } }, 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 c0c818dd9208..c3898c0d4a92 100644 --- a/docs/pages/x/api/date-pickers/mobile-time-picker.json +++ b/docs/pages/x/api/date-pickers/mobile-time-picker.json @@ -28,14 +28,14 @@ "onAccept": { "type": { "name": "func" }, "signature": { - "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, "onChange": { "type": { "name": "func" }, "signature": { - "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, @@ -43,7 +43,7 @@ "onError": { "type": { "name": "func" }, "signature": { - "type": "function(error: TError, value: InferPickerValue) => void", + "type": "function(error: TError, value: TValue) => void", "describedArgs": ["error", "value"] } }, 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 2c4e917acab5..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 @@ -25,14 +25,14 @@ "onChange": { "type": { "name": "func" }, "signature": { - "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, "onError": { "type": { "name": "func" }, "signature": { - "type": "function(error: TError, value: InferPickerValue) => void", + "type": "function(error: TError, value: TValue) => void", "describedArgs": ["error", "value"] } }, 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 5d8c4fc3e895..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 @@ -32,14 +32,14 @@ "onChange": { "type": { "name": "func" }, "signature": { - "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, "onError": { "type": { "name": "func" }, "signature": { - "type": "function(error: TError, value: InferPickerValue) => void", + "type": "function(error: TError, value: TValue) => void", "describedArgs": ["error", "value"] } }, 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 25b17636d1fe..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 @@ -28,14 +28,14 @@ "onChange": { "type": { "name": "func" }, "signature": { - "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, "onError": { "type": { "name": "func" }, "signature": { - "type": "function(error: TError, value: InferPickerValue) => void", + "type": "function(error: TError, value: TValue) => void", "describedArgs": ["error", "value"] } }, 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 2789cb593ce7..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 @@ -20,7 +20,7 @@ "onChange": { "type": { "name": "func" }, "signature": { - "type": "function(value: InferPickerValue, selectionState: PickerSelectionState | undefined, selectedView: TView | undefined) => void", + "type": "function(value: TValue, selectionState: PickerSelectionState | undefined, selectedView: TView | undefined) => void", "describedArgs": ["value", "selectionState", "selectedView"] } }, 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 958a4ac0a4e3..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 @@ -43,7 +43,7 @@ "onChange": { "type": { "name": "func" }, "signature": { - "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, @@ -51,7 +51,7 @@ "onError": { "type": { "name": "func" }, "signature": { - "type": "function(error: TError, value: InferPickerValue) => void", + "type": "function(error: TError, value: TValue) => void", "describedArgs": ["error", "value"] } }, 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 872b76d0f00b..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 @@ -50,7 +50,7 @@ "onChange": { "type": { "name": "func" }, "signature": { - "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, @@ -58,7 +58,7 @@ "onError": { "type": { "name": "func" }, "signature": { - "type": "function(error: TError, value: InferPickerValue) => void", + "type": "function(error: TError, value: TValue) => void", "describedArgs": ["error", "value"] } }, 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 98339e02b012..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 @@ -46,7 +46,7 @@ "onChange": { "type": { "name": "func" }, "signature": { - "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, @@ -54,7 +54,7 @@ "onError": { "type": { "name": "func" }, "signature": { - "type": "function(error: TError, value: InferPickerValue) => void", + "type": "function(error: TError, value: TValue) => void", "describedArgs": ["error", "value"] } }, 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 a1f77f36f12e..2c656b2b01cb 100644 --- a/docs/pages/x/api/date-pickers/static-date-picker.json +++ b/docs/pages/x/api/date-pickers/static-date-picker.json @@ -32,14 +32,14 @@ "onAccept": { "type": { "name": "func" }, "signature": { - "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, "onChange": { "type": { "name": "func" }, "signature": { - "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, @@ -51,7 +51,7 @@ "onError": { "type": { "name": "func" }, "signature": { - "type": "function(error: TError, value: InferPickerValue) => void", + "type": "function(error: TError, value: TValue) => void", "describedArgs": ["error", "value"] } }, 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 9b55410b01e3..5dace702ff42 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 @@ -42,14 +42,14 @@ "onAccept": { "type": { "name": "func" }, "signature": { - "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, "onChange": { "type": { "name": "func" }, "signature": { - "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, @@ -61,7 +61,7 @@ "onError": { "type": { "name": "func" }, "signature": { - "type": "function(error: TError, value: InferPickerValue) => void", + "type": "function(error: TError, value: TValue) => void", "describedArgs": ["error", "value"] } }, 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 2f26cd38a343..e265e0d208c1 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 @@ -40,14 +40,14 @@ "onAccept": { "type": { "name": "func" }, "signature": { - "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, "onChange": { "type": { "name": "func" }, "signature": { - "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, @@ -59,7 +59,7 @@ "onError": { "type": { "name": "func" }, "signature": { - "type": "function(error: TError, value: InferPickerValue) => void", + "type": "function(error: TError, value: TValue) => void", "describedArgs": ["error", "value"] } }, 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 3a416080312f..2e9251b190fc 100644 --- a/docs/pages/x/api/date-pickers/static-time-picker.json +++ b/docs/pages/x/api/date-pickers/static-time-picker.json @@ -19,14 +19,14 @@ "onAccept": { "type": { "name": "func" }, "signature": { - "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, "onChange": { "type": { "name": "func" }, "signature": { - "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, @@ -38,7 +38,7 @@ "onError": { "type": { "name": "func" }, "signature": { - "type": "function(error: TError, value: InferPickerValue) => void", + "type": "function(error: TError, value: TValue) => void", "describedArgs": ["error", "value"] } }, diff --git a/docs/pages/x/api/date-pickers/time-clock.json b/docs/pages/x/api/date-pickers/time-clock.json index c634a59038af..2b59bb35d2d4 100644 --- a/docs/pages/x/api/date-pickers/time-clock.json +++ b/docs/pages/x/api/date-pickers/time-clock.json @@ -21,7 +21,7 @@ "onChange": { "type": { "name": "func" }, "signature": { - "type": "function(value: InferPickerValue, selectionState: PickerSelectionState | undefined, selectedView: TView | undefined) => void", + "type": "function(value: TValue, selectionState: PickerSelectionState | undefined, selectedView: TView | undefined) => void", "describedArgs": ["value", "selectionState", "selectedView"] } }, diff --git a/docs/pages/x/api/date-pickers/time-field.json b/docs/pages/x/api/date-pickers/time-field.json index 1c0dd01f9f32..fb99ace144ee 100644 --- a/docs/pages/x/api/date-pickers/time-field.json +++ b/docs/pages/x/api/date-pickers/time-field.json @@ -45,7 +45,7 @@ "onChange": { "type": { "name": "func" }, "signature": { - "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, @@ -53,7 +53,7 @@ "onError": { "type": { "name": "func" }, "signature": { - "type": "function(error: TError, value: InferPickerValue) => void", + "type": "function(error: TError, value: TValue) => void", "describedArgs": ["error", "value"] } }, diff --git a/docs/pages/x/api/date-pickers/time-picker.json b/docs/pages/x/api/date-pickers/time-picker.json index 19f52eff4cc3..66c11b29ef3e 100644 --- a/docs/pages/x/api/date-pickers/time-picker.json +++ b/docs/pages/x/api/date-pickers/time-picker.json @@ -32,14 +32,14 @@ "onAccept": { "type": { "name": "func" }, "signature": { - "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, "onChange": { "type": { "name": "func" }, "signature": { - "type": "function(value: InferPickerValue, context: FieldChangeHandlerContext) => void", + "type": "function(value: TValue, context: FieldChangeHandlerContext) => void", "describedArgs": ["value", "context"] } }, @@ -47,7 +47,7 @@ "onError": { "type": { "name": "func" }, "signature": { - "type": "function(error: TError, value: InferPickerValue) => void", + "type": "function(error: TError, value: TValue) => void", "describedArgs": ["error", "value"] } }, diff --git a/docs/src/modules/components/PickersPlayground.tsx b/docs/src/modules/components/PickersPlayground.tsx index 188921e6e3e9..7366b804e184 100644 --- a/docs/src/modules/components/PickersPlayground.tsx +++ b/docs/src/modules/components/PickersPlayground.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { alpha, styled } from '@mui/material/styles'; -import dayjs from 'dayjs'; +import dayjs, { Dayjs } from 'dayjs'; import Box from '@mui/material/Box'; import FormControl from '@mui/material/FormControl'; import FormLabel from '@mui/material/FormLabel'; @@ -33,6 +33,7 @@ import { } from '@mui/x-date-pickers/StaticDateTimePicker'; import { DateOrTimeView } from '@mui/x-date-pickers/models'; import { PickersShortcutsItem } from '@mui/x-date-pickers/PickersShortcuts'; +import { DateRange } from '@mui/x-date-pickers-pro/models'; import { DesktopDateRangePicker } from '@mui/x-date-pickers-pro/DesktopDateRangePicker'; import { MobileDateRangePicker } from '@mui/x-date-pickers-pro/MobileDateRangePicker'; import { StaticDateRangePicker } from '@mui/x-date-pickers-pro/StaticDateRangePicker'; @@ -175,7 +176,7 @@ interface ComponentFamilySet { props: Record; } -const shortcutsItems: PickersShortcutsItem[] = [ +const shortcutsItems: PickersShortcutsItem>[] = [ { label: 'This Week', getValue: () => { diff --git a/docs/src/modules/components/overview/mainDemo/Clock.tsx b/docs/src/modules/components/overview/mainDemo/Clock.tsx index 75d467ebf5b7..6ca16f44532e 100644 --- a/docs/src/modules/components/overview/mainDemo/Clock.tsx +++ b/docs/src/modules/components/overview/mainDemo/Clock.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import dayjs from 'dayjs'; +import dayjs, { Dayjs } from 'dayjs'; import { styled } from '@mui/material/styles'; import Card from '@mui/material/Card'; import { StaticTimePicker } from '@mui/x-date-pickers/StaticTimePicker'; @@ -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 734ddaea4a75..c8a9df4ce611 100644 --- a/docs/src/modules/components/overview/mainDemo/DateRangeWithShortcuts.tsx +++ b/docs/src/modules/components/overview/mainDemo/DateRangeWithShortcuts.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import dayjs from 'dayjs'; +import dayjs, { Dayjs } from 'dayjs'; import { useTheme } from '@mui/material/styles'; import useMediaQuery from '@mui/material/useMediaQuery'; import Card from '@mui/material/Card'; @@ -12,8 +12,9 @@ import { PickersLayoutRoot, PickersLayoutContentWrapper, } from '@mui/x-date-pickers/PickersLayout'; +import { DateRange } from '@mui/x-date-pickers-pro/models'; -const shortcutsItems: PickersShortcutsItem[] = [ +const shortcutsItems: PickersShortcutsItem>[] = [ { label: 'This Week', getValue: () => { @@ -54,7 +55,7 @@ const shortcutsItems: PickersShortcutsItem[] = [ { label: 'Reset', getValue: () => [null, null] }, ]; -interface CustomLayoutProps extends PickersLayoutProps { +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 75fa5a658682..b6959d39ed3f 100644 --- a/docs/src/modules/components/overview/mainDemo/DigitalClock.tsx +++ b/docs/src/modules/components/overview/mainDemo/DigitalClock.tsx @@ -1,4 +1,5 @@ import * as React from 'react'; +import { Dayjs } from 'dayjs'; import { styled } from '@mui/material/styles'; import Card from '@mui/material/Card'; import Paper from '@mui/material/Paper'; @@ -23,7 +24,7 @@ const StyledLayout = styled(PickersLayoutRoot)({ }, }); -function CustomLayout(props: PickersLayoutProps) { +function CustomLayout(props: PickersLayoutProps) { const { actionBar, content } = usePickerLayout(props); return ( diff --git a/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.tsx b/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.tsx index 3a4135e7b4d3..6c6379c2b433 100644 --- a/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.tsx +++ b/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.tsx @@ -215,7 +215,7 @@ const DateRangeCalendar = React.forwardRef(function DateRangeCalendar( } = props; const { value, handleValueChange, timezone } = useControlledValueWithTimezone< - true, + PickerRangeValue, NonNullable >({ name: 'DateRangeCalendar', @@ -226,7 +226,7 @@ const DateRangeCalendar = React.forwardRef(function DateRangeCalendar( valueManager: rangeValueManager, }); - const { setValueAndGoToNextView, view } = useViews({ + const { setValueAndGoToNextView, view } = useViews({ view: inView, views, openTo, @@ -718,9 +718,9 @@ DateRangeCalendar.propTypes = { minDate: PropTypes.object, /** * Callback fired when the value changes. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @template TView The view type. Will be one of date or time views. - * @param {InferPickerValue} value The new value. + * @param {TValue} value The new value. * @param {PickerSelectionState | undefined} selectionState Indicates if the date selection is complete. * @param {TView | undefined} selectedView Indicates the view in which the selection has been made. */ 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 ca369afa41e3..daf02127d032 100644 --- a/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.types.ts +++ b/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.types.ts @@ -93,7 +93,7 @@ export interface ExportedDateRangeCalendarProps export interface DateRangeCalendarProps extends ExportedDateRangeCalendarProps, UseRangePositionProps, - ExportedUseViewsOptions { + ExportedUseViewsOptions { /** * The selected value. * Used when the component is controlled. diff --git a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.tsx b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.tsx index 6d3d87856f63..76bb9c9804df 100644 --- a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.tsx @@ -193,17 +193,17 @@ DateRangePicker.propTypes = { name: PropTypes.string, /** * Callback fired when the value is accepted. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @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 {InferPickerValue} value The value that was just accepted. + * @param {TValue} value The value that was just accepted. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onAccept: PropTypes.func, /** * Callback fired when the value changes. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @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 {InferPickerValue} value The new value. + * @param {TValue} value The new value. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onChange: PropTypes.func, @@ -217,9 +217,9 @@ DateRangePicker.propTypes = { * When a validation error is detected, the `error` parameter contains a non-null value. * This can be used to render an appropriate form error. * @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. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @param {TError} error The reason why the current value is not valid. - * @param {InferPickerValue} value The value associated with the error. + * @param {TValue} value The value associated with the error. */ onError: PropTypes.func, /** 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 855dc8010b89..013359cc8f08 100644 --- a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.types.ts +++ b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.types.ts @@ -1,4 +1,4 @@ -import { BaseSingleInputFieldProps } from '@mui/x-date-pickers/internals'; +import { BaseSingleInputFieldProps, PickerRangeValue } from '@mui/x-date-pickers/internals'; import { DesktopDateRangePickerProps, DesktopDateRangePickerSlots, @@ -46,4 +46,8 @@ export interface DateRangePickerProps = ValidateDateRangeProps & - BaseSingleInputFieldProps; + BaseSingleInputFieldProps< + PickerRangeValue, + TEnableAccessibleFieldDOMStructure, + DateRangeValidationError + >; diff --git a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerToolbar.tsx b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerToolbar.tsx index 80874d788a89..0fcda265e661 100644 --- a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerToolbar.tsx +++ b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerToolbar.tsx @@ -11,6 +11,7 @@ import { useUtils, BaseToolbarProps, ExportedBaseToolbarProps, + PickerRangeValue, } from '@mui/x-date-pickers/internals'; import { usePickerTranslations } from '@mui/x-date-pickers/hooks'; import { UseRangePositionResponse } from '../internals/hooks/useRangePosition'; @@ -31,7 +32,7 @@ const useUtilityClasses = (ownerState: DateRangePickerToolbarProps) => { export interface DateRangePickerToolbarProps extends ExportedDateRangePickerToolbarProps, - Omit, 'onChange' | 'isLandscape'>, + Omit, 'onChange' | 'isLandscape'>, Pick {} export interface ExportedDateRangePickerToolbarProps extends ExportedBaseToolbarProps { diff --git a/packages/x-date-pickers-pro/src/DateRangePicker/shared.tsx b/packages/x-date-pickers-pro/src/DateRangePicker/shared.tsx index 4c44f8e7fab2..b098d57cfb0f 100644 --- a/packages/x-date-pickers-pro/src/DateRangePicker/shared.tsx +++ b/packages/x-date-pickers-pro/src/DateRangePicker/shared.tsx @@ -9,6 +9,7 @@ import { BaseDateValidationProps, BasePickerInputProps, PickerViewRendererLookup, + PickerRangeValue, } from '@mui/x-date-pickers/internals'; import { DateRangeValidationError } from '../models'; import { @@ -37,7 +38,7 @@ export interface BaseDateRangePickerSlotProps extends DateRangeCalendarSlotProps export interface BaseDateRangePickerProps extends Omit< - BasePickerInputProps, + BasePickerInputProps, 'view' | 'views' | 'openTo' | 'onViewChange' | 'orientation' >, ExportedDateRangeCalendarProps { @@ -57,7 +58,7 @@ export interface BaseDateRangePickerProps * If `undefined`, internally defined view will be used. */ viewRenderers?: Partial< - PickerViewRendererLookup, {}> + PickerViewRendererLookup, {}> >; } diff --git a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePicker.tsx b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePicker.tsx index c4d6e1d2789b..048716130d04 100644 --- a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePicker.tsx @@ -226,17 +226,17 @@ DateTimeRangePicker.propTypes = { name: PropTypes.string, /** * Callback fired when the value is accepted. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @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 {InferPickerValue} value The value that was just accepted. + * @param {TValue} value The value that was just accepted. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onAccept: PropTypes.func, /** * Callback fired when the value changes. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @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 {InferPickerValue} value The new value. + * @param {TValue} value The new value. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onChange: PropTypes.func, @@ -250,9 +250,9 @@ DateTimeRangePicker.propTypes = { * When a validation error is detected, the `error` parameter contains a non-null value. * This can be used to render an appropriate form error. * @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. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @param {TError} error The reason why the current value is not valid. - * @param {InferPickerValue} value The value associated with the error. + * @param {TValue} value The value associated with the error. */ onError: PropTypes.func, /** 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 b916bfb9b12a..509f8246c2ce 100644 --- a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePicker.types.ts +++ b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePicker.types.ts @@ -1,4 +1,4 @@ -import { BaseSingleInputFieldProps } from '@mui/x-date-pickers/internals'; +import { BaseSingleInputFieldProps, PickerRangeValue } from '@mui/x-date-pickers/internals'; import { DesktopDateTimeRangePickerProps, DesktopDateTimeRangePickerSlots, @@ -47,4 +47,8 @@ export interface DateTimeRangePickerProps = ValidateDateTimeRangeProps & - BaseSingleInputFieldProps; + BaseSingleInputFieldProps< + PickerRangeValue, + TEnableAccessibleFieldDOMStructure, + DateTimeRangeValidationError + >; diff --git a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerTimeWrapper.tsx b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerTimeWrapper.tsx index 832d51e38e2b..653a818b33b6 100644 --- a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerTimeWrapper.tsx +++ b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerTimeWrapper.tsx @@ -35,7 +35,7 @@ export type DateTimeRangePickerTimeWrapperProps< selectionState: PickerSelectionState, selectedView: TView, ) => void; - viewRenderer?: PickerViewRenderer | null; + viewRenderer?: PickerViewRenderer | null; openTo?: TView; }; diff --git a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerToolbar.tsx b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerToolbar.tsx index bf05e333f0c6..00e362c8e067 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 { usePickerTranslations } from '@mui/x-date-pickers/hooks'; import { PickerValidDate } from '@mui/x-date-pickers/models'; @@ -38,7 +39,7 @@ const useUtilityClasses = (ownerState: DateTimeRangePickerToolbarProps) => { type DateTimeRangeViews = Exclude; export interface DateTimeRangePickerToolbarProps - extends BaseToolbarProps, + extends BaseToolbarProps, Pick, ExportedDateTimeRangePickerToolbarProps { ampm?: boolean; diff --git a/packages/x-date-pickers-pro/src/DateTimeRangePicker/shared.tsx b/packages/x-date-pickers-pro/src/DateTimeRangePicker/shared.tsx index 575c9fd41bea..d3f2d3127fd9 100644 --- a/packages/x-date-pickers-pro/src/DateTimeRangePicker/shared.tsx +++ b/packages/x-date-pickers-pro/src/DateTimeRangePicker/shared.tsx @@ -17,6 +17,7 @@ import { UseViewsOptions, DateTimeValidationProps, DateOrTimeViewWithMeridiem, + PickerRangeValue, } from '@mui/x-date-pickers/internals'; import { TimeViewRendererProps } from '@mui/x-date-pickers/timeViewRenderers'; import { DigitalClockSlots, DigitalClockSlotProps } from '@mui/x-date-pickers/DigitalClock'; @@ -77,7 +78,7 @@ export type DateTimeRangePickerRenderers< TView extends DateOrTimeViewWithMeridiem, TAdditionalProps extends {} = {}, > = PickerViewRendererLookup< - true, + PickerRangeValue, TView, Omit, 'view' | 'slots' | 'slotProps'> & Omit< @@ -89,13 +90,15 @@ export type DateTimeRangePickerRenderers< export interface BaseDateTimeRangePickerProps extends Omit< - BasePickerInputProps, + BasePickerInputProps, 'orientation' | 'views' | 'openTo' >, ExportedDateRangeCalendarProps, BaseDateValidationProps, DesktopOnlyTimePickerProps, - Partial, 'openTo' | 'views'>>, + Partial< + Pick, 'openTo' | 'views'> + >, DateTimeValidationProps { /** * Overridable component slots. diff --git a/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.tsx b/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.tsx index 6e24f1f599b7..89c2044978b4 100644 --- a/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.tsx @@ -1,7 +1,11 @@ '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 } from '@mui/x-date-pickers/models'; import resolveComponentProps from '@mui/utils/resolveComponentProps'; @@ -42,7 +46,7 @@ const DesktopDateRangePicker = React.forwardRef(function DesktopDateRangePicker< DesktopDateRangePickerProps >(inProps, 'MuiDesktopDateRangePicker'); - const viewRenderers: PickerViewRendererLookup = { + const viewRenderers: PickerViewRendererLookup = { day: renderDateRangeViewCalendar, ...defaultizedProps.viewRenderers, }; @@ -230,17 +234,17 @@ DesktopDateRangePicker.propTypes = { name: PropTypes.string, /** * Callback fired when the value is accepted. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @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 {InferPickerValue} value The value that was just accepted. + * @param {TValue} value The value that was just accepted. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onAccept: PropTypes.func, /** * Callback fired when the value changes. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @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 {InferPickerValue} value The new value. + * @param {TValue} value The new value. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onChange: PropTypes.func, @@ -254,9 +258,9 @@ DesktopDateRangePicker.propTypes = { * When a validation error is detected, the `error` parameter contains a non-null value. * This can be used to render an appropriate form error. * @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. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @param {TError} error The reason why the current value is not valid. - * @param {InferPickerValue} value The value associated with the error. + * @param {TValue} value The value associated with the error. */ onError: PropTypes.func, /** diff --git a/packages/x-date-pickers-pro/src/DesktopDateRangePicker/tests/describes.DesktopDateRangePicker.test.tsx b/packages/x-date-pickers-pro/src/DesktopDateRangePicker/tests/describes.DesktopDateRangePicker.test.tsx index 69964b4838ba..f9255bdd65af 100644 --- a/packages/x-date-pickers-pro/src/DesktopDateRangePicker/tests/describes.DesktopDateRangePicker.test.tsx +++ b/packages/x-date-pickers-pro/src/DesktopDateRangePicker/tests/describes.DesktopDateRangePicker.test.tsx @@ -12,7 +12,7 @@ import { } from 'test/utils/pickers'; import { DesktopDateRangePicker } from '@mui/x-date-pickers-pro/DesktopDateRangePicker'; import { SingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField'; -import { DateRange } from '@mui/x-date-pickers-pro/models'; +import { PickerNonNullableRangeValue, PickerRangeValue } from '@mui/x-date-pickers/internals'; import { describeConformance } from 'test/utils/describeConformance'; describe(' - Describes', () => { @@ -46,7 +46,7 @@ describe(' - Describes', () => { ], })); - describeValue(DesktopDateRangePicker, () => ({ + describeValue(DesktopDateRangePicker, () => ({ render, componentFamily: 'picker', type: 'date-range', @@ -77,7 +77,7 @@ describe(' - Describes', () => { value, { isOpened, applySameValue, setEndDate = false, selectSection, pressKey }, ) => { - let newValue: DateRange; + let newValue: PickerNonNullableRangeValue; if (applySameValue) { newValue = value; } else if (setEndDate) { @@ -102,7 +102,7 @@ describe(' - Describes', () => { })); // With single input field - describeValue(DesktopDateRangePicker, () => ({ + describeValue(DesktopDateRangePicker, () => ({ render, componentFamily: 'picker', type: 'date-range', @@ -139,7 +139,7 @@ describe(' - Describes', () => { value, { isOpened, applySameValue, setEndDate = false, selectSection, pressKey }, ) => { - let newValue: DateRange; + let newValue: PickerNonNullableRangeValue; if (applySameValue) { newValue = value; } else if (setEndDate) { diff --git a/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.tsx b/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.tsx index d26bc2f32edf..4c93efaf101e 100644 --- a/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.tsx @@ -9,6 +9,7 @@ import { PickerViewsRendererProps, resolveDateTimeFormat, useUtils, + PickerRangeValue, } from '@mui/x-date-pickers/internals'; import { extractValidationProps } from '@mui/x-date-pickers/validation'; import { PickerOwnerState } from '@mui/x-date-pickers/models'; @@ -50,7 +51,7 @@ const rendererInterceptor = function rendererInterceptor< inViewRenderers: DateTimeRangePickerRenderers, popperView: DateTimeRangePickerView, rendererProps: PickerViewsRendererProps< - true, + PickerRangeValue, DateTimeRangePickerView, DefaultizedProps< Omit< @@ -102,7 +103,7 @@ const rendererInterceptor = function rendererInterceptor< openTo={isInternalTimeView(openTo) ? openTo : 'hours'} viewRenderer={ inViewRenderers[isTimeViewActive ? popperView : 'hours'] as PickerViewRenderer< - true, + PickerRangeValue, DateTimeRangePickerView, any, {} @@ -391,17 +392,17 @@ DesktopDateTimeRangePicker.propTypes = { name: PropTypes.string, /** * Callback fired when the value is accepted. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @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 {InferPickerValue} value The value that was just accepted. + * @param {TValue} value The value that was just accepted. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onAccept: PropTypes.func, /** * Callback fired when the value changes. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @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 {InferPickerValue} value The new value. + * @param {TValue} value The new value. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onChange: PropTypes.func, @@ -415,9 +416,9 @@ DesktopDateTimeRangePicker.propTypes = { * When a validation error is detected, the `error` parameter contains a non-null value. * This can be used to render an appropriate form error. * @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. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @param {TError} error The reason why the current value is not valid. - * @param {InferPickerValue} value The value associated with the error. + * @param {TValue} value The value associated with the error. */ onError: PropTypes.func, /** diff --git a/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/tests/describes.DesktopDateTimeRangePicker.test.tsx b/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/tests/describes.DesktopDateTimeRangePicker.test.tsx index 25c6683aac2f..dfdd329087ff 100644 --- a/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/tests/describes.DesktopDateTimeRangePicker.test.tsx +++ b/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/tests/describes.DesktopDateTimeRangePicker.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { describeConformance, fireEvent, screen } from '@mui/internal-test-utils'; -import { DateRange } from '@mui/x-date-pickers-pro/models'; +import { PickerNonNullableRangeValue, PickerRangeValue } from '@mui/x-date-pickers/internals'; import { createPickerRenderer, adapterToUse, @@ -47,7 +47,7 @@ describe(' - Describes', () => { ], })); - describeValue(DesktopDateTimeRangePicker, () => ({ + describeValue(DesktopDateTimeRangePicker, () => ({ render, componentFamily: 'picker', type: 'date-time-range', @@ -87,7 +87,7 @@ describe(' - Describes', () => { value, { isOpened, applySameValue, setEndDate = false, selectSection, pressKey }, ) => { - let newValue: DateRange; + let newValue: PickerNonNullableRangeValue; if (applySameValue) { newValue = value; } else if (setEndDate) { diff --git a/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.tsx b/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.tsx index 791b84f5be65..979adfea0484 100644 --- a/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.tsx @@ -1,7 +1,11 @@ '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 } from '@mui/x-date-pickers/models'; import resolveComponentProps from '@mui/utils/resolveComponentProps'; @@ -42,7 +46,7 @@ const MobileDateRangePicker = React.forwardRef(function MobileDateRangePicker< MobileDateRangePickerProps >(inProps, 'MuiMobileDateRangePicker'); - const viewRenderers: PickerViewRendererLookup = { + const viewRenderers: PickerViewRendererLookup = { day: renderDateRangeViewCalendar, ...defaultizedProps.viewRenderers, }; @@ -226,17 +230,17 @@ MobileDateRangePicker.propTypes = { name: PropTypes.string, /** * Callback fired when the value is accepted. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @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 {InferPickerValue} value The value that was just accepted. + * @param {TValue} value The value that was just accepted. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onAccept: PropTypes.func, /** * Callback fired when the value changes. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @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 {InferPickerValue} value The new value. + * @param {TValue} value The new value. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onChange: PropTypes.func, @@ -250,9 +254,9 @@ MobileDateRangePicker.propTypes = { * When a validation error is detected, the `error` parameter contains a non-null value. * This can be used to render an appropriate form error. * @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. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @param {TError} error The reason why the current value is not valid. - * @param {InferPickerValue} value The value associated with the error. + * @param {TValue} value The value associated with the error. */ onError: PropTypes.func, /** diff --git a/packages/x-date-pickers-pro/src/MobileDateRangePicker/tests/describes.MobileDateRangePicker.test.tsx b/packages/x-date-pickers-pro/src/MobileDateRangePicker/tests/describes.MobileDateRangePicker.test.tsx index f40358155963..21c28526cdc9 100644 --- a/packages/x-date-pickers-pro/src/MobileDateRangePicker/tests/describes.MobileDateRangePicker.test.tsx +++ b/packages/x-date-pickers-pro/src/MobileDateRangePicker/tests/describes.MobileDateRangePicker.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { screen, fireDiscreteEvent, fireEvent } from '@mui/internal-test-utils'; import { MobileDateRangePicker } from '@mui/x-date-pickers-pro/MobileDateRangePicker'; -import { DateRange } from '@mui/x-date-pickers-pro/models'; +import { PickerNonNullableRangeValue, PickerRangeValue } from '@mui/x-date-pickers/internals'; import { adapterToUse, createPickerRenderer, @@ -46,7 +46,7 @@ describe(' - Describes', () => { ], })); - describeValue(MobileDateRangePicker, () => ({ + describeValue(MobileDateRangePicker, () => ({ render, componentFamily: 'picker', type: 'date-range', @@ -74,7 +74,7 @@ describe(' - Describes', () => { expectFieldValueV7(endFieldRoot, expectedEndValueStr); }, setNewValue: (value, { isOpened, applySameValue, setEndDate = false }) => { - let newValue: DateRange; + let newValue: PickerNonNullableRangeValue; if (applySameValue) { newValue = value; } else if (setEndDate) { diff --git a/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/MobileDateTimeRangePicker.tsx b/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/MobileDateTimeRangePicker.tsx index 2d43eca36520..05cd5521a2ce 100644 --- a/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/MobileDateTimeRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/MobileDateTimeRangePicker.tsx @@ -13,6 +13,7 @@ import { TimeViewWithMeridiem, resolveDateTimeFormat, useUtils, + PickerRangeValue, } from '@mui/x-date-pickers/internals'; import { extractValidationProps } from '@mui/x-date-pickers/validation'; import { PickerOwnerState } from '@mui/x-date-pickers/models'; @@ -49,7 +50,7 @@ const rendererInterceptor = function rendererInterceptor< inViewRenderers: DateTimeRangePickerRenderers, popperView: DateTimeRangePickerView, rendererProps: PickerViewsRendererProps< - true, + PickerRangeValue, DateTimeRangePickerView, DefaultizedProps< UseMobileRangePickerProps< @@ -101,7 +102,9 @@ const rendererInterceptor = function rendererInterceptor< return ( } + viewRenderer={ + viewRenderer as PickerViewRenderer + } view={view && isInternalTimeView(view) ? view : 'hours'} views={finalProps.views as TimeViewWithMeridiem[]} openTo={isInternalTimeView(openTo) ? openTo : 'hours'} @@ -109,7 +112,7 @@ const rendererInterceptor = function rendererInterceptor< ); } // avoiding problem of `props: never` - const typedViewRenderer = viewRenderer as PickerViewRenderer; + const typedViewRenderer = viewRenderer as PickerViewRenderer; return typedViewRenderer({ ...finalProps, @@ -378,17 +381,17 @@ MobileDateTimeRangePicker.propTypes = { name: PropTypes.string, /** * Callback fired when the value is accepted. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @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 {InferPickerValue} value The value that was just accepted. + * @param {TValue} value The value that was just accepted. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onAccept: PropTypes.func, /** * Callback fired when the value changes. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @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 {InferPickerValue} value The new value. + * @param {TValue} value The new value. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onChange: PropTypes.func, @@ -402,9 +405,9 @@ MobileDateTimeRangePicker.propTypes = { * When a validation error is detected, the `error` parameter contains a non-null value. * This can be used to render an appropriate form error. * @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. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @param {TError} error The reason why the current value is not valid. - * @param {InferPickerValue} value The value associated with the error. + * @param {TValue} value The value associated with the error. */ onError: PropTypes.func, /** diff --git a/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/tests/describes.MobileDateTimeRangePicker.test.tsx b/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/tests/describes.MobileDateTimeRangePicker.test.tsx index 2650507d38b5..90a5dc4057ec 100644 --- a/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/tests/describes.MobileDateTimeRangePicker.test.tsx +++ b/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/tests/describes.MobileDateTimeRangePicker.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { describeConformance, fireEvent, screen } from '@mui/internal-test-utils'; -import { DateRange } from '@mui/x-date-pickers-pro/models'; +import { PickerNonNullableRangeValue, PickerRangeValue } from '@mui/x-date-pickers/internals'; import { createPickerRenderer, adapterToUse, @@ -11,7 +11,7 @@ import { getFieldSectionsContainer, openPicker, } from 'test/utils/pickers'; -import { MobileDateTimeRangePicker } from '../MobileDateTimeRangePicker'; +import { MobileDateTimeRangePicker } from '@mui/x-date-pickers-pro/MobileDateTimeRangePicker'; describe(' - Describes', () => { const { render, clock } = createPickerRenderer({ @@ -48,7 +48,7 @@ describe(' - Describes', () => { ], })); - describeValue(MobileDateTimeRangePicker, () => ({ + describeValue(MobileDateTimeRangePicker, () => ({ render, componentFamily: 'picker', type: 'date-time-range', @@ -92,7 +92,7 @@ describe(' - Describes', () => { initialFocus: setEndDate ? 'end' : 'start', }); } - let newValue: DateRange; + let newValue: PickerNonNullableRangeValue; if (applySameValue) { newValue = value; } else if (setEndDate) { diff --git a/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx b/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx index 1cf2f5102263..c3c9fb73c19d 100644 --- a/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx +++ b/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx @@ -255,9 +255,9 @@ MultiInputDateRangeField.propTypes = { minDate: PropTypes.object, /** * Callback fired when the value changes. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @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 {InferPickerValue} value The new value. + * @param {TValue} value The new value. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onChange: PropTypes.func, @@ -266,9 +266,9 @@ MultiInputDateRangeField.propTypes = { * When a validation error is detected, the `error` parameter contains a non-null value. * This can be used to render an appropriate form error. * @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. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @param {TError} error The reason why the current value is not valid. - * @param {InferPickerValue} value The value associated with the error. + * @param {TValue} value The value associated with the error. */ onError: PropTypes.func, /** diff --git a/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx b/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx index f4e18707f653..3531d3a14dd9 100644 --- a/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx +++ b/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx @@ -286,9 +286,9 @@ MultiInputDateTimeRangeField.propTypes = { minutesStep: PropTypes.number, /** * Callback fired when the value changes. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @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 {InferPickerValue} value The new value. + * @param {TValue} value The new value. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onChange: PropTypes.func, @@ -297,9 +297,9 @@ MultiInputDateTimeRangeField.propTypes = { * When a validation error is detected, the `error` parameter contains a non-null value. * This can be used to render an appropriate form error. * @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. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @param {TError} error The reason why the current value is not valid. - * @param {InferPickerValue} value The value associated with the error. + * @param {TValue} value The value associated with the error. */ onError: PropTypes.func, /** diff --git a/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx b/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx index 0848f38272ac..c533888fd193 100644 --- a/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx +++ b/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx @@ -271,9 +271,9 @@ MultiInputTimeRangeField.propTypes = { minutesStep: PropTypes.number, /** * Callback fired when the value changes. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @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 {InferPickerValue} value The new value. + * @param {TValue} value The new value. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onChange: PropTypes.func, @@ -282,9 +282,9 @@ MultiInputTimeRangeField.propTypes = { * When a validation error is detected, the `error` parameter contains a non-null value. * This can be used to render an appropriate form error. * @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. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @param {TError} error The reason why the current value is not valid. - * @param {InferPickerValue} value The value associated with the error. + * @param {TValue} value The value associated with the error. */ onError: PropTypes.func, /** diff --git a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx index 009953d70c84..02f127c0c715 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx +++ b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx @@ -214,9 +214,9 @@ SingleInputDateRangeField.propTypes = { onBlur: PropTypes.func, /** * Callback fired when the value changes. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @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 {InferPickerValue} value The new value. + * @param {TValue} value The new value. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onChange: PropTypes.func, @@ -229,9 +229,9 @@ SingleInputDateRangeField.propTypes = { * When a validation error is detected, the `error` parameter contains a non-null value. * This can be used to render an appropriate form error. * @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. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @param {TError} error The reason why the current value is not valid. - * @param {InferPickerValue} value The value associated with the error. + * @param {TValue} value The value associated with the error. */ onError: PropTypes.func, onFocus: PropTypes.func, 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 ac6817f6a3d9..90d138c59c32 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.types.ts +++ b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.types.ts @@ -1,7 +1,7 @@ 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 { PickerRangeValue, UseFieldInternalProps } from '@mui/x-date-pickers/internals'; import { BuiltInFieldTextFieldProps } from '@mui/x-date-pickers/models'; import { ExportedUseClearableFieldProps, @@ -15,7 +15,11 @@ export interface UseSingleInputDateRangeFieldProps< > extends UseDateRangeFieldProps, ExportedUseClearableFieldProps, Pick< - UseFieldInternalProps, + UseFieldInternalProps< + PickerRangeValue, + TEnableAccessibleFieldDOMStructure, + DateRangeValidationError + >, 'unstableFieldRef' > {} diff --git a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/useSingleInputDateRangeField.ts b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/useSingleInputDateRangeField.ts index 75ae6ce7b018..e1b71090039e 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/useSingleInputDateRangeField.ts +++ b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/useSingleInputDateRangeField.ts @@ -1,6 +1,6 @@ '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 { UseSingleInputDateRangeFieldProps } from './SingleInputDateRangeField.types'; import { rangeValueManager, getRangeFieldValueManager } from '../internals/utils/valueManagers'; @@ -25,7 +25,7 @@ export const useSingleInputDateRangeField = < ); return useField< - true, + PickerRangeValue, TEnableAccessibleFieldDOMStructure, typeof forwardedProps, typeof internalProps diff --git a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx index fc8a131f2997..1c3a0b1469dd 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx +++ b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx @@ -247,9 +247,9 @@ SingleInputDateTimeRangeField.propTypes = { onBlur: PropTypes.func, /** * Callback fired when the value changes. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @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 {InferPickerValue} value The new value. + * @param {TValue} value The new value. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onChange: PropTypes.func, @@ -262,9 +262,9 @@ SingleInputDateTimeRangeField.propTypes = { * When a validation error is detected, the `error` parameter contains a non-null value. * This can be used to render an appropriate form error. * @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. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @param {TError} error The reason why the current value is not valid. - * @param {InferPickerValue} value The value associated with the error. + * @param {TValue} value The value associated with the error. */ onError: PropTypes.func, onFocus: PropTypes.func, 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 da7292cfe120..53079837d53c 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.types.ts +++ b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.types.ts @@ -1,7 +1,7 @@ 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 { PickerRangeValue, UseFieldInternalProps } from '@mui/x-date-pickers/internals'; import { BuiltInFieldTextFieldProps } from '@mui/x-date-pickers/models'; import { ExportedUseClearableFieldProps, @@ -16,7 +16,11 @@ export interface UseSingleInputDateTimeRangeFieldProps< > extends UseDateTimeRangeFieldProps, ExportedUseClearableFieldProps, Pick< - UseFieldInternalProps, + UseFieldInternalProps< + PickerRangeValue, + TEnableAccessibleFieldDOMStructure, + DateTimeRangeValidationError + >, 'unstableFieldRef' > {} diff --git a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.ts b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.ts index 2e2dc22065a5..1fbed22a25d0 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.ts +++ b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.ts @@ -1,6 +1,10 @@ '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 { UseSingleInputDateTimeRangeFieldProps } from './SingleInputDateTimeRangeField.types'; import { rangeValueManager, getRangeFieldValueManager } from '../internals/utils/valueManagers'; @@ -25,7 +29,7 @@ export const useSingleInputDateTimeRangeField = < ); return useField< - true, + PickerRangeValue, TEnableAccessibleFieldDOMStructure, typeof forwardedProps, typeof internalProps diff --git a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx index 6638f805cab9..ff5b9d8524cd 100644 --- a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx +++ b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx @@ -229,9 +229,9 @@ SingleInputTimeRangeField.propTypes = { onBlur: PropTypes.func, /** * Callback fired when the value changes. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @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 {InferPickerValue} value The new value. + * @param {TValue} value The new value. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onChange: PropTypes.func, @@ -244,9 +244,9 @@ SingleInputTimeRangeField.propTypes = { * When a validation error is detected, the `error` parameter contains a non-null value. * This can be used to render an appropriate form error. * @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. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @param {TError} error The reason why the current value is not valid. - * @param {InferPickerValue} value The value associated with the error. + * @param {TValue} value The value associated with the error. */ onError: PropTypes.func, onFocus: PropTypes.func, 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 2a19d339bd14..a1b94ce63cd7 100644 --- a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.types.ts +++ b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.types.ts @@ -1,7 +1,7 @@ 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 { PickerRangeValue, UseFieldInternalProps } from '@mui/x-date-pickers/internals'; import { BuiltInFieldTextFieldProps } from '@mui/x-date-pickers/models'; import { ExportedUseClearableFieldProps, @@ -16,7 +16,11 @@ export interface UseSingleInputTimeRangeFieldProps< > extends UseTimeRangeFieldProps, ExportedUseClearableFieldProps, Pick< - UseFieldInternalProps, + UseFieldInternalProps< + PickerRangeValue, + TEnableAccessibleFieldDOMStructure, + TimeRangeValidationError + >, 'unstableFieldRef' > {} diff --git a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/useSingleInputTimeRangeField.ts b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/useSingleInputTimeRangeField.ts index 2c1933eae3e6..a55e35d42c97 100644 --- a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/useSingleInputTimeRangeField.ts +++ b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/useSingleInputTimeRangeField.ts @@ -1,6 +1,6 @@ '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 { UseSingleInputTimeRangeFieldProps } from './SingleInputTimeRangeField.types'; import { rangeValueManager, getRangeFieldValueManager } from '../internals/utils/valueManagers'; @@ -25,7 +25,7 @@ export const useSingleInputTimeRangeField = < ); return useField< - true, + PickerRangeValue, TEnableAccessibleFieldDOMStructure, typeof forwardedProps, typeof internalProps diff --git a/packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.tsx b/packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.tsx index 63018d734109..ee9f8f61066f 100644 --- a/packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.tsx @@ -1,7 +1,7 @@ 'use client'; import * as React from 'react'; import PropTypes from 'prop-types'; -import { PickerViewRendererLookup } from '@mui/x-date-pickers/internals'; +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'; @@ -34,7 +34,7 @@ const StaticDateRangePicker = React.forwardRef(function StaticDateRangePicker( const displayStaticWrapperAs = defaultizedProps.displayStaticWrapperAs ?? 'mobile'; - const viewRenderers: PickerViewRendererLookup = { + const viewRenderers: PickerViewRendererLookup = { day: renderDateRangeViewCalendar, ...defaultizedProps.viewRenderers, }; @@ -176,17 +176,17 @@ StaticDateRangePicker.propTypes = { minDate: PropTypes.object, /** * Callback fired when the value is accepted. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @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 {InferPickerValue} value The value that was just accepted. + * @param {TValue} value The value that was just accepted. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onAccept: PropTypes.func, /** * Callback fired when the value changes. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @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 {InferPickerValue} value The new value. + * @param {TValue} value The new value. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onChange: PropTypes.func, @@ -201,9 +201,9 @@ StaticDateRangePicker.propTypes = { * When a validation error is detected, the `error` parameter contains a non-null value. * This can be used to render an appropriate form error. * @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. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @param {TError} error The reason why the current value is not valid. - * @param {InferPickerValue} value The value associated with the error. + * @param {TValue} value The value associated with the error. */ onError: PropTypes.func, /** diff --git a/packages/x-date-pickers-pro/src/internals/hooks/models/useRangePicker.ts b/packages/x-date-pickers-pro/src/internals/hooks/models/useRangePicker.ts index 4b016b05104d..bf22eeb38d5d 100644 --- a/packages/x-date-pickers-pro/src/internals/hooks/models/useRangePicker.ts +++ b/packages/x-date-pickers-pro/src/internals/hooks/models/useRangePicker.ts @@ -8,6 +8,7 @@ import { UsePickerViewsNonStaticProps, DateOrTimeViewWithMeridiem, ExportedBaseTabsProps, + PickerRangeValue, } from '@mui/x-date-pickers/internals'; import { ExportedPickersLayoutSlots, @@ -21,13 +22,13 @@ import { } from '../useEnrichedRangePickerFieldProps'; export interface UseRangePickerSlots - extends ExportedPickersLayoutSlots, + extends ExportedPickersLayoutSlots, RangePickerFieldSlots {} export interface UseRangePickerSlotProps< TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, -> extends ExportedPickersLayoutSlotProps, +> extends ExportedPickersLayoutSlotProps, RangePickerFieldSlotProps { tabs?: ExportedBaseTabsProps; toolbar?: ExportedBaseToolbarProps; @@ -46,7 +47,7 @@ export interface UseRangePickerProps< TExternalProps extends UsePickerViewsProps, TAdditionalViewProps extends {}, > extends RangeOnlyPickerProps, - BasePickerProps {} + BasePickerProps {} export interface RangePickerAdditionalViewProps extends Pick {} @@ -56,7 +57,7 @@ export interface UseRangePickerParams< TExternalProps extends UseRangePickerProps, TAdditionalViewProps extends {}, > extends Pick< - UsePickerParams, + UsePickerParams, 'valueManager' | 'valueType' | 'validator' | 'rendererInterceptor' > { props: 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 fac517d4fa24..9a7c9443cff3 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,6 +11,8 @@ import { DateOrTimeViewWithMeridiem, ExportedBaseTabsProps, PickerProvider, + PickerValue, + PickerRangeValue, } from '@mui/x-date-pickers/internals'; import { FieldRef, InferError } from '@mui/x-date-pickers/models'; import { @@ -67,9 +69,9 @@ export const useDesktopRangePicker = < const fieldContainerRef = React.useRef(null); const anchorRef = React.useRef(null); const popperRef = React.useRef(null); - const startFieldRef = React.useRef>(null); - const endFieldRef = React.useRef>(null); - const singleInputFieldRef = React.useRef>(null); + const startFieldRef = React.useRef>(null); + const endFieldRef = React.useRef>(null); + const singleInputFieldRef = React.useRef>(null); const initialView = React.useRef(props.openTo ?? null); const fieldType = (slots.field as any).fieldType ?? 'multi-input'; @@ -78,7 +80,7 @@ export const useDesktopRangePicker = < fieldType === 'single-input' ? singleInputFieldRef : undefined, ); - let fieldRef: React.Ref>; + let fieldRef: React.RefObject | FieldRef>; if (fieldType === 'single-input') { fieldRef = singleInputFieldRef; } else if (rangePosition === 'start') { @@ -96,7 +98,7 @@ export const useDesktopRangePicker = < shouldRestoreFocus, fieldProps: pickerFieldProps, ownerState, - } = usePicker({ + } = usePicker({ ...pickerParams, props, wrapperVariant: 'desktop', @@ -189,7 +191,7 @@ export const useDesktopRangePicker = < onViewChange: layoutProps.onViewChange, }); - const slotPropsForLayout: PickersLayoutSlotProps = { + const slotPropsForLayout: PickersLayoutSlotProps = { ...slotProps, tabs: { ...slotProps?.tabs, 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 2b920f023710..8a761aa254fa 100644 --- a/packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerFieldProps.ts +++ b/packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerFieldProps.ts @@ -19,6 +19,8 @@ import { WrapperVariant, DateOrTimeViewWithMeridiem, BaseSingleInputFieldProps, + PickerRangeValue, + PickerValue, } from '@mui/x-date-pickers/internals'; import { PickersTextField } from '@mui/x-date-pickers/PickersTextField'; import { @@ -74,7 +76,7 @@ export type RangePickerPropsForFieldSlot< TError, > = | (TIsSingleInput extends true - ? BaseSingleInputFieldProps + ? BaseSingleInputFieldProps : never) | (TIsSingleInput extends false ? BaseMultiInputFieldProps @@ -85,7 +87,7 @@ export interface UseEnrichedRangePickerFieldPropsParams< TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError, -> extends Pick, 'open' | 'actions'>, +> extends Pick, 'open' | 'actions'>, UseRangePositionResponse { wrapperVariant: WrapperVariant; fieldType: FieldType; @@ -106,9 +108,9 @@ export interface UseEnrichedRangePickerFieldPropsParams< currentView?: TView | null; initialView?: TView; onViewChange?: (view: TView) => void; - startFieldRef: React.RefObject>; - endFieldRef: React.RefObject>; - singleInputFieldRef: React.RefObject>; + startFieldRef: React.RefObject>; + endFieldRef: React.RefObject>; + singleInputFieldRef: React.RefObject>; } const useMultiInputFieldSlotProps = < @@ -311,7 +313,11 @@ const useSingleInputFieldSlotProps = < TEnableAccessibleFieldDOMStructure, TError >) => { - type ReturnType = BaseSingleInputFieldProps; + type ReturnType = BaseSingleInputFieldProps< + PickerRangeValue, + TEnableAccessibleFieldDOMStructure, + TError + >; const handleFieldRef = useForkRef(fieldProps.unstableFieldRef, singleInputFieldRef); 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 bd8938b29937..dbe5d3abb837 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,6 +9,8 @@ import { DateOrTimeViewWithMeridiem, ExportedBaseTabsProps, PickerProvider, + PickerRangeValue, + PickerValue, } from '@mui/x-date-pickers/internals'; import { usePickerTranslations } from '@mui/x-date-pickers/hooks'; import { FieldRef, InferError } from '@mui/x-date-pickers/models'; @@ -62,9 +64,9 @@ export const useMobileRangePicker = < localeText, } = props; - const startFieldRef = React.useRef>(null); - const endFieldRef = React.useRef>(null); - const singleInputFieldRef = React.useRef>(null); + const startFieldRef = React.useRef>(null); + const endFieldRef = React.useRef>(null); + const singleInputFieldRef = React.useRef>(null); const fieldType = (slots.field as any).fieldType ?? 'multi-input'; const { rangePosition, onRangePositionChange } = useRangePosition( @@ -74,7 +76,7 @@ export const useMobileRangePicker = < const labelId = useId(); const contextTranslations = usePickerTranslations(); - let fieldRef: React.Ref>; + let fieldRef: React.Ref | FieldRef>; if (fieldType === 'single-input') { fieldRef = singleInputFieldRef; } else if (rangePosition === 'start') { @@ -91,7 +93,7 @@ export const useMobileRangePicker = < renderCurrentView, fieldProps: pickerFieldProps, ownerState, - } = usePicker({ + } = usePicker({ ...pickerParams, props, wrapperVariant: 'mobile', @@ -160,7 +162,7 @@ export const useMobileRangePicker = < singleInputFieldRef, }); - const slotPropsForLayout: PickersLayoutSlotProps = { + const slotPropsForLayout: PickersLayoutSlotProps = { ...innerSlotProps, tabs: { ...innerSlotProps?.tabs, 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 65c7b308ac57..b5fb7e3f74f0 100644 --- a/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputFieldSelectedSections.ts +++ b/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputFieldSelectedSections.ts @@ -1,22 +1,26 @@ import * as React from 'react'; import useForkRef from '@mui/utils/useForkRef'; import useEventCallback from '@mui/utils/useEventCallback'; -import { UseFieldInternalProps } from '@mui/x-date-pickers/internals'; +import { + PickerRangeValue, + PickerValue, + UseFieldInternalProps, +} from '@mui/x-date-pickers/internals'; import { FieldRef, FieldSelectedSections } from '@mui/x-date-pickers/models'; interface UseMultiInputFieldSelectedSectionsParams extends Pick< - UseFieldInternalProps, + UseFieldInternalProps, 'selectedSections' | 'onSelectedSectionsChange' > { - unstableStartFieldRef?: React.Ref>; - unstableEndFieldRef?: React.Ref>; + unstableStartFieldRef?: React.Ref>; + unstableEndFieldRef?: React.Ref>; } export const useMultiInputFieldSelectedSections = ( params: UseMultiInputFieldSelectedSectionsParams, ) => { - const unstableEndFieldRef = React.useRef>(null); + const unstableEndFieldRef = React.useRef>(null); const handleUnstableEndFieldRef = useForkRef(params.unstableEndFieldRef, unstableEndFieldRef); const [startSelectedSection, setStartSelectedSection] = React.useState( 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 1f48ae602878..7b15ee812462 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 @@ -4,6 +4,7 @@ import { FieldChangeHandler, FieldChangeHandlerContext, PickerRangeValue, + PickerValue, UseFieldResponse, useControlledValueWithTimezone, useDefaultizedDateField, @@ -73,7 +74,9 @@ export const useMultiInputDateRangeField = < }); // TODO: Maybe export utility from `useField` instead of copy/pasting the logic - const buildChangeHandler = (index: 0 | 1): FieldChangeHandler => { + const buildChangeHandler = ( + index: 0 | 1, + ): FieldChangeHandler => { return (newDate, rawContext) => { const newDateRange: PickerRangeValue = index === 0 ? [newDate, value[1]] : [value[0], newDate]; 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 2eb4995fb511..699445f0a016 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 @@ -4,6 +4,7 @@ import { FieldChangeHandler, FieldChangeHandlerContext, PickerRangeValue, + PickerValue, UseFieldResponse, useControlledValueWithTimezone, useDefaultizedDateTimeField, @@ -73,7 +74,9 @@ export const useMultiInputDateTimeRangeField = < }); // TODO: Maybe export utility from `useField` instead of copy/pasting the logic - const buildChangeHandler = (index: 0 | 1): FieldChangeHandler => { + const buildChangeHandler = ( + index: 0 | 1, + ): FieldChangeHandler => { return (newDate, rawContext) => { const newDateRange: PickerRangeValue = index === 0 ? [newDate, value[1]] : [value[0], newDate]; 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 13459313a1c3..3499db3e1c1a 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 @@ -4,6 +4,7 @@ import { FieldChangeHandler, FieldChangeHandlerContext, PickerRangeValue, + PickerValue, UseFieldResponse, useControlledValueWithTimezone, useDefaultizedTimeField, @@ -73,7 +74,9 @@ export const useMultiInputTimeRangeField = < }); // TODO: Maybe export utility from `useField` instead of copy/pasting the logic - const buildChangeHandler = (index: 0 | 1): FieldChangeHandler => { + const buildChangeHandler = ( + index: 0 | 1, + ): FieldChangeHandler => { return (newDate, rawContext) => { const newDateRange: PickerRangeValue = index === 0 ? [newDate, value[1]] : [value[0], newDate]; diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useRangePosition.ts b/packages/x-date-pickers-pro/src/internals/hooks/useRangePosition.ts index 898bf1253a07..4b71d9e2ecb7 100644 --- a/packages/x-date-pickers-pro/src/internals/hooks/useRangePosition.ts +++ b/packages/x-date-pickers-pro/src/internals/hooks/useRangePosition.ts @@ -2,6 +2,7 @@ import * as React from 'react'; import useControlled from '@mui/utils/useControlled'; import useEventCallback from '@mui/utils/useEventCallback'; import { FieldRef } from '@mui/x-date-pickers/models'; +import { PickerRangeValue } from '@mui/x-date-pickers/internals'; import { RangePosition } from '../../models'; export interface UseRangePositionProps { @@ -30,7 +31,7 @@ export interface UseRangePositionResponse { export const useRangePosition = ( props: UseRangePositionProps, - singleInputFieldRef?: React.RefObject>, + singleInputFieldRef?: React.RefObject>, ): UseRangePositionResponse => { const [rangePosition, setRangePosition] = useControlled({ name: 'useRangePosition', 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 85c0e833d4a1..8befe74f5cf4 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,6 +8,7 @@ import { ExportedBaseToolbarProps, DateOrTimeViewWithMeridiem, PickerProvider, + PickerRangeValue, } from '@mui/x-date-pickers/internals'; import { UseStaticRangePickerParams, @@ -38,7 +39,7 @@ export const useStaticRangePicker = < const { rangePosition, onRangePositionChange } = useRangePosition(props); const { layoutProps, providerProps, renderCurrentView } = usePicker< - true, + PickerRangeValue, TView, TExternalProps, {} @@ -56,7 +57,7 @@ export const useStaticRangePicker = < }); const Layout = slots?.layout ?? PickerStaticLayout; - const slotPropsForLayout: PickersLayoutSlotProps = { + 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 75fe7c3b9075..b4c62b6437d0 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,6 +5,7 @@ import { ExportedBaseToolbarProps, StaticOnlyPickerProps, DateOrTimeViewWithMeridiem, + PickerRangeValue, } from '@mui/x-date-pickers/internals'; import { ExportedPickersLayoutSlots, @@ -13,10 +14,10 @@ import { import { UseRangePositionProps } from '../useRangePosition'; export interface UseStaticRangePickerSlots - extends ExportedPickersLayoutSlots {} + extends ExportedPickersLayoutSlots {} export interface UseStaticRangePickerSlotProps - extends ExportedPickersLayoutSlotProps { + extends ExportedPickersLayoutSlotProps { toolbar?: ExportedBaseToolbarProps; } @@ -26,7 +27,7 @@ export interface UseStaticRangePickerProps< TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UseStaticRangePickerProps, -> extends BasePickerProps, +> extends BasePickerProps, StaticRangeOnlyPickerProps { /** * Overridable components. @@ -44,7 +45,7 @@ export interface UseStaticRangePickerParams< TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseStaticRangePickerProps, > extends Pick< - UsePickerParams, + UsePickerParams, 'valueManager' | 'valueType' | 'validator' > { props: TExternalProps; 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 26f59a768b5d..dddac7c0a86b 100644 --- a/packages/x-date-pickers-pro/src/internals/models/dateTimeRange.ts +++ b/packages/x-date-pickers-pro/src/internals/models/dateTimeRange.ts @@ -3,6 +3,7 @@ import { UseFieldInternalProps, DateOrTimeViewWithMeridiem, AmPmProps, + PickerRangeValue, } from '@mui/x-date-pickers/internals'; import { DateTimeRangeValidationError, RangeFieldSeparatorProps } from '../../models'; import { ExportedValidateDateTimeRangeProps } from '../../validation/validateDateTimeRange'; @@ -11,7 +12,7 @@ export interface UseDateTimeRangeFieldProps, diff --git a/packages/x-date-pickers-pro/src/internals/models/fields.ts b/packages/x-date-pickers-pro/src/internals/models/fields.ts index 5957fc1a0cda..c0a227ac3f98 100644 --- a/packages/x-date-pickers-pro/src/internals/models/fields.ts +++ b/packages/x-date-pickers-pro/src/internals/models/fields.ts @@ -1,7 +1,7 @@ import { SxProps } from '@mui/material/styles'; import { SlotComponentProps } from '@mui/utils'; import { MakeRequired } from '@mui/x-internals/types'; -import { UseFieldInternalProps } from '@mui/x-date-pickers/internals'; +import { PickerRangeValue, UseFieldInternalProps } from '@mui/x-date-pickers/internals'; import { PickersTextField } from '@mui/x-date-pickers/PickersTextField'; import type { MultiInputFieldRefs, @@ -19,7 +19,7 @@ export interface BaseMultiInputFieldProps< TError, > extends MakeRequired< Pick< - UseFieldInternalProps, + UseFieldInternalProps, | 'readOnly' | 'disabled' | 'format' 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 6bd2c88f6769..171ad2c8c7cd 100644 --- a/packages/x-date-pickers-pro/src/internals/models/timeRange.ts +++ b/packages/x-date-pickers-pro/src/internals/models/timeRange.ts @@ -1,12 +1,16 @@ import { MakeOptional } from '@mui/x-internals/types'; -import { UseFieldInternalProps, AmPmProps } from '@mui/x-date-pickers/internals'; +import { UseFieldInternalProps, AmPmProps, PickerRangeValue } from '@mui/x-date-pickers/internals'; import { TimeRangeValidationError, RangeFieldSeparatorProps } from '../../models'; import type { ExportedValidateTimeRangeProps } from '../../validation/validateTimeRange'; export interface UseTimeRangeFieldProps extends MakeOptional< Omit< - UseFieldInternalProps, + UseFieldInternalProps< + PickerRangeValue, + TEnableAccessibleFieldDOMStructure, + TimeRangeValidationError + >, 'unstableFieldRef' >, 'format' 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 8eebc7353404..59009cfebe63 100644 --- a/packages/x-date-pickers-pro/src/internals/utils/valueManagers.ts +++ b/packages/x-date-pickers-pro/src/internals/utils/valueManagers.ts @@ -25,7 +25,7 @@ type RangePickerValueManager< | DateRangeValidationError | TimeRangeValidationError | DateTimeRangeValidationError = any, -> = PickerValueManager; +> = PickerValueManager; export const rangeValueManager: RangePickerValueManager = { emptyValue: [null, null], @@ -77,7 +77,7 @@ export const getRangeFieldValueManager = ({ dateSeparator = '–', }: { dateSeparator: string | undefined; -}): FieldValueManager => ({ +}): FieldValueManager => ({ updateReferenceValue: (utils, value, prevReferenceValue) => { const shouldKeepStartDate = value[0] != null && utils.isValid(value[0]); const shouldKeepEndDate = value[1] != null && utils.isValid(value[1]); diff --git a/packages/x-date-pickers-pro/src/models/dateRange.ts b/packages/x-date-pickers-pro/src/models/dateRange.ts index 0d9c9e8e349f..0e29e30990cc 100644 --- a/packages/x-date-pickers-pro/src/models/dateRange.ts +++ b/packages/x-date-pickers-pro/src/models/dateRange.ts @@ -1,5 +1,5 @@ import { MakeOptional } from '@mui/x-internals/types'; -import { UseFieldInternalProps } from '@mui/x-date-pickers/internals'; +import { PickerRangeValue, UseFieldInternalProps } from '@mui/x-date-pickers/internals'; import { RangeFieldSeparatorProps } from './fields'; import { DateRangeValidationError } from './validation'; import type { ExportedValidateDateRangeProps } from '../validation/validateDateRange'; @@ -7,7 +7,11 @@ import type { ExportedValidateDateRangeProps } from '../validation/validateDateR export interface UseDateRangeFieldProps extends MakeOptional< Omit< - UseFieldInternalProps, + UseFieldInternalProps< + PickerRangeValue, + TEnableAccessibleFieldDOMStructure, + DateRangeValidationError + >, 'unstableFieldRef' >, 'format' diff --git a/packages/x-date-pickers-pro/src/models/fields.ts b/packages/x-date-pickers-pro/src/models/fields.ts index ea23ffc5dee4..648dc4c4f277 100644 --- a/packages/x-date-pickers-pro/src/models/fields.ts +++ b/packages/x-date-pickers-pro/src/models/fields.ts @@ -1,5 +1,10 @@ import * as React from 'react'; -import { UseFieldResponse, FormProps } from '@mui/x-date-pickers/internals'; +import { + UseFieldResponse, + FormProps, + PickerValue, + PickerRangeValue, +} from '@mui/x-date-pickers/internals'; import { FieldRef, PickerFieldSlotProps } from '@mui/x-date-pickers/models'; import { UseClearableFieldResponse } from '@mui/x-date-pickers/hooks'; @@ -32,8 +37,8 @@ export interface MultiInputFieldSlotRootProps { } export interface MultiInputFieldRefs { - unstableStartFieldRef?: React.Ref>; - unstableEndFieldRef?: React.Ref>; + unstableStartFieldRef?: React.Ref>; + unstableEndFieldRef?: React.Ref>; } export interface RangeFieldSeparatorProps { @@ -48,7 +53,8 @@ export interface RangeFieldSeparatorProps { * Props the `slotProps.field` of a range picker component can receive. */ export type PickerRangeFieldSlotProps = - PickerFieldSlotProps & RangeFieldSeparatorProps; + PickerFieldSlotProps & + RangeFieldSeparatorProps; /** * Props the text field receives when used with a multi input picker. diff --git a/packages/x-date-pickers-pro/src/validation/validateDateRange.ts b/packages/x-date-pickers-pro/src/validation/validateDateRange.ts index 02d776903e09..44effa217b60 100644 --- a/packages/x-date-pickers-pro/src/validation/validateDateRange.ts +++ b/packages/x-date-pickers-pro/src/validation/validateDateRange.ts @@ -1,5 +1,5 @@ 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 } from '../models'; @@ -17,7 +17,7 @@ export interface ValidateDateRangeProps Required {} export const validateDateRange: Validator< - true, + PickerRangeValue, DateRangeValidationError, ValidateDateRangeProps > = ({ adapter, value, timezone, props }) => { diff --git a/packages/x-date-pickers-pro/src/validation/validateDateTimeRange.ts b/packages/x-date-pickers-pro/src/validation/validateDateTimeRange.ts index 25543de73599..743360be7d7d 100644 --- a/packages/x-date-pickers-pro/src/validation/validateDateTimeRange.ts +++ b/packages/x-date-pickers-pro/src/validation/validateDateTimeRange.ts @@ -1,4 +1,4 @@ -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 } from '../models'; @@ -19,7 +19,7 @@ export interface ValidateDateTimeRangeProps ValidateTimeRangeProps {} export const validateDateTimeRange: Validator< - true, + PickerRangeValue, DateTimeRangeValidationError, ValidateDateTimeRangeProps > = ({ adapter, value, timezone, props }) => { diff --git a/packages/x-date-pickers-pro/src/validation/validateTimeRange.ts b/packages/x-date-pickers-pro/src/validation/validateTimeRange.ts index 5ced51e9309a..2f5cd591cd86 100644 --- a/packages/x-date-pickers-pro/src/validation/validateTimeRange.ts +++ b/packages/x-date-pickers-pro/src/validation/validateTimeRange.ts @@ -1,5 +1,9 @@ import { validateTime, Validator } from '@mui/x-date-pickers/validation'; -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 } from '../models'; import { rangeValueManager } from '../internals/utils/valueManagers'; @@ -16,7 +20,7 @@ export interface ValidateTimeRangeProps TimeValidationProps {} export const validateTimeRange: Validator< - true, + PickerRangeValue, TimeRangeValidationError, ValidateTimeRangeProps > = ({ adapter, value, timezone, props }) => { diff --git a/packages/x-date-pickers/src/DateCalendar/DateCalendar.tsx b/packages/x-date-pickers/src/DateCalendar/DateCalendar.tsx index 02cef653920e..f1c2c33ee439 100644 --- a/packages/x-date-pickers/src/DateCalendar/DateCalendar.tsx +++ b/packages/x-date-pickers/src/DateCalendar/DateCalendar.tsx @@ -30,7 +30,7 @@ import { BaseDateValidationProps } from '../internals/models/validation'; import { useControlledValueWithTimezone } from '../internals/hooks/useValueWithTimezone'; import { singleItemValueManager } from '../internals/utils/valueManagers'; import { VIEW_HEIGHT } from '../internals/constants/dimensions'; -import { PickerOwnerState, PickerValidDate, DateView } from '../models'; +import { PickerOwnerState, PickerValidDate } from '../models'; import { usePickerPrivateContext } from '../internals/hooks/usePickerPrivateContext'; const useUtilityClasses = (classes: Partial | undefined) => { @@ -161,7 +161,7 @@ export const DateCalendar = React.forwardRef(function DateCalendar( }); const { view, setView, focusedView, setFocusedView, goToNextView, setValueAndGoToNextView } = - useViews({ + useViews({ view: inView, views, openTo, @@ -492,9 +492,9 @@ DateCalendar.propTypes = { monthsPerRow: PropTypes.oneOf([3, 4]), /** * Callback fired when the value changes. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @template TView The view type. Will be one of date or time views. - * @param {InferPickerValue} value The new value. + * @param {TValue} value The new value. * @param {PickerSelectionState | undefined} selectionState Indicates if the date selection is complete. * @param {TView | undefined} selectedView Indicates the view in which the selection has been made. */ diff --git a/packages/x-date-pickers/src/DateCalendar/DateCalendar.types.ts b/packages/x-date-pickers/src/DateCalendar/DateCalendar.types.ts index fabacf8c6a77..022149cfdc80 100644 --- a/packages/x-date-pickers/src/DateCalendar/DateCalendar.types.ts +++ b/packages/x-date-pickers/src/DateCalendar/DateCalendar.types.ts @@ -26,6 +26,7 @@ import { } from '../MonthCalendar/MonthCalendar.types'; import { ExportedValidateDateProps } from '../validation/validateDate'; import { FormProps } from '../internals/models/formProps'; +import { PickerValue } from '../internals/models'; export interface DateCalendarSlots extends PickersCalendarHeaderSlots, @@ -80,7 +81,7 @@ export interface ExportedDateCalendarProps export interface DateCalendarProps extends ExportedDateCalendarProps, - ExportedUseViewsOptions { + ExportedUseViewsOptions { /** * The selected value. * Used when the component is controlled. 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 20719cfa5029..0993722c40b4 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 @@ -3,6 +3,7 @@ import { expect } from 'chai'; import { fireEvent, screen } from '@mui/internal-test-utils'; import { DateCalendar, dateCalendarClasses as classes } from '@mui/x-date-pickers/DateCalendar'; import { pickersDayClasses } from '@mui/x-date-pickers/PickersDay'; +import { PickerValue } from '@mui/x-date-pickers/internals'; import { adapterToUse, createPickerRenderer, @@ -30,7 +31,7 @@ describe(' - Describes', () => { skip: ['componentProp', 'componentsProp', 'themeVariants'], })); - describeValue(DateCalendar, () => ({ + describeValue(DateCalendar, () => ({ render, componentFamily: 'calendar', values: [adapterToUse.date('2018-01-01'), adapterToUse.date('2018-01-02')], diff --git a/packages/x-date-pickers/src/DateField/DateField.tsx b/packages/x-date-pickers/src/DateField/DateField.tsx index f46c93cce901..0a79fa946a2f 100644 --- a/packages/x-date-pickers/src/DateField/DateField.tsx +++ b/packages/x-date-pickers/src/DateField/DateField.tsx @@ -201,9 +201,9 @@ DateField.propTypes = { onBlur: PropTypes.func, /** * Callback fired when the value changes. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @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 {InferPickerValue} value The new value. + * @param {TValue} value The new value. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onChange: PropTypes.func, @@ -216,9 +216,9 @@ DateField.propTypes = { * When a validation error is detected, the `error` parameter contains a non-null value. * This can be used to render an appropriate form error. * @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. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @param {TError} error The reason why the current value is not valid. - * @param {InferPickerValue} value The value associated with the error. + * @param {TValue} value The value associated with the error. */ onError: PropTypes.func, onFocus: 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 21dd20cd0e5f..57e48ff53e20 100644 --- a/packages/x-date-pickers/src/DateField/DateField.types.ts +++ b/packages/x-date-pickers/src/DateField/DateField.types.ts @@ -10,10 +10,11 @@ import { import { DateValidationError, BuiltInFieldTextFieldProps } from '../models'; import { UseFieldInternalProps } from '../internals/hooks/useField'; import { ExportedValidateDateProps } from '../validation/validateDate'; +import { PickerValue } from '../internals/models'; export interface UseDateFieldProps extends MakeOptional< - UseFieldInternalProps, + UseFieldInternalProps, 'format' >, ExportedValidateDateProps, 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 6dd33c79d5d5..c1441c9e3f0e 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 @@ -1,6 +1,7 @@ import * as React from 'react'; import { PickersTextField } from '@mui/x-date-pickers/PickersTextField'; import { DateField } from '@mui/x-date-pickers/DateField'; +import { PickerValue } from '@mui/x-date-pickers/internals'; import { createPickerRenderer, expectFieldValueV7, @@ -30,7 +31,7 @@ describe(' - Describes', () => { skip: ['componentProp', 'componentsProp', 'themeVariants', 'themeStyleOverrides'], })); - describeValue(DateField, () => ({ + describeValue(DateField, () => ({ render, componentFamily: 'field', values: [adapterToUse.date('2018-01-01'), adapterToUse.date('2018-01-02')], diff --git a/packages/x-date-pickers/src/DateField/useDateField.ts b/packages/x-date-pickers/src/DateField/useDateField.ts index 358c87124e48..42d7b01fe3a8 100644 --- a/packages/x-date-pickers/src/DateField/useDateField.ts +++ b/packages/x-date-pickers/src/DateField/useDateField.ts @@ -8,6 +8,7 @@ import { UseDateFieldProps } from './DateField.types'; import { validateDate } from '../validation'; import { useSplitFieldProps } from '../hooks'; import { useDefaultizedDateField } from '../internals/hooks/defaultizedFieldProps'; +import { PickerValue } from '../internals/models'; export const useDateField = < TEnableAccessibleFieldDOMStructure extends boolean, @@ -23,7 +24,7 @@ export const useDateField = < const { forwardedProps, internalProps } = useSplitFieldProps(props, 'date'); return useField< - false, + PickerValue, TEnableAccessibleFieldDOMStructure, typeof forwardedProps, typeof internalProps diff --git a/packages/x-date-pickers/src/DatePicker/DatePicker.tsx b/packages/x-date-pickers/src/DatePicker/DatePicker.tsx index 068470508c2f..6efb2dc1d7e1 100644 --- a/packages/x-date-pickers/src/DatePicker/DatePicker.tsx +++ b/packages/x-date-pickers/src/DatePicker/DatePicker.tsx @@ -166,17 +166,17 @@ DatePicker.propTypes = { name: PropTypes.string, /** * Callback fired when the value is accepted. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @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 {InferPickerValue} value The value that was just accepted. + * @param {TValue} value The value that was just accepted. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onAccept: PropTypes.func, /** * Callback fired when the value changes. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @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 {InferPickerValue} value The new value. + * @param {TValue} value The new value. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onChange: PropTypes.func, @@ -190,9 +190,9 @@ DatePicker.propTypes = { * When a validation error is detected, the `error` parameter contains a non-null value. * This can be used to render an appropriate form error. * @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. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @param {TError} error The reason why the current value is not valid. - * @param {InferPickerValue} value The value associated with the error. + * @param {TValue} value The value associated with the error. */ onError: 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 c652e237b461..bbccb00651e4 100644 --- a/packages/x-date-pickers/src/DatePicker/DatePicker.types.ts +++ b/packages/x-date-pickers/src/DatePicker/DatePicker.types.ts @@ -3,7 +3,7 @@ import { DesktopDatePickerSlots, DesktopDatePickerSlotProps, } from '../DesktopDatePicker'; -import { BaseSingleInputFieldProps } from '../internals/models'; +import { BaseSingleInputFieldProps, PickerValue } from '../internals/models'; import { MobileDatePickerProps, MobileDatePickerSlots, @@ -49,4 +49,4 @@ export interface DatePickerProps = ValidateDateProps & - BaseSingleInputFieldProps; + BaseSingleInputFieldProps; diff --git a/packages/x-date-pickers/src/DatePicker/DatePickerToolbar.tsx b/packages/x-date-pickers/src/DatePicker/DatePickerToolbar.tsx index 4b9d5ff0d138..ea403cfb5fca 100644 --- a/packages/x-date-pickers/src/DatePicker/DatePickerToolbar.tsx +++ b/packages/x-date-pickers/src/DatePicker/DatePickerToolbar.tsx @@ -15,9 +15,10 @@ import { getDatePickerToolbarUtilityClass, } from './datePickerToolbarClasses'; import { resolveDateFormat } from '../internals/utils/date-utils'; +import { PickerValue } from '../internals/models'; export interface DatePickerToolbarProps - extends BaseToolbarProps, + extends BaseToolbarProps, ExportedDatePickerToolbarProps {} export interface ExportedDatePickerToolbarProps extends ExportedBaseToolbarProps { diff --git a/packages/x-date-pickers/src/DatePicker/shared.tsx b/packages/x-date-pickers/src/DatePicker/shared.tsx index ce01d42a097d..769d39e4e03c 100644 --- a/packages/x-date-pickers/src/DatePicker/shared.tsx +++ b/packages/x-date-pickers/src/DatePicker/shared.tsx @@ -20,6 +20,7 @@ import { } from './DatePickerToolbar'; import { PickerViewRendererLookup } from '../internals/hooks/usePicker/usePickerViews'; import { DateViewRendererProps } from '../dateViewRenderers'; +import { PickerValue } from '../internals/models'; export interface BaseDatePickerSlots extends DateCalendarSlots { /** @@ -36,10 +37,10 @@ export interface BaseDatePickerSlotProps extends DateCalendarSlotProps { export type DatePickerViewRenderers< TView extends DateView, TAdditionalProps extends {} = {}, -> = PickerViewRendererLookup, TAdditionalProps>; +> = PickerViewRendererLookup, TAdditionalProps>; export interface BaseDatePickerProps - extends BasePickerInputProps, + extends BasePickerInputProps, ExportedDateCalendarProps { /** * Overridable component slots. diff --git a/packages/x-date-pickers/src/DateTimeField/DateTimeField.tsx b/packages/x-date-pickers/src/DateTimeField/DateTimeField.tsx index 62bb0b930b59..20002236886f 100644 --- a/packages/x-date-pickers/src/DateTimeField/DateTimeField.tsx +++ b/packages/x-date-pickers/src/DateTimeField/DateTimeField.tsx @@ -238,9 +238,9 @@ DateTimeField.propTypes = { onBlur: PropTypes.func, /** * Callback fired when the value changes. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @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 {InferPickerValue} value The new value. + * @param {TValue} value The new value. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onChange: PropTypes.func, @@ -253,9 +253,9 @@ DateTimeField.propTypes = { * When a validation error is detected, the `error` parameter contains a non-null value. * This can be used to render an appropriate form error. * @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. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @param {TError} error The reason why the current value is not valid. - * @param {InferPickerValue} value The value associated with the error. + * @param {TValue} value The value associated with the error. */ onError: PropTypes.func, onFocus: 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 8a5ecfac9f6f..876545ded3c4 100644 --- a/packages/x-date-pickers/src/DateTimeField/DateTimeField.types.ts +++ b/packages/x-date-pickers/src/DateTimeField/DateTimeField.types.ts @@ -11,10 +11,15 @@ import { } from '../hooks/useClearableField'; import { ExportedValidateDateTimeProps } from '../validation/validateDateTime'; import { AmPmProps } from '../internals/models/props/time'; +import { PickerValue } from '../internals/models'; export interface UseDateTimeFieldProps extends MakeOptional< - UseFieldInternalProps, + UseFieldInternalProps< + PickerValue, + TEnableAccessibleFieldDOMStructure, + DateTimeValidationError + >, 'format' >, ExportedValidateDateTimeProps, 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 7ee9a0ef256d..a4de539e0e8e 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 @@ -1,6 +1,7 @@ import * as React from 'react'; import { PickersTextField } from '@mui/x-date-pickers/PickersTextField'; import { DateTimeField } from '@mui/x-date-pickers/DateTimeField'; +import { PickerValue } from '@mui/x-date-pickers/internals'; import { adapterToUse, createPickerRenderer, @@ -30,7 +31,7 @@ describe(' - Describes', () => { skip: ['componentProp', 'componentsProp', 'themeVariants', 'themeStyleOverrides'], })); - describeValue(DateTimeField, () => ({ + describeValue(DateTimeField, () => ({ render, componentFamily: 'field', values: [adapterToUse.date('2018-01-01'), adapterToUse.date('2018-01-02')], diff --git a/packages/x-date-pickers/src/DateTimeField/useDateTimeField.ts b/packages/x-date-pickers/src/DateTimeField/useDateTimeField.ts index d95b01f4b62d..bd3b0b585352 100644 --- a/packages/x-date-pickers/src/DateTimeField/useDateTimeField.ts +++ b/packages/x-date-pickers/src/DateTimeField/useDateTimeField.ts @@ -8,6 +8,7 @@ import { UseDateTimeFieldProps } from './DateTimeField.types'; import { validateDateTime } from '../validation'; import { useSplitFieldProps } from '../hooks'; import { useDefaultizedDateTimeField } from '../internals/hooks/defaultizedFieldProps'; +import { PickerValue } from '../internals/models'; export const useDateTimeField = < TEnableAccessibleFieldDOMStructure extends boolean, @@ -23,7 +24,7 @@ export const useDateTimeField = < const { forwardedProps, internalProps } = useSplitFieldProps(props, 'date-time'); return useField< - false, + PickerValue, TEnableAccessibleFieldDOMStructure, typeof forwardedProps, typeof internalProps diff --git a/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.tsx b/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.tsx index 4bf130b7c2ae..24682f5c735c 100644 --- a/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.tsx +++ b/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.tsx @@ -208,17 +208,17 @@ DateTimePicker.propTypes = { name: PropTypes.string, /** * Callback fired when the value is accepted. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @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 {InferPickerValue} value The value that was just accepted. + * @param {TValue} value The value that was just accepted. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onAccept: PropTypes.func, /** * Callback fired when the value changes. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @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 {InferPickerValue} value The new value. + * @param {TValue} value The new value. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onChange: PropTypes.func, @@ -232,9 +232,9 @@ DateTimePicker.propTypes = { * When a validation error is detected, the `error` parameter contains a non-null value. * This can be used to render an appropriate form error. * @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. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @param {TError} error The reason why the current value is not valid. - * @param {InferPickerValue} value The value associated with the error. + * @param {TValue} value The value associated with the error. */ onError: 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 60112b9b92da..1013150e535b 100644 --- a/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.types.ts +++ b/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.types.ts @@ -3,7 +3,11 @@ import { DesktopDateTimePickerSlots, DesktopDateTimePickerSlotProps, } from '../DesktopDateTimePicker'; -import { BaseSingleInputFieldProps, DateOrTimeViewWithMeridiem } from '../internals/models'; +import { + BaseSingleInputFieldProps, + DateOrTimeViewWithMeridiem, + PickerValue, +} from '../internals/models'; import { MobileDateTimePickerProps, MobileDateTimePickerSlots, @@ -55,4 +59,4 @@ export interface DateTimePickerProps, or component). */ export type DateTimePickerFieldProps = ValidateDateTimeProps & - BaseSingleInputFieldProps; + BaseSingleInputFieldProps; diff --git a/packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx b/packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx index e91125595b6e..b232a1882948 100644 --- a/packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx +++ b/packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx @@ -17,7 +17,7 @@ import { DateTimePickerToolbarClasses, getDateTimePickerToolbarUtilityClass, } from './dateTimePickerToolbarClasses'; -import { DateOrTimeViewWithMeridiem, WrapperVariant } from '../internals/models'; +import { DateOrTimeViewWithMeridiem, PickerValue, WrapperVariant } from '../internals/models'; import { useMeridiemMode } from '../internals/hooks/date-helpers-hooks'; import { MULTI_SECTION_CLOCK_SECTION_WIDTH } from '../internals/constants/dimensions'; import { formatMeridiem } from '../internals/utils/date-utils'; @@ -34,7 +34,7 @@ export interface ExportedDateTimePickerToolbarProps extends ExportedBaseToolbarP export interface DateTimePickerToolbarProps extends ExportedDateTimePickerToolbarProps, - MakeOptional, 'view'> { + MakeOptional, 'view'> { toolbarVariant?: WrapperVariant; /** * If provided, it will be used instead of `dateTimePickerToolbarTitle` from localization. diff --git a/packages/x-date-pickers/src/DateTimePicker/shared.tsx b/packages/x-date-pickers/src/DateTimePicker/shared.tsx index 02328b6e28e3..813f33f9c062 100644 --- a/packages/x-date-pickers/src/DateTimePicker/shared.tsx +++ b/packages/x-date-pickers/src/DateTimePicker/shared.tsx @@ -32,7 +32,7 @@ import { DateViewRendererProps } from '../dateViewRenderers'; import { TimeViewRendererProps } from '../timeViewRenderers'; import { applyDefaultViewProps } from '../internals/utils/views'; import { BaseClockProps, ExportedBaseClockProps } from '../internals/models/props/time'; -import { DateOrTimeViewWithMeridiem, TimeViewWithMeridiem } from '../internals/models'; +import { DateOrTimeViewWithMeridiem, PickerValue, TimeViewWithMeridiem } from '../internals/models'; export interface BaseDateTimePickerSlots extends DateCalendarSlots, TimeClockSlots { /** @@ -62,7 +62,7 @@ export type DateTimePickerViewRenderers< TView extends DateOrTimeViewWithMeridiem, TAdditionalProps extends {} = {}, > = PickerViewRendererLookup< - false, + PickerValue, TView, Omit, 'slots' | 'slotProps'> & Omit< @@ -73,7 +73,7 @@ export type DateTimePickerViewRenderers< >; export interface BaseDateTimePickerProps - extends BasePickerInputProps, + extends BasePickerInputProps, Omit, ExportedBaseClockProps, DateTimeValidationProps { diff --git a/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.tsx b/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.tsx index 155d79db0849..f5f035ca05f0 100644 --- a/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.tsx +++ b/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.tsx @@ -218,17 +218,17 @@ DesktopDatePicker.propTypes = { name: PropTypes.string, /** * Callback fired when the value is accepted. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @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 {InferPickerValue} value The value that was just accepted. + * @param {TValue} value The value that was just accepted. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onAccept: PropTypes.func, /** * Callback fired when the value changes. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @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 {InferPickerValue} value The new value. + * @param {TValue} value The new value. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onChange: PropTypes.func, @@ -242,9 +242,9 @@ DesktopDatePicker.propTypes = { * When a validation error is detected, the `error` parameter contains a non-null value. * This can be used to render an appropriate form error. * @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. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @param {TError} error The reason why the current value is not valid. - * @param {InferPickerValue} value The value associated with the error. + * @param {TValue} value The value associated with the error. */ onError: PropTypes.func, /** 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 7ef97fbb5435..1c79140c4807 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 @@ -10,6 +10,7 @@ import { getFieldInputRoot, } from 'test/utils/pickers'; import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker'; +import { PickerValue } from '@mui/x-date-pickers/internals'; import { describeConformance } from 'test/utils/describeConformance'; describe(' - Describes', () => { @@ -41,7 +42,7 @@ describe(' - Describes', () => { ], })); - describeValue(DesktopDatePicker, () => ({ + describeValue(DesktopDatePicker, () => ({ render, componentFamily: 'picker', type: 'date', diff --git a/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx b/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx index b5d78017d6af..3e7ba8dd6635 100644 --- a/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx +++ b/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx @@ -16,7 +16,7 @@ import { renderDateViewCalendar } from '../dateViewRenderers/dateViewRenderers'; import { usePickerTranslations } from '../hooks/usePickerTranslations'; import { useUtils } from '../internals/hooks/useUtils'; import { validateDateTime, extractValidationProps } from '../validation'; -import { DateOrTimeViewWithMeridiem } from '../internals/models'; +import { DateOrTimeViewWithMeridiem, PickerValue } from '../internals/models'; import { CalendarIcon } from '../icons'; import { UseDesktopPickerProps, useDesktopPicker } from '../internals/hooks/useDesktopPicker'; import { PickerViewsRendererProps } from '../internals/hooks/usePicker'; @@ -51,14 +51,14 @@ const rendererInterceptor = function rendererInterceptor< inViewRenderers: DateTimePickerViewRenderers, popperView: TView, rendererProps: PickerViewsRendererProps< - false, + PickerValue, TView, DefaultizedProps< UseDesktopPickerProps< TView, TEnableAccessibleFieldDOMStructure, any, - UsePickerViewsProps + UsePickerViewsProps >, 'openTo' >, @@ -391,17 +391,17 @@ DesktopDateTimePicker.propTypes = { name: PropTypes.string, /** * Callback fired when the value is accepted. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @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 {InferPickerValue} value The value that was just accepted. + * @param {TValue} value The value that was just accepted. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onAccept: PropTypes.func, /** * Callback fired when the value changes. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @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 {InferPickerValue} value The new value. + * @param {TValue} value The new value. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onChange: PropTypes.func, @@ -415,9 +415,9 @@ DesktopDateTimePicker.propTypes = { * When a validation error is detected, the `error` parameter contains a non-null value. * This can be used to render an appropriate form error. * @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. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @param {TError} error The reason why the current value is not valid. - * @param {InferPickerValue} value The value associated with the error. + * @param {TValue} value The value associated with the error. */ onError: PropTypes.func, /** diff --git a/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePickerLayout.tsx b/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePickerLayout.tsx index 886c6c9ed47d..164f5bd17505 100644 --- a/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePickerLayout.tsx +++ b/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePickerLayout.tsx @@ -11,26 +11,27 @@ import { usePickerLayout, } from '../PickersLayout'; import { DateOrTimeViewWithMeridiem } from '../internals/models/common'; +import { PickerValidValue } from '../internals/models'; type DesktopDateTimePickerLayoutComponent = (< - TIsRange extends boolean, + TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, >( - props: PickersLayoutProps & React.RefAttributes, + props: PickersLayoutProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; /** * @ignore - internal component. */ const DesktopDateTimePickerLayout = React.forwardRef(function DesktopDateTimePickerLayout< - TIsRange extends boolean, + TValue extends PickerValidValue, 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; const isActionBarVisible = actionBar && (actionBar.props.actions?.length ?? 0) > 0; - const ownerState = { ...props, isRtl } as PickersLayoutProps; + const ownerState = { ...props, isRtl }; return ( - Describes', () => { @@ -54,7 +55,7 @@ describe(' - Describes', () => { ], })); - describeValue(DesktopDateTimePicker, () => ({ + describeValue(DesktopDateTimePicker, () => ({ render, componentFamily: 'picker', type: 'date-time', diff --git a/packages/x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.tsx b/packages/x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.tsx index 35c1f980b55d..75528d45cd42 100644 --- a/packages/x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.tsx +++ b/packages/x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.tsx @@ -244,17 +244,17 @@ DesktopTimePicker.propTypes = { name: PropTypes.string, /** * Callback fired when the value is accepted. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @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 {InferPickerValue} value The value that was just accepted. + * @param {TValue} value The value that was just accepted. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onAccept: PropTypes.func, /** * Callback fired when the value changes. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @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 {InferPickerValue} value The new value. + * @param {TValue} value The new value. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onChange: PropTypes.func, @@ -268,9 +268,9 @@ DesktopTimePicker.propTypes = { * When a validation error is detected, the `error` parameter contains a non-null value. * This can be used to render an appropriate form error. * @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. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @param {TError} error The reason why the current value is not valid. - * @param {InferPickerValue} value The value associated with the error. + * @param {TValue} value The value associated with the error. */ onError: PropTypes.func, /** 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 ca9ad873cd19..700a92a4156f 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 @@ -11,6 +11,7 @@ import { getFieldInputRoot, } from 'test/utils/pickers'; import { DesktopTimePicker } from '@mui/x-date-pickers/DesktopTimePicker'; +import { PickerValue } from '@mui/x-date-pickers/internals'; import { describeConformance } from 'test/utils/describeConformance'; describe(' - Describes', () => { @@ -46,7 +47,7 @@ describe(' - Describes', () => { ], })); - describeValue(DesktopTimePicker, () => ({ + describeValue(DesktopTimePicker, () => ({ render, componentFamily: 'picker', type: 'time', diff --git a/packages/x-date-pickers/src/DigitalClock/DigitalClock.tsx b/packages/x-date-pickers/src/DigitalClock/DigitalClock.tsx index dd2e6132bb8f..1e17db35eed6 100644 --- a/packages/x-date-pickers/src/DigitalClock/DigitalClock.tsx +++ b/packages/x-date-pickers/src/DigitalClock/DigitalClock.tsx @@ -16,7 +16,7 @@ import { PickerViewRoot } from '../internals/components/PickerViewRoot'; import { getDigitalClockUtilityClass } from './digitalClockClasses'; import { DigitalClockProps } from './DigitalClock.types'; import { useViews } from '../internals/hooks/useViews'; -import { PickerValidDate, TimeView } from '../models'; +import { PickerValidDate } from '../models'; import { DIGITAL_CLOCK_VIEW_HEIGHT } from '../internals/constants/dimensions'; import { useControlledValueWithTimezone } from '../internals/hooks/useValueWithTimezone'; import { singleItemValueManager } from '../internals/utils/valueManagers'; @@ -197,7 +197,7 @@ export const DigitalClock = React.forwardRef(function DigitalClock( handleRawValueChange(newValue, 'finish', 'hours'), ); - const { setValueAndGoToNextView } = useViews>({ + const { setValueAndGoToNextView } = useViews({ view: inView, views, openTo, @@ -441,9 +441,9 @@ DigitalClock.propTypes = { minutesStep: PropTypes.number, /** * Callback fired when the value changes. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @template TView The view type. Will be one of date or time views. - * @param {InferPickerValue} value The new value. + * @param {TValue} value The new value. * @param {PickerSelectionState | undefined} selectionState Indicates if the date selection is complete. * @param {TView | undefined} selectedView Indicates the view in which the selection has been made. */ 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 845d744cfba5..c4f5013abc99 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 @@ -10,6 +10,7 @@ import { formatFullTimeValue, } from 'test/utils/pickers'; import { DigitalClock, digitalClockClasses as classes } from '@mui/x-date-pickers/DigitalClock'; +import { PickerValue } from '@mui/x-date-pickers/internals'; import { describeConformance } from 'test/utils/describeConformance'; describe(' - Describes', () => { @@ -32,7 +33,7 @@ describe(' - Describes', () => { skip: ['componentProp', 'componentsProp', 'themeVariants'], })); - describeValue(DigitalClock, () => ({ + describeValue(DigitalClock, () => ({ render, componentFamily: 'digital-clock', type: 'time', diff --git a/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.tsx b/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.tsx index 0519f7dc6899..90e9db74e87d 100644 --- a/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.tsx +++ b/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.tsx @@ -215,17 +215,17 @@ MobileDatePicker.propTypes = { name: PropTypes.string, /** * Callback fired when the value is accepted. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @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 {InferPickerValue} value The value that was just accepted. + * @param {TValue} value The value that was just accepted. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onAccept: PropTypes.func, /** * Callback fired when the value changes. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @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 {InferPickerValue} value The new value. + * @param {TValue} value The new value. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onChange: PropTypes.func, @@ -239,9 +239,9 @@ MobileDatePicker.propTypes = { * When a validation error is detected, the `error` parameter contains a non-null value. * This can be used to render an appropriate form error. * @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. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @param {TError} error The reason why the current value is not valid. - * @param {InferPickerValue} value The value associated with the error. + * @param {TValue} value The value associated with the error. */ onError: PropTypes.func, /** 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 c53ef9a11e71..2a75c950b93d 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 @@ -11,6 +11,7 @@ import { getFieldInputRoot, } from 'test/utils/pickers'; import { MobileDatePicker } from '@mui/x-date-pickers/MobileDatePicker'; +import { PickerValue } from '@mui/x-date-pickers/internals'; import { describeConformance } from 'test/utils/describeConformance'; describe(' - Describes', () => { @@ -41,7 +42,7 @@ describe(' - Describes', () => { ], })); - describeValue(MobileDatePicker, () => ({ + describeValue(MobileDatePicker, () => ({ render, componentFamily: 'picker', type: 'date', diff --git a/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.tsx b/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.tsx index 103e2428b01b..cdc1c91a5abe 100644 --- a/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.tsx +++ b/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.tsx @@ -268,17 +268,17 @@ MobileDateTimePicker.propTypes = { name: PropTypes.string, /** * Callback fired when the value is accepted. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @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 {InferPickerValue} value The value that was just accepted. + * @param {TValue} value The value that was just accepted. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onAccept: PropTypes.func, /** * Callback fired when the value changes. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @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 {InferPickerValue} value The new value. + * @param {TValue} value The new value. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onChange: PropTypes.func, @@ -292,9 +292,9 @@ MobileDateTimePicker.propTypes = { * When a validation error is detected, the `error` parameter contains a non-null value. * This can be used to render an appropriate form error. * @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. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @param {TError} error The reason why the current value is not valid. - * @param {InferPickerValue} value The value associated with the error. + * @param {TValue} value The value associated with the error. */ onError: PropTypes.func, /** 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 b66a0c6a6d6e..30ae63e192e4 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 @@ -12,6 +12,7 @@ import { getFieldInputRoot, } from 'test/utils/pickers'; import { MobileDateTimePicker } from '@mui/x-date-pickers/MobileDateTimePicker'; +import { PickerValue } from '@mui/x-date-pickers/internals'; import { describeConformance } from 'test/utils/describeConformance'; describe(' - Describes', () => { @@ -46,7 +47,7 @@ describe(' - Describes', () => { ], })); - describeValue(MobileDateTimePicker, () => ({ + describeValue(MobileDateTimePicker, () => ({ render, componentFamily: 'picker', type: 'date-time', diff --git a/packages/x-date-pickers/src/MobileTimePicker/MobileTimePicker.tsx b/packages/x-date-pickers/src/MobileTimePicker/MobileTimePicker.tsx index 52dbfe9a23c7..4428a5c28a14 100644 --- a/packages/x-date-pickers/src/MobileTimePicker/MobileTimePicker.tsx +++ b/packages/x-date-pickers/src/MobileTimePicker/MobileTimePicker.tsx @@ -207,17 +207,17 @@ MobileTimePicker.propTypes = { name: PropTypes.string, /** * Callback fired when the value is accepted. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @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 {InferPickerValue} value The value that was just accepted. + * @param {TValue} value The value that was just accepted. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onAccept: PropTypes.func, /** * Callback fired when the value changes. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @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 {InferPickerValue} value The new value. + * @param {TValue} value The new value. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onChange: PropTypes.func, @@ -231,9 +231,9 @@ MobileTimePicker.propTypes = { * When a validation error is detected, the `error` parameter contains a non-null value. * This can be used to render an appropriate form error. * @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. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @param {TError} error The reason why the current value is not valid. - * @param {InferPickerValue} value The value associated with the error. + * @param {TValue} value The value associated with the error. */ onError: PropTypes.func, /** 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 9107bdf8486d..5cff45ba0c9c 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 @@ -13,6 +13,7 @@ import { getFieldInputRoot, } from 'test/utils/pickers'; import { MobileTimePicker } from '@mui/x-date-pickers/MobileTimePicker'; +import { PickerValue } from '@mui/x-date-pickers/internals'; import { describeConformance } from 'test/utils/describeConformance'; describe(' - Describes', () => { @@ -47,7 +48,7 @@ describe(' - Describes', () => { ], })); - describeValue(MobileTimePicker, () => ({ + describeValue(MobileTimePicker, () => ({ render, componentFamily: 'picker', type: 'time', 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 5c726987d320..9f9a3a8d903b 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 @@ -8,6 +8,7 @@ import { describeValue, } from 'test/utils/pickers'; import { MonthCalendar, monthCalendarClasses as classes } from '@mui/x-date-pickers/MonthCalendar'; +import { PickerValue } from '@mui/x-date-pickers/internals'; import { describeConformance } from 'test/utils/describeConformance'; describe(' - Describes', () => { @@ -29,7 +30,7 @@ describe(' - Describes', () => { skip: ['componentProp', 'componentsProp', 'themeVariants'], })); - describeValue(MonthCalendar, () => ({ + describeValue(MonthCalendar, () => ({ render, componentFamily: 'calendar', values: [adapterToUse.date('2018-01-01'), adapterToUse.date('2018-02-01')], diff --git a/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClock.tsx b/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClock.tsx index 68295c6856f1..60123eb0d570 100644 --- a/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClock.tsx +++ b/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClock.tsx @@ -153,7 +153,7 @@ export const MultiSectionDigitalClock = React.forwardRef(function MultiSectionDi return inViews.includes('meridiem') ? inViews : [...inViews, 'meridiem']; }, [ampm, inViews]); - const { view, setValueAndGoToNextView, focusedView } = useViews({ + const { view, setValueAndGoToNextView, focusedView } = useViews({ view: inView, views, openTo, @@ -517,9 +517,9 @@ MultiSectionDigitalClock.propTypes = { minutesStep: PropTypes.number, /** * Callback fired when the value changes. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @template TView The view type. Will be one of date or time views. - * @param {InferPickerValue} value The new value. + * @param {TValue} value The new value. * @param {PickerSelectionState | undefined} selectionState Indicates if the date selection is complete. * @param {TView | undefined} selectedView Indicates the view in which the selection has been made. */ 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 469fcad2a475..3ab127d6bafa 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 @@ -12,7 +12,7 @@ import { MultiSectionDigitalClock, multiSectionDigitalClockClasses as classes, } from '@mui/x-date-pickers/MultiSectionDigitalClock'; -import { formatMeridiem } from '@mui/x-date-pickers/internals'; +import { formatMeridiem, PickerValue } from '@mui/x-date-pickers/internals'; import { describeConformance } from 'test/utils/describeConformance'; describe(' - Describes', () => { @@ -35,7 +35,7 @@ describe(' - Describes', () => { skip: ['componentProp', 'componentsProp', 'themeVariants'], })); - describeValue(MultiSectionDigitalClock, () => ({ + describeValue(MultiSectionDigitalClock, () => ({ render, componentFamily: 'multi-section-digital-clock', type: 'time', diff --git a/packages/x-date-pickers/src/PickersLayout/PickersLayout.tsx b/packages/x-date-pickers/src/PickersLayout/PickersLayout.tsx index 1dcd9ed1628c..2c9fbc0e8417 100644 --- a/packages/x-date-pickers/src/PickersLayout/PickersLayout.tsx +++ b/packages/x-date-pickers/src/PickersLayout/PickersLayout.tsx @@ -7,7 +7,7 @@ import composeClasses from '@mui/utils/composeClasses'; import { PickersLayoutProps } from './PickersLayout.types'; import { pickersLayoutClasses, getPickersLayoutUtilityClass } from './pickersLayoutClasses'; import usePickerLayout from './usePickerLayout'; -import { DateOrTimeViewWithMeridiem } from '../internals/models'; +import { DateOrTimeViewWithMeridiem, PickerValidValue } from '../internals/models'; const useUtilityClasses = (ownerState: PickersLayoutProps) => { const { isLandscape, classes } = ownerState; @@ -79,8 +79,11 @@ export const PickersLayoutContentWrapper = styled('div', { flexDirection: 'column', }); -type PickersLayoutComponent = (( - props: PickersLayoutProps & React.RefAttributes, +type PickersLayoutComponent = (< + TValue extends PickerValidValue, + TView extends DateOrTimeViewWithMeridiem, +>( + props: PickersLayoutProps & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; /** @@ -93,9 +96,9 @@ type PickersLayoutComponent = ((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); @@ -191,7 +194,7 @@ PickersLayout.propTypes = { PropTypes.func, PropTypes.object, ]), - value: PropTypes.any, + value: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]), view: PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']), views: PropTypes.arrayOf( PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']).isRequired, diff --git a/packages/x-date-pickers/src/PickersLayout/PickersLayout.types.ts b/packages/x-date-pickers/src/PickersLayout/PickersLayout.types.ts index 093f425d93f7..007753e0ead3 100644 --- a/packages/x-date-pickers/src/PickersLayout/PickersLayout.types.ts +++ b/packages/x-date-pickers/src/PickersLayout/PickersLayout.types.ts @@ -13,10 +13,10 @@ import { PickersShortcuts, } from '../PickersShortcuts/PickersShortcuts'; import { PickerOwnerState } from '../models'; -import { InferPickerValue } from '../internals/models'; +import { PickerValidValue } from '../internals/models'; export interface ExportedPickersLayoutSlots< - TIsRange extends boolean, + TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, > { /** @@ -28,13 +28,13 @@ export interface ExportedPickersLayoutSlots< * Custom component for the shortcuts. * @default PickersShortcuts */ - shortcuts?: React.JSXElementConstructor>; + shortcuts?: React.JSXElementConstructor>; /** * Custom component for wrapping the layout. * It wraps the toolbar, views, action bar, and shortcuts. */ layout?: React.JSXElementConstructor< - PickersLayoutProps & React.RefAttributes + PickersLayoutProps & React.RefAttributes >; } @@ -44,7 +44,7 @@ export interface PickerLayoutOwnerState extends PickerOwnerState { } export interface ExportedPickersLayoutSlotProps< - TIsRange extends boolean, + TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, > { /** @@ -58,13 +58,13 @@ export interface ExportedPickersLayoutSlotProps< /** * Props passed down to the layoutRoot component. */ - layout?: Partial>; + layout?: Partial>; } export interface PickersLayoutSlots< - TIsRange extends boolean, + TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, -> extends ExportedPickersLayoutSlots { +> extends ExportedPickersLayoutSlots { /** * Tabs enabling toggling between views. */ @@ -73,13 +73,13 @@ export interface PickersLayoutSlots< * Custom component for the toolbar. * It is placed above the picker views. */ - toolbar?: React.JSXElementConstructor>; + toolbar?: React.JSXElementConstructor>; } export interface PickersLayoutSlotProps< - TIsRange extends boolean, + TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, -> extends ExportedPickersLayoutSlotProps { +> extends ExportedPickersLayoutSlotProps { /** * Props passed down to the tabs component. */ @@ -91,10 +91,9 @@ export interface PickersLayoutSlotProps< } export interface PickersLayoutProps< - TIsRange extends boolean, + TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, -> extends Omit, 'value'> { - value?: InferPickerValue; +> extends UsePickerLayoutPropsResponseLayoutProps { className?: string; children?: React.ReactNode; /** @@ -109,22 +108,22 @@ 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. */ isRtl: boolean; } -export interface SubComponents { +export interface SubComponents { toolbar: React.ReactElement | null; content: React.ReactNode; tabs: React.ReactElement | null; actionBar: React.ReactElement; - shortcuts: React.ReactElement> | null; + shortcuts: React.ReactElement> | null; } diff --git a/packages/x-date-pickers/src/PickersLayout/usePickerLayout.tsx b/packages/x-date-pickers/src/PickersLayout/usePickerLayout.tsx index bddf6e3e219a..9fb75c8dc435 100644 --- a/packages/x-date-pickers/src/PickersLayout/usePickerLayout.tsx +++ b/packages/x-date-pickers/src/PickersLayout/usePickerLayout.tsx @@ -7,12 +7,12 @@ import { PickerLayoutOwnerState, PickersLayoutProps, SubComponents } from './Pic import { getPickersLayoutUtilityClass, PickersLayoutClasses } from './pickersLayoutClasses'; import { PickersShortcuts } from '../PickersShortcuts'; import { BaseToolbarProps } from '../internals/models/props/toolbar'; -import { DateOrTimeViewWithMeridiem } from '../internals/models'; +import { DateOrTimeViewWithMeridiem, PickerValidValue } from '../internals/models'; import { usePickerPrivateContext } from '../internals/hooks/usePickerPrivateContext'; -function toolbarHasView( - toolbarProps: BaseToolbarProps | any, -): toolbarProps is BaseToolbarProps { +function toolbarHasView( + toolbarProps: BaseToolbarProps | any, +): toolbarProps is BaseToolbarProps { return toolbarProps.view !== null; } @@ -34,11 +34,11 @@ const useUtilityClasses = ( return composeClasses(slots, getPickersLayoutUtilityClass, classes); }; -interface UsePickerLayoutResponse extends SubComponents {} +interface UsePickerLayoutResponse extends SubComponents {} -const usePickerLayout = ( - props: PickersLayoutProps, -): UsePickerLayoutResponse => { +const usePickerLayout = ( + props: PickersLayoutProps, +): UsePickerLayoutResponse => { const { ownerState: pickersOwnerState } = usePickerPrivateContext(); const { diff --git a/packages/x-date-pickers/src/PickersShortcuts/PickersShortcuts.tsx b/packages/x-date-pickers/src/PickersShortcuts/PickersShortcuts.tsx index 1b6c822bb444..3a2f28421139 100644 --- a/packages/x-date-pickers/src/PickersShortcuts/PickersShortcuts.tsx +++ b/packages/x-date-pickers/src/PickersShortcuts/PickersShortcuts.tsx @@ -5,15 +5,15 @@ import List, { ListProps } from '@mui/material/List'; import ListItem from '@mui/material/ListItem'; import Chip from '@mui/material/Chip'; import { VIEW_HEIGHT } from '../internals/constants/dimensions'; -import { InferPickerValue } from '../internals/models'; +import { PickerValidValue } from '../internals/models'; -interface PickersShortcutsItemGetValueParams { - isValid: (value: InferPickerValue) => boolean; +interface PickersShortcutsItemGetValueParams { + isValid: (value: TValue) => boolean; } -export interface PickersShortcutsItem { +export interface PickersShortcutsItem { label: string; - getValue: (params: PickersShortcutsItemGetValueParams) => InferPickerValue; + getValue: (params: PickersShortcutsItemGetValueParams) => TValue; /** * Identifier of the shortcut. * If provided, it will be used as the key of the shortcut. @@ -21,18 +21,18 @@ export interface PickersShortcutsItem { id?: string; } -export type PickersShortcutsItemContext = Omit, 'getValue'>; +export type PickersShortcutsItemContext = Omit, 'getValue'>; export type PickerShortcutChangeImportance = 'set' | 'accept'; -export interface ExportedPickersShortcutProps +export interface ExportedPickersShortcutProps extends Omit { /** * Ordered array of shortcuts to display. * If empty, does not display the shortcuts. * @default [] */ - items?: PickersShortcutsItem[]; + items?: PickersShortcutsItem[]; /** * Importance of the change when picking a shortcut: * - "accept": fires `onChange`, fires `onAccept` and closes the picker. @@ -42,15 +42,15 @@ export interface ExportedPickersShortcutProps changeImportance?: PickerShortcutChangeImportance; } -export interface PickersShortcutsProps - extends ExportedPickersShortcutProps { +export interface PickersShortcutsProps + extends ExportedPickersShortcutProps { isLandscape: boolean; onChange: ( - newValue: InferPickerValue, + newValue: TValue, changeImportance: PickerShortcutChangeImportance, shortcut: PickersShortcutsItemContext, ) => void; - isValid: (value: InferPickerValue) => boolean; + isValid: (value: TValue) => boolean; } /** @@ -62,7 +62,7 @@ export interface PickersShortcutsProps * * - [PickersShortcuts API](https://mui.com/x/api/date-pickers/pickers-shortcuts/) */ -function PickersShortcuts(props: PickersShortcutsProps) { +function PickersShortcuts(props: PickersShortcutsProps) { const { items, changeImportance = 'accept', isLandscape, onChange, isValid, ...other } = props; if (items == null || items.length === 0) { diff --git a/packages/x-date-pickers/src/StaticDatePicker/StaticDatePicker.tsx b/packages/x-date-pickers/src/StaticDatePicker/StaticDatePicker.tsx index 0afc8292e9f1..d7a5e18afdbb 100644 --- a/packages/x-date-pickers/src/StaticDatePicker/StaticDatePicker.tsx +++ b/packages/x-date-pickers/src/StaticDatePicker/StaticDatePicker.tsx @@ -155,17 +155,17 @@ StaticDatePicker.propTypes = { monthsPerRow: PropTypes.oneOf([3, 4]), /** * Callback fired when the value is accepted. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @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 {InferPickerValue} value The value that was just accepted. + * @param {TValue} value The value that was just accepted. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onAccept: PropTypes.func, /** * Callback fired when the value changes. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @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 {InferPickerValue} value The new value. + * @param {TValue} value The new value. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onChange: PropTypes.func, @@ -180,9 +180,9 @@ StaticDatePicker.propTypes = { * When a validation error is detected, the `error` parameter contains a non-null value. * This can be used to render an appropriate form error. * @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. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @param {TError} error The reason why the current value is not valid. - * @param {InferPickerValue} value The value associated with the error. + * @param {TValue} value The value associated with the error. */ onError: PropTypes.func, /** diff --git a/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.tsx b/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.tsx index a169f0faf618..301852e0ff4d 100644 --- a/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.tsx +++ b/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.tsx @@ -207,17 +207,17 @@ StaticDateTimePicker.propTypes = { monthsPerRow: PropTypes.oneOf([3, 4]), /** * Callback fired when the value is accepted. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @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 {InferPickerValue} value The value that was just accepted. + * @param {TValue} value The value that was just accepted. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onAccept: PropTypes.func, /** * Callback fired when the value changes. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @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 {InferPickerValue} value The new value. + * @param {TValue} value The new value. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onChange: PropTypes.func, @@ -232,9 +232,9 @@ StaticDateTimePicker.propTypes = { * When a validation error is detected, the `error` parameter contains a non-null value. * This can be used to render an appropriate form error. * @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. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @param {TError} error The reason why the current value is not valid. - * @param {InferPickerValue} value The value associated with the error. + * @param {TValue} value The value associated with the error. */ onError: PropTypes.func, /** diff --git a/packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.tsx b/packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.tsx index 0123d9ce3781..44341686e4fe 100644 --- a/packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.tsx +++ b/packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.tsx @@ -145,17 +145,17 @@ StaticTimePicker.propTypes = { minutesStep: PropTypes.number, /** * Callback fired when the value is accepted. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @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 {InferPickerValue} value The value that was just accepted. + * @param {TValue} value The value that was just accepted. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onAccept: PropTypes.func, /** * Callback fired when the value changes. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @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 {InferPickerValue} value The new value. + * @param {TValue} value The new value. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onChange: PropTypes.func, @@ -170,9 +170,9 @@ StaticTimePicker.propTypes = { * When a validation error is detected, the `error` parameter contains a non-null value. * This can be used to render an appropriate form error. * @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. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @param {TError} error The reason why the current value is not valid. - * @param {InferPickerValue} value The value associated with the error. + * @param {TValue} value The value associated with the error. */ onError: PropTypes.func, /** diff --git a/packages/x-date-pickers/src/TimeClock/TimeClock.tsx b/packages/x-date-pickers/src/TimeClock/TimeClock.tsx index a315c7257e7f..0dbaf87b9271 100644 --- a/packages/x-date-pickers/src/TimeClock/TimeClock.tsx +++ b/packages/x-date-pickers/src/TimeClock/TimeClock.tsx @@ -20,6 +20,7 @@ import { getHourNumbers, getMinutesNumbers } from './ClockNumbers'; import { useControlledValueWithTimezone } from '../internals/hooks/useValueWithTimezone'; import { singleItemValueManager } from '../internals/utils/valueManagers'; import { useClockReferenceDate } from '../internals/hooks/useClockReferenceDate'; +import { PickerValue } from '../internals/models'; const useUtilityClasses = (ownerState: TimeClockProps) => { const { classes } = ownerState; @@ -129,10 +130,7 @@ export const TimeClock = React.forwardRef(function TimeClock( const translations = usePickerTranslations(); const now = useNow(timezone); - const { view, setView, previousView, nextView, setValueAndGoToNextView } = useViews< - false, - TimeView - >({ + const { view, setView, previousView, nextView, setValueAndGoToNextView } = useViews({ view: inView, views, openTo, @@ -467,9 +465,9 @@ TimeClock.propTypes = { minutesStep: PropTypes.number, /** * Callback fired when the value changes. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @template TView The view type. Will be one of date or time views. - * @param {InferPickerValue} value The new value. + * @param {TValue} value The new value. * @param {PickerSelectionState | undefined} selectionState Indicates if the date selection is complete. * @param {TView | undefined} selectedView Indicates the view in which the selection has been made. */ 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 9cf6545bbce7..140d667a2938 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 @@ -13,6 +13,7 @@ import { describeValue, } from 'test/utils/pickers'; import { describeConformance } from 'test/utils/describeConformance'; +import { PickerValue } from '@mui/x-date-pickers/internals'; describe(' - Describes', () => { const { render, clock } = createPickerRenderer(); @@ -26,7 +27,7 @@ describe(' - Describes', () => { skip: ['componentProp', 'componentsProp', 'themeVariants'], })); - describeValue(TimeClock, () => ({ + describeValue(TimeClock, () => ({ render, componentFamily: 'clock', values: [adapterToUse.date('2018-01-01T12:30:00'), adapterToUse.date('2018-01-01T13:35:00')], diff --git a/packages/x-date-pickers/src/TimeField/TimeField.tsx b/packages/x-date-pickers/src/TimeField/TimeField.tsx index d0335a2e3778..b84ff450fa90 100644 --- a/packages/x-date-pickers/src/TimeField/TimeField.tsx +++ b/packages/x-date-pickers/src/TimeField/TimeField.tsx @@ -216,9 +216,9 @@ TimeField.propTypes = { onBlur: PropTypes.func, /** * Callback fired when the value changes. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @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 {InferPickerValue} value The new value. + * @param {TValue} value The new value. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onChange: PropTypes.func, @@ -231,9 +231,9 @@ TimeField.propTypes = { * When a validation error is detected, the `error` parameter contains a non-null value. * This can be used to render an appropriate form error. * @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. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @param {TError} error The reason why the current value is not valid. - * @param {InferPickerValue} value The value associated with the error. + * @param {TValue} value The value associated with the error. */ onError: PropTypes.func, onFocus: PropTypes.func, diff --git a/packages/x-date-pickers/src/TimeField/TimeField.types.ts b/packages/x-date-pickers/src/TimeField/TimeField.types.ts index 907332c7fd71..9767d48f47d1 100644 --- a/packages/x-date-pickers/src/TimeField/TimeField.types.ts +++ b/packages/x-date-pickers/src/TimeField/TimeField.types.ts @@ -11,10 +11,11 @@ import { } from '../hooks/useClearableField'; import { ExportedValidateTimeProps } from '../validation/validateTime'; import { AmPmProps } from '../internals/models/props/time'; +import { PickerValue } from '../internals/models'; export interface UseTimeFieldProps extends MakeOptional< - UseFieldInternalProps, + UseFieldInternalProps, 'format' >, ExportedValidateTimeProps, 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 dfc22c31bbac..515cbd0b2639 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 @@ -11,6 +11,7 @@ import { import { TimeField } from '@mui/x-date-pickers/TimeField'; import { PickersTextField } from '@mui/x-date-pickers/PickersTextField'; import { describeConformance } from 'test/utils/describeConformance'; +import { PickerValue } from '@mui/x-date-pickers/internals'; describe(' - Describes', () => { const { render, clock } = createPickerRenderer({ clock: 'fake' }); @@ -31,7 +32,7 @@ describe(' - Describes', () => { skip: ['componentProp', 'componentsProp', 'themeVariants', 'themeStyleOverrides'], })); - describeValue(TimeField, () => ({ + describeValue(TimeField, () => ({ render, componentFamily: 'field', values: [adapterToUse.date('2018-01-01'), adapterToUse.date('2018-01-02')], diff --git a/packages/x-date-pickers/src/TimeField/useTimeField.ts b/packages/x-date-pickers/src/TimeField/useTimeField.ts index 601d593fe0b6..51a88016a8dc 100644 --- a/packages/x-date-pickers/src/TimeField/useTimeField.ts +++ b/packages/x-date-pickers/src/TimeField/useTimeField.ts @@ -8,6 +8,7 @@ import { UseTimeFieldProps } from './TimeField.types'; import { validateTime } from '../validation'; import { useSplitFieldProps } from '../hooks'; import { useDefaultizedTimeField } from '../internals/hooks/defaultizedFieldProps'; +import { PickerValue } from '../internals/models'; export const useTimeField = < TEnableAccessibleFieldDOMStructure extends boolean, @@ -23,7 +24,7 @@ export const useTimeField = < const { forwardedProps, internalProps } = useSplitFieldProps(props, 'time'); return useField< - false, + PickerValue, TEnableAccessibleFieldDOMStructure, typeof forwardedProps, typeof internalProps diff --git a/packages/x-date-pickers/src/TimePicker/TimePicker.tsx b/packages/x-date-pickers/src/TimePicker/TimePicker.tsx index 27f8f244d4fd..6b3b60669aed 100644 --- a/packages/x-date-pickers/src/TimePicker/TimePicker.tsx +++ b/packages/x-date-pickers/src/TimePicker/TimePicker.tsx @@ -154,17 +154,17 @@ TimePicker.propTypes = { name: PropTypes.string, /** * Callback fired when the value is accepted. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @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 {InferPickerValue} value The value that was just accepted. + * @param {TValue} value The value that was just accepted. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onAccept: PropTypes.func, /** * Callback fired when the value changes. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @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 {InferPickerValue} value The new value. + * @param {TValue} value The new value. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onChange: PropTypes.func, @@ -178,9 +178,9 @@ TimePicker.propTypes = { * When a validation error is detected, the `error` parameter contains a non-null value. * This can be used to render an appropriate form error. * @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. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @param {TError} error The reason why the current value is not valid. - * @param {InferPickerValue} value The value associated with the error. + * @param {TValue} value The value associated with the error. */ onError: PropTypes.func, /** diff --git a/packages/x-date-pickers/src/TimePicker/TimePicker.types.ts b/packages/x-date-pickers/src/TimePicker/TimePicker.types.ts index 192d9c72cd51..03ce715b6e85 100644 --- a/packages/x-date-pickers/src/TimePicker/TimePicker.types.ts +++ b/packages/x-date-pickers/src/TimePicker/TimePicker.types.ts @@ -3,7 +3,7 @@ import { DesktopTimePickerSlots, DesktopTimePickerSlotProps, } from '../DesktopTimePicker'; -import { BaseSingleInputFieldProps, TimeViewWithMeridiem } from '../internals/models'; +import { BaseSingleInputFieldProps, PickerValue, TimeViewWithMeridiem } from '../internals/models'; import { MobileTimePickerProps, MobileTimePickerSlots, @@ -46,4 +46,4 @@ export interface TimePickerProps = ValidateTimeProps & - BaseSingleInputFieldProps; + BaseSingleInputFieldProps; diff --git a/packages/x-date-pickers/src/TimePicker/TimePickerToolbar.tsx b/packages/x-date-pickers/src/TimePicker/TimePickerToolbar.tsx index 9ed56ef9f2a4..bbc3c77e1bc1 100644 --- a/packages/x-date-pickers/src/TimePicker/TimePickerToolbar.tsx +++ b/packages/x-date-pickers/src/TimePicker/TimePickerToolbar.tsx @@ -18,12 +18,12 @@ import { timePickerToolbarClasses, TimePickerToolbarClasses, } from './timePickerToolbarClasses'; -import { TimeViewWithMeridiem } from '../internals/models'; +import { PickerValue, TimeViewWithMeridiem } from '../internals/models'; import { formatMeridiem } from '../internals/utils/date-utils'; import { PickerValidDate } from '../models'; export interface TimePickerToolbarProps - extends BaseToolbarProps, + extends BaseToolbarProps, ExportedTimePickerToolbarProps { ampm?: boolean; ampmInClock?: boolean; diff --git a/packages/x-date-pickers/src/TimePicker/shared.tsx b/packages/x-date-pickers/src/TimePicker/shared.tsx index f8660a447a9e..ff73b36126e9 100644 --- a/packages/x-date-pickers/src/TimePicker/shared.tsx +++ b/packages/x-date-pickers/src/TimePicker/shared.tsx @@ -16,7 +16,7 @@ import { PickerViewRendererLookup } from '../internals/hooks/usePicker/usePicker import { TimeViewRendererProps } from '../timeViewRenderers'; import { applyDefaultViewProps } from '../internals/utils/views'; import { BaseClockProps, ExportedBaseClockProps } from '../internals/models/props/time'; -import { TimeViewWithMeridiem } from '../internals/models'; +import { PickerValue, TimeViewWithMeridiem } from '../internals/models'; export interface BaseTimePickerSlots extends TimeClockSlots { /** @@ -34,14 +34,14 @@ export type TimePickerViewRenderers< TView extends TimeViewWithMeridiem, TAdditionalProps extends {} = {}, > = PickerViewRendererLookup< - false, + PickerValue, TView, TimeViewRendererProps>, TAdditionalProps >; export interface BaseTimePickerProps - extends BasePickerInputProps, + extends BasePickerInputProps, ExportedBaseClockProps { /** * Display ampm controls under the clock (instead of in the toolbar). 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 b661a114096a..448cbb8fe599 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 @@ -9,6 +9,7 @@ import { describeValue, } from 'test/utils/pickers'; import { describeConformance } from 'test/utils/describeConformance'; +import { PickerValue } from '@mui/x-date-pickers/internals'; describe(' - Describes', () => { const { render, clock } = createPickerRenderer({ @@ -31,7 +32,7 @@ describe(' - Describes', () => { skip: ['componentProp', 'componentsProp', 'themeVariants'], })); - describeValue(YearCalendar, () => ({ + describeValue(YearCalendar, () => ({ render, componentFamily: 'calendar', values: [adapterToUse.date('2018-01-01'), adapterToUse.date('2018-01-01')], diff --git a/packages/x-date-pickers/src/internals/components/PickersToolbar.tsx b/packages/x-date-pickers/src/internals/components/PickersToolbar.tsx index 9c868b0c81d4..fd9acbb88680 100644 --- a/packages/x-date-pickers/src/internals/components/PickersToolbar.tsx +++ b/packages/x-date-pickers/src/internals/components/PickersToolbar.tsx @@ -5,12 +5,12 @@ import { styled, useThemeProps } from '@mui/material/styles'; import composeClasses from '@mui/utils/composeClasses'; import { BaseToolbarProps } from '../models/props/toolbar'; import { getPickersToolbarUtilityClass, PickersToolbarClasses } from './pickersToolbarClasses'; -import { DateOrTimeViewWithMeridiem } from '../models'; +import { DateOrTimeViewWithMeridiem, PickerValidValue } from '../models'; export interface PickersToolbarProps< - TIsRange extends boolean, + TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, -> extends Pick, 'isLandscape' | 'hidden' | 'titleId'> { +> extends Pick, 'isLandscape' | 'hidden' | 'titleId'> { className?: string; landscapeDirection?: 'row' | 'column'; toolbarTitle: React.ReactNode; @@ -87,18 +87,18 @@ const PickersToolbarContent = styled('div', { }); type PickersToolbarComponent = (< - TIsRange extends boolean, + TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, >( - props: React.PropsWithChildren> & + props: React.PropsWithChildren> & React.RefAttributes, ) => React.JSX.Element) & { propTypes?: any }; export const PickersToolbar = React.forwardRef(function PickersToolbar< - TIsRange extends boolean, + TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, >( - inProps: React.PropsWithChildren>, + inProps: React.PropsWithChildren>, ref: React.Ref, ) { const props = useThemeProps({ props: inProps, name: 'MuiPickersToolbar' }); 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 cfb3e7c4abe3..78d469890463 100644 --- a/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.tsx +++ b/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.tsx @@ -9,7 +9,7 @@ import { UseDesktopPickerParams, UseDesktopPickerProps } from './useDesktopPicke import { usePicker } from '../usePicker'; import { PickersLayout } from '../../../PickersLayout'; import { FieldRef, InferError } from '../../../models'; -import { DateOrTimeViewWithMeridiem, BaseSingleInputFieldProps } from '../../models'; +import { DateOrTimeViewWithMeridiem, BaseSingleInputFieldProps, PickerValue } from '../../models'; import { PickerProvider } from '../../components/PickerProvider'; /** @@ -54,7 +54,7 @@ export const useDesktopPicker = < } = props; const containerRef = React.useRef(null); - const fieldRef = React.useRef>(null); + const fieldRef = React.useRef>(null); const labelId = useId(); const isToolbarHidden = innerSlotProps?.toolbar?.hidden ?? false; @@ -69,7 +69,7 @@ export const useDesktopPicker = < shouldRestoreFocus, fieldProps: pickerFieldProps, ownerState, - } = usePicker({ + } = usePicker({ ...pickerParams, props, fieldRef, @@ -111,7 +111,7 @@ export const useDesktopPicker = < const Field = slots.field; const fieldProps: BaseSingleInputFieldProps< - false, + PickerValue, TEnableAccessibleFieldDOMStructure, InferError > = useSlotProps({ 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 e72875c21e9f..555db1d6308f 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 @@ -19,7 +19,7 @@ import { } from '../../../PickersLayout/PickersLayout.types'; import { UsePickerValueNonStaticProps } from '../usePicker/usePickerValue.types'; import { UsePickerViewsNonStaticProps, UsePickerViewsProps } from '../usePicker/usePickerViews'; -import { DateOrTimeViewWithMeridiem } from '../../models'; +import { DateOrTimeViewWithMeridiem, PickerValue } from '../../models'; import { UseClearableFieldSlots, UseClearableFieldSlotProps, @@ -30,7 +30,7 @@ export interface UseDesktopPickerSlots PickersPopperSlots, 'desktopPaper' | 'desktopTransition' | 'desktopTrapFocus' | 'popper' >, - ExportedPickersLayoutSlots, + ExportedPickersLayoutSlots, UseClearableFieldSlots { /** * Component used to enter the date with the keyboard. @@ -61,16 +61,16 @@ export interface UseDesktopPickerSlotProps< TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, > extends ExportedUseDesktopPickerSlotProps, - Pick, 'toolbar'> {} + Pick, 'toolbar'> {} export interface ExportedUseDesktopPickerSlotProps< TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, > extends PickersPopperSlotProps, - ExportedPickersLayoutSlotProps, + ExportedPickersLayoutSlotProps, UseClearableFieldSlotProps { field?: SlotComponentPropsFromProps< - PickerFieldSlotProps, + PickerFieldSlotProps, {}, PickerOwnerState >; @@ -96,8 +96,8 @@ export interface UseDesktopPickerProps< TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError, - TExternalProps extends UsePickerViewsProps, -> extends BasePickerProps, + TExternalProps extends UsePickerViewsProps, +> extends BasePickerProps, MakeRequired { /** * Overridable component slots. @@ -121,7 +121,7 @@ export interface UseDesktopPickerParams< TExternalProps >, > extends Pick< - UsePickerParams, + UsePickerParams, 'valueManager' | 'valueType' | 'validator' | 'rendererInterceptor' > { props: TExternalProps; 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 157777b5384f..8bec0c4e9afa 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useField.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useField.ts @@ -19,22 +19,19 @@ import { useFieldState } from './useFieldState'; import { useFieldCharacterEditing } from './useFieldCharacterEditing'; import { useFieldV7TextField } from './useFieldV7TextField'; import { useFieldV6TextField } from './useFieldV6TextField'; +import { PickerValidValue } from '../../models'; export const useField = < - TIsRange extends boolean, + TValue extends PickerValidValue, TEnableAccessibleFieldDOMStructure extends boolean, TForwardedProps extends UseFieldCommonForwardedProps & UseFieldForwardedProps, - TInternalProps extends UseFieldInternalProps< - TIsRange, - TEnableAccessibleFieldDOMStructure, - any - > & { + TInternalProps extends UseFieldInternalProps & { minutesStep?: number; }, >( params: UseFieldParams< - TIsRange, + TValue, TEnableAccessibleFieldDOMStructure, TForwardedProps, TInternalProps @@ -74,7 +71,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 50bbcd8aeb15..70229c56019f 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 @@ -19,39 +19,39 @@ import type { UseFieldStateResponse } from './useFieldState'; import type { UseFieldCharacterEditingResponse } from './useFieldCharacterEditing'; import { PickersSectionElement, PickersSectionListRef } from '../../../PickersSectionList'; import { ExportedUseClearableFieldProps } from '../../../hooks/useClearableField'; -import { FormProps, InferNonNullablePickerValue, InferPickerValue } from '../../models'; +import { FormProps, InferNonNullablePickerValue, PickerValidValue } from '../../models'; export interface UseFieldParams< - TIsRange extends boolean, + TValue extends PickerValidValue, TEnableAccessibleFieldDOMStructure extends boolean, TForwardedProps extends UseFieldCommonForwardedProps & UseFieldForwardedProps, - TInternalProps extends UseFieldInternalProps, + TInternalProps extends UseFieldInternalProps, > { forwardedProps: TForwardedProps; internalProps: TInternalProps; - valueManager: PickerValueManager>; - fieldValueManager: FieldValueManager; - validator: Validator, TInternalProps>; + valueManager: PickerValueManager>; + fieldValueManager: FieldValueManager; + validator: Validator, TInternalProps>; valueType: PickerValueType; } export interface UseFieldInternalProps< - TIsRange extends boolean, + TValue extends PickerValidValue, TEnableAccessibleFieldDOMStructure extends boolean, TError, > extends TimezoneProps, FormProps, - OnErrorProps { + OnErrorProps { /** * The selected value. * Used when the component is controlled. */ - value?: InferPickerValue; + value?: TValue; /** * The default value. Use when the component is not controlled. */ - defaultValue?: InferPickerValue; + defaultValue?: TValue; /** * The date used to generate a part of the new value that is not present in the format when both `value` and `defaultValue` are empty. * For example, on time fields it will be used to determine the date to set. @@ -60,12 +60,12 @@ export interface UseFieldInternalProps< referenceDate?: PickerValidDate; /** * Callback fired when the value changes. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @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 {InferPickerValue} value The new value. + * @param {TValue} value The new value. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ - onChange?: FieldChangeHandler; + onChange?: FieldChangeHandler; /** * Format of the date when rendered in the input(s). */ @@ -109,7 +109,7 @@ export interface UseFieldInternalProps< /** * The ref object used to imperatively interact with the field. */ - unstableFieldRef?: React.Ref>; + unstableFieldRef?: React.Ref>; /** * @default true */ @@ -205,8 +205,8 @@ export type FieldSectionsBoundaries = { }; }; -export type FieldChangeHandler = ( - value: InferPickerValue, +export type FieldChangeHandler = ( + value: TValue, context: FieldChangeHandlerContext, ) => void; @@ -218,7 +218,7 @@ 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 { +interface FieldActiveDateManager { /** * Active date from `state.value`. */ @@ -228,113 +228,113 @@ interface FieldActiveDateManager { */ referenceDate: PickerValidDate; /** - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. - * @param {InferFieldSection[]} sections The sections of the full value. - * @returns {InferFieldSection[]} The sections of the active date. + * @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. + * @param {InferFieldSection[]} sections The sections of the full value. + * @returns {InferFieldSection[]} The sections of the active date. * Get the sections of the active date. */ - getSections: (sections: InferFieldSection[]) => InferFieldSection[]; + getSections: (sections: InferFieldSection[]) => InferFieldSection[]; /** * Creates the new value and reference value based on the new active date and the current state. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @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. + * @returns {Pick, 'value' | 'referenceValue'>} The new value and reference value to publish and store in the state. */ getNewValuesFromNewActiveDate: ( newActiveDate: PickerValidDate | null, - ) => Pick, 'value' | 'referenceValue'>; + ) => Pick, 'value' | 'referenceValue'>; } export type FieldParsedSelectedSections = number | 'all' | null; -export interface FieldValueManager { +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 TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @param {MuiPickersAdapter} utils The utils to manipulate the date. - * @param {InferPickerValue} value The current value to generate sections from. - * @param {InferFieldSection[] | null} fallbackSections The sections to use as a fallback if a date is null or invalid. + * @param {TValue} value The current value to generate sections from. + * @param {InferFieldSection[] | null} fallbackSections The sections to use as a fallback if a date is null or invalid. * @param {(date: PickerValidDate) => FieldSection[]} getSectionsFromDate Returns the sections of the given date. - * @returns {InferFieldSection[]} The new section list. + * @returns {InferFieldSection[]} The new section list. */ getSectionsFromValue: ( utils: MuiPickersAdapter, - value: InferPickerValue, - fallbackSections: InferFieldSection[] | null, + value: TValue, + fallbackSections: InferFieldSection[] | null, getSectionsFromDate: (date: PickerValidDate) => FieldSection[], - ) => InferFieldSection[]; + ) => InferFieldSection[]; /** * Creates the string value to render in the input based on the current section list. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. - * @param {InferFieldSection[]} sections The current section list. + * @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. + * @param {InferFieldSection[]} sections The current section list. * @param {string} localizedDigits The conversion table from localized to 0-9 digits. * @param {boolean} isRtl `true` if the current orientation is "right to left" * @returns {string} The string value to render in the input. */ getV6InputValueFromSections: ( - sections: InferFieldSection[], + sections: InferFieldSection[], localizedDigits: string[], isRtl: boolean, ) => string; /** * Creates the string value to render in the input based on the current section list. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. - * @param {InferFieldSection[]} sections The current section list. + * @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. + * @param {InferFieldSection[]} sections The current section list. * @returns {string} The string value to render in the input. */ - getV7HiddenInputValueFromSections: (sections: InferFieldSection[]) => string; + getV7HiddenInputValueFromSections: (sections: InferFieldSection[]) => string; /** * Returns the manager of the active date. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @param {MuiPickersAdapter} utils The utils to manipulate the date. - * @param {UseFieldState} state The current state of the field. - * @param {InferFieldSection} activeSection The active section. - * @returns {FieldActiveDateManager} The manager of the active date. + * @param {UseFieldState} state The current state of the field. + * @param {InferFieldSection} activeSection The active section. + * @returns {FieldActiveDateManager} The manager of the active date. */ getActiveDateManager: ( utils: MuiPickersAdapter, - state: UseFieldState, - activeSection: InferFieldSection, - ) => FieldActiveDateManager; + state: UseFieldState, + activeSection: InferFieldSection, + ) => 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 TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @param {string} valueStr The string value to parse. - * @param {InferPickerValue} referenceValue The reference value currently stored in state. + * @param {TValue} referenceValue The reference value currently stored in state. * @param {(dateStr: string, referenceDate: PickerValidDate) => PickerValidDate | null} parseDate A method to convert a string date into a parsed one. - * @returns {InferPickerValue} The new parsed value. + * @returns {TValue} The new parsed value. */ parseValueStr: ( valueStr: string, - referenceValue: InferNonNullablePickerValue, + referenceValue: InferNonNullablePickerValue, parseDate: (dateStr: string, referenceDate: PickerValidDate) => PickerValidDate | null, - ) => InferPickerValue; + ) => TValue; /** * Update the reference value with the new value. * This method must make sure that no date inside the returned `referenceValue` is invalid. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @param {MuiPickersAdapter} utils The utils to manipulate the date. - * @param {InferPickerValue} value The new value from which we want to take all valid dates in the `referenceValue` state. - * @param {InferPickerValue} prevReferenceValue The previous reference value. It is used as a fallback for invalid dates in the new value. - * @returns {InferPickerValue} The new reference value with no invalid 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, - value: InferPickerValue, - prevReferenceValue: InferNonNullablePickerValue, - ) => InferNonNullablePickerValue; + value: TValue, + prevReferenceValue: InferNonNullablePickerValue, + ) => InferNonNullablePickerValue; } -export interface UseFieldState { - value: InferPickerValue; +export interface UseFieldState { + value: TValue; /** * Non-nullable value used to keep trace of the timezone and the date parts not present in the format. * It is updated whenever we have a valid date (for the range picker we update only the portion of the range that is valid). */ - referenceValue: InferNonNullablePickerValue; - sections: InferFieldSection[]; + referenceValue: InferNonNullablePickerValue; + sections: InferFieldSection[]; /** * Android `onChange` behavior when the input selection is not empty is quite different from a desktop behavior. * There are two `onChange` calls: @@ -413,20 +413,16 @@ export interface UseFieldTextFieldInteractions { } export type UseFieldTextField = < - TIsRange extends boolean, + TValue extends PickerValidValue, TForwardedProps extends TEnableAccessibleFieldDOMStructure extends false ? UseFieldV6ForwardedProps : UseFieldV7ForwardedProps, - TInternalProps extends UseFieldInternalProps< - TIsRange, - TEnableAccessibleFieldDOMStructure, - any - > & { + TInternalProps extends UseFieldInternalProps & { minutesStep?: number; }, >( params: UseFieldTextFieldParams< - TIsRange, + TValue, TEnableAccessibleFieldDOMStructure, TForwardedProps, TInternalProps @@ -439,19 +435,19 @@ export type UseFieldTextField, + TInternalProps extends UseFieldInternalProps, > extends UseFieldParams< - TIsRange, + TValue, 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 2bebe3892fdb..65324fa47abd 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,6 +18,7 @@ import { InferFieldSection, } from '../../../models'; import { getMonthsInYear } from '../../utils/date-utils'; +import { PickerValidValue } from '../../models'; export const getDateSectionConfigFromFormatToken = ( utils: MuiPickersAdapter, @@ -231,10 +232,10 @@ export const cleanDigitSectionValue = ( return applyLocalizedDigits(valueStr, localizedDigits); }; -export const adjustSectionValue = ( +export const adjustSectionValue = ( utils: MuiPickersAdapter, timezone: PickersTimezone, - section: InferFieldSection, + section: InferFieldSection, keyCode: AvailableAdjustKeyCode, sectionsValueBoundaries: FieldSectionsValueBoundaries, localizedDigits: string[], @@ -615,8 +616,8 @@ export const getSectionsBoundaries = ( let warnedOnceInvalidSection = false; -export const validateSections = ( - sections: InferFieldSection[], +export const validateSections = ( + sections: InferFieldSection[], valueType: PickerValueType, ) => { if (process.env.NODE_ENV !== 'production') { 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 5c890b8f4b46..a348d3a396b6 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useFieldCharacterEditing.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useFieldCharacterEditing.ts @@ -20,6 +20,7 @@ import { isStringNumber, } from './useField.utils'; import { UpdateSectionValueParams } from './useFieldState'; +import { PickerValidValue } from '../../models'; interface CharacterEditingQuery { value: string; @@ -32,9 +33,9 @@ export interface ApplyCharacterEditingParams { sectionIndex: number; } -interface UseFieldCharacterEditingParams { - sections: InferFieldSection[]; - updateSectionValue: (params: UpdateSectionValueParams) => void; +interface UseFieldCharacterEditingParams { + sections: InferFieldSection[]; + updateSectionValue: (params: UpdateSectionValueParams) => void; sectionsValueBoundaries: FieldSectionsValueBoundaries; localizedDigits: string[]; setTempAndroidValueStr: (newValue: string | null) => void; @@ -70,15 +71,15 @@ type CharacterEditingApplier = ( * If it returns `{ saveQuery: false }, * Then we do nothing. */ -type QueryApplier = ( +type QueryApplier = ( queryValue: string, - activeSection: InferFieldSection, + activeSection: InferFieldSection, ) => { sectionValue: string; shouldGoToNextSection: boolean } | { saveQuery: boolean }; const QUERY_LIFE_DURATION_MS = 5000; -const isQueryResponseWithoutValue = ( - response: ReturnType>, +const isQueryResponseWithoutValue = ( + response: ReturnType>, ): response is { saveQuery: boolean } => (response as { saveQuery: boolean }).saveQuery != null; /** @@ -88,14 +89,14 @@ 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 = ({ +export const useFieldCharacterEditing = ({ sections, updateSectionValue, sectionsValueBoundaries, localizedDigits, setTempAndroidValueStr, timezone, -}: UseFieldCharacterEditingParams): UseFieldCharacterEditingResponse => { +}: UseFieldCharacterEditingParams): UseFieldCharacterEditingResponse => { const utils = useUtils(); const [query, setQuery] = React.useState(null); @@ -122,7 +123,7 @@ export const useFieldCharacterEditing = ({ const applyQuery = ( { keyPressed, sectionIndex }: ApplyCharacterEditingParams, - getFirstSectionValueMatchingWithQuery: QueryApplier, + getFirstSectionValueMatchingWithQuery: QueryApplier, isValidQueryValue?: (queryValue: string) => boolean, ): ReturnType => { const cleanKeyPressed = keyPressed.toLowerCase(); @@ -175,7 +176,7 @@ export const useFieldCharacterEditing = ({ format: string, options: string[], queryValue: string, - ): ReturnType> => { + ): ReturnType> => { const matchingValues = options.filter((option) => option.toLowerCase().startsWith(queryValue), ); @@ -192,7 +193,7 @@ export const useFieldCharacterEditing = ({ const testQueryOnFormatAndFallbackFormat = ( queryValue: string, - activeSection: InferFieldSection, + activeSection: InferFieldSection, fallbackFormat?: string, formatFallbackValue?: (fallbackValue: string, fallbackOptions: string[]) => string, ) => { @@ -230,7 +231,7 @@ export const useFieldCharacterEditing = ({ return { saveQuery: false }; }; - const getFirstSectionValueMatchingWithQuery: QueryApplier = ( + const getFirstSectionValueMatchingWithQuery: QueryApplier = ( queryValue, activeSection, ) => { @@ -289,7 +290,7 @@ export const useFieldCharacterEditing = ({ | 'hasLeadingZerosInInput' | 'maxLength' >, - ): ReturnType> => { + ): ReturnType> => { const cleanQueryValue = removeLocalizedDigits(queryValue, localizedDigits); const queryValueNumber = Number(cleanQueryValue); const sectionBoundaries = sectionsValueBoundaries[section.type]({ @@ -324,7 +325,7 @@ export const useFieldCharacterEditing = ({ return { sectionValue: newSectionValue, shouldGoToNextSection }; }; - const getFirstSectionValueMatchingWithQuery: QueryApplier = ( + const getFirstSectionValueMatchingWithQuery: QueryApplier = ( queryValue, activeSection, ) => { 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 b5f4f410ad9a..1626c95da3e1 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useFieldState.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useFieldState.ts @@ -33,13 +33,13 @@ import { GetDefaultReferenceDateProps, getSectionTypeGranularity, } from '../../utils/getDefaultReferenceDate'; -import { InferPickerValue } from '../../models'; +import { PickerValidValue } from '../../models'; -export interface UpdateSectionValueParams { +export interface UpdateSectionValueParams { /** * The section on which we want to apply the new value. */ - activeSection: InferFieldSection; + activeSection: InferFieldSection; /** * Value to apply to the active section. */ @@ -50,38 +50,38 @@ export interface UpdateSectionValueParams { shouldGoToNextSection: boolean; } -export interface UseFieldStateResponse { - state: UseFieldState; +export interface UseFieldStateResponse { + state: UseFieldState; activeSectionIndex: number | null; parsedSelectedSections: FieldParsedSelectedSections; setSelectedSections: (sections: FieldSelectedSections) => void; clearValue: () => void; clearActiveSection: () => void; - updateSectionValue: (params: UpdateSectionValueParams) => void; + updateSectionValue: (params: UpdateSectionValueParams) => void; updateValueFromValueStr: (valueStr: string) => void; setTempAndroidValueStr: (tempAndroidValueStr: string | null) => void; sectionsValueBoundaries: FieldSectionsValueBoundaries; getSectionsFromValue: ( - value: InferPickerValue, - fallbackSections?: InferFieldSection[] | null, - ) => InferFieldSection[]; + value: TValue, + fallbackSections?: InferFieldSection[] | null, + ) => InferFieldSection[]; localizedDigits: string[]; timezone: PickersTimezone; } export const useFieldState = < - TIsRange extends boolean, + TValue extends PickerValidValue, TEnableAccessibleFieldDOMStructure extends boolean, TForwardedProps extends UseFieldForwardedProps, - TInternalProps extends UseFieldInternalProps, + TInternalProps extends UseFieldInternalProps, >( params: UseFieldParams< - TIsRange, + TValue, TEnableAccessibleFieldDOMStructure, TForwardedProps, TInternalProps >, -): UseFieldStateResponse => { +): UseFieldStateResponse => { const utils = useUtils(); const translations = usePickerTranslations(); const adapter = useLocalizationContext(); @@ -128,10 +128,7 @@ export const useFieldState = < ); const getSectionsFromValue = React.useCallback( - ( - value: InferPickerValue, - fallbackSections: InferFieldSection[] | null = null, - ) => + (value: TValue, fallbackSections: InferFieldSection[] | null = null) => fieldValueManager.getSectionsFromValue(utils, value, fallbackSections, (date) => buildSectionsFromFormat({ utils, @@ -158,11 +155,11 @@ export const useFieldState = < ], ); - const [state, setState] = React.useState>(() => { + const [state, setState] = React.useState>(() => { const sections = getSectionsFromValue(valueFromTheOutside); validateSections(sections, valueType); - const stateWithoutReferenceDate: Omit, 'referenceValue'> = { + const stateWithoutReferenceDate: Omit, 'referenceValue'> = { sections, value: valueFromTheOutside, tempValueStrAndroid: null, @@ -207,7 +204,7 @@ export const useFieldState = < value, referenceValue, sections, - }: Pick, 'value' | 'referenceValue' | 'sections'>) => { + }: Pick, 'value' | 'referenceValue' | 'sections'>) => { setState((prevState) => ({ ...prevState, sections, @@ -313,7 +310,7 @@ export const useFieldState = < activeSection, newSectionValue, shouldGoToNextSection, - }: UpdateSectionValueParams) => { + }: UpdateSectionValueParams) => { /** * 1. Decide which section should be focused */ @@ -329,7 +326,7 @@ export const useFieldState = < const newActiveDateSections = activeDateManager.getSections(newSections); const newActiveDate = getDateFromDateSections(utils, newActiveDateSections, localizedDigits); - let values: Pick, 'value' | 'referenceValue'>; + let values: Pick, 'value' | 'referenceValue'>; let shouldPublish: boolean; /** diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useFieldV6TextField.ts b/packages/x-date-pickers/src/internals/hooks/useField/useFieldV6TextField.ts index 5fdf2c07dfed..719a6561ca6a 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useFieldV6TextField.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useFieldV6TextField.ts @@ -6,8 +6,9 @@ import { UseFieldTextFieldInteractions, UseFieldTextField } from './useField.typ import { InferFieldSection } from '../../../models'; import { getActiveElement } from '../../utils/utils'; import { getSectionVisibleValue, isAndroid } from './useField.utils'; +import { PickerValidValue } from '../../models'; -type FieldSectionWithPositions = InferFieldSection & { +type FieldSectionWithPositions = InferFieldSection & { /** * Start index of the section in the format */ @@ -30,14 +31,14 @@ type FieldSectionWithPositions = InferFieldSection dirtyString.replace(/[\u2066\u2067\u2068\u2069]/g, ''); -export const addPositionPropertiesToSections = ( - sections: InferFieldSection[], +export const addPositionPropertiesToSections = ( + sections: InferFieldSection[], localizedDigits: string[], isRtl: boolean, -): FieldSectionWithPositions[] => { +): FieldSectionWithPositions[] => { let position = 0; let positionInInput = isRtl ? 1 : 0; - const newSections: FieldSectionWithPositions[] = []; + const newSections: FieldSectionWithPositions[] = []; for (let i = 0; i < sections.length; i += 1) { const section = sections[i]; 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 93dc8f1af11c..993f245c6c27 100644 --- a/packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.tsx +++ b/packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.tsx @@ -8,7 +8,7 @@ import { usePicker } from '../usePicker'; import { onSpaceOrEnter } from '../../utils/utils'; import { PickersLayout } from '../../../PickersLayout'; import { FieldRef, InferError } from '../../../models'; -import { BaseSingleInputFieldProps, DateOrTimeViewWithMeridiem } from '../../models'; +import { BaseSingleInputFieldProps, DateOrTimeViewWithMeridiem, PickerValue } from '../../models'; import { PickerProvider } from '../../components/PickerProvider'; /** @@ -50,7 +50,7 @@ export const useMobilePicker = < localeText, } = props; - const fieldRef = React.useRef>(null); + const fieldRef = React.useRef>(null); const labelId = useId(); const isToolbarHidden = innerSlotProps?.toolbar?.hidden ?? false; @@ -63,7 +63,7 @@ export const useMobilePicker = < renderCurrentView, fieldProps: pickerFieldProps, ownerState, - } = usePicker({ + } = usePicker({ ...pickerParams, props, fieldRef, @@ -75,7 +75,7 @@ export const useMobilePicker = < const Field = slots.field; const fieldProps: BaseSingleInputFieldProps< - false, + PickerValue, TEnableAccessibleFieldDOMStructure, InferError > = useSlotProps({ 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 6d9fa0bcb9a2..b4d04f06e66e 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 @@ -20,11 +20,11 @@ import { } from '../../../PickersLayout/PickersLayout.types'; import { UsePickerValueNonStaticProps } from '../usePicker/usePickerValue.types'; import { UsePickerViewsNonStaticProps, UsePickerViewsProps } from '../usePicker/usePickerViews'; -import { DateOrTimeViewWithMeridiem } from '../../models'; +import { DateOrTimeViewWithMeridiem, PickerValue } from '../../models'; export interface UseMobilePickerSlots extends PickersModalDialogSlots, - ExportedPickersLayoutSlots { + ExportedPickersLayoutSlots { /** * Component used to enter the date with the keyboard. */ @@ -40,9 +40,9 @@ export interface ExportedUseMobilePickerSlotProps< TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, > extends PickersModalDialogSlotProps, - ExportedPickersLayoutSlotProps { + ExportedPickersLayoutSlotProps { field?: SlotComponentPropsFromProps< - PickerFieldSlotProps, + PickerFieldSlotProps, {}, PickerOwnerState >; @@ -53,7 +53,7 @@ export interface UseMobilePickerSlotProps< TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, > extends ExportedUseMobilePickerSlotProps, - Pick, 'toolbar'> {} + Pick, 'toolbar'> {} export interface MobileOnlyPickerProps extends BaseNonStaticPickerProps, @@ -66,7 +66,7 @@ export interface UseMobilePickerProps< TEnableAccessibleFieldDOMStructure extends boolean, TError, TExternalProps extends UsePickerViewsProps, -> extends BasePickerProps, +> extends BasePickerProps, MakeRequired { /** * Overridable component slots. @@ -90,7 +90,7 @@ export interface UseMobilePickerParams< TExternalProps >, > extends Pick< - UsePickerParams, + UsePickerParams, 'valueManager' | 'valueType' | 'validator' > { props: TExternalProps; 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 08fcf80e1c30..f6b06d365456 100644 --- a/packages/x-date-pickers/src/internals/hooks/usePicker/usePicker.ts +++ b/packages/x-date-pickers/src/internals/hooks/usePicker/usePicker.ts @@ -4,14 +4,14 @@ import { usePickerValue } from './usePickerValue'; import { usePickerViews } from './usePickerViews'; import { usePickerLayoutProps } from './usePickerLayoutProps'; import { InferError } from '../../../models'; -import { DateOrTimeViewWithMeridiem } from '../../models'; +import { DateOrTimeViewWithMeridiem, PickerValidValue } from '../../models'; import { usePickerOwnerState } from './usePickerOwnerState'; import { usePickerProvider } from './usePickerProvider'; export const usePicker = < - TIsRange extends boolean, + TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, - TExternalProps extends UsePickerProps, + TExternalProps extends UsePickerProps, TAdditionalProps extends {}, >({ props, @@ -24,8 +24,8 @@ export const usePicker = < rendererInterceptor, fieldRef, localeText, -}: UsePickerParams): UsePickerResponse< - TIsRange, +}: UsePickerParams): UsePickerResponse< + TValue, TView, InferError > => { @@ -38,7 +38,7 @@ export const usePicker = < ]); } } - const pickerValueResponse = usePickerValue({ + const pickerValueResponse = usePickerValue({ props, valueManager, valueType, @@ -46,7 +46,7 @@ export const usePicker = < validator, }); - const pickerViewsResponse = usePickerViews({ + const pickerViewsResponse = usePickerViews({ props, additionalViewProps, autoFocusView, 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 807204616ed3..c1886c2300b6 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 @@ -12,56 +12,56 @@ import { } from './usePickerViews'; import { UsePickerLayoutProps, UsePickerLayoutPropsResponse } from './usePickerLayoutProps'; import { PickerOwnerState } from '../../../models'; -import { DateOrTimeViewWithMeridiem } from '../../models'; +import { DateOrTimeViewWithMeridiem, PickerValidValue } from '../../models'; import { UsePickerProviderParameters, UsePickerProviderReturnValue } from './usePickerProvider'; /** * Props common to all picker headless implementations. */ export interface UsePickerBaseProps< - TIsRange extends boolean, + TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TError, - TExternalProps extends UsePickerViewsProps, + TExternalProps extends UsePickerViewsProps, TAdditionalProps extends {}, -> extends UsePickerValueBaseProps, - UsePickerViewsBaseProps, +> extends UsePickerValueBaseProps, + UsePickerViewsBaseProps, UsePickerLayoutProps {} export interface UsePickerProps< - TIsRange extends boolean, + TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TError, - TExternalProps extends UsePickerViewsProps, + TExternalProps extends UsePickerViewsProps, TAdditionalProps extends {}, -> extends UsePickerValueProps, - UsePickerViewsProps, +> extends UsePickerValueProps, + UsePickerViewsProps, UsePickerLayoutProps {} export interface UsePickerParams< - TIsRange extends boolean, + TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, - 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'> { + Pick, 'localeText'> { props: TExternalProps; } export interface UsePickerResponse< - TIsRange extends boolean, + TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TError, -> extends Omit, 'viewProps' | 'layoutProps'>, +> extends Omit, 'viewProps' | 'layoutProps'>, Omit, 'layoutProps'>, - UsePickerLayoutPropsResponse { + UsePickerLayoutPropsResponse { ownerState: PickerOwnerState; providerProps: UsePickerProviderReturnValue; } diff --git a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerLayoutProps.ts b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerLayoutProps.ts index 1daec2db78f4..2c9bb1f17f5b 100644 --- a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerLayoutProps.ts +++ b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerLayoutProps.ts @@ -3,7 +3,7 @@ import { useIsLandscape } from '../useIsLandscape'; import { UsePickerValueLayoutResponse } from './usePickerValue.types'; import { UsePickerViewsLayoutResponse } from './usePickerViews'; import { DateOrTimeViewWithMeridiem, WrapperVariant } from '../../models/common'; -import { FormProps, InferPickerValue } from '../../models'; +import { FormProps, PickerValidValue } from '../../models'; /** * Props used to create the layout of the views. @@ -17,30 +17,30 @@ export interface UsePickerLayoutProps extends FormProps { } export interface UsePickerLayoutPropsResponseLayoutProps< - TIsRange extends boolean, + TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, -> extends UsePickerValueLayoutResponse, +> extends UsePickerValueLayoutResponse, UsePickerViewsLayoutResponse, UsePickerLayoutProps { isLandscape: boolean; isRtl: boolean; wrapperVariant: WrapperVariant; - isValid: (value: InferPickerValue) => boolean; + isValid: (value: TValue) => boolean; } export interface UsePickerLayoutPropsResponse< - TIsRange extends boolean, + TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, > { - layoutProps: UsePickerLayoutPropsResponseLayoutProps; + layoutProps: UsePickerLayoutPropsResponseLayoutProps; } export interface UsePickerLayoutPropsParams< - TIsRange extends boolean, + TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, > { props: UsePickerLayoutProps; - propsFromPickerValue: UsePickerValueLayoutResponse; + propsFromPickerValue: UsePickerValueLayoutResponse; propsFromPickerViews: UsePickerViewsLayoutResponse; wrapperVariant: WrapperVariant; } @@ -49,19 +49,19 @@ export interface UsePickerLayoutPropsParams< * Prepare the props for the view layout (managed by `PickersLayout`) */ export const usePickerLayoutProps = < - TIsRange extends boolean, + TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, >({ props, propsFromPickerValue, propsFromPickerViews, wrapperVariant, -}: UsePickerLayoutPropsParams): UsePickerLayoutPropsResponse => { +}: UsePickerLayoutPropsParams): UsePickerLayoutPropsResponse => { const { orientation } = props; const isLandscape = useIsLandscape(propsFromPickerViews.views, orientation); const isRtl = useRtl(); - const layoutProps: UsePickerLayoutPropsResponseLayoutProps = { + const layoutProps: UsePickerLayoutPropsResponseLayoutProps = { ...propsFromPickerViews, ...propsFromPickerValue, isLandscape, 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 5014acb9c999..bb05d474abfc 100644 --- a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerOwnerState.ts +++ b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerOwnerState.ts @@ -3,15 +3,16 @@ import { PickerOwnerState } from '../../../models'; import type { UsePickerProps } from './usePicker.types'; import { PickerValueManager, UsePickerValueResponse } from './usePickerValue.types'; import { useUtils } from '../useUtils'; +import { PickerValidValue } from '../../models'; -interface UsePickerOwnerStateParameters { - props: UsePickerProps; - pickerValueResponse: UsePickerValueResponse; - valueManager: PickerValueManager; +interface UsePickerOwnerStateParameters { + props: UsePickerProps; + pickerValueResponse: UsePickerValueResponse; + valueManager: PickerValueManager; } -export function usePickerOwnerState( - parameters: UsePickerOwnerStateParameters, +export function usePickerOwnerState( + parameters: UsePickerOwnerStateParameters, ): PickerOwnerState { const { props, pickerValueResponse, valueManager } = parameters; diff --git a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerProvider.ts b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerProvider.ts index f6361e499e71..ddd340c01e6d 100644 --- a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerProvider.ts +++ b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerProvider.ts @@ -6,17 +6,18 @@ import { PickerContextValue, PickerPrivateContextValue, } from '../../components/PickerProvider'; +import { PickerValidValue } from '../../models'; -export interface UsePickerProviderParameters +export interface UsePickerProviderParameters extends Pick { - pickerValueResponse: UsePickerValueResponse; + pickerValueResponse: UsePickerValueResponse; ownerState: PickerOwnerState; } export interface UsePickerProviderReturnValue extends Omit {} -export function usePickerProvider( - parameters: UsePickerProviderParameters, +export function usePickerProvider( + parameters: UsePickerProviderParameters, ): UsePickerProviderReturnValue { const { pickerValueResponse, ownerState, localeText } = parameters; 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 0853a147a7e3..167c7854c241 100644 --- a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerValue.ts +++ b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerValue.ts @@ -23,14 +23,14 @@ import { PickerValueUpdaterParams, } from './usePickerValue.types'; import { useValueWithTimezone } from '../useValueWithTimezone'; -import { InferPickerValue } from '../../models'; +import { PickerValidValue } from '../../models'; /** * Decide if the new value should be published * The published value will be passed to `onChange` if defined. */ -const shouldPublishValue = ( - params: PickerValueUpdaterParams, +const shouldPublishValue = ( + params: PickerValueUpdaterParams, ): boolean => { const { action, hasChanged, dateState, isControlled } = params; @@ -82,8 +82,8 @@ const shouldPublishValue = ( * The committed value will be passed to `onAccept` if defined. * It will also be used as a reset target when calling the `cancel` picker action (when clicking on the "Cancel" button). */ -const shouldCommitValue = ( - params: PickerValueUpdaterParams, +const shouldCommitValue = ( + params: PickerValueUpdaterParams, ): boolean => { const { action, hasChanged, dateState, isControlled, closeOnSelect } = params; @@ -122,8 +122,8 @@ const shouldCommitValue = ( /** * Decide if the picker should be closed after the value is updated. */ -const shouldClosePicker = ( - params: PickerValueUpdaterParams, +const shouldClosePicker = ( + params: PickerValueUpdaterParams, ): boolean => { const { action, closeOnSelect } = params; @@ -146,16 +146,16 @@ const shouldClosePicker = ( * Manage the value lifecycle of all the pickers. */ export const usePickerValue = < - TIsRange extends boolean, - TExternalProps extends UsePickerValueProps, + TValue extends PickerValidValue, + TExternalProps extends UsePickerValueProps, >({ props, valueManager, valueType, wrapperVariant, validator, -}: UsePickerValueParams): UsePickerValueResponse< - TIsRange, +}: UsePickerValueParams): UsePickerValueResponse< + TValue, InferError > => { type TError = InferError; @@ -220,8 +220,8 @@ export const usePickerValue = < valueManager, }); - const [dateState, setDateState] = React.useState>(() => { - let initialValue: InferPickerValue; + const [dateState, setDateState] = React.useState>(() => { + let initialValue: TValue; if (inValueWithTimezoneToRender !== undefined) { initialValue = inValueWithTimezoneToRender; } else if (defaultValue !== undefined) { @@ -247,8 +247,8 @@ export const usePickerValue = < onError: props.onError, }); - const updateDate = useEventCallback((action: PickerValueUpdateAction) => { - const updaterParams: PickerValueUpdaterParams = { + const updateDate = useEventCallback((action: PickerValueUpdateAction) => { + const updaterParams: PickerValueUpdaterParams = { action, dateState, hasChanged: (comparison) => !valueManager.areValuesEqual(utils, action.value, comparison), @@ -381,13 +381,13 @@ export const usePickerValue = < }); const handleChange = useEventCallback( - (newValue: InferPickerValue, selectionState: PickerSelectionState = 'partial') => + (newValue: TValue, selectionState: PickerSelectionState = 'partial') => updateDate({ name: 'setValueFromView', value: newValue, selectionState }), ); const handleSelectShortcut = useEventCallback( ( - newValue: InferPickerValue, + newValue: TValue, changeImportance: PickerShortcutChangeImportance, shortcut: PickersShortcutsItemContext, ) => @@ -400,7 +400,7 @@ export const usePickerValue = < ); const handleChangeFromField = useEventCallback( - (newValue: InferPickerValue, context: FieldChangeHandlerContext) => + (newValue: TValue, context: FieldChangeHandlerContext) => updateDate({ name: 'setValueFromField', value: newValue, context }), ); @@ -414,7 +414,7 @@ export const usePickerValue = < onClose: handleClose, }; - const fieldResponse: UsePickerValueFieldResponse = { + const fieldResponse: UsePickerValueFieldResponse = { value: dateState.draft, onChange: handleChangeFromField, }; @@ -424,14 +424,14 @@ export const usePickerValue = < [utils, valueManager, dateState.draft], ); - const viewResponse: UsePickerValueViewsResponse = { + const viewResponse: UsePickerValueViewsResponse = { value: viewValue, onChange: handleChange, onClose: handleClose, open: isOpen, }; - const isValid = (testedValue: InferPickerValue) => { + const isValid = (testedValue: TValue) => { const error = validator({ adapter, value: testedValue, @@ -442,7 +442,7 @@ export const usePickerValue = < return !valueManager.hasError(error); }; - const layoutResponse: UsePickerValueLayoutResponse = { + const layoutResponse: UsePickerValueLayoutResponse = { ...actions, value: viewValue, onChange: handleChange, 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 be160a27c2e6..864e50dd887e 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 @@ -16,85 +16,74 @@ import { PickerShortcutChangeImportance, PickersShortcutsItemContext, } from '../../../PickersShortcuts'; -import { InferNonNullablePickerValue, InferPickerValue } from '../../models'; +import { InferNonNullablePickerValue, PickerValidValue } from '../../models'; -export interface PickerValueManager { +export interface PickerValueManager { /** * Determines if two values are equal. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @param {MuiPickersAdapter} utils The adapter. - * @param {InferPickerValue} valueLeft The first value to compare. - * @param {InferPickerValue} valueRight The second value to compare. + * @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: InferPickerValue, - valueRight: InferPickerValue, - ) => boolean; + areValuesEqual: (utils: MuiPickersAdapter, valueLeft: TValue, valueRight: TValue) => boolean; /** * Value to set when clicking the "Clear" button. */ - emptyValue: InferPickerValue; + emptyValue: TValue; /** * Method returning the value to set when clicking the "Today" button - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @param {MuiPickersAdapter} utils The adapter. * @param {PickersTimezone} timezone The current timezone. * @param {PickerValueType} valueType The type of the value being edited. - * @returns {InferPickerValue} The value to set when clicking the "Today" button. + * @returns {TValue} The value to set when clicking the "Today" button. */ getTodayValue: ( utils: MuiPickersAdapter, timezone: PickersTimezone, valueType: PickerValueType, - ) => InferPickerValue; + ) => TValue; /** - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * Method returning the reference value to use when mounting the component. * @param {object} params The params of the method. * @param {PickerValidDate | undefined} params.referenceDate The referenceDate provided by the user. - * @param {InferPickerValue} params.value The value 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 {number} params.granularity The granularity of the selection possible on this component. * @param {PickersTimezone} params.timezone The current timezone. * @param {() => PickerValidDate} params.getTodayDate The reference date to use if no reference date is passed to the component. - * @returns {InferPickerValue} The reference value to use for non-provided dates. + * @returns {TValue} The reference value to use for non-provided dates. */ getInitialReferenceValue: (params: { referenceDate: PickerValidDate | undefined; - value: InferPickerValue; + value: TValue; props: GetDefaultReferenceDateProps; utils: MuiPickersAdapter; granularity: number; timezone: PickersTimezone; getTodayDate?: () => PickerValidDate; - }) => InferNonNullablePickerValue; + }) => InferNonNullablePickerValue; /** * Method parsing the input value to replace all invalid dates by `null`. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @param {MuiPickersAdapter} utils The adapter. - * @param {InferPickerValue} value The value to parse. - * @returns {InferPickerValue} The value without invalid date. + * @param {TValue} value The value to parse. + * @returns {TValue} The value without invalid date. */ - cleanValue: ( - utils: MuiPickersAdapter, - value: InferPickerValue, - ) => InferPickerValue; + cleanValue: (utils: MuiPickersAdapter, value: TValue) => TValue; /** * Generates the new value, given the previous value and the new proposed value. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @param {MuiPickersAdapter} utils The adapter. - * @param {InferPickerValue} lastValidDateValue The last valid value. - * @param {InferPickerValue} value The proposed value. - * @returns {InferPickerValue} The new value. + * @param {TValue} lastValidDateValue The last valid value. + * @param {TValue} value The proposed value. + * @returns {TValue} The new value. */ - valueReducer?: ( - utils: MuiPickersAdapter, - lastValidDateValue: InferPickerValue, - value: InferPickerValue, - ) => InferPickerValue; + valueReducer?: (utils: MuiPickersAdapter, lastValidDateValue: TValue, value: TValue) => TValue; /** * Compare two errors to know if they are equal. * @template TError @@ -117,50 +106,46 @@ export interface PickerValueManager { /** * Return the timezone of the date inside a value. * Throw an error on range picker if both values don't have the same timezone. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. @param {MuiPickersAdapter} utils The utils to manipulate the date. - @param {InferPickerValue} value The current value. + @param {TValue} value The current value. @returns {string | null} The timezone of the current value. */ - getTimezone: (utils: MuiPickersAdapter, value: InferPickerValue) => string | null; + getTimezone: (utils: MuiPickersAdapter, value: TValue) => string | null; /** * Change the timezone of the dates inside a value. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. @param {MuiPickersAdapter} utils The utils to manipulate the date. @param {PickersTimezone} timezone The current timezone. - @param {InferPickerValue} value The value to convert. - @returns {InferPickerValue} The value with the new dates in the new 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: InferPickerValue, - ) => InferPickerValue; + setTimezone: (utils: MuiPickersAdapter, timezone: PickersTimezone, value: TValue) => TValue; } export type PickerSelectionState = 'partial' | 'shallow' | 'finish'; -export interface UsePickerValueState { +export interface UsePickerValueState { /** * Date displayed on the views and the field. * It is updated whenever the user modifies something. */ - draft: InferPickerValue; + draft: TValue; /** * Last value published (e.g: the last value for which `shouldPublishValue` returned `true`). * If `onChange` is defined, it's the value that was passed on the last call to this callback. */ - lastPublishedValue: InferPickerValue; + lastPublishedValue: TValue; /** * Last value committed (e.g: the last value for which `shouldCommitValue` returned `true`). * If `onAccept` is defined, it's the value that was passed on the last call to this callback. */ - lastCommittedValue: InferPickerValue; + lastCommittedValue: TValue; /** * Last value passed with `props.value`. * Used to update the `draft` value whenever the `value` prop changes. */ - lastControlledValue: InferPickerValue | undefined; + lastControlledValue: TValue | undefined; /** * If we never modified the value since the mount of the component, * Then we might want to apply some custom logic. @@ -171,39 +156,39 @@ export interface UsePickerValueState { hasBeenModifiedSinceMount: boolean; } -export interface PickerValueUpdaterParams { - action: PickerValueUpdateAction; - dateState: UsePickerValueState; +export interface PickerValueUpdaterParams { + action: PickerValueUpdateAction; + dateState: UsePickerValueState; /** * Check if the new draft value has changed compared to some given value. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. - * @param {InferPickerValue} comparisonValue The value to compare the new draft value with. + * @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. + * @param {TValue} comparisonValue The value to compare the new draft value with. * @returns {boolean} `true` if the new draft value is equal to the comparison value. */ - hasChanged: (comparisonValue: InferPickerValue) => boolean; + hasChanged: (comparisonValue: TValue) => boolean; isControlled: boolean; closeOnSelect: boolean; } -export type PickerValueUpdateAction = +export type PickerValueUpdateAction = | { name: 'setValueFromView'; - value: InferPickerValue; + value: TValue; selectionState: PickerSelectionState; } | { name: 'setValueFromField'; - value: InferPickerValue; + value: TValue; context: FieldChangeHandlerContext; } | { name: 'setValueFromAction'; - value: InferPickerValue; + value: TValue; pickerAction: 'accept' | 'today' | 'cancel' | 'dismiss' | 'clear'; } | { name: 'setValueFromShortcut'; - value: InferPickerValue; + value: TValue; changeImportance: PickerShortcutChangeImportance; shortcut: PickersShortcutsItemContext; }; @@ -211,40 +196,34 @@ export type PickerValueUpdateAction = /** * Props used to handle the value that are common to all pickers. */ -export interface UsePickerValueBaseProps - extends OnErrorProps { +export interface UsePickerValueBaseProps + extends OnErrorProps { /** * The selected value. * Used when the component is controlled. */ - value?: InferPickerValue; + value?: TValue; /** * The default value. * Used when the component is not controlled. */ - defaultValue?: InferPickerValue; + defaultValue?: TValue; /** * Callback fired when the value changes. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @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 {InferPickerValue} value The new value. + * @param {TValue} value The new value. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ - onChange?: ( - value: InferPickerValue, - context: PickerChangeHandlerContext, - ) => void; + onChange?: (value: TValue, context: PickerChangeHandlerContext) => void; /** * Callback fired when the value is accepted. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @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 {InferPickerValue} value The value that was just accepted. + * @param {TValue} value The value that was just accepted. * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ - onAccept?: ( - value: InferPickerValue, - context: PickerChangeHandlerContext, - ) => void; + onAccept?: (value: TValue, context: PickerChangeHandlerContext) => void; } /** @@ -276,20 +255,20 @@ export interface UsePickerValueNonStaticProps { /** * Props used to handle the value of the pickers. */ -export interface UsePickerValueProps - extends UsePickerValueBaseProps, +export interface UsePickerValueProps + extends UsePickerValueBaseProps, UsePickerValueNonStaticProps, TimezoneProps {} export interface UsePickerValueParams< - TIsRange extends boolean, - TExternalProps extends UsePickerValueProps, + TValue extends PickerValidValue, + TExternalProps extends UsePickerValueProps, > { props: TExternalProps; - valueManager: PickerValueManager>; + valueManager: PickerValueManager>; valueType: PickerValueType; wrapperVariant: WrapperVariant; - validator: Validator, TExternalProps>; + validator: Validator, TExternalProps>; } export interface UsePickerValueActions { @@ -302,16 +281,16 @@ export interface UsePickerValueActions { onClose: (event?: React.UIEvent) => void; } -export type UsePickerValueFieldResponse = Required< - Pick, 'value' | 'onChange'> +export type UsePickerValueFieldResponse = Required< + Pick, 'value' | 'onChange'> >; /** * Props passed to `usePickerViews`. */ -export interface UsePickerValueViewsResponse { - value: InferPickerValue; - onChange: (value: InferPickerValue, selectionState?: PickerSelectionState) => void; +export interface UsePickerValueViewsResponse { + value: TValue; + onChange: (value: TValue, selectionState?: PickerSelectionState) => void; open: boolean; onClose: (event?: React.MouseEvent) => void; } @@ -319,22 +298,22 @@ export interface UsePickerValueViewsResponse { /** * Props passed to `usePickerLayoutProps`. */ -export interface UsePickerValueLayoutResponse +export interface UsePickerValueLayoutResponse extends UsePickerValueActions { - value: InferPickerValue; - onChange: (newValue: InferPickerValue) => void; + value: TValue; + onChange: (newValue: TValue) => void; onSelectShortcut: ( - newValue: InferPickerValue, + newValue: TValue, changeImportance: PickerShortcutChangeImportance, shortcut: PickersShortcutsItemContext, ) => void; - isValid: (value: InferPickerValue) => boolean; + isValid: (value: TValue) => boolean; } -export interface UsePickerValueResponse { +export interface UsePickerValueResponse { open: boolean; actions: UsePickerValueActions; - viewProps: UsePickerValueViewsResponse; - fieldProps: UsePickerValueFieldResponse; - layoutProps: UsePickerValueLayoutResponse; + viewProps: UsePickerValueViewsResponse; + fieldProps: UsePickerValueFieldResponse; + layoutProps: UsePickerValueLayoutResponse; } 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 036c66e27957..599dc21017fc 100644 --- a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerViews.ts +++ b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerViews.ts @@ -6,20 +6,25 @@ import useEventCallback from '@mui/utils/useEventCallback'; import { useViews, UseViewsOptions } from '../useViews'; import type { UsePickerValueViewsResponse } from './usePickerValue.types'; import { isTimeView } from '../../utils/time-utils'; -import { DateOrTimeViewWithMeridiem } from '../../models'; +import { + DateOrTimeViewWithMeridiem, + PickerRangeValue, + PickerValidValue, + PickerValue, +} from '../../models'; import { FieldRef, PickerValidDate, TimezoneProps } from '../../../models'; interface PickerViewsRendererBaseExternalProps extends Omit, 'openTo' | 'viewRenderers'> {} export type PickerViewsRendererProps< - TIsRange extends boolean, + TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends PickerViewsRendererBaseExternalProps, TAdditionalProps extends {}, > = Omit & TAdditionalProps & - UsePickerValueViewsResponse & { + UsePickerValueViewsResponse & { view: TView; views: readonly TView[]; focusedView: TView | null; @@ -29,30 +34,30 @@ export type PickerViewsRendererProps< }; export type PickerViewRenderer< - TIsRange extends boolean, + TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends PickerViewsRendererBaseExternalProps, TAdditionalProps extends {}, > = ( - props: PickerViewsRendererProps, + props: PickerViewsRendererProps, ) => React.ReactNode; export type PickerViewRendererLookup< - TIsRange extends boolean, + TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends PickerViewsRendererBaseExternalProps, TAdditionalProps extends {}, > = { - [K in TView]: PickerViewRenderer | null; + [K in TView]: PickerViewRenderer | null; }; /** * Props used to handle the views that are common to all pickers. */ export interface UsePickerViewsBaseProps< - TIsRange extends boolean, + TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, - TExternalProps extends UsePickerViewsProps, + TExternalProps extends UsePickerViewsProps, TAdditionalProps extends {}, > extends Omit, 'onChange' | 'onFocusedViewChange' | 'focusedView'>, TimezoneProps { @@ -60,7 +65,7 @@ export interface UsePickerViewsBaseProps< * If `null`, the section will only have field editing. * If `undefined`, internally defined view will be used. */ - viewRenderers: PickerViewRendererLookup; + viewRenderers: PickerViewRendererLookup; /** * If `true`, disable heavy animations. * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13 @@ -88,38 +93,38 @@ export interface UsePickerViewsNonStaticProps { * Props used to handle the value of the pickers. */ export interface UsePickerViewsProps< - TIsRange extends boolean, + TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, - TExternalProps extends UsePickerViewsProps, + TExternalProps extends UsePickerViewsProps, TAdditionalProps extends {}, -> extends UsePickerViewsBaseProps { +> extends UsePickerViewsBaseProps { className?: string; sx?: SxProps; } export interface UsePickerViewParams< - TIsRange extends boolean, + TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, - TExternalProps extends UsePickerViewsProps, + TExternalProps extends UsePickerViewsProps, TAdditionalProps extends {}, > { props: TExternalProps; - propsFromPickerValue: UsePickerValueViewsResponse; + propsFromPickerValue: UsePickerValueViewsResponse; additionalViewProps: TAdditionalProps; autoFocusView: boolean; - fieldRef: React.RefObject> | undefined; + fieldRef: React.RefObject | FieldRef> | undefined; /** * A function that intercepts the regular picker rendering. * Can be used to consume the provided `viewRenderers` and render a custom component wrapping them. - * @param {PickerViewRendererLookup} viewRenderers The `viewRenderers` that were provided to the picker component. + * @param {PickerViewRendererLookup} viewRenderers The `viewRenderers` that were provided to the picker component. * @param {TView} popperView The current picker view. * @param {any} rendererProps All the props that are being passed down to the renderer. * @returns {React.ReactNode} A React node that will be rendered instead of the default renderer. */ rendererInterceptor?: ( - viewRenderers: PickerViewRendererLookup, + viewRenderers: PickerViewRendererLookup, popperView: TView, - rendererProps: PickerViewsRendererProps, + rendererProps: PickerViewsRendererProps, ) => React.ReactNode; } @@ -146,9 +151,9 @@ export interface UsePickerViewsLayoutResponse, + TExternalProps extends UsePickerViewsProps, TAdditionalProps extends {}, >({ props, @@ -158,7 +163,7 @@ export const usePickerViews = < rendererInterceptor, fieldRef, }: UsePickerViewParams< - TIsRange, + TValue, TView, TExternalProps, TAdditionalProps @@ -282,7 +287,7 @@ export const usePickerViews = < } const rendererProps: PickerViewsRendererProps< - TIsRange, + TValue, TView, TExternalProps, TAdditionalProps 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 2da95885a89d..2444ecb61a97 100644 --- a/packages/x-date-pickers/src/internals/hooks/useStaticPicker/useStaticPicker.tsx +++ b/packages/x-date-pickers/src/internals/hooks/useStaticPicker/useStaticPicker.tsx @@ -6,7 +6,7 @@ import { usePicker } from '../usePicker'; import { PickerProvider } from '../../components/PickerProvider'; import { PickersLayout } from '../../../PickersLayout'; import { DIALOG_WIDTH } from '../../constants/dimensions'; -import { DateOrTimeViewWithMeridiem } from '../../models'; +import { DateOrTimeViewWithMeridiem, PickerValue } from '../../models'; const PickerStaticLayout = styled(PickersLayout)(({ theme }) => ({ overflow: 'hidden', @@ -31,7 +31,7 @@ export const useStaticPicker = < const { localeText, slots, slotProps, className, sx, displayStaticWrapperAs, autoFocus } = props; const { layoutProps, providerProps, renderCurrentView } = usePicker< - false, + PickerValue, TView, 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 a72efbd8592e..aecb74e3eae8 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 @@ -6,13 +6,13 @@ import { import { BasePickerProps } from '../../models/props/basePickerProps'; import { UsePickerParams } from '../usePicker'; import { UsePickerViewsProps } from '../usePicker/usePickerViews'; -import { DateOrTimeViewWithMeridiem } from '../../models'; +import { DateOrTimeViewWithMeridiem, PickerValue } from '../../models'; export interface UseStaticPickerSlots - extends ExportedPickersLayoutSlots {} + extends ExportedPickersLayoutSlots {} export interface UseStaticPickerSlotProps - extends ExportedPickersLayoutSlotProps {} + extends ExportedPickersLayoutSlotProps {} export interface StaticOnlyPickerProps { /** @@ -36,8 +36,8 @@ export interface StaticOnlyPickerProps { export interface UseStaticPickerProps< TView extends DateOrTimeViewWithMeridiem, TError, - TExternalProps extends UsePickerViewsProps, -> extends BasePickerProps, + TExternalProps extends UsePickerViewsProps, +> extends BasePickerProps, StaticOnlyPickerProps { /** * Overridable component slots. @@ -55,7 +55,7 @@ export interface UseStaticPickerParams< TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseStaticPickerProps, > extends Pick< - UsePickerParams, + UsePickerParams, 'valueManager' | 'valueType' | 'validator' > { props: TExternalProps; diff --git a/packages/x-date-pickers/src/internals/hooks/useValueWithTimezone.ts b/packages/x-date-pickers/src/internals/hooks/useValueWithTimezone.ts index a0ef4482a46f..7b2f09a9f64a 100644 --- a/packages/x-date-pickers/src/internals/hooks/useValueWithTimezone.ts +++ b/packages/x-date-pickers/src/internals/hooks/useValueWithTimezone.ts @@ -4,7 +4,7 @@ import useControlled from '@mui/utils/useControlled'; import { useUtils } from './useUtils'; import type { PickerValueManager } from './usePicker'; import { PickersTimezone } from '../../models'; -import { InferPickerValue } from '../models'; +import { PickerValidValue } from '../models'; /** * Hooks making sure that: @@ -12,7 +12,7 @@ import { InferPickerValue } from '../models'; * - The value rendered is always the one from `props.timezone` if defined */ export const useValueWithTimezone = < - TIsRange extends boolean, + TValue extends PickerValidValue, TChange extends (...params: any[]) => void, >({ timezone: timezoneProp, @@ -22,10 +22,10 @@ export const useValueWithTimezone = < valueManager, }: { timezone: PickersTimezone | undefined; - value: InferPickerValue | undefined; - defaultValue: InferPickerValue | undefined; + value: TValue | undefined; + defaultValue: TValue | undefined; onChange: TChange | undefined; - valueManager: PickerValueManager; + valueManager: PickerValueManager; }) => { const utils = useUtils(); @@ -37,7 +37,7 @@ export const useValueWithTimezone = < [utils, valueManager, inputValue], ); - const setInputTimezone = useEventCallback((newValue: InferPickerValue) => { + const setInputTimezone = useEventCallback((newValue: TValue) => { if (inputTimezone == null) { return newValue; } @@ -52,12 +52,10 @@ export const useValueWithTimezone = < [valueManager, utils, timezoneToRender, inputValue], ); - const handleValueChange = useEventCallback( - (newValue: InferPickerValue, ...otherParams: any[]) => { - const newValueWithInputTimezone = setInputTimezone(newValue); - onChange?.(newValueWithInputTimezone, ...otherParams); - }, - ) as TChange; + const handleValueChange = useEventCallback((newValue: TValue, ...otherParams: any[]) => { + const newValueWithInputTimezone = setInputTimezone(newValue); + onChange?.(newValueWithInputTimezone, ...otherParams); + }) as TChange; return { value: valueWithTimezoneToRender, handleValueChange, timezone: timezoneToRender }; }; @@ -66,7 +64,7 @@ export const useValueWithTimezone = < * Wrapper around `useControlled` and `useValueWithTimezone` */ export const useControlledValueWithTimezone = < - TIsRange extends boolean, + TValue extends PickerValidValue, TChange extends (...params: any[]) => void, >({ name, @@ -78,10 +76,10 @@ export const useControlledValueWithTimezone = < }: { name: string; timezone: PickersTimezone | undefined; - value: InferPickerValue | undefined; - defaultValue: InferPickerValue | undefined; + value: TValue | undefined; + defaultValue: TValue | undefined; onChange: TChange | undefined; - valueManager: PickerValueManager; + valueManager: PickerValueManager; }) => { const [valueWithInputTimezone, setValue] = useControlled({ name, @@ -90,12 +88,10 @@ export const useControlledValueWithTimezone = < default: defaultValue ?? valueManager.emptyValue, }); - const onChange = useEventCallback( - (newValue: InferPickerValue, ...otherParams: any[]) => { - setValue(newValue); - onChangeProp?.(newValue, ...otherParams); - }, - ) as TChange; + const onChange = useEventCallback((newValue: TValue, ...otherParams: any[]) => { + setValue(newValue); + onChangeProp?.(newValue, ...otherParams); + }) as TChange; return useValueWithTimezone({ timezone: timezoneProp, diff --git a/packages/x-date-pickers/src/internals/hooks/useViews.tsx b/packages/x-date-pickers/src/internals/hooks/useViews.tsx index a493cc36553c..b26dc412b36c 100644 --- a/packages/x-date-pickers/src/internals/hooks/useViews.tsx +++ b/packages/x-date-pickers/src/internals/hooks/useViews.tsx @@ -3,7 +3,7 @@ import useEventCallback from '@mui/utils/useEventCallback'; import useControlled from '@mui/utils/useControlled'; import { MakeOptional } from '@mui/x-internals/types'; import type { PickerSelectionState } from './usePicker'; -import { DateOrTimeViewWithMeridiem, InferPickerValue } from '../models'; +import { DateOrTimeViewWithMeridiem, PickerValidValue } from '../models'; import { PickerValidDate } from '../../models'; export type PickerOnChangeFn = ( @@ -12,22 +12,18 @@ export type PickerOnChangeFn = ( ) => void; export interface UseViewsOptions< - TIsRange extends boolean, + TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, > { /** * Callback fired when the value changes. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @template TView The view type. Will be one of date or time views. - * @param {InferPickerValue} value The new value. + * @param {TValue} value The new value. * @param {PickerSelectionState | undefined} selectionState Indicates if the date selection is complete. * @param {TView | undefined} selectedView Indicates the view in which the selection has been made. */ - onChange: ( - value: InferPickerValue, - selectionState?: PickerSelectionState, - selectedView?: TView, - ) => void; + onChange: (value: TValue, selectionState?: PickerSelectionState, selectedView?: TView) => void; /** * Callback fired on view change. * @template TView @@ -71,13 +67,16 @@ export interface UseViewsOptions< } export interface ExportedUseViewsOptions< - TIsRange extends boolean, + TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, -> extends MakeOptional, 'onChange' | 'openTo' | 'views'> {} +> extends MakeOptional, 'onChange' | 'openTo' | 'views'> {} let warnedOnceNotValidView = false; -interface UseViewsResponse { +interface UseViewsResponse< + TValue extends PickerValidValue, + TView extends DateOrTimeViewWithMeridiem, +> { view: TView; setView: (view: TView) => void; focusedView: TView | null; @@ -87,13 +86,16 @@ interface UseViewsResponse void; setValueAndGoToNextView: ( - value: InferPickerValue, + value: TValue, currentViewSelectionState?: PickerSelectionState, selectedView?: TView, ) => void; } -export function useViews({ +export function useViews< + TValue extends PickerValidValue, + TView extends DateOrTimeViewWithMeridiem, +>({ onChange, onViewChange, openTo, @@ -102,7 +104,7 @@ export function useViews): UseViewsResponse { +}: UseViewsOptions): UseViewsResponse { if (process.env.NODE_ENV !== 'production') { if (!warnedOnceNotValidView) { if (inView != null && !views.includes(inView)) { @@ -191,11 +193,7 @@ export function useViews, - currentViewSelectionState?: PickerSelectionState, - selectedView?: TView, - ) => { + (value: TValue, currentViewSelectionState?: PickerSelectionState, selectedView?: TView) => { const isSelectionFinishedOnCurrentView = currentViewSelectionState === 'finish'; const hasMoreViews = selectedView ? // handles case like `DateTimePicker`, where a view might return a `finish` selection state diff --git a/packages/x-date-pickers/src/internals/index.ts b/packages/x-date-pickers/src/internals/index.ts index 0c45e50833b9..f1d7fb1465ae 100644 --- a/packages/x-date-pickers/src/internals/index.ts +++ b/packages/x-date-pickers/src/internals/index.ts @@ -122,10 +122,11 @@ export type { DateTimeValidationProps, } from './models/validation'; export type { + PickerValue, PickerRangeValue, PickerNonNullableRangeValue, - InferPickerValue, InferNonNullablePickerValue, + PickerValidValue, } from './models/value'; export { convertFieldResponseIntoMuiTextFieldProps } from './utils/convertFieldResponseIntoMuiTextFieldProps'; diff --git a/packages/x-date-pickers/src/internals/models/fields.ts b/packages/x-date-pickers/src/internals/models/fields.ts index ffb08bbc7766..b7476ca12f04 100644 --- a/packages/x-date-pickers/src/internals/models/fields.ts +++ b/packages/x-date-pickers/src/internals/models/fields.ts @@ -8,6 +8,7 @@ import type { import type { FieldSection, PickerOwnerState } from '../../models'; import type { UseFieldInternalProps } from '../hooks/useField'; import { RangePosition } from './pickers'; +import { PickerValidValue } from './value'; export interface FieldRangeSection extends FieldSection { dateName: RangePosition; @@ -44,12 +45,12 @@ export interface BaseForwardedSingleInputFieldProps extends ExportedUseClearable * Only contains what the MUI components are passing to the field, not what users can pass using the `props.slotProps.field`. */ export type BaseSingleInputFieldProps< - TIsRange extends boolean, + TValue extends PickerValidValue, TEnableAccessibleFieldDOMStructure extends boolean, TError, > = MakeRequired< Pick< - UseFieldInternalProps, + UseFieldInternalProps, | 'readOnly' | 'disabled' | 'format' 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 1a72e6c59ba2..c4fef0bdaa15 100644 --- a/packages/x-date-pickers/src/internals/models/props/basePickerProps.tsx +++ b/packages/x-date-pickers/src/internals/models/props/basePickerProps.tsx @@ -7,17 +7,18 @@ import { PickersInputComponentLocaleText } from '../../../locales/utils/pickersL import type { UsePickerViewsProps } from '../../hooks/usePicker/usePickerViews'; import { DateOrTimeViewWithMeridiem } from '../common'; import { UseFieldInternalProps } from '../../hooks/useField'; +import { PickerValidValue } from '../value'; /** * Props common to all pickers after applying the default props on each picker. */ export interface BasePickerProps< - TIsRange extends boolean, + TValue extends PickerValidValue, 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. @@ -34,11 +35,11 @@ export interface BasePickerProps< * Props common to all pickers before applying the default props on each picker. */ export interface BasePickerInputProps< - TIsRange extends boolean, + TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TError, > extends Omit< - MakeOptional, 'openTo' | 'views'>, + MakeOptional, 'openTo' | 'views'>, 'viewRenderers' > {} 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 6a055a0ba22e..81583861b148 100644 --- a/packages/x-date-pickers/src/internals/models/props/time.ts +++ b/packages/x-date-pickers/src/internals/models/props/time.ts @@ -6,6 +6,7 @@ import type { ExportedUseViewsOptions } from '../../hooks/useViews'; import { TimeViewWithMeridiem } from '../common'; import { ExportedValidateTimeProps } from '../../../validation/validateTime'; import { FormProps } from '../formProps'; +import { PickerValue } from '../value'; export interface AmPmProps { /** @@ -21,7 +22,7 @@ export interface ExportedBaseClockProps AmPmProps {} export interface BaseClockProps - extends ExportedUseViewsOptions, + extends ExportedUseViewsOptions, ExportedBaseClockProps, FormProps { className?: string; diff --git a/packages/x-date-pickers/src/internals/models/props/toolbar.ts b/packages/x-date-pickers/src/internals/models/props/toolbar.ts index ab8138052897..b1c70623cc72 100644 --- a/packages/x-date-pickers/src/internals/models/props/toolbar.ts +++ b/packages/x-date-pickers/src/internals/models/props/toolbar.ts @@ -3,16 +3,16 @@ import { SxProps } from '@mui/system'; import { Theme } from '@mui/material/styles'; import { DateOrTimeViewWithMeridiem } from '../common'; import { FormProps } from '../formProps'; -import { InferPickerValue } from '../value'; +import { PickerValidValue } from '../value'; export interface BaseToolbarProps< - TIsRange extends boolean, + TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, > extends ExportedBaseToolbarProps, FormProps { isLandscape: boolean; - onChange: (newValue: InferPickerValue) => void; - value: InferPickerValue; + onChange: (newValue: TValue) => void; + value: TValue; /** * Currently visible picker view. */ diff --git a/packages/x-date-pickers/src/internals/models/value.ts b/packages/x-date-pickers/src/internals/models/value.ts index 371c126d3c76..e5500f488ec9 100644 --- a/packages/x-date-pickers/src/internals/models/value.ts +++ b/packages/x-date-pickers/src/internals/models/value.ts @@ -1,19 +1,22 @@ import { PickerValidDate } from '../../models/pickers'; +/** + * The type that the `value` and `defaultValue` props can receive on non-range components (date, time and date-time). + */ export type PickerValue = PickerValidDate | null; +/** + * The type that the `value` and `defaultValue` props can receive on range components (date-range, time-range and date-time-range). + */ export type PickerRangeValue = [PickerValidDate | null, PickerValidDate | null]; export type PickerNonNullableRangeValue = [PickerValidDate, PickerValidDate]; -export type InferPickerValue = TIsRange extends true - ? TIsRange extends false - ? PickerValue | PickerRangeValue - : PickerRangeValue - : PickerValue; +export type PickerValidValue = PickerValue | PickerRangeValue; -export type InferNonNullablePickerValue = TIsRange extends true - ? TIsRange extends false - ? PickerValidDate | PickerNonNullableRangeValue - : PickerNonNullableRangeValue - : PickerValidDate; +export type InferNonNullablePickerValue = + TValue extends PickerRangeValue + ? TValue extends PickerValue + ? PickerValidDate | PickerNonNullableRangeValue + : PickerNonNullableRangeValue + : PickerValidDate; diff --git a/packages/x-date-pickers/src/internals/utils/valueManagers.ts b/packages/x-date-pickers/src/internals/utils/valueManagers.ts index 5c476694b18a..ae9a8d91ad70 100644 --- a/packages/x-date-pickers/src/internals/utils/valueManagers.ts +++ b/packages/x-date-pickers/src/internals/utils/valueManagers.ts @@ -7,10 +7,11 @@ import { createDateStrForV7HiddenInputFromSections, createDateStrForV6InputFromSections, } from '../hooks/useField/useField.utils'; +import { PickerValue } from '../models'; export type SingleItemPickerValueManager< TError extends DateValidationError | TimeValidationError | DateTimeValidationError = any, -> = PickerValueManager; +> = PickerValueManager; export const singleItemValueManager: SingleItemPickerValueManager = { emptyValue: null, @@ -37,7 +38,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/models/fields.ts b/packages/x-date-pickers/src/models/fields.ts index 6e2972c327b5..55f14ebdce1a 100644 --- a/packages/x-date-pickers/src/models/fields.ts +++ b/packages/x-date-pickers/src/models/fields.ts @@ -7,7 +7,12 @@ import type { import { ExportedPickersSectionListProps } from '../PickersSectionList'; import type { UseFieldInternalProps, UseFieldResponse } from '../internals/hooks/useField'; import type { PickersTextFieldProps } from '../PickersTextField'; -import { BaseForwardedSingleInputFieldProps, FieldRangeSection } from '../internals/models'; +import { + BaseForwardedSingleInputFieldProps, + FieldRangeSection, + PickerRangeValue, + PickerValidValue, +} from '../internals/models'; // Update PickersComponentAgnosticLocaleText -> viewNames when adding new entries export type FieldSectionType = @@ -86,18 +91,22 @@ export interface FieldSection { endSeparator: string; } -export type InferFieldSection = TIsRange extends true - ? TIsRange extends false - ? FieldSection | FieldRangeSection - : FieldRangeSection - : FieldSection; +// If `PickerValidDate` contains `any`, then `TValue extends PickerRangeValue` will return true, so we have to handle this edge case first. +type IsAny = boolean extends (T extends never ? true : false) ? true : false; -export interface FieldRef { +export type InferFieldSection = + IsAny extends true + ? FieldSection + : TValue extends PickerRangeValue + ? FieldRangeSection + : FieldSection; + +export interface FieldRef { /** * Returns the sections of the current value. - * @returns {InferFieldSection[]} The sections of the current value. + * @returns {InferFieldSection[]} The sections of the current value. */ - getSections: () => InferFieldSection[]; + getSections: () => InferFieldSection[]; /** * Returns the index of the active section (the first focused section). * If no section is active, returns `null`. @@ -127,11 +136,11 @@ export type FieldSelectedSections = number | FieldSectionType | null | 'all'; * Props the prop `slotProps.field` of a picker can receive. */ export type PickerFieldSlotProps< - TIsRange extends boolean, + TValue extends PickerValidValue, TEnableAccessibleFieldDOMStructure extends boolean, > = ExportedUseClearableFieldProps & Pick< - UseFieldInternalProps, + UseFieldInternalProps, 'shouldRespectLeadingZeros' | 'readOnly' > & React.HTMLAttributes & { diff --git a/packages/x-date-pickers/src/models/validation.ts b/packages/x-date-pickers/src/models/validation.ts index 735751aec51a..04833a901699 100644 --- a/packages/x-date-pickers/src/models/validation.ts +++ b/packages/x-date-pickers/src/models/validation.ts @@ -1,4 +1,4 @@ -import type { InferPickerValue } from '../internals/models'; +import type { PickerValidValue } from '../internals/models'; /** * Validation error types applicable to both date and time validation @@ -24,19 +24,20 @@ export type TimeValidationError = export type DateTimeValidationError = DateValidationError | TimeValidationError; -export interface OnErrorProps { +export interface OnErrorProps { /** * Callback fired when the error associated with the current value changes. * When a validation error is detected, the `error` parameter contains a non-null value. * This can be used to render an appropriate form error. * @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. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @param {TError} error The reason why the current value is not valid. - * @param {InferPickerValue} value The value associated with the error. + * @param {TValue} value The value associated with the error. */ - onError?: (error: TError, value: InferPickerValue) => void; + onError?: (error: TError, value: TValue) => void; } -export type InferError = TProps extends { onError?: (error: any, value: any) => void } - ? Parameters>[0] - : never; +export type InferError = + TProps extends Pick, 'onError'> + ? Parameters>[0] + : never; diff --git a/packages/x-date-pickers/src/themeAugmentation/props.d.ts b/packages/x-date-pickers/src/themeAugmentation/props.d.ts index 19c3066219df..f5bdfe45dade 100644 --- a/packages/x-date-pickers/src/themeAugmentation/props.d.ts +++ b/packages/x-date-pickers/src/themeAugmentation/props.d.ts @@ -52,6 +52,7 @@ import { PickersFilledInputProps, } from '../PickersTextField'; import { PickersSectionListProps } from '../PickersSectionList'; +import { PickerValidValue } from '../internals/models'; export interface PickersComponentsPropsList { MuiClock: ClockProps; @@ -77,10 +78,10 @@ export interface PickersComponentsPropsList { MuiPickersMonth: ExportedPickersMonthProps; MuiPickersPopper: PickerPopperProps; MuiPickersSlideTransition: ExportedSlideTransitionProps; - MuiPickersToolbar: PickersToolbarProps; + MuiPickersToolbar: PickersToolbarProps; MuiPickersToolbarButton: PickersToolbarButtonProps; MuiPickersToolbarText: ExportedPickersToolbarTextProps; - MuiPickersLayout: PickersLayoutProps; + MuiPickersLayout: PickersLayoutProps; MuiPickersYear: ExportedPickersYearProps; MuiTimeClock: TimeClockProps; MuiTimeField: TimeFieldProps; diff --git a/packages/x-date-pickers/src/validation/useValidation.ts b/packages/x-date-pickers/src/validation/useValidation.ts index 598b7af37787..f9708c1f6363 100644 --- a/packages/x-date-pickers/src/validation/useValidation.ts +++ b/packages/x-date-pickers/src/validation/useValidation.ts @@ -5,24 +5,24 @@ import { useLocalizationContext } from '../internals/hooks/useUtils'; import { MuiPickersAdapterContextValue } from '../LocalizationProvider/LocalizationProvider'; import { OnErrorProps, PickersTimezone } from '../models'; import type { PickerValueManager } from '../internals/hooks/usePicker'; -import { InferPickerValue } from '../internals/models'; +import { PickerValidValue } from '../internals/models'; -export type Validator = { +export type Validator = { (params: { adapter: MuiPickersAdapterContextValue; - value: InferPickerValue; + value: TValue; timezone: PickersTimezone; props: TValidationProps; }): TError; - valueManager: PickerValueManager; + valueManager: PickerValueManager; }; -interface UseValidationOptions - extends OnErrorProps { +interface UseValidationOptions + extends OnErrorProps { /** * The value to validate. */ - value: InferPickerValue; + value: TValue; /** * The timezone to use for the validation. */ @@ -33,7 +33,7 @@ interface UseValidationOptions; + validator: Validator; /** * The validation props, they differ depending on the component. * For example, the `validateTime` function supports `minTime`, `maxTime`, etc. @@ -41,7 +41,7 @@ interface UseValidationOptions { +interface UseValidationReturnValue { /** * The validation error associated to the value passed to the `useValidation` hook. */ @@ -55,27 +55,27 @@ interface UseValidationReturnValue { /** * Get the validation error for a new value. * This can be used to validate the value in a change handler before updating the state. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. - * @param {InferPickerValue} newValue The value to validate. + * @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. + * @param {TValue} newValue The value to validate. * @returns {TError} The validation error associated to the new value. */ - getValidationErrorForNewValue: (newValue: InferPickerValue) => TError; + getValidationErrorForNewValue: (newValue: TValue) => TError; } /** * Utility hook to check if a given value is valid based on the provided validation props. - * @template TIsRange `true` if the value comes from a range picker, `false` otherwise. + * @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. * @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 {InferPickerValue} options.value The value to validate. + * @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: InferPickerValue) => void} options.onError Callback fired when the error associated with the current value changes. + * @param {(error: TError, value: TValue) => void} options.onError Callback fired when the error associated with the current value changes. */ -export function useValidation( - options: UseValidationOptions, -): UseValidationReturnValue { +export function useValidation( + options: UseValidationOptions, +): UseValidationReturnValue { const { props, validator, value, timezone, onError } = options; const adapter = useLocalizationContext(); @@ -97,7 +97,7 @@ export function useValidation) => { + const getValidationErrorForNewValue = useEventCallback((newValue: TValue) => { return validator({ adapter, value: newValue, timezone, props }); }); diff --git a/packages/x-date-pickers/src/validation/validateDate.ts b/packages/x-date-pickers/src/validation/validateDate.ts index cf6995363110..6ee413e372a9 100644 --- a/packages/x-date-pickers/src/validation/validateDate.ts +++ b/packages/x-date-pickers/src/validation/validateDate.ts @@ -8,6 +8,7 @@ import { import { DateValidationError } from '../models'; import { applyDefaultDate } from '../internals/utils/date-utils'; import { singleItemValueManager } from '../internals/utils/valueManagers'; +import { PickerValue } from '../internals/models'; /** * Validation props used by the Date Picker, Date Field and Date Calendar components. @@ -24,7 +25,7 @@ export interface ValidateDateProps YearValidationProps, Required {} -export const validateDate: Validator = ({ +export const validateDate: Validator = ({ props, value, timezone, diff --git a/packages/x-date-pickers/src/validation/validateDateTime.ts b/packages/x-date-pickers/src/validation/validateDateTime.ts index b827b21c888f..50f5e8437246 100644 --- a/packages/x-date-pickers/src/validation/validateDateTime.ts +++ b/packages/x-date-pickers/src/validation/validateDateTime.ts @@ -4,6 +4,7 @@ import { ExportedValidateTimeProps, validateTime, ValidateTimeProps } from './va import { DateTimeValidationError } from '../models'; import { singleItemValueManager } from '../internals/utils/valueManagers'; import { DateTimeValidationProps } from '../internals/models/validation'; +import { PickerValue } from '../internals/models'; /** * Validation props used by the Date Time Picker and Date Time Field components. @@ -15,12 +16,11 @@ export interface ExportedValidateDateTimeProps export interface ValidateDateTimeProps extends ValidateDateProps, ValidateTimeProps {} -export const validateDateTime: Validator = ({ - adapter, - value, - timezone, - props, -}) => { +export const validateDateTime: Validator< + PickerValue, + DateTimeValidationError, + ValidateDateTimeProps +> = ({ adapter, value, timezone, props }) => { const dateValidationResult = validateDate({ adapter, value, diff --git a/packages/x-date-pickers/src/validation/validateTime.ts b/packages/x-date-pickers/src/validation/validateTime.ts index 87e626d7aa67..d28c21149e0e 100644 --- a/packages/x-date-pickers/src/validation/validateTime.ts +++ b/packages/x-date-pickers/src/validation/validateTime.ts @@ -3,6 +3,7 @@ import { Validator } from './useValidation'; import { BaseTimeValidationProps, TimeValidationProps } from '../internals/models/validation'; import { TimeValidationError } from '../models'; import { singleItemValueManager } from '../internals/utils/valueManagers'; +import { PickerValue } from '../internals/models'; /** * Validation props used by the Time Picker, Time Field and Clock components. @@ -11,7 +12,7 @@ export interface ExportedValidateTimeProps extends BaseTimeValidationProps, Time export interface ValidateTimeProps extends Required, TimeValidationProps {} -export const validateTime: Validator = ({ +export const validateTime: Validator = ({ adapter, value, timezone, diff --git a/test/utils/pickers/describeValue/describeValue.tsx b/test/utils/pickers/describeValue/describeValue.tsx index 4e2e1aed3ab8..7565a92501cf 100644 --- a/test/utils/pickers/describeValue/describeValue.tsx +++ b/test/utils/pickers/describeValue/describeValue.tsx @@ -1,6 +1,10 @@ import * as React from 'react'; import createDescribe from '@mui/internal-test-utils/createDescribe'; -import { BasePickerInputProps, UsePickerValueNonStaticProps } from '@mui/x-date-pickers/internals'; +import { + BasePickerInputProps, + PickerValidValue, + UsePickerValueNonStaticProps, +} from '@mui/x-date-pickers/internals'; import { buildFieldInteractions, BuildFieldInteractionsResponse } from 'test/utils/pickers'; import { PickerComponentFamily } from '../describe.types'; import { DescribeValueOptions, DescribeValueTestSuite } from './describeValue.types'; @@ -16,15 +20,15 @@ const TEST_SUITES: DescribeValueTestSuite[] = [ testShortcuts, ]; -function innerDescribeValue( +function innerDescribeValue( ElementToTest: React.FunctionComponent, - getOptions: () => DescribeValueOptions, + getOptions: () => DescribeValueOptions, ) { const options = getOptions(); 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); @@ -68,23 +72,23 @@ function innerDescribeValue { - const typedTestSuite = testSuite as DescribeValueTestSuite; + const typedTestSuite = testSuite as DescribeValueTestSuite; typedTestSuite(WrappedElementToTest, { ...options, renderWithProps }); }); } -type P = [ +type P = [ React.FunctionComponent, - () => DescribeValueOptions, + () => DescribeValueOptions, ]; type DescribeValue = { - (...args: P): void; - skip: ( - ...args: P + (...args: P): void; + skip: ( + ...args: P ) => void; - only: ( - ...args: P + only: ( + ...args: P ) => void; }; diff --git a/test/utils/pickers/describeValue/describeValue.types.ts b/test/utils/pickers/describeValue/describeValue.types.ts index 511a4935eeb3..c1cb3b358d3f 100644 --- a/test/utils/pickers/describeValue/describeValue.types.ts +++ b/test/utils/pickers/describeValue/describeValue.types.ts @@ -1,6 +1,6 @@ import * as React from 'react'; import { createRenderer, MuiRenderResult } from '@mui/internal-test-utils/createRenderer'; -import { InferPickerValue, InferNonNullablePickerValue } from '@mui/x-date-pickers/internals'; +import { InferNonNullablePickerValue, PickerValidValue } from '@mui/x-date-pickers/internals'; import { BuildFieldInteractionsResponse, FieldPressCharacter, @@ -9,12 +9,15 @@ import { } from 'test/utils/pickers'; import { PickerComponentFamily } from '../describe.types'; -interface DescribeValueBaseOptions { +interface DescribeValueBaseOptions< + TValue extends PickerValidValue, + C extends PickerComponentFamily, +> { componentFamily: C; render: (node: React.ReactElement) => MuiRenderResult; - assertRenderedValue: (expectedValue: InferPickerValue) => void; - values: [InferNonNullablePickerValue, InferNonNullablePickerValue]; - emptyValue: InferPickerValue; + assertRenderedValue: (expectedValue: TValue) => void; + values: [InferNonNullablePickerValue, InferNonNullablePickerValue]; + emptyValue: TValue; defaultProps?: object; // TODO: Export `Clock` from monorepo clock: ReturnType['clock']; @@ -22,12 +25,12 @@ interface DescribeValueBaseOptions = DescribeValueBaseOptions & + TValue extends PickerValidValue, +> = DescribeValueBaseOptions & (C extends 'picker' ? OpenPickerParams & { setNewValue: ( - value: InferNonNullablePickerValue, + value: InferNonNullablePickerValue, options: { selectSection: FieldSectionSelector; pressKey: FieldPressCharacter; @@ -35,18 +38,21 @@ export type DescribeValueOptions< applySameValue?: boolean; setEndDate?: boolean; }, - ) => InferNonNullablePickerValue; + ) => InferNonNullablePickerValue; } : { setNewValue: ( - value: InferPickerValue, + value: TValue, options: { selectSection: FieldSectionSelector; pressKey: FieldPressCharacter }, - ) => InferPickerValue; + ) => TValue; }); -export type DescribeValueTestSuite = ( +export type DescribeValueTestSuite< + TValue extends PickerValidValue, + C extends PickerComponentFamily, +> = ( ElementToTest: React.FunctionComponent, - options: DescribeValueOptions & { + options: DescribeValueOptions & { renderWithProps: BuildFieldInteractionsResponse['renderWithProps']; }, ) => void; diff --git a/test/utils/pickers/describeValue/testPickerActionBar.tsx b/test/utils/pickers/describeValue/testPickerActionBar.tsx index 6bf1a2eadf20..7497f806866c 100644 --- a/test/utils/pickers/describeValue/testPickerActionBar.tsx +++ b/test/utils/pickers/describeValue/testPickerActionBar.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { expect } from 'chai'; import { spy } from 'sinon'; import { fireEvent, screen } from '@mui/internal-test-utils'; -import { DateRange } from '@mui/x-date-pickers-pro/models'; +import { PickerRangeValue } from '@mui/x-date-pickers/internals'; import { adapterToUse, getExpectedOnChangeCount, @@ -107,7 +107,7 @@ export const testPickerActionBar: DescribeValueTestSuite = ( getExpectedOnChangeCount(componentFamily, pickerParams) + 1, ); if (isRangeType) { - (values[0] as DateRange).forEach((value, index) => { + (values[0] as PickerRangeValue).forEach((value, index) => { expect(onChange.lastCall.args[0][index]).toEqualDateTime(value); }); } else { diff --git a/test/utils/pickers/describeValue/testPickerOpenCloseLifeCycle.tsx b/test/utils/pickers/describeValue/testPickerOpenCloseLifeCycle.tsx index c114367e9a20..8a5601814ce2 100644 --- a/test/utils/pickers/describeValue/testPickerOpenCloseLifeCycle.tsx +++ b/test/utils/pickers/describeValue/testPickerOpenCloseLifeCycle.tsx @@ -2,12 +2,12 @@ import * as React from 'react'; import { expect } from 'chai'; import { spy } from 'sinon'; import { fireEvent, screen } from '@mui/internal-test-utils'; -import { DateRange } from '@mui/x-date-pickers-pro/models'; +import { PickerRangeValue, PickerValidValue } from '@mui/x-date-pickers/internals'; import { getExpectedOnChangeCount, getFieldInputRoot, openPicker } from 'test/utils/pickers'; import { DescribeValueTestSuite } from './describeValue.types'; import { fireUserEvent } from '../../fireUserEvent'; -export const testPickerOpenCloseLifeCycle: DescribeValueTestSuite = ( +export const testPickerOpenCloseLifeCycle: DescribeValueTestSuite = ( ElementToTest, options, ) => { @@ -79,7 +79,7 @@ export const testPickerOpenCloseLifeCycle: DescribeValueTestSuite).forEach((value, index) => { + (newValue as PickerRangeValue).forEach((value, index) => { expect(onChange.lastCall.args[0][index]).toEqualDateTime(value); }); } else { @@ -137,7 +137,7 @@ export const testPickerOpenCloseLifeCycle: DescribeValueTestSuite).forEach((value, index) => { + (newValue as PickerRangeValue).forEach((value, index) => { expect(onChange.lastCall.args[0][index]).toEqualDateTime(value); }); } else { @@ -213,7 +213,7 @@ export const testPickerOpenCloseLifeCycle: DescribeValueTestSuite).forEach((value, index) => { + (newValue as PickerRangeValue).forEach((value, index) => { expect(onChange.lastCall.args[0][index]).toEqualDateTime(value); }); } else { @@ -236,7 +236,7 @@ export const testPickerOpenCloseLifeCycle: DescribeValueTestSuite).forEach((value, index) => { + (newValueBis as PickerRangeValue).forEach((value, index) => { expect(onChange.lastCall.args[0][index]).toEqualDateTime(value); }); } else { @@ -278,7 +278,7 @@ export const testPickerOpenCloseLifeCycle: DescribeValueTestSuite).forEach((value, index) => { + (newValue as PickerRangeValue).forEach((value, index) => { expect(onChange.lastCall.args[0][index]).toEqualDateTime(value); }); } else { diff --git a/test/utils/pickers/fields.tsx b/test/utils/pickers/fields.tsx index ce2878952e41..052d39f1e032 100644 --- a/test/utils/pickers/fields.tsx +++ b/test/utils/pickers/fields.tsx @@ -5,6 +5,7 @@ import { createRenderer, screen, act, fireEvent } from '@mui/internal-test-utils import { FieldRef, FieldSectionType } from '@mui/x-date-pickers/models'; import { pickersSectionListClasses } from '@mui/x-date-pickers/PickersSectionList'; import { pickersInputBaseClasses } from '@mui/x-date-pickers/PickersTextField'; +import { PickerValue } from '@mui/x-date-pickers/internals'; import { fireUserEvent } from '../fireUserEvent'; import { expectFieldValueV7, expectFieldValueV6 } from './assertions'; @@ -88,10 +89,10 @@ export const buildFieldInteractions =

({ props, { hook, componentFamily = 'field', direction = 'ltr' } = {}, ) => { - let fieldRef: React.RefObject> = { current: null }; + let fieldRef: React.RefObject> = { current: null }; function WrappedComponent(propsFromRender: any) { - fieldRef = React.useRef>(null); + fieldRef = React.useRef>(null); const hookResult = hook?.(propsFromRender); const allProps = { From db88d0ec15ca21a5eb789f7cf9f01bfb2587bc43 Mon Sep 17 00:00:00 2001 From: flavien Date: Mon, 18 Nov 2024 09:34:48 +0100 Subject: [PATCH 09/14] Fix --- packages/x-date-pickers/src/TimeClock/TimeClock.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/x-date-pickers/src/TimeClock/TimeClock.tsx b/packages/x-date-pickers/src/TimeClock/TimeClock.tsx index 0dbaf87b9271..7caf93b73b27 100644 --- a/packages/x-date-pickers/src/TimeClock/TimeClock.tsx +++ b/packages/x-date-pickers/src/TimeClock/TimeClock.tsx @@ -20,7 +20,6 @@ import { getHourNumbers, getMinutesNumbers } from './ClockNumbers'; import { useControlledValueWithTimezone } from '../internals/hooks/useValueWithTimezone'; import { singleItemValueManager } from '../internals/utils/valueManagers'; import { useClockReferenceDate } from '../internals/hooks/useClockReferenceDate'; -import { PickerValue } from '../internals/models'; const useUtilityClasses = (ownerState: TimeClockProps) => { const { classes } = ownerState; From 2bab7849ed9f7f19b3f48f38b482460ef321081f Mon Sep 17 00:00:00 2001 From: flavien Date: Mon, 18 Nov 2024 11:22:07 +0100 Subject: [PATCH 10/14] Add migration guide --- .../migration-pickers-v7/migration-pickers-v7.md | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md b/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md index e7469abadfda..e04d358c59e7 100644 --- a/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md +++ b/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md @@ -302,7 +302,7 @@ The following variables were renamed to have a coherent `Picker` / `Pickers` pre ## Typing breaking changes -### Remove `TDate` generic +### Remove `TDate` and `TSection` generics The `TDate` generic has been removed from all the types, interfaces, and variables of the `@mui/x-date-pickers` and `@mui/x-date-pickers-pro` packages. @@ -319,7 +319,17 @@ If you were passing your date object type as a generic to any element of one of +type Props = DatePickerToolbarProps; ``` -A follow-up release will add the full list of the impacted elements to the migration guide. +If you were passing `FieldSection` or `RangeFieldSection` as a generic to any element of one of those packages, you can remove it: + +:::success +In the `FieldRef` type, `TSection` was the only generic and has been replaced by `TValue` instead of being removed: + +```diff +-const fieldRef = React.useRef>(null); ++const fieldRef = React.useRef(null); +``` + +::: ### Removed types From 3f8e2961376a2650a4c15806fcdbad0544be0962 Mon Sep 17 00:00:00 2001 From: flavien Date: Mon, 18 Nov 2024 11:33:21 +0100 Subject: [PATCH 11/14] Improve migration guide --- .../migration-pickers-v7.md | 32 ++++++++++++------- 1 file changed, 21 insertions(+), 11 deletions(-) diff --git a/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md b/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md index e04d358c59e7..fc9e06959a39 100644 --- a/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md +++ b/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md @@ -254,7 +254,7 @@ const theme = createTheme({ }); ``` -## Renamed variables +## Renamed variables and types The following variables were renamed to have a coherent `Picker` / `Pickers` prefix: @@ -300,9 +300,19 @@ The following variables were renamed to have a coherent `Picker` / `Pickers` pre +import { PickerValueType } from '@mui/x-date-pickers-pro'; ``` + - `RangeFieldSection` + + ```diff + -import { RangeFieldSection } from '@mui/x-date-pickers-pro/models'; + -import { RangeFieldSection } from '@mui/x-date-pickers-pro'; + + +import { FieldRangeSection } from '@mui/x-date-pickers-pro/models'; + +import { FieldRangeSection } from '@mui/x-date-pickers-pro'; + ``` + ## Typing breaking changes -### Remove `TDate` and `TSection` generics +### Do not pass the date object as a generic The `TDate` generic has been removed from all the types, interfaces, and variables of the `@mui/x-date-pickers` and `@mui/x-date-pickers-pro` packages. @@ -312,24 +322,24 @@ If you were passing your date object type as a generic to any element of one of - value={value} onChange={onChange} /> + --type Slot = DateCalendarSlots['calendarHeader']; -+type Slot = DateCalendarSlots['calendarHeader']; +-type FieldComponent = DatePickerSlots['field']; ++type FieldComponent = DatePickerSlots['field']; --type Props = DatePickerToolbarProps; -+type Props = DatePickerToolbarProps; +-function CustomDatePicker(props: DatePickerProps) {} ++function CustomDatePicker(props: DatePickerProps) {} ``` -If you were passing `FieldSection` or `RangeFieldSection` as a generic to any element of one of those packages, you can remove it: +### Do not pass the section type as a generic -:::success -In the `FieldRef` type, `TSection` was the only generic and has been replaced by `TValue` instead of being removed: +The `TSection` generic of the `FieldRef` type has been replaced with the `TValue` generic: ```diff -const fieldRef = React.useRef>(null); +const fieldRef = React.useRef(null); -``` -::: +-const fieldRef = React.useRef>(null); ++const fieldRef = React.useRef>(null); +``` ### Removed types From e7f5500dcb18a086a519523ae1410dc0639ca92e Mon Sep 17 00:00:00 2001 From: flavien Date: Tue, 19 Nov 2024 15:44:33 +0100 Subject: [PATCH 12/14] Fix --- .../hooks/usePicker/usePickerOwnerState.ts | 41 ------------------- 1 file changed, 41 deletions(-) delete mode 100644 packages/x-date-pickers/src/internals/hooks/usePicker/usePickerOwnerState.ts diff --git a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerOwnerState.ts b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerOwnerState.ts deleted file mode 100644 index bb05d474abfc..000000000000 --- a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerOwnerState.ts +++ /dev/null @@ -1,41 +0,0 @@ -import * as React from 'react'; -import { PickerOwnerState } from '../../../models'; -import type { UsePickerProps } from './usePicker.types'; -import { PickerValueManager, UsePickerValueResponse } from './usePickerValue.types'; -import { useUtils } from '../useUtils'; -import { PickerValidValue } from '../../models'; - -interface UsePickerOwnerStateParameters { - props: UsePickerProps; - pickerValueResponse: UsePickerValueResponse; - valueManager: PickerValueManager; -} - -export function usePickerOwnerState( - parameters: UsePickerOwnerStateParameters, -): PickerOwnerState { - const { props, pickerValueResponse, valueManager } = parameters; - - const utils = useUtils(); - - return React.useMemo( - () => ({ - isPickerValueEmpty: valueManager.areValuesEqual( - utils, - pickerValueResponse.viewProps.value, - valueManager.emptyValue, - ), - isPickerOpen: pickerValueResponse.open, - isPickerDisabled: props.disabled ?? false, - isPickerReadOnly: props.readOnly ?? false, - }), - [ - utils, - valueManager, - pickerValueResponse.viewProps.value, - pickerValueResponse.open, - props.disabled, - props.readOnly, - ], - ); -} From e47e9fd3589dc660a677d4cea15ddb1d6b742a31 Mon Sep 17 00:00:00 2001 From: Flavien DELANGLE Date: Thu, 28 Nov 2024 13:43:30 +0100 Subject: [PATCH 13/14] Update docs/data/migration/migration-pickers-v7/migration-pickers-v7.md Co-authored-by: Lukas Tyla Signed-off-by: Flavien DELANGLE --- .../data/migration/migration-pickers-v7/migration-pickers-v7.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md b/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md index b49c70d30211..3faeadb11c2b 100644 --- a/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md +++ b/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md @@ -347,7 +347,7 @@ const theme = createTheme({ ## Renamed variables and types -The following variables and types were renamed to have a coherent `Picker` / `Pickers` prefix: +The following variables and types have been renamed to have a coherent `Picker` / `Pickers` prefix: - `usePickersTranslations` From e5406e7172dcd1fe1c9aaf12b9bcd524b25247f7 Mon Sep 17 00:00:00 2001 From: flavien Date: Thu, 28 Nov 2024 14:05:52 +0100 Subject: [PATCH 14/14] Fix --- .../src/internals/hooks/useClockReferenceDate.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/x-date-pickers/src/internals/hooks/useClockReferenceDate.ts b/packages/x-date-pickers/src/internals/hooks/useClockReferenceDate.ts index 782fc444900a..f7de8e4de11d 100644 --- a/packages/x-date-pickers/src/internals/hooks/useClockReferenceDate.ts +++ b/packages/x-date-pickers/src/internals/hooks/useClockReferenceDate.ts @@ -3,6 +3,7 @@ import { MuiPickersAdapter, PickersTimezone, PickerValidDate } from '../../model import { singleItemValueManager } from '../utils/valueManagers'; import { getTodayDate } from '../utils/date-utils'; import { SECTION_TYPE_GRANULARITY } from '../utils/getDefaultReferenceDate'; +import { PickerValue } from '../models'; export const useClockReferenceDate = ({ value, @@ -11,7 +12,7 @@ export const useClockReferenceDate = ({ props, timezone, }: { - value: PickerValidDate | null; + value: PickerValue; referenceDate: PickerValidDate | undefined; utils: MuiPickersAdapter; props: TProps;