reka-ui 2.8.0 → 2.9.0

package/src/shared/date/types.ts

@@ -5,6 +5,7 @@
 import type { DateValue } from '@internationalized/date'
 
 export type { DateValue }
+import type { TimeValue } from './comparators'
 import type { DATE_SEGMENT_PARTS, EDITABLE_SEGMENT_PARTS, NON_EDITABLE_SEGMENT_PARTS, TIME_SEGMENT_PARTS } from './parts'
 
 // Days of the week, starting with Sunday
@@ -28,6 +29,11 @@ export type DateRange = {
   end: DateValue | undefined
 }
 
+export type TimeRange = {
+  start: TimeValue | undefined
+  end: TimeValue | undefined
+}
+
 export type HourCycle = 12 | 24 | undefined
 
 export type DateSegmentPart = (typeof DATE_SEGMENT_PARTS)[number]

package/src/shared/date/useDateField.ts

@@ -371,11 +371,11 @@ export function useDateField(props: UseDateFieldProps) {
     }
 
     if (prev === null) {
-    /**
-     * If the user types a 0 as the first number, we want
-     * to keep track of that so that when they type the next
-     * number, we can move to the next segment.
-     */
+      /**
+       * If the user types a 0 as the first number, we want
+       * to keep track of that so that when they type the next
+       * number, we can move to the next segment.
+       */
 
       if (num === 0) {
         props.lastKeyZero.value = true
@@ -389,7 +389,7 @@ export function useDateField(props: UseDateFieldProps) {
        */
 
       if (props.lastKeyZero.value || num > maxStart) {
-      // move to next
+        // move to next
         moveToNext = true
       }
       props.lastKeyZero.value = false
@@ -417,13 +417,13 @@ export function useDateField(props: UseDateFieldProps) {
      */
 
     if (digits === 2 || total > max) {
-    /**
-     * As we're doing elsewhere, we're checking if the number is greater
-     * than the max start digit (0-3 in most months), and if so, we're
-     * going to move to the next segment.
-     */
+      /**
+       * As we're doing elsewhere, we're checking if the number is greater
+       * than the max start digit (0-3 in most months), and if so, we're
+       * going to move to the next segment.
+       */
       if (num > maxStart || total > max) {
-      // move to next
+        // move to next
         moveToNext = true
       }
       return { value: num, moveToNext }
@@ -449,11 +449,11 @@ export function useDateField(props: UseDateFieldProps) {
     }
 
     if (prev === null) {
-    /**
-     * If the user types a 0 as the first number, we want
-     * to keep track of that so that when they type the next
-     * number, we can move to the next segment.
-     */
+      /**
+       * If the user types a 0 as the first number, we want
+       * to keep track of that so that when they type the next
+       * number, we can move to the next segment.
+       */
 
       if (num === 0) {
         props.lastKeyZero.value = true
@@ -467,7 +467,7 @@ export function useDateField(props: UseDateFieldProps) {
        */
 
       if (props.lastKeyZero.value || num > maxStart) {
-      // move to next
+        // move to next
         moveToNext = true
       }
       props.lastKeyZero.value = false
@@ -496,13 +496,13 @@ export function useDateField(props: UseDateFieldProps) {
      */
 
     if (digits === 2 || total > max) {
-    /**
-     * As we're doing elsewhere, we're checking if the number is greater
-     * than the max start digit (0-3 in most months), and if so, we're
-     * going to move to the next segment.
-     */
+      /**
+       * As we're doing elsewhere, we're checking if the number is greater
+       * than the max start digit (0-3 in most months), and if so, we're
+       * going to move to the next segment.
+       */
       if (num > maxStart) {
-      // move to next
+        // move to next
         moveToNext = true
       }
       return { value: num, moveToNext }
@@ -528,11 +528,11 @@ export function useDateField(props: UseDateFieldProps) {
     }
 
     if (prev === null) {
-    /**
-     * If the user types a 0 as the first number, we want
-     * to keep track of that so that when they type the next
-     * number, we can move to the next segment.
-     */
+      /**
+       * If the user types a 0 as the first number, we want
+       * to keep track of that so that when they type the next
+       * number, we can move to the next segment.
+       */
 
       if (num === 0) {
         props.lastKeyZero.value = true
@@ -546,7 +546,7 @@ export function useDateField(props: UseDateFieldProps) {
        */
 
       if (props.lastKeyZero.value || num > maxStart) {
-      // move to next
+        // move to next
         moveToNext = true
       }
       props.lastKeyZero.value = false
@@ -575,13 +575,13 @@ export function useDateField(props: UseDateFieldProps) {
      */
 
     if (digits === 2 || total > max) {
-    /**
-     * As we're doing elsewhere, we're checking if the number is greater
-     * than the max start digit (0-3 in most months), and if so, we're
-     * going to move to the next segment.
-     */
+      /**
+       * As we're doing elsewhere, we're checking if the number is greater
+       * than the max start digit (0-3 in most months), and if so, we're
+       * going to move to the next segment.
+       */
       if (num > maxStart) {
-      // move to next
+        // move to next
         moveToNext = true
       }
       return { value: num, moveToNext }
@@ -745,7 +745,9 @@ export function useDateField(props: UseDateFieldProps) {
 
     if (isNumberString(e.key)) {
       const num = Number.parseInt(e.key)
-      const is12Hour = uses12HourFormat(props.formatter.getLocale())
+      const is12Hour = props.hourCycle !== undefined
+        ? props.hourCycle === 12
+        : uses12HourFormat(props.formatter.getLocale())
       const max = is12Hour ? 12 : 24
 
       let displayPrev = prevValue
@@ -872,8 +874,6 @@ export function useDateField(props: UseDateFieldProps) {
   function handleSegmentKeydown(e: KeyboardEvent) {
     const disabled = props.disabled.value
     const readonly = props.readonly.value
-    if (e.key !== kbd.TAB)
-      e.preventDefault()
 
     if (disabled || readonly)
       return
@@ -885,7 +885,7 @@ export function useDateField(props: UseDateFieldProps) {
       minute: handleMinuteSegmentKeydown,
       second: handleSecondSegmentKeydown,
       dayPeriod: handleDayPeriodSegmentKeydown,
-      timeZoneName: () => {},
+      timeZoneName: () => { },
     } as const
 
     segmentKeydownHandlers[props.part as keyof typeof segmentKeydownHandlers](e)

package/src/shared/macro.ts

@@ -0,0 +1,11 @@
+export function isCut(event: KeyboardEvent) {
+  return (event.key === 'x' || event.key === 'X') && (event.ctrlKey || event.metaKey)
+}
+
+export function isCopy(event: KeyboardEvent) {
+  return (event.key === 'c' || event.key === 'C') && (event.ctrlKey || event.metaKey)
+}
+
+export function isPaste(event: KeyboardEvent) {
+  return (event.key === 'v' || event.key === 'V') && (event.ctrlKey || event.metaKey)
+}

package/src/shared/useArrowNavigation.ts

@@ -169,13 +169,19 @@ function findNextFocusableElement(
   elements: HTMLElement[],
   currentElement: HTMLElement,
   options: FindNextFocusableElementOptions,
-  iterations = elements.length,
+  iterations = !elements.includes(currentElement) ? elements.length + 1 : elements.length,
 ): HTMLElement | null {
   if (--iterations === 0)
     return null
 
   const index = elements.indexOf(currentElement)
-  const newIndex = options.goForward ? index + 1 : index - 1
+  let newIndex: number
+  if (index === -1) {
+    newIndex = options.goForward ? 0 : elements.length - 1
+  }
+  else {
+    newIndex = options.goForward ? index + 1 : index - 1
+  }
 
   if (!options.loop && (newIndex < 0 || newIndex >= elements.length))
     return null

package/src/shared/useForwardExpose.ts

@@ -1,18 +1,33 @@
+import type { MaybeElement } from '@vueuse/core'
 import type { ComponentPublicInstance } from 'vue'
 // reference: https://github.com/vuejs/rfcs/issues/258#issuecomment-1068697672
 import { unrefElement } from '@vueuse/core'
-import { computed, getCurrentInstance, ref } from 'vue'
+import { computed, getCurrentInstance, onUpdated, ref, triggerRef } from 'vue'
 
 export function useForwardExpose<T extends ComponentPublicInstance>() {
   const instance = getCurrentInstance()!
 
   const currentRef = ref<Element | T | null>()
-  const currentElement = computed<HTMLElement>(() => {
-    // $el could be text/comment for non-single root normal or text root, thus we retrieve the nextElementSibling
-    // @ts-expect-error ignore ts error
-    return ['#text', '#comment'].includes(currentRef.value?.$el.nodeName) ? currentRef.value?.$el.nextElementSibling : unrefElement(currentRef)
+  const currentElement = computed(() => resolveCurrentElement())
+
+  // When using as-child with conditional rendering (v-if/v-else), the underlying
+  // DOM element ($el) changes but currentRef (component instance) stays the same.
+  // Since $el is not reactive, we sync currentElement after DOM updates.
+  onUpdated(() => {
+    if (currentElement.value !== resolveCurrentElement()) {
+      triggerRef(currentRef)
+    }
   })
 
+  function resolveCurrentElement() {
+    // $el could be text/comment for non-single root normal or text root, thus we retrieve the nextElementSibling
+    return currentRef.value
+      && '$el' in currentRef.value
+      && ['#text', '#comment'].includes(currentRef.value.$el.nodeName)
+      ? currentRef.value.$el.nextElementSibling as HTMLElement
+      : unrefElement(currentRef as unknown as MaybeElement) as HTMLElement
+  }
+
   // Do give us credit if you reference our code :D
   // localExpose should only be assigned once else will create infinite loop
   const localExpose: Record<string, any> | null = Object.assign({}, instance.exposed)
@@ -61,7 +76,7 @@ export function useForwardExpose<T extends ComponentPublicInstance>() {
 
     // ref not is Element
     // and `useForwardExpose.test.ts > useForwardRef > should forward plain DOM element ref - 2` Passing in `$el`
-    if (!(ref instanceof Element) && !Object.hasOwn(ref, '$el')) {
+    if (!(ref instanceof Element) && !Object.prototype.hasOwnProperty.call(ref, '$el')) {
       // Retrieves the `exposed` data that has not been unwrapped by `vue` from `$.exposed`.
       const childExposed = ref.$.exposed
       const merged = Object.assign({}, ret)

package/src/shared/useId.ts

@@ -16,15 +16,14 @@ export function useId(deterministicId?: string | null | undefined, prefix = 'rek
   if (deterministicId)
     return deterministicId
 
+  let id: string
   if ('useId' in vue) {
-    return `${prefix}-${vue.useId?.()}`
+    id = vue.useId?.()
   }
-
-  const configProviderContext = injectConfigProviderContext({ useId: undefined })
-
-  if (configProviderContext.useId) {
-    return `${prefix}-${configProviderContext.useId()}`
+  else {
+    const configProviderContext = injectConfigProviderContext({ useId: undefined })
+    id = configProviderContext.useId?.() ?? `${++count}`
   }
 
-  return `${prefix}-${++count}`
+  return prefix ? `${prefix}-${id}` : id
 }