reka-ui 2.9.9 → 2.10.0

package/src/Drawer/DrawerProvider.vue

@@ -0,0 +1,87 @@
+<script lang="ts">
+import { createContext } from '@/shared'
+
+export interface DrawerVisualState {
+  swipeProgress: number
+  frontmostHeight: number
+}
+
+export interface DrawerVisualStateStore {
+  getSnapshot: () => DrawerVisualState
+  set: (next: Partial<DrawerVisualState>) => void
+  subscribe: (listener: () => void) => () => void
+}
+
+export interface DrawerProviderContext {
+  active: import('vue').Ref<boolean>
+  setDrawerOpen: (id: string, open: boolean) => void
+  removeDrawer: (id: string) => void
+  visualStateStore: DrawerVisualStateStore
+}
+
+export const [injectDrawerProviderContext, provideDrawerProviderContext]
+  = createContext<DrawerProviderContext>('DrawerProvider')
+</script>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+function createVisualStateStore(): DrawerVisualStateStore {
+  let state: DrawerVisualState = { swipeProgress: 0, frontmostHeight: 0 }
+  const listeners = new Set<() => void>()
+  return {
+    getSnapshot: () => state,
+    set(next) {
+      const nextProgress = next.swipeProgress !== undefined
+        ? (Number.isFinite(next.swipeProgress) ? next.swipeProgress : 0)
+        : state.swipeProgress
+      const nextHeight = next.frontmostHeight !== undefined
+        ? (Number.isFinite(next.frontmostHeight) ? next.frontmostHeight : 0)
+        : state.frontmostHeight
+      if (nextProgress === state.swipeProgress && nextHeight === state.frontmostHeight)
+        return
+      state = { swipeProgress: nextProgress, frontmostHeight: nextHeight }
+      listeners.forEach(l => l())
+    },
+    subscribe(listener) {
+      listeners.add(listener)
+      return () => listeners.delete(listener)
+    },
+  }
+}
+
+const openById = ref(new Map<string, boolean>())
+const visualStateStore = createVisualStateStore()
+
+const active = computed(() => {
+  for (const open of openById.value.values()) {
+    if (open)
+      return true
+  }
+  return false
+})
+
+provideDrawerProviderContext({
+  active,
+  setDrawerOpen(id, open) {
+    const prev = openById.value.get(id)
+    if (prev === open)
+      return
+    const next = new Map(openById.value)
+    next.set(id, open)
+    openById.value = next
+  },
+  removeDrawer(id) {
+    if (!openById.value.has(id))
+      return
+    const next = new Map(openById.value)
+    next.delete(id)
+    openById.value = next
+  },
+  visualStateStore,
+})
+</script>
+
+<template>
+  <slot />
+</template>

package/src/Drawer/DrawerRoot.vue

