reka-ui 2.8.0 → 2.8.2

package/src/RangeCalendar/RangeCalendarRoot.vue

@@ -1,14 +1,14 @@
 <script lang="ts">
 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 { DateRange } from '@/shared/date'
 import type { Direction } from '@/shared/types'
 import { isEqualDay } from '@internationalized/date'
 import { useCalendar } from '@/Calendar/useCalendar'
-import { isBefore } from '@/date'
+import { getWeekStartsOn, isBefore } from '@/date'
 import {
   createContext,
   useDirection,
@@ -28,7 +28,7 @@ type RangeCalendarRootContext = {
   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>
   numberOfMonths: Ref<number>
@@ -68,6 +68,11 @@ type RangeCalendarRootContext = {
   maximumDays: Ref<number | undefined>
   minValue: Ref<DateValue | undefined>
   maxValue: Ref<DateValue | undefined>
+  isPlaceholderFocusable: Ref<boolean>
+  firstFocusableDate: Ref<DateValue | undefined>
+  hasSelectedDate: Ref<boolean>
+  isSelectedDisabled: Ref<boolean>
+  selectedFocusableDate: Ref<DateValue | undefined>
 }
 
 export interface RangeCalendarRootProps extends PrimitiveProps {
@@ -88,7 +93,7 @@ export interface RangeCalendarRootProps extends PrimitiveProps {
   /** The maximum number of days that can be selected in a range */
   maximumDays?: number
   /** 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 */
@@ -145,7 +150,7 @@ export const [injectRangeCalendarRootContext, provideRangeCalendarRootContext]
 
 <script setup lang="ts">
 import { useEventListener, useVModel } from '@vueuse/core'
-import { onMounted, ref, toRefs, watch } from 'vue'
+import { computed, onMounted, ref, toRefs, watch } from 'vue'
 import { Primitive, usePrimitiveElement } from '@/Primitive'
 
 const props = withDefaults(defineProps<RangeCalendarRootProps>(), {
@@ -153,7 +158,6 @@ const props = withDefaults(defineProps<RangeCalendarRootProps>(), {
   as: 'div',
   pagedNavigation: false,
   preventDeselect: false,
-  weekStartsOn: 0,
   weekdayFormat: 'narrow',
   fixedWeeks: false,
   numberOfMonths: 1,
@@ -167,6 +171,7 @@ const props = withDefaults(defineProps<RangeCalendarRootProps>(), {
   allowNonContiguousRanges: false,
   maximumDays: undefined,
   disableDaysOutsideCurrentView: false,
+
 })
 const emits = defineEmits<RangeCalendarRootEmits>()
 
@@ -179,7 +184,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 */
@@ -194,7 +199,6 @@ const {
   readonly,
   initialFocus,
   pagedNavigation,
-  weekStartsOn,
   weekdayFormat,
   fixedWeeks,
   numberOfMonths,
@@ -219,6 +223,7 @@ const { primitiveElement, currentElement: parentElement }
   = usePrimitiveElement()
 const dir = useDirection(propDir)
 const locale = useLocale(propLocale)
+const weekStartsOn = computed(() => props.weekStartsOn ?? getWeekStartsOn(locale.value))
 
 const lastPressedDateValue = ref() as Ref<DateValue | undefined>
 const focusedValue = ref() as Ref<DateValue | undefined>
@@ -227,9 +232,12 @@ const isEditing = ref(false)
 const modelValue = useVModel(props, 'modelValue', emits, {
   defaultValue: props.defaultValue ?? { start: undefined, end: undefined },
   passive: (props.modelValue === undefined) as false,
-}) as Ref<DateRange>
+}) as Ref<DateRange | null>
+
+const normalizeRange = (value?: DateRange | null): DateRange => value ?? { start: undefined, end: undefined }
+const normalizedModelValue = computed(() => normalizeRange(modelValue.value))
 
-const validModelValue = ref(modelValue.value) as Ref<DateRange>
+const validModelValue = ref(normalizeRange(modelValue.value)) as Ref<DateRange>
 
 watch(validModelValue, (value) => {
   emits('update:validModelValue', value)
@@ -237,14 +245,14 @@ watch(validModelValue, (value) => {
 
 const defaultDate = getDefaultDate({
   defaultPlaceholder: props.placeholder,
-  defaultValue: modelValue.value.start,
+  defaultValue: normalizeRange(modelValue.value).start,
   locale: props.locale,
 })
 
-const startValue = ref(modelValue.value.start) as Ref<
+const startValue = ref(normalizeRange(modelValue.value).start) as Ref<
   DateValue | undefined
 >
-const endValue = ref(modelValue.value.end) as Ref<DateValue | undefined>
+const endValue = ref(normalizeRange(modelValue.value).end) as Ref<DateValue | undefined>
 
 const placeholder = useVModel(props, 'placeholder', emits, {
   defaultValue: props.defaultPlaceholder ?? defaultDate.copy(),
@@ -268,6 +276,8 @@ const {
   nextPage,
   prevPage,
   formatter,
+  isPlaceholderFocusable,
+  firstFocusableDate,
 } = useCalendar({
   locale,
   placeholder,
@@ -296,6 +306,9 @@ const {
   isHighlightedStart,
   isHighlightedEnd,
   isDateDisabled: rangeIsDateDisabled,
+  hasSelectedDate,
+  isSelectedDisabled,
+  selectedFocusableDate,
 } = useRangeCalendarState({
   start: startValue,
   end: endValue,
@@ -308,23 +321,21 @@ const {
   maximumDays,
 })
 
-watch(modelValue, (_modelValue, _prevValue) => {
-  if (
-    (!_prevValue?.start && _modelValue?.start)
-    || !_modelValue
-    || !_modelValue.start
-    || (startValue.value && !isEqualDay(_modelValue.start, startValue.value))
-  ) {
-    startValue.value = _modelValue?.start?.copy?.()
+watch(modelValue, (_modelValue) => {
+  const next = normalizeRange(_modelValue)
+
+  const isStartSynced = (!next.start && !startValue.value)
+    || (!!next.start && !!startValue.value && isEqualDay(next.start, startValue.value))
+
+  if (!isStartSynced) {
+    startValue.value = next.start?.copy?.()
   }
 
-  if (
-    (!_prevValue?.end && _modelValue.end)
-    || !_modelValue
-    || !_modelValue.end
-    || (endValue.value && !isEqualDay(_modelValue.end, endValue.value))
-  ) {
-    endValue.value = _modelValue?.end?.copy?.()
+  const isEndSynced = (!next.end && !endValue.value)
+    || (!!next.end && !!endValue.value && isEqualDay(next.end, endValue.value))
+
+  if (!isEndSynced) {
+    endValue.value = next.end?.copy?.()
   }
 })
 
@@ -382,7 +393,7 @@ provideRangeCalendarRootContext({
   startValue,
   endValue,
   formatter,
-  modelValue,
+  modelValue: normalizedModelValue,
   placeholder,
   disabled,
   initialFocus,
@@ -422,6 +433,11 @@ provideRangeCalendarRootContext({
   maximumDays,
   minValue,
   maxValue,
+  isPlaceholderFocusable,
+  firstFocusableDate,
+  hasSelectedDate,
+  isSelectedDisabled,
+  selectedFocusableDate,
 })
 
 onMounted(() => {
@@ -470,7 +486,7 @@ onMounted(() => {
       :week-starts-on="weekStartsOn"
       :locale="locale"
       :fixed-weeks="fixedWeeks"
-      :model-value="modelValue"
+      :model-value="normalizedModelValue"
     />
   </Primitive>
 </template>

package/src/RangeCalendar/useRangeCalendar.ts

@@ -41,7 +41,7 @@ export function useRangeCalendarState(props: UseRangeCalendarProps) {
   const isInvalid = computed(
     () => {
       if (isStartInvalid.value || isEndInvalid.value)
-        return false
+        return true
       if (props.start.value && props.end.value && isBefore(props.end.value, props.start.value))
         return true
       return false
@@ -71,12 +71,10 @@ export function useRangeCalendarState(props: UseRangeCalendarProps) {
     return false
   }
 
-  // Check if a date exceeds maximum days limit from the start date
   const rangeIsDateDisabled = (date: DateValue) => {
     if (props.isDateDisabled(date))
       return true
 
-    // Check if exceeds maximum days limit
     if (props.maximumDays?.value) {
       if (props.start.value && props.end.value) {
         if (props.fixedDate.value) {
@@ -97,9 +95,6 @@ export function useRangeCalendarState(props: UseRangeCalendarProps) {
       }
     }
 
-    if (!props.start.value || props.end.value || isSameDay(props.start.value, date))
-      return false
-
     return false
   }
 
@@ -126,17 +121,17 @@ export function useRangeCalendarState(props: UseRangeCalendarProps) {
       }
     }
 
-    // If maximum days is set and the range exceeds it, limit the highlight
-    // We only apply this when we're in the middle of a selection (no end date yet)
     if (props.maximumDays?.value && !props.end.value) {
-      // Determine the direction of selection and limit to maximum days
-      const cappedEnd = isStartBeforeFocused
-        ? start.add({ days: props.maximumDays.value - 1 })
-        : start.subtract({ days: props.maximumDays.value })
+      const maximumDays = props.maximumDays.value
+      const anchor = props.start.value
 
-      return {
-        start,
-        end: cappedEnd,
+      if (isStartBeforeFocused) {
+        const maxEnd = anchor.add({ days: maximumDays - 1 })
+        return { start: anchor, end: maxEnd }
+      }
+      else {
+        const minStart = anchor.subtract({ days: maximumDays - 1 })
+        return { start: minStart, end: anchor }
       }
     }
 
@@ -162,6 +157,36 @@ export function useRangeCalendarState(props: UseRangeCalendarProps) {
     return isSameDay(highlightedRange.value.end, date)
   }
 
+  const hasSelectedDate = computed(() => {
+    return !!(props.start.value || props.end.value)
+  })
+
+  const isStartDateDisabled = computed(() => {
+    return !!(props.start.value && props.isDateDisabled(props.start.value))
+  })
+
+  const isEndDateDisabled = computed(() => {
+    return !!(props.end.value && props.isDateDisabled(props.end.value))
+  })
+
+  const isSelectedDisabled = computed(() => {
+    const hasStart = !!props.start.value
+    const hasEnd = !!props.end.value
+    if (!hasStart && !hasEnd)
+      return false
+    if (hasStart && hasEnd)
+      return isStartDateDisabled.value && isEndDateDisabled.value
+    return (hasStart && isStartDateDisabled.value) || (hasEnd && isEndDateDisabled.value)
+  })
+
+  const selectedFocusableDate = computed(() => {
+    if (props.start.value && !isStartDateDisabled.value)
+      return props.start.value
+    if (props.end.value && !isEndDateDisabled.value)
+      return props.end.value
+    return undefined
+  })
+
   return {
     isInvalid,
     isSelected,
@@ -172,5 +197,8 @@ export function useRangeCalendarState(props: UseRangeCalendarProps) {
     isHighlightedStart,
     isHighlightedEnd,
     isDateDisabled: rangeIsDateDisabled,
+    hasSelectedDate,
+    isSelectedDisabled,
+    selectedFocusableDate,
   }
 }

package/src/date/calendar.ts

@@ -5,12 +5,14 @@
 import type { DateValue, DayOfWeek } from '@internationalized/date'
 import type { Grid } from './types'
 import type { DateRange } from '@/shared'
-import { CalendarDate, endOfMonth, endOfYear, getDayOfWeek, startOfMonth, startOfYear } from '@internationalized/date'
+import { CalendarDate, endOfMonth, endOfYear, getDayOfWeek, startOfMonth, startOfWeek, startOfYear } from '@internationalized/date'
 import { getDaysInMonth, getLastFirstDayOfWeek, getNextLastDayOfWeek } from './comparators'
 import { chunk } from './utils'
 
 export type WeekDayFormat = 'narrow' | 'short' | 'long'
 
+export type WeekStartsOn = 0 | 1 | 2 | 3 | 4 | 5 | 6
+
 export type CreateSelectProps = {
   /**
    * The date object representing the date (usually the first day of the month/year).
@@ -27,7 +29,7 @@ export type CreateMonthProps = {
   /**
    * The day of the week to start the calendar on (0 for Sunday, 1 for Monday, etc.).
    */
-  weekStartsOn: number
+  weekStartsOn: WeekStartsOn
 
   /**
    * Whether to always render 6 weeks in the calendar, even if the month doesn't
@@ -219,24 +221,46 @@ export function createDateRange({ start, end }: DateRange): DateValue[] {
   return dates
 }
 
+/**
+ * It's better to use `getWeekStart` from `@internationalized/date`,
+ * but sadly it is not yet exported from the package.
+ * And the `Intl.Locale` API is not supported well enough yet.
+ */
+export function getWeekStartsOn(locale: string): WeekStartsOn {
+  // Jan 6, 2025 is a Monday (ISO day = 1)
+  const monday = new CalendarDate(2025, 1, 6)
+  const dayOfWeek = getDayOfWeek(monday, locale)
+  // dayOfWeek tells us Monday's position in the locale's week (0-indexed)
+  // If Monday is position 0 → week starts Monday (1)
+  // If Monday is position 1 → week starts Sunday (0)
+  return (1 - dayOfWeek + 7) % 7 as WeekStartsOn
+}
+
 /**
  * Returns the locale-specific week number
  */
 export function getWeekNumber(date: DateValue, locale: string = 'en-US', firstDayOfWeek?: DayOfWeek): number {
-  const firstDayOfYear = new CalendarDate(date.year, 1, 1)
-
-  const firstDayOfYearWeekday = getDayOfWeek(firstDayOfYear, locale, firstDayOfWeek)
-
-  const firstWeekStart = firstDayOfYear.subtract({ days: firstDayOfYearWeekday })
-
-  // If date is before the first week start It belongs to the last week of the previous year
-  if (date.compare(firstWeekStart) < 0) {
-    const prevYearDate = new CalendarDate(date.year - 1, 12, 31)
-    return getWeekNumber(prevYearDate, locale, firstDayOfWeek)
-  }
-
-  const days = getDaysBetween(firstWeekStart, date)
-
-  // Week number is days divided by 7 plus 1
-  return Math.floor(days.length / 7) + 1
+  const jan1 = new CalendarDate(date.year, 1, 1)
+
+  // Detect ISO locale by comparing JS day of week with locale day of week
+  const usesISOWeek = jan1.toDate('UTC').getUTCDay() !== getDayOfWeek(jan1, locale)
+  const weekStartsOn = firstDayOfWeek ?? (usesISOWeek ? 'mon' : 'sun')
+  const firstWeekContainsDate = usesISOWeek ? 4 : 1
+
+  // Find the "deciding day" - its year determines which year's week numbering to use
+  const dayOfWeek = getDayOfWeek(date, locale, weekStartsOn)
+  const decidingDay = date.add({ days: 7 - firstWeekContainsDate - dayOfWeek })
+  const weekYear = decidingDay.year
+
+  // Calculate week number from week 1 start
+  const week1Ref = new CalendarDate(weekYear, 1, firstWeekContainsDate)
+  const week1Start = startOfWeek(week1Ref, locale, weekStartsOn)
+  const currentWeekStart = startOfWeek(date, locale, weekStartsOn)
+
+  const MS_PER_WEEK = 7 * 24 * 60 * 60 * 1000
+  const daysDiff = Math.round(
+    (currentWeekStart.toDate('UTC').getTime() - week1Start.toDate('UTC').getTime())
+    / MS_PER_WEEK,
+  )
+  return daysDiff + 1
 }

package/src/shared/date/useDateField.ts

@@ -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

package/src/shared/useForwardExpose.ts

@@ -61,7 +61,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)