[fields] Remove UseDateFieldComponentProps and equivalent interfaces (

#15053) Signed-off-by: Flavien DELANGLE <[email protected]> Co-authored-by: Michel Engelen <[email protected]>
mui · Oct 28, 2024 · d01d1bf · d01d1bf
1 parent 4ca6caf
commit d01d1bf
Show file tree

Hide file tree

Showing 12 changed files with 125 additions and 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
@@ -258,3 +258,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 need to 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<TDate, TEnableAccessibleFieldDOMStructure>
+  > &
+    UseDateFieldProps<TDate, TEnableAccessibleFieldDOMStructure>;
+  ```
+
+- `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<TDate, TEnableAccessibleFieldDOMStructure>
+  > &
+    UseTimeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>;
+  ```
+
+- `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<TDate, TEnableAccessibleFieldDOMStructure>
+  > &
+    UseDateTimeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>;
+  ```
diff --git a/...te-pickers-pro/src/internals/hooks/useMultiInputRangeField/useMultiInputDateRangeField.ts b/...te-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/...ickers-pro/src/internals/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.ts b/...ickers-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/...te-pickers-pro/src/internals/hooks/useMultiInputRangeField/useMultiInputTimeRangeField.ts b/...te-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
@@ -40,32 +40,28 @@ export interface UseDateFieldProps<
     BaseDateValidationProps<TDate>,
     ExportedUseClearableFieldProps {}
 
-export type UseDateFieldComponentProps<
-  TDate extends PickerValidDate,
-  TEnableAccessibleFieldDOMStructure extends boolean,
-  TChildProps extends {},
-> = Omit<TChildProps, keyof UseDateFieldProps<TDate, TEnableAccessibleFieldDOMStructure>> &
-  UseDateFieldProps<TDate, TEnableAccessibleFieldDOMStructure>;
-
 export type DateFieldProps<
   TDate extends PickerValidDate,
   TEnableAccessibleFieldDOMStructure extends boolean = true,
-> = UseDateFieldComponentProps<
-  TDate,
-  TEnableAccessibleFieldDOMStructure,
-  BuiltInFieldTextFieldProps<TEnableAccessibleFieldDOMStructure>
-> & {
-  /**
-   * Overridable component slots.
-   * @default {}
-   */
-  slots?: DateFieldSlots;
-  /**
-   * The props used for each component slot.
-   * @default {}
-   */
-  slotProps?: DateFieldSlotProps<TDate, TEnableAccessibleFieldDOMStructure>;
-};
+> =
+  // The hook props
+  UseDateFieldProps<TDate, TEnableAccessibleFieldDOMStructure> &
+    // The TextField props
+    Omit<
+      BuiltInFieldTextFieldProps<TEnableAccessibleFieldDOMStructure>,
+      keyof UseDateFieldProps<TDate, TEnableAccessibleFieldDOMStructure>
+    > & {
+      /**
+       * Overridable component slots.
+       * @default {}
+       */
+      slots?: DateFieldSlots;
+      /**
+       * The props used for each component slot.
+       * @default {}
+       */
+      slotProps?: DateFieldSlotProps<TDate, TEnableAccessibleFieldDOMStructure>;
+    };
 
 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
@@ -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
@@ -52,32 +52,28 @@ export interface UseDateTimeFieldProps<
   ampm?: boolean;
 }
 
-export type UseDateTimeFieldComponentProps<
-  TDate extends PickerValidDate,
-  TEnableAccessibleFieldDOMStructure extends boolean,
-  TChildProps extends {},
-> = Omit<TChildProps, keyof UseDateTimeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>> &
-  UseDateTimeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>;
-
 export type DateTimeFieldProps<
   TDate extends PickerValidDate,
   TEnableAccessibleFieldDOMStructure extends boolean = true,
-> = UseDateTimeFieldComponentProps<
-  TDate,
-  TEnableAccessibleFieldDOMStructure,
-  BuiltInFieldTextFieldProps<TEnableAccessibleFieldDOMStructure>
-> & {
-  /**
-   * Overridable component slots.
-   * @default {}
-   */
-  slots?: DateTimeFieldSlots;
-  /**
-   * The props used for each component slot.
-   * @default {}
-   */
-  slotProps?: DateTimeFieldSlotProps<TDate, TEnableAccessibleFieldDOMStructure>;
-};
+> =
+  // The hook props
+  UseDateTimeFieldProps<TDate, TEnableAccessibleFieldDOMStructure> &
+    // The TextField props
+    Omit<
+      BuiltInFieldTextFieldProps<TEnableAccessibleFieldDOMStructure>,
+      keyof UseDateTimeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>
+    > & {
+      /**
+       * Overridable component slots.
+       * @default {}
+       */
+      slots?: DateTimeFieldSlots;
+      /**
+       * The props used for each component slot.
+       * @default {}
+       */
+      slotProps?: DateTimeFieldSlotProps<TDate, TEnableAccessibleFieldDOMStructure>;
+    };
 
 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
@@ -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
@@ -39,32 +39,28 @@ export interface UseTimeFieldProps<
   ampm?: boolean;
 }
 
-export type UseTimeFieldComponentProps<
-  TDate extends PickerValidDate,
-  TEnableAccessibleFieldDOMStructure extends boolean,
-  TChildProps extends {},
-> = Omit<TChildProps, keyof UseTimeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>> &
-  UseTimeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>;
-
 export type TimeFieldProps<
   TDate extends PickerValidDate,
   TEnableAccessibleFieldDOMStructure extends boolean = true,
-> = UseTimeFieldComponentProps<
-  TDate,
-  TEnableAccessibleFieldDOMStructure,
-  BuiltInFieldTextFieldProps<TEnableAccessibleFieldDOMStructure>
-> & {
-  /**
-   * Overridable component slots.
-   * @default {}
-   */
-  slots?: TimeFieldSlots;
-  /**
-   * The props used for each component slot.
-   * @default {}
-   */
-  slotProps?: TimeFieldSlotProps<TDate, TEnableAccessibleFieldDOMStructure>;
-};
+> =
+  // The hook props
+  UseTimeFieldProps<TDate, TEnableAccessibleFieldDOMStructure> &
+    // The TextField props
+    Omit<
+      BuiltInFieldTextFieldProps<TEnableAccessibleFieldDOMStructure>,
+      keyof UseTimeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>
+    > & {
+      /**
+       * Overridable component slots.
+       * @default {}
+       */
+      slots?: TimeFieldSlots;
+      /**
+       * The props used for each component slot.
+       * @default {}
+       */
+      slotProps?: TimeFieldSlotProps<TDate, TEnableAccessibleFieldDOMStructure>;
+    };
 
 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
@@ -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
@@ -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
@@ -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" },