reka-ui 2.5.1 → 2.6.0

package/src/RangeCalendar/RangeCalendarCellTrigger.vue

@@ -9,8 +9,7 @@ import {
   isToday,
 } from '@internationalized/date'
 import { computed, nextTick } from 'vue'
-import { getSelectableCells } from '@/Calendar/utils'
-import { getDaysInMonth, isBetweenInclusive, parseStringToDateValue, toDate } from '@/date'
+import { isBetweenInclusive, toDate } from '@/date'
 import { useKbd } from '@/shared'
 
 export interface RangeCalendarCellTriggerProps extends PrimitiveProps {
@@ -179,117 +178,52 @@ function handleArrowKey(e: KeyboardEvent) {
   const sign = rootContext.dir.value === 'rtl' ? -1 : 1
   switch (e.code) {
     case kbd.ARROW_RIGHT:
-      shiftFocus(currentElement.value, sign)
+      shiftFocus(props.day, sign)
       break
     case kbd.ARROW_LEFT:
-      shiftFocus(currentElement.value, -sign)
+      shiftFocus(props.day, -sign)
       break
     case kbd.ARROW_UP:
-      shiftFocus(currentElement.value, -indexIncrementation)
+      shiftFocus(props.day, -indexIncrementation)
       break
     case kbd.ARROW_DOWN:
-      shiftFocus(currentElement.value, indexIncrementation)
+      shiftFocus(props.day, indexIncrementation)
       break
     case kbd.ENTER:
     case kbd.SPACE_CODE:
       changeDate(e, props.day)
   }
 
-  function shiftFocus(node: HTMLElement, add: number) {
-    const allCollectionItems: HTMLElement[] = getSelectableCells(parentElement)
-    if (!allCollectionItems.length)
-      return
-
-    const index = allCollectionItems.indexOf(node)
-    const newIndex = index + add
-
-    if (newIndex >= 0 && newIndex < allCollectionItems.length) {
-      const newDate = allCollectionItems[newIndex].getAttribute('data-value')
-      const newDateValue = parseStringToDateValue(newDate!, rootContext.placeholder.value)
-      const minValue = rootContext.minValue.value
-      const maxValue = rootContext.maxValue.value
-      if ((minValue && newDateValue.compare(minValue) < 0) || (maxValue && newDateValue.compare(maxValue) > 0))
-        return
+  function shiftFocus(day: DateValue, add: number) {
+    const candidateDayValue = day.add({ days: add })
 
-      if (allCollectionItems[newIndex].hasAttribute('data-disabled')) {
-        shiftFocus(allCollectionItems[newIndex], add)
-      }
-      rootContext.onPlaceholderChange(newDateValue)
-      allCollectionItems[newIndex].focus()
+    if ((rootContext.minValue.value && candidateDayValue.compare(rootContext.minValue.value) < 0) || (rootContext.maxValue.value && candidateDayValue.compare(rootContext.maxValue.value) > 0))
       return
-    }
 
-    if (newIndex < 0) {
-      if (rootContext.isPrevButtonDisabled())
-        return
-      rootContext.prevPage()
-      nextTick(() => {
-        const newCollectionItems: HTMLElement[] = getSelectableCells(parentElement)
-        if (!newCollectionItems.length)
+    const candidateDay = parentElement.querySelector<HTMLElement>(`[data-value='${candidateDayValue.toString()}']:not([data-outside-view])`)
+    // If the date is not found it means we must change the page
+    if (!candidateDay) {
+      if (add > 0) {
+        if (rootContext.isNextButtonDisabled())
           return
-        if (!rootContext.pagedNavigation.value && rootContext.numberOfMonths.value > 1) {
-        // Placeholder is set to first month of the new page
-          const numberOfDays = getDaysInMonth(rootContext.placeholder.value)
-          const computedIndex = numberOfDays - Math.abs(newIndex)
-          if (newCollectionItems[computedIndex].hasAttribute('data-disabled')) {
-            shiftFocus(newCollectionItems[computedIndex], add)
-          }
-          const newDate = newCollectionItems[computedIndex].getAttribute('data-value')
-          rootContext.onPlaceholderChange(parseStringToDateValue(newDate!, rootContext.placeholder.value))
-          newCollectionItems[
-            computedIndex
-          ].focus()
+        rootContext.nextPage()
+      }
+      else {
+        if (rootContext.isPrevButtonDisabled())
           return
-        }
-        const computedIndex = newCollectionItems.length - Math.abs(newIndex)
-        if (newCollectionItems[computedIndex].hasAttribute('data-disabled')) {
-          shiftFocus(newCollectionItems[computedIndex], add)
-        }
-        const newDate = newCollectionItems[computedIndex].getAttribute('data-value')
-        rootContext.onPlaceholderChange(parseStringToDateValue(newDate!, rootContext.placeholder.value))
-        newCollectionItems[
-          computedIndex
-        ].focus()
+        rootContext.prevPage()
+      }
+      nextTick(() => {
+        shiftFocus(day, add)
       })
       return
     }
 
-    if (newIndex >= allCollectionItems.length) {
-      if (rootContext.isNextButtonDisabled())
-        return
-      rootContext.nextPage()
-      nextTick(() => {
-        const newCollectionItems: HTMLElement[] = getSelectableCells(parentElement)
-        if (!newCollectionItems.length)
-          return
-
-        if (!rootContext.pagedNavigation.value && rootContext.numberOfMonths.value > 1) {
-        // Placeholder is set to first month of the new page
-          const numberOfDays = getDaysInMonth(
-            rootContext.placeholder.value.add({ months: rootContext.numberOfMonths.value - 1 }),
-          )
-
-          const computedIndex = newIndex - allCollectionItems.length + (newCollectionItems.length - numberOfDays)
-
-          if (newCollectionItems[computedIndex].hasAttribute('data-disabled')) {
-            shiftFocus(newCollectionItems[computedIndex], add)
-          }
-          const newDate = newCollectionItems[computedIndex].getAttribute('data-value')
-          rootContext.onPlaceholderChange(parseStringToDateValue(newDate!, rootContext.placeholder.value))
-          newCollectionItems[computedIndex].focus()
-          return
-        }
-
-        const computedIndex = newIndex - allCollectionItems.length
-        if (newCollectionItems[computedIndex].hasAttribute('data-disabled')) {
-          shiftFocus(newCollectionItems[computedIndex], add)
-        }
-
-        const newDate = newCollectionItems[computedIndex].getAttribute('data-value')
-        rootContext.onPlaceholderChange(parseStringToDateValue(newDate!, rootContext.placeholder.value))
-        newCollectionItems[computedIndex].focus()
-      })
+    if (candidateDay && candidateDay.hasAttribute('data-disabled')) {
+      return shiftFocus(candidateDayValue, add)
     }
+    rootContext.onPlaceholderChange(candidateDayValue)
+    candidateDay?.focus()
   }
 }
 </script>

package/src/RangeCalendar/RangeCalendarRoot.vue

@@ -452,7 +452,6 @@ onMounted(() => {
     ref="primitiveElement"
     :as="as"
     :as-child="asChild"
-    role="application"
     :aria-label="fullCalendarLabel"
     :data-readonly="readonly ? '' : undefined"
     :data-disabled="disabled ? '' : undefined"

package/src/ScrollArea/ScrollAreaScrollbar.vue

@@ -13,7 +13,7 @@ export interface ScrollAreaScrollbarProps extends PrimitiveProps {
   forceMount?: boolean
 }
 
-export interface ScrollAreaScollbarContext {
+export interface ScrollAreaScrollbarContext {
   as: Ref<PrimitiveProps['as']>
   orientation: Ref<'vertical' | 'horizontal'>
   forceMount?: Ref<boolean>
@@ -22,7 +22,7 @@ export interface ScrollAreaScollbarContext {
 }
 
 export const [injectScrollAreaScrollbarContext, provideScrollAreaScrollbarContext]
-  = createContext<ScrollAreaScollbarContext>('ScrollAreaScrollbar')
+  = createContext<ScrollAreaScrollbarContext>('ScrollAreaScrollbar')
 </script>
 
 <script setup lang="ts">

package/src/Select/BubbleSelect.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue'
 import { VisuallyHidden } from '@/VisuallyHidden'
+import { injectSelectRootContext } from './SelectRoot.vue'
 
 interface BubbleSelectProps {
   autocomplete?: string
@@ -16,6 +17,7 @@ interface BubbleSelectProps {
 
 const props = defineProps<BubbleSelectProps>()
 const selectElement = ref<HTMLElement>()
+const rootContext = injectSelectRootContext()
 
 // This would bubble "change" event to form, with the target as Select element.
 watch(() => props.value, (cur, prev) => {
@@ -32,6 +34,14 @@ watch(() => props.value, (cur, prev) => {
   }
 })
 
+/**
+ * Form autofill will trigger an `input` event on the `select` element.
+ * We listen to that event and update our internal state to support it.
+ */
+function handleInput(event: Event) {
+  rootContext.onValueChange((event.target as HTMLSelectElement).value)
+}
+
 /**
  * We purposefully use a `select` here to support form autofill as much
  * as possible.
@@ -49,6 +59,7 @@ watch(() => props.value, (cur, prev) => {
     <select
       ref="selectElement"
       v-bind="props"
+      @input="handleInput"
     >
       <slot />
     </select>

package/src/TagsInput/TagsInputRoot.vue

@@ -5,7 +5,7 @@ import type { Direction, FormFieldProps } from '@/shared/types'
 import { computed, ref, toRefs } from 'vue'
 import { createContext, useArrowNavigation, useDirection, useFormControl, useForwardExpose } from '@/shared'
 
-export type AcceptableInputValue = string | Record<string, any>
+export type AcceptableInputValue = string | number | bigint | Record<string, any>
 
 export interface TagsInputRootProps<T = AcceptableInputValue> extends PrimitiveProps, FormFieldProps {
   /** The controlled value of the tags input. Can be bind as `v-model`. */

package/src/Toast/ToastProvider.vue

@@ -7,6 +7,7 @@ import { createContext } from '@/shared'
 type ToastProviderContext = {
   label: Ref<string>
   duration: Ref<number>
+  disableSwipe: Ref<boolean>
   swipeDirection: Ref<SwipeDirection>
   swipeThreshold: Ref<number>
   toastCount: Ref<number>
@@ -30,6 +31,11 @@ export interface ToastProviderProps {
    * @defaultValue 5000
    */
   duration?: number
+  /**
+   * Whether to disable the ability to swipe to close the toast.
+   * @defaultValue false
+   */
+  disableSwipe?: boolean
   /**
    * Direction of pointer swipe that should close the toast.
    * @defaultValue 'right'
@@ -59,7 +65,7 @@ const props = withDefaults(defineProps<ToastProviderProps>(), {
   swipeDirection: 'right',
   swipeThreshold: 50,
 })
-const { label, duration, swipeDirection, swipeThreshold } = toRefs(props)
+const { label, duration, disableSwipe, swipeDirection, swipeThreshold } = toRefs(props)
 useCollection({ isProvider: true })
 
 const viewport = ref<HTMLElement>()
@@ -75,6 +81,7 @@ if (props.label && typeof props.label === 'string' && !props.label.trim()) {
 provideToastProviderContext({
   label,
   duration,
+  disableSwipe,
   swipeDirection,
   swipeThreshold,
   toastCount,

package/src/Toast/ToastRootImpl.vue

@@ -203,12 +203,17 @@ provideToastRootContext({ onClose: handleClose })
         :as-child="asChild"
         :data-state="open ? 'open' : 'closed'"
         :data-swipe-direction="providerContext.swipeDirection.value"
-        :style="{ userSelect: 'none', touchAction: 'none' }"
+        :style="providerContext.disableSwipe.value
+          ? undefined
+          : { userSelect: 'none', touchAction: 'none' }"
         @pointerdown.left="(event: PointerEvent) => {
+          if (providerContext.disableSwipe.value) return;
+
           pointerStartRef = { x: event.clientX, y: event.clientY };
         }"
         @pointermove="(event: PointerEvent) => {
-          if (!pointerStartRef) return;
+          if (providerContext.disableSwipe.value || !pointerStartRef) return;
+
           const x = event.clientX - pointerStartRef.x;
           const y = event.clientY - pointerStartRef.y;
           const hasSwipeMoveStarted = Boolean(swipeDeltaRef);
@@ -237,6 +242,8 @@ provideToastRootContext({ onClose: handleClose })
           }
         }"
         @pointerup="(event: PointerEvent) => {
+          if (providerContext.disableSwipe.value) return;
+
           const delta = swipeDeltaRef;
           const target = event.target as HTMLElement;
           if (target.hasPointerCapture(event.pointerId)) {

package/src/index.ts

@@ -43,12 +43,14 @@ export {
   type Formatter,
   useBodyScrollLock,
   useDateFormatter,
+  useDirection,
   useEmitAsProps,
   useFilter,
   useForwardExpose,
   useForwardProps,
   useForwardPropsEmits,
   useId,
+  useLocale,
   useStateMachine,
   withDefault,
 } from './shared'

package/src/shared/useDirection.ts

@@ -3,6 +3,11 @@ import type { Direction } from './types'
 import { computed, ref } from 'vue'
 import { injectConfigProviderContext } from '@/ConfigProvider/ConfigProvider.vue'
 
+/**
+ * The `useDirection` function provides a way to access the current direction in your application.
+ * @param {Ref<Direction | undefined>} [dir] - An optional ref containing the direction (ltr or rtl).
+ * @returns  computed value that combines with the resolved direction.
+ */
 export function useDirection(dir?: Ref<Direction | undefined>) {
   const context = injectConfigProviderContext({
     dir: ref('ltr'),

package/src/shared/useGraceArea.ts

@@ -44,7 +44,7 @@ export function useGraceArea(triggerElement: Ref<HTMLElement | undefined>, conta
   watchEffect((cleanupFn) => {
     if (pointerGraceArea.value) {
       const handleTrackPointerGrace = (event: PointerEvent) => {
-        if (!pointerGraceArea.value || !(event.target instanceof HTMLElement))
+        if (!pointerGraceArea.value || !(event.target instanceof Element))
           return
 
         const target = event.target

package/src/shared/useLocale.ts

@@ -2,6 +2,11 @@ import type { Ref } from 'vue'
 import { computed, ref } from 'vue'
 import { injectConfigProviderContext } from '@/ConfigProvider/ConfigProvider.vue'
 
+/**
+ * The `useLocale` function provides a way to access the current locale in your application.
+ * @param {Ref<string | undefined>} [locale] - An optional ref containing the locale.
+ * @returns A computed ref holding the resolved locale.
+ */
 export function useLocale(locale?: Ref<string | undefined>) {
   const context = injectConfigProviderContext({
     locale: ref('en'),

package/dist/Calendar/utils.cjs

@@ -1,15 +0,0 @@
-
-//#region src/Calendar/utils.ts
-const SELECTOR = "[data-reka-calendar-cell-trigger]:not([data-outside-view]):not([data-outside-visible-view])";
-function getSelectableCells(calendar) {
-	return Array.from(calendar.querySelectorAll(SELECTOR)) ?? [];
-}
-
-//#endregion
-Object.defineProperty(exports, 'getSelectableCells', {
-  enumerable: true,
-  get: function () {
-    return getSelectableCells;
-  }
-});
-//# sourceMappingURL=utils.cjs.map

package/dist/Calendar/utils.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"utils.cjs","names":["calendar: HTMLElement"],"sources":["../../src/Calendar/utils.ts"],"sourcesContent":[],"mappings":";;AAAA,MAAa,WACT;AACJ,SAAgB,mBAAmBA,UAAsC;AACvE,QAAO,MAAM,KAAK,SAAS,iBAAiB,SAAS,CAAC,IAAI,CAAE;AAC7D"}

package/dist/Calendar/utils.js

@@ -1,9 +0,0 @@
-//#region src/Calendar/utils.ts
-const SELECTOR = "[data-reka-calendar-cell-trigger]:not([data-outside-view]):not([data-outside-visible-view])";
-function getSelectableCells(calendar) {
-	return Array.from(calendar.querySelectorAll(SELECTOR)) ?? [];
-}
-
-//#endregion
-export { getSelectableCells };
-//# sourceMappingURL=utils.js.map

package/dist/Calendar/utils.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"utils.js","names":["calendar: HTMLElement"],"sources":["../../src/Calendar/utils.ts"],"sourcesContent":[],"mappings":";AAAA,MAAa,WACT;AACJ,SAAgB,mBAAmBA,UAAsC;AACvE,QAAO,MAAM,KAAK,SAAS,iBAAiB,SAAS,CAAC,IAAI,CAAE;AAC7D"}

package/src/Calendar/utils.ts

@@ -1,5 +0,0 @@
-export const SELECTOR
-  = '[data-reka-calendar-cell-trigger]:not([data-outside-view]):not([data-outside-visible-view])'
-export function getSelectableCells(calendar: HTMLElement): HTMLElement[] {
-  return Array.from(calendar.querySelectorAll(SELECTOR)) ?? []
-}