reka-ui 2.8.2 → 2.9.1

package/src/ColorSwatch/ColorSwatch.vue

@@ -0,0 +1,97 @@
+<script lang="ts">
+import type { PrimitiveProps } from '@/Primitive'
+import type { Color } from '@/shared/color'
+
+export interface ColorSwatchProps extends PrimitiveProps {
+  /**
+   * The color to display in the swatch as a hex string or Color object.
+   * Example: `#16a372`, `#ff5733`, or `{ space: 'hsl', h: 120, s: 100, l: 50, alpha: 1 }`.
+   */
+  color?: string | Color
+  /**
+   * Optional accessible label for the color. If omitted, the color name will be derived from the color value.
+   */
+  label?: string
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Primitive } from '@/Primitive'
+import { colorToString, getColorContrast, getColorName, normalizeColor } from '@/shared/color'
+
+const props = withDefaults(defineProps<ColorSwatchProps>(), { as: 'div', color: '' })
+
+const colorString = computed(() => {
+  if (!props.color)
+    return ''
+  if (typeof props.color === 'string') {
+    return props.color
+  }
+  return colorToString(props.color, 'hex')
+})
+
+const colorObj = computed(() => {
+  if (!props.color)
+    return null
+  try {
+    return normalizeColor(props.color)
+  }
+  catch {
+    return null
+  }
+})
+
+const alpha = computed(() => colorObj.value?.alpha ?? 0)
+const isNoColor = computed(() => !props.color || alpha.value <= 0)
+
+const label = computed(() => {
+  if (props.label)
+    return props.label
+
+  // Match React Aria: transparent colors get "transparent" label
+  if (!colorObj.value || colorObj.value.alpha === 0)
+    return 'transparent'
+
+  try {
+    return getColorName(colorString.value)
+  }
+  catch {
+    return colorString.value || 'transparent'
+  }
+})
+
+const colorContrast = computed(() => {
+  try {
+    return getColorContrast(colorString.value)
+  }
+  catch {
+    if (import.meta.env.DEV) {
+      console.warn(`WARNING: Unable to resolve contrast color for "${colorString.value}".
+           Please check that the color provided is a valid hex color.`)
+    }
+    return undefined
+  }
+})
+</script>
+
+<template>
+  <Primitive
+    role="img"
+    :aria-label="label"
+    aria-roledescription="color swatch"
+    :as-child="asChild"
+    :as="as"
+    :data-color-contrast="colorContrast"
+    :data-no-color="isNoColor ? '' : undefined"
+    :style="{
+      '--reka-color-swatch-color': colorString,
+      '--reka-color-swatch-alpha': String(alpha),
+    }"
+  >
+    <slot
+      :color="colorString"
+      :alpha="alpha"
+    />
+  </Primitive>
+</template>

package/src/ColorSwatch/index.ts

@@ -0,0 +1,4 @@
+export {
+  default as ColorSwatch,
+  type ColorSwatchProps,
+} from './ColorSwatch.vue'

package/src/ColorSwatchPicker/ColorSwatchPickerItem.vue

@@ -0,0 +1,60 @@
+<script lang="ts">
+import type { Ref } from 'vue'
+import type { ListboxItemEmits, ListboxItemProps } from '@/Listbox'
+import { createContext, useForwardPropsEmits } from '@/shared'
+
+export interface ColorSwatchPickerItemProps extends ListboxItemProps {
+/**
+ * The color to display in the swatch as a hex string.
+ * Example: `#16a372` or `#ff5733`.
+ */
+  value: string
+}
+
+export type ColorSwatchPickerItemEmits = ListboxItemEmits
+
+export interface ColorSwatchPickerItemContext {
+  color: Ref<string>
+}
+
+export const [injectColorSwatchPickerItemContext, provideColorSwatchPickerItemContext]
+  = createContext<ColorSwatchPickerItemContext>('ColorSwatchPickerItem', 'ColorSwatchPickerItemContext')
+</script>
+
+<script setup lang="ts">
+import { computed, toRefs } from 'vue'
+import { ListboxItem } from '@/Listbox'
+import { getColorName } from '@/shared/color'
+
+const props = defineProps<ColorSwatchPickerItemProps>()
+
+const emits = defineEmits<ColorSwatchPickerItemEmits>()
+
+const { value } = toRefs(props)
+
+const forwarded = useForwardPropsEmits(props, emits)
+
+const colorLabel = computed(() => {
+  try {
+    return getColorName(value.value)
+  }
+  catch {
+    return value.value
+  }
+})
+
+provideColorSwatchPickerItemContext({
+  color: value,
+})
+</script>
+
+<template>
+  <ListboxItem
+    v-bind="forwarded"
+    :aria-label="colorLabel"
+    :data-color="value"
+    :style="{ '--reka-color-swatch-picker-item-color': value }"
+  >
+    <slot />
+  </ListboxItem>
+</template>

