reka-ui 2.8.0 → 2.9.0

package/src/Autocomplete/AutocompleteRoot.vue

@@ -0,0 +1,272 @@
+<script lang="ts">
+import type { Ref } from 'vue'
+import type { PrimitiveProps } from '@/Primitive'
+import type { Direction, GenericComponentInstance } from '@/shared/types'
+import { provideComboboxRootContext } from '@/Combobox/ComboboxRoot.vue'
+import { usePrimitiveElement } from '@/Primitive'
+import { createContext, useDirection, useFilter } from '@/shared'
+
+export interface AutocompleteRootProps extends PrimitiveProps {
+  /** The controlled value of the Autocomplete (the input text). Can be bound with `v-model`. */
+  modelValue?: string
+  /** The value of the autocomplete when initially rendered. Use when you do not need to control the state. */
+  defaultValue?: string
+  /** The controlled open state of the Autocomplete. Can be bound with `v-model:open`. */
+  open?: boolean
+  /** The open state of the autocomplete when it is initially rendered. Use when you do not need to control its open state. */
+  defaultOpen?: boolean
+  /** When `true`, prevents the user from interacting with autocomplete */
+  disabled?: boolean
+  /** The reading direction of the autocomplete when applicable. */
+  dir?: Direction
+  /** The name of the field. Submitted with its owning form as part of a name/value pair. */
+  name?: string
+  /** When `true`, indicates that the user must set the value before the owning form can be submitted. */
+  required?: boolean
+  /**
+   * Whether to reset the searchTerm when the Autocomplete input blurred
+   * @defaultValue `false`
+   */
+  resetSearchTermOnBlur?: boolean
+  /**
+   * Whether to open the autocomplete when the input is focused
+   * @defaultValue `false`
+   */
+  openOnFocus?: boolean
+  /**
+   * Whether to open the autocomplete when the input is clicked
+   * @defaultValue `false`
+   */
+  openOnClick?: boolean
+  /**
+   * When `true`, disable the default filters
+   */
+  ignoreFilter?: boolean
+  /** When `true`, hover over item will trigger highlight */
+  highlightOnHover?: boolean
+}
+
+export type AutocompleteRootEmits = {
+  /** Event handler called when the value changes. */
+  'update:modelValue': [value: string]
+  /** Event handler when highlighted element changes. */
+  'highlight': [payload: { ref: HTMLElement, value: string } | undefined]
+  /** Event handler called when the open state of the autocomplete changes. */
+  'update:open': [value: boolean]
+}
+
+export type AutocompleteRootContext = {
+  modelValue: Ref<string>
+}
+
+export const [injectAutocompleteRootContext, provideAutocompleteRootContext]
+  = createContext<AutocompleteRootContext>('AutocompleteRoot')
+</script>
+
+<script setup lang="ts">
+import { createEventHook, useVModel } from '@vueuse/core'
+import { computed, getCurrentInstance, nextTick, onMounted, ref, toRefs } from 'vue'
+import { ListboxRoot } from '@/Listbox'
+import { PopperRoot } from '@/Popper'
+
+const props = withDefaults(defineProps<AutocompleteRootProps>(), {
+  open: undefined,
+  resetSearchTermOnBlur: false,
+  openOnFocus: false,
+  openOnClick: false,
+  highlightOnHover: true,
+})
+const emits = defineEmits<AutocompleteRootEmits>()
+
+defineSlots<{
+  default?: (props: {
+    /** Current open state */
+    open: typeof open.value
+    /** Current active value */
+    modelValue: typeof modelValue.value
+  }) => any
+}>()
+
+const { primitiveElement, currentElement: parentElement } = usePrimitiveElement<GenericComponentInstance<typeof ListboxRoot>>()
+const { disabled, ignoreFilter, openOnFocus, openOnClick, dir: propDir, highlightOnHover } = toRefs(props)
+
+const dir = useDirection(propDir)
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+  defaultValue: props.defaultValue ?? '',
+  passive: (props.modelValue === undefined) as false,
+}) as Ref<string>
+
+const open = useVModel(props, 'open', emits, {
+  defaultValue: props.defaultOpen,
+  passive: (props.open === undefined) as false,
+}) as Ref<boolean>
+
+// Writable computed that converts any value to string for the ComboboxRootContext.
+// This handles the case when ComboboxItem sets modelValue to a non-string value,
+// or when ComboboxCancel resets modelValue to null.
+const contextModelValue = computed({
+  get: () => modelValue.value,
+  set: (val: any) => {
+    if (val === null || val === undefined) {
+      modelValue.value = ''
+    }
+    else {
+      modelValue.value = String(val)
+    }
+  },
+})
+
+async function onOpenChange(val: boolean) {
+  open.value = val
+
+  if (val) {
+    // When opening, set filter to current text so items are filtered by what's in the input
+    filterSearch.value = modelValue.value || ''
+
+    await nextTick()
+    primitiveElement.value?.highlightSelected()
+    isUserInputted.value = true
+    inputElement.value?.focus()
+  }
+  else {
+    isUserInputted.value = false
+    filterSearch.value = ''
+    setTimeout(() => {
+      if (!val && props.resetSearchTermOnBlur)
+        resetSearchTerm.trigger()
+    }, 1)
+  }
+}
+
+const resetSearchTerm = createEventHook()
+const isUserInputted = ref(false)
+const isVirtual = ref(false)
+const inputElement = ref<HTMLInputElement>()
+const triggerElement = ref<HTMLElement>()
+
+const highlightedElement = computed(() => primitiveElement.value?.highlightedElement ?? undefined)
+
+const allItems = ref<Map<string, string>>(new Map())
+const allGroups = ref<Map<string, Set<string>>>(new Map())
+
+const { contains } = useFilter({ sensitivity: 'base' })
+
+const filterSearch = ref('')
+
+const filterState = computed<{
+  count: number
+  items: Map<string, number>
+  groups: Set<string>
+}>((oldValue) => {
+  if (!filterSearch.value || props.ignoreFilter || isVirtual.value) {
+    return {
+      count: allItems.value.size,
+      items: oldValue?.items ?? new Map(),
+      groups: oldValue?.groups ?? new Set(allGroups.value.keys()),
+    }
+  }
+
+  let itemCount = 0
+  const filteredItems = new Map<string, number>()
+  const filteredGroups = new Set<string>()
+
+  for (const [id, value] of allItems.value) {
+    const score = contains(value, filterSearch.value)
+    filteredItems.set(id, score ? 1 : 0)
+    if (score)
+      itemCount++
+  }
+
+  for (const [groupId, group] of allGroups.value) {
+    for (const itemId of group) {
+      if (filteredItems.get(itemId)! > 0) {
+        filteredGroups.add(groupId)
+        break
+      }
+    }
+  }
+
+  return {
+    count: itemCount,
+    items: filteredItems,
+    groups: filteredGroups,
+  }
+})
+
+const inst = getCurrentInstance()
+onMounted(() => {
+  if (inst?.exposed) {
+    inst.exposed.highlightItem = primitiveElement.value?.highlightItem
+    inst.exposed.highlightFirstItem = primitiveElement.value?.highlightFirstItem
+    inst.exposed.highlightSelected = primitiveElement.value?.highlightSelected
+  }
+})
+
+defineExpose({
+  filtered: filterState,
+  highlightedElement,
+  highlightItem: primitiveElement.value?.highlightItem,
+  highlightFirstItem: primitiveElement.value?.highlightFirstItem,
+  highlightSelected: primitiveElement.value?.highlightSelected,
+})
+
+// Provide the Combobox context so all Combobox sub-components work inside Autocomplete
+provideComboboxRootContext({
+  modelValue: contextModelValue as any,
+  multiple: ref(false),
+  disabled,
+  open,
+  onOpenChange,
+  contentId: '',
+  isUserInputted,
+  isVirtual,
+  inputElement,
+  highlightedElement,
+  onInputElementChange: val => inputElement.value = val,
+  triggerElement,
+  onTriggerElementChange: val => triggerElement.value = val,
+  parentElement,
+  resetSearchTermOnSelect: ref(false),
+  onResetSearchTerm: resetSearchTerm.on,
+  allItems,
+  allGroups,
+  filterSearch,
+  filterState,
+  ignoreFilter,
+  openOnFocus,
+  openOnClick,
+  resetModelValueOnClear: ref(true),
+})
+
+// Provide autocomplete-specific context
+provideAutocompleteRootContext({
+  modelValue,
+})
+</script>
+
+<template>
+  <PopperRoot>
+    <ListboxRoot
+      ref="primitiveElement"
+      v-bind="$attrs"
+      v-model="(contextModelValue as any)"
+      :style="{
+        pointerEvents: open ? 'auto' : undefined,
+      }"
+      :as="as"
+      :as-child="asChild"
+      :dir="dir"
+      :name="name"
+      :required="required"
+      :disabled="disabled"
+      :highlight-on-hover="highlightOnHover"
+      @highlight="emits('highlight', $event as any)"
+    >
+      <slot
+        :open="open"
+        :model-value="modelValue"
+      />
+    </ListboxRoot>
+  </PopperRoot>
+</template>

