diff --git a/packages/x-date-pickers/src/hooks/useClearableField.tsx b/packages/x-date-pickers/src/hooks/useClearableField.tsx index 11dafcc2b3a4b..950c9c117655a 100644 --- a/packages/x-date-pickers/src/hooks/useClearableField.tsx +++ b/packages/x-date-pickers/src/hooks/useClearableField.tsx @@ -7,6 +7,9 @@ import InputAdornment from '@mui/material/InputAdornment'; import { SxProps } from '@mui/system'; import { ClearIcon } from '../icons'; import { usePickerTranslations } from './usePickerTranslations'; +import { FieldOwnerState } from '../models/fields'; +import { useFieldOwnerState } from '../internals/hooks/useFieldOwnerState'; +import { FormProps } from '../internals/models'; export interface ExportedUseClearableFieldProps { /** @@ -34,11 +37,11 @@ export interface UseClearableFieldSlots { } export interface UseClearableFieldSlotProps { - clearIcon?: SlotComponentProps; - clearButton?: SlotComponentProps; + clearIcon?: SlotComponentProps; + clearButton?: SlotComponentProps; } -interface UseClearableFieldProps extends ExportedUseClearableFieldProps { +interface UseClearableFieldProps extends ExportedUseClearableFieldProps, FormProps { InputProps?: { endAdornment?: React.ReactNode }; sx?: SxProps; slots?: UseClearableFieldSlots; @@ -54,15 +57,16 @@ export const useClearableField = ( props: TFieldProps, ): UseClearableFieldResponse => { const translations = usePickerTranslations(); + const ownerState = useFieldOwnerState(props); const { clearable, onClear, InputProps, sx, slots, slotProps, ...other } = props; const IconButton = slots?.clearButton ?? MuiIconButton; // The spread is here to avoid this bug mui/material-ui#34056 - const { ownerState, ...iconButtonProps } = useSlotProps({ + const { ownerState: iconButtonOwnerState, ...iconButtonProps } = useSlotProps({ elementType: IconButton, externalSlotProps: slotProps?.clearButton, - ownerState: {}, + ownerState, className: 'clearButton', additionalProps: { title: translations.fieldClearLabel, @@ -73,7 +77,7 @@ export const useClearableField = ( const endClearIconProps = useSlotProps({ elementType: EndClearIcon, externalSlotProps: slotProps?.clearIcon, - ownerState: {}, + ownerState, }); return { diff --git a/packages/x-date-pickers/src/internals/components/PickerProvider.tsx b/packages/x-date-pickers/src/internals/components/PickerProvider.tsx index ec63075b5027a..0f558077d4fc3 100644 --- a/packages/x-date-pickers/src/internals/components/PickerProvider.tsx +++ b/packages/x-date-pickers/src/internals/components/PickerProvider.tsx @@ -3,7 +3,7 @@ import { PickerOwnerState } from '../../models'; import { PickersInputLocaleText } from '../../locales'; import { LocalizationProvider } from '../../LocalizationProvider'; import { PickerOrientation, PickerVariant } from '../models'; -import { UsePickerValueContextValue } from '../hooks/usePicker/usePickerValue.types'; +import type { UsePickerValueContextValue } from '../hooks/usePicker/usePickerValue.types'; export const PickerContext = React.createContext(null);