From 5d145b6a2475091dee8aad8061fb30e394293b5c Mon Sep 17 00:00:00 2001 From: flavien Date: Tue, 5 Nov 2024 17:45:38 +0100 Subject: [PATCH 01/35] [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 00e3b3388d576..8dde2eaf5cb43 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 0023e32e477f4..a189e0c1a1fc3 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 725a629ce03f4..1aef1765678f8 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 adfe261465913..645ad6a40d3ee 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 a2dfdebe92559..3e6fe512b0187 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 74b17040c1529..f02e1a7fa2277 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 ce976dd69843a..f8bfb47aad8e0 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 e2815f70d823b..f587a5760d7b7 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 3b9459feb141f..a2f66e7a004e3 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 d6e0d1db8b6fe..e2c6f46043057 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 2584a13756edf..4a519d02f7909 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 765d9e982a81b..542449ecbd806 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 68995de41ed1d..745dc885db66c 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 0cd7c557d3a8b..b9a10aac26234 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 6c63788ef095b..fddda2042f82b 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 3ce1d19e79669..3545b5bac0a5b 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 5ef6c1e18d3eb..a147a9b74c467 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 31c77d7d74203..478f2dcb54553 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 3e3d6fda53c99..fc2170ffbd298 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 e6224b5598518..ab851fd9258b1 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 bb52431010499..56b9c54f33c01 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 95819b45ed99f..502bdd7ec9c09 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 97a25bbfc0363..8a8b7511afb39 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 e38e7f86edc4c..51c6444ec1640 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 6a53307f3dc31..70a5d85c1ab25 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 33b4cd3a0f789..cc766eae9dc58 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 c8273a8875669..6bf85b33aa76a 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 a357693be539b..43c9bf32a1e1b 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 8ddb6b01c5cc3..902607f0b4bd8 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 c0d304a92e666..b4e2ae5943a4d 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 d3901e8bc3a05..2ee3cfe1381ec 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 cc8dee6f79e6c..5f30815d175a7 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 32abb59adbbfe..e6f454169b6b4 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 62a9ffa7411c1..b315e698ae4ba 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 7f2205b1922da..2ce9923228779 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 bc22f8994e8c5..8f537e759ee4a 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 1d06e31bfb380..a18b2ace56c77 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 6dcd610f508ec..9a8a12899f7cc 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 4f50f20ccf6b5..1c4dfb4d2c41d 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 79eb455f23798..22a7358bcd840 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 9228bf05b26d4..f67d4ec628dca 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 64336f642f90f..d8880d48b86d1 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 d9e6f2cbf77d5..2c4e917acab53 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 783e9b93b4674..5d8c4fc3e8957 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 120e10742bd03..25b17636d1fec 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 d2b097c5e7635..2789cb593ce70 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 179b58765222e..958a4ac0a4e33 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 483f9c0016493..872b76d0f00be 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 fbfcdcd2781ec..98339e02b0123 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 812b43b131ea1..af117c1864fa4 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 6948a339c0f09..0711fda37a87d 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 cf48a45f5b7fb..18aa5b0777483 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 8e2fefb00aee5..e5e77709b7e3d 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 2b59bb35d2d46..c634a59038af6 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 fb99ace144ee2..1c0dd01f9f320 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 e4ce5e054eeba..374337525805d 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 7366b804e1847..188921e6e3e93 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 6ca16f44532e0..75d467ebf5b72 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 c8a9df4ce611c..734ddaea4a754 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 b6959d39ed3f4..75fa5a6586826 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 7dee0bad4fed3..1d973ae215e7c 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 0e7a18a2e7aff..7137558365f96 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 4bb144a7c0cb5..e601478754f4e 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 4c4ada8e40941..cb704411e7c79 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 326c9b650e99a..d7564c8bac5ff 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 8273067b4870e..9c2ccc92d091d 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 b098d57cfb0f3..4c44f8e7fab27 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 5236bd2232476..5796142e35ae4 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 43998205dc645..7f12c8fc8a4df 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 653a818b33b66..832d51e38e2bd 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 cb78335558edf..d0b75e135ee70 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 d3f2d3127fd93..575c9fd41bea8 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 ce29eb7a0e8ff..aabb66d51a3b7 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 8fd06df96b685..69964b4838ba0 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 e40fc1df38fe2..25e1a8e0f2ce1 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 d3a4235ce6e1b..25c6683aac2f5 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 63694b969229c..9b5eb0a169018 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 981bd8819f283..f40358155963b 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 9ceb784539b2c..bcb151c30ccbb 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 e0ba6d9c933a9..2650507d38b53 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 3c73332f550ac..4f59a23d19c64 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 2046a04999ba7..d9dc7cb731e1b 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 118d671e70d33..201da7c3a5da8 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 c4559c007dac2..f8dd6907eae95 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 da88995ac3044..ac6817f6a3d95 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 628a548326c42..75ae6ce7b018b 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 931316f32d637..5ead5cf8ec97a 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 6632d68fc3eb4..da7292cfe1201 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 f96bfe35fd10d..2e2dc22065a56 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 5641de679ac96..e06b597e0737e 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 1cc0fa3fd4835..2a19d339bd14d 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 f7a4eec521e66..2c1933eae3e61 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 7696f3168f6a2..4e4bc49b23f1b 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 53e0cd5f8b160..4b016b05104d0 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 a5d29869d304c..74006d15f5a9f 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 efe41c95ec799..010bb3b564b8f 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 aa9ab1b34b537..98a14b34a6e54 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 68e10d651b1a5..2a87c1d474bb4 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 5aecc79b1600c..1f48ae602878a 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 6fee46fcc61af..2eb4995fb5110 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 6fbf229d94f66..13459313a1c3a 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 c5029471e4e88..898bf1253a072 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 7fdd442279fc7..7355e9f4c17b9 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 ebe5fcbf95d18..75fe7c3b90752 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 efcd335df3534..26f59a768b5da 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 129069c9df565..6bd2c88f67691 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 9210c310244de..76d3d080eb785 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 f3f8200c67958..e438da2e0ba46 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 88511e4c0e6a5..0d9c9e8e349f4 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 12060a16d003b..1f509627decd7 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 f97efb2767d14..f3b7d852521cc 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 d0a4b4de2b1df..1dc74741d76b7 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 44effa217b603..02d776903e093 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 743360be7d7d7..25543de73599d 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 2f5cd591cd86a..5ced51e9309a9 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 f5bd789a68629..4e09b75f86741 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 09e7c7d3067b7..ee907b34364ac 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 10df9befa2faf..20719cfa50294 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 0fca874dbcb0d..360023008c702 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 5a67f249f3a46..41445f50a860d 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 3a7c21470f5b8..21dd20cd0e5f7 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 6f7090a606a61..6dd33c79d5d5c 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 c5f7e8da62100..358c87124e489 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 c535422d94557..8c632077e4315 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 3b80ff310dad9..220ddbb47b3c5 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 518a67af8914f..4087992b2ccb6 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 05573e1cc9e22..ce01d42a097d8 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 3bfe549177c0e..7842125cf9baa 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 b306ed6dbd2b9..8a5ecfac9f6f0 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 f18c33dd44b23..7ee9a0ef256d5 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 33e215fd4c7db..d95b01f4b62d0 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 24dfddb480e33..5e813409e27ec 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 fd81624ee3bd0..add9afcc6927b 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 760e096260068..db7bf768a2089 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 10bb9510bcbae..02328b6e28e3b 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 2965274f70516..eaf056bd17e79 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 3f8d4cabb0754..7ef97fbb54352 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 38cd175d522db..fc4c3d5d7308b 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 9368acefdfc7c..99187ca7f5ebc 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 7496b80d2e264..5cdeee4799088 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 48d8a67aa0d27..ca9ad873cd199 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 a5e1f5813a6b3..72d4ce14a9925 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 e5c35a2387efd..845d744cfba51 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 4db881d752516..1d22be9f50629 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 4423b3276797e..c53ef9a11e713 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 6d9c1b3c7bb54..7f0b456d8e818 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 d504885dad82d..b66a0c6a6d6eb 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 43c653c1661a4..458f18a19e770 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 34f8c027a14fb..9107bdf8486d7 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 6b13c8e125e9e..5c726987d3202 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 5648dbcc8d88d..6f9d48856d313 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 ae4b275362398..d5d7dece53444 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 bd68beaba5105..1173681a3da71 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 06c7858b913ed..469fcad2a4753 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 8cdefb9500a28..578a4d6b7e4e6 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 503256858729d..bdbc767c50cf5 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 aa34a0a0c06aa..56c583b6560e4 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 b164341349a33..1b6c822bb444e 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 ca4f3aa7362d0..f7d9740aab225 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 ba3702d7f9ae5..a40308bf3c369 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 d3ab866dbc7c8..01f03fb35ddba 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 07e885a201933..3008ba377ab63 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 d7286b18d86b0..9cf6545bbce72 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 417ad69f94c8f..daa666c6a49e1 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 af41f53ee6231..907332c7fd713 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 35b9339620ac5..dfc22c31bbac5 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 5ec3eba335b5a..601d593fe0b61 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 090d3c50b9623..94b93de11ed3d 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 4a22286b2b107..82533fcaa83f5 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 bd5f40f736b8e..8dd274c1391d9 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 e5a9a8368f291..f8660a447a9e0 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 a779c25c2194a..b661a114096af 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 a42e9c6524164..0c7fbaea8452e 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 47a6e0fa53da0..9c868b0c81d4a 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 cef4af0213711..782fc444900a9 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 9158434b71af9..7895473f2111d 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 3e207b42029aa..335fcb79975d4 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 d12d5263f6b0b..157777b5384fd 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 44be2122260a3..8527e0b2c42f3 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 f3d00d85af1d4..de8b8eb6b894c 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 7e3ff21ee74f3..5c890b8f4b467 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 1282c4c6b5783..221658d8462fd 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 288b0ee44de97..5fdf2c07dfed8 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 917c358b6737e..560b3b2cb4b53 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 27824fd3df829..961ab47f87ec6 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 d9693d260b45f..08fcf80e1c30e 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 7d10cee30cffd..807204616ed34 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 f4084f8b32222..7b33e2fb20325 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 32da73815c618..5014acb9c9999 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 e3bec5e1b8e10..2d3a83e6d02c4 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 f24d9e11a718a..0853a147a7e31 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 d78af26b4c96f..4ff3bac4a343d 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 44c47ddc696d1..c3c841d5f3d95 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 38dc4787f8d19..da4300cdfce6f 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 0b2af3ccd50d3..a72efbd8592ee 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 f16b6f51410dc..a0ef4482a46f2 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 cf72cc620f301..a493cc36553c4 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 11a6e4657b7f3..714b239bbcc3e 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 f31216d2f8c7c..cd3de4f99ba2e 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 0000000000000..ff214a929bb75 --- /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 c271a53229884..1a72e6c59ba2a 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 2d30d90a47045..c08d8c8ecfcf6 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 e4791d572f7c4..7bf8221f28a10 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 7429c2df5c390..371c126d3c76f 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 08c294e0bc234..b99c46a3948a9 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 3e507fe925c14..5c476694b18af 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 9d853e8d2ed8d..c777fbaf0d1f1 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 5dcee050db5ff..735751aec51a4 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 9fb69436bbad1..19c3066219df2 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 b09787bed9f03..598b7af37787f 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 3c53ee7acb38a..cf6995363110f 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 34ef257efba2c..b827b21c888f8 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 2979aa6864e19..87e626d7aa671 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 836e164724c10..b6c3112758fa2 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 94e004c0da2de..335c04ea9ceea 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 766fe523f9d0a..4e2e1aed3ab80 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 27332ec2b7192..511a4935eeb3e 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 c223c52d2331c..6bf1a2eadf205 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 9896bd8da9473..c114367e9a20b 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 5b552398c467b..ce2878952e41e 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/35] 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 360023008c702..a22917a0ecebd 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 bbd4fe22c51a141b25927e207af938ebd41e843f Mon Sep 17 00:00:00 2001 From: flavien Date: Fri, 8 Nov 2024 12:35:52 +0100 Subject: [PATCH 03/35] [pickers] Introduce an improved version of the value manager --- packages/x-date-pickers-pro/src/index.ts | 1 + .../src/validation/validateDateRange.ts | 12 ++- .../src/validation/validateDateTimeRange.ts | 19 +++- .../src/validation/validateTimeRange.ts | 12 ++- .../valueManagers/getDateRangeValueManager.ts | 53 ++++++++++ .../getDateTimeRangeValueManager.ts | 58 +++++++++++ .../valueManagers/getTimeRangeValueManager.ts | 53 ++++++++++ .../src/valueManagers/index.ts | 20 ++++ .../x-date-pickers/src/DatePicker/shared.tsx | 4 +- .../src/DateTimePicker/shared.tsx | 14 +-- .../x-date-pickers/src/TimePicker/shared.tsx | 4 +- packages/x-date-pickers/src/index.ts | 1 + packages/x-date-pickers/src/models/index.ts | 1 + .../x-date-pickers/src/models/valueManager.ts | 66 +++++++++++++ .../src/validation/validateDate.ts | 14 ++- .../src/validation/validateDateTime.ts | 24 ++++- .../src/validation/validateTime.ts | 12 ++- .../valueManagers/getDateTimeValueManager.ts | 98 +++++++++++++++++++ .../src/valueManagers/getDateValueManager.ts | 69 +++++++++++++ .../src/valueManagers/getTimeValueManager.ts | 73 ++++++++++++++ .../x-date-pickers/src/valueManagers/index.ts | 23 +++++ 21 files changed, 603 insertions(+), 28 deletions(-) create mode 100644 packages/x-date-pickers-pro/src/valueManagers/getDateRangeValueManager.ts create mode 100644 packages/x-date-pickers-pro/src/valueManagers/getDateTimeRangeValueManager.ts create mode 100644 packages/x-date-pickers-pro/src/valueManagers/getTimeRangeValueManager.ts create mode 100644 packages/x-date-pickers-pro/src/valueManagers/index.ts create mode 100644 packages/x-date-pickers/src/models/valueManager.ts create mode 100644 packages/x-date-pickers/src/valueManagers/getDateTimeValueManager.ts create mode 100644 packages/x-date-pickers/src/valueManagers/getDateValueManager.ts create mode 100644 packages/x-date-pickers/src/valueManagers/getTimeValueManager.ts create mode 100644 packages/x-date-pickers/src/valueManagers/index.ts diff --git a/packages/x-date-pickers-pro/src/index.ts b/packages/x-date-pickers-pro/src/index.ts index 2ebbc0c725419..12ed4924ecb77 100644 --- a/packages/x-date-pickers-pro/src/index.ts +++ b/packages/x-date-pickers-pro/src/index.ts @@ -29,3 +29,4 @@ export * from './dateRangeViewRenderers'; export * from './models'; export * from './validation'; +export * from './valueManagers'; diff --git a/packages/x-date-pickers-pro/src/validation/validateDateRange.ts b/packages/x-date-pickers-pro/src/validation/validateDateRange.ts index 02d776903e093..d303be7b24a16 100644 --- a/packages/x-date-pickers-pro/src/validation/validateDateRange.ts +++ b/packages/x-date-pickers-pro/src/validation/validateDateRange.ts @@ -1,3 +1,4 @@ +import type { MakeRequired } from '@mui/x-internals/types'; import { validateDate, Validator } from '@mui/x-date-pickers/validation'; import { BaseDateValidationProps } from '@mui/x-date-pickers/internals'; import { isRangeValid } from '../internals/utils/date-utils'; @@ -12,9 +13,16 @@ export interface ExportedValidateDateRangeProps extends DayRangeValidationProps, BaseDateValidationProps {} +/** + * Validation props as received by the validateDateRange method. + */ export interface ValidateDateRangeProps - extends DayRangeValidationProps, - Required {} + extends MakeRequired {} + +/** + * Name of the props that should be defaulted before being passed to the validateDateRange method. + */ +export type ValidateDateRangePropsToDefault = keyof BaseDateValidationProps; export const validateDateRange: Validator< true, diff --git a/packages/x-date-pickers-pro/src/validation/validateDateTimeRange.ts b/packages/x-date-pickers-pro/src/validation/validateDateTimeRange.ts index 25543de73599d..0ac6622b557f8 100644 --- a/packages/x-date-pickers-pro/src/validation/validateDateTimeRange.ts +++ b/packages/x-date-pickers-pro/src/validation/validateDateTimeRange.ts @@ -3,8 +3,16 @@ import { validateDateTime, Validator } from '@mui/x-date-pickers/validation'; import { isRangeValid } from '../internals/utils/date-utils'; import { DateTimeRangeValidationError } from '../models'; import { rangeValueManager } from '../internals/utils/valueManagers'; -import { ExportedValidateDateRangeProps, ValidateDateRangeProps } from './validateDateRange'; -import { ExportedValidateTimeRangeProps, ValidateTimeRangeProps } from './validateTimeRange'; +import { + ExportedValidateDateRangeProps, + ValidateDateRangeProps, + ValidateDateRangePropsToDefault, +} from './validateDateRange'; +import { + ExportedValidateTimeRangeProps, + ValidateTimeRangeProps, + ValidateTimeRangePropsToDefault, +} from './validateTimeRange'; /** * Validation props used by the Date Time Range Picker and Date Time Range Field. @@ -14,10 +22,17 @@ export interface ExportedValidateDateTimeRangeProps ExportedValidateTimeRangeProps, DateTimeValidationProps {} +/** + * Validation props as received by the validateDateTimeRange method. + */ export interface ValidateDateTimeRangeProps extends ValidateDateRangeProps, ValidateTimeRangeProps {} +export type ValidateDateTimeRangePropsToDefault = + | ValidateDateRangePropsToDefault + | ValidateTimeRangePropsToDefault; + export const validateDateTimeRange: Validator< true, DateTimeRangeValidationError, diff --git a/packages/x-date-pickers-pro/src/validation/validateTimeRange.ts b/packages/x-date-pickers-pro/src/validation/validateTimeRange.ts index 5ced51e9309a9..52652a7608d76 100644 --- a/packages/x-date-pickers-pro/src/validation/validateTimeRange.ts +++ b/packages/x-date-pickers-pro/src/validation/validateTimeRange.ts @@ -1,3 +1,4 @@ +import type { MakeRequired } from '@mui/x-internals/types'; import { validateTime, Validator } from '@mui/x-date-pickers/validation'; import { TimeValidationProps, BaseTimeValidationProps } from '@mui/x-date-pickers/internals'; import { isRangeValid } from '../internals/utils/date-utils'; @@ -11,9 +12,16 @@ export interface ExportedValidateTimeRangeProps extends BaseTimeValidationProps, TimeValidationProps {} +/** + * Validation props as received by the validateTimeRange method. + */ export interface ValidateTimeRangeProps - extends Required, - TimeValidationProps {} + extends MakeRequired {} + +/** + * Name of the props that should be defaulted before being passed to the validateTimeRange method. + */ +export type ValidateTimeRangePropsToDefault = keyof BaseTimeValidationProps; export const validateTimeRange: Validator< true, diff --git a/packages/x-date-pickers-pro/src/valueManagers/getDateRangeValueManager.ts b/packages/x-date-pickers-pro/src/valueManagers/getDateRangeValueManager.ts new file mode 100644 index 0000000000000..e3ea645a13499 --- /dev/null +++ b/packages/x-date-pickers-pro/src/valueManagers/getDateRangeValueManager.ts @@ -0,0 +1,53 @@ +import type { MakeOptional } from '@mui/x-internals/types'; +import { PickerValueManagerV8 } from '@mui/x-date-pickers/models'; +import { getDateFieldInternalPropsDefaults } from '@mui/x-date-pickers/valueManagers'; +import { UseFieldInternalProps } from '@mui/x-date-pickers/internals'; +import { DateRangeValidationError, RangeFieldSeparatorProps } from '../models'; +import { getRangeFieldValueManager, rangeValueManager } from '../internals/utils/valueManagers'; +import { validateDateRange } from '../validation'; +import { + ExportedValidateDateRangeProps, + ValidateDateRangeProps, +} from '../validation/validateDateRange'; + +export type DateRangeValueManager = + PickerValueManagerV8< + true, + TEnableAccessibleFieldDOMStructure, + DateRangeValidationError, + DateRangeFieldInternalProps, + DateRangeFieldInternalPropsWithDefaults + >; + +export interface DateRangeFieldInternalProps + extends MakeOptional< + UseFieldInternalProps, + 'format' + >, + RangeFieldSeparatorProps, + ExportedValidateDateRangeProps {} + +export interface DateRangeFieldInternalPropsWithDefaults< + TEnableAccessibleFieldDOMStructure extends boolean, +> extends UseFieldInternalProps, + ValidateDateRangeProps, + RangeFieldSeparatorProps {} + +export const getDateRangeValueManager = < + TEnableAccessibleFieldDOMStructure extends boolean = false, +>({ + enableAccessibleFieldDOMStructure = false as TEnableAccessibleFieldDOMStructure, + dateSeparator, +}: { + enableAccessibleFieldDOMStructure?: TEnableAccessibleFieldDOMStructure; +} & RangeFieldSeparatorProps): DateRangeValueManager => ({ + legacyValueManager: rangeValueManager, + fieldValueManager: getRangeFieldValueManager({ dateSeparator }), + validator: validateDateRange, + valueType: 'date', + applyDefaultsToFieldInternalProps: ({ internalProps, utils, defaultDates }) => ({ + ...internalProps, + ...getDateFieldInternalPropsDefaults({ defaultDates, utils, internalProps }), + }), + enableAccessibleFieldDOMStructure, +}); diff --git a/packages/x-date-pickers-pro/src/valueManagers/getDateTimeRangeValueManager.ts b/packages/x-date-pickers-pro/src/valueManagers/getDateTimeRangeValueManager.ts new file mode 100644 index 0000000000000..cc25f9df18b0e --- /dev/null +++ b/packages/x-date-pickers-pro/src/valueManagers/getDateTimeRangeValueManager.ts @@ -0,0 +1,58 @@ +import type { MakeOptional } from '@mui/x-internals/types'; +import { PickerValueManagerV8 } from '@mui/x-date-pickers/models'; +import { getDateTimeFieldInternalPropsDefaults } from '@mui/x-date-pickers/valueManagers'; +import { AmPmProps, UseFieldInternalProps } from '@mui/x-date-pickers/internals'; +import { DateTimeRangeValidationError, RangeFieldSeparatorProps } from '../models'; +import { getRangeFieldValueManager, rangeValueManager } from '../internals/utils/valueManagers'; +import { validateDateTimeRange } from '../validation'; +import { + ExportedValidateDateTimeRangeProps, + ValidateDateTimeRangeProps, +} from '../validation/validateDateTimeRange'; + +export type DateTimeRangeValueManager = + PickerValueManagerV8< + true, + TEnableAccessibleFieldDOMStructure, + DateTimeRangeValidationError, + DateTimeRangeFieldInternalProps, + DateTimeRangeFieldInternalPropsWithDefaults + >; + +export interface DateTimeRangeFieldInternalProps + extends MakeOptional< + UseFieldInternalProps, + 'format' + >, + ExportedValidateDateTimeRangeProps, + AmPmProps, + RangeFieldSeparatorProps {} + +export interface DateTimeRangeFieldInternalPropsWithDefaults< + TEnableAccessibleFieldDOMStructure extends boolean, +> extends UseFieldInternalProps< + true, + TEnableAccessibleFieldDOMStructure, + DateTimeRangeValidationError + >, + ValidateDateTimeRangeProps, + RangeFieldSeparatorProps {} + +export const getDateTimeRangeValueManager = < + TEnableAccessibleFieldDOMStructure extends boolean = false, +>({ + enableAccessibleFieldDOMStructure = false as TEnableAccessibleFieldDOMStructure, + dateSeparator, +}: { + enableAccessibleFieldDOMStructure?: TEnableAccessibleFieldDOMStructure; +} & RangeFieldSeparatorProps): DateTimeRangeValueManager => ({ + legacyValueManager: rangeValueManager, + fieldValueManager: getRangeFieldValueManager({ dateSeparator }), + validator: validateDateTimeRange, + valueType: 'date-time', + applyDefaultsToFieldInternalProps: ({ internalProps, utils, defaultDates }) => ({ + ...internalProps, + ...getDateTimeFieldInternalPropsDefaults({ internalProps, utils, defaultDates }), + }), + enableAccessibleFieldDOMStructure, +}); diff --git a/packages/x-date-pickers-pro/src/valueManagers/getTimeRangeValueManager.ts b/packages/x-date-pickers-pro/src/valueManagers/getTimeRangeValueManager.ts new file mode 100644 index 0000000000000..ada9df8bab740 --- /dev/null +++ b/packages/x-date-pickers-pro/src/valueManagers/getTimeRangeValueManager.ts @@ -0,0 +1,53 @@ +import type { MakeOptional } from '@mui/x-internals/types'; +import { PickerValueManagerV8 } from '@mui/x-date-pickers/models'; +import { getTimeFieldInternalPropsDefaults } from '@mui/x-date-pickers/valueManagers'; +import { AmPmProps, UseFieldInternalProps } from '@mui/x-date-pickers/internals'; +import { TimeRangeValidationError, RangeFieldSeparatorProps } from '../models'; +import { getRangeFieldValueManager, rangeValueManager } from '../internals/utils/valueManagers'; +import { validateTimeRange } from '../validation'; +import { + ExportedValidateTimeRangeProps, + ValidateTimeRangeProps, +} from '../validation/validateTimeRange'; + +export type TimeRangeValueManager = + PickerValueManagerV8< + true, + TEnableAccessibleFieldDOMStructure, + TimeRangeValidationError, + TimeRangeFieldInternalProps, + TimeRangeFieldInternalPropsWithDefaults + >; + +export interface TimeRangeFieldInternalProps + extends MakeOptional< + UseFieldInternalProps, + 'format' + >, + ExportedValidateTimeRangeProps, + AmPmProps, + RangeFieldSeparatorProps {} + +export interface TimeRangeFieldInternalPropsWithDefaults< + TEnableAccessibleFieldDOMStructure extends boolean, +> extends UseFieldInternalProps, + ValidateTimeRangeProps {} + +export const getTimeRangeValueManager = < + TEnableAccessibleFieldDOMStructure extends boolean = false, +>({ + enableAccessibleFieldDOMStructure = false as TEnableAccessibleFieldDOMStructure, + dateSeparator, +}: { + enableAccessibleFieldDOMStructure?: TEnableAccessibleFieldDOMStructure; +} & RangeFieldSeparatorProps): TimeRangeValueManager => ({ + legacyValueManager: rangeValueManager, + fieldValueManager: getRangeFieldValueManager({ dateSeparator }), + validator: validateTimeRange, + valueType: 'time', + applyDefaultsToFieldInternalProps: ({ internalProps, utils }) => ({ + ...internalProps, + ...getTimeFieldInternalPropsDefaults({ utils, internalProps }), + }), + enableAccessibleFieldDOMStructure, +}); diff --git a/packages/x-date-pickers-pro/src/valueManagers/index.ts b/packages/x-date-pickers-pro/src/valueManagers/index.ts new file mode 100644 index 0000000000000..8b37b9789cae6 --- /dev/null +++ b/packages/x-date-pickers-pro/src/valueManagers/index.ts @@ -0,0 +1,20 @@ +export { getDateRangeValueManager } from './getDateRangeValueManager'; +export type { + DateRangeValueManager, + DateRangeFieldInternalProps, + DateRangeFieldInternalPropsWithDefaults, +} from './getDateRangeValueManager'; + +export { getTimeRangeValueManager } from './getTimeRangeValueManager'; +export type { + TimeRangeValueManager, + TimeRangeFieldInternalProps, + TimeRangeFieldInternalPropsWithDefaults, +} from './getTimeRangeValueManager'; + +export { getDateTimeRangeValueManager } from './getDateTimeRangeValueManager'; +export type { + DateTimeRangeValueManager, + DateTimeRangeFieldInternalProps, + DateTimeRangeFieldInternalPropsWithDefaults, +} from './getDateTimeRangeValueManager'; diff --git a/packages/x-date-pickers/src/DatePicker/shared.tsx b/packages/x-date-pickers/src/DatePicker/shared.tsx index ce01d42a097d8..7e732a9036c29 100644 --- a/packages/x-date-pickers/src/DatePicker/shared.tsx +++ b/packages/x-date-pickers/src/DatePicker/shared.tsx @@ -11,7 +11,6 @@ import { applyDefaultViewProps } from '../internals/utils/views'; 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'; import { LocalizedComponent, PickersInputLocaleText } from '../locales/utils/pickersLocaleTextApi'; import { DatePickerToolbar, @@ -20,6 +19,7 @@ import { } from './DatePickerToolbar'; import { PickerViewRendererLookup } from '../internals/hooks/usePicker/usePickerViews'; import { DateViewRendererProps } from '../dateViewRenderers'; +import { ValidateDatePropsToDefault } from '../validation/validateDate'; export interface BaseDatePickerSlots extends DateCalendarSlots { /** @@ -60,7 +60,7 @@ export interface BaseDatePickerProps } type UseDatePickerDefaultizedProps = LocalizedComponent< - DefaultizedProps + DefaultizedProps >; export function useDatePickerDefaultizedProps( diff --git a/packages/x-date-pickers/src/DateTimePicker/shared.tsx b/packages/x-date-pickers/src/DateTimePicker/shared.tsx index 02328b6e28e3b..5c39c56f7d4e3 100644 --- a/packages/x-date-pickers/src/DateTimePicker/shared.tsx +++ b/packages/x-date-pickers/src/DateTimePicker/shared.tsx @@ -16,11 +16,7 @@ import { DateTimePickerTabsProps, ExportedDateTimePickerTabsProps, } from './DateTimePickerTabs'; -import { - BaseDateValidationProps, - BaseTimeValidationProps, - DateTimeValidationProps, -} from '../internals/models/validation'; +import { DateTimeValidationProps } from '../internals/models/validation'; import { LocalizedComponent, PickersInputLocaleText } from '../locales/utils/pickersLocaleTextApi'; import { DateTimePickerToolbar, @@ -33,6 +29,7 @@ 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 { ValidateDateTimePropsToDefault } from '../validation/validateDateTime'; export interface BaseDateTimePickerSlots extends DateCalendarSlots, TimeClockSlots { /** @@ -106,12 +103,7 @@ type UseDateTimePickerDefaultizedProps< > = LocalizedComponent< DefaultizedProps< Props, - | 'views' - | 'openTo' - | 'orientation' - | 'ampm' - | keyof BaseDateValidationProps - | keyof BaseTimeValidationProps + 'views' | 'openTo' | 'orientation' | 'ampm' | ValidateDateTimePropsToDefault > >; diff --git a/packages/x-date-pickers/src/TimePicker/shared.tsx b/packages/x-date-pickers/src/TimePicker/shared.tsx index f8660a447a9e0..1c7a1c51c2ccb 100644 --- a/packages/x-date-pickers/src/TimePicker/shared.tsx +++ b/packages/x-date-pickers/src/TimePicker/shared.tsx @@ -4,7 +4,6 @@ import { DefaultizedProps } from '@mui/x-internals/types'; import { useUtils } from '../internals/hooks/useUtils'; import { TimeClockSlots, TimeClockSlotProps } from '../TimeClock/TimeClock.types'; import { BasePickerInputProps } from '../internals/models/props/basePickerProps'; -import { BaseTimeValidationProps } from '../internals/models/validation'; import { LocalizedComponent, PickersInputLocaleText } from '../locales/utils/pickersLocaleTextApi'; import { TimePickerToolbarProps, @@ -17,6 +16,7 @@ import { TimeViewRendererProps } from '../timeViewRenderers'; import { applyDefaultViewProps } from '../internals/utils/views'; import { BaseClockProps, ExportedBaseClockProps } from '../internals/models/props/time'; import { TimeViewWithMeridiem } from '../internals/models'; +import { ValidateTimePropsToDefault } from '../validation/validateTime'; export interface BaseTimePickerSlots extends TimeClockSlots { /** @@ -70,7 +70,7 @@ type UseTimePickerDefaultizedProps< TView extends TimeViewWithMeridiem, Props extends BaseTimePickerProps, > = LocalizedComponent< - DefaultizedProps + DefaultizedProps >; export function useTimePickerDefaultizedProps< diff --git a/packages/x-date-pickers/src/index.ts b/packages/x-date-pickers/src/index.ts index f0987002adb1a..f45a03de6c4c0 100644 --- a/packages/x-date-pickers/src/index.ts +++ b/packages/x-date-pickers/src/index.ts @@ -56,3 +56,4 @@ export * from './models'; export * from './icons'; export * from './hooks'; export * from './validation'; +export * from './valueManagers'; diff --git a/packages/x-date-pickers/src/models/index.ts b/packages/x-date-pickers/src/models/index.ts index 06374a0067505..3307409a6b5d0 100644 --- a/packages/x-date-pickers/src/models/index.ts +++ b/packages/x-date-pickers/src/models/index.ts @@ -5,6 +5,7 @@ export * from './views'; export * from './adapters'; export * from './common'; export * from './pickers'; +export * from './valueManager'; // Utils shared across the X packages export type { PropsFromSlot } from '@mui/x-internals/slots'; diff --git a/packages/x-date-pickers/src/models/valueManager.ts b/packages/x-date-pickers/src/models/valueManager.ts new file mode 100644 index 0000000000000..6318efd45a6dd --- /dev/null +++ b/packages/x-date-pickers/src/models/valueManager.ts @@ -0,0 +1,66 @@ +import { InferPickerValue } from '../internals/models/value'; +import type { FieldValueManager, UseFieldInternalProps } from '../internals/hooks/useField'; +import type { PickerValueManager } from '../internals/hooks/usePicker'; +import type { MuiPickersAdapterContextValue } from '../LocalizationProvider/LocalizationProvider'; +import type { Validator } from '../validation'; +import type { InferFieldSection, FieldValueType } from './fields'; + +// TODO: Rename PickerValueManager when the legacyValueManager object will be inlined. +/** + * Object that contains all the necessary methods and properties to control the value of a picker. + * You should never create your own value manager. + * Instead, use the ones provided exported from '@mui/x-date-pickers/valueManagers' and '@mui/x-date-pickers-pro/valueManagers'. + */ +export interface PickerValueManagerV8< + TIsRange extends boolean, + TEnableAccessibleFieldDOMStructure extends boolean, + TError, + TFieldInternalProps extends {}, + TFieldInternalPropsWithDefaults extends UseFieldInternalProps< + TIsRange, + TEnableAccessibleFieldDOMStructure, + TError + >, +> { + // The v7 value manager object. + // This will be inlined inside the main `PickerValueManagerV8` object once every object using it is compatible with the new API. + legacyValueManager: PickerValueManager; + fieldValueManager: FieldValueManager; + validator: Validator; + applyDefaultsToFieldInternalProps: ( + params: MuiPickersAdapterContextValue & { + internalProps: TFieldInternalProps; + }, + ) => TFieldInternalPropsWithDefaults; + valueType: FieldValueType; + enableAccessibleFieldDOMStructure: TEnableAccessibleFieldDOMStructure; +} + +export type PickerAnyValueManagerV8 = PickerValueManagerV8; + +export type PickerAnyAccessibleValueManagerV8 = PickerValueManagerV8; + +/** + * Infer all the usual generic in the picker packages from a `PickerValueManager` interface. + */ +export type PickerManagerProperties = + TManager extends PickerValueManagerV8< + infer TIsRange, + infer TEnableAccessibleFieldDOMStructure, + infer TError, + infer TFieldInternalProps, + infer TFieldInternalPropsWithDefaults + > + ? { + // Generics + isRange: TIsRange; + enableAccessibleFieldDOMStructure: TEnableAccessibleFieldDOMStructure; + error: TError; + fieldInternalProps: TFieldInternalProps; + fieldInternalPropsWithDefaults: TFieldInternalPropsWithDefaults; + + // Derived properties + value: InferPickerValue; + section: InferFieldSection; + } + : never; diff --git a/packages/x-date-pickers/src/validation/validateDate.ts b/packages/x-date-pickers/src/validation/validateDate.ts index cf6995363110f..d8dea92269f88 100644 --- a/packages/x-date-pickers/src/validation/validateDate.ts +++ b/packages/x-date-pickers/src/validation/validateDate.ts @@ -1,3 +1,4 @@ +import type { MakeRequired } from '@mui/x-internals/types'; import { Validator } from './useValidation'; import { BaseDateValidationProps, @@ -18,11 +19,16 @@ export interface ExportedValidateDateProps YearValidationProps, BaseDateValidationProps {} +/** + * Validation props as received by the validateDate method. + */ export interface ValidateDateProps - extends DayValidationProps, - MonthValidationProps, - YearValidationProps, - Required {} + extends MakeRequired {} + +/** + * Name of the props that should be defaulted before being passed to the validateDate method. + */ +export type ValidateDatePropsToDefault = keyof BaseDateValidationProps; export const validateDate: Validator = ({ props, diff --git a/packages/x-date-pickers/src/validation/validateDateTime.ts b/packages/x-date-pickers/src/validation/validateDateTime.ts index b827b21c888f8..a1b0a4d5e239a 100644 --- a/packages/x-date-pickers/src/validation/validateDateTime.ts +++ b/packages/x-date-pickers/src/validation/validateDateTime.ts @@ -1,6 +1,16 @@ import { Validator } from './useValidation'; -import { ExportedValidateDateProps, validateDate, ValidateDateProps } from './validateDate'; -import { ExportedValidateTimeProps, validateTime, ValidateTimeProps } from './validateTime'; +import { + ExportedValidateDateProps, + validateDate, + ValidateDateProps, + ValidateDatePropsToDefault, +} from './validateDate'; +import { + ExportedValidateTimeProps, + validateTime, + ValidateTimeProps, + ValidateTimePropsToDefault, +} from './validateTime'; import { DateTimeValidationError } from '../models'; import { singleItemValueManager } from '../internals/utils/valueManagers'; import { DateTimeValidationProps } from '../internals/models/validation'; @@ -13,8 +23,18 @@ export interface ExportedValidateDateTimeProps ExportedValidateTimeProps, DateTimeValidationProps {} +/** + * Validation props as received by the validateDateTime method. + */ export interface ValidateDateTimeProps extends ValidateDateProps, ValidateTimeProps {} +/** + * Name of the props that should be defaulted before being passed to the validateDateTime method. + */ +export type ValidateDateTimePropsToDefault = + | ValidateDatePropsToDefault + | ValidateTimePropsToDefault; + export const validateDateTime: Validator = ({ adapter, value, diff --git a/packages/x-date-pickers/src/validation/validateTime.ts b/packages/x-date-pickers/src/validation/validateTime.ts index 87e626d7aa671..75ccf6e033cd4 100644 --- a/packages/x-date-pickers/src/validation/validateTime.ts +++ b/packages/x-date-pickers/src/validation/validateTime.ts @@ -1,3 +1,4 @@ +import type { MakeRequired } from '@mui/x-internals/types'; import { createIsAfterIgnoreDatePart } from '../internals/utils/time-utils'; import { Validator } from './useValidation'; import { BaseTimeValidationProps, TimeValidationProps } from '../internals/models/validation'; @@ -9,7 +10,16 @@ import { singleItemValueManager } from '../internals/utils/valueManagers'; */ export interface ExportedValidateTimeProps extends BaseTimeValidationProps, TimeValidationProps {} -export interface ValidateTimeProps extends Required, TimeValidationProps {} +/** + * Validation props as received by the validateTime method. + */ +export interface ValidateTimeProps + extends MakeRequired {} + +/** + * Name of the props that should be defaulted before being passed to the validateTime method. + */ +export type ValidateTimePropsToDefault = keyof BaseTimeValidationProps; export const validateTime: Validator = ({ adapter, diff --git a/packages/x-date-pickers/src/valueManagers/getDateTimeValueManager.ts b/packages/x-date-pickers/src/valueManagers/getDateTimeValueManager.ts new file mode 100644 index 0000000000000..9e5be96fd9caf --- /dev/null +++ b/packages/x-date-pickers/src/valueManagers/getDateTimeValueManager.ts @@ -0,0 +1,98 @@ +import type { MakeOptional } from '@mui/x-internals/types'; +import { applyDefaultDate } from '../internals/utils/date-utils'; +import { + singleItemFieldValueManager, + singleItemValueManager, +} from '../internals/utils/valueManagers'; +import { PickerValueManagerV8, DateTimeValidationError } from '../models'; +import { validateDateTime } from '../validation'; +import { UseFieldInternalProps } from '../internals/hooks/useField'; +import { MuiPickersAdapterContextValue } from '../LocalizationProvider/LocalizationProvider'; +import { AmPmProps } from '../internals/models/props/time'; +import { + ExportedValidateDateTimeProps, + ValidateDateTimeProps, + ValidateDateTimePropsToDefault, +} from '../validation/validateDateTime'; + +export type DateTimeValueManager = + PickerValueManagerV8< + false, + TEnableAccessibleFieldDOMStructure, + DateTimeValidationError, + DateTimeFieldInternalProps, + DateTimeFieldInternalPropsWithDefaults + >; + +export interface DateTimeFieldInternalProps + extends MakeOptional< + UseFieldInternalProps, + 'format' + >, + ExportedValidateDateTimeProps, + AmPmProps {} + +export interface DateTimeFieldInternalPropsWithDefaults< + TEnableAccessibleFieldDOMStructure extends boolean, +> extends UseFieldInternalProps, + ValidateDateTimeProps {} + +export const getDateTimeFieldInternalPropsDefaults = < + TEnableAccessibleFieldDOMStructure extends boolean, +>({ + defaultDates, + utils, + internalProps, +}: Pick & { + internalProps: Pick< + DateTimeFieldInternalProps, + | 'format' + | 'ampm' + | 'minDateTime' + | 'maxDateTime' + | 'minTime' + | 'maxTime' + | ValidateDateTimePropsToDefault + >; +}) => { + const ampm = internalProps.ampm ?? utils.is12HourCycleInCurrentLocale(); + const defaultFormat = ampm + ? utils.formats.keyboardDateTime12h + : utils.formats.keyboardDateTime24h; + + return { + ampm, + disablePast: internalProps.disablePast ?? false, + disableFuture: internalProps.disableFuture ?? false, + format: internalProps.format ?? defaultFormat, + disableIgnoringDatePartForTimeValidation: Boolean( + internalProps.minDateTime || internalProps.maxDateTime, + ), + minDate: applyDefaultDate( + utils, + internalProps.minDateTime ?? internalProps.minDate, + defaultDates.minDate, + ), + maxDate: applyDefaultDate( + utils, + internalProps.maxDateTime ?? internalProps.maxDate, + defaultDates.maxDate, + ), + minTime: internalProps.minDateTime ?? internalProps.minTime, + maxTime: internalProps.maxDateTime ?? internalProps.maxTime, + }; +}; + +export const getDateTimeValueManager = ( + enableAccessibleFieldDOMStructure: TEnableAccessibleFieldDOMStructure = false as TEnableAccessibleFieldDOMStructure, +): DateTimeValueManager => ({ + legacyValueManager: singleItemValueManager, + fieldValueManager: singleItemFieldValueManager, + validator: validateDateTime, + valueType: 'date-time', + applyDefaultsToFieldInternalProps: ({ internalProps, utils, defaultDates }) => ({ + ...internalProps, + ...getDateTimeFieldInternalPropsDefaults({ internalProps, utils, defaultDates }), + }), + enableAccessibleFieldDOMStructure, +}); diff --git a/packages/x-date-pickers/src/valueManagers/getDateValueManager.ts b/packages/x-date-pickers/src/valueManagers/getDateValueManager.ts new file mode 100644 index 0000000000000..943294e186f9f --- /dev/null +++ b/packages/x-date-pickers/src/valueManagers/getDateValueManager.ts @@ -0,0 +1,69 @@ +import type { MakeOptional } from '@mui/x-internals/types'; +import { applyDefaultDate } from '../internals/utils/date-utils'; +import { + singleItemFieldValueManager, + singleItemValueManager, +} from '../internals/utils/valueManagers'; +import { PickerValueManagerV8, DateValidationError } from '../models'; +import { validateDate } from '../validation'; +import { UseFieldInternalProps } from '../internals/hooks/useField'; +import { MuiPickersAdapterContextValue } from '../LocalizationProvider/LocalizationProvider'; +import { + ExportedValidateDateProps, + ValidateDatePropsToDefault, + ValidateDateProps, +} from '../validation/validateDate'; + +export type DateValueManager = + PickerValueManagerV8< + false, + TEnableAccessibleFieldDOMStructure, + DateValidationError, + DateFieldInternalProps, + DateFieldInternalPropsWithDefaults + >; + +export interface DateFieldInternalProps + extends MakeOptional< + UseFieldInternalProps, + 'format' + >, + ExportedValidateDateProps {} + +export interface DateFieldInternalPropsWithDefaults< + TEnableAccessibleFieldDOMStructure extends boolean, +> extends UseFieldInternalProps, + ValidateDateProps {} + +export const getDateFieldInternalPropsDefaults = < + TEnableAccessibleFieldDOMStructure extends boolean, +>({ + defaultDates, + utils, + internalProps, +}: Pick & { + internalProps: Pick< + DateFieldInternalProps, + 'format' | ValidateDatePropsToDefault + >; +}) => ({ + disablePast: internalProps.disablePast ?? false, + disableFuture: internalProps.disableFuture ?? false, + format: internalProps.format ?? utils.formats.keyboardDate, + minDate: applyDefaultDate(utils, internalProps.minDate, defaultDates.minDate), + maxDate: applyDefaultDate(utils, internalProps.maxDate, defaultDates.maxDate), +}); + +export const getDateValueManager = ( + enableAccessibleFieldDOMStructure: TEnableAccessibleFieldDOMStructure = false as TEnableAccessibleFieldDOMStructure, +): DateValueManager => ({ + legacyValueManager: singleItemValueManager, + fieldValueManager: singleItemFieldValueManager, + validator: validateDate, + valueType: 'date', + applyDefaultsToFieldInternalProps: ({ internalProps, utils, defaultDates }) => ({ + ...internalProps, + ...getDateFieldInternalPropsDefaults({ defaultDates, utils, internalProps }), + }), + enableAccessibleFieldDOMStructure, +}); diff --git a/packages/x-date-pickers/src/valueManagers/getTimeValueManager.ts b/packages/x-date-pickers/src/valueManagers/getTimeValueManager.ts new file mode 100644 index 0000000000000..c5edc2fda7a6f --- /dev/null +++ b/packages/x-date-pickers/src/valueManagers/getTimeValueManager.ts @@ -0,0 +1,73 @@ +import type { MakeOptional } from '@mui/x-internals/types'; +import { + singleItemFieldValueManager, + singleItemValueManager, +} from '../internals/utils/valueManagers'; +import { PickerValueManagerV8, TimeValidationError } from '../models'; +import { validateTime } from '../validation'; +import { UseFieldInternalProps } from '../internals/hooks/useField'; +import { MuiPickersAdapterContextValue } from '../LocalizationProvider/LocalizationProvider'; +import { AmPmProps } from '../internals/models/props/time'; +import { + ExportedValidateTimeProps, + ValidateTimeProps, + ValidateTimePropsToDefault, +} from '../validation/validateTime'; + +export type TimeValueManager = + PickerValueManagerV8< + false, + TEnableAccessibleFieldDOMStructure, + TimeValidationError, + TimeFieldInternalProps, + TimeFieldInternalPropsWithDefaults + >; + +export interface TimeFieldInternalProps + extends MakeOptional< + UseFieldInternalProps, + 'format' + >, + ExportedValidateTimeProps, + AmPmProps {} + +export interface TimeFieldInternalPropsWithDefaults< + TEnableAccessibleFieldDOMStructure extends boolean, +> extends UseFieldInternalProps, + ValidateTimeProps {} + +export const getTimeFieldInternalPropsDefaults = < + TEnableAccessibleFieldDOMStructure extends boolean, +>({ + utils, + internalProps, +}: Pick & { + internalProps: Pick< + TimeFieldInternalProps, + 'format' | 'ampm' | ValidateTimePropsToDefault + >; +}) => { + const ampm = internalProps.ampm ?? utils.is12HourCycleInCurrentLocale(); + const defaultFormat = ampm ? utils.formats.fullTime12h : utils.formats.fullTime24h; + + return { + ampm, + disablePast: internalProps.disablePast ?? false, + disableFuture: internalProps.disableFuture ?? false, + format: internalProps.format ?? defaultFormat, + }; +}; + +export const getTimeValueManager = ( + enableAccessibleFieldDOMStructure: TEnableAccessibleFieldDOMStructure = false as TEnableAccessibleFieldDOMStructure, +): TimeValueManager => ({ + legacyValueManager: singleItemValueManager, + fieldValueManager: singleItemFieldValueManager, + validator: validateTime, + valueType: 'time', + applyDefaultsToFieldInternalProps: ({ internalProps, utils }) => ({ + ...internalProps, + ...getTimeFieldInternalPropsDefaults({ utils, internalProps }), + }), + enableAccessibleFieldDOMStructure, +}); diff --git a/packages/x-date-pickers/src/valueManagers/index.ts b/packages/x-date-pickers/src/valueManagers/index.ts new file mode 100644 index 0000000000000..b5586b90a1306 --- /dev/null +++ b/packages/x-date-pickers/src/valueManagers/index.ts @@ -0,0 +1,23 @@ +export { getDateValueManager, getDateFieldInternalPropsDefaults } from './getDateValueManager'; +export type { + DateFieldInternalProps, + DateFieldInternalPropsWithDefaults, + DateValueManager, +} from './getDateValueManager'; + +export { getTimeValueManager, getTimeFieldInternalPropsDefaults } from './getTimeValueManager'; +export type { + TimeFieldInternalProps, + TimeFieldInternalPropsWithDefaults, + TimeValueManager, +} from './getTimeValueManager'; + +export { + getDateTimeValueManager, + getDateTimeFieldInternalPropsDefaults, +} from './getDateTimeValueManager'; +export { + DateTimeFieldInternalProps, + DateTimeFieldInternalPropsWithDefaults, + DateTimeValueManager, +} from './getDateTimeValueManager'; From 7821632fffcb1f582df58704984c9b19ab16b5a5 Mon Sep 17 00:00:00 2001 From: flavien Date: Tue, 12 Nov 2024 08:37:01 +0100 Subject: [PATCH 04/35] Work on value manager usage --- .../src/DateField/useDateField.ts | 7 ++ .../internals/hooks/defaultizedFieldProps.ts | 23 ------ .../src/internals/hooks/useField/useField.ts | 64 ++++++++-------- .../hooks/useField/useField.types.ts | 19 ++--- .../internals/hooks/useField/useFieldState.ts | 74 ++++++++++--------- .../x-date-pickers/src/models/valueManager.ts | 23 +++++- 6 files changed, 103 insertions(+), 107 deletions(-) diff --git a/packages/x-date-pickers/src/DateField/useDateField.ts b/packages/x-date-pickers/src/DateField/useDateField.ts index 358c87124e489..46429703193a9 100644 --- a/packages/x-date-pickers/src/DateField/useDateField.ts +++ b/packages/x-date-pickers/src/DateField/useDateField.ts @@ -1,4 +1,5 @@ 'use client'; +import * as React from 'react'; import { singleItemFieldValueManager, singleItemValueManager, @@ -8,6 +9,7 @@ import { UseDateFieldProps } from './DateField.types'; import { validateDate } from '../validation'; import { useSplitFieldProps } from '../hooks'; import { useDefaultizedDateField } from '../internals/hooks/defaultizedFieldProps'; +import { getDateValueManager } from '../valueManagers'; export const useDateField = < TEnableAccessibleFieldDOMStructure extends boolean, @@ -15,6 +17,11 @@ export const useDateField = < >( inProps: TAllProps, ) => { + const valueManager = React.useMemo( + () => getDateValueManager(inProps.enableAccessibleFieldDOMStructure), + [inProps.enableAccessibleFieldDOMStructure], + ); + const props = useDefaultizedDateField< UseDateFieldProps, TAllProps diff --git a/packages/x-date-pickers/src/internals/hooks/defaultizedFieldProps.ts b/packages/x-date-pickers/src/internals/hooks/defaultizedFieldProps.ts index 9a68e75919d41..4856e809a5297 100644 --- a/packages/x-date-pickers/src/internals/hooks/defaultizedFieldProps.ts +++ b/packages/x-date-pickers/src/internals/hooks/defaultizedFieldProps.ts @@ -8,29 +8,6 @@ import { TimeValidationProps, } from '../models/validation'; -export interface UseDefaultizedDateFieldBaseProps extends BaseDateValidationProps { - format?: string; -} - -export const useDefaultizedDateField = < - TKnownProps extends UseDefaultizedDateFieldBaseProps, - TAllProps extends {}, ->( - props: TKnownProps & TAllProps, -): TAllProps & DefaultizedProps => { - const utils = useUtils(); - const defaultDates = useDefaultDates(); - - return { - ...props, - disablePast: props.disablePast ?? false, - disableFuture: props.disableFuture ?? false, - format: props.format ?? utils.formats.keyboardDate, - minDate: applyDefaultDate(utils, props.minDate, defaultDates.minDate), - maxDate: applyDefaultDate(utils, props.maxDate, defaultDates.maxDate), - }; -}; - export interface UseDefaultizedTimeFieldBaseProps extends BaseTimeValidationProps { format?: string; } 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 157777b5384fd..c480686b62f46 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useField.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useField.ts @@ -3,7 +3,7 @@ import useEnhancedEffect from '@mui/utils/useEnhancedEffect'; import useEventCallback from '@mui/utils/useEventCallback'; import { useRtl } from '@mui/system/RtlProvider'; import { useValidation } from '../../../validation'; -import { useUtils } from '../useUtils'; +import { useLocalizationContext, useUtils } from '../useUtils'; import { UseFieldParams, UseFieldResponse, @@ -19,44 +19,44 @@ import { useFieldState } from './useFieldState'; import { useFieldCharacterEditing } from './useFieldCharacterEditing'; import { useFieldV7TextField } from './useFieldV7TextField'; import { useFieldV6TextField } from './useFieldV6TextField'; +import { PickerAnyValueManagerV8, PickerManagerProperties } from '../../../models'; export const useField = < - TIsRange extends boolean, - TEnableAccessibleFieldDOMStructure extends boolean, + TManager extends PickerAnyValueManagerV8, TForwardedProps extends UseFieldCommonForwardedProps & - UseFieldForwardedProps, - TInternalProps extends UseFieldInternalProps< - TIsRange, - TEnableAccessibleFieldDOMStructure, - any - > & { - minutesStep?: number; - }, + UseFieldForwardedProps['enableAccessibleFieldDOMStructure']>, >( - params: UseFieldParams< - TIsRange, - TEnableAccessibleFieldDOMStructure, - TForwardedProps, - TInternalProps - >, -): UseFieldResponse => { + params: UseFieldParams, +): UseFieldResponse< + PickerManagerProperties['enableAccessibleFieldDOMStructure'], + TForwardedProps +> => { + type Properties = PickerManagerProperties; + type TIsRange = Properties['isRange']; + type TEnableAccessibleFieldDOMStructure = Properties['enableAccessibleFieldDOMStructure']; + const utils = useUtils(); + const localizationContext = useLocalizationContext(); const { internalProps, - internalProps: { - unstableFieldRef, - minutesStep, - enableAccessibleFieldDOMStructure = true, - disabled = false, - readOnly = false, - }, forwardedProps: { onKeyDown, error, clearable, onClear }, - fieldValueManager, valueManager, - validator, } = params; + const internalPropsWithDefaults = React.useMemo( + () => valueManager.applyDefaultsToFieldInternalProps({ ...localizationContext, internalProps }), + [internalProps, localizationContext, valueManager], + ); + + const { + unstableFieldRef, + minutesStep, + enableAccessibleFieldDOMStructure = true, + disabled = false, + readOnly = false, + } = internalPropsWithDefaults; + const isRtl = useRtl(); const stateResponse = useFieldState(params); @@ -85,10 +85,10 @@ export const useField = < const { resetCharacterQuery } = characterEditingResponse; - const areAllSectionsEmpty = valueManager.areValuesEqual( + const areAllSectionsEmpty = valueManager.legacyValueManager.areValuesEqual( utils, state.value, - valueManager.emptyValue, + valueManager.legacyValueManager.emptyValue, ); const useFieldTextField = ( @@ -188,7 +188,7 @@ export const useField = < } const activeSection = state.sections[activeSectionIndex]; - const activeDateManager = fieldValueManager.getActiveDateManager( + const activeDateManager = valueManager.fieldValueManager.getActiveDateManager( utils, state, activeSection, @@ -220,8 +220,8 @@ export const useField = < }); const { hasValidationError } = useValidation({ - props: internalProps, - validator, + props: internalPropsWithDefaults, + validator: valueManager.validator, timezone, value: state.value, onError: internalProps.onError, 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 8527e0b2c42f3..d11157613f564 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 @@ -6,15 +6,13 @@ import { MuiPickersAdapter, TimezoneProps, FieldSectionContentType, - FieldValueType, PickerValidDate, FieldRef, OnErrorProps, - InferError, InferFieldSection, + PickerAnyValueManagerV8, + PickerManagerProperties, } from '../../../models'; -import type { PickerValueManager } from '../usePicker'; -import type { Validator } from '../../../validation'; import type { UseFieldStateResponse } from './useFieldState'; import type { UseFieldCharacterEditingResponse } from './useFieldCharacterEditing'; import { PickersSectionElement, PickersSectionListRef } from '../../../PickersSectionList'; @@ -22,18 +20,13 @@ import { ExportedUseClearableFieldProps } from '../../../hooks/useClearableField import { InferNonNullablePickerValue, InferPickerValue } from '../../models'; export interface UseFieldParams< - TIsRange extends boolean, - TEnableAccessibleFieldDOMStructure extends boolean, + TManager extends PickerAnyValueManagerV8, TForwardedProps extends UseFieldCommonForwardedProps & - UseFieldForwardedProps, - TInternalProps extends UseFieldInternalProps, + UseFieldForwardedProps['enableAccessibleFieldDOMStructure']>, > { forwardedProps: TForwardedProps; - internalProps: TInternalProps; - valueManager: PickerValueManager>; - fieldValueManager: FieldValueManager; - validator: Validator, TInternalProps>; - valueType: FieldValueType; + internalProps: PickerManagerProperties['fieldInternalProps']; + valueManager: TManager; } export interface UseFieldInternalProps< 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 b5f4f410ad9a0..c1b158824a1e9 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useFieldState.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useFieldState.ts @@ -4,13 +4,10 @@ import { useRtl } from '@mui/system/RtlProvider'; import { usePickerTranslations } from '../../../hooks/usePickerTranslations'; import { useUtils, useLocalizationContext } from '../useUtils'; import { - UseFieldInternalProps, - UseFieldParams, UseFieldState, FieldParsedSelectedSections, FieldChangeHandlerContext, FieldSectionsValueBoundaries, - UseFieldForwardedProps, } from './useField.types'; import { mergeDateIntoReferenceDate, @@ -27,6 +24,8 @@ import { PickerValidDate, InferError, InferFieldSection, + PickerAnyValueManagerV8, + PickerManagerProperties, } from '../../../models'; import { useValueWithTimezone } from '../useValueWithTimezone'; import { @@ -69,19 +68,12 @@ export interface UseFieldStateResponse { timezone: PickersTimezone; } -export const useFieldState = < - TIsRange extends boolean, - TEnableAccessibleFieldDOMStructure extends boolean, - TForwardedProps extends UseFieldForwardedProps, - TInternalProps extends UseFieldInternalProps, ->( - params: UseFieldParams< - TIsRange, - TEnableAccessibleFieldDOMStructure, - TForwardedProps, - TInternalProps - >, -): UseFieldStateResponse => { +export const useFieldState = ( + params: UseFieldStateParameters, +): UseFieldStateResponse['isRange']> => { + type Properties = PickerManagerProperties; + type TIsRange = Properties['isRange']; + const utils = useUtils(); const translations = usePickerTranslations(); const adapter = useLocalizationContext(); @@ -89,11 +81,8 @@ export const useFieldState = < const { valueManager, - fieldValueManager, - valueType, - validator, - internalProps, - internalProps: { + internalPropsWithDefaults, + internalPropsWithDefaults: { value: valueProp, defaultValue, referenceDate: referenceDateProp, @@ -112,12 +101,12 @@ export const useFieldState = < timezone, value: valueFromTheOutside, handleValueChange, - } = useValueWithTimezone({ + } = useValueWithTimezone({ timezone: timezoneProp, value: valueProp, defaultValue, onChange, - valueManager, + valueManager: valueManager.legacyValueManager, }); const localizedDigits = React.useMemo(() => getLocalizedDigits(utils), [utils]); @@ -132,7 +121,7 @@ export const useFieldState = < value: InferPickerValue, fallbackSections: InferFieldSection[] | null = null, ) => - fieldValueManager.getSectionsFromValue(utils, value, fallbackSections, (date) => + valueManager.fieldValueManager.getSectionsFromValue(utils, value, fallbackSections, (date) => buildSectionsFromFormat({ utils, localeText: translations, @@ -146,7 +135,7 @@ export const useFieldState = < }), ), [ - fieldValueManager, + valueManager.fieldValueManager, format, translations, localizedDigits, @@ -160,7 +149,7 @@ export const useFieldState = < const [state, setState] = React.useState>(() => { const sections = getSectionsFromValue(valueFromTheOutside); - validateSections(sections, valueType); + validateSections(sections, valueManager.valueType); const stateWithoutReferenceDate: Omit, 'referenceValue'> = { sections, @@ -169,11 +158,11 @@ export const useFieldState = < }; const granularity = getSectionTypeGranularity(sections); - const referenceValue = valueManager.getInitialReferenceValue({ + const referenceValue = valueManager.legacyValueManager.getInitialReferenceValue({ referenceDate: referenceDateProp, value: valueFromTheOutside, utils, - props: internalProps as GetDefaultReferenceDateProps, + props: internalPropsWithDefaults as GetDefaultReferenceDateProps, granularity, timezone, }); @@ -294,9 +283,13 @@ export const useFieldState = < return mergeDateIntoReferenceDate(utils, date, sections, referenceDate, false); }; - const newValue = fieldValueManager.parseValueStr(valueStr, state.referenceValue, parseDateStr); + const newValue = valueManager.fieldValueManager.parseValueStr( + valueStr, + state.referenceValue, + parseDateStr, + ); - const newReferenceValue = fieldValueManager.updateReferenceValue( + const newReferenceValue = valueManager.fieldValueManager.updateReferenceValue( utils, newValue, state.referenceValue, @@ -324,7 +317,11 @@ export const useFieldState = < /** * 2. Try to build a valid date from the new section value */ - const activeDateManager = fieldValueManager.getActiveDateManager(utils, state, activeSection); + const activeDateManager = valueManager.fieldValueManager.getActiveDateManager( + utils, + state, + activeSection, + ); const newSections = setSectionValue(activeSectionIndex!, newSectionValue); const newActiveDateSections = activeDateManager.getSections(newSections); const newActiveDate = getDateFromDateSections(utils, newActiveDateSections, localizedDigits); @@ -375,7 +372,7 @@ export const useFieldState = < React.useEffect(() => { const sections = getSectionsFromValue(state.value); - validateSections(sections, valueType); + validateSections(sections, valueManager.valueType); setState((prevState) => ({ ...prevState, sections, @@ -384,19 +381,19 @@ export const useFieldState = < React.useEffect(() => { let shouldUpdate: boolean; - if (!valueManager.areValuesEqual(utils, state.value, valueFromTheOutside)) { + if (!valueManager.legacyValueManager.areValuesEqual(utils, state.value, valueFromTheOutside)) { shouldUpdate = true; } else { shouldUpdate = - valueManager.getTimezone(utils, state.value) !== - valueManager.getTimezone(utils, valueFromTheOutside); + valueManager.legacyValueManager.getTimezone(utils, state.value) !== + valueManager.legacyValueManager.getTimezone(utils, valueFromTheOutside); } if (shouldUpdate) { setState((prevState) => ({ ...prevState, value: valueFromTheOutside, - referenceValue: fieldValueManager.updateReferenceValue( + referenceValue: valueManager.fieldValueManager.updateReferenceValue( utils, valueFromTheOutside, prevState.referenceValue, @@ -422,3 +419,8 @@ export const useFieldState = < timezone, }; }; + +interface UseFieldStateParameters { + valueManager: TManager; + internalPropsWithDefaults: PickerManagerProperties['fieldInternalPropsWithDefaults']; +} diff --git a/packages/x-date-pickers/src/models/valueManager.ts b/packages/x-date-pickers/src/models/valueManager.ts index 6318efd45a6dd..9265b449e1653 100644 --- a/packages/x-date-pickers/src/models/valueManager.ts +++ b/packages/x-date-pickers/src/models/valueManager.ts @@ -26,16 +26,33 @@ export interface PickerValueManagerV8< // This will be inlined inside the main `PickerValueManagerV8` object once every object using it is compatible with the new API. legacyValueManager: PickerValueManager; fieldValueManager: FieldValueManager; + /** + * Checks if a value is valid and returns an error code otherwise. + */ validator: Validator; + /** + * Applies the default values to the field internal props. + * This usually includes: + * - a default format to display the value in the field + * - some default validation props that are needed to validate the value (e.g: minDate, maxDate) + * @param {ApplyDefaultsToFieldInternalPropsParameters} parameters The parameters to apply the defaults. + * @returns {TFieldInternalPropsWithDefaults} The field internal props with the defaults applied. + */ applyDefaultsToFieldInternalProps: ( - params: MuiPickersAdapterContextValue & { - internalProps: TFieldInternalProps; - }, + parameters: ApplyDefaultsToFieldInternalPropsParameters, ) => TFieldInternalPropsWithDefaults; + /** + * The type of the value (e.g. 'date', 'date-time', 'time'). + */ valueType: FieldValueType; enableAccessibleFieldDOMStructure: TEnableAccessibleFieldDOMStructure; } +interface ApplyDefaultsToFieldInternalPropsParameters + extends MuiPickersAdapterContextValue { + internalProps: TFieldInternalProps; +} + export type PickerAnyValueManagerV8 = PickerValueManagerV8; export type PickerAnyAccessibleValueManagerV8 = PickerValueManagerV8; From eda47878c153b36e3ce93d73a793ab48c1fe6139 Mon Sep 17 00:00:00 2001 From: flavien Date: Wed, 13 Nov 2024 08:56:32 +0100 Subject: [PATCH 05/35] Work --- .../useSingleInputDateRangeField.ts | 45 +++++------ .../useSingleInputDateTimeRangeField.ts | 47 +++++------ .../useSingleInputTimeRangeField.ts | 47 +++++------ .../useMultiInputDateRangeField.ts | 39 ++++++--- .../useMultiInputDateTimeRangeField.ts | 71 +++++++++------- .../useMultiInputTimeRangeField.ts | 71 +++++++++------- .../src/DateField/useDateField.ts | 35 ++++---- .../src/DateTimeField/useDateTimeField.ts | 38 ++++----- .../src/TimeField/useTimeField.ts | 38 ++++----- .../internals/hooks/defaultizedFieldProps.ts | 67 --------------- .../src/internals/hooks/useField/index.ts | 2 +- .../src/internals/hooks/useField/useField.ts | 81 ++++++++++++------- .../hooks/useField/useField.types.ts | 19 +++-- .../internals/hooks/useField/useFieldState.ts | 74 +++++++++-------- .../x-date-pickers/src/internals/index.ts | 6 +- .../x-date-pickers/src/models/valueManager.ts | 3 +- 16 files changed, 331 insertions(+), 352 deletions(-) delete mode 100644 packages/x-date-pickers/src/internals/hooks/defaultizedFieldProps.ts diff --git a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/useSingleInputDateRangeField.ts b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/useSingleInputDateRangeField.ts index 75ae6ce7b018b..e78b7619d0642 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/useSingleInputDateRangeField.ts +++ b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/useSingleInputDateRangeField.ts @@ -1,40 +1,37 @@ 'use client'; import * as React from 'react'; -import { useField, useDefaultizedDateField } from '@mui/x-date-pickers/internals'; +import { useField, useFieldInternalPropsWithDefaults } 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 { getDateRangeValueManager } from '../valueManagers'; export const useSingleInputDateRangeField = < TEnableAccessibleFieldDOMStructure extends boolean, TAllProps extends UseSingleInputDateRangeFieldProps, >( - inProps: TAllProps, + props: TAllProps, ) => { - const props = useDefaultizedDateField< - UseSingleInputDateRangeFieldProps, - TAllProps - >(inProps); + const valueManager = React.useMemo( + () => + getDateRangeValueManager({ + enableAccessibleFieldDOMStructure: props.enableAccessibleFieldDOMStructure, + dateSeparator: props.dateSeparator, + }), + [props.enableAccessibleFieldDOMStructure, props.dateSeparator], + ); const { forwardedProps, internalProps } = useSplitFieldProps(props, 'date'); + const internalPropsWithDefaults = useFieldInternalPropsWithDefaults({ + valueManager, + internalProps, + }); - const fieldValueManager = React.useMemo( - () => getRangeFieldValueManager({ dateSeparator: internalProps.dateSeparator }), - [internalProps.dateSeparator], - ); - - return useField< - true, - TEnableAccessibleFieldDOMStructure, - typeof forwardedProps, - typeof internalProps - >({ + return useField({ forwardedProps, - internalProps, - valueManager: rangeValueManager, - fieldValueManager, - validator: validateDateRange, - valueType: 'date', + internalProps: internalPropsWithDefaults, + valueManager: valueManager.legacyValueManager, + fieldValueManager: valueManager.fieldValueManager, + validator: valueManager.validator, + valueType: valueManager.valueType, }); }; diff --git a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.ts b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.ts index 2e2dc22065a56..a086e78fb6aa3 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.ts +++ b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.ts @@ -1,40 +1,37 @@ 'use client'; import * as React from 'react'; -import { useField, useDefaultizedDateTimeField } from '@mui/x-date-pickers/internals'; +import { useField, useFieldInternalPropsWithDefaults } 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 { getDateTimeRangeValueManager } from '../valueManagers'; export const useSingleInputDateTimeRangeField = < TEnableAccessibleFieldDOMStructure extends boolean, TAllProps extends UseSingleInputDateTimeRangeFieldProps, >( - inProps: TAllProps, + props: TAllProps, ) => { - const props = useDefaultizedDateTimeField< - UseSingleInputDateTimeRangeFieldProps, - TAllProps - >(inProps); - - const { forwardedProps, internalProps } = useSplitFieldProps(props, 'date-time'); - - const fieldValueManager = React.useMemo( - () => getRangeFieldValueManager({ dateSeparator: internalProps.dateSeparator }), - [internalProps.dateSeparator], + const valueManager = React.useMemo( + () => + getDateTimeRangeValueManager({ + enableAccessibleFieldDOMStructure: props.enableAccessibleFieldDOMStructure, + dateSeparator: props.dateSeparator, + }), + [props.enableAccessibleFieldDOMStructure, props.dateSeparator], ); - return useField< - true, - TEnableAccessibleFieldDOMStructure, - typeof forwardedProps, - typeof internalProps - >({ - forwardedProps, + const { forwardedProps, internalProps } = useSplitFieldProps(props, 'date'); + const internalPropsWithDefaults = useFieldInternalPropsWithDefaults({ + valueManager, internalProps, - valueManager: rangeValueManager, - fieldValueManager, - validator: validateDateTimeRange, - valueType: 'date-time', + }); + + return useField({ + forwardedProps, + internalProps: internalPropsWithDefaults, + valueManager: valueManager.legacyValueManager, + fieldValueManager: valueManager.fieldValueManager, + validator: valueManager.validator, + valueType: valueManager.valueType, }); }; diff --git a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/useSingleInputTimeRangeField.ts b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/useSingleInputTimeRangeField.ts index 2c1933eae3e61..a16ea536a9161 100644 --- a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/useSingleInputTimeRangeField.ts +++ b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/useSingleInputTimeRangeField.ts @@ -1,40 +1,37 @@ 'use client'; import * as React from 'react'; -import { useField, useDefaultizedTimeField } from '@mui/x-date-pickers/internals'; +import { useField, useFieldInternalPropsWithDefaults } 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 { getTimeRangeValueManager } from '../valueManagers'; export const useSingleInputTimeRangeField = < TEnableAccessibleFieldDOMStructure extends boolean, TAllProps extends UseSingleInputTimeRangeFieldProps, >( - inProps: TAllProps, + props: TAllProps, ) => { - const props = useDefaultizedTimeField< - UseSingleInputTimeRangeFieldProps, - TAllProps - >(inProps); - - const { forwardedProps, internalProps } = useSplitFieldProps(props, 'time'); - - const fieldValueManager = React.useMemo( - () => getRangeFieldValueManager({ dateSeparator: internalProps.dateSeparator }), - [internalProps.dateSeparator], + const valueManager = React.useMemo( + () => + getTimeRangeValueManager({ + enableAccessibleFieldDOMStructure: props.enableAccessibleFieldDOMStructure, + dateSeparator: props.dateSeparator, + }), + [props.enableAccessibleFieldDOMStructure, props.dateSeparator], ); - return useField< - true, - TEnableAccessibleFieldDOMStructure, - typeof forwardedProps, - typeof internalProps - >({ - forwardedProps, + const { forwardedProps, internalProps } = useSplitFieldProps(props, 'date'); + const internalPropsWithDefaults = useFieldInternalPropsWithDefaults({ + valueManager, internalProps, - valueManager: rangeValueManager, - fieldValueManager, - validator: validateTimeRange, - valueType: 'time', + }); + + return useField({ + forwardedProps, + internalProps: internalPropsWithDefaults, + valueManager: valueManager.legacyValueManager, + fieldValueManager: valueManager.fieldValueManager, + validator: valueManager.validator, + valueType: valueManager.valueType, }); }; 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 1f48ae602878a..b37a65dd39e99 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 @@ -1,3 +1,4 @@ +import * as React from 'react'; import useEventCallback from '@mui/utils/useEventCallback'; import { unstable_useDateField as useDateField } from '@mui/x-date-pickers/DateField'; import { @@ -6,26 +7,24 @@ import { PickerRangeValue, UseFieldResponse, useControlledValueWithTimezone, - useDefaultizedDateField, + useLocalizationContext, } from '@mui/x-date-pickers/internals'; import { useValidation } from '@mui/x-date-pickers/validation'; import { DateValidationError } from '@mui/x-date-pickers/models'; -import { - UseMultiInputDateRangeFieldParams, - UseMultiInputDateRangeFieldProps, -} from '../../../MultiInputDateRangeField/MultiInputDateRangeField.types'; +import { UseMultiInputDateRangeFieldParams } from '../../../MultiInputDateRangeField/MultiInputDateRangeField.types'; import { validateDateRange } from '../../../validation'; import { rangeValueManager } from '../../utils/valueManagers'; import type { UseMultiInputRangeFieldResponse } from './useMultiInputRangeField.types'; import { DateRangeValidationError } from '../../../models'; import { excludeProps } from './shared'; import { useMultiInputFieldSelectedSections } from '../useMultiInputFieldSelectedSections'; +import { getDateRangeValueManager } from '../../../valueManagers'; export const useMultiInputDateRangeField = < TEnableAccessibleFieldDOMStructure extends boolean, TTextFieldSlotProps extends {}, >({ - sharedProps: inSharedProps, + sharedProps, startTextFieldProps, unstableStartFieldRef, endTextFieldProps, @@ -34,10 +33,24 @@ export const useMultiInputDateRangeField = < TEnableAccessibleFieldDOMStructure, TTextFieldSlotProps >): UseMultiInputRangeFieldResponse => { - const sharedProps = useDefaultizedDateField< - UseMultiInputDateRangeFieldProps, - typeof inSharedProps - >(inSharedProps); + const valueManager = React.useMemo( + () => + getDateRangeValueManager({ + enableAccessibleFieldDOMStructure: sharedProps.enableAccessibleFieldDOMStructure, + dateSeparator: sharedProps.dateSeparator, + }), + [sharedProps.enableAccessibleFieldDOMStructure, sharedProps.dateSeparator], + ); + + const localizationContext = useLocalizationContext(); + const sharedPropsWithDefaults = React.useMemo( + () => + valueManager.applyDefaultsToFieldInternalProps({ + ...localizationContext, + internalProps: sharedProps, + }), + [sharedProps, localizationContext, valueManager], + ); const { value: valueProp, @@ -53,7 +66,7 @@ export const useMultiInputDateRangeField = < timezone: timezoneProp, enableAccessibleFieldDOMStructure, autoFocus, - } = sharedProps; + } = sharedPropsWithDefaults; const { value, handleValueChange, timezone } = useControlledValueWithTimezone({ name: 'useMultiInputDateRangeField', @@ -65,11 +78,11 @@ export const useMultiInputDateRangeField = < }); const { validationError, getValidationErrorForNewValue } = useValidation({ - props: sharedProps, + props: sharedPropsWithDefaults, value, timezone, validator: validateDateRange, - onError: sharedProps.onError, + onError: sharedPropsWithDefaults.onError, }); // TODO: Maybe export utility from `useField` instead of copy/pasting the logic 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 2eb4995fb5110..bbfd0b405d917 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 @@ -1,3 +1,4 @@ +import * as React from 'react'; import useEventCallback from '@mui/utils/useEventCallback'; import { unstable_useDateTimeField as useDateTimeField } from '@mui/x-date-pickers/DateTimeField'; import { @@ -6,26 +7,24 @@ import { PickerRangeValue, UseFieldResponse, useControlledValueWithTimezone, - useDefaultizedDateTimeField, + useLocalizationContext, } from '@mui/x-date-pickers/internals'; -import { DateTimeValidationError } from '@mui/x-date-pickers/models'; import { useValidation } from '@mui/x-date-pickers/validation'; -import type { - UseMultiInputDateTimeRangeFieldParams, - UseMultiInputDateTimeRangeFieldProps, -} from '../../../MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.types'; -import { DateTimeRangeValidationError } from '../../../models'; +import { DateTimeValidationError } from '@mui/x-date-pickers/models'; +import { UseMultiInputDateTimeRangeFieldParams } from '../../../MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.types'; import { validateDateTimeRange } from '../../../validation'; import { rangeValueManager } from '../../utils/valueManagers'; import type { UseMultiInputRangeFieldResponse } from './useMultiInputRangeField.types'; +import { DateTimeRangeValidationError } from '../../../models'; import { excludeProps } from './shared'; import { useMultiInputFieldSelectedSections } from '../useMultiInputFieldSelectedSections'; +import { getDateTimeRangeValueManager } from '../../../valueManagers'; export const useMultiInputDateTimeRangeField = < TEnableAccessibleFieldDOMStructure extends boolean, TTextFieldSlotProps extends {}, >({ - sharedProps: inSharedProps, + sharedProps, startTextFieldProps, unstableStartFieldRef, endTextFieldProps, @@ -34,10 +33,24 @@ export const useMultiInputDateTimeRangeField = < TEnableAccessibleFieldDOMStructure, TTextFieldSlotProps >): UseMultiInputRangeFieldResponse => { - const sharedProps = useDefaultizedDateTimeField< - UseMultiInputDateTimeRangeFieldProps, - typeof inSharedProps - >(inSharedProps); + const valueManager = React.useMemo( + () => + getDateTimeRangeValueManager({ + enableAccessibleFieldDOMStructure: sharedProps.enableAccessibleFieldDOMStructure, + dateSeparator: sharedProps.dateSeparator, + }), + [sharedProps.enableAccessibleFieldDOMStructure, sharedProps.dateSeparator], + ); + + const localizationContext = useLocalizationContext(); + const sharedPropsWithDefaults = React.useMemo( + () => + valueManager.applyDefaultsToFieldInternalProps({ + ...localizationContext, + internalProps: sharedProps, + }), + [sharedProps, localizationContext, valueManager], + ); const { value: valueProp, @@ -53,10 +66,10 @@ export const useMultiInputDateTimeRangeField = < timezone: timezoneProp, enableAccessibleFieldDOMStructure, autoFocus, - } = sharedProps; + } = sharedPropsWithDefaults; const { value, handleValueChange, timezone } = useControlledValueWithTimezone({ - name: 'useMultiInputDateRangeField', + name: 'useMultiInputDateTimeRangeField', timezone: timezoneProp, value: valueProp, defaultValue, @@ -65,30 +78,30 @@ export const useMultiInputDateTimeRangeField = < }); const { validationError, getValidationErrorForNewValue } = useValidation({ - props: sharedProps, + props: sharedPropsWithDefaults, value, timezone, validator: validateDateTimeRange, - onError: sharedProps.onError, + onError: sharedPropsWithDefaults.onError, }); // TODO: Maybe export utility from `useField` instead of copy/pasting the logic const buildChangeHandler = (index: 0 | 1): FieldChangeHandler => { - return (newDate, rawContext) => { - const newDateRange: PickerRangeValue = - index === 0 ? [newDate, value[1]] : [value[0], newDate]; + return (newDateTime, rawContext) => { + const newDateTimeRange: PickerRangeValue = + index === 0 ? [newDateTime, value[1]] : [value[0], newDateTime]; const context: FieldChangeHandlerContext = { ...rawContext, - validationError: getValidationErrorForNewValue(newDateRange), + validationError: getValidationErrorForNewValue(newDateTimeRange), }; - handleValueChange(newDateRange, context); + handleValueChange(newDateTimeRange, context); }; }; - const handleStartDateChange = useEventCallback(buildChangeHandler(0)); - const handleEndDateChange = useEventCallback(buildChangeHandler(1)); + const handleStartDateTimeChange = useEventCallback(buildChangeHandler(0)); + const handleEndDateTimeChange = useEventCallback(buildChangeHandler(1)); const selectedSectionsResponse = useMultiInputFieldSelectedSections({ selectedSections, @@ -109,7 +122,7 @@ export const useMultiInputDateTimeRangeField = < timezone, value: valueProp === undefined ? undefined : valueProp[0], defaultValue: defaultValue === undefined ? undefined : defaultValue[0], - onChange: handleStartDateChange, + onChange: handleStartDateTimeChange, enableAccessibleFieldDOMStructure, autoFocus, // Do not add on end field. }; @@ -126,23 +139,23 @@ export const useMultiInputDateTimeRangeField = < timezone, value: valueProp === undefined ? undefined : valueProp[1], defaultValue: defaultValue === undefined ? undefined : defaultValue[1], - onChange: handleEndDateChange, + onChange: handleEndDateTimeChange, enableAccessibleFieldDOMStructure, }; - const startDateResponse = useDateTimeField< + const startDateTimeResponse = useDateTimeField< TEnableAccessibleFieldDOMStructure, typeof startFieldProps >(startFieldProps) as UseFieldResponse; - const endDateResponse = useDateTimeField< + const endDateTimeResponse = useDateTimeField< TEnableAccessibleFieldDOMStructure, typeof endFieldProps >(endFieldProps) as UseFieldResponse; /* TODO: Undo this change when a clearable behavior for multiple input range fields is implemented */ return { - startDate: excludeProps(startDateResponse, ['clearable', 'onClear']), - endDate: excludeProps(endDateResponse, ['clearable', 'onClear']), + startDate: excludeProps(startDateTimeResponse, ['clearable', 'onClear']), + endDate: excludeProps(endDateTimeResponse, ['clearable', 'onClear']), }; }; 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 13459313a1c3a..fe20f6e7a572f 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 @@ -1,3 +1,4 @@ +import * as React from 'react'; import useEventCallback from '@mui/utils/useEventCallback'; import { unstable_useTimeField as useTimeField } from '@mui/x-date-pickers/TimeField'; import { @@ -6,26 +7,24 @@ import { PickerRangeValue, UseFieldResponse, useControlledValueWithTimezone, - useDefaultizedTimeField, + useLocalizationContext, } from '@mui/x-date-pickers/internals'; import { useValidation } from '@mui/x-date-pickers/validation'; import { TimeValidationError } from '@mui/x-date-pickers/models'; +import { UseMultiInputTimeRangeFieldParams } from '../../../MultiInputTimeRangeField/MultiInputTimeRangeField.types'; import { validateTimeRange } from '../../../validation'; -import { TimeRangeValidationError } from '../../../models'; -import type { - UseMultiInputTimeRangeFieldParams, - UseMultiInputTimeRangeFieldProps, -} from '../../../MultiInputTimeRangeField/MultiInputTimeRangeField.types'; import { rangeValueManager } from '../../utils/valueManagers'; import type { UseMultiInputRangeFieldResponse } from './useMultiInputRangeField.types'; +import { TimeRangeValidationError } from '../../../models'; import { excludeProps } from './shared'; import { useMultiInputFieldSelectedSections } from '../useMultiInputFieldSelectedSections'; +import { getTimeRangeValueManager } from '../../../valueManagers'; export const useMultiInputTimeRangeField = < TEnableAccessibleFieldDOMStructure extends boolean, TTextFieldSlotProps extends {}, >({ - sharedProps: inSharedProps, + sharedProps, startTextFieldProps, unstableStartFieldRef, endTextFieldProps, @@ -34,10 +33,24 @@ export const useMultiInputTimeRangeField = < TEnableAccessibleFieldDOMStructure, TTextFieldSlotProps >): UseMultiInputRangeFieldResponse => { - const sharedProps = useDefaultizedTimeField< - UseMultiInputTimeRangeFieldProps, - typeof inSharedProps - >(inSharedProps); + const valueManager = React.useMemo( + () => + getTimeRangeValueManager({ + enableAccessibleFieldDOMStructure: sharedProps.enableAccessibleFieldDOMStructure, + dateSeparator: sharedProps.dateSeparator, + }), + [sharedProps.enableAccessibleFieldDOMStructure, sharedProps.dateSeparator], + ); + + const localizationContext = useLocalizationContext(); + const sharedPropsWithDefaults = React.useMemo( + () => + valueManager.applyDefaultsToFieldInternalProps({ + ...localizationContext, + internalProps: sharedProps, + }), + [sharedProps, localizationContext, valueManager], + ); const { value: valueProp, @@ -53,10 +66,10 @@ export const useMultiInputTimeRangeField = < timezone: timezoneProp, enableAccessibleFieldDOMStructure, autoFocus, - } = sharedProps; + } = sharedPropsWithDefaults; const { value, handleValueChange, timezone } = useControlledValueWithTimezone({ - name: 'useMultiInputDateRangeField', + name: 'useMultiInputTimeRangeField', timezone: timezoneProp, value: valueProp, defaultValue, @@ -65,30 +78,30 @@ export const useMultiInputTimeRangeField = < }); const { validationError, getValidationErrorForNewValue } = useValidation({ - props: sharedProps, - validator: validateTimeRange, + props: sharedPropsWithDefaults, value, timezone, - onError: sharedProps.onError, + validator: validateTimeRange, + onError: sharedPropsWithDefaults.onError, }); // TODO: Maybe export utility from `useField` instead of copy/pasting the logic const buildChangeHandler = (index: 0 | 1): FieldChangeHandler => { - return (newDate, rawContext) => { - const newDateRange: PickerRangeValue = - index === 0 ? [newDate, value[1]] : [value[0], newDate]; + return (newTime, rawContext) => { + const newTimeRange: PickerRangeValue = + index === 0 ? [newTime, value[1]] : [value[0], newTime]; const context: FieldChangeHandlerContext = { ...rawContext, - validationError: getValidationErrorForNewValue(newDateRange), + validationError: getValidationErrorForNewValue(newTimeRange), }; - handleValueChange(newDateRange, context); + handleValueChange(newTimeRange, context); }; }; - const handleStartDateChange = useEventCallback(buildChangeHandler(0)); - const handleEndDateChange = useEventCallback(buildChangeHandler(1)); + const handleStartTimeChange = useEventCallback(buildChangeHandler(0)); + const handleEndTimeChange = useEventCallback(buildChangeHandler(1)); const selectedSectionsResponse = useMultiInputFieldSelectedSections({ selectedSections, @@ -109,7 +122,7 @@ export const useMultiInputTimeRangeField = < timezone, value: valueProp === undefined ? undefined : valueProp[0], defaultValue: defaultValue === undefined ? undefined : defaultValue[0], - onChange: handleStartDateChange, + onChange: handleStartTimeChange, enableAccessibleFieldDOMStructure, autoFocus, // Do not add on end field. }; @@ -126,22 +139,22 @@ export const useMultiInputTimeRangeField = < timezone, value: valueProp === undefined ? undefined : valueProp[1], defaultValue: defaultValue === undefined ? undefined : defaultValue[1], - onChange: handleEndDateChange, + onChange: handleEndTimeChange, enableAccessibleFieldDOMStructure, }; - const startDateResponse = useTimeField< + const startTimeResponse = useTimeField< TEnableAccessibleFieldDOMStructure, typeof startFieldProps >(startFieldProps) as UseFieldResponse; - const endDateResponse = useTimeField( + const endTimeResponse = useTimeField( endFieldProps, ) as UseFieldResponse; /* TODO: Undo this change when a clearable behavior for multiple input range fields is implemented */ return { - startDate: excludeProps(startDateResponse, ['clearable', 'onClear']), - endDate: excludeProps(endDateResponse, ['clearable', 'onClear']), + startDate: excludeProps(startTimeResponse, ['clearable', 'onClear']), + endDate: excludeProps(endTimeResponse, ['clearable', 'onClear']), }; }; diff --git a/packages/x-date-pickers/src/DateField/useDateField.ts b/packages/x-date-pickers/src/DateField/useDateField.ts index 46429703193a9..fb835029bebbd 100644 --- a/packages/x-date-pickers/src/DateField/useDateField.ts +++ b/packages/x-date-pickers/src/DateField/useDateField.ts @@ -1,45 +1,38 @@ 'use client'; import * as React from 'react'; -import { - singleItemFieldValueManager, - singleItemValueManager, -} from '../internals/utils/valueManagers'; -import { useField } from '../internals/hooks/useField'; +import { useField, useFieldInternalPropsWithDefaults } from '../internals/hooks/useField'; import { UseDateFieldProps } from './DateField.types'; -import { validateDate } from '../validation'; import { useSplitFieldProps } from '../hooks'; -import { useDefaultizedDateField } from '../internals/hooks/defaultizedFieldProps'; import { getDateValueManager } from '../valueManagers'; export const useDateField = < TEnableAccessibleFieldDOMStructure extends boolean, TAllProps extends UseDateFieldProps, >( - inProps: TAllProps, + props: TAllProps, ) => { const valueManager = React.useMemo( - () => getDateValueManager(inProps.enableAccessibleFieldDOMStructure), - [inProps.enableAccessibleFieldDOMStructure], + () => getDateValueManager(props.enableAccessibleFieldDOMStructure), + [props.enableAccessibleFieldDOMStructure], ); - const props = useDefaultizedDateField< - UseDateFieldProps, - TAllProps - >(inProps); - const { forwardedProps, internalProps } = useSplitFieldProps(props, 'date'); + const internalPropsWithDefaults = useFieldInternalPropsWithDefaults({ + valueManager, + internalProps, + }); return useField< false, TEnableAccessibleFieldDOMStructure, typeof forwardedProps, - typeof internalProps + typeof internalPropsWithDefaults >({ forwardedProps, - internalProps, - valueManager: singleItemValueManager, - fieldValueManager: singleItemFieldValueManager, - validator: validateDate, - valueType: 'date', + internalProps: internalPropsWithDefaults, + valueManager: valueManager.legacyValueManager, + fieldValueManager: valueManager.fieldValueManager, + validator: valueManager.validator, + valueType: valueManager.valueType, }); }; diff --git a/packages/x-date-pickers/src/DateTimeField/useDateTimeField.ts b/packages/x-date-pickers/src/DateTimeField/useDateTimeField.ts index d95b01f4b62d0..f2240ed37ad5c 100644 --- a/packages/x-date-pickers/src/DateTimeField/useDateTimeField.ts +++ b/packages/x-date-pickers/src/DateTimeField/useDateTimeField.ts @@ -1,38 +1,38 @@ 'use client'; -import { - singleItemFieldValueManager, - singleItemValueManager, -} from '../internals/utils/valueManagers'; -import { useField } from '../internals/hooks/useField'; +import * as React from 'react'; +import { useField, useFieldInternalPropsWithDefaults } from '../internals/hooks/useField'; import { UseDateTimeFieldProps } from './DateTimeField.types'; -import { validateDateTime } from '../validation'; import { useSplitFieldProps } from '../hooks'; -import { useDefaultizedDateTimeField } from '../internals/hooks/defaultizedFieldProps'; +import { getDateTimeValueManager } from '../valueManagers'; export const useDateTimeField = < TEnableAccessibleFieldDOMStructure extends boolean, TAllProps extends UseDateTimeFieldProps, >( - inProps: TAllProps, + props: TAllProps, ) => { - const props = useDefaultizedDateTimeField< - UseDateTimeFieldProps, - TAllProps - >(inProps); + const valueManager = React.useMemo( + () => getDateTimeValueManager(props.enableAccessibleFieldDOMStructure), + [props.enableAccessibleFieldDOMStructure], + ); - const { forwardedProps, internalProps } = useSplitFieldProps(props, 'date-time'); + const { forwardedProps, internalProps } = useSplitFieldProps(props, 'date'); + const internalPropsWithDefaults = useFieldInternalPropsWithDefaults({ + valueManager, + internalProps, + }); return useField< false, TEnableAccessibleFieldDOMStructure, typeof forwardedProps, - typeof internalProps + typeof internalPropsWithDefaults >({ forwardedProps, - internalProps, - valueManager: singleItemValueManager, - fieldValueManager: singleItemFieldValueManager, - validator: validateDateTime, - valueType: 'date-time', + internalProps: internalPropsWithDefaults, + valueManager: valueManager.legacyValueManager, + fieldValueManager: valueManager.fieldValueManager, + validator: valueManager.validator, + valueType: valueManager.valueType, }); }; diff --git a/packages/x-date-pickers/src/TimeField/useTimeField.ts b/packages/x-date-pickers/src/TimeField/useTimeField.ts index 601d593fe0b61..eeffeede435d3 100644 --- a/packages/x-date-pickers/src/TimeField/useTimeField.ts +++ b/packages/x-date-pickers/src/TimeField/useTimeField.ts @@ -1,38 +1,38 @@ 'use client'; -import { - singleItemFieldValueManager, - singleItemValueManager, -} from '../internals/utils/valueManagers'; -import { useField } from '../internals/hooks/useField'; +import * as React from 'react'; +import { useField, useFieldInternalPropsWithDefaults } from '../internals/hooks/useField'; import { UseTimeFieldProps } from './TimeField.types'; -import { validateTime } from '../validation'; import { useSplitFieldProps } from '../hooks'; -import { useDefaultizedTimeField } from '../internals/hooks/defaultizedFieldProps'; +import { getTimeValueManager } from '../valueManagers'; export const useTimeField = < TEnableAccessibleFieldDOMStructure extends boolean, TAllProps extends UseTimeFieldProps, >( - inProps: TAllProps, + props: TAllProps, ) => { - const props = useDefaultizedTimeField< - UseTimeFieldProps, - TAllProps - >(inProps); + const valueManager = React.useMemo( + () => getTimeValueManager(props.enableAccessibleFieldDOMStructure), + [props.enableAccessibleFieldDOMStructure], + ); - const { forwardedProps, internalProps } = useSplitFieldProps(props, 'time'); + const { forwardedProps, internalProps } = useSplitFieldProps(props, 'date'); + const internalPropsWithDefaults = useFieldInternalPropsWithDefaults({ + valueManager, + internalProps, + }); return useField< false, TEnableAccessibleFieldDOMStructure, typeof forwardedProps, - typeof internalProps + typeof internalPropsWithDefaults >({ forwardedProps, - internalProps, - valueManager: singleItemValueManager, - fieldValueManager: singleItemFieldValueManager, - validator: validateTime, - valueType: 'time', + internalProps: internalPropsWithDefaults, + valueManager: valueManager.legacyValueManager, + fieldValueManager: valueManager.fieldValueManager, + validator: valueManager.validator, + valueType: valueManager.valueType, }); }; diff --git a/packages/x-date-pickers/src/internals/hooks/defaultizedFieldProps.ts b/packages/x-date-pickers/src/internals/hooks/defaultizedFieldProps.ts deleted file mode 100644 index 4856e809a5297..0000000000000 --- a/packages/x-date-pickers/src/internals/hooks/defaultizedFieldProps.ts +++ /dev/null @@ -1,67 +0,0 @@ -import { DefaultizedProps } from '@mui/x-internals/types'; -import { applyDefaultDate } from '../utils/date-utils'; -import { useUtils, useDefaultDates } from './useUtils'; -import { - BaseDateValidationProps, - BaseTimeValidationProps, - DateTimeValidationProps, - TimeValidationProps, -} from '../models/validation'; - -export interface UseDefaultizedTimeFieldBaseProps extends BaseTimeValidationProps { - format?: string; -} - -export const useDefaultizedTimeField = < - TKnownProps extends UseDefaultizedTimeFieldBaseProps & { ampm?: boolean }, - TAllProps extends {}, ->( - props: TKnownProps & TAllProps, -): TAllProps & DefaultizedProps => { - const utils = useUtils(); - - const ampm = props.ampm ?? utils.is12HourCycleInCurrentLocale(); - const defaultFormat = ampm ? utils.formats.fullTime12h : utils.formats.fullTime24h; - - return { - ...props, - disablePast: props.disablePast ?? false, - disableFuture: props.disableFuture ?? false, - format: props.format ?? defaultFormat, - }; -}; - -export interface UseDefaultizedDateTimeFieldBaseProps - extends BaseDateValidationProps, - BaseTimeValidationProps { - format?: string; -} - -export const useDefaultizedDateTimeField = < - TKnownProps extends UseDefaultizedDateTimeFieldBaseProps & - DateTimeValidationProps & - TimeValidationProps & { ampm?: boolean }, - TAllProps extends {}, ->( - props: TKnownProps & TAllProps, -): TAllProps & DefaultizedProps => { - const utils = useUtils(); - const defaultDates = useDefaultDates(); - - const ampm = props.ampm ?? utils.is12HourCycleInCurrentLocale(); - const defaultFormat = ampm - ? utils.formats.keyboardDateTime12h - : utils.formats.keyboardDateTime24h; - - return { - ...props, - disablePast: props.disablePast ?? false, - disableFuture: props.disableFuture ?? false, - format: props.format ?? defaultFormat, - disableIgnoringDatePartForTimeValidation: Boolean(props.minDateTime || props.maxDateTime), - minDate: applyDefaultDate(utils, props.minDateTime ?? props.minDate, defaultDates.minDate), - maxDate: applyDefaultDate(utils, props.maxDateTime ?? props.maxDate, defaultDates.maxDate), - minTime: props.minDateTime ?? props.minTime, - maxTime: props.maxDateTime ?? props.maxTime, - }; -}; diff --git a/packages/x-date-pickers/src/internals/hooks/useField/index.ts b/packages/x-date-pickers/src/internals/hooks/useField/index.ts index af21ba83d5b90..1880c3dd20fd9 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/index.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/index.ts @@ -1,4 +1,4 @@ -export { useField } from './useField'; +export { useField, useFieldInternalPropsWithDefaults } from './useField'; export type { FieldValueManager, UseFieldInternalProps, 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 c480686b62f46..c7ac254cb0468 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useField.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useField.ts @@ -21,42 +21,63 @@ import { useFieldV7TextField } from './useFieldV7TextField'; import { useFieldV6TextField } from './useFieldV6TextField'; import { PickerAnyValueManagerV8, PickerManagerProperties } from '../../../models'; +/** + * Applies the default values to the field internal props. + * This will be moved inside `useField` and is only here to allow the migration to be done in smaller steps. + */ +export const useFieldInternalPropsWithDefaults = ({ + valueManager, + internalProps, +}: { + valueManager: TManager; + internalProps: PickerManagerProperties['fieldInternalProps']; +}): PickerManagerProperties['fieldInternalPropsWithDefaults'] => { + const localizationContext = useLocalizationContext(); + return React.useMemo(() => { + return valueManager.applyDefaultsToFieldInternalProps({ + ...localizationContext, + internalProps, + }); + }, [valueManager, internalProps, localizationContext]); +}; + export const useField = < - TManager extends PickerAnyValueManagerV8, + TIsRange extends boolean, + TEnableAccessibleFieldDOMStructure extends boolean, TForwardedProps extends UseFieldCommonForwardedProps & - UseFieldForwardedProps['enableAccessibleFieldDOMStructure']>, + UseFieldForwardedProps, + TInternalProps extends UseFieldInternalProps< + TIsRange, + TEnableAccessibleFieldDOMStructure, + any + > & { + minutesStep?: number; + }, >( - params: UseFieldParams, -): UseFieldResponse< - PickerManagerProperties['enableAccessibleFieldDOMStructure'], - TForwardedProps -> => { - type Properties = PickerManagerProperties; - type TIsRange = Properties['isRange']; - type TEnableAccessibleFieldDOMStructure = Properties['enableAccessibleFieldDOMStructure']; - + params: UseFieldParams< + TIsRange, + TEnableAccessibleFieldDOMStructure, + TForwardedProps, + TInternalProps + >, +): UseFieldResponse => { const utils = useUtils(); - const localizationContext = useLocalizationContext(); const { internalProps, + internalProps: { + unstableFieldRef, + minutesStep, + enableAccessibleFieldDOMStructure = true, + disabled = false, + readOnly = false, + }, forwardedProps: { onKeyDown, error, clearable, onClear }, + fieldValueManager, valueManager, + validator, } = params; - const internalPropsWithDefaults = React.useMemo( - () => valueManager.applyDefaultsToFieldInternalProps({ ...localizationContext, internalProps }), - [internalProps, localizationContext, valueManager], - ); - - const { - unstableFieldRef, - minutesStep, - enableAccessibleFieldDOMStructure = true, - disabled = false, - readOnly = false, - } = internalPropsWithDefaults; - const isRtl = useRtl(); const stateResponse = useFieldState(params); @@ -85,10 +106,10 @@ export const useField = < const { resetCharacterQuery } = characterEditingResponse; - const areAllSectionsEmpty = valueManager.legacyValueManager.areValuesEqual( + const areAllSectionsEmpty = valueManager.areValuesEqual( utils, state.value, - valueManager.legacyValueManager.emptyValue, + valueManager.emptyValue, ); const useFieldTextField = ( @@ -188,7 +209,7 @@ export const useField = < } const activeSection = state.sections[activeSectionIndex]; - const activeDateManager = valueManager.fieldValueManager.getActiveDateManager( + const activeDateManager = fieldValueManager.getActiveDateManager( utils, state, activeSection, @@ -220,8 +241,8 @@ export const useField = < }); const { hasValidationError } = useValidation({ - props: internalPropsWithDefaults, - validator: valueManager.validator, + props: internalProps, + validator, timezone, value: state.value, onError: internalProps.onError, 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 24dfd9fd006d2..8f61b5e3a4653 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 @@ -6,13 +6,15 @@ import { MuiPickersAdapter, TimezoneProps, FieldSectionContentType, + FieldValueType, PickerValidDate, FieldRef, OnErrorProps, + InferError, InferFieldSection, - PickerAnyValueManagerV8, - PickerManagerProperties, } from '../../../models'; +import type { PickerValueManager } from '../usePicker'; +import type { Validator } from '../../../validation'; import type { UseFieldStateResponse } from './useFieldState'; import type { UseFieldCharacterEditingResponse } from './useFieldCharacterEditing'; import { PickersSectionElement, PickersSectionListRef } from '../../../PickersSectionList'; @@ -20,13 +22,18 @@ import { ExportedUseClearableFieldProps } from '../../../hooks/useClearableField import { FormProps, InferNonNullablePickerValue, InferPickerValue } from '../../models'; export interface UseFieldParams< - TManager extends PickerAnyValueManagerV8, + TIsRange extends boolean, + TEnableAccessibleFieldDOMStructure extends boolean, TForwardedProps extends UseFieldCommonForwardedProps & - UseFieldForwardedProps['enableAccessibleFieldDOMStructure']>, + UseFieldForwardedProps, + TInternalProps extends UseFieldInternalProps, > { forwardedProps: TForwardedProps; - internalProps: PickerManagerProperties['fieldInternalProps']; - valueManager: TManager; + internalProps: TInternalProps; + valueManager: PickerValueManager>; + fieldValueManager: FieldValueManager; + validator: Validator, TInternalProps>; + valueType: FieldValueType; } export interface UseFieldInternalProps< 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 c1b158824a1e9..b5f4f410ad9a0 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useFieldState.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useFieldState.ts @@ -4,10 +4,13 @@ import { useRtl } from '@mui/system/RtlProvider'; import { usePickerTranslations } from '../../../hooks/usePickerTranslations'; import { useUtils, useLocalizationContext } from '../useUtils'; import { + UseFieldInternalProps, + UseFieldParams, UseFieldState, FieldParsedSelectedSections, FieldChangeHandlerContext, FieldSectionsValueBoundaries, + UseFieldForwardedProps, } from './useField.types'; import { mergeDateIntoReferenceDate, @@ -24,8 +27,6 @@ import { PickerValidDate, InferError, InferFieldSection, - PickerAnyValueManagerV8, - PickerManagerProperties, } from '../../../models'; import { useValueWithTimezone } from '../useValueWithTimezone'; import { @@ -68,12 +69,19 @@ export interface UseFieldStateResponse { timezone: PickersTimezone; } -export const useFieldState = ( - params: UseFieldStateParameters, -): UseFieldStateResponse['isRange']> => { - type Properties = PickerManagerProperties; - type TIsRange = Properties['isRange']; - +export const useFieldState = < + TIsRange extends boolean, + TEnableAccessibleFieldDOMStructure extends boolean, + TForwardedProps extends UseFieldForwardedProps, + TInternalProps extends UseFieldInternalProps, +>( + params: UseFieldParams< + TIsRange, + TEnableAccessibleFieldDOMStructure, + TForwardedProps, + TInternalProps + >, +): UseFieldStateResponse => { const utils = useUtils(); const translations = usePickerTranslations(); const adapter = useLocalizationContext(); @@ -81,8 +89,11 @@ export const useFieldState = ( const { valueManager, - internalPropsWithDefaults, - internalPropsWithDefaults: { + fieldValueManager, + valueType, + validator, + internalProps, + internalProps: { value: valueProp, defaultValue, referenceDate: referenceDateProp, @@ -101,12 +112,12 @@ export const useFieldState = ( timezone, value: valueFromTheOutside, handleValueChange, - } = useValueWithTimezone({ + } = useValueWithTimezone({ timezone: timezoneProp, value: valueProp, defaultValue, onChange, - valueManager: valueManager.legacyValueManager, + valueManager, }); const localizedDigits = React.useMemo(() => getLocalizedDigits(utils), [utils]); @@ -121,7 +132,7 @@ export const useFieldState = ( value: InferPickerValue, fallbackSections: InferFieldSection[] | null = null, ) => - valueManager.fieldValueManager.getSectionsFromValue(utils, value, fallbackSections, (date) => + fieldValueManager.getSectionsFromValue(utils, value, fallbackSections, (date) => buildSectionsFromFormat({ utils, localeText: translations, @@ -135,7 +146,7 @@ export const useFieldState = ( }), ), [ - valueManager.fieldValueManager, + fieldValueManager, format, translations, localizedDigits, @@ -149,7 +160,7 @@ export const useFieldState = ( const [state, setState] = React.useState>(() => { const sections = getSectionsFromValue(valueFromTheOutside); - validateSections(sections, valueManager.valueType); + validateSections(sections, valueType); const stateWithoutReferenceDate: Omit, 'referenceValue'> = { sections, @@ -158,11 +169,11 @@ export const useFieldState = ( }; const granularity = getSectionTypeGranularity(sections); - const referenceValue = valueManager.legacyValueManager.getInitialReferenceValue({ + const referenceValue = valueManager.getInitialReferenceValue({ referenceDate: referenceDateProp, value: valueFromTheOutside, utils, - props: internalPropsWithDefaults as GetDefaultReferenceDateProps, + props: internalProps as GetDefaultReferenceDateProps, granularity, timezone, }); @@ -283,13 +294,9 @@ export const useFieldState = ( return mergeDateIntoReferenceDate(utils, date, sections, referenceDate, false); }; - const newValue = valueManager.fieldValueManager.parseValueStr( - valueStr, - state.referenceValue, - parseDateStr, - ); + const newValue = fieldValueManager.parseValueStr(valueStr, state.referenceValue, parseDateStr); - const newReferenceValue = valueManager.fieldValueManager.updateReferenceValue( + const newReferenceValue = fieldValueManager.updateReferenceValue( utils, newValue, state.referenceValue, @@ -317,11 +324,7 @@ export const useFieldState = ( /** * 2. Try to build a valid date from the new section value */ - const activeDateManager = valueManager.fieldValueManager.getActiveDateManager( - utils, - state, - activeSection, - ); + const activeDateManager = fieldValueManager.getActiveDateManager(utils, state, activeSection); const newSections = setSectionValue(activeSectionIndex!, newSectionValue); const newActiveDateSections = activeDateManager.getSections(newSections); const newActiveDate = getDateFromDateSections(utils, newActiveDateSections, localizedDigits); @@ -372,7 +375,7 @@ export const useFieldState = ( React.useEffect(() => { const sections = getSectionsFromValue(state.value); - validateSections(sections, valueManager.valueType); + validateSections(sections, valueType); setState((prevState) => ({ ...prevState, sections, @@ -381,19 +384,19 @@ export const useFieldState = ( React.useEffect(() => { let shouldUpdate: boolean; - if (!valueManager.legacyValueManager.areValuesEqual(utils, state.value, valueFromTheOutside)) { + if (!valueManager.areValuesEqual(utils, state.value, valueFromTheOutside)) { shouldUpdate = true; } else { shouldUpdate = - valueManager.legacyValueManager.getTimezone(utils, state.value) !== - valueManager.legacyValueManager.getTimezone(utils, valueFromTheOutside); + valueManager.getTimezone(utils, state.value) !== + valueManager.getTimezone(utils, valueFromTheOutside); } if (shouldUpdate) { setState((prevState) => ({ ...prevState, value: valueFromTheOutside, - referenceValue: valueManager.fieldValueManager.updateReferenceValue( + referenceValue: fieldValueManager.updateReferenceValue( utils, valueFromTheOutside, prevState.referenceValue, @@ -419,8 +422,3 @@ export const useFieldState = ( timezone, }; }; - -interface UseFieldStateParameters { - valueManager: TManager; - internalPropsWithDefaults: PickerManagerProperties['fieldInternalPropsWithDefaults']; -} diff --git a/packages/x-date-pickers/src/internals/index.ts b/packages/x-date-pickers/src/internals/index.ts index 8ba0224e949f8..4d71c50564732 100644 --- a/packages/x-date-pickers/src/internals/index.ts +++ b/packages/x-date-pickers/src/internals/index.ts @@ -53,6 +53,7 @@ export { useControlledValueWithTimezone } from './hooks/useValueWithTimezone'; export type { DesktopOnlyPickerProps } from './hooks/useDesktopPicker'; export { useField, + useFieldInternalPropsWithDefaults, createDateStrForV7HiddenInputFromSections, createDateStrForV6InputFromSections, } from './hooks/useField'; @@ -146,11 +147,6 @@ export { onSpaceOrEnter, DEFAULT_DESKTOP_MODE_MEDIA_QUERY, } from './utils/utils'; -export { - useDefaultizedDateField, - useDefaultizedTimeField, - useDefaultizedDateTimeField, -} from './hooks/defaultizedFieldProps'; export { useDefaultReduceAnimations } from './hooks/useDefaultReduceAnimations'; export { applyDefaultViewProps } from './utils/views'; diff --git a/packages/x-date-pickers/src/models/valueManager.ts b/packages/x-date-pickers/src/models/valueManager.ts index 9265b449e1653..0d8059fd12b52 100644 --- a/packages/x-date-pickers/src/models/valueManager.ts +++ b/packages/x-date-pickers/src/models/valueManager.ts @@ -1,4 +1,4 @@ -import { InferPickerValue } from '../internals/models/value'; +import { InferNonNullablePickerValue, InferPickerValue } from '../internals/models/value'; import type { FieldValueManager, UseFieldInternalProps } from '../internals/hooks/useField'; import type { PickerValueManager } from '../internals/hooks/usePicker'; import type { MuiPickersAdapterContextValue } from '../LocalizationProvider/LocalizationProvider'; @@ -78,6 +78,7 @@ export type PickerManagerProperties = // Derived properties value: InferPickerValue; + nonNullableValue: InferNonNullablePickerValue; section: InferFieldSection; } : never; From f7ee40928dae65beee81a7832f334233b175aa2d Mon Sep 17 00:00:00 2001 From: flavien Date: Wed, 13 Nov 2024 09:30:34 +0100 Subject: [PATCH 06/35] Fix --- .../x-date-pickers/src/valueManagers/index.ts | 2 +- scripts/x-date-pickers-pro.exports.json | 31 +++++++++++++++++++ scripts/x-date-pickers.exports.json | 19 ++++++++++++ 3 files changed, 51 insertions(+), 1 deletion(-) diff --git a/packages/x-date-pickers/src/valueManagers/index.ts b/packages/x-date-pickers/src/valueManagers/index.ts index b5586b90a1306..dcc0d4319a4db 100644 --- a/packages/x-date-pickers/src/valueManagers/index.ts +++ b/packages/x-date-pickers/src/valueManagers/index.ts @@ -16,7 +16,7 @@ export { getDateTimeValueManager, getDateTimeFieldInternalPropsDefaults, } from './getDateTimeValueManager'; -export { +export type { DateTimeFieldInternalProps, DateTimeFieldInternalPropsWithDefaults, DateTimeValueManager, diff --git a/scripts/x-date-pickers-pro.exports.json b/scripts/x-date-pickers-pro.exports.json index 9e1a49f3f6d76..913f9b5b196fc 100644 --- a/scripts/x-date-pickers-pro.exports.json +++ b/scripts/x-date-pickers-pro.exports.json @@ -34,6 +34,8 @@ { "name": "DateCalendarSlotProps", "kind": "Interface" }, { "name": "DateCalendarSlots", "kind": "Interface" }, { "name": "DateField", "kind": "Variable" }, + { "name": "DateFieldInternalProps", "kind": "Interface" }, + { "name": "DateFieldInternalPropsWithDefaults", "kind": "Interface" }, { "name": "DateFieldProps", "kind": "TypeAlias" }, { "name": "DateOrTimeView", "kind": "TypeAlias" }, { "name": "DatePicker", "kind": "Variable" }, @@ -54,6 +56,8 @@ { "name": "DateRangeCalendarProps", "kind": "Interface" }, { "name": "DateRangeCalendarSlotProps", "kind": "Interface" }, { "name": "DateRangeCalendarSlots", "kind": "Interface" }, + { "name": "DateRangeFieldInternalProps", "kind": "Interface" }, + { "name": "DateRangeFieldInternalPropsWithDefaults", "kind": "Interface" }, { "name": "DateRangeIcon", "kind": "Variable" }, { "name": "DateRangePicker", "kind": "Variable" }, { "name": "DateRangePickerDay", "kind": "Variable" }, @@ -71,8 +75,11 @@ { "name": "DateRangePickerToolbarClassKey", "kind": "TypeAlias" }, { "name": "DateRangePickerToolbarProps", "kind": "Interface" }, { "name": "DateRangeValidationError", "kind": "TypeAlias" }, + { "name": "DateRangeValueManager", "kind": "TypeAlias" }, { "name": "DateRangeViewRendererProps", "kind": "Interface" }, { "name": "DateTimeField", "kind": "Variable" }, + { "name": "DateTimeFieldInternalProps", "kind": "Interface" }, + { "name": "DateTimeFieldInternalPropsWithDefaults", "kind": "Interface" }, { "name": "DateTimeFieldProps", "kind": "TypeAlias" }, { "name": "DateTimePicker", "kind": "Variable" }, { "name": "DateTimePickerFieldProps", "kind": "TypeAlias" }, @@ -89,6 +96,8 @@ { "name": "DateTimePickerToolbarClasses", "kind": "Interface" }, { "name": "DateTimePickerToolbarClassKey", "kind": "TypeAlias" }, { "name": "DateTimePickerToolbarProps", "kind": "Interface" }, + { "name": "DateTimeRangeFieldInternalProps", "kind": "Interface" }, + { "name": "DateTimeRangeFieldInternalPropsWithDefaults", "kind": "Interface" }, { "name": "DateTimeRangePicker", "kind": "Variable" }, { "name": "DateTimeRangePickerFieldProps", "kind": "TypeAlias" }, { "name": "DateTimeRangePickerProps", "kind": "Interface" }, @@ -104,8 +113,11 @@ { "name": "DateTimeRangePickerToolbarClassKey", "kind": "TypeAlias" }, { "name": "DateTimeRangePickerToolbarProps", "kind": "Interface" }, { "name": "DateTimeRangeValidationError", "kind": "TypeAlias" }, + { "name": "DateTimeRangeValueManager", "kind": "TypeAlias" }, { "name": "DateTimeValidationError", "kind": "TypeAlias" }, + { "name": "DateTimeValueManager", "kind": "TypeAlias" }, { "name": "DateValidationError", "kind": "TypeAlias" }, + { "name": "DateValueManager", "kind": "TypeAlias" }, { "name": "DateView", "kind": "TypeAlias" }, { "name": "DateViewRendererProps", "kind": "Interface" }, { "name": "dayCalendarClasses", "kind": "Variable" }, @@ -169,11 +181,17 @@ { "name": "FieldType", "kind": "TypeAlias" }, { "name": "FieldValueType", "kind": "TypeAlias" }, { "name": "getDateCalendarUtilityClass", "kind": "Variable" }, + { "name": "getDateFieldInternalPropsDefaults", "kind": "Variable" }, { "name": "getDateRangeCalendarUtilityClass", "kind": "Variable" }, { "name": "getDateRangePickerDayUtilityClass", "kind": "Function" }, { "name": "getDateRangePickerToolbarUtilityClass", "kind": "Function" }, + { "name": "getDateRangeValueManager", "kind": "Variable" }, + { "name": "getDateTimeFieldInternalPropsDefaults", "kind": "Variable" }, { "name": "getDateTimeRangePickerTabsUtilityClass", "kind": "Function" }, { "name": "getDateTimeRangePickerToolbarUtilityClass", "kind": "Function" }, + { "name": "getDateTimeRangeValueManager", "kind": "Variable" }, + { "name": "getDateTimeValueManager", "kind": "Variable" }, + { "name": "getDateValueManager", "kind": "Variable" }, { "name": "getDayCalendarSkeletonUtilityClass", "kind": "Variable" }, { "name": "getDigitalClockUtilityClass", "kind": "Function" }, { "name": "getMonthCalendarUtilityClass", "kind": "Function" }, @@ -189,6 +207,9 @@ { "name": "getPickersSectionListUtilityClass", "kind": "Function" }, { "name": "getPickersTextFieldUtilityClass", "kind": "Function" }, { "name": "getTimeClockUtilityClass", "kind": "Function" }, + { "name": "getTimeFieldInternalPropsDefaults", "kind": "Variable" }, + { "name": "getTimeRangeValueManager", "kind": "Variable" }, + { "name": "getTimeValueManager", "kind": "Variable" }, { "name": "getYearCalendarUtilityClass", "kind": "Function" }, { "name": "InferError", "kind": "TypeAlias" }, { "name": "InferFieldSection", "kind": "TypeAlias" }, @@ -250,9 +271,12 @@ { "name": "MultiSectionDigitalClockSlots", "kind": "Interface" }, { "name": "NonEmptyDateRange", "kind": "TypeAlias" }, { "name": "OnErrorProps", "kind": "Interface" }, + { "name": "PickerAnyAccessibleValueManagerV8", "kind": "TypeAlias" }, + { "name": "PickerAnyValueManagerV8", "kind": "TypeAlias" }, { "name": "PickerChangeHandlerContext", "kind": "Interface" }, { "name": "PickerDayOwnerState", "kind": "Interface" }, { "name": "PickerLayoutOwnerState", "kind": "Interface" }, + { "name": "PickerManagerProperties", "kind": "TypeAlias" }, { "name": "PickerOwnerState", "kind": "Interface" }, { "name": "PickersActionBar", "kind": "Function" }, { "name": "PickersActionBarAction", "kind": "TypeAlias" }, @@ -339,6 +363,7 @@ { "name": "PickersYearClassKey", "kind": "TypeAlias" }, { "name": "PickerValidDate", "kind": "TypeAlias" }, { "name": "PickerValidDateLookup", "kind": "Interface" }, + { "name": "PickerValueManagerV8", "kind": "Interface" }, { "name": "PropsFromSlot", "kind": "TypeAlias" }, { "name": "RangeFieldSeparatorProps", "kind": "Interface" }, { "name": "RangePosition", "kind": "TypeAlias" }, @@ -377,6 +402,8 @@ { "name": "TimeClockSlotProps", "kind": "Interface" }, { "name": "TimeClockSlots", "kind": "Interface" }, { "name": "TimeField", "kind": "Variable" }, + { "name": "TimeFieldInternalProps", "kind": "Interface" }, + { "name": "TimeFieldInternalPropsWithDefaults", "kind": "Interface" }, { "name": "TimeFieldProps", "kind": "TypeAlias" }, { "name": "TimeIcon", "kind": "Variable" }, { "name": "TimePicker", "kind": "Variable" }, @@ -389,9 +416,13 @@ { "name": "TimePickerToolbarClasses", "kind": "Interface" }, { "name": "TimePickerToolbarClassKey", "kind": "TypeAlias" }, { "name": "TimePickerToolbarProps", "kind": "Interface" }, + { "name": "TimeRangeFieldInternalProps", "kind": "Interface" }, + { "name": "TimeRangeFieldInternalPropsWithDefaults", "kind": "Interface" }, { "name": "TimeRangeValidationError", "kind": "TypeAlias" }, + { "name": "TimeRangeValueManager", "kind": "TypeAlias" }, { "name": "TimeStepOptions", "kind": "Interface" }, { "name": "TimeValidationError", "kind": "TypeAlias" }, + { "name": "TimeValueManager", "kind": "TypeAlias" }, { "name": "TimeView", "kind": "TypeAlias" }, { "name": "TimeViewRendererProps", "kind": "TypeAlias" }, { "name": "TimezoneProps", "kind": "Interface" }, diff --git a/scripts/x-date-pickers.exports.json b/scripts/x-date-pickers.exports.json index f158651d369cb..f184d646046fc 100644 --- a/scripts/x-date-pickers.exports.json +++ b/scripts/x-date-pickers.exports.json @@ -31,6 +31,8 @@ { "name": "DateCalendarSlotProps", "kind": "Interface" }, { "name": "DateCalendarSlots", "kind": "Interface" }, { "name": "DateField", "kind": "Variable" }, + { "name": "DateFieldInternalProps", "kind": "Interface" }, + { "name": "DateFieldInternalPropsWithDefaults", "kind": "Interface" }, { "name": "DateFieldProps", "kind": "TypeAlias" }, { "name": "DateOrTimeView", "kind": "TypeAlias" }, { "name": "DatePicker", "kind": "Variable" }, @@ -45,6 +47,8 @@ { "name": "DatePickerToolbarProps", "kind": "Interface" }, { "name": "DateRangeIcon", "kind": "Variable" }, { "name": "DateTimeField", "kind": "Variable" }, + { "name": "DateTimeFieldInternalProps", "kind": "Interface" }, + { "name": "DateTimeFieldInternalPropsWithDefaults", "kind": "Interface" }, { "name": "DateTimeFieldProps", "kind": "TypeAlias" }, { "name": "DateTimePicker", "kind": "Variable" }, { "name": "DateTimePickerFieldProps", "kind": "TypeAlias" }, @@ -62,7 +66,9 @@ { "name": "DateTimePickerToolbarClassKey", "kind": "TypeAlias" }, { "name": "DateTimePickerToolbarProps", "kind": "Interface" }, { "name": "DateTimeValidationError", "kind": "TypeAlias" }, + { "name": "DateTimeValueManager", "kind": "TypeAlias" }, { "name": "DateValidationError", "kind": "TypeAlias" }, + { "name": "DateValueManager", "kind": "TypeAlias" }, { "name": "DateView", "kind": "TypeAlias" }, { "name": "DateViewRendererProps", "kind": "Interface" }, { "name": "dayCalendarClasses", "kind": "Variable" }, @@ -114,6 +120,10 @@ { "name": "FieldSelectedSections", "kind": "TypeAlias" }, { "name": "FieldValueType", "kind": "TypeAlias" }, { "name": "getDateCalendarUtilityClass", "kind": "Variable" }, + { "name": "getDateFieldInternalPropsDefaults", "kind": "Variable" }, + { "name": "getDateTimeFieldInternalPropsDefaults", "kind": "Variable" }, + { "name": "getDateTimeValueManager", "kind": "Variable" }, + { "name": "getDateValueManager", "kind": "Variable" }, { "name": "getDayCalendarSkeletonUtilityClass", "kind": "Variable" }, { "name": "getDigitalClockUtilityClass", "kind": "Function" }, { "name": "getMonthCalendarUtilityClass", "kind": "Function" }, @@ -126,6 +136,8 @@ { "name": "getPickersSectionListUtilityClass", "kind": "Function" }, { "name": "getPickersTextFieldUtilityClass", "kind": "Function" }, { "name": "getTimeClockUtilityClass", "kind": "Function" }, + { "name": "getTimeFieldInternalPropsDefaults", "kind": "Variable" }, + { "name": "getTimeValueManager", "kind": "Variable" }, { "name": "getYearCalendarUtilityClass", "kind": "Function" }, { "name": "InferError", "kind": "TypeAlias" }, { "name": "InferFieldSection", "kind": "TypeAlias" }, @@ -164,9 +176,12 @@ { "name": "MultiSectionDigitalClockSlotProps", "kind": "Interface" }, { "name": "MultiSectionDigitalClockSlots", "kind": "Interface" }, { "name": "OnErrorProps", "kind": "Interface" }, + { "name": "PickerAnyAccessibleValueManagerV8", "kind": "TypeAlias" }, + { "name": "PickerAnyValueManagerV8", "kind": "TypeAlias" }, { "name": "PickerChangeHandlerContext", "kind": "Interface" }, { "name": "PickerDayOwnerState", "kind": "Interface" }, { "name": "PickerLayoutOwnerState", "kind": "Interface" }, + { "name": "PickerManagerProperties", "kind": "TypeAlias" }, { "name": "PickerOwnerState", "kind": "Interface" }, { "name": "PickersActionBar", "kind": "Function" }, { "name": "PickersActionBarAction", "kind": "TypeAlias" }, @@ -251,6 +266,7 @@ { "name": "PickersYearClassKey", "kind": "TypeAlias" }, { "name": "PickerValidDate", "kind": "TypeAlias" }, { "name": "PickerValidDateLookup", "kind": "Interface" }, + { "name": "PickerValueManagerV8", "kind": "Interface" }, { "name": "PropsFromSlot", "kind": "TypeAlias" }, { "name": "renderDateViewCalendar", "kind": "Variable" }, { "name": "renderDigitalClockTimeView", "kind": "Variable" }, @@ -276,6 +292,8 @@ { "name": "TimeClockSlotProps", "kind": "Interface" }, { "name": "TimeClockSlots", "kind": "Interface" }, { "name": "TimeField", "kind": "Variable" }, + { "name": "TimeFieldInternalProps", "kind": "Interface" }, + { "name": "TimeFieldInternalPropsWithDefaults", "kind": "Interface" }, { "name": "TimeFieldProps", "kind": "TypeAlias" }, { "name": "TimeIcon", "kind": "Variable" }, { "name": "TimePicker", "kind": "Variable" }, @@ -290,6 +308,7 @@ { "name": "TimePickerToolbarProps", "kind": "Interface" }, { "name": "TimeStepOptions", "kind": "Interface" }, { "name": "TimeValidationError", "kind": "TypeAlias" }, + { "name": "TimeValueManager", "kind": "TypeAlias" }, { "name": "TimeView", "kind": "TypeAlias" }, { "name": "TimeViewRendererProps", "kind": "TypeAlias" }, { "name": "TimezoneProps", "kind": "Interface" }, From cae8762753d9dffc48c687ed3a3982faf347c6c7 Mon Sep 17 00:00:00 2001 From: flavien Date: Wed, 13 Nov 2024 09:50:57 +0100 Subject: [PATCH 07/35] Work --- .../src/valueManagers/getDateRangeValueManager.ts | 6 ++++-- .../src/valueManagers/getDateTimeRangeValueManager.ts | 7 +++++-- .../src/valueManagers/getTimeRangeValueManager.ts | 7 +++++-- packages/x-date-pickers/src/internals/index.ts | 4 ++++ packages/x-date-pickers/src/valueManagers/index.ts | 9 +++------ scripts/x-date-pickers-pro.exports.json | 3 --- scripts/x-date-pickers.exports.json | 3 --- 7 files changed, 21 insertions(+), 18 deletions(-) diff --git a/packages/x-date-pickers-pro/src/valueManagers/getDateRangeValueManager.ts b/packages/x-date-pickers-pro/src/valueManagers/getDateRangeValueManager.ts index e3ea645a13499..bb364dd13000a 100644 --- a/packages/x-date-pickers-pro/src/valueManagers/getDateRangeValueManager.ts +++ b/packages/x-date-pickers-pro/src/valueManagers/getDateRangeValueManager.ts @@ -1,7 +1,9 @@ import type { MakeOptional } from '@mui/x-internals/types'; import { PickerValueManagerV8 } from '@mui/x-date-pickers/models'; -import { getDateFieldInternalPropsDefaults } from '@mui/x-date-pickers/valueManagers'; -import { UseFieldInternalProps } from '@mui/x-date-pickers/internals'; +import { + UseFieldInternalProps, + getDateFieldInternalPropsDefaults, +} from '@mui/x-date-pickers/internals'; import { DateRangeValidationError, RangeFieldSeparatorProps } from '../models'; import { getRangeFieldValueManager, rangeValueManager } from '../internals/utils/valueManagers'; import { validateDateRange } from '../validation'; diff --git a/packages/x-date-pickers-pro/src/valueManagers/getDateTimeRangeValueManager.ts b/packages/x-date-pickers-pro/src/valueManagers/getDateTimeRangeValueManager.ts index cc25f9df18b0e..8befdded8825e 100644 --- a/packages/x-date-pickers-pro/src/valueManagers/getDateTimeRangeValueManager.ts +++ b/packages/x-date-pickers-pro/src/valueManagers/getDateTimeRangeValueManager.ts @@ -1,7 +1,10 @@ import type { MakeOptional } from '@mui/x-internals/types'; import { PickerValueManagerV8 } from '@mui/x-date-pickers/models'; -import { getDateTimeFieldInternalPropsDefaults } from '@mui/x-date-pickers/valueManagers'; -import { AmPmProps, UseFieldInternalProps } from '@mui/x-date-pickers/internals'; +import { + AmPmProps, + UseFieldInternalProps, + getDateTimeFieldInternalPropsDefaults, +} from '@mui/x-date-pickers/internals'; import { DateTimeRangeValidationError, RangeFieldSeparatorProps } from '../models'; import { getRangeFieldValueManager, rangeValueManager } from '../internals/utils/valueManagers'; import { validateDateTimeRange } from '../validation'; diff --git a/packages/x-date-pickers-pro/src/valueManagers/getTimeRangeValueManager.ts b/packages/x-date-pickers-pro/src/valueManagers/getTimeRangeValueManager.ts index ada9df8bab740..419b6c4907d79 100644 --- a/packages/x-date-pickers-pro/src/valueManagers/getTimeRangeValueManager.ts +++ b/packages/x-date-pickers-pro/src/valueManagers/getTimeRangeValueManager.ts @@ -1,7 +1,10 @@ import type { MakeOptional } from '@mui/x-internals/types'; import { PickerValueManagerV8 } from '@mui/x-date-pickers/models'; -import { getTimeFieldInternalPropsDefaults } from '@mui/x-date-pickers/valueManagers'; -import { AmPmProps, UseFieldInternalProps } from '@mui/x-date-pickers/internals'; +import { + AmPmProps, + UseFieldInternalProps, + getTimeFieldInternalPropsDefaults, +} from '@mui/x-date-pickers/internals'; import { TimeRangeValidationError, RangeFieldSeparatorProps } from '../models'; import { getRangeFieldValueManager, rangeValueManager } from '../internals/utils/valueManagers'; import { validateTimeRange } from '../validation'; diff --git a/packages/x-date-pickers/src/internals/index.ts b/packages/x-date-pickers/src/internals/index.ts index 4d71c50564732..4cb89002b6924 100644 --- a/packages/x-date-pickers/src/internals/index.ts +++ b/packages/x-date-pickers/src/internals/index.ts @@ -162,3 +162,7 @@ export type { ExportedDateCalendarProps } from '../DateCalendar/DateCalendar.typ export { useCalendarState } from '../DateCalendar/useCalendarState'; export { isInternalTimeView, isTimeView } from './utils/time-utils'; + +export { getDateFieldInternalPropsDefaults } from '../valueManagers/getDateValueManager'; +export { getTimeFieldInternalPropsDefaults } from '../valueManagers/getTimeValueManager'; +export { getDateTimeFieldInternalPropsDefaults } from '../valueManagers/getDateTimeValueManager'; diff --git a/packages/x-date-pickers/src/valueManagers/index.ts b/packages/x-date-pickers/src/valueManagers/index.ts index dcc0d4319a4db..4ed034041e9aa 100644 --- a/packages/x-date-pickers/src/valueManagers/index.ts +++ b/packages/x-date-pickers/src/valueManagers/index.ts @@ -1,21 +1,18 @@ -export { getDateValueManager, getDateFieldInternalPropsDefaults } from './getDateValueManager'; +export { getDateValueManager } from './getDateValueManager'; export type { DateFieldInternalProps, DateFieldInternalPropsWithDefaults, DateValueManager, } from './getDateValueManager'; -export { getTimeValueManager, getTimeFieldInternalPropsDefaults } from './getTimeValueManager'; +export { getTimeValueManager } from './getTimeValueManager'; export type { TimeFieldInternalProps, TimeFieldInternalPropsWithDefaults, TimeValueManager, } from './getTimeValueManager'; -export { - getDateTimeValueManager, - getDateTimeFieldInternalPropsDefaults, -} from './getDateTimeValueManager'; +export { getDateTimeValueManager } from './getDateTimeValueManager'; export type { DateTimeFieldInternalProps, DateTimeFieldInternalPropsWithDefaults, diff --git a/scripts/x-date-pickers-pro.exports.json b/scripts/x-date-pickers-pro.exports.json index 913f9b5b196fc..bcfab12adfb01 100644 --- a/scripts/x-date-pickers-pro.exports.json +++ b/scripts/x-date-pickers-pro.exports.json @@ -181,12 +181,10 @@ { "name": "FieldType", "kind": "TypeAlias" }, { "name": "FieldValueType", "kind": "TypeAlias" }, { "name": "getDateCalendarUtilityClass", "kind": "Variable" }, - { "name": "getDateFieldInternalPropsDefaults", "kind": "Variable" }, { "name": "getDateRangeCalendarUtilityClass", "kind": "Variable" }, { "name": "getDateRangePickerDayUtilityClass", "kind": "Function" }, { "name": "getDateRangePickerToolbarUtilityClass", "kind": "Function" }, { "name": "getDateRangeValueManager", "kind": "Variable" }, - { "name": "getDateTimeFieldInternalPropsDefaults", "kind": "Variable" }, { "name": "getDateTimeRangePickerTabsUtilityClass", "kind": "Function" }, { "name": "getDateTimeRangePickerToolbarUtilityClass", "kind": "Function" }, { "name": "getDateTimeRangeValueManager", "kind": "Variable" }, @@ -207,7 +205,6 @@ { "name": "getPickersSectionListUtilityClass", "kind": "Function" }, { "name": "getPickersTextFieldUtilityClass", "kind": "Function" }, { "name": "getTimeClockUtilityClass", "kind": "Function" }, - { "name": "getTimeFieldInternalPropsDefaults", "kind": "Variable" }, { "name": "getTimeRangeValueManager", "kind": "Variable" }, { "name": "getTimeValueManager", "kind": "Variable" }, { "name": "getYearCalendarUtilityClass", "kind": "Function" }, diff --git a/scripts/x-date-pickers.exports.json b/scripts/x-date-pickers.exports.json index f184d646046fc..e8adc2070dad5 100644 --- a/scripts/x-date-pickers.exports.json +++ b/scripts/x-date-pickers.exports.json @@ -120,8 +120,6 @@ { "name": "FieldSelectedSections", "kind": "TypeAlias" }, { "name": "FieldValueType", "kind": "TypeAlias" }, { "name": "getDateCalendarUtilityClass", "kind": "Variable" }, - { "name": "getDateFieldInternalPropsDefaults", "kind": "Variable" }, - { "name": "getDateTimeFieldInternalPropsDefaults", "kind": "Variable" }, { "name": "getDateTimeValueManager", "kind": "Variable" }, { "name": "getDateValueManager", "kind": "Variable" }, { "name": "getDayCalendarSkeletonUtilityClass", "kind": "Variable" }, @@ -136,7 +134,6 @@ { "name": "getPickersSectionListUtilityClass", "kind": "Function" }, { "name": "getPickersTextFieldUtilityClass", "kind": "Function" }, { "name": "getTimeClockUtilityClass", "kind": "Function" }, - { "name": "getTimeFieldInternalPropsDefaults", "kind": "Variable" }, { "name": "getTimeValueManager", "kind": "Variable" }, { "name": "getYearCalendarUtilityClass", "kind": "Function" }, { "name": "InferError", "kind": "TypeAlias" }, From f06c8cabfd2ea02f14ff8263af29cbc3b983ec2a Mon Sep 17 00:00:00 2001 From: flavien Date: Wed, 13 Nov 2024 10:24:26 +0100 Subject: [PATCH 08/35] Work --- .../src/DateField/useDateField.ts | 5 +++- .../src/DateTimeField/useDateTimeField.ts | 5 +++- .../src/TimeField/useTimeField.ts | 5 +++- .../x-date-pickers/src/models/valueManager.ts | 18 ++++++++---- .../valueManagers/getDateTimeValueManager.ts | 29 +++++++++++-------- .../src/valueManagers/getDateValueManager.ts | 19 ++++++++---- .../src/valueManagers/getTimeValueManager.ts | 18 ++++++++---- 7 files changed, 67 insertions(+), 32 deletions(-) diff --git a/packages/x-date-pickers/src/DateField/useDateField.ts b/packages/x-date-pickers/src/DateField/useDateField.ts index fb835029bebbd..faaf38e1bf505 100644 --- a/packages/x-date-pickers/src/DateField/useDateField.ts +++ b/packages/x-date-pickers/src/DateField/useDateField.ts @@ -12,7 +12,10 @@ export const useDateField = < props: TAllProps, ) => { const valueManager = React.useMemo( - () => getDateValueManager(props.enableAccessibleFieldDOMStructure), + () => + getDateValueManager({ + enableAccessibleFieldDOMStructure: props.enableAccessibleFieldDOMStructure, + }), [props.enableAccessibleFieldDOMStructure], ); diff --git a/packages/x-date-pickers/src/DateTimeField/useDateTimeField.ts b/packages/x-date-pickers/src/DateTimeField/useDateTimeField.ts index f2240ed37ad5c..7330c69909792 100644 --- a/packages/x-date-pickers/src/DateTimeField/useDateTimeField.ts +++ b/packages/x-date-pickers/src/DateTimeField/useDateTimeField.ts @@ -12,7 +12,10 @@ export const useDateTimeField = < props: TAllProps, ) => { const valueManager = React.useMemo( - () => getDateTimeValueManager(props.enableAccessibleFieldDOMStructure), + () => + getDateTimeValueManager({ + enableAccessibleFieldDOMStructure: props.enableAccessibleFieldDOMStructure, + }), [props.enableAccessibleFieldDOMStructure], ); diff --git a/packages/x-date-pickers/src/TimeField/useTimeField.ts b/packages/x-date-pickers/src/TimeField/useTimeField.ts index eeffeede435d3..a3caff010357d 100644 --- a/packages/x-date-pickers/src/TimeField/useTimeField.ts +++ b/packages/x-date-pickers/src/TimeField/useTimeField.ts @@ -12,7 +12,10 @@ export const useTimeField = < props: TAllProps, ) => { const valueManager = React.useMemo( - () => getTimeValueManager(props.enableAccessibleFieldDOMStructure), + () => + getTimeValueManager({ + enableAccessibleFieldDOMStructure: props.enableAccessibleFieldDOMStructure, + }), [props.enableAccessibleFieldDOMStructure], ); diff --git a/packages/x-date-pickers/src/models/valueManager.ts b/packages/x-date-pickers/src/models/valueManager.ts index 0d8059fd12b52..39bb6e99fe7d0 100644 --- a/packages/x-date-pickers/src/models/valueManager.ts +++ b/packages/x-date-pickers/src/models/valueManager.ts @@ -22,9 +22,15 @@ export interface PickerValueManagerV8< TError >, > { - // The v7 value manager object. - // This will be inlined inside the main `PickerValueManagerV8` object once every object using it is compatible with the new API. + /** + * Object containing basic methods to interact with the value of the picker or field. + * The properties of this object will be inlined inside the main `PickerValueManagerV8` object once every object using it is compatible with the new API. + */ legacyValueManager: PickerValueManager; + /** + * Object containing all the necessary methods to interact with the value of the field. + * The properties of this object will be inlined inside the main `PickerValueManagerV8` object once every object using it is compatible with the new API. + */ fieldValueManager: FieldValueManager; /** * Checks if a value is valid and returns an error code otherwise. @@ -45,6 +51,10 @@ export interface PickerValueManagerV8< * The type of the value (e.g. 'date', 'date-time', 'time'). */ valueType: FieldValueType; + /** + * `true` if the field is using the accessible DOM structure. + * `false` if the field is using the non-accessible legacy DOM structure (which will be deprecated and removed in the future). + */ enableAccessibleFieldDOMStructure: TEnableAccessibleFieldDOMStructure; } @@ -55,10 +65,8 @@ interface ApplyDefaultsToFieldInternalPropsParameters; -export type PickerAnyAccessibleValueManagerV8 = PickerValueManagerV8; - /** - * Infer all the usual generic in the picker packages from a `PickerValueManager` interface. + * Infer all the usual generic in the picker packages from a `PickerValueManagerV8` interface. */ export type PickerManagerProperties = TManager extends PickerValueManagerV8< diff --git a/packages/x-date-pickers/src/valueManagers/getDateTimeValueManager.ts b/packages/x-date-pickers/src/valueManagers/getDateTimeValueManager.ts index 9e5be96fd9caf..b7e498b6ef24c 100644 --- a/packages/x-date-pickers/src/valueManagers/getDateTimeValueManager.ts +++ b/packages/x-date-pickers/src/valueManagers/getDateTimeValueManager.ts @@ -37,6 +37,13 @@ export interface DateTimeFieldInternalPropsWithDefaults< > extends UseFieldInternalProps, ValidateDateTimeProps {} +type DateTimeFieldPropsToDefault = + | 'format' + // minTime and maxTime can still be undefined after applying defaults. + | 'minTime' + | 'maxTime' + | ValidateDateTimePropsToDefault; + export const getDateTimeFieldInternalPropsDefaults = < TEnableAccessibleFieldDOMStructure extends boolean, >({ @@ -46,22 +53,18 @@ export const getDateTimeFieldInternalPropsDefaults = < }: Pick & { internalProps: Pick< DateTimeFieldInternalProps, - | 'format' - | 'ampm' - | 'minDateTime' - | 'maxDateTime' - | 'minTime' - | 'maxTime' - | ValidateDateTimePropsToDefault + DateTimeFieldPropsToDefault | 'minDateTime' | 'maxDateTime' | 'ampm' >; -}) => { +}): Pick< + DateTimeFieldInternalPropsWithDefaults, + DateTimeFieldPropsToDefault | 'disableIgnoringDatePartForTimeValidation' +> => { const ampm = internalProps.ampm ?? utils.is12HourCycleInCurrentLocale(); const defaultFormat = ampm ? utils.formats.keyboardDateTime12h : utils.formats.keyboardDateTime24h; return { - ampm, disablePast: internalProps.disablePast ?? false, disableFuture: internalProps.disableFuture ?? false, format: internalProps.format ?? defaultFormat, @@ -83,9 +86,11 @@ export const getDateTimeFieldInternalPropsDefaults = < }; }; -export const getDateTimeValueManager = ( - enableAccessibleFieldDOMStructure: TEnableAccessibleFieldDOMStructure = false as TEnableAccessibleFieldDOMStructure, -): DateTimeValueManager => ({ +export const getDateTimeValueManager = ({ + enableAccessibleFieldDOMStructure = true as TEnableAccessibleFieldDOMStructure, +}: { + enableAccessibleFieldDOMStructure: TEnableAccessibleFieldDOMStructure | undefined; +}): DateTimeValueManager => ({ legacyValueManager: singleItemValueManager, fieldValueManager: singleItemFieldValueManager, validator: validateDateTime, diff --git a/packages/x-date-pickers/src/valueManagers/getDateValueManager.ts b/packages/x-date-pickers/src/valueManagers/getDateValueManager.ts index 943294e186f9f..41ad3f5e5f305 100644 --- a/packages/x-date-pickers/src/valueManagers/getDateValueManager.ts +++ b/packages/x-date-pickers/src/valueManagers/getDateValueManager.ts @@ -35,6 +35,8 @@ export interface DateFieldInternalPropsWithDefaults< > extends UseFieldInternalProps, ValidateDateProps {} +type DateFieldPropsToDefault = 'format' | ValidateDatePropsToDefault; + export const getDateFieldInternalPropsDefaults = < TEnableAccessibleFieldDOMStructure extends boolean, >({ @@ -44,19 +46,24 @@ export const getDateFieldInternalPropsDefaults = < }: Pick & { internalProps: Pick< DateFieldInternalProps, - 'format' | ValidateDatePropsToDefault + DateFieldPropsToDefault >; -}) => ({ +}): Pick< + DateFieldInternalPropsWithDefaults, + DateFieldPropsToDefault +> => ({ + format: internalProps.format ?? utils.formats.keyboardDate, disablePast: internalProps.disablePast ?? false, disableFuture: internalProps.disableFuture ?? false, - format: internalProps.format ?? utils.formats.keyboardDate, minDate: applyDefaultDate(utils, internalProps.minDate, defaultDates.minDate), maxDate: applyDefaultDate(utils, internalProps.maxDate, defaultDates.maxDate), }); -export const getDateValueManager = ( - enableAccessibleFieldDOMStructure: TEnableAccessibleFieldDOMStructure = false as TEnableAccessibleFieldDOMStructure, -): DateValueManager => ({ +export const getDateValueManager = ({ + enableAccessibleFieldDOMStructure = true as TEnableAccessibleFieldDOMStructure, +}: { + enableAccessibleFieldDOMStructure: TEnableAccessibleFieldDOMStructure | undefined; +}): DateValueManager => ({ legacyValueManager: singleItemValueManager, fieldValueManager: singleItemFieldValueManager, validator: validateDate, diff --git a/packages/x-date-pickers/src/valueManagers/getTimeValueManager.ts b/packages/x-date-pickers/src/valueManagers/getTimeValueManager.ts index c5edc2fda7a6f..98ee9db402787 100644 --- a/packages/x-date-pickers/src/valueManagers/getTimeValueManager.ts +++ b/packages/x-date-pickers/src/valueManagers/getTimeValueManager.ts @@ -36,6 +36,8 @@ export interface TimeFieldInternalPropsWithDefaults< > extends UseFieldInternalProps, ValidateTimeProps {} +type TimeFieldPropsToDefault = 'format' | ValidateTimePropsToDefault; + export const getTimeFieldInternalPropsDefaults = < TEnableAccessibleFieldDOMStructure extends boolean, >({ @@ -44,23 +46,27 @@ export const getTimeFieldInternalPropsDefaults = < }: Pick & { internalProps: Pick< TimeFieldInternalProps, - 'format' | 'ampm' | ValidateTimePropsToDefault + TimeFieldPropsToDefault | 'ampm' >; -}) => { +}): Pick< + TimeFieldInternalPropsWithDefaults, + TimeFieldPropsToDefault +> => { const ampm = internalProps.ampm ?? utils.is12HourCycleInCurrentLocale(); const defaultFormat = ampm ? utils.formats.fullTime12h : utils.formats.fullTime24h; return { - ampm, disablePast: internalProps.disablePast ?? false, disableFuture: internalProps.disableFuture ?? false, format: internalProps.format ?? defaultFormat, }; }; -export const getTimeValueManager = ( - enableAccessibleFieldDOMStructure: TEnableAccessibleFieldDOMStructure = false as TEnableAccessibleFieldDOMStructure, -): TimeValueManager => ({ +export const getTimeValueManager = ({ + enableAccessibleFieldDOMStructure = true as TEnableAccessibleFieldDOMStructure, +}: { + enableAccessibleFieldDOMStructure: TEnableAccessibleFieldDOMStructure | undefined; +}): TimeValueManager => ({ legacyValueManager: singleItemValueManager, fieldValueManager: singleItemFieldValueManager, validator: validateTime, From 20805bd381061bacb07472be0bfed66fb4503b31 Mon Sep 17 00:00:00 2001 From: flavien Date: Wed, 13 Nov 2024 11:18:20 +0100 Subject: [PATCH 09/35] Fix' --- .../useSingleInputDateRangeField.ts | 7 ++++++- .../useSingleInputDateTimeRangeField.ts | 7 ++++++- .../useSingleInputTimeRangeField.ts | 7 ++++++- scripts/x-date-pickers-pro.exports.json | 1 - scripts/x-date-pickers.exports.json | 1 - 5 files changed, 18 insertions(+), 5 deletions(-) diff --git a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/useSingleInputDateRangeField.ts b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/useSingleInputDateRangeField.ts index e78b7619d0642..abfa841fbbc05 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/useSingleInputDateRangeField.ts +++ b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/useSingleInputDateRangeField.ts @@ -26,7 +26,12 @@ export const useSingleInputDateRangeField = < internalProps, }); - return useField({ + return useField< + true, + TEnableAccessibleFieldDOMStructure, + typeof forwardedProps, + typeof internalPropsWithDefaults + >({ forwardedProps, internalProps: internalPropsWithDefaults, valueManager: valueManager.legacyValueManager, diff --git a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.ts b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.ts index a086e78fb6aa3..2733d4dab2624 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.ts +++ b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.ts @@ -26,7 +26,12 @@ export const useSingleInputDateTimeRangeField = < internalProps, }); - return useField({ + return useField< + true, + TEnableAccessibleFieldDOMStructure, + typeof forwardedProps, + typeof internalPropsWithDefaults + >({ forwardedProps, internalProps: internalPropsWithDefaults, valueManager: valueManager.legacyValueManager, diff --git a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/useSingleInputTimeRangeField.ts b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/useSingleInputTimeRangeField.ts index a16ea536a9161..188e9df63a352 100644 --- a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/useSingleInputTimeRangeField.ts +++ b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/useSingleInputTimeRangeField.ts @@ -26,7 +26,12 @@ export const useSingleInputTimeRangeField = < internalProps, }); - return useField({ + return useField< + true, + TEnableAccessibleFieldDOMStructure, + typeof forwardedProps, + typeof internalPropsWithDefaults + >({ forwardedProps, internalProps: internalPropsWithDefaults, valueManager: valueManager.legacyValueManager, diff --git a/scripts/x-date-pickers-pro.exports.json b/scripts/x-date-pickers-pro.exports.json index bcfab12adfb01..b01f9246fb1ec 100644 --- a/scripts/x-date-pickers-pro.exports.json +++ b/scripts/x-date-pickers-pro.exports.json @@ -268,7 +268,6 @@ { "name": "MultiSectionDigitalClockSlots", "kind": "Interface" }, { "name": "NonEmptyDateRange", "kind": "TypeAlias" }, { "name": "OnErrorProps", "kind": "Interface" }, - { "name": "PickerAnyAccessibleValueManagerV8", "kind": "TypeAlias" }, { "name": "PickerAnyValueManagerV8", "kind": "TypeAlias" }, { "name": "PickerChangeHandlerContext", "kind": "Interface" }, { "name": "PickerDayOwnerState", "kind": "Interface" }, diff --git a/scripts/x-date-pickers.exports.json b/scripts/x-date-pickers.exports.json index e8adc2070dad5..ef718dc09468d 100644 --- a/scripts/x-date-pickers.exports.json +++ b/scripts/x-date-pickers.exports.json @@ -173,7 +173,6 @@ { "name": "MultiSectionDigitalClockSlotProps", "kind": "Interface" }, { "name": "MultiSectionDigitalClockSlots", "kind": "Interface" }, { "name": "OnErrorProps", "kind": "Interface" }, - { "name": "PickerAnyAccessibleValueManagerV8", "kind": "TypeAlias" }, { "name": "PickerAnyValueManagerV8", "kind": "TypeAlias" }, { "name": "PickerChangeHandlerContext", "kind": "Interface" }, { "name": "PickerDayOwnerState", "kind": "Interface" }, From f6b78d959123d29a0ffe6bf01f3836770e073837 Mon Sep 17 00:00:00 2001 From: flavien Date: Wed, 13 Nov 2024 16:03:37 +0100 Subject: [PATCH 10/35] Work --- .../src/internals/hooks/useField/useField.ts | 10 ++++-- .../src/internals/models/index.ts | 1 + .../src/internals/models/valueManager.ts | 13 ++++++++ .../x-date-pickers/src/models/valueManager.ts | 31 +------------------ scripts/x-date-pickers-pro.exports.json | 2 -- scripts/x-date-pickers.exports.json | 2 -- 6 files changed, 22 insertions(+), 37 deletions(-) create mode 100644 packages/x-date-pickers/src/internals/models/valueManager.ts 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 c7ac254cb0468..cb06f33d23417 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useField.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useField.ts @@ -19,7 +19,11 @@ import { useFieldState } from './useFieldState'; import { useFieldCharacterEditing } from './useFieldCharacterEditing'; import { useFieldV7TextField } from './useFieldV7TextField'; import { useFieldV6TextField } from './useFieldV6TextField'; -import { PickerAnyValueManagerV8, PickerManagerProperties } from '../../../models'; +import { + PickerAnyValueManagerV8, + PickerManagerFieldInternalProps, + PickerManagerFieldInternalPropsWithDefaults, +} from '../../models'; /** * Applies the default values to the field internal props. @@ -30,8 +34,8 @@ export const useFieldInternalPropsWithDefaults = ['fieldInternalProps']; -}): PickerManagerProperties['fieldInternalPropsWithDefaults'] => { + internalProps: PickerManagerFieldInternalProps; +}): PickerManagerFieldInternalPropsWithDefaults => { const localizationContext = useLocalizationContext(); return React.useMemo(() => { return valueManager.applyDefaultsToFieldInternalProps({ diff --git a/packages/x-date-pickers/src/internals/models/index.ts b/packages/x-date-pickers/src/internals/models/index.ts index 45ae41a75a2e3..ef14b5bdd13b1 100644 --- a/packages/x-date-pickers/src/internals/models/index.ts +++ b/packages/x-date-pickers/src/internals/models/index.ts @@ -2,3 +2,4 @@ export * from './fields'; export * from './common'; export * from './value'; export * from './formProps'; +export * from './valueManager'; diff --git a/packages/x-date-pickers/src/internals/models/valueManager.ts b/packages/x-date-pickers/src/internals/models/valueManager.ts new file mode 100644 index 0000000000000..fbb0ec1a71dc7 --- /dev/null +++ b/packages/x-date-pickers/src/internals/models/valueManager.ts @@ -0,0 +1,13 @@ +import { PickerValueManagerV8 } from '../../models'; + +export type PickerAnyValueManagerV8 = PickerValueManagerV8; + +export type PickerManagerFieldInternalProps = + TManager extends PickerValueManagerV8 + ? TFieldInternalProps + : never; + +export type PickerManagerFieldInternalPropsWithDefaults = + TManager extends PickerValueManagerV8 + ? TFieldInternalPropsWithDefaults + : never; diff --git a/packages/x-date-pickers/src/models/valueManager.ts b/packages/x-date-pickers/src/models/valueManager.ts index 39bb6e99fe7d0..0f8a121109e95 100644 --- a/packages/x-date-pickers/src/models/valueManager.ts +++ b/packages/x-date-pickers/src/models/valueManager.ts @@ -1,9 +1,8 @@ -import { InferNonNullablePickerValue, InferPickerValue } from '../internals/models/value'; import type { FieldValueManager, UseFieldInternalProps } from '../internals/hooks/useField'; import type { PickerValueManager } from '../internals/hooks/usePicker'; import type { MuiPickersAdapterContextValue } from '../LocalizationProvider/LocalizationProvider'; import type { Validator } from '../validation'; -import type { InferFieldSection, FieldValueType } from './fields'; +import type { FieldValueType } from './fields'; // TODO: Rename PickerValueManager when the legacyValueManager object will be inlined. /** @@ -62,31 +61,3 @@ interface ApplyDefaultsToFieldInternalPropsParameters; - -/** - * Infer all the usual generic in the picker packages from a `PickerValueManagerV8` interface. - */ -export type PickerManagerProperties = - TManager extends PickerValueManagerV8< - infer TIsRange, - infer TEnableAccessibleFieldDOMStructure, - infer TError, - infer TFieldInternalProps, - infer TFieldInternalPropsWithDefaults - > - ? { - // Generics - isRange: TIsRange; - enableAccessibleFieldDOMStructure: TEnableAccessibleFieldDOMStructure; - error: TError; - fieldInternalProps: TFieldInternalProps; - fieldInternalPropsWithDefaults: TFieldInternalPropsWithDefaults; - - // Derived properties - value: InferPickerValue; - nonNullableValue: InferNonNullablePickerValue; - section: InferFieldSection; - } - : never; diff --git a/scripts/x-date-pickers-pro.exports.json b/scripts/x-date-pickers-pro.exports.json index b01f9246fb1ec..4ef6a8273eacc 100644 --- a/scripts/x-date-pickers-pro.exports.json +++ b/scripts/x-date-pickers-pro.exports.json @@ -268,11 +268,9 @@ { "name": "MultiSectionDigitalClockSlots", "kind": "Interface" }, { "name": "NonEmptyDateRange", "kind": "TypeAlias" }, { "name": "OnErrorProps", "kind": "Interface" }, - { "name": "PickerAnyValueManagerV8", "kind": "TypeAlias" }, { "name": "PickerChangeHandlerContext", "kind": "Interface" }, { "name": "PickerDayOwnerState", "kind": "Interface" }, { "name": "PickerLayoutOwnerState", "kind": "Interface" }, - { "name": "PickerManagerProperties", "kind": "TypeAlias" }, { "name": "PickerOwnerState", "kind": "Interface" }, { "name": "PickersActionBar", "kind": "Function" }, { "name": "PickersActionBarAction", "kind": "TypeAlias" }, diff --git a/scripts/x-date-pickers.exports.json b/scripts/x-date-pickers.exports.json index ef718dc09468d..2e7f15c97d3d8 100644 --- a/scripts/x-date-pickers.exports.json +++ b/scripts/x-date-pickers.exports.json @@ -173,11 +173,9 @@ { "name": "MultiSectionDigitalClockSlotProps", "kind": "Interface" }, { "name": "MultiSectionDigitalClockSlots", "kind": "Interface" }, { "name": "OnErrorProps", "kind": "Interface" }, - { "name": "PickerAnyValueManagerV8", "kind": "TypeAlias" }, { "name": "PickerChangeHandlerContext", "kind": "Interface" }, { "name": "PickerDayOwnerState", "kind": "Interface" }, { "name": "PickerLayoutOwnerState", "kind": "Interface" }, - { "name": "PickerManagerProperties", "kind": "TypeAlias" }, { "name": "PickerOwnerState", "kind": "Interface" }, { "name": "PickersActionBar", "kind": "Function" }, { "name": "PickersActionBarAction", "kind": "TypeAlias" }, From d47da982b0fa079709690cb87da26ae14049dc34 Mon Sep 17 00:00:00 2001 From: flavien Date: Wed, 13 Nov 2024 16:06:49 +0100 Subject: [PATCH 11/35] Fix --- .../useSingleInputDateTimeRangeField.ts | 2 +- .../src/internals/models/valueManager.ts | 25 ++++++++++++++----- 2 files changed, 20 insertions(+), 7 deletions(-) diff --git a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.ts b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.ts index 2733d4dab2624..5f584c2e8d62f 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.ts +++ b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.ts @@ -20,7 +20,7 @@ export const useSingleInputDateTimeRangeField = < [props.enableAccessibleFieldDOMStructure, props.dateSeparator], ); - const { forwardedProps, internalProps } = useSplitFieldProps(props, 'date'); + const { forwardedProps, internalProps } = useSplitFieldProps(props, 'date-time'); const internalPropsWithDefaults = useFieldInternalPropsWithDefaults({ valueManager, internalProps, diff --git a/packages/x-date-pickers/src/internals/models/valueManager.ts b/packages/x-date-pickers/src/internals/models/valueManager.ts index fbb0ec1a71dc7..b1fa8677f3df5 100644 --- a/packages/x-date-pickers/src/internals/models/valueManager.ts +++ b/packages/x-date-pickers/src/internals/models/valueManager.ts @@ -2,12 +2,25 @@ import { PickerValueManagerV8 } from '../../models'; export type PickerAnyValueManagerV8 = PickerValueManagerV8; -export type PickerManagerFieldInternalProps = - TManager extends PickerValueManagerV8 - ? TFieldInternalProps +type PickerManagerProperties = + TManager extends PickerValueManagerV8< + infer TIsRange, + infer TEnableAccessibleFieldDOMStructure, + infer TError, + infer TFieldInternalProps, + infer TFieldInternalPropsWithDefaults + > + ? { + isRange: TIsRange; + enableAccessibleFieldDOMStructure: TEnableAccessibleFieldDOMStructure; + error: TError; + fieldInternalProps: TFieldInternalProps; + fieldInternalPropsWithDefaults: TFieldInternalPropsWithDefaults; + } : never; +export type PickerManagerFieldInternalProps = + PickerManagerProperties['fieldInternalProps']; + export type PickerManagerFieldInternalPropsWithDefaults = - TManager extends PickerValueManagerV8 - ? TFieldInternalPropsWithDefaults - : never; + PickerManagerProperties['fieldInternalPropsWithDefaults']; From 3a52a82178973607443c4907f4a1ade1bb157d79 Mon Sep 17 00:00:00 2001 From: flavien Date: Thu, 14 Nov 2024 12:36:43 +0100 Subject: [PATCH 12/35] 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 76d3d080eb785..51000b91b1e8e 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 f415273c839da..f0bc65fba454e 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 1d05d936aef6f..0c45e50833b93 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 1e71d21e55567..ffb08bbc77661 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 485a0d674f0a9..923ef3a3996a3 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 6063bdbfc83de..bc92b537fc953 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 13/35] 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 2a87c1d474bb4..65c7b308ac578 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 14/35] 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 e438da2e0ba46..8eebc73534048 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 28e3311283447..bddf6e3e219a9 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 ae71f100c9e0eabe572e3fe3d352ab6c5badf81d Mon Sep 17 00:00:00 2001 From: flavien Date: Thu, 14 Nov 2024 13:08:24 +0100 Subject: [PATCH 15/35] Move value manager to hookss --- .../useSingleInputDateRangeField.ts | 13 +-- .../useSingleInputDateTimeRangeField.ts | 13 +-- .../useSingleInputTimeRangeField.ts | 13 +-- .../src/valueManagers/index.ts | 15 ++- ...Manager.ts => useDateRangeValueManager.ts} | 46 +++++--- ...ger.ts => useDateTimeRangeValueManager.ts} | 48 +++++--- ...Manager.ts => useTimeRangeValueManager.ts} | 46 +++++--- .../src/DateField/useDateField.ts | 12 +- .../src/DateTimeField/useDateTimeField.ts | 11 +- .../src/TimeField/useTimeField.ts | 12 +- .../x-date-pickers/src/internals/index.ts | 6 +- .../x-date-pickers/src/valueManagers/index.ts | 15 ++- ...eManager.ts => useDateTimeValueManager.ts} | 103 ++++++++++-------- ...ValueManager.ts => useDateValueManager.ts} | 87 ++++++++------- ...ValueManager.ts => useTimeValueManager.ts} | 89 ++++++++------- scripts/x-date-pickers-pro.exports.json | 18 ++- scripts/x-date-pickers.exports.json | 9 +- 17 files changed, 298 insertions(+), 258 deletions(-) rename packages/x-date-pickers-pro/src/valueManagers/{getDateRangeValueManager.ts => useDateRangeValueManager.ts} (58%) rename packages/x-date-pickers-pro/src/valueManagers/{getDateTimeRangeValueManager.ts => useDateTimeRangeValueManager.ts} (59%) rename packages/x-date-pickers-pro/src/valueManagers/{getTimeRangeValueManager.ts => useTimeRangeValueManager.ts} (59%) rename packages/x-date-pickers/src/valueManagers/{getDateTimeValueManager.ts => useDateTimeValueManager.ts} (73%) rename packages/x-date-pickers/src/valueManagers/{getDateValueManager.ts => useDateValueManager.ts} (56%) rename packages/x-date-pickers/src/valueManagers/{getTimeValueManager.ts => useTimeValueManager.ts} (67%) diff --git a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/useSingleInputDateRangeField.ts b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/useSingleInputDateRangeField.ts index abfa841fbbc05..3addaba60fe0b 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/useSingleInputDateRangeField.ts +++ b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/useSingleInputDateRangeField.ts @@ -1,9 +1,8 @@ 'use client'; -import * as React from 'react'; import { useField, useFieldInternalPropsWithDefaults } from '@mui/x-date-pickers/internals'; import { useSplitFieldProps } from '@mui/x-date-pickers/hooks'; import { UseSingleInputDateRangeFieldProps } from './SingleInputDateRangeField.types'; -import { getDateRangeValueManager } from '../valueManagers'; +import { useDateRangeValueManager } from '../valueManagers'; export const useSingleInputDateRangeField = < TEnableAccessibleFieldDOMStructure extends boolean, @@ -11,15 +10,7 @@ export const useSingleInputDateRangeField = < >( props: TAllProps, ) => { - const valueManager = React.useMemo( - () => - getDateRangeValueManager({ - enableAccessibleFieldDOMStructure: props.enableAccessibleFieldDOMStructure, - dateSeparator: props.dateSeparator, - }), - [props.enableAccessibleFieldDOMStructure, props.dateSeparator], - ); - + const valueManager = useDateRangeValueManager(props); const { forwardedProps, internalProps } = useSplitFieldProps(props, 'date'); const internalPropsWithDefaults = useFieldInternalPropsWithDefaults({ valueManager, diff --git a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.ts b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.ts index 5f584c2e8d62f..195a078d421d6 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.ts +++ b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.ts @@ -1,9 +1,8 @@ 'use client'; -import * as React from 'react'; import { useField, useFieldInternalPropsWithDefaults } from '@mui/x-date-pickers/internals'; import { useSplitFieldProps } from '@mui/x-date-pickers/hooks'; import { UseSingleInputDateTimeRangeFieldProps } from './SingleInputDateTimeRangeField.types'; -import { getDateTimeRangeValueManager } from '../valueManagers'; +import { useDateTimeRangeValueManager } from '../valueManagers'; export const useSingleInputDateTimeRangeField = < TEnableAccessibleFieldDOMStructure extends boolean, @@ -11,15 +10,7 @@ export const useSingleInputDateTimeRangeField = < >( props: TAllProps, ) => { - const valueManager = React.useMemo( - () => - getDateTimeRangeValueManager({ - enableAccessibleFieldDOMStructure: props.enableAccessibleFieldDOMStructure, - dateSeparator: props.dateSeparator, - }), - [props.enableAccessibleFieldDOMStructure, props.dateSeparator], - ); - + const valueManager = useDateTimeRangeValueManager(props); const { forwardedProps, internalProps } = useSplitFieldProps(props, 'date-time'); const internalPropsWithDefaults = useFieldInternalPropsWithDefaults({ valueManager, diff --git a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/useSingleInputTimeRangeField.ts b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/useSingleInputTimeRangeField.ts index 188e9df63a352..a42d43ebff6b2 100644 --- a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/useSingleInputTimeRangeField.ts +++ b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/useSingleInputTimeRangeField.ts @@ -1,9 +1,8 @@ 'use client'; -import * as React from 'react'; import { useField, useFieldInternalPropsWithDefaults } from '@mui/x-date-pickers/internals'; import { useSplitFieldProps } from '@mui/x-date-pickers/hooks'; import { UseSingleInputTimeRangeFieldProps } from './SingleInputTimeRangeField.types'; -import { getTimeRangeValueManager } from '../valueManagers'; +import { useTimeRangeValueManager } from '../valueManagers'; export const useSingleInputTimeRangeField = < TEnableAccessibleFieldDOMStructure extends boolean, @@ -11,15 +10,7 @@ export const useSingleInputTimeRangeField = < >( props: TAllProps, ) => { - const valueManager = React.useMemo( - () => - getTimeRangeValueManager({ - enableAccessibleFieldDOMStructure: props.enableAccessibleFieldDOMStructure, - dateSeparator: props.dateSeparator, - }), - [props.enableAccessibleFieldDOMStructure, props.dateSeparator], - ); - + const valueManager = useTimeRangeValueManager(props); const { forwardedProps, internalProps } = useSplitFieldProps(props, 'date'); const internalPropsWithDefaults = useFieldInternalPropsWithDefaults({ valueManager, diff --git a/packages/x-date-pickers-pro/src/valueManagers/index.ts b/packages/x-date-pickers-pro/src/valueManagers/index.ts index 8b37b9789cae6..8797301e751b7 100644 --- a/packages/x-date-pickers-pro/src/valueManagers/index.ts +++ b/packages/x-date-pickers-pro/src/valueManagers/index.ts @@ -1,20 +1,23 @@ -export { getDateRangeValueManager } from './getDateRangeValueManager'; +export { useDateRangeValueManager } from './useDateRangeValueManager'; export type { DateRangeValueManager, DateRangeFieldInternalProps, DateRangeFieldInternalPropsWithDefaults, -} from './getDateRangeValueManager'; + UseDateRangeValueManagerParameters, +} from './useDateRangeValueManager'; -export { getTimeRangeValueManager } from './getTimeRangeValueManager'; +export { useTimeRangeValueManager } from './useTimeRangeValueManager'; export type { TimeRangeValueManager, TimeRangeFieldInternalProps, TimeRangeFieldInternalPropsWithDefaults, -} from './getTimeRangeValueManager'; + UseTimeRangeValueManagerParameters, +} from './useTimeRangeValueManager'; -export { getDateTimeRangeValueManager } from './getDateTimeRangeValueManager'; +export { useDateTimeRangeValueManager } from './useDateTimeRangeValueManager'; export type { DateTimeRangeValueManager, DateTimeRangeFieldInternalProps, DateTimeRangeFieldInternalPropsWithDefaults, -} from './getDateTimeRangeValueManager'; + UseDateTimeRangeValueManagerParameters, +} from './useDateTimeRangeValueManager'; diff --git a/packages/x-date-pickers-pro/src/valueManagers/getDateRangeValueManager.ts b/packages/x-date-pickers-pro/src/valueManagers/useDateRangeValueManager.ts similarity index 58% rename from packages/x-date-pickers-pro/src/valueManagers/getDateRangeValueManager.ts rename to packages/x-date-pickers-pro/src/valueManagers/useDateRangeValueManager.ts index bb364dd13000a..0491470042d60 100644 --- a/packages/x-date-pickers-pro/src/valueManagers/getDateRangeValueManager.ts +++ b/packages/x-date-pickers-pro/src/valueManagers/useDateRangeValueManager.ts @@ -1,3 +1,4 @@ +import * as React from 'react'; import type { MakeOptional } from '@mui/x-internals/types'; import { PickerValueManagerV8 } from '@mui/x-date-pickers/models'; import { @@ -12,6 +13,30 @@ import { ValidateDateRangeProps, } from '../validation/validateDateRange'; +export function useDateRangeValueManager( + parameters: UseDateRangeValueManagerParameters = {}, +): DateRangeValueManager { + const { + enableAccessibleFieldDOMStructure = true as TEnableAccessibleFieldDOMStructure, + dateSeparator, + } = parameters; + + return React.useMemo( + () => ({ + legacyValueManager: rangeValueManager, + fieldValueManager: getRangeFieldValueManager({ dateSeparator }), + validator: validateDateRange, + valueType: 'date', + applyDefaultsToFieldInternalProps: ({ internalProps, utils, defaultDates }) => ({ + ...internalProps, + ...getDateFieldInternalPropsDefaults({ defaultDates, utils, internalProps }), + }), + enableAccessibleFieldDOMStructure, + }), + [enableAccessibleFieldDOMStructure, dateSeparator], + ); +} + export type DateRangeValueManager = PickerValueManagerV8< true, @@ -35,21 +60,8 @@ export interface DateRangeFieldInternalPropsWithDefaults< ValidateDateRangeProps, RangeFieldSeparatorProps {} -export const getDateRangeValueManager = < - TEnableAccessibleFieldDOMStructure extends boolean = false, ->({ - enableAccessibleFieldDOMStructure = false as TEnableAccessibleFieldDOMStructure, - dateSeparator, -}: { +export interface UseDateRangeValueManagerParameters< + TEnableAccessibleFieldDOMStructure extends boolean, +> extends RangeFieldSeparatorProps { enableAccessibleFieldDOMStructure?: TEnableAccessibleFieldDOMStructure; -} & RangeFieldSeparatorProps): DateRangeValueManager => ({ - legacyValueManager: rangeValueManager, - fieldValueManager: getRangeFieldValueManager({ dateSeparator }), - validator: validateDateRange, - valueType: 'date', - applyDefaultsToFieldInternalProps: ({ internalProps, utils, defaultDates }) => ({ - ...internalProps, - ...getDateFieldInternalPropsDefaults({ defaultDates, utils, internalProps }), - }), - enableAccessibleFieldDOMStructure, -}); +} diff --git a/packages/x-date-pickers-pro/src/valueManagers/getDateTimeRangeValueManager.ts b/packages/x-date-pickers-pro/src/valueManagers/useDateTimeRangeValueManager.ts similarity index 59% rename from packages/x-date-pickers-pro/src/valueManagers/getDateTimeRangeValueManager.ts rename to packages/x-date-pickers-pro/src/valueManagers/useDateTimeRangeValueManager.ts index 8befdded8825e..678445c738241 100644 --- a/packages/x-date-pickers-pro/src/valueManagers/getDateTimeRangeValueManager.ts +++ b/packages/x-date-pickers-pro/src/valueManagers/useDateTimeRangeValueManager.ts @@ -1,3 +1,4 @@ +import * as React from 'react'; import type { MakeOptional } from '@mui/x-internals/types'; import { PickerValueManagerV8 } from '@mui/x-date-pickers/models'; import { @@ -13,6 +14,32 @@ import { ValidateDateTimeRangeProps, } from '../validation/validateDateTimeRange'; +export function useDateTimeRangeValueManager< + TEnableAccessibleFieldDOMStructure extends boolean = true, +>( + parameters: UseDateTimeRangeValueManagerParameters = {}, +): DateTimeRangeValueManager { + const { + enableAccessibleFieldDOMStructure = true as TEnableAccessibleFieldDOMStructure, + dateSeparator, + } = parameters; + + return React.useMemo( + () => ({ + legacyValueManager: rangeValueManager, + fieldValueManager: getRangeFieldValueManager({ dateSeparator }), + validator: validateDateTimeRange, + valueType: 'date-time', + applyDefaultsToFieldInternalProps: ({ internalProps, utils, defaultDates }) => ({ + ...internalProps, + ...getDateTimeFieldInternalPropsDefaults({ internalProps, utils, defaultDates }), + }), + enableAccessibleFieldDOMStructure, + }), + [enableAccessibleFieldDOMStructure, dateSeparator], + ); +} + export type DateTimeRangeValueManager = PickerValueManagerV8< true, @@ -41,21 +68,8 @@ export interface DateTimeRangeFieldInternalPropsWithDefaults< ValidateDateTimeRangeProps, RangeFieldSeparatorProps {} -export const getDateTimeRangeValueManager = < - TEnableAccessibleFieldDOMStructure extends boolean = false, ->({ - enableAccessibleFieldDOMStructure = false as TEnableAccessibleFieldDOMStructure, - dateSeparator, -}: { +export interface UseDateTimeRangeValueManagerParameters< + TEnableAccessibleFieldDOMStructure extends boolean, +> extends RangeFieldSeparatorProps { enableAccessibleFieldDOMStructure?: TEnableAccessibleFieldDOMStructure; -} & RangeFieldSeparatorProps): DateTimeRangeValueManager => ({ - legacyValueManager: rangeValueManager, - fieldValueManager: getRangeFieldValueManager({ dateSeparator }), - validator: validateDateTimeRange, - valueType: 'date-time', - applyDefaultsToFieldInternalProps: ({ internalProps, utils, defaultDates }) => ({ - ...internalProps, - ...getDateTimeFieldInternalPropsDefaults({ internalProps, utils, defaultDates }), - }), - enableAccessibleFieldDOMStructure, -}); +} diff --git a/packages/x-date-pickers-pro/src/valueManagers/getTimeRangeValueManager.ts b/packages/x-date-pickers-pro/src/valueManagers/useTimeRangeValueManager.ts similarity index 59% rename from packages/x-date-pickers-pro/src/valueManagers/getTimeRangeValueManager.ts rename to packages/x-date-pickers-pro/src/valueManagers/useTimeRangeValueManager.ts index 419b6c4907d79..dc4f18b07e4b0 100644 --- a/packages/x-date-pickers-pro/src/valueManagers/getTimeRangeValueManager.ts +++ b/packages/x-date-pickers-pro/src/valueManagers/useTimeRangeValueManager.ts @@ -1,3 +1,4 @@ +import * as React from 'react'; import type { MakeOptional } from '@mui/x-internals/types'; import { PickerValueManagerV8 } from '@mui/x-date-pickers/models'; import { @@ -13,6 +14,30 @@ import { ValidateTimeRangeProps, } from '../validation/validateTimeRange'; +export function useTimeRangeValueManager( + parameters: UseTimeRangeValueManagerParameters = {}, +): TimeRangeValueManager { + const { + enableAccessibleFieldDOMStructure = true as TEnableAccessibleFieldDOMStructure, + dateSeparator, + } = parameters; + + return React.useMemo( + () => ({ + legacyValueManager: rangeValueManager, + fieldValueManager: getRangeFieldValueManager({ dateSeparator }), + validator: validateTimeRange, + valueType: 'time', + applyDefaultsToFieldInternalProps: ({ internalProps, utils }) => ({ + ...internalProps, + ...getTimeFieldInternalPropsDefaults({ utils, internalProps }), + }), + enableAccessibleFieldDOMStructure, + }), + [enableAccessibleFieldDOMStructure, dateSeparator], + ); +} + export type TimeRangeValueManager = PickerValueManagerV8< true, @@ -36,21 +61,8 @@ export interface TimeRangeFieldInternalPropsWithDefaults< > extends UseFieldInternalProps, ValidateTimeRangeProps {} -export const getTimeRangeValueManager = < - TEnableAccessibleFieldDOMStructure extends boolean = false, ->({ - enableAccessibleFieldDOMStructure = false as TEnableAccessibleFieldDOMStructure, - dateSeparator, -}: { +export interface UseTimeRangeValueManagerParameters< + TEnableAccessibleFieldDOMStructure extends boolean, +> extends RangeFieldSeparatorProps { enableAccessibleFieldDOMStructure?: TEnableAccessibleFieldDOMStructure; -} & RangeFieldSeparatorProps): TimeRangeValueManager => ({ - legacyValueManager: rangeValueManager, - fieldValueManager: getRangeFieldValueManager({ dateSeparator }), - validator: validateTimeRange, - valueType: 'time', - applyDefaultsToFieldInternalProps: ({ internalProps, utils }) => ({ - ...internalProps, - ...getTimeFieldInternalPropsDefaults({ utils, internalProps }), - }), - enableAccessibleFieldDOMStructure, -}); +} diff --git a/packages/x-date-pickers/src/DateField/useDateField.ts b/packages/x-date-pickers/src/DateField/useDateField.ts index faaf38e1bf505..9c38b2d79080e 100644 --- a/packages/x-date-pickers/src/DateField/useDateField.ts +++ b/packages/x-date-pickers/src/DateField/useDateField.ts @@ -1,9 +1,8 @@ 'use client'; -import * as React from 'react'; import { useField, useFieldInternalPropsWithDefaults } from '../internals/hooks/useField'; import { UseDateFieldProps } from './DateField.types'; import { useSplitFieldProps } from '../hooks'; -import { getDateValueManager } from '../valueManagers'; +import { useDateValueManager } from '../valueManagers'; export const useDateField = < TEnableAccessibleFieldDOMStructure extends boolean, @@ -11,14 +10,7 @@ export const useDateField = < >( props: TAllProps, ) => { - const valueManager = React.useMemo( - () => - getDateValueManager({ - enableAccessibleFieldDOMStructure: props.enableAccessibleFieldDOMStructure, - }), - [props.enableAccessibleFieldDOMStructure], - ); - + const valueManager = useDateValueManager(props); const { forwardedProps, internalProps } = useSplitFieldProps(props, 'date'); const internalPropsWithDefaults = useFieldInternalPropsWithDefaults({ valueManager, diff --git a/packages/x-date-pickers/src/DateTimeField/useDateTimeField.ts b/packages/x-date-pickers/src/DateTimeField/useDateTimeField.ts index 7330c69909792..6456ba0cfe1b1 100644 --- a/packages/x-date-pickers/src/DateTimeField/useDateTimeField.ts +++ b/packages/x-date-pickers/src/DateTimeField/useDateTimeField.ts @@ -1,9 +1,8 @@ 'use client'; -import * as React from 'react'; import { useField, useFieldInternalPropsWithDefaults } from '../internals/hooks/useField'; import { UseDateTimeFieldProps } from './DateTimeField.types'; import { useSplitFieldProps } from '../hooks'; -import { getDateTimeValueManager } from '../valueManagers'; +import { useDateTimeValueManager } from '../valueManagers'; export const useDateTimeField = < TEnableAccessibleFieldDOMStructure extends boolean, @@ -11,13 +10,7 @@ export const useDateTimeField = < >( props: TAllProps, ) => { - const valueManager = React.useMemo( - () => - getDateTimeValueManager({ - enableAccessibleFieldDOMStructure: props.enableAccessibleFieldDOMStructure, - }), - [props.enableAccessibleFieldDOMStructure], - ); + const valueManager = useDateTimeValueManager(props); const { forwardedProps, internalProps } = useSplitFieldProps(props, 'date'); const internalPropsWithDefaults = useFieldInternalPropsWithDefaults({ diff --git a/packages/x-date-pickers/src/TimeField/useTimeField.ts b/packages/x-date-pickers/src/TimeField/useTimeField.ts index a3caff010357d..d0ec247adfd1a 100644 --- a/packages/x-date-pickers/src/TimeField/useTimeField.ts +++ b/packages/x-date-pickers/src/TimeField/useTimeField.ts @@ -1,9 +1,8 @@ 'use client'; -import * as React from 'react'; import { useField, useFieldInternalPropsWithDefaults } from '../internals/hooks/useField'; import { UseTimeFieldProps } from './TimeField.types'; import { useSplitFieldProps } from '../hooks'; -import { getTimeValueManager } from '../valueManagers'; +import { useTimeValueManager } from '../valueManagers'; export const useTimeField = < TEnableAccessibleFieldDOMStructure extends boolean, @@ -11,14 +10,7 @@ export const useTimeField = < >( props: TAllProps, ) => { - const valueManager = React.useMemo( - () => - getTimeValueManager({ - enableAccessibleFieldDOMStructure: props.enableAccessibleFieldDOMStructure, - }), - [props.enableAccessibleFieldDOMStructure], - ); - + const valueManager = useTimeValueManager(props); const { forwardedProps, internalProps } = useSplitFieldProps(props, 'date'); const internalPropsWithDefaults = useFieldInternalPropsWithDefaults({ valueManager, diff --git a/packages/x-date-pickers/src/internals/index.ts b/packages/x-date-pickers/src/internals/index.ts index 4a43d51424cfa..7dd0cf5f7e6a2 100644 --- a/packages/x-date-pickers/src/internals/index.ts +++ b/packages/x-date-pickers/src/internals/index.ts @@ -163,6 +163,6 @@ export { useCalendarState } from '../DateCalendar/useCalendarState'; export { isInternalTimeView, isTimeView } from './utils/time-utils'; -export { getDateFieldInternalPropsDefaults } from '../valueManagers/getDateValueManager'; -export { getTimeFieldInternalPropsDefaults } from '../valueManagers/getTimeValueManager'; -export { getDateTimeFieldInternalPropsDefaults } from '../valueManagers/getDateTimeValueManager'; +export { getDateFieldInternalPropsDefaults } from '../valueManagers/useDateValueManager'; +export { getTimeFieldInternalPropsDefaults } from '../valueManagers/useTimeValueManager'; +export { getDateTimeFieldInternalPropsDefaults } from '../valueManagers/useDateTimeValueManager'; diff --git a/packages/x-date-pickers/src/valueManagers/index.ts b/packages/x-date-pickers/src/valueManagers/index.ts index 4ed034041e9aa..2d8945766f933 100644 --- a/packages/x-date-pickers/src/valueManagers/index.ts +++ b/packages/x-date-pickers/src/valueManagers/index.ts @@ -1,20 +1,23 @@ -export { getDateValueManager } from './getDateValueManager'; +export { useDateValueManager } from './useDateValueManager'; export type { DateFieldInternalProps, DateFieldInternalPropsWithDefaults, DateValueManager, -} from './getDateValueManager'; + UseDateValueManagerParameters, +} from './useDateValueManager'; -export { getTimeValueManager } from './getTimeValueManager'; +export { useTimeValueManager } from './useTimeValueManager'; export type { TimeFieldInternalProps, TimeFieldInternalPropsWithDefaults, TimeValueManager, -} from './getTimeValueManager'; + UseTimeValueManagerParameters, +} from './useTimeValueManager'; -export { getDateTimeValueManager } from './getDateTimeValueManager'; +export { useDateTimeValueManager } from './useDateTimeValueManager'; export type { DateTimeFieldInternalProps, DateTimeFieldInternalPropsWithDefaults, DateTimeValueManager, -} from './getDateTimeValueManager'; + UseDateTimeValueManagerParameters, +} from './useDateTimeValueManager'; diff --git a/packages/x-date-pickers/src/valueManagers/getDateTimeValueManager.ts b/packages/x-date-pickers/src/valueManagers/useDateTimeValueManager.ts similarity index 73% rename from packages/x-date-pickers/src/valueManagers/getDateTimeValueManager.ts rename to packages/x-date-pickers/src/valueManagers/useDateTimeValueManager.ts index b7e498b6ef24c..9a80ec81dd996 100644 --- a/packages/x-date-pickers/src/valueManagers/getDateTimeValueManager.ts +++ b/packages/x-date-pickers/src/valueManagers/useDateTimeValueManager.ts @@ -1,3 +1,4 @@ +import * as React from 'react'; import type { MakeOptional } from '@mui/x-internals/types'; import { applyDefaultDate } from '../internals/utils/date-utils'; import { @@ -15,36 +16,29 @@ import { ValidateDateTimePropsToDefault, } from '../validation/validateDateTime'; -export type DateTimeValueManager = - PickerValueManagerV8< - false, - TEnableAccessibleFieldDOMStructure, - DateTimeValidationError, - DateTimeFieldInternalProps, - DateTimeFieldInternalPropsWithDefaults - >; +export function useDateTimeValueManager( + parameters: UseDateTimeValueManagerParameters = {}, +): DateTimeValueManager { + const { enableAccessibleFieldDOMStructure = true as TEnableAccessibleFieldDOMStructure } = + parameters; -export interface DateTimeFieldInternalProps - extends MakeOptional< - UseFieldInternalProps, - 'format' - >, - ExportedValidateDateTimeProps, - AmPmProps {} + return React.useMemo( + () => ({ + legacyValueManager: singleItemValueManager, + fieldValueManager: singleItemFieldValueManager, + validator: validateDateTime, + valueType: 'date-time', + applyDefaultsToFieldInternalProps: ({ internalProps, utils, defaultDates }) => ({ + ...internalProps, + ...getDateTimeFieldInternalPropsDefaults({ internalProps, utils, defaultDates }), + }), + enableAccessibleFieldDOMStructure, + }), + [enableAccessibleFieldDOMStructure], + ); +} -export interface DateTimeFieldInternalPropsWithDefaults< - TEnableAccessibleFieldDOMStructure extends boolean, -> extends UseFieldInternalProps, - ValidateDateTimeProps {} - -type DateTimeFieldPropsToDefault = - | 'format' - // minTime and maxTime can still be undefined after applying defaults. - | 'minTime' - | 'maxTime' - | ValidateDateTimePropsToDefault; - -export const getDateTimeFieldInternalPropsDefaults = < +export function getDateTimeFieldInternalPropsDefaults< TEnableAccessibleFieldDOMStructure extends boolean, >({ defaultDates, @@ -58,7 +52,7 @@ export const getDateTimeFieldInternalPropsDefaults = < }): Pick< DateTimeFieldInternalPropsWithDefaults, DateTimeFieldPropsToDefault | 'disableIgnoringDatePartForTimeValidation' -> => { +> { const ampm = internalProps.ampm ?? utils.is12HourCycleInCurrentLocale(); const defaultFormat = ampm ? utils.formats.keyboardDateTime12h @@ -84,20 +78,39 @@ export const getDateTimeFieldInternalPropsDefaults = < minTime: internalProps.minDateTime ?? internalProps.minTime, maxTime: internalProps.maxDateTime ?? internalProps.maxTime, }; -}; +} -export const getDateTimeValueManager = ({ - enableAccessibleFieldDOMStructure = true as TEnableAccessibleFieldDOMStructure, -}: { - enableAccessibleFieldDOMStructure: TEnableAccessibleFieldDOMStructure | undefined; -}): DateTimeValueManager => ({ - legacyValueManager: singleItemValueManager, - fieldValueManager: singleItemFieldValueManager, - validator: validateDateTime, - valueType: 'date-time', - applyDefaultsToFieldInternalProps: ({ internalProps, utils, defaultDates }) => ({ - ...internalProps, - ...getDateTimeFieldInternalPropsDefaults({ internalProps, utils, defaultDates }), - }), - enableAccessibleFieldDOMStructure, -}); +export type DateTimeValueManager = + PickerValueManagerV8< + false, + TEnableAccessibleFieldDOMStructure, + DateTimeValidationError, + DateTimeFieldInternalProps, + DateTimeFieldInternalPropsWithDefaults + >; + +export interface DateTimeFieldInternalProps + extends MakeOptional< + UseFieldInternalProps, + 'format' + >, + ExportedValidateDateTimeProps, + AmPmProps {} + +export interface DateTimeFieldInternalPropsWithDefaults< + TEnableAccessibleFieldDOMStructure extends boolean, +> extends UseFieldInternalProps, + ValidateDateTimeProps {} + +type DateTimeFieldPropsToDefault = + | 'format' + // minTime and maxTime can still be undefined after applying defaults. + | 'minTime' + | 'maxTime' + | ValidateDateTimePropsToDefault; + +export interface UseDateTimeValueManagerParameters< + TEnableAccessibleFieldDOMStructure extends boolean, +> { + enableAccessibleFieldDOMStructure?: TEnableAccessibleFieldDOMStructure; +} diff --git a/packages/x-date-pickers/src/valueManagers/getDateValueManager.ts b/packages/x-date-pickers/src/valueManagers/useDateValueManager.ts similarity index 56% rename from packages/x-date-pickers/src/valueManagers/getDateValueManager.ts rename to packages/x-date-pickers/src/valueManagers/useDateValueManager.ts index 41ad3f5e5f305..9922e47269bc6 100644 --- a/packages/x-date-pickers/src/valueManagers/getDateValueManager.ts +++ b/packages/x-date-pickers/src/valueManagers/useDateValueManager.ts @@ -1,3 +1,4 @@ +import * as React from 'react'; import type { MakeOptional } from '@mui/x-internals/types'; import { applyDefaultDate } from '../internals/utils/date-utils'; import { @@ -14,6 +15,52 @@ import { ValidateDateProps, } from '../validation/validateDate'; +export function useDateValueManager( + parameters: UseDateValueManagerParameters = {}, +): DateValueManager { + const { enableAccessibleFieldDOMStructure = true as TEnableAccessibleFieldDOMStructure } = + parameters; + + return React.useMemo( + () => ({ + legacyValueManager: singleItemValueManager, + fieldValueManager: singleItemFieldValueManager, + validator: validateDate, + valueType: 'date', + applyDefaultsToFieldInternalProps: ({ internalProps, utils, defaultDates }) => ({ + ...internalProps, + ...getDateFieldInternalPropsDefaults({ defaultDates, utils, internalProps }), + }), + enableAccessibleFieldDOMStructure, + }), + [enableAccessibleFieldDOMStructure], + ); +} + +export function getDateFieldInternalPropsDefaults< + TEnableAccessibleFieldDOMStructure extends boolean, +>({ + defaultDates, + utils, + internalProps, +}: Pick & { + internalProps: Pick< + DateFieldInternalProps, + DateFieldPropsToDefault + >; +}): Pick< + DateFieldInternalPropsWithDefaults, + DateFieldPropsToDefault +> { + return { + format: internalProps.format ?? utils.formats.keyboardDate, + disablePast: internalProps.disablePast ?? false, + disableFuture: internalProps.disableFuture ?? false, + minDate: applyDefaultDate(utils, internalProps.minDate, defaultDates.minDate), + maxDate: applyDefaultDate(utils, internalProps.maxDate, defaultDates.maxDate), + }; +} + export type DateValueManager = PickerValueManagerV8< false, @@ -37,40 +84,6 @@ export interface DateFieldInternalPropsWithDefaults< type DateFieldPropsToDefault = 'format' | ValidateDatePropsToDefault; -export const getDateFieldInternalPropsDefaults = < - TEnableAccessibleFieldDOMStructure extends boolean, ->({ - defaultDates, - utils, - internalProps, -}: Pick & { - internalProps: Pick< - DateFieldInternalProps, - DateFieldPropsToDefault - >; -}): Pick< - DateFieldInternalPropsWithDefaults, - DateFieldPropsToDefault -> => ({ - format: internalProps.format ?? utils.formats.keyboardDate, - disablePast: internalProps.disablePast ?? false, - disableFuture: internalProps.disableFuture ?? false, - minDate: applyDefaultDate(utils, internalProps.minDate, defaultDates.minDate), - maxDate: applyDefaultDate(utils, internalProps.maxDate, defaultDates.maxDate), -}); - -export const getDateValueManager = ({ - enableAccessibleFieldDOMStructure = true as TEnableAccessibleFieldDOMStructure, -}: { - enableAccessibleFieldDOMStructure: TEnableAccessibleFieldDOMStructure | undefined; -}): DateValueManager => ({ - legacyValueManager: singleItemValueManager, - fieldValueManager: singleItemFieldValueManager, - validator: validateDate, - valueType: 'date', - applyDefaultsToFieldInternalProps: ({ internalProps, utils, defaultDates }) => ({ - ...internalProps, - ...getDateFieldInternalPropsDefaults({ defaultDates, utils, internalProps }), - }), - enableAccessibleFieldDOMStructure, -}); +export interface UseDateValueManagerParameters { + enableAccessibleFieldDOMStructure?: TEnableAccessibleFieldDOMStructure; +} diff --git a/packages/x-date-pickers/src/valueManagers/getTimeValueManager.ts b/packages/x-date-pickers/src/valueManagers/useTimeValueManager.ts similarity index 67% rename from packages/x-date-pickers/src/valueManagers/getTimeValueManager.ts rename to packages/x-date-pickers/src/valueManagers/useTimeValueManager.ts index 98ee9db402787..5ecc49c754dcf 100644 --- a/packages/x-date-pickers/src/valueManagers/getTimeValueManager.ts +++ b/packages/x-date-pickers/src/valueManagers/useTimeValueManager.ts @@ -1,3 +1,4 @@ +import * as React from 'react'; import type { MakeOptional } from '@mui/x-internals/types'; import { singleItemFieldValueManager, @@ -14,6 +15,52 @@ import { ValidateTimePropsToDefault, } from '../validation/validateTime'; +export function useTimeValueManager( + parameters: UseTimeValueManagerParameters = {}, +): TimeValueManager { + const { enableAccessibleFieldDOMStructure = true as TEnableAccessibleFieldDOMStructure } = + parameters; + + return React.useMemo( + () => ({ + legacyValueManager: singleItemValueManager, + fieldValueManager: singleItemFieldValueManager, + validator: validateTime, + valueType: 'time', + applyDefaultsToFieldInternalProps: ({ internalProps, utils }) => ({ + ...internalProps, + ...getTimeFieldInternalPropsDefaults({ utils, internalProps }), + }), + enableAccessibleFieldDOMStructure, + }), + [enableAccessibleFieldDOMStructure], + ); +} + +export function getTimeFieldInternalPropsDefaults< + TEnableAccessibleFieldDOMStructure extends boolean, +>({ + utils, + internalProps, +}: Pick & { + internalProps: Pick< + TimeFieldInternalProps, + TimeFieldPropsToDefault | 'ampm' + >; +}): Pick< + TimeFieldInternalPropsWithDefaults, + TimeFieldPropsToDefault +> { + const ampm = internalProps.ampm ?? utils.is12HourCycleInCurrentLocale(); + const defaultFormat = ampm ? utils.formats.fullTime12h : utils.formats.fullTime24h; + + return { + disablePast: internalProps.disablePast ?? false, + disableFuture: internalProps.disableFuture ?? false, + format: internalProps.format ?? defaultFormat, + }; +} + export type TimeValueManager = PickerValueManagerV8< false, @@ -38,42 +85,6 @@ export interface TimeFieldInternalPropsWithDefaults< type TimeFieldPropsToDefault = 'format' | ValidateTimePropsToDefault; -export const getTimeFieldInternalPropsDefaults = < - TEnableAccessibleFieldDOMStructure extends boolean, ->({ - utils, - internalProps, -}: Pick & { - internalProps: Pick< - TimeFieldInternalProps, - TimeFieldPropsToDefault | 'ampm' - >; -}): Pick< - TimeFieldInternalPropsWithDefaults, - TimeFieldPropsToDefault -> => { - const ampm = internalProps.ampm ?? utils.is12HourCycleInCurrentLocale(); - const defaultFormat = ampm ? utils.formats.fullTime12h : utils.formats.fullTime24h; - - return { - disablePast: internalProps.disablePast ?? false, - disableFuture: internalProps.disableFuture ?? false, - format: internalProps.format ?? defaultFormat, - }; -}; - -export const getTimeValueManager = ({ - enableAccessibleFieldDOMStructure = true as TEnableAccessibleFieldDOMStructure, -}: { - enableAccessibleFieldDOMStructure: TEnableAccessibleFieldDOMStructure | undefined; -}): TimeValueManager => ({ - legacyValueManager: singleItemValueManager, - fieldValueManager: singleItemFieldValueManager, - validator: validateTime, - valueType: 'time', - applyDefaultsToFieldInternalProps: ({ internalProps, utils }) => ({ - ...internalProps, - ...getTimeFieldInternalPropsDefaults({ utils, internalProps }), - }), - enableAccessibleFieldDOMStructure, -}); +export interface UseTimeValueManagerParameters { + enableAccessibleFieldDOMStructure?: TEnableAccessibleFieldDOMStructure; +} diff --git a/scripts/x-date-pickers-pro.exports.json b/scripts/x-date-pickers-pro.exports.json index dd17f62028b4e..9df86e6c0d5c2 100644 --- a/scripts/x-date-pickers-pro.exports.json +++ b/scripts/x-date-pickers-pro.exports.json @@ -181,12 +181,8 @@ { "name": "getDateRangeCalendarUtilityClass", "kind": "Variable" }, { "name": "getDateRangePickerDayUtilityClass", "kind": "Function" }, { "name": "getDateRangePickerToolbarUtilityClass", "kind": "Function" }, - { "name": "getDateRangeValueManager", "kind": "Variable" }, { "name": "getDateTimeRangePickerTabsUtilityClass", "kind": "Function" }, { "name": "getDateTimeRangePickerToolbarUtilityClass", "kind": "Function" }, - { "name": "getDateTimeRangeValueManager", "kind": "Variable" }, - { "name": "getDateTimeValueManager", "kind": "Variable" }, - { "name": "getDateValueManager", "kind": "Variable" }, { "name": "getDayCalendarSkeletonUtilityClass", "kind": "Variable" }, { "name": "getDigitalClockUtilityClass", "kind": "Function" }, { "name": "getMonthCalendarUtilityClass", "kind": "Function" }, @@ -202,8 +198,6 @@ { "name": "getPickersSectionListUtilityClass", "kind": "Function" }, { "name": "getPickersTextFieldUtilityClass", "kind": "Function" }, { "name": "getTimeClockUtilityClass", "kind": "Function" }, - { "name": "getTimeRangeValueManager", "kind": "Variable" }, - { "name": "getTimeValueManager", "kind": "Variable" }, { "name": "getYearCalendarUtilityClass", "kind": "Function" }, { "name": "InferError", "kind": "TypeAlias" }, { "name": "InferFieldSection", "kind": "TypeAlias" }, @@ -439,7 +433,15 @@ { "name": "UseClearableFieldSlots", "kind": "Interface" }, { "name": "UseDateFieldProps", "kind": "Interface" }, { "name": "UseDateRangeFieldProps", "kind": "Interface" }, + { "name": "useDateRangeValueManager", "kind": "Function" }, + { "name": "UseDateRangeValueManagerParameters", "kind": "Interface" }, { "name": "UseDateTimeFieldProps", "kind": "Interface" }, + { "name": "useDateTimeRangeValueManager", "kind": "Function" }, + { "name": "UseDateTimeRangeValueManagerParameters", "kind": "Interface" }, + { "name": "useDateTimeValueManager", "kind": "Function" }, + { "name": "UseDateTimeValueManagerParameters", "kind": "Interface" }, + { "name": "useDateValueManager", "kind": "Function" }, + { "name": "UseDateValueManagerParameters", "kind": "Interface" }, { "name": "UseMultiInputDateRangeFieldComponentProps", "kind": "TypeAlias" }, { "name": "UseMultiInputDateRangeFieldProps", "kind": "Interface" }, { "name": "UseMultiInputDateTimeRangeFieldComponentProps", "kind": "TypeAlias" }, @@ -455,6 +457,10 @@ { "name": "UseSingleInputTimeRangeFieldProps", "kind": "Interface" }, { "name": "useSplitFieldProps", "kind": "Variable" }, { "name": "UseTimeFieldProps", "kind": "Interface" }, + { "name": "useTimeRangeValueManager", "kind": "Function" }, + { "name": "UseTimeRangeValueManagerParameters", "kind": "Interface" }, + { "name": "useTimeValueManager", "kind": "Function" }, + { "name": "UseTimeValueManagerParameters", "kind": "Interface" }, { "name": "useValidation", "kind": "Function" }, { "name": "validateDate", "kind": "Variable" }, { "name": "ValidateDateProps", "kind": "Interface" }, diff --git a/scripts/x-date-pickers.exports.json b/scripts/x-date-pickers.exports.json index cf97e2c61f198..b4f7237e00671 100644 --- a/scripts/x-date-pickers.exports.json +++ b/scripts/x-date-pickers.exports.json @@ -118,8 +118,6 @@ { "name": "FieldSelectedSections", "kind": "TypeAlias" }, { "name": "FieldValueType", "kind": "TypeAlias" }, { "name": "getDateCalendarUtilityClass", "kind": "Variable" }, - { "name": "getDateTimeValueManager", "kind": "Variable" }, - { "name": "getDateValueManager", "kind": "Variable" }, { "name": "getDayCalendarSkeletonUtilityClass", "kind": "Variable" }, { "name": "getDigitalClockUtilityClass", "kind": "Function" }, { "name": "getMonthCalendarUtilityClass", "kind": "Function" }, @@ -132,7 +130,6 @@ { "name": "getPickersSectionListUtilityClass", "kind": "Function" }, { "name": "getPickersTextFieldUtilityClass", "kind": "Function" }, { "name": "getTimeClockUtilityClass", "kind": "Function" }, - { "name": "getTimeValueManager", "kind": "Variable" }, { "name": "getYearCalendarUtilityClass", "kind": "Function" }, { "name": "InferError", "kind": "TypeAlias" }, { "name": "InferFieldSection", "kind": "TypeAlias" }, @@ -319,12 +316,18 @@ { "name": "UseClearableFieldSlots", "kind": "Interface" }, { "name": "UseDateFieldProps", "kind": "Interface" }, { "name": "UseDateTimeFieldProps", "kind": "Interface" }, + { "name": "useDateTimeValueManager", "kind": "Function" }, + { "name": "UseDateTimeValueManagerParameters", "kind": "Interface" }, + { "name": "useDateValueManager", "kind": "Function" }, + { "name": "UseDateValueManagerParameters", "kind": "Interface" }, { "name": "useParsedFormat", "kind": "Variable" }, { "name": "usePickerContext", "kind": "Variable" }, { "name": "usePickerLayout", "kind": "ExportAssignment" }, { "name": "usePickerTranslations", "kind": "Variable" }, { "name": "useSplitFieldProps", "kind": "Variable" }, { "name": "UseTimeFieldProps", "kind": "Interface" }, + { "name": "useTimeValueManager", "kind": "Function" }, + { "name": "UseTimeValueManagerParameters", "kind": "Interface" }, { "name": "useValidation", "kind": "Function" }, { "name": "validateDate", "kind": "Variable" }, { "name": "ValidateDateProps", "kind": "Interface" }, From 4dbfd0345249418456798a67bc764ad709c8fdba Mon Sep 17 00:00:00 2001 From: flavien Date: Thu, 14 Nov 2024 13:23:53 +0100 Subject: [PATCH 16/35] xImprove internals --- .../src/internals/hooks/useField/useField.ts | 3 +- .../valueManagers/useDateTimeValueManager.ts | 37 +++++++++++-------- .../src/valueManagers/useDateValueManager.ts | 32 ++++++++-------- .../src/valueManagers/useTimeValueManager.ts | 30 ++++++++------- 4 files changed, 57 insertions(+), 45 deletions(-) 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 cb06f33d23417..1698a937c6aff 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useField.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useField.ts @@ -27,7 +27,8 @@ import { /** * Applies the default values to the field internal props. - * This will be moved inside `useField` and is only here to allow the migration to be done in smaller steps. + * This is a temporary hook that will be removed during a follow up when `useField` will receive the internal props without the defaults. + * It is only here to allow the migration to be done in smaller steps. */ export const useFieldInternalPropsWithDefaults = ({ valueManager, diff --git a/packages/x-date-pickers/src/valueManagers/useDateTimeValueManager.ts b/packages/x-date-pickers/src/valueManagers/useDateTimeValueManager.ts index 9a80ec81dd996..08b3b96cc0f9e 100644 --- a/packages/x-date-pickers/src/valueManagers/useDateTimeValueManager.ts +++ b/packages/x-date-pickers/src/valueManagers/useDateTimeValueManager.ts @@ -38,21 +38,14 @@ export function useDateTimeValueManager({ - defaultDates, - utils, - internalProps, -}: Pick & { - internalProps: Pick< - DateTimeFieldInternalProps, - DateTimeFieldPropsToDefault | 'minDateTime' | 'maxDateTime' | 'ampm' - >; -}): Pick< - DateTimeFieldInternalPropsWithDefaults, - DateTimeFieldPropsToDefault | 'disableIgnoringDatePartForTimeValidation' -> { +/** + * Private utility function to get the default internal props for the field with date time editing. + * Is used by the `useDateTimeValueManager` and `useDateTimeRangeValueManager` hooks. + */ +export function getDateTimeFieldInternalPropsDefaults( + parameters: GetDateTimeFieldInternalPropsDefaultsParameters, +): GetDateTimeFieldInternalPropsDefaultsReturnValue { + const { defaultDates, utils, internalProps } = parameters; const ampm = internalProps.ampm ?? utils.is12HourCycleInCurrentLocale(); const defaultFormat = ampm ? utils.formats.keyboardDateTime12h @@ -114,3 +107,17 @@ export interface UseDateTimeValueManagerParameters< > { enableAccessibleFieldDOMStructure?: TEnableAccessibleFieldDOMStructure; } + +interface GetDateTimeFieldInternalPropsDefaultsParameters + extends Pick { + internalProps: Pick< + DateTimeFieldInternalProps, + DateTimeFieldPropsToDefault | 'minDateTime' | 'maxDateTime' | 'ampm' + >; +} + +interface GetDateTimeFieldInternalPropsDefaultsReturnValue + extends Pick< + DateTimeFieldInternalPropsWithDefaults, + DateTimeFieldPropsToDefault | 'disableIgnoringDatePartForTimeValidation' + > {} diff --git a/packages/x-date-pickers/src/valueManagers/useDateValueManager.ts b/packages/x-date-pickers/src/valueManagers/useDateValueManager.ts index 9922e47269bc6..716a564615159 100644 --- a/packages/x-date-pickers/src/valueManagers/useDateValueManager.ts +++ b/packages/x-date-pickers/src/valueManagers/useDateValueManager.ts @@ -37,21 +37,15 @@ export function useDateValueManager({ - defaultDates, - utils, - internalProps, -}: Pick & { - internalProps: Pick< - DateFieldInternalProps, - DateFieldPropsToDefault - >; -}): Pick< - DateFieldInternalPropsWithDefaults, - DateFieldPropsToDefault -> { +/** + * Private utility function to get the default internal props for the fields with date editing. + * Is used by the `useDateValueManager` and `useDateRangeValueManager` hooks. + */ +export function getDateFieldInternalPropsDefaults( + parameters: GetDateFieldInternalPropsDefaultsParameters, +): GetDateFieldInternalPropsDefaultsReturnValue { + const { defaultDates, utils, internalProps } = parameters; + return { format: internalProps.format ?? utils.formats.keyboardDate, disablePast: internalProps.disablePast ?? false, @@ -87,3 +81,11 @@ type DateFieldPropsToDefault = 'format' | ValidateDatePropsToDefault; export interface UseDateValueManagerParameters { enableAccessibleFieldDOMStructure?: TEnableAccessibleFieldDOMStructure; } + +interface GetDateFieldInternalPropsDefaultsParameters + extends Pick { + internalProps: Pick, DateFieldPropsToDefault>; +} + +interface GetDateFieldInternalPropsDefaultsReturnValue + extends Pick, DateFieldPropsToDefault> {} diff --git a/packages/x-date-pickers/src/valueManagers/useTimeValueManager.ts b/packages/x-date-pickers/src/valueManagers/useTimeValueManager.ts index 5ecc49c754dcf..536f4a667ad4c 100644 --- a/packages/x-date-pickers/src/valueManagers/useTimeValueManager.ts +++ b/packages/x-date-pickers/src/valueManagers/useTimeValueManager.ts @@ -37,20 +37,14 @@ export function useTimeValueManager({ - utils, - internalProps, -}: Pick & { - internalProps: Pick< - TimeFieldInternalProps, - TimeFieldPropsToDefault | 'ampm' - >; -}): Pick< - TimeFieldInternalPropsWithDefaults, - TimeFieldPropsToDefault -> { +/** + * Private utility function to get the default internal props for the fields with time editing. + * Is used by the `useTimeValueManager` and `useTimeRangeValueManager` hooks. + */ +export function getTimeFieldInternalPropsDefaults( + parameters: GetTimeFieldInternalPropsDefaultsParameters, +): GetTimeFieldInternalPropsDefaultsReturnValue { + const { utils, internalProps } = parameters; const ampm = internalProps.ampm ?? utils.is12HourCycleInCurrentLocale(); const defaultFormat = ampm ? utils.formats.fullTime12h : utils.formats.fullTime24h; @@ -88,3 +82,11 @@ type TimeFieldPropsToDefault = 'format' | ValidateTimePropsToDefault; export interface UseTimeValueManagerParameters { enableAccessibleFieldDOMStructure?: TEnableAccessibleFieldDOMStructure; } + +interface GetTimeFieldInternalPropsDefaultsParameters + extends Pick { + internalProps: Pick, TimeFieldPropsToDefault | 'ampm'>; +} + +interface GetTimeFieldInternalPropsDefaultsReturnValue + extends Pick, TimeFieldPropsToDefault> {} From 9e7e9aa42ebd902e12558742683d16a81d583154 Mon Sep 17 00:00:00 2001 From: flavien Date: Thu, 14 Nov 2024 16:19:46 +0100 Subject: [PATCH 17/35] 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 f0b97d90b6c31..fac517d4fa24e 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 35047291abb3f..2b920f023710b 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 593db2b157909..bd8938b29937a 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 f0bc65fba454e..ea23ffc5dee44 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 08d460fdcdfdf..036c66e279574 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 18/35] 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 ed62ec94e5bde..be160a27c2e6c 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 19/35] [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 e2c6f46043057..d6e0d1db8b6fe 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 4a519d02f7909..2584a13756edf 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 542449ecbd806..765d9e982a81b 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 ab660eb554b93..e102430740bdc 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 745dc885db66c..6465a9a84a039 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 b9a10aac26234..0cd7c557d3a8b 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 fddda2042f82b..6c63788ef095b 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 3545b5bac0a5b..3ce1d19e79669 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 a147a9b74c467..5ef6c1e18d3eb 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 fc2170ffbd298..87530990c3a87 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 ab851fd9258b1..e6224b5598518 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 56b9c54f33c01..bb52431010499 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 502bdd7ec9c09..95819b45ed99f 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 8a8b7511afb39..97a25bbfc0363 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 51c6444ec1640..e38e7f86edc4c 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 70a5d85c1ab25..6a53307f3dc31 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 7b7b27290afee..e27298dacae1d 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 6bf85b33aa76a..c8273a8875669 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 80c20357f818a..9ee6734f43842 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 902607f0b4bd8..8ddb6b01c5cc3 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 ce1823f6ce4f9..b2443301cad98 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 59e088e5d2807..add2fd7dede45 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 cbe53bb4fe238..1418cf907e00a 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 64329dc404818..23fd6ab658165 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 08acff4c444d8..98a3cad44b438 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 3cd1b911bece8..6706455ebb5b6 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 6bd4992c9ce64..d372b04bdfc0f 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 a18b2ace56c77..1d06e31bfb380 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 f1c1c3fa98469..37e3b9e9be0b8 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 6f45cc30f39fd..82670cc2d753e 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 8279db1828a3c..23adb960d841c 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 560915cf7b4bd..32e3b7676d7d8 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 c0c818dd9208e..c3898c0d4a927 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 2c4e917acab53..d9e6f2cbf77d5 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 5d8c4fc3e8957..783e9b93b4674 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 25b17636d1fec..120e10742bd03 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 2789cb593ce70..d2b097c5e7635 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 958a4ac0a4e33..179b58765222e 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 872b76d0f00be..483f9c0016493 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 98339e02b0123..fbfcdcd2781ec 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 a1f77f36f12ec..2c656b2b01cb2 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 9b55410b01e36..5dace702ff425 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 2f26cd38a3439..e265e0d208c11 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 3a416080312f8..2e9251b190fca 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 c634a59038af6..2b59bb35d2d46 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 1c0dd01f9f320..fb99ace144ee2 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 19f52eff4cc3d..66c11b29ef3e0 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 188921e6e3e93..7366b804e1847 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 75d467ebf5b72..6ca16f44532e0 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 734ddaea4a754..c8a9df4ce611c 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 75fa5a6586826..b6959d39ed3f4 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 3a4135e7b4d3d..6c6379c2b433d 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 ca369afa41e31..daf02127d032b 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 6d3d87856f63f..76bb9c9804dff 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 855dc8010b899..013359cc8f084 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 80874d788a898..0fcda265e6613 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 4c44f8e7fab27..b098d57cfb0f3 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 c4d6e1d2789bf..048716130d041 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 b916bfb9b12ab..509f8246c2cef 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 832d51e38e2bd..653a818b33b66 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 bf05e333f0c64..00e362c8e0674 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 575c9fd41bea8..d3f2d3127fd93 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 6e24f1f599b76..89c2044978b45 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 69964b4838ba0..f9255bdd65af6 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 d26bc2f32edfb..4c93efaf101e3 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 25c6683aac2f5..dfdd329087ff3 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 791b84f5be65e..979adfea04843 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 f40358155963b..21c28526cdc94 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 2d43eca365209..05cd5521a2ce9 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 2650507d38b53..90a5dc4057ec1 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 1cf2f51022638..c3c9fb73c19d5 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 f4e18707f6536..3531d3a14dd9d 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 0848f38272ac4..c533888fd193c 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 009953d70c845..02f127c0c715d 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 ac6817f6a3d95..90d138c59c32e 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 75ae6ce7b018b..e1b71090039e7 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 fc8a131f2997e..1c3a0b1469dd2 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 da7292cfe1201..53079837d53c5 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 2e2dc22065a56..1fbed22a25d09 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 6638f805cab9a..ff5b9d8524cd9 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 2a19d339bd14d..a1b94ce63cd70 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 2c1933eae3e61..a55e35d42c97f 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 63018d7341092..ee9f8f61066f7 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 4b016b05104d0..bf22eeb38d5d5 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 fac517d4fa24e..9a7c9443cff3d 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 2b920f023710b..8a761aa254fa2 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 bd8938b29937a..dbe5d3abb8372 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 65c7b308ac578..b5fb7e3f74f05 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 1f48ae602878a..7b15ee812462e 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 2eb4995fb5110..699445f0a0168 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 13459313a1c3a..3499db3e1c1a9 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 898bf1253a072..4b71d9e2ecb74 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 85c0e833d4a13..8befe74f5cf46 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 75fe7c3b90752..b4c62b6437d0a 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 26f59a768b5da..dddac7c0a86bc 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 5957fc1a0cda9..c0a227ac3f982 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 6bd2c88f67691..171ad2c8c7cdb 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 8eebc73534048..59009cfebe630 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 0d9c9e8e349f4..0e29e30990cc1 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 ea23ffc5dee44..648dc4c4f277a 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 02d776903e093..44effa217b603 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 25543de73599d..743360be7d7d7 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 5ced51e9309a9..2f5cd591cd86a 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 02cef653920eb..f1c2c33ee4390 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 fabacf8c6a777..022149cfdc804 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 20719cfa50294..0993722c40b47 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 f46c93cce9010..0a79fa946a2f9 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 21dd20cd0e5f7..57e48ff53e200 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 6dd33c79d5d5c..c1441c9e3f0ea 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 358c87124e489..42d7b01fe3a82 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 068470508c2fa..6efb2dc1d7e1e 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 c652e237b461e..bbccb00651e43 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 4b9d5ff0d1381..ea403cfb5fca7 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 ce01d42a097d8..769d39e4e03c6 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 62bb0b930b59a..20002236886fe 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 8a5ecfac9f6f0..876545ded3c44 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 7ee9a0ef256d5..a4de539e0e8e1 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 d95b01f4b62d0..bd3b0b585352b 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 4bf130b7c2ae1..24682f5c735c1 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 60112b9b92da0..1013150e535b1 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 e91125595b6ee..b232a1882948d 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 02328b6e28e3b..813f33f9c062e 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 155d79db0849f..f5f035ca05f00 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 7ef97fbb54352..1c79140c48074 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 b5d78017d6afe..3e7ba8dd66359 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 886c6c9ed47d9..164f5bd17505c 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 35c1f980b55d4..75528d45cd42b 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 ca9ad873cd199..700a92a4156ff 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 dd2e6132bb8f1..1e17db35eed6b 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 845d744cfba51..c4f5013abc991 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 0519f7dc68996..90e9db74e87dc 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 c53ef9a11e713..2a75c950b93df 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 103e2428b01b1..cdc1c91a5abe8 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 b66a0c6a6d6eb..30ae63e192e42 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 52dbfe9a23c7d..4428a5c28a143 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 9107bdf8486d7..5cff45ba0c9ce 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 5c726987d3202..9f9a3a8d903bc 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 68295c6856f15..60123eb0d570b 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 469fcad2a4753..3ab127d6bafa6 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 1dcd9ed1628c9..2c9fbc0e84176 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 093f425d93f76..007753e0ead31 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 bddf6e3e219a9..9fb75c8dc4355 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 1b6c822bb444e..3a2f284211398 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 0afc8292e9f11..d7a5e18afdbb1 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 a169f0faf6180..301852e0ff4dd 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 0123d9ce3781e..44341686e4fef 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 a315c7257e7f0..0dbaf87b92711 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 9cf6545bbce72..140d667a2938f 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 d0335a2e37789..b84ff450fa901 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 907332c7fd713..9767d48f47d14 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 dfc22c31bbac5..515cbd0b2639c 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 601d593fe0b61..51a88016a8dc3 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 27f8f244d4fde..6b3b60669aed6 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 192d9c72cd516..03ce715b6e850 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 9ed56ef9f2a4b..bbc3c77e1bc19 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 f8660a447a9e0..ff73b36126e98 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 b661a114096af..448cbb8fe5996 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 9c868b0c81d4a..fd9acbb88680c 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 cfb3e7c4abe35..78d469890463c 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 e72875c21e9fd..555db1d6308fb 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 157777b5384fd..8bec0c4e9afa6 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 50bbcd8aeb15a..70229c56019fb 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 2bebe3892fdb8..65324fa47abdc 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 5c890b8f4b467..a348d3a396b65 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 b5f4f410ad9a0..1626c95da3e1c 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 5fdf2c07dfed8..719a6561ca6a5 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 93dc8f1af11ca..993f245c6c273 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 6d9fa0bcb9a2e..b4d04f06e66ee 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 08fcf80e1c30e..f6b06d3654562 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 807204616ed34..c1886c2300b60 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 1daec2db78f4c..2c9bb1f17f5bd 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 5014acb9c9999..bb05d474abfc1 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 f6361e499e71b..ddd340c01e6d7 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 0853a147a7e31..167c7854c241c 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 be160a27c2e6c..864e50dd887ea 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 036c66e279574..599dc21017fcc 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 2da95885a89d4..2444ecb61a97d 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 a72efbd8592ee..aecb74e3eae81 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 a0ef4482a46f2..7b2f09a9f64ae 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 a493cc36553c4..b26dc412b36c5 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 0c45e50833b93..f1d7fb1465aea 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 ffb08bbc77661..b7476ca12f049 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 1a72e6c59ba2a..c4fef0bdaa157 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 6a055a0ba22e7..81583861b148d 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 ab81380528976..b1c70623cc723 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 371c126d3c76f..e5500f488ec96 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 5c476694b18af..ae9a8d91ad703 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 6e2972c327b5c..55f14ebdce1ac 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 735751aec51a4..04833a901699c 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 19c3066219df2..f5bdfe45dadea 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 598b7af37787f..f9708c1f63632 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 cf6995363110f..6ee413e372a9f 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 b827b21c888f8..50f5e8437246b 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 87e626d7aa671..d28c21149e0e1 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 4e2e1aed3ab80..7565a92501cfa 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 511a4935eeb3e..c1cb3b358d3fe 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 6bf1a2eadf205..7497f806866c1 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 c114367e9a20b..8a5601814ce2f 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 ce2878952e41e..052d39f1e032a 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 20/35] 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 0dbaf87b92711..7caf93b73b279 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 78df9d0f98443d89957f9a927d803bc74f222196 Mon Sep 17 00:00:00 2001 From: flavien Date: Mon, 18 Nov 2024 09:48:45 +0100 Subject: [PATCH 21/35] Fix --- .../src/valueManagers/useDateRangeValueManager.ts | 1 + .../src/valueManagers/useDateTimeRangeValueManager.ts | 1 + .../src/valueManagers/useTimeRangeValueManager.ts | 1 + .../x-date-pickers/src/valueManagers/useDateTimeValueManager.ts | 1 + packages/x-date-pickers/src/valueManagers/useDateValueManager.ts | 1 + packages/x-date-pickers/src/valueManagers/useTimeValueManager.ts | 1 + 6 files changed, 6 insertions(+) diff --git a/packages/x-date-pickers-pro/src/valueManagers/useDateRangeValueManager.ts b/packages/x-date-pickers-pro/src/valueManagers/useDateRangeValueManager.ts index 7610fe7f21ef0..03a093f1a5783 100644 --- a/packages/x-date-pickers-pro/src/valueManagers/useDateRangeValueManager.ts +++ b/packages/x-date-pickers-pro/src/valueManagers/useDateRangeValueManager.ts @@ -1,3 +1,4 @@ +'use client'; import * as React from 'react'; import type { MakeOptional } from '@mui/x-internals/types'; import { PickerValueManagerV8 } from '@mui/x-date-pickers/models'; diff --git a/packages/x-date-pickers-pro/src/valueManagers/useDateTimeRangeValueManager.ts b/packages/x-date-pickers-pro/src/valueManagers/useDateTimeRangeValueManager.ts index 7e0fdbc2f9976..abb9c200d5009 100644 --- a/packages/x-date-pickers-pro/src/valueManagers/useDateTimeRangeValueManager.ts +++ b/packages/x-date-pickers-pro/src/valueManagers/useDateTimeRangeValueManager.ts @@ -1,3 +1,4 @@ +'use client'; import * as React from 'react'; import type { MakeOptional } from '@mui/x-internals/types'; import { PickerValueManagerV8 } from '@mui/x-date-pickers/models'; diff --git a/packages/x-date-pickers-pro/src/valueManagers/useTimeRangeValueManager.ts b/packages/x-date-pickers-pro/src/valueManagers/useTimeRangeValueManager.ts index 09b5da6fa91e5..572ce26a9009b 100644 --- a/packages/x-date-pickers-pro/src/valueManagers/useTimeRangeValueManager.ts +++ b/packages/x-date-pickers-pro/src/valueManagers/useTimeRangeValueManager.ts @@ -1,3 +1,4 @@ +'use client'; import * as React from 'react'; import type { MakeOptional } from '@mui/x-internals/types'; import { PickerValueManagerV8 } from '@mui/x-date-pickers/models'; diff --git a/packages/x-date-pickers/src/valueManagers/useDateTimeValueManager.ts b/packages/x-date-pickers/src/valueManagers/useDateTimeValueManager.ts index acec56c711f08..91675de018d1f 100644 --- a/packages/x-date-pickers/src/valueManagers/useDateTimeValueManager.ts +++ b/packages/x-date-pickers/src/valueManagers/useDateTimeValueManager.ts @@ -1,3 +1,4 @@ +'use client'; import * as React from 'react'; import type { MakeOptional } from '@mui/x-internals/types'; import { applyDefaultDate } from '../internals/utils/date-utils'; diff --git a/packages/x-date-pickers/src/valueManagers/useDateValueManager.ts b/packages/x-date-pickers/src/valueManagers/useDateValueManager.ts index cf4fde33d46fd..73a62aef6dbaa 100644 --- a/packages/x-date-pickers/src/valueManagers/useDateValueManager.ts +++ b/packages/x-date-pickers/src/valueManagers/useDateValueManager.ts @@ -1,3 +1,4 @@ +'use client'; import * as React from 'react'; import type { MakeOptional } from '@mui/x-internals/types'; import { applyDefaultDate } from '../internals/utils/date-utils'; diff --git a/packages/x-date-pickers/src/valueManagers/useTimeValueManager.ts b/packages/x-date-pickers/src/valueManagers/useTimeValueManager.ts index 2a0bf8bf58df6..e80c29394d87c 100644 --- a/packages/x-date-pickers/src/valueManagers/useTimeValueManager.ts +++ b/packages/x-date-pickers/src/valueManagers/useTimeValueManager.ts @@ -1,3 +1,4 @@ +'use client'; import * as React from 'react'; import type { MakeOptional } from '@mui/x-internals/types'; import { From 25bb456ebc7bd1b276588683e0efe3e0b4e0b707 Mon Sep 17 00:00:00 2001 From: flavien Date: Mon, 18 Nov 2024 10:08:47 +0100 Subject: [PATCH 22/35] Fix --- .../SingleInputTimeRangeField/useSingleInputTimeRangeField.ts | 2 +- packages/x-date-pickers/src/DateTimeField/useDateTimeField.ts | 2 +- packages/x-date-pickers/src/TimeField/useTimeField.ts | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/useSingleInputTimeRangeField.ts b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/useSingleInputTimeRangeField.ts index 5d0905484bdc2..986b6ce25d554 100644 --- a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/useSingleInputTimeRangeField.ts +++ b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/useSingleInputTimeRangeField.ts @@ -15,7 +15,7 @@ export const useSingleInputTimeRangeField = < props: TAllProps, ) => { const valueManager = useTimeRangeValueManager(props); - const { forwardedProps, internalProps } = useSplitFieldProps(props, 'date'); + const { forwardedProps, internalProps } = useSplitFieldProps(props, 'time'); const internalPropsWithDefaults = useFieldInternalPropsWithDefaults({ valueManager, internalProps, diff --git a/packages/x-date-pickers/src/DateTimeField/useDateTimeField.ts b/packages/x-date-pickers/src/DateTimeField/useDateTimeField.ts index ae88cccbbf82a..82e4943988afa 100644 --- a/packages/x-date-pickers/src/DateTimeField/useDateTimeField.ts +++ b/packages/x-date-pickers/src/DateTimeField/useDateTimeField.ts @@ -13,7 +13,7 @@ export const useDateTimeField = < ) => { const valueManager = useDateTimeValueManager(props); - const { forwardedProps, internalProps } = useSplitFieldProps(props, 'date'); + const { forwardedProps, internalProps } = useSplitFieldProps(props, 'date-time'); const internalPropsWithDefaults = useFieldInternalPropsWithDefaults({ valueManager, internalProps, diff --git a/packages/x-date-pickers/src/TimeField/useTimeField.ts b/packages/x-date-pickers/src/TimeField/useTimeField.ts index a32578ec57383..3e3fb9dedfff7 100644 --- a/packages/x-date-pickers/src/TimeField/useTimeField.ts +++ b/packages/x-date-pickers/src/TimeField/useTimeField.ts @@ -12,7 +12,7 @@ export const useTimeField = < props: TAllProps, ) => { const valueManager = useTimeValueManager(props); - const { forwardedProps, internalProps } = useSplitFieldProps(props, 'date'); + const { forwardedProps, internalProps } = useSplitFieldProps(props, 'time'); const internalPropsWithDefaults = useFieldInternalPropsWithDefaults({ valueManager, internalProps, From 2bab7849ed9f7f19b3f48f38b482460ef321081f Mon Sep 17 00:00:00 2001 From: flavien Date: Mon, 18 Nov 2024 11:22:07 +0100 Subject: [PATCH 23/35] 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 e7469abadfdac..e04d358c59e7b 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 24/35] 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 e04d358c59e7b..fc9e06959a390 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 b866d816e45c1ca7e55ea5496f7dea3d378b932f Mon Sep 17 00:00:00 2001 From: flavien Date: Mon, 18 Nov 2024 11:37:55 +0100 Subject: [PATCH 25/35] Remove useless changes --- .../useMultiInputDateTimeRangeField.ts | 26 +++++++++---------- .../useMultiInputTimeRangeField.ts | 26 +++++++++---------- 2 files changed, 26 insertions(+), 26 deletions(-) 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 ea1b082f31b14..f1aac4e6c62dd 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 @@ -76,21 +76,21 @@ export const useMultiInputDateTimeRangeField = < const buildChangeHandler = ( index: 0 | 1, ): FieldChangeHandler => { - return (newDateTime, rawContext) => { - const newDateTimeRange: PickerRangeValue = - index === 0 ? [newDateTime, value[1]] : [value[0], newDateTime]; + return (newDate, rawContext) => { + const newDateRange: PickerRangeValue = + index === 0 ? [newDate, value[1]] : [value[0], newDate]; const context: FieldChangeHandlerContext = { ...rawContext, - validationError: getValidationErrorForNewValue(newDateTimeRange), + validationError: getValidationErrorForNewValue(newDateRange), }; - handleValueChange(newDateTimeRange, context); + handleValueChange(newDateRange, context); }; }; - const handleStartDateTimeChange = useEventCallback(buildChangeHandler(0)); - const handleEndDateTimeChange = useEventCallback(buildChangeHandler(1)); + const handleStartDateChange = useEventCallback(buildChangeHandler(0)); + const handleEndDateChange = useEventCallback(buildChangeHandler(1)); const selectedSectionsResponse = useMultiInputFieldSelectedSections({ selectedSections, @@ -111,7 +111,7 @@ export const useMultiInputDateTimeRangeField = < timezone, value: valueProp === undefined ? undefined : valueProp[0], defaultValue: defaultValue === undefined ? undefined : defaultValue[0], - onChange: handleStartDateTimeChange, + onChange: handleStartDateChange, enableAccessibleFieldDOMStructure, autoFocus, // Do not add on end field. }; @@ -128,23 +128,23 @@ export const useMultiInputDateTimeRangeField = < timezone, value: valueProp === undefined ? undefined : valueProp[1], defaultValue: defaultValue === undefined ? undefined : defaultValue[1], - onChange: handleEndDateTimeChange, + onChange: handleEndDateChange, enableAccessibleFieldDOMStructure, }; - const startDateTimeResponse = useDateTimeField< + const startDateResponse = useDateTimeField< TEnableAccessibleFieldDOMStructure, typeof startFieldProps >(startFieldProps) as UseFieldResponse; - const endDateTimeResponse = useDateTimeField< + const endDateResponse = useDateTimeField< TEnableAccessibleFieldDOMStructure, typeof endFieldProps >(endFieldProps) as UseFieldResponse; /* TODO: Undo this change when a clearable behavior for multiple input range fields is implemented */ return { - startDate: excludeProps(startDateTimeResponse, ['clearable', 'onClear']), - endDate: excludeProps(endDateTimeResponse, ['clearable', 'onClear']), + startDate: excludeProps(startDateResponse, ['clearable', 'onClear']), + endDate: excludeProps(endDateResponse, ['clearable', 'onClear']), }; }; 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 e207632c5e1d5..8941239f8cd3a 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 @@ -76,21 +76,21 @@ export const useMultiInputTimeRangeField = < const buildChangeHandler = ( index: 0 | 1, ): FieldChangeHandler => { - return (newTime, rawContext) => { - const newTimeRange: PickerRangeValue = - index === 0 ? [newTime, value[1]] : [value[0], newTime]; + return (newDate, rawContext) => { + const newDateRange: PickerRangeValue = + index === 0 ? [newDate, value[1]] : [value[0], newDate]; const context: FieldChangeHandlerContext = { ...rawContext, - validationError: getValidationErrorForNewValue(newTimeRange), + validationError: getValidationErrorForNewValue(newDateRange), }; - handleValueChange(newTimeRange, context); + handleValueChange(newDateRange, context); }; }; - const handleStartTimeChange = useEventCallback(buildChangeHandler(0)); - const handleEndTimeChange = useEventCallback(buildChangeHandler(1)); + const handleStartDateChange = useEventCallback(buildChangeHandler(0)); + const handleEndDateChange = useEventCallback(buildChangeHandler(1)); const selectedSectionsResponse = useMultiInputFieldSelectedSections({ selectedSections, @@ -111,7 +111,7 @@ export const useMultiInputTimeRangeField = < timezone, value: valueProp === undefined ? undefined : valueProp[0], defaultValue: defaultValue === undefined ? undefined : defaultValue[0], - onChange: handleStartTimeChange, + onChange: handleStartDateChange, enableAccessibleFieldDOMStructure, autoFocus, // Do not add on end field. }; @@ -128,22 +128,22 @@ export const useMultiInputTimeRangeField = < timezone, value: valueProp === undefined ? undefined : valueProp[1], defaultValue: defaultValue === undefined ? undefined : defaultValue[1], - onChange: handleEndTimeChange, + onChange: handleEndDateChange, enableAccessibleFieldDOMStructure, }; - const startTimeResponse = useTimeField< + const startDateResponse = useTimeField< TEnableAccessibleFieldDOMStructure, typeof startFieldProps >(startFieldProps) as UseFieldResponse; - const endTimeResponse = useTimeField( + const endDateResponse = useTimeField( endFieldProps, ) as UseFieldResponse; /* TODO: Undo this change when a clearable behavior for multiple input range fields is implemented */ return { - startDate: excludeProps(startTimeResponse, ['clearable', 'onClear']), - endDate: excludeProps(endTimeResponse, ['clearable', 'onClear']), + startDate: excludeProps(startDateResponse, ['clearable', 'onClear']), + endDate: excludeProps(endDateResponse, ['clearable', 'onClear']), }; }; From c39d33fe3b87220ac9a2a4647092a34ec066b816 Mon Sep 17 00:00:00 2001 From: flavien Date: Mon, 18 Nov 2024 11:40:32 +0100 Subject: [PATCH 26/35] Fix --- .../tests/rowSelection.DataGridPro.test.tsx | 64 ------------------- .../src/tests/rowSelection.DataGrid.test.tsx | 24 ------- 2 files changed, 88 deletions(-) diff --git a/packages/x-data-grid-pro/src/tests/rowSelection.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/rowSelection.DataGridPro.test.tsx index ad5d41c588c75..fdf3990d7767d 100644 --- a/packages/x-data-grid-pro/src/tests/rowSelection.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/rowSelection.DataGridPro.test.tsx @@ -11,7 +11,6 @@ import { GridRowSelectionModel, GridRowsProp, GridColDef, - GridFilterModel, } from '@mui/x-data-grid-pro'; import { getBasicGridData } from '@mui/x-data-grid-generator'; @@ -195,69 +194,6 @@ describe(' - Row selection', () => { expect(apiRef.current.getSelectedRows()).to.have.keys([1]); }); - // Context: https://github.com/mui/mui-x/issues/15045 - it('should not throw when using `isRowSelectable` and `keepNonExistentRowsSelected`', () => { - function TestDataGrid() { - const [gridRows, setRows] = React.useState(rows); - const onFilterChange = React.useCallback( - (filterModel: GridFilterModel) => { - if (filterModel.items?.length === 0) { - return; - } - - const filteredRows = rows.filter((row) => { - return row.jobTitle.includes(filterModel.items[0].value); - }); - setRows(filteredRows); - }, - [setRows], - ); - return ( - true} - rows={gridRows} - onFilterModelChange={onFilterChange} - keepNonExistentRowsSelected - /> - ); - } - render(); - - // Select `Thomas` - fireEvent.click( - screen.getAllByRole('checkbox', { - name: /select row/i, - })[1], - ); - - expect(apiRef.current.getSelectedRows()).to.have.length(1); - expect(Array.from(apiRef.current.getSelectedRows())[0][0]).to.equal(1); - - act(() => { - apiRef.current.setFilterModel({ - items: [{ field: 'jobTitle', value: 'Head of Human Resources', operator: 'contains' }], - }); - }); - - expect(apiRef.current.getSelectedRows()).to.have.length(1); - expect(Array.from(apiRef.current.getSelectedRows())[0][0]).to.equal(1); - }); - - // Context: https://github.com/mui/mui-x/issues/15068 - it('should not call `onRowSelectionModelChange` when adding a new row', () => { - const onRowSelectionModelChange = spy(); - const { setProps } = render( - , - ); - - act(() => { - setProps({ rows: [...rows, { id: 15, hierarchy: ['New'], jobTitle: 'Test Job' }] }); - }); - - expect(onRowSelectionModelChange.callCount).to.equal(0); - }); - it('should put the parent into indeterminate if some but not all the children are selected', () => { render(); diff --git a/packages/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx b/packages/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx index e549ffd113009..4ad235c405e8c 100644 --- a/packages/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx +++ b/packages/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx @@ -18,7 +18,6 @@ import { useGridApiRef, GridApi, GridPreferencePanelsValue, - GridRowSelectionModel, } from '@mui/x-data-grid'; import { getCell, @@ -66,29 +65,6 @@ describe(' - Row selection', () => { ); } - // Context: https://github.com/mui/mui-x/issues/15079 - it('should not call `onRowSelectionModelChange` twice when using filterMode="server"', () => { - const onRowSelectionModelChange = spy(); - function TestDataGrid() { - const [, setRowSelectionModel] = React.useState([]); - const handleRowSelectionModelChange = React.useCallback((model: GridRowSelectionModel) => { - setRowSelectionModel(model); - onRowSelectionModelChange(model); - }, []); - return ( - row.id} - checkboxSelection - onRowSelectionModelChange={handleRowSelectionModelChange} - filterMode="server" - /> - ); - } - render(); - fireEvent.click(getCell(0, 0).querySelector('input')!); - expect(onRowSelectionModelChange.callCount).to.equal(1); - }); - describe('prop: checkboxSelection = false (single selection)', () => { it('should select one row at a time on click WITHOUT ctrl or meta pressed', () => { render(); From 04297177bf1a6042d7e66f13bac95275df577427 Mon Sep 17 00:00:00 2001 From: flavien Date: Mon, 18 Nov 2024 12:00:54 +0100 Subject: [PATCH 27/35] Work --- .../useSingleInputDateRangeField.ts | 14 +++---- .../useSingleInputDateTimeRangeField.ts | 14 +++---- .../useSingleInputTimeRangeField.ts | 14 +++---- packages/x-date-pickers-pro/src/index.ts | 2 +- .../useMultiInputDateRangeField.ts | 6 +-- .../useMultiInputDateTimeRangeField.ts | 6 +-- .../useMultiInputTimeRangeField.ts | 6 +-- .../x-date-pickers-pro/src/managers/index.ts | 23 ++++++++++++ .../useDateRangeManager.ts} | 30 +++++++-------- .../useDateTimeRangeManager.ts} | 18 ++++----- .../useTimeRangeManager.ts} | 30 +++++++-------- .../src/valueManagers/index.ts | 23 ------------ .../src/DateField/useDateField.ts | 14 +++---- .../src/DateTimeField/useDateTimeField.ts | 15 ++++---- .../src/TimeField/useTimeField.ts | 14 +++---- packages/x-date-pickers/src/index.ts | 2 +- .../src/internals/hooks/useField/useField.ts | 12 +++--- .../x-date-pickers/src/internals/index.ts | 6 +-- .../models/{valueManager.ts => manager.ts} | 12 +++--- packages/x-date-pickers/src/managers/index.ts | 23 ++++++++++++ .../useDateManager.ts} | 29 +++++++-------- .../useDateTimeManager.ts} | 31 +++++++--------- .../useTimeManager.ts} | 29 +++++++-------- .../models/{valueManager.ts => manager.ts} | 13 +++---- .../x-date-pickers/src/valueManagers/index.ts | 23 ------------ scripts/x-date-pickers-pro.exports.json | 37 +++++++++---------- scripts/x-date-pickers.exports.json | 19 +++++----- 27 files changed, 224 insertions(+), 241 deletions(-) create mode 100644 packages/x-date-pickers-pro/src/managers/index.ts rename packages/x-date-pickers-pro/src/{valueManagers/useDateRangeValueManager.ts => managers/useDateRangeManager.ts} (69%) rename packages/x-date-pickers-pro/src/{valueManagers/useDateTimeRangeValueManager.ts => managers/useDateTimeRangeManager.ts} (81%) rename packages/x-date-pickers-pro/src/{valueManagers/useTimeRangeValueManager.ts => managers/useTimeRangeManager.ts} (68%) delete mode 100644 packages/x-date-pickers-pro/src/valueManagers/index.ts rename packages/x-date-pickers/src/internals/models/{valueManager.ts => manager.ts} (68%) create mode 100644 packages/x-date-pickers/src/managers/index.ts rename packages/x-date-pickers/src/{valueManagers/useDateValueManager.ts => managers/useDateManager.ts} (77%) rename packages/x-date-pickers/src/{valueManagers/useDateTimeValueManager.ts => managers/useDateTimeManager.ts} (80%) rename packages/x-date-pickers/src/{valueManagers/useTimeValueManager.ts => managers/useTimeManager.ts} (76%) rename packages/x-date-pickers/src/models/{valueManager.ts => manager.ts} (78%) delete mode 100644 packages/x-date-pickers/src/valueManagers/index.ts diff --git a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/useSingleInputDateRangeField.ts b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/useSingleInputDateRangeField.ts index bf25fedb7c62c..8f58505dc267b 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/useSingleInputDateRangeField.ts +++ b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/useSingleInputDateRangeField.ts @@ -6,7 +6,7 @@ import { } from '@mui/x-date-pickers/internals'; import { useSplitFieldProps } from '@mui/x-date-pickers/hooks'; import { UseSingleInputDateRangeFieldProps } from './SingleInputDateRangeField.types'; -import { useDateRangeValueManager } from '../valueManagers'; +import { useDateRangeManager } from '../managers'; export const useSingleInputDateRangeField = < TEnableAccessibleFieldDOMStructure extends boolean, @@ -14,10 +14,10 @@ export const useSingleInputDateRangeField = < >( props: TAllProps, ) => { - const valueManager = useDateRangeValueManager(props); + const manager = useDateRangeManager(props); const { forwardedProps, internalProps } = useSplitFieldProps(props, 'date'); const internalPropsWithDefaults = useFieldInternalPropsWithDefaults({ - valueManager, + manager, internalProps, }); @@ -29,9 +29,9 @@ export const useSingleInputDateRangeField = < >({ forwardedProps, internalProps: internalPropsWithDefaults, - valueManager: valueManager.legacyValueManager, - fieldValueManager: valueManager.fieldValueManager, - validator: valueManager.validator, - valueType: valueManager.valueType, + valueManager: manager.valueManager, + fieldValueManager: manager.fieldValueManager, + validator: manager.validator, + valueType: manager.valueType, }); }; diff --git a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.ts b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.ts index 10f8b3e4fb3c9..8e6cb32050ebd 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.ts +++ b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.ts @@ -6,7 +6,7 @@ import { } from '@mui/x-date-pickers/internals'; import { useSplitFieldProps } from '@mui/x-date-pickers/hooks'; import { UseSingleInputDateTimeRangeFieldProps } from './SingleInputDateTimeRangeField.types'; -import { useDateTimeRangeValueManager } from '../valueManagers'; +import { useDateTimeRangeManager } from '../managers'; export const useSingleInputDateTimeRangeField = < TEnableAccessibleFieldDOMStructure extends boolean, @@ -14,10 +14,10 @@ export const useSingleInputDateTimeRangeField = < >( props: TAllProps, ) => { - const valueManager = useDateTimeRangeValueManager(props); + const manager = useDateTimeRangeManager(props); const { forwardedProps, internalProps } = useSplitFieldProps(props, 'date-time'); const internalPropsWithDefaults = useFieldInternalPropsWithDefaults({ - valueManager, + manager, internalProps, }); @@ -29,9 +29,9 @@ export const useSingleInputDateTimeRangeField = < >({ forwardedProps, internalProps: internalPropsWithDefaults, - valueManager: valueManager.legacyValueManager, - fieldValueManager: valueManager.fieldValueManager, - validator: valueManager.validator, - valueType: valueManager.valueType, + valueManager: manager.valueManager, + fieldValueManager: manager.fieldValueManager, + validator: manager.validator, + valueType: manager.valueType, }); }; diff --git a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/useSingleInputTimeRangeField.ts b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/useSingleInputTimeRangeField.ts index 986b6ce25d554..0790048264c2e 100644 --- a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/useSingleInputTimeRangeField.ts +++ b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/useSingleInputTimeRangeField.ts @@ -6,7 +6,7 @@ import { } from '@mui/x-date-pickers/internals'; import { useSplitFieldProps } from '@mui/x-date-pickers/hooks'; import { UseSingleInputTimeRangeFieldProps } from './SingleInputTimeRangeField.types'; -import { useTimeRangeValueManager } from '../valueManagers'; +import { useTimeRangeManager } from '../managers'; export const useSingleInputTimeRangeField = < TEnableAccessibleFieldDOMStructure extends boolean, @@ -14,10 +14,10 @@ export const useSingleInputTimeRangeField = < >( props: TAllProps, ) => { - const valueManager = useTimeRangeValueManager(props); + const manager = useTimeRangeManager(props); const { forwardedProps, internalProps } = useSplitFieldProps(props, 'time'); const internalPropsWithDefaults = useFieldInternalPropsWithDefaults({ - valueManager, + manager, internalProps, }); @@ -29,9 +29,9 @@ export const useSingleInputTimeRangeField = < >({ forwardedProps, internalProps: internalPropsWithDefaults, - valueManager: valueManager.legacyValueManager, - fieldValueManager: valueManager.fieldValueManager, - validator: valueManager.validator, - valueType: valueManager.valueType, + valueManager: manager.valueManager, + fieldValueManager: manager.fieldValueManager, + validator: manager.validator, + valueType: manager.valueType, }); }; diff --git a/packages/x-date-pickers-pro/src/index.ts b/packages/x-date-pickers-pro/src/index.ts index 12ed4924ecb77..cb994e12c4496 100644 --- a/packages/x-date-pickers-pro/src/index.ts +++ b/packages/x-date-pickers-pro/src/index.ts @@ -29,4 +29,4 @@ export * from './dateRangeViewRenderers'; export * from './models'; export * from './validation'; -export * from './valueManagers'; +export * from './managers'; 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 c506f5b773d7a..244fa7cc5730d 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 @@ -18,7 +18,7 @@ import type { UseMultiInputRangeFieldResponse } from './useMultiInputRangeField. import { DateRangeValidationError } from '../../../models'; import { excludeProps } from './shared'; import { useMultiInputFieldSelectedSections } from '../useMultiInputFieldSelectedSections'; -import { useDateRangeValueManager } from '../../../valueManagers'; +import { useDateRangeManager } from '../../../managers'; export const useMultiInputDateRangeField = < TEnableAccessibleFieldDOMStructure extends boolean, @@ -33,9 +33,9 @@ export const useMultiInputDateRangeField = < TEnableAccessibleFieldDOMStructure, TTextFieldSlotProps >): UseMultiInputRangeFieldResponse => { - const valueManager = useDateRangeValueManager(sharedProps); + const manager = useDateRangeManager(sharedProps); const sharedPropsWithDefaults = useFieldInternalPropsWithDefaults({ - valueManager, + manager, internalProps: sharedProps, }); 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 f1aac4e6c62dd..3541fc51b7cee 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 @@ -18,7 +18,7 @@ import type { UseMultiInputRangeFieldResponse } from './useMultiInputRangeField. import { DateTimeRangeValidationError } from '../../../models'; import { excludeProps } from './shared'; import { useMultiInputFieldSelectedSections } from '../useMultiInputFieldSelectedSections'; -import { useDateTimeRangeValueManager } from '../../../valueManagers'; +import { useDateTimeRangeManager } from '../../../managers'; export const useMultiInputDateTimeRangeField = < TEnableAccessibleFieldDOMStructure extends boolean, @@ -33,9 +33,9 @@ export const useMultiInputDateTimeRangeField = < TEnableAccessibleFieldDOMStructure, TTextFieldSlotProps >): UseMultiInputRangeFieldResponse => { - const valueManager = useDateTimeRangeValueManager(sharedProps); + const manager = useDateTimeRangeManager(sharedProps); const sharedPropsWithDefaults = useFieldInternalPropsWithDefaults({ - valueManager, + manager, internalProps: sharedProps, }); 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 8941239f8cd3a..31bd5a7df0502 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 @@ -18,7 +18,7 @@ import type { UseMultiInputRangeFieldResponse } from './useMultiInputRangeField. import { TimeRangeValidationError } from '../../../models'; import { excludeProps } from './shared'; import { useMultiInputFieldSelectedSections } from '../useMultiInputFieldSelectedSections'; -import { useTimeRangeValueManager } from '../../../valueManagers'; +import { useTimeRangeManager } from '../../../managers'; export const useMultiInputTimeRangeField = < TEnableAccessibleFieldDOMStructure extends boolean, @@ -33,9 +33,9 @@ export const useMultiInputTimeRangeField = < TEnableAccessibleFieldDOMStructure, TTextFieldSlotProps >): UseMultiInputRangeFieldResponse => { - const valueManager = useTimeRangeValueManager(sharedProps); + const manager = useTimeRangeManager(sharedProps); const sharedPropsWithDefaults = useFieldInternalPropsWithDefaults({ - valueManager, + manager, internalProps: sharedProps, }); diff --git a/packages/x-date-pickers-pro/src/managers/index.ts b/packages/x-date-pickers-pro/src/managers/index.ts new file mode 100644 index 0000000000000..3a950690ee532 --- /dev/null +++ b/packages/x-date-pickers-pro/src/managers/index.ts @@ -0,0 +1,23 @@ +export { useDateRangeManager } from './useDateRangeManager'; +export type { + DateRangeManager, + DateRangeFieldInternalProps, + DateRangeFieldInternalPropsWithDefaults, + UseDateRangeManagerParameters, +} from './useDateRangeManager'; + +export { useTimeRangeManager } from './useTimeRangeManager'; +export type { + TimeRangeManager, + TimeRangeFieldInternalProps, + TimeRangeFieldInternalPropsWithDefaults, + UseTimeRangeManagerParameters, +} from './useTimeRangeManager'; + +export { useDateTimeRangeManager } from './useDateTimeRangeManager'; +export type { + DateTimeRangeManager, + DateTimeRangeFieldInternalProps, + DateTimeRangeFieldInternalPropsWithDefaults, + UseDateTimeRangeManagerParameters, +} from './useDateTimeRangeManager'; diff --git a/packages/x-date-pickers-pro/src/valueManagers/useDateRangeValueManager.ts b/packages/x-date-pickers-pro/src/managers/useDateRangeManager.ts similarity index 69% rename from packages/x-date-pickers-pro/src/valueManagers/useDateRangeValueManager.ts rename to packages/x-date-pickers-pro/src/managers/useDateRangeManager.ts index 03a093f1a5783..d00f695f8867f 100644 --- a/packages/x-date-pickers-pro/src/valueManagers/useDateRangeValueManager.ts +++ b/packages/x-date-pickers-pro/src/managers/useDateRangeManager.ts @@ -1,7 +1,7 @@ 'use client'; import * as React from 'react'; import type { MakeOptional } from '@mui/x-internals/types'; -import { PickerValueManagerV8 } from '@mui/x-date-pickers/models'; +import { PickerManager } from '@mui/x-date-pickers/models'; import { PickerRangeValue, UseFieldInternalProps, @@ -15,9 +15,9 @@ import { ValidateDateRangeProps, } from '../validation/validateDateRange'; -export function useDateRangeValueManager( - parameters: UseDateRangeValueManagerParameters = {}, -): DateRangeValueManager { +export function useDateRangeManager( + parameters: UseDateRangeManagerParameters = {}, +): DateRangeManager { const { enableAccessibleFieldDOMStructure = true as TEnableAccessibleFieldDOMStructure, dateSeparator, @@ -25,7 +25,7 @@ export function useDateRangeValueManager ({ - legacyValueManager: rangeValueManager, + valueManager: rangeValueManager, fieldValueManager: getRangeFieldValueManager({ dateSeparator }), validator: validateDateRange, valueType: 'date', @@ -39,14 +39,13 @@ export function useDateRangeValueManager = - PickerValueManagerV8< - PickerRangeValue, - TEnableAccessibleFieldDOMStructure, - DateRangeValidationError, - DateRangeFieldInternalProps, - DateRangeFieldInternalPropsWithDefaults - >; +export type DateRangeManager = PickerManager< + PickerRangeValue, + TEnableAccessibleFieldDOMStructure, + DateRangeValidationError, + DateRangeFieldInternalProps, + DateRangeFieldInternalPropsWithDefaults +>; export interface DateRangeFieldInternalProps extends MakeOptional< @@ -70,8 +69,7 @@ export interface DateRangeFieldInternalPropsWithDefaults< ValidateDateRangeProps, RangeFieldSeparatorProps {} -export interface UseDateRangeValueManagerParameters< - TEnableAccessibleFieldDOMStructure extends boolean, -> extends RangeFieldSeparatorProps { +export interface UseDateRangeManagerParameters + extends RangeFieldSeparatorProps { enableAccessibleFieldDOMStructure?: TEnableAccessibleFieldDOMStructure; } diff --git a/packages/x-date-pickers-pro/src/valueManagers/useDateTimeRangeValueManager.ts b/packages/x-date-pickers-pro/src/managers/useDateTimeRangeManager.ts similarity index 81% rename from packages/x-date-pickers-pro/src/valueManagers/useDateTimeRangeValueManager.ts rename to packages/x-date-pickers-pro/src/managers/useDateTimeRangeManager.ts index abb9c200d5009..207d236806240 100644 --- a/packages/x-date-pickers-pro/src/valueManagers/useDateTimeRangeValueManager.ts +++ b/packages/x-date-pickers-pro/src/managers/useDateTimeRangeManager.ts @@ -1,7 +1,7 @@ 'use client'; import * as React from 'react'; import type { MakeOptional } from '@mui/x-internals/types'; -import { PickerValueManagerV8 } from '@mui/x-date-pickers/models'; +import { PickerManager } from '@mui/x-date-pickers/models'; import { AmPmProps, PickerRangeValue, @@ -16,11 +16,9 @@ import { ValidateDateTimeRangeProps, } from '../validation/validateDateTimeRange'; -export function useDateTimeRangeValueManager< - TEnableAccessibleFieldDOMStructure extends boolean = true, ->( - parameters: UseDateTimeRangeValueManagerParameters = {}, -): DateTimeRangeValueManager { +export function useDateTimeRangeManager( + parameters: UseDateTimeRangeManagerParameters = {}, +): DateTimeRangeManager { const { enableAccessibleFieldDOMStructure = true as TEnableAccessibleFieldDOMStructure, dateSeparator, @@ -28,7 +26,7 @@ export function useDateTimeRangeValueManager< return React.useMemo( () => ({ - legacyValueManager: rangeValueManager, + valueManager: rangeValueManager, fieldValueManager: getRangeFieldValueManager({ dateSeparator }), validator: validateDateTimeRange, valueType: 'date-time', @@ -42,8 +40,8 @@ export function useDateTimeRangeValueManager< ); } -export type DateTimeRangeValueManager = - PickerValueManagerV8< +export type DateTimeRangeManager = + PickerManager< PickerRangeValue, TEnableAccessibleFieldDOMStructure, DateTimeRangeValidationError, @@ -74,7 +72,7 @@ export interface DateTimeRangeFieldInternalPropsWithDefaults< ValidateDateTimeRangeProps, RangeFieldSeparatorProps {} -export interface UseDateTimeRangeValueManagerParameters< +export interface UseDateTimeRangeManagerParameters< TEnableAccessibleFieldDOMStructure extends boolean, > extends RangeFieldSeparatorProps { enableAccessibleFieldDOMStructure?: TEnableAccessibleFieldDOMStructure; diff --git a/packages/x-date-pickers-pro/src/valueManagers/useTimeRangeValueManager.ts b/packages/x-date-pickers-pro/src/managers/useTimeRangeManager.ts similarity index 68% rename from packages/x-date-pickers-pro/src/valueManagers/useTimeRangeValueManager.ts rename to packages/x-date-pickers-pro/src/managers/useTimeRangeManager.ts index 572ce26a9009b..ae4de5e1ca115 100644 --- a/packages/x-date-pickers-pro/src/valueManagers/useTimeRangeValueManager.ts +++ b/packages/x-date-pickers-pro/src/managers/useTimeRangeManager.ts @@ -1,7 +1,7 @@ 'use client'; import * as React from 'react'; import type { MakeOptional } from '@mui/x-internals/types'; -import { PickerValueManagerV8 } from '@mui/x-date-pickers/models'; +import { PickerManager } from '@mui/x-date-pickers/models'; import { AmPmProps, PickerRangeValue, @@ -16,9 +16,9 @@ import { ValidateTimeRangeProps, } from '../validation/validateTimeRange'; -export function useTimeRangeValueManager( - parameters: UseTimeRangeValueManagerParameters = {}, -): TimeRangeValueManager { +export function useTimeRangeManager( + parameters: UseTimeRangeManagerParameters = {}, +): TimeRangeManager { const { enableAccessibleFieldDOMStructure = true as TEnableAccessibleFieldDOMStructure, dateSeparator, @@ -26,7 +26,7 @@ export function useTimeRangeValueManager ({ - legacyValueManager: rangeValueManager, + valueManager: rangeValueManager, fieldValueManager: getRangeFieldValueManager({ dateSeparator }), validator: validateTimeRange, valueType: 'time', @@ -40,14 +40,13 @@ export function useTimeRangeValueManager = - PickerValueManagerV8< - PickerRangeValue, - TEnableAccessibleFieldDOMStructure, - TimeRangeValidationError, - TimeRangeFieldInternalProps, - TimeRangeFieldInternalPropsWithDefaults - >; +export type TimeRangeManager = PickerManager< + PickerRangeValue, + TEnableAccessibleFieldDOMStructure, + TimeRangeValidationError, + TimeRangeFieldInternalProps, + TimeRangeFieldInternalPropsWithDefaults +>; export interface TimeRangeFieldInternalProps extends MakeOptional< @@ -71,8 +70,7 @@ export interface TimeRangeFieldInternalPropsWithDefaults< >, ValidateTimeRangeProps {} -export interface UseTimeRangeValueManagerParameters< - TEnableAccessibleFieldDOMStructure extends boolean, -> extends RangeFieldSeparatorProps { +export interface UseTimeRangeManagerParameters + extends RangeFieldSeparatorProps { enableAccessibleFieldDOMStructure?: TEnableAccessibleFieldDOMStructure; } diff --git a/packages/x-date-pickers-pro/src/valueManagers/index.ts b/packages/x-date-pickers-pro/src/valueManagers/index.ts deleted file mode 100644 index 8797301e751b7..0000000000000 --- a/packages/x-date-pickers-pro/src/valueManagers/index.ts +++ /dev/null @@ -1,23 +0,0 @@ -export { useDateRangeValueManager } from './useDateRangeValueManager'; -export type { - DateRangeValueManager, - DateRangeFieldInternalProps, - DateRangeFieldInternalPropsWithDefaults, - UseDateRangeValueManagerParameters, -} from './useDateRangeValueManager'; - -export { useTimeRangeValueManager } from './useTimeRangeValueManager'; -export type { - TimeRangeValueManager, - TimeRangeFieldInternalProps, - TimeRangeFieldInternalPropsWithDefaults, - UseTimeRangeValueManagerParameters, -} from './useTimeRangeValueManager'; - -export { useDateTimeRangeValueManager } from './useDateTimeRangeValueManager'; -export type { - DateTimeRangeValueManager, - DateTimeRangeFieldInternalProps, - DateTimeRangeFieldInternalPropsWithDefaults, - UseDateTimeRangeValueManagerParameters, -} from './useDateTimeRangeValueManager'; diff --git a/packages/x-date-pickers/src/DateField/useDateField.ts b/packages/x-date-pickers/src/DateField/useDateField.ts index 6ac241045546a..75194449240ca 100644 --- a/packages/x-date-pickers/src/DateField/useDateField.ts +++ b/packages/x-date-pickers/src/DateField/useDateField.ts @@ -2,7 +2,7 @@ import { useField, useFieldInternalPropsWithDefaults } from '../internals/hooks/useField'; import { UseDateFieldProps } from './DateField.types'; import { useSplitFieldProps } from '../hooks'; -import { useDateValueManager } from '../valueManagers'; +import { useDateManager } from '../managers'; import { PickerValue } from '../internals/models'; export const useDateField = < @@ -11,10 +11,10 @@ export const useDateField = < >( props: TAllProps, ) => { - const valueManager = useDateValueManager(props); + const manager = useDateManager(props); const { forwardedProps, internalProps } = useSplitFieldProps(props, 'date'); const internalPropsWithDefaults = useFieldInternalPropsWithDefaults({ - valueManager, + manager, internalProps, }); @@ -26,9 +26,9 @@ export const useDateField = < >({ forwardedProps, internalProps: internalPropsWithDefaults, - valueManager: valueManager.legacyValueManager, - fieldValueManager: valueManager.fieldValueManager, - validator: valueManager.validator, - valueType: valueManager.valueType, + valueManager: manager.valueManager, + fieldValueManager: manager.fieldValueManager, + validator: manager.validator, + valueType: manager.valueType, }); }; diff --git a/packages/x-date-pickers/src/DateTimeField/useDateTimeField.ts b/packages/x-date-pickers/src/DateTimeField/useDateTimeField.ts index 82e4943988afa..d336adfa6e349 100644 --- a/packages/x-date-pickers/src/DateTimeField/useDateTimeField.ts +++ b/packages/x-date-pickers/src/DateTimeField/useDateTimeField.ts @@ -2,7 +2,7 @@ import { useField, useFieldInternalPropsWithDefaults } from '../internals/hooks/useField'; import { UseDateTimeFieldProps } from './DateTimeField.types'; import { useSplitFieldProps } from '../hooks'; -import { useDateTimeValueManager } from '../valueManagers'; +import { useDateTimeManager } from '../managers'; import { PickerValue } from '../internals/models'; export const useDateTimeField = < @@ -11,11 +11,10 @@ export const useDateTimeField = < >( props: TAllProps, ) => { - const valueManager = useDateTimeValueManager(props); - + const manager = useDateTimeManager(props); const { forwardedProps, internalProps } = useSplitFieldProps(props, 'date-time'); const internalPropsWithDefaults = useFieldInternalPropsWithDefaults({ - valueManager, + manager, internalProps, }); @@ -27,9 +26,9 @@ export const useDateTimeField = < >({ forwardedProps, internalProps: internalPropsWithDefaults, - valueManager: valueManager.legacyValueManager, - fieldValueManager: valueManager.fieldValueManager, - validator: valueManager.validator, - valueType: valueManager.valueType, + valueManager: manager.valueManager, + fieldValueManager: manager.fieldValueManager, + validator: manager.validator, + valueType: manager.valueType, }); }; diff --git a/packages/x-date-pickers/src/TimeField/useTimeField.ts b/packages/x-date-pickers/src/TimeField/useTimeField.ts index 3e3fb9dedfff7..3e472ad76557a 100644 --- a/packages/x-date-pickers/src/TimeField/useTimeField.ts +++ b/packages/x-date-pickers/src/TimeField/useTimeField.ts @@ -2,7 +2,7 @@ import { useField, useFieldInternalPropsWithDefaults } from '../internals/hooks/useField'; import { UseTimeFieldProps } from './TimeField.types'; import { useSplitFieldProps } from '../hooks'; -import { useTimeValueManager } from '../valueManagers'; +import { useTimeManager } from '../managers'; import { PickerValue } from '../internals/models'; export const useTimeField = < @@ -11,10 +11,10 @@ export const useTimeField = < >( props: TAllProps, ) => { - const valueManager = useTimeValueManager(props); + const manager = useTimeManager(props); const { forwardedProps, internalProps } = useSplitFieldProps(props, 'time'); const internalPropsWithDefaults = useFieldInternalPropsWithDefaults({ - valueManager, + manager, internalProps, }); @@ -26,9 +26,9 @@ export const useTimeField = < >({ forwardedProps, internalProps: internalPropsWithDefaults, - valueManager: valueManager.legacyValueManager, - fieldValueManager: valueManager.fieldValueManager, - validator: valueManager.validator, - valueType: valueManager.valueType, + valueManager: manager.valueManager, + fieldValueManager: manager.fieldValueManager, + validator: manager.validator, + valueType: manager.valueType, }); }; diff --git a/packages/x-date-pickers/src/index.ts b/packages/x-date-pickers/src/index.ts index f45a03de6c4c0..e5127dacbb266 100644 --- a/packages/x-date-pickers/src/index.ts +++ b/packages/x-date-pickers/src/index.ts @@ -56,4 +56,4 @@ export * from './models'; export * from './icons'; export * from './hooks'; export * from './validation'; -export * from './valueManagers'; +export * from './managers'; 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 628fbf419c584..91de3071f883f 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useField.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useField.ts @@ -21,7 +21,7 @@ import { useFieldV7TextField } from './useFieldV7TextField'; import { useFieldV6TextField } from './useFieldV6TextField'; import { PickerValidValue, - PickerAnyValueManagerV8, + PickerAnyManager, PickerManagerFieldInternalProps, PickerManagerFieldInternalPropsWithDefaults, } from '../../models'; @@ -31,20 +31,20 @@ import { * This is a temporary hook that will be removed during a follow up when `useField` will receive the internal props without the defaults. * It is only here to allow the migration to be done in smaller steps. */ -export const useFieldInternalPropsWithDefaults = ({ - valueManager, +export const useFieldInternalPropsWithDefaults = ({ + manager, internalProps, }: { - valueManager: TManager; + manager: TManager; internalProps: PickerManagerFieldInternalProps; }): PickerManagerFieldInternalPropsWithDefaults => { const localizationContext = useLocalizationContext(); return React.useMemo(() => { - return valueManager.applyDefaultsToFieldInternalProps({ + return manager.applyDefaultsToFieldInternalProps({ ...localizationContext, internalProps, }); - }, [valueManager, internalProps, localizationContext]); + }, [manager, internalProps, localizationContext]); }; export const useField = < diff --git a/packages/x-date-pickers/src/internals/index.ts b/packages/x-date-pickers/src/internals/index.ts index 0b1501c439402..9d6fa2f06ecca 100644 --- a/packages/x-date-pickers/src/internals/index.ts +++ b/packages/x-date-pickers/src/internals/index.ts @@ -164,6 +164,6 @@ export { useCalendarState } from '../DateCalendar/useCalendarState'; export { isInternalTimeView, isTimeView } from './utils/time-utils'; -export { getDateFieldInternalPropsDefaults } from '../valueManagers/useDateValueManager'; -export { getTimeFieldInternalPropsDefaults } from '../valueManagers/useTimeValueManager'; -export { getDateTimeFieldInternalPropsDefaults } from '../valueManagers/useDateTimeValueManager'; +export { getDateFieldInternalPropsDefaults } from '../managers/useDateManager'; +export { getTimeFieldInternalPropsDefaults } from '../managers/useTimeManager'; +export { getDateTimeFieldInternalPropsDefaults } from '../managers/useDateTimeManager'; diff --git a/packages/x-date-pickers/src/internals/models/valueManager.ts b/packages/x-date-pickers/src/internals/models/manager.ts similarity index 68% rename from packages/x-date-pickers/src/internals/models/valueManager.ts rename to packages/x-date-pickers/src/internals/models/manager.ts index be2c12d4094be..178ab9acfa34e 100644 --- a/packages/x-date-pickers/src/internals/models/valueManager.ts +++ b/packages/x-date-pickers/src/internals/models/manager.ts @@ -1,9 +1,9 @@ -import type { PickerValueManagerV8 } from '../../models'; +import type { PickerManager } from '../../models'; -export type PickerAnyValueManagerV8 = PickerValueManagerV8; +export type PickerAnyManager = PickerManager; -type PickerManagerProperties = - TManager extends PickerValueManagerV8< +type PickerManagerProperties = + TManager extends PickerManager< infer TValue, infer TEnableAccessibleFieldDOMStructure, infer TError, @@ -19,8 +19,8 @@ type PickerManagerProperties = } : never; -export type PickerManagerFieldInternalProps = +export type PickerManagerFieldInternalProps = PickerManagerProperties['fieldInternalProps']; -export type PickerManagerFieldInternalPropsWithDefaults = +export type PickerManagerFieldInternalPropsWithDefaults = PickerManagerProperties['fieldInternalPropsWithDefaults']; diff --git a/packages/x-date-pickers/src/managers/index.ts b/packages/x-date-pickers/src/managers/index.ts new file mode 100644 index 0000000000000..8f4d4ec94515f --- /dev/null +++ b/packages/x-date-pickers/src/managers/index.ts @@ -0,0 +1,23 @@ +export { useDateManager } from './useDateManager'; +export type { + DateManager, + DateFieldInternalProps, + DateFieldInternalPropsWithDefaults, + UseDateManagerParameters, +} from './useDateManager'; + +export { useTimeManager } from './useTimeManager'; +export type { + TimeManager, + TimeFieldInternalProps, + TimeFieldInternalPropsWithDefaults, + UseTimeManagerParameters, +} from './useTimeManager'; + +export { useDateTimeManager } from './useDateTimeManager'; +export type { + DateTimeManager, + DateTimeFieldInternalProps, + DateTimeFieldInternalPropsWithDefaults, + UseDateTimeManagerParameters, +} from './useDateTimeManager'; diff --git a/packages/x-date-pickers/src/valueManagers/useDateValueManager.ts b/packages/x-date-pickers/src/managers/useDateManager.ts similarity index 77% rename from packages/x-date-pickers/src/valueManagers/useDateValueManager.ts rename to packages/x-date-pickers/src/managers/useDateManager.ts index 73a62aef6dbaa..bdc7abda2c179 100644 --- a/packages/x-date-pickers/src/valueManagers/useDateValueManager.ts +++ b/packages/x-date-pickers/src/managers/useDateManager.ts @@ -6,7 +6,7 @@ import { singleItemFieldValueManager, singleItemValueManager, } from '../internals/utils/valueManagers'; -import { PickerValueManagerV8, DateValidationError } from '../models'; +import { PickerManager, DateValidationError } from '../models'; import { validateDate } from '../validation'; import { UseFieldInternalProps } from '../internals/hooks/useField'; import { MuiPickersAdapterContextValue } from '../LocalizationProvider/LocalizationProvider'; @@ -17,15 +17,15 @@ import { } from '../validation/validateDate'; import { PickerValue } from '../internals/models'; -export function useDateValueManager( - parameters: UseDateValueManagerParameters = {}, -): DateValueManager { +export function useDateManager( + parameters: UseDateManagerParameters = {}, +): DateManager { const { enableAccessibleFieldDOMStructure = true as TEnableAccessibleFieldDOMStructure } = parameters; return React.useMemo( () => ({ - legacyValueManager: singleItemValueManager, + valueManager: singleItemValueManager, fieldValueManager: singleItemFieldValueManager, validator: validateDate, valueType: 'date', @@ -41,7 +41,7 @@ export function useDateValueManager = - PickerValueManagerV8< - PickerValue, - TEnableAccessibleFieldDOMStructure, - DateValidationError, - DateFieldInternalProps, - DateFieldInternalPropsWithDefaults - >; +export type DateManager = PickerManager< + PickerValue, + TEnableAccessibleFieldDOMStructure, + DateValidationError, + DateFieldInternalProps, + DateFieldInternalPropsWithDefaults +>; export interface DateFieldInternalProps extends MakeOptional< @@ -84,7 +83,7 @@ export interface DateFieldInternalPropsWithDefaults< type DateFieldPropsToDefault = 'format' | ValidateDatePropsToDefault; -export interface UseDateValueManagerParameters { +export interface UseDateManagerParameters { enableAccessibleFieldDOMStructure?: TEnableAccessibleFieldDOMStructure; } diff --git a/packages/x-date-pickers/src/valueManagers/useDateTimeValueManager.ts b/packages/x-date-pickers/src/managers/useDateTimeManager.ts similarity index 80% rename from packages/x-date-pickers/src/valueManagers/useDateTimeValueManager.ts rename to packages/x-date-pickers/src/managers/useDateTimeManager.ts index 91675de018d1f..5f6281e08de26 100644 --- a/packages/x-date-pickers/src/valueManagers/useDateTimeValueManager.ts +++ b/packages/x-date-pickers/src/managers/useDateTimeManager.ts @@ -6,7 +6,7 @@ import { singleItemFieldValueManager, singleItemValueManager, } from '../internals/utils/valueManagers'; -import { PickerValueManagerV8, DateTimeValidationError } from '../models'; +import { PickerManager, DateTimeValidationError } from '../models'; import { validateDateTime } from '../validation'; import { UseFieldInternalProps } from '../internals/hooks/useField'; import { MuiPickersAdapterContextValue } from '../LocalizationProvider/LocalizationProvider'; @@ -18,15 +18,15 @@ import { } from '../validation/validateDateTime'; import { PickerValue } from '../internals/models'; -export function useDateTimeValueManager( - parameters: UseDateTimeValueManagerParameters = {}, -): DateTimeValueManager { +export function useDateTimeManager( + parameters: UseDateTimeManagerParameters = {}, +): DateTimeManager { const { enableAccessibleFieldDOMStructure = true as TEnableAccessibleFieldDOMStructure } = parameters; return React.useMemo( () => ({ - legacyValueManager: singleItemValueManager, + valueManager: singleItemValueManager, fieldValueManager: singleItemFieldValueManager, validator: validateDateTime, valueType: 'date-time', @@ -42,7 +42,7 @@ export function useDateTimeValueManager = - PickerValueManagerV8< - PickerValue, - TEnableAccessibleFieldDOMStructure, - DateTimeValidationError, - DateTimeFieldInternalProps, - DateTimeFieldInternalPropsWithDefaults - >; +export type DateTimeManager = PickerManager< + PickerValue, + TEnableAccessibleFieldDOMStructure, + DateTimeValidationError, + DateTimeFieldInternalProps, + DateTimeFieldInternalPropsWithDefaults +>; export interface DateTimeFieldInternalProps extends MakeOptional< @@ -112,9 +111,7 @@ type DateTimeFieldPropsToDefault = | 'maxTime' | ValidateDateTimePropsToDefault; -export interface UseDateTimeValueManagerParameters< - TEnableAccessibleFieldDOMStructure extends boolean, -> { +export interface UseDateTimeManagerParameters { enableAccessibleFieldDOMStructure?: TEnableAccessibleFieldDOMStructure; } diff --git a/packages/x-date-pickers/src/valueManagers/useTimeValueManager.ts b/packages/x-date-pickers/src/managers/useTimeManager.ts similarity index 76% rename from packages/x-date-pickers/src/valueManagers/useTimeValueManager.ts rename to packages/x-date-pickers/src/managers/useTimeManager.ts index e80c29394d87c..01378229fce25 100644 --- a/packages/x-date-pickers/src/valueManagers/useTimeValueManager.ts +++ b/packages/x-date-pickers/src/managers/useTimeManager.ts @@ -5,7 +5,7 @@ import { singleItemFieldValueManager, singleItemValueManager, } from '../internals/utils/valueManagers'; -import { PickerValueManagerV8, TimeValidationError } from '../models'; +import { PickerManager, TimeValidationError } from '../models'; import { validateTime } from '../validation'; import { UseFieldInternalProps } from '../internals/hooks/useField'; import { MuiPickersAdapterContextValue } from '../LocalizationProvider/LocalizationProvider'; @@ -17,15 +17,15 @@ import { } from '../validation/validateTime'; import { PickerValue } from '../internals/models'; -export function useTimeValueManager( - parameters: UseTimeValueManagerParameters = {}, -): TimeValueManager { +export function useTimeManager( + parameters: UseTimeManagerParameters = {}, +): TimeManager { const { enableAccessibleFieldDOMStructure = true as TEnableAccessibleFieldDOMStructure } = parameters; return React.useMemo( () => ({ - legacyValueManager: singleItemValueManager, + valueManager: singleItemValueManager, fieldValueManager: singleItemFieldValueManager, validator: validateTime, valueType: 'time', @@ -41,7 +41,7 @@ export function useTimeValueManager = - PickerValueManagerV8< - PickerValue, - TEnableAccessibleFieldDOMStructure, - TimeValidationError, - TimeFieldInternalProps, - TimeFieldInternalPropsWithDefaults - >; +export type TimeManager = PickerManager< + PickerValue, + TEnableAccessibleFieldDOMStructure, + TimeValidationError, + TimeFieldInternalProps, + TimeFieldInternalPropsWithDefaults +>; export interface TimeFieldInternalProps extends MakeOptional< @@ -85,7 +84,7 @@ export interface TimeFieldInternalPropsWithDefaults< type TimeFieldPropsToDefault = 'format' | ValidateTimePropsToDefault; -export interface UseTimeValueManagerParameters { +export interface UseTimeManagerParameters { enableAccessibleFieldDOMStructure?: TEnableAccessibleFieldDOMStructure; } diff --git a/packages/x-date-pickers/src/models/valueManager.ts b/packages/x-date-pickers/src/models/manager.ts similarity index 78% rename from packages/x-date-pickers/src/models/valueManager.ts rename to packages/x-date-pickers/src/models/manager.ts index 17bdd174a98e5..da58e6f898a29 100644 --- a/packages/x-date-pickers/src/models/valueManager.ts +++ b/packages/x-date-pickers/src/models/manager.ts @@ -5,13 +5,12 @@ import type { MuiPickersAdapterContextValue } from '../LocalizationProvider/Loca import type { Validator } from '../validation'; import type { PickerValueType } from './common'; -// TODO: Rename PickerValueManager when the legacyValueManager object will be inlined. /** - * Object that contains all the necessary methods and properties to control the value of a picker. - * You should never create your own value manager. - * Instead, use the ones provided exported from '@mui/x-date-pickers/valueManagers' and '@mui/x-date-pickers-pro/valueManagers'. + * Object that contains all the necessary methods and properties to adapter a picker or a field for a given value type. + * You should never create your own manager. + * Instead, use the ones provided exported from '@mui/x-date-pickers/managers' and '@mui/x-date-pickers-pro/managers'. */ -export interface PickerValueManagerV8< +export interface PickerManager< TValue extends PickerValidValue, TEnableAccessibleFieldDOMStructure extends boolean, TError, @@ -24,12 +23,10 @@ export interface PickerValueManagerV8< > { /** * Object containing basic methods to interact with the value of the picker or field. - * The properties of this object will be inlined inside the main `PickerValueManagerV8` object once every object using it is compatible with the new API. */ - legacyValueManager: PickerValueManager; + valueManager: PickerValueManager; /** * Object containing all the necessary methods to interact with the value of the field. - * The properties of this object will be inlined inside the main `PickerValueManagerV8` object once every object using it is compatible with the new API. */ fieldValueManager: FieldValueManager; /** diff --git a/packages/x-date-pickers/src/valueManagers/index.ts b/packages/x-date-pickers/src/valueManagers/index.ts deleted file mode 100644 index 2d8945766f933..0000000000000 --- a/packages/x-date-pickers/src/valueManagers/index.ts +++ /dev/null @@ -1,23 +0,0 @@ -export { useDateValueManager } from './useDateValueManager'; -export type { - DateFieldInternalProps, - DateFieldInternalPropsWithDefaults, - DateValueManager, - UseDateValueManagerParameters, -} from './useDateValueManager'; - -export { useTimeValueManager } from './useTimeValueManager'; -export type { - TimeFieldInternalProps, - TimeFieldInternalPropsWithDefaults, - TimeValueManager, - UseTimeValueManagerParameters, -} from './useTimeValueManager'; - -export { useDateTimeValueManager } from './useDateTimeValueManager'; -export type { - DateTimeFieldInternalProps, - DateTimeFieldInternalPropsWithDefaults, - DateTimeValueManager, - UseDateTimeValueManagerParameters, -} from './useDateTimeValueManager'; diff --git a/scripts/x-date-pickers-pro.exports.json b/scripts/x-date-pickers-pro.exports.json index 8daa6df450692..8aea3442614c6 100644 --- a/scripts/x-date-pickers-pro.exports.json +++ b/scripts/x-date-pickers-pro.exports.json @@ -34,6 +34,7 @@ { "name": "DateFieldInternalProps", "kind": "Interface" }, { "name": "DateFieldInternalPropsWithDefaults", "kind": "Interface" }, { "name": "DateFieldProps", "kind": "TypeAlias" }, + { "name": "DateManager", "kind": "TypeAlias" }, { "name": "DateOrTimeView", "kind": "TypeAlias" }, { "name": "DatePicker", "kind": "Variable" }, { "name": "DatePickerFieldProps", "kind": "TypeAlias" }, @@ -56,6 +57,7 @@ { "name": "DateRangeFieldInternalProps", "kind": "Interface" }, { "name": "DateRangeFieldInternalPropsWithDefaults", "kind": "Interface" }, { "name": "DateRangeIcon", "kind": "Variable" }, + { "name": "DateRangeManager", "kind": "TypeAlias" }, { "name": "DateRangePicker", "kind": "Variable" }, { "name": "DateRangePickerDay", "kind": "Variable" }, { "name": "dateRangePickerDayClasses", "kind": "Variable" }, @@ -72,12 +74,12 @@ { "name": "DateRangePickerToolbarClassKey", "kind": "TypeAlias" }, { "name": "DateRangePickerToolbarProps", "kind": "Interface" }, { "name": "DateRangeValidationError", "kind": "TypeAlias" }, - { "name": "DateRangeValueManager", "kind": "TypeAlias" }, { "name": "DateRangeViewRendererProps", "kind": "Interface" }, { "name": "DateTimeField", "kind": "Variable" }, { "name": "DateTimeFieldInternalProps", "kind": "Interface" }, { "name": "DateTimeFieldInternalPropsWithDefaults", "kind": "Interface" }, { "name": "DateTimeFieldProps", "kind": "TypeAlias" }, + { "name": "DateTimeManager", "kind": "TypeAlias" }, { "name": "DateTimePicker", "kind": "Variable" }, { "name": "DateTimePickerFieldProps", "kind": "TypeAlias" }, { "name": "DateTimePickerProps", "kind": "Interface" }, @@ -95,6 +97,7 @@ { "name": "DateTimePickerToolbarProps", "kind": "Interface" }, { "name": "DateTimeRangeFieldInternalProps", "kind": "Interface" }, { "name": "DateTimeRangeFieldInternalPropsWithDefaults", "kind": "Interface" }, + { "name": "DateTimeRangeManager", "kind": "TypeAlias" }, { "name": "DateTimeRangePicker", "kind": "Variable" }, { "name": "DateTimeRangePickerFieldProps", "kind": "TypeAlias" }, { "name": "DateTimeRangePickerProps", "kind": "Interface" }, @@ -110,11 +113,8 @@ { "name": "DateTimeRangePickerToolbarClassKey", "kind": "TypeAlias" }, { "name": "DateTimeRangePickerToolbarProps", "kind": "Interface" }, { "name": "DateTimeRangeValidationError", "kind": "TypeAlias" }, - { "name": "DateTimeRangeValueManager", "kind": "TypeAlias" }, { "name": "DateTimeValidationError", "kind": "TypeAlias" }, - { "name": "DateTimeValueManager", "kind": "TypeAlias" }, { "name": "DateValidationError", "kind": "TypeAlias" }, - { "name": "DateValueManager", "kind": "TypeAlias" }, { "name": "DateView", "kind": "TypeAlias" }, { "name": "DateViewRendererProps", "kind": "Interface" }, { "name": "dayCalendarClasses", "kind": "Variable" }, @@ -349,7 +349,6 @@ { "name": "PickersYearClassKey", "kind": "TypeAlias" }, { "name": "PickerValidDate", "kind": "TypeAlias" }, { "name": "PickerValidDateLookup", "kind": "Interface" }, - { "name": "PickerValueManagerV8", "kind": "Interface" }, { "name": "PickerValueType", "kind": "TypeAlias" }, { "name": "PropsFromSlot", "kind": "TypeAlias" }, { "name": "RangeFieldSeparatorProps", "kind": "Interface" }, @@ -393,6 +392,7 @@ { "name": "TimeFieldInternalPropsWithDefaults", "kind": "Interface" }, { "name": "TimeFieldProps", "kind": "TypeAlias" }, { "name": "TimeIcon", "kind": "Variable" }, + { "name": "TimeManager", "kind": "TypeAlias" }, { "name": "TimePicker", "kind": "Variable" }, { "name": "TimePickerFieldProps", "kind": "TypeAlias" }, { "name": "TimePickerProps", "kind": "Interface" }, @@ -405,11 +405,10 @@ { "name": "TimePickerToolbarProps", "kind": "Interface" }, { "name": "TimeRangeFieldInternalProps", "kind": "Interface" }, { "name": "TimeRangeFieldInternalPropsWithDefaults", "kind": "Interface" }, + { "name": "TimeRangeManager", "kind": "TypeAlias" }, { "name": "TimeRangeValidationError", "kind": "TypeAlias" }, - { "name": "TimeRangeValueManager", "kind": "TypeAlias" }, { "name": "TimeStepOptions", "kind": "Interface" }, { "name": "TimeValidationError", "kind": "TypeAlias" }, - { "name": "TimeValueManager", "kind": "TypeAlias" }, { "name": "TimeView", "kind": "TypeAlias" }, { "name": "TimeViewRendererProps", "kind": "TypeAlias" }, { "name": "TimezoneProps", "kind": "Interface" }, @@ -432,16 +431,16 @@ { "name": "UseClearableFieldSlotProps", "kind": "Interface" }, { "name": "UseClearableFieldSlots", "kind": "Interface" }, { "name": "UseDateFieldProps", "kind": "Interface" }, + { "name": "useDateManager", "kind": "Function" }, + { "name": "UseDateManagerParameters", "kind": "Interface" }, { "name": "UseDateRangeFieldProps", "kind": "Interface" }, - { "name": "useDateRangeValueManager", "kind": "Function" }, - { "name": "UseDateRangeValueManagerParameters", "kind": "Interface" }, + { "name": "useDateRangeManager", "kind": "Function" }, + { "name": "UseDateRangeManagerParameters", "kind": "Interface" }, { "name": "UseDateTimeFieldProps", "kind": "Interface" }, - { "name": "useDateTimeRangeValueManager", "kind": "Function" }, - { "name": "UseDateTimeRangeValueManagerParameters", "kind": "Interface" }, - { "name": "useDateTimeValueManager", "kind": "Function" }, - { "name": "UseDateTimeValueManagerParameters", "kind": "Interface" }, - { "name": "useDateValueManager", "kind": "Function" }, - { "name": "UseDateValueManagerParameters", "kind": "Interface" }, + { "name": "useDateTimeManager", "kind": "Function" }, + { "name": "UseDateTimeManagerParameters", "kind": "Interface" }, + { "name": "useDateTimeRangeManager", "kind": "Function" }, + { "name": "UseDateTimeRangeManagerParameters", "kind": "Interface" }, { "name": "UseMultiInputDateRangeFieldComponentProps", "kind": "TypeAlias" }, { "name": "UseMultiInputDateRangeFieldProps", "kind": "Interface" }, { "name": "UseMultiInputDateTimeRangeFieldComponentProps", "kind": "TypeAlias" }, @@ -457,10 +456,10 @@ { "name": "UseSingleInputTimeRangeFieldProps", "kind": "Interface" }, { "name": "useSplitFieldProps", "kind": "Variable" }, { "name": "UseTimeFieldProps", "kind": "Interface" }, - { "name": "useTimeRangeValueManager", "kind": "Function" }, - { "name": "UseTimeRangeValueManagerParameters", "kind": "Interface" }, - { "name": "useTimeValueManager", "kind": "Function" }, - { "name": "UseTimeValueManagerParameters", "kind": "Interface" }, + { "name": "useTimeManager", "kind": "Function" }, + { "name": "UseTimeManagerParameters", "kind": "Interface" }, + { "name": "useTimeRangeManager", "kind": "Function" }, + { "name": "UseTimeRangeManagerParameters", "kind": "Interface" }, { "name": "useValidation", "kind": "Function" }, { "name": "validateDate", "kind": "Variable" }, { "name": "ValidateDateProps", "kind": "Interface" }, diff --git a/scripts/x-date-pickers.exports.json b/scripts/x-date-pickers.exports.json index 28133c91e014c..7fc853c3b2a91 100644 --- a/scripts/x-date-pickers.exports.json +++ b/scripts/x-date-pickers.exports.json @@ -33,6 +33,7 @@ { "name": "DateFieldInternalProps", "kind": "Interface" }, { "name": "DateFieldInternalPropsWithDefaults", "kind": "Interface" }, { "name": "DateFieldProps", "kind": "TypeAlias" }, + { "name": "DateManager", "kind": "TypeAlias" }, { "name": "DateOrTimeView", "kind": "TypeAlias" }, { "name": "DatePicker", "kind": "Variable" }, { "name": "DatePickerFieldProps", "kind": "TypeAlias" }, @@ -49,6 +50,7 @@ { "name": "DateTimeFieldInternalProps", "kind": "Interface" }, { "name": "DateTimeFieldInternalPropsWithDefaults", "kind": "Interface" }, { "name": "DateTimeFieldProps", "kind": "TypeAlias" }, + { "name": "DateTimeManager", "kind": "TypeAlias" }, { "name": "DateTimePicker", "kind": "Variable" }, { "name": "DateTimePickerFieldProps", "kind": "TypeAlias" }, { "name": "DateTimePickerProps", "kind": "Interface" }, @@ -65,9 +67,7 @@ { "name": "DateTimePickerToolbarClassKey", "kind": "TypeAlias" }, { "name": "DateTimePickerToolbarProps", "kind": "Interface" }, { "name": "DateTimeValidationError", "kind": "TypeAlias" }, - { "name": "DateTimeValueManager", "kind": "TypeAlias" }, { "name": "DateValidationError", "kind": "TypeAlias" }, - { "name": "DateValueManager", "kind": "TypeAlias" }, { "name": "DateView", "kind": "TypeAlias" }, { "name": "DateViewRendererProps", "kind": "Interface" }, { "name": "dayCalendarClasses", "kind": "Variable" }, @@ -255,7 +255,6 @@ { "name": "PickersYearClassKey", "kind": "TypeAlias" }, { "name": "PickerValidDate", "kind": "TypeAlias" }, { "name": "PickerValidDateLookup", "kind": "Interface" }, - { "name": "PickerValueManagerV8", "kind": "Interface" }, { "name": "PickerValueType", "kind": "TypeAlias" }, { "name": "PropsFromSlot", "kind": "TypeAlias" }, { "name": "renderDateViewCalendar", "kind": "Variable" }, @@ -286,6 +285,7 @@ { "name": "TimeFieldInternalPropsWithDefaults", "kind": "Interface" }, { "name": "TimeFieldProps", "kind": "TypeAlias" }, { "name": "TimeIcon", "kind": "Variable" }, + { "name": "TimeManager", "kind": "TypeAlias" }, { "name": "TimePicker", "kind": "Variable" }, { "name": "TimePickerFieldProps", "kind": "TypeAlias" }, { "name": "TimePickerProps", "kind": "Interface" }, @@ -298,7 +298,6 @@ { "name": "TimePickerToolbarProps", "kind": "Interface" }, { "name": "TimeStepOptions", "kind": "Interface" }, { "name": "TimeValidationError", "kind": "TypeAlias" }, - { "name": "TimeValueManager", "kind": "TypeAlias" }, { "name": "TimeView", "kind": "TypeAlias" }, { "name": "TimeViewRendererProps", "kind": "TypeAlias" }, { "name": "TimezoneProps", "kind": "Interface" }, @@ -315,19 +314,19 @@ { "name": "UseClearableFieldSlotProps", "kind": "Interface" }, { "name": "UseClearableFieldSlots", "kind": "Interface" }, { "name": "UseDateFieldProps", "kind": "Interface" }, + { "name": "useDateManager", "kind": "Function" }, + { "name": "UseDateManagerParameters", "kind": "Interface" }, { "name": "UseDateTimeFieldProps", "kind": "Interface" }, - { "name": "useDateTimeValueManager", "kind": "Function" }, - { "name": "UseDateTimeValueManagerParameters", "kind": "Interface" }, - { "name": "useDateValueManager", "kind": "Function" }, - { "name": "UseDateValueManagerParameters", "kind": "Interface" }, + { "name": "useDateTimeManager", "kind": "Function" }, + { "name": "UseDateTimeManagerParameters", "kind": "Interface" }, { "name": "useParsedFormat", "kind": "Variable" }, { "name": "usePickerContext", "kind": "Variable" }, { "name": "usePickerLayout", "kind": "ExportAssignment" }, { "name": "usePickerTranslations", "kind": "Variable" }, { "name": "useSplitFieldProps", "kind": "Variable" }, { "name": "UseTimeFieldProps", "kind": "Interface" }, - { "name": "useTimeValueManager", "kind": "Function" }, - { "name": "UseTimeValueManagerParameters", "kind": "Interface" }, + { "name": "useTimeManager", "kind": "Function" }, + { "name": "UseTimeManagerParameters", "kind": "Interface" }, { "name": "useValidation", "kind": "Function" }, { "name": "validateDate", "kind": "Variable" }, { "name": "ValidateDateProps", "kind": "Interface" }, From 59dc3469ef3c34cf8795307ec987bb29c4ae7971 Mon Sep 17 00:00:00 2001 From: flavien Date: Mon, 18 Nov 2024 12:16:51 +0100 Subject: [PATCH 28/35] Improve JSDoc --- .../useSingleInputDateRangeField.ts | 4 ++-- .../useSingleInputDateTimeRangeField.ts | 4 ++-- .../useSingleInputTimeRangeField.ts | 4 ++-- .../src/managers/useDateRangeManager.ts | 4 ++-- .../src/managers/useDateTimeRangeManager.ts | 4 ++-- .../src/managers/useTimeRangeManager.ts | 4 ++-- .../src/DateField/useDateField.ts | 4 ++-- .../src/DateTimeField/useDateTimeField.ts | 4 ++-- .../src/TimeField/useTimeField.ts | 4 ++-- .../src/internals/hooks/useField/useField.ts | 2 +- .../src/internals/models/index.ts | 2 +- .../src/managers/useDateManager.ts | 4 ++-- .../src/managers/useDateTimeManager.ts | 4 ++-- .../src/managers/useTimeManager.ts | 4 ++-- packages/x-date-pickers/src/models/index.ts | 2 +- packages/x-date-pickers/src/models/manager.ts | 23 ++++++++++++++++--- 16 files changed, 47 insertions(+), 30 deletions(-) diff --git a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/useSingleInputDateRangeField.ts b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/useSingleInputDateRangeField.ts index 8f58505dc267b..3148b6e40b37b 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/useSingleInputDateRangeField.ts +++ b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/useSingleInputDateRangeField.ts @@ -29,8 +29,8 @@ export const useSingleInputDateRangeField = < >({ forwardedProps, internalProps: internalPropsWithDefaults, - valueManager: manager.valueManager, - fieldValueManager: manager.fieldValueManager, + valueManager: manager.internal_valueManager, + fieldValueManager: manager.internal_fieldValueManager, validator: manager.validator, valueType: manager.valueType, }); diff --git a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.ts b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.ts index 8e6cb32050ebd..12835555e9a57 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.ts +++ b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.ts @@ -29,8 +29,8 @@ export const useSingleInputDateTimeRangeField = < >({ forwardedProps, internalProps: internalPropsWithDefaults, - valueManager: manager.valueManager, - fieldValueManager: manager.fieldValueManager, + valueManager: manager.internal_valueManager, + fieldValueManager: manager.internal_fieldValueManager, validator: manager.validator, valueType: manager.valueType, }); diff --git a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/useSingleInputTimeRangeField.ts b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/useSingleInputTimeRangeField.ts index 0790048264c2e..bfa482d68eedf 100644 --- a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/useSingleInputTimeRangeField.ts +++ b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/useSingleInputTimeRangeField.ts @@ -29,8 +29,8 @@ export const useSingleInputTimeRangeField = < >({ forwardedProps, internalProps: internalPropsWithDefaults, - valueManager: manager.valueManager, - fieldValueManager: manager.fieldValueManager, + valueManager: manager.internal_valueManager, + fieldValueManager: manager.internal_fieldValueManager, validator: manager.validator, valueType: manager.valueType, }); diff --git a/packages/x-date-pickers-pro/src/managers/useDateRangeManager.ts b/packages/x-date-pickers-pro/src/managers/useDateRangeManager.ts index d00f695f8867f..306f68988f957 100644 --- a/packages/x-date-pickers-pro/src/managers/useDateRangeManager.ts +++ b/packages/x-date-pickers-pro/src/managers/useDateRangeManager.ts @@ -26,10 +26,10 @@ export function useDateRangeManager ({ valueManager: rangeValueManager, - fieldValueManager: getRangeFieldValueManager({ dateSeparator }), + internal_fieldValueManager: getRangeFieldValueManager({ dateSeparator }), validator: validateDateRange, valueType: 'date', - applyDefaultsToFieldInternalProps: ({ internalProps, utils, defaultDates }) => ({ + internal_applyDefaultsToFieldInternalProps: ({ internalProps, utils, defaultDates }) => ({ ...internalProps, ...getDateFieldInternalPropsDefaults({ defaultDates, utils, internalProps }), }), diff --git a/packages/x-date-pickers-pro/src/managers/useDateTimeRangeManager.ts b/packages/x-date-pickers-pro/src/managers/useDateTimeRangeManager.ts index 207d236806240..c15215f744dec 100644 --- a/packages/x-date-pickers-pro/src/managers/useDateTimeRangeManager.ts +++ b/packages/x-date-pickers-pro/src/managers/useDateTimeRangeManager.ts @@ -27,10 +27,10 @@ export function useDateTimeRangeManager ({ valueManager: rangeValueManager, - fieldValueManager: getRangeFieldValueManager({ dateSeparator }), + internal_fieldValueManager: getRangeFieldValueManager({ dateSeparator }), validator: validateDateTimeRange, valueType: 'date-time', - applyDefaultsToFieldInternalProps: ({ internalProps, utils, defaultDates }) => ({ + internal_applyDefaultsToFieldInternalProps: ({ internalProps, utils, defaultDates }) => ({ ...internalProps, ...getDateTimeFieldInternalPropsDefaults({ internalProps, utils, defaultDates }), }), diff --git a/packages/x-date-pickers-pro/src/managers/useTimeRangeManager.ts b/packages/x-date-pickers-pro/src/managers/useTimeRangeManager.ts index ae4de5e1ca115..472612a13e7c0 100644 --- a/packages/x-date-pickers-pro/src/managers/useTimeRangeManager.ts +++ b/packages/x-date-pickers-pro/src/managers/useTimeRangeManager.ts @@ -27,10 +27,10 @@ export function useTimeRangeManager ({ valueManager: rangeValueManager, - fieldValueManager: getRangeFieldValueManager({ dateSeparator }), + internal_fieldValueManager: getRangeFieldValueManager({ dateSeparator }), validator: validateTimeRange, valueType: 'time', - applyDefaultsToFieldInternalProps: ({ internalProps, utils }) => ({ + internal_applyDefaultsToFieldInternalProps: ({ internalProps, utils }) => ({ ...internalProps, ...getTimeFieldInternalPropsDefaults({ utils, internalProps }), }), diff --git a/packages/x-date-pickers/src/DateField/useDateField.ts b/packages/x-date-pickers/src/DateField/useDateField.ts index 75194449240ca..49b1e6d8b57df 100644 --- a/packages/x-date-pickers/src/DateField/useDateField.ts +++ b/packages/x-date-pickers/src/DateField/useDateField.ts @@ -26,8 +26,8 @@ export const useDateField = < >({ forwardedProps, internalProps: internalPropsWithDefaults, - valueManager: manager.valueManager, - fieldValueManager: manager.fieldValueManager, + valueManager: manager.internal_valueManager, + fieldValueManager: manager.internal_fieldValueManager, validator: manager.validator, valueType: manager.valueType, }); diff --git a/packages/x-date-pickers/src/DateTimeField/useDateTimeField.ts b/packages/x-date-pickers/src/DateTimeField/useDateTimeField.ts index d336adfa6e349..5943673b20c9b 100644 --- a/packages/x-date-pickers/src/DateTimeField/useDateTimeField.ts +++ b/packages/x-date-pickers/src/DateTimeField/useDateTimeField.ts @@ -26,8 +26,8 @@ export const useDateTimeField = < >({ forwardedProps, internalProps: internalPropsWithDefaults, - valueManager: manager.valueManager, - fieldValueManager: manager.fieldValueManager, + valueManager: manager.internal_valueManager, + fieldValueManager: manager.internal_fieldValueManager, validator: manager.validator, valueType: manager.valueType, }); diff --git a/packages/x-date-pickers/src/TimeField/useTimeField.ts b/packages/x-date-pickers/src/TimeField/useTimeField.ts index 3e472ad76557a..5b6e155433d54 100644 --- a/packages/x-date-pickers/src/TimeField/useTimeField.ts +++ b/packages/x-date-pickers/src/TimeField/useTimeField.ts @@ -26,8 +26,8 @@ export const useTimeField = < >({ forwardedProps, internalProps: internalPropsWithDefaults, - valueManager: manager.valueManager, - fieldValueManager: manager.fieldValueManager, + valueManager: manager.internal_valueManager, + fieldValueManager: manager.internal_fieldValueManager, validator: manager.validator, valueType: manager.valueType, }); 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 91de3071f883f..bba441178e48c 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useField.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useField.ts @@ -40,7 +40,7 @@ export const useFieldInternalPropsWithDefaults = => { const localizationContext = useLocalizationContext(); return React.useMemo(() => { - return manager.applyDefaultsToFieldInternalProps({ + return manager.internal_applyDefaultsToFieldInternalProps({ ...localizationContext, internalProps, }); diff --git a/packages/x-date-pickers/src/internals/models/index.ts b/packages/x-date-pickers/src/internals/models/index.ts index ef14b5bdd13b1..fdaa9b0a839b0 100644 --- a/packages/x-date-pickers/src/internals/models/index.ts +++ b/packages/x-date-pickers/src/internals/models/index.ts @@ -2,4 +2,4 @@ export * from './fields'; export * from './common'; export * from './value'; export * from './formProps'; -export * from './valueManager'; +export * from './manager'; diff --git a/packages/x-date-pickers/src/managers/useDateManager.ts b/packages/x-date-pickers/src/managers/useDateManager.ts index bdc7abda2c179..609e080774b03 100644 --- a/packages/x-date-pickers/src/managers/useDateManager.ts +++ b/packages/x-date-pickers/src/managers/useDateManager.ts @@ -26,10 +26,10 @@ export function useDateManager ({ valueManager: singleItemValueManager, - fieldValueManager: singleItemFieldValueManager, + internal_fieldValueManager: singleItemFieldValueManager, validator: validateDate, valueType: 'date', - applyDefaultsToFieldInternalProps: ({ internalProps, utils, defaultDates }) => ({ + internal_applyDefaultsToFieldInternalProps: ({ internalProps, utils, defaultDates }) => ({ ...internalProps, ...getDateFieldInternalPropsDefaults({ defaultDates, utils, internalProps }), }), diff --git a/packages/x-date-pickers/src/managers/useDateTimeManager.ts b/packages/x-date-pickers/src/managers/useDateTimeManager.ts index 5f6281e08de26..fcba07fb2e86a 100644 --- a/packages/x-date-pickers/src/managers/useDateTimeManager.ts +++ b/packages/x-date-pickers/src/managers/useDateTimeManager.ts @@ -27,10 +27,10 @@ export function useDateTimeManager ({ valueManager: singleItemValueManager, - fieldValueManager: singleItemFieldValueManager, + internal_fieldValueManager: singleItemFieldValueManager, validator: validateDateTime, valueType: 'date-time', - applyDefaultsToFieldInternalProps: ({ internalProps, utils, defaultDates }) => ({ + internal_applyDefaultsToFieldInternalProps: ({ internalProps, utils, defaultDates }) => ({ ...internalProps, ...getDateTimeFieldInternalPropsDefaults({ internalProps, utils, defaultDates }), }), diff --git a/packages/x-date-pickers/src/managers/useTimeManager.ts b/packages/x-date-pickers/src/managers/useTimeManager.ts index 01378229fce25..81a89a38fd228 100644 --- a/packages/x-date-pickers/src/managers/useTimeManager.ts +++ b/packages/x-date-pickers/src/managers/useTimeManager.ts @@ -26,10 +26,10 @@ export function useTimeManager ({ valueManager: singleItemValueManager, - fieldValueManager: singleItemFieldValueManager, + internal_fieldValueManager: singleItemFieldValueManager, validator: validateTime, valueType: 'time', - applyDefaultsToFieldInternalProps: ({ internalProps, utils }) => ({ + internal_applyDefaultsToFieldInternalProps: ({ internalProps, utils }) => ({ ...internalProps, ...getTimeFieldInternalPropsDefaults({ utils, internalProps }), }), diff --git a/packages/x-date-pickers/src/models/index.ts b/packages/x-date-pickers/src/models/index.ts index 3307409a6b5d0..ca1c963e4520e 100644 --- a/packages/x-date-pickers/src/models/index.ts +++ b/packages/x-date-pickers/src/models/index.ts @@ -5,7 +5,7 @@ export * from './views'; export * from './adapters'; export * from './common'; export * from './pickers'; -export * from './valueManager'; +export * from './manager'; // Utils shared across the X packages export type { PropsFromSlot } from '@mui/x-internals/slots'; diff --git a/packages/x-date-pickers/src/models/manager.ts b/packages/x-date-pickers/src/models/manager.ts index da58e6f898a29..a24e04dca52cb 100644 --- a/packages/x-date-pickers/src/models/manager.ts +++ b/packages/x-date-pickers/src/models/manager.ts @@ -23,14 +23,30 @@ export interface PickerManager< > { /** * Object containing basic methods to interact with the value of the picker or field. + * This object is not part of the public API and should not be used directly. */ - valueManager: PickerValueManager; + internal_valueManager: PickerValueManager; /** * Object containing all the necessary methods to interact with the value of the field. + * This object is not part of the public API and should not be used directly. */ - fieldValueManager: FieldValueManager; + internal_fieldValueManager: FieldValueManager; /** * Checks if a value is valid and returns an error code otherwise. + * It can be passed to the `useValidation` hook to validate a value: + * + * ```tsx + * import { useDateManager } from '@mui/x-date-pickers/managers'; + * import { useValidation } from '@mui/x-date-pickers/validation'; + * + * const manager = useDateManager(); + * const { hasValidationError } = useValidation({ + * validator: manager.validator, + * value, + * timezone, + * props, + * }); + * ``` */ validator: Validator; /** @@ -38,10 +54,11 @@ export interface PickerManager< * This usually includes: * - a default format to display the value in the field * - some default validation props that are needed to validate the value (e.g: minDate, maxDate) + * This object is not part of the public API and should not be used directly. * @param {ApplyDefaultsToFieldInternalPropsParameters} parameters The parameters to apply the defaults. * @returns {TFieldInternalPropsWithDefaults} The field internal props with the defaults applied. */ - applyDefaultsToFieldInternalProps: ( + internal_applyDefaultsToFieldInternalProps: ( parameters: ApplyDefaultsToFieldInternalPropsParameters, ) => TFieldInternalPropsWithDefaults; /** From 21c851842e58cf96cbe0d9e1d4c20af64bc3f1fb Mon Sep 17 00:00:00 2001 From: flavien Date: Mon, 18 Nov 2024 15:36:09 +0100 Subject: [PATCH 29/35] Work --- .../x-date-pickers-pro/src/managers/index.ts | 12 ++---- .../src/managers/useDateRangeManager.ts | 33 +++++++-------- .../src/managers/useDateTimeRangeManager.ts | 26 ++++++------ .../src/managers/useTimeRangeManager.ts | 33 +++++++-------- packages/x-date-pickers/src/managers/index.ts | 18 ++------ .../src/managers/useDateManager.ts | 37 +++++++++-------- .../src/managers/useDateTimeManager.ts | 41 ++++++++++--------- .../src/managers/useTimeManager.ts | 37 +++++++++-------- scripts/x-date-pickers-pro.exports.json | 25 ++++------- scripts/x-date-pickers.exports.json | 13 ++---- 10 files changed, 123 insertions(+), 152 deletions(-) diff --git a/packages/x-date-pickers-pro/src/managers/index.ts b/packages/x-date-pickers-pro/src/managers/index.ts index 3a950690ee532..07a939c8a1be5 100644 --- a/packages/x-date-pickers-pro/src/managers/index.ts +++ b/packages/x-date-pickers-pro/src/managers/index.ts @@ -1,23 +1,17 @@ export { useDateRangeManager } from './useDateRangeManager'; export type { - DateRangeManager, - DateRangeFieldInternalProps, - DateRangeFieldInternalPropsWithDefaults, + UseDateRangeManagerReturnValue, UseDateRangeManagerParameters, } from './useDateRangeManager'; export { useTimeRangeManager } from './useTimeRangeManager'; export type { - TimeRangeManager, - TimeRangeFieldInternalProps, - TimeRangeFieldInternalPropsWithDefaults, + UseTimeRangeManagerReturnValue, UseTimeRangeManagerParameters, } from './useTimeRangeManager'; export { useDateTimeRangeManager } from './useDateTimeRangeManager'; export type { - DateTimeRangeManager, - DateTimeRangeFieldInternalProps, - DateTimeRangeFieldInternalPropsWithDefaults, + UseDateTimeRangeManagerReturnValue, UseDateTimeRangeManagerParameters, } from './useDateTimeRangeManager'; diff --git a/packages/x-date-pickers-pro/src/managers/useDateRangeManager.ts b/packages/x-date-pickers-pro/src/managers/useDateRangeManager.ts index 306f68988f957..ff0352733471c 100644 --- a/packages/x-date-pickers-pro/src/managers/useDateRangeManager.ts +++ b/packages/x-date-pickers-pro/src/managers/useDateRangeManager.ts @@ -17,7 +17,7 @@ import { export function useDateRangeManager( parameters: UseDateRangeManagerParameters = {}, -): DateRangeManager { +): UseDateRangeManagerReturnValue { const { enableAccessibleFieldDOMStructure = true as TEnableAccessibleFieldDOMStructure, dateSeparator, @@ -25,7 +25,7 @@ export function useDateRangeManager ({ - valueManager: rangeValueManager, + internal_valueManager: rangeValueManager, internal_fieldValueManager: getRangeFieldValueManager({ dateSeparator }), validator: validateDateRange, valueType: 'date', @@ -39,15 +39,21 @@ export function useDateRangeManager = PickerManager< - PickerRangeValue, - TEnableAccessibleFieldDOMStructure, - DateRangeValidationError, - DateRangeFieldInternalProps, - DateRangeFieldInternalPropsWithDefaults ->; +export interface UseDateRangeManagerParameters + extends RangeFieldSeparatorProps { + enableAccessibleFieldDOMStructure?: TEnableAccessibleFieldDOMStructure; +} + +export type UseDateRangeManagerReturnValue = + PickerManager< + PickerRangeValue, + TEnableAccessibleFieldDOMStructure, + DateRangeValidationError, + DateRangeManagerFieldInternalProps, + DateRangeManagerFieldInternalPropsWithDefaults + >; -export interface DateRangeFieldInternalProps +interface DateRangeManagerFieldInternalProps extends MakeOptional< UseFieldInternalProps< PickerRangeValue, @@ -59,7 +65,7 @@ export interface DateRangeFieldInternalProps extends UseFieldInternalProps< PickerRangeValue, @@ -68,8 +74,3 @@ export interface DateRangeFieldInternalPropsWithDefaults< >, ValidateDateRangeProps, RangeFieldSeparatorProps {} - -export interface UseDateRangeManagerParameters - extends RangeFieldSeparatorProps { - enableAccessibleFieldDOMStructure?: TEnableAccessibleFieldDOMStructure; -} diff --git a/packages/x-date-pickers-pro/src/managers/useDateTimeRangeManager.ts b/packages/x-date-pickers-pro/src/managers/useDateTimeRangeManager.ts index c15215f744dec..fb07bf3e50450 100644 --- a/packages/x-date-pickers-pro/src/managers/useDateTimeRangeManager.ts +++ b/packages/x-date-pickers-pro/src/managers/useDateTimeRangeManager.ts @@ -18,7 +18,7 @@ import { export function useDateTimeRangeManager( parameters: UseDateTimeRangeManagerParameters = {}, -): DateTimeRangeManager { +): UseDateTimeRangeManagerReturnValue { const { enableAccessibleFieldDOMStructure = true as TEnableAccessibleFieldDOMStructure, dateSeparator, @@ -26,7 +26,7 @@ export function useDateTimeRangeManager ({ - valueManager: rangeValueManager, + internal_valueManager: rangeValueManager, internal_fieldValueManager: getRangeFieldValueManager({ dateSeparator }), validator: validateDateTimeRange, valueType: 'date-time', @@ -40,16 +40,22 @@ export function useDateTimeRangeManager = +export interface UseDateTimeRangeManagerParameters< + TEnableAccessibleFieldDOMStructure extends boolean, +> extends RangeFieldSeparatorProps { + enableAccessibleFieldDOMStructure?: TEnableAccessibleFieldDOMStructure; +} + +export type UseDateTimeRangeManagerReturnValue = PickerManager< PickerRangeValue, TEnableAccessibleFieldDOMStructure, DateTimeRangeValidationError, - DateTimeRangeFieldInternalProps, - DateTimeRangeFieldInternalPropsWithDefaults + DateTimeRangeManagerFieldInternalProps, + DateTimeRangeManagerFieldInternalPropsWithDefaults >; -export interface DateTimeRangeFieldInternalProps +interface DateTimeRangeManagerFieldInternalProps extends MakeOptional< UseFieldInternalProps< PickerRangeValue, @@ -62,7 +68,7 @@ export interface DateTimeRangeFieldInternalProps extends UseFieldInternalProps< PickerRangeValue, @@ -71,9 +77,3 @@ export interface DateTimeRangeFieldInternalPropsWithDefaults< >, ValidateDateTimeRangeProps, RangeFieldSeparatorProps {} - -export interface UseDateTimeRangeManagerParameters< - TEnableAccessibleFieldDOMStructure extends boolean, -> extends RangeFieldSeparatorProps { - enableAccessibleFieldDOMStructure?: TEnableAccessibleFieldDOMStructure; -} diff --git a/packages/x-date-pickers-pro/src/managers/useTimeRangeManager.ts b/packages/x-date-pickers-pro/src/managers/useTimeRangeManager.ts index 472612a13e7c0..6407041a890cc 100644 --- a/packages/x-date-pickers-pro/src/managers/useTimeRangeManager.ts +++ b/packages/x-date-pickers-pro/src/managers/useTimeRangeManager.ts @@ -18,7 +18,7 @@ import { export function useTimeRangeManager( parameters: UseTimeRangeManagerParameters = {}, -): TimeRangeManager { +): UseTimeRangeManagerReturnValue { const { enableAccessibleFieldDOMStructure = true as TEnableAccessibleFieldDOMStructure, dateSeparator, @@ -26,7 +26,7 @@ export function useTimeRangeManager ({ - valueManager: rangeValueManager, + internal_valueManager: rangeValueManager, internal_fieldValueManager: getRangeFieldValueManager({ dateSeparator }), validator: validateTimeRange, valueType: 'time', @@ -40,15 +40,21 @@ export function useTimeRangeManager = PickerManager< - PickerRangeValue, - TEnableAccessibleFieldDOMStructure, - TimeRangeValidationError, - TimeRangeFieldInternalProps, - TimeRangeFieldInternalPropsWithDefaults ->; +export interface UseTimeRangeManagerParameters + extends RangeFieldSeparatorProps { + enableAccessibleFieldDOMStructure?: TEnableAccessibleFieldDOMStructure; +} + +export type UseTimeRangeManagerReturnValue = + PickerManager< + PickerRangeValue, + TEnableAccessibleFieldDOMStructure, + TimeRangeValidationError, + TimeRangeManagerFieldInternalProps, + TimeRangeManagerFieldInternalPropsWithDefaults + >; -export interface TimeRangeFieldInternalProps +interface TimeRangeManagerFieldInternalProps extends MakeOptional< UseFieldInternalProps< PickerRangeValue, @@ -61,7 +67,7 @@ export interface TimeRangeFieldInternalProps extends UseFieldInternalProps< PickerRangeValue, @@ -69,8 +75,3 @@ export interface TimeRangeFieldInternalPropsWithDefaults< TimeRangeValidationError >, ValidateTimeRangeProps {} - -export interface UseTimeRangeManagerParameters - extends RangeFieldSeparatorProps { - enableAccessibleFieldDOMStructure?: TEnableAccessibleFieldDOMStructure; -} diff --git a/packages/x-date-pickers/src/managers/index.ts b/packages/x-date-pickers/src/managers/index.ts index 8f4d4ec94515f..085026d5225fa 100644 --- a/packages/x-date-pickers/src/managers/index.ts +++ b/packages/x-date-pickers/src/managers/index.ts @@ -1,23 +1,11 @@ export { useDateManager } from './useDateManager'; -export type { - DateManager, - DateFieldInternalProps, - DateFieldInternalPropsWithDefaults, - UseDateManagerParameters, -} from './useDateManager'; +export type { UseDateManagerReturnValue, UseDateManagerParameters } from './useDateManager'; export { useTimeManager } from './useTimeManager'; -export type { - TimeManager, - TimeFieldInternalProps, - TimeFieldInternalPropsWithDefaults, - UseTimeManagerParameters, -} from './useTimeManager'; +export type { UseTimeManagerReturnValue, UseTimeManagerParameters } from './useTimeManager'; export { useDateTimeManager } from './useDateTimeManager'; export type { - DateTimeManager, - DateTimeFieldInternalProps, - DateTimeFieldInternalPropsWithDefaults, + UseDateTimeManagerReturnValue, UseDateTimeManagerParameters, } from './useDateTimeManager'; diff --git a/packages/x-date-pickers/src/managers/useDateManager.ts b/packages/x-date-pickers/src/managers/useDateManager.ts index 609e080774b03..a26636c14f56a 100644 --- a/packages/x-date-pickers/src/managers/useDateManager.ts +++ b/packages/x-date-pickers/src/managers/useDateManager.ts @@ -19,13 +19,13 @@ import { PickerValue } from '../internals/models'; export function useDateManager( parameters: UseDateManagerParameters = {}, -): DateManager { +): UseDateManagerReturnValue { const { enableAccessibleFieldDOMStructure = true as TEnableAccessibleFieldDOMStructure } = parameters; return React.useMemo( () => ({ - valueManager: singleItemValueManager, + internal_valueManager: singleItemValueManager, internal_fieldValueManager: singleItemFieldValueManager, validator: validateDate, valueType: 'date', @@ -57,22 +57,27 @@ export function getDateFieldInternalPropsDefaults( }; } -export type DateManager = PickerManager< - PickerValue, - TEnableAccessibleFieldDOMStructure, - DateValidationError, - DateFieldInternalProps, - DateFieldInternalPropsWithDefaults ->; +export interface UseDateManagerParameters { + enableAccessibleFieldDOMStructure?: TEnableAccessibleFieldDOMStructure; +} + +export type UseDateManagerReturnValue = + PickerManager< + PickerValue, + TEnableAccessibleFieldDOMStructure, + DateValidationError, + DateManagerFieldInternalProps, + DateManagerFieldInternalPropsWithDefaults + >; -export interface DateFieldInternalProps +interface DateManagerFieldInternalProps extends MakeOptional< UseFieldInternalProps, 'format' >, ExportedValidateDateProps {} -export interface DateFieldInternalPropsWithDefaults< +interface DateManagerFieldInternalPropsWithDefaults< TEnableAccessibleFieldDOMStructure extends boolean, > extends UseFieldInternalProps< PickerValue, @@ -81,16 +86,12 @@ export interface DateFieldInternalPropsWithDefaults< >, ValidateDateProps {} -type DateFieldPropsToDefault = 'format' | ValidateDatePropsToDefault; - -export interface UseDateManagerParameters { - enableAccessibleFieldDOMStructure?: TEnableAccessibleFieldDOMStructure; -} +type DateManagerFieldPropsToDefault = 'format' | ValidateDatePropsToDefault; interface GetDateFieldInternalPropsDefaultsParameters extends Pick { - internalProps: Pick, DateFieldPropsToDefault>; + internalProps: Pick, DateManagerFieldPropsToDefault>; } interface GetDateFieldInternalPropsDefaultsReturnValue - extends Pick, DateFieldPropsToDefault> {} + extends Pick, DateManagerFieldPropsToDefault> {} diff --git a/packages/x-date-pickers/src/managers/useDateTimeManager.ts b/packages/x-date-pickers/src/managers/useDateTimeManager.ts index fcba07fb2e86a..8cf577864607e 100644 --- a/packages/x-date-pickers/src/managers/useDateTimeManager.ts +++ b/packages/x-date-pickers/src/managers/useDateTimeManager.ts @@ -20,13 +20,13 @@ import { PickerValue } from '../internals/models'; export function useDateTimeManager( parameters: UseDateTimeManagerParameters = {}, -): DateTimeManager { +): UseDateTimeManagerReturnValue { const { enableAccessibleFieldDOMStructure = true as TEnableAccessibleFieldDOMStructure } = parameters; return React.useMemo( () => ({ - valueManager: singleItemValueManager, + internal_valueManager: singleItemValueManager, internal_fieldValueManager: singleItemFieldValueManager, validator: validateDateTime, valueType: 'date-time', @@ -75,15 +75,20 @@ export function getDateTimeFieldInternalPropsDefaults( }; } -export type DateTimeManager = PickerManager< - PickerValue, - TEnableAccessibleFieldDOMStructure, - DateTimeValidationError, - DateTimeFieldInternalProps, - DateTimeFieldInternalPropsWithDefaults ->; +export interface UseDateTimeManagerParameters { + enableAccessibleFieldDOMStructure?: TEnableAccessibleFieldDOMStructure; +} + +export type UseDateTimeManagerReturnValue = + PickerManager< + PickerValue, + TEnableAccessibleFieldDOMStructure, + DateTimeValidationError, + DateTimeManagerFieldInternalProps, + DateTimeManagerFieldInternalPropsWithDefaults + >; -export interface DateTimeFieldInternalProps +interface DateTimeManagerFieldInternalProps extends MakeOptional< UseFieldInternalProps< PickerValue, @@ -95,7 +100,7 @@ export interface DateTimeFieldInternalProps extends UseFieldInternalProps< PickerValue, @@ -104,27 +109,23 @@ export interface DateTimeFieldInternalPropsWithDefaults< >, ValidateDateTimeProps {} -type DateTimeFieldPropsToDefault = +type DateTimeManagerFieldPropsToDefault = | 'format' // minTime and maxTime can still be undefined after applying defaults. | 'minTime' | 'maxTime' | ValidateDateTimePropsToDefault; -export interface UseDateTimeManagerParameters { - enableAccessibleFieldDOMStructure?: TEnableAccessibleFieldDOMStructure; -} - interface GetDateTimeFieldInternalPropsDefaultsParameters extends Pick { internalProps: Pick< - DateTimeFieldInternalProps, - DateTimeFieldPropsToDefault | 'minDateTime' | 'maxDateTime' | 'ampm' + DateTimeManagerFieldInternalProps, + DateTimeManagerFieldPropsToDefault | 'minDateTime' | 'maxDateTime' | 'ampm' >; } interface GetDateTimeFieldInternalPropsDefaultsReturnValue extends Pick< - DateTimeFieldInternalPropsWithDefaults, - DateTimeFieldPropsToDefault | 'disableIgnoringDatePartForTimeValidation' + DateTimeManagerFieldInternalPropsWithDefaults, + DateTimeManagerFieldPropsToDefault | 'disableIgnoringDatePartForTimeValidation' > {} diff --git a/packages/x-date-pickers/src/managers/useTimeManager.ts b/packages/x-date-pickers/src/managers/useTimeManager.ts index 81a89a38fd228..baea1c677f283 100644 --- a/packages/x-date-pickers/src/managers/useTimeManager.ts +++ b/packages/x-date-pickers/src/managers/useTimeManager.ts @@ -19,13 +19,13 @@ import { PickerValue } from '../internals/models'; export function useTimeManager( parameters: UseTimeManagerParameters = {}, -): TimeManager { +): UseTimeManagerReturnValue { const { enableAccessibleFieldDOMStructure = true as TEnableAccessibleFieldDOMStructure } = parameters; return React.useMemo( () => ({ - valueManager: singleItemValueManager, + internal_valueManager: singleItemValueManager, internal_fieldValueManager: singleItemFieldValueManager, validator: validateTime, valueType: 'time', @@ -57,15 +57,20 @@ export function getTimeFieldInternalPropsDefaults( }; } -export type TimeManager = PickerManager< - PickerValue, - TEnableAccessibleFieldDOMStructure, - TimeValidationError, - TimeFieldInternalProps, - TimeFieldInternalPropsWithDefaults ->; +export interface UseTimeManagerParameters { + enableAccessibleFieldDOMStructure?: TEnableAccessibleFieldDOMStructure; +} + +export type UseTimeManagerReturnValue = + PickerManager< + PickerValue, + TEnableAccessibleFieldDOMStructure, + TimeValidationError, + TimeManagerFieldInternalProps, + TimeManagerFieldInternalPropsWithDefaults + >; -export interface TimeFieldInternalProps +interface TimeManagerFieldInternalProps extends MakeOptional< UseFieldInternalProps, 'format' @@ -73,7 +78,7 @@ export interface TimeFieldInternalProps extends UseFieldInternalProps< PickerValue, @@ -82,16 +87,12 @@ export interface TimeFieldInternalPropsWithDefaults< >, ValidateTimeProps {} -type TimeFieldPropsToDefault = 'format' | ValidateTimePropsToDefault; - -export interface UseTimeManagerParameters { - enableAccessibleFieldDOMStructure?: TEnableAccessibleFieldDOMStructure; -} +type TimeManagerFieldPropsToDefault = 'format' | ValidateTimePropsToDefault; interface GetTimeFieldInternalPropsDefaultsParameters extends Pick { - internalProps: Pick, TimeFieldPropsToDefault | 'ampm'>; + internalProps: Pick, TimeManagerFieldPropsToDefault | 'ampm'>; } interface GetTimeFieldInternalPropsDefaultsReturnValue - extends Pick, TimeFieldPropsToDefault> {} + extends Pick, TimeManagerFieldPropsToDefault> {} diff --git a/scripts/x-date-pickers-pro.exports.json b/scripts/x-date-pickers-pro.exports.json index 8aea3442614c6..231ac18ee87f0 100644 --- a/scripts/x-date-pickers-pro.exports.json +++ b/scripts/x-date-pickers-pro.exports.json @@ -31,10 +31,7 @@ { "name": "DateCalendarSlotProps", "kind": "Interface" }, { "name": "DateCalendarSlots", "kind": "Interface" }, { "name": "DateField", "kind": "Variable" }, - { "name": "DateFieldInternalProps", "kind": "Interface" }, - { "name": "DateFieldInternalPropsWithDefaults", "kind": "Interface" }, { "name": "DateFieldProps", "kind": "TypeAlias" }, - { "name": "DateManager", "kind": "TypeAlias" }, { "name": "DateOrTimeView", "kind": "TypeAlias" }, { "name": "DatePicker", "kind": "Variable" }, { "name": "DatePickerFieldProps", "kind": "TypeAlias" }, @@ -54,10 +51,7 @@ { "name": "DateRangeCalendarProps", "kind": "Interface" }, { "name": "DateRangeCalendarSlotProps", "kind": "Interface" }, { "name": "DateRangeCalendarSlots", "kind": "Interface" }, - { "name": "DateRangeFieldInternalProps", "kind": "Interface" }, - { "name": "DateRangeFieldInternalPropsWithDefaults", "kind": "Interface" }, { "name": "DateRangeIcon", "kind": "Variable" }, - { "name": "DateRangeManager", "kind": "TypeAlias" }, { "name": "DateRangePicker", "kind": "Variable" }, { "name": "DateRangePickerDay", "kind": "Variable" }, { "name": "dateRangePickerDayClasses", "kind": "Variable" }, @@ -76,10 +70,7 @@ { "name": "DateRangeValidationError", "kind": "TypeAlias" }, { "name": "DateRangeViewRendererProps", "kind": "Interface" }, { "name": "DateTimeField", "kind": "Variable" }, - { "name": "DateTimeFieldInternalProps", "kind": "Interface" }, - { "name": "DateTimeFieldInternalPropsWithDefaults", "kind": "Interface" }, { "name": "DateTimeFieldProps", "kind": "TypeAlias" }, - { "name": "DateTimeManager", "kind": "TypeAlias" }, { "name": "DateTimePicker", "kind": "Variable" }, { "name": "DateTimePickerFieldProps", "kind": "TypeAlias" }, { "name": "DateTimePickerProps", "kind": "Interface" }, @@ -95,9 +86,6 @@ { "name": "DateTimePickerToolbarClasses", "kind": "Interface" }, { "name": "DateTimePickerToolbarClassKey", "kind": "TypeAlias" }, { "name": "DateTimePickerToolbarProps", "kind": "Interface" }, - { "name": "DateTimeRangeFieldInternalProps", "kind": "Interface" }, - { "name": "DateTimeRangeFieldInternalPropsWithDefaults", "kind": "Interface" }, - { "name": "DateTimeRangeManager", "kind": "TypeAlias" }, { "name": "DateTimeRangePicker", "kind": "Variable" }, { "name": "DateTimeRangePickerFieldProps", "kind": "TypeAlias" }, { "name": "DateTimeRangePickerProps", "kind": "Interface" }, @@ -262,6 +250,7 @@ { "name": "PickerDayOwnerState", "kind": "Interface" }, { "name": "PickerFieldSlotProps", "kind": "TypeAlias" }, { "name": "PickerLayoutOwnerState", "kind": "Interface" }, + { "name": "PickerManager", "kind": "Interface" }, { "name": "PickerOwnerState", "kind": "Interface" }, { "name": "PickerRangeFieldSlotProps", "kind": "TypeAlias" }, { "name": "PickersActionBar", "kind": "Function" }, @@ -388,11 +377,8 @@ { "name": "TimeClockSlotProps", "kind": "Interface" }, { "name": "TimeClockSlots", "kind": "Interface" }, { "name": "TimeField", "kind": "Variable" }, - { "name": "TimeFieldInternalProps", "kind": "Interface" }, - { "name": "TimeFieldInternalPropsWithDefaults", "kind": "Interface" }, { "name": "TimeFieldProps", "kind": "TypeAlias" }, { "name": "TimeIcon", "kind": "Variable" }, - { "name": "TimeManager", "kind": "TypeAlias" }, { "name": "TimePicker", "kind": "Variable" }, { "name": "TimePickerFieldProps", "kind": "TypeAlias" }, { "name": "TimePickerProps", "kind": "Interface" }, @@ -403,9 +389,6 @@ { "name": "TimePickerToolbarClasses", "kind": "Interface" }, { "name": "TimePickerToolbarClassKey", "kind": "TypeAlias" }, { "name": "TimePickerToolbarProps", "kind": "Interface" }, - { "name": "TimeRangeFieldInternalProps", "kind": "Interface" }, - { "name": "TimeRangeFieldInternalPropsWithDefaults", "kind": "Interface" }, - { "name": "TimeRangeManager", "kind": "TypeAlias" }, { "name": "TimeRangeValidationError", "kind": "TypeAlias" }, { "name": "TimeStepOptions", "kind": "Interface" }, { "name": "TimeValidationError", "kind": "TypeAlias" }, @@ -433,14 +416,18 @@ { "name": "UseDateFieldProps", "kind": "Interface" }, { "name": "useDateManager", "kind": "Function" }, { "name": "UseDateManagerParameters", "kind": "Interface" }, + { "name": "UseDateManagerReturnValue", "kind": "TypeAlias" }, { "name": "UseDateRangeFieldProps", "kind": "Interface" }, { "name": "useDateRangeManager", "kind": "Function" }, { "name": "UseDateRangeManagerParameters", "kind": "Interface" }, + { "name": "UseDateRangeManagerReturnValue", "kind": "TypeAlias" }, { "name": "UseDateTimeFieldProps", "kind": "Interface" }, { "name": "useDateTimeManager", "kind": "Function" }, { "name": "UseDateTimeManagerParameters", "kind": "Interface" }, + { "name": "UseDateTimeManagerReturnValue", "kind": "TypeAlias" }, { "name": "useDateTimeRangeManager", "kind": "Function" }, { "name": "UseDateTimeRangeManagerParameters", "kind": "Interface" }, + { "name": "UseDateTimeRangeManagerReturnValue", "kind": "TypeAlias" }, { "name": "UseMultiInputDateRangeFieldComponentProps", "kind": "TypeAlias" }, { "name": "UseMultiInputDateRangeFieldProps", "kind": "Interface" }, { "name": "UseMultiInputDateTimeRangeFieldComponentProps", "kind": "TypeAlias" }, @@ -458,8 +445,10 @@ { "name": "UseTimeFieldProps", "kind": "Interface" }, { "name": "useTimeManager", "kind": "Function" }, { "name": "UseTimeManagerParameters", "kind": "Interface" }, + { "name": "UseTimeManagerReturnValue", "kind": "TypeAlias" }, { "name": "useTimeRangeManager", "kind": "Function" }, { "name": "UseTimeRangeManagerParameters", "kind": "Interface" }, + { "name": "UseTimeRangeManagerReturnValue", "kind": "TypeAlias" }, { "name": "useValidation", "kind": "Function" }, { "name": "validateDate", "kind": "Variable" }, { "name": "ValidateDateProps", "kind": "Interface" }, diff --git a/scripts/x-date-pickers.exports.json b/scripts/x-date-pickers.exports.json index 7fc853c3b2a91..8fda12ac8bac4 100644 --- a/scripts/x-date-pickers.exports.json +++ b/scripts/x-date-pickers.exports.json @@ -30,10 +30,7 @@ { "name": "DateCalendarSlotProps", "kind": "Interface" }, { "name": "DateCalendarSlots", "kind": "Interface" }, { "name": "DateField", "kind": "Variable" }, - { "name": "DateFieldInternalProps", "kind": "Interface" }, - { "name": "DateFieldInternalPropsWithDefaults", "kind": "Interface" }, { "name": "DateFieldProps", "kind": "TypeAlias" }, - { "name": "DateManager", "kind": "TypeAlias" }, { "name": "DateOrTimeView", "kind": "TypeAlias" }, { "name": "DatePicker", "kind": "Variable" }, { "name": "DatePickerFieldProps", "kind": "TypeAlias" }, @@ -47,10 +44,7 @@ { "name": "DatePickerToolbarProps", "kind": "Interface" }, { "name": "DateRangeIcon", "kind": "Variable" }, { "name": "DateTimeField", "kind": "Variable" }, - { "name": "DateTimeFieldInternalProps", "kind": "Interface" }, - { "name": "DateTimeFieldInternalPropsWithDefaults", "kind": "Interface" }, { "name": "DateTimeFieldProps", "kind": "TypeAlias" }, - { "name": "DateTimeManager", "kind": "TypeAlias" }, { "name": "DateTimePicker", "kind": "Variable" }, { "name": "DateTimePickerFieldProps", "kind": "TypeAlias" }, { "name": "DateTimePickerProps", "kind": "Interface" }, @@ -171,6 +165,7 @@ { "name": "PickerDayOwnerState", "kind": "Interface" }, { "name": "PickerFieldSlotProps", "kind": "TypeAlias" }, { "name": "PickerLayoutOwnerState", "kind": "Interface" }, + { "name": "PickerManager", "kind": "Interface" }, { "name": "PickerOwnerState", "kind": "Interface" }, { "name": "PickersActionBar", "kind": "Function" }, { "name": "PickersActionBarAction", "kind": "TypeAlias" }, @@ -281,11 +276,8 @@ { "name": "TimeClockSlotProps", "kind": "Interface" }, { "name": "TimeClockSlots", "kind": "Interface" }, { "name": "TimeField", "kind": "Variable" }, - { "name": "TimeFieldInternalProps", "kind": "Interface" }, - { "name": "TimeFieldInternalPropsWithDefaults", "kind": "Interface" }, { "name": "TimeFieldProps", "kind": "TypeAlias" }, { "name": "TimeIcon", "kind": "Variable" }, - { "name": "TimeManager", "kind": "TypeAlias" }, { "name": "TimePicker", "kind": "Variable" }, { "name": "TimePickerFieldProps", "kind": "TypeAlias" }, { "name": "TimePickerProps", "kind": "Interface" }, @@ -316,9 +308,11 @@ { "name": "UseDateFieldProps", "kind": "Interface" }, { "name": "useDateManager", "kind": "Function" }, { "name": "UseDateManagerParameters", "kind": "Interface" }, + { "name": "UseDateManagerReturnValue", "kind": "TypeAlias" }, { "name": "UseDateTimeFieldProps", "kind": "Interface" }, { "name": "useDateTimeManager", "kind": "Function" }, { "name": "UseDateTimeManagerParameters", "kind": "Interface" }, + { "name": "UseDateTimeManagerReturnValue", "kind": "TypeAlias" }, { "name": "useParsedFormat", "kind": "Variable" }, { "name": "usePickerContext", "kind": "Variable" }, { "name": "usePickerLayout", "kind": "ExportAssignment" }, @@ -327,6 +321,7 @@ { "name": "UseTimeFieldProps", "kind": "Interface" }, { "name": "useTimeManager", "kind": "Function" }, { "name": "UseTimeManagerParameters", "kind": "Interface" }, + { "name": "UseTimeManagerReturnValue", "kind": "TypeAlias" }, { "name": "useValidation", "kind": "Function" }, { "name": "validateDate", "kind": "Variable" }, { "name": "ValidateDateProps", "kind": "Interface" }, From 74df222069d055c561c12a52053aad978875d852 Mon Sep 17 00:00:00 2001 From: flavien Date: Mon, 18 Nov 2024 16:00:46 +0100 Subject: [PATCH 30/35] WOrk --- packages/x-date-pickers/src/models/manager.ts | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/packages/x-date-pickers/src/models/manager.ts b/packages/x-date-pickers/src/models/manager.ts index a24e04dca52cb..b166bfbcc0f90 100644 --- a/packages/x-date-pickers/src/models/manager.ts +++ b/packages/x-date-pickers/src/models/manager.ts @@ -8,7 +8,20 @@ import type { PickerValueType } from './common'; /** * Object that contains all the necessary methods and properties to adapter a picker or a field for a given value type. * You should never create your own manager. - * Instead, use the ones provided exported from '@mui/x-date-pickers/managers' and '@mui/x-date-pickers-pro/managers'. + * Instead, use the hooks exported from '@mui/x-date-pickers/managers' and '@mui/x-date-pickers-pro/managers'. + * + * ```tsx + * import { useDateManager } from '@mui/x-date-pickers/managers'; + * import { useValidation } from '@mui/x-date-pickers/validation'; + * + * const manager = useDateManager(); + * const { hasValidationError } = useValidation({ + * validator: manager.validator, + * value, + * timezone, + * props, + * }); + * ``` */ export interface PickerManager< TValue extends PickerValidValue, From e7f5500dcb18a086a519523ae1410dc0639ca92e Mon Sep 17 00:00:00 2001 From: flavien Date: Tue, 19 Nov 2024 15:44:33 +0100 Subject: [PATCH 31/35] 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 bb05d474abfc1..0000000000000 --- 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 3eb5a048bae70b9e58c3435f5c33869d1512b329 Mon Sep 17 00:00:00 2001 From: flavien Date: Wed, 20 Nov 2024 10:49:36 +0100 Subject: [PATCH 32/35] Fix --- .../src/managers/useDateRangeManager.ts | 6 +-- .../src/managers/useDateTimeRangeManager.ts | 6 +-- .../src/managers/useTimeRangeManager.ts | 6 +-- .../src/managers/useDateManager.ts | 6 +-- .../src/managers/useDateTimeManager.ts | 6 +-- .../src/managers/useTimeManager.ts | 6 +-- packages/x-date-pickers/src/models/manager.ts | 37 ++++++++++--------- 7 files changed, 37 insertions(+), 36 deletions(-) diff --git a/packages/x-date-pickers-pro/src/managers/useDateRangeManager.ts b/packages/x-date-pickers-pro/src/managers/useDateRangeManager.ts index ff0352733471c..ed4785f5e9ead 100644 --- a/packages/x-date-pickers-pro/src/managers/useDateRangeManager.ts +++ b/packages/x-date-pickers-pro/src/managers/useDateRangeManager.ts @@ -25,15 +25,15 @@ export function useDateRangeManager ({ + valueType: 'date', + validator: validateDateRange, internal_valueManager: rangeValueManager, internal_fieldValueManager: getRangeFieldValueManager({ dateSeparator }), - validator: validateDateRange, - valueType: 'date', + internal_enableAccessibleFieldDOMStructure: enableAccessibleFieldDOMStructure, internal_applyDefaultsToFieldInternalProps: ({ internalProps, utils, defaultDates }) => ({ ...internalProps, ...getDateFieldInternalPropsDefaults({ defaultDates, utils, internalProps }), }), - enableAccessibleFieldDOMStructure, }), [enableAccessibleFieldDOMStructure, dateSeparator], ); diff --git a/packages/x-date-pickers-pro/src/managers/useDateTimeRangeManager.ts b/packages/x-date-pickers-pro/src/managers/useDateTimeRangeManager.ts index fb07bf3e50450..8e779c3230b8b 100644 --- a/packages/x-date-pickers-pro/src/managers/useDateTimeRangeManager.ts +++ b/packages/x-date-pickers-pro/src/managers/useDateTimeRangeManager.ts @@ -26,15 +26,15 @@ export function useDateTimeRangeManager ({ + valueType: 'date-time', + validator: validateDateTimeRange, internal_valueManager: rangeValueManager, internal_fieldValueManager: getRangeFieldValueManager({ dateSeparator }), - validator: validateDateTimeRange, - valueType: 'date-time', + internal_enableAccessibleFieldDOMStructure: enableAccessibleFieldDOMStructure, internal_applyDefaultsToFieldInternalProps: ({ internalProps, utils, defaultDates }) => ({ ...internalProps, ...getDateTimeFieldInternalPropsDefaults({ internalProps, utils, defaultDates }), }), - enableAccessibleFieldDOMStructure, }), [enableAccessibleFieldDOMStructure, dateSeparator], ); diff --git a/packages/x-date-pickers-pro/src/managers/useTimeRangeManager.ts b/packages/x-date-pickers-pro/src/managers/useTimeRangeManager.ts index 6407041a890cc..a17555bb6b5e9 100644 --- a/packages/x-date-pickers-pro/src/managers/useTimeRangeManager.ts +++ b/packages/x-date-pickers-pro/src/managers/useTimeRangeManager.ts @@ -26,15 +26,15 @@ export function useTimeRangeManager ({ + valueType: 'time', + validator: validateTimeRange, internal_valueManager: rangeValueManager, internal_fieldValueManager: getRangeFieldValueManager({ dateSeparator }), - validator: validateTimeRange, - valueType: 'time', + internal_enableAccessibleFieldDOMStructure: enableAccessibleFieldDOMStructure, internal_applyDefaultsToFieldInternalProps: ({ internalProps, utils }) => ({ ...internalProps, ...getTimeFieldInternalPropsDefaults({ utils, internalProps }), }), - enableAccessibleFieldDOMStructure, }), [enableAccessibleFieldDOMStructure, dateSeparator], ); diff --git a/packages/x-date-pickers/src/managers/useDateManager.ts b/packages/x-date-pickers/src/managers/useDateManager.ts index a26636c14f56a..aec21fd0379bf 100644 --- a/packages/x-date-pickers/src/managers/useDateManager.ts +++ b/packages/x-date-pickers/src/managers/useDateManager.ts @@ -25,15 +25,15 @@ export function useDateManager ({ + valueType: 'date', + validator: validateDate, internal_valueManager: singleItemValueManager, internal_fieldValueManager: singleItemFieldValueManager, - validator: validateDate, - valueType: 'date', + internal_enableAccessibleFieldDOMStructure: enableAccessibleFieldDOMStructure, internal_applyDefaultsToFieldInternalProps: ({ internalProps, utils, defaultDates }) => ({ ...internalProps, ...getDateFieldInternalPropsDefaults({ defaultDates, utils, internalProps }), }), - enableAccessibleFieldDOMStructure, }), [enableAccessibleFieldDOMStructure], ); diff --git a/packages/x-date-pickers/src/managers/useDateTimeManager.ts b/packages/x-date-pickers/src/managers/useDateTimeManager.ts index 8cf577864607e..965333a10b704 100644 --- a/packages/x-date-pickers/src/managers/useDateTimeManager.ts +++ b/packages/x-date-pickers/src/managers/useDateTimeManager.ts @@ -26,15 +26,15 @@ export function useDateTimeManager ({ + valueType: 'date-time', + validator: validateDateTime, internal_valueManager: singleItemValueManager, internal_fieldValueManager: singleItemFieldValueManager, - validator: validateDateTime, - valueType: 'date-time', + internal_enableAccessibleFieldDOMStructure: enableAccessibleFieldDOMStructure, internal_applyDefaultsToFieldInternalProps: ({ internalProps, utils, defaultDates }) => ({ ...internalProps, ...getDateTimeFieldInternalPropsDefaults({ internalProps, utils, defaultDates }), }), - enableAccessibleFieldDOMStructure, }), [enableAccessibleFieldDOMStructure], ); diff --git a/packages/x-date-pickers/src/managers/useTimeManager.ts b/packages/x-date-pickers/src/managers/useTimeManager.ts index baea1c677f283..cfbccbabbfe33 100644 --- a/packages/x-date-pickers/src/managers/useTimeManager.ts +++ b/packages/x-date-pickers/src/managers/useTimeManager.ts @@ -25,15 +25,15 @@ export function useTimeManager ({ + valueType: 'time', + validator: validateTime, internal_valueManager: singleItemValueManager, internal_fieldValueManager: singleItemFieldValueManager, - validator: validateTime, - valueType: 'time', + internal_enableAccessibleFieldDOMStructure: enableAccessibleFieldDOMStructure, internal_applyDefaultsToFieldInternalProps: ({ internalProps, utils }) => ({ ...internalProps, ...getTimeFieldInternalPropsDefaults({ utils, internalProps }), }), - enableAccessibleFieldDOMStructure, }), [enableAccessibleFieldDOMStructure], ); diff --git a/packages/x-date-pickers/src/models/manager.ts b/packages/x-date-pickers/src/models/manager.ts index b166bfbcc0f90..dd2346f71e953 100644 --- a/packages/x-date-pickers/src/models/manager.ts +++ b/packages/x-date-pickers/src/models/manager.ts @@ -35,15 +35,9 @@ export interface PickerManager< >, > { /** - * Object containing basic methods to interact with the value of the picker or field. - * This object is not part of the public API and should not be used directly. - */ - internal_valueManager: PickerValueManager; - /** - * Object containing all the necessary methods to interact with the value of the field. - * This object is not part of the public API and should not be used directly. + * The type of the value (e.g. 'date', 'date-time', 'time'). */ - internal_fieldValueManager: FieldValueManager; + valueType: PickerValueType; /** * Checks if a value is valid and returns an error code otherwise. * It can be passed to the `useValidation` hook to validate a value: @@ -62,27 +56,34 @@ export interface PickerManager< * ``` */ validator: Validator; + /** + * Object containing basic methods to interact with the value of the picker or field. + * This property is not part of the public API and should not be used directly. + */ + internal_valueManager: PickerValueManager; + /** + * Object containing all the necessary methods to interact with the value of the field. + * This property is not part of the public API and should not be used directly. + */ + internal_fieldValueManager: FieldValueManager; + /** + * `true` if the field is using the accessible DOM structure. + * `false` if the field is using the non-accessible DOM structure. + * This property is not part of the public API and should not be used directly. + */ + internal_enableAccessibleFieldDOMStructure: TEnableAccessibleFieldDOMStructure; /** * Applies the default values to the field internal props. * This usually includes: * - a default format to display the value in the field * - some default validation props that are needed to validate the value (e.g: minDate, maxDate) - * This object is not part of the public API and should not be used directly. + * This property is not part of the public API and should not be used directly. * @param {ApplyDefaultsToFieldInternalPropsParameters} parameters The parameters to apply the defaults. * @returns {TFieldInternalPropsWithDefaults} The field internal props with the defaults applied. */ internal_applyDefaultsToFieldInternalProps: ( parameters: ApplyDefaultsToFieldInternalPropsParameters, ) => TFieldInternalPropsWithDefaults; - /** - * The type of the value (e.g. 'date', 'date-time', 'time'). - */ - valueType: PickerValueType; - /** - * `true` if the field is using the accessible DOM structure. - * `false` if the field is using the non-accessible legacy DOM structure (which will be deprecated and removed in the future). - */ - enableAccessibleFieldDOMStructure: TEnableAccessibleFieldDOMStructure; } interface ApplyDefaultsToFieldInternalPropsParameters From a1a048df1899f0c4cc3065aa8591b6dcd00a1376 Mon Sep 17 00:00:00 2001 From: flavien Date: Mon, 25 Nov 2024 10:50:04 +0100 Subject: [PATCH 33/35] Fix --- .../tests/rowSelection.DataGridPro.test.tsx | 64 +++++++++++++++++++ .../src/tests/rowSelection.DataGrid.test.tsx | 24 +++++++ 2 files changed, 88 insertions(+) diff --git a/packages/x-data-grid-pro/src/tests/rowSelection.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/rowSelection.DataGridPro.test.tsx index fdf3990d7767d..ad5d41c588c75 100644 --- a/packages/x-data-grid-pro/src/tests/rowSelection.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/rowSelection.DataGridPro.test.tsx @@ -11,6 +11,7 @@ import { GridRowSelectionModel, GridRowsProp, GridColDef, + GridFilterModel, } from '@mui/x-data-grid-pro'; import { getBasicGridData } from '@mui/x-data-grid-generator'; @@ -194,6 +195,69 @@ describe(' - Row selection', () => { expect(apiRef.current.getSelectedRows()).to.have.keys([1]); }); + // Context: https://github.com/mui/mui-x/issues/15045 + it('should not throw when using `isRowSelectable` and `keepNonExistentRowsSelected`', () => { + function TestDataGrid() { + const [gridRows, setRows] = React.useState(rows); + const onFilterChange = React.useCallback( + (filterModel: GridFilterModel) => { + if (filterModel.items?.length === 0) { + return; + } + + const filteredRows = rows.filter((row) => { + return row.jobTitle.includes(filterModel.items[0].value); + }); + setRows(filteredRows); + }, + [setRows], + ); + return ( + true} + rows={gridRows} + onFilterModelChange={onFilterChange} + keepNonExistentRowsSelected + /> + ); + } + render(); + + // Select `Thomas` + fireEvent.click( + screen.getAllByRole('checkbox', { + name: /select row/i, + })[1], + ); + + expect(apiRef.current.getSelectedRows()).to.have.length(1); + expect(Array.from(apiRef.current.getSelectedRows())[0][0]).to.equal(1); + + act(() => { + apiRef.current.setFilterModel({ + items: [{ field: 'jobTitle', value: 'Head of Human Resources', operator: 'contains' }], + }); + }); + + expect(apiRef.current.getSelectedRows()).to.have.length(1); + expect(Array.from(apiRef.current.getSelectedRows())[0][0]).to.equal(1); + }); + + // Context: https://github.com/mui/mui-x/issues/15068 + it('should not call `onRowSelectionModelChange` when adding a new row', () => { + const onRowSelectionModelChange = spy(); + const { setProps } = render( + , + ); + + act(() => { + setProps({ rows: [...rows, { id: 15, hierarchy: ['New'], jobTitle: 'Test Job' }] }); + }); + + expect(onRowSelectionModelChange.callCount).to.equal(0); + }); + it('should put the parent into indeterminate if some but not all the children are selected', () => { render(); diff --git a/packages/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx b/packages/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx index 4ad235c405e8c..e549ffd113009 100644 --- a/packages/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx +++ b/packages/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx @@ -18,6 +18,7 @@ import { useGridApiRef, GridApi, GridPreferencePanelsValue, + GridRowSelectionModel, } from '@mui/x-data-grid'; import { getCell, @@ -65,6 +66,29 @@ describe(' - Row selection', () => { ); } + // Context: https://github.com/mui/mui-x/issues/15079 + it('should not call `onRowSelectionModelChange` twice when using filterMode="server"', () => { + const onRowSelectionModelChange = spy(); + function TestDataGrid() { + const [, setRowSelectionModel] = React.useState([]); + const handleRowSelectionModelChange = React.useCallback((model: GridRowSelectionModel) => { + setRowSelectionModel(model); + onRowSelectionModelChange(model); + }, []); + return ( + row.id} + checkboxSelection + onRowSelectionModelChange={handleRowSelectionModelChange} + filterMode="server" + /> + ); + } + render(); + fireEvent.click(getCell(0, 0).querySelector('input')!); + expect(onRowSelectionModelChange.callCount).to.equal(1); + }); + describe('prop: checkboxSelection = false (single selection)', () => { it('should select one row at a time on click WITHOUT ctrl or meta pressed', () => { render(); From e47e9fd3589dc660a677d4cea15ddb1d6b742a31 Mon Sep 17 00:00:00 2001 From: Flavien DELANGLE Date: Thu, 28 Nov 2024 13:43:30 +0100 Subject: [PATCH 34/35] 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 b49c70d302114..3faeadb11c2b8 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 35/35] 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 782fc444900a9..f7de8e4de11d4 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;