reka-ui 2.9.2 → 2.9.4

package/src/YearPicker/useYearPicker.ts

@@ -106,7 +106,7 @@ export function useYearPicker(props: UseYearPickerProps) {
     if (props.disabled.value)
       return true
 
-    const lastYearInView = grid.value.cells[grid.value.cells.length - 1]
+    const lastYearInView = grid.value.cells.at(-1)!
     if (nextPageFunc || props.nextPage.value) {
       const nextDate = (nextPageFunc || props.nextPage.value)!(lastYearInView)
       return isAfter(startOfYear(nextDate), props.maxValue.value)
@@ -164,7 +164,7 @@ export function useYearPicker(props: UseYearPickerProps) {
 
   watch(props.placeholder, (value) => {
     const firstYearInGrid = grid.value.value
-    const lastYearInGrid = grid.value.cells[grid.value.cells.length - 1]
+    const lastYearInGrid = grid.value.cells.at(-1)!
     if (value.year >= firstYearInGrid.year && value.year <= lastYearInGrid.year)
       return
     grid.value = createYearGrid({ dateObj: value, yearsPerPage: props.yearsPerPage.value })
@@ -180,7 +180,7 @@ export function useYearPicker(props: UseYearPickerProps) {
       formatter.setLocale(props.locale.value)
 
     const firstYear = grid.value.cells[0]
-    const lastYear = grid.value.cells[grid.value.cells.length - 1]
+    const lastYear = grid.value.cells.at(-1)!
 
     return `${formatter.fullYear(toDate(firstYear), headingFormatOptions.value)} - ${formatter.fullYear(toDate(lastYear), headingFormatOptions.value)}`
   })

package/src/date/calendar.ts

@@ -78,7 +78,7 @@ export function createMonth(props: CreateMonthProps): Grid<DateValue> {
   if (fixedWeeks && totalDays < 42) {
     const extraDays = 42 - totalDays
 
-    let startFrom = nextMonthDays[nextMonthDays.length - 1]
+    let startFrom = nextMonthDays.at(-1)
 
     if (!startFrom)
       startFrom = endOfMonth(dateObj)

package/src/shared/color/parse.ts

@@ -1,5 +1,12 @@
 import type { Color, HSBColor, HSLColor, RGBColor } from './types'
 
+const HEX3_RE = /^[0-9A-F]{3}$/i
+const HEX6_RE = /^[0-9A-F]{6}$/i
+const HEX8_RE = /^[0-9A-F]{8}$/i
+const RGB_RE = /rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*(?:,\s*([\d.]+)\s*)?\)/
+const HSL_RE = /hsla?\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%\s*(?:,\s*([\d.]+)\s*)?\)/
+const HSB_RE = /hsb[av]?\(\s*([\d.]+)\s*,\s*([\d.]+)%?\s*,\s*([\d.]+)%?\s*(?:,\s*([\d.]+)\s*)?\)/
+
 /**
  * Parses a color string into a Color object.
  * Supports hex (#rrggbb, #rgb), rgb(), hsl(), and hsb()/hsv() formats.
@@ -34,7 +41,7 @@ function parseHex(hex: string): RGBColor {
   let normalized = hex.slice(1)
 
   // Validate hex format (3, 6, or 8 hex digits)
-  if (!/^[0-9A-F]{3}$/i.test(normalized) && !/^[0-9A-F]{6}$/i.test(normalized) && !/^[0-9A-F]{8}$/i.test(normalized)) {
+  if (!HEX3_RE.test(normalized) && !HEX6_RE.test(normalized) && !HEX8_RE.test(normalized)) {
     throw new Error(`Invalid hex color: ${hex}. Expected format: #RGB, #RRGGBB, or #RRGGBBAA`)
   }
 
@@ -71,7 +78,7 @@ function parseHex(hex: string): RGBColor {
 }
 
 function parseRgb(rgb: string): RGBColor {
-  const match = rgb.match(/rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*(?:,\s*([\d.]+)\s*)?\)/)
+  const match = rgb.match(RGB_RE)
   if (!match) {
     throw new Error(`Invalid RGB color: ${rgb}`)
   }
@@ -86,7 +93,7 @@ function parseRgb(rgb: string): RGBColor {
 }
 
 function parseHsl(hsl: string): HSLColor {
-  const match = hsl.match(/hsla?\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%\s*(?:,\s*([\d.]+)\s*)?\)/)
+  const match = hsl.match(HSL_RE)
   if (!match) {
     throw new Error(`Invalid HSL color: ${hsl}`)
   }
@@ -101,7 +108,7 @@ function parseHsl(hsl: string): HSLColor {
 }
 
 function parseHsb(hsb: string): HSBColor {
-  const match = hsb.match(/hsb[av]?\(\s*([\d.]+)\s*,\s*([\d.]+)%?\s*,\s*([\d.]+)%?\s*(?:,\s*([\d.]+)\s*)?\)/)
+  const match = hsb.match(HSB_RE)
   if (!match) {
     throw new Error(`Invalid HSB color: ${hsb}`)
   }

package/src/shared/color/utils.ts

@@ -3,11 +3,15 @@
  * @param hex Hex color string (e.g., "#ff5733" or "#f53")
  * @returns An object containing red, green, and blue values (0-255).
  */
+const HASH_PREFIX_RE = /^#/
+const HEX6_RE = /^[0-9A-F]{6}$/i
+const HEX3_RE = /^[0-9A-F]{3}$/i
+
 export function hexToRGB(hex: string): { r: number, g: number, b: number } {
-  hex = hex.replace(/^#/, '')
+  hex = hex.replace(HASH_PREFIX_RE, '')
 
   // Validate hex format (3 or 6 hex digits)
-  if (!/^[0-9A-F]{6}$/i.test(hex) && !/^[0-9A-F]{3}$/i.test(hex)) {
+  if (!HEX6_RE.test(hex) && !HEX3_RE.test(hex)) {
     throw new Error(`Invalid hex color: ${hex}. Expected format: #RGB or #RRGGBB`)
   }
 

package/src/shared/date/types.ts

@@ -54,3 +54,5 @@ export type TimeSegmentObj = {
 export type DateAndTimeSegmentObj = DateSegmentObj & TimeSegmentObj
 export type SegmentValueObj = DateSegmentObj | DateAndTimeSegmentObj
 export type SegmentContentObj = Record<EditableSegmentPart, string>
+
+export type DateInputType = 'date' | 'datetime-local'

package/src/shared/date/useDateField.ts

@@ -367,6 +367,7 @@ export function useDateField(props: UseDateFieldProps) {
      */
     if (props.hasLeftFocus.value) {
       props.hasLeftFocus.value = false
+      props.lastKeyZero.value = false
       prev = null
     }
 
@@ -445,6 +446,7 @@ export function useDateField(props: UseDateFieldProps) {
      */
     if (props.hasLeftFocus.value) {
       props.hasLeftFocus.value = false
+      props.lastKeyZero.value = false
       prev = null
     }
 
@@ -524,6 +526,7 @@ export function useDateField(props: UseDateFieldProps) {
     // probably not implement, kind of weird
     if (props.hasLeftFocus.value) {
       props.hasLeftFocus.value = false
+      props.lastKeyZero.value = false
       prev = null
     }
 

package/src/shared/date/utils.ts

@@ -1,5 +1,5 @@
 import type { Granularity } from './comparators'
-import type { DateStep, HourCycle } from './types'
+import type { DateInputType, DateStep, DateValue, HourCycle } from './types'
 import { defu } from 'defu'
 
 export function getOptsByGranularity(granularity: Granularity, hourCycle: HourCycle, isTimeValue: boolean = false) {
@@ -82,3 +82,31 @@ export function normalizeHour12(hourCycle: HourCycle) {
     return true
   return undefined
 }
+
+export function getInputType(granularity: Granularity): DateInputType {
+  return granularity === 'day' ? 'date' : 'datetime-local'
+}
+
+export function normalizeInputValue(date: DateValue | undefined, granularity: Granularity): string {
+  if (!date)
+    return ''
+
+  const type = getInputType(granularity)
+
+  const year = String(date.year).padStart(4, '0')
+  const month = String(date.month).padStart(2, '0')
+  const day = String(date.day).padStart(2, '0')
+
+  if (type === 'date')
+    return `${year}-${month}-${day}`
+
+  const hour = String('hour' in date ? date.hour : 0).padStart(2, '0')
+  const minute = String('minute' in date ? date.minute : 0).padStart(2, '0')
+
+  if (granularity === 'second') {
+    const second = String('second' in date ? date.second : 0).padStart(2, '0')
+    return `${year}-${month}-${day}T${hour}:${minute}:${second}`
+  }
+
+  return `${year}-${month}-${day}T${hour}:${minute}`
+}

package/src/shared/object.ts

@@ -3,7 +3,7 @@ export function pick<T, K extends keyof T>(object: T, keys: K[]): Pick<T, K> {
     {},
     // eslint-disable-next-line array-callback-return
     ...keys.map((key) => {
-      if (object && Object.prototype.hasOwnProperty.call(object, key))
+      if (object && Object.hasOwn(object, key))
         return { [key]: object[key] }
     }),
   )

package/src/shared/trap-focus.ts

@@ -12,9 +12,7 @@ export function trapFocus(element: HTMLElement) {
       el => !el.hasAttribute('disabled') && !el.getAttribute('aria-hidden'),
     )
     const firstFocusableEl = focusableEls[0] as HTMLElement
-    const lastFocusableEl = focusableEls[
-      focusableEls.length - 1
-    ] as HTMLElement
+    const lastFocusableEl = focusableEls.at(-1) as HTMLElement
     const KEYCODE_TAB = 9
 
     if (firstFocusableEl)

package/src/shared/useForwardExpose.ts

@@ -76,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.prototype.hasOwnProperty.call(ref, '$el')) {
+    if (!(ref instanceof Element) && !Object.hasOwn(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/useForwardProps.ts

@@ -7,6 +7,17 @@ interface PropOptions {
   default?: any
 }
 
+/**
+ * Vue coerces optional boolean props (e.g. `foo?: boolean`) to non-optional (`foo: boolean`)
+ * in the `defineProps` return type. Since `useForwardProps` only returns props that were
+ * explicitly assigned, boolean-typed props should remain optional in the return type.
+ */
+type WithOptionalBooleans<T> = {
+  [K in keyof T as [T[K]] extends [boolean] ? K : never]?: T[K]
+} & {
+  [K in keyof T as [T[K]] extends [boolean] ? never : K]: T[K]
+}
+
 /**
  * The `useForwardProps` function in TypeScript takes in a set of props and returns a computed value
  * that combines default props with assigned props from the current instance.
@@ -36,8 +47,8 @@ export function useForwardProps<T extends Record<string, any>>(props: MaybeRefOr
     // Only return value from the props parameter
     return Object.keys({ ...defaultProps, ...preservedProps }).reduce((prev, curr) => {
       if (refProps.value[curr] !== undefined)
-        prev[curr as keyof T] = refProps.value[curr]
+        (prev as Record<string, any>)[curr] = refProps.value[curr]
       return prev
-    }, {} as T)
+    }, {} as WithOptionalBooleans<T>)
   })
 }

package/src/shared/useGraceArea.ts

@@ -21,7 +21,9 @@ export function useGraceArea(triggerElement: Ref<HTMLElement | undefined>, conta
     isPointerInTransit.value = false
   }
 
-  function handleCreateGraceArea(event: PointerEvent, hoverTarget: HTMLElement) {
+  function handleCreateGraceArea(event: PointerEvent, hoverTarget: HTMLElement | undefined) {
+    if (!hoverTarget)
+      return
     const currentTarget = event.currentTarget as HTMLElement
     const exitPoint = { x: event.clientX, y: event.clientY }
     const exitSide = getExitSideFromRect(exitPoint, currentTarget.getBoundingClientRect())
@@ -34,8 +36,8 @@ export function useGraceArea(triggerElement: Ref<HTMLElement | undefined>, conta
 
   watchEffect((cleanupFn) => {
     if (triggerElement.value && containerElement.value) {
-      const handleTriggerLeave = (event: PointerEvent) => handleCreateGraceArea(event, containerElement.value!)
-      const handleContentLeave = (event: PointerEvent) => handleCreateGraceArea(event, triggerElement.value!)
+      const handleTriggerLeave = (event: PointerEvent) => handleCreateGraceArea(event, containerElement.value)
+      const handleContentLeave = (event: PointerEvent) => handleCreateGraceArea(event, triggerElement.value)
 
       triggerElement.value.addEventListener('pointerleave', handleTriggerLeave)
       containerElement.value.addEventListener('pointerleave', handleContentLeave)
@@ -190,7 +192,7 @@ function getHullPresorted<P extends Point>(points: Readonly<Array<P>>): Array<P>
   for (let i = 0; i < points.length; i++) {
     const p = points[i]
     while (upperHull.length >= 2) {
-      const q = upperHull[upperHull.length - 1]
+      const q = upperHull.at(-1)!
       const r = upperHull[upperHull.length - 2]
       if ((q.x - r.x) * (p.y - r.y) >= (q.y - r.y) * (p.x - r.x))
         upperHull.pop()
@@ -204,7 +206,7 @@ function getHullPresorted<P extends Point>(points: Readonly<Array<P>>): Array<P>
   for (let i = points.length - 1; i >= 0; i--) {
     const p = points[i]
     while (lowerHull.length >= 2) {
-      const q = lowerHull[lowerHull.length - 1]
+      const q = lowerHull.at(-1)!
       const r = lowerHull[lowerHull.length - 2]
       if ((q.x - r.x) * (p.y - r.y) >= (q.y - r.y) * (p.x - r.x))
         lowerHull.pop()

package/src/shared/useSelectionBehavior.ts

@@ -59,7 +59,7 @@ export function useSelectionBehavior<T>(
         break
       }
       case 'last': {
-        value = findValuesBetween(options, firstValue.value, options?.[options.length - 1])
+        value = findValuesBetween(options, firstValue.value, options.at(-1))
         break
       }
     }