Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[pickers] Use context to pass props from the picker to the field #16042

Merged
merged 30 commits into from
Jan 10, 2025
Merged

[pickers] Use context to pass props from the picker to the field #16042

Show file tree
Hide file tree
Changes from 18 commits
Commits
Show all changes
30 commits
Select commit Hold shift + click to select a range
83743e0
[pickers] Use context to pass props specific to our field editing beh…
flaviendelangle Dec 31, 2024
4303c75
Work
flaviendelangle Dec 31, 2024
906898c
Work
flaviendelangle Dec 31, 2024
260a81f
Work
flaviendelangle Dec 31, 2024
989a7e0
Work
flaviendelangle Dec 31, 2024
e9c445c
Merge
flaviendelangle Dec 31, 2024
0a50784
Work
flaviendelangle Dec 31, 2024
8f37c13
Merge branch 'master' into field-private-context
flaviendelangle Dec 31, 2024
1ceccb3
Work on docs demos
flaviendelangle Dec 31, 2024
efbb258
Fix
flaviendelangle Dec 31, 2024
33c5732
Fix
flaviendelangle Dec 31, 2024
63e4790
Add migration guide
flaviendelangle Jan 1, 2025
6aefd00
Improve migration guide
flaviendelangle Jan 1, 2025
a409727
Merge branch 'master' into field-private-context
flaviendelangle Jan 3, 2025
6f0b3e3
Clean
flaviendelangle Jan 3, 2025
8af35a8
Work
flaviendelangle Jan 3, 2025
4eb649e
Work
flaviendelangle Jan 3, 2025
568eb95
Work
flaviendelangle Jan 3, 2025
07c83ab
Review: Michel
flaviendelangle Jan 7, 2025
859a203
Merge
flaviendelangle Jan 7, 2025
662eae7
Review: Michel
flaviendelangle Jan 7, 2025
eadb941
Merge
flaviendelangle Jan 7, 2025
9e84a0e
Fix
flaviendelangle Jan 7, 2025
9ad600b
Update docs/data/migration/migration-pickers-v7/migration-pickers-v7.md
flaviendelangle Jan 8, 2025
a63741c
Update docs/data/migration/migration-pickers-v7/migration-pickers-v7.md
flaviendelangle Jan 8, 2025
2e02b2f
Merge branch 'master' into field-private-context
flaviendelangle Jan 9, 2025
50c3e38
Merge remote-tracking branch 'origin/field-private-context' into fiel…
flaviendelangle Jan 9, 2025
c264e4b
Revert
flaviendelangle Jan 9, 2025
2a6bf27
Fix
flaviendelangle Jan 9, 2025
1eb5669
Merge branch 'master' into field-private-context
flaviendelangle Jan 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 7 additions & 6 deletions docs/data/date-pickers/calendar-systems/AdapterHijri.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,6 @@ const cacheRtl = createCache({

function ButtonDateTimeField(props) {
const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date');
const { value, timezone, format } = internalProps;
const {
InputProps,
slotProps,
Expand All @@ -37,16 +36,18 @@ function ButtonDateTimeField(props) {
} = forwardedProps;

const pickerContext = usePickerContext();

const parsedFormat = useParsedFormat(internalProps);
const parsedFormat = useParsedFormat();
const { hasValidationError } = useValidation({
validator: validateDate,
value,
timezone,
value: pickerContext.value,
timezone: pickerContext.timezone,
props: internalProps,
});

const valueStr = value == null ? parsedFormat : value.format(format);
const valueStr =
pickerContext.value == null
? parsedFormat
: pickerContext.value.format(pickerContext.fieldFormat);

return (
<Button
Expand Down
13 changes: 7 additions & 6 deletions docs/data/date-pickers/calendar-systems/AdapterHijri.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@ const cacheRtl = createCache({

function ButtonDateTimeField(props: DateTimePickerFieldProps) {
const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date');
const { value, timezone, format } = internalProps;
const {
InputProps,
slotProps,
Expand All @@ -41,16 +40,18 @@ function ButtonDateTimeField(props: DateTimePickerFieldProps) {
} = forwardedProps;

const pickerContext = usePickerContext();

const parsedFormat = useParsedFormat(internalProps);
const parsedFormat = useParsedFormat();
const { hasValidationError } = useValidation({
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We would now be able to make value and timezone optional and read it from the context by default. Same with the validation props in the future.

But I would like to take the time to think this API correctly before doing anything.

validator: validateDate,
value,
timezone,
value: pickerContext.value,
timezone: pickerContext.timezone,
props: internalProps,
});

const valueStr = value == null ? parsedFormat : value.format(format);
const valueStr =
pickerContext.value == null
? parsedFormat
: pickerContext.value.format(pickerContext.fieldFormat);

return (
<Button
Expand Down
12 changes: 0 additions & 12 deletions docs/data/date-pickers/custom-field/BrowserV7MultiInputRangeField.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,18 +80,12 @@ const BrowserTextField = React.forwardRef((props, ref) => {
const BrowserMultiInputDateRangeField = React.forwardRef((props, ref) => {
const {
slotProps,
value,
format,
onChange,
readOnly,
disabled,
shouldDisableDate,
minDate,
maxDate,
disableFuture,
disablePast,
selectedSections,
onSelectedSectionsChange,
className,
unstableStartFieldRef,
unstableEndFieldRef,
Expand All @@ -111,18 +105,12 @@ const BrowserMultiInputDateRangeField = React.forwardRef((props, ref) => {

const fieldResponse = useMultiInputDateRangeField({
sharedProps: {
value,
format,
onChange,
readOnly,
disabled,
shouldDisableDate,
minDate,
maxDate,
disableFuture,
disablePast,
selectedSections,
onSelectedSectionsChange,
enableAccessibleFieldDOMStructure: true,
},
startTextFieldProps,
Expand Down
12 changes: 0 additions & 12 deletions docs/data/date-pickers/custom-field/BrowserV7MultiInputRangeField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,18 +116,12 @@ const BrowserMultiInputDateRangeField = React.forwardRef(
(props: BrowserMultiInputDateRangeFieldProps, ref: React.Ref<HTMLDivElement>) => {
const {
slotProps,
value,
format,
onChange,
readOnly,
disabled,
shouldDisableDate,
minDate,
maxDate,
disableFuture,
disablePast,
selectedSections,
onSelectedSectionsChange,
className,
unstableStartFieldRef,
unstableEndFieldRef,
Expand All @@ -150,18 +144,12 @@ const BrowserMultiInputDateRangeField = React.forwardRef(
MultiInputFieldSlotTextFieldProps
>({
sharedProps: {
value,
format,
onChange,
readOnly,
disabled,
shouldDisableDate,
minDate,
maxDate,
disableFuture,
disablePast,
selectedSections,
onSelectedSectionsChange,
enableAccessibleFieldDOMStructure: true,
},
startTextFieldProps,
Expand Down
6 changes: 2 additions & 4 deletions docs/data/date-pickers/custom-field/JoyV6Field.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,7 @@ import { unstable_useDateField as useDateField } from '@mui/x-date-pickers/DateF
const joyTheme = extendJoyTheme();

const JoyDateField = React.forwardRef((props, ref) => {
const fieldResponse = useDateField({
...props,
enableAccessibleFieldDOMStructure: false,
});
const fieldResponse = useDateField(props);

const {
// Should be ignored
Expand Down Expand Up @@ -64,6 +61,7 @@ const JoyDatePicker = React.forwardRef((props, ref) => {
<DatePicker
ref={ref}
{...props}
enableAccessibleFieldDOMStructure={false}
slots={{ ...props.slots, field: JoyDateField }}
/>
);
Expand Down
6 changes: 2 additions & 4 deletions docs/data/date-pickers/custom-field/JoyV6Field.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,7 @@ const joyTheme = extendJoyTheme();

const JoyDateField = React.forwardRef(
(props: DatePickerFieldProps<false>, ref: React.Ref<HTMLDivElement>) => {
const fieldResponse = useDateField<false, typeof props>({
...props,
enableAccessibleFieldDOMStructure: false,
});
const fieldResponse = useDateField<false, typeof props>(props);

const {
// Should be ignored
Expand Down Expand Up @@ -73,6 +70,7 @@ const JoyDatePicker = React.forwardRef(
<DatePicker
ref={ref}
{...props}
enableAccessibleFieldDOMStructure={false}
slots={{ ...props.slots, field: JoyDateField }}
/>
);
Expand Down
13 changes: 1 addition & 12 deletions docs/data/date-pickers/custom-field/JoyV6MultiInputRangeField.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,18 +104,12 @@ const MultiInputJoyDateRangeFieldSeparator = styled(
const JoyMultiInputDateRangeField = React.forwardRef((props, ref) => {
const {
slotProps,
value,
format,
onChange,
readOnly,
disabled,
shouldDisableDate,
minDate,
maxDate,
disableFuture,
disablePast,
selectedSections,
onSelectedSectionsChange,
className,
unstableStartFieldRef,
unstableEndFieldRef,
Expand All @@ -135,18 +129,12 @@ const JoyMultiInputDateRangeField = React.forwardRef((props, ref) => {

const fieldResponse = useMultiInputDateRangeField({
sharedProps: {
value,
format,
onChange,
readOnly,
disabled,
shouldDisableDate,
minDate,
maxDate,
disableFuture,
disablePast,
selectedSections,
onSelectedSectionsChange,
enableAccessibleFieldDOMStructure: false,
},
startTextFieldProps,
Expand All @@ -169,6 +157,7 @@ const JoyDateRangePicker = React.forwardRef((props, ref) => {
<DateRangePicker
ref={ref}
{...props}
enableAccessibleFieldDOMStructure={false}
slots={{ ...props?.slots, field: JoyMultiInputDateRangeField }}
/>
);
Expand Down
13 changes: 1 addition & 12 deletions docs/data/date-pickers/custom-field/JoyV6MultiInputRangeField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,18 +142,12 @@ const JoyMultiInputDateRangeField = React.forwardRef(
(props: JoyMultiInputDateRangeFieldProps, ref: React.Ref<HTMLDivElement>) => {
const {
slotProps,
value,
format,
onChange,
readOnly,
disabled,
shouldDisableDate,
minDate,
maxDate,
disableFuture,
disablePast,
selectedSections,
onSelectedSectionsChange,
className,
unstableStartFieldRef,
unstableEndFieldRef,
Expand All @@ -176,18 +170,12 @@ const JoyMultiInputDateRangeField = React.forwardRef(
MultiInputFieldSlotTextFieldProps
>({
sharedProps: {
value,
format,
onChange,
readOnly,
disabled,
shouldDisableDate,
minDate,
maxDate,
disableFuture,
disablePast,
selectedSections,
onSelectedSectionsChange,
enableAccessibleFieldDOMStructure: false,
},
startTextFieldProps,
Expand All @@ -212,6 +200,7 @@ const JoyDateRangePicker = React.forwardRef(
<DateRangePicker
ref={ref}
{...props}
enableAccessibleFieldDOMStructure={false}
slots={{ ...props?.slots, field: JoyMultiInputDateRangeField }}
/>
);
Expand Down
6 changes: 2 additions & 4 deletions docs/data/date-pickers/custom-field/JoyV6SingleInputRangeField.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,10 +27,7 @@ export const DateRangeIcon = createSvgIcon(
const joyTheme = extendJoyTheme();

const JoySingleInputDateRangeField = React.forwardRef((props, ref) => {
const fieldResponse = useSingleInputDateRangeField({
...props,
enableAccessibleFieldDOMStructure: false,
});
const fieldResponse = useSingleInputDateRangeField(props);

const {
// Should be ignored
Expand Down Expand Up @@ -78,6 +75,7 @@ const JoySingleInputDateRangePicker = React.forwardRef((props, ref) => {
<DateRangePicker
{...props}
ref={ref}
enableAccessibleFieldDOMStructure={false}
slots={{ ...props.slots, field: JoySingleInputDateRangeField }}
/>
);
Expand Down
6 changes: 2 additions & 4 deletions docs/data/date-pickers/custom-field/JoyV6SingleInputRangeField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,10 +37,7 @@ type JoySingleInputDateRangeFieldComponent = ((

const JoySingleInputDateRangeField = React.forwardRef(
(props: DateRangePickerFieldProps<false>, ref: React.Ref<HTMLDivElement>) => {
const fieldResponse = useSingleInputDateRangeField<false, typeof props>({
...props,
enableAccessibleFieldDOMStructure: false,
});
const fieldResponse = useSingleInputDateRangeField<false, typeof props>(props);

const {
// Should be ignored
Expand Down Expand Up @@ -92,6 +89,7 @@ const JoySingleInputDateRangePicker = React.forwardRef(
<DateRangePicker
{...props}
ref={ref}
enableAccessibleFieldDOMStructure={false}
slots={{ ...props.slots, field: JoySingleInputDateRangeField }}
/>
);
Expand Down
8 changes: 4 additions & 4 deletions docs/data/date-pickers/custom-field/behavior-autocomplete/MaterialDatePicker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,12 @@ import Stack from '@mui/material/Stack';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { useSplitFieldProps } from '@mui/x-date-pickers/hooks';
import { usePickerContext, useSplitFieldProps } from '@mui/x-date-pickers/hooks';
import { useValidation, validateDate } from '@mui/x-date-pickers/validation';

function AutocompleteField(props) {
const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date');
const { value, timezone, onChange } = internalProps;
const { forwardedProps, internalProps } = useSplitFieldProps(props, 'date');
michelengelen marked this conversation as resolved.
Show resolved Hide resolved
const { timezone, value, setValue } = usePickerContext();
const {
InputProps,
slotProps,
Expand Down Expand Up @@ -85,7 +85,7 @@ function AutocompleteField(props) {
}}
value={value}
onChange={(_, newValue) => {
onChange(newValue, {
setValue(newValue, {
validationError: getValidationErrorForNewValue(newValue),
});
}}
Expand Down
8 changes: 4 additions & 4 deletions docs/data/date-pickers/custom-field/behavior-autocomplete/MaterialDatePicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import {
DatePickerFieldProps,
DatePickerProps,
} from '@mui/x-date-pickers/DatePicker';
import { useSplitFieldProps } from '@mui/x-date-pickers/hooks';
import { usePickerContext, useSplitFieldProps } from '@mui/x-date-pickers/hooks';
import { useValidation, validateDate } from '@mui/x-date-pickers/validation';

interface AutocompleteFieldProps extends DatePickerFieldProps {
Expand All @@ -21,8 +21,8 @@ interface AutocompleteFieldProps extends DatePickerFieldProps {
}

function AutocompleteField(props: AutocompleteFieldProps) {
const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date');
const { value, timezone, onChange } = internalProps;
const { forwardedProps, internalProps } = useSplitFieldProps(props, 'date');
const { timezone, value, setValue } = usePickerContext();
const {
InputProps,
slotProps,
Expand Down Expand Up @@ -96,7 +96,7 @@ function AutocompleteField(props: AutocompleteFieldProps) {
}}
value={value}
onChange={(_, newValue) => {
onChange(newValue, {
setValue(newValue, {
validationError: getValidationErrorForNewValue(newValue),
});
}}
Expand Down
13 changes: 7 additions & 6 deletions docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ import {

function ButtonDateField(props) {
const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date');
const { value, timezone, format } = internalProps;
const {
InputProps,
slotProps,
Expand All @@ -25,16 +24,18 @@ function ButtonDateField(props) {
} = forwardedProps;

const pickerContext = usePickerContext();

const parsedFormat = useParsedFormat(internalProps);
const parsedFormat = useParsedFormat();
const { hasValidationError } = useValidation({
validator: validateDate,
value,
timezone,
value: pickerContext.value,
timezone: pickerContext.timezone,
props: internalProps,
});

const valueStr = value == null ? parsedFormat : value.format(format);
const valueStr =
pickerContext.value == null
? parsedFormat
: pickerContext.value.format(pickerContext.fieldFormat);

return (
<Button
Expand Down
Loading
Loading