reka-ui 2.6.0 → 2.6.2

package/src/ScrollArea/ScrollAreaScrollbarImpl.vue

@@ -109,11 +109,13 @@ function handleSizeChange() {
       viewport: rootContext.viewport.value?.offsetHeight ?? 0,
       scrollbar: {
         size: scrollbar.value?.clientHeight ?? 0,
-        paddingStart: toInt(getComputedStyle(scrollbar.value!).paddingLeft),
-        paddingEnd: toInt(getComputedStyle(scrollbar.value!).paddingRight),
+        paddingStart: toInt(getComputedStyle(scrollbar.value!).paddingTop),
+        paddingEnd: toInt(getComputedStyle(scrollbar.value!).paddingBottom),
       },
     })
   }
+
+  scrollbarVisibleContext.onThumbPositionChange()
 }
 
 useResizeObserver(scrollbar, handleSizeChange)

package/src/ScrollArea/ScrollAreaScrollbarVisible.vue

@@ -9,7 +9,7 @@ export interface ScrollAreaScrollbarVisibleContext {
   handleWheelScroll: (event: WheelEvent, payload: number) => void
   handleThumbDown: (
     event: MouseEvent,
-    payload: { x: number, y: number }
+    payload: { x: number, y: number },
   ) => void
   handleThumbUp: (event: MouseEvent) => void
   handleSizeChange: (payload: Sizes) => void

package/src/Select/SelectArrow.vue

@@ -7,20 +7,18 @@ export interface SelectArrowProps extends PopperArrowProps {}
 <script setup lang="ts">
 import { PopperArrow } from '@/Popper'
 import { injectSelectContentContext, SelectContentDefaultContextValue } from './SelectContentImpl.vue'
-import { injectSelectRootContext } from './SelectRoot.vue'
 
 const props = withDefaults(defineProps<SelectArrowProps>(), {
   width: 10,
   height: 5,
   as: 'svg',
 })
-const rootContext = injectSelectRootContext()
 const contentContext = injectSelectContentContext(SelectContentDefaultContextValue)
 </script>
 
 <template>
   <PopperArrow
-    v-if="rootContext.open.value && contentContext.position === 'popper'"
+    v-if="contentContext.position === 'popper'"
     v-bind="props"
   >
     <slot />

package/src/Select/SelectContentImpl.vue

@@ -3,7 +3,7 @@ import type {
   ComponentPublicInstance,
   Ref,
 } from 'vue'
-import type { PointerDownOutsideEvent } from '@/DismissableLayer'
+import type { DismissableLayerProps, PointerDownOutsideEvent } from '@/DismissableLayer'
 import type { PopperContentProps } from '@/Popper'
 import type { AcceptableValue } from '@/shared/types'
 import { useCollection } from '@/Collection'
@@ -24,14 +24,14 @@ export interface SelectContentContext {
   itemRefCallback: (
     node: HTMLElement | undefined,
     value: AcceptableValue,
-    disabled: boolean
+    disabled: boolean,
   ) => void
   selectedItem?: Ref<HTMLElement | undefined>
   onItemLeave?: () => void
   itemTextRefCallback: (
     node: HTMLElement | undefined,
     value: AcceptableValue,
-    disabled: boolean
+    disabled: boolean,
   ) => void
   focusSelectedItem?: () => void
   selectedItemText?: Ref<HTMLElement | undefined>
@@ -60,7 +60,7 @@ export type SelectContentImplEmits = {
   pointerDownOutside: [event: PointerDownOutsideEvent]
 }
 
-export interface SelectContentImplProps extends PopperContentProps {
+export interface SelectContentImplProps extends PopperContentProps, DismissableLayerProps {
   /**
    *  The positioning mode to use
    *
@@ -99,6 +99,7 @@ const props = withDefaults(defineProps<SelectContentImplProps>(), {
   align: 'start',
   position: 'item-aligned',
   bodyLock: true,
+  disableOutsidePointerEvents: true,
 })
 const emits = defineEmits<SelectContentImplEmits>()
 
@@ -285,7 +286,7 @@ provideSelectContentContext({
     >
       <DismissableLayer
         as-child
-        disable-outside-pointer-events
+        :disable-outside-pointer-events="disableOutsidePointerEvents"
         @focus-outside.prevent
         @dismiss="rootContext.onOpenChange(false)"
         @escape-key-down="emits('escapeKeyDown', $event)"

package/src/Select/SelectItem.vue

@@ -14,7 +14,7 @@ interface SelectItemContext<T = AcceptableValue> {
 }
 
 export const [injectSelectItemContext, provideSelectItemContext]
-    = createContext<SelectItemContext>('SelectItem')
+  = createContext<SelectItemContext>('SelectItem')
 
 export type SelectEvent<T> = CustomEvent<{ originalEvent: PointerEvent | KeyboardEvent, value?: T }>
 

package/src/Splitter/SplitterGroup.vue

@@ -532,8 +532,8 @@ function collapsePanel(panelData: PanelData) {
       panelSizeBeforeCollapseRef.value.set(panelData.id, panelSize)
 
       const isLastPanel
-          = findPanelDataIndex(panelDataArray, panelData)
-            === panelDataArray.length - 1
+        = findPanelDataIndex(panelDataArray, panelData)
+          === panelDataArray.length - 1
       const delta = isLastPanel
         ? panelSize - collapsedSize
         : collapsedSize - panelSize
@@ -585,13 +585,13 @@ function expandPanel(panelData: PanelData) {
       )
 
       const baseSize
-          = prevPanelSize != null && prevPanelSize >= minSize
-            ? prevPanelSize
-            : minSize
+        = prevPanelSize != null && prevPanelSize >= minSize
+          ? prevPanelSize
+          : minSize
 
       const isLastPanel
-          = findPanelDataIndex(panelDataArray, panelData)
-            === panelDataArray.length - 1
+        = findPanelDataIndex(panelDataArray, panelData)
+          === panelDataArray.length - 1
       const delta = isLastPanel ? panelSize - baseSize : baseSize - panelSize
 
       const nextLayout = adjustLayoutByDelta({

package/src/Splitter/SplitterPanel.vue

@@ -33,7 +33,7 @@ export type PanelOnCollapse = () => void
 export type PanelOnExpand = () => void
 export type PanelOnResize = (
   size: number,
-  prevSize: number | undefined
+  prevSize: number | undefined,
 ) => void
 
 export type PanelCallbacks = {

package/src/Splitter/utils/registry.ts

@@ -9,7 +9,7 @@ export type ResizeHandlerAction = 'down' | 'move' | 'up'
 export type SetResizeHandlerState = (
   action: ResizeHandlerAction,
   isActive: boolean,
-  event: ResizeEvent
+  event: ResizeEvent,
 ) => void
 
 export type PointerHitAreaMargins = {

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/TreeRoot.vue

@@ -254,7 +254,7 @@ provideTreeRootContext({
     if (expanded.value.includes(key))
       expanded.value = expanded.value.filter(val => val !== key)
     else
-      expanded.value.push(key)
+      expanded.value = [...expanded.value, key]
   },
   getKey: props.getKey,
   getChildren: props.getChildren,

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/index.ts

@@ -41,6 +41,7 @@ export {
   type DateRange,
   type DateValue,
   type Formatter,
+  type SegmentPart,
   useBodyScrollLock,
   useDateFormatter,
   useDirection,

package/src/shared/date/useDateField.ts

@@ -46,7 +46,15 @@ function commonSegmentAttrs(props: SegmentAttrProps) {
 function daySegmentAttrs(props: SegmentAttrProps) {
   const { segmentValues, placeholder } = props
   const isEmpty = segmentValues.day === null
-  const date = segmentValues.day ? placeholder.set({ day: segmentValues.day }) : placeholder
+
+  // Include month from segmentValues to ensure correct max days calculation
+  const dateFields: { day?: number, month?: number } = {}
+  if (segmentValues.day)
+    dateFields.day = segmentValues.day
+  if (segmentValues.month)
+    dateFields.month = segmentValues.month
+
+  const date = Object.keys(dateFields).length > 0 ? placeholder.set(dateFields) : placeholder
 
   const valueNow = date.day
   const valueMin = 1
@@ -864,12 +872,9 @@ export function useDateField(props: UseDateFieldProps) {
       if (Object.values(props.segmentValues.value).every(item => item !== null)) {
         const updateObject = { ...props.segmentValues.value as Record<AnyExceptLiteral, number> }
 
-        let dateRef = props.placeholder.value.copy()
-
-        Object.keys(updateObject).forEach((part) => {
-          const value = updateObject[part as AnyExceptLiteral]
-          dateRef = dateRef.set({ [part]: value })
-        })
+        // Set all date fields at once to avoid order-dependent constraints
+        // (e.g., setting day: 31 before month: 3 would incorrectly constrain the day)
+        const dateRef = props.placeholder.value.set(updateObject)
 
         props.modelValue.value = dateRef.copy()
       }

package/src/shared/index.ts

@@ -2,7 +2,7 @@ export * from './arrays'
 export * from './browser'
 export * from './clamp'
 export { createContext } from './createContext'
-export { type DateRange, type DateStep, type DateValue } from './date'
+export { type DateRange, type DateStep, type DateValue, type SegmentPart } from './date'
 export { getActiveElement } from './getActiveElement'
 export { handleAndDispatchCustomEvent } from './handleAndDispatchCustomEvent'
 export { isValidVNodeElement } from './isValidVNodeElement'

package/src/shared/useFormControl.ts

@@ -1,6 +1,6 @@
 import type { MaybeElementRef } from '@vueuse/core'
-import { toValue, unrefElement } from '@vueuse/core'
-import { computed } from 'vue'
+import { unrefElement } from '@vueuse/core'
+import { computed, toValue } from 'vue'
 
 export function useFormControl(el: MaybeElementRef) {
   // We set this to true by default so that events bubble to forms without JS (SSR)

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>) {