reka-ui 2.6.1 → 2.7.0

package/src/Tabs/TabsIndicator.vue

@@ -1,6 +1,6 @@
 <script lang="ts">
 import type { PrimitiveProps } from '@/Primitive'
-import { nextTick, ref, watch } from 'vue'
+import { computed, ref, watch, watchPostEffect } from 'vue'
 import { useForwardExpose } from '@/shared'
 import { injectTabsRootContext } from './TabsRoot.vue'
 
@@ -13,41 +13,47 @@ import { Primitive } from '@/Primitive'
 
 const props = defineProps<TabsIndicatorProps>()
 const context = injectTabsRootContext()
+defineExpose({
+  updateIndicatorStyle,
+})
 useForwardExpose()
 
 interface IndicatorStyle {
   size: number | null
   position: number | null
 }
-const activeTab = ref<HTMLElement | null>()
 const indicatorStyle = ref<IndicatorStyle>({
   size: null,
   position: null,
 })
+const tabs = ref<Array<HTMLElement>>([])
 
-watch(() => [context.modelValue.value, context?.dir.value], async () => {
-  await nextTick()
+watch(() => [context.modelValue.value, context?.dir.value], () => {
   updateIndicatorStyle()
-}, { immediate: true })
+}, { immediate: true, flush: 'post' })
+
+watchPostEffect(() => {
+  tabs.value = Array.from(context.tabsList.value?.querySelectorAll<HTMLElement>('[role="tab"]') || [])
+})
 
-useResizeObserver([context.tabsList, activeTab], updateIndicatorStyle)
+useResizeObserver(computed(() => [context.tabsList.value, ...tabs.value]), updateIndicatorStyle)
 
 function updateIndicatorStyle() {
-  activeTab.value = context.tabsList.value?.querySelector<HTMLButtonElement>('[role="tab"][data-state="active"]')
+  const activeTab = context.tabsList.value?.querySelector<HTMLButtonElement>('[role="tab"][data-state="active"]')
 
-  if (!activeTab.value)
+  if (!activeTab)
     return
 
   if (context.orientation.value === 'horizontal') {
     indicatorStyle.value = {
-      size: activeTab.value.offsetWidth,
-      position: activeTab.value.offsetLeft,
+      size: activeTab.offsetWidth,
+      position: activeTab.offsetLeft,
     }
   }
   else {
     indicatorStyle.value = {
-      size: activeTab.value.offsetHeight,
-      position: activeTab.value.offsetTop,
+      size: activeTab.offsetHeight,
+      position: activeTab.offsetTop,
     }
   }
 }

package/src/Tooltip/TooltipContentImpl.vue

@@ -1,5 +1,4 @@
 <script lang="ts">
-import type { VNode } from 'vue'
 import type { PopperContentProps } from '@/Popper'
 import type { PrimitiveProps } from '@/Primitive'
 import { useForwardExpose } from '@/shared'
@@ -42,7 +41,7 @@ export interface TooltipContentImplProps
 
 <script setup lang="ts">
 import { useEventListener } from '@vueuse/core'
-import { Comment, computed, onMounted, useSlots } from 'vue'
+import { computed, onMounted } from 'vue'
 import { DismissableLayer } from '@/DismissableLayer'
 import { PopperContent } from '@/Popper'
 import { VisuallyHidden } from '@/VisuallyHidden'
@@ -64,24 +63,8 @@ const emits = defineEmits<TooltipContentImplEmits>()
 
 const rootContext = injectTooltipRootContext()
 