package/src/ColorSwatchPicker/ColorSwatchPickerItemIndicator.vue

@@ -0,0 +1,17 @@
+<script lang="ts">
+import type { ListboxItemIndicatorProps } from '@/Listbox'
+
+export interface ColorSwatchPickerItemIndicatorProps extends ListboxItemIndicatorProps { }
+</script>
+
+<script setup lang="ts">
+import { ListboxItemIndicator } from '@/Listbox'
+
+const props = defineProps<ColorSwatchPickerItemIndicatorProps>()
+</script>
+
+<template>
+  <ListboxItemIndicator v-bind="props">
+    <slot />
+  </ListboxItemIndicator>
+</template>

package/src/ColorSwatchPicker/ColorSwatchPickerItemSwatch.vue

@@ -0,0 +1,21 @@
+<script lang="ts">
+import type { ColorSwatchProps } from '@/ColorSwatch/ColorSwatch.vue'
+
+export interface ColorSwatchPickerItemSwatchProps extends Omit<ColorSwatchProps, 'color'> { }
+</script>
+
+<script setup lang="ts">
+import { ColorSwatch } from '@/ColorSwatch'
+import { injectColorSwatchPickerItemContext } from './ColorSwatchPickerItem.vue'
+
+const props = defineProps<ColorSwatchPickerItemSwatchProps>()
+
+const colorSwatchPickerItemContext = injectColorSwatchPickerItemContext()
+</script>
+
+<template>
+  <ColorSwatch
+    v-bind="props"
+    :color="colorSwatchPickerItemContext.color.value"
+  />
+</template>

package/src/ColorSwatchPicker/ColorSwatchPickerRoot.vue

@@ -0,0 +1,50 @@
+<script lang="ts">
+import type { ListboxRootEmits, ListboxRootProps } from '@/Listbox'
+import { useVModel } from '@vueuse/core'
+import { useForwardPropsEmits } from '@/shared'
+
+export interface ColorSwatchPickerRootProps extends Omit<ListboxRootProps, 'by'> {
+  defaultValue?: string | string[]
+  modelValue?: string | string[]
+}
+
+export type ColorSwatchPickerRootEmits = ListboxRootEmits
+</script>
+
+<script setup lang="ts">
+import { ListboxContent, ListboxRoot } from '@/Listbox'
+
+const props = withDefaults(defineProps<ColorSwatchPickerRootProps>(), {
+  as: 'div',
+  defaultValue: undefined,
+  dir: 'ltr',
+  disabled: false,
+  loop: false,
+  orientation: 'horizontal',
+})
+
+const emits = defineEmits<ColorSwatchPickerRootEmits>()
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+  defaultValue: props.defaultValue ?? (props.multiple ? [] : ''),
+  // Cast required for VueUse's passive option type; enables passive sync when modelValue is undefined
+  passive: (props.modelValue === undefined) as false,
+})
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <ListboxRoot
+    v-bind="forwarded"
+    v-model="modelValue"
+    as-child
+  >
+    <ListboxContent
+      :as-child="asChild"
+      :as="as"
+    >
+      <slot :model-value="modelValue" />
+    </ListboxContent>
+  </ListboxRoot>
+</template>

package/src/ColorSwatchPicker/index.ts

