reka-ui 2.9.7 → 2.9.8

package/dist/internal.d.cts

@@ -1,7 +1,7 @@
 import "./index2.cjs";
 import "./index3.cjs";
 import { MenuArrowProps, MenuCheckboxItemEmits, MenuCheckboxItemProps, MenuContentEmits, MenuContentProps, MenuEmits, MenuGroupProps, MenuItemEmits, MenuItemIndicatorProps, MenuItemProps, MenuLabelProps, MenuPortalProps, MenuProps, MenuRadioGroupEmits, MenuRadioGroupProps, MenuRadioItemEmits, MenuRadioItemProps, MenuSeparatorProps, MenuSubContentEmits, MenuSubContentProps, MenuSubEmits, MenuSubProps, MenuSubTriggerProps, PopperAnchorProps, _default$277 as _default$13, _default$278 as _default$8, _default$279 as _default, _default$280 as _default$6, _default$281 as _default$10, _default$282 as _default$3, _default$283 as _default$14, _default$284 as _default$12, _default$285 as _default$2, _default$286 as _default$1, _default$287 as _default$11, _default$288 as _default$7, _default$290 as _default$9, _default$291 as _default$4, _default$292 as _default$5, injectMenuContext, injectMenuRootContext } from "./index4.cjs";
-import * as vue785 from "vue";
+import * as vue136 from "vue";
 
 //#region src/Menu/MenuAnchor.vue.d.ts
 interface MenuAnchorProps extends PopperAnchorProps {}
@@ -9,7 +9,7 @@ declare var __VLS_8: {};
 type __VLS_Slots = {} & {
   default?: (props: typeof __VLS_8) => any;
 };
