["class"]
classList?: ComponentProps<"div">["classList"]
}
-function DialogRoot(props: DialogProps) {
- let trigger!: HTMLElement
- const [local, others] = splitProps(props, ["trigger", "class", "classList", "children"])
-
- const resetTabIndex = () => {
- trigger.tabIndex = 0
- }
-
- const handleTriggerFocus = (e: FocusEvent & { currentTarget: HTMLElement | null }) => {
- const firstChild = e.currentTarget?.firstElementChild as HTMLElement
- if (!firstChild) return
-
- firstChild.focus()
- trigger.tabIndex = -1
-
- firstChild.addEventListener("focusout", resetTabIndex)
- onCleanup(() => {
- firstChild.removeEventListener("focusout", resetTabIndex)
- })
- }
-
- onMount(() => {
- // @ts-ignore
- document?.activeElement?.blur?.()
- })
-
+export function Dialog(props: DialogProps) {
return (
-
-
-
- {props.trigger}
-
-
-
-
-
-
-
- {local.children}
-
-
-
+
+
+
+
+
+
+ {props.title}
+
+
+ {props.action}
+
+
+
+
+
+
+
+ {props.description}
+
+ {props.children}
+
+
+
)
}
-
-function DialogHeader(props: ComponentProps<"div">) {
- return
-}
-
-function DialogBody(props: ComponentProps<"div">) {
- return
-}
-
-function DialogTitle(props: DialogTitleProps & ComponentProps<"h2">) {
- return
-}
-
-function DialogDescription(props: DialogDescriptionProps & ComponentProps<"p">) {
- return
-}
-
-function DialogCloseButton(props: DialogCloseButtonProps & ComponentProps<"button">) {
- return
-}
-
-export const Dialog = Object.assign(DialogRoot, {
- Header: DialogHeader,
- Title: DialogTitle,
- Description: DialogDescription,
- CloseButton: DialogCloseButton,
- Body: DialogBody,
-})
diff --git a/packages/desktop/src/context/dialog.tsx b/packages/ui/src/context/dialog.tsx
similarity index 70%
rename from packages/desktop/src/context/dialog.tsx
rename to packages/ui/src/context/dialog.tsx
index cc49764fe..af5da06f9 100644
--- a/packages/desktop/src/context/dialog.tsx
+++ b/packages/ui/src/context/dialog.tsx
@@ -1,4 +1,4 @@
-import { createEffect, For, onCleanup, Show, type JSX } from "solid-js"
+import { For, Show, type JSX } from "solid-js"
import { createStore } from "solid-js/store"
import { createSimpleContext } from "@opencode-ai/ui/context"
@@ -14,23 +14,6 @@ export const { use: useDialog, provider: DialogProvider } = createSimpleContext(
}[],
})
- function handleKeyDown(e: KeyboardEvent) {
- if (e.key === "Escape" && store.stack.length > 0) {
- const current = store.stack.at(-1)!
- current.onClose?.()
- setStore("stack", store.stack.slice(0, -1))
- e.preventDefault()
- e.stopPropagation()
- }
- }
-
- createEffect(() => {
- document.addEventListener("keydown", handleKeyDown, true)
- onCleanup(() => {
- document.removeEventListener("keydown", handleKeyDown, true)
- })
- })
-
return {
get stack() {
return store.stack
@@ -59,6 +42,8 @@ export const { use: useDialog, provider: DialogProvider } = createSimpleContext(
},
})
+import { Dialog as Kobalte } from "@kobalte/core/dialog"
+
export function DialogRoot(props: { children?: JSX.Element }) {
const dialog = useDialog()
return (
@@ -69,7 +54,21 @@ export function DialogRoot(props: { children?: JSX.Element }) {
{(item, index) => (
- {typeof item.element === "function" ? item.element() : item.element}
+ {
+ if (!open) {
+ item.onClose?.()
+ dialog.pop()
+ }
+ }}
+ >
+
+
+ {typeof item.element === "function" ? item.element() : item.element}
+
+
)}
diff --git a/packages/ui/src/context/index.ts b/packages/ui/src/context/index.ts
index 3e0f5de74..499cb74d4 100644
--- a/packages/ui/src/context/index.ts
+++ b/packages/ui/src/context/index.ts
@@ -1,3 +1,4 @@
export * from "./helper"
export * from "./data"
export * from "./diff"
+export * from "./dialog"