From dcfddcc97ba8c36d47b9f1d2c50d43b2f36a8ec7 Mon Sep 17 00:00:00 2001 From: delangle Date: Tue, 17 Sep 2024 13:28:42 +0200 Subject: [PATCH 01/18] [fields] Enable the new field DOM structure by default --- .../custom-field/BrowserV6Field.js | 90 ------ .../custom-field/BrowserV6Field.tsx | 135 --------- .../custom-field/BrowserV6Field.tsx.preview | 5 - .../BrowserV6MultiInputRangeField.js | 140 ---------- .../BrowserV6MultiInputRangeField.tsx | 196 ------------- .../BrowserV6MultiInputRangeField.tsx.preview | 1 - .../BrowserV6SingleInputRangeField.js | 137 --------- .../BrowserV6SingleInputRangeField.tsx | 196 ------------- ...BrowserV6SingleInputRangeField.tsx.preview | 5 - .../custom-field/MaterialV6Field.js | 4 +- .../custom-field/MaterialV6Field.tsx | 4 +- .../custom-field/MaterialV6Field.tsx.preview | 4 +- .../custom-field/MaterialV6FieldWrapped.js | 22 -- .../custom-field/MaterialV6FieldWrapped.tsx | 24 -- .../MaterialV6FieldWrapped.tsx.preview | 2 - .../custom-field/MaterialV7Field.js | 17 -- .../custom-field/MaterialV7Field.tsx | 17 -- .../custom-field/MaterialV7Field.tsx.preview | 2 - .../PickerWithAutocompleteField.tsx | 4 +- .../custom-field/PickerWithButtonField.tsx | 4 +- .../date-pickers/custom-field/custom-field.md | 81 ++---- docs/data/date-pickers/fields/fields.md | 195 ------------- .../migration-pickers-v7.md | 264 ++++++++++++++++++ docs/data/pages.ts | 12 +- .../pages/x/migration/migration-pickers-v7.js | 7 + .../src/DateRangePicker/DateRangePicker.tsx | 4 +- .../DateTimeRangePicker.tsx | 4 +- .../DesktopDateRangePicker.tsx | 4 +- .../DesktopDateTimeRangePicker.tsx | 4 +- .../MobileDateRangePicker.tsx | 4 +- .../MobileDateTimeRangePicker.tsx | 4 +- .../MultiInputDateRangeField.tsx | 6 +- .../MultiInputDateRangeField.types.ts | 2 +- .../MultiInputDateTimeRangeField.tsx | 6 +- .../MultiInputDateTimeRangeField.types.ts | 2 +- .../MultiInputTimeRangeField.tsx | 6 +- .../MultiInputTimeRangeField.types.ts | 2 +- .../SingleInputDateRangeField.tsx | 6 +- .../SingleInputDateRangeField.types.ts | 2 +- .../SingleInputDateTimeRangeField.tsx | 6 +- .../SingleInputDateTimeRangeField.types.ts | 2 +- .../SingleInputTimeRangeField.tsx | 6 +- .../SingleInputTimeRangeField.types.ts | 2 +- .../src/DateField/DateField.tsx | 6 +- .../src/DateField/DateField.types.ts | 2 +- .../src/DatePicker/DatePicker.tsx | 4 +- .../src/DatePicker/DatePicker.types.ts | 2 +- .../src/DateTimeField/DateTimeField.tsx | 6 +- .../src/DateTimeField/DateTimeField.types.ts | 2 +- .../src/DateTimePicker/DateTimePicker.tsx | 4 +- .../DateTimePicker/DateTimePicker.types.ts | 2 +- .../DesktopDatePicker/DesktopDatePicker.tsx | 4 +- .../DesktopDatePicker.types.ts | 2 +- .../DesktopDateTimePicker.tsx | 2 +- .../DesktopDateTimePicker.types.ts | 2 +- .../DesktopTimePicker/DesktopTimePicker.tsx | 4 +- .../DesktopTimePicker.types.ts | 2 +- .../src/MobileDatePicker/MobileDatePicker.tsx | 4 +- .../MobileDatePicker.types.ts | 2 +- .../MobileDateTimePicker.tsx | 4 +- .../MobileDateTimePicker.types.ts | 2 +- .../src/MobileTimePicker/MobileTimePicker.tsx | 4 +- .../MobileTimePicker.types.ts | 2 +- .../src/TimeField/TimeField.tsx | 6 +- .../src/TimeField/TimeField.types.ts | 2 +- .../src/TimePicker/TimePicker.tsx | 4 +- .../src/TimePicker/TimePicker.types.ts | 2 +- .../src/internals/hooks/useField/useField.ts | 2 +- .../hooks/useField/useField.types.ts | 2 +- .../internals/hooks/useField/useFieldState.ts | 2 +- 70 files changed, 394 insertions(+), 1328 deletions(-) delete mode 100644 docs/data/date-pickers/custom-field/BrowserV6Field.js delete mode 100644 docs/data/date-pickers/custom-field/BrowserV6Field.tsx delete mode 100644 docs/data/date-pickers/custom-field/BrowserV6Field.tsx.preview delete mode 100644 docs/data/date-pickers/custom-field/BrowserV6MultiInputRangeField.js delete mode 100644 docs/data/date-pickers/custom-field/BrowserV6MultiInputRangeField.tsx delete mode 100644 docs/data/date-pickers/custom-field/BrowserV6MultiInputRangeField.tsx.preview delete mode 100644 docs/data/date-pickers/custom-field/BrowserV6SingleInputRangeField.js delete mode 100644 docs/data/date-pickers/custom-field/BrowserV6SingleInputRangeField.tsx delete mode 100644 docs/data/date-pickers/custom-field/BrowserV6SingleInputRangeField.tsx.preview delete mode 100644 docs/data/date-pickers/custom-field/MaterialV6FieldWrapped.js delete mode 100644 docs/data/date-pickers/custom-field/MaterialV6FieldWrapped.tsx delete mode 100644 docs/data/date-pickers/custom-field/MaterialV6FieldWrapped.tsx.preview delete mode 100644 docs/data/date-pickers/custom-field/MaterialV7Field.js delete mode 100644 docs/data/date-pickers/custom-field/MaterialV7Field.tsx delete mode 100644 docs/data/date-pickers/custom-field/MaterialV7Field.tsx.preview create mode 100644 docs/data/migration/migration-pickers-v7/migration-pickers-v7.md create mode 100644 docs/pages/x/migration/migration-pickers-v7.js diff --git a/docs/data/date-pickers/custom-field/BrowserV6Field.js b/docs/data/date-pickers/custom-field/BrowserV6Field.js deleted file mode 100644 index 63be3f56e884..000000000000 --- a/docs/data/date-pickers/custom-field/BrowserV6Field.js +++ /dev/null @@ -1,90 +0,0 @@ -import * as React from 'react'; - -import { unstable_useForkRef as useForkRef } from '@mui/utils'; -import Box from '@mui/material/Box'; -import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; -import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; -import { DatePicker } from '@mui/x-date-pickers/DatePicker'; -import { unstable_useDateField as useDateField } from '@mui/x-date-pickers/DateField'; -import { useClearableField } from '@mui/x-date-pickers/hooks'; - -const BrowserField = React.forwardRef((props, ref) => { - const { - // Should be ignored - enableAccessibleFieldDOMStructure, - disabled, - id, - label, - inputRef, - InputProps: { ref: containerRef, startAdornment, endAdornment } = {}, - // extracting `error`, 'focused', and `ownerState` as `input` does not support those props - error, - focused, - ownerState, - sx, - ...other - } = props; - - const handleRef = useForkRef(containerRef, ref); - - return ( - - {startAdornment} - - {endAdornment} - - ); -}); - -const BrowserDateField = React.forwardRef((props, ref) => { - const { slots, slotProps, ...textFieldProps } = props; - - const fieldResponse = useDateField({ - ...textFieldProps, - enableAccessibleFieldDOMStructure: false, - }); - - /* If you don't need a clear button, you can skip the use of this hook */ - const processedFieldProps = useClearableField({ - ...fieldResponse, - slots, - slotProps, - }); - - return ; -}); - -const BrowserDatePicker = React.forwardRef((props, ref) => { - return ( - - ); -}); - -export default function BrowserV6Field() { - return ( - - - - ); -} diff --git a/docs/data/date-pickers/custom-field/BrowserV6Field.tsx b/docs/data/date-pickers/custom-field/BrowserV6Field.tsx deleted file mode 100644 index 49138cd42863..000000000000 --- a/docs/data/date-pickers/custom-field/BrowserV6Field.tsx +++ /dev/null @@ -1,135 +0,0 @@ -import * as React from 'react'; -import { Dayjs } from 'dayjs'; -import { unstable_useForkRef as useForkRef } from '@mui/utils'; -import Box from '@mui/material/Box'; -import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; -import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; -import { DatePicker, DatePickerProps } from '@mui/x-date-pickers/DatePicker'; -import { - unstable_useDateField as useDateField, - UseDateFieldProps, -} from '@mui/x-date-pickers/DateField'; -import { useClearableField } from '@mui/x-date-pickers/hooks'; -import { - BaseSingleInputFieldProps, - DateValidationError, - FieldSection, -} from '@mui/x-date-pickers/models'; - -interface BrowserFieldProps - extends Omit, 'size'> { - label?: React.ReactNode; - inputRef?: React.Ref; - InputProps?: { - ref?: React.Ref; - endAdornment?: React.ReactNode; - startAdornment?: React.ReactNode; - }; - error?: boolean; - focused?: boolean; - ownerState?: any; - sx?: any; - enableAccessibleFieldDOMStructure: boolean; -} - -type BrowserFieldComponent = (( - props: BrowserFieldProps & React.RefAttributes, -) => React.JSX.Element) & { propTypes?: any }; - -const BrowserField = React.forwardRef( - (props: BrowserFieldProps, ref: React.Ref) => { - const { - // Should be ignored - enableAccessibleFieldDOMStructure, - - disabled, - id, - label, - inputRef, - InputProps: { ref: containerRef, startAdornment, endAdornment } = {}, - // extracting `error`, 'focused', and `ownerState` as `input` does not support those props - error, - focused, - ownerState, - sx, - ...other - } = props; - - const handleRef = useForkRef(containerRef, ref); - - return ( - - {startAdornment} - - {endAdornment} - - ); - }, -) as BrowserFieldComponent; - -interface BrowserDateFieldProps - extends UseDateFieldProps, - BaseSingleInputFieldProps< - Dayjs | null, - Dayjs, - FieldSection, - false, - DateValidationError - > {} - -const BrowserDateField = React.forwardRef( - (props: BrowserDateFieldProps, ref: React.Ref) => { - const { slots, slotProps, ...textFieldProps } = props; - - const fieldResponse = useDateField({ - ...textFieldProps, - enableAccessibleFieldDOMStructure: false, - }); - - /* If you don't need a clear button, you can skip the use of this hook */ - const processedFieldProps = useClearableField({ - ...fieldResponse, - slots, - slotProps, - }); - - return ; - }, -); - -const BrowserDatePicker = React.forwardRef( - (props: DatePickerProps, ref: React.Ref) => { - return ( - - ref={ref} - {...props} - slots={{ ...props.slots, field: BrowserDateField }} - /> - ); - }, -); - -export default function BrowserV6Field() { - return ( - - - - ); -} diff --git a/docs/data/date-pickers/custom-field/BrowserV6Field.tsx.preview b/docs/data/date-pickers/custom-field/BrowserV6Field.tsx.preview deleted file mode 100644 index 0bb9e399d3cb..000000000000 --- a/docs/data/date-pickers/custom-field/BrowserV6Field.tsx.preview +++ /dev/null @@ -1,5 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/date-pickers/custom-field/BrowserV6MultiInputRangeField.js b/docs/data/date-pickers/custom-field/BrowserV6MultiInputRangeField.js deleted file mode 100644 index 5421fd0d4348..000000000000 --- a/docs/data/date-pickers/custom-field/BrowserV6MultiInputRangeField.js +++ /dev/null @@ -1,140 +0,0 @@ -import * as React from 'react'; - -import { unstable_useForkRef as useForkRef } from '@mui/utils'; -import useSlotProps from '@mui/utils/useSlotProps'; -import Box from '@mui/material/Box'; -import Stack from '@mui/material/Stack'; -import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; -import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; -import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker'; -import { unstable_useMultiInputDateRangeField as useMultiInputDateRangeField } from '@mui/x-date-pickers-pro/MultiInputDateRangeField'; - -const BrowserField = React.forwardRef((props, ref) => { - const { - // Should be ignored - enableAccessibleFieldDOMStructure, - disabled, - id, - label, - inputRef, - InputProps: { ref: containerRef, startAdornment, endAdornment } = {}, - // extracting `error`, 'focused', and `ownerState` as `input` does not support those props - error, - focused, - ownerState, - sx, - ...other - } = props; - - const handleRef = useForkRef(containerRef, ref); - - return ( - - {startAdornment} - - {endAdornment} - - ); -}); - -const BrowserMultiInputDateRangeField = React.forwardRef((props, ref) => { - const { - slotProps, - value, - defaultValue, - format, - onChange, - readOnly, - disabled, - onError, - shouldDisableDate, - minDate, - maxDate, - disableFuture, - disablePast, - selectedSections, - onSelectedSectionsChange, - className, - unstableStartFieldRef, - unstableEndFieldRef, - } = props; - - const startTextFieldProps = useSlotProps({ - elementType: 'input', - externalSlotProps: slotProps?.textField, - ownerState: { ...props, position: 'start' }, - }); - - const endTextFieldProps = useSlotProps({ - elementType: 'input', - externalSlotProps: slotProps?.textField, - ownerState: { ...props, position: 'end' }, - }); - - const fieldResponse = useMultiInputDateRangeField({ - sharedProps: { - value, - defaultValue, - format, - onChange, - readOnly, - disabled, - onError, - shouldDisableDate, - minDate, - maxDate, - disableFuture, - disablePast, - selectedSections, - onSelectedSectionsChange, - enableAccessibleFieldDOMStructure: false, - }, - startTextFieldProps, - endTextFieldProps, - unstableStartFieldRef, - unstableEndFieldRef, - }); - - return ( - - - — - - - ); -}); - -const BrowserDateRangePicker = React.forwardRef((props, ref) => { - return ( - - ); -}); - -export default function BrowserV6MultiInputRangeField() { - return ( - - - - ); -} diff --git a/docs/data/date-pickers/custom-field/BrowserV6MultiInputRangeField.tsx b/docs/data/date-pickers/custom-field/BrowserV6MultiInputRangeField.tsx deleted file mode 100644 index b52029d14cde..000000000000 --- a/docs/data/date-pickers/custom-field/BrowserV6MultiInputRangeField.tsx +++ /dev/null @@ -1,196 +0,0 @@ -import * as React from 'react'; -import { Dayjs } from 'dayjs'; -import { unstable_useForkRef as useForkRef } from '@mui/utils'; -import useSlotProps from '@mui/utils/useSlotProps'; -import Box from '@mui/material/Box'; -import Stack from '@mui/material/Stack'; -import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; -import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; -import { - DateRangePicker, - DateRangePickerProps, -} from '@mui/x-date-pickers-pro/DateRangePicker'; -import { unstable_useMultiInputDateRangeField as useMultiInputDateRangeField } from '@mui/x-date-pickers-pro/MultiInputDateRangeField'; -import { - BaseMultiInputFieldProps, - DateRange, - DateRangeValidationError, - MultiInputFieldSlotTextFieldProps, - RangeFieldSection, - UseDateRangeFieldProps, -} from '@mui/x-date-pickers-pro/models'; - -interface BrowserFieldProps - extends Omit, 'size'> { - label?: React.ReactNode; - inputRef?: React.Ref; - InputProps?: { - ref?: React.Ref; - endAdornment?: React.ReactNode; - startAdornment?: React.ReactNode; - }; - error?: boolean; - focused?: boolean; - ownerState?: any; - sx?: any; - enableAccessibleFieldDOMStructure: boolean; -} - -type BrowserFieldComponent = (( - props: BrowserFieldProps & React.RefAttributes, -) => React.JSX.Element) & { propTypes?: any }; - -const BrowserField = React.forwardRef( - (props: BrowserFieldProps, ref: React.Ref) => { - const { - // Should be ignored - enableAccessibleFieldDOMStructure, - - disabled, - id, - label, - inputRef, - InputProps: { ref: containerRef, startAdornment, endAdornment } = {}, - // extracting `error`, 'focused', and `ownerState` as `input` does not support those props - error, - focused, - ownerState, - sx, - ...other - } = props; - - const handleRef = useForkRef(containerRef, ref); - - return ( - - {startAdornment} - - {endAdornment} - - ); - }, -) as BrowserFieldComponent; - -interface BrowserMultiInputDateRangeFieldProps - extends UseDateRangeFieldProps, - BaseMultiInputFieldProps< - DateRange, - Dayjs, - RangeFieldSection, - false, - DateRangeValidationError - > {} - -type BrowserMultiInputDateRangeFieldComponent = (( - props: BrowserMultiInputDateRangeFieldProps & React.RefAttributes, -) => React.JSX.Element) & { propTypes?: any }; - -const BrowserMultiInputDateRangeField = React.forwardRef( - (props: BrowserMultiInputDateRangeFieldProps, ref: React.Ref) => { - const { - slotProps, - value, - defaultValue, - format, - onChange, - readOnly, - disabled, - onError, - shouldDisableDate, - minDate, - maxDate, - disableFuture, - disablePast, - selectedSections, - onSelectedSectionsChange, - className, - unstableStartFieldRef, - unstableEndFieldRef, - } = props; - - const startTextFieldProps = useSlotProps({ - elementType: 'input', - externalSlotProps: slotProps?.textField, - ownerState: { ...props, position: 'start' }, - }) as MultiInputFieldSlotTextFieldProps; - - const endTextFieldProps = useSlotProps({ - elementType: 'input', - externalSlotProps: slotProps?.textField, - ownerState: { ...props, position: 'end' }, - }) as MultiInputFieldSlotTextFieldProps; - - const fieldResponse = useMultiInputDateRangeField< - Dayjs, - false, - MultiInputFieldSlotTextFieldProps - >({ - sharedProps: { - value, - defaultValue, - format, - onChange, - readOnly, - disabled, - onError, - shouldDisableDate, - minDate, - maxDate, - disableFuture, - disablePast, - selectedSections, - onSelectedSectionsChange, - enableAccessibleFieldDOMStructure: false, - }, - startTextFieldProps, - endTextFieldProps, - unstableStartFieldRef, - unstableEndFieldRef, - }); - - return ( - - - — - - - ); - }, -) as BrowserMultiInputDateRangeFieldComponent; - -const BrowserDateRangePicker = React.forwardRef( - (props: DateRangePickerProps, ref: React.Ref) => { - return ( - - ); - }, -); - -export default function BrowserV6MultiInputRangeField() { - return ( - - - - ); -} diff --git a/docs/data/date-pickers/custom-field/BrowserV6MultiInputRangeField.tsx.preview b/docs/data/date-pickers/custom-field/BrowserV6MultiInputRangeField.tsx.preview deleted file mode 100644 index d797406fa999..000000000000 --- a/docs/data/date-pickers/custom-field/BrowserV6MultiInputRangeField.tsx.preview +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/date-pickers/custom-field/BrowserV6SingleInputRangeField.js b/docs/data/date-pickers/custom-field/BrowserV6SingleInputRangeField.js deleted file mode 100644 index 311029bbc6fa..000000000000 --- a/docs/data/date-pickers/custom-field/BrowserV6SingleInputRangeField.js +++ /dev/null @@ -1,137 +0,0 @@ -import * as React from 'react'; - -import { unstable_useForkRef as useForkRef } from '@mui/utils'; -import useSlotProps from '@mui/utils/useSlotProps'; -import Box from '@mui/material/Box'; -import IconButton from '@mui/material/IconButton'; -import InputAdornment from '@mui/material/InputAdornment'; -import { DateRangeIcon } from '@mui/x-date-pickers/icons'; -import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; -import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; -import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker'; -import { unstable_useSingleInputDateRangeField as useSingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField'; -import { useClearableField } from '@mui/x-date-pickers/hooks'; - -const BrowserField = React.forwardRef((props, ref) => { - const { - // Should be ignored - enableAccessibleFieldDOMStructure, - disabled, - id, - label, - inputRef, - InputProps: { ref: containerRef, startAdornment, endAdornment } = {}, - // extracting `error`, 'focused', and `ownerState` as `input` does not support those props - error, - focused, - ownerState, - sx, - ...other - } = props; - - const handleRef = useForkRef(containerRef, ref); - - return ( - - {startAdornment} - - {endAdornment} - - ); -}); - -const BrowserSingleInputDateRangeField = React.forwardRef((props, ref) => { - const { slots, slotProps, onAdornmentClick, ...other } = props; - - const textFieldProps = useSlotProps({ - elementType: 'input', - externalSlotProps: slotProps?.textField, - externalForwardedProps: other, - ownerState: props, - }); - - textFieldProps.InputProps = { - ...textFieldProps.InputProps, - endAdornment: ( - - - - - - ), - }; - - const fieldResponse = useSingleInputDateRangeField({ - ...textFieldProps, - enableAccessibleFieldDOMStructure: false, - }); - - /* If you don't need a clear button, you can skip the use of this hook */ - const processedFieldProps = useClearableField({ - ...fieldResponse, - slots, - slotProps, - }); - - return ( - - ); -}); - -BrowserSingleInputDateRangeField.fieldType = 'single-input'; - -const BrowserSingleInputDateRangePicker = React.forwardRef((props, ref) => { - const [isOpen, setIsOpen] = React.useState(false); - - const toggleOpen = () => setIsOpen((currentOpen) => !currentOpen); - - const handleOpen = () => setIsOpen(true); - - const handleClose = () => setIsOpen(false); - - return ( - - ); -}); - -export default function BrowserV6SingleInputRangeField() { - return ( - - - - ); -} diff --git a/docs/data/date-pickers/custom-field/BrowserV6SingleInputRangeField.tsx b/docs/data/date-pickers/custom-field/BrowserV6SingleInputRangeField.tsx deleted file mode 100644 index 6db84b3f6c57..000000000000 --- a/docs/data/date-pickers/custom-field/BrowserV6SingleInputRangeField.tsx +++ /dev/null @@ -1,196 +0,0 @@ -import * as React from 'react'; -import { Dayjs } from 'dayjs'; -import { unstable_useForkRef as useForkRef } from '@mui/utils'; -import useSlotProps from '@mui/utils/useSlotProps'; -import Box from '@mui/material/Box'; -import IconButton from '@mui/material/IconButton'; -import InputAdornment from '@mui/material/InputAdornment'; -import { DateRangeIcon } from '@mui/x-date-pickers/icons'; -import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; -import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; -import { - DateRangePicker, - DateRangePickerProps, -} from '@mui/x-date-pickers-pro/DateRangePicker'; -import { - unstable_useSingleInputDateRangeField as useSingleInputDateRangeField, - SingleInputDateRangeFieldProps, - UseSingleInputDateRangeFieldProps, -} from '@mui/x-date-pickers-pro/SingleInputDateRangeField'; -import { useClearableField } from '@mui/x-date-pickers/hooks'; -import { BaseSingleInputFieldProps } from '@mui/x-date-pickers/models'; -import { - DateRangeValidationError, - RangeFieldSection, - DateRange, - FieldType, -} from '@mui/x-date-pickers-pro/models'; - -interface BrowserFieldProps - extends Omit, 'size'> { - label?: React.ReactNode; - inputRef?: React.Ref; - InputProps?: { - ref?: React.Ref; - endAdornment?: React.ReactNode; - startAdornment?: React.ReactNode; - }; - error?: boolean; - focused?: boolean; - ownerState?: any; - sx?: any; - enableAccessibleFieldDOMStructure: boolean; -} - -type BrowserFieldComponent = (( - props: BrowserFieldProps & React.RefAttributes, -) => React.JSX.Element) & { propTypes?: any }; - -const BrowserField = React.forwardRef( - (props: BrowserFieldProps, ref: React.Ref) => { - const { - // Should be ignored - enableAccessibleFieldDOMStructure, - - disabled, - id, - label, - inputRef, - InputProps: { ref: containerRef, startAdornment, endAdornment } = {}, - // extracting `error`, 'focused', and `ownerState` as `input` does not support those props - error, - focused, - ownerState, - sx, - ...other - } = props; - - const handleRef = useForkRef(containerRef, ref); - - return ( - - {startAdornment} - - {endAdornment} - - ); - }, -) as BrowserFieldComponent; - -interface BrowserSingleInputDateRangeFieldProps - extends UseSingleInputDateRangeFieldProps, - BaseSingleInputFieldProps< - DateRange, - Dayjs, - RangeFieldSection, - false, - DateRangeValidationError - > { - onAdornmentClick?: () => void; -} - -type BrowserSingleInputDateRangeFieldComponent = (( - props: BrowserSingleInputDateRangeFieldProps & React.RefAttributes, -) => React.JSX.Element) & { fieldType?: FieldType }; - -const BrowserSingleInputDateRangeField = React.forwardRef( - (props: BrowserSingleInputDateRangeFieldProps, ref: React.Ref) => { - const { slots, slotProps, onAdornmentClick, ...other } = props; - - const textFieldProps: SingleInputDateRangeFieldProps = - useSlotProps({ - elementType: 'input', - externalSlotProps: slotProps?.textField, - externalForwardedProps: other, - ownerState: props as any, - }); - - textFieldProps.InputProps = { - ...textFieldProps.InputProps, - endAdornment: ( - - - - - - ), - }; - - const fieldResponse = useSingleInputDateRangeField< - Dayjs, - false, - typeof textFieldProps - >({ ...textFieldProps, enableAccessibleFieldDOMStructure: false }); - - /* If you don't need a clear button, you can skip the use of this hook */ - const processedFieldProps = useClearableField({ - ...fieldResponse, - slots, - slotProps, - }); - - return ( - - ); - }, -) as BrowserSingleInputDateRangeFieldComponent; - -BrowserSingleInputDateRangeField.fieldType = 'single-input'; - -const BrowserSingleInputDateRangePicker = React.forwardRef( - (props: DateRangePickerProps, ref: React.Ref) => { - const [isOpen, setIsOpen] = React.useState(false); - - const toggleOpen = () => setIsOpen((currentOpen) => !currentOpen); - - const handleOpen = () => setIsOpen(true); - - const handleClose = () => setIsOpen(false); - - return ( - - ); - }, -); - -export default function BrowserV6SingleInputRangeField() { - return ( - - - - ); -} diff --git a/docs/data/date-pickers/custom-field/BrowserV6SingleInputRangeField.tsx.preview b/docs/data/date-pickers/custom-field/BrowserV6SingleInputRangeField.tsx.preview deleted file mode 100644 index bcaf8043948f..000000000000 --- a/docs/data/date-pickers/custom-field/BrowserV6SingleInputRangeField.tsx.preview +++ /dev/null @@ -1,5 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/date-pickers/custom-field/MaterialV6Field.js b/docs/data/date-pickers/custom-field/MaterialV6Field.js index 35d4e0ca73ea..98a5d2d58c27 100644 --- a/docs/data/date-pickers/custom-field/MaterialV6Field.js +++ b/docs/data/date-pickers/custom-field/MaterialV6Field.js @@ -9,8 +9,8 @@ export default function MaterialV6Field() { return ( - - + + ); diff --git a/docs/data/date-pickers/custom-field/MaterialV6Field.tsx b/docs/data/date-pickers/custom-field/MaterialV6Field.tsx index 35d4e0ca73ea..98a5d2d58c27 100644 --- a/docs/data/date-pickers/custom-field/MaterialV6Field.tsx +++ b/docs/data/date-pickers/custom-field/MaterialV6Field.tsx @@ -9,8 +9,8 @@ export default function MaterialV6Field() { return ( - - + + ); diff --git a/docs/data/date-pickers/custom-field/MaterialV6Field.tsx.preview b/docs/data/date-pickers/custom-field/MaterialV6Field.tsx.preview index 027cb7beacfa..9041ed886d8b 100644 --- a/docs/data/date-pickers/custom-field/MaterialV6Field.tsx.preview +++ b/docs/data/date-pickers/custom-field/MaterialV6Field.tsx.preview @@ -1,2 +1,2 @@ - - \ No newline at end of file + + \ No newline at end of file diff --git a/docs/data/date-pickers/custom-field/MaterialV6FieldWrapped.js b/docs/data/date-pickers/custom-field/MaterialV6FieldWrapped.js deleted file mode 100644 index df1b5053a745..000000000000 --- a/docs/data/date-pickers/custom-field/MaterialV6FieldWrapped.js +++ /dev/null @@ -1,22 +0,0 @@ -import * as React from 'react'; -import MuiTextField from '@mui/material/TextField'; -import { DemoContainer } from '@mui/x-date-pickers/internals/demo'; -import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; -import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; -import { DateField } from '@mui/x-date-pickers/DateField'; -import { DatePicker } from '@mui/x-date-pickers/DatePicker'; - -const TextField = React.forwardRef((props, ref) => ( - -)); - -export default function MaterialV6FieldWrapped() { - return ( - - - - - - - ); -} diff --git a/docs/data/date-pickers/custom-field/MaterialV6FieldWrapped.tsx b/docs/data/date-pickers/custom-field/MaterialV6FieldWrapped.tsx deleted file mode 100644 index 0c90908a7d4b..000000000000 --- a/docs/data/date-pickers/custom-field/MaterialV6FieldWrapped.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import * as React from 'react'; -import MuiTextField, { TextFieldProps } from '@mui/material/TextField'; -import { DemoContainer } from '@mui/x-date-pickers/internals/demo'; -import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; -import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; -import { DateField } from '@mui/x-date-pickers/DateField'; -import { DatePicker } from '@mui/x-date-pickers/DatePicker'; - -const TextField = React.forwardRef( - (props: TextFieldProps, ref: React.Ref) => ( - - ), -); - -export default function MaterialV6FieldWrapped() { - return ( - - - - - - - ); -} diff --git a/docs/data/date-pickers/custom-field/MaterialV6FieldWrapped.tsx.preview b/docs/data/date-pickers/custom-field/MaterialV6FieldWrapped.tsx.preview deleted file mode 100644 index cd5ff731abbc..000000000000 --- a/docs/data/date-pickers/custom-field/MaterialV6FieldWrapped.tsx.preview +++ /dev/null @@ -1,2 +0,0 @@ - - \ No newline at end of file diff --git a/docs/data/date-pickers/custom-field/MaterialV7Field.js b/docs/data/date-pickers/custom-field/MaterialV7Field.js deleted file mode 100644 index 07ba449750d6..000000000000 --- a/docs/data/date-pickers/custom-field/MaterialV7Field.js +++ /dev/null @@ -1,17 +0,0 @@ -import * as React from 'react'; -import { DemoContainer } from '@mui/x-date-pickers/internals/demo'; -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 { DateField } from '@mui/x-date-pickers/DateField'; - -export default function MaterialV7Field() { - return ( - - - - - - - ); -} diff --git a/docs/data/date-pickers/custom-field/MaterialV7Field.tsx b/docs/data/date-pickers/custom-field/MaterialV7Field.tsx deleted file mode 100644 index 07ba449750d6..000000000000 --- a/docs/data/date-pickers/custom-field/MaterialV7Field.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import * as React from 'react'; -import { DemoContainer } from '@mui/x-date-pickers/internals/demo'; -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 { DateField } from '@mui/x-date-pickers/DateField'; - -export default function MaterialV7Field() { - return ( - - - - - - - ); -} diff --git a/docs/data/date-pickers/custom-field/MaterialV7Field.tsx.preview b/docs/data/date-pickers/custom-field/MaterialV7Field.tsx.preview deleted file mode 100644 index 9708ed359729..000000000000 --- a/docs/data/date-pickers/custom-field/MaterialV7Field.tsx.preview +++ /dev/null @@ -1,2 +0,0 @@ - - \ No newline at end of file diff --git a/docs/data/date-pickers/custom-field/PickerWithAutocompleteField.tsx b/docs/data/date-pickers/custom-field/PickerWithAutocompleteField.tsx index 1aac33d076c0..92e99e278e87 100644 --- a/docs/data/date-pickers/custom-field/PickerWithAutocompleteField.tsx +++ b/docs/data/date-pickers/custom-field/PickerWithAutocompleteField.tsx @@ -14,12 +14,12 @@ import { } from '@mui/x-date-pickers/models'; interface AutoCompleteFieldProps - extends UseDateFieldProps, + extends UseDateFieldProps, BaseSingleInputFieldProps< Dayjs | null, Dayjs, FieldSection, - false, + true, DateValidationError > { /** diff --git a/docs/data/date-pickers/custom-field/PickerWithButtonField.tsx b/docs/data/date-pickers/custom-field/PickerWithButtonField.tsx index aa09717fb29c..8acbab77d7c4 100644 --- a/docs/data/date-pickers/custom-field/PickerWithButtonField.tsx +++ b/docs/data/date-pickers/custom-field/PickerWithButtonField.tsx @@ -12,12 +12,12 @@ import { } from '@mui/x-date-pickers/models'; interface ButtonFieldProps - extends UseDateFieldProps, + extends UseDateFieldProps, BaseSingleInputFieldProps< Dayjs | null, Dayjs, FieldSection, - false, + true, DateValidationError > { setOpen?: React.Dispatch>; diff --git a/docs/data/date-pickers/custom-field/custom-field.md b/docs/data/date-pickers/custom-field/custom-field.md index b58ea51d833f..919acf7aa0f2 100644 --- a/docs/data/date-pickers/custom-field/custom-field.md +++ b/docs/data/date-pickers/custom-field/custom-field.md @@ -66,90 +66,59 @@ Setting `formatDensity` to `"spacious"` will add a space before and after each ` {{"demo": "FieldFormatDensity.js"}} -## Usage with Material UI +## With Material UI -### Using Material `TextField` +### Wrapping `PickersTextField` -You can import the `TextField` component to create custom wrappers: +You can import the `PickersTextField` component to create custom wrappers: -{{"demo": "MaterialV6FieldWrapped.js"}} +{{"demo": "MaterialV7FieldWrapped.js"}} :::success -This approach is only recommended if you need complex customizations on your `TextField`, -or if you already have a wrapper also used outside the Date and Time Pickers. +This approach is only recommended if you need complex customizations on your `PickersTextField`. If you just need to set some default props, you can use [the `slotProps` prop](/x/react-date-pickers/custom-field/#customize-the-textfield). ::: -### Using Material `PickersTextField` +### Using Material `TextField` -Pass the `enableAccessibleFieldDOMStructure` to any Field or Picker component to enable the accessible DOM structure: +Pass the `enableAccessibleFieldDOMStructure={false}` to any Field or Picker component to enable the legacy DOM structure: -{{"demo": "MaterialV7Field.js"}} +{{"demo": "MaterialV6Field.js"}} -:::success -Learn more about the [accessible DOM structure](/x/react-date-pickers/fields/#accessible-dom-structure). -::: +## With another Design System -You can import the `PickersTextField` component to create custom wrappers: +### Using a custom input -{{"demo": "MaterialV7FieldWrapped.js"}} +:::warning +You will need to use a component that supports the `sx` prop as a wrapper for your input +to be able to benefit from the **hover** and **focus** behavior of the clear button. +You will have access to the `clearable` and `onClear` props using native HTML elements, +but the on **focus** and **hover** behavior depends on styles applied via the `sx` prop. +::: -:::success -This approach is only recommended if you need complex customizations on your `PickersTextField`. +{{"demo": "BrowserV7Field.js", "defaultCodeOpen": false}} -If you just need to set some default props, you can use [the `slotProps` prop](/x/react-date-pickers/custom-field/#customize-the-textfield). -::: +{{"demo": "BrowserV7SingleInputRangeField.js", "defaultCodeOpen": false}} -## Usage with Joy UI +{{"demo": "BrowserV7MultiInputRangeField.js", "defaultCodeOpen": false}} -### Using Joy `Input` +### Using Joy UI You can use the [Joy UI](https://mui.com/joy-ui/getting-started/) components instead of the Material UI ones: -:::info -A higher-level solution for _Joy UI_ will be provided in the near future for even simpler usage. -::: - {{"demo": "JoyV6Field.js", "defaultCodeOpen": false}} {{"demo": "JoyV6SingleInputRangeField.js", "defaultCodeOpen": false}} {{"demo": "JoyV6MultiInputRangeField.js", "defaultCodeOpen": false}} -### Using Joy `PickersTextField` - -:::warning -This component is not available yet. -::: - -## Usage with an unstyled input - -### Using the browser input - -{{"demo": "BrowserV6Field.js", "defaultCodeOpen": false}} - -{{"demo": "BrowserV6SingleInputRangeField.js", "defaultCodeOpen": false}} - -{{"demo": "BrowserV6MultiInputRangeField.js", "defaultCodeOpen": false}} - :::warning -You will need to use a component that supports the `sx` prop as a wrapper for your input, in order to be able to benefit from the **hover** and **focus** behavior of the clear button. You will have access to the `clearable` and `onClear` props using native HTML elements, but the on **focus** and **hover** behavior depends on styles applied via the `sx` prop. +All the Joy UI examples use the legacy DOM structure. +The new DOM structure will become compatible with Joy UI in the future. ::: -### Using custom `PickersTextField` - -:::success -Learn more about the accessible DOM structure and its difference compared to the current one on the [dedicated doc section](/x/react-date-pickers/fields/#accessible-dom-structure). -::: - -{{"demo": "BrowserV7Field.js", "defaultCodeOpen": false}} - -{{"demo": "BrowserV7SingleInputRangeField.js", "defaultCodeOpen": false}} - -{{"demo": "BrowserV7MultiInputRangeField.js", "defaultCodeOpen": false}} - -## Usage with another UI +## With a custom editing experience ### Using an `Autocomplete` @@ -182,7 +151,7 @@ interface JoyDateFieldProps Dayjs | null, Dayjs, FieldSection, - false, // `true` for `enableAccessibleFieldDOMStructure` + true, // `false` for `enableAccessibleFieldDOMStructure={false}` DateValidationError > {} // The DOM field props @@ -192,7 +161,7 @@ interface JoyDateTimeFieldProps Dayjs | null, Dayjs, FieldSection, - false, // `true` for `enableAccessibleFieldDOMStructure` + true, // `false` for `enableAccessibleFieldDOMStructure={false}` DateTimeValidationError > {} // The DOM field props ``` diff --git a/docs/data/date-pickers/fields/fields.md b/docs/data/date-pickers/fields/fields.md index 5f54b1411f66..9bd7260fff46 100644 --- a/docs/data/date-pickers/fields/fields.md +++ b/docs/data/date-pickers/fields/fields.md @@ -25,201 +25,6 @@ All fields to edit a range are available in a single input version and in a mult {{"demo": "DateRangeFieldExamples.js", "defaultCodeOpen": false}} -## Accessible DOM structure - -By default, the fields' DOM structure consists of an ``, which holds the whole value for the component, but unfortunately presents a few limitations in terms of accessibility when managing multiple section values. - -From v7 version, you can opt-in for a new and experimental DOM structure on any field or picker component using the `enableAccessibleFieldDOMStructure` prop. - -```tsx - - - -``` - -This new feature allows the field component to set aria attributes on individual sections, providing a far better experience with screen readers. - -{{"demo": "BasicV7DOMStructure.js", "defaultCodeOpen": false }} - -### Usage with `slotProps.field` - -When using `slotProps.field` to pass props to your field component, -the field consumes some props (e.g: `shouldRespectLeadingZeros`) and forwards the rest to the `TextField`. - -- For the props consumed by the field, the behavior should remain exactly the same with both DOM structures. - - Both components below will respect the leading zeroes on digit sections: - - ```js - - - ``` - -- For the props forwarded to the `TextField`, - you can have a look at the next section to see how the migration impact them. - - Both components below will render a small size UI: - - ```js - - - ``` - -### Usage with `slotProps.textField` - -If you are passing props to `slotProps.textField`, -these props will now be received by `PickersTextField` and should keep working the same way as before. - -Both components below will render a small size UI: - -```js - - -``` - -:::info -If you are passing `inputProps` to `slotProps.textField`, -these props will now be passed to the hidden `` element. -::: - -### Usage with `slots.field` - -If you are passing a custom field component to your pickers, you need to create a new one that is using the accessible DOM structure. -This new component will need to use the `PickersSectionList` component instead of an `` HTML element. - -You can have a look at the [custom PickersTextField](/x/react-date-pickers/custom-field/#using-custom-pickerstextfield) to have a concrete example. - -:::info -If your custom field was used to create a Joy UI design component, -you may want to wait a few weeks for the release of an out-of-the-box Joy `PickersTextField` component instead of implementing it yourself. -::: - -### Usage with `slots.textField` - -If you are passing a custom `TextField` component to your fields and pickers, -you need to create a new one that is using the accessible DOM structure. - -You can have a look at the second demo of the [Material PickersTextField section](/x/react-date-pickers/custom-field/#using-material-pickerstextfield) to have a concrete example. - -:::info -If your custom `TextField` was used to apply a totally different input that did not use `@mui/material/TextField`, -please consider having a look at the [custom PickersTextField](/x/react-date-pickers/custom-field/#using-custom-pickerstextfield) section which uses `slots.field`. -This approach can be more appropriate for deeper changes. -::: - -### Usage with theme - -If you are using the theme to customize `MuiTextField`, -you need to pass the same config to `MuiPickersTextField`: - -```js -const theme = createTheme({ - components: { - MuiTextField: { - defaultProps: { - variant: 'outlined', - }, - styleOverrides: { - root: { - '& .MuiInputLabel-outlined.Mui-focused': { - color: 'red', - }, - }, - }, - }, - MuiPickersTextField: { - defaultProps: { - variant: 'outlined', - }, - styleOverrides: { - root: { - '& .MuiInputLabel-outlined.Mui-focused': { - color: 'red', - }, - }, - }, - }, - }, -}); -``` - -If you are using the theme to customize `MuiInput`, `MuiOutlinedInput` or `MuiFilledInput`, -you need to pass the same config to `MuiPickersInput`, `MuiPickersOutlinedInput` or `MuiPickersFilledInput`: - -```js -const theme = createTheme({ - components: { - // Replace with `MuiOutlinedInput` or `MuiFilledInput` if needed - MuiInput: { - defaultProps: { - margin: 'dense', - }, - styleOverrides: { - root: { - color: 'red', - }, - }, - }, - // Replace with `MuiPickersOutlinedInput` or `MuiPickersFilledInput` if needed - MuiPickersInput: { - defaultProps: { - margin: 'dense', - }, - styleOverrides: { - root: { - color: 'red', - }, - }, - }, - }, -}); -``` - -If you are using the theme to customize `MuiInputBase`, -you need to pass the same config to `MuiPickersInputBase`: - -```js -const theme = createTheme({ - components: { - MuiInputBase: { - defaultProps: { - margin: 'dense', - }, - styleOverrides: { - root: { - color: 'red', - }, - }, - }, - MuiPickersInputBase: { - defaultProps: { - margin: 'dense', - }, - styleOverrides: { - root: { - color: 'red', - }, - }, - }, - }, -}); -``` - ## Advanced ### What is a section? diff --git a/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md b/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md new file mode 100644 index 000000000000..0908e7f83b21 --- /dev/null +++ b/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md @@ -0,0 +1,264 @@ +--- +productId: x-date-pickers +--- + +# Migration from v7 to v8 + +

This guide describes the changes needed to migrate the Date and Time Pickers from v6 to v7.

+ +## Introduction + +This is a reference guide for upgrading `@mui/x-date-pickers` from v6 to v7. +To read more about the changes from the new major, check out [the blog post about the release of MUI X v7](https://mui.com/blog/mui-x-v7-beta/). + +## Start using the new release + +In `package.json`, change the version of the date pickers package to `^8.0.0`. + +```diff +-"@mui/x-date-pickers": "7.x.x", ++"@mui/x-date-pickers": "^8.0.0", +``` + +Since `v8` is a major release, it contains changes that affect the public API. +These changes were done for consistency, improved stability and to make room for new features. +Described below are the steps needed to migrate from v6 to v7. + +## Run codemods + +The `preset-safe` codemod will automatically adjust the bulk of your code to account for breaking changes in v8. You can run `v8.0.0/pickers/preset-safe` targeting only Date and Time Pickers or `v8.0.0/preset-safe` to target the other packages as well. + +You can either run it on a specific file, folder, or your entire codebase when choosing the `` argument. + + + +```bash +// Date and Time Pickers specific +npx @mui/x-codemod@latest v8.0.0/pickers/preset-safe + +// Target the other packages as well +npx @mui/x-codemod@latest v8.0.0/preset-safe +``` + +:::info +If you want to run the transformers one by one, check out the transformers included in the [preset-safe codemod for pickers](https://github.com/mui/mui-x/blob/HEAD/packages/x-codemod/README.md#preset-safe-for-pickers-v800) for more details. +::: + +Breaking changes that are handled by this codemod are denoted by a ✅ emoji in the table of contents on the right side of the screen. + +If you have already applied the `v8.0.0/pickers/preset-safe` (or `v8.0.0/preset-safe`) codemod, then you should not need to take any further action on these items. + +All other changes must be handled manually. + +:::warning +Not all use cases are covered by codemods. In some scenarios, like props spreading, cross-file dependencies, etc., the changes are not properly identified and therefore must be handled manually. + +For example, if a codemod tries to rename a prop, but this prop is hidden with the spread operator, it won't be transformed as expected. + +```tsx + +``` + +After running the codemods, make sure to test your application and that you don't have any console errors. + +Feel free to [open an issue](https://github.com/mui/mui-x/issues/new/choose) for support if you need help to proceed with your migration. +::: + +## Breaking changes + +Since v7 is a major release, it contains some changes that affect the public API. +These changes were done for consistency, improve stability and make room for new features. + +### New DOM structure for the field + +Before v8, the fields' DOM structure consisted of an ``, which held the whole value for the component, +but unfortunately presents a few limitations in terms of accessibility when managing multiple section values. + +From v8 version, all the field and picker components come with a new DOM structure that allows the field component to set aria attributes on individual sections, providing a far better experience with screen readers. + +### Fallback to legacy DOM structure + +```tsx + + + +``` + +### Migrate `slotProps.field` + +When using `slotProps.field` to pass props to your field component, +the field consumes some props (e.g: `shouldRespectLeadingZeros`) and forwards the rest to the `TextField`. + +- For the props consumed by the field, the behavior should remain exactly the same with both DOM structures. + + Both components below will respect the leading zeroes on digit sections: + + ```js + + + ``` + +- For the props forwarded to the `TextField`, + you can have a look at the next section to see how the migration impact them. + + Both components below will render a small size UI: + + ```js + + + ``` + +### Migrate `slotProps.textField` + +If you are passing props to `slotProps.textField`, +these props will now be received by `PickersTextField` and should keep working the same way as before. + +Both components below will render a small size UI: + +```js + + +``` + +:::info +If you are passing `inputProps` to `slotProps.textField`, +these props will now be passed to the hidden `` element. +::: + +### Migrate `slots.field` + +If you are passing a custom field component to your pickers, you need to create a new one that is using the accessible DOM structure. +This new component will need to use the `PickersSectionList` component instead of an `` HTML element. + +You can have a look at the [custom PickersTextField](/x/react-date-pickers/custom-field/#using-custom-pickerstextfield) to have a concrete example. + +:::info +If your custom field was used to create a Joy UI design component, +you may want to wait a few weeks for the release of an out-of-the-box Joy `PickersTextField` component instead of implementing it yourself. +::: + +### Migrate `slots.textField` + +If you are passing a custom `TextField` component to your fields and pickers, +you need to create a new one that is using the accessible DOM structure. + +You can have a look at the second demo of the [Material PickersTextField section](/x/react-date-pickers/custom-field/#using-material-pickerstextfield) to have a concrete example. + +:::info +If your custom `TextField` was used to apply a totally different input that did not use `@mui/material/TextField`, +please consider having a look at the [custom PickersTextField](/x/react-date-pickers/custom-field/#using-custom-pickerstextfield) section which uses `slots.field`. +This approach can be more appropriate for deeper changes. +::: + +### Migrate the theme + +If you are using the theme to customize `MuiTextField`, +you need to pass the same config to `MuiPickersTextField`: + +```js +const theme = createTheme({ + components: { + MuiTextField: { + defaultProps: { + variant: 'outlined', + }, + styleOverrides: { + root: { + '& .MuiInputLabel-outlined.Mui-focused': { + color: 'red', + }, + }, + }, + }, + MuiPickersTextField: { + defaultProps: { + variant: 'outlined', + }, + styleOverrides: { + root: { + '& .MuiInputLabel-outlined.Mui-focused': { + color: 'red', + }, + }, + }, + }, + }, +}); +``` + +If you are using the theme to customize `MuiInput`, `MuiOutlinedInput` or `MuiFilledInput`, +you need to pass the same config to `MuiPickersInput`, `MuiPickersOutlinedInput` or `MuiPickersFilledInput`: + +```js +const theme = createTheme({ + components: { + // Replace with `MuiOutlinedInput` or `MuiFilledInput` if needed + MuiInput: { + defaultProps: { + margin: 'dense', + }, + styleOverrides: { + root: { + color: 'red', + }, + }, + }, + // Replace with `MuiPickersOutlinedInput` or `MuiPickersFilledInput` if needed + MuiPickersInput: { + defaultProps: { + margin: 'dense', + }, + styleOverrides: { + root: { + color: 'red', + }, + }, + }, + }, +}); +``` + +If you are using the theme to customize `MuiInputBase`, +you need to pass the same config to `MuiPickersInputBase`: + +```js +const theme = createTheme({ + components: { + MuiInputBase: { + defaultProps: { + margin: 'dense', + }, + styleOverrides: { + root: { + color: 'red', + }, + }, + }, + MuiPickersInputBase: { + defaultProps: { + margin: 'dense', + }, + styleOverrides: { + root: { + color: 'red', + }, + }, + }, + }, +}); +``` diff --git a/docs/data/pages.ts b/docs/data/pages.ts index 68a022f3d6aa..562b5c05a0e4 100644 --- a/docs/data/pages.ts +++ b/docs/data/pages.ts @@ -539,9 +539,19 @@ const pages: MuiPage[] = [ pathname: '/x/migration-group', title: 'Migration', children: [ + { + pathname: '/x/migration-v8', + subheader: 'Upgrade to v8', + children: [ + { + pathname: '/x/migration/migration-pickers-v7', + title: 'Breaking changes: Date and Time Pickers', + }, + ], + }, { pathname: '/x/migration-v7', - subheader: 'Upgrade to v7', + title: 'Upgrade to v7', children: [ { pathname: '/x/migration/migration-data-grid-v6', title: 'Breaking changes: Data Grid' }, { diff --git a/docs/pages/x/migration/migration-pickers-v7.js b/docs/pages/x/migration/migration-pickers-v7.js new file mode 100644 index 000000000000..24de8699a05f --- /dev/null +++ b/docs/pages/x/migration/migration-pickers-v7.js @@ -0,0 +1,7 @@ +import * as React from 'react'; +import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; +import * as pageProps from 'docsx/data/migration/migration-pickers-v7/migration-pickers-v7.md?muiMarkdown'; + +export default function Page() { + return ; +} diff --git a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.tsx b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.tsx index c6a5c6e350c8..9ad7ac43fb5f 100644 --- a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.tsx @@ -11,7 +11,7 @@ import { DateRangePickerProps } from './DateRangePicker.types'; type DatePickerComponent = (< TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = false, + TEnableAccessibleFieldDOMStructure extends boolean = true, >( props: DateRangePickerProps & React.RefAttributes, @@ -29,7 +29,7 @@ type DatePickerComponent = (< */ const DateRangePicker = React.forwardRef(function DateRangePicker< TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = false, + TEnableAccessibleFieldDOMStructure extends boolean = true, >( inProps: DateRangePickerProps, ref: React.Ref, diff --git a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePicker.tsx b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePicker.tsx index 64a1316f3b78..eea5e350438f 100644 --- a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePicker.tsx @@ -11,7 +11,7 @@ import { MobileDateTimeRangePicker } from '../MobileDateTimeRangePicker'; type DateTimeRangePickerComponent = (< TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = false, + TEnableAccessibleFieldDOMStructure extends boolean = true, >( props: DateTimeRangePickerProps & React.RefAttributes, @@ -29,7 +29,7 @@ type DateTimeRangePickerComponent = (< */ const DateTimeRangePicker = React.forwardRef(function DateTimeRangePicker< TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = false, + TEnableAccessibleFieldDOMStructure extends boolean = true, >( inProps: DateTimeRangePickerProps, ref: React.Ref, diff --git a/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.tsx b/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.tsx index 984548ad2a1b..6f80af0bc537 100644 --- a/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.tsx @@ -17,7 +17,7 @@ import { DateRange } from '../models'; type DesktopDateRangePickerComponent = (< TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = false, + TEnableAccessibleFieldDOMStructure extends boolean = true, >( props: DesktopDateRangePickerProps & React.RefAttributes, @@ -35,7 +35,7 @@ type DesktopDateRangePickerComponent = (< */ const DesktopDateRangePicker = React.forwardRef(function DesktopDateRangePicker< TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = false, + TEnableAccessibleFieldDOMStructure extends boolean = true, >( inProps: DesktopDateRangePickerProps, ref: React.Ref, diff --git a/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.tsx b/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.tsx index a8e7ba0bea5c..f73cd9b16c46 100644 --- a/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.tsx @@ -118,7 +118,7 @@ const rendererInterceptor = function rendererInterceptor< type DesktopDateRangePickerComponent = (< TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = false, + TEnableAccessibleFieldDOMStructure extends boolean = true, >( props: DesktopDateTimeRangePickerProps & React.RefAttributes, @@ -136,7 +136,7 @@ type DesktopDateRangePickerComponent = (< */ const DesktopDateTimeRangePicker = React.forwardRef(function DesktopDateTimeRangePicker< TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = false, + TEnableAccessibleFieldDOMStructure extends boolean = true, >( inProps: DesktopDateTimeRangePickerProps, ref: React.Ref, diff --git a/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.tsx b/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.tsx index 6c78b053fbf7..534d2dad1d92 100644 --- a/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.tsx @@ -17,7 +17,7 @@ import { DateRange } from '../models'; type MobileDateRangePickerComponent = (< TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = false, + TEnableAccessibleFieldDOMStructure extends boolean = true, >( props: MobileDateRangePickerProps & React.RefAttributes, @@ -35,7 +35,7 @@ type MobileDateRangePickerComponent = (< */ const MobileDateRangePicker = React.forwardRef(function MobileDateRangePicker< TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = false, + TEnableAccessibleFieldDOMStructure extends boolean = true, >( inProps: MobileDateRangePickerProps, ref: React.Ref, diff --git a/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/MobileDateTimeRangePicker.tsx b/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/MobileDateTimeRangePicker.tsx index c87fe167a003..b0e6adde5ae9 100644 --- a/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/MobileDateTimeRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/MobileDateTimeRangePicker.tsx @@ -127,7 +127,7 @@ const rendererInterceptor = function rendererInterceptor< type MobileDateRangePickerComponent = (< TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = false, + TEnableAccessibleFieldDOMStructure extends boolean = true, >( props: MobileDateTimeRangePickerProps & React.RefAttributes, @@ -145,7 +145,7 @@ type MobileDateRangePickerComponent = (< */ const MobileDateTimeRangePicker = React.forwardRef(function MobileDateTimeRangePicker< TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = false, + TEnableAccessibleFieldDOMStructure extends boolean = true, >( inProps: MobileDateTimeRangePickerProps, ref: React.Ref, diff --git a/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx b/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx index ca613049a78f..ce92ca6c3266 100644 --- a/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx +++ b/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx @@ -62,7 +62,7 @@ const MultiInputDateRangeFieldSeparator = styled(Typography, { type MultiInputDateRangeFieldComponent = (< TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = false, + TEnableAccessibleFieldDOMStructure extends boolean = true, >( props: MultiInputDateRangeFieldProps & React.RefAttributes, @@ -80,7 +80,7 @@ type MultiInputDateRangeFieldComponent = (< */ const MultiInputDateRangeField = React.forwardRef(function MultiInputDateRangeField< TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = false, + TEnableAccessibleFieldDOMStructure extends boolean = true, >( inProps: MultiInputDateRangeFieldProps, ref: React.Ref, @@ -118,7 +118,7 @@ const MultiInputDateRangeField = React.forwardRef(function MultiInputDateRangeFi const TextField = slots?.textField ?? - (inProps.enableAccessibleFieldDOMStructure ? PickersTextField : MuiTextField); + (inProps.enableAccessibleFieldDOMStructure === false ? MuiTextField : PickersTextField); const startTextFieldProps = useSlotProps< typeof TextField, MultiInputDateRangeFieldSlotProps['textField'], diff --git a/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.types.ts b/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.types.ts index d70dd6ef8bb1..626441962f9a 100644 --- a/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.types.ts +++ b/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.types.ts @@ -42,7 +42,7 @@ export type UseMultiInputDateRangeFieldComponentProps< export interface MultiInputDateRangeFieldProps< TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = false, + TEnableAccessibleFieldDOMStructure extends boolean = true, > extends UseMultiInputDateRangeFieldComponentProps< TDate, TEnableAccessibleFieldDOMStructure, diff --git a/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx b/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx index b586694783a4..982b59aa5b69 100644 --- a/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx +++ b/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx @@ -60,7 +60,7 @@ const MultiInputDateTimeRangeFieldSeparator = styled(Typography, { type MultiInputDateTimeRangeFieldComponent = (< TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = false, + TEnableAccessibleFieldDOMStructure extends boolean = true, >( props: MultiInputDateTimeRangeFieldProps & React.RefAttributes, @@ -78,7 +78,7 @@ type MultiInputDateTimeRangeFieldComponent = (< */ const MultiInputDateTimeRangeField = React.forwardRef(function MultiInputDateTimeRangeField< TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = false, + TEnableAccessibleFieldDOMStructure extends boolean = true, >( inProps: MultiInputDateTimeRangeFieldProps, ref: React.Ref, @@ -116,7 +116,7 @@ const MultiInputDateTimeRangeField = React.forwardRef(function MultiInputDateTim const TextField = slots?.textField ?? - (inProps.enableAccessibleFieldDOMStructure ? PickersTextField : MuiTextField); + (inProps.enableAccessibleFieldDOMStructure === false ? MuiTextField : PickersTextField); const startTextFieldProps = useSlotProps< typeof TextField, MultiInputDateTimeRangeFieldSlotProps['textField'], diff --git a/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.types.ts b/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.types.ts index 65f89beffb37..72d7722f37dc 100644 --- a/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.types.ts +++ b/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.types.ts @@ -38,7 +38,7 @@ export type UseMultiInputDateTimeRangeFieldComponentProps< export interface MultiInputDateTimeRangeFieldProps< TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = false, + TEnableAccessibleFieldDOMStructure extends boolean = true, > extends UseMultiInputDateTimeRangeFieldComponentProps< TDate, TEnableAccessibleFieldDOMStructure, diff --git a/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx b/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx index 4a540db67bfb..5d25736d3107 100644 --- a/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx +++ b/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx @@ -62,7 +62,7 @@ const MultiInputTimeRangeFieldSeparator = styled(Typography, { type MultiInputTimeRangeFieldComponent = (< TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = false, + TEnableAccessibleFieldDOMStructure extends boolean = true, >( props: MultiInputTimeRangeFieldProps & React.RefAttributes, @@ -80,7 +80,7 @@ type MultiInputTimeRangeFieldComponent = (< */ const MultiInputTimeRangeField = React.forwardRef(function MultiInputTimeRangeField< TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = false, + TEnableAccessibleFieldDOMStructure extends boolean = true, >( inProps: MultiInputTimeRangeFieldProps, ref: React.Ref, @@ -118,7 +118,7 @@ const MultiInputTimeRangeField = React.forwardRef(function MultiInputTimeRangeFi const TextField = slots?.textField ?? - (inProps.enableAccessibleFieldDOMStructure ? PickersTextField : MuiTextField); + (inProps.enableAccessibleFieldDOMStructure === false ? MuiTextField : PickersTextField); const startTextFieldProps = useSlotProps< typeof TextField, MultiInputTimeRangeFieldSlotProps['textField'], diff --git a/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.types.ts b/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.types.ts index 718b2728541d..34d466bb20e2 100644 --- a/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.types.ts +++ b/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.types.ts @@ -38,7 +38,7 @@ export type UseMultiInputTimeRangeFieldComponentProps< export interface MultiInputTimeRangeFieldProps< TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = false, + TEnableAccessibleFieldDOMStructure extends boolean = true, > extends UseMultiInputTimeRangeFieldComponentProps< TDate, TEnableAccessibleFieldDOMStructure, diff --git a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx index 2326ebf18ee0..93b89d7e3429 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx +++ b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx @@ -15,7 +15,7 @@ import { FieldType } from '../models'; type DateRangeFieldComponent = (< TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = false, + TEnableAccessibleFieldDOMStructure extends boolean = true, >( props: SingleInputDateRangeFieldProps & React.RefAttributes, @@ -33,7 +33,7 @@ type DateRangeFieldComponent = (< */ const SingleInputDateRangeField = React.forwardRef(function SingleInputDateRangeField< TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = false, + TEnableAccessibleFieldDOMStructure extends boolean = true, >( inProps: SingleInputDateRangeFieldProps, inRef: React.Ref, @@ -49,7 +49,7 @@ const SingleInputDateRangeField = React.forwardRef(function SingleInputDateRange const TextField = slots?.textField ?? - (inProps.enableAccessibleFieldDOMStructure ? PickersTextField : MuiTextField); + (inProps.enableAccessibleFieldDOMStructure === false ? MuiTextField : PickersTextField); const textFieldProps = useSlotProps({ elementType: TextField, externalSlotProps: slotProps?.textField, diff --git a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.types.ts b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.types.ts index f9dc8c7a978f..eb179ea277ba 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.types.ts +++ b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.types.ts @@ -33,7 +33,7 @@ export interface UseSingleInputDateRangeFieldProps< export type SingleInputDateRangeFieldProps< TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = false, + TEnableAccessibleFieldDOMStructure extends boolean = true, > = Omit< BuiltInFieldTextFieldProps, keyof UseSingleInputDateRangeFieldProps diff --git a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx index 417e2631f65e..6f4e72c06851 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx +++ b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx @@ -15,7 +15,7 @@ import { FieldType } from '../models'; type DateRangeFieldComponent = (< TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = false, + TEnableAccessibleFieldDOMStructure extends boolean = true, >( props: SingleInputDateTimeRangeFieldProps & React.RefAttributes, @@ -33,7 +33,7 @@ type DateRangeFieldComponent = (< */ const SingleInputDateTimeRangeField = React.forwardRef(function SingleInputDateTimeRangeField< TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = false, + TEnableAccessibleFieldDOMStructure extends boolean = true, >( inProps: SingleInputDateTimeRangeFieldProps, inRef: React.Ref, @@ -49,7 +49,7 @@ const SingleInputDateTimeRangeField = React.forwardRef(function SingleInputDateT const TextField = slots?.textField ?? - (inProps.enableAccessibleFieldDOMStructure ? PickersTextField : MuiTextField); + (inProps.enableAccessibleFieldDOMStructure === false ? MuiTextField : PickersTextField); const textFieldProps = useSlotProps({ elementType: TextField, externalSlotProps: slotProps?.textField, diff --git a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.types.ts b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.types.ts index d67d6a040e48..4d5f80635c65 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.types.ts +++ b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.types.ts @@ -29,7 +29,7 @@ export interface UseSingleInputDateTimeRangeFieldProps< export type SingleInputDateTimeRangeFieldProps< TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = false, + TEnableAccessibleFieldDOMStructure extends boolean = true, > = Omit< BuiltInFieldTextFieldProps, keyof UseSingleInputDateTimeRangeFieldProps diff --git a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx index 640d3670867e..7dd2d1a33b84 100644 --- a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx +++ b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx @@ -15,7 +15,7 @@ import { FieldType } from '../models'; type DateRangeFieldComponent = (< TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = false, + TEnableAccessibleFieldDOMStructure extends boolean = true, >( props: SingleInputTimeRangeFieldProps & React.RefAttributes, @@ -33,7 +33,7 @@ type DateRangeFieldComponent = (< */ const SingleInputTimeRangeField = React.forwardRef(function SingleInputTimeRangeField< TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = false, + TEnableAccessibleFieldDOMStructure extends boolean = true, >( inProps: SingleInputTimeRangeFieldProps, inRef: React.Ref, @@ -49,7 +49,7 @@ const SingleInputTimeRangeField = React.forwardRef(function SingleInputTimeRange const TextField = slots?.textField ?? - (inProps.enableAccessibleFieldDOMStructure ? PickersTextField : MuiTextField); + (inProps.enableAccessibleFieldDOMStructure === false ? MuiTextField : PickersTextField); const textFieldProps = useSlotProps({ elementType: TextField, externalSlotProps: slotProps?.textField, diff --git a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.types.ts b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.types.ts index 93e4a1019b5f..b651def68965 100644 --- a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.types.ts +++ b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.types.ts @@ -29,7 +29,7 @@ export interface UseSingleInputTimeRangeFieldProps< export type SingleInputTimeRangeFieldProps< TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = false, + TEnableAccessibleFieldDOMStructure extends boolean = true, > = Omit< BuiltInFieldTextFieldProps, keyof UseSingleInputTimeRangeFieldProps diff --git a/packages/x-date-pickers/src/DateField/DateField.tsx b/packages/x-date-pickers/src/DateField/DateField.tsx index 2e99c220e38f..1a7d839fd9db 100644 --- a/packages/x-date-pickers/src/DateField/DateField.tsx +++ b/packages/x-date-pickers/src/DateField/DateField.tsx @@ -14,7 +14,7 @@ import { PickerValidDate } from '../models'; type DateFieldComponent = (< TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = false, + TEnableAccessibleFieldDOMStructure extends boolean = true, >( props: DateFieldProps & React.RefAttributes, @@ -32,7 +32,7 @@ type DateFieldComponent = (< */ const DateField = React.forwardRef(function DateField< TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = false, + TEnableAccessibleFieldDOMStructure extends boolean = true, >( inProps: DateFieldProps, inRef: React.Ref, @@ -48,7 +48,7 @@ const DateField = React.forwardRef(function DateField< const TextField = slots?.textField ?? - (inProps.enableAccessibleFieldDOMStructure ? PickersTextField : MuiTextField); + (inProps.enableAccessibleFieldDOMStructure === false ? MuiTextField : PickersTextField); const textFieldProps = useSlotProps({ elementType: TextField, externalSlotProps: slotProps?.textField, diff --git a/packages/x-date-pickers/src/DateField/DateField.types.ts b/packages/x-date-pickers/src/DateField/DateField.types.ts index 57ab1e1830ae..87c96458aad8 100644 --- a/packages/x-date-pickers/src/DateField/DateField.types.ts +++ b/packages/x-date-pickers/src/DateField/DateField.types.ts @@ -63,7 +63,7 @@ export type UseDateFieldComponentProps< export type DateFieldProps< TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = false, + TEnableAccessibleFieldDOMStructure extends boolean = true, > = UseDateFieldComponentProps< TDate, TEnableAccessibleFieldDOMStructure, diff --git a/packages/x-date-pickers/src/DatePicker/DatePicker.tsx b/packages/x-date-pickers/src/DatePicker/DatePicker.tsx index 1b59fdbaa343..43788d857e51 100644 --- a/packages/x-date-pickers/src/DatePicker/DatePicker.tsx +++ b/packages/x-date-pickers/src/DatePicker/DatePicker.tsx @@ -12,7 +12,7 @@ import { PickerValidDate } from '../models'; type DatePickerComponent = (< TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = false, + TEnableAccessibleFieldDOMStructure extends boolean = true, >( props: DatePickerProps & React.RefAttributes, @@ -30,7 +30,7 @@ type DatePickerComponent = (< */ const DatePicker = React.forwardRef(function DatePicker< TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = false, + TEnableAccessibleFieldDOMStructure extends boolean = true, >( inProps: DatePickerProps, ref: React.Ref, diff --git a/packages/x-date-pickers/src/DatePicker/DatePicker.types.ts b/packages/x-date-pickers/src/DatePicker/DatePicker.types.ts index 1336df730d27..a051576763c6 100644 --- a/packages/x-date-pickers/src/DatePicker/DatePicker.types.ts +++ b/packages/x-date-pickers/src/DatePicker/DatePicker.types.ts @@ -22,7 +22,7 @@ export interface DatePickerSlotProps< export interface DatePickerProps< TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = false, + TEnableAccessibleFieldDOMStructure extends boolean = true, > extends DesktopDatePickerProps, MobileDatePickerProps { /** diff --git a/packages/x-date-pickers/src/DateTimeField/DateTimeField.tsx b/packages/x-date-pickers/src/DateTimeField/DateTimeField.tsx index 311209132ddd..1deb937eb3e4 100644 --- a/packages/x-date-pickers/src/DateTimeField/DateTimeField.tsx +++ b/packages/x-date-pickers/src/DateTimeField/DateTimeField.tsx @@ -14,7 +14,7 @@ import { PickerValidDate } from '../models'; type DateTimeFieldComponent = (< TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = false, + TEnableAccessibleFieldDOMStructure extends boolean = true, >( props: DateTimeFieldProps & React.RefAttributes, @@ -32,7 +32,7 @@ type DateTimeFieldComponent = (< */ const DateTimeField = React.forwardRef(function DateTimeField< TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = false, + TEnableAccessibleFieldDOMStructure extends boolean = true, >( inProps: DateTimeFieldProps, inRef: React.Ref, @@ -48,7 +48,7 @@ const DateTimeField = React.forwardRef(function DateTimeField< const TextField = slots?.textField ?? - (inProps.enableAccessibleFieldDOMStructure ? PickersTextField : MuiTextField); + (inProps.enableAccessibleFieldDOMStructure === false ? MuiTextField : PickersTextField); const textFieldProps = useSlotProps({ elementType: TextField, externalSlotProps: slotProps?.textField, diff --git a/packages/x-date-pickers/src/DateTimeField/DateTimeField.types.ts b/packages/x-date-pickers/src/DateTimeField/DateTimeField.types.ts index e19e41a6345a..548a7f420f59 100644 --- a/packages/x-date-pickers/src/DateTimeField/DateTimeField.types.ts +++ b/packages/x-date-pickers/src/DateTimeField/DateTimeField.types.ts @@ -79,7 +79,7 @@ export type UseDateTimeFieldComponentProps< export type DateTimeFieldProps< TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = false, + TEnableAccessibleFieldDOMStructure extends boolean = true, > = UseDateTimeFieldComponentProps< TDate, TEnableAccessibleFieldDOMStructure, diff --git a/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.tsx b/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.tsx index beed0975c5ca..5359c274a654 100644 --- a/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.tsx +++ b/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.tsx @@ -12,7 +12,7 @@ import { PickerValidDate } from '../models'; type DateTimePickerComponent = (< TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = false, + TEnableAccessibleFieldDOMStructure extends boolean = true, >( props: DateTimePickerProps & React.RefAttributes, @@ -30,7 +30,7 @@ type DateTimePickerComponent = (< */ const DateTimePicker = React.forwardRef(function DateTimePicker< TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = false, + TEnableAccessibleFieldDOMStructure extends boolean = true, >( inProps: DateTimePickerProps, ref: React.Ref, diff --git a/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.types.ts b/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.types.ts index 1c7b8b751903..7e294f835f2d 100644 --- a/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.types.ts +++ b/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.types.ts @@ -27,7 +27,7 @@ export interface DateTimePickerSlotProps< export interface DateTimePickerProps< TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = false, + TEnableAccessibleFieldDOMStructure extends boolean = true, > extends DesktopDateTimePickerProps, Omit< MobileDateTimePickerProps< diff --git a/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.tsx b/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.tsx index 5410f886c89b..43c6d60ca9e4 100644 --- a/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.tsx +++ b/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.tsx @@ -19,7 +19,7 @@ import { buildGetOpenDialogAriaText } from '../locales/utils/getPickersLocalizat type DesktopDatePickerComponent = (< TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = false, + TEnableAccessibleFieldDOMStructure extends boolean = true, >( props: DesktopDatePickerProps & React.RefAttributes, @@ -37,7 +37,7 @@ type DesktopDatePickerComponent = (< */ const DesktopDatePicker = React.forwardRef(function DesktopDatePicker< TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = false, + TEnableAccessibleFieldDOMStructure extends boolean = true, >( inProps: DesktopDatePickerProps, ref: React.Ref, diff --git a/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.types.ts b/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.types.ts index 613158d9145b..291e8876d4e3 100644 --- a/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.types.ts +++ b/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.types.ts @@ -23,7 +23,7 @@ export interface DesktopDatePickerSlotProps< export interface DesktopDatePickerProps< TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = false, + TEnableAccessibleFieldDOMStructure extends boolean = true, > extends BaseDatePickerProps, DesktopOnlyPickerProps { /** diff --git a/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx b/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx index d5907a41b083..28e1a918e4ba 100644 --- a/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx +++ b/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx @@ -112,7 +112,7 @@ const rendererInterceptor = function rendererInterceptor< type DesktopDateTimePickerComponent = (< TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = false, + TEnableAccessibleFieldDOMStructure extends boolean = true, >( props: DesktopDateTimePickerProps & React.RefAttributes, diff --git a/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.types.ts b/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.types.ts index 1351c1439e33..84ad07c693f9 100644 --- a/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.types.ts +++ b/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.types.ts @@ -41,7 +41,7 @@ export interface DesktopDateTimePickerSlotProps< export interface DesktopDateTimePickerProps< TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = false, + TEnableAccessibleFieldDOMStructure extends boolean = true, > extends BaseDateTimePickerProps, DesktopOnlyPickerProps, DesktopOnlyTimePickerProps { diff --git a/packages/x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.tsx b/packages/x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.tsx index 966c729b6365..266f2ee7e120 100644 --- a/packages/x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.tsx +++ b/packages/x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.tsx @@ -25,7 +25,7 @@ import { buildGetOpenDialogAriaText } from '../locales/utils/getPickersLocalizat type DesktopTimePickerComponent = (< TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = false, + TEnableAccessibleFieldDOMStructure extends boolean = true, >( props: DesktopTimePickerProps & React.RefAttributes, @@ -43,7 +43,7 @@ type DesktopTimePickerComponent = (< */ const DesktopTimePicker = React.forwardRef(function DesktopTimePicker< TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = false, + TEnableAccessibleFieldDOMStructure extends boolean = true, >( inProps: DesktopTimePickerProps, ref: React.Ref, diff --git a/packages/x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.types.ts b/packages/x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.types.ts index 77faf64730cf..73974cf1df82 100644 --- a/packages/x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.types.ts +++ b/packages/x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.types.ts @@ -38,7 +38,7 @@ export interface DesktopTimePickerSlotProps< export interface DesktopTimePickerProps< TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = false, + TEnableAccessibleFieldDOMStructure extends boolean = true, > extends BaseTimePickerProps, DesktopOnlyPickerProps, DesktopOnlyTimePickerProps { diff --git a/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.tsx b/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.tsx index 8a8aeefb380e..91bb4ad8ff30 100644 --- a/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.tsx +++ b/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.tsx @@ -18,7 +18,7 @@ import { buildGetOpenDialogAriaText } from '../locales/utils/getPickersLocalizat type MobileDatePickerComponent = (< TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = false, + TEnableAccessibleFieldDOMStructure extends boolean = true, >( props: MobileDatePickerProps & React.RefAttributes, @@ -36,7 +36,7 @@ type MobileDatePickerComponent = (< */ const MobileDatePicker = React.forwardRef(function MobileDatePicker< TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = false, + TEnableAccessibleFieldDOMStructure extends boolean = true, >( inProps: MobileDatePickerProps, ref: React.Ref, diff --git a/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.types.ts b/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.types.ts index b7b12ed698a6..0cf77aa7a517 100644 --- a/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.types.ts +++ b/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.types.ts @@ -23,7 +23,7 @@ export interface MobileDatePickerSlotProps< export interface MobileDatePickerProps< TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = false, + TEnableAccessibleFieldDOMStructure extends boolean = true, > extends BaseDatePickerProps, MobileOnlyPickerProps { /** diff --git a/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.tsx b/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.tsx index 1bf3bbb56e20..c6c9d4e2620f 100644 --- a/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.tsx +++ b/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.tsx @@ -22,7 +22,7 @@ import { buildGetOpenDialogAriaText } from '../locales/utils/getPickersLocalizat type MobileDateTimePickerComponent = (< TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = false, + TEnableAccessibleFieldDOMStructure extends boolean = true, >( props: MobileDateTimePickerProps & React.RefAttributes, @@ -40,7 +40,7 @@ type MobileDateTimePickerComponent = (< */ const MobileDateTimePicker = React.forwardRef(function MobileDateTimePicker< TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = false, + TEnableAccessibleFieldDOMStructure extends boolean = true, >( inProps: MobileDateTimePickerProps, ref: React.Ref, diff --git a/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.types.ts b/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.types.ts index ff38d040253e..1422063c0d67 100644 --- a/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.types.ts +++ b/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.types.ts @@ -28,7 +28,7 @@ export interface MobileDateTimePickerSlotProps< export interface MobileDateTimePickerProps< TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem = DateOrTimeView, - TEnableAccessibleFieldDOMStructure extends boolean = false, + TEnableAccessibleFieldDOMStructure extends boolean = true, > extends BaseDateTimePickerProps, MobileOnlyPickerProps { /** diff --git a/packages/x-date-pickers/src/MobileTimePicker/MobileTimePicker.tsx b/packages/x-date-pickers/src/MobileTimePicker/MobileTimePicker.tsx index 5898915dfd1b..0594327577d1 100644 --- a/packages/x-date-pickers/src/MobileTimePicker/MobileTimePicker.tsx +++ b/packages/x-date-pickers/src/MobileTimePicker/MobileTimePicker.tsx @@ -18,7 +18,7 @@ import { buildGetOpenDialogAriaText } from '../locales/utils/getPickersLocalizat type MobileTimePickerComponent = (< TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = false, + TEnableAccessibleFieldDOMStructure extends boolean = true, >( props: MobileTimePickerProps & React.RefAttributes, @@ -36,7 +36,7 @@ type MobileTimePickerComponent = (< */ const MobileTimePicker = React.forwardRef(function MobileTimePicker< TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = false, + TEnableAccessibleFieldDOMStructure extends boolean = true, >( inProps: MobileTimePickerProps, ref: React.Ref, diff --git a/packages/x-date-pickers/src/MobileTimePicker/MobileTimePicker.types.ts b/packages/x-date-pickers/src/MobileTimePicker/MobileTimePicker.types.ts index a86ee69bf2bd..816cc7e0624c 100644 --- a/packages/x-date-pickers/src/MobileTimePicker/MobileTimePicker.types.ts +++ b/packages/x-date-pickers/src/MobileTimePicker/MobileTimePicker.types.ts @@ -28,7 +28,7 @@ export interface MobileTimePickerSlotProps< export interface MobileTimePickerProps< TDate extends PickerValidDate, TView extends TimeViewWithMeridiem = TimeView, - TEnableAccessibleFieldDOMStructure extends boolean = false, + TEnableAccessibleFieldDOMStructure extends boolean = true, > extends BaseTimePickerProps, MobileOnlyPickerProps { /** diff --git a/packages/x-date-pickers/src/TimeField/TimeField.tsx b/packages/x-date-pickers/src/TimeField/TimeField.tsx index 9dd69bdf8a68..648e2c0d791d 100644 --- a/packages/x-date-pickers/src/TimeField/TimeField.tsx +++ b/packages/x-date-pickers/src/TimeField/TimeField.tsx @@ -14,7 +14,7 @@ import { PickerValidDate } from '../models'; type TimeFieldComponent = (< TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = false, + TEnableAccessibleFieldDOMStructure extends boolean = true, >( props: TimeFieldProps & React.RefAttributes, @@ -32,7 +32,7 @@ type TimeFieldComponent = (< */ const TimeField = React.forwardRef(function TimeField< TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = false, + TEnableAccessibleFieldDOMStructure extends boolean = true, >( inProps: TimeFieldProps, inRef: React.Ref, @@ -48,7 +48,7 @@ const TimeField = React.forwardRef(function TimeField< const TextField = slots?.textField ?? - (inProps.enableAccessibleFieldDOMStructure ? PickersTextField : MuiTextField); + (inProps.enableAccessibleFieldDOMStructure === false ? MuiTextField : PickersTextField); const textFieldProps = useSlotProps({ elementType: TextField, externalSlotProps: slotProps?.textField, diff --git a/packages/x-date-pickers/src/TimeField/TimeField.types.ts b/packages/x-date-pickers/src/TimeField/TimeField.types.ts index 0ce1a53d6e40..fefb71a6f4d4 100644 --- a/packages/x-date-pickers/src/TimeField/TimeField.types.ts +++ b/packages/x-date-pickers/src/TimeField/TimeField.types.ts @@ -62,7 +62,7 @@ export type UseTimeFieldComponentProps< export type TimeFieldProps< TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = false, + TEnableAccessibleFieldDOMStructure extends boolean = true, > = UseTimeFieldComponentProps< TDate, TEnableAccessibleFieldDOMStructure, diff --git a/packages/x-date-pickers/src/TimePicker/TimePicker.tsx b/packages/x-date-pickers/src/TimePicker/TimePicker.tsx index b6749e642eba..2d4878c2ee13 100644 --- a/packages/x-date-pickers/src/TimePicker/TimePicker.tsx +++ b/packages/x-date-pickers/src/TimePicker/TimePicker.tsx @@ -12,7 +12,7 @@ import { PickerValidDate } from '../models'; type TimePickerComponent = (< TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = false, + TEnableAccessibleFieldDOMStructure extends boolean = true, >( props: TimePickerProps & React.RefAttributes, @@ -30,7 +30,7 @@ type TimePickerComponent = (< */ const TimePicker = React.forwardRef(function TimePicker< TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = false, + TEnableAccessibleFieldDOMStructure extends boolean = true, >( inProps: TimePickerProps, ref: React.Ref, diff --git a/packages/x-date-pickers/src/TimePicker/TimePicker.types.ts b/packages/x-date-pickers/src/TimePicker/TimePicker.types.ts index 23121361eff6..0eb197e61f83 100644 --- a/packages/x-date-pickers/src/TimePicker/TimePicker.types.ts +++ b/packages/x-date-pickers/src/TimePicker/TimePicker.types.ts @@ -23,7 +23,7 @@ export interface TimePickerSlotProps< export interface TimePickerProps< TDate extends PickerValidDate, - TEnableAccessibleFieldDOMStructure extends boolean = false, + TEnableAccessibleFieldDOMStructure extends boolean = true, > extends DesktopTimePickerProps, Omit< MobileTimePickerProps, diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useField.ts b/packages/x-date-pickers/src/internals/hooks/useField/useField.ts index 2ad8363212a9..b352615f8e01 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useField.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useField.ts @@ -54,7 +54,7 @@ export const useField = < internalProps: { unstableFieldRef, minutesStep, - enableAccessibleFieldDOMStructure = false, + enableAccessibleFieldDOMStructure = true, disabled = false, readOnly = false, }, diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useField.types.ts b/packages/x-date-pickers/src/internals/hooks/useField/useField.types.ts index e558a7b3b7ee..4b3535b1bff2 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useField.types.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useField.types.ts @@ -124,7 +124,7 @@ export interface UseFieldInternalProps< */ unstableFieldRef?: React.Ref>; /** - * @default false + * @default true */ enableAccessibleFieldDOMStructure?: TEnableAccessibleFieldDOMStructure; /** diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useFieldState.ts b/packages/x-date-pickers/src/internals/hooks/useField/useFieldState.ts index 846ab4be676d..d15db6059349 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useFieldState.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useFieldState.ts @@ -108,7 +108,7 @@ export const useFieldState = < onSelectedSectionsChange, shouldRespectLeadingZeros = false, timezone: timezoneProp, - enableAccessibleFieldDOMStructure = false, + enableAccessibleFieldDOMStructure = true, }, } = params; From 28cd5ea7bb62c1ab4527b8628a35338ccad057e8 Mon Sep 17 00:00:00 2001 From: delangle Date: Tue, 17 Sep 2024 13:42:59 +0200 Subject: [PATCH 02/18] Regen API --- .../x-date-pickers-pro/src/DateRangePicker/DateRangePicker.tsx | 2 +- .../src/DateTimeRangePicker/DateTimeRangePicker.tsx | 2 +- .../src/DesktopDateRangePicker/DesktopDateRangePicker.tsx | 2 +- .../DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.tsx | 2 +- .../src/MobileDateRangePicker/MobileDateRangePicker.tsx | 2 +- .../src/MobileDateTimeRangePicker/MobileDateTimeRangePicker.tsx | 2 +- .../src/MultiInputDateRangeField/MultiInputDateRangeField.tsx | 2 +- .../MultiInputDateTimeRangeField.tsx | 2 +- .../src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx | 2 +- .../src/SingleInputDateRangeField/SingleInputDateRangeField.tsx | 2 +- .../SingleInputDateTimeRangeField.tsx | 2 +- .../src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx | 2 +- packages/x-date-pickers/src/DateField/DateField.tsx | 2 +- packages/x-date-pickers/src/DatePicker/DatePicker.tsx | 2 +- packages/x-date-pickers/src/DateTimeField/DateTimeField.tsx | 2 +- packages/x-date-pickers/src/DateTimePicker/DateTimePicker.tsx | 2 +- .../x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.tsx | 2 +- .../src/DesktopDateTimePicker/DesktopDateTimePicker.tsx | 2 +- .../x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.tsx | 2 +- .../x-date-pickers/src/MobileDatePicker/MobileDatePicker.tsx | 2 +- .../src/MobileDateTimePicker/MobileDateTimePicker.tsx | 2 +- .../x-date-pickers/src/MobileTimePicker/MobileTimePicker.tsx | 2 +- packages/x-date-pickers/src/TimeField/TimeField.tsx | 2 +- packages/x-date-pickers/src/TimePicker/TimePicker.tsx | 2 +- 24 files changed, 24 insertions(+), 24 deletions(-) diff --git a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.tsx b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.tsx index 9ad7ac43fb5f..cc96fb4d9bbe 100644 --- a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.tsx @@ -140,7 +140,7 @@ DateRangePicker.propTypes = { */ displayWeekNumber: PropTypes.bool, /** - * @default false + * @default true */ enableAccessibleFieldDOMStructure: PropTypes.any, /** diff --git a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePicker.tsx b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePicker.tsx index eea5e350438f..53837bb78ad5 100644 --- a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePicker.tsx @@ -150,7 +150,7 @@ DateTimeRangePicker.propTypes = { */ displayWeekNumber: PropTypes.bool, /** - * @default false + * @default true */ enableAccessibleFieldDOMStructure: PropTypes.any, /** diff --git a/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.tsx b/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.tsx index 6f80af0bc537..efae31fdc727 100644 --- a/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.tsx @@ -176,7 +176,7 @@ DesktopDateRangePicker.propTypes = { */ displayWeekNumber: PropTypes.bool, /** - * @default false + * @default true */ enableAccessibleFieldDOMStructure: PropTypes.any, /** diff --git a/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.tsx b/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.tsx index f73cd9b16c46..0e9c9db1e4f9 100644 --- a/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.tsx @@ -318,7 +318,7 @@ DesktopDateTimeRangePicker.propTypes = { */ displayWeekNumber: PropTypes.bool, /** - * @default false + * @default true */ enableAccessibleFieldDOMStructure: PropTypes.any, /** diff --git a/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.tsx b/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.tsx index 534d2dad1d92..e6ec08e98baa 100644 --- a/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.tsx @@ -172,7 +172,7 @@ MobileDateRangePicker.propTypes = { */ displayWeekNumber: PropTypes.bool, /** - * @default false + * @default true */ enableAccessibleFieldDOMStructure: PropTypes.any, /** diff --git a/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/MobileDateTimeRangePicker.tsx b/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/MobileDateTimeRangePicker.tsx index b0e6adde5ae9..ee64407b61a2 100644 --- a/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/MobileDateTimeRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/MobileDateTimeRangePicker.tsx @@ -308,7 +308,7 @@ MobileDateTimeRangePicker.propTypes = { */ displayWeekNumber: PropTypes.bool, /** - * @default false + * @default true */ enableAccessibleFieldDOMStructure: PropTypes.any, /** diff --git a/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx b/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx index ce92ca6c3266..cc6a93f9eec3 100644 --- a/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx +++ b/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx @@ -233,7 +233,7 @@ MultiInputDateRangeField.propTypes = { */ divider: PropTypes.node, /** - * @default false + * @default true */ enableAccessibleFieldDOMStructure: PropTypes.bool, /** diff --git a/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx b/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx index 982b59aa5b69..0500db59e40b 100644 --- a/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx +++ b/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx @@ -241,7 +241,7 @@ MultiInputDateTimeRangeField.propTypes = { */ divider: PropTypes.node, /** - * @default false + * @default true */ enableAccessibleFieldDOMStructure: PropTypes.bool, /** diff --git a/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx b/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx index 5d25736d3107..68e21e119e14 100644 --- a/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx +++ b/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx @@ -244,7 +244,7 @@ MultiInputTimeRangeField.propTypes = { */ divider: PropTypes.node, /** - * @default false + * @default true */ enableAccessibleFieldDOMStructure: PropTypes.bool, /** diff --git a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx index 93b89d7e3429..a621db2cd46a 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx +++ b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx @@ -131,7 +131,7 @@ SingleInputDateRangeField.propTypes = { */ disablePast: PropTypes.bool, /** - * @default false + * @default true */ enableAccessibleFieldDOMStructure: PropTypes.bool, /** diff --git a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx index 6f4e72c06851..40e3af41c1a5 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx +++ b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx @@ -141,7 +141,7 @@ SingleInputDateTimeRangeField.propTypes = { */ disablePast: PropTypes.bool, /** - * @default false + * @default true */ enableAccessibleFieldDOMStructure: PropTypes.bool, /** diff --git a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx index 7dd2d1a33b84..81466c3a90d4 100644 --- a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx +++ b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx @@ -141,7 +141,7 @@ SingleInputTimeRangeField.propTypes = { */ disablePast: PropTypes.bool, /** - * @default false + * @default true */ enableAccessibleFieldDOMStructure: PropTypes.bool, /** diff --git a/packages/x-date-pickers/src/DateField/DateField.tsx b/packages/x-date-pickers/src/DateField/DateField.tsx index 1a7d839fd9db..197f03a7a9e7 100644 --- a/packages/x-date-pickers/src/DateField/DateField.tsx +++ b/packages/x-date-pickers/src/DateField/DateField.tsx @@ -123,7 +123,7 @@ DateField.propTypes = { */ disablePast: PropTypes.bool, /** - * @default false + * @default true */ enableAccessibleFieldDOMStructure: PropTypes.bool, /** diff --git a/packages/x-date-pickers/src/DatePicker/DatePicker.tsx b/packages/x-date-pickers/src/DatePicker/DatePicker.tsx index 43788d857e51..18945b6cd51b 100644 --- a/packages/x-date-pickers/src/DatePicker/DatePicker.tsx +++ b/packages/x-date-pickers/src/DatePicker/DatePicker.tsx @@ -115,7 +115,7 @@ DatePicker.propTypes = { */ displayWeekNumber: PropTypes.bool, /** - * @default false + * @default true */ enableAccessibleFieldDOMStructure: PropTypes.any, /** diff --git a/packages/x-date-pickers/src/DateTimeField/DateTimeField.tsx b/packages/x-date-pickers/src/DateTimeField/DateTimeField.tsx index 1deb937eb3e4..85fdbc0f272b 100644 --- a/packages/x-date-pickers/src/DateTimeField/DateTimeField.tsx +++ b/packages/x-date-pickers/src/DateTimeField/DateTimeField.tsx @@ -133,7 +133,7 @@ DateTimeField.propTypes = { */ disablePast: PropTypes.bool, /** - * @default false + * @default true */ enableAccessibleFieldDOMStructure: PropTypes.bool, /** diff --git a/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.tsx b/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.tsx index 5359c274a654..b38b3d6375f9 100644 --- a/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.tsx +++ b/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.tsx @@ -130,7 +130,7 @@ DateTimePicker.propTypes = { */ displayWeekNumber: PropTypes.bool, /** - * @default false + * @default true */ enableAccessibleFieldDOMStructure: PropTypes.any, /** diff --git a/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.tsx b/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.tsx index 43c6d60ca9e4..b4009feefd3c 100644 --- a/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.tsx +++ b/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.tsx @@ -164,7 +164,7 @@ DesktopDatePicker.propTypes = { */ displayWeekNumber: PropTypes.bool, /** - * @default false + * @default true */ enableAccessibleFieldDOMStructure: PropTypes.any, /** diff --git a/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx b/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx index 28e1a918e4ba..52ae30b787c0 100644 --- a/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx +++ b/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx @@ -315,7 +315,7 @@ DesktopDateTimePicker.propTypes = { */ displayWeekNumber: PropTypes.bool, /** - * @default false + * @default true */ enableAccessibleFieldDOMStructure: PropTypes.any, /** diff --git a/packages/x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.tsx b/packages/x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.tsx index 266f2ee7e120..98eb55cfc7d9 100644 --- a/packages/x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.tsx +++ b/packages/x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.tsx @@ -201,7 +201,7 @@ DesktopTimePicker.propTypes = { */ disablePast: PropTypes.bool, /** - * @default false + * @default true */ enableAccessibleFieldDOMStructure: PropTypes.any, /** diff --git a/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.tsx b/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.tsx index 91bb4ad8ff30..1d6068db87f6 100644 --- a/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.tsx +++ b/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.tsx @@ -161,7 +161,7 @@ MobileDatePicker.propTypes = { */ displayWeekNumber: PropTypes.bool, /** - * @default false + * @default true */ enableAccessibleFieldDOMStructure: PropTypes.any, /** diff --git a/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.tsx b/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.tsx index c6c9d4e2620f..eefc6735caf7 100644 --- a/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.tsx +++ b/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.tsx @@ -191,7 +191,7 @@ MobileDateTimePicker.propTypes = { */ displayWeekNumber: PropTypes.bool, /** - * @default false + * @default true */ enableAccessibleFieldDOMStructure: PropTypes.any, /** diff --git a/packages/x-date-pickers/src/MobileTimePicker/MobileTimePicker.tsx b/packages/x-date-pickers/src/MobileTimePicker/MobileTimePicker.tsx index 0594327577d1..5106ae24d54a 100644 --- a/packages/x-date-pickers/src/MobileTimePicker/MobileTimePicker.tsx +++ b/packages/x-date-pickers/src/MobileTimePicker/MobileTimePicker.tsx @@ -164,7 +164,7 @@ MobileTimePicker.propTypes = { */ disablePast: PropTypes.bool, /** - * @default false + * @default true */ enableAccessibleFieldDOMStructure: PropTypes.any, /** diff --git a/packages/x-date-pickers/src/TimeField/TimeField.tsx b/packages/x-date-pickers/src/TimeField/TimeField.tsx index 648e2c0d791d..6471420f1630 100644 --- a/packages/x-date-pickers/src/TimeField/TimeField.tsx +++ b/packages/x-date-pickers/src/TimeField/TimeField.tsx @@ -133,7 +133,7 @@ TimeField.propTypes = { */ disablePast: PropTypes.bool, /** - * @default false + * @default true */ enableAccessibleFieldDOMStructure: PropTypes.bool, /** diff --git a/packages/x-date-pickers/src/TimePicker/TimePicker.tsx b/packages/x-date-pickers/src/TimePicker/TimePicker.tsx index 2d4878c2ee13..30fcfd7e9ebc 100644 --- a/packages/x-date-pickers/src/TimePicker/TimePicker.tsx +++ b/packages/x-date-pickers/src/TimePicker/TimePicker.tsx @@ -114,7 +114,7 @@ TimePicker.propTypes = { */ disablePast: PropTypes.bool, /** - * @default false + * @default true */ enableAccessibleFieldDOMStructure: PropTypes.any, /** From 7b1784da84bf02155d60e5fbe569232cba76c669 Mon Sep 17 00:00:00 2001 From: delangle Date: Tue, 17 Sep 2024 13:56:36 +0200 Subject: [PATCH 03/18] Fix links --- CHANGELOG.md | 2 +- docs/.link-check-errors.txt | 1 + .../migration-pickers-v6/migration-pickers-v6.md | 2 +- .../migration-pickers-v7/migration-pickers-v7.md | 13 ++++--------- 4 files changed, 7 insertions(+), 11 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index f2a6607527ba..549c6d2c6806 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2518,7 +2518,7 @@ Same changes as in `@mui/x-data-grid-pro@7.0.0-beta.4`. ``` - The headless field hooks (e.g.: `useDateField`) now returns a new prop called `enableAccessibleFieldDOMStructure`. - This property is utilized to determine whether the anticipated UI is constructed using an accessible DOM structure. Learn more about this new [accessible DOM structure](/x/react-date-pickers/fields/#accessible-dom-structure). + This property is utilized to determine whether the anticipated UI is constructed using an accessible DOM structure. When building a custom UI, you are most-likely only supporting one DOM structure, so you can remove `enableAccessibleFieldDOMStructure` before it is passed to the DOM: diff --git a/docs/.link-check-errors.txt b/docs/.link-check-errors.txt index 6ecc503cc78a..0438fa82a091 100644 --- a/docs/.link-check-errors.txt +++ b/docs/.link-check-errors.txt @@ -1,2 +1,3 @@ Broken links found by `docs:link-check` that exist: +- https://mui.com/x/react-date-pickers/fields/#accessible-dom-structure diff --git a/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md b/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md index 20f3c0875f22..0abbe9069cf4 100644 --- a/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md +++ b/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md @@ -439,7 +439,7 @@ The headless field hooks (e.g.: `useDateField`) now return a new prop called `en This is used to know if the current UI expected is built using the accessible DOM structure or not. :::info -See [Fields—Accessible DOM structure](/x/react-date-pickers/fields/#accessible-dom-structure) for more details. +See [Migration from v7 to v8—New DOM structure for the field](/x/migration/migration-pickers-v7/#new-dom-structure-for-the-field) for more details. ::: When building a custom UI, you are most-likely only supporting one DOM structure, so you can remove `enableAccessibleFieldDOMStructure` before it is passed to the DOM: 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 0908e7f83b21..851bb2a54bca 100644 --- a/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md +++ b/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md @@ -64,12 +64,7 @@ After running the codemods, make sure to test your application and that you don' Feel free to [open an issue](https://github.com/mui/mui-x/issues/new/choose) for support if you need help to proceed with your migration. ::: -## Breaking changes - -Since v7 is a major release, it contains some changes that affect the public API. -These changes were done for consistency, improve stability and make room for new features. - -### New DOM structure for the field +## New DOM structure for the field Before v8, the fields' DOM structure consisted of an ``, which held the whole value for the component, but unfortunately presents a few limitations in terms of accessibility when managing multiple section values. @@ -145,7 +140,7 @@ these props will now be passed to the hidden `` element. If you are passing a custom field component to your pickers, you need to create a new one that is using the accessible DOM structure. This new component will need to use the `PickersSectionList` component instead of an `` HTML element. -You can have a look at the [custom PickersTextField](/x/react-date-pickers/custom-field/#using-custom-pickerstextfield) to have a concrete example. +You can have a look at the [Using a custom input](/x/react-date-pickers/custom-field/#using-a-custom-input) to have a concrete example. :::info If your custom field was used to create a Joy UI design component, @@ -157,11 +152,11 @@ you may want to wait a few weeks for the release of an out-of-the-box Joy `Picke If you are passing a custom `TextField` component to your fields and pickers, you need to create a new one that is using the accessible DOM structure. -You can have a look at the second demo of the [Material PickersTextField section](/x/react-date-pickers/custom-field/#using-material-pickerstextfield) to have a concrete example. +You can have a look at the second demo of the [Wrapping PickersTextField](/x/react-date-pickers/custom-field/#wrapping-pickerstextfield) to have a concrete example. :::info If your custom `TextField` was used to apply a totally different input that did not use `@mui/material/TextField`, -please consider having a look at the [custom PickersTextField](/x/react-date-pickers/custom-field/#using-custom-pickerstextfield) section which uses `slots.field`. +please consider having a look at the [Using a custom input](/x/react-date-pickers/custom-field/#using-a-custom-input) section which uses `slots.field`. This approach can be more appropriate for deeper changes. ::: From 931a1a1bf4037ad9eacb3a89cbb0a4c2c8f3477c Mon Sep 17 00:00:00 2001 From: delangle Date: Tue, 17 Sep 2024 15:04:54 +0200 Subject: [PATCH 04/18] Remove enableAccessibleFieldDOMStructure prop when not needed --- .../custom-field/MaterialV7FieldWrapped.js | 10 +- .../custom-field/MaterialV7FieldWrapped.tsx | 10 +- .../MaterialV7FieldWrapped.tsx.preview | 10 +- .../fields/BasicV7DOMStructure.js | 2 +- .../fields/BasicV7DOMStructure.tsx | 2 +- .../fields/BasicV7DOMStructure.tsx.preview | 2 +- .../migration-pickers-v7.md | 10 +- .../modules/components/overview/Keyboard.tsx | 1 - .../DateRangePicker/DateRangePicker.test.tsx | 2 +- .../tests/DesktopDateRangePicker.test.tsx | 97 ++++++------------- .../describes.DesktopDateRangePicker.test.tsx | 2 +- .../tests/DesktopDateTimeRangePicker.test.tsx | 10 +- ...cribes.DesktopDateTimeRangePicker.test.tsx | 2 +- .../tests/MobileDateRangePicker.test.tsx | 31 +++--- .../describes.MobileDateRangePicker.test.tsx | 2 +- ...scribes.MobileDateTimeRangePicker.test.tsx | 2 +- ...escribes.MultiInputDateRangeField.test.tsx | 2 +- ...ibes.MultiInputDateTimeRangeField.test.tsx | 2 +- ...escribes.MultiInputTimeRangeField.test.tsx | 2 +- ...scribes.SingleInputDateRangeField.test.tsx | 2 +- ...bes.SingleInputDateTimeRangeField.test.tsx | 2 +- ...scribes.SingleInputTimeRangeField.test.tsx | 2 +- .../tests/describes.DateField.test.tsx | 2 +- .../src/DatePicker/tests/DatePicker.test.tsx | 2 +- .../tests/describes.DateTimeField.test.tsx | 2 +- .../tests/DateTimePicker.test.tsx | 2 +- .../describes.DesktopTimePicker.test.tsx | 2 +- .../tests/MobileDatePicker.test.tsx | 37 ++----- .../tests/MobileDateTimePicker.test.tsx | 15 +-- .../tests/MobileTimePicker.test.tsx | 6 +- .../tests/describes.MobileTimePicker.test.tsx | 2 +- .../tests/describes.TimeField.test.tsx | 2 +- .../src/TimePicker/tests/TimePicker.test.tsx | 2 +- .../DatePicker/BasicDesktopDatePicker.tsx | 1 - .../BasicDesktopDateRangePicker.tsx | 2 +- .../DatePicker/BasicDesktopDateTimePicker.tsx | 2 +- .../DatePicker/BasicMobileDatePicker.tsx | 2 +- .../DatePicker/DesktopDatePickerFormV7.tsx | 1 - ...ReadonlyDesktopDateRangePickerSingleV7.tsx | 1 - .../SingleDesktopDateRangePickerWithTZ.tsx | 1 - .../testTextFieldKeyboardRangeValidation.tsx | 37 ++----- .../testTextFieldRangeValidation.tsx | 21 +--- .../testTextFieldValidation.tsx | 15 +-- .../testControlledUnControlled.tsx | 1 - .../describeValue/testPickerActionBar.tsx | 6 -- .../testPickerOpenCloseLifeCycle.tsx | 19 +--- .../pickers/describeValue/testShortcuts.tsx | 3 - 47 files changed, 104 insertions(+), 289 deletions(-) diff --git a/docs/data/date-pickers/custom-field/MaterialV7FieldWrapped.js b/docs/data/date-pickers/custom-field/MaterialV7FieldWrapped.js index d125a8479b5c..22560a3bcc80 100644 --- a/docs/data/date-pickers/custom-field/MaterialV7FieldWrapped.js +++ b/docs/data/date-pickers/custom-field/MaterialV7FieldWrapped.js @@ -14,14 +14,8 @@ export default function MaterialV7FieldWrapped() { return ( - - + + ); diff --git a/docs/data/date-pickers/custom-field/MaterialV7FieldWrapped.tsx b/docs/data/date-pickers/custom-field/MaterialV7FieldWrapped.tsx index 82e06da7316b..d054e12c04de 100644 --- a/docs/data/date-pickers/custom-field/MaterialV7FieldWrapped.tsx +++ b/docs/data/date-pickers/custom-field/MaterialV7FieldWrapped.tsx @@ -19,14 +19,8 @@ export default function MaterialV7FieldWrapped() { return ( - - + + ); diff --git a/docs/data/date-pickers/custom-field/MaterialV7FieldWrapped.tsx.preview b/docs/data/date-pickers/custom-field/MaterialV7FieldWrapped.tsx.preview index 17535291f5f3..a31c9c5bc351 100644 --- a/docs/data/date-pickers/custom-field/MaterialV7FieldWrapped.tsx.preview +++ b/docs/data/date-pickers/custom-field/MaterialV7FieldWrapped.tsx.preview @@ -1,8 +1,2 @@ - - \ No newline at end of file + + \ No newline at end of file diff --git a/docs/data/date-pickers/fields/BasicV7DOMStructure.js b/docs/data/date-pickers/fields/BasicV7DOMStructure.js index 1f32eca967da..62c0924c3c90 100644 --- a/docs/data/date-pickers/fields/BasicV7DOMStructure.js +++ b/docs/data/date-pickers/fields/BasicV7DOMStructure.js @@ -8,7 +8,7 @@ export default function BasicV7DOMStructure() { return ( - + ); diff --git a/docs/data/date-pickers/fields/BasicV7DOMStructure.tsx b/docs/data/date-pickers/fields/BasicV7DOMStructure.tsx index 1f32eca967da..62c0924c3c90 100644 --- a/docs/data/date-pickers/fields/BasicV7DOMStructure.tsx +++ b/docs/data/date-pickers/fields/BasicV7DOMStructure.tsx @@ -8,7 +8,7 @@ export default function BasicV7DOMStructure() { return ( - + ); diff --git a/docs/data/date-pickers/fields/BasicV7DOMStructure.tsx.preview b/docs/data/date-pickers/fields/BasicV7DOMStructure.tsx.preview index f33bc6c8fdc7..7315d81692e6 100644 --- a/docs/data/date-pickers/fields/BasicV7DOMStructure.tsx.preview +++ b/docs/data/date-pickers/fields/BasicV7DOMStructure.tsx.preview @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file 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 851bb2a54bca..849cdace15e2 100644 --- a/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md +++ b/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md @@ -91,8 +91,8 @@ the field consumes some props (e.g: `shouldRespectLeadingZeros`) and forwards th ```js + enableAccessibleFieldDOMStructure={false} + /> @@ -106,8 +106,8 @@ the field consumes some props (e.g: `shouldRespectLeadingZeros`) and forwards th ```js + enableAccessibleFieldDOMStructure={false} + /> @@ -123,7 +123,7 @@ Both components below will render a small size UI: ```js { setSelectedKey(null); }} - enableAccessibleFieldDOMStructure onSelectedSectionsChange={(newSelectedSection) => { selectedSection.current = newSelectedSection; }} diff --git a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.test.tsx b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.test.tsx index 2d6094f4db18..1a75030965ed 100644 --- a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.test.tsx +++ b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.test.tsx @@ -45,7 +45,7 @@ describe('', () => { const originalMatchMedia = window.matchMedia; window.matchMedia = stubMatchMedia(false); - render(); + render(); fireEvent.click(getFieldInputRoot()); clock.runToLast(); diff --git a/packages/x-date-pickers-pro/src/DesktopDateRangePicker/tests/DesktopDateRangePicker.test.tsx b/packages/x-date-pickers-pro/src/DesktopDateRangePicker/tests/DesktopDateRangePicker.test.tsx index 8ec961707343..7c29aef8a818 100644 --- a/packages/x-date-pickers-pro/src/DesktopDateRangePicker/tests/DesktopDateRangePicker.test.tsx +++ b/packages/x-date-pickers-pro/src/DesktopDateRangePicker/tests/DesktopDateRangePicker.test.tsx @@ -30,7 +30,6 @@ describe('', () => { it('should scroll current month to the active selection when focusing appropriate field', () => { render( , @@ -49,10 +48,7 @@ describe('', () => { it(`should not crash when opening picker with invalid date value`, () => { render( - , + , ); openPicker({ type: 'date-range', variant: 'desktop', initialFocus: 'start' }); @@ -74,7 +70,6 @@ describe('', () => { ', () => { describe('Field slot: SingleInputDateRangeField', () => { it('should add focused class to the field when it is focused', () => { - // test v7 behavior + // Test with v7 input const { unmount } = render( - , + , ); const sectionsContainer = getFieldSectionsContainer(); @@ -107,8 +99,13 @@ describe('', () => { unmount(); - // test v6 behavior - render(); + // Test with v6 input + render( + , + ); const input = getTextbox(); act(() => input.focus()); @@ -119,18 +116,20 @@ describe('', () => { it('should render the input with a given `name` when `SingleInputDateRangeField` is used', () => { // Test with v7 input const { unmount } = render( - , + , ); expect(screen.getByRole('textbox', { hidden: true }).name).to.equal('test'); unmount(); // Test with v6 input - render(); + render( + , + ); expect(screen.getByRole('textbox').name).to.equal('test'); }); }); @@ -141,7 +140,6 @@ describe('', () => { const handleTouchStart = spy(); render( ', () => { it('should open when clicking the start input', () => { const onOpen = spy(); - render(); + render(); openPicker({ type: 'date-range', variant: 'desktop', initialFocus: 'start' }); @@ -178,7 +176,7 @@ describe('', () => { it('should open when clicking the end input', () => { const onOpen = spy(); - render(); + render(); openPicker({ type: 'date-range', variant: 'desktop', initialFocus: 'end' }); @@ -190,7 +188,7 @@ describe('', () => { it(`should open when pressing "${key}" in the start input`, () => { const onOpen = spy(); - render(); + render(); const startInput = getFieldSectionsContainer(); act(() => startInput.focus()); @@ -206,7 +204,7 @@ describe('', () => { it(`should open when pressing "${key}" in the end input`, () => { const onOpen = spy(); - render(); + render(); const endInput = getFieldSectionsContainer(1); act(() => endInput.focus()); @@ -229,7 +227,6 @@ describe('', () => { render( ', () => { render( ', () => { render( ', () => { render( ', () => { render(
- +
, ); @@ -404,7 +393,6 @@ describe('', () => { render(
', () => { const onAccept = spy(); const onClose = spy(); - render( - , - ); + render(); // Dismiss the picker fireEvent.click(document.body); @@ -471,12 +452,7 @@ describe('', () => { render( - +