@@ -0,0 +1,244 @@
+<script lang="ts">
+import type { Ref } from 'vue'
+import type {
+  DrawerSnapPoint,
+  NestedSwipeProgressStore,
+  SwipeDirection,
+} from './utils'
+import { createContext, useId } from '@/shared'
+
+export type DrawerModal = boolean | 'trap-focus'
+
+export type DrawerOpenChangeReason
+  = | 'swipe'
+    | 'escape-key'
+    | 'outside-press'
+    | 'click'
+    | 'cancel'
+    | 'trigger-press'
+    | 'close-press'
+
+export interface DrawerOpenChangeDetails {
+  reason?: DrawerOpenChangeReason
+}
+
+export interface DrawerRootProps {
+  /** v-model:open */
+  open?: boolean
+  defaultOpen?: boolean
+  /**
+   * Modality of the drawer.
+   * - `true` (default): modal with focus trap, scroll lock, and outside-press dismiss
+   * - `'trap-focus'`: traps focus but allows outside pointer events (non-modal side panels)
+   * - `false`: non-modal
+   */
+  modal?: DrawerModal
+  /** Direction to swipe to dismiss. @default 'down' */
+  swipeDirection?: SwipeDirection
+  /** Preset snap positions (fractions 0-1, pixels >1, or '148px'/'30rem' strings) */
+  snapPoints?: DrawerSnapPoint[]
+  /** v-model:snapPoint */
+  snapPoint?: DrawerSnapPoint | null
+  defaultSnapPoint?: DrawerSnapPoint | null
+  /**
+   * When true, snaps to the next sequential snap point (one step at a time).
+   * When false, snaps to the nearest snap point by distance.
+   * @default false
+   */
+  snapToSequentialPoints?: boolean
+}
+
+export type DrawerRootEmits = {
+  'update:open': [value: boolean, details?: DrawerOpenChangeDetails]
+  'update:openComplete': [value: boolean]
+  'update:snapPoint': [value: DrawerSnapPoint | null]
+}
+
+export interface DrawerRootContext {
+  open: Readonly<Ref<boolean>>
+  modal: Ref<DrawerModal>
+  swipeDirection: Ref<SwipeDirection>
+  snapPoints: Ref<DrawerSnapPoint[] | undefined>
+  activeSnapPoint: Ref<DrawerSnapPoint | null | undefined>
+  snapToSequentialPoints: Ref<boolean>
+  popupHeight: Ref<number>
+  frontmostHeight: Ref<number>
+  hasNestedDrawer: Ref<boolean>
+  nestedOpenDrawerCount: Ref<number>
+  nestedSwiping: Ref<boolean>
+  isSwiping: Ref<boolean>
+  nestedSwipeProgressStore: NestedSwipeProgressStore
+  onOpenChange: (value: boolean, reason?: DrawerOpenChangeReason) => void
+  notifyOpenComplete: (value: boolean) => void
+  setActiveSnapPoint: (point: DrawerSnapPoint | null) => void
+  onPopupHeightChange: (height: number) => void
+  onNestedFrontmostHeightChange: (height: number) => void
+  onNestedDrawerPresenceChange: (present: boolean) => void
+  onNestedSwipingChange: (swiping: boolean) => void
+  onNestedSwipeProgressChange: (progress: number) => void
+  onSwipingChange: (swiping: boolean) => void
+  notifyParentFrontmostHeight?: (height: number) => void
+  notifyParentSwipingChange?: (swiping: boolean) => void
+  notifyParentSwipeProgressChange?: (progress: number) => void
+  notifyParentHasNestedDrawer?: (present: boolean) => void
+  triggerElement: Ref<HTMLElement | undefined>
+  contentElement: Ref<HTMLElement | undefined>
+  contentId: string
+  titleId: string
+  descriptionId: string
+}
+
+export const [injectDrawerRootContext, provideDrawerRootContext]
+  = createContext<DrawerRootContext>('DrawerRoot')
+</script>
+
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+import { computed, onUnmounted, ref, toRefs, watch } from 'vue'
+import { injectDrawerProviderContext } from './DrawerProvider.vue'
+import { createNestedSwipeProgressStore } from './utils'
+
+const props = withDefaults(defineProps<DrawerRootProps>(), {
+  open: undefined,
+  defaultOpen: false,
+  modal: true,
+  swipeDirection: 'down',
+  snapPoints: undefined,
+  snapPoint: undefined,
+  defaultSnapPoint: undefined,
+  snapToSequentialPoints: false,
+})
+const emit = defineEmits<DrawerRootEmits>()
+
+defineSlots<{
+  default?: (props: { open: boolean, close: () => void }) => any
+}>()
+
+// Manual open state management — we need to pass optional details on emit
+const uncontrolledOpen = ref(props.defaultOpen)
+const open = computed<boolean>({
+  get: () => props.open ?? uncontrolledOpen.value,
+  set: (value) => { uncontrolledOpen.value = value },
+})
+
+const activeSnapPoint = useVModel(props, 'snapPoint', emit, {
+  defaultValue: props.defaultSnapPoint ?? null,
+  passive: (props.snapPoint === undefined) as false,
+  eventName: 'update:snapPoint',
+}) as Ref<DrawerSnapPoint | null | undefined>
+
+const { modal, swipeDirection, snapPoints, snapToSequentialPoints } = toRefs(props)
+
+const triggerElement = ref<HTMLElement>()
+const contentElement = ref<HTMLElement>()
+const popupHeight = ref(0)
+const frontmostHeight = ref(0)
+const hasNestedDrawer = ref(false)
+const nestedOpenDrawerCount = ref(0)
+const nestedSwiping = ref(false)
+const isSwiping = ref(false)
+const nestedSwipeProgressStore = createNestedSwipeProgressStore()
+
+// Optional parent context for nested drawer support
+const parentContext = injectDrawerRootContext(null)
+
+// Optional provider context for drawer state tracking
+const providerContext = injectDrawerProviderContext(null)
+
+const contentId = useId(undefined, 'reka-drawer-content')
+const titleId = useId(undefined, 'reka-drawer-title')
+const descriptionId = useId(undefined, 'reka-drawer-description')
+
+provideDrawerRootContext({
+  open,
+  modal,
+  swipeDirection,
+  snapPoints,
+  activeSnapPoint,
+  snapToSequentialPoints,
+  popupHeight,
+  frontmostHeight,
+  hasNestedDrawer,
+  nestedOpenDrawerCount,
+  nestedSwiping,
+  isSwiping,
+  nestedSwipeProgressStore,
+  onOpenChange(value, reason) {
+    if (open.value === value)
+      return
+    const details: DrawerOpenChangeDetails | undefined = reason ? { reason } : undefined
+    uncontrolledOpen.value = value
+    emit('update:open', value, details)
+  },
+  notifyOpenComplete(value) {
+    emit('update:openComplete', value)
+  },
+  setActiveSnapPoint(point) { activeSnapPoint.value = point },
+  onPopupHeightChange(h) {
+    popupHeight.value = h
+    providerContext?.visualStateStore.set({ frontmostHeight: h })
+  },
+  onNestedFrontmostHeightChange(h) { frontmostHeight.value = h },
+  onNestedDrawerPresenceChange(present) {
+    if (present)
+      nestedOpenDrawerCount.value++
+    else
+      nestedOpenDrawerCount.value = Math.max(0, nestedOpenDrawerCount.value - 1)
+    hasNestedDrawer.value = nestedOpenDrawerCount.value > 0
+    parentContext?.notifyParentHasNestedDrawer?.(present)
+  },
+  onNestedSwipingChange(swiping) {
+    nestedSwiping.value = swiping
+    parentContext?.notifyParentSwipingChange?.(swiping)
+  },
+  onNestedSwipeProgressChange(progress) {
+    nestedSwipeProgressStore.set(progress)
+    parentContext?.notifyParentSwipeProgressChange?.(progress)
+    providerContext?.visualStateStore.set({ swipeProgress: progress })
+  },
+  onSwipingChange(swiping) {
+    isSwiping.value = swiping
+  },
+  notifyParentFrontmostHeight: parentContext?.onNestedFrontmostHeightChange,
+  notifyParentSwipingChange: parentContext?.onNestedSwipingChange,
+  notifyParentSwipeProgressChange: parentContext?.onNestedSwipeProgressChange,
+  notifyParentHasNestedDrawer: parentContext?.onNestedDrawerPresenceChange,
+  triggerElement,
+  contentElement,
+  contentId,
+  titleId,
+  descriptionId,
+})
+
+function handleClose() {
+  if (!open.value)
+    return
+  uncontrolledOpen.value = false
+  emit('update:open', false, { reason: 'close-press' })
+}
+
+// Sync open state with DrawerProvider
+watch(open, (isOpen) => {
+  if (isOpen) {
+    providerContext?.setDrawerOpen(contentId, true)
+  }
+  else {
+    providerContext?.setDrawerOpen(contentId, false)
+  }
+}, { immediate: true })
+
+// `update:openComplete` is emitted by DrawerContentImpl after the popup's
+// enter/exit transition actually finishes (via transitionend/animationend on
+// the popup element). DrawerRoot just exposes the notify hook through context.
+
+onUnmounted(() => {
+  providerContext?.removeDrawer(contentId)
+})
+</script>
+
+<template>
+  <slot
+    :open="open"
+    :close="handleClose"
+  />
+</template>

