reka-ui 2.8.0 → 2.9.0

package/src/DropdownMenu/DropdownMenuFilter.vue

@@ -0,0 +1,119 @@
+<script lang="ts">
+import type { PrimitiveProps } from '@/Primitive'
+import { useVModel } from '@vueuse/core'
+import { computed, onMounted, onUnmounted, ref, watch, watchSyncEffect } from 'vue'
+import { injectMenuContentContext } from '@/Menu/MenuContentImpl.vue'
+import { injectMenuRootContext } from '@/Menu/MenuRoot.vue'
+import { injectMenuSubContext } from '@/Menu/MenuSub.vue'
+import { Primitive, usePrimitiveElement } from '@/Primitive'
+
+export interface DropdownMenuFilterProps extends PrimitiveProps {
+  /** The controlled value of the filter. Can be binded with v-model. */
+  modelValue?: string
+  /** Focus on element when mounted. */
+  autoFocus?: boolean
+  /** When `true`, prevents the user from interacting with item */
+  disabled?: boolean
+}
+
+export type DropdownMenuFilterEmits = {
+  'update:modelValue': [string]
+}
+</script>
+
+<script setup lang="ts">
+const props = withDefaults(defineProps<DropdownMenuFilterProps>(), {
+  as: 'input',
+})
+const emits = defineEmits<DropdownMenuFilterEmits>()
+
+defineSlots<{
+  default?: (props: {
+    /** Current input values */
+    modelValue: typeof modelValue.value
+  }) => any
+}>()
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+  defaultValue: '',
+  passive: (props.modelValue === undefined) as false,
+})
+
+const rootContext = injectMenuRootContext()
+const contentContext = injectMenuContentContext()
+const subContext = injectMenuSubContext(null)
+
+// Keep searchRef in sync with modelValue changes
+watch(modelValue, (v) => { contentContext.searchRef.value = v ?? '' }, { immediate: true })
+
+const { primitiveElement, currentElement } = usePrimitiveElement()
+const disabled = computed(() => props.disabled || false)
+
+const activedescendant = ref<string | undefined>()
+watchSyncEffect(() => activedescendant.value = contentContext.highlightedElement.value?.id)
+
+onMounted(() => {
+  contentContext.onFilterElementChange(currentElement.value)
+  setTimeout(() => {
+    // make sure all DOM was flush then only capture the focus
+    if (props.autoFocus) {
+      const isSubmenu = !!subContext
+      if (!isSubmenu || rootContext.isUsingKeyboardRef.value)
+        currentElement.value?.focus()
+    }
+  }, 1)
+})
+
+onUnmounted(() => {
+  contentContext.onFilterElementChange(undefined)
+  // Clean up search when unmounting
+  contentContext.searchRef.value = ''
+})
+
+function handleInput(event: InputEvent) {
+  if (disabled.value)
+    return
+  const target = event.target as HTMLInputElement
+  modelValue.value = target.value
+  // Update the menu's search ref to help with filtering
+  contentContext.searchRef.value = target.value
+}
+
+function handleKeyDown(event: KeyboardEvent) {
+  if (disabled.value)
+    return
+  if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {
+    event.preventDefault()
+    contentContext.onKeydownNavigation(event)
+  }
+  else if (event.key === 'Enter') {
+    event.preventDefault()
+    contentContext.onKeydownEnter(event)
+  }
+  // Prevent Escape from bubbling to avoid closing the menu when clearing the filter
+  else if (event.key === 'Escape' && modelValue.value) {
+    event.stopPropagation()
+    modelValue.value = ''
+    contentContext.searchRef.value = ''
+  }
+}
+</script>
+
+<template>
+  <Primitive
+    ref="primitiveElement"
+    :as="as"
+    :as-child="asChild"
+    :value="modelValue"
+    :disabled="disabled ? '' : undefined"
+    :data-disabled="disabled ? '' : undefined"
+    :aria-disabled="disabled ? true : undefined"
+    :aria-activedescendant="activedescendant"
+    type="text"
+    role="searchbox"
+    @input="handleInput"
+    @keydown="handleKeyDown"
+  >
+    <slot :model-value="modelValue" />
+  </Primitive>
+</template>

