[fields] New prop dateSeparator on range fields

mui · Feb 22, 2024 · aad4df2 · aad4df2
1 parent 58f1859
commit aad4df2
Show file tree

Hide file tree

Showing 20 changed files with 153 additions and 50 deletions.
diff --git a/docs/data/date-pickers/custom-field/MultiInputFieldSeparatorSlotProps.js b/docs/data/date-pickers/custom-field/MultiInputFieldSeparatorSlotProps.js
@@ -8,7 +8,7 @@ export default function MultiInputFieldSeparatorSlotProps() {
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <DemoContainer components={['DateRangePicker', 'DateRangePicker']}>
-        <DateRangePicker slotProps={{ fieldSeparator: { children: 'to' } }} />
+        <DateRangePicker slotProps={{ fieldSeparator: { sx: { color: 'red' } } }} />
         <DateRangePicker slotProps={{ fieldSeparator: { sx: { opacity: 0.5 } } }} />
       </DemoContainer>
     </LocalizationProvider>

diff --git a/docs/data/date-pickers/custom-field/MultiInputFieldSeparatorSlotProps.tsx b/docs/data/date-pickers/custom-field/MultiInputFieldSeparatorSlotProps.tsx
@@ -8,7 +8,9 @@ export default function MultiInputFieldSeparatorSlotProps() {
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <DemoContainer components={['DateRangePicker', 'DateRangePicker']}>
-        <DateRangePicker slotProps={{ fieldSeparator: { children: 'to' } }} />
+        <DateRangePicker
+          slotProps={{ fieldSeparator: { sx: { children: ' TOTO ' } } }}
+        />
         <DateRangePicker slotProps={{ fieldSeparator: { sx: { opacity: 0.5 } } }} />
       </DemoContainer>
     </LocalizationProvider>

diff --git a/docs/data/date-pickers/custom-field/MultiInputFieldSeparatorSlotProps.tsx.preview b/docs/data/date-pickers/custom-field/MultiInputFieldSeparatorSlotProps.tsx.preview
@@ -1,2 +1,2 @@
-<DateRangePicker slotProps={{ fieldSeparator: { children: 'to' } }} />
+<DateRangePicker slotProps={{ fieldSeparator: { sx: { color: 'red' } } }} />
 <DateRangePicker slotProps={{ fieldSeparator: { sx: { opacity: 0.5 } } }} />
diff --git a/docs/data/date-pickers/custom-field/RangeFieldDateSeparator.js b/docs/data/date-pickers/custom-field/RangeFieldDateSeparator.js
@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
+import { SingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField';
+
+export default function RangeFieldDateSeparator() {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <DemoContainer components={['DateRangePicker', 'DateRangePicker']}>
+        <DateRangePicker slotProps={{ field: { dateSeparator: ' to ' } }} />
+        <DateRangePicker
+          slotProps={{ field: { dateSeparator: ' to ' } }}
+          slots={{ field: SingleInputDateRangeField }}
+        />
+      </DemoContainer>
+    </LocalizationProvider>
+  );
+}
diff --git a/docs/data/date-pickers/custom-field/RangeFieldDateSeparator.tsx b/docs/data/date-pickers/custom-field/RangeFieldDateSeparator.tsx
@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
+import { SingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField';
+
+export default function RangeFieldDateSeparator() {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <DemoContainer components={['DateRangePicker', 'DateRangePicker']}>
+        <DateRangePicker slotProps={{ field: { dateSeparator: 'to' } }} />
+        <DateRangePicker
+          slotProps={{ field: { dateSeparator: 'to' } }}
+          slots={{ field: SingleInputDateRangeField }}
+        />
+      </DemoContainer>
+    </LocalizationProvider>
+  );
+}
diff --git a/docs/data/date-pickers/custom-field/RangeFieldDateSeparator.tsx.preview b/docs/data/date-pickers/custom-field/RangeFieldDateSeparator.tsx.preview
@@ -0,0 +1,5 @@
+<DateRangePicker slotProps={{ field: { dateSeparator: ' to ' } }} />
+<DateRangePicker
+  slotProps={{ field: { dateSeparator: ' to ' } }}
+  slots={{ field: SingleInputDateRangeField }}
+/>
diff --git a/docs/data/date-pickers/custom-field/custom-field.md b/docs/data/date-pickers/custom-field/custom-field.md
@@ -18,7 +18,7 @@ You can use the `textField` slot to pass custom props to the `TextField`:
 
 {{"demo": "TextFieldSlotProps.js"}}
 
-### Customize the separator of multi input fields [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')
+### Customize the separator of multi input range fields [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')
 
 You can use the `fieldSeparator` slot to pass custom props to the `Typography` rendered between the two `TextField`:
 
@@ -49,6 +49,12 @@ You can manually add an `endAdornment` if you want your range picker to look exa
 This adornment is purely decorative, the focus remains on the field when the picker is opened.
 :::
 
+### Change the separator of range fields [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')
+
+You can use the `dateSeparator` prop to change the separator rendered between the two `TextField`:
+
+{{"demo": "RangeFieldDateSeparator.js"}}
+
 ### Change the format density
 
 You can control the field format spacing using the `formatDensity` prop.

diff --git a/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx b/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx
@@ -54,14 +54,11 @@ const MultiInputDateRangeFieldRoot = styled(
   },
 )({});
 
-const MultiInputDateRangeFieldSeparator = styled(
-  (props: TypographyProps) => <Typography {...props}>{props.children ?? ' – '}</Typography>,
-  {
-    name: 'MuiMultiInputDateRangeField',
-    slot: 'Separator',
-    overridesResolver: (props, styles) => styles.separator,
-  },
-)({});
+const MultiInputDateRangeFieldSeparator = styled(Typography, {
+  name: 'MuiMultiInputDateRangeField',
+  slot: 'Separator',
+  overridesResolver: (props, styles) => styles.separator,
+})({});
 
 type MultiInputDateRangeFieldComponent = (<
   TDate extends PickerValidDate,
@@ -154,6 +151,9 @@ const MultiInputDateRangeField = React.forwardRef(function MultiInputDateRangeFi
   const separatorProps = useSlotProps({
     elementType: Separator,
     externalSlotProps: slotProps?.separator,
+    additionalProps: {
+      children: ` ${internalProps.dateSeparator ?? '–'} `,
+    },
     ownerState,
     className: classes.separator,
   });

diff --git a/...ages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx b/...ages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx
@@ -52,14 +52,11 @@ const MultiInputDateTimeRangeFieldRoot = styled(
   },
 )({});
 
-const MultiInputDateTimeRangeFieldSeparator = styled(
-  (props: TypographyProps) => <Typography {...props}>{props.children ?? ' – '}</Typography>,
-  {
-    name: 'MuiMultiInputDateTimeRangeField',
-    slot: 'Separator',
-    overridesResolver: (props, styles) => styles.separator,
-  },
-)({});
+const MultiInputDateTimeRangeFieldSeparator = styled(Typography, {
+  name: 'MuiMultiInputDateTimeRangeField',
+  slot: 'Separator',
+  overridesResolver: (props, styles) => styles.separator,
+})({});
 
 type MultiInputDateTimeRangeFieldComponent = (<
   TDate extends PickerValidDate,
@@ -152,6 +149,9 @@ const MultiInputDateTimeRangeField = React.forwardRef(function MultiInputDateTim
   const separatorProps = useSlotProps({
     elementType: Separator,
     externalSlotProps: slotProps?.separator,
+    additionalProps: {
+      children: ` ${internalProps.dateSeparator ?? '–'} `,
+    },
     ownerState,
     className: classes.separator,
   });

diff --git a/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx b/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx
@@ -54,14 +54,11 @@ const MultiInputTimeRangeFieldRoot = styled(
   },
 )({});
 
-const MultiInputTimeRangeFieldSeparator = styled(
-  (props: TypographyProps) => <Typography {...props}>{props.children ?? ' – '}</Typography>,
-  {
-    name: 'MuiMultiInputTimeRangeField',
-    slot: 'Separator',
-    overridesResolver: (props, styles) => styles.separator,
-  },
-)({});
+const MultiInputTimeRangeFieldSeparator = styled(Typography, {
+  name: 'MuiMultiInputTimeRangeField',
+  slot: 'Separator',
+  overridesResolver: (props, styles) => styles.separator,
+})({});
 
 type MultiInputTimeRangeFieldComponent = (<
   TDate extends PickerValidDate,
@@ -155,6 +152,9 @@ const MultiInputTimeRangeField = React.forwardRef(function MultiInputTimeRangeFi
   const separatorProps = useSlotProps({
     elementType: Separator,
     externalSlotProps: slotProps?.separator,
+    additionalProps: {
+      children: ` ${internalProps.dateSeparator ?? '–'} `,
+    },
     ownerState,
     className: classes.separator,
   });

diff --git a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.types.ts b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.types.ts
@@ -9,7 +9,7 @@ import {
   UseClearableFieldSlotProps,
 } from '@mui/x-date-pickers/hooks';
 import { UseDateRangeFieldProps } from '../internals/models';
-import type { DateRange, RangeFieldSection, DateRangeValidationError } from '../models';
+import { DateRange, RangeFieldSection, DateRangeValidationError } from '../models';
 
 export interface UseSingleInputDateRangeFieldProps<
   TDate extends PickerValidDate,

diff --git a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/useSingleInputDateRangeField.ts b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/useSingleInputDateRangeField.ts
@@ -1,11 +1,12 @@
+import * as React from 'react';
 import {
   useField,
   splitFieldInternalAndForwardedProps,
   useDefaultizedDateField,
 } from '@mui/x-date-pickers/internals';
 import { PickerValidDate } from '@mui/x-date-pickers/models';
 import { UseSingleInputDateRangeFieldProps } from './SingleInputDateRangeField.types';
-import { rangeValueManager, rangeFieldValueManager } from '../internals/utils/valueManagers';
+import { rangeValueManager, getRangeFieldValueManager } from '../internals/utils/valueManagers';
 import { validateDateRange } from '../internals/utils/validation/validateDateRange';
 import { RangeFieldSection, DateRange } from '../models';
 
@@ -27,6 +28,11 @@ export const useSingleInputDateRangeField = <
     keyof UseSingleInputDateRangeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>
   >(props, 'date');
 
+  const fieldValueManager = React.useMemo(
+    () => getRangeFieldValueManager<TDate>({ dateSeparator: internalProps.dateSeparator }),
+    [internalProps.dateSeparator],
+  );
+
   return useField<
     DateRange<TDate>,
     TDate,
@@ -38,7 +44,7 @@ export const useSingleInputDateRangeField = <
     forwardedProps,
     internalProps,
     valueManager: rangeValueManager,
-    fieldValueManager: rangeFieldValueManager,
+    fieldValueManager,
     validator: validateDateRange,
     valueType: 'date',
   });

diff --git a/.../x-date-pickers-pro/src/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.ts b/.../x-date-pickers-pro/src/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.ts
@@ -1,11 +1,12 @@
+import * as React from 'react';
 import {
   useField,
   splitFieldInternalAndForwardedProps,
   useDefaultizedDateTimeField,
 } from '@mui/x-date-pickers/internals';
 import { PickerValidDate } from '@mui/x-date-pickers/models';
 import { UseSingleInputDateTimeRangeFieldProps } from './SingleInputDateTimeRangeField.types';
-import { rangeValueManager, rangeFieldValueManager } from '../internals/utils/valueManagers';
+import { rangeValueManager, getRangeFieldValueManager } from '../internals/utils/valueManagers';
 import { validateDateTimeRange } from '../internals/utils/validation/validateDateTimeRange';
 import { RangeFieldSection, DateRange } from '../models';
 
@@ -30,6 +31,11 @@ export const useSingleInputDateTimeRangeField = <
     keyof UseSingleInputDateTimeRangeFieldProps<any, any>
   >(props, 'date-time');
 
+  const fieldValueManager = React.useMemo(
+    () => getRangeFieldValueManager<TDate>({ dateSeparator: internalProps.dateSeparator }),
+    [internalProps.dateSeparator],
+  );
+
   return useField<
     DateRange<TDate>,
     TDate,
@@ -41,7 +47,7 @@ export const useSingleInputDateTimeRangeField = <
     forwardedProps,
     internalProps,
     valueManager: rangeValueManager,
-    fieldValueManager: rangeFieldValueManager,
+    fieldValueManager,
     validator: validateDateTimeRange,
     valueType: 'date-time',
   });

diff --git a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/useSingleInputTimeRangeField.ts b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/useSingleInputTimeRangeField.ts
@@ -1,11 +1,12 @@
+import * as React from 'react';
 import {
   useField,
   splitFieldInternalAndForwardedProps,
   useDefaultizedTimeField,
 } from '@mui/x-date-pickers/internals';
 import { PickerValidDate } from '@mui/x-date-pickers/models';
 import { UseSingleInputTimeRangeFieldProps } from './SingleInputTimeRangeField.types';
-import { rangeValueManager, rangeFieldValueManager } from '../internals/utils/valueManagers';
+import { rangeValueManager, getRangeFieldValueManager } from '../internals/utils/valueManagers';
 import { validateTimeRange } from '../internals/utils/validation/validateTimeRange';
 import { RangeFieldSection, DateRange } from '../models';
 
@@ -27,6 +28,11 @@ export const useSingleInputTimeRangeField = <
     keyof UseSingleInputTimeRangeFieldProps<any, any>
   >(props, 'time');
 
+  const fieldValueManager = React.useMemo(
+    () => getRangeFieldValueManager<TDate>({ dateSeparator: internalProps.dateSeparator }),
+    [internalProps.dateSeparator],
+  );
+
   return useField<
     DateRange<TDate>,
     TDate,
@@ -38,7 +44,7 @@ export const useSingleInputTimeRangeField = <
     forwardedProps,
     internalProps,
     valueManager: rangeValueManager,
-    fieldValueManager: rangeFieldValueManager,
+    fieldValueManager,
     validator: validateTimeRange,
     valueType: 'time',
   });