-declare const __VLS_base: vue785.DefineComponent<MenuAnchorProps, {}, {}, {}, {}, vue785.ComponentOptionsMixin, vue785.ComponentOptionsMixin, {}, string, vue785.PublicProps, Readonly<MenuAnchorProps> & Readonly<{}>, {}, {}, {}, {}, string, vue785.ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: vue136.DefineComponent<MenuAnchorProps, {}, {}, {}, {}, vue136.ComponentOptionsMixin, vue136.ComponentOptionsMixin, {}, string, vue136.PublicProps, Readonly<MenuAnchorProps> & Readonly<{}>, {}, {}, {}, {}, string, vue136.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default$15: typeof __VLS_export;
 type __VLS_WithSlots<T, S> = T & {

package/dist/internal.d.ts

@@ -1,7 +1,7 @@
 import "./index2.js";
 import "./index3.js";
 import { MenuArrowProps, MenuCheckboxItemEmits, MenuCheckboxItemProps, MenuContentEmits, MenuContentProps, MenuEmits, MenuGroupProps, MenuItemEmits, MenuItemIndicatorProps, MenuItemProps, MenuLabelProps, MenuPortalProps, MenuProps, MenuRadioGroupEmits, MenuRadioGroupProps, MenuRadioItemEmits, MenuRadioItemProps, MenuSeparatorProps, MenuSubContentEmits, MenuSubContentProps, MenuSubEmits, MenuSubProps, MenuSubTriggerProps, PopperAnchorProps, _default$277 as _default$13, _default$278 as _default$8, _default$279 as _default, _default$280 as _default$6, _default$281 as _default$10, _default$282 as _default$3, _default$283 as _default$14, _default$284 as _default$12, _default$285 as _default$2, _default$286 as _default$1, _default$287 as _default$11, _default$288 as _default$7, _default$290 as _default$9, _default$291 as _default$4, _default$292 as _default$5, injectMenuContext, injectMenuRootContext } from "./index4.js";
-import * as vue1111 from "vue";
+import * as vue50 from "vue";
 
 //#region src/Menu/MenuAnchor.vue.d.ts
 interface MenuAnchorProps extends PopperAnchorProps {}
@@ -9,7 +9,7 @@ declare var __VLS_8: {};
 type __VLS_Slots = {} & {
   default?: (props: typeof __VLS_8) => any;
 };
-declare const __VLS_base: vue1111.DefineComponent<MenuAnchorProps, {}, {}, {}, {}, vue1111.ComponentOptionsMixin, vue1111.ComponentOptionsMixin, {}, string, vue1111.PublicProps, Readonly<MenuAnchorProps> & Readonly<{}>, {}, {}, {}, {}, string, vue1111.ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: vue50.DefineComponent<MenuAnchorProps, {}, {}, {}, {}, vue50.ComponentOptionsMixin, vue50.ComponentOptionsMixin, {}, string, vue50.PublicProps, Readonly<MenuAnchorProps> & Readonly<{}>, {}, {}, {}, {}, string, vue50.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default$15: typeof __VLS_export;
 type __VLS_WithSlots<T, S> = T & {

package/dist/internal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","names":[],"sources":["../src/Menu/MenuAnchor.vue"],"sourcesContent":[],"mappings":";;;;;;UAoBU,eAAA,SAAwB;YAsC9B;KACC,WAAA;2BACwB;AA3CoB,CAAA;AAGE,cA2C7C,UALgB,EAKN,OAAA,CAAA,eALM,CAKN,eALM,EAAA,CAAA,CAAA,EAAA,CAAA,CAAA,EAAA,CAAA,CAAA,EAAA,CAAA,CAAA,EAKN,OAAA,CAAA,qBAAA,EAAA,OAAA,CAAA,qBAAA,EALM,CAAA,CAAA,EAAA,MAAA,EAKN,OAAA,CAAA,WAAA,EAAA,QALM,CAKN,eALM,CAAA,GAKN,QALM,CAAA,CAAA,CAAA,CAAA,EAAA,CAAA,CAAA,EAAA,CAAA,CAAA,EAAA,CAAA,CAAA,EAAA,CAAA,CAAA,EAAA,MAAA,EAKN,OAAA,CAAA,uBAAA,EALM,KAAA,EAAA,CAAA,CAAA,EAAA,GAAA,CAAA;AAAA,cAQhB,YAPU,EAOW,eANS,CAAA,OAMc,UANd,EAM0B,WAN1B,CAAA;AAAA,cAMM,WADxC,EAAA,OAE0B,YAF1B;KAGG,eALW,CAAA,CAAA,EAAA,CAAA,CAAA,GAKa,CALb,GAAA;EAAA,MAAA,EAAA;IAAA,MAAA,EAON,CAPM;EAAA,CAAA;CAAA"}
+{"version":3,"file":"internal.d.ts","names":[],"sources":["../src/Menu/MenuAnchor.vue"],"sourcesContent":[],"mappings":";;;;;;UAoBU,eAAA,SAAwB;YAsC9B;KACC,WAAA;2BACwB;AA3CoB,CAAA;AAGE,cA2C7C,UALgB,EAKN,KAAA,CAAA,eALM,CAKN,eALM,EAAA,CAAA,CAAA,EAAA,CAAA,CAAA,EAAA,CAAA,CAAA,EAAA,CAAA,CAAA,EAKN,KAAA,CAAA,qBAAA,EAAA,KAAA,CAAA,qBAAA,EALM,CAAA,CAAA,EAAA,MAAA,EAKN,KAAA,CAAA,WAAA,EAAA,QALM,CAKN,eALM,CAAA,GAKN,QALM,CAAA,CAAA,CAAA,CAAA,EAAA,CAAA,CAAA,EAAA,CAAA,CAAA,EAAA,CAAA,CAAA,EAAA,CAAA,CAAA,EAAA,MAAA,EAKN,KAAA,CAAA,uBAAA,EALM,KAAA,EAAA,CAAA,CAAA,EAAA,GAAA,CAAA;AAAA,cAQhB,YAPU,EAOW,eANS,CAAA,OAMc,UANd,EAM0B,WAN1B,CAAA;AAAA,cAMM,WADxC,EAAA,OAE0B,YAF1B;KAGG,eALW,CAAA,CAAA,EAAA,CAAA,CAAA,GAKa,CALb,GAAA;EAAA,MAAA,EAAA;IAAA,MAAA,EAON,CAPM;EAAA,CAAA;CAAA"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "reka-ui",
   "type": "module",
-  "version": "2.9.7",
+  "version": "2.9.8",
   "description": "Vue port for Radix UI Primitives.",
   "author": "UnoVue Contributors (https://github.com/unovue)",
   "license": "MIT",
@@ -118,7 +118,7 @@
     "jsdom": "^26.1.0",
     "size-limit": "^12.0.1",
     "tsdown": "^0.12.9",
-    "vite": "^8.0.10",
+    "vite": "^8.0.12",
     "vitest": "^3.2.4",
     "vitest-axe": "0.1.0",
     "vitest-canvas-mock": "^0.3.3",

package/src/Calendar/CalendarRoot.vue

@@ -98,7 +98,7 @@ export interface CalendarRootProps extends PrimitiveProps {
   /** A function that returns the previous page of the calendar. It receives the current placeholder as an argument inside the component. */
   prevPage?: (placeholder: DateValue) => DateValue
   /** The controlled selected date value of the calendar. Can be bound as `v-model`. */
-  modelValue?: DateValue | DateValue[] | undefined
+  modelValue?: DateValue | DateValue[] | null
   /** Whether multiple dates can be selected */
   multiple?: boolean
   /** Whether or not to disable days outside the current view. */

package/src/DateRangeField/DateRangeFieldRoot.vue

@@ -84,7 +84,7 @@ export interface DateRangeFieldRootProps extends PrimitiveProps, FormFieldProps
 
 export type DateRangeFieldRootEmits = {
   /** Event handler called whenever the model value changes */
-  'update:modelValue': [DateRange]
+  'update:modelValue': [date: DateRange]
   /** Event handler called whenever the placeholder value changes */
   'update:placeholder': [date: DateValue]
 }

package/src/Dialog/DialogOverlayImpl.vue

@@ -23,6 +23,7 @@ useForwardExpose()
     :as-child="asChild"
     :data-state="rootContext.open.value ? 'open' : 'closed'"
     style="pointer-events: auto"
+    @pointerdown.left.prevent
   >
     <slot />
   </Primitive>

package/src/FocusScope/FocusScope.vue

@@ -185,6 +185,10 @@ watchEffect(async (cleanupFn) => {
     container.addEventListener(AUTOFOCUS_ON_UNMOUNT, unmountEventHandler)
     container.dispatchEvent(unmountEvent)
 
+    // Signal that blur events fired below are system-initiated (focus trap
+    // cleanup), not user-initiated. Consumers can use this to skip validation.
+    container.setAttribute('data-focus-scope-unmounting', '')
+
     setTimeout(() => {
       if (!unmountEvent.defaultPrevented)
         focus(previouslyFocusedElement ?? document.body, { select: true })
@@ -193,6 +197,7 @@ watchEffect(async (cleanupFn) => {
       container.removeEventListener(AUTOFOCUS_ON_UNMOUNT, unmountEventHandler)
 
       focusScopesStack.remove(focusScope)
+      container.removeAttribute('data-focus-scope-unmounting')
     }, 0)
   })
 })

package/src/Listbox/ListboxItem.vue

@@ -44,7 +44,7 @@ const { CollectionItem } = useCollection()
 const { forwardRef, currentElement } = useForwardExpose()
 const rootContext = injectListboxRootContext()
 
-const isHighlighted = computed(() => currentElement.value === rootContext.highlightedElement.value)
+const isHighlighted = computed(() => currentElement.value != null && currentElement.value === rootContext.highlightedElement.value)
 const isSelected = computed(() => valueComparator(rootContext.modelValue.value, props.value, rootContext.by))
 
 const disabled = computed(() => rootContext.disabled.value || props.disabled)
@@ -76,7 +76,7 @@ provideListboxItemContext({
       :id="id"
       v-bind="$attrs"
       :ref="forwardRef"
-      v-memo="[isHighlighted, isSelected]"
+      v-memo="[isHighlighted, isSelected, disabled, rootContext.focusable.value]"
       role="option"
       :tabindex="rootContext.focusable.value ? isHighlighted ? '0' : '-1' : -1"
       :aria-selected="isSelected"

package/src/Menu/MenuItemImpl.vue

@@ -33,7 +33,7 @@ const { forwardRef, currentElement } = useForwardExpose()
 const { CollectionItem } = useCollection()
 
 const isFocused = ref(false)
-const isHighlighted = computed(() => isFocused.value || (contentContext.highlightedElement.value === currentElement.value))
+const isHighlighted = computed(() => isFocused.value || (currentElement.value != null && contentContext.highlightedElement.value === currentElement.value))
 
 async function handlePointerMove(event: PointerEvent) {
   if (event.defaultPrevented || !isMouseEvent(event))

package/src/MonthPicker/MonthPickerRoot.vue

@@ -74,7 +74,7 @@ export interface MonthPickerRootProps extends PrimitiveProps {
   /** A function that returns the previous page of the month picker. Receives the current placeholder as an argument. */
   prevPage?: (placeholder: DateValue) => DateValue
   /** The controlled selected month value of the month picker. Can be bound as `v-model`. */
-  modelValue?: DateValue | DateValue[] | undefined
+  modelValue?: DateValue | DateValue[] | null
   /** Whether multiple months can be selected */
   multiple?: boolean
 }

package/src/NavigationMenu/NavigationMenuContentImpl.vue

@@ -180,6 +180,9 @@ function handleKeydown(ev: KeyboardEvent) {
 }
 
 function handleDismiss() {
+  if (menuContext.modelValue.value !== itemContext.value)
+    return
+
   const rootContentDismissEvent = new Event(EVENT_ROOT_CONTENT_DISMISS, {
     bubbles: true,
     cancelable: true,

package/src/NavigationMenu/__test__/NavigationMenuUnmountOnHideFalse.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuList,
+  NavigationMenuRoot,
+  NavigationMenuTrigger,
+} from '..'
+
+const modelValue = ref('')
+</script>
+
+<template>
+  <NavigationMenuRoot
+    v-model="modelValue"
+    :unmount-on-hide="false"
+    :disable-hover-trigger="true"
+  >
+    <span data-testid="model-value">{{ modelValue }}</span>
+    <NavigationMenuList>
+      <NavigationMenuItem value="one">
+        <NavigationMenuTrigger data-testid="trigger-one">
+          One
+        </NavigationMenuTrigger>
+        <NavigationMenuContent data-testid="content-one">
+          <button data-testid="inside-one">
+            Inside one
+          </button>
+        </NavigationMenuContent>
+      </NavigationMenuItem>
+
+      <NavigationMenuItem value="two">
+        <NavigationMenuTrigger data-testid="trigger-two">
+          Two
+        </NavigationMenuTrigger>
+        <NavigationMenuContent data-testid="content-two">
+          <button data-testid="inside-two">
+            Inside two
+          </button>
+        </NavigationMenuContent>
+      </NavigationMenuItem>
+    </NavigationMenuList>
+  </NavigationMenuRoot>
+</template>

package/src/Select/SelectContent.vue

@@ -3,7 +3,7 @@ import type {
   SelectContentImplEmits,
   SelectContentImplProps,
 } from './SelectContentImpl.vue'
-import { computed, onMounted, ref, watch } from 'vue'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 
 export type SelectContentEmits = SelectContentImplEmits
 
@@ -44,15 +44,31 @@ const presenceRef = ref<InstanceType<typeof Presence>>()
 const present = computed(() => props.forceMount || rootContext.open.value)
 const renderPresence = ref(present.value)
 
-watch(present, () => {
+let renderPresenceTimeout: ReturnType<typeof setTimeout> | undefined
+
+function clearRenderPresenceTimeout() {
+  if (renderPresenceTimeout) {
+    clearTimeout(renderPresenceTimeout)
+    renderPresenceTimeout = undefined
+  }
+}
+
+watch(present, (_value, _oldValue, onCleanup) => {
   // Toggle render presence after a delay (nextTick is not enough)
   // to allow children to re-render with the latest state.
   // Otherwise, they would remain in the old state during the transition,
   // which would prevent the animation that depend on state (e.g., data-[state=closed])
   // from being applied accurately.
   // @see https://github.com/unovue/reka-ui/issues/1865
-  setTimeout(() => renderPresence.value = present.value)
+  clearRenderPresenceTimeout()
+  renderPresenceTimeout = setTimeout(() => {
+    renderPresence.value = present.value
+    renderPresenceTimeout = undefined
+  })
+  onCleanup(clearRenderPresenceTimeout)
 })
+
+onUnmounted(clearRenderPresenceTimeout)
 </script>
 
 <template>

package/src/Select/__test__/SelectUnmountCleanup.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  SelectContent,
+  SelectItem,
+  SelectItemText,
+  SelectPortal,
+  SelectRoot,
+  SelectTrigger,
+  SelectValue,
+  SelectViewport,
+} from '..'
+
+const open = ref(true)
+const mounted = ref(true)
+</script>
+
+<template>
+  <button @click="open = false">
+    Close
+  </button>
+  <button @click="mounted = false">
+    Unmount
+  </button>
+
+  <SelectRoot
+    v-if="mounted"
+    v-model:open="open"
+  >
+    <SelectTrigger aria-label="Fruit">
+      <SelectValue placeholder="Please select a fruit" />
+    </SelectTrigger>
+    <SelectPortal>
+      <SelectContent position="popper">
+        <SelectViewport>
+          <SelectItem value="apple">
+            <SelectItemText>Apple</SelectItemText>
+          </SelectItem>
+        </SelectViewport>
+      </SelectContent>
+    </SelectPortal>
+  </SelectRoot>
+</template>

package/src/YearPicker/YearPickerRoot.vue

@@ -75,7 +75,7 @@ export interface YearPickerRootProps extends PrimitiveProps {
   /** A function that returns the previous page of the year picker. Receives the current placeholder as an argument. */
   prevPage?: (placeholder: DateValue) => DateValue
   /** The controlled selected year value of the year picker. Can be bound as `v-model`. */
-  modelValue?: DateValue | DateValue[] | undefined
+  modelValue?: DateValue | DateValue[] | null
   /** Whether multiple years can be selected */
   multiple?: boolean
   /** Number of years to display per page */