[pickers] Use the new `ownerState` object in all the field components #15510

flaviendelangle · 2024-11-20T13:59:47Z

Create a new useFieldOwnerState hook to create a FieldOwnerState object that extends PickerOwnerState
Use FieldOwnerState to resolve slotProps.textField, in all the field components
Use FieldOwnerState to resolve slotProps.root and slotProps.separator in the multi input range field components
Use SlotComponentPropsFromProps instead of SlotComponentProps for any slot handled by the field components
Correctly type all the slots of the field components, even the one exposed by the picker components

mui-bot · 2024-11-20T14:06:03Z

Deploy preview: https://deploy-preview-15510--material-ui-x.netlify.app/

Generated by 🚫 dangerJS against 262ff3a

flaviendelangle · 2024-11-20T14:04:31Z

packages/x-date-pickers/src/models/fields.ts

@@ -117,6 +118,17 @@ export interface FieldRef<TSection extends FieldSection> {

 export type FieldSelectedSections = number | FieldSectionType | null | 'all';

+export interface FieldOwnerState extends PickerOwnerState {


In v9, we should be able to access a lot more info if needed, but for now the structure of the component makes it very hard to put anything useful here.

I added the disabled and readOnly props because when used as standalone then are needed since isPickerDisabled and isPickerReadOnly are not reliable.

I think that's a good start that we can enrich in the future 👌
This object will also be used for the inputAdornment, openPickerButton and openPickerIcon slots once those are handled by the field component.

flaviendelangle · 2024-11-20T14:08:36Z

packages/x-date-pickers/src/TimeField/TimeField.types.ts

 export interface TimeFieldSlots extends UseClearableFieldSlots {
  /**
   * Form control with an input to render the value.
-   * @default TextField from '@mui/material' or PickersTextField if `enableAccessibleFieldDOMStructure` is `true`.
+   * @default <PickersTextField />, or <TextField /> from '@mui/material' if `enableAccessibleFieldDOMStructure` is `false`.


Not related to this PR but I noticed this inconsistent JSDoc while doing the changes

flaviendelangle · 2024-11-20T14:26:37Z

packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.types.ts

@@ -79,9 +80,13 @@ export interface ExportedUseDesktopPickerSlotProps<
    {},
    PickerOwnerState
  >;
-  textField?: SlotComponentProps<typeof TextField, {}, Record<string, any>>;
+  textField?: SlotComponentPropsFromProps<


Always great to have this kind of cleaning 👌
Now the slots exposed at the picker level will always have the right ownerState and the right props.

michelengelen

LGTM

michelengelen · 2024-11-28T13:29:12Z

packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.types.ts

@@ -65,7 +67,7 @@ export interface MultiInputDateRangeFieldSlots {
  /**
   * Form control with an input to render a date.
   * It is rendered twice: once for the start date and once for the end date.
-   * @default TextField from '@mui/material' or PickersTextField if `enableAccessibleFieldDOMStructure` is `true`.
+   * @default <PickersTextField />, or <TextField /> from '@mui/material' if `enableAccessibleFieldDOMStructure` is `false`.


should we wrap these in backticks? Not sure if we do this and if we are consistent with that.

Suggested change

* @default <PickersTextField />, or <TextField /> from '@mui/material' if `enableAccessibleFieldDOMStructure` is `false`.

* @default `<PickersTextField />`, or `<TextField />` from '@mui/material' if `enableAccessibleFieldDOMStructure` is `false`.

The @default is already inside a code block in the doc so adding backticks won't help 👍

github-actions · 2024-11-28T13:54:30Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

…erState

…mui#15510)

flaviendelangle added the breaking change label Nov 20, 2024

flaviendelangle self-assigned this Nov 20, 2024

flaviendelangle mentioned this pull request Nov 20, 2024

[pickers] Simplify the ownerState on every slot to only pass a small object with valuable information #14475

Open

72 tasks

flaviendelangle force-pushed the field-ownerState branch from df964b8 to 97bda6f Compare November 20, 2024 14:02

flaviendelangle force-pushed the field-ownerState branch from 97bda6f to 41f8e02 Compare November 20, 2024 14:06

flaviendelangle commented Nov 20, 2024

View reviewed changes

flaviendelangle mentioned this pull request Nov 20, 2024

[pickers] POC: Use the new managers for the multi input range fields #15505

Draft

6 tasks

Use the new ownerState object in all the field components

826d3d9

flaviendelangle force-pushed the field-ownerState branch from 41f8e02 to 826d3d9 Compare November 20, 2024 14:23

flaviendelangle commented Nov 20, 2024

View reviewed changes

flaviendelangle requested review from michelengelen and arthurbalduini November 20, 2024 14:39

flaviendelangle marked this pull request as ready for review November 22, 2024 08:21

flaviendelangle added the component: pickers This is the name of the generic UI component, not the React module! label Nov 22, 2024

flaviendelangle requested a review from noraleonte November 25, 2024 12:06

Merge branch 'master' into field-ownerState

e8c3f57

michelengelen approved these changes Nov 28, 2024

View reviewed changes

Merge branch 'master' into field-ownerState

376431d

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Nov 28, 2024

Merge

1bffea5

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Nov 28, 2024

flaviendelangle force-pushed the field-ownerState branch from 381f7bd to 9633546 Compare November 28, 2024 14:11

Merge remote-tracking branch 'origin/field-ownerState' into field-own…

c1cb6a6

…erState

flaviendelangle force-pushed the field-ownerState branch from 9633546 to c1cb6a6 Compare November 28, 2024 14:19

Merge branch 'master' into field-ownerState

262ff3a

flaviendelangle merged commit 511ad9f into mui:master Nov 28, 2024
18 checks passed

flaviendelangle deleted the field-ownerState branch November 28, 2024 14:41

LukasTy pushed a commit to LukasTy/mui-x that referenced this pull request Dec 19, 2024

[pickers] Use the new ownerState object in all the field components (…

c7e1aad

…mui#15510)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[pickers] Use the new `ownerState` object in all the field components #15510

[pickers] Use the new `ownerState` object in all the field components #15510

flaviendelangle commented Nov 20, 2024 •

edited by noraleonte

Loading

mui-bot commented Nov 20, 2024 •

edited

Loading

flaviendelangle Nov 20, 2024 •

edited

Loading

flaviendelangle Nov 20, 2024

flaviendelangle Nov 20, 2024

michelengelen left a comment

michelengelen Nov 28, 2024

flaviendelangle Nov 28, 2024

github-actions bot commented Nov 28, 2024

		@@ -117,6 +118,17 @@ export interface FieldRef<TSection extends FieldSection> {

		export type FieldSelectedSections = number \| FieldSectionType \| null \| 'all';

		export interface FieldOwnerState extends PickerOwnerState {

	* @default <PickersTextField />, or <TextField /> from '@mui/material' if `enableAccessibleFieldDOMStructure` is `false`.
	* @default `<PickersTextField />`, or `<TextField />` from '@mui/material' if `enableAccessibleFieldDOMStructure` is `false`.

[pickers] Use the new ownerState object in all the field components #15510

[pickers] Use the new ownerState object in all the field components #15510

Conversation

flaviendelangle commented Nov 20, 2024 • edited by noraleonte Loading

mui-bot commented Nov 20, 2024 • edited Loading

flaviendelangle Nov 20, 2024 • edited Loading

Choose a reason for hiding this comment

flaviendelangle Nov 20, 2024

Choose a reason for hiding this comment

flaviendelangle Nov 20, 2024

Choose a reason for hiding this comment

michelengelen left a comment

Choose a reason for hiding this comment

michelengelen Nov 28, 2024

Choose a reason for hiding this comment

flaviendelangle Nov 28, 2024

Choose a reason for hiding this comment

github-actions bot commented Nov 28, 2024

[pickers] Use the new `ownerState` object in all the field components #15510

[pickers] Use the new `ownerState` object in all the field components #15510

flaviendelangle commented Nov 20, 2024 •

edited by noraleonte

Loading

mui-bot commented Nov 20, 2024 •

edited

Loading

flaviendelangle Nov 20, 2024 •

edited

Loading