1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
|
import { Popover as Kobalte } from "@kobalte/core/popover"
import { ComponentProps, JSXElement, ParentProps, Show, createEffect, splitProps, ValidComponent } from "solid-js"
import { createStore } from "solid-js/store"
import { makeEventListener } from "@solid-primitives/event-listener"
import { useI18n } from "../context/i18n"
import { IconButton } from "./icon-button"
export interface PopoverProps<T extends ValidComponent = "div">
extends ParentProps,
Omit<ComponentProps<typeof Kobalte>, "children"> {
trigger?: JSXElement
triggerAs?: T
triggerProps?: ComponentProps<T>
title?: JSXElement
description?: JSXElement
class?: ComponentProps<"div">["class"]
classList?: ComponentProps<"div">["classList"]
style?: ComponentProps<"div">["style"]
portal?: boolean
}
export function Popover<T extends ValidComponent = "div">(props: PopoverProps<T>) {
const i18n = useI18n()
const [local, rest] = splitProps(props, [
"trigger",
"triggerAs",
"triggerProps",
"title",
"description",
"class",
"classList",
"style",
"children",
"portal",
"open",
"defaultOpen",
"onOpenChange",
"modal",
])
const [state, setState] = createStore({
contentRef: undefined as HTMLElement | undefined,
triggerRef: undefined as HTMLElement | undefined,
dismiss: null as "escape" | "outside" | null,
uncontrolledOpen: local.defaultOpen ?? false,
})
const controlled = () => local.open !== undefined
const opened = () => {
if (controlled()) return local.open ?? false
return state.uncontrolledOpen
}
const onOpenChange = (next: boolean) => {
if (next) setState("dismiss", null)
if (local.onOpenChange) local.onOpenChange(next)
if (controlled()) return
setState("uncontrolledOpen", next)
}
createEffect(() => {
if (!opened()) return
const inside = (node: Node | null | undefined) => {
if (!node) return false
const content = state.contentRef
if (content && content.contains(node)) return true
const trigger = state.triggerRef
if (trigger && trigger.contains(node)) return true
return false
}
const close = (reason: "escape" | "outside") => {
setState("dismiss", reason)
onOpenChange(false)
}
const onKeyDown = (event: KeyboardEvent) => {
if (event.key !== "Escape") return
close("escape")
event.preventDefault()
event.stopPropagation()
}
const onPointerDown = (event: PointerEvent) => {
const target = event.target
if (!(target instanceof Node)) return
if (inside(target)) return
close("outside")
}
const onFocusIn = (event: FocusEvent) => {
const target = event.target
if (!(target instanceof Node)) return
if (inside(target)) return
close("outside")
}
makeEventListener(window, "keydown", onKeyDown, { capture: true })
makeEventListener(window, "pointerdown", onPointerDown, { capture: true })
makeEventListener(window, "focusin", onFocusIn, { capture: true })
})
const content = () => (
<Kobalte.Content
ref={(el: HTMLElement | undefined) => setState("contentRef", el)}
data-component="popover-content"
classList={{
...local.classList,
[local.class ?? ""]: !!local.class,
}}
style={local.style}
onCloseAutoFocus={(event: Event) => {
if (state.dismiss === "outside") event.preventDefault()
setState("dismiss", null)
}}
>
{/* <Kobalte.Arrow data-slot="popover-arrow" /> */}
<Show when={local.title}>
<div data-slot="popover-header">
<Kobalte.Title data-slot="popover-title">{local.title}</Kobalte.Title>
<Kobalte.CloseButton
data-slot="popover-close-button"
as={IconButton}
icon="close"
variant="ghost"
aria-label={i18n.t("ui.common.close")}
/>
</div>
</Show>
<Show when={local.description}>
<Kobalte.Description data-slot="popover-description">{local.description}</Kobalte.Description>
</Show>
<div data-slot="popover-body">{local.children}</div>
</Kobalte.Content>
)
return (
<Kobalte gutter={4} {...rest} open={opened()} onOpenChange={onOpenChange} modal={local.modal ?? false}>
<Kobalte.Trigger
ref={(el: HTMLElement) => setState("triggerRef", el)}
as={local.triggerAs ?? "div"}
data-slot="popover-trigger"
{...(local.triggerProps as any)}
>
{local.trigger}
</Kobalte.Trigger>
<Show when={local.portal ?? true} fallback={content()}>
<Kobalte.Portal>{content()}</Kobalte.Portal>
</Show>
</Kobalte>
)
}
|