package/src/DropdownMenu/index.ts

@@ -12,6 +12,11 @@ export {
   type DropdownMenuContentEmits,
   type DropdownMenuContentProps,
 } from './DropdownMenuContent.vue'
+export {
+  default as DropdownMenuFilter,
+  type DropdownMenuFilterEmits,
+  type DropdownMenuFilterProps,
+} from './DropdownMenuFilter.vue'
 export {
   default as DropdownMenuGroup,
   type DropdownMenuGroupProps,

package/src/Menu/MenuContentImpl.vue

@@ -27,6 +27,12 @@ export interface MenuContentContext {
   onItemLeave: (event: PointerEvent) => void
   onTriggerLeave: (event: PointerEvent) => boolean
   searchRef: Ref<string>
+  highlightedElement: Ref<HTMLElement | undefined>
+  onKeydownNavigation: (event: KeyboardEvent) => void
+  onKeydownEnter: (event: KeyboardEvent) => void
+  filterElement: Ref<HTMLElement | undefined>
+  onFilterElementChange: (el: HTMLElement | undefined) => void
+  activeSubmenuContext: Ref<{ onOpenChange: (open: boolean) => void, trigger: Ref<HTMLElement | undefined> } | undefined>
   pointerGraceTimerRef: Ref<number>
   onPointerGraceIntentChange: (intent: GraceIntent | null) => void
 }
@@ -132,6 +138,43 @@ const rovingFocusGroupRef = ref<InstanceType<typeof RovingFocusGroup>>()
 const { forwardRef, currentElement: contentElement } = useForwardExpose()
 const { handleTypeaheadSearch } = useTypeahead()
 
+const highlightedElement = ref<HTMLElement>()
+
+function onKeydownNavigation(event: KeyboardEvent) {
+  const el = useArrowNavigation(
+    event,
+    (highlightedElement.value || getActiveElement()) as HTMLElement,
+    contentElement.value,
+    {
+      loop: loop.value,
+      arrowKeyOptions: 'vertical',
+      dir: rootContext?.dir.value,
+      focus: false,
+      attributeName: '[data-reka-collection-item]:not([data-disabled])',
+    },
+  )
+  if (el) {
+    highlightedElement.value = el
+    el.scrollIntoView({ block: 'nearest' })
+  }
+}
+
+function onKeydownEnter() {
+  if (highlightedElement.value) {
+    highlightedElement.value.click()
+  }
+}
+
+const filterElement = ref<HTMLElement>()
+const activeSubmenuContext = ref<{ onOpenChange: (open: boolean) => void, trigger: Ref<HTMLElement | undefined> }>()
+
+watch(highlightedElement, (el) => {
+  if (activeSubmenuContext.value && (el === undefined || el !== activeSubmenuContext.value.trigger.value)) {
+    activeSubmenuContext.value.onOpenChange(false)
+    activeSubmenuContext.value = undefined
+  }
+})
+
 watch(contentElement, (el) => {
   menuContext!.onContentChange(el)
 })
@@ -169,6 +212,7 @@ function handleKeyDown(event: KeyboardEvent) {
   const target = event.target as HTMLElement
   const isKeyDownInside
     = target.closest('[data-reka-menu-content]') === event.currentTarget
+  const isKeyDownInTextField = ['input', 'textarea'].includes(target.tagName.toLowerCase())
   const isModifierKey = event.ctrlKey || event.altKey || event.metaKey
   const isCharacterKey = event.key.length === 1
 
@@ -197,7 +241,7 @@ function handleKeyDown(event: KeyboardEvent) {
     // menus should not be navigated using tab key so we prevent it
     if (event.key === 'Tab')
       event.preventDefault()
-    if (!isModifierKey && isCharacterKey)
+    if (!isModifierKey && isCharacterKey && !isKeyDownInTextField)
       handleTypeaheadSearch(event.key, collectionItems)
   }
 
@@ -240,6 +284,15 @@ function handlePointerMove(event: PointerEvent) {
   }
 }
 
+function handlePointerEnter(event: PointerEvent) {
+  if (!isMouseEvent(event))
+    return
+  // When hovering over a menu content (main or sub), focus its filter element if it exists
+  if (filterElement.value) {
+    filterElement.value.focus()
+  }
+}
+
 provideMenuContentContext({
   onItemEnter: (event) => {
     // event.preventDefault() we can't prevent pointerMove event
@@ -251,7 +304,11 @@ provideMenuContentContext({
   onItemLeave: (event) => {
     if (isPointerMovingToSubmenu(event))
       return
-    contentElement.value?.focus()
+
+    const isInputFocused = ['INPUT', 'TEXTAREA'].includes(getActiveElement()?.tagName || '')
+    if (!isInputFocused)
+      contentElement.value?.focus()
+
     currentItemId.value = null
   },
   onTriggerLeave: (event) => {
@@ -262,6 +319,14 @@ provideMenuContentContext({
       return false
   },
   searchRef,
+  highlightedElement,
+  onKeydownNavigation,
+  onKeydownEnter,
+  filterElement,
+  onFilterElementChange: (el) => {
+    filterElement.value = el
+  },
+  activeSubmenuContext,
   pointerGraceTimerRef,
   onPointerGraceIntentChange: (intent) => {
     pointerGraceIntentRef.value = intent
@@ -324,6 +389,7 @@ provideMenuContentContext({
           @keydown="handleKeyDown"
           @blur="handleBlur"
           @pointermove="handlePointerMove"
+          @pointerenter="handlePointerEnter"
         >
           <slot />
         </PopperContent>

package/src/Menu/MenuItemImpl.vue

@@ -13,12 +13,12 @@ export interface MenuItemImplProps extends PrimitiveProps {
 </script>
 
 <script setup lang="ts">
-import { nextTick, ref } from 'vue'
+import { computed, nextTick, ref } from 'vue'
 import { useCollection } from '@/Collection'
 import {
   Primitive,
 } from '@/Primitive'
-import { useForwardExpose } from '@/shared'
+import { getActiveElement, useForwardExpose } from '@/shared'
 import { injectMenuContentContext } from './MenuContentImpl.vue'
 import { isMouseEvent } from './utils'
 
@@ -29,10 +29,11 @@ defineOptions({
 const props = defineProps<MenuItemImplProps>()
 
 const contentContext = injectMenuContentContext()
-const { forwardRef } = useForwardExpose()
+const { forwardRef, currentElement } = useForwardExpose()
 const { CollectionItem } = useCollection()
 
 const isFocused = ref(false)
+const isHighlighted = computed(() => isFocused.value || (contentContext.highlightedElement.value === currentElement.value))
 
 async function handlePointerMove(event: PointerEvent) {
   if (event.defaultPrevented)
@@ -46,8 +47,11 @@ async function handlePointerMove(event: PointerEvent) {
   else {
     const defaultPrevented = contentContext.onItemEnter(event)
     if (!defaultPrevented) {
-      const item = event.currentTarget;
-      (item as HTMLElement)?.focus({ preventScroll: true })
+      const item = event.currentTarget as HTMLElement
+      contentContext.highlightedElement.value = item
+      const isInputFocused = ['INPUT', 'TEXTAREA'].includes(getActiveElement()?.tagName || '')
+      if (!isInputFocused)
+        item.focus({ preventScroll: true })
     }
   }
 }
@@ -74,7 +78,7 @@ async function handlePointerLeave(event: PointerEvent) {
       :as-child="asChild"
       :aria-disabled="disabled || undefined"
       :data-disabled="disabled ? '' : undefined"
-      :data-highlighted="isFocused ? '' : undefined"
+      :data-highlighted="isHighlighted ? '' : undefined"
       @pointermove="handlePointerMove"
       @pointerleave="handlePointerLeave"
       @focus="
@@ -82,6 +86,7 @@ async function handlePointerLeave(event: PointerEvent) {
           await nextTick();
           if (event.defaultPrevented || disabled) return;
           isFocused = true;
+          contentContext.highlightedElement.value = event.currentTarget as HTMLElement
         }
       "
       @blur="

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>