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 80495bb87a3a..5abfeb0ee457 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useField.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useField.ts @@ -1,11 +1,5 @@ -import * as React from 'react'; import { PickerAnyValueManagerV8, PickerManagerProperties } from '../../../models'; -import { useLocalizationContext } from '../useUtils'; -import { - UseFieldWithKnownDOMStructureParameters, - UseFieldResponse, - UseFieldForwardedProps, -} from './useField.types'; +import { UseFieldResponse, UseFieldForwardedProps, UseFieldParameters } from './useField.types'; import { useFieldAccessibleDOMStructure } from './useFieldAccessibleDOMStructure'; import { useFieldLegacyDOMStructure } from './useFieldLegacyDOMStructure'; @@ -20,41 +14,14 @@ export const useField = < PickerManagerProperties['enableAccessibleFieldDOMStructure'], TForwardedProps > => { - const { valueManager, forwardedProps, internalProps } = parameters; + const useFieldWithKnownDOMStructure = (parameters.internalProps.enableAccessibleFieldDOMStructure + ? useFieldAccessibleDOMStructure + : useFieldLegacyDOMStructure) as unknown as ( + params: UseFieldParameters, + ) => UseFieldResponse< + PickerManagerProperties['enableAccessibleFieldDOMStructure'], + TForwardedProps + >; - const localizationContext = useLocalizationContext['date']>(); - - const internalPropsWithDefaults = React.useMemo( - () => - valueManager.applyDefaultsToFieldInternalProps({ - ...localizationContext, - internalProps, - }), - [valueManager, localizationContext, internalProps], - ); - - const useFieldWithKnownDOMStructure = ( - internalPropsWithDefaults.enableAccessibleFieldDOMStructure - ? useFieldAccessibleDOMStructure - : useFieldLegacyDOMStructure - ) as ( - params: UseFieldWithKnownDOMStructureParameters, - ) => UseFieldResponse; - - return useFieldWithKnownDOMStructure({ - valueManager, - forwardedProps, - internalPropsWithDefaults, - }); + return useFieldWithKnownDOMStructure(parameters); }; - -export interface UseFieldParameters< - TManager extends PickerAnyValueManagerV8, - TForwardedProps extends UseFieldForwardedProps< - PickerManagerProperties['enableAccessibleFieldDOMStructure'] - >, -> { - valueManager: TManager; - forwardedProps: TForwardedProps; - internalProps: PickerManagerProperties['internalProps']; -} 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 189aacbcf303..e6f76d0a393d 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 @@ -16,7 +16,7 @@ import { import type { PickersSectionElement } from '../../../PickersSectionList'; import { ExportedUseClearableFieldProps } from '../../../hooks/useClearableField'; -export interface UseFieldWithKnownDOMStructureParameters< +export interface UseFieldParameters< TManager extends PickerAnyValueManagerV8, TForwardedProps extends UseFieldForwardedProps< PickerManagerProperties['enableAccessibleFieldDOMStructure'] @@ -24,7 +24,7 @@ export interface UseFieldWithKnownDOMStructureParameters< > { valueManager: TManager; forwardedProps: TForwardedProps; - internalPropsWithDefaults: PickerManagerProperties['internalPropsWithDefaults']; + internalProps: PickerManagerProperties['internalProps']; } export interface UseFieldInternalProps< diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useFieldAccessibleDOMStructure.ts b/packages/x-date-pickers/src/internals/hooks/useField/useFieldAccessibleDOMStructure.ts index cfbe567fbfc1..50d66f330342 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useFieldAccessibleDOMStructure.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useFieldAccessibleDOMStructure.ts @@ -1,10 +1,10 @@ import * as React from 'react'; import useForkRef from '@mui/utils/useForkRef'; -import { PickerAnyAccessibleValueManagerV8 } from '../../../models'; +import { PickerAnyAccessibleValueManagerV8, PickerManagerProperties } from '../../../models'; import { UseFieldAccessibleDOMGetters, UseFieldForwardedProps, - UseFieldWithKnownDOMStructureParameters, + UseFieldParameters, UseFieldResponse, } from './useField.types'; import type { PickersSectionElement } from '../../../PickersSectionList'; @@ -17,21 +17,32 @@ import { useFieldAccessibleContainerProps } from './useFieldAccessibleContainerP import { useFieldAccessibleSectionContentProps } from './useFieldAccessibleSectionContentProps'; import { useFieldAccessibleSectionContainerProps } from './useFieldAccessibleSectionContainerProps'; import { useFieldAccessibleHiddenInputProps } from './useFieldAccessibleHiddenInputProps'; +import { useLocalizationContext } from '../useUtils'; export const useFieldAccessibleDOMStructure = < TManager extends PickerAnyAccessibleValueManagerV8, TForwardedProps extends UseFieldForwardedProps, >( - parameters: UseFieldWithKnownDOMStructureParameters, + parameters: UseFieldParameters, ): UseFieldResponse => { const { - internalPropsWithDefaults, - internalPropsWithDefaults: { disabled, readOnly = false }, + internalProps, forwardedProps, forwardedProps: { sectionListRef: sectionListRefProp, focused: focusedProp, autoFocus = false }, valueManager, } = parameters; + const localizationContext = useLocalizationContext['date']>(); + + const internalPropsWithDefaults = React.useMemo( + () => + valueManager.applyDefaultsToFieldInternalProps({ + ...localizationContext, + internalProps, + }), + [valueManager, localizationContext, internalProps], + ); + // Management of `sectionListRef` (won't be present in `PickersField`) const sectionListRef = React.useRef(null); const handleSectionListRef = useForkRef(sectionListRefProp, sectionListRef); @@ -158,7 +169,7 @@ export const useFieldAccessibleDOMStructure = < enableAccessibleFieldDOMStructure: true, elements, areAllSectionsEmpty: stateResponse.areAllSectionsEmpty, - disabled, - readOnly, + disabled: internalProps.disabled, + readOnly: internalProps.readOnly, }; }; diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useFieldLegacyDOMStructure.ts b/packages/x-date-pickers/src/internals/hooks/useField/useFieldLegacyDOMStructure.ts index 8b3795fd2dc8..3987d023228a 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useFieldLegacyDOMStructure.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useFieldLegacyDOMStructure.ts @@ -12,7 +12,7 @@ import { UseFieldWithKnownDOMStructureParameters, UseFieldResponse, } from './useField.types'; -import { FieldSection, PickerAnyValueManagerV8 } from '../../../models'; +import { FieldSection, PickerAnyValueManagerV8, PickerManagerProperties } from '../../../models'; import { getActiveElement } from '../../utils/utils'; import { buildDefaultSectionOrdering, getSectionVisibleValue } from './useField.utils'; import { useFieldHandleKeyDown } from './useFieldHandleKeyDown'; @@ -20,6 +20,7 @@ import { useFieldClearValueProps } from './useFieldClearValueProps'; import { useFieldState } from './useFieldState'; import { useFieldCharacterEditing } from './useFieldCharacterEditing'; import { useFieldValidation } from './useFieldValidation'; +import { useLocalizationContext } from '../useUtils'; type FieldSectionWithPositions = TSection & { /** @@ -160,6 +161,7 @@ export const useFieldLegacyDOMStructure = < const isRtl = useRtl(); const focusTimeoutRef = React.useRef>(); const selectionSyncTimeoutRef = React.useRef>(); + const localizationContext = useLocalizationContext['date']>(); const { forwardedProps, @@ -171,12 +173,22 @@ export const useFieldLegacyDOMStructure = < inputRef: inputRefProp, placeholder: placeholderProp, }, - internalPropsWithDefaults, - internalPropsWithDefaults: { unstableFieldRef, readOnly = false, disabled = false }, + internalProps, valueManager, valueManager: { fieldValueManager, legacyValueManager }, } = parameters; + const internalPropsWithDefaults = React.useMemo( + () => + valueManager.applyDefaultsToFieldInternalProps({ + ...localizationContext, + internalProps, + }), + [valueManager, localizationContext, internalProps], + ); + + const { unstableFieldRef, readOnly = false, disabled = false } = internalPropsWithDefaults; + const inputRef = React.useRef(null); const handleRef = useForkRef(inputRefProp, inputRef);