diff --git a/packages/x-date-pickers-pro/src/internals/models/dateRange.ts b/packages/x-date-pickers-pro/src/internals/models/dateRange.ts
@@ -4,7 +4,12 @@ import {
   UseFieldInternalProps,
 } from '@mui/x-date-pickers/internals';
 import { PickerValidDate } from '@mui/x-date-pickers/models';
-import type { DateRangeValidationError, RangeFieldSection, DateRange } from '../../models';
+import {
+  DateRangeValidationError,
+  RangeFieldSection,
+  DateRange,
+  RangeFieldSeparatorProps,
+} from '../../models';
 
 /**
  * Props used to validate a day value in range pickers.
@@ -39,5 +44,6 @@ export interface UseDateRangeFieldProps<
       >,
       'format'
     >,
+    RangeFieldSeparatorProps,
     DayRangeValidationProps<TDate>,
     BaseDateValidationProps<TDate> {}
diff --git a/packages/x-date-pickers-pro/src/internals/models/dateTimeRange.ts b/packages/x-date-pickers-pro/src/internals/models/dateTimeRange.ts
@@ -8,7 +8,12 @@ import {
 } from '@mui/x-date-pickers/internals';
 import { PickerValidDate } from '@mui/x-date-pickers/models';
 import { DayRangeValidationProps } from './dateRange';
-import { DateTimeRangeValidationError, RangeFieldSection, DateRange } from '../../models';
+import {
+  DateTimeRangeValidationError,
+  RangeFieldSection,
+  DateRange,
+  RangeFieldSeparatorProps,
+} from '../../models';
 
 export interface UseDateTimeRangeFieldProps<
   TDate extends PickerValidDate,
@@ -26,6 +31,7 @@ export interface UseDateTimeRangeFieldProps<
       >,
       'format'
     >,
+    RangeFieldSeparatorProps,
     DayRangeValidationProps<TDate>,
     TimeValidationProps<TDate>,
     BaseDateValidationProps<TDate>,

diff --git a/packages/x-date-pickers-pro/src/internals/models/timeRange.ts b/packages/x-date-pickers-pro/src/internals/models/timeRange.ts
@@ -5,7 +5,12 @@ import {
   UseFieldInternalProps,
 } from '@mui/x-date-pickers/internals';
 import { PickerValidDate } from '@mui/x-date-pickers/models';
-import { TimeRangeValidationError, RangeFieldSection, DateRange } from '../../models';
+import {
+  TimeRangeValidationError,
+  RangeFieldSection,
+  DateRange,
+  RangeFieldSeparatorProps,
+} from '../../models';
 
 export interface UseTimeRangeFieldProps<
   TDate extends PickerValidDate,
@@ -23,6 +28,7 @@ export interface UseTimeRangeFieldProps<
       >,
       'format'
     >,
+    RangeFieldSeparatorProps,
     TimeValidationProps<TDate>,
     BaseTimeValidationProps {
   /**