From 0bd8c47c28526a2886840f82ec22675615f6aadc Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Fri, 3 May 2024 15:32:55 +0200 Subject: [PATCH] use `HTMLElement` for generic DOM node types (#3169) We keep specific types for elements with special meaning, such as `HTMLButtonElement`, `HTMLLabelElement` or `HTMLInputElement` because they receive certain attributes that generic DOM nodes (such as HTMLDivElement) don't For the components where we use simple `div` elements (and where people use `as={...}`) that renders a different element, it doesn't make sense to use `HTMLDivElement`. Using a more generic `HTMLElement` is simpler and more correct (we still had `HTMLUListElement` and `HTMLLIElement` for "div" DOM nodes which is incorrect). This shouldn't be a breaking change because an `HTMLDivElement` is still a valid `HTMLElement`. The other way around wouldn't be the case. --- .../src/components/combobox/combobox.tsx | 10 +++++----- .../src/components/description/description.tsx | 2 +- .../src/components/dialog/dialog.tsx | 14 +++++++------- .../src/components/disclosure/disclosure.tsx | 4 ++-- .../src/components/focus-trap/focus-trap.tsx | 4 ++-- .../src/components/listbox/listbox.tsx | 6 +++--- .../@headlessui-react/src/components/menu/menu.tsx | 6 +++--- .../src/components/popover/popover.tsx | 6 +++--- .../src/components/transition/transition.tsx | 2 +- 9 files changed, 27 insertions(+), 27 deletions(-) diff --git a/packages/@headlessui-react/src/components/combobox/combobox.tsx b/packages/@headlessui-react/src/components/combobox/combobox.tsx index 24dcf5a..bf8ac3d 100644 --- a/packages/@headlessui-react/src/components/combobox/combobox.tsx +++ b/packages/@headlessui-react/src/components/combobox/combobox.tsx @@ -550,7 +550,7 @@ let ComboboxDataContext = createContext< inputRef: MutableRefObject buttonRef: MutableRefObject - optionsRef: MutableRefObject + optionsRef: MutableRefObject } & Omit, 'dataRef'>) | null >(null) @@ -1425,7 +1425,7 @@ function ButtonFn( let refocusInput = useRefocusableInput(data.inputRef) - let handleKeyDown = useEvent((event: ReactKeyboardEvent) => { + let handleKeyDown = useEvent((event: ReactKeyboardEvent) => { switch (event.key) { // Ref: https://www.w3.org/WAI/ARIA/apg/patterns/menu/#keyboard-interaction-12 @@ -1574,7 +1574,7 @@ export type ComboboxOptionsProps( props: ComboboxOptionsProps, - ref: Ref + ref: Ref ) { let internalId = useId() let { @@ -1750,7 +1750,7 @@ function OptionFn< // TODO: One day we will be able to infer this type from the generic in Combobox itself. // But today is not that day.. TType = Parameters[0]['value'], ->(props: ComboboxOptionProps, ref: Ref) { +>(props: ComboboxOptionProps, ref: Ref) { let data = useData('Combobox.Option') let actions = useActions('Combobox.Option') @@ -1772,7 +1772,7 @@ function OptionFn< : data.options[data.activeOptionIndex]?.id === id let selected = data.isSelected(value) - let internalOptionRef = useRef(null) + let internalOptionRef = useRef(null) let bag = useLatestValue['current']>({ disabled, diff --git a/packages/@headlessui-react/src/components/description/description.tsx b/packages/@headlessui-react/src/components/description/description.tsx index 9b8c711..d5d1bd6 100644 --- a/packages/@headlessui-react/src/components/description/description.tsx +++ b/packages/@headlessui-react/src/components/description/description.tsx @@ -107,7 +107,7 @@ export type DescriptionProps( props: DescriptionProps, - ref: Ref + ref: Ref ) { let internalId = useId() let providedDisabled = useDisabled() diff --git a/packages/@headlessui-react/src/components/dialog/dialog.tsx b/packages/@headlessui-react/src/components/dialog/dialog.tsx index 824a64e..7ed07b4 100644 --- a/packages/@headlessui-react/src/components/dialog/dialog.tsx +++ b/packages/@headlessui-react/src/components/dialog/dialog.tsx @@ -61,7 +61,7 @@ enum DialogStates { interface StateDefinition { titleId: string | null - panelRef: MutableRefObject + panelRef: MutableRefObject } enum ActionTypes { @@ -135,7 +135,7 @@ export type DialogProps = function DialogFn( props: DialogProps, - ref: Ref + ref: Ref ) { let internalId = useId() let { @@ -173,7 +173,7 @@ function DialogFn( open = (usesOpenClosedState & State.Open) === State.Open } - let internalDialogRef = useRef(null) + let internalDialogRef = useRef(null) let dialogRef = useSyncRefs(internalDialogRef, ref) let ownerDocument = useOwnerDocument(internalDialogRef) @@ -440,7 +440,7 @@ export type DialogOverlayProps( props: DialogOverlayProps, - ref: Ref + ref: Ref ) { let internalId = useId() let { id = `headlessui-dialog-overlay-${internalId}`, ...theirProps } = props @@ -492,7 +492,7 @@ export type DialogBackdropProps( props: DialogBackdropProps, - ref: Ref + ref: Ref ) { let internalId = useId() let { id = `headlessui-dialog-backdrop-${internalId}`, ...theirProps } = props @@ -547,7 +547,7 @@ export type DialogPanelProps( props: DialogPanelProps, - ref: Ref + ref: Ref ) { let internalId = useId() let { id = `headlessui-dialog-panel-${internalId}`, ...theirProps } = props @@ -594,7 +594,7 @@ export type DialogTitleProps( props: DialogTitleProps, - ref: Ref + ref: Ref ) { let internalId = useId() let { id = `headlessui-dialog-title-${internalId}`, ...theirProps } = props diff --git a/packages/@headlessui-react/src/components/disclosure/disclosure.tsx b/packages/@headlessui-react/src/components/disclosure/disclosure.tsx index c49551c..6a0eca8 100644 --- a/packages/@headlessui-react/src/components/disclosure/disclosure.tsx +++ b/packages/@headlessui-react/src/components/disclosure/disclosure.tsx @@ -54,7 +54,7 @@ interface StateDefinition { linkedPanel: boolean buttonRef: MutableRefObject - panelRef: MutableRefObject + panelRef: MutableRefObject buttonId: string | null panelId: string | null @@ -433,7 +433,7 @@ export type DisclosurePanelProps( props: DisclosurePanelProps, - ref: Ref + ref: Ref ) { let internalId = useId() let { id = `headlessui-disclosure-panel-${internalId}`, ...theirProps } = props diff --git a/packages/@headlessui-react/src/components/focus-trap/focus-trap.tsx b/packages/@headlessui-react/src/components/focus-trap/focus-trap.tsx index fe80987..d2569c9 100644 --- a/packages/@headlessui-react/src/components/focus-trap/focus-trap.tsx +++ b/packages/@headlessui-react/src/components/focus-trap/focus-trap.tsx @@ -90,9 +90,9 @@ export type FocusTrapProps( props: FocusTrapProps, - ref: Ref + ref: Ref ) { - let container = useRef(null) + let container = useRef(null) let focusTrapRef = useSyncRefs(container, ref) let { initialFocus, diff --git a/packages/@headlessui-react/src/components/listbox/listbox.tsx b/packages/@headlessui-react/src/components/listbox/listbox.tsx index 7ee1385..c3da6f4 100644 --- a/packages/@headlessui-react/src/components/listbox/listbox.tsx +++ b/packages/@headlessui-react/src/components/listbox/listbox.tsx @@ -418,7 +418,7 @@ let ListboxDataContext = createContext< listRef: MutableRefObject> buttonRef: MutableRefObject - optionsRef: MutableRefObject + optionsRef: MutableRefObject } & Omit, 'dataRef'>) | null >(null) @@ -1003,7 +1003,7 @@ function OptionsFn( container?.focus({ preventScroll: true }) }, [data.listboxState, data.optionsRef, data.optionsRef.current]) - let handleKeyDown = useEvent((event: ReactKeyboardEvent) => { + let handleKeyDown = useEvent((event: ReactKeyboardEvent) => { searchDisposables.dispose() switch (event.key) { @@ -1176,7 +1176,7 @@ function OptionFn< data.activeOptionIndex !== null ? data.options[data.activeOptionIndex].id === id : false let selected = data.isSelected(value) - let internalOptionRef = useRef(null) + let internalOptionRef = useRef(null) let getTextValue = useTextValue(internalOptionRef) let bag = useLatestValue['current']>({ disabled, diff --git a/packages/@headlessui-react/src/components/menu/menu.tsx b/packages/@headlessui-react/src/components/menu/menu.tsx index acee2d8..5586558 100644 --- a/packages/@headlessui-react/src/components/menu/menu.tsx +++ b/packages/@headlessui-react/src/components/menu/menu.tsx @@ -93,7 +93,7 @@ interface StateDefinition { __demoMode: boolean menuState: MenuStates buttonRef: MutableRefObject - itemsRef: MutableRefObject + itemsRef: MutableRefObject items: { id: string; dataRef: MenuItemDataRef }[] searchQuery: string activeItemIndex: number | null @@ -590,7 +590,7 @@ export type MenuItemsProps function ItemsFn( props: MenuItemsProps, - ref: Ref + ref: Ref ) { let internalId = useId() let { @@ -675,7 +675,7 @@ function ItemsFn( }, }) - let handleKeyDown = useEvent((event: ReactKeyboardEvent) => { + let handleKeyDown = useEvent((event: ReactKeyboardEvent) => { searchDisposables.dispose() switch (event.key) { diff --git a/packages/@headlessui-react/src/components/popover/popover.tsx b/packages/@headlessui-react/src/components/popover/popover.tsx index 52d7636..f108b9c 100644 --- a/packages/@headlessui-react/src/components/popover/popover.tsx +++ b/packages/@headlessui-react/src/components/popover/popover.tsx @@ -730,7 +730,7 @@ export type PopoverOverlayProps( props: PopoverOverlayProps, - ref: Ref + ref: Ref ) { let internalId = useId() let { id = `headlessui-popover-overlay-${internalId}`, ...theirProps } = props @@ -804,7 +804,7 @@ export type PopoverPanelProps( props: PopoverPanelProps, - ref: Ref + ref: Ref ) { let internalId = useId() let { @@ -822,7 +822,7 @@ function PanelFn( let beforePanelSentinelId = `headlessui-focus-sentinel-before-${internalId}` let afterPanelSentinelId = `headlessui-focus-sentinel-after-${internalId}` - let internalPanelRef = useRef(null) + let internalPanelRef = useRef(null) let anchor = useResolvedAnchor(rawAnchor) let [floatingRef, style] = useFloatingPanel(anchor) let getFloatingPanelProps = useFloatingPanelProps() diff --git a/packages/@headlessui-react/src/components/transition/transition.tsx b/packages/@headlessui-react/src/components/transition/transition.tsx index bf91efe..2732d07 100644 --- a/packages/@headlessui-react/src/components/transition/transition.tsx +++ b/packages/@headlessui-react/src/components/transition/transition.tsx @@ -303,7 +303,7 @@ function useNesting(done?: () => void, parent?: NestingContextValues) { // --- let DEFAULT_TRANSITION_CHILD_TAG = Fragment -type TransitionChildRenderPropArg = MutableRefObject +type TransitionChildRenderPropArg = MutableRefObject let TransitionChildRenderFeatures = RenderFeatures.RenderStrategy function TransitionChildFn(