fix(types): used ComponentExposed instead of InstanceType

mtorromeo · mtorromeo · commit 4d4125f98159 · 2025-10-14T19:19:06.000+02:00
diff --git a/packages/core/src/components/Drawer/DrawerContent.vue b/packages/core/src/components/Drawer/DrawerContent.vue
@@ -18,7 +18,7 @@
 </template>
 
 <script lang="ts">
-export type DrawerContentRef = Readonly<Ref<HTMLDivElement | InstanceType<typeof AutoWrap> | null>>;
+export type DrawerContentRef = Readonly<Ref<HTMLDivElement | ComponentExposed<typeof AutoWrap> | null>>;
 export const DrawerContentRefKey = Symbol('DrawerContentRefKey') as InjectionKey<DrawerContentRef>;
 
 interface Props extends /* @vue-ignore */ ComponentProps<typeof PfDrawerMain> {
@@ -30,7 +30,7 @@ interface Props extends /* @vue-ignore */ ComponentProps<typeof PfDrawerMain> {
 <script lang="ts" setup>
 import styles from '@patternfly/react-styles/css/components/Drawer/drawer';
 import { type InjectionKey, provide, type Ref, useTemplateRef } from 'vue';
-import type { ComponentProps } from 'vue-component-type-helpers';
+import type { ComponentExposed, ComponentProps } from 'vue-component-type-helpers';
 import AutoWrap from '../../helpers/AutoWrap.vue';
 import PfDrawerMain from './DrawerMain.vue';
 import PfDrawerPanelContent from './DrawerPanelContent.vue';
diff --git a/packages/core/src/components/FileUpload.vue b/packages/core/src/components/FileUpload.vue
@@ -171,7 +171,7 @@ defineSlots<{
 
 const filenameInput = useTemplateRef('filenameInputRef');
 
-useDropZone(() => filenameInput.value?.$el, {
+useDropZone(() => filenameInput.value?.input, {
   dataTypes: props.dataTypes,
   multiple: false,
   async onDrop(files) {
diff --git a/packages/core/src/components/FormSelect/FormSelect.vue b/packages/core/src/components/FormSelect/FormSelect.vue
@@ -30,7 +30,7 @@
 </template>
 
 <script lang="ts">
-export const FormSelectOptionsKey = Symbol("FormSelectOptionsKey") as ChildrenTrackerInjectionKey<InstanceType<typeof PfFormSelectOption>>;
+export const FormSelectOptionsKey = Symbol("FormSelectOptionsKey") as ChildrenTrackerInjectionKey<ComponentExposed<typeof PfFormSelectOption>>;
 
 interface Props<M extends boolean = false> extends OUIAProps, /* @vue-ignore */ Omit<SelectHTMLAttributes, 'value'> {
   multiple?: M;
@@ -55,6 +55,7 @@ import CaretDownIcon from '@vue-patternfly/icons/caret-down-icon';
 import { computed, type SelectHTMLAttributes, getCurrentInstance, useTemplateRef } from 'vue';
 import { useOUIAProps, type OUIAProps } from '../../helpers/ouia';
 import { FormInputsKey } from '../Form/common';
+import type { ComponentExposed } from 'vue-component-type-helpers';
 
 defineOptions({
   name: 'PfFormSelect',
diff --git a/packages/core/src/components/JumpLinks/JumpLinks.vue b/packages/core/src/components/JumpLinks/JumpLinks.vue
@@ -46,7 +46,7 @@
 </template>
 
 <script lang="ts">
-export const JumpLinksKey = Symbol("FormSelectOptionsKey") as ChildrenTrackerInjectionKey<InstanceType<typeof PfJumpLinksItem>>;
+export const JumpLinksKey = Symbol("FormSelectOptionsKey") as ChildrenTrackerInjectionKey<ComponentExposed<typeof PfJumpLinksItem>>;
 export const JumpLinkInjectionKey = Symbol('JumpLinkInjectionKey') as InjectionKey<{
   offset: number;
   scrollPosition: Ref<number>;
@@ -82,6 +82,7 @@ import AngleRightIcon from '@vue-patternfly/icons/angle-right-icon';
 import PfJumpLinksItem from './JumpLinksItem.vue';
 import PfButton from '../Button.vue';
 import { useOUIAProps, type OUIAProps } from '../../helpers/ouia';
+import type { ComponentExposed } from 'vue-component-type-helpers';
 
 defineOptions({
   name: 'PfJumpLinks',
diff --git a/packages/core/src/components/Label/common.ts b/packages/core/src/components/Label/common.ts
@@ -1,4 +1,5 @@
+import type { ComponentExposed } from 'vue-component-type-helpers';
 import type { ChildrenTrackerInjectionKey } from '../../use';
 import PfLabel from './Label.vue';
 
-export const LabelKey = Symbol("LabelKey") as ChildrenTrackerInjectionKey<InstanceType<typeof PfLabel>>;
+export const LabelKey = Symbol("LabelKey") as ChildrenTrackerInjectionKey<ComponentExposed<typeof PfLabel>>;
diff --git a/packages/core/src/components/Menu/Menu.vue b/packages/core/src/components/Menu/Menu.vue
@@ -33,7 +33,7 @@
 <script lang="ts">
 export type MenuProvide = {
   parentMenu: MenuProvide | undefined;
-  favoriteList: Ref<InstanceType<typeof PfMenuList> | null>;
+  favoriteList: Ref<ComponentExposed<typeof PfMenuList> | null>;
   selected?: Ref<MenuItemId | MenuItemId[] | null>;
   // drilldownItemPath: MenuItemId[];
   activeItemId?: MenuItemId;
@@ -113,6 +113,7 @@ import PfTextInput from '../TextInput.vue';
 import PfTextInputGroup from '../TextInputGroup/TextInputGroup.vue';
 import PfSearchInput from '../SearchInput/SearchInput.vue';
 import { useOUIAProps, type OUIAProps } from '../../helpers/ouia';
+import type { ComponentExposed } from 'vue-component-type-helpers';
 
 defineOptions({
   name: 'PfMenu',
@@ -142,7 +143,7 @@ const emit = defineEmits<{
 
 const el = useTemplateRef('elRef');
 
-const favoriteList = useTemplateRef<InstanceType<typeof PfMenuList>>('favoriteListRef');
+const favoriteList = useTemplateRef<ComponentExposed<typeof PfMenuList>>('favoriteListRef');
 const items = provideChildrenTracker(MenuItemsKey);
 const favoriteCount = computed(() => items.reduce((c, i) => c + (i.favorited ? 1 : 0), 0));
 
diff --git a/packages/core/src/components/SearchInput/AdvancedSearchMenu.vue b/packages/core/src/components/SearchInput/AdvancedSearchMenu.vue
@@ -55,7 +55,7 @@ import PfForm from '../Form/Form.vue';
 import PfFormGroup from '../Form/FormGroup.vue';
 import PfActionGroup from '../Form/ActionGroup.vue';
 import { useEventListener } from '@vueuse/core';
-import type { ComponentProps } from 'vue-component-type-helpers';
+import type { ComponentExposed, ComponentProps } from 'vue-component-type-helpers';
 
 defineOptions({
   name: 'PfAdvancedSearchMenu',
@@ -104,7 +104,7 @@ defineSlots<{
   'form-additional-items'?: (props?: Record<never, never>) => any;
 }>();
 
-const firstAttrRef: Ref<InstanceType<typeof PfTextInput> | null> = ref(null);
+const firstAttrRef: Ref<ComponentExposed<typeof PfTextInput> | null> = ref(null);
 const searchInput = inject(SearchInputKey);
 const hasWordsId = useId();
 
diff --git a/packages/core/src/components/SearchInput/SearchInput.vue b/packages/core/src/components/SearchInput/SearchInput.vue
@@ -129,7 +129,7 @@ export interface SearchAttribute {
 
 export type SearchInputProvide = {
   $el: Readonly<Ref<HTMLDivElement | null>>;
-  input: Ref<InstanceType<typeof PfTextInputGroupMain> | null>;
+  input: Ref<ComponentExposed<typeof PfTextInputGroupMain> | null>;
 }
 
 export const SearchInputKey = Symbol('SearchInputKey') as InjectionKey<SearchInputProvide>;
@@ -234,6 +234,7 @@ import AngleDownIcon from '@vue-patternfly/icons/angle-down-icon';
 import CaretDownIcon from '@vue-patternfly/icons/caret-down-icon';
 import ArrowRightIcon from '@vue-patternfly/icons/arrow-right-icon';
 import { FormInputsKey } from '../Form/common';
+import type { ComponentExposed } from 'vue-component-type-helpers';
 
 defineOptions({
   name: 'PfSearchInput',
diff --git a/packages/core/src/components/Tabs/Tab.vue b/packages/core/src/components/Tabs/Tab.vue
@@ -61,7 +61,7 @@ import PfTabContent from './TabContent.vue';
 import PfMenuItem from '../Menu/MenuItem.vue';
 import { useChildrenTracker } from '../../use';
 import { useOUIAProps, type OUIAProps } from '../../helpers/ouia';
-import type { ComponentProps } from 'vue-component-type-helpers';
+import type { ComponentExposed, ComponentProps } from 'vue-component-type-helpers';
 
 defineOptions({
   name: 'PfTab',
@@ -79,7 +79,7 @@ interface Props extends OUIAProps, /* @vue-ignore */ Omit<ComponentProps<typeof
   disabled?: boolean;
   /** Adds disabled styling and communicates that the button is disabled using the aria-disabled html attribute */
   ariaDisabled?: boolean;
-  contentRef?: InstanceType<typeof PfTabContent>;
+  contentRef?: ComponentExposed<typeof PfTabContent>;
   /** Waits until the first "enter" transition to mount tab children (add them to the DOM) */
   mountOnEnter?: boolean;
   /** Unmounts tab children (removes them from the DOM) when they are no longer visible */
diff --git a/packages/core/src/components/Tabs/Tabs.vue b/packages/core/src/components/Tabs/Tabs.vue
@@ -146,6 +146,7 @@ import FloatingUi from '../../helpers/FloatingUi.vue';
 import PfMenu from '../Menu/Menu.vue';
 import PfMenuContent from '../Menu/MenuContent.vue';
 import PfMenuList from '../Menu/MenuList.vue';
+import type { ComponentExposed } from 'vue-component-type-helpers';
 
 defineOptions({
   name: 'PfTabs',
@@ -176,7 +177,7 @@ defineSlots<{
 
 const tabListRef = useTemplateRef('tabList');
 const tabMoreRef = useTemplateRef('tabMore');
-const tabOverflowRef: Ref<InstanceType<typeof PfMenuList> | undefined> = ref();
+const tabOverflowRef: Ref<ComponentExposed<typeof PfMenuList> | undefined> = ref();
 const contentTargetRef: Ref<HTMLElement | undefined> = ref();
 const overflowTabRef: Ref<HTMLButtonElement | undefined> = ref();
 const tabs = provideChildrenTracker(TabsKey);
diff --git a/packages/core/src/components/Tabs/common.ts b/packages/core/src/components/Tabs/common.ts
@@ -1,12 +1,13 @@
 import type { ComputedRef, InjectionKey, MaybeRefOrGetter, Ref, WritableComputedRef } from 'vue';
 import type { ChildrenTrackerInjectionKey } from '../../use';
 import PfMenuList from '../Menu/MenuList.vue';
+import type { ComponentExposed } from 'vue-component-type-helpers';
 
 export type TabsProvide = {
   secondary: boolean;
   activeKey: WritableComputedRef<TabKey | undefined>;
   idSuffix: MaybeRefOrGetter<string>;
-  tabOverflowRef: Ref<InstanceType<typeof PfMenuList> | undefined>;
+  tabOverflowRef: Ref<ComponentExposed<typeof PfMenuList> | undefined>;
   contentTargetRef: Ref<HTMLElement | undefined>;
 }
 
diff --git a/packages/core/src/helpers/AutoWrap.vue b/packages/core/src/helpers/AutoWrap.vue
@@ -7,10 +7,11 @@ import { h, useAttrs, ref, resolveDynamicComponent, type VNode, type VNodeTypes,
 import { findChildrenVNodes } from "../util";
 import type { ComponentPublicInstance } from "vue";
 import type { Component } from "vue";
+import type { ComponentExposed } from 'vue-component-type-helpers';
 
 // Teleport is already in VNodeTypes but it is explicitly defined to avoid a runtime warning (bug)
 // where NodeFilter would not be allowed to be an object
-type NodeFilter = VNodeTypes[] | VNodeTypes | InstanceType<typeof Teleport> | ((vnode: VNode) => boolean);
+type NodeFilter = VNodeTypes[] | VNodeTypes | ComponentExposed<typeof Teleport> | ((vnode: VNode) => boolean);
 
 function makeFilterFunction(filter: NodeFilter | undefined, fallback = true): (vnode: VNode) => boolean {
   if (typeof filter === 'function') {
diff --git a/packages/core/src/helpers/index.ts b/packages/core/src/helpers/index.ts
@@ -9,12 +9,13 @@ export { default as Wrap } from './Wrap.vue';
 
 import type { ComponentPublicInstance } from 'vue';
 import AutoWrap from "./AutoWrap.vue";
+import type { ComponentExposed } from 'vue-component-type-helpers';
 
-export function isOverridableWrapper(el: any): el is InstanceType<typeof AutoWrap> {
+export function isOverridableWrapper(el: any): el is ComponentExposed<typeof AutoWrap> {
   return typeof el === 'object' && el.$?.vnode?.type === AutoWrap;
 }
 
-export function resolveOverridableComponent<T extends Element | ComponentPublicInstance | undefined | null>(node: InstanceType<typeof AutoWrap> | T): T {
+export function resolveOverridableComponent<T extends Element | ComponentPublicInstance | undefined | null>(node: ComponentExposed<typeof AutoWrap> | T): T {
   if (!isOverridableWrapper(node)) {
     return node;
   }