package/src/Autocomplete/index.ts

@@ -0,0 +1,72 @@
+export {
+  default as AutocompleteInput,
+  type AutocompleteInputEmits,
+  type AutocompleteInputProps,
+} from './AutocompleteInput.vue'
+export {
+  default as AutocompleteRoot,
+  type AutocompleteRootEmits,
+  type AutocompleteRootProps,
+  injectAutocompleteRootContext,
+} from './AutocompleteRoot.vue'
+
+// Re-export Combobox sub-components as Autocomplete equivalents.
+// These components inject ComboboxRootContext which AutocompleteRoot provides.
+export {
+  ComboboxAnchor as AutocompleteAnchor,
+  type ComboboxAnchorProps as AutocompleteAnchorProps,
+} from '@/Combobox'
+export {
+  ComboboxArrow as AutocompleteArrow,
+  type ComboboxArrowProps as AutocompleteArrowProps,
+} from '@/Combobox'
+export {
+  ComboboxCancel as AutocompleteCancel,
+  type ComboboxCancelProps as AutocompleteCancelProps,
+} from '@/Combobox'
+export {
+  ComboboxContent as AutocompleteContent,
+  type ComboboxContentEmits as AutocompleteContentEmits,
+  type ComboboxContentProps as AutocompleteContentProps,
+} from '@/Combobox'
+export {
+  ComboboxEmpty as AutocompleteEmpty,
+  type ComboboxEmptyProps as AutocompleteEmptyProps,
+} from '@/Combobox'
+export {
+  ComboboxGroup as AutocompleteGroup,
+  type ComboboxGroupProps as AutocompleteGroupProps,
+} from '@/Combobox'
+export {
+  ComboboxItem as AutocompleteItem,
+  type ComboboxItemEmits as AutocompleteItemEmits,
+  type ComboboxItemProps as AutocompleteItemProps,
+} from '@/Combobox'
+export {
+  ComboboxItemIndicator as AutocompleteItemIndicator,
+  type ComboboxItemIndicatorProps as AutocompleteItemIndicatorProps,
+} from '@/Combobox'
+export {
+  ComboboxLabel as AutocompleteLabel,
+  type ComboboxLabelProps as AutocompleteLabelProps,
+} from '@/Combobox'
+export {
+  ComboboxPortal as AutocompletePortal,
+  type ComboboxPortalProps as AutocompletePortalProps,
+} from '@/Combobox'
+export {
+  ComboboxSeparator as AutocompleteSeparator,
+  type ComboboxSeparatorProps as AutocompleteSeparatorProps,
+} from '@/Combobox'
+export {
+  ComboboxTrigger as AutocompleteTrigger,
+  type ComboboxTriggerProps as AutocompleteTriggerProps,
+} from '@/Combobox'
+export {
+  ComboboxViewport as AutocompleteViewport,
+  type ComboboxViewportProps as AutocompleteViewportProps,
+} from '@/Combobox'
+export {
+  ComboboxVirtualizer as AutocompleteVirtualizer,
+  type ComboboxVirtualizerProps as AutocompleteVirtualizerProps,
+} from '@/Combobox'

