[fields] Play with the Base UI DX

.eslintrc.js

@@ -134,6 +134,7 @@ module.exports = {
   rules: {
     ...baseline.rules,
     ...(ENABLE_REACT_COMPILER_PLUGIN ? { 'react-compiler/react-compiler': 'error' } : {}),
+    '@typescript-eslint/no-redeclare': 'off',
     // TODO move to @mui/monorepo, codebase is moving away from default exports https://github.com/mui/material-ui/issues/21862
     'import/prefer-default-export': 'off',
     'import/no-restricted-paths': [

docs/data/date-pickers/custom-field/BrowserV6Field.tsx

@@ -13,7 +13,6 @@ import { useClearableField } from '@mui/x-date-pickers/hooks';
 import {
   BaseSingleInputFieldProps,
   DateValidationError,
-  FieldSection,
 } from '@mui/x-date-pickers/models';
 
 interface BrowserFieldProps
@@ -82,13 +81,7 @@ const BrowserField = React.forwardRef(
 
 interface BrowserDateFieldProps
   extends UseDateFieldProps<Dayjs, false>,
-    BaseSingleInputFieldProps<
-      Dayjs | null,
-      Dayjs,
-      FieldSection,
-      false,
-      DateValidationError
-    > {}
+    BaseSingleInputFieldProps<Dayjs, false, false, DateValidationError> {}
 
 const BrowserDateField = React.forwardRef(
   (props: BrowserDateFieldProps, ref: React.Ref<HTMLDivElement>) => {

docs/data/date-pickers/custom-field/BrowserV6MultiInputRangeField.tsx

@@ -13,10 +13,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';
 
@@ -84,13 +82,7 @@ const BrowserField = React.forwardRef(
 
 interface BrowserMultiInputDateRangeFieldProps
   extends UseDateRangeFieldProps<Dayjs, false>,
-    BaseMultiInputFieldProps<
-      DateRange<Dayjs>,
-      Dayjs,
-      RangeFieldSection,
-      false,
-      DateRangeValidationError
-    > {}
+    BaseMultiInputFieldProps<Dayjs, false, DateRangeValidationError> {}
 
 type BrowserMultiInputDateRangeFieldComponent = ((
   props: BrowserMultiInputDateRangeFieldProps & React.RefAttributes<HTMLDivElement>,

docs/data/date-pickers/custom-field/BrowserV6SingleInputRangeField.tsx

@@ -19,12 +19,7 @@ import {
 } from '@mui/x-date-pickers-pro/SingleInputDateRangeField';
 import { useClearableField } from '@mui/x-date-pickers/hooks';
 import { BaseSingleInputFieldProps } from '@mui/x-date-pickers/models';
-import {
-  DateRangeValidationError,
-  RangeFieldSection,
-  DateRange,
-  FieldType,
-} from '@mui/x-date-pickers-pro/models';
+import { DateRangeValidationError, FieldType } from '@mui/x-date-pickers-pro/models';
 
 interface BrowserFieldProps
   extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
@@ -89,13 +84,7 @@ const BrowserField = React.forwardRef(
 
 interface BrowserSingleInputDateRangeFieldProps
   extends UseSingleInputDateRangeFieldProps<Dayjs, false>,
-    BaseSingleInputFieldProps<
-      DateRange<Dayjs>,
-      Dayjs,
-      RangeFieldSection,
-      false,
-      DateRangeValidationError
-    > {
+    BaseSingleInputFieldProps<Dayjs, true, false, DateRangeValidationError> {
   onAdornmentClick?: () => void;
 }
 

docs/data/date-pickers/custom-field/BrowserV7Field.tsx

@@ -14,7 +14,6 @@ import {
   BaseSingleInputPickersTextFieldProps,
   BaseSingleInputFieldProps,
   DateValidationError,
-  FieldSection,
 } from '@mui/x-date-pickers/models';
 import { Unstable_PickersSectionList as PickersSectionList } from '@mui/x-date-pickers/PickersSectionList';
 
@@ -106,13 +105,7 @@ const BrowserTextField = React.forwardRef(
 
 interface BrowserDateFieldProps
   extends UseDateFieldProps<Dayjs, true>,
-    BaseSingleInputFieldProps<
-      Dayjs | null,
-      Dayjs,
-      FieldSection,
-      true,
-      DateValidationError
-    > {}
+    BaseSingleInputFieldProps<Dayjs, false, true, DateValidationError> {}
 
 const BrowserDateField = React.forwardRef(
   (props: BrowserDateFieldProps, ref: React.Ref<HTMLDivElement>) => {

docs/data/date-pickers/custom-field/BrowserV7MultiInputRangeField.tsx

@@ -13,12 +13,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 +107,7 @@ const BrowserTextField = React.forwardRef(
 
 interface BrowserMultiInputDateRangeFieldProps
   extends UseDateRangeFieldProps<Dayjs, true>,
-    BaseMultiInputFieldProps<
-      DateRange<Dayjs>,
-      Dayjs,
-      RangeFieldSection,
-      true,
-      DateRangeValidationError
-    > {}
+    BaseMultiInputFieldProps<Dayjs, true, DateRangeValidationError> {}
 
 type BrowserMultiInputDateRangeFieldComponent = ((
   props: BrowserMultiInputDateRangeFieldProps & React.RefAttributes<HTMLDivElement>,

docs/data/date-pickers/custom-field/JoyV6MultiInputRangeField.tsx

@@ -27,10 +27,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 +131,7 @@ const MultiInputJoyDateRangeFieldSeparator = styled(
 
 interface JoyMultiInputDateRangeFieldProps
   extends UseDateRangeFieldProps<Dayjs, false>,
-    BaseMultiInputFieldProps<
-      DateRange<Dayjs>,
-      Dayjs,
-      RangeFieldSection,
-      false,
-      DateRangeValidationError
-    > {}
+    BaseMultiInputFieldProps<Dayjs, false, DateRangeValidationError> {}
 
 type JoyMultiInputDateRangeFieldComponent = ((
   props: JoyMultiInputDateRangeFieldProps & React.RefAttributes<HTMLDivElement>,

docs/data/date-pickers/custom-field/custom-field.md

@@ -186,19 +186,17 @@ On the examples below, you can see that the typing of the props received by a cu
 interface JoyDateFieldProps
   extends UseDateFieldProps<Dayjs, false>, // The headless field props
     BaseSingleInputFieldProps<
-      Dayjs | null,
       Dayjs,
-      FieldSection,
+      false,
       false, // `true` for `enableAccessibleFieldDOMStructure`
       DateValidationError
     > {} // The DOM field props
 
 interface JoyDateTimeFieldProps
   extends UseDateTimeFieldProps<Dayjs, false>, // The headless field props
     BaseSingleInputFieldProps<
-      Dayjs | null,
       Dayjs,
-      FieldSection,
+      false,
       false, // `true` for `enableAccessibleFieldDOMStructure`
       DateTimeValidationError
     > {} // The DOM field props

packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.types.ts

@@ -5,12 +5,8 @@ import Typography from '@mui/material/Typography';
 import Stack, { StackProps } from '@mui/material/Stack';
 import TextField from '@mui/material/TextField';
 import { UseMultiInputRangeFieldParams } from '../internals/hooks/useMultiInputRangeField/useMultiInputRangeField.types';
-import {
-  MultiInputFieldRefs,
-  MultiInputRangeFieldClasses,
-  RangePosition,
-  UseDateRangeFieldProps,
-} from '../models';
+import { MultiInputFieldRefs, MultiInputRangeFieldClasses, RangePosition } from '../models';
+import { DateRangeFieldInternalProps } from '../valueManagers';
 
 export type UseMultiInputDateRangeFieldParams<
   TDate extends PickerValidDate,
@@ -25,8 +21,8 @@ export interface UseMultiInputDateRangeFieldProps<
   TDate extends PickerValidDate,
   TEnableAccessibleFieldDOMStructure extends boolean,
 > extends Omit<
-      UseDateRangeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>,
-      'unstableFieldRef' | 'clearable' | 'onClear'
+      DateRangeFieldInternalProps<TDate, TEnableAccessibleFieldDOMStructure>,
+      'unstableFieldRef'
     >,
     MultiInputFieldRefs {}
 

packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.types.ts

@@ -4,9 +4,9 @@ import Typography from '@mui/material/Typography';
 import Stack, { StackProps } from '@mui/material/Stack';
 import TextField from '@mui/material/TextField';
 import { PickerValidDate } from '@mui/x-date-pickers/models';
-import { UseDateTimeRangeFieldProps } from '../internals/models/dateTimeRange';
 import { UseMultiInputRangeFieldParams } from '../internals/hooks/useMultiInputRangeField/useMultiInputRangeField.types';
 import { MultiInputFieldRefs, MultiInputRangeFieldClasses, RangePosition } from '../models';
+import { DateTimeRangeFieldInternalProps } from '../valueManagers';
 
 export type UseMultiInputDateTimeRangeFieldParams<
   TDate extends PickerValidDate,
@@ -21,8 +21,8 @@ export interface UseMultiInputDateTimeRangeFieldProps<
   TDate extends PickerValidDate,
   TEnableAccessibleFieldDOMStructure extends boolean,
 > extends Omit<
-      UseDateTimeRangeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>,
-      'unstableFieldRef' | 'clearable' | 'onClear'
+      DateTimeRangeFieldInternalProps<TDate, TEnableAccessibleFieldDOMStructure>,
+      'unstableFieldRef'
     >,
     MultiInputFieldRefs {}
 

packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.types.ts

@@ -4,9 +4,9 @@ import Typography from '@mui/material/Typography';
 import Stack, { StackProps } from '@mui/material/Stack';
 import TextField from '@mui/material/TextField';
 import { PickerValidDate } from '@mui/x-date-pickers/models';
-import { UseTimeRangeFieldProps } from '../internals/models/timeRange';
 import { UseMultiInputRangeFieldParams } from '../internals/hooks/useMultiInputRangeField/useMultiInputRangeField.types';
 import { MultiInputFieldRefs, MultiInputRangeFieldClasses, RangePosition } from '../models';
+import { TimeRangeFieldInternalProps } from '../valueManagers';
 
 export type UseMultiInputTimeRangeFieldParams<
   TDate extends PickerValidDate,
@@ -21,8 +21,8 @@ export interface UseMultiInputTimeRangeFieldProps<
   TDate extends PickerValidDate,
   TEnableAccessibleFieldDOMStructure extends boolean,
 > extends Omit<
-      UseTimeRangeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>,
-      'unstableFieldRef' | 'clearable' | 'onClear'
+      TimeRangeFieldInternalProps<TDate, TEnableAccessibleFieldDOMStructure>,
+      'unstableFieldRef'
     >,
     MultiInputFieldRefs {}
 

packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.types.ts

@@ -1,35 +1,19 @@
 import * as React from 'react';
 import { SlotComponentProps } from '@mui/utils';
 import TextField from '@mui/material/TextField';
-import { UseFieldInternalProps } from '@mui/x-date-pickers/internals';
 import { BuiltInFieldTextFieldProps, PickerValidDate } from '@mui/x-date-pickers/models';
 import {
-  ExportedUseClearableFieldProps,
   UseClearableFieldSlots,
   UseClearableFieldSlotProps,
+  ExportedUseClearableFieldProps,
 } from '@mui/x-date-pickers/hooks';
-import type {
-  DateRange,
-  RangeFieldSection,
-  DateRangeValidationError,
-  UseDateRangeFieldProps,
-} from '../models';
+import { DateRangeFieldInternalProps } from '../valueManagers';
 
 export interface UseSingleInputDateRangeFieldProps<
   TDate extends PickerValidDate,
   TEnableAccessibleFieldDOMStructure extends boolean,
-> extends UseDateRangeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>,
-    ExportedUseClearableFieldProps,
-    Pick<
-      UseFieldInternalProps<
-        DateRange<TDate>,
-        TDate,
-        RangeFieldSection,
-        TEnableAccessibleFieldDOMStructure,
-        DateRangeValidationError
-      >,
-      'unstableFieldRef'
-    > {}
+> extends DateRangeFieldInternalProps<TDate, TEnableAccessibleFieldDOMStructure>,
+    ExportedUseClearableFieldProps {}
 
 export type SingleInputDateRangeFieldProps<
   TDate extends PickerValidDate,

packages/x-date-pickers-pro/src/SingleInputDateRangeField/useSingleInputDateRangeField.ts

@@ -1,46 +1,32 @@
 'use client';
 import * as React from 'react';
-import { useField, useDefaultizedDateField } from '@mui/x-date-pickers/internals';
+import { useField } from '@mui/x-date-pickers/internals';
 import { useSplitFieldProps } from '@mui/x-date-pickers/hooks';
 import { PickerValidDate } from '@mui/x-date-pickers/models';
 import { UseSingleInputDateRangeFieldProps } from './SingleInputDateRangeField.types';
-import { rangeValueManager, getRangeFieldValueManager } from '../internals/utils/valueManagers';
-import { validateDateRange } from '../validation';
-import { RangeFieldSection, DateRange } from '../models';
+import { getDateRangeValueManager } from '../valueManagers';
 
 export const useSingleInputDateRangeField = <
   TDate extends PickerValidDate,
   TEnableAccessibleFieldDOMStructure extends boolean,
   TAllProps extends UseSingleInputDateRangeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>,
 >(
-  inProps: TAllProps,
+  props: TAllProps,
 ) => {
-  const props = useDefaultizedDateField<
-    TDate,
-    UseSingleInputDateRangeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>,
-    TAllProps
-  >(inProps);
-
   const { forwardedProps, internalProps } = useSplitFieldProps(props, 'date');
 
-  const fieldValueManager = React.useMemo(
-    () => getRangeFieldValueManager<TDate>({ dateSeparator: internalProps.dateSeparator }),
-    [internalProps.dateSeparator],
+  const valueManager = React.useMemo(
+    () =>
+      getDateRangeValueManager<TDate, TEnableAccessibleFieldDOMStructure>({
+        enableAccessibleFieldDOMStructure: props.enableAccessibleFieldDOMStructure,
+        dateSeparator: props.dateSeparator,
+      }),
+    [props.enableAccessibleFieldDOMStructure, props.dateSeparator],
   );
 
-  return useField<
-    DateRange<TDate>,
-    TDate,
-    RangeFieldSection,
-    TEnableAccessibleFieldDOMStructure,
-    typeof forwardedProps,
-    typeof internalProps
-  >({
+  return useField<typeof valueManager, typeof forwardedProps>({
     forwardedProps,
     internalProps,
-    valueManager: rangeValueManager,
-    fieldValueManager,
-    validator: validateDateRange,
-    valueType: 'date',
+    valueManager,
   });
 };

packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.types.ts

@@ -1,31 +1,19 @@
 import * as React from 'react';
 import { SlotComponentProps } from '@mui/utils';
 import TextField from '@mui/material/TextField';
-import { UseFieldInternalProps } from '@mui/x-date-pickers/internals';
 import { BuiltInFieldTextFieldProps, PickerValidDate } from '@mui/x-date-pickers/models';
 import {
   ExportedUseClearableFieldProps,
   UseClearableFieldSlots,
   UseClearableFieldSlotProps,
 } from '@mui/x-date-pickers/hooks';
-import { UseDateTimeRangeFieldProps } from '../internals/models';
-import { DateRange, RangeFieldSection, DateTimeRangeValidationError } from '../models';
+import { DateTimeRangeFieldInternalProps } from '../valueManagers';
 
 export interface UseSingleInputDateTimeRangeFieldProps<
   TDate extends PickerValidDate,
   TEnableAccessibleFieldDOMStructure extends boolean,
-> extends UseDateTimeRangeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>,
-    ExportedUseClearableFieldProps,
-    Pick<
-      UseFieldInternalProps<
-        DateRange<TDate>,
-        TDate,
-        RangeFieldSection,
-        TEnableAccessibleFieldDOMStructure,
-        DateTimeRangeValidationError
-      >,
-      'unstableFieldRef'
-    > {}
+> extends DateTimeRangeFieldInternalProps<TDate, TEnableAccessibleFieldDOMStructure>,
+    ExportedUseClearableFieldProps {}
 
 export type SingleInputDateTimeRangeFieldProps<
   TDate extends PickerValidDate,