Skip to content

Commit

Permalink
Add migration guide
Browse files Browse the repository at this point in the history
  • Loading branch information
flaviendelangle committed Dec 4, 2024
1 parent 26b4206 commit 4680590
Show file tree
Hide file tree
Showing 3 changed files with 62 additions and 1 deletion.
40 changes: 40 additions & 0 deletions docs/data/migration/migration-pickers-v7/migration-pickers-v7.md
Original file line number Diff line number Diff line change
Expand Up @@ -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();

-<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
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import * as React from 'react';
import { FieldChangeHandlerContext, UseFieldInternalProps } from '../useField';
import { Validator } from '../../../validation';
import { PickerVariant } from '../../models/common';
Expand All @@ -17,7 +18,6 @@ import {
PickersShortcutsItemContext,
} from '../../../PickersShortcuts';
import { InferNonNullablePickerValue, PickerValidValue } from '../../models';
import React from 'react';

export interface PickerValueManager<TValue extends PickerValidValue, TError> {
/**
Expand Down Expand Up @@ -332,6 +332,15 @@ export interface UsePickerValueResponse<TValue extends PickerValidValue, TError>
}

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<boolean>} action The new opening status of the picker, it can be a function that will receive the previous opening status.
*/
setOpen: React.Dispatch<React.SetStateAction<boolean>>;
/**
* `true` if the picker is open, `false` otherwise.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -81,3 +81,15 @@ export interface BaseNonRangeNonStaticPickerProps {
*/
name?: string;
}

const Component = () => {
return (
<div
onKeyDown={(event) => {
if (event.key === 'Escape') {
pickerContextValue.onClose();
}
}}
/>
);
};

0 comments on commit 4680590

Please sign in to comment.