From e7d96cc3ba438f9e89d1b12fba9230db84445ac6 Mon Sep 17 00:00:00 2001
From: Matthew L McPeak <m.mcpeak98@icloud.com>
Date: Mon, 13 Jul 2026 18:15:30 -0400
Subject: [PATCH] refactor: rewrite DialogContent/DialogScrollContent without
 reka-ui

Uses Teleport + Transition + useFocusTrap + useDismissableLayer +
useScrollLock. The Dialog family no longer imports reka-ui at all.
---
 .../components/ui/dialog/DialogContent.vue    |  92 +++++++++-------
 .../ui/dialog/DialogScrollContent.vue         | 104 ++++++++++--------
 2 files changed, 107 insertions(+), 89 deletions(-)

diff --git a/packages/library/src/components/ui/dialog/DialogContent.vue b/packages/library/src/components/ui/dialog/DialogContent.vue
index 5438b1d..6e824dd 100644
--- a/packages/library/src/components/ui/dialog/DialogContent.vue
+++ b/packages/library/src/components/ui/dialog/DialogContent.vue
@@ -1,53 +1,63 @@
 <script setup lang="ts">
-import { XIcon } from '@lucide/vue';
-
-import type { DialogContentEmits, DialogContentProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  DialogClose,
-  DialogContent,
-  DialogPortal,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
+import { XIcon } from '@lucide/vue'
+import type { HTMLAttributes } from 'vue'
+import { inject, ref, watch } from 'vue'
+import { useScrollLock } from '@vueuse/core'
+import { cn } from '@/lib/utils'
 import { Button } from '@/components/ui/button'
-import DialogOverlay from "./DialogOverlay.vue"
+import { useFocusTrap } from '@/lib/use-focus-trap'
+import { useDismissableLayer } from '@/lib/use-dismissable-layer'
+import { DialogContextKey } from './context'
+import DialogOverlay from './DialogOverlay.vue'
+import DialogClose from './DialogClose.vue'
 
-defineOptions({
-  inheritAttrs: false,
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<{ class?: HTMLAttributes['class'], showCloseButton?: boolean }>(),
+  { showCloseButton: true },
+)
+
+const context = inject(DialogContextKey)!
+const contentRef = ref<HTMLElement | null>(null)
+
+useFocusTrap(contentRef, context.open)
+useDismissableLayer(contentRef, context.open, {
+  onDismiss: () => { context.open.value = false },
 })
 
-const props = withDefaults(defineProps<DialogContentProps & { class?: HTMLAttributes["class"], showCloseButton?: boolean }>(), {
-  showCloseButton: true,
-})
-const emits = defineEmits<DialogContentEmits>()
-
-const delegatedProps = reactiveOmit(props, "class")
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const isLocked = useScrollLock(document.body)
+watch(context.open, (value) => { isLocked.value = value }, { immediate: true })
 </script>
 
 <template>
-  <DialogPortal>
+  <Teleport to="body">
     <DialogOverlay />
-    <DialogContent
-      data-slot="dialog-content"
-      v-bind="{ ...$attrs, ...forwarded }"
-      :class="cn('bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 border border-border grid max-w-[calc(100%-2rem)] gap-4 rounded-xl p-4 text-sm shadow-lg duration-100 sm:max-w-sm fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none', props.class)"
+    <Transition
+      enter-active-class="animate-in fade-in-0 zoom-in-95 duration-100"
+      leave-active-class="animate-out fade-out-0 zoom-out-95 duration-100"
     >
-      <slot />
-
-      <DialogClose
-        v-if="showCloseButton"
-        data-slot="dialog-close"
-        as-child
+      <div
+        v-if="context.open.value"
+        ref="contentRef"
+        data-slot="dialog-content"
+        role="dialog"
+        aria-modal="true"
+        :aria-labelledby="context.titleId"
+        :aria-describedby="context.descriptionId"
+        tabindex="-1"
+        v-bind="$attrs"
+        :class="cn('bg-popover text-popover-foreground border border-border grid max-w-[calc(100%-2rem)] gap-4 rounded-xl p-4 text-sm shadow-lg sm:max-w-sm fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none', props.class)"
       >
-        <Button variant="secondary" class="absolute top-2 right-2 size-7 bg-transparent hover:bg-black/10" size="icon">
-          <XIcon class="size-3.5" />
-          <span class="sr-only">Close</span>
-        </Button>
-      </DialogClose>
-    </DialogContent>
-  </DialogPortal>
+        <slot />
+
+        <DialogClose v-if="showCloseButton" as-child>
+          <Button variant="secondary" class="absolute top-2 right-2 size-7 bg-transparent hover:bg-black/10" size="icon">
+            <XIcon class="size-3.5" />
+            <span class="sr-only">Close</span>
+          </Button>
+        </DialogClose>
+      </div>
+    </Transition>
+  </Teleport>
 </template>
diff --git a/packages/library/src/components/ui/dialog/DialogScrollContent.vue b/packages/library/src/components/ui/dialog/DialogScrollContent.vue
index 65683fc..8acafd1 100644
--- a/packages/library/src/components/ui/dialog/DialogScrollContent.vue
+++ b/packages/library/src/components/ui/dialog/DialogScrollContent.vue
@@ -1,60 +1,68 @@
 <script setup lang="ts">
-import { XIcon } from '@lucide/vue';
+import { XIcon } from '@lucide/vue'
+import type { HTMLAttributes } from 'vue'
+import { inject, ref, watch } from 'vue'
+import { useScrollLock } from '@vueuse/core'
+import { cn } from '@/lib/utils'
+import { useFocusTrap } from '@/lib/use-focus-trap'
+import { useDismissableLayer } from '@/lib/use-dismissable-layer'
+import { DialogContextKey } from './context'
+import DialogClose from './DialogClose.vue'
 
-import type { DialogContentEmits, DialogContentProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  DialogClose,
-  DialogContent,
-  DialogOverlay,
-  DialogPortal,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
+defineOptions({ inheritAttrs: false })
 
-defineOptions({
-  inheritAttrs: false,
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
+
+const context = inject(DialogContextKey)!
+const contentRef = ref<HTMLElement | null>(null)
+
+useFocusTrap(contentRef, context.open)
+useDismissableLayer(contentRef, context.open, {
+  onDismiss: () => { context.open.value = false },
+  onPointerDownOutside: (event) => {
+    const target = event.target as HTMLElement
+    if (event.offsetX > target.clientWidth || event.offsetY > target.clientHeight) {
+      event.preventDefault()
+    }
+  },
 })
 
-const props = defineProps<DialogContentProps & { class?: HTMLAttributes["class"] }>()
-const emits = defineEmits<DialogContentEmits>()
-
-const delegatedProps = reactiveOmit(props, "class")
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const isLocked = useScrollLock(document.body)
+watch(context.open, (value) => { isLocked.value = value }, { immediate: true })
 </script>
 
 <template>
-  <DialogPortal>
-    <DialogOverlay
-      class="fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+  <Teleport to="body">
+    <Transition
+      enter-active-class="animate-in fade-in-0 duration-100"
+      leave-active-class="animate-out fade-out-0 duration-100"
     >
-      <DialogContent
-        :class="
-          cn(
-            'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
-            props.class,
-          )
-        "
-        v-bind="{ ...$attrs, ...forwarded }"
-        @pointer-down-outside="(event) => {
-          const originalEvent = event.detail.originalEvent;
-          const target = originalEvent.target as HTMLElement;
-          if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {
-            event.preventDefault();
-          }
-        }"
+      <div
+        v-if="context.open.value"
+        class="fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80"
       >
-        <slot />
-
-        <DialogClose
-          class="absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary"
+        <div
+          ref="contentRef"
+          data-slot="dialog-content"
+          role="dialog"
+          aria-modal="true"
+          :aria-labelledby="context.titleId"
+          :aria-describedby="context.descriptionId"
+          tabindex="-1"
+          v-bind="$attrs"
+          :class="cn(
+            'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg sm:rounded-lg md:w-full',
+            props.class,
+          )"
         >
-          <XIcon class="w-4 h-4" />
-          <span class="sr-only">Close</span>
-        </DialogClose>
-      </DialogContent>
-    </DialogOverlay>
-  </DialogPortal>
+          <slot />
+
+          <DialogClose class="absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary">
+            <XIcon class="w-4 h-4" />
+            <span class="sr-only">Close</span>
+          </DialogClose>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
 </template>