diff --git a/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md b/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md
index 764f28cfb98a..411d78148105 100644
--- 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 `onClock` 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();
+
+ -
+ +
+
+ -
+ +
+
+ -
+ +
+ ```
+
+ If you want to prevent the default behavior, you now have to do it manually:
+
+ ```diff
+
{
+ 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/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerValue.types.ts b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerValue.types.ts
index 5550c7535fa6..60c022e497a9 100644
--- a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerValue.types.ts
+++ b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerValue.types.ts
@@ -1,3 +1,4 @@
+import * as React from 'react';
import { FieldChangeHandlerContext, UseFieldInternalProps } from '../useField';
import { Validator } from '../../../validation';
import { PickerVariant } from '../../models/common';
@@ -17,7 +18,6 @@ import {
PickersShortcutsItemContext,
} from '../../../PickersShortcuts';
import { InferNonNullablePickerValue, PickerValidValue } from '../../models';
-import React from 'react';
export interface PickerValueManager {
/**
@@ -332,6 +332,15 @@ export interface UsePickerValueResponse
}
export interface UsePickerValueContextValue {
+ /**
+ * Sets the current opening status of the picker.
+ * ```ts
+ * setOpen(true); // Opens the picker.
+ * setOpen(false); // Closes the picker.
+ * setOpen((prevOpen) => !prevOpen); // Toggles the opening status.
+ * ```
+ * @param {React.SetStateAction} action The new opening status of the picker, it can be a function that will receive the previous opening status.
+ */
setOpen: React.Dispatch>;
/**
* `true` if the picker is open, `false` otherwise.
diff --git a/packages/x-date-pickers/src/internals/models/props/basePickerProps.tsx b/packages/x-date-pickers/src/internals/models/props/basePickerProps.tsx
index c4fef0bdaa15..6af60cd19603 100644
--- a/packages/x-date-pickers/src/internals/models/props/basePickerProps.tsx
+++ b/packages/x-date-pickers/src/internals/models/props/basePickerProps.tsx
@@ -81,3 +81,15 @@ export interface BaseNonRangeNonStaticPickerProps {
*/
name?: string;
}
+
+const Component = () => {
+ return (
+