package/src/Drawer/DrawerSwipeArea.vue

@@ -0,0 +1,73 @@
+<script lang="ts">
+import type { SwipeDirection } from './utils'
+import type { PrimitiveProps } from '@/Primitive'
+
+export interface DrawerSwipeAreaProps extends PrimitiveProps {
+  /** Override the open swipe direction (defaults to opposite of Root's swipeDirection). */
+  swipeDirection?: SwipeDirection
+  /** Disable swipe-to-open. */
+  disabled?: boolean
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Primitive } from '@/Primitive'
+import { useForwardExpose } from '@/shared'
+import { useSwipeDismiss } from './composables/useSwipeDismiss'
+import { injectDrawerRootContext } from './DrawerRoot.vue'
+import { DRAWER_CSS_VARS } from './utils'
+
+const props = withDefaults(defineProps<DrawerSwipeAreaProps>(), {
+  as: 'div',
+  disabled: false,
+})
+const { forwardRef, currentElement } = useForwardExpose()
+const rootContext = injectDrawerRootContext()
+
+const OPPOSITE: Record<string, string> = {
+  up: 'down',
+  down: 'up',
+  left: 'right',
+  right: 'left',
+}
+
+const openDirection = computed<SwipeDirection>(() => {
+  if (props.swipeDirection)
+    return props.swipeDirection
+  return (OPPOSITE[rootContext.swipeDirection.value] ?? 'up') as SwipeDirection
+})
+
+const enabled = computed(() => !props.disabled && !rootContext.open.value)
+
+// Keep the directions array reactive — `[openDirection.value]` would capture
+// the initial value only and ignore prop/state updates.
+const directions = computed<SwipeDirection[]>(() => [openDirection.value])
+
+useSwipeDismiss({
+  enabled,
+  elementRef: currentElement,
+  directions,
+  movementCssVars: {
+    x: DRAWER_CSS_VARS.swipeMovementX,
+    y: DRAWER_CSS_VARS.swipeMovementY,
+  },
+  onDismiss() {
+    rootContext.onOpenChange(true, 'swipe')
+  },
+  onSwipingChange(swiping) {
+    rootContext.onNestedSwipingChange(swiping)
+  },
+})
+</script>
+
+<template>
+  <Primitive
+    v-bind="props"
+    :ref="forwardRef"
+    :data-state="rootContext.open.value ? 'open' : 'closed'"
+    :data-swipe-direction="openDirection"
+  >
+    <slot />
+  </Primitive>
+</template>

