[pickers] Remove code duplication for the multi input range fields

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

@@ -5,8 +5,10 @@ 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 { useSplitFieldProps } from '@mui/x-date-pickers/hooks';
 import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
-import { unstable_useMultiInputDateRangeField as useMultiInputDateRangeField } from '@mui/x-date-pickers-pro/MultiInputDateRangeField';
+import { useDateRangeManager } from '@mui/x-date-pickers-pro/managers';
+import { unstable_useMultiInputRangeField as useMultiInputRangeField } from '@mui/x-date-pickers-pro/hooks';
 import { Unstable_PickersSectionList as PickersSectionList } from '@mui/x-date-pickers/PickersSectionList';
 
 const BrowserFieldRoot = styled('div', { name: 'BrowserField', slot: 'Root' })({
@@ -78,18 +80,9 @@ const BrowserTextField = React.forwardRef((props, ref) => {
 });
 
 const BrowserMultiInputDateRangeField = React.forwardRef((props, ref) => {
-  const {
-    slotProps,
-    readOnly,
-    shouldDisableDate,
-    minDate,
-    maxDate,
-    disableFuture,
-    disablePast,
-    className,
-    unstableStartFieldRef,
-    unstableEndFieldRef,
-  } = props;
+  const manager = useDateRangeManager();
+  const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date');
+  const { slotProps, ownerState, ...otherForwardedProps } = forwardedProps;
 
   const startTextFieldProps = useSlotProps({
     elementType: 'input',
@@ -103,48 +96,24 @@ const BrowserMultiInputDateRangeField = React.forwardRef((props, ref) => {
     ownerState: { position: 'end' },
   });
 
-  const fieldResponse = useMultiInputDateRangeField({
-    sharedProps: {
-      readOnly,
-      shouldDisableDate,
-      minDate,
-      maxDate,
-      disableFuture,
-      disablePast,
-      enableAccessibleFieldDOMStructure: true,
-    },
-    startTextFieldProps,
-    endTextFieldProps,
-    unstableStartFieldRef,
-    unstableEndFieldRef,
+  const fieldResponse = useMultiInputRangeField({
+    manager,
+    internalProps,
+    startForwardedProps: startTextFieldProps,
+    endForwardedProps: endTextFieldProps,
   });
 
-  const {
-    // The multi input range field do not support clearable and onClear
-    onClear: onClearStartDate,
-    clearable: isStartDateClearable,
-    openPickerAriaLabel: openPickerStartDateAriaLabel,
-    ...startDateProps
-  } = fieldResponse.startDate;
-  const {
-    // The multi input range field do not support clearable and onClear
-    onClear: onClearEndDate,
-    clearable: isEndDateClearable,
-    openPickerAriaLabel: openPickerEndDateAriaLabel,
-    ...endDateProps
-  } = fieldResponse.endDate;
-
   return (
     <Stack
       ref={ref}
       spacing={2}
       direction="row"
       overflow="auto"
-      className={className}
+      {...otherForwardedProps}
     >
-      <BrowserTextField {...startDateProps} />
-      <span> – </span>
-      <BrowserTextField {...endDateProps} />
+      <BrowserTextField {...fieldResponse.startDate} />
+      <span>–</span>
+      <BrowserTextField {...fieldResponse.endDate} />
     </Stack>
   );
 });

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

@@ -5,12 +5,14 @@ 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 { useSplitFieldProps } from '@mui/x-date-pickers/hooks';
 import {
   DateRangePicker,
   DateRangePickerFieldProps,
   DateRangePickerProps,
 } from '@mui/x-date-pickers-pro/DateRangePicker';
-import { unstable_useMultiInputDateRangeField as useMultiInputDateRangeField } from '@mui/x-date-pickers-pro/MultiInputDateRangeField';
+import { useDateRangeManager } from '@mui/x-date-pickers-pro/managers';
+import { unstable_useMultiInputRangeField as useMultiInputRangeField } from '@mui/x-date-pickers-pro/hooks';
 import { Unstable_PickersSectionList as PickersSectionList } from '@mui/x-date-pickers/PickersSectionList';
 import {
   MultiInputFieldSlotTextFieldProps,
@@ -118,18 +120,9 @@ type BrowserMultiInputDateRangeFieldComponent = ((
 
 const BrowserMultiInputDateRangeField = React.forwardRef(
   (props: BrowserMultiInputDateRangeFieldProps, ref: React.Ref<HTMLDivElement>) => {
-    const {
-      slotProps,
-      readOnly,
-      shouldDisableDate,
-      minDate,
-      maxDate,
-      disableFuture,
-      disablePast,
-      className,
-      unstableStartFieldRef,
-      unstableEndFieldRef,
-    } = props;
+    const manager = useDateRangeManager();
+    const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date');
+    const { slotProps, ownerState, ...otherForwardedProps } = forwardedProps;
 
     const startTextFieldProps = useSlotProps({
       elementType: 'input',
@@ -143,51 +136,24 @@ const BrowserMultiInputDateRangeField = React.forwardRef(
       ownerState: { position: 'end' } as any,
     }) as MultiInputFieldSlotTextFieldProps;
 
-    const fieldResponse = useMultiInputDateRangeField<
-      true,
-      MultiInputFieldSlotTextFieldProps
-    >({
-      sharedProps: {
-        readOnly,
-        shouldDisableDate,
-        minDate,
-        maxDate,
-        disableFuture,
-        disablePast,
-        enableAccessibleFieldDOMStructure: true,
-      },
-      startTextFieldProps,
-      endTextFieldProps,
-      unstableStartFieldRef,
-      unstableEndFieldRef,
+    const fieldResponse = useMultiInputRangeField({
+      manager,
+      internalProps,
+      startForwardedProps: startTextFieldProps,
+      endForwardedProps: endTextFieldProps,
     });
 
-    const {
-      // The multi input range field do not support clearable and onClear
-      onClear: onClearStartDate,
-      clearable: isStartDateClearable,
-      openPickerAriaLabel: openPickerStartDateAriaLabel,
-      ...startDateProps
-    } = fieldResponse.startDate;
-    const {
-      // The multi input range field do not support clearable and onClear
-      onClear: onClearEndDate,
-      clearable: isEndDateClearable,
-      openPickerAriaLabel: openPickerEndDateAriaLabel,
-      ...endDateProps
-    } = fieldResponse.endDate;
-
     return (
       <Stack
         ref={ref}
         spacing={2}
         direction="row"
         overflow="auto"
-        className={className}
+        {...otherForwardedProps}
       >
-        <BrowserTextField {...startDateProps} />
-        <span> – </span>
-        <BrowserTextField {...endDateProps} />
+        <BrowserTextField {...(fieldResponse.startDate as BrowserTextFieldProps)} />
+        <span>–</span>
+        <BrowserTextField {...(fieldResponse.endDate as BrowserTextFieldProps)} />
       </Stack>
     );
   },

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

@@ -8,7 +8,6 @@ import useSlotProps from '@mui/utils/useSlotProps';
 import {
   extendTheme as extendJoyTheme,
   useColorScheme,
-  styled,
   CssVarsProvider,
   THEME_ID,
 } from '@mui/joy/styles';
@@ -18,9 +17,11 @@ import FormControl from '@mui/joy/FormControl';
 import FormLabel from '@mui/joy/FormLabel';
 import Typography from '@mui/joy/Typography';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { useSplitFieldProps } from '@mui/x-date-pickers/hooks';
 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 { useDateRangeManager } from '@mui/x-date-pickers-pro/managers';
+import { unstable_useMultiInputRangeField as useMultiInputRangeField } from '@mui/x-date-pickers-pro/hooks';
 
 const joyTheme = extendJoyTheme();
 
@@ -68,102 +69,47 @@ const JoyField = React.forwardRef((props, ref) => {
   );
 });
 
-const MultiInputJoyDateRangeFieldRoot = styled(
-  React.forwardRef((props, ref) => (
-    <Stack
-      ref={ref}
-      spacing={2}
-      direction="row"
-      alignItems="center"
-      overflow="auto"
-      {...props}
-    />
-  )),
-  {
-    name: 'MuiMultiInputDateRangeField',
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root,
-  },
-)({});
-
-const MultiInputJoyDateRangeFieldSeparator = styled(
-  (props) => (
-    <FormControl>
-      {/* Ensure that the separator is correctly aligned */}
-      <span />
-      <Typography {...props}>{props.children ?? ' – '}</Typography>
-    </FormControl>
-  ),
-  {
-    name: 'MuiMultiInputDateRangeField',
-    slot: 'Separator',
-    overridesResolver: (props, styles) => styles.separator,
-  },
-)({ marginTop: '25px' });
-
 const JoyMultiInputDateRangeField = React.forwardRef((props, ref) => {
-  const {
-    slotProps,
-    readOnly,
-    shouldDisableDate,
-    minDate,
-    maxDate,
-    disableFuture,
-    disablePast,
-    className,
-    unstableStartFieldRef,
-    unstableEndFieldRef,
-  } = props;
+  const manager = useDateRangeManager({
+    enableAccessibleFieldDOMStructure: false,
+  });
+  const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date');
+  const { slotProps, ownerState, ...otherForwardedProps } = forwardedProps;
 
   const startTextFieldProps = useSlotProps({
-    elementType: FormControl,
+    elementType: 'input',
     externalSlotProps: slotProps?.textField,
     ownerState: { position: 'start' },
   });
 
   const endTextFieldProps = useSlotProps({
-    elementType: FormControl,
+    elementType: 'input',
     externalSlotProps: slotProps?.textField,
     ownerState: { position: 'end' },
   });
 
-  const fieldResponse = useMultiInputDateRangeField({
-    sharedProps: {
-      readOnly,
-      shouldDisableDate,
-      minDate,
-      maxDate,
-      disableFuture,
-      disablePast,
-      enableAccessibleFieldDOMStructure: false,
-    },
-    startTextFieldProps,
-    endTextFieldProps,
-    unstableStartFieldRef,
-    unstableEndFieldRef,
+  const fieldResponse = useMultiInputRangeField({
+    manager,
+    internalProps: { ...internalProps, enableAccessibleFieldDOMStructure: false },
+    startForwardedProps: startTextFieldProps,
+    endForwardedProps: endTextFieldProps,
   });
 
-  const {
-    // The multi input range field do not support clearable,  onClear and openPickerAriaLabel
-    onClear: onClearStartDate,
-    clearable: isStartDateClearable,
-    openPickerAriaLabel: openPickerStartDateAriaLabel,
-    ...startDateProps
-  } = fieldResponse.startDate;
-  const {
-    // The multi input range field do not support clearable,  onClear and openPickerAriaLabel
-    onClear: onClearEndDate,
-    clearable: isEndDateClearable,
-    openPickerAriaLabel: openPickerEndDateAriaLabel,
-    ...endDateProps
-  } = fieldResponse.endDate;
-
   return (
-    <MultiInputJoyDateRangeFieldRoot ref={ref} className={className}>
-      <JoyField {...startDateProps} />
-      <MultiInputJoyDateRangeFieldSeparator />
-      <JoyField {...endDateProps} />
-    </MultiInputJoyDateRangeFieldRoot>
+    <Stack
+      ref={ref}
+      spacing={2}
+      overflow="auto"
+      direction="row"
+      alignItems="center"
+      {...otherForwardedProps}
+    >
+      <JoyField {...fieldResponse.startDate} />
+      <FormControl>
+        <Typography sx={{ marginTop: '25px' }}>{' – '}</Typography>
+      </FormControl>
+      <JoyField {...fieldResponse.endDate} />
+    </Stack>
   );
 });