reka-ui 2.8.0 → 2.9.0

package/src/NumberField/NumberFieldRoot.vue

@@ -205,10 +205,10 @@ provideNumberFieldRootContext({
   inputEl,
   onInputElement: el => inputEl.value = el,
   textValue,
+  readonly,
   validate,
   applyInputValue,
   disabled,
-  readonly,
   disableWheelChange,
   invertWheelChange,
   max,
@@ -232,6 +232,7 @@ provideNumberFieldRootContext({
     <slot
       :model-value="modelValue"
       :text-value="textValue"
+      :readonly="readonly"
     />
 
     <VisuallyHiddenInput

package/src/Progress/ProgressRoot.vue

@@ -154,6 +154,8 @@ provideProgressRootContext({
     :data-value="modelValue ?? undefined"
     :data-max="max"
   >
-    <slot :model-value="modelValue" />
+    <slot
+      :model-value="modelValue"
+    />
   </Primitive>
 </template>

package/src/RadioGroup/RadioGroupRoot.vue

@@ -24,7 +24,7 @@ export interface RadioGroupRootProps extends PrimitiveProps, FormFieldProps {
 }
 export type RadioGroupRootEmits = {
   /** Event handler called when the radio group value changes */
-  'update:modelValue': [payload: string]
+  'update:modelValue': [payload: AcceptableValue]
 }
 
 interface RadioGroupRootContext {

package/src/RangeCalendar/RangeCalendarCellTrigger.vue

@@ -94,7 +94,15 @@ const isDisabled = computed(() => rootContext.isDateDisabled(props.day) || (root
 const dayValue = computed(() => props.day.day.toLocaleString(rootContext.locale.value))
 
 const isFocusedDate = computed(() => {
-  return !rootContext.disabled.value && isSameDay(props.day, rootContext.placeholder.value)
+  if (isOutsideView.value || isDisabled.value)
+    return false
+  if (!rootContext.disabled.value && rootContext.isPlaceholderFocusable.value && isSameDay(props.day, rootContext.placeholder.value))
+    return true
+  if (!rootContext.disabled.value && rootContext.selectedFocusableDate.value && !rootContext.isPlaceholderFocusable.value)
+    return isSameDay(props.day, rootContext.selectedFocusableDate.value)
+  if (!rootContext.disabled.value && (!rootContext.hasSelectedDate.value || rootContext.isSelectedDisabled.value) && !rootContext.isPlaceholderFocusable.value)
+    return rootContext.firstFocusableDate.value && isSameDay(props.day, rootContext.firstFocusableDate.value)
+  return false
 })
 
 function changeDate(e: MouseEvent | KeyboardEvent, date: DateValue) {
@@ -103,22 +111,24 @@ function changeDate(e: MouseEvent | KeyboardEvent, date: DateValue) {
   if (rootContext.isDateDisabled(date) || rootContext.isDateUnavailable?.(date))
     return
 
-  rootContext.lastPressedDateValue.value = date.copy()
-
   if (rootContext.startValue.value && rootContext.highlightedRange.value === null) {
     if (isSameDay(date, rootContext.startValue.value) && !rootContext.preventDeselect.value && !rootContext.endValue.value) {
       rootContext.startValue.value = undefined
       rootContext.onPlaceholderChange(date)
+      rootContext.lastPressedDateValue.value = date.copy()
       return
     }
     else if (!rootContext.endValue.value) {
       e.preventDefault()
       if (rootContext.lastPressedDateValue.value && isSameDay(rootContext.lastPressedDateValue.value, date))
         rootContext.startValue.value = date.copy()
+      rootContext.lastPressedDateValue.value = date.copy()
       return
     }
   }
 
+  rootContext.lastPressedDateValue.value = date.copy()
+
   if (
     rootContext.startValue.value
     && rootContext.endValue.value

package/src/RangeCalendar/RangeCalendarGrid.vue

@@ -26,6 +26,7 @@ const readonly = computed(() => rootContext.readonly.value ? true : undefined)
     :aria-disabled="disabled"
     :data-readonly="readonly && ''"
     :data-disabled="disabled && ''"
+    @mouseleave="rootContext.focusedValue.value = undefined"
   >
     <slot />
   </Primitive>

package/src/RangeCalendar/RangeCalendarNext.vue

@@ -26,18 +26,24 @@ defineSlots<RangeCalendarNextSlot>()
 const disabled = computed(() => rootContext.disabled.value || rootContext.isNextButtonDisabled(props.nextPage))
 
 const rootContext = injectRangeCalendarRootContext()
+
+function handleClick() {
+  if (disabled.value)
+    return
+  rootContext.nextPage(props.nextPage)
+}
 </script>
 
 <template>
   <Primitive
-    :as="as"
-    :as-child="asChild"
+    :as="props.as"
+    :as-child="props.asChild"
     aria-label="Next page"
-    :type="as === 'button' ? 'button' : undefined"
+    :type="props.as === 'button' ? 'button' : undefined"
     :aria-disabled="disabled || undefined"
     :data-disabled="disabled || undefined"
     :disabled="disabled"
-    @click="rootContext.nextPage(props.nextPage)"
+    @click="handleClick"
   >
     <slot :disabled>
       Next page

package/src/RangeCalendar/RangeCalendarPrev.vue

@@ -26,18 +26,24 @@ defineSlots<RangeCalendarPrevSlot>()
 const disabled = computed(() => rootContext.disabled.value || rootContext.isPrevButtonDisabled(props.prevPage))
 
 const rootContext = injectRangeCalendarRootContext()
+
+function handleClick() {
+  if (disabled.value)
+    return
+  rootContext.prevPage(props.prevPage)
+}
 </script>
 
 <template>
   <Primitive
-    :as="as"
-    :as-child="asChild"
+    :as="props.as"
+    :as-child="props.asChild"
     aria-label="Previous page"
-    :type="as === 'button' ? 'button' : undefined"
+    :type="props.as === 'button' ? 'button' : undefined"
     :aria-disabled="disabled || undefined"
     :data-disabled="disabled || undefined"
     :disabled="disabled"
-    @click="rootContext.prevPage(props.prevPage)"
+    @click="handleClick"
   >
     <slot :disabled>
       Prev page

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 {
@@ -75,7 +80,7 @@ export interface RangeCalendarRootProps extends PrimitiveProps {
   defaultPlaceholder?: DateValue
   /** The default value for the calendar */
   defaultValue?: DateRange
-  /** The controlled checked state of the calendar. Can be bound as `v-model`. */
+  /** The controlled selected date range of the calendar. Can be bound as `v-model`. */
   modelValue?: DateRange | null
   /** The placeholder date, which is used to determine what month to display when no date is selected. This updates as the user navigates the calendar and can be used to programmatically control the calendar view */
   placeholder?: DateValue
@@ -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?.()
   }
 })
 
@@ -368,7 +379,7 @@ watch([startValue, endValue], ([_startValue, _endValue]) => {
 })
 
 const kbd = useKbd()
-useEventListener('keydown', (ev) => {
+useEventListener(parentElement, 'keydown', (ev) => {
   if (ev.key === kbd.ESCAPE && isEditing.value) {
     // Abort start and end selection
     startValue.value = validModelValue.value.start?.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,18 +121,15 @@ 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
+      const focused = props.focusedValue.value
 
-      return {
-        start,
-        end: cappedEnd,
-      }
+      if (!isBefore(focused, anchor))
+        return { start: anchor, end: anchor.add({ days: maximumDays - 1 }) }
+
+      return { start: anchor.subtract({ days: maximumDays - 1 }), end: anchor }
     }
 
     const isValid = areAllDaysBetweenValid(start, end, props.allowNonContiguousRanges.value ? () => false : props.isDateUnavailable, rangeIsDateDisabled, props.isDateHighlightable)
@@ -162,6 +154,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 +194,8 @@ export function useRangeCalendarState(props: UseRangeCalendarProps) {
     isHighlightedStart,
     isHighlightedEnd,
     isDateDisabled: rangeIsDateDisabled,
+    hasSelectedDate,
+    isSelectedDisabled,
+    selectedFocusableDate,
   }
 }