package/src/Calendar/CalendarCellTrigger.vue

@@ -82,8 +82,15 @@ const isOutsideVisibleView = computed(() =>
 const isDisabled = computed(() => rootContext.isDateDisabled(props.day) || (rootContext.disableDaysOutsideCurrentView.value && isOutsideView.value))
 
 const isFocusedDate = computed(() => {
-  return !rootContext.disabled.value && isSameDay(props.day, rootContext.placeholder.value)
+  if (isOutsideView.value || isDisabled.value)
+    return false
+  if (!rootContext.disabled.value && rootContext.isPlaceholderFocusable.value && isSameDay(props.day, rootContext.placeholder.value))
+    return true
+  if ((!rootContext.hasSelectedDate.value || rootContext.isSelectedDateDisabled.value) && !rootContext.isPlaceholderFocusable.value)
+    return rootContext.firstFocusableDate.value && isSameDay(props.day, rootContext.firstFocusableDate.value)
+  return false
 })
+
 const isSelectedDate = computed(() => rootContext.isDateSelected(props.day))
 
 function changeDate(date: DateValue) {
@@ -164,7 +171,8 @@ function handleArrowKey(e: KeyboardEvent) {
 <template>
   <Primitive
     ref="primitiveElement"
-    v-bind="props"
+    :as="props.as"
+    :as-child="props.asChild"
     role="button"
     :aria-label="labelText"
     data-reka-calendar-cell-trigger

package/src/Calendar/CalendarNext.vue

@@ -26,6 +26,12 @@ defineSlots<CalendarNextSlot>()
 const disabled = computed(() => rootContext.disabled.value || rootContext.isNextButtonDisabled(props.nextPage))
 
 const rootContext = injectCalendarRootContext()
+
+function handleClick() {
+  if (disabled.value)
+    return
+  rootContext.nextPage(props.nextPage)
+}
 </script>
 
 <template>
@@ -33,11 +39,11 @@ const rootContext = injectCalendarRootContext()
     :as="props.as"
     :as-child="props.asChild"
     aria-label="Next page"
-    :type="as === 'button' ? 'button' : undefined"
+    :type="props.as === 'button' ? 'button' : undefined"
     :aria-disabled="disabled || undefined"
     :data-disabled="disabled || undefined"
     :disabled="disabled"
-    @click="rootContext.nextPage(props.nextPage)"
+    @click="handleClick"
   >
     <slot :disabled>
       Next page

package/src/Calendar/CalendarPrev.vue

@@ -26,6 +26,12 @@ defineSlots<CalendarPrevSlot>()
 const disabled = computed(() => rootContext.disabled.value || rootContext.isPrevButtonDisabled(props.prevPage))
 
 const rootContext = injectCalendarRootContext()
+
+function handleClick() {
+  if (disabled.value)
+    return
+  rootContext.prevPage(props.prevPage)
+}
 </script>
 
 <template>
@@ -33,11 +39,11 @@ const rootContext = injectCalendarRootContext()
     aria-label="Previous page"
     :as="props.as"
     :as-child="props.asChild"
-    :type="as === 'button' ? 'button' : undefined"
+    :type="props.as === 'button' ? 'button' : undefined"
     :aria-disabled="disabled || undefined"
     :data-disabled="disabled || undefined"
     :disabled="disabled"
-    @click="rootContext.prevPage(props.prevPage)"
+    @click="handleClick"
   >
     <slot :disabled>
       Prev page

package/src/Calendar/CalendarRoot.vue

@@ -2,12 +2,13 @@
 import type { DateValue } from '@internationalized/date'
 
 import type { Ref } from 'vue'
-import type { Grid, Matcher, WeekDayFormat } from '@/date'
+import type { Grid, Matcher, WeekDayFormat, WeekStartsOn } from '@/date'
 import type { PrimitiveProps } from '@/Primitive'
 
 import type { Formatter } from '@/shared'
 import type { Direction } from '@/shared/types'
 import { isEqualDay, isSameDay } from '@internationalized/date'
+import { getWeekStartsOn } from '@/date'
 import { createContext, useDirection, useLocale } from '@/shared'
 import { getDefaultDate, handleCalendarInitialFocus } from '@/shared/date'
 import { useCalendar, useCalendarState } from './useCalendar'
@@ -20,7 +21,7 @@ type CalendarRootContext = {
   preventDeselect: Ref<boolean>
   grid: Ref<Grid<DateValue>[]>
   weekDays: Ref<string[]>
-  weekStartsOn: Ref<0 | 1 | 2 | 3 | 4 | 5 | 6>
+  weekStartsOn: Ref<WeekStartsOn>
   weekdayFormat: Ref<WeekDayFormat>
   fixedWeeks: Ref<boolean>
   multiple: Ref<boolean>
@@ -47,6 +48,10 @@ type CalendarRootContext = {
   disableDaysOutsideCurrentView: Ref<boolean>
   minValue: Ref<DateValue | undefined>
   maxValue: Ref<DateValue | undefined>
+  isPlaceholderFocusable: Ref<boolean>
+  firstFocusableDate: Ref<DateValue | undefined>
+  hasSelectedDate: Ref<boolean>
+  isSelectedDateDisabled: Ref<boolean>
 }
 
 export interface CalendarRootProps extends PrimitiveProps {
@@ -61,7 +66,7 @@ export interface CalendarRootProps extends PrimitiveProps {
   /** Whether or not to prevent the user from deselecting a date without selecting another date first */
   preventDeselect?: boolean
   /** The day of the week to start the calendar on */
-  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6
+  weekStartsOn?: WeekStartsOn
   /** The format to use for the weekday strings provided via the weekdays slot prop */
   weekdayFormat?: WeekDayFormat
   /** The accessible label for the calendar */
@@ -92,7 +97,7 @@ export interface CalendarRootProps extends PrimitiveProps {
   nextPage?: (placeholder: DateValue) => DateValue
   /** 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 checked state of the calendar */
+  /** The controlled selected date value of the calendar. Can be bound as `v-model`. */
   modelValue?: DateValue | DateValue[] | undefined
   /** Whether multiple dates can be selected */
   multiple?: boolean
@@ -113,7 +118,7 @@ export const [injectCalendarRootContext, provideCalendarRootContext]
 
 <script setup lang="ts">
 import { useVModel } from '@vueuse/core'
-import { onMounted, toRefs, watch } from 'vue'
+import { computed, onMounted, toRefs, watch } from 'vue'
 import { Primitive, usePrimitiveElement } from '@/Primitive'
 
 const props = withDefaults(defineProps<CalendarRootProps>(), {
@@ -121,7 +126,6 @@ const props = withDefaults(defineProps<CalendarRootProps>(), {
   as: 'div',
   pagedNavigation: false,
   preventDeselect: false,
-  weekStartsOn: 0,
   weekdayFormat: 'narrow',
   fixedWeeks: false,
   multiple: false,
@@ -144,7 +148,7 @@ defineSlots<{
     /** The days of the week */
     weekDays: string[]
     /** The start of the week */
-    weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6
+    weekStartsOn: WeekStartsOn
     /** The calendar locale */
     locale: string
     /** Whether or not to always display 6 weeks in the calendar */
@@ -159,7 +163,6 @@ const {
   readonly,
   initialFocus,
   pagedNavigation,
-  weekStartsOn,
   weekdayFormat,
   fixedWeeks,
   multiple,
@@ -182,6 +185,7 @@ const { primitiveElement, currentElement: parentElement }
   = usePrimitiveElement()
 const locale = useLocale(propLocale)
 const dir = useDirection(propDir)
+const weekStartsOn = computed(() => props.weekStartsOn ?? getWeekStartsOn(locale.value))
 
 const modelValue = useVModel(props, 'modelValue', emits, {
   defaultValue: defaultValue.value,
@@ -216,6 +220,8 @@ const {
   prevPage,
   formatter,
   grid,
+  isPlaceholderFocusable,
+  firstFocusableDate,
 } = useCalendar({
   locale,
   placeholder,
@@ -237,6 +243,8 @@ const {
 const {
   isInvalid,
   isDateSelected,
+  hasSelectedDate,
+  isSelectedDateDisabled,
 } = useCalendarState({
   date: modelValue,
   isDateDisabled,
@@ -327,6 +335,10 @@ provideCalendarRootContext({
   disableDaysOutsideCurrentView,
   minValue,
   maxValue,
+  isPlaceholderFocusable,
+  firstFocusableDate,
+  hasSelectedDate,
+  isSelectedDateDisabled,
 })
 </script>
 

package/src/Calendar/useCalendar.ts

@@ -4,9 +4,9 @@
 
 import type { DateFields, DateValue } from '@internationalized/date'
 import type { Ref } from 'vue'
-import type { Grid, Matcher, WeekDayFormat } from '@/date'
+import type { Grid, Matcher, WeekDayFormat, WeekStartsOn } from '@/date'
 import type { DateFormatterOptions } from '@/shared/useDateFormatter'
-import { isEqualMonth, isSameDay } from '@internationalized/date'
+import { isEqualMonth, isSameDay, isSameMonth } from '@internationalized/date'
 import { computed, ref, watch } from 'vue'
 import { createMonths, getDaysInMonth, isAfter, isBefore, toDate } from '@/date'
 import { useDateFormatter } from '@/shared'
@@ -14,7 +14,7 @@ import { useDateFormatter } from '@/shared'
 export type UseCalendarProps = {
   locale: Ref<string>
   placeholder: Ref<DateValue>
-  weekStartsOn: Ref<0 | 1 | 2 | 3 | 4 | 5 | 6>
+  weekStartsOn: Ref<WeekStartsOn>
   fixedWeeks: Ref<boolean>
   numberOfMonths: Ref<number>
   minValue: Ref<DateValue | undefined>
@@ -71,9 +71,26 @@ export function useCalendarState(props: UseCalendarStateProps) {
     },
   )
 
+  const hasSelectedDate = computed(() => {
+    return Array.isArray(props.date.value) ? props.date.value.length > 0 : !!props.date.value
+  })
+
+  const isSelectedDateDisabled = computed(() => {
+    if (Array.isArray(props.date.value)) {
+      if (!props.date.value.length)
+        return false
+      return props.date.value.some(dateObj => props.isDateDisabled?.(dateObj))
+    }
+    if (!props.date.value)
+      return false
+    return !!props.isDateDisabled?.(props.date.value)
+  })
+
   return {
     isDateSelected,
     isInvalid,
+    hasSelectedDate,
+    isSelectedDateDisabled,
   }
 }
 
@@ -336,6 +353,27 @@ export function useCalendar(props: UseCalendarProps) {
 
   const fullCalendarLabel = computed(() => `${props.calendarLabel.value ?? 'Event Date'}, ${headingValue.value}`)
 
+  const isPlaceholderFocusable = computed(() => {
+    return !(isDateDisabled(props.placeholder.value) || isDateUnavailable(props.placeholder.value) || isOutsideVisibleView(props.placeholder.value))
+  })
+
+  const firstFocusableDate = computed(() => {
+    for (const month of grid.value) {
+      if (props.minValue.value && isBefore(month.value, props.minValue.value))
+        continue
+
+      const daysInMonth = getDaysInMonth(month.value)
+      const startDay = props.minValue.value && isSameMonth(props.minValue.value, month.value) ? props.minValue.value.day : 1
+
+      for (let day = startDay; day <= daysInMonth; day++) {
+        const date = month.value.set({ day })
+        if (isDateDisabled(date) || isDateUnavailable(date))
+          continue
+        return date
+      }
+    }
+  })
+
   return {
     isDateDisabled,
     isDateUnavailable,
@@ -350,5 +388,7 @@ export function useCalendar(props: UseCalendarProps) {
     prevPage,
     headingValue,
     fullCalendarLabel,
+    isPlaceholderFocusable,
+    firstFocusableDate,
   }
 }