[pickers] Replace the onOpen() and onClose() methods of `usePicke…

…rContext()` with a single `setOpen()` method. (#15701) Signed-off-by: Flavien DELANGLE <[email protected]> Co-authored-by: Lukas Tyla <[email protected]>
mui · Dec 4, 2024 · 18a71ef · 18a71ef
1 parent 5712d08
commit 18a71ef
Show file tree

Hide file tree

Showing 21 changed files with 128 additions and 167 deletions.
diff --git a/docs/data/date-pickers/calendar-systems/AdapterHijri.js b/docs/data/date-pickers/calendar-systems/AdapterHijri.js
@@ -46,14 +46,6 @@ function ButtonDateTimeField(props) {
     props: internalProps,
   });
 
-  const handleTogglePicker = (event) => {
-    if (pickerContext.open) {
-      pickerContext.onClose(event);
-    } else {
-      pickerContext.onOpen(event);
-    }
-  };
-
   const valueStr = value == null ? parsedFormat : value.format(format);
 
   return (
@@ -62,7 +54,7 @@ function ButtonDateTimeField(props) {
       variant="outlined"
       color={hasValidationError ? 'error' : 'primary'}
       ref={InputProps?.ref}
-      onClick={handleTogglePicker}
+      onClick={() => pickerContext.setOpen((prev) => !prev)}
     >
       {label ? `${label}: ${valueStr}` : valueStr}
     </Button>

diff --git a/docs/data/date-pickers/calendar-systems/AdapterHijri.tsx b/docs/data/date-pickers/calendar-systems/AdapterHijri.tsx
@@ -50,14 +50,6 @@ function ButtonDateTimeField(props: DateTimePickerFieldProps) {
     props: internalProps,
   });
 
-  const handleTogglePicker = (event: React.UIEvent) => {
-    if (pickerContext.open) {
-      pickerContext.onClose(event);
-    } else {
-      pickerContext.onOpen(event);
-    }
-  };
-
   const valueStr = value == null ? parsedFormat : value.format(format);
 
   return (
@@ -66,7 +58,7 @@ function ButtonDateTimeField(props: DateTimePickerFieldProps) {
       variant="outlined"
       color={hasValidationError ? 'error' : 'primary'}
       ref={InputProps?.ref}
-      onClick={handleTogglePicker}
+      onClick={() => pickerContext.setOpen((prev) => !prev)}
     >
       {label ? `${label}: ${valueStr}` : valueStr}
     </Button>

diff --git a/docs/data/date-pickers/custom-field/BrowserV7SingleInputRangeField.js b/docs/data/date-pickers/custom-field/BrowserV7SingleInputRangeField.js
@@ -87,13 +87,6 @@ const BrowserSingleInputDateRangeField = React.forwardRef((props, ref) => {
   const { slots, slotProps, ...other } = props;
 
   const pickerContext = usePickerContext();
-  const handleTogglePicker = (event) => {
-    if (pickerContext.open) {
-      pickerContext.onClose(event);
-    } else {
-      pickerContext.onOpen(event);
-    }
-  };
 
   const textFieldProps = useSlotProps({
     elementType: 'input',
@@ -106,7 +99,7 @@ const BrowserSingleInputDateRangeField = React.forwardRef((props, ref) => {
     ...textFieldProps.InputProps,
     endAdornment: (
       <InputAdornment position="end">
-        <IconButton onClick={handleTogglePicker}>
+        <IconButton onClick={() => pickerContext.setOpen((prev) => !prev)}>
           <DateRangeIcon />
         </IconButton>
       </InputAdornment>

diff --git a/docs/data/date-pickers/custom-field/BrowserV7SingleInputRangeField.tsx b/docs/data/date-pickers/custom-field/BrowserV7SingleInputRangeField.tsx
@@ -115,13 +115,6 @@ const BrowserSingleInputDateRangeField = React.forwardRef(
     const { slots, slotProps, ...other } = props;
 
     const pickerContext = usePickerContext();
-    const handleTogglePicker = (event: React.UIEvent) => {
-      if (pickerContext.open) {
-        pickerContext.onClose(event);
-      } else {
-        pickerContext.onOpen(event);
-      }
-    };
 
     const textFieldProps: typeof props = useSlotProps({
       elementType: 'input',
@@ -134,7 +127,7 @@ const BrowserSingleInputDateRangeField = React.forwardRef(
       ...textFieldProps.InputProps,
       endAdornment: (
         <InputAdornment position="end">
-          <IconButton onClick={handleTogglePicker}>
+          <IconButton onClick={() => pickerContext.setOpen((prev) => !prev)}>
             <DateRangeIcon />
           </IconButton>
         </InputAdornment>

diff --git a/docs/data/date-pickers/custom-field/JoyV6SingleInputRangeField.js b/docs/data/date-pickers/custom-field/JoyV6SingleInputRangeField.js
@@ -72,13 +72,6 @@ const JoySingleInputDateRangeField = React.forwardRef((props, ref) => {
   const { slots, slotProps, ...other } = props;
 
   const pickerContext = usePickerContext();
-  const handleTogglePicker = (event) => {
-    if (pickerContext.open) {
-      pickerContext.onClose(event);
-    } else {
-      pickerContext.onOpen(event);
-    }
-  };
 
   const textFieldProps = useSlotProps({
     elementType: FormControl,
@@ -105,7 +98,7 @@ const JoySingleInputDateRangeField = React.forwardRef((props, ref) => {
       ref={ref}
       endDecorator={
         <IconButton
-          onClick={handleTogglePicker}
+          onClick={() => pickerContext.setOpen((prev) => !prev)}
           variant="plain"
           color="neutral"
           sx={{ marginLeft: 2.5 }}

diff --git a/docs/data/date-pickers/custom-field/JoyV6SingleInputRangeField.tsx b/docs/data/date-pickers/custom-field/JoyV6SingleInputRangeField.tsx
@@ -103,13 +103,6 @@ const JoySingleInputDateRangeField = React.forwardRef(
     const { slots, slotProps, ...other } = props;
 
     const pickerContext = usePickerContext();
-    const handleTogglePicker = (event: React.UIEvent) => {
-      if (pickerContext.open) {
-        pickerContext.onClose(event);
-      } else {
-        pickerContext.onOpen(event);
-      }
-    };
 
     const textFieldProps: JoySingleInputDateRangeFieldProps = useSlotProps({
       elementType: FormControl,
@@ -136,7 +129,7 @@ const JoySingleInputDateRangeField = React.forwardRef(
         ref={ref}
         endDecorator={
           <IconButton
-            onClick={handleTogglePicker}
+            onClick={() => pickerContext.setOpen((prev) => !prev)}
             variant="plain"
             color="neutral"
             sx={{ marginLeft: 2.5 }}

diff --git a/docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.js b/docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.js
@@ -34,14 +34,6 @@ function ButtonDateField(props) {
     props: internalProps,
   });
 
-  const handleTogglePicker = (event) => {
-    if (pickerContext.open) {
-      pickerContext.onClose(event);
-    } else {
-      pickerContext.onOpen(event);
-    }
-  };
-
   const valueStr = value == null ? parsedFormat : value.format(format);
 
   return (
@@ -50,7 +42,7 @@ function ButtonDateField(props) {
       variant="outlined"
       color={hasValidationError ? 'error' : 'primary'}
       ref={InputProps?.ref}
-      onClick={handleTogglePicker}
+      onClick={() => pickerContext.setOpen((prev) => !prev)}
     >
       {label ? `${label}: ${valueStr}` : valueStr}
     </Button>

diff --git a/docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.tsx b/docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.tsx
@@ -38,14 +38,6 @@ function ButtonDateField(props: DatePickerFieldProps) {
     props: internalProps,
   });
 
-  const handleTogglePicker = (event: React.UIEvent) => {
-    if (pickerContext.open) {
-      pickerContext.onClose(event);
-    } else {
-      pickerContext.onOpen(event);
-    }
-  };
-
   const valueStr = value == null ? parsedFormat : value.format(format);
 
   return (
@@ -54,7 +46,7 @@ function ButtonDateField(props: DatePickerFieldProps) {
       variant="outlined"
       color={hasValidationError ? 'error' : 'primary'}
       ref={InputProps?.ref}
-      onClick={handleTogglePicker}
+      onClick={() => pickerContext.setOpen((prev) => !prev)}
     >
       {label ? `${label}: ${valueStr}` : valueStr}
     </Button>

diff --git a/docs/data/date-pickers/custom-field/behavior-button/MaterialDateRangePicker.js b/docs/data/date-pickers/custom-field/behavior-button/MaterialDateRangePicker.js
@@ -36,14 +36,6 @@ function ButtonDateRangeField(props) {
     props: internalProps,
   });
 
-  const handleTogglePicker = (event) => {
-    if (pickerContext.open) {
-      pickerContext.onClose(event);
-    } else {
-      pickerContext.onOpen(event);
-    }
-  };
-
   const formattedValue = (value ?? [null, null])
     .map((date) => (date == null ? parsedFormat : date.format(format)))
     .join(' – ');
@@ -54,7 +46,7 @@ function ButtonDateRangeField(props) {
       variant="outlined"
       color={hasValidationError ? 'error' : 'primary'}
       ref={InputProps?.ref}
-      onClick={handleTogglePicker}
+      onClick={() => pickerContext.setOpen((prev) => !prev)}
     >
       {label ? `${label}: ${formattedValue}` : formattedValue}
     </Button>

diff --git a/docs/data/date-pickers/custom-field/behavior-button/MaterialDateRangePicker.tsx b/docs/data/date-pickers/custom-field/behavior-button/MaterialDateRangePicker.tsx
@@ -40,14 +40,6 @@ function ButtonDateRangeField(props: DateRangePickerFieldProps) {
     props: internalProps,
   });
 
-  const handleTogglePicker = (event: React.UIEvent) => {
-    if (pickerContext.open) {
-      pickerContext.onClose(event);
-    } else {
-      pickerContext.onOpen(event);
-    }
-  };
-
   const formattedValue = (value ?? [null, null])
     .map((date: Dayjs) => (date == null ? parsedFormat : date.format(format)))
     .join(' – ');
@@ -58,7 +50,7 @@ function ButtonDateRangeField(props: DateRangePickerFieldProps) {
       variant="outlined"
       color={hasValidationError ? 'error' : 'primary'}
       ref={InputProps?.ref}
-      onClick={handleTogglePicker}
+      onClick={() => pickerContext.setOpen((prev) => !prev)}
     >
       {label ? `${label}: ${formattedValue}` : formattedValue}
     </Button>

diff --git a/docs/data/date-pickers/custom-field/behavior-read-only-text-field/MaterialDatePicker.js b/docs/data/date-pickers/custom-field/behavior-read-only-text-field/MaterialDatePicker.js
@@ -26,14 +26,6 @@ function ReadOnlyDateField(props) {
     props: internalProps,
   });
 
-  const handleTogglePicker = (event) => {
-    if (pickerContext.open) {
-      pickerContext.onClose(event);
-    } else {
-      pickerContext.onOpen(event);
-    }
-  };
-
   return (
     <TextField
       {...other}
@@ -46,7 +38,7 @@ function ReadOnlyDateField(props) {
         sx: { cursor: 'pointer', '& *': { cursor: 'inherit' } },
       }}
       error={hasValidationError}
-      onClick={handleTogglePicker}
+      onClick={() => pickerContext.setOpen((prev) => !prev)}
     />
   );
 }

diff --git a/docs/data/date-pickers/custom-field/behavior-read-only-text-field/MaterialDatePicker.tsx b/docs/data/date-pickers/custom-field/behavior-read-only-text-field/MaterialDatePicker.tsx
@@ -30,14 +30,6 @@ function ReadOnlyDateField(props: DatePickerFieldProps) {
     props: internalProps,
   });
 
-  const handleTogglePicker = (event: React.UIEvent) => {
-    if (pickerContext.open) {
-      pickerContext.onClose(event);
-    } else {
-      pickerContext.onOpen(event);
-    }
-  };
-
   return (
     <TextField
       {...other}
@@ -50,7 +42,7 @@ function ReadOnlyDateField(props: DatePickerFieldProps) {
         sx: { cursor: 'pointer', '& *': { cursor: 'inherit' } },
       }}
       error={hasValidationError}
-      onClick={handleTogglePicker}
+      onClick={() => pickerContext.setOpen((prev) => !prev)}
     />
   );
 }

diff --git a/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md b/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md
@@ -404,6 +404,46 @@ The following variables and types have been renamed to have a coherent `Picker`
   +import { FieldRangeSection } from '@mui/x-date-pickers-pro';
   ```
 
+## Hooks breaking changes
+
+### `usePickerContext`
+
+- The `onOpen` and `onClose` methods have been replaced with a single `setOpen` method.
+  This method no longer takes an event, which was used to prevent the browser default behavior:
+
+  ```diff
+   const pickerContext = usePickerContext();
+
+  -<button onClick={pickerContext.onOpen}>Open</button>
+  +<button onClick={() => pickerContext.setOpen(true)}>Open</button>
+
+  -<button onClick={pickerContext.onClose}>Close</button>
+  +<button onClick={() => pickerContext.setOpen(false)}>Open</button>
+
+  -<button
+  -  onClick={(event) =>
+  -    pickerContext.open ? pickerContext.onClose(event) : pickerContext.onOpen(event)
+  -  }
+  ->
+  -  Toggle
+  -</button>
+  +<button onClick={() => pickerContext.setOpen(prev => !prev)}>Toggle</button>
+  ```
+
+  If you want to prevent the default behavior, you now have to do it manually:
+
+  ```diff
+     <div
+     onKeyDown={(event) => {
+       if (event.key === 'Escape') {
+  -      pickerContext.onClose();
+  +      event.preventDefault();
+  +      pickerContext.setOpen(false);
+       }
+     }}
+   />
+  ```
+
 ## Typing breaking changes
 
 ### Do not pass the date object as a generic

diff --git a/docs/src/modules/components/overview/mainDemo/PickerButton.tsx b/docs/src/modules/components/overview/mainDemo/PickerButton.tsx
@@ -23,14 +23,6 @@ function ButtonDateField(props: DatePickerFieldProps) {
     props: internalProps,
   });
 
-  const handleTogglePicker = (event: React.UIEvent) => {
-    if (pickerContext.open) {
-      pickerContext.onClose(event);
-    } else {
-      pickerContext.onOpen(event);
-    }
-  };
-
   const valueStr = value == null ? parsedFormat : value.format(format);
 
   return (
@@ -43,7 +35,7 @@ function ButtonDateField(props: DatePickerFieldProps) {
       fullWidth
       color={hasValidationError ? 'error' : 'primary'}
       ref={InputProps?.ref}
-      onClick={handleTogglePicker}
+      onClick={() => pickerContext.setOpen((prev) => !prev)}
     >
       {label ? `${label}: ${valueStr}` : valueStr}
     </Button>

diff --git a/packages/x-date-pickers/src/internals/components/PickerProvider.tsx b/packages/x-date-pickers/src/internals/components/PickerProvider.tsx
@@ -3,6 +3,7 @@ import { PickerOwnerState } from '../../models';
 import { PickersInputLocaleText } from '../../locales';
 import { LocalizationProvider } from '../../LocalizationProvider';
 import { PickerOrientation, PickerVariant } from '../models';
+import { UsePickerValueContextValue } from '../hooks/usePicker/usePickerValue.types';
 
 export const PickerContext = React.createContext<PickerContextValue | null>(null);
 
@@ -43,21 +44,7 @@ export interface PickerProviderProps {
   children: React.ReactNode;
 }
 
-export interface PickerContextValue {
-  /**
-   * Open the picker.
-   * @param {React.UIEvent} event The DOM event that triggered the change.
-   */
-  onOpen: (event: React.UIEvent) => void;
-  /**
-   * Close the picker.
-   * @param {React.UIEvent} event The DOM event that triggered the change.
-   */
-  onClose: (event: React.UIEvent) => void;
-  /**
-   * `true` if the picker is open, `false` otherwise.
-   */
-  open: boolean;
+export interface PickerContextValue extends UsePickerValueContextValue {
   /**
    * `true` if the picker is disabled, `false` otherwise.
    */