[pickers] Use context to pass props from the picker to the field (mui…

…#16042) Signed-off-by: Flavien DELANGLE <flaviendelangle@gmail.com> Co-authored-by: Lukas Tyla <llukas.tyla@gmail.com>
lauri865 · Jan 10, 2025 · 9e07e0f · 9e07e0f
1 parent 6412b8c
commit 9e07e0f
Show file tree

Hide file tree

Showing 57 changed files with 539 additions and 500 deletions.
diff --git a/docs/data/date-pickers/calendar-systems/AdapterHijri.js b/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 { value, timezone, format } = internalProps;
   const {
     InputProps,
     slotProps,
@@ -37,16 +36,18 @@ function ButtonDateTimeField(props) {
   } = forwardedProps;
 
   const pickerContext = usePickerContext();
-
-  const parsedFormat = useParsedFormat(internalProps);
+  const parsedFormat = useParsedFormat();
   const { hasValidationError } = useValidation({
     validator: validateDate,
-    value,
-    timezone,
+    value: pickerContext.value,
+    timezone: pickerContext.timezone,
     props: internalProps,
   });
 
-  const valueStr = value == null ? parsedFormat : value.format(format);
+  const valueStr =
+    pickerContext.value == null
+      ? parsedFormat
+      : pickerContext.value.format(pickerContext.fieldFormat);
 
   return (
     <Button

diff --git a/docs/data/date-pickers/calendar-systems/AdapterHijri.tsx b/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 { value, timezone, format } = internalProps;
   const {
     InputProps,
     slotProps,
@@ -41,16 +40,18 @@ function ButtonDateTimeField(props: DateTimePickerFieldProps) {
   } = forwardedProps;
 
   const pickerContext = usePickerContext();
-
-  const parsedFormat = useParsedFormat(internalProps);
+  const parsedFormat = useParsedFormat();
   const { hasValidationError } = useValidation({
     validator: validateDate,
-    value,
-    timezone,
+    value: pickerContext.value,
+    timezone: pickerContext.timezone,
     props: internalProps,
   });
 
-  const valueStr = value == null ? parsedFormat : value.format(format);
+  const valueStr =
+    pickerContext.value == null
+      ? parsedFormat
+      : pickerContext.value.format(pickerContext.fieldFormat);
 
   return (
     <Button

diff --git a/docs/data/date-pickers/custom-field/BrowserV7MultiInputRangeField.js b/docs/data/date-pickers/custom-field/BrowserV7MultiInputRangeField.js
@@ -80,18 +80,12 @@ const BrowserTextField = React.forwardRef((props, ref) => {
 const BrowserMultiInputDateRangeField = React.forwardRef((props, ref) => {
   const {
     slotProps,
-    value,
-    format,
-    onChange,
     readOnly,
-    disabled,
     shouldDisableDate,
     minDate,
     maxDate,
     disableFuture,
     disablePast,
-    selectedSections,
-    onSelectedSectionsChange,
     className,
     unstableStartFieldRef,
     unstableEndFieldRef,
@@ -111,18 +105,12 @@ const BrowserMultiInputDateRangeField = React.forwardRef((props, ref) => {
 
   const fieldResponse = useMultiInputDateRangeField({
     sharedProps: {
-      value,
-      format,
-      onChange,
       readOnly,
-      disabled,
       shouldDisableDate,
       minDate,
       maxDate,
       disableFuture,
       disablePast,
-      selectedSections,
-      onSelectedSectionsChange,
       enableAccessibleFieldDOMStructure: true,
     },
     startTextFieldProps,

diff --git a/docs/data/date-pickers/custom-field/BrowserV7MultiInputRangeField.tsx b/docs/data/date-pickers/custom-field/BrowserV7MultiInputRangeField.tsx
@@ -116,18 +116,12 @@ const BrowserMultiInputDateRangeField = React.forwardRef(
   (props: BrowserMultiInputDateRangeFieldProps, ref: React.Ref<HTMLDivElement>) => {
     const {
       slotProps,
-      value,
-      format,
-      onChange,
       readOnly,
-      disabled,
       shouldDisableDate,
       minDate,
       maxDate,
       disableFuture,
       disablePast,
-      selectedSections,
-      onSelectedSectionsChange,
       className,
       unstableStartFieldRef,
       unstableEndFieldRef,
@@ -150,18 +144,12 @@ const BrowserMultiInputDateRangeField = React.forwardRef(
       MultiInputFieldSlotTextFieldProps
     >({
       sharedProps: {
-        value,
-        format,
-        onChange,
         readOnly,
-        disabled,
         shouldDisableDate,
         minDate,
         maxDate,
         disableFuture,
         disablePast,
-        selectedSections,
-        onSelectedSectionsChange,
         enableAccessibleFieldDOMStructure: true,
       },
       startTextFieldProps,

diff --git a/docs/data/date-pickers/custom-field/JoyV6Field.js b/docs/data/date-pickers/custom-field/JoyV6Field.js
@@ -21,10 +21,7 @@ import { unstable_useDateField as useDateField } from '@mui/x-date-pickers/DateF
 const joyTheme = extendJoyTheme();
 
 const JoyDateField = React.forwardRef((props, ref) => {
-  const fieldResponse = useDateField({
-    ...props,
-    enableAccessibleFieldDOMStructure: false,
-  });
+  const fieldResponse = useDateField(props);
 
   const {
     // Should be ignored
@@ -64,6 +61,7 @@ const JoyDatePicker = React.forwardRef((props, ref) => {
     <DatePicker
       ref={ref}
       {...props}
+      enableAccessibleFieldDOMStructure={false}
       slots={{ ...props.slots, field: JoyDateField }}
     />
   );

diff --git a/docs/data/date-pickers/custom-field/JoyV6Field.tsx b/docs/data/date-pickers/custom-field/JoyV6Field.tsx
@@ -26,10 +26,7 @@ const joyTheme = extendJoyTheme();
 
 const JoyDateField = React.forwardRef(
   (props: DatePickerFieldProps<false>, ref: React.Ref<HTMLDivElement>) => {
-    const fieldResponse = useDateField<false, typeof props>({
-      ...props,
-      enableAccessibleFieldDOMStructure: false,
-    });
+    const fieldResponse = useDateField<false, typeof props>(props);
 
     const {
       // Should be ignored
@@ -73,6 +70,7 @@ const JoyDatePicker = React.forwardRef(
       <DatePicker
         ref={ref}
         {...props}
+        enableAccessibleFieldDOMStructure={false}
         slots={{ ...props.slots, field: JoyDateField }}
       />
     );

diff --git a/docs/data/date-pickers/custom-field/JoyV6MultiInputRangeField.js b/docs/data/date-pickers/custom-field/JoyV6MultiInputRangeField.js
@@ -104,18 +104,12 @@ const MultiInputJoyDateRangeFieldSeparator = styled(
 const JoyMultiInputDateRangeField = React.forwardRef((props, ref) => {
   const {
     slotProps,
-    value,
-    format,
-    onChange,
     readOnly,
-    disabled,
     shouldDisableDate,
     minDate,
     maxDate,
     disableFuture,
     disablePast,
-    selectedSections,
-    onSelectedSectionsChange,
     className,
     unstableStartFieldRef,
     unstableEndFieldRef,
@@ -135,18 +129,12 @@ const JoyMultiInputDateRangeField = React.forwardRef((props, ref) => {
 
   const fieldResponse = useMultiInputDateRangeField({
     sharedProps: {
-      value,
-      format,
-      onChange,
       readOnly,
-      disabled,
       shouldDisableDate,
       minDate,
       maxDate,
       disableFuture,
       disablePast,
-      selectedSections,
-      onSelectedSectionsChange,
       enableAccessibleFieldDOMStructure: false,
     },
     startTextFieldProps,
@@ -169,6 +157,7 @@ const JoyDateRangePicker = React.forwardRef((props, ref) => {
     <DateRangePicker
       ref={ref}
       {...props}
+      enableAccessibleFieldDOMStructure={false}
       slots={{ ...props?.slots, field: JoyMultiInputDateRangeField }}
     />
   );

diff --git a/docs/data/date-pickers/custom-field/JoyV6MultiInputRangeField.tsx b/docs/data/date-pickers/custom-field/JoyV6MultiInputRangeField.tsx
@@ -142,18 +142,12 @@ const JoyMultiInputDateRangeField = React.forwardRef(
   (props: JoyMultiInputDateRangeFieldProps, ref: React.Ref<HTMLDivElement>) => {
     const {
       slotProps,
-      value,
-      format,
-      onChange,
       readOnly,
-      disabled,
       shouldDisableDate,
       minDate,
       maxDate,
       disableFuture,
       disablePast,
-      selectedSections,
-      onSelectedSectionsChange,
       className,
       unstableStartFieldRef,
       unstableEndFieldRef,
@@ -176,18 +170,12 @@ const JoyMultiInputDateRangeField = React.forwardRef(
       MultiInputFieldSlotTextFieldProps
     >({
       sharedProps: {
-        value,
-        format,
-        onChange,
         readOnly,
-        disabled,
         shouldDisableDate,
         minDate,
         maxDate,
         disableFuture,
         disablePast,
-        selectedSections,
-        onSelectedSectionsChange,
         enableAccessibleFieldDOMStructure: false,
       },
       startTextFieldProps,
@@ -212,6 +200,7 @@ const JoyDateRangePicker = React.forwardRef(
       <DateRangePicker
         ref={ref}
         {...props}
+        enableAccessibleFieldDOMStructure={false}
         slots={{ ...props?.slots, field: JoyMultiInputDateRangeField }}
       />
     );

diff --git a/docs/data/date-pickers/custom-field/JoyV6SingleInputRangeField.js b/docs/data/date-pickers/custom-field/JoyV6SingleInputRangeField.js
@@ -27,10 +27,7 @@ export const DateRangeIcon = createSvgIcon(
 const joyTheme = extendJoyTheme();
 
 const JoySingleInputDateRangeField = React.forwardRef((props, ref) => {
-  const fieldResponse = useSingleInputDateRangeField({
-    ...props,
-    enableAccessibleFieldDOMStructure: false,
-  });
+  const fieldResponse = useSingleInputDateRangeField(props);
 
   const {
     // Should be ignored
@@ -78,6 +75,7 @@ const JoySingleInputDateRangePicker = React.forwardRef((props, ref) => {
     <DateRangePicker
       {...props}
       ref={ref}
+      enableAccessibleFieldDOMStructure={false}
       slots={{ ...props.slots, field: JoySingleInputDateRangeField }}
     />
   );

diff --git a/docs/data/date-pickers/custom-field/JoyV6SingleInputRangeField.tsx b/docs/data/date-pickers/custom-field/JoyV6SingleInputRangeField.tsx
@@ -37,10 +37,7 @@ type JoySingleInputDateRangeFieldComponent = ((
 
 const JoySingleInputDateRangeField = React.forwardRef(
   (props: DateRangePickerFieldProps<false>, ref: React.Ref<HTMLDivElement>) => {
-    const fieldResponse = useSingleInputDateRangeField<false, typeof props>({
-      ...props,
-      enableAccessibleFieldDOMStructure: false,
-    });
+    const fieldResponse = useSingleInputDateRangeField<false, typeof props>(props);
 
     const {
       // Should be ignored
@@ -92,6 +89,7 @@ const JoySingleInputDateRangePicker = React.forwardRef(
       <DateRangePicker
         {...props}
         ref={ref}
+        enableAccessibleFieldDOMStructure={false}
         slots={{ ...props.slots, field: JoySingleInputDateRangeField }}
       />
     );

diff --git a/docs/data/date-pickers/custom-field/behavior-autocomplete/MaterialDatePicker.js b/docs/data/date-pickers/custom-field/behavior-autocomplete/MaterialDatePicker.js
@@ -6,12 +6,12 @@ import Stack from '@mui/material/Stack';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { DatePicker } from '@mui/x-date-pickers/DatePicker';
-import { useSplitFieldProps } from '@mui/x-date-pickers/hooks';
+import { usePickerContext, useSplitFieldProps } from '@mui/x-date-pickers/hooks';
 import { useValidation, validateDate } from '@mui/x-date-pickers/validation';
 
 function AutocompleteField(props) {
-  const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date');
-  const { value, timezone, onChange } = internalProps;
+  const { forwardedProps, internalProps } = useSplitFieldProps(props, 'date');
+  const { timezone, value, setValue } = usePickerContext();
   const {
     InputProps,
     slotProps,
@@ -85,7 +85,7 @@ function AutocompleteField(props) {
       }}
       value={value}
       onChange={(_, newValue) => {
-        onChange(newValue, {
+        setValue(newValue, {
           validationError: getValidationErrorForNewValue(newValue),
         });
       }}

diff --git a/docs/data/date-pickers/custom-field/behavior-autocomplete/MaterialDatePicker.tsx b/docs/data/date-pickers/custom-field/behavior-autocomplete/MaterialDatePicker.tsx
@@ -10,7 +10,7 @@ import {
   DatePickerFieldProps,
   DatePickerProps,
 } from '@mui/x-date-pickers/DatePicker';
-import { useSplitFieldProps } from '@mui/x-date-pickers/hooks';
+import { usePickerContext, useSplitFieldProps } from '@mui/x-date-pickers/hooks';
 import { useValidation, validateDate } from '@mui/x-date-pickers/validation';
 
 interface AutocompleteFieldProps extends DatePickerFieldProps {
@@ -21,8 +21,8 @@ interface AutocompleteFieldProps extends DatePickerFieldProps {
 }
 
 function AutocompleteField(props: AutocompleteFieldProps) {
-  const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date');
-  const { value, timezone, onChange } = internalProps;
+  const { forwardedProps, internalProps } = useSplitFieldProps(props, 'date');
+  const { timezone, value, setValue } = usePickerContext();
   const {
     InputProps,
     slotProps,
@@ -96,7 +96,7 @@ function AutocompleteField(props: AutocompleteFieldProps) {
       }}
       value={value}
       onChange={(_, newValue) => {
-        onChange(newValue, {
+        setValue(newValue, {
           validationError: getValidationErrorForNewValue(newValue),
         });
       }}

diff --git a/docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.js b/docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.js
@@ -12,7 +12,6 @@ import {
 
 function ButtonDateField(props) {
   const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date');
-  const { value, timezone, format } = internalProps;
   const {
     InputProps,
     slotProps,
@@ -25,16 +24,18 @@ function ButtonDateField(props) {
   } = forwardedProps;
 
   const pickerContext = usePickerContext();
-
-  const parsedFormat = useParsedFormat(internalProps);
+  const parsedFormat = useParsedFormat();
   const { hasValidationError } = useValidation({
     validator: validateDate,
-    value,
-    timezone,
+    value: pickerContext.value,
+    timezone: pickerContext.timezone,
     props: internalProps,
   });
 
-  const valueStr = value == null ? parsedFormat : value.format(format);
+  const valueStr =
+    pickerContext.value == null
+      ? parsedFormat
+      : pickerContext.value.format(pickerContext.fieldFormat);
 
   return (
     <Button