reka-ui 2.8.2 → 2.9.0

package/src/Menu/MenuSubContent.vue

@@ -19,7 +19,7 @@ export interface MenuSubContentProps extends Omit<MenuContentImplProps, 'disable
 <script setup lang="ts">
 import { Presence } from '@/Presence'
 import { useForwardExpose, useForwardPropsEmits, useId } from '@/shared'
-import MenuContentImpl from './MenuContentImpl.vue'
+import MenuContentImpl, { injectMenuContentContext } from './MenuContentImpl.vue'
 import { injectMenuContext, injectMenuRootContext } from './MenuRoot.vue'
 import { injectMenuSubContext } from './MenuSub.vue'
 import { SUB_CLOSE_KEYS } from './utils'
@@ -34,6 +34,7 @@ const forwarded = useForwardPropsEmits(props, emits)
 const menuContext = injectMenuContext()
 const rootContext = injectMenuRootContext()
 const menuSubContext = injectMenuSubContext()
+const parentContentContext = injectMenuContentContext()
 
 const { forwardRef, currentElement: subContentElement } = useForwardExpose()
 
@@ -62,7 +63,10 @@ menuSubContext.contentId ||= useId(undefined, 'reka-menu-sub-content')
           if (event.defaultPrevented) return;
           // We prevent closing when the trigger is focused to avoid triggering a re-open animation
           // on pointer interaction.
-          if (event.target !== menuSubContext.trigger.value)
+          // Also check if focus is moving to the parent content's filter to avoid closing when
+          // hovering between submenu and parent menu
+          const isMovingToParentContent = parentContentContext.filterElement.value?.contains(event.target as Node);
+          if (event.target !== menuSubContext.trigger.value && !isMovingToParentContent)
             menuContext.onOpenChange(false);
         }
       "
@@ -80,7 +84,14 @@ menuSubContext.contentId ||= useId(undefined, 'reka-menu-sub-content')
         if (isKeyDownInside && isCloseKey) {
           menuContext.onOpenChange(false);
           // We focus manually because we prevented it in `onCloseAutoFocus`
-          menuSubContext.trigger.value?.focus();
+          if (parentContentContext.filterElement.value) {
+            parentContentContext.filterElement.value.focus();
+            parentContentContext.highlightedElement.value = menuSubContext.trigger.value;
+            menuSubContext.trigger.value?.scrollIntoView({ block: 'nearest' });
+          }
+          else {
+            menuSubContext.trigger.value?.focus();
+          }
           // prevent window from scrolling
           event.preventDefault();
         }

package/src/Menu/MenuSubTrigger.vue

@@ -7,7 +7,7 @@ export interface MenuSubTriggerProps extends MenuItemImplProps {}
 
 <script setup lang="ts">
 import type { ComponentPublicInstance } from 'vue'
-import { nextTick, onUnmounted, ref } from 'vue'
+import { nextTick, onUnmounted, ref, watch } from 'vue'
 import { useId } from '@/shared'
 import MenuAnchor from './MenuAnchor.vue'
 import { injectMenuContentContext } from './MenuContentImpl.vue'
@@ -23,6 +23,18 @@ const rootContext = injectMenuRootContext()
 const subContext = injectMenuSubContext()
 const contentContext = injectMenuContentContext()
 
+watch(menuContext.open, (open) => {
+  if (open) {
+    contentContext.activeSubmenuContext.value = {
+      onOpenChange: menuContext.onOpenChange,
+      trigger: subContext.trigger,
+    }
+  }
+  else if (contentContext.activeSubmenuContext.value?.trigger.value === subContext.trigger.value) {
+    contentContext.activeSubmenuContext.value = undefined
+  }
+})
+
 const openTimerRef = ref<number | null>(null)
 
 subContext.triggerId ||= useId(undefined, 'reka-menu-sub-trigger')

package/src/MonthPicker/MonthPickerCell.vue

@@ -0,0 +1,30 @@
+<script lang="ts">
+import type { DateValue } from '@internationalized/date'
+import type { PrimitiveProps } from '@/Primitive'
+
+export interface MonthPickerCellProps extends PrimitiveProps {
+  /** The date value for the cell */
+  date: DateValue
+}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '@/Primitive'
+import { injectMonthPickerRootContext } from './MonthPickerRoot.vue'
+
+withDefaults(defineProps<MonthPickerCellProps>(), { as: 'td' })
+const rootContext = injectMonthPickerRootContext()
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    :as-child="asChild"
+    role="gridcell"
+    :aria-selected="rootContext.isMonthSelected(date) ? true : undefined"
+    :aria-disabled="rootContext.isMonthDisabled(date) || rootContext.isMonthUnavailable?.(date)"
+    :data-disabled="rootContext.isMonthDisabled(date) ? '' : undefined"
+  >
+    <slot />
+  </Primitive>
+</template>