@@ -0,0 +1,17 @@
+export {
+  default as ColorSwatchPickerItem,
+  type ColorSwatchPickerItemProps,
+} from './ColorSwatchPickerItem.vue'
+export {
+  default as ColorSwatchPickerItemIndicator,
+  type ColorSwatchPickerItemIndicatorProps,
+} from './ColorSwatchPickerItemIndicator.vue'
+export {
+  default as ColorSwatchPickerItemSwatch,
+  type ColorSwatchPickerItemSwatchProps,
+} from './ColorSwatchPickerItemSwatch.vue'
+export {
+  default as ColorSwatchPickerRoot,
+  type ColorSwatchPickerRootEmits,
+  type ColorSwatchPickerRootProps,
+} from './ColorSwatchPickerRoot.vue'

package/src/Combobox/ComboboxContentImpl.vue

@@ -17,6 +17,11 @@ export interface ComboboxContentImplProps extends PopperContentProps, Dismissabl
   position?: 'inline' | 'popper'
   /** The document.body will be lock, and scrolling will be disabled. */
   bodyLock?: boolean
+  /**
+   * When `true`, hides the content when there are no items matching the filter.
+   * @defaultValue false
+   */
+  hideWhenEmpty?: boolean
 }
 
 export const [injectComboboxContentContext, provideComboboxContentContext]
@@ -42,6 +47,11 @@ const emits = defineEmits<ComboboxContentImplEmits>()
 const { position } = toRefs(props)
 const rootContext = injectComboboxRootContext()
 
+const isEmpty = computed(() => rootContext.ignoreFilter.value
+  ? rootContext.allItems.value.size === 0
+  : rootContext.filterState.value.count === 0,
+)
+
 const { forwardRef, currentElement } = useForwardExpose()
 useBodyScrollLock(props.bodyLock)
 useFocusGuards()
