From 364158a8014c05d1decf94a7f955661c3d1c2feb Mon Sep 17 00:00:00 2001
From: Abdelrahman Awad <logaretm1@gmail.com>
Date: Wed, 15 Jan 2025 20:40:42 +0200
Subject: [PATCH] refactor: add option element type

---
 packages/core/src/useListBox/useListBox.ts | 8 +++++---
 packages/core/src/useOption/useOption.ts   | 8 ++++----
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/core/src/useListBox/useListBox.ts b/packages/core/src/useListBox/useListBox.ts
index 6adf75f5..a3b2010b 100644
--- 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
index 685c54b8..73c0bad9 100644
--- 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;
     }
   });