package/src/MonthPicker/MonthPickerCellTrigger.vue

@@ -0,0 +1,214 @@
+<script lang="ts">
+import type { DateValue } from '@internationalized/date'
+import type { PrimitiveProps } from '@/Primitive'
+import { endOfMonth, getLocalTimeZone, toCalendar, today } from '@internationalized/date'
+import { computed, nextTick } from 'vue'
+import { isSameYearMonth, toDate } from '@/date'
+import { useKbd } from '@/shared'
+
+export interface MonthPickerCellTriggerProps extends PrimitiveProps {
+  /** The date value provided to the cell trigger */
+  month: DateValue
+}
+
+export interface MonthPickerCellTriggerSlot {
+  default?: (props: {
+    /** Current month value (short name) */
+    monthValue: string
+    /** Current disable state */
+    disabled: boolean
+    /** Current selected state */
+    selected: boolean
+    /** Current month/year is today state */
+    today: boolean
+    /** Current unavailable state */
+    unavailable: boolean
+  }) => any
+}
+</script>
+
+<script setup lang="ts">
+import { Primitive, usePrimitiveElement } from '@/Primitive'
+import { injectMonthPickerRootContext } from './MonthPickerRoot.vue'
+
+const props = withDefaults(defineProps<MonthPickerCellTriggerProps>(), { as: 'div' })
+
+defineSlots<MonthPickerCellTriggerSlot>()
+
+const kbd = useKbd()
+const rootContext = injectMonthPickerRootContext()
+
+const { primitiveElement } = usePrimitiveElement()
+
+const shortMonthValue = computed(() => {
+  rootContext.locale.value
+  return rootContext.formatter.custom(toDate(props.month), { month: 'short' })
+})
+
+const labelText = computed(() => {
+  rootContext.locale.value
+  return rootContext.formatter.custom(toDate(props.month), {
+    month: 'long',
+    year: 'numeric',
+  })
+})
+
+const isUnavailable = computed(() => rootContext.isMonthUnavailable?.(props.month) ?? false)
+
+const isCurrentMonth = computed(() => {
+  const todayDate = toCalendar(today(getLocalTimeZone()), props.month.calendar)
+  return isSameYearMonth(props.month, todayDate)
+})
+
+const isDisabled = computed(() => rootContext.isMonthDisabled(props.month))
+
+const isFocusedMonth = computed(() => {
+  return !rootContext.disabled.value && isSameYearMonth(props.month, rootContext.placeholder.value)
+})
+
+const isSelectedMonth = computed(() => rootContext.isMonthSelected(props.month))
+
+function changeMonth(date: DateValue) {
+  if (rootContext.readonly.value)
+    return
+  if (rootContext.isMonthDisabled(date) || rootContext.isMonthUnavailable?.(date))
+    return
+
+  rootContext.onMonthChange(date)
+}
+
+function handleClick() {
+  if (isDisabled.value)
+    return
+  changeMonth(props.month)
+}
+
+function handleArrowKey(e: KeyboardEvent) {
+  if (isDisabled.value)
+    return
+  e.preventDefault()
+  e.stopPropagation()
+  const parentElement = rootContext.parentElement.value!
+  const sign = rootContext.dir.value === 'rtl' ? -1 : 1
+
+  switch (e.code) {
+    case kbd.ARROW_RIGHT:
+      shiftFocus(props.month, sign)
+      break
+    case kbd.ARROW_LEFT:
+      shiftFocus(props.month, -sign)
+      break
+    case kbd.ARROW_UP:
+      shiftFocus(props.month, -4)
+      break
+    case kbd.ARROW_DOWN:
+      shiftFocus(props.month, 4)
+      break
+    case kbd.PAGE_UP:
+      shiftFocusYear(-1)
+      break
+    case kbd.PAGE_DOWN:
+      shiftFocusYear(1)
+      break
+    case kbd.ENTER:
+    case kbd.SPACE_CODE:
+      changeMonth(props.month)
+  }
+
+  function shiftFocus(currentMonth: DateValue, add: number, depth = 0) {
+    if (depth > 48)
+      return
+    const candidateMonthValue = currentMonth.add({ months: add })
+
+    if ((rootContext.minValue.value && endOfMonth(candidateMonthValue).compare(rootContext.minValue.value) < 0)
+      || (rootContext.maxValue.value && candidateMonthValue.set({ day: 1 }).compare(rootContext.maxValue.value) > 0)) {
+      return
+    }
+
+    const candidateMonth = parentElement.querySelector<HTMLElement>(`[data-value='${candidateMonthValue.toString()}']`)
+
+    if (!candidateMonth) {
+      if (add > 0) {
+        if (rootContext.isNextButtonDisabled())
+          return
+        rootContext.nextPage()
+      }
+      else {
+        if (rootContext.isPrevButtonDisabled())
+          return
+        rootContext.prevPage()
+      }
+      nextTick(() => {
+        shiftFocus(currentMonth, add, depth + 1)
+      })
+      return
+    }
+
+    if (candidateMonth && candidateMonth.hasAttribute('data-disabled'))
+      return shiftFocus(candidateMonthValue, add, depth + 1)
+
+    rootContext.onPlaceholderChange(candidateMonthValue)
+    candidateMonth?.focus()
+  }
+
+  function shiftFocusYear(years: number) {
+    const candidateMonthValue = props.month.add({ years })
+
+    if ((rootContext.minValue.value && endOfMonth(candidateMonthValue).compare(rootContext.minValue.value) < 0)
+      || (rootContext.maxValue.value && candidateMonthValue.set({ day: 1 }).compare(rootContext.maxValue.value) > 0)) {
+      return
+    }
+
+    if (years > 0) {
+      if (rootContext.isNextButtonDisabled())
+        return
+      rootContext.nextPage()
+    }
+    else {
+      if (rootContext.isPrevButtonDisabled())
+        return
+      rootContext.prevPage()
+    }
+
+    nextTick(() => {
+      const candidateMonth = parentElement.querySelector<HTMLElement>(`[data-value='${candidateMonthValue.toString()}']`)
+      if (candidateMonth && !candidateMonth.hasAttribute('data-disabled')) {
+        rootContext.onPlaceholderChange(candidateMonthValue)
+        candidateMonth?.focus()
+      }
+    })
+  }
+}
+</script>
+
+<template>
+  <Primitive
+    ref="primitiveElement"
+    :as="props.as"
+    :as-child="props.asChild"
+    role="button"
+    :aria-label="labelText"
+    data-reka-month-picker-cell-trigger
+    :aria-disabled="isDisabled || isUnavailable ? true : undefined"
+    :data-selected="isSelectedMonth ? true : undefined"
+    :data-value="month.toString()"
+    :data-disabled="isDisabled ? '' : undefined"
+    :data-unavailable="isUnavailable ? '' : undefined"
+    :data-today="isCurrentMonth ? '' : undefined"
+    :data-focused="isFocusedMonth ? '' : undefined"
+    :tabindex="isFocusedMonth ? 0 : isDisabled ? undefined : -1"
+    @click="handleClick"
+    @keydown.up.down.left.right.space.enter.page-up.page-down="handleArrowKey"
+    @keydown.enter.prevent
+  >
+    <slot
+      :month-value="shortMonthValue"
+      :disabled="isDisabled"
+      :today="isCurrentMonth"
+      :selected="isSelectedMonth"
+      :unavailable="isUnavailable"
+    >
+      {{ shortMonthValue }}
+    </slot>
+  </Primitive>
+</template>