package/src/Drawer/DrawerTitle.vue

@@ -0,0 +1,24 @@
+<script lang="ts">
+import type { PrimitiveProps } from '@/Primitive'
+
+export interface DrawerTitleProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '@/Primitive'
+import { useForwardExpose } from '@/shared'
+import { injectDrawerRootContext } from './DrawerRoot.vue'
+
+const props = withDefaults(defineProps<DrawerTitleProps>(), { as: 'h2' })
+const rootContext = injectDrawerRootContext()
+useForwardExpose()
+</script>
+
+<template>
+  <Primitive
+    v-bind="props"
+    :id="rootContext.titleId"
+  >
+    <slot />
+  </Primitive>
+</template>

package/src/Drawer/DrawerTrigger.vue

@@ -0,0 +1,44 @@
+<script lang="ts">
+import type { PrimitiveProps } from '@/Primitive'
+
+export interface DrawerTriggerProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { onUnmounted, watch } from 'vue'
+import { Primitive } from '@/Primitive'
+import { useForwardExpose } from '@/shared'
+import { injectDrawerRootContext } from './DrawerRoot.vue'
+
+const props = withDefaults(defineProps<DrawerTriggerProps>(), { as: 'button' })
+const rootContext = injectDrawerRootContext()
+const { forwardRef, currentElement } = useForwardExpose()
+
+// Keep triggerElement in sync with the rendered element — useForwardExpose's
+// currentElement is a reactive computed ref, and v-if / conditional rendering
+// can swap the underlying DOM node, so a one-shot onMounted assignment would
+// go stale and break finalFocus restoration in DrawerContent.
+watch(currentElement, (el) => {
+  rootContext.triggerElement.value = el
+}, { immediate: true })
+
+onUnmounted(() => {
+  if (rootContext.triggerElement.value === currentElement.value)
+    rootContext.triggerElement.value = undefined
+})
+</script>
+
+<template>
+  <Primitive
+    v-bind="props"
+    :ref="forwardRef"
+    :type="as === 'button' ? 'button' : undefined"
+    aria-haspopup="dialog"
+    :aria-expanded="rootContext.open.value"
+    :aria-controls="rootContext.open.value ? rootContext.contentId : undefined"
+    :data-state="rootContext.open.value ? 'open' : 'closed'"
+    @click="rootContext.onOpenChange(true, 'trigger-press')"
+  >
+    <slot />
+  </Primitive>
+</template>

package/src/Drawer/DrawerViewport.vue

@@ -0,0 +1,34 @@
+<script lang="ts">
+import type { PrimitiveProps } from '@/Primitive'
+
+export interface DrawerViewportProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '@/Primitive'
+import { useForwardExpose } from '@/shared'
+import { injectDrawerRootContext } from './DrawerRoot.vue'
+
+/**
+ * Optional scrollable viewport wrapper. Mirrors Base UI's `Drawer.Viewport`.
+ *
+ * In Base UI the viewport owns the gesture state machine; in this port the
+ * gesture logic lives on `DrawerContent` / `DrawerContentImpl` directly, so
+ * this component is currently a passthrough that carries the `data-drawer-viewport`
+ * attribute for downstream selectors. It exists primarily for API parity.
+ */
+const props = withDefaults(defineProps<DrawerViewportProps>(), { as: 'div' })
+const { forwardRef } = useForwardExpose()
+const rootContext = injectDrawerRootContext()
+</script>
+
+<template>
+  <Primitive
+    v-bind="props"
+    :ref="forwardRef"
+    data-drawer-viewport=""
+    :data-state="rootContext.open.value ? 'open' : 'closed'"
+  >
+    <slot />
+  </Primitive>
+</template>