reka-ui 2.9.1 → 2.9.3

package/src/Select/index.ts

@@ -19,6 +19,7 @@ export {
 export {
   injectSelectItemContext,
   default as SelectItem,
+  type SelectItemEmits,
   type SelectItemProps,
   type SelectEvent as SelectItemSelectEvent,
 } from './SelectItem.vue'

package/src/Splitter/SplitterGroup.vue

@@ -121,6 +121,7 @@ const { forwardRef, currentElement: panelGroupElementRef } = useForwardExpose()
 
 const dragState = ref<DragState | null>(null)
 const groupSizeInPixels = ref<number | null>(null)
+const groupSizeAtLastLayoutInit = ref<number | null>(null)
 const layout = ref<number[]>([])
 const panelIdToLastNotifiedSizeMapRef = ref<Record<string, number>>({})
 const panelSizeBeforeCollapseRef = ref<Map<string, number>>(new Map())
@@ -357,6 +358,11 @@ watch(() => eagerValuesRef.value.panelDataArrayChanged, () => {
       panelConstraints,
     })
 
+    // Track the group size used for this initialization.
+    // Used to detect when a nested px group was measured with an unreliable (too small)
+    // container size before the outer group finished layout.
+    groupSizeAtLastLayoutInit.value = getGroupSizeInPixels()
+
     if (!areEqual(prevLayout, nextLayout)) {
       setLayout(nextLayout)
 
@@ -383,6 +389,20 @@ watch(groupSizeInPixels, (nextSize, prevSize) => {
   if (!hasPixelSizedPanel(panelDataArray))
     return
 
+  // Detect if the layout was initialized with an unreliably small container.
+  // This happens with nested SplitterGroups using sizeUnit="px": the inner group's
+  // ResizeObserver fires before the outer group's flex layout completes, giving a
+  // near-zero container size (e.g. 3.45px). When the outer group finishes and the
+  // container grows to its real size (e.g. 923px), we must re-initialize rather
+  // than recalculate (which would "preserve" the garbage pixel sizes from 3.45px).
+  // We guard with initSize < 50 so that legitimately small-but-real containers
+  // (e.g. a sidebar at 60px) are not accidentally re-initialized on normal resizes.
+  const initSize = groupSizeAtLastLayoutInit.value
+  if (initSize != null && initSize > 0 && initSize < 50 && nextSize > initSize * 10) {
+    eagerValuesRef.value.panelDataArrayChanged = true
+    return
+  }
+
   const recalculatedLayout = recalculateLayoutForPixelPanels({
     layout: prevLayout,
     panelDataArray,

package/src/Splitter/utils/units.ts

@@ -157,5 +157,17 @@ export function recalculateLayoutForPixelPanels({
     nextLayout[index] = prevSize * scaleFactor
   }
 
+  // Normalize to ensure percentages always sum to exactly 100.
+  // Floating-point arithmetic in the px→% conversions above can cause drift
+  // (e.g. 99.89% instead of 100%) that gets persisted to localStorage and
+  // triggers validation warnings on every subsequent page load.
+  const total = nextLayout.reduce((sum, size) => sum + size, 0)
+  if (total > 0 && Math.abs(total - 100) > 1e-9) {
+    const factor = 100 / total
+    for (let index = 0; index < nextLayout.length; index++) {
+      nextLayout[index] = (nextLayout[index] ?? 0) * factor
+    }
+  }
+
   return nextLayout
 }

package/src/TagsInput/TagsInputInput.vue

@@ -24,13 +24,22 @@ const props = withDefaults(defineProps<TagsInputInputProps>(), {
 const context = injectTagsInputRootContext()
 const { forwardRef, currentElement } = useForwardExpose()
 
-function handleBlur(event: Event) {
+function handleBlur(event: FocusEvent) {
   context.selectedElement.value = undefined
 
   if (!context.addOnBlur.value)
     return
 
   const target = event.target as HTMLInputElement
+
+  // If the blur is caused by clicking an option within the content,
+  // we don't trigger the `addOnBlur` action,
+  // because the clicked option should be added instead of the input's current value.
+  const relatedTarget = event.relatedTarget as HTMLElement | null
+  const controlledId = target.getAttribute('aria-controls')
+  if (controlledId && relatedTarget?.closest(`#${CSS.escape(controlledId)}`))
+    return
+
   if (!target.value)
     return
 

package/src/Tooltip/TooltipContentImpl.vue

@@ -85,7 +85,7 @@ onMounted(() => {
     const target = event.target as HTMLElement
     if (target?.contains(rootContext.trigger.value!))
       rootContext.onClose()
-  })
+  }, { capture: true })
   // Close this tooltip if another one opens
   useEventListener(window, TOOLTIP_OPEN, rootContext.onClose)
 })

package/src/YearPicker/YearPickerGrid.vue

@@ -17,11 +17,6 @@ const readonly = computed(() => rootContext.readonly.value ? true : undefined)
 </script>
 
 <template>
-  <!--
-    role="application" is intentional: it ensures screen readers like NVDA pass
-    keyboard events (arrow keys) to the web app instead of intercepting them
-    for virtual cursor navigation. This is the same pattern used by React Aria.
-  -->
   <Primitive
     v-bind="props"
     tabindex="-1"

package/src/YearRangePicker/YearRangePickerGrid.vue

@@ -17,11 +17,6 @@ const readonly = computed(() => rootContext.readonly.value ? true : undefined)
 </script>
 
 <template>
-  <!--
-    role="application" is intentional: it ensures screen readers like NVDA pass
-    keyboard events (arrow keys) to the web app instead of intercepting them
-    for virtual cursor navigation. This is the same pattern used by React Aria.
-  -->
   <Primitive
     v-bind="props"
     tabindex="-1"

package/src/shared/useForwardProps.ts

@@ -7,6 +7,17 @@ interface PropOptions {
   default?: any
 }
 
+/**
+ * Vue coerces optional boolean props (e.g. `foo?: boolean`) to non-optional (`foo: boolean`)
+ * in the `defineProps` return type. Since `useForwardProps` only returns props that were
+ * explicitly assigned, boolean-typed props should remain optional in the return type.
+ */
+type WithOptionalBooleans<T> = {
+  [K in keyof T as [T[K]] extends [boolean] ? K : never]?: T[K]
+} & {
+  [K in keyof T as [T[K]] extends [boolean] ? never : K]: T[K]
+}
+
 /**
  * The `useForwardProps` function in TypeScript takes in a set of props and returns a computed value
  * that combines default props with assigned props from the current instance.
@@ -36,8 +47,8 @@ export function useForwardProps<T extends Record<string, any>>(props: MaybeRefOr
     // Only return value from the props parameter
     return Object.keys({ ...defaultProps, ...preservedProps }).reduce((prev, curr) => {
       if (refProps.value[curr] !== undefined)
-        prev[curr as keyof T] = refProps.value[curr]
+        (prev as Record<string, any>)[curr] = refProps.value[curr]
       return prev
-    }, {} as T)
+    }, {} as WithOptionalBooleans<T>)
   })
 }

package/src/shared/useGraceArea.ts

@@ -21,7 +21,9 @@ export function useGraceArea(triggerElement: Ref<HTMLElement | undefined>, conta
     isPointerInTransit.value = false
   }
 
-  function handleCreateGraceArea(event: PointerEvent, hoverTarget: HTMLElement) {
+  function handleCreateGraceArea(event: PointerEvent, hoverTarget: HTMLElement | undefined) {
+    if (!hoverTarget)
+      return
     const currentTarget = event.currentTarget as HTMLElement
     const exitPoint = { x: event.clientX, y: event.clientY }
     const exitSide = getExitSideFromRect(exitPoint, currentTarget.getBoundingClientRect())
@@ -34,8 +36,8 @@ export function useGraceArea(triggerElement: Ref<HTMLElement | undefined>, conta
 
   watchEffect((cleanupFn) => {
     if (triggerElement.value && containerElement.value) {
-      const handleTriggerLeave = (event: PointerEvent) => handleCreateGraceArea(event, containerElement.value!)
-      const handleContentLeave = (event: PointerEvent) => handleCreateGraceArea(event, triggerElement.value!)
+      const handleTriggerLeave = (event: PointerEvent) => handleCreateGraceArea(event, containerElement.value)
+      const handleContentLeave = (event: PointerEvent) => handleCreateGraceArea(event, triggerElement.value)
 
       triggerElement.value.addEventListener('pointerleave', handleTriggerLeave)
       containerElement.value.addEventListener('pointerleave', handleContentLeave)

package/src/shared/useHideOthers.ts

@@ -17,7 +17,13 @@ export function useHideOthers(target: MaybeElementRef) {
     if (import.meta.env.MODE === 'test')
       return
     // Skip if inside a closed native popover
-    if (el && !el.closest('[popover]:not(:popover-open)'))
+    // Use try/catch as `:popover-open` pseudo-class is not supported in all browsers (e.g. Safari 18)
+    let isInsideClosedPopover = false
+    try {
+      isInsideClosedPopover = !!el?.closest('[popover]:not(:popover-open)')
+    }
+    catch {}
+    if (el && !isInsideClosedPopover)
       undo = hideOthers(el)
     else if (undo)
       undo()