refactor: add option element type

formwerkjs · Jan 15, 2025 · 364158a · 364158a
1 parent a139d7d
commit 364158a
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 7 deletions.
diff --git a/packages/core/src/useListBox/useListBox.ts b/packages/core/src/useListBox/useListBox.ts
@@ -58,6 +58,10 @@ export interface ListManagerCtx<TValue = unknown> {
   isPopupOpen(): boolean;
 }
 
+export interface OptionElement<TValue = unknown> extends HTMLElement {
+  _fwOption?: OptionRegistration<TValue>;
+}
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const ListManagerKey: InjectionKey<ListManagerCtx<any>> = Symbol('ListManagerKey');
 
@@ -192,9 +196,7 @@ export function useListBox<TOption, TValue = TOption>(
   }
 
   function getDomOptions() {
-    return Array.from(listBoxEl.value?.querySelectorAll('[role="option"]') || []) as (HTMLElement & {
-      _fwOption?: OptionRegistration<TValue>;
-    })[];
+    return Array.from(listBoxEl.value?.querySelectorAll('[role="option"]') || []) as OptionElement<TValue>[];
   }
 
   function findFocusedIdx() {

diff --git a/packages/core/src/useOption/useOption.ts b/packages/core/src/useOption/useOption.ts
@@ -1,7 +1,7 @@
 import { Maybe, Reactivify, RovingTabIndex } from '../types';
 import { computed, inject, nextTick, ref, Ref, shallowRef, toValue, watch } from 'vue';
 import { hasKeyCode, normalizeProps, useUniqId, warn, withRefCapture } from '../utils/common';
-import { ListManagerKey } from '../useListBox';
+import { ListManagerKey, OptionElement } from '../useListBox';
 import { FieldTypePrefixes } from '../constants';
 import { createDisabledContext } from '../helpers/createDisabledContext';
 
@@ -35,9 +35,9 @@ export interface OptionProps<TValue> {
   disabled?: boolean;
 }
 
-export function useOption<TOption>(_props: Reactivify<OptionProps<TOption>>, elementRef?: Ref<Maybe<HTMLElement>>) {
+export function useOption<TOption>(_props: Reactivify<OptionProps<TOption>>, elementRef?: Ref<Maybe<OptionElement>>) {
   const props = normalizeProps(_props);
-  const optionEl = elementRef || ref<HTMLElement>();
+  const optionEl = elementRef || ref<OptionElement>();
   const isFocused = shallowRef(false);
   const isDisabled = createDisabledContext(props.disabled);
   const listManager = inject(ListManagerKey, null);
@@ -135,7 +135,7 @@ export function useOption<TOption>(_props: Reactivify<OptionProps<TOption>>, ele
 
   watch(optionEl, () => {
     if (optionEl.value) {
-      (optionEl.value as any)._fwOption = reg;
+      optionEl.value._fwOption = reg;
     }
   });