package/src/MonthPicker/MonthPickerGrid.vue

@@ -0,0 +1,32 @@
+<script lang="ts">
+import type { PrimitiveProps } from '@/Primitive'
+
+export interface MonthPickerGridProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Primitive } from '@/Primitive'
+import { injectMonthPickerRootContext } from './MonthPickerRoot.vue'
+
+const props = withDefaults(defineProps<MonthPickerGridProps>(), { as: 'table' })
+
+const rootContext = injectMonthPickerRootContext()
+const disabled = computed(() => rootContext.disabled.value ? true : undefined)
+const readonly = computed(() => rootContext.readonly.value ? true : undefined)
+</script>
+
+<template>
+  <Primitive
+    v-bind="props"
+    tabindex="-1"
+    role="grid"
+    :aria-labelledby="rootContext.headingId"
+    :aria-readonly="readonly"
+    :aria-disabled="disabled"
+    :data-readonly="readonly && ''"
+    :data-disabled="disabled && ''"
+  >
+    <slot />
+  </Primitive>
+</template>

package/src/MonthPicker/MonthPickerGridBody.vue

@@ -0,0 +1,17 @@
+<script lang="ts">
+import type { PrimitiveProps } from '@/Primitive'
+
+export interface MonthPickerGridBodyProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '@/Primitive'
+
+const props = withDefaults(defineProps<MonthPickerGridBodyProps>(), { as: 'tbody' })
+</script>
+
+<template>
+  <Primitive v-bind="props">
+    <slot />
+  </Primitive>
+</template>

package/src/MonthPicker/MonthPickerGridRow.vue

@@ -0,0 +1,20 @@
+<script lang="ts">
+import type { PrimitiveProps } from '@/Primitive'
+
+export interface MonthPickerGridRowProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '@/Primitive'
+
+const props = withDefaults(defineProps<MonthPickerGridRowProps>(), { as: 'tr' })
+</script>
+
+<template>
+  <Primitive
+    v-bind="props"
+    role="row"
+  >
+    <slot />
+  </Primitive>
+</template>