-const { forwardRef } = useForwardExpose()
-const slot = useSlots()
-const defaultSlot = computed(() => slot.default?.({}))
-const ariaLabel = computed(() => {
-  if (props.ariaLabel)
-    return props.ariaLabel
-  let content = ''
-
-  function recursiveTextSearch(node: VNode) {
-    if (typeof node.children === 'string' && node.type !== Comment)
-      content += node.children
-    else if (Array.isArray(node.children))
-      node.children.forEach(child => recursiveTextSearch(child as VNode))
-  }
-
-  defaultSlot.value?.forEach((node: VNode) => recursiveTextSearch(node))
-  return content
-})
+const { forwardRef, currentElement } = useForwardExpose()
+const ariaLabel = computed(() => props.ariaLabel || currentElement.value?.textContent)
 
 const popperContentProps = computed(() => {
   const { ariaLabel: _, ...restProps } = props

package/src/Tooltip/TooltipTrigger.vue

@@ -1,10 +1,10 @@
 <script lang="ts">
 import { useForwardExpose, useId } from '@/shared'
 
-export type TooltipTriggerDataState =
-  | 'closed'
-  | 'delayed-open'
-  | 'instant-open'
+export type TooltipTriggerDataState
+  = | 'closed'
+    | 'delayed-open'
+    | 'instant-open'
 
 export interface TooltipTriggerProps extends PopperAnchorProps {}
 </script>

package/src/Tree/TreeVirtualizer.vue

@@ -3,7 +3,7 @@ export interface TreeVirtualizerProps {
   /** Number of items rendered outside the visible area */
   overscan?: number
   /** Estimated size (in px) of each item */
-  estimateSize?: number
+  estimateSize?: number | ((index: number) => number)
   /** Text content for each item to achieve type-ahead feature */
   textContent?: (item: Record<string, any>) => string
 }
@@ -79,7 +79,10 @@ const virtualizer = useVirtualizer(
     getItemKey(index) {
       return index + rootContext.getKey(rootContext.expandedItems.value[index].value)
     },
-    estimateSize() {
+    estimateSize(index) {
+      if (typeof props.estimateSize === 'function')
+        return props.estimateSize(index)
+
       return props.estimateSize ?? 28
     },
     getScrollElement() { return parentEl.value },

package/src/shared/useForwardExpose.ts

@@ -59,7 +59,23 @@ export function useForwardExpose<T extends ComponentPublicInstance>() {
       get: () => (ref instanceof Element ? ref : ref.$el),
     })
 
-    instance.exposed = ret
+    // ref not is Element
+    // and `useForwardExpose.test.ts > useForwardRef > should forward plain DOM element ref - 2` Passing in `$el`
+    if (!(ref instanceof Element) && !Object.hasOwn(ref, '$el')) {
+      // Retrieves the `exposed` data that has not been unwrapped by `vue` from `$.exposed`.
+      const childExposed = ref.$.exposed
+      const merged = Object.assign({}, ret)
+
+      for (const key in childExposed) {
+        Object.defineProperty(merged, key, {
+          enumerable: true,
+          configurable: true,
+          get: () => childExposed[key],
+        })
+      }
+
+      instance.exposed = merged
+    }
   }
 
   return { forwardRef, currentRef, currentElement }

package/src/shared/useGraceArea.ts

@@ -1,11 +1,17 @@
 import type { Ref } from 'vue'
 import type { Side } from '@/Popper/utils'
-import { createEventHook, refAutoReset } from '@vueuse/shared'
+import { createEventHook, refAutoReset, tryOnScopeDispose } from '@vueuse/shared'
 import { ref, watchEffect } from 'vue'
 
 export function useGraceArea(triggerElement: Ref<HTMLElement | undefined>, containerElement: Ref<HTMLElement | undefined>) {
 // Reset the inTransit state if idle/scrolled.
   const isPointerInTransit = refAutoReset(false, 300)
+  // `refAutoReset` will clear timeout-based resets on scope dispose (e.g., component unmount),
+  // thus leaving the state as-is without resetting it.
+  // So we need to manually reset it in such cases.
+  tryOnScopeDispose(() => {
+    isPointerInTransit.value = false
+  })
 
   const pointerGraceArea = ref<Polygon | null>(null)
   const pointerExit = createEventHook<void>()
@@ -74,7 +80,7 @@ export function useGraceArea(triggerElement: Ref<HTMLElement | undefined>, conta
 }
 
 interface Point { x: number, y: number }
-  type Polygon = Point[]
+type Polygon = Point[]
 
 function getExitSideFromRect(point: Point, rect: DOMRect): Side {
   const top = Math.abs(rect.top - point.y)

package/src/shared/useId.ts

@@ -21,7 +21,7 @@ export function useId(deterministicId?: string | null | undefined, prefix = 'rek
   }
 
   const configProviderContext = injectConfigProviderContext({ useId: undefined })
-  
+
   if (configProviderContext.useId) {
     return `${prefix}-${configProviderContext.useId()}`
   }

package/src/shared/useStateMachine.ts

@@ -9,7 +9,7 @@ type MachineEvent<T> = keyof UnionToIntersection<T[keyof T]>
 
 // 🤯 https://fettblog.eu/typescript-union-to-intersection/
 type UnionToIntersection<T> = (T extends any ? (x: T) => any : never) extends (
-  x: infer R
+  x: infer R,
 ) => any
   ? R
   : never

package/src/shared/withDefault.ts

@@ -41,7 +41,7 @@ export function withDefault<
   P extends ComponentProps<C> = ComponentProps<C>,
 >(
   originalComponent: T,
-  options?: MountingOptions<P>
+  options?: MountingOptions<P>,
 ): T
 
 export function withDefault<T extends ComponentOptionsBase<{}, {}, {}, any, any, any, any, any>>(WrappedComponent: T, options?: MountingOptions<any>) {