reka-ui 2.9.3 → 2.9.4

package/src/NavigationMenu/NavigationMenuTrigger.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import type { VNode } from 'vue'
+import type { ComponentPublicInstance } from 'vue'
 import type { PrimitiveProps } from '@/Primitive'
 import { useCollection } from '@/Collection'
 import { useForwardExpose } from '@/shared'
@@ -119,7 +119,9 @@ function handleKeydown(ev: KeyboardEvent) {
   }
 }
 
-function setFocusProxyRef(node: VNode) {
+function setFocusProxyRef(node: Element | ComponentPublicInstance | null) {
+  if (!node)
+    return undefined
   // @ts-expect-error unrefElement expect MaybeRef, but also support Vnode
   itemContext.focusProxyRef.value = unrefElement(node)
   return undefined

package/src/Popper/PopperArrow.vue

@@ -14,6 +14,7 @@ export interface PopperArrowProps extends ArrowProps, PrimitiveProps {}
 </script>
 
 <script setup lang="ts">
+import type { ComponentPublicInstance } from 'vue'
 import { computed } from 'vue'
 import { useForwardExpose } from '@/shared'
 import Arrow from '@/shared/component/Arrow.vue'
@@ -36,8 +37,8 @@ const baseSide = computed(() => OPPOSITE_SIDE[contentContext.placedSide.value])
 
 <template>
   <span
-    :ref="(el: HTMLElement) => {
-      contentContext.onArrowChange(el)
+    :ref="(el: Element | ComponentPublicInstance | null) => {
+      contentContext.onArrowChange((el as HTMLElement) ?? undefined)
       return undefined
     }"
     :style="{

package/src/RovingFocus/RovingFocusItem.vue

@@ -97,7 +97,7 @@ function handleKeydown(event: KeyboardEvent) {
       :as="as"
       :as-child="asChild"
       @mousedown="
-        (event) => {
+        (event: MouseEvent) => {
           // We prevent focusing non-focusable items on `mousedown`.
           // Even though the item has tabIndex={-1}, that only means take it out of the tab order.
           if (!focusable) event.preventDefault();

package/src/ScrollArea/ScrollAreaScrollbarGlimpse.vue

@@ -65,10 +65,7 @@ const debounceScrollEnd = useDebounceFn(() => dispatch('SCROLL_END'), 100)
 
 watchEffect((onCleanup) => {
   if (state.value === 'glimpse') {
-    const timeId = window.setTimeout(
-      () => dispatch('HIDE'),
-      rootContext.scrollHideDelay.value,
-    )
+    const timeId = window.setTimeout(dispatch, rootContext.scrollHideDelay.value, 'HIDE')
 
     onCleanup(() => {
       window.clearTimeout(timeId)
@@ -78,10 +75,7 @@ watchEffect((onCleanup) => {
 
 watchEffect((onCleanup) => {
   if (state.value === 'idle') {
-    const timeId = window.setTimeout(
-      () => dispatch('HIDE'),
-      rootContext.scrollHideDelay.value,
-    )
+    const timeId = window.setTimeout(dispatch, rootContext.scrollHideDelay.value, 'HIDE')
 
     onCleanup(() => {
       window.clearTimeout(timeId)

package/src/ScrollArea/ScrollAreaScrollbarScroll.vue

@@ -44,10 +44,7 @@ const visible = computed(() => state.value !== 'hidden')
 
 watchEffect((onCleanup) => {
   if (state.value === 'idle') {
-    const timeId = window.setTimeout(
-      () => dispatch('HIDE'),
-      rootContext.scrollHideDelay.value,
-    )
+    const timeId = window.setTimeout(dispatch, rootContext.scrollHideDelay.value, 'HIDE')
 
     onCleanup(() => {
       window.clearTimeout(timeId)

package/src/Select/SelectContentImpl.vue

@@ -301,8 +301,9 @@ provideSelectContentContext({
           v-bind="{ ...$attrs, ...forwardedProps }"
           :id="rootContext.contentId"
           :ref="
-            (vnode: ComponentPublicInstance) => {
-              const el = unrefElement(vnode) as HTMLElement | undefined
+            (vnode: Element | ComponentPublicInstance | null) => {
+              if (!vnode) return undefined
+              const el = unrefElement(vnode as ComponentPublicInstance) as HTMLElement | undefined
               // special case for PopperContent
               if (el?.hasAttribute('data-reka-popper-content-wrapper'))
                 content = el.firstElementChild as HTMLElement

package/src/Select/SelectItem.vue

@@ -169,7 +169,7 @@ provideSelectItemContext({
       @focus="isFocused = true"
       @blur="isFocused = false"
       @pointerup="handleSelectCustomEvent"
-      @pointerdown="(event) => {
+      @pointerdown="(event: PointerEvent) => {
         (event.currentTarget as HTMLElement).focus({ preventScroll: true })
       }"
       @touchend.prevent.stop

package/src/Select/SelectItemAlignedPosition.vue

@@ -145,7 +145,7 @@ function position() {
       = contentTopToItemMiddle <= topEdgeToTriggerMiddle
 
     if (willAlignWithoutTopOverflow) {
-      const isLastItem = selectedItem.value === items[items.length - 1]
+      const isLastItem = selectedItem.value === items.at(-1)
       contentWrapperElement.value.style.bottom = `${0}px`
       const viewportOffsetBottom
         = contentElement.value.clientHeight

package/src/Select/SelectRoot.vue

@@ -201,7 +201,7 @@ provideSelectRootContext({
     />
 
     <BubbleSelect
-      v-if="isFormControl"
+      v-if="isFormControl && name"
       :key="nativeSelectKey"
       aria-hidden="true"
       tabindex="-1"

package/src/Select/SelectTrigger.vue

@@ -111,7 +111,7 @@ function handlePointerOpen(event: PointerEvent) {
         }
       "
       @keydown="
-        (event) => {
+        (event: KeyboardEvent) => {
           const isTypingAhead = search !== '';
           const isModifierKey = event.ctrlKey || event.altKey || event.metaKey;
           if (!isModifierKey && event.key.length === 1)

package/src/Slider/SliderImpl.vue

@@ -29,7 +29,7 @@ const rootContext = injectSliderRootContext()
   <Primitive
     data-slider-impl
     v-bind="props"
-    @keydown="(event) => {
+    @keydown="(event: KeyboardEvent) => {
       if (event.key === 'Home') {
         emits('homeKeyDown', event)
         // Prevent scrolling to page start
@@ -46,7 +46,7 @@ const rootContext = injectSliderRootContext()
         event.preventDefault();
       }
     }"
-    @pointerdown="(event) => {
+    @pointerdown="(event: PointerEvent) => {
       const target = event.target as HTMLElement;
       target.setPointerCapture(event.pointerId);
       // Prevent browser focus behaviour because we focus a thumb manually when values change.
@@ -60,11 +60,11 @@ const rootContext = injectSliderRootContext()
         emits('slideStart', event)
       }
     }"
-    @pointermove="(event) => {
+    @pointermove="(event: PointerEvent) => {
       const target = event.target as HTMLElement;
       if (target.hasPointerCapture(event.pointerId)) emits('slideMove', event);
     }"
-    @pointerup="(event) => {
+    @pointerup="(event: PointerEvent) => {
       const target = event.target as HTMLElement;
       if (target.hasPointerCapture(event.pointerId)) {
         target.releasePointerCapture(event.pointerId);

package/src/Tabs/TabsTrigger.vue

@@ -51,7 +51,7 @@ const isSelected = computed(() => props.value === rootContext.modelValue.value)
       :disabled="disabled"
       :data-disabled="disabled ? '' : undefined"
       :data-orientation="rootContext.orientation.value"
-      @mousedown.left="(event) => {
+      @mousedown.left="(event: MouseEvent) => {
         // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)
         // but not when the control key is pressed (avoiding MacOS right click)
         if (!disabled && event.ctrlKey === false) {

package/src/Toast/ToastRootImpl.vue

@@ -82,7 +82,7 @@ const closeTimerRef = ref(0)
 const remainingTime = ref(duration.value)
 
 const remainingRaf = useRafFn(() => {
-  const elapsedTime = new Date().getTime() - closeTimerStartTimeRef.value
+  const elapsedTime = Date.now() - closeTimerStartTimeRef.value
   remainingTime.value = Math.max(closeTimerRemainingTimeRef.value - elapsedTime, 0)
 }, { fpsLimit: 60 })
 
@@ -95,7 +95,7 @@ function startTimer(duration: number) {
   if (!isClient)
     return
   window.clearTimeout(closeTimerRef.value)
-  closeTimerStartTimeRef.value = new Date().getTime()
+  closeTimerStartTimeRef.value = Date.now()
   closeTimerRef.value = window.setTimeout(handleClose, duration)
 }
 
@@ -133,7 +133,7 @@ watchEffect((cleanupFn) => {
       emits('resume')
     }
     const handlePause = () => {
-      const elapsedTime = new Date().getTime() - closeTimerStartTimeRef.value
+      const elapsedTime = Date.now() - closeTimerStartTimeRef.value
       closeTimerRemainingTimeRef.value = closeTimerRemainingTimeRef.value - elapsedTime
       window.clearTimeout(closeTimerRef.value)
       remainingRaf.pause()

package/src/Toast/ToastViewport.vue

@@ -48,7 +48,9 @@ const hasToasts = computed(() => providerContext.toastCount.value > 0)
 const headFocusProxyRef = ref<HTMLElement>()
 const tailFocusProxyRef = ref<HTMLElement>()
 
-const hotkeyMessage = computed(() => hotkey.value.join('+').replace(/Key/g, '').replace(/Digit/g, ''))
+const KEY_RE = /Key/g
+const DIGIT_RE = /Digit/g
+const hotkeyMessage = computed(() => hotkey.value.join('+').replace(KEY_RE, '').replace(DIGIT_RE, ''))
 
 onKeyStroke(hotkey.value, () => {
   currentElement.value.focus()
@@ -172,8 +174,9 @@ function getSortedTabbableCandidates({ tabbingDirection }: { tabbingDirection: '
   >
     <FocusProxy
       v-if="hasToasts"
-      :ref="(node: ComponentPublicInstance) => {
-        headFocusProxyRef = unrefElement(node) as HTMLElement
+      :ref="(node: Element | ComponentPublicInstance | null) => {
+        if (!node) return undefined
+        headFocusProxyRef = unrefElement(node as ComponentPublicInstance) as HTMLElement
         return undefined
       }"
       @focus-from-outside-viewport="() => {
@@ -196,8 +199,9 @@ function getSortedTabbableCandidates({ tabbingDirection }: { tabbingDirection: '
     </CollectionSlot>
     <FocusProxy
       v-if="hasToasts"
-      :ref="(node: ComponentPublicInstance) => {
-        tailFocusProxyRef = unrefElement(node) as HTMLElement
+      :ref="(node: Element | ComponentPublicInstance | null) => {
+        if (!node) return undefined
+        tailFocusProxyRef = unrefElement(node as ComponentPublicInstance) as HTMLElement
         return undefined
       }"
       @focus-from-outside-viewport="() => {

package/src/Tree/TreeItem.vue

@@ -178,9 +178,9 @@ defineExpose({
       :data-selected="isSelected ? '' : undefined"
       :data-expanded="isExpanded ? '' : undefined"
       @keydown.enter.space.self.prevent="handleSelectCustomEvent"
-      @keydown.right.prevent="(ev) => rootContext.dir.value === 'ltr' ? handleKeydownRight(ev) : handleKeydownLeft(ev)"
-      @keydown.left.prevent="(ev) => rootContext.dir.value === 'ltr' ? handleKeydownLeft(ev) : handleKeydownRight(ev)"
-      @click.stop="(ev) => {
+      @keydown.right.prevent="(ev: KeyboardEvent) => rootContext.dir.value === 'ltr' ? handleKeydownRight(ev) : handleKeydownLeft(ev)"
+      @keydown.left.prevent="(ev: KeyboardEvent) => rootContext.dir.value === 'ltr' ? handleKeydownLeft(ev) : handleKeydownRight(ev)"
+      @click.stop="(ev: PointerEvent) => {
         handleSelectCustomEvent(ev)
         handleToggleCustomEvent(ev)
       }"

package/src/Tree/TreeVirtualizer.vue

@@ -134,7 +134,7 @@ rootContext.virtualKeydownHook.on((event) => {
     virtualizer.value.scrollToIndex(index)
     requestAnimationFrame(() => {
       const items = getItems()
-      const item = intent === 'first' ? items[0] : items[items.length - 1]
+      const item = intent === 'first' ? items[0] : items.at(-1)!
       item.ref.focus()
     })
   }

package/src/YearPicker/YearPickerRoot.vue

@@ -202,7 +202,7 @@ const { isInvalid, isYearSelected } = useYearPickerState({
 
 watch(modelValue, (_modelValue) => {
   if (Array.isArray(_modelValue) && _modelValue.length) {
-    const lastValue = _modelValue[_modelValue.length - 1]
+    const lastValue = _modelValue.at(-1)
     if (lastValue && !isSameYear(placeholder.value, lastValue))
       onPlaceholderChange(lastValue)
   }

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/useGraceArea.ts

@@ -192,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()
@@ -206,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
       }
     }