package/src/MonthPicker/MonthPickerHeader.vue

@@ -0,0 +1,17 @@
+<script lang="ts">
+import type { PrimitiveProps } from '@/Primitive'
+
+export interface MonthPickerHeaderProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '@/Primitive'
+
+const props = withDefaults(defineProps<MonthPickerHeaderProps>(), { as: 'div' })
+</script>
+
+<template>
+  <Primitive v-bind="props">
+    <slot />
+  </Primitive>
+</template>

package/src/MonthPicker/MonthPickerHeading.vue

@@ -0,0 +1,35 @@
+<script lang="ts">
+import type { PrimitiveProps } from '@/Primitive'
+
+export interface MonthPickerHeadingProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '@/Primitive'
+import { injectMonthPickerRootContext } from './MonthPickerRoot.vue'
+
+const props = withDefaults(defineProps<MonthPickerHeadingProps>(), { as: 'div' })
+
+defineSlots<{
+  default?: (props: {
+    /** Current year heading */
+    headingValue: string
+  }) => any
+}>()
+
+const rootContext = injectMonthPickerRootContext()
+</script>
+
+<template>
+  <Primitive
+    v-bind="props"
+    :id="rootContext.headingId"
+    role="heading"
+    aria-level="2"
+    :data-disabled="rootContext.disabled.value ? '' : undefined"
+  >
+    <slot :heading-value="rootContext.headingValue.value">
+      {{ rootContext.headingValue.value }}
+    </slot>
+  </Primitive>
+</template>

package/src/MonthPicker/MonthPickerNext.vue

@@ -0,0 +1,52 @@
+<script lang="ts">
+import type { DateValue } from '@internationalized/date'
+import type { PrimitiveProps } from '@/Primitive'
+
+export interface MonthPickerNextProps extends PrimitiveProps {
+  /** The function to be used for the next page. Overwrites the `nextPage` function set on the `MonthPickerRoot`. */
+  nextPage?: (placeholder: DateValue) => DateValue
+}
+
+export interface MonthPickerNextSlot {
+  default?: (props: {
+    /** Current disable state */
+    disabled: boolean
+  }) => any
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Primitive } from '@/Primitive'
+import { injectMonthPickerRootContext } from './MonthPickerRoot.vue'
+
+const props = withDefaults(defineProps<MonthPickerNextProps>(), { as: 'button' })
+defineSlots<MonthPickerNextSlot>()
+
+const rootContext = injectMonthPickerRootContext()
+
+const disabled = computed(() => rootContext.disabled.value || rootContext.isNextButtonDisabled(props.nextPage))
+
+function handleClick() {
+  if (disabled.value)
+    return
+  rootContext.nextPage(props.nextPage)
+}
+</script>
+
+<template>
+  <Primitive
+    :as="props.as"
+    :as-child="props.asChild"
+    aria-label="Next year"
+    :type="props.as === 'button' ? 'button' : undefined"
+    :aria-disabled="disabled || undefined"
+    :data-disabled="disabled || undefined"
+    :disabled="disabled"
+    @click="handleClick"
+  >
+    <slot :disabled>
+      Next year
+    </slot>
+  </Primitive>
+</template>

package/src/MonthPicker/MonthPickerPrev.vue

@@ -0,0 +1,52 @@
+<script lang="ts">
+import type { DateValue } from '@internationalized/date'
+import type { PrimitiveProps } from '@/Primitive'
+
+export interface MonthPickerPrevProps extends PrimitiveProps {
+  /** The function to be used for the prev page. Overwrites the `prevPage` function set on the `MonthPickerRoot`. */
+  prevPage?: (placeholder: DateValue) => DateValue
+}
+
+export interface MonthPickerPrevSlot {
+  default?: (props: {
+    /** Current disable state */
+    disabled: boolean
+  }) => any
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Primitive } from '@/Primitive'
+import { injectMonthPickerRootContext } from './MonthPickerRoot.vue'
+
+const props = withDefaults(defineProps<MonthPickerPrevProps>(), { as: 'button' })
+defineSlots<MonthPickerPrevSlot>()
+
+const rootContext = injectMonthPickerRootContext()
+
+const disabled = computed(() => rootContext.disabled.value || rootContext.isPrevButtonDisabled(props.prevPage))
+
+function handleClick() {
+  if (disabled.value)
+    return
+  rootContext.prevPage(props.prevPage)
+}
+</script>
+
+<template>
+  <Primitive
+    aria-label="Previous year"
+    :as="props.as"
+    :as-child="props.asChild"
+    :type="props.as === 'button' ? 'button' : undefined"
+    :aria-disabled="disabled || undefined"
+    :data-disabled="disabled || undefined"
+    :disabled="disabled"
+    @click="handleClick"
+  >
+    <slot :disabled>
+      Prev year
+    </slot>
+  </Primitive>
+</template>