From ea24a0ed90edd230371a4274740b0a7f65d19083 Mon Sep 17 00:00:00 2001 From: flavien Date: Wed, 23 Oct 2024 08:40:07 +0200 Subject: [PATCH 1/3] [fields] Remove UseDateFieldComponentProps and equivalent interfaces --- .../migration-pickers-v7.md | 56 +++++++++++++++++++ .../useMultiInputDateRangeField.ts | 17 +----- .../useMultiInputDateTimeRangeField.ts | 17 +----- .../useMultiInputTimeRangeField.ts | 17 +----- .../src/DateField/DateField.types.ts | 42 +++++++------- .../x-date-pickers/src/DateField/index.ts | 6 +- .../src/DateTimeField/DateTimeField.types.ts | 42 +++++++------- .../x-date-pickers/src/DateTimeField/index.ts | 6 +- .../src/TimeField/TimeField.types.ts | 42 +++++++------- .../x-date-pickers/src/TimeField/index.ts | 6 +- scripts/x-date-pickers-pro.exports.json | 3 - scripts/x-date-pickers.exports.json | 3 - 12 files changed, 125 insertions(+), 132 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 1647dae16ac6..0795e670eae0 100644 --- a/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md +++ b/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md @@ -256,3 +256,59 @@ const theme = createTheme({ }, }); ``` + +## Removed types + +The following types are no longer exported by `@mui/x-date-pickers` and/or `@mui/x-date-pickers` pro. +If you were using them, you can replace them with the following code: + +- `UseDateFieldComponentProps` + + ```ts + import { UseDateFieldProps } from '@mui/x-date-pickers/DateField'; + import { PickerValidDate } from '@mui/x-date-pickers/models'; + + type UseDateFieldComponentProps< + TDate extends PickerValidDate, + TEnableAccessibleFieldDOMStructure extends boolean, + TChildProps extends {}, + > = Omit< + TChildProps, + keyof UseDateFieldProps + > & + UseDateFieldProps; + ``` + +- `UseTimeFieldComponentProps` + + ```ts + import { UseTimeFieldProps } from '@mui/x-date-pickers/TimeField'; + import { PickerValidDate } from '@mui/x-date-pickers/models'; + + type UseTimeFieldComponentProps< + TDate extends PickerValidDate, + TEnableAccessibleFieldDOMStructure extends boolean, + TChildProps extends {}, + > = Omit< + TChildProps, + keyof UseTimeFieldProps + > & + UseTimeFieldProps; + ``` + +- `UseDateTimeFieldComponentProps` + + ```ts + import { UseDateTimeFieldProps } from '@mui/x-date-pickers/DateTimeField'; + import { PickerValidDate } from '@mui/x-date-pickers/models'; + + type UseDateTimeFieldComponentProps< + TDate extends PickerValidDate, + TEnableAccessibleFieldDOMStructure extends boolean, + TChildProps extends {}, + > = Omit< + TChildProps, + keyof UseDateTimeFieldProps + > & + UseDateTimeFieldProps; + ``` 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 f89396ebc68b..977073fc4725 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,8 +1,5 @@ import useEventCallback from '@mui/utils/useEventCallback'; -import { - unstable_useDateField as useDateField, - UseDateFieldComponentProps, -} from '@mui/x-date-pickers/DateField'; +import { unstable_useDateField as useDateField } from '@mui/x-date-pickers/DateField'; import { FieldChangeHandler, FieldChangeHandlerContext, @@ -104,11 +101,7 @@ export const useMultiInputDateRangeField = < unstableEndFieldRef, }); - const startFieldProps: UseDateFieldComponentProps< - TDate, - TEnableAccessibleFieldDOMStructure, - typeof sharedProps - > = { + const startFieldProps = { error: !!validationError[0], ...startTextFieldProps, ...selectedSectionsResponse.start, @@ -125,11 +118,7 @@ export const useMultiInputDateRangeField = < autoFocus, // Do not add on end field. }; - const endFieldProps: UseDateFieldComponentProps< - TDate, - TEnableAccessibleFieldDOMStructure, - typeof sharedProps - > = { + const endFieldProps = { error: !!validationError[1], ...endTextFieldProps, ...selectedSectionsResponse.end, 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 60efbe608a10..14c14747d4e6 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,8 +1,5 @@ import useEventCallback from '@mui/utils/useEventCallback'; -import { - unstable_useDateTimeField as useDateTimeField, - UseDateTimeFieldComponentProps, -} from '@mui/x-date-pickers/DateTimeField'; +import { unstable_useDateTimeField as useDateTimeField } from '@mui/x-date-pickers/DateTimeField'; import { FieldChangeHandler, FieldChangeHandlerContext, @@ -104,11 +101,7 @@ export const useMultiInputDateTimeRangeField = < unstableEndFieldRef, }); - const startFieldProps: UseDateTimeFieldComponentProps< - TDate, - TEnableAccessibleFieldDOMStructure, - typeof sharedProps - > = { + const startFieldProps = { error: !!validationError[0], ...startTextFieldProps, ...selectedSectionsResponse.start, @@ -125,11 +118,7 @@ export const useMultiInputDateTimeRangeField = < autoFocus, // Do not add on end field. }; - const endFieldProps: UseDateTimeFieldComponentProps< - TDate, - TEnableAccessibleFieldDOMStructure, - typeof sharedProps - > = { + const endFieldProps = { error: !!validationError[1], ...endTextFieldProps, ...selectedSectionsResponse.end, 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 86db843894f5..1fc2affc9ac6 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,8 +1,5 @@ import useEventCallback from '@mui/utils/useEventCallback'; -import { - unstable_useTimeField as useTimeField, - UseTimeFieldComponentProps, -} from '@mui/x-date-pickers/TimeField'; +import { unstable_useTimeField as useTimeField } from '@mui/x-date-pickers/TimeField'; import { FieldChangeHandler, FieldChangeHandlerContext, @@ -104,11 +101,7 @@ export const useMultiInputTimeRangeField = < unstableEndFieldRef, }); - const startFieldProps: UseTimeFieldComponentProps< - TDate, - TEnableAccessibleFieldDOMStructure, - typeof sharedProps - > = { + const startFieldProps = { error: !!validationError[0], ...startTextFieldProps, ...selectedSectionsResponse.start, @@ -125,11 +118,7 @@ export const useMultiInputTimeRangeField = < autoFocus, // Do not add on end field. }; - const endFieldProps: UseTimeFieldComponentProps< - TDate, - TEnableAccessibleFieldDOMStructure, - typeof sharedProps - > = { + const endFieldProps = { error: !!validationError[1], ...endTextFieldProps, ...selectedSectionsResponse.end, diff --git a/packages/x-date-pickers/src/DateField/DateField.types.ts b/packages/x-date-pickers/src/DateField/DateField.types.ts index 3db8ee716d74..2b6feddbc943 100644 --- a/packages/x-date-pickers/src/DateField/DateField.types.ts +++ b/packages/x-date-pickers/src/DateField/DateField.types.ts @@ -40,32 +40,28 @@ export interface UseDateFieldProps< BaseDateValidationProps, ExportedUseClearableFieldProps {} -export type UseDateFieldComponentProps< - TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean, - TChildProps extends {}, -> = Omit> & - UseDateFieldProps; - export type DateFieldProps< TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = true, -> = UseDateFieldComponentProps< - TDate, - TEnableAccessibleFieldDOMStructure, - BuiltInFieldTextFieldProps -> & { - /** - * Overridable component slots. - * @default {} - */ - slots?: DateFieldSlots; - /** - * The props used for each component slot. - * @default {} - */ - slotProps?: DateFieldSlotProps; -}; +> = + // The hook props + UseDateFieldProps & + // The TextField props + Omit< + BuiltInFieldTextFieldProps, + keyof UseDateFieldProps + > & { + /** + * Overridable component slots. + * @default {} + */ + slots?: DateFieldSlots; + /** + * The props used for each component slot. + * @default {} + */ + slotProps?: DateFieldSlotProps; + }; export type DateFieldOwnerState< TDate extends PickerValidDate, diff --git a/packages/x-date-pickers/src/DateField/index.ts b/packages/x-date-pickers/src/DateField/index.ts index cd6119e98a25..69c1964f1330 100644 --- a/packages/x-date-pickers/src/DateField/index.ts +++ b/packages/x-date-pickers/src/DateField/index.ts @@ -1,7 +1,3 @@ export { DateField } from './DateField'; export { useDateField as unstable_useDateField } from './useDateField'; -export type { - UseDateFieldProps, - UseDateFieldComponentProps, - DateFieldProps, -} from './DateField.types'; +export type { UseDateFieldProps, DateFieldProps } from './DateField.types'; diff --git a/packages/x-date-pickers/src/DateTimeField/DateTimeField.types.ts b/packages/x-date-pickers/src/DateTimeField/DateTimeField.types.ts index 6f82e44e481b..f603981c1c95 100644 --- a/packages/x-date-pickers/src/DateTimeField/DateTimeField.types.ts +++ b/packages/x-date-pickers/src/DateTimeField/DateTimeField.types.ts @@ -52,32 +52,28 @@ export interface UseDateTimeFieldProps< ampm?: boolean; } -export type UseDateTimeFieldComponentProps< - TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean, - TChildProps extends {}, -> = Omit> & - UseDateTimeFieldProps; - export type DateTimeFieldProps< TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = true, -> = UseDateTimeFieldComponentProps< - TDate, - TEnableAccessibleFieldDOMStructure, - BuiltInFieldTextFieldProps -> & { - /** - * Overridable component slots. - * @default {} - */ - slots?: DateTimeFieldSlots; - /** - * The props used for each component slot. - * @default {} - */ - slotProps?: DateTimeFieldSlotProps; -}; +> = + // The hook props + UseDateTimeFieldProps & + // The TextField props + Omit< + BuiltInFieldTextFieldProps, + keyof UseDateTimeFieldProps + > & { + /** + * Overridable component slots. + * @default {} + */ + slots?: DateTimeFieldSlots; + /** + * The props used for each component slot. + * @default {} + */ + slotProps?: DateTimeFieldSlotProps; + }; export type DateTimeFieldOwnerState< TDate extends PickerValidDate, diff --git a/packages/x-date-pickers/src/DateTimeField/index.ts b/packages/x-date-pickers/src/DateTimeField/index.ts index 95952dde9474..7f8882b9d04a 100644 --- a/packages/x-date-pickers/src/DateTimeField/index.ts +++ b/packages/x-date-pickers/src/DateTimeField/index.ts @@ -1,7 +1,3 @@ export { DateTimeField } from './DateTimeField'; export { useDateTimeField as unstable_useDateTimeField } from './useDateTimeField'; -export type { - UseDateTimeFieldProps, - UseDateTimeFieldComponentProps, - DateTimeFieldProps, -} from './DateTimeField.types'; +export type { UseDateTimeFieldProps, DateTimeFieldProps } from './DateTimeField.types'; diff --git a/packages/x-date-pickers/src/TimeField/TimeField.types.ts b/packages/x-date-pickers/src/TimeField/TimeField.types.ts index e60bc69b4703..03d2c63932c3 100644 --- a/packages/x-date-pickers/src/TimeField/TimeField.types.ts +++ b/packages/x-date-pickers/src/TimeField/TimeField.types.ts @@ -39,32 +39,28 @@ export interface UseTimeFieldProps< ampm?: boolean; } -export type UseTimeFieldComponentProps< - TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean, - TChildProps extends {}, -> = Omit> & - UseTimeFieldProps; - export type TimeFieldProps< TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = true, -> = UseTimeFieldComponentProps< - TDate, - TEnableAccessibleFieldDOMStructure, - BuiltInFieldTextFieldProps -> & { - /** - * Overridable component slots. - * @default {} - */ - slots?: TimeFieldSlots; - /** - * The props used for each component slot. - * @default {} - */ - slotProps?: TimeFieldSlotProps; -}; +> = + // The hook props + UseTimeFieldProps & + // The TextField props + Omit< + BuiltInFieldTextFieldProps, + keyof UseTimeFieldProps + > & { + /** + * Overridable component slots. + * @default {} + */ + slots?: TimeFieldSlots; + /** + * The props used for each component slot. + * @default {} + */ + slotProps?: TimeFieldSlotProps; + }; export type TimeFieldOwnerState< TDate extends PickerValidDate, diff --git a/packages/x-date-pickers/src/TimeField/index.ts b/packages/x-date-pickers/src/TimeField/index.ts index f335f0f8fd76..b721d815213c 100644 --- a/packages/x-date-pickers/src/TimeField/index.ts +++ b/packages/x-date-pickers/src/TimeField/index.ts @@ -1,7 +1,3 @@ export { TimeField } from './TimeField'; export { useTimeField as unstable_useTimeField } from './useTimeField'; -export type { - UseTimeFieldProps, - UseTimeFieldComponentProps, - TimeFieldProps, -} from './TimeField.types'; +export type { UseTimeFieldProps, TimeFieldProps } from './TimeField.types'; diff --git a/scripts/x-date-pickers-pro.exports.json b/scripts/x-date-pickers-pro.exports.json index 7bce2723c04e..01c128f4ce6c 100644 --- a/scripts/x-date-pickers-pro.exports.json +++ b/scripts/x-date-pickers-pro.exports.json @@ -409,10 +409,8 @@ { "name": "UseClearableFieldResponse", "kind": "TypeAlias" }, { "name": "UseClearableFieldSlotProps", "kind": "Interface" }, { "name": "UseClearableFieldSlots", "kind": "Interface" }, - { "name": "UseDateFieldComponentProps", "kind": "TypeAlias" }, { "name": "UseDateFieldProps", "kind": "Interface" }, { "name": "UseDateRangeFieldProps", "kind": "Interface" }, - { "name": "UseDateTimeFieldComponentProps", "kind": "TypeAlias" }, { "name": "UseDateTimeFieldProps", "kind": "Interface" }, { "name": "UseMultiInputDateRangeFieldComponentProps", "kind": "TypeAlias" }, { "name": "UseMultiInputDateRangeFieldProps", "kind": "Interface" }, @@ -428,7 +426,6 @@ { "name": "UseSingleInputDateTimeRangeFieldProps", "kind": "Interface" }, { "name": "UseSingleInputTimeRangeFieldProps", "kind": "Interface" }, { "name": "useSplitFieldProps", "kind": "Variable" }, - { "name": "UseTimeFieldComponentProps", "kind": "TypeAlias" }, { "name": "UseTimeFieldProps", "kind": "Interface" }, { "name": "useValidation", "kind": "Function" }, { "name": "validateDate", "kind": "Variable" }, diff --git a/scripts/x-date-pickers.exports.json b/scripts/x-date-pickers.exports.json index df1cacc6fcfe..fb6dbbf52091 100644 --- a/scripts/x-date-pickers.exports.json +++ b/scripts/x-date-pickers.exports.json @@ -301,16 +301,13 @@ { "name": "UseClearableFieldResponse", "kind": "TypeAlias" }, { "name": "UseClearableFieldSlotProps", "kind": "Interface" }, { "name": "UseClearableFieldSlots", "kind": "Interface" }, - { "name": "UseDateFieldComponentProps", "kind": "TypeAlias" }, { "name": "UseDateFieldProps", "kind": "Interface" }, - { "name": "UseDateTimeFieldComponentProps", "kind": "TypeAlias" }, { "name": "UseDateTimeFieldProps", "kind": "Interface" }, { "name": "useParsedFormat", "kind": "Variable" }, { "name": "usePickerLayout", "kind": "ExportAssignment" }, { "name": "usePickersContext", "kind": "Variable" }, { "name": "usePickersTranslations", "kind": "Variable" }, { "name": "useSplitFieldProps", "kind": "Variable" }, - { "name": "UseTimeFieldComponentProps", "kind": "TypeAlias" }, { "name": "UseTimeFieldProps", "kind": "Interface" }, { "name": "useValidation", "kind": "Function" }, { "name": "validateDate", "kind": "Variable" }, From 69230d85a13f95ec90b57b7142f5e8b42852fc37 Mon Sep 17 00:00:00 2001 From: Flavien DELANGLE Date: Fri, 25 Oct 2024 16:01:38 +0200 Subject: [PATCH 2/3] Update docs/data/migration/migration-pickers-v7/migration-pickers-v7.md Co-authored-by: Michel Engelen <32863416+michelengelen@users.noreply.github.com> 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 0795e670eae0..beb17d7ab394 100644 --- a/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md +++ b/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md @@ -259,7 +259,7 @@ const theme = createTheme({ ## Removed types -The following types are no longer exported by `@mui/x-date-pickers` and/or `@mui/x-date-pickers` pro. +The following types are no longer exported by `@mui/x-date-pickers` and/or `@mui/x-date-pickers-pro`. If you were using them, you can replace them with the following code: - `UseDateFieldComponentProps` From 950def826c05c3425121187cfc521794dbcf9e53 Mon Sep 17 00:00:00 2001 From: Flavien DELANGLE Date: Fri, 25 Oct 2024 16:01:43 +0200 Subject: [PATCH 3/3] Update docs/data/migration/migration-pickers-v7/migration-pickers-v7.md Co-authored-by: Michel Engelen <32863416+michelengelen@users.noreply.github.com> 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 beb17d7ab394..8e3f8022a00b 100644 --- a/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md +++ b/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md @@ -260,7 +260,7 @@ const theme = createTheme({ ## Removed types The following types are no longer exported by `@mui/x-date-pickers` and/or `@mui/x-date-pickers-pro`. -If you were using them, you can replace them with the following code: +If you were using them, you need to replace them with the following code: - `UseDateFieldComponentProps`