@@ -119,9 +129,11 @@ onUnmounted(() => {
           :id="rootContext.contentId"
           :ref="forwardRef"
           :data-state="rootContext.open.value ? 'open' : 'closed'"
+          :data-empty="isEmpty ? '' : undefined"
           :style="{
             // flex layout so we can place the scroll buttons properly
-            display: 'flex',
+            // When hideWhenEmpty is true, hide the content when no items match
+            display: (props.hideWhenEmpty && isEmpty) ? 'none' : 'flex',
             flexDirection: 'column',
             // reset the outline by default as the content MAY get focused
             outline: 'none',

package/src/Combobox/ComboboxInput.vue

@@ -60,6 +60,24 @@ function handleFocus() {
     rootContext.onOpenChange(true)
 }
 
+function handleBlur(ev: FocusEvent) {
+  if (!rootContext.open.value)
+    return
+
+  const nextFocus = ev.relatedTarget as Element | null
+
+  // If focus moves to nothing (e.g. click on non-focusable area), let DismissableLayer handle it
+  if (!nextFocus)
+    return
+
+  const isInsideRoot = rootContext.parentElement.value?.contains(nextFocus)
+  const isInsideContent = document.getElementById(rootContext.contentId)?.contains(nextFocus)
+
+  if (!isInsideRoot && !isInsideContent) {
+    rootContext.onOpenChange(false)
+  }
+}
+
 function handleClick() {
   if (rootContext.openOnClick.value && !rootContext.open.value)
     rootContext.onOpenChange(true)
@@ -122,6 +140,7 @@ watch(rootContext.filterState, (_newValue, oldValue) => {
     @input="handleInput"
     @keydown.down.up.prevent="handleKeyDown"
     @focus="handleFocus"
+    @blur="handleBlur"
   >
     <slot />
   </ListboxFilter>

package/src/DateField/DateFieldRoot.vue

@@ -44,7 +44,7 @@ export interface DateFieldRootProps extends PrimitiveProps, FormFieldProps {
   defaultPlaceholder?: DateValue
   /** The placeholder date, which is used to determine what month to display when no date is selected. This updates as the user navigates the calendar and can be used to programmatically control the calendar view */
   placeholder?: DateValue
-  /** The controlled checked state of the calendar. Can be bound as `v-model`. */
+  /** The controlled value of the field. Can be bound as `v-model`. */
   modelValue?: DateValue | null
   /** The hour cycle used for formatting times. Defaults to the local preference */
   hourCycle?: HourCycle

package/src/DateRangeField/DateRangeFieldRoot.vue

@@ -12,15 +12,12 @@ import {
   hasTime,
   isBefore,
   isBeforeOrSame,
-
 } from '@/date'
 import { createContext, useDateFormatter, useDirection, useKbd, useLocale } from '@/shared'
 import {
   createContent,
-
   getDefaultDate,
   getSegmentElements,
-
   initializeSegmentValues,
   isSegmentNavigationKey,
   normalizeDateStep,
@@ -57,7 +54,7 @@ export interface DateRangeFieldRootProps extends PrimitiveProps, FormFieldProps
   defaultPlaceholder?: DateValue
   /** The placeholder date, which is used to determine what month to display when no date is selected. This updates as the user navigates the calendar and can be used to programmatically control the calendar view */
   placeholder?: DateValue
-  /** The controlled checked state of the calendar. Can be bound as `v-model`. */
+  /** The controlled value of the field. Can be bound as `v-model`. */
   modelValue?: DateRange | null
   /** The hour cycle used for formatting times. Defaults to the local preference */
   hourCycle?: HourCycle
@@ -114,6 +111,16 @@ const props = withDefaults(defineProps<DateRangeFieldRootProps>(), {
   isDateUnavailable: undefined,
 })
 const emits = defineEmits<DateRangeFieldRootEmits>()
+defineSlots<{
+  default?: (props: {
+    /** The current date range of the field */
+    modelValue: DateRange | null
+    /** The date field segment contents */
+    segments: { start: { part: SegmentPart, value: string }[], end: { part: SegmentPart, value: string }[] }
+    /** Value if the input is invalid */
+    isInvalid: boolean
+  }) => any
+}>()
 const { disabled, readonly, isDateUnavailable: propsIsDateUnavailable, dir: propDir, locale: propLocale } = toRefs(props)
 const locale = useLocale(propLocale)
 const dir = useDirection(propDir)

package/src/DismissableLayer/utils.ts

@@ -13,7 +13,10 @@ export const CONTEXT_UPDATE = 'dismissableLayer.update'
 export const POINTER_DOWN_OUTSIDE = 'dismissableLayer.pointerDownOutside'
 export const FOCUS_OUTSIDE = 'dismissableLayer.focusOutside'
 
-function isLayerExist(layerElement: HTMLElement, targetElement: HTMLElement) {
+export function isLayerExist(layerElement: HTMLElement, targetElement: HTMLElement) {
+  if (!(targetElement instanceof Element))
+    return false
+
   const targetLayer = targetElement.closest(
     '[data-dismissable-layer]',
   )
@@ -28,8 +31,7 @@ function isLayerExist(layerElement: HTMLElement, targetElement: HTMLElement) {
     layerElement.ownerDocument.querySelectorAll('[data-dismissable-layer]'),
   )
 
-  if (targetLayer && (mainLayer === targetLayer || nodeList.indexOf(mainLayer) < nodeList.indexOf(targetLayer))
-  ) {
+  if (targetLayer && (mainLayer === targetLayer || nodeList.indexOf(mainLayer) < nodeList.indexOf(targetLayer))) {
     return true
   }
   else {

package/src/DropdownMenu/DropdownMenuFilter.vue

@@ -0,0 +1,119 @@
+<script lang="ts">
+import type { PrimitiveProps } from '@/Primitive'
+import { useVModel } from '@vueuse/core'
+import { computed, onMounted, onUnmounted, ref, watch, watchSyncEffect } from 'vue'
+import { injectMenuContentContext } from '@/Menu/MenuContentImpl.vue'
+import { injectMenuRootContext } from '@/Menu/MenuRoot.vue'
+import { injectMenuSubContext } from '@/Menu/MenuSub.vue'
+import { Primitive, usePrimitiveElement } from '@/Primitive'
+
+export interface DropdownMenuFilterProps extends PrimitiveProps {
+  /** The controlled value of the filter. Can be binded with v-model. */
+  modelValue?: string
+  /** Focus on element when mounted. */
+  autoFocus?: boolean
+  /** When `true`, prevents the user from interacting with item */
+  disabled?: boolean
+}
+
+export type DropdownMenuFilterEmits = {
+  'update:modelValue': [string]
+}
+</script>
+
+<script setup lang="ts">
+const props = withDefaults(defineProps<DropdownMenuFilterProps>(), {
+  as: 'input',
+})
+const emits = defineEmits<DropdownMenuFilterEmits>()
+
+defineSlots<{
+  default?: (props: {
+    /** Current input values */
+    modelValue: typeof modelValue.value
+  }) => any
+}>()
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+  defaultValue: '',
+  passive: (props.modelValue === undefined) as false,
+})
+
+const rootContext = injectMenuRootContext()
+const contentContext = injectMenuContentContext()
+const subContext = injectMenuSubContext(null)
+
+// Keep searchRef in sync with modelValue changes
+watch(modelValue, (v) => { contentContext.searchRef.value = v ?? '' }, { immediate: true })
+
+const { primitiveElement, currentElement } = usePrimitiveElement()
+const disabled = computed(() => props.disabled || false)
+
+const activedescendant = ref<string | undefined>()
+watchSyncEffect(() => activedescendant.value = contentContext.highlightedElement.value?.id)
+
+onMounted(() => {
+  contentContext.onFilterElementChange(currentElement.value)
+  setTimeout(() => {
+    // make sure all DOM was flush then only capture the focus
+    if (props.autoFocus) {
+      const isSubmenu = !!subContext
+      if (!isSubmenu || rootContext.isUsingKeyboardRef.value)
+        currentElement.value?.focus()
+    }
+  }, 1)
+})
+
+onUnmounted(() => {
+  contentContext.onFilterElementChange(undefined)
+  // Clean up search when unmounting
+  contentContext.searchRef.value = ''
+})
+
+function handleInput(event: InputEvent) {
+  if (disabled.value)
+    return
+  const target = event.target as HTMLInputElement
+  modelValue.value = target.value
+  // Update the menu's search ref to help with filtering
+  contentContext.searchRef.value = target.value
+}
+
+function handleKeyDown(event: KeyboardEvent) {
+  if (disabled.value)
+    return
+  if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {
+    event.preventDefault()
+    contentContext.onKeydownNavigation(event)
+  }
+  else if (event.key === 'Enter') {
+    event.preventDefault()
+    contentContext.onKeydownEnter(event)
+  }
+  // Prevent Escape from bubbling to avoid closing the menu when clearing the filter
+  else if (event.key === 'Escape' && modelValue.value) {
+    event.stopPropagation()
+    modelValue.value = ''
+    contentContext.searchRef.value = ''
+  }
+}
+</script>
+
+<template>
+  <Primitive
+    ref="primitiveElement"
+    :as="as"
+    :as-child="asChild"
+    :value="modelValue"
+    :disabled="disabled ? '' : undefined"
+    :data-disabled="disabled ? '' : undefined"
+    :aria-disabled="disabled ? true : undefined"
+    :aria-activedescendant="activedescendant"
+    type="text"
+    role="searchbox"
+    @input="handleInput"
+    @keydown="handleKeyDown"
+  >
+    <slot :model-value="modelValue" />
+  </Primitive>
+</template>

package/src/DropdownMenu/index.ts

@@ -12,6 +12,11 @@ export {
   type DropdownMenuContentEmits,
   type DropdownMenuContentProps,
 } from './DropdownMenuContent.vue'
+export {
+  default as DropdownMenuFilter,
+  type DropdownMenuFilterEmits,
+  type DropdownMenuFilterProps,
+} from './DropdownMenuFilter.vue'
 export {
   default as DropdownMenuGroup,
   type DropdownMenuGroupProps,

package/src/Menu/MenuContentImpl.vue

@@ -27,6 +27,12 @@ export interface MenuContentContext {
   onItemLeave: (event: PointerEvent) => void
   onTriggerLeave: (event: PointerEvent) => boolean
   searchRef: Ref<string>
+  highlightedElement: Ref<HTMLElement | undefined>
+  onKeydownNavigation: (event: KeyboardEvent) => void
+  onKeydownEnter: (event: KeyboardEvent) => void
+  filterElement: Ref<HTMLElement | undefined>
+  onFilterElementChange: (el: HTMLElement | undefined) => void
+  activeSubmenuContext: Ref<{ onOpenChange: (open: boolean) => void, trigger: Ref<HTMLElement | undefined> } | undefined>
   pointerGraceTimerRef: Ref<number>
   onPointerGraceIntentChange: (intent: GraceIntent | null) => void
 }
@@ -132,6 +138,43 @@ const rovingFocusGroupRef = ref<InstanceType<typeof RovingFocusGroup>>()
 const { forwardRef, currentElement: contentElement } = useForwardExpose()
 const { handleTypeaheadSearch } = useTypeahead()
 
+const highlightedElement = ref<HTMLElement>()
+
+function onKeydownNavigation(event: KeyboardEvent) {
+  const el = useArrowNavigation(
+    event,
+    (highlightedElement.value || getActiveElement()) as HTMLElement,
+    contentElement.value,
+    {
+      loop: loop.value,
+      arrowKeyOptions: 'vertical',
+      dir: rootContext?.dir.value,
+      focus: false,
+      attributeName: '[data-reka-collection-item]:not([data-disabled])',
+    },
+  )
+  if (el) {
+    highlightedElement.value = el
+    el.scrollIntoView({ block: 'nearest' })
+  }
+}
+
+function onKeydownEnter() {
+  if (highlightedElement.value) {
+    highlightedElement.value.click()
+  }
+}
+
+const filterElement = ref<HTMLElement>()
+const activeSubmenuContext = ref<{ onOpenChange: (open: boolean) => void, trigger: Ref<HTMLElement | undefined> }>()
+
+watch(highlightedElement, (el) => {
+  if (activeSubmenuContext.value && (el === undefined || el !== activeSubmenuContext.value.trigger.value)) {
+    activeSubmenuContext.value.onOpenChange(false)
+    activeSubmenuContext.value = undefined
+  }
+})
+
 watch(contentElement, (el) => {
   menuContext!.onContentChange(el)
 })
@@ -169,6 +212,7 @@ function handleKeyDown(event: KeyboardEvent) {
   const target = event.target as HTMLElement
   const isKeyDownInside
     = target.closest('[data-reka-menu-content]') === event.currentTarget
+  const isKeyDownInTextField = ['input', 'textarea'].includes(target.tagName.toLowerCase())
   const isModifierKey = event.ctrlKey || event.altKey || event.metaKey
   const isCharacterKey = event.key.length === 1
 
@@ -197,7 +241,7 @@ function handleKeyDown(event: KeyboardEvent) {
     // menus should not be navigated using tab key so we prevent it
     if (event.key === 'Tab')
       event.preventDefault()
-    if (!isModifierKey && isCharacterKey)
+    if (!isModifierKey && isCharacterKey && !isKeyDownInTextField)
       handleTypeaheadSearch(event.key, collectionItems)
   }
 
@@ -240,6 +284,15 @@ function handlePointerMove(event: PointerEvent) {
   }
 }
 
+function handlePointerEnter(event: PointerEvent) {
+  if (!isMouseEvent(event))
+    return
+  // When hovering over a menu content (main or sub), focus its filter element if it exists
+  if (filterElement.value) {
+    filterElement.value.focus()
+  }
+}
+
 provideMenuContentContext({
   onItemEnter: (event) => {
     // event.preventDefault() we can't prevent pointerMove event
@@ -251,7 +304,11 @@ provideMenuContentContext({
   onItemLeave: (event) => {
     if (isPointerMovingToSubmenu(event))
       return
-    contentElement.value?.focus()
+
+    const isInputFocused = ['INPUT', 'TEXTAREA'].includes(getActiveElement()?.tagName || '')
+    if (!isInputFocused)
+      contentElement.value?.focus()
+
     currentItemId.value = null
   },
   onTriggerLeave: (event) => {
@@ -262,6 +319,14 @@ provideMenuContentContext({
       return false
   },
   searchRef,
+  highlightedElement,
+  onKeydownNavigation,
+  onKeydownEnter,
+  filterElement,
+  onFilterElementChange: (el) => {
+    filterElement.value = el
+  },
+  activeSubmenuContext,
   pointerGraceTimerRef,
   onPointerGraceIntentChange: (intent) => {
     pointerGraceIntentRef.value = intent
@@ -324,6 +389,7 @@ provideMenuContentContext({
           @keydown="handleKeyDown"
           @blur="handleBlur"
           @pointermove="handlePointerMove"
+          @pointerenter="handlePointerEnter"
         >
           <slot />
         </PopperContent>