[pickers] Replace the onOpen() and onClose() methods of usePickerContext() with a single setOpen() method

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.onToggleOpening}
     >
       {label ? `${label}: ${valueStr}` : valueStr}
     </Button>

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.onToggleOpening}
     >
       {label ? `${label}: ${valueStr}` : valueStr}
     </Button>

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.onToggleOpening}>
           <DateRangeIcon />
         </IconButton>
       </InputAdornment>

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.onToggleOpening}>
             <DateRangeIcon />
           </IconButton>
         </InputAdornment>

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.onToggleOpening}
           variant="plain"
           color="neutral"
           sx={{ marginLeft: 2.5 }}

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.onToggleOpening}
             variant="plain"
             color="neutral"
             sx={{ marginLeft: 2.5 }}

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.onToggleOpening}
     >
       {label ? `${label}: ${valueStr}` : valueStr}
     </Button>

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.onToggleOpening}
     >
       {label ? `${label}: ${valueStr}` : valueStr}
     </Button>

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.onToggleOpening}
     >
       {label ? `${label}: ${formattedValue}` : formattedValue}
     </Button>

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.onToggleOpening}
     >
       {label ? `${label}: ${formattedValue}` : formattedValue}
     </Button>

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.onToggleOpening}
     />
   );
 }

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.onToggleOpening}
     />
   );
 }

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.onToggleOpening}
     >
       {label ? `${label}: ${valueStr}` : valueStr}
     </Button>

packages/x-date-pickers/src/internals/components/PickerProvider.tsx

@@ -54,6 +54,11 @@ export interface PickerContextValue {
    * @param {React.UIEvent} event The DOM event that triggered the change.
    */
   onClose: (event: React.UIEvent) => void;
+  /**
+   * Close the picker if it's open, open it if it's closed.
+   * @param {React.UIEvent} event The DOM event that triggered the change.
+   */
+  onToggleOpening: (event: React.UIEvent) => void;
   /**
    * `true` if the picker is open, `false` otherwise.
    */

packages/x-date-pickers/src/internals/hooks/usePicker/usePickerProvider.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import useEventCallback from '@mui/utils/useEventCallback';
 import { PickerOwnerState } from '../../../models';
 import { PickerValueManager, UsePickerValueResponse } from './usePickerValue.types';
 import {
@@ -67,6 +68,14 @@ export function usePickerProvider<TValue extends PickerValidValue>(
   const utils = useUtils();
   const orientation = usePickerOrientation(views, props.orientation);
 
+  const handleTogglePicker = useEventCallback((event: React.UIEvent) => {
+    if (pickerValueResponse.open) {
+      pickerValueResponse.actions.onClose(event);
+    } else {
+      pickerValueResponse.actions.onOpen(event);
+    }
+  });
+
   const ownerState = React.useMemo<PickerOwnerState>(
     () => ({
       isPickerValueEmpty: valueManager.areValuesEqual(
@@ -96,6 +105,7 @@ export function usePickerProvider<TValue extends PickerValidValue>(
     () => ({
       onOpen: pickerValueResponse.actions.onOpen,
       onClose: pickerValueResponse.actions.onClose,
+      onToggleOpening: handleTogglePicker,
       open: pickerValueResponse.open,
       disabled: props.disabled ?? false,
       readOnly: props.readOnly ?? false,
@@ -105,6 +115,7 @@ export function usePickerProvider<TValue extends PickerValidValue>(
     [
       pickerValueResponse.actions.onOpen,
       pickerValueResponse.actions.onClose,
+      handleTogglePicker,
       pickerValueResponse.open,
       variant,
       orientation,