reka-ui 2.4.1 → 2.5.1

package/src/RangeCalendar/RangeCalendarRoot.vue

@@ -11,7 +11,6 @@ import { useCalendar } from '@/Calendar/useCalendar'
 import { isBefore } from '@/date'
 import {
   createContext,
-  isNullish,
   useDirection,
   useKbd,
   useLocale,
@@ -67,6 +66,8 @@ type RangeCalendarRootContext = {
   disableDaysOutsideCurrentView: Ref<boolean>
   fixedDate: Ref<'start' | 'end' | undefined>
   maximumDays: Ref<number | undefined>
+  minValue: Ref<DateValue | undefined>
+  maxValue: Ref<DateValue | undefined>
 }
 
 export interface RangeCalendarRootProps extends PrimitiveProps {
@@ -130,6 +131,8 @@ export interface RangeCalendarRootProps extends PrimitiveProps {
 export type RangeCalendarRootEmits = {
   /** Event handler called whenever the model value changes */
   'update:modelValue': [date: DateRange]
+  /** Event handler called whenever there is a new validModel */
+  'update:validModelValue': [date: DateRange]
   /** Event handler called whenever the placeholder value changes */
   'update:placeholder': [date: DateValue]
   /** Event handler called whenever the start value changes */
@@ -142,7 +145,7 @@ export const [injectRangeCalendarRootContext, provideRangeCalendarRootContext]
 
 <script setup lang="ts">
 import { useEventListener, useVModel } from '@vueuse/core'
-import { computed, onMounted, ref, toRefs, watch } from 'vue'
+import { onMounted, ref, toRefs, watch } from 'vue'
 import { Primitive, usePrimitiveElement } from '@/Primitive'
 
 const props = withDefaults(defineProps<RangeCalendarRootProps>(), {
@@ -226,22 +229,22 @@ const modelValue = useVModel(props, 'modelValue', emits, {
   passive: (props.modelValue === undefined) as false,
 }) as Ref<DateRange>
 
-const currentModelValue = computed(() =>
-  isNullish(modelValue.value)
-    ? { start: undefined, end: undefined }
-    : modelValue.value,
-)
+const validModelValue = ref(modelValue.value) as Ref<DateRange>
+
+watch(validModelValue, (value) => {
+  emits('update:validModelValue', value)
+})
 
 const defaultDate = getDefaultDate({
   defaultPlaceholder: props.placeholder,
-  defaultValue: currentModelValue.value.start,
+  defaultValue: modelValue.value.start,
   locale: props.locale,
 })
 
-const startValue = ref(currentModelValue.value.start) as Ref<
+const startValue = ref(modelValue.value.start) as Ref<
   DateValue | undefined
 >
-const endValue = ref(currentModelValue.value.end) as Ref<DateValue | undefined>
+const endValue = ref(modelValue.value.end) as Ref<DateValue | undefined>
 
 const placeholder = useVModel(props, 'placeholder', emits, {
   defaultValue: props.defaultPlaceholder ?? defaultDate.copy(),
@@ -333,7 +336,7 @@ watch(startValue, (_startValue) => {
 })
 
 watch([startValue, endValue], ([_startValue, _endValue]) => {
-  const value = currentModelValue.value
+  const value = modelValue.value
 
   if (
     value
@@ -348,16 +351,7 @@ watch([startValue, endValue], ([_startValue, _endValue]) => {
   }
 
   isEditing.value = true
-  if (_startValue && _endValue) {
-    isEditing.value = false
-    if (
-      value.start
-      && value.end
-      && isEqualDay(value.start, _startValue)
-      && isEqualDay(value.end, _endValue)
-    ) {
-      return
-    }
+  if (_endValue && _startValue) {
     if (isBefore(_endValue, _startValue)) {
       modelValue.value = {
         start: _endValue.copy(),
@@ -370,6 +364,23 @@ watch([startValue, endValue], ([_startValue, _endValue]) => {
         end: _endValue.copy(),
       }
     }
+
+    isEditing.value = false
+    validModelValue.value = { start: modelValue.value.start?.copy(), end: modelValue.value.end?.copy() }
+  }
+  else {
+    if (_startValue) {
+      modelValue.value = {
+        start: _startValue.copy(),
+        end: undefined,
+      }
+    }
+    else {
+      modelValue.value = {
+        start: _endValue?.copy(),
+        end: undefined,
+      }
+    }
   }
 })
 
@@ -377,8 +388,8 @@ const kbd = useKbd()
 useEventListener('keydown', (ev) => {
   if (ev.key === kbd.ESCAPE && isEditing.value) {
     // Abort start and end selection
-    startValue.value = modelValue.value.start?.copy()
-    endValue.value = modelValue.value.end?.copy()
+    startValue.value = validModelValue.value.start?.copy()
+    endValue.value = validModelValue.value.end?.copy()
   }
 })
 
@@ -426,6 +437,8 @@ provideRangeCalendarRootContext({
   disableDaysOutsideCurrentView,
   fixedDate,
   maximumDays,
+  minValue,
+  maxValue,
 })
 
 onMounted(() => {

package/src/RovingFocus/RovingFocusGroup.vue

@@ -102,10 +102,11 @@ function handleFocus(event: FocusEvent) {
     if (!entryFocusEvent.defaultPrevented) {
       const items = getItems().map(i => i.ref).filter(i => i.dataset.disabled !== '')
       const activeItem = items.find(item => item.getAttribute('data-active') === '')
+      const highlightedItem = items.find(item => item.getAttribute('data-highlighted') === '')
       const currentItem = items.find(
         item => item.id === currentTabStopId.value,
       )
-      const candidateItems = [activeItem, currentItem, ...items].filter(
+      const candidateItems = [activeItem, highlightedItem, currentItem, ...items].filter(
         Boolean,
       ) as typeof items
       focusFirst(candidateItems, props.preventScrollOnEntryFocus)

package/src/Select/SelectContentImpl.vue

@@ -301,7 +301,12 @@ provideSelectContentContext({
           :id="rootContext.contentId"
           :ref="
             (vnode: ComponentPublicInstance) => {
-              content = unrefElement(vnode) as HTMLElement
+              const el = unrefElement(vnode) as HTMLElement | undefined
+              // special case for PopperContent
+              if (el?.hasAttribute('data-reka-popper-content-wrapper'))
+                content = el.firstElementChild as HTMLElement
+              else
+                content = el
               return undefined
             }
           "

package/src/Select/SelectRoot.vue

@@ -3,7 +3,7 @@ import type { Ref } from 'vue'
 import type { AcceptableValue, Direction, FormFieldProps } from '@/shared/types'
 import { useCollection } from '@/Collection'
 import { createContext, isNullish, useDirection, useFormControl } from '@/shared'
-import { compare } from './utils'
+import { compare, valueComparator } from './utils'
 
 export interface SelectRootProps<T = AcceptableValue> extends FormFieldProps {
   /** The controlled open state of the Select. Can be bind as `v-model:open`. */
@@ -144,6 +144,11 @@ function handleValueChange(value: T) {
   }
 }
 
+function getOption(value: SelectOption['value']) {
+  return Array.from(optionsSet.value)
+    .find(option => valueComparator(value, option.value, props.by))
+}
+
 provideSelectRootContext({
   triggerElement,
   onTriggerChange: (node) => {
@@ -171,8 +176,20 @@ provideSelectRootContext({
   isEmptyModelValue,
 
   optionsSet,
-  onOptionAdd: option => optionsSet.value.add(option),
-  onOptionRemove: option => optionsSet.value.delete(option),
+  onOptionAdd: (option) => {
+    const existingOption = getOption(option.value)
+    if (existingOption) {
+      optionsSet.value.delete(existingOption)
+    }
+
+    optionsSet.value.add(option)
+  },
+  onOptionRemove: (option) => {
+    const existingOption = getOption(option.value)
+    if (existingOption) {
+      optionsSet.value.delete(existingOption)
+    }
+  },
 })
 </script>
 

package/src/Splitter/SplitterPanel.vue

@@ -127,11 +127,11 @@ watch(() => panelDataRef.value.constraints, (constraints, prevConstraints) => {
 }, { deep: true })
 
 onMounted(() => {
-  const panelData = panelDataRef.value
-  registerPanel(panelData)
-  onUnmounted(() => {
-    unregisterPanel(panelData)
-  })
+  registerPanel(panelDataRef.value)
+})
+
+onUnmounted(() => {
+  unregisterPanel(panelDataRef.value)
 })
 
 const style = computed(() => getPanelStyle(panelDataRef.value, props.defaultSize))

package/src/TagsInput/TagsInputInput.vue

@@ -86,6 +86,11 @@ function handleInput(event: InputEvent) {
     const target = event.target as HTMLInputElement
     target.value = target.value.replace(delimiter, '')
 
+    if (target.value.trim() === '') {
+      target.value = ''
+      return
+    }
+
     const isAdded = context.onAddValue(target.value)
     if (isAdded)
       target.value = ''

package/src/ToggleGroup/ToggleGroupItem.vue

@@ -33,8 +33,7 @@ const { forwardRef } = useForwardExpose()
   <component
     :is="rootContext.rovingFocus.value ? RovingFocusItem : Primitive"
     as-child
-    :focusable="!disabled"
-    :active="pressed"
+    v-bind="rootContext.rovingFocus.value ? { focusable: !disabled, active: pressed } : {}"
   >
     <Toggle
       v-bind="props"

package/src/VisuallyHidden/VisuallyHidden.vue

@@ -20,7 +20,7 @@ withDefaults(defineProps<VisuallyHiddenProps>(), { as: 'span', feature: 'focusab
     :data-hidden="feature === 'fully-hidden' ? '' : undefined"
     :tabindex="feature === 'fully-hidden' ? '-1' : undefined"
     :style="{
-      // See: https://github.com/twbs/bootstrap/blob/master/scss/mixins/_screen-reader.scss
+      // See: https://github.com/twbs/bootstrap/blob/a360960b8dfdb4bf48f87539c2243458fa0366f7/scss/mixins/_visually-hidden.scss
       position: 'absolute',
       border: 0,
       width: '1px',
@@ -32,6 +32,11 @@ withDefaults(defineProps<VisuallyHiddenProps>(), { as: 'span', feature: 'focusab
       clipPath: 'inset(50%)',
       whiteSpace: 'nowrap',
       wordWrap: 'normal',
+
+      // Prevent causing unnecessary container scroll
+      // @see https://github.com/unovue/reka-ui/issues/2127
+      top: '-1px',
+      left: '-1px',
     }"
   >
     <slot />

package/src/shared/useDateFormatter.ts

@@ -105,7 +105,8 @@ export function useDateFormatter(initialLocale: string, opts: DateFormatterOptio
       minute: 'numeric',
     }).formatToParts(date)
     const value = parts.find(p => p.type === 'dayPeriod')?.value
-    if (value === 'PM')
+    // Day period can be "AM"/"PM" or "a.m."/"p.m." in some locales
+    if (value === 'PM' || value === 'p.m.')
       return 'PM'
 
     return 'AM'