refactor: replaced plain refs to template elements with useTemplateRef

Author: mtorromeo

apps/docs/src/stories/Components/Tooltip.story.vue

@@ -92,11 +92,11 @@
 </template>
 
 <script lang="ts" setup>
-import { reactive, ref, type Ref, onMounted } from 'vue';
+import { reactive, ref, type Ref, onMounted, useTemplateRef } from 'vue';
 import { PfButton } from '@vue-patternfly/core';
 import type { Placement } from '@vue-patternfly/core/helpers/FloatingUi.vue';
 
-const buttonRef: Ref<InstanceType<typeof PfButton> | undefined> = ref();
+const buttonRef = useTemplateRef('buttonRef');
 const trigger = reactive(['mouseenter', 'focus']);
 const leftAligned = ref(false);
 const flip = ref(true);
@@ -107,11 +107,13 @@ const exitDelay = ref(0);
 const distance = ref(15);
 
 onMounted(() => {
-  buttonRef.value?.el?.scrollIntoView({
-    behavior: 'instant',
-    block: 'center',
-    inline: 'center',
-  });
+  if (buttonRef.value?.el instanceof HTMLElement) {
+    buttonRef.value.el.scrollIntoView({
+      behavior: 'instant',
+      block: 'center',
+      inline: 'center',
+    });
+  }
 });
 
 function checkTrigger(value: string, checked: boolean) {

packages/core/src/components/Alert/Alert.vue

@@ -77,7 +77,7 @@ import PfCloseButton from '../CloseButton.vue';
 import PfAlertIcon, { AlertVariantIcons } from './AlertIcon.vue';
 import PfAngleRightIcon from '@vue-patternfly/icons/angle-right-icon';
 import { useOUIAProps, type OUIAProps } from '../../helpers/ouia';
-import { ref, watch, type Ref, type HTMLAttributes, onBeforeUnmount, onMounted, computed, type Component } from 'vue';
+import { ref, watch, type HTMLAttributes, onBeforeUnmount, onMounted, computed, type Component, useTemplateRef, type ComponentPublicInstance } from 'vue';
 import { useElementSize } from '@vueuse/core';
 import { useManagedProp } from '../../use';
 import type { Placement } from '../../helpers/FloatingUi.vue';
@@ -149,7 +149,7 @@ defineSlots<{
   'action-links'?: (props?: Record<never, never>) => any;
 }>();
 
-const titleRef: Ref<HTMLElement | undefined> = ref();
+const titleRef = useTemplateRef<HTMLElement | ComponentPublicInstance>('titleRef');
 const { width, height } = useElementSize(titleRef);
 const tooltipVisible = ref(false);
 let timer: number | undefined = undefined;
@@ -158,15 +158,15 @@ const isMouseOver = ref(false);
 const timedOut = ref(false);
 const timedOutAnimation = ref(true);
 const containsFocus = ref(false);
-const el: Ref<HTMLDivElement | null> = ref(null);
+const el = useTemplateRef('el');
 
 const managedExpanded = useManagedProp('expanded', false);
 const variantLabel = computed(() => `${props.variant.charAt(0).toUpperCase()}${props.variant.slice(1)} alert:`);
 const dismissed = computed(() => timedOut.value && timedOutAnimation.value && !isMouseOver.value && !containsFocus.value);
 
 
 watch(() => [width.value, height.value], () => {
-  if (!titleRef.value || !props.truncateTitle) {
+  if (!(titleRef.value instanceof HTMLElement) || !props.truncateTitle) {
     return false;
   }
   tooltipVisible.value = titleRef.value.offsetHeight < titleRef.value.scrollHeight;

packages/core/src/components/Button.vue

@@ -61,7 +61,7 @@ import PfSpinner from './Spinner.vue';
 import PassThrough from '../helpers/PassThrough.vue';
 import type { RouteLocationRaw, useLink } from 'vue-router';
 import { useOUIAProps, type OUIAProps } from '../helpers/ouia';
-import { type Component, type UnwrapRef, type Ref, ref, computed, type AnchorHTMLAttributes, type ButtonHTMLAttributes } from 'vue';
+import { type Component, type UnwrapRef, computed, type AnchorHTMLAttributes, type ButtonHTMLAttributes, useTemplateRef, type ComponentPublicInstance } from 'vue';
 import { isDefined } from '@vueuse/shared';
 
 type RouterLinkContext = UnwrapRef<ReturnType<typeof useLink>>;
@@ -138,7 +138,7 @@ defineSlots<{
   badge?: (props?: Record<never, never>) => any;
 }>();
 
-const el: Ref<HTMLElement | undefined> = ref();
+const el = useTemplateRef<HTMLElement | ComponentPublicInstance>('el');
 const ouiaProps = useOUIAProps({id: props.ouiaId, safe: props.ouiaSafe, variant: props.variant});
 
 const buttonComponent = computed(() => {

packages/core/src/components/Checkbox.vue

@@ -46,7 +46,7 @@
 
 <script lang="ts" setup>
 import styles from '@patternfly/react-styles/css/components/Check/check';
-import { computed, ref, watch, type Component, type Ref, type InputHTMLAttributes, getCurrentInstance } from 'vue';
+import { computed, watch, type Component, type InputHTMLAttributes, getCurrentInstance, useTemplateRef } from 'vue';
 import { getUniqueId } from '../util';
 import { useOUIAProps, type OUIAProps } from '../helpers/ouia';
 import Sort from '../helpers/Sort.vue';
@@ -99,7 +99,7 @@ defineSlots<{
 }>();
 
 useChildrenTracker(FormInputsKey, getCurrentInstance()?.proxy);
-const input: Ref<HTMLInputElement | undefined> = ref();
+const input = useTemplateRef('input');
 const wrapWithLabel = computed(() => (props.labelWrapped && !props.component) || props.component === 'label');
 const validId = computed(() => props.id || getUniqueId());
 

packages/core/src/components/ChipGroup/Chip.vue

@@ -65,7 +65,7 @@ import PfButton from '../Button.vue';
 import PfTooltip from '../Tooltip/Tooltip.vue';
 import { getUniqueId } from '../../util';
 import { useElementOverflow } from '../../use';
-import { type Component, computed, ref, type Ref, type HTMLAttributes } from 'vue';
+import { type Component, computed, type HTMLAttributes, useTemplateRef } from 'vue';
 import type { Placement } from '../../helpers/FloatingUi.vue';
 
 defineOptions({
@@ -100,7 +100,7 @@ defineSlots<{
   badge?: (props?: Record<never, never>) => any;
 }>();
 
-const textRef: Ref<HTMLSpanElement | undefined> = ref();
+const textRef = useTemplateRef('textRef');
 const textOverflowing = useElementOverflow(textRef);
 const effectiveId = computed(() => props.id ?? getUniqueId());
 </script>

packages/core/src/components/ChipGroup/ChipGroup.vue

@@ -37,7 +37,7 @@
 </template>
 
 <script lang="ts" setup>
-import { h, ref, type Ref, type HTMLAttributes } from 'vue';
+import { h, ref, type HTMLAttributes, useTemplateRef } from 'vue';
 import styles from '@patternfly/react-styles/css/components/Chip/chip-group';
 import CircleXmarkIcon from '@vue-patternfly/icons/circle-xmark-icon';
 import PfChip from './Chip.vue';
@@ -84,7 +84,7 @@ const slots = defineSlots<{
   default?: (props?: Record<never, never>) => any;
 }>();
 
-const labelRef: Ref<HTMLSpanElement | undefined> = ref();
+const labelRef = useTemplateRef('labelRef');
 const labelOverflowing = useElementOverflow(labelRef);
 const open = ref(props.defaultOpen);
 

packages/core/src/components/DescriptionList/DescriptionListTermHelpTextButton.vue

@@ -1,6 +1,6 @@
 <template>
   <span
-    ref="helpText"
+    ref="helpTextRef"
     v-bind="(ouiaProps as any)"
     :class="[styles.descriptionListText, styles.modifiers.helpText]"
     role="button"
@@ -13,7 +13,7 @@
 
 <script lang="ts" setup>
 import styles from '@patternfly/react-styles/css/components/DescriptionList/description-list';
-import { ref, type HTMLAttributes, type Ref } from 'vue';
+import { useTemplateRef, type HTMLAttributes } from 'vue';
 import { useOUIAProps, type OUIAProps } from '../../helpers/ouia';
 
 defineOptions({
@@ -30,7 +30,7 @@ defineSlots<{
   default?: (props?: Record<never, never>) => any;
 }>();
 
-const helpTextRef: Ref<HTMLElement | undefined> = ref();
+const helpTextRef = useTemplateRef('helpTextRef');
 
 function handleKeys(event: KeyboardEvent) {
   if (!helpTextRef.value || helpTextRef.value !== (event.target as HTMLElement)) {

packages/core/src/components/Drawer/Drawer.vue

@@ -19,7 +19,7 @@
 
 <script lang="ts" setup>
 import styles from '@patternfly/react-styles/css/components/Drawer/drawer';
-import { computed, provide, type Ref, ref, type HTMLAttributes, watch } from 'vue';
+import { computed, provide, ref, type HTMLAttributes, watch, useTemplateRef } from 'vue';
 import AutoWrap from '../../helpers/AutoWrap.vue';
 import { DrawerKey } from './common';
 import PfDrawerContent from './DrawerContent.vue';
@@ -50,7 +50,7 @@ defineSlots<{
   default?: (props?: Record<never, never>) => any;
 }>();
 
-const el: Ref<HTMLDivElement | undefined> = ref();
+const el = useTemplateRef('el');
 const display = ref(props.static || props.expanded);
 const expandedClass = ref(props.expanded);
 const isOpen = computed(() => props.static || props.expanded);

packages/core/src/components/Drawer/DrawerContent.vue

@@ -18,7 +18,7 @@
 </template>
 
 <script lang="ts">
-export type DrawerContentRef = Ref<HTMLDivElement | InstanceType<typeof AutoWrap> | undefined>;
+export type DrawerContentRef = Readonly<Ref<HTMLDivElement | InstanceType<typeof AutoWrap> | null>>;
 export const DrawerContentRefKey = Symbol('DrawerContentRefKey') as InjectionKey<DrawerContentRef>;
 
 export interface Props extends /* @vue-ignore */ ComponentProps<typeof PfDrawerMain> {
@@ -29,7 +29,7 @@ export interface Props extends /* @vue-ignore */ ComponentProps<typeof PfDrawerM
 
 <script lang="ts" setup>
 import styles from '@patternfly/react-styles/css/components/Drawer/drawer';
-import { type InjectionKey, provide, type Ref, ref } from 'vue';
+import { type InjectionKey, provide, type Ref, useTemplateRef } from 'vue';
 import { DrawerColorVariant } from './common';
 import type { ComponentProps } from '../../util';
 import AutoWrap from '../../helpers/AutoWrap.vue';
@@ -51,6 +51,6 @@ defineSlots<{
   content?: (props?: Record<never, never>) => any;
 }>();
 
-const el: Ref<HTMLDivElement | undefined> = ref();
+const el = useTemplateRef('el');
 provide(DrawerContentRefKey, el);
 </script>

packages/core/src/components/Drawer/DrawerPanelContent.vue

@@ -49,7 +49,7 @@ import styles from '@patternfly/react-styles/css/components/Drawer/drawer';
 import cssPanelMdFlexBasis from '@patternfly/react-tokens/dist/esm/c_drawer__panel_md_FlexBasis';
 import cssPanelMdFlexBasisMin from '@patternfly/react-tokens/dist/esm/c_drawer__panel_md_FlexBasis_min';
 import cssPanelMdFlexBasisMax from '@patternfly/react-tokens/dist/esm/c_drawer__panel_md_FlexBasis_max';
-import { computed, inject, type Ref, ref, type HTMLAttributes } from 'vue';
+import { computed, inject, type Ref, ref, type HTMLAttributes, useTemplateRef } from 'vue';
 import { DrawerContentRefKey } from './DrawerContent.vue';
 import { getUniqueId } from '../../util';
 import { DrawerColorVariant, DrawerKey } from './common';
@@ -104,7 +104,7 @@ defineSlots<{
   default?: (props?: Record<never, never>) => any;
 }>();
 
-const panel: Ref<HTMLElement | undefined> = ref();
+const panel = useTemplateRef('panel');
 const panelId = computed(() => props.id || getUniqueId('pf-drawer-panel-'));
 
 const drawerProvide = inject(DrawerKey);
@@ -115,7 +115,7 @@ if (!drawerProvide) {
 
 const { el: drawerRef, position, expanded, display, inline } = drawerProvide;
 const drawerContentRef = inject(DrawerContentRefKey);
-const splitterRef: Ref<HTMLDivElement | undefined> = ref();
+const splitterRef = useTemplateRef('splitterRef');
 
 let isResizing: boolean | null = null;
 const panelSize: Ref<number | undefined> = ref();