[pickers] Move the opening logic to the range fields (mui#16175)

Signed-off-by: Flavien DELANGLE <[email protected]>
Co-authored-by: Lukas Tyla <[email protected]>

Author: flaviendelangle

docs/data/date-pickers/calendar-systems/AdapterHijri.js

@@ -24,7 +24,6 @@ const cacheRtl = createCache({
 
 function ButtonDateTimeField(props) {
   const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date');
-  const { focused, ...other } = forwardedProps;
 
   const pickerContext = usePickerContext();
   const parsedFormat = useParsedFormat();
@@ -42,7 +41,7 @@ function ButtonDateTimeField(props) {
 
   return (
     <Button
-      {...other}
+      {...forwardedProps}
       variant="outlined"
       color={hasValidationError ? 'error' : 'primary'}
       className={pickerContext.rootClassName}

docs/data/date-pickers/calendar-systems/AdapterHijri.tsx

@@ -28,7 +28,6 @@ const cacheRtl = createCache({
 
 function ButtonDateTimeField(props: DateTimePickerFieldProps) {
   const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date');
-  const { focused, ...other } = forwardedProps;
 
   const pickerContext = usePickerContext();
   const parsedFormat = useParsedFormat();
@@ -46,7 +45,7 @@ function ButtonDateTimeField(props: DateTimePickerFieldProps) {
 
   return (
     <Button
-      {...other}
+      {...forwardedProps}
       variant="outlined"
       color={hasValidationError ? 'error' : 'primary'}
       className={pickerContext.rootClassName}

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

@@ -48,14 +48,13 @@ function BrowserTextField(props) {
     readOnly,
     focused,
     error,
-    InputProps: { ref, startAdornment, endAdornment } = {},
+    triggerRef,
     // The rest can be passed to the root element
     ...other
   } = props;
 
   return (
-    <BrowserFieldRoot {...other} ref={ref}>
-      {startAdornment}
+    <BrowserFieldRoot {...other} ref={triggerRef}>
       <BrowserFieldContent>
         <PickersSectionList
           elements={elements}
@@ -69,14 +68,13 @@ function BrowserTextField(props) {
           onKeyDown={onKeyDown}
         />
       </BrowserFieldContent>
-      {endAdornment}
     </BrowserFieldRoot>
   );
 }
 
 function BrowserMultiInputDateRangeField(props) {
-  const pickerContext = usePickerContext();
   const manager = useDateRangeManager();
+  const pickerContext = usePickerContext();
   const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date');
   const { slotProps, ...otherForwardedProps } = forwardedProps;
 
@@ -95,21 +93,25 @@ function BrowserMultiInputDateRangeField(props) {
   const fieldResponse = useMultiInputRangeField({
     manager,
     internalProps,
-    startForwardedProps: startTextFieldProps,
-    endForwardedProps: endTextFieldProps,
+    startTextFieldProps,
+    endTextFieldProps,
+    rootProps: {
+      ref: pickerContext.rootRef,
+      spacing: 2,
+      direction: 'row',
+      overflow: 'auto',
+      ...otherForwardedProps,
+    },
   });
 
   return (
-    <Stack
-      ref={pickerContext.rootRef}
-      spacing={2}
-      direction="row"
-      overflow="auto"
-      {...otherForwardedProps}
-    >
-      <BrowserTextField {...fieldResponse.startDate} />
+    <Stack {...fieldResponse.root}>
+      <BrowserTextField
+        {...fieldResponse.startTextField}
+        triggerRef={pickerContext.triggerRef}
+      />
       <span>–</span>
-      <BrowserTextField {...fieldResponse.endDate} />
+      <BrowserTextField {...fieldResponse.endTextField} />
     </Stack>
   );
 }

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

@@ -11,12 +11,14 @@ import {
   DateRangePickerProps,
 } from '@mui/x-date-pickers-pro/DateRangePicker';
 import { useDateRangeManager } from '@mui/x-date-pickers-pro/managers';
-import { unstable_useMultiInputRangeField as useMultiInputRangeField } from '@mui/x-date-pickers-pro/hooks';
+import {
+  unstable_useMultiInputRangeField as useMultiInputRangeField,
+  UseMultiInputRangeFieldTextFieldProps,
+} from '@mui/x-date-pickers-pro/hooks';
 import { Unstable_PickersSectionList as PickersSectionList } from '@mui/x-date-pickers/PickersSectionList';
 import {
   MultiInputFieldSlotTextFieldProps,
   MultiInputFieldRefs,
-  BaseMultiInputPickersTextFieldProps,
 } from '@mui/x-date-pickers-pro/models';
 
 const BrowserFieldRoot = styled('div', { name: 'BrowserField', slot: 'Root' })({
@@ -35,11 +37,12 @@ const BrowserFieldContent = styled('div', { name: 'BrowserField', slot: 'Content
 );
 
 interface BrowserTextFieldProps
-  extends BaseMultiInputPickersTextFieldProps<true>,
-    Omit<
-      React.HTMLAttributes<HTMLDivElement>,
-      keyof BaseMultiInputPickersTextFieldProps<true>
-    > {}
+  extends UseMultiInputRangeFieldTextFieldProps<
+    true,
+    React.HTMLAttributes<HTMLDivElement>
+  > {
+  triggerRef?: React.Ref<HTMLDivElement>;
+}
 
 function BrowserTextField(props: BrowserTextFieldProps) {
   const {
@@ -68,15 +71,14 @@ function BrowserTextField(props: BrowserTextFieldProps) {
     focused,
     error,
 
-    InputProps: { ref, startAdornment, endAdornment } = {},
+    triggerRef,
 
     // The rest can be passed to the root element
     ...other
   } = props;
 
   return (
-    <BrowserFieldRoot {...other} ref={ref}>
-      {startAdornment}
+    <BrowserFieldRoot {...other} ref={triggerRef}>
       <BrowserFieldContent>
         <PickersSectionList
           elements={elements}
@@ -90,7 +92,6 @@ function BrowserTextField(props: BrowserTextFieldProps) {
           onKeyDown={onKeyDown}
         />
       </BrowserFieldContent>
-      {endAdornment}
     </BrowserFieldRoot>
   );
 }
@@ -109,8 +110,8 @@ interface BrowserMultiInputDateRangeFieldProps
 function BrowserMultiInputDateRangeField(
   props: BrowserMultiInputDateRangeFieldProps,
 ) {
-  const pickerContext = usePickerContext();
   const manager = useDateRangeManager();
+  const pickerContext = usePickerContext();
   const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date');
   const { slotProps, ...otherForwardedProps } = forwardedProps;
 
@@ -129,21 +130,25 @@ function BrowserMultiInputDateRangeField(
   const fieldResponse = useMultiInputRangeField({
     manager,
     internalProps,
-    startForwardedProps: startTextFieldProps,
-    endForwardedProps: endTextFieldProps,
+    startTextFieldProps,
+    endTextFieldProps,
+    rootProps: {
+      ref: pickerContext.rootRef,
+      spacing: 2,
+      direction: 'row' as const,
+      overflow: 'auto',
+      ...otherForwardedProps,
+    },
   });
 
   return (
-    <Stack
-      ref={pickerContext.rootRef}
-      spacing={2}
-      direction="row"
-      overflow="auto"
-      {...otherForwardedProps}
-    >
-      <BrowserTextField {...(fieldResponse.startDate as BrowserTextFieldProps)} />
+    <Stack {...fieldResponse.root}>
+      <BrowserTextField
+        {...fieldResponse.startTextField}
+        triggerRef={pickerContext.triggerRef}
+      />
       <span>–</span>
-      <BrowserTextField {...(fieldResponse.endDate as BrowserTextFieldProps)} />
+      <BrowserTextField {...fieldResponse.endTextField} />
     </Stack>
   );
 }

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

@@ -42,7 +42,6 @@ function JoyDateField(props) {
     // Can be used to style the component
     disabled,
     readOnly,
-    focused,
     error,
     inputRef,
     // The rest can be passed to the root element

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

@@ -49,7 +49,6 @@ function JoyDateField(props: DatePickerFieldProps) {
     // Can be used to style the component
     disabled,
     readOnly,
-    focused,
     error,
     inputRef,
 

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

@@ -29,12 +29,10 @@ function JoyField(props) {
   const {
     // Should be ignored
     enableAccessibleFieldDOMStructure,
+    triggerRef,
     disabled,
     id,
     label,
-    InputProps: { ref: anchorRef, startAdornment, endAdornment } = {},
-    endDecorator,
-    startDecorator,
     slotProps,
     inputRef,
     ...other
@@ -45,24 +43,12 @@ function JoyField(props) {
       <FormLabel>{label}</FormLabel>
       <Input
         disabled={disabled}
-        startDecorator={
-          <React.Fragment>
-            {startAdornment}
-            {startDecorator}
-          </React.Fragment>
-        }
-        endDecorator={
-          <React.Fragment>
-            {endAdornment}
-            {endDecorator}
-          </React.Fragment>
-        }
         slotProps={{
           ...slotProps,
           input: { ...slotProps?.input, ref: inputRef },
         }}
         {...other}
-        ref={anchorRef}
+        ref={triggerRef}
       />
     </FormControl>
   );
@@ -79,36 +65,42 @@ function JoyMultiInputDateRangeField(props) {
   const startTextFieldProps = useSlotProps({
     elementType: 'input',
     externalSlotProps: slotProps?.textField,
+    additionalProps: { label: 'Start' },
     ownerState: { position: 'start' },
   });
 
   const endTextFieldProps = useSlotProps({
     elementType: 'input',
     externalSlotProps: slotProps?.textField,
+    additionalProps: { label: 'End' },
     ownerState: { position: 'end' },
   });
 
   const fieldResponse = useMultiInputRangeField({
     manager,
     internalProps: { ...internalProps, enableAccessibleFieldDOMStructure: false },
-    startForwardedProps: startTextFieldProps,
-    endForwardedProps: endTextFieldProps,
+    rootProps: {
+      ref: pickerContext.rootRef,
+      spacing: 2,
+      overflow: 'auto',
+      direction: 'row',
+      alignItems: 'center',
+      ...otherForwardedProps,
+    },
+    startTextFieldProps,
+    endTextFieldProps,
   });
 
   return (
-    <Stack
-      spacing={2}
-      overflow="auto"
-      direction="row"
-      alignItems="center"
-      {...otherForwardedProps}
-      ref={pickerContext.rootRef}
-    >
-      <JoyField {...fieldResponse.startDate} />
+    <Stack {...fieldResponse.root}>
+      <JoyField
+        {...fieldResponse.startTextField}
+        triggerRef={pickerContext.triggerRef}
+      />
       <FormControl>
         <Typography sx={{ marginTop: '25px' }}>{' – '}</Typography>
       </FormControl>
-      <JoyField {...fieldResponse.endDate} />
+      <JoyField {...fieldResponse.endTextField} />
     </Stack>
   );
 }