From dcfddcc97ba8c36d47b9f1d2c50d43b2f36a8ec7 Mon Sep 17 00:00:00 2001 From: delangle Date: Tue, 17 Sep 2024 13:28:42 +0200 Subject: [PATCH 01/36] [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 63be3f56e8846..0000000000000 --- 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 49138cd42863e..0000000000000 --- 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 0bb9e399d3cb4..0000000000000 --- 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 5421fd0d4348c..0000000000000 --- 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 b52029d14cde9..0000000000000 --- 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 d797406fa9997..0000000000000 --- 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 311029bbc6fa8..0000000000000 --- 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 6db84b3f6c575..0000000000000 --- 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 bcaf8043948fb..0000000000000 --- 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 35d4e0ca73ead..98a5d2d58c27f 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 35d4e0ca73ead..98a5d2d58c27f 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 027cb7beacfac..9041ed886d8b0 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 df1b5053a7451..0000000000000 --- 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 0c90908a7d4b5..0000000000000 --- 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 cd5ff731abbcd..0000000000000 --- 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 07ba449750d65..0000000000000 --- 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 07ba449750d65..0000000000000 --- 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 9708ed359729e..0000000000000 --- 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 1aac33d076c0d..92e99e278e876 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 aa09717fb29ce..8acbab77d7c40 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 b58ea51d833f3..919acf7aa0f2d 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 5f54b1411f66e..9bd7260fff468 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 0000000000000..0908e7f83b213 --- /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 68a022f3d6aa1..562b5c05a0e49 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 0000000000000..24de8699a05ff --- /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 c6a5c6e350c83..9ad7ac43fb5f8 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 64a1316f3b781..eea5e350438f8 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 984548ad2a1bf..6f80af0bc5370 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 a8e7ba0bea5ce..f73cd9b16c468 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 6c78b053fbf79..534d2dad1d92a 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 c87fe167a003a..b0e6adde5ae91 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 ca613049a78f3..ce92ca6c3266e 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 d70dd6ef8bb12..626441962f9a6 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 b586694783a41..982b59aa5b69d 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 65f89beffb379..72d7722f37dce 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 4a540db67bfb1..5d25736d31078 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 718b2728541dd..34d466bb20e2e 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 2326ebf18ee0f..93b89d7e3429c 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 f9dc8c7a978f9..eb179ea277ba1 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 417e2631f65e5..6f4e72c068510 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 d67d6a040e488..4d5f80635c653 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 640d3670867e2..7dd2d1a33b841 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 93e4a1019b5f8..b651def689656 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 2e99c220e38fa..1a7d839fd9db7 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 57ab1e1830aec..87c96458aad8d 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 1b59fdbaa3434..43788d857e51a 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 1336df730d27b..a051576763c65 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 311209132dddc..1deb937eb3e42 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 e19e41a6345ad..548a7f420f59b 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 beed0975c5cad..5359c274a6546 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 1c7b8b751903a..7e294f835f2d8 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 5410f886c89bc..43c6d60ca9e4e 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 613158d9145b3..291e8876d4e32 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 d5907a41b083c..28e1a918e4ba3 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 1351c1439e33e..84ad07c693f93 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 966c729b63658..266f2ee7e1205 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 77faf64730cf7..73974cf1df822 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 8a8aeefb380e5..91bb4ad8ff301 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 b7b12ed698a6f..0cf77aa7a5171 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 1bf3bbb56e207..c6c9d4e2620f5 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 ff38d040253e2..1422063c0d67b 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 5898915dfd1b4..0594327577d1e 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 a86ee69bf2bd7..816cc7e0624c4 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 9dd69bdf8a68e..648e2c0d791d1 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 0ce1a53d6e40f..fefb71a6f4d42 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 b6749e642eba1..2d4878c2ee130 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 23121361eff63..0eb197e61f838 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 2ad8363212a92..b352615f8e013 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 e558a7b3b7ee9..4b3535b1bff23 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 846ab4be676da..d15db60593499 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/36] 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 9ad7ac43fb5f8..cc96fb4d9bbe6 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 eea5e350438f8..53837bb78ad5e 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 6f80af0bc5370..efae31fdc7273 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 f73cd9b16c468..0e9c9db1e4f91 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 534d2dad1d92a..e6ec08e98baaf 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 b0e6adde5ae91..ee64407b61a2d 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 ce92ca6c3266e..cc6a93f9eec30 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 982b59aa5b69d..0500db59e40bb 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 5d25736d31078..68e21e119e145 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 93b89d7e3429c..a621db2cd46ab 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 6f4e72c068510..40e3af41c1a53 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 7dd2d1a33b841..81466c3a90d43 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 1a7d839fd9db7..197f03a7a9e74 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 43788d857e51a..18945b6cd51ba 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 1deb937eb3e42..85fdbc0f272b5 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 5359c274a6546..b38b3d6375f94 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 43c6d60ca9e4e..b4009feefd3c7 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 28e1a918e4ba3..52ae30b787c03 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 266f2ee7e1205..98eb55cfc7d9f 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 91bb4ad8ff301..1d6068db87f6b 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 c6c9d4e2620f5..eefc6735caf7f 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 0594327577d1e..5106ae24d54a4 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 648e2c0d791d1..6471420f16303 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 2d4878c2ee130..30fcfd7e9ebc3 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/36] 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 f2a6607527baa..549c6d2c6806e 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 6ecc503cc78a5..0438fa82a0918 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 20f3c0875f22e..0abbe9069cf48 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 0908e7f83b213..851bb2a54bca4 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/36] 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 d125a8479b5c8..22560a3bcc800 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 82e06da7316b3..d054e12c04de2 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 17535291f5f3b..a31c9c5bc3512 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 1f32eca967da6..62c0924c3c90d 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 1f32eca967da6..62c0924c3c90d 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 f33bc6c8fdc7e..7315d81692e67 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 851bb2a54bca4..849cdace15e24 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 2d6094f4db182..1a75030965ed5 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 8ec9617073430..7c29aef8a8184 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( - + + ); +}); + +DateRangeButtonField.fieldType = 'single-input'; + +const ButtonDateRangePicker = React.forwardRef((props, ref) => { + const [open, setOpen] = React.useState(false); + + return ( + setOpen(false)} + onOpen={() => setOpen(true)} + /> + ); +}); + +export default function DateRangePickerWithButtonField() { + const [value, setValue] = React.useState([null, null]); + + return ( + + (date ? date.format('MM/DD/YYYY') : 'null')) + .join(' - ') + } + value={value} + onChange={(newValue) => setValue(newValue)} + /> + + ); +} From a1e1090f52cf25c77cf1b79dc12514a5c79616b6 Mon Sep 17 00:00:00 2001 From: flavien Date: Tue, 29 Oct 2024 14:09:51 +0100 Subject: [PATCH 29/36] Fix --- .../DateRangePickerWithButtonField.js | 72 -------------- .../DateRangePickerWithButtonField.tsx | 93 ------------------- ...DateRangePickerWithButtonField.tsx.preview | 13 --- 3 files changed, 178 deletions(-) delete mode 100644 docs/data/date-pickers/custom-field/DateRangePickerWithButtonField.js delete mode 100644 docs/data/date-pickers/custom-field/DateRangePickerWithButtonField.tsx delete mode 100644 docs/data/date-pickers/custom-field/DateRangePickerWithButtonField.tsx.preview diff --git a/docs/data/date-pickers/custom-field/DateRangePickerWithButtonField.js b/docs/data/date-pickers/custom-field/DateRangePickerWithButtonField.js deleted file mode 100644 index 7180636a94dd7..0000000000000 --- a/docs/data/date-pickers/custom-field/DateRangePickerWithButtonField.js +++ /dev/null @@ -1,72 +0,0 @@ -import * as React from 'react'; - -import Button from '@mui/material/Button'; -import useForkRef from '@mui/utils/useForkRef'; - -import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; -import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; -import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker'; - -const DateRangeButtonField = React.forwardRef((props, ref) => { - const { - setOpen, - label, - id, - disabled, - InputProps: { ref: containerRef } = {}, - inputProps: { 'aria-label': ariaLabel } = {}, - } = props; - - const handleRef = useForkRef(ref, containerRef); - - return ( - - ); -}); - -DateRangeButtonField.fieldType = 'single-input'; - -const ButtonDateRangePicker = React.forwardRef((props, ref) => { - const [open, setOpen] = React.useState(false); - - return ( - setOpen(false)} - onOpen={() => setOpen(true)} - /> - ); -}); - -export default function DateRangePickerWithButtonField() { - const [value, setValue] = React.useState([null, null]); - - return ( - - (date ? date.format('MM/DD/YYYY') : 'null')) - .join(' - ') - } - value={value} - onChange={(newValue) => setValue(newValue)} - /> - - ); -} diff --git a/docs/data/date-pickers/custom-field/DateRangePickerWithButtonField.tsx b/docs/data/date-pickers/custom-field/DateRangePickerWithButtonField.tsx deleted file mode 100644 index a3115d15883ee..0000000000000 --- a/docs/data/date-pickers/custom-field/DateRangePickerWithButtonField.tsx +++ /dev/null @@ -1,93 +0,0 @@ -import * as React from 'react'; -import { Dayjs } from 'dayjs'; -import Button from '@mui/material/Button'; -import useForkRef from '@mui/utils/useForkRef'; -import { DateRange, FieldType } from '@mui/x-date-pickers-pro/models'; -import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; -import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; -import { - DateRangePicker, - DateRangePickerProps, -} from '@mui/x-date-pickers-pro/DateRangePicker'; -import { SingleInputDateRangeFieldProps } from '@mui/x-date-pickers-pro/SingleInputDateRangeField'; - -interface DateRangeButtonFieldProps extends SingleInputDateRangeFieldProps { - setOpen?: React.Dispatch>; -} - -type DateRangeButtonFieldComponent = (( - props: DateRangeButtonFieldProps & React.RefAttributes, -) => React.JSX.Element) & { fieldType?: FieldType }; - -const DateRangeButtonField = React.forwardRef( - (props: DateRangeButtonFieldProps, ref: React.Ref) => { - const { - setOpen, - label, - id, - disabled, - InputProps: { ref: containerRef } = {}, - inputProps: { 'aria-label': ariaLabel } = {}, - } = props; - - const handleRef = useForkRef(ref, containerRef); - - return ( - - ); - }, -) as DateRangeButtonFieldComponent; - -DateRangeButtonField.fieldType = 'single-input'; - -const ButtonDateRangePicker = React.forwardRef( - ( - props: Omit, - ref: React.Ref, - ) => { - const [open, setOpen] = React.useState(false); - - return ( - setOpen(false)} - onOpen={() => setOpen(true)} - /> - ); - }, -); - -export default function DateRangePickerWithButtonField() { - const [value, setValue] = React.useState([null, null]); - - return ( - - - date ? (date as Dayjs).format('MM/DD/YYYY') : 'null', - ) - .join(' - ') - } - value={value} - onChange={(newValue) => setValue(newValue)} - /> - - ); -} diff --git a/docs/data/date-pickers/custom-field/DateRangePickerWithButtonField.tsx.preview b/docs/data/date-pickers/custom-field/DateRangePickerWithButtonField.tsx.preview deleted file mode 100644 index 8091325c8d7d3..0000000000000 --- a/docs/data/date-pickers/custom-field/DateRangePickerWithButtonField.tsx.preview +++ /dev/null @@ -1,13 +0,0 @@ - - date ? (date as Dayjs).format('MM/DD/YYYY') : 'null', - ) - .join(' - ') - } - value={value} - onChange={(newValue) => setValue(newValue)} -/> \ No newline at end of file From a2435b074a11c5880b25c565b7af77b696ca9b77 Mon Sep 17 00:00:00 2001 From: flavien Date: Tue, 29 Oct 2024 14:26:13 +0100 Subject: [PATCH 30/36] Fix CI --- .../custom-components/custom-components.md | 11 +++++------ .../behavior-button/MaterialDatePicker.js | 1 - .../behavior-button/MaterialDatePicker.tsx | 5 ++--- .../behavior-button/MaterialDateRangePicker.tsx | 6 +++--- 4 files changed, 10 insertions(+), 13 deletions(-) diff --git a/docs/data/common-concepts/custom-components/custom-components.md b/docs/data/common-concepts/custom-components/custom-components.md index 1875037ac5bfa..e5605eb8ddc9d 100644 --- a/docs/data/common-concepts/custom-components/custom-components.md +++ b/docs/data/common-concepts/custom-components/custom-components.md @@ -105,7 +105,7 @@ you can declare your component using the `PropsFromSlot` interface: ```tsx function CustomCalendarHeader({ currentMonth, -}: PropsFromSlot['calendarHeader']>) { +}: PropsFromSlot) { return
{currentMonth?.format('MM-DD-YYYY')}
; } ``` @@ -129,7 +129,7 @@ import { DateCalendarSlots } from '@mui/x-date-pickers'; type ToolbarProps = PropsFromSlot; // Most of the picker slots interfaces need to receive the date type as a generic. -type CalendarHeaderProps = PropsFromSlot['calendarHeader']>; +type CalendarHeaderProps = PropsFromSlot; ``` ::: @@ -140,7 +140,7 @@ If you are passing additional props to your slot, you can add them to the props ```ts interface CustomCalendarHeaderProps - extends PropsFromSlot['calendarHeader']> { + extends PropsFromSlot { displayWeekNumber: boolean; setDisplayWeekNumber: (displayWeekNumber: boolean) => void; } @@ -178,14 +178,13 @@ function MyApp() { ['calendarHeader'], + calendarHeader: CustomCalendarHeader as DateCalendarSlots['calendarHeader'], }} slotProps={{ calendarHeader: { displayWeekNumber, setDisplayWeekNumber, - } as DateCalendarSlotProps['calendarHeader'], + } as DateCalendarSlotProps['calendarHeader'], }} /> ); diff --git a/docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.js b/docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.js index 11da4bc2ba23c..6082f6580ca7c 100644 --- a/docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.js +++ b/docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.js @@ -1,5 +1,4 @@ import * as React from 'react'; - import Button from '@mui/material/Button'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; diff --git a/docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.tsx b/docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.tsx index 1f31f5d63e6a8..ae9ffb08d896c 100644 --- a/docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.tsx +++ b/docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import { Dayjs } from 'dayjs'; import Button from '@mui/material/Button'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; @@ -15,7 +14,7 @@ import { usePickersContext, } from '@mui/x-date-pickers/hooks'; -function ButtonDateField(props: DatePickerFieldProps) { +function ButtonDateField(props: DatePickerFieldProps) { const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date'); const { value, timezone, format } = internalProps; const { @@ -62,7 +61,7 @@ function ButtonDateField(props: DatePickerFieldProps) { ); } -function ButtonFieldDatePicker(props: DatePickerProps) { +function ButtonFieldDatePicker(props: DatePickerProps) { return ( ); diff --git a/docs/data/date-pickers/custom-field/behavior-button/MaterialDateRangePicker.tsx b/docs/data/date-pickers/custom-field/behavior-button/MaterialDateRangePicker.tsx index bc154d9a2b9f5..6c187cd877984 100644 --- a/docs/data/date-pickers/custom-field/behavior-button/MaterialDateRangePicker.tsx +++ b/docs/data/date-pickers/custom-field/behavior-button/MaterialDateRangePicker.tsx @@ -16,7 +16,7 @@ import { usePickersContext, } from '@mui/x-date-pickers/hooks'; -function ButtonDateRangeField(props: DateRangePickerFieldProps) { +function ButtonDateRangeField(props: DateRangePickerFieldProps) { const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date'); const { value, timezone, format } = internalProps; const { @@ -49,7 +49,7 @@ function ButtonDateRangeField(props: DateRangePickerFieldProps) { }; const formattedValue = (value ?? [null, null]) - .map((date) => (date == null ? parsedFormat : date.format(format))) + .map((date) => (date == null ? parsedFormat : (date as Dayjs).format(format))) .join(' – '); return ( @@ -68,7 +68,7 @@ function ButtonDateRangeField(props: DateRangePickerFieldProps) { // TODO v8: Will be removed before the end of the alpha since single input will become the default field. ButtonDateRangeField.fieldType = 'single-input'; -function ButtonFieldDateRangePicker(props: DateRangePickerProps) { +function ButtonFieldDateRangePicker(props: DateRangePickerProps) { return ( Date: Tue, 29 Oct 2024 14:40:45 +0100 Subject: [PATCH 31/36] Review: Lukas --- docs/data/date-pickers/custom-field/BrowserV7Field.js | 5 +---- docs/data/date-pickers/custom-field/BrowserV7Field.tsx | 5 +---- .../custom-field/BrowserV7SingleInputRangeField.js | 5 +---- .../custom-field/BrowserV7SingleInputRangeField.tsx | 7 +++---- 4 files changed, 6 insertions(+), 16 deletions(-) diff --git a/docs/data/date-pickers/custom-field/BrowserV7Field.js b/docs/data/date-pickers/custom-field/BrowserV7Field.js index b674cb7bb891e..3e6be2ea7b364 100644 --- a/docs/data/date-pickers/custom-field/BrowserV7Field.js +++ b/docs/data/date-pickers/custom-field/BrowserV7Field.js @@ -83,10 +83,7 @@ const BrowserTextField = React.forwardRef((props, ref) => { const BrowserDateField = React.forwardRef((props, ref) => { const { slots, slotProps, ...textFieldProps } = props; - const fieldResponse = useDateField({ - ...textFieldProps, - enableAccessibleFieldDOMStructure: true, - }); + const fieldResponse = useDateField(textFieldProps); /* If you don't need a clear button, you can skip the use of this hook */ const processedFieldProps = useClearableField({ diff --git a/docs/data/date-pickers/custom-field/BrowserV7Field.tsx b/docs/data/date-pickers/custom-field/BrowserV7Field.tsx index 91d2c7a97e59a..95f01afbab35c 100644 --- a/docs/data/date-pickers/custom-field/BrowserV7Field.tsx +++ b/docs/data/date-pickers/custom-field/BrowserV7Field.tsx @@ -117,10 +117,7 @@ const BrowserDateField = React.forwardRef( (props: BrowserDateFieldProps, ref: React.Ref) => { const { slots, slotProps, ...textFieldProps } = props; - const fieldResponse = useDateField({ - ...textFieldProps, - enableAccessibleFieldDOMStructure: true, - }); + const fieldResponse = useDateField(textFieldProps); /* If you don't need a clear button, you can skip the use of this hook */ const processedFieldProps = useClearableField({ diff --git a/docs/data/date-pickers/custom-field/BrowserV7SingleInputRangeField.js b/docs/data/date-pickers/custom-field/BrowserV7SingleInputRangeField.js index 4c021374b6256..a04931569d643 100644 --- a/docs/data/date-pickers/custom-field/BrowserV7SingleInputRangeField.js +++ b/docs/data/date-pickers/custom-field/BrowserV7SingleInputRangeField.js @@ -104,10 +104,7 @@ const BrowserSingleInputDateRangeField = React.forwardRef((props, ref) => { ), }; - const fieldResponse = useSingleInputDateRangeField({ - ...textFieldProps, - enableAccessibleFieldDOMStructure: true, - }); + const fieldResponse = useSingleInputDateRangeField(textFieldProps); /* If you don't need a clear button, you can skip the use of this hook */ const processedFieldProps = useClearableField({ diff --git a/docs/data/date-pickers/custom-field/BrowserV7SingleInputRangeField.tsx b/docs/data/date-pickers/custom-field/BrowserV7SingleInputRangeField.tsx index f36bfe9197dff..390f71b7f7b2c 100644 --- a/docs/data/date-pickers/custom-field/BrowserV7SingleInputRangeField.tsx +++ b/docs/data/date-pickers/custom-field/BrowserV7SingleInputRangeField.tsx @@ -149,10 +149,9 @@ const BrowserSingleInputDateRangeField = React.forwardRef( ), }; - const fieldResponse = useSingleInputDateRangeField({ - ...textFieldProps, - enableAccessibleFieldDOMStructure: true, - }); + const fieldResponse = useSingleInputDateRangeField( + textFieldProps, + ); /* If you don't need a clear button, you can skip the use of this hook */ const processedFieldProps = useClearableField({ From 3851a355a442a40882cae290a3571189d225a03f Mon Sep 17 00:00:00 2001 From: Flavien DELANGLE Date: Tue, 29 Oct 2024 14:56:11 +0100 Subject: [PATCH 32/36] Update .circleci/config.yml Co-authored-by: Lukas Tyla Signed-off-by: Flavien DELANGLE --- .circleci/config.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index f2aa04fcc691c..a5685e260757c 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -211,7 +211,7 @@ jobs: git add -A && git diff --exit-code --staged fi - run: - name: 'No date library import in the pickers build' + name: 'No dynamic date library import in the Pickers built types?' command: | pnpm --filter @mui/x-date-pickers* prebuild pnpm --filter @mui/x-date-pickers* build:types From b252ca8613e75f338ece1487bb911d92d46a425c Mon Sep 17 00:00:00 2001 From: flavien Date: Tue, 29 Oct 2024 15:22:31 +0100 Subject: [PATCH 33/36] Fix --- .../custom-field/PickerWithButtonField.js | 59 -------------- .../custom-field/PickerWithButtonField.tsx | 80 ------------------- .../PickerWithButtonField.tsx.preview | 5 -- 3 files changed, 144 deletions(-) delete mode 100644 docs/data/date-pickers/custom-field/PickerWithButtonField.js delete mode 100644 docs/data/date-pickers/custom-field/PickerWithButtonField.tsx delete mode 100644 docs/data/date-pickers/custom-field/PickerWithButtonField.tsx.preview diff --git a/docs/data/date-pickers/custom-field/PickerWithButtonField.js b/docs/data/date-pickers/custom-field/PickerWithButtonField.js deleted file mode 100644 index ba5162eb73e54..0000000000000 --- a/docs/data/date-pickers/custom-field/PickerWithButtonField.js +++ /dev/null @@ -1,59 +0,0 @@ -import * as React from 'react'; - -import Button from '@mui/material/Button'; -import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; -import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; -import { DatePicker } from '@mui/x-date-pickers/DatePicker'; - -function ButtonField(props) { - const { - setOpen, - label, - id, - disabled, - InputProps: { ref } = {}, - inputProps: { 'aria-label': ariaLabel } = {}, - } = props; - - return ( - - ); -} - -function ButtonDatePicker(props) { - const [open, setOpen] = React.useState(false); - - return ( - setOpen(false)} - onOpen={() => setOpen(true)} - /> - ); -} - -export default function PickerWithButtonField() { - const [value, setValue] = React.useState(null); - - return ( - - - - ); -} diff --git a/docs/data/date-pickers/custom-field/PickerWithButtonField.tsx b/docs/data/date-pickers/custom-field/PickerWithButtonField.tsx deleted file mode 100644 index 9efd6f7c7e248..0000000000000 --- a/docs/data/date-pickers/custom-field/PickerWithButtonField.tsx +++ /dev/null @@ -1,80 +0,0 @@ -import * as React from 'react'; -import { Dayjs } from 'dayjs'; -import Button from '@mui/material/Button'; -import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; -import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; -import { DatePicker, DatePickerProps } from '@mui/x-date-pickers/DatePicker'; -import { UseDateFieldProps } from '@mui/x-date-pickers/DateField'; -import { - BaseSingleInputFieldProps, - DateValidationError, - FieldSection, - PickerValidDate, - SimpleValue, -} from '@mui/x-date-pickers/models'; - -interface ButtonFieldProps - extends UseDateFieldProps, - BaseSingleInputFieldProps< - PickerValidDate | null, - FieldSection, - true, - DateValidationError - > { - setOpen?: React.Dispatch>; -} - -function ButtonField(props: ButtonFieldProps) { - const { - setOpen, - label, - id, - disabled, - InputProps: { ref } = {}, - inputProps: { 'aria-label': ariaLabel } = {}, - } = props; - - return ( - - ); -} - -function ButtonDatePicker( - props: Omit, -) { - const [open, setOpen] = React.useState(false); - - return ( - setOpen(false)} - onOpen={() => setOpen(true)} - /> - ); -} - -export default function PickerWithButtonField() { - const [value, setValue] = React.useState(null); - - return ( - - - - ); -} diff --git a/docs/data/date-pickers/custom-field/PickerWithButtonField.tsx.preview b/docs/data/date-pickers/custom-field/PickerWithButtonField.tsx.preview deleted file mode 100644 index 3d52e8e412a6a..0000000000000 --- a/docs/data/date-pickers/custom-field/PickerWithButtonField.tsx.preview +++ /dev/null @@ -1,5 +0,0 @@ - \ No newline at end of file From dee02384b4d83e188e2d7621d54ebe4bf6f2ba10 Mon Sep 17 00:00:00 2001 From: flavien Date: Thu, 31 Oct 2024 18:15:53 +0100 Subject: [PATCH 34/36] Review: Lukas --- .../adapters-locale/CustomDayOfWeekFormat.tsx | 5 ++--- .../CustomDayOfWeekFormat.tsx.preview | 2 +- .../base-concepts/ControlledComponent.js | 1 + .../base-concepts/ControlledComponent.tsx | 4 ++-- .../ReferenceDateExplicitDateTimePicker.tsx | 5 ++--- ...enceDateExplicitDateTimePicker.tsx.preview | 2 +- .../ReferenceDateExplicitTimePicker.tsx | 5 ++--- ...eferenceDateExplicitTimePicker.tsx.preview | 2 +- .../CalendarHeaderComponent.js | 16 +++++--------- .../CalendarHeaderComponent.tsx | 16 +++++--------- .../CalendarHeaderComponentRange.js | 12 +++-------- .../CalendarHeaderComponentRange.tsx | 12 +++-------- .../custom-field/BrowserV7Field.tsx | 1 + .../BrowserV7MultiInputRangeField.tsx | 4 +++- .../BrowserV7SingleInputRangeField.tsx | 8 +++++-- .../date-pickers/custom-field/JoyV6Field.tsx | 1 + .../JoyV6MultiInputRangeField.tsx | 4 +++- .../JoyV6SingleInputRangeField.tsx | 8 +++++-- .../MaterialDatePicker.tsx | 6 ++---- .../behavior-button/MaterialDatePicker.js | 1 - .../behavior-button/MaterialDatePicker.tsx | 4 +--- .../MaterialDateRangePicker.tsx | 2 +- .../MaskedMaterialTextField.js | 6 ++---- .../MaskedMaterialTextField.tsx | 10 ++++----- .../MaterialDatePicker.js | 1 - .../MaterialDatePicker.tsx | 3 +-- .../date-pickers/custom-field/custom-field.md | 4 ++-- .../custom-layout/AddComponent.tsx | 5 +++-- .../CustomOpeningIconConditional.tsx | 7 ++----- .../CustomOpeningIconConditional.tsx.preview | 4 +--- .../DateCalendarServerRequest.tsx | 10 ++++----- .../date-calendar/DateCalendarValue.tsx | 5 ++--- .../date-pickers/date-calendar/WeekPicker.tsx | 13 ++++++------ .../date-field/DateFieldValue.tsx | 5 ++--- .../date-picker/DatePickerValue.tsx | 5 ++--- .../DateRangeCalendarValue.tsx | 4 ++-- .../date-range-field/DateRangeFieldValue.tsx | 4 ++-- .../date-range-picker/BasicRangeShortcuts.tsx | 4 ++-- .../DateRangePickerValue.tsx | 4 ++-- .../date-time-field/DateTimeFieldValue.tsx | 5 ++--- .../date-time-picker/DateTimePickerValue.tsx | 5 ++--- .../DateTimeRangeFieldValue.tsx | 4 ++-- .../DateTimeRangePickerValue.tsx | 4 ++-- .../digital-clock/DigitalClockSkipDisabled.js | 5 ++--- .../DigitalClockSkipDisabled.tsx | 9 ++++---- .../digital-clock/DigitalClockValue.tsx | 5 ++--- .../date-pickers/fields/ClearableBehavior.js | 1 + .../date-pickers/fields/ClearableBehavior.tsx | 4 ++-- .../lifecycle/LifeCycleDateFieldEmpty.tsx | 7 ++----- .../LifeCycleDateFieldEmpty.tsx.preview | 4 +--- .../lifecycle/LifeCycleDateRangeField.tsx | 9 ++++---- .../LifeCycleDateRangeField.tsx.preview | 4 +--- .../lifecycle/LifeCycleIgnoreInvalidValue.tsx | 7 ++----- .../LifeCycleIgnoreInvalidValue.tsx.preview | 4 +--- .../lifecycle/ServerInteraction.tsx | 21 +++++++++++-------- .../shortcuts/AdvancedRangeShortcuts.js | 9 ++++---- .../shortcuts/AdvancedRangeShortcuts.tsx | 14 ++++++------- .../shortcuts/BasicRangeShortcuts.tsx | 4 ++-- .../shortcuts/CustomizedRangeShortcuts.tsx | 6 +++--- .../shortcuts/OnChangeShortcutLabel.tsx | 5 ++--- .../time-clock/TimeClockValue.tsx | 5 ++--- .../time-field/TimeFieldValue.tsx | 5 ++--- .../time-picker/TimePickerValue.tsx | 5 ++--- .../time-range-field/TimeRangeFieldValue.tsx | 6 +++--- .../timezone/BasicTimezoneProp.tsx | 5 ++--- .../timezone/BasicTimezoneProp.tsx.preview | 2 +- .../date-pickers/timezone/BasicValueProp.tsx | 5 ++--- .../timezone/BasicValueProp.tsx.preview | 2 +- .../date-pickers/timezone/DayjsTimezone.tsx | 5 ++--- .../timezone/DayjsTimezone.tsx.preview | 2 +- docs/data/date-pickers/timezone/DayjsUTC.tsx | 5 ++--- .../timezone/DayjsUTC.tsx.preview | 2 +- .../date-pickers/timezone/LuxonTimezone.tsx | 5 ++--- .../timezone/LuxonTimezone.tsx.preview | 2 +- docs/data/date-pickers/timezone/LuxonUTC.tsx | 5 ++--- .../timezone/LuxonUTC.tsx.preview | 2 +- .../date-pickers/timezone/MomentTimezone.tsx | 5 ++--- .../timezone/MomentTimezone.tsx.preview | 2 +- docs/data/date-pickers/timezone/MomentUTC.tsx | 5 ++--- .../timezone/MomentUTC.tsx.preview | 2 +- .../StoreUTCButDisplayOtherTimezone.tsx | 5 ++--- ...toreUTCButDisplayOtherTimezone.tsx.preview | 2 +- .../StoreUTCButDisplaySystemTimezone.tsx | 5 ++--- ...oreUTCButDisplaySystemTimezone.tsx.preview | 2 +- .../timezone/TimezonePlayground.tsx | 6 +++--- .../DateRangeValidationShouldDisableDate.tsx | 4 ++-- .../DateValidationShouldDisableDate.tsx | 5 ++--- .../DateValidationShouldDisableMonth.tsx | 4 +--- .../DateValidationShouldDisableYear.tsx | 4 +--- .../TimeValidationShouldDisableTime.tsx | 4 ++-- .../MobileKeyboardView.tsx | 7 +++---- docs/data/pickersAdapterOverride.ts | 7 +++++++ .../modules/components/PickersPlayground.tsx | 4 ++-- .../components/overview/mainDemo/Clock.tsx | 6 +++--- .../mainDemo/DateRangeWithShortcuts.tsx | 6 +++--- .../overview/mainDemo/DigitalClock.tsx | 5 +++-- .../overview/mainDemo/PickerButton.tsx | 13 ++++++++---- .../DateRangeCalendar/DateRangeCalendar.tsx | 11 +++++----- .../DateRangeCalendar.types.ts | 9 ++++---- .../src/DateRangeCalendar/useDragRange.ts | 5 +++-- .../DateRangePicker/DateRangePicker.types.ts | 11 +++------- .../DateRangePickerToolbar.tsx | 4 ++-- .../src/DateRangePicker/shared.tsx | 7 ++++--- .../DateTimeRangePicker.types.ts | 15 ++++++++++--- .../DateTimeRangePickerTimeWrapper.tsx | 10 ++++----- .../DateTimeRangePickerToolbar.tsx | 4 ++-- .../src/DateTimeRangePicker/shared.tsx | 11 ++++++---- .../DesktopDateRangePicker.tsx | 9 +++++--- .../tests/DesktopDateRangePicker.test.tsx | 15 ++++++------- .../DesktopDateTimeRangePicker.tsx | 6 +++--- .../MobileDateRangePicker.tsx | 9 +++++--- .../tests/MobileDateRangePicker.test.tsx | 13 ++++++------ .../MobileDateTimeRangePicker.tsx | 10 +++++---- .../SingleInputDateRangeField.types.ts | 5 ++--- .../useSingleInputDateRangeField.ts | 6 +++--- .../SingleInputDateTimeRangeField.types.ts | 6 +++--- .../useSingleInputDateTimeRangeField.ts | 10 ++++++--- .../SingleInputTimeRangeField.types.ts | 6 +++--- .../useSingleInputTimeRangeField.ts | 6 +++--- .../StaticDateRangePicker.tsx | 5 ++--- .../internals/hooks/models/useRangePicker.ts | 17 ++++++++++----- .../useDesktopRangePicker.tsx | 7 ++++--- .../hooks/useEnrichedRangePickerFieldProps.ts | 17 ++++++++------- .../useMobileRangePicker.tsx | 7 ++++--- .../useMultiInputDateRangeField.ts | 6 ++++-- .../useMultiInputDateTimeRangeField.ts | 6 ++++-- .../useMultiInputTimeRangeField.ts | 6 ++++-- .../useStaticRangePicker.tsx | 7 ++++--- .../useStaticRangePicker.types.ts | 11 +++++----- .../src/internals/models/dateTimeRange.ts | 4 ++-- .../src/internals/models/timeRange.ts | 5 ++--- .../utils/date-range-manager.test.ts | 5 +++-- .../src/internals/utils/date-range-manager.ts | 10 ++++----- .../src/internals/utils/date-utils.ts | 12 +++++------ .../src/internals/utils/valueManagers.ts | 12 +++++------ .../src/models/dateRange.ts | 5 ++--- .../x-date-pickers-pro/src/models/range.ts | 3 ++- .../src/validation/validateDateRange.ts | 6 +++--- .../src/validation/validateDateTimeRange.ts | 6 +++--- .../src/validation/validateTimeRange.ts | 10 ++++++--- .../AdapterDateFnsBase/AdapterDateFnsBase.ts | 6 +++--- .../src/AdapterDayjs/AdapterDayjs.ts | 6 +++--- .../src/AdapterMoment/AdapterMoment.ts | 8 +++---- .../AdapterMomentHijri/AdapterMomentHijri.ts | 4 ++-- .../AdapterMomentJalaali.ts | 4 ++-- .../x-date-pickers/src/internals/index.ts | 1 + .../src/internals/models/index.ts | 1 + .../src/internals/models/value.ts | 5 +++++ packages/x-date-pickers/src/models/fields.ts | 1 + packages/x-date-pickers/src/models/index.ts | 1 - packages/x-date-pickers/src/models/value.ts | 6 ------ 151 files changed, 454 insertions(+), 461 deletions(-) create mode 100644 docs/data/pickersAdapterOverride.ts create mode 100644 packages/x-date-pickers/src/internals/models/value.ts delete mode 100644 packages/x-date-pickers/src/models/value.ts diff --git a/docs/data/date-pickers/adapters-locale/CustomDayOfWeekFormat.tsx b/docs/data/date-pickers/adapters-locale/CustomDayOfWeekFormat.tsx index 7b6468c68839c..f5efa592c8a71 100644 --- a/docs/data/date-pickers/adapters-locale/CustomDayOfWeekFormat.tsx +++ b/docs/data/date-pickers/adapters-locale/CustomDayOfWeekFormat.tsx @@ -3,17 +3,16 @@ import dayjs, { Dayjs } from 'dayjs'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { DateCalendar } from '@mui/x-date-pickers/DateCalendar'; -import { SimpleValue } from '@mui/x-date-pickers/models'; export default function CustomDayOfWeekFormat() { - const [value, setValue] = React.useState(dayjs('2022-04-17')); + const [value, setValue] = React.useState(dayjs('2022-04-17')); return ( `${(weekday as Dayjs).format('dd')}.`} + dayOfWeekFormatter={(weekday) => `${weekday.format('dd')}.`} /> ); diff --git a/docs/data/date-pickers/adapters-locale/CustomDayOfWeekFormat.tsx.preview b/docs/data/date-pickers/adapters-locale/CustomDayOfWeekFormat.tsx.preview index 7cd30443f3621..aa3786a11e939 100644 --- a/docs/data/date-pickers/adapters-locale/CustomDayOfWeekFormat.tsx.preview +++ b/docs/data/date-pickers/adapters-locale/CustomDayOfWeekFormat.tsx.preview @@ -1,5 +1,5 @@ `${(weekday as Dayjs).format('dd')}.`} + dayOfWeekFormatter={(weekday) => `${weekday.format('dd')}.`} /> \ No newline at end of file diff --git a/docs/data/date-pickers/base-concepts/ControlledComponent.js b/docs/data/date-pickers/base-concepts/ControlledComponent.js index c6ce305e7c153..aa572d1a900df 100644 --- a/docs/data/date-pickers/base-concepts/ControlledComponent.js +++ b/docs/data/date-pickers/base-concepts/ControlledComponent.js @@ -1,4 +1,5 @@ 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'; diff --git a/docs/data/date-pickers/base-concepts/ControlledComponent.tsx b/docs/data/date-pickers/base-concepts/ControlledComponent.tsx index e278fb104fe3b..10f887cb6574e 100644 --- a/docs/data/date-pickers/base-concepts/ControlledComponent.tsx +++ b/docs/data/date-pickers/base-concepts/ControlledComponent.tsx @@ -1,12 +1,12 @@ import * as React from 'react'; +import { Dayjs } from 'dayjs'; 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 { SimpleValue } from '@mui/x-date-pickers/models'; export default function ControlledComponent() { - const [value, setValue] = React.useState(null); + const [value, setValue] = React.useState(null); return ( diff --git a/docs/data/date-pickers/base-concepts/ReferenceDateExplicitDateTimePicker.tsx b/docs/data/date-pickers/base-concepts/ReferenceDateExplicitDateTimePicker.tsx index afeb3e0210dc9..23f4260f4ddd5 100644 --- a/docs/data/date-pickers/base-concepts/ReferenceDateExplicitDateTimePicker.tsx +++ b/docs/data/date-pickers/base-concepts/ReferenceDateExplicitDateTimePicker.tsx @@ -5,10 +5,9 @@ import Typography from '@mui/material/Typography'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker'; -import { SimpleValue } from '@mui/x-date-pickers/models'; export default function ReferenceDateExplicitDateTimePicker() { - const [value, setValue] = React.useState(null); + const [value, setValue] = React.useState(null); return ( @@ -19,7 +18,7 @@ export default function ReferenceDateExplicitDateTimePicker() { referenceDate={dayjs('2022-04-17T15:30')} /> - Stored value: {value == null ? 'null' : (value as Dayjs).format()} + Stored value: {value == null ? 'null' : value.format()} diff --git a/docs/data/date-pickers/base-concepts/ReferenceDateExplicitDateTimePicker.tsx.preview b/docs/data/date-pickers/base-concepts/ReferenceDateExplicitDateTimePicker.tsx.preview index 56307700d6825..79f365e8b905a 100644 --- a/docs/data/date-pickers/base-concepts/ReferenceDateExplicitDateTimePicker.tsx.preview +++ b/docs/data/date-pickers/base-concepts/ReferenceDateExplicitDateTimePicker.tsx.preview @@ -4,5 +4,5 @@ referenceDate={dayjs('2022-04-17T15:30')} /> - Stored value: {value == null ? 'null' : (value as Dayjs).format()} + Stored value: {value == null ? 'null' : value.format()} \ No newline at end of file diff --git a/docs/data/date-pickers/base-concepts/ReferenceDateExplicitTimePicker.tsx b/docs/data/date-pickers/base-concepts/ReferenceDateExplicitTimePicker.tsx index 86c89616cc7c2..663d064ce4ea0 100644 --- a/docs/data/date-pickers/base-concepts/ReferenceDateExplicitTimePicker.tsx +++ b/docs/data/date-pickers/base-concepts/ReferenceDateExplicitTimePicker.tsx @@ -5,10 +5,9 @@ import Typography from '@mui/material/Typography'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { TimePicker } from '@mui/x-date-pickers/TimePicker'; -import { SimpleValue } from '@mui/x-date-pickers/models'; export default function ReferenceDateExplicitTimePicker() { - const [value, setValue] = React.useState(null); + const [value, setValue] = React.useState(null); return ( @@ -19,7 +18,7 @@ export default function ReferenceDateExplicitTimePicker() { referenceDate={dayjs('2022-04-17')} /> - Stored value: {value == null ? 'null' : (value as Dayjs).format()} + Stored value: {value == null ? 'null' : value.format()} diff --git a/docs/data/date-pickers/base-concepts/ReferenceDateExplicitTimePicker.tsx.preview b/docs/data/date-pickers/base-concepts/ReferenceDateExplicitTimePicker.tsx.preview index 5851f84c0495c..c903a48ae1d9f 100644 --- a/docs/data/date-pickers/base-concepts/ReferenceDateExplicitTimePicker.tsx.preview +++ b/docs/data/date-pickers/base-concepts/ReferenceDateExplicitTimePicker.tsx.preview @@ -4,5 +4,5 @@ referenceDate={dayjs('2022-04-17')} /> - Stored value: {value == null ? 'null' : (value as Dayjs).format()} + Stored value: {value == null ? 'null' : value.format()} \ No newline at end of file diff --git a/docs/data/date-pickers/custom-components/CalendarHeaderComponent.js b/docs/data/date-pickers/custom-components/CalendarHeaderComponent.js index dc1820b6ae33f..03a95b9668921 100644 --- a/docs/data/date-pickers/custom-components/CalendarHeaderComponent.js +++ b/docs/data/date-pickers/custom-components/CalendarHeaderComponent.js @@ -1,5 +1,4 @@ import * as React from 'react'; - import { styled } from '@mui/material/styles'; import Typography from '@mui/material/Typography'; import Stack from '@mui/material/Stack'; @@ -22,16 +21,13 @@ const CustomCalendarHeaderRoot = styled('div')({ function CustomCalendarHeader(props) { const { currentMonth, onMonthChange } = props; - const currentMonthWithKnownAdapter = currentMonth; - const selectNextMonth = () => - onMonthChange(currentMonthWithKnownAdapter.add(1, 'month'), 'left'); - const selectNextYear = () => - onMonthChange(currentMonthWithKnownAdapter.add(1, 'year'), 'left'); + const selectNextMonth = () => onMonthChange(currentMonth.add(1, 'month'), 'left'); + const selectNextYear = () => onMonthChange(currentMonth.add(1, 'year'), 'left'); const selectPreviousMonth = () => - onMonthChange(currentMonthWithKnownAdapter.subtract(1, 'month'), 'right'); + onMonthChange(currentMonth.subtract(1, 'month'), 'right'); const selectPreviousYear = () => - onMonthChange(currentMonthWithKnownAdapter.subtract(1, 'year'), 'right'); + onMonthChange(currentMonth.subtract(1, 'year'), 'right'); return ( @@ -43,9 +39,7 @@ function CustomCalendarHeader(props) { - - {currentMonthWithKnownAdapter.format('MMMM YYYY')} - + {currentMonth.format('MMMM YYYY')} diff --git a/docs/data/date-pickers/custom-components/CalendarHeaderComponent.tsx b/docs/data/date-pickers/custom-components/CalendarHeaderComponent.tsx index 72ebbee4e42eb..1485aff154fc9 100644 --- a/docs/data/date-pickers/custom-components/CalendarHeaderComponent.tsx +++ b/docs/data/date-pickers/custom-components/CalendarHeaderComponent.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import { Dayjs } from 'dayjs'; import { styled } from '@mui/material/styles'; import Typography from '@mui/material/Typography'; import Stack from '@mui/material/Stack'; @@ -23,16 +22,13 @@ const CustomCalendarHeaderRoot = styled('div')({ function CustomCalendarHeader(props: PickersCalendarHeaderProps) { const { currentMonth, onMonthChange } = props; - const currentMonthWithKnownAdapter = currentMonth as Dayjs; - const selectNextMonth = () => - onMonthChange(currentMonthWithKnownAdapter.add(1, 'month'), 'left'); - const selectNextYear = () => - onMonthChange(currentMonthWithKnownAdapter.add(1, 'year'), 'left'); + const selectNextMonth = () => onMonthChange(currentMonth.add(1, 'month'), 'left'); + const selectNextYear = () => onMonthChange(currentMonth.add(1, 'year'), 'left'); const selectPreviousMonth = () => - onMonthChange(currentMonthWithKnownAdapter.subtract(1, 'month'), 'right'); + onMonthChange(currentMonth.subtract(1, 'month'), 'right'); const selectPreviousYear = () => - onMonthChange(currentMonthWithKnownAdapter.subtract(1, 'year'), 'right'); + onMonthChange(currentMonth.subtract(1, 'year'), 'right'); return ( @@ -44,9 +40,7 @@ function CustomCalendarHeader(props: PickersCalendarHeaderProps) { - - {currentMonthWithKnownAdapter.format('MMMM YYYY')} - + {currentMonth.format('MMMM YYYY')} diff --git a/docs/data/date-pickers/custom-components/CalendarHeaderComponentRange.js b/docs/data/date-pickers/custom-components/CalendarHeaderComponentRange.js index c22029de76e59..881a6630a0128 100644 --- a/docs/data/date-pickers/custom-components/CalendarHeaderComponentRange.js +++ b/docs/data/date-pickers/custom-components/CalendarHeaderComponentRange.js @@ -20,16 +20,10 @@ const CustomCalendarHeaderRoot = styled('div')({ function CustomCalendarHeader(props) { const { currentMonth, onMonthChange, month, calendars, monthIndex } = props; - const currentMonthWithKnownAdapter = currentMonth; - const monthWithKnownAdapter = month; - const selectNextMonth = () => - onMonthChange(currentMonthWithKnownAdapter.add(calendars, 'month'), 'left'); + onMonthChange(currentMonth.add(calendars, 'month'), 'left'); const selectPreviousMonth = () => - onMonthChange( - currentMonthWithKnownAdapter.subtract(calendars, 'month'), - 'right', - ); + onMonthChange(currentMonth.subtract(calendars, 'month'), 'right'); return ( @@ -48,7 +42,7 @@ function CustomCalendarHeader(props) { > - {monthWithKnownAdapter.format('MMMM YYYY')} + {month.format('MMMM YYYY')} - onMonthChange(currentMonthWithKnownAdapter.add(calendars, 'month'), 'left'); + onMonthChange(currentMonth.add(calendars, 'month'), 'left'); const selectPreviousMonth = () => - onMonthChange( - currentMonthWithKnownAdapter.subtract(calendars, 'month'), - 'right', - ); + onMonthChange(currentMonth.subtract(calendars, 'month'), 'right'); return ( @@ -49,7 +43,7 @@ function CustomCalendarHeader(props: PickersRangeCalendarHeaderProps) { > - {monthWithKnownAdapter.format('MMMM YYYY')} + {month.format('MMMM YYYY')} , BaseSingleInputFieldProps< + // This usage of PickerValidDate will go away with TIsRange PickerValidDate | null, FieldSection, true, diff --git a/docs/data/date-pickers/custom-field/BrowserV7MultiInputRangeField.tsx b/docs/data/date-pickers/custom-field/BrowserV7MultiInputRangeField.tsx index 913da95479368..725a629ce03f4 100644 --- a/docs/data/date-pickers/custom-field/BrowserV7MultiInputRangeField.tsx +++ b/docs/data/date-pickers/custom-field/BrowserV7MultiInputRangeField.tsx @@ -5,6 +5,7 @@ import { styled } from '@mui/material/styles'; import Stack from '@mui/material/Stack'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { PickerValidDate } from '@mui/x-date-pickers/models'; import { DateRangePicker, DateRangePickerProps, @@ -109,7 +110,8 @@ const BrowserTextField = React.forwardRef( interface BrowserMultiInputDateRangeFieldProps extends UseDateRangeFieldProps, BaseMultiInputFieldProps< - DateRange, + // This usage of PickerValidDate will go away with TIsRange + DateRange, RangeFieldSection, true, DateRangeValidationError diff --git a/docs/data/date-pickers/custom-field/BrowserV7SingleInputRangeField.tsx b/docs/data/date-pickers/custom-field/BrowserV7SingleInputRangeField.tsx index 390f71b7f7b2c..adfe261465913 100644 --- a/docs/data/date-pickers/custom-field/BrowserV7SingleInputRangeField.tsx +++ b/docs/data/date-pickers/custom-field/BrowserV7SingleInputRangeField.tsx @@ -24,7 +24,10 @@ import { DateRange, FieldType, } from '@mui/x-date-pickers-pro/models'; -import { BaseSingleInputFieldProps } from '@mui/x-date-pickers/models'; +import { + BaseSingleInputFieldProps, + PickerValidDate, +} from '@mui/x-date-pickers/models'; const BrowserFieldRoot = styled('div', { name: 'BrowserField', slot: 'Root' })({ display: 'flex', @@ -115,7 +118,8 @@ const BrowserTextField = React.forwardRef( interface BrowserSingleInputDateRangeFieldProps extends UseSingleInputDateRangeFieldProps, BaseSingleInputFieldProps< - DateRange, + // This usage of PickerValidDate will go away with TIsRange + DateRange, RangeFieldSection, true, DateRangeValidationError diff --git a/docs/data/date-pickers/custom-field/JoyV6Field.tsx b/docs/data/date-pickers/custom-field/JoyV6Field.tsx index b419b25bea4e5..a2dfdebe92559 100644 --- a/docs/data/date-pickers/custom-field/JoyV6Field.tsx +++ b/docs/data/date-pickers/custom-field/JoyV6Field.tsx @@ -102,6 +102,7 @@ const JoyField = React.forwardRef( interface JoyDateFieldProps extends UseDateFieldProps, BaseSingleInputFieldProps< + // This usage of PickerValidDate will go away with TIsRange PickerValidDate | null, FieldSection, false, diff --git a/docs/data/date-pickers/custom-field/JoyV6MultiInputRangeField.tsx b/docs/data/date-pickers/custom-field/JoyV6MultiInputRangeField.tsx index c52a094d1f422..ce976dd69843a 100644 --- a/docs/data/date-pickers/custom-field/JoyV6MultiInputRangeField.tsx +++ b/docs/data/date-pickers/custom-field/JoyV6MultiInputRangeField.tsx @@ -19,6 +19,7 @@ import FormLabel from '@mui/joy/FormLabel'; import Typography, { TypographyProps } from '@mui/joy/Typography'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { PickerValidDate } from '@mui/x-date-pickers/models'; import { DateRangePicker, DateRangePickerProps, @@ -133,7 +134,8 @@ const MultiInputJoyDateRangeFieldSeparator = styled( interface JoyMultiInputDateRangeFieldProps extends UseDateRangeFieldProps, BaseMultiInputFieldProps< - DateRange, + // This usage of PickerValidDate will go away with TIsRange + DateRange, RangeFieldSection, false, DateRangeValidationError diff --git a/docs/data/date-pickers/custom-field/JoyV6SingleInputRangeField.tsx b/docs/data/date-pickers/custom-field/JoyV6SingleInputRangeField.tsx index 04f9735c50242..e2815f70d823b 100644 --- a/docs/data/date-pickers/custom-field/JoyV6SingleInputRangeField.tsx +++ b/docs/data/date-pickers/custom-field/JoyV6SingleInputRangeField.tsx @@ -27,7 +27,10 @@ import { 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 { + BaseSingleInputFieldProps, + PickerValidDate, +} from '@mui/x-date-pickers/models'; import { RangeFieldSection, DateRange, @@ -102,7 +105,8 @@ const JoyField = React.forwardRef( interface JoySingleInputDateRangeFieldProps extends UseSingleInputDateRangeFieldProps, BaseSingleInputFieldProps< - DateRange, + // This usage of PickerValidDate will go away with TIsRange + DateRange, RangeFieldSection, false, DateRangeValidationError diff --git a/docs/data/date-pickers/custom-field/behavior-autocomplete/MaterialDatePicker.tsx b/docs/data/date-pickers/custom-field/behavior-autocomplete/MaterialDatePicker.tsx index c5c0c0e6e3abc..10228ff08be1b 100644 --- a/docs/data/date-pickers/custom-field/behavior-autocomplete/MaterialDatePicker.tsx +++ b/docs/data/date-pickers/custom-field/behavior-autocomplete/MaterialDatePicker.tsx @@ -94,7 +94,7 @@ function AutocompleteField(props: AutocompleteFieldProps) { return option.format('MM / DD / YYYY'); }} - value={value as Dayjs} + value={value} onChange={(_, newValue) => { onChange?.(newValue, { validationError: null }); }} @@ -131,9 +131,7 @@ function AutocompleteDatePicker(props: AutocompleteDatePickerProps) { - !optionsLookup[(date as Dayjs).startOf('day').toISOString()] - } + shouldDisableDate={(date) => !optionsLookup[date.startOf('day').toISOString()]} {...other} /> ); diff --git a/docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.js b/docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.js index 2a57d6d715f36..14a382ac58f43 100644 --- a/docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.js +++ b/docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.js @@ -1,5 +1,4 @@ import * as React from 'react'; - import Button from '@mui/material/Button'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; diff --git a/docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.tsx b/docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.tsx index 9eff1a204077b..4479e95604663 100644 --- a/docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.tsx +++ b/docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import { Dayjs } from 'dayjs'; import Button from '@mui/material/Button'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; @@ -47,8 +46,7 @@ function ButtonDateField(props: DatePickerFieldProps) { } }; - const formattedValue = - value == null ? parsedFormat : (value as Dayjs).format(format); + const formattedValue = value == null ? parsedFormat : value.format(format); return ( ); } diff --git a/docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.tsx b/docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.tsx index 4479e95604663..ae9ffb08d896c 100644 --- a/docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.tsx +++ b/docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.tsx @@ -46,7 +46,7 @@ function ButtonDateField(props: DatePickerFieldProps) { } }; - const formattedValue = value == null ? parsedFormat : value.format(format); + const valueStr = value == null ? parsedFormat : value.format(format); return ( ); } diff --git a/docs/data/date-pickers/custom-field/behavior-masked-text-field/MaskedMaterialTextField.js b/docs/data/date-pickers/custom-field/behavior-masked-text-field/MaskedMaterialTextField.js index 7d0685d3c35f7..0723d4565c514 100644 --- a/docs/data/date-pickers/custom-field/behavior-masked-text-field/MaskedMaterialTextField.js +++ b/docs/data/date-pickers/custom-field/behavior-masked-text-field/MaskedMaterialTextField.js @@ -15,12 +15,12 @@ const ACCEPT_REGEX = /[\d]/gi; const staticDateWith2DigitTokens = dayjs('2019-11-21T11:30:00.000'); const staticDateWith1DigitTokens = dayjs('2019-01-01T09:00:00.000'); -function getInputValueFromDate(date, format) { - if (date == null) { +function getValueStrFromValue(value, format) { + if (value == null) { return ''; } - return date.isValid() ? date.format(format) : ''; + return value.isValid() ? value.format(format) : ''; } function MaskedField(props) { @@ -46,12 +46,12 @@ function MaskedField(props) { // Control the input text const [inputValue, setInputValue] = React.useState(() => - getInputValueFromDate(value, format), + getValueStrFromValue(value, format), ); React.useEffect(() => { if (value && value.isValid()) { - const newDisplayDate = getInputValueFromDate(value, format); + const newDisplayDate = getValueStrFromValue(value, format); setInputValue(newDisplayDate); } }, [format, value]); diff --git a/docs/data/date-pickers/custom-field/behavior-masked-text-field/MaskedMaterialTextField.tsx b/docs/data/date-pickers/custom-field/behavior-masked-text-field/MaskedMaterialTextField.tsx index a2a4807660863..13c0a71b54568 100644 --- a/docs/data/date-pickers/custom-field/behavior-masked-text-field/MaskedMaterialTextField.tsx +++ b/docs/data/date-pickers/custom-field/behavior-masked-text-field/MaskedMaterialTextField.tsx @@ -19,12 +19,12 @@ const ACCEPT_REGEX = /[\d]/gi; const staticDateWith2DigitTokens = dayjs('2019-11-21T11:30:00.000'); const staticDateWith1DigitTokens = dayjs('2019-01-01T09:00:00.000'); -function getInputValueFromDate(date: Dayjs | null, format: string) { - if (date == null) { +function getValueStrFromValue(value: Dayjs | null, format: string) { + if (value == null) { return ''; } - return date.isValid() ? date.format(format) : ''; + return value.isValid() ? value.format(format) : ''; } function MaskedField(props: DatePickerFieldProps) { @@ -50,12 +50,12 @@ function MaskedField(props: DatePickerFieldProps) { // Control the input text const [inputValue, setInputValue] = React.useState(() => - getInputValueFromDate(value, format), + getValueStrFromValue(value, format), ); React.useEffect(() => { if (value && value.isValid()) { - const newDisplayDate = getInputValueFromDate(value, format); + const newDisplayDate = getValueStrFromValue(value, format); setInputValue(newDisplayDate); } }, [format, value]); diff --git a/docs/data/date-pickers/date-calendar/DateCalendarValue.js b/docs/data/date-pickers/date-calendar/DateCalendarValue.js index c690fb3f237b2..d52585f46af1d 100644 --- a/docs/data/date-pickers/date-calendar/DateCalendarValue.js +++ b/docs/data/date-pickers/date-calendar/DateCalendarValue.js @@ -15,7 +15,7 @@ export default function DateCalendarValue() { - + setValue(newValue)} /> diff --git a/docs/data/date-pickers/date-calendar/DateCalendarValue.tsx b/docs/data/date-pickers/date-calendar/DateCalendarValue.tsx index 6a0b29efd7b74..b123280c174a1 100644 --- a/docs/data/date-pickers/date-calendar/DateCalendarValue.tsx +++ b/docs/data/date-pickers/date-calendar/DateCalendarValue.tsx @@ -15,7 +15,7 @@ export default function DateCalendarValue() { - + setValue(newValue)} /> diff --git a/docs/data/date-pickers/date-calendar/DateCalendarValue.tsx.preview b/docs/data/date-pickers/date-calendar/DateCalendarValue.tsx.preview index 00e6b756ba865..ce3c4579060ff 100644 --- a/docs/data/date-pickers/date-calendar/DateCalendarValue.tsx.preview +++ b/docs/data/date-pickers/date-calendar/DateCalendarValue.tsx.preview @@ -2,5 +2,5 @@ - + setValue(newValue)} /> \ No newline at end of file diff --git a/docs/data/date-pickers/date-field/DateFieldValue.js b/docs/data/date-pickers/date-field/DateFieldValue.js index 25a02faf37f8e..b956153ebba8b 100644 --- a/docs/data/date-pickers/date-field/DateFieldValue.js +++ b/docs/data/date-pickers/date-field/DateFieldValue.js @@ -12,7 +12,11 @@ export default function DateFieldValue() { - + setValue(newValue)} + /> ); diff --git a/docs/data/date-pickers/date-field/DateFieldValue.tsx b/docs/data/date-pickers/date-field/DateFieldValue.tsx index 87c21c5be5313..e4e26fd70f519 100644 --- a/docs/data/date-pickers/date-field/DateFieldValue.tsx +++ b/docs/data/date-pickers/date-field/DateFieldValue.tsx @@ -12,7 +12,11 @@ export default function DateFieldValue() { - + setValue(newValue)} + /> ); diff --git a/docs/data/date-pickers/date-field/DateFieldValue.tsx.preview b/docs/data/date-pickers/date-field/DateFieldValue.tsx.preview index de10d6ed45c16..df9ed2abd024b 100644 --- a/docs/data/date-pickers/date-field/DateFieldValue.tsx.preview +++ b/docs/data/date-pickers/date-field/DateFieldValue.tsx.preview @@ -1,2 +1,6 @@ - \ No newline at end of file + setValue(newValue)} +/> \ No newline at end of file diff --git a/docs/data/date-pickers/date-range-calendar/DateRangeCalendarValue.js b/docs/data/date-pickers/date-range-calendar/DateRangeCalendarValue.js index 9206d11c9f91a..e6c05d164921b 100644 --- a/docs/data/date-pickers/date-range-calendar/DateRangeCalendarValue.js +++ b/docs/data/date-pickers/date-range-calendar/DateRangeCalendarValue.js @@ -20,7 +20,10 @@ export default function DateRangeCalendarValue() { /> - + setValue(newValue)} + /> diff --git a/docs/data/date-pickers/date-range-calendar/DateRangeCalendarValue.tsx b/docs/data/date-pickers/date-range-calendar/DateRangeCalendarValue.tsx index f0b3aff6f9849..eb4d8353c36ab 100644 --- a/docs/data/date-pickers/date-range-calendar/DateRangeCalendarValue.tsx +++ b/docs/data/date-pickers/date-range-calendar/DateRangeCalendarValue.tsx @@ -21,7 +21,10 @@ export default function DateRangeCalendarValue() { /> - + setValue(newValue)} + /> diff --git a/docs/data/date-pickers/date-range-calendar/DateRangeCalendarValue.tsx.preview b/docs/data/date-pickers/date-range-calendar/DateRangeCalendarValue.tsx.preview index 4d914add554eb..c5c69bb97ef54 100644 --- a/docs/data/date-pickers/date-range-calendar/DateRangeCalendarValue.tsx.preview +++ b/docs/data/date-pickers/date-range-calendar/DateRangeCalendarValue.tsx.preview @@ -4,5 +4,8 @@ /> - + setValue(newValue)} + /> \ No newline at end of file diff --git a/docs/data/date-pickers/date-time-field/DateTimeFieldValue.js b/docs/data/date-pickers/date-time-field/DateTimeFieldValue.js index 2f4aa0d2b1506..dc16688271942 100644 --- a/docs/data/date-pickers/date-time-field/DateTimeFieldValue.js +++ b/docs/data/date-pickers/date-time-field/DateTimeFieldValue.js @@ -15,7 +15,11 @@ export default function DateTimeFieldValue() { label="Uncontrolled field" defaultValue={dayjs('2022-04-17T15:30')} /> - + setValue(newValue)} + /> ); diff --git a/docs/data/date-pickers/date-time-field/DateTimeFieldValue.tsx b/docs/data/date-pickers/date-time-field/DateTimeFieldValue.tsx index 5ac133eead559..1397465ae6062 100644 --- a/docs/data/date-pickers/date-time-field/DateTimeFieldValue.tsx +++ b/docs/data/date-pickers/date-time-field/DateTimeFieldValue.tsx @@ -15,7 +15,11 @@ export default function DateTimeFieldValue() { label="Uncontrolled field" defaultValue={dayjs('2022-04-17T15:30')} /> - + setValue(newValue)} + /> ); diff --git a/docs/data/date-pickers/date-time-field/DateTimeFieldValue.tsx.preview b/docs/data/date-pickers/date-time-field/DateTimeFieldValue.tsx.preview index 32429cc82c87f..7e36b186cdac1 100644 --- a/docs/data/date-pickers/date-time-field/DateTimeFieldValue.tsx.preview +++ b/docs/data/date-pickers/date-time-field/DateTimeFieldValue.tsx.preview @@ -2,4 +2,8 @@ label="Uncontrolled field" defaultValue={dayjs('2022-04-17T15:30')} /> - \ No newline at end of file + setValue(newValue)} +/> \ No newline at end of file diff --git a/docs/data/date-pickers/digital-clock/DigitalClockValue.js b/docs/data/date-pickers/digital-clock/DigitalClockValue.js index 415e8ad380a77..8ab7c3bb66069 100644 --- a/docs/data/date-pickers/digital-clock/DigitalClockValue.js +++ b/docs/data/date-pickers/digital-clock/DigitalClockValue.js @@ -24,7 +24,10 @@ export default function DigitalClockValue() { - + setValue(newValue)} + /> - + setValue(newValue)} + /> diff --git a/docs/data/date-pickers/digital-clock/DigitalClockValue.tsx b/docs/data/date-pickers/digital-clock/DigitalClockValue.tsx index bde3e47c17e97..882d0bd52b0bf 100644 --- a/docs/data/date-pickers/digital-clock/DigitalClockValue.tsx +++ b/docs/data/date-pickers/digital-clock/DigitalClockValue.tsx @@ -24,7 +24,10 @@ export default function DigitalClockValue() { - + setValue(newValue)} + /> - + setValue(newValue)} + /> diff --git a/docs/data/date-pickers/fields/ClearableBehavior.js b/docs/data/date-pickers/fields/ClearableBehavior.js index d2df739bbe9f2..c66c5e1538ba8 100644 --- a/docs/data/date-pickers/fields/ClearableBehavior.js +++ b/docs/data/date-pickers/fields/ClearableBehavior.js @@ -37,7 +37,7 @@ export default function ClearableBehavior() { setValue(newValue)} onClear={() => setCleared(true)} clearable /> diff --git a/docs/data/date-pickers/fields/ClearableBehavior.tsx b/docs/data/date-pickers/fields/ClearableBehavior.tsx index e06a48a3ac680..0aeceeaf2950e 100644 --- a/docs/data/date-pickers/fields/ClearableBehavior.tsx +++ b/docs/data/date-pickers/fields/ClearableBehavior.tsx @@ -37,7 +37,7 @@ export default function ClearableBehavior() { setValue(newValue)} onClear={() => setCleared(true)} clearable /> diff --git a/docs/data/date-pickers/time-clock/TimeClockValue.js b/docs/data/date-pickers/time-clock/TimeClockValue.js index f05035f944308..1358860d8cc10 100644 --- a/docs/data/date-pickers/time-clock/TimeClockValue.js +++ b/docs/data/date-pickers/time-clock/TimeClockValue.js @@ -15,7 +15,7 @@ export default function TimeClockValue() { - + setValue(newValue)} /> diff --git a/docs/data/date-pickers/time-clock/TimeClockValue.tsx b/docs/data/date-pickers/time-clock/TimeClockValue.tsx index 2d5cd57ba7f5c..c514ceb62fbcf 100644 --- a/docs/data/date-pickers/time-clock/TimeClockValue.tsx +++ b/docs/data/date-pickers/time-clock/TimeClockValue.tsx @@ -15,7 +15,7 @@ export default function TimeClockValue() { - + setValue(newValue)} /> diff --git a/docs/data/date-pickers/time-clock/TimeClockValue.tsx.preview b/docs/data/date-pickers/time-clock/TimeClockValue.tsx.preview index e87ba575ead9b..02a4962dc4e59 100644 --- a/docs/data/date-pickers/time-clock/TimeClockValue.tsx.preview +++ b/docs/data/date-pickers/time-clock/TimeClockValue.tsx.preview @@ -2,5 +2,5 @@ - + setValue(newValue)} /> \ No newline at end of file diff --git a/docs/data/date-pickers/time-field/TimeFieldValue.js b/docs/data/date-pickers/time-field/TimeFieldValue.js index 8a052c0006012..1308f41258a13 100644 --- a/docs/data/date-pickers/time-field/TimeFieldValue.js +++ b/docs/data/date-pickers/time-field/TimeFieldValue.js @@ -15,7 +15,11 @@ export default function TimeFieldValue() { label="Uncontrolled field" defaultValue={dayjs('2022-04-17T15:30')} /> - + setValue(newValue)} + /> ); diff --git a/docs/data/date-pickers/time-field/TimeFieldValue.tsx b/docs/data/date-pickers/time-field/TimeFieldValue.tsx index 716d71c7db7b1..24f5cf2bb4b1d 100644 --- a/docs/data/date-pickers/time-field/TimeFieldValue.tsx +++ b/docs/data/date-pickers/time-field/TimeFieldValue.tsx @@ -15,7 +15,11 @@ export default function TimeFieldValue() { label="Uncontrolled field" defaultValue={dayjs('2022-04-17T15:30')} /> - + setValue(newValue)} + /> ); diff --git a/docs/data/date-pickers/time-field/TimeFieldValue.tsx.preview b/docs/data/date-pickers/time-field/TimeFieldValue.tsx.preview index 1ec6e5029a919..1c5433da96d6a 100644 --- a/docs/data/date-pickers/time-field/TimeFieldValue.tsx.preview +++ b/docs/data/date-pickers/time-field/TimeFieldValue.tsx.preview @@ -2,4 +2,8 @@ label="Uncontrolled field" defaultValue={dayjs('2022-04-17T15:30')} /> - \ No newline at end of file + setValue(newValue)} +/> \ No newline at end of file diff --git a/docs/data/date-pickers/time-range-field/TimeRangeFieldValue.js b/docs/data/date-pickers/time-range-field/TimeRangeFieldValue.js index a80b3a7e4e59e..064f8a8b57670 100644 --- a/docs/data/date-pickers/time-range-field/TimeRangeFieldValue.js +++ b/docs/data/date-pickers/time-range-field/TimeRangeFieldValue.js @@ -2,6 +2,7 @@ import * as React from 'react'; import dayjs from 'dayjs'; import { DemoContainer } from '@mui/x-date-pickers/internals/demo'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; + import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { SingleInputTimeRangeField } from '@mui/x-date-pickers-pro/SingleInputTimeRangeField'; diff --git a/docs/data/date-pickers/time-range-field/TimeRangeFieldValue.tsx b/docs/data/date-pickers/time-range-field/TimeRangeFieldValue.tsx index 445b63b9b82c4..84456a6a3be0f 100644 --- a/docs/data/date-pickers/time-range-field/TimeRangeFieldValue.tsx +++ b/docs/data/date-pickers/time-range-field/TimeRangeFieldValue.tsx @@ -2,9 +2,9 @@ import * as React from 'react'; import dayjs, { Dayjs } from 'dayjs'; import { DemoContainer } from '@mui/x-date-pickers/internals/demo'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { DateRange } from '@mui/x-date-pickers-pro/models'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { SingleInputTimeRangeField } from '@mui/x-date-pickers-pro/SingleInputTimeRangeField'; -import { DateRange } from '@mui/x-date-pickers-pro/models'; export default function TimeRangeFieldValue() { const [value, setValue] = React.useState>(() => [ diff --git a/docs/data/pickersAdapterOverride.ts b/docs/data/pickersAdapterOverride.ts index 9a44f4d41493b..1e3fec79c0a92 100644 --- a/docs/data/pickersAdapterOverride.ts +++ b/docs/data/pickersAdapterOverride.ts @@ -1,3 +1,5 @@ +// This module override mark all the date object in the doc to be any instead of Date | Dayjs | Moment | DateTime. +// That way we can use date library methods without casting the date object to a specific type. declare module '@mui/x-date-pickers/models' { interface PickerValidDateLookup { fakeDocAdapter: any; diff --git a/docs/src/modules/components/overview/mainDemo/PickerButton.tsx b/docs/src/modules/components/overview/mainDemo/PickerButton.tsx index 36ffe8f3ede2f..7dee0bad4fed3 100644 --- a/docs/src/modules/components/overview/mainDemo/PickerButton.tsx +++ b/docs/src/modules/components/overview/mainDemo/PickerButton.tsx @@ -61,7 +61,7 @@ export default function PickerButton() { setValue(newValue)} slots={{ field: ButtonField }} slotProps={{ field: { setOpen } as any, diff --git a/packages/x-date-pickers-pro/src/models/range.ts b/packages/x-date-pickers-pro/src/models/range.ts index 1f0663466c4f8..d0a4b4de2b1df 100644 --- a/packages/x-date-pickers-pro/src/models/range.ts +++ b/packages/x-date-pickers-pro/src/models/range.ts @@ -1,5 +1,6 @@ import { PickerValidDate } from '@mui/x-date-pickers/models'; +// Should not be used in our packages, instead use `PickerRangeValue` from the community package. export type DateRange = [TDate | null, TDate | null]; // TODO v8: Remove