Skip to content

Commit

Permalink
[pickers] Add missing breaking changes to changelog (#11420)
Browse files Browse the repository at this point in the history
  • Loading branch information
MBilalShafi authored Dec 15, 2023
1 parent 908585b commit a6f1170
Showing 1 changed file with 87 additions and 6 deletions.
93 changes: 87 additions & 6 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -43,12 +43,93 @@ Same changes as in `@mui/x-data-grid-pro@7.0.0-alpha.5`.
- The slot interfaces got renamed to match with `@mui/base` naming.
The `SlotsComponent` suffix has been replaced with `Slots` and `SlotsComponentsProps` with `SlotProps`.

```diff
- DateCalendarSlotsComponent
+ DateCalendarSlots
- DateCalendarSlotsComponentsProps
+ DateCalendarSlotProps
```
```diff
- DateCalendarSlotsComponent
+ DateCalendarSlots
- DateCalendarSlotsComponentsProps
+ DateCalendarSlotProps
```

- Move `inputRef` inside the props passed to the field hooks

The field hooks now only receive the props instead of an object containing both the props and the `inputRef`.

```diff
- const { inputRef, ...otherProps } = props
- const fieldResponse = useDateField({ props: otherProps, inputRef });
+ const fieldResponse = useDateField(props);
```

If you are using a multi input range field hook, the same applies to `startInputRef` and `endInputRef` params

```diff
- const { inputRef: startInputRef, ...otherStartTextFieldProps } = startTextFieldProps
- const { inputRef: endInputRef, ...otherEndTextFieldProps } = endTextFieldProps

const fieldResponse = useMultiInputDateRangeField({
sharedProps,
- startTextFieldProps: otherStartTextFieldProps,
- endTextFieldProps: otherEndTextFieldProps,
- startInputRef
- endInputRef,
+ startTextFieldProps,
+ endTextFieldProps
});
```

- Rename the ref returned by the field hooks to `inputRef`

When used with the v6 TextField approach (where the input is an `<input />` HTML element), the field hooks return a ref that needs to be passed to the `<input />` element.
This ref was previously named `ref` and has been renamed `inputRef` for extra clarity.

```diff
const fieldResponse = useDateField(props);

- return <input ref={fieldResponse.ref} />
+ return <input ref={fieldResponse.inputRef} />
```

If you are using a multi input range field hook, the same applies to the ref in the `startDate` and `endDate` objects

```diff
const fieldResponse = useDateField(props);

return (
<div>
- <input ref={fieldResponse.startDate.ref} />
+ <input ref={fieldResponse.startDate.inputRef} />
<span>–</span>
- <input ref={fieldResponse.endDate.ref} />
+ <input ref={fieldResponse.endDate.inputRef} />
</div>
)
```

- Restructure the API of `useClearableField`

The `useClearableField` hook API has been simplified to now take a `props` parameter instead of a `fieldProps`, `InputProps`, `clearable`, `onClear`, `slots` and `slotProps` parameters.

You should now be able to directly pass the returned value from your field hook (e.g: `useDateField`) to `useClearableField`

```diff
const fieldResponse = useDateField(props);

- const { InputProps, onClear, clearable, slots, slotProps, ...otherFieldProps } = fieldResponse
- const { InputProps: ProcessedInputProps, fieldProps: processedFieldProps } = useClearableField({
- fieldProps: otherFieldProps,
- InputProps,
- clearable,
- onClear,
- slots,
- slotProps,
- });
-
- return <MyCustomTextField {...processedFieldProps} InputProps={ProcessedInputProps} />

+ const processedFieldProps = useClearableField(fieldResponse);
+
+ return <MyCustomTextField {...processedFieldProps} />
```

#### `@mui/x-date-pickers@7.0.0-alpha.5`

Expand Down

0 comments on commit a6f1170

Please sign in to comment.