From bd4ffbaf332123b81a9b409b301d39fabd7e1e0b Mon Sep 17 00:00:00 2001 From: flavien Date: Wed, 22 Jan 2025 17:42:36 +0100 Subject: [PATCH] Remove field ownerState --- .../calendar-systems/AdapterHijri.js | 2 +- .../calendar-systems/AdapterHijri.tsx | 2 +- .../BrowserV7MultiInputRangeField.js | 2 +- .../BrowserV7MultiInputRangeField.tsx | 2 +- .../date-pickers/custom-field/JoyV6Field.tsx | 2 +- .../custom-field/JoyV6MultiInputRangeField.js | 2 +- .../JoyV6MultiInputRangeField.tsx | 4 +-- .../JoyV6SingleInputRangeField.tsx | 4 +-- .../MaterialDatePicker.js | 3 +- .../MaterialDatePicker.tsx | 3 +- .../behavior-button/MaterialDatePicker.js | 2 +- .../behavior-button/MaterialDatePicker.tsx | 2 +- .../MaterialDateRangePicker.js | 2 +- .../MaterialDateRangePicker.tsx | 2 +- .../migration-pickers-v7.md | 4 +-- .../overview/mainDemo/PickerButton.tsx | 2 +- .../DateRangePicker/DateRangePicker.types.ts | 10 ++---- .../DateTimeRangePicker.types.ts | 10 ++---- .../useDesktopRangePicker.tsx | 11 ++---- .../hooks/useEnrichedRangePickerField.ts | 36 +++++-------------- .../useMobileRangePicker.tsx | 11 ++---- .../src/internals/models/fields.ts | 9 ++--- .../src/DatePicker/DatePicker.types.ts | 5 +-- .../DateTimePicker/DateTimePicker.types.ts | 3 +- .../src/TimePicker/TimePicker.types.ts | 5 +-- .../useDesktopPicker/useDesktopPicker.tsx | 13 +++---- .../hooks/useMobilePicker/useMobilePicker.tsx | 11 +++--- .../src/internals/models/fields.ts | 9 ++--- 28 files changed, 51 insertions(+), 122 deletions(-) diff --git a/docs/data/date-pickers/calendar-systems/AdapterHijri.js b/docs/data/date-pickers/calendar-systems/AdapterHijri.js index 3b3f2abc13d1c..98bdfdf2f734f 100644 --- a/docs/data/date-pickers/calendar-systems/AdapterHijri.js +++ b/docs/data/date-pickers/calendar-systems/AdapterHijri.js @@ -24,7 +24,7 @@ const cacheRtl = createCache({ function ButtonDateTimeField(props) { const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date'); - const { ownerState, focused, ...other } = forwardedProps; + const { focused, ...other } = forwardedProps; const pickerContext = usePickerContext(); const parsedFormat = useParsedFormat(); diff --git a/docs/data/date-pickers/calendar-systems/AdapterHijri.tsx b/docs/data/date-pickers/calendar-systems/AdapterHijri.tsx index c4a95d926215f..19c39bd8b5de6 100644 --- a/docs/data/date-pickers/calendar-systems/AdapterHijri.tsx +++ b/docs/data/date-pickers/calendar-systems/AdapterHijri.tsx @@ -28,7 +28,7 @@ const cacheRtl = createCache({ function ButtonDateTimeField(props: DateTimePickerFieldProps) { const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date'); - const { ownerState, focused, ...other } = forwardedProps; + const { focused, ...other } = forwardedProps; const pickerContext = usePickerContext(); const parsedFormat = useParsedFormat(); diff --git a/docs/data/date-pickers/custom-field/BrowserV7MultiInputRangeField.js b/docs/data/date-pickers/custom-field/BrowserV7MultiInputRangeField.js index b606d01b1bbaf..6c84e98639821 100644 --- a/docs/data/date-pickers/custom-field/BrowserV7MultiInputRangeField.js +++ b/docs/data/date-pickers/custom-field/BrowserV7MultiInputRangeField.js @@ -80,7 +80,7 @@ const BrowserTextField = React.forwardRef((props, ref) => { const BrowserMultiInputDateRangeField = React.forwardRef((props, ref) => { const manager = useDateRangeManager(); const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date'); - const { slotProps, ownerState, ...otherForwardedProps } = forwardedProps; + const { slotProps, ...otherForwardedProps } = forwardedProps; const startTextFieldProps = useSlotProps({ elementType: 'input', diff --git a/docs/data/date-pickers/custom-field/BrowserV7MultiInputRangeField.tsx b/docs/data/date-pickers/custom-field/BrowserV7MultiInputRangeField.tsx index b8807a207720b..57d7269eed7fc 100644 --- a/docs/data/date-pickers/custom-field/BrowserV7MultiInputRangeField.tsx +++ b/docs/data/date-pickers/custom-field/BrowserV7MultiInputRangeField.tsx @@ -119,7 +119,7 @@ const BrowserMultiInputDateRangeField = React.forwardRef( (props: BrowserMultiInputDateRangeFieldProps, ref: React.Ref) => { const manager = useDateRangeManager(); const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date'); - const { slotProps, ownerState, ...otherForwardedProps } = forwardedProps; + const { slotProps, ...otherForwardedProps } = forwardedProps; const startTextFieldProps = useSlotProps({ elementType: 'input', diff --git a/docs/data/date-pickers/custom-field/JoyV6Field.tsx b/docs/data/date-pickers/custom-field/JoyV6Field.tsx index 290ea956a64b0..8920ee7f39bc0 100644 --- a/docs/data/date-pickers/custom-field/JoyV6Field.tsx +++ b/docs/data/date-pickers/custom-field/JoyV6Field.tsx @@ -33,7 +33,7 @@ const CalendarIcon = createSvgIcon( const joyTheme = extendJoyTheme(); const JoyDateField = React.forwardRef( - (props: DatePickerFieldProps, ref: React.Ref) => { + (props: DatePickerFieldProps, ref: React.Ref) => { const fieldResponse = useDateField(props); const { diff --git a/docs/data/date-pickers/custom-field/JoyV6MultiInputRangeField.js b/docs/data/date-pickers/custom-field/JoyV6MultiInputRangeField.js index 118af0a126d91..c52ef0612daf9 100644 --- a/docs/data/date-pickers/custom-field/JoyV6MultiInputRangeField.js +++ b/docs/data/date-pickers/custom-field/JoyV6MultiInputRangeField.js @@ -74,7 +74,7 @@ const JoyMultiInputDateRangeField = React.forwardRef((props, ref) => { enableAccessibleFieldDOMStructure: false, }); const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date'); - const { slotProps, ownerState, ...otherForwardedProps } = forwardedProps; + const { slotProps, ...otherForwardedProps } = forwardedProps; const startTextFieldProps = useSlotProps({ elementType: 'input', diff --git a/docs/data/date-pickers/custom-field/JoyV6MultiInputRangeField.tsx b/docs/data/date-pickers/custom-field/JoyV6MultiInputRangeField.tsx index 3add953616aa4..9447a5183ed9c 100644 --- a/docs/data/date-pickers/custom-field/JoyV6MultiInputRangeField.tsx +++ b/docs/data/date-pickers/custom-field/JoyV6MultiInputRangeField.tsx @@ -97,7 +97,7 @@ const JoyField = React.forwardRef( interface JoyMultiInputDateRangeFieldProps extends Omit< - DateRangePickerFieldProps, + DateRangePickerFieldProps, 'unstableFieldRef' | 'clearable' | 'onClear' >, MultiInputFieldRefs { @@ -116,7 +116,7 @@ const JoyMultiInputDateRangeField = React.forwardRef( enableAccessibleFieldDOMStructure: false, }); const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date'); - const { slotProps, ownerState, ...otherForwardedProps } = forwardedProps; + const { slotProps, ...otherForwardedProps } = forwardedProps; const startTextFieldProps = useSlotProps({ elementType: 'input', diff --git a/docs/data/date-pickers/custom-field/JoyV6SingleInputRangeField.tsx b/docs/data/date-pickers/custom-field/JoyV6SingleInputRangeField.tsx index ba80a33246907..d50e754d8e33a 100644 --- a/docs/data/date-pickers/custom-field/JoyV6SingleInputRangeField.tsx +++ b/docs/data/date-pickers/custom-field/JoyV6SingleInputRangeField.tsx @@ -33,11 +33,11 @@ const DateRangeIcon = createSvgIcon( const joyTheme = extendJoyTheme(); type JoySingleInputDateRangeFieldComponent = (( - props: DateRangePickerFieldProps & React.RefAttributes, + props: DateRangePickerFieldProps & React.RefAttributes, ) => React.JSX.Element) & { fieldType?: FieldType }; const JoySingleInputDateRangeField = React.forwardRef( - (props: DateRangePickerFieldProps, ref: React.Ref) => { + (props: DateRangePickerFieldProps, ref: React.Ref) => { const fieldResponse = useSingleInputDateRangeField(props); const { diff --git a/docs/data/date-pickers/custom-field/behavior-autocomplete/MaterialDatePicker.js b/docs/data/date-pickers/custom-field/behavior-autocomplete/MaterialDatePicker.js index 3ff1fc1a5c719..4e2dcf1b86811 100644 --- a/docs/data/date-pickers/custom-field/behavior-autocomplete/MaterialDatePicker.js +++ b/docs/data/date-pickers/custom-field/behavior-autocomplete/MaterialDatePicker.js @@ -13,8 +13,7 @@ import { useValidation, validateDate } from '@mui/x-date-pickers/validation'; function AutocompleteField(props) { const { forwardedProps, internalProps } = useSplitFieldProps(props, 'date'); const { timezone, value, setValue } = usePickerContext(); - const { ownerState, focused, options = [], ...other } = forwardedProps; - + const { focused, options = [], ...other } = forwardedProps; const pickerContext = usePickerContext(); const { hasValidationError, getValidationErrorForNewValue } = useValidation({ 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 d23578520bbef..e528ab87d4189 100644 --- a/docs/data/date-pickers/custom-field/behavior-autocomplete/MaterialDatePicker.tsx +++ b/docs/data/date-pickers/custom-field/behavior-autocomplete/MaterialDatePicker.tsx @@ -24,8 +24,7 @@ interface AutocompleteFieldProps extends DatePickerFieldProps { function AutocompleteField(props: AutocompleteFieldProps) { const { forwardedProps, internalProps } = useSplitFieldProps(props, 'date'); const { timezone, value, setValue } = usePickerContext(); - const { ownerState, focused, options = [], ...other } = forwardedProps; - + const { focused, options = [], ...other } = forwardedProps; const pickerContext = usePickerContext(); const { hasValidationError, getValidationErrorForNewValue } = useValidation({ 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 e085890502c39..7e314ef277264 100644 --- a/docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.js +++ b/docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.js @@ -12,7 +12,7 @@ import { function ButtonDateField(props) { const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date'); - const { ownerState, focused, ...other } = forwardedProps; + const { focused, ...other } = forwardedProps; const pickerContext = usePickerContext(); const parsedFormat = useParsedFormat(); 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 9786892a92996..d012589ef9485 100644 --- a/docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.tsx +++ b/docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.tsx @@ -16,7 +16,7 @@ import { function ButtonDateField(props: DatePickerFieldProps) { const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date'); - const { ownerState, focused, ...other } = forwardedProps; + const { focused, ...other } = forwardedProps; const pickerContext = usePickerContext(); const parsedFormat = useParsedFormat(); diff --git a/docs/data/date-pickers/custom-field/behavior-button/MaterialDateRangePicker.js b/docs/data/date-pickers/custom-field/behavior-button/MaterialDateRangePicker.js index 13bde2588838b..b41755566a886 100644 --- a/docs/data/date-pickers/custom-field/behavior-button/MaterialDateRangePicker.js +++ b/docs/data/date-pickers/custom-field/behavior-button/MaterialDateRangePicker.js @@ -14,7 +14,7 @@ import { function ButtonDateRangeField(props) { const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date'); - const { ownerState, focused, ...other } = forwardedProps; + const { focused, ...other } = forwardedProps; const pickerContext = usePickerContext(); const parsedFormat = useParsedFormat(); 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 18a66ef0c2e71..730b32839400c 100644 --- a/docs/data/date-pickers/custom-field/behavior-button/MaterialDateRangePicker.tsx +++ b/docs/data/date-pickers/custom-field/behavior-button/MaterialDateRangePicker.tsx @@ -18,7 +18,7 @@ import { function ButtonDateRangeField(props: DateRangePickerFieldProps) { const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date'); - const { ownerState, focused, ...other } = forwardedProps; + const { focused, ...other } = forwardedProps; const pickerContext = usePickerContext(); const parsedFormat = useParsedFormat(); 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 eee9a1a6cb009..0b51870b5c6fe 100644 --- a/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md +++ b/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md @@ -1542,7 +1542,7 @@ If you were using them, you need to replace them with the following code: - > {} +interface CustomDateRangeFieldProps + extends Omit< - + DateRangePickerFieldProps, + + DateRangePickerFieldProps, + 'unstableFieldRef' | 'clearable' | 'onClear' + >, + MultiInputFieldRefs {} @@ -1574,7 +1574,7 @@ If you were using them, you need to replace them with the following code: - > {} +interface JoyMultiInputDateRangeFieldProps + extends Omit< - + DateTimeRangePickerFieldProps, + + DateTimeRangePickerFieldProps, + 'unstableFieldRef' | 'clearable' | 'onClear' + >, + MultiInputFieldRefs {} diff --git a/docs/src/modules/components/overview/mainDemo/PickerButton.tsx b/docs/src/modules/components/overview/mainDemo/PickerButton.tsx index 3ea3346cf6134..7b92b04994712 100644 --- a/docs/src/modules/components/overview/mainDemo/PickerButton.tsx +++ b/docs/src/modules/components/overview/mainDemo/PickerButton.tsx @@ -9,7 +9,7 @@ import { useValidation, validateDate } from '@mui/x-date-pickers/validation'; function ButtonDateField(props: DatePickerFieldProps) { const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date'); - const { ownerState, focused, ...other } = forwardedProps; + const { focused, ...other } = forwardedProps; const pickerContext = usePickerContext(); diff --git a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.types.ts b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.types.ts index 77dae47f82368..007c2cf1cdcdb 100644 --- a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.types.ts +++ b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.types.ts @@ -9,7 +9,6 @@ import { MobileDateRangePickerSlots, MobileDateRangePickerSlotProps, } from '../MobileDateRangePicker'; -import { DateRangeValidationError } from '../models'; import { ValidateDateRangeProps } from '../validation'; export interface DateRangePickerSlots @@ -49,10 +48,5 @@ export interface DateRangePickerProps, or component). */ -export type DateRangePickerFieldProps = - ValidateDateRangeProps & - BaseSingleInputFieldProps< - PickerRangeValue, - TEnableAccessibleFieldDOMStructure, - DateRangeValidationError - >; +export type DateRangePickerFieldProps = ValidateDateRangeProps & + BaseSingleInputFieldProps; diff --git a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePicker.types.ts b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePicker.types.ts index 509f8246c2cef..e791e8a9b9181 100644 --- a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePicker.types.ts +++ b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePicker.types.ts @@ -44,11 +44,5 @@ export interface DateTimeRangePickerProps, or component). */ -export type DateTimeRangePickerFieldProps< - TEnableAccessibleFieldDOMStructure extends boolean = true, -> = ValidateDateTimeRangeProps & - BaseSingleInputFieldProps< - PickerRangeValue, - TEnableAccessibleFieldDOMStructure, - DateTimeRangeValidationError - >; +export type DateTimeRangePickerFieldProps = ValidateDateTimeRangeProps & + BaseSingleInputFieldProps; diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.tsx b/packages/x-date-pickers-pro/src/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.tsx index 907e4e3a58f19..c60f59adb805f 100644 --- a/packages/x-date-pickers-pro/src/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.tsx @@ -18,10 +18,7 @@ import { UseDesktopRangePickerParams, UseDesktopRangePickerProps, } from './useDesktopRangePicker.types'; -import { - RangePickerPropsForFieldSlot, - useEnrichedRangePickerField, -} from '../useEnrichedRangePickerField'; +import { useEnrichedRangePickerField } from '../useEnrichedRangePickerField'; import { getReleaseInfo } from '../../utils/releaseInfo'; import { useRangePosition } from '../useRangePosition'; import { PickerRangePositionContext } from '../../../hooks/usePickerRangePositionContext'; @@ -115,11 +112,7 @@ export const useDesktopRangePicker = < const Field = slots.field; - const fieldProps: RangePickerPropsForFieldSlot< - boolean, - TEnableAccessibleFieldDOMStructure, - InferError - > = useSlotProps({ + const { ownerState: fieldOwnerState, ...fieldProps } = useSlotProps({ elementType: Field, externalSlotProps: slotProps?.field, additionalProps: { diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerField.ts b/packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerField.ts index bd639cb1aa269..7ccda8b9dcc8a 100644 --- a/packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerField.ts +++ b/packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerField.ts @@ -75,17 +75,9 @@ export interface RangePickerFieldSlotProps; } -export type RangePickerPropsForFieldSlot< - TIsSingleInput extends boolean, - TEnableAccessibleFieldDOMStructure extends boolean, - TError, -> = - | (TIsSingleInput extends true - ? BaseSingleInputFieldProps - : never) - | (TIsSingleInput extends false - ? BaseMultiInputFieldProps - : never); +export type RangePickerPropsForFieldSlot = + | (TIsSingleInput extends true ? BaseSingleInputFieldProps : never) + | (TIsSingleInput extends false ? BaseMultiInputFieldProps : never); export interface UseEnrichedRangePickerFieldPropsParams< TIsSingleInput extends boolean, @@ -104,11 +96,7 @@ export interface UseEnrichedRangePickerFieldPropsParams< localeText: PickersInputLocaleText | undefined; pickerSlotProps: RangePickerFieldSlotProps | undefined; pickerSlots: RangePickerFieldSlots | undefined; - fieldProps: RangePickerPropsForFieldSlot< - TIsSingleInput, - TEnableAccessibleFieldDOMStructure, - TError - >; + fieldProps: RangePickerPropsForFieldSlot; anchorRef?: React.Ref; currentView?: TView | null; initialView?: TView; @@ -145,8 +133,6 @@ const useMultiInputFieldSlotProps = < TEnableAccessibleFieldDOMStructure, TError >) => { - type ReturnType = BaseMultiInputFieldProps; - const translations = usePickerTranslations(); const handleStartFieldRef = useForkRef(fieldProps.unstableStartFieldRef, startFieldRef); const handleEndFieldRef = useForkRef(fieldProps.unstableEndFieldRef, endFieldRef); @@ -210,14 +196,14 @@ const useMultiInputFieldSlotProps = < } }; - const slots: ReturnType['slots'] = { + const slots: BaseMultiInputFieldProps['slots'] = { textField: pickerSlots?.textField, root: pickerSlots?.fieldRoot, separator: pickerSlots?.fieldSeparator, ...fieldProps.slots, }; - const slotProps: ReturnType['slotProps'] & { + const slotProps: BaseMultiInputFieldProps['slotProps'] & { separator?: any; } = { ...fieldProps.slotProps, @@ -279,7 +265,7 @@ const useMultiInputFieldSlotProps = < /* TODO: remove this when a clearable behavior for multiple input range fields is implemented */ const { clearable, onClear, ...restFieldProps } = fieldProps as any; - const enrichedFieldProps: ReturnType = { + const enrichedFieldProps: BaseMultiInputFieldProps = { ...restFieldProps, unstableStartFieldRef: handleStartFieldRef, unstableEndFieldRef: handleEndFieldRef, @@ -316,12 +302,6 @@ const useSingleInputFieldSlotProps = < TEnableAccessibleFieldDOMStructure, TError >) => { - type ReturnType = BaseSingleInputFieldProps< - PickerRangeValue, - TEnableAccessibleFieldDOMStructure, - TError - >; - const handleFieldRef = useForkRef(fieldProps.unstableFieldRef, singleInputFieldRef); React.useEffect(() => { @@ -375,7 +355,7 @@ const useSingleInputFieldSlotProps = < } }; - const enrichedFieldProps: ReturnType = { + const enrichedFieldProps: BaseSingleInputFieldProps = { ...fieldProps, unstableFieldRef: handleFieldRef, onKeyDown: onSpaceOrEnter(openPicker, fieldProps.onKeyDown), diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useMobileRangePicker/useMobileRangePicker.tsx b/packages/x-date-pickers-pro/src/internals/hooks/useMobileRangePicker/useMobileRangePicker.tsx index e45381645fd08..2cf98e9ddd2f7 100644 --- a/packages/x-date-pickers-pro/src/internals/hooks/useMobileRangePicker/useMobileRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/internals/hooks/useMobileRangePicker/useMobileRangePicker.tsx @@ -19,10 +19,7 @@ import { UseMobileRangePickerParams, UseMobileRangePickerProps, } from './useMobileRangePicker.types'; -import { - RangePickerPropsForFieldSlot, - useEnrichedRangePickerField, -} from '../useEnrichedRangePickerField'; +import { useEnrichedRangePickerField } from '../useEnrichedRangePickerField'; import { getReleaseInfo } from '../../utils/releaseInfo'; import { useRangePosition } from '../useRangePosition'; import { PickerRangePositionContext } from '../../../hooks/usePickerRangePositionContext'; @@ -92,11 +89,7 @@ export const useMobileRangePicker = < providerProps.contextValue.triggerStatus = 'hidden'; const Field = slots.field; - const fieldProps: RangePickerPropsForFieldSlot< - boolean, - TEnableAccessibleFieldDOMStructure, - InferError - > = useSlotProps({ + const { ownerState: fieldOwnerState, ...fieldProps } = useSlotProps({ elementType: Field, externalSlotProps: innerSlotProps?.field, additionalProps: { diff --git a/packages/x-date-pickers-pro/src/internals/models/fields.ts b/packages/x-date-pickers-pro/src/internals/models/fields.ts index 4e107cc40e903..7062411a90d53 100644 --- a/packages/x-date-pickers-pro/src/internals/models/fields.ts +++ b/packages/x-date-pickers-pro/src/internals/models/fields.ts @@ -12,13 +12,8 @@ import type { * Props the multi input field can receive when used inside a picker. * Only contains what the MUI components are passing to the field, not what users can pass using the `props.slotProps.field`. */ -export interface BaseMultiInputFieldProps< - TEnableAccessibleFieldDOMStructure extends boolean, - TError, -> extends Pick< - UseFieldInternalProps, - 'readOnly' | 'autoFocus' - >, +export interface BaseMultiInputFieldProps + extends Pick, 'readOnly' | 'autoFocus'>, MultiInputFieldRefs { slots?: { root?: React.ElementType; diff --git a/packages/x-date-pickers/src/DatePicker/DatePicker.types.ts b/packages/x-date-pickers/src/DatePicker/DatePicker.types.ts index 0ff8753f814b7..e299eae93d033 100644 --- a/packages/x-date-pickers/src/DatePicker/DatePicker.types.ts +++ b/packages/x-date-pickers/src/DatePicker/DatePicker.types.ts @@ -9,7 +9,6 @@ import { MobileDatePickerSlots, MobileDatePickerSlotProps, } from '../MobileDatePicker'; -import { DateValidationError } from '../models'; import { ValidateDateProps } from '../validation/validateDate'; export interface DatePickerSlots extends DesktopDatePickerSlots, MobileDatePickerSlots {} @@ -52,6 +51,4 @@ export interface DatePickerProps, or component). */ -export type DatePickerFieldProps = - ValidateDateProps & - BaseSingleInputFieldProps; +export type DatePickerFieldProps = ValidateDateProps & BaseSingleInputFieldProps; diff --git a/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.types.ts b/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.types.ts index a8d562209c310..69989a4260321 100644 --- a/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.types.ts +++ b/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.types.ts @@ -13,7 +13,6 @@ import { MobileDateTimePickerSlots, MobileDateTimePickerSlotProps, } from '../MobileDateTimePicker'; -import { DateTimeValidationError } from '../models'; import { ValidateDateTimeProps } from '../validation'; import { ExportedYearCalendarProps } from '../YearCalendar/YearCalendar.types'; @@ -59,4 +58,4 @@ export interface DateTimePickerProps, or component). */ export type DateTimePickerFieldProps = ValidateDateTimeProps & - BaseSingleInputFieldProps; + BaseSingleInputFieldProps; diff --git a/packages/x-date-pickers/src/TimePicker/TimePicker.types.ts b/packages/x-date-pickers/src/TimePicker/TimePicker.types.ts index c4fc53a2cb751..7503632e3a8f2 100644 --- a/packages/x-date-pickers/src/TimePicker/TimePicker.types.ts +++ b/packages/x-date-pickers/src/TimePicker/TimePicker.types.ts @@ -9,7 +9,6 @@ import { MobileTimePickerSlots, MobileTimePickerSlotProps, } from '../MobileTimePicker'; -import { TimeValidationError } from '../models'; import { ValidateTimeProps } from '../validation/validateTime'; export interface TimePickerSlots extends DesktopTimePickerSlots, MobileTimePickerSlots {} @@ -42,6 +41,4 @@ export interface TimePickerProps, or component). */ -export type TimePickerFieldProps = - ValidateTimeProps & - BaseSingleInputFieldProps; +export type TimePickerFieldProps = ValidateTimeProps & BaseSingleInputFieldProps; diff --git a/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.tsx b/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.tsx index 7076ab089f71b..2263ff343844c 100644 --- a/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.tsx +++ b/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.tsx @@ -6,8 +6,8 @@ import { PickersPopper } from '../../components/PickersPopper'; import { UseDesktopPickerParams, UseDesktopPickerProps } from './useDesktopPicker.types'; import { usePicker } from '../usePicker'; import { PickersLayout } from '../../../PickersLayout'; -import { FieldRef, InferError } from '../../../models'; -import { DateOrTimeViewWithMeridiem, BaseSingleInputFieldProps, PickerValue } from '../../models'; +import { FieldRef } from '../../../models'; +import { DateOrTimeViewWithMeridiem, PickerValue } from '../../models'; import { PickerProvider } from '../../components/PickerProvider'; import { PickerFieldUIContextProvider } from '../../components/PickerFieldUI'; @@ -60,11 +60,7 @@ export const useDesktopPicker = < }); const Field = slots.field; - const fieldProps: BaseSingleInputFieldProps< - PickerValue, - TEnableAccessibleFieldDOMStructure, - InferError - > = useSlotProps({ + const { ownerState: fieldOwnerState, ...fieldProps } = useSlotProps({ elementType: Field, externalSlotProps: innerSlotProps?.field, additionalProps: { @@ -101,7 +97,8 @@ export const useDesktopPicker = < }, }; - const handleFieldRef = useForkRef(fieldRef, fieldProps.unstableFieldRef); + // TODO: This `as any` will go away once the field ref is handled by the context. + const handleFieldRef = useForkRef(fieldRef, (fieldProps as any).unstableFieldRef); const renderPicker = () => ( diff --git a/packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.tsx b/packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.tsx index 7e2aba088bcf4..c95aec0da067b 100644 --- a/packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.tsx +++ b/packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.tsx @@ -6,7 +6,7 @@ import { PickersModalDialog } from '../../components/PickersModalDialog'; import { UseMobilePickerParams, UseMobilePickerProps } from './useMobilePicker.types'; import { usePicker } from '../usePicker'; import { PickersLayout } from '../../../PickersLayout'; -import { FieldRef, InferError } from '../../../models'; +import { FieldRef } from '../../../models'; import { BaseSingleInputFieldProps, DateOrTimeViewWithMeridiem, PickerValue } from '../../models'; import { PickerProvider } from '../../components/PickerProvider'; import { PickerFieldUIContextProvider } from '../../components/PickerFieldUI'; @@ -59,11 +59,7 @@ export const useMobilePicker = < }); const Field = slots.field; - const fieldProps: BaseSingleInputFieldProps< - PickerValue, - TEnableAccessibleFieldDOMStructure, - InferError - > = useSlotProps({ + const { ownerState: fieldOwnerState, ...fieldProps } = useSlotProps({ elementType: Field, externalSlotProps: innerSlotProps?.field, additionalProps: { @@ -100,7 +96,8 @@ export const useMobilePicker = < }, }; - const handleFieldRef = useForkRef(fieldRef, fieldProps.unstableFieldRef); + // TODO: This `as any` will go away once the field ref is handled by the context. + const handleFieldRef = useForkRef(fieldRef, (fieldProps as any).unstableFieldRef); const renderPicker = () => ( diff --git a/packages/x-date-pickers/src/internals/models/fields.ts b/packages/x-date-pickers/src/internals/models/fields.ts index 7f943a004c4d8..758d175511392 100644 --- a/packages/x-date-pickers/src/internals/models/fields.ts +++ b/packages/x-date-pickers/src/internals/models/fields.ts @@ -13,19 +13,14 @@ export interface BaseForwardedSingleInputFieldProps { onKeyDown?: React.KeyboardEventHandler; onBlur?: React.FocusEventHandler; ref?: React.Ref; - ownerState: PickerOwnerState; } /** * Props the single input field can receive when used inside a picker. * Only contains what the MUI components are passing to the field, not what users can pass using the `props.slotProps.field`. */ -export type BaseSingleInputFieldProps< - TValue extends PickerValidValue, - TEnableAccessibleFieldDOMStructure extends boolean, - TError, -> = Pick< - UseFieldInternalProps, +export type BaseSingleInputFieldProps = Pick< + UseFieldInternalProps, 'readOnly' | 'unstableFieldRef' | 'autoFocus' > & BaseForwardedSingleInputFieldProps;