@wisdomgarden/torque 0.2.0 → 0.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/common/is-dev.d.ts +1 -0
- package/dist/common/is-dev.js +5 -0
- package/dist/components/popover/hooks.d.ts +1 -1
- package/dist/components/popover/hooks.js +42 -42
- package/dist/components/popover/index.d.ts +1 -1
- package/dist/components/popover/popover-dropdown.js +56 -61
- package/dist/components/popover/popover-target.js +21 -19
- package/dist/components/popover/popover.d.ts +1 -1
- package/dist/components/popover/popover.js +155 -129
- package/dist/components/popover/popover.types.d.ts +27 -3
- package/dist/provider/hooks.js +12 -11
- package/package.json +1 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const isDev: () => boolean;
|
|
@@ -12,6 +12,6 @@ export declare function useArrowStyle(withArrow: boolean, arrowData: {
|
|
|
12
12
|
x?: number;
|
|
13
13
|
y?: number;
|
|
14
14
|
} | undefined, resolvedSide: PopoverSide, arrowSize: number): React.CSSProperties;
|
|
15
|
-
export declare function useTriggerProps(disabled: boolean, trigger: PopoverTrigger, mergedReferenceRef: React.Ref<HTMLElement>, id: string, toggle: () => void, opened: boolean, setOpen: (next: boolean) => void,
|
|
15
|
+
export declare function useTriggerProps(disabled: boolean, trigger: PopoverTrigger, mergedReferenceRef: React.Ref<HTMLElement>, id: string, toggle: () => void, opened: boolean, setOpen: (next: boolean) => void, scheduleHover: (next: boolean) => void, cancelHoverTimer: () => void, userOnClick?: React.MouseEventHandler<HTMLElement>, userOnKeyDown?: React.KeyboardEventHandler<HTMLElement>): React.HTMLAttributes<HTMLElement> & {
|
|
16
16
|
ref?: React.Ref<HTMLElement>;
|
|
17
17
|
};
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { useEffect as l, useState as
|
|
3
|
-
import { registerOpenPopover as
|
|
4
|
-
function
|
|
5
|
-
const [n, e] =
|
|
2
|
+
import { useEffect as l, useState as b, useRef as p, useCallback as y, useMemo as E } from "react";
|
|
3
|
+
import { registerOpenPopover as A, isTopmostOpenPopover as x } from "./popover-stack.js";
|
|
4
|
+
function k(u, t = !1) {
|
|
5
|
+
const [n, e] = b(t || u), [r, o] = b(
|
|
6
6
|
u ? "open" : "closing"
|
|
7
|
-
), s =
|
|
7
|
+
), s = p(0);
|
|
8
8
|
l(() => (u ? (e(!0), s.current = requestAnimationFrame(() => {
|
|
9
9
|
s.current = requestAnimationFrame(() => {
|
|
10
10
|
o("open");
|
|
@@ -12,24 +12,24 @@ function L(u, t = !1) {
|
|
|
12
12
|
})) : (o("closing"), t && e(!0)), () => {
|
|
13
13
|
s.current && cancelAnimationFrame(s.current);
|
|
14
14
|
}), [t, u]);
|
|
15
|
-
const i =
|
|
15
|
+
const i = y(() => {
|
|
16
16
|
r === "closing" && !t && e(!1);
|
|
17
17
|
}, [r, t]);
|
|
18
18
|
return { mounted: n, animState: r, handleTransitionEnd: i };
|
|
19
19
|
}
|
|
20
|
-
function
|
|
21
|
-
const
|
|
20
|
+
function q(u, t, n, e, r, o, s, i) {
|
|
21
|
+
const f = p(null);
|
|
22
22
|
l(() => {
|
|
23
|
-
u === "click" && (t ?
|
|
24
|
-
(
|
|
25
|
-
) &&
|
|
23
|
+
u === "click" && (t ? f.current = document.activeElement : o().some(
|
|
24
|
+
(a) => a.contains(document.activeElement)
|
|
25
|
+
) && f.current?.focus());
|
|
26
26
|
}, [t, u, o]), l(() => {
|
|
27
27
|
if (u !== "click" || n !== "open" || !e || i) return;
|
|
28
28
|
if (s?.current) {
|
|
29
29
|
s.current.focus();
|
|
30
30
|
return;
|
|
31
31
|
}
|
|
32
|
-
(
|
|
32
|
+
(L([r.current])[0] ?? r.current)?.focus();
|
|
33
33
|
}, [
|
|
34
34
|
n,
|
|
35
35
|
e,
|
|
@@ -39,7 +39,7 @@ function P(u, t, n, e, r, o, s, i) {
|
|
|
39
39
|
i
|
|
40
40
|
]);
|
|
41
41
|
}
|
|
42
|
-
const
|
|
42
|
+
const h = [
|
|
43
43
|
"a[href]",
|
|
44
44
|
"button:not([disabled])",
|
|
45
45
|
"input:not([disabled])",
|
|
@@ -47,27 +47,27 @@ const x = [
|
|
|
47
47
|
"textarea:not([disabled])",
|
|
48
48
|
'[tabindex]:not([tabindex="-1"])'
|
|
49
49
|
].join(",");
|
|
50
|
-
function
|
|
50
|
+
function L(u) {
|
|
51
51
|
const t = u.flatMap((n) => !n || n.inert || n.getAttribute("aria-hidden") === "true" ? [] : Array.from(
|
|
52
|
-
n.querySelectorAll(
|
|
52
|
+
n.querySelectorAll(h)
|
|
53
53
|
));
|
|
54
54
|
return Array.from(new Set(t)).filter(
|
|
55
55
|
(n) => !n.hasAttribute("data-focus-sentinel")
|
|
56
56
|
);
|
|
57
57
|
}
|
|
58
|
-
function
|
|
58
|
+
function v(u, t, n, e, r, o, s) {
|
|
59
59
|
l(() => {
|
|
60
60
|
if (t)
|
|
61
|
-
return
|
|
61
|
+
return A(r, o);
|
|
62
62
|
}, [o, r, t]), l(() => {
|
|
63
63
|
if (!u || !t) return;
|
|
64
|
-
const i = (
|
|
65
|
-
|
|
64
|
+
const i = (f) => {
|
|
65
|
+
f.key !== "Escape" || !x(r) || (f.preventDefault(), f.stopImmediatePropagation(), n(), s ? s() : e.current?.focus());
|
|
66
66
|
};
|
|
67
67
|
return document.addEventListener("keydown", i), () => document.removeEventListener("keydown", i);
|
|
68
68
|
}, [u, t, n, e, r, s]);
|
|
69
69
|
}
|
|
70
|
-
function
|
|
70
|
+
function B(u, t, n, e) {
|
|
71
71
|
return E(() => {
|
|
72
72
|
if (!u || !t) return {};
|
|
73
73
|
const r = e / 2, o = {
|
|
@@ -78,32 +78,31 @@ function T(u, t, n, e) {
|
|
|
78
78
|
return n === "bottom" ? { ...o, top: -r - 1, left: t.x ?? "", bottom: "" } : n === "top" ? { ...o, bottom: -r - 1, left: t.x ?? "", top: "" } : n === "right" ? { ...o, left: -r - 1, top: t.y ?? "" } : n === "left" ? { ...o, right: -r - 1, top: t.y ?? "" } : o;
|
|
79
79
|
}, [u, t, n, e]);
|
|
80
80
|
}
|
|
81
|
-
function
|
|
81
|
+
function F(u, t, n, e, r, o, s, i, f, a, m) {
|
|
82
82
|
return E(() => u ? { ref: n } : t === "none" ? {
|
|
83
83
|
ref: n,
|
|
84
84
|
"aria-expanded": o,
|
|
85
|
-
onKeyDown:
|
|
85
|
+
onKeyDown: m
|
|
86
86
|
} : t === "hover" ? {
|
|
87
87
|
ref: n,
|
|
88
|
-
onMouseEnter: () =>
|
|
89
|
-
clearTimeout(i.current), s(!0);
|
|
90
|
-
},
|
|
88
|
+
onMouseEnter: () => i(!0),
|
|
91
89
|
onMouseLeave: () => {
|
|
92
|
-
|
|
90
|
+
o ? i(!1) : f();
|
|
93
91
|
},
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
92
|
+
// 键盘聚焦不走 openDelay:延迟打开对读屏 / 键盘用户只有负作用
|
|
93
|
+
onFocus: () => {
|
|
94
|
+
f(), s(!0);
|
|
97
95
|
},
|
|
96
|
+
onBlur: () => i(!1),
|
|
98
97
|
"aria-describedby": e,
|
|
99
|
-
onKeyDown:
|
|
98
|
+
onKeyDown: m
|
|
100
99
|
} : {
|
|
101
100
|
ref: n,
|
|
102
|
-
onClick: (
|
|
103
|
-
r(),
|
|
101
|
+
onClick: (c) => {
|
|
102
|
+
r(), a?.(c);
|
|
104
103
|
},
|
|
105
|
-
onKeyDown: (
|
|
106
|
-
|
|
104
|
+
onKeyDown: (c) => {
|
|
105
|
+
c.key === "Enter" && (c.preventDefault(), r()), m?.(c);
|
|
107
106
|
},
|
|
108
107
|
"aria-expanded": o,
|
|
109
108
|
"aria-haspopup": "dialog",
|
|
@@ -117,15 +116,16 @@ function k(u, t, n, e, r, o, s, i, c, f) {
|
|
|
117
116
|
o,
|
|
118
117
|
s,
|
|
119
118
|
i,
|
|
120
|
-
|
|
121
|
-
|
|
119
|
+
f,
|
|
120
|
+
a,
|
|
121
|
+
m
|
|
122
122
|
]);
|
|
123
123
|
}
|
|
124
124
|
export {
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
125
|
+
L as getFocusableElements,
|
|
126
|
+
k as useAnimatedMount,
|
|
127
|
+
B as useArrowStyle,
|
|
128
|
+
v as useEscapeClose,
|
|
129
|
+
q as usePopoverFocus,
|
|
130
|
+
F as useTriggerProps
|
|
131
131
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { PopoverDropdown } from './popover-dropdown';
|
|
2
2
|
import { PopoverTarget } from './popover-target';
|
|
3
|
-
export declare const Popover: (({ children, position, offset: offsetProp, opened: openedProp, defaultOpened, onOpenChange, disabled, withArrow, arrowSize, trigger, closeOnClickOutside, closeOnEscape, restoreFocus, strategy, initialFocusRef, trapFocus, preventAutoFocus, "aria-labelledby": ariaLabelledby, }: import("./popover.types").PopoverProps) => import("react").JSX.Element) & {
|
|
3
|
+
export declare const Popover: (({ children, position, offset: offsetProp, opened: openedProp, defaultOpened, onOpenChange, disabled, withArrow, arrowSize, trigger, openDelay, closeDelay, closeOnClickOutside, closeOnEscape, restoreFocus, strategy, initialFocusRef, trapFocus, preventAutoFocus, "aria-labelledby": ariaLabelledby, }: import("./popover.types").PopoverProps) => import("react").JSX.Element) & {
|
|
4
4
|
Target: ({ children, ref, onClick, onKeyDown, ...restProps }: import("./popover.types").PopoverTargetProps) => import("react").JSX.Element;
|
|
5
5
|
Dropdown: ({ children, arrowClassName, zIndex, width, maxHeight, matchTargetWidth, radius, withinPortal, keepMounted, ref, ...restProps }: import("./popover.types").PopoverDropdownProps) => import("react").JSX.Element | null;
|
|
6
6
|
};
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsxs as
|
|
2
|
+
import { jsxs as E, jsx as c } from "react/jsx-runtime";
|
|
3
3
|
import { getDefaultZIndex as te, Portal as re } from "@mantine/core";
|
|
4
4
|
import { useMergedRef as ne } from "@mantine/hooks";
|
|
5
|
-
import { clsx as
|
|
5
|
+
import { clsx as S } from "clsx";
|
|
6
6
|
import { useContext as ie, useRef as ae, useCallback as se } from "react";
|
|
7
|
-
import { useAnimatedMount as
|
|
8
|
-
import { PopoverLayerContext as
|
|
9
|
-
import
|
|
7
|
+
import { useAnimatedMount as le, usePopoverFocus as de, useArrowStyle as ce, getFocusableElements as ue } from "./hooks.js";
|
|
8
|
+
import { PopoverLayerContext as I, usePopoverContext as fe } from "./popover-context.js";
|
|
9
|
+
import M from "./styles/popover.module.css.js";
|
|
10
10
|
const Fe = ({
|
|
11
11
|
children: A,
|
|
12
12
|
arrowClassName: C,
|
|
@@ -15,56 +15,56 @@ const Fe = ({
|
|
|
15
15
|
maxHeight: a,
|
|
16
16
|
matchTargetWidth: N = !1,
|
|
17
17
|
radius: z = "sm",
|
|
18
|
-
withinPortal:
|
|
19
|
-
keepMounted:
|
|
20
|
-
ref:
|
|
18
|
+
withinPortal: H = !0,
|
|
19
|
+
keepMounted: L = !1,
|
|
20
|
+
ref: T,
|
|
21
21
|
...e
|
|
22
22
|
}) => {
|
|
23
|
-
const u = ie(
|
|
23
|
+
const u = ie(I), {
|
|
24
24
|
opened: r,
|
|
25
25
|
trigger: n,
|
|
26
|
-
strategy:
|
|
27
|
-
x:
|
|
28
|
-
y:
|
|
26
|
+
strategy: Z,
|
|
27
|
+
x: j,
|
|
28
|
+
y: k,
|
|
29
29
|
resolvedSide: f,
|
|
30
30
|
middlewareData: s,
|
|
31
|
-
floatingRef:
|
|
32
|
-
setFloating:
|
|
31
|
+
floatingRef: l,
|
|
32
|
+
setFloating: W,
|
|
33
33
|
registerNestedFloatingElement: p,
|
|
34
34
|
getFloatingScopeElements: v,
|
|
35
35
|
withArrow: m,
|
|
36
|
-
arrowSize:
|
|
36
|
+
arrowSize: $,
|
|
37
37
|
arrowRef: P,
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
id:
|
|
41
|
-
initialFocusRef:
|
|
42
|
-
trapFocus:
|
|
43
|
-
preventAutoFocus:
|
|
44
|
-
ariaLabelledby:
|
|
45
|
-
} = fe(), { mounted:
|
|
38
|
+
scheduleHover: V,
|
|
39
|
+
cancelHoverTimer: q,
|
|
40
|
+
id: B,
|
|
41
|
+
initialFocusRef: G,
|
|
42
|
+
trapFocus: g,
|
|
43
|
+
preventAutoFocus: J,
|
|
44
|
+
ariaLabelledby: K
|
|
45
|
+
} = fe(), { mounted: h, animState: x, handleTransitionEnd: O } = le(
|
|
46
46
|
r,
|
|
47
|
-
|
|
47
|
+
L
|
|
48
48
|
), y = ae(null), Q = se(
|
|
49
49
|
(o) => {
|
|
50
50
|
y.current?.(), y.current = o ? p(o) : null;
|
|
51
51
|
},
|
|
52
52
|
[p]
|
|
53
53
|
), U = ne(
|
|
54
|
-
|
|
55
|
-
|
|
54
|
+
l,
|
|
55
|
+
W,
|
|
56
56
|
Q,
|
|
57
|
-
|
|
58
|
-
),
|
|
59
|
-
|
|
57
|
+
T
|
|
58
|
+
), d = D ?? (u === null ? te("popover") : u + 1);
|
|
59
|
+
de(
|
|
60
60
|
n,
|
|
61
61
|
r,
|
|
62
|
-
w,
|
|
63
62
|
x,
|
|
64
|
-
|
|
63
|
+
h,
|
|
64
|
+
l,
|
|
65
65
|
v,
|
|
66
|
-
|
|
67
|
-
|
|
66
|
+
G,
|
|
67
|
+
J
|
|
68
68
|
);
|
|
69
69
|
const b = (o) => /* @__PURE__ */ c(
|
|
70
70
|
"span",
|
|
@@ -76,7 +76,7 @@ const Fe = ({
|
|
|
76
76
|
onFocus: () => {
|
|
77
77
|
const i = ue(v());
|
|
78
78
|
if (i.length === 0) {
|
|
79
|
-
|
|
79
|
+
l.current?.focus();
|
|
80
80
|
return;
|
|
81
81
|
}
|
|
82
82
|
(o === "start" ? i[i.length - 1] : i[0]).focus();
|
|
@@ -86,63 +86,58 @@ const Fe = ({
|
|
|
86
86
|
m,
|
|
87
87
|
s.arrow,
|
|
88
88
|
f,
|
|
89
|
-
|
|
89
|
+
$
|
|
90
90
|
), Y = typeof t == "number" ? `${t}px` : t, _ = t ? Y : void 0, ee = typeof a == "number" ? `${a}px` : a, oe = N ? "var(--t-popover-reference-width)" : _;
|
|
91
|
-
if (!
|
|
92
|
-
const
|
|
91
|
+
if (!h) return null;
|
|
92
|
+
const w = "role" in e ? e.role : n === "click" ? "dialog" : void 0, F = w === "dialog", R = /* @__PURE__ */ E(
|
|
93
93
|
"div",
|
|
94
94
|
{
|
|
95
|
-
id:
|
|
96
|
-
role:
|
|
97
|
-
"aria-modal":
|
|
98
|
-
"aria-labelledby":
|
|
95
|
+
id: B,
|
|
96
|
+
role: w,
|
|
97
|
+
"aria-modal": F ? !1 : void 0,
|
|
98
|
+
"aria-labelledby": F ? K : void 0,
|
|
99
99
|
ref: U,
|
|
100
100
|
tabIndex: -1,
|
|
101
|
-
"data-state":
|
|
101
|
+
"data-state": x,
|
|
102
102
|
"data-radius": z,
|
|
103
103
|
"data-side": f,
|
|
104
104
|
style: {
|
|
105
|
-
position:
|
|
106
|
-
left:
|
|
107
|
-
top:
|
|
108
|
-
zIndex:
|
|
109
|
-
"--t-popover-z":
|
|
105
|
+
position: Z,
|
|
106
|
+
left: j ?? 0,
|
|
107
|
+
top: k ?? 0,
|
|
108
|
+
zIndex: d,
|
|
109
|
+
"--t-popover-z": d,
|
|
110
110
|
"--t-popover-width": oe,
|
|
111
111
|
"--t-popover-max-height": ee,
|
|
112
112
|
visibility: s.hide?.referenceHidden ? "hidden" : void 0,
|
|
113
113
|
pointerEvents: s.hide?.referenceHidden ? "none" : void 0
|
|
114
114
|
},
|
|
115
|
-
onTransitionEnd:
|
|
116
|
-
onMouseEnter: n === "hover" ? () =>
|
|
117
|
-
onMouseLeave: n === "hover" ? () =>
|
|
118
|
-
g.current = window.setTimeout(
|
|
119
|
-
() => V(!1),
|
|
120
|
-
100
|
|
121
|
-
);
|
|
122
|
-
} : void 0,
|
|
115
|
+
onTransitionEnd: O,
|
|
116
|
+
onMouseEnter: n === "hover" ? () => q() : void 0,
|
|
117
|
+
onMouseLeave: n === "hover" ? () => V(!1) : void 0,
|
|
123
118
|
...e,
|
|
124
119
|
"aria-hidden": r ? e["aria-hidden"] : !0,
|
|
125
120
|
inert: r ? e.inert : !0,
|
|
126
|
-
className:
|
|
121
|
+
className: S(M.popover, e.className),
|
|
127
122
|
children: [
|
|
128
|
-
/* @__PURE__ */
|
|
129
|
-
|
|
123
|
+
/* @__PURE__ */ E(I.Provider, { value: d, children: [
|
|
124
|
+
g && b("start"),
|
|
130
125
|
A,
|
|
131
|
-
|
|
126
|
+
g && b("end")
|
|
132
127
|
] }),
|
|
133
128
|
m && /* @__PURE__ */ c(
|
|
134
129
|
"div",
|
|
135
130
|
{
|
|
136
131
|
ref: P,
|
|
137
132
|
"aria-hidden": "true",
|
|
138
|
-
className:
|
|
133
|
+
className: S(M.arrow, C),
|
|
139
134
|
style: { ...X }
|
|
140
135
|
}
|
|
141
136
|
)
|
|
142
137
|
]
|
|
143
138
|
}
|
|
144
139
|
);
|
|
145
|
-
return
|
|
140
|
+
return H ? /* @__PURE__ */ c(re, { children: R }) : R;
|
|
146
141
|
};
|
|
147
142
|
export {
|
|
148
143
|
Fe as PopoverDropdown
|
|
@@ -1,39 +1,41 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as b } from "react/jsx-runtime";
|
|
3
|
-
import { useMergedRef as
|
|
4
|
-
import { clsx as
|
|
3
|
+
import { useMergedRef as T } from "@mantine/hooks";
|
|
4
|
+
import { clsx as E } from "clsx";
|
|
5
5
|
import r from "react";
|
|
6
|
-
import { useTriggerProps as
|
|
6
|
+
import { useTriggerProps as H } from "./hooks.js";
|
|
7
7
|
import { usePopoverContext as N } from "./popover-context.js";
|
|
8
8
|
import P from "./styles/popover.module.css.js";
|
|
9
9
|
const q = ({
|
|
10
10
|
children: e,
|
|
11
11
|
ref: s,
|
|
12
12
|
onClick: m,
|
|
13
|
-
onKeyDown:
|
|
13
|
+
onKeyDown: i,
|
|
14
14
|
...o
|
|
15
15
|
}) => {
|
|
16
16
|
const {
|
|
17
|
-
disabled:
|
|
18
|
-
trigger:
|
|
19
|
-
id:
|
|
20
|
-
toggle:
|
|
17
|
+
disabled: n,
|
|
18
|
+
trigger: a,
|
|
19
|
+
id: f,
|
|
20
|
+
toggle: c,
|
|
21
21
|
opened: l,
|
|
22
|
-
setOpen:
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
22
|
+
setOpen: p,
|
|
23
|
+
scheduleHover: g,
|
|
24
|
+
cancelHoverTimer: d,
|
|
25
|
+
referenceRef: u,
|
|
26
|
+
setReference: R
|
|
27
|
+
} = N(), v = r.isValidElement(e) ? e.props.ref : void 0, x = T(u, R, s, v), t = H(
|
|
28
28
|
n,
|
|
29
|
-
x,
|
|
30
29
|
a,
|
|
31
|
-
|
|
32
|
-
|
|
30
|
+
x,
|
|
31
|
+
f,
|
|
33
32
|
c,
|
|
33
|
+
l,
|
|
34
|
+
p,
|
|
34
35
|
g,
|
|
36
|
+
d,
|
|
35
37
|
m,
|
|
36
|
-
|
|
38
|
+
i
|
|
37
39
|
);
|
|
38
40
|
return r.isValidElement(e) ? r.cloneElement(
|
|
39
41
|
e,
|
|
@@ -45,7 +47,7 @@ const q = ({
|
|
|
45
47
|
tabIndex: 0,
|
|
46
48
|
...t,
|
|
47
49
|
...o,
|
|
48
|
-
className:
|
|
50
|
+
className: E(P.fallbackTarget, o.className),
|
|
49
51
|
children: e
|
|
50
52
|
}
|
|
51
53
|
);
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { PopoverProps } from './popover.types';
|
|
3
|
-
export declare const Popover: ({ children, position, offset: offsetProp, opened: openedProp, defaultOpened, onOpenChange, disabled, withArrow, arrowSize, trigger, closeOnClickOutside, closeOnEscape, restoreFocus, strategy, initialFocusRef, trapFocus, preventAutoFocus, "aria-labelledby": ariaLabelledby, }: PopoverProps) => React.JSX.Element;
|
|
3
|
+
export declare const Popover: ({ children, position, offset: offsetProp, opened: openedProp, defaultOpened, onOpenChange, disabled, withArrow, arrowSize, trigger, openDelay, closeDelay, closeOnClickOutside, closeOnEscape, restoreFocus, strategy, initialFocusRef, trapFocus, preventAutoFocus, "aria-labelledby": ariaLabelledby, }: PopoverProps) => React.JSX.Element;
|
|
@@ -1,175 +1,201 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx as
|
|
3
|
-
import { offset as
|
|
4
|
-
import { useDirection as
|
|
5
|
-
import
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
2
|
+
import { jsx as le } from "react/jsx-runtime";
|
|
3
|
+
import { offset as ae, flip as de, size as ue, shift as fe, limitShift as me, arrow as pe, hide as he, useFloating as ve, autoUpdate as ge } from "@floating-ui/react-dom";
|
|
4
|
+
import { useDirection as Ee, getFloatingPosition as we } from "@mantine/core";
|
|
5
|
+
import K, { useRef as c, useId as xe, useCallback as r, useEffect as D, useMemo as Q } from "react";
|
|
6
|
+
import { isDev as Pe } from "../../common/is-dev.js";
|
|
7
|
+
import { useEscapeClose as Re } from "./hooks.js";
|
|
8
|
+
import { PopoverContext as W } from "./popover-context.js";
|
|
9
|
+
const w = 8, Ie = ({
|
|
10
|
+
children: X,
|
|
11
|
+
position: Y = "bottom",
|
|
12
|
+
offset: N = 8,
|
|
13
|
+
opened: T,
|
|
14
|
+
defaultOpened: Z = !1,
|
|
15
|
+
onOpenChange: u,
|
|
16
|
+
disabled: I = !1,
|
|
17
|
+
withArrow: l = !1,
|
|
18
|
+
arrowSize: f = 8,
|
|
19
|
+
trigger: a = "click",
|
|
20
|
+
openDelay: L = 0,
|
|
21
|
+
closeDelay: M = 100,
|
|
22
|
+
closeOnClickOutside: $ = !0,
|
|
23
|
+
closeOnEscape: z = !0,
|
|
24
|
+
restoreFocus: ee,
|
|
25
|
+
strategy: x = "absolute",
|
|
26
|
+
initialFocusRef: S,
|
|
27
|
+
trapFocus: G = !1,
|
|
28
|
+
preventAutoFocus: H = !1,
|
|
29
|
+
"aria-labelledby": j
|
|
27
30
|
}) => {
|
|
28
|
-
const
|
|
31
|
+
const P = K.useContext(W), k = P?.registerNestedFloatingElement, R = P ? P.depth + 1 : 0, d = T !== void 0, [te, ne] = K.useState(Z), o = d ? T : te, m = c(null), p = c(null), h = c(null), y = c(/* @__PURE__ */ new Set()), F = c(void 0), b = xe(), { dir: oe } = Ee(), n = r(
|
|
29
32
|
(e) => {
|
|
30
|
-
|
|
33
|
+
d || ne(e), u?.(e);
|
|
31
34
|
},
|
|
32
|
-
[
|
|
33
|
-
),
|
|
35
|
+
[d, u]
|
|
36
|
+
), C = r(() => n(!1), [n]), q = r(() => n(!o), [o, n]), s = r(() => {
|
|
37
|
+
window.clearTimeout(F.current), F.current = void 0;
|
|
38
|
+
}, []), O = r(
|
|
34
39
|
(e) => {
|
|
35
|
-
|
|
36
|
-
const
|
|
40
|
+
s();
|
|
41
|
+
const t = e ? L : M;
|
|
42
|
+
if (t <= 0) {
|
|
43
|
+
n(e);
|
|
44
|
+
return;
|
|
45
|
+
}
|
|
46
|
+
F.current = window.setTimeout(() => n(e), t);
|
|
47
|
+
},
|
|
48
|
+
[s, L, M, n]
|
|
49
|
+
);
|
|
50
|
+
D(() => s, [s]);
|
|
51
|
+
const U = c(!1);
|
|
52
|
+
D(() => {
|
|
53
|
+
!Pe() || U.current || !d || a === "none" || u || (U.current = !0, console.warn(
|
|
54
|
+
`[@wisdomgarden/torque] <Popover trigger="${a}"> is controlled through \`opened\` but got no \`onOpenChange\`, so every built-in trigger resolves to a no-op — including the \`openDelay\` / \`closeDelay\` timers, which still run and then have nowhere to report. Pass \`onOpenChange\`, or use trigger="none" if the host owns the open state.`
|
|
55
|
+
));
|
|
56
|
+
}, [d, a, u]);
|
|
57
|
+
const V = r(
|
|
58
|
+
(e) => {
|
|
59
|
+
y.current.add(e);
|
|
60
|
+
const t = k?.(e);
|
|
37
61
|
return () => {
|
|
38
|
-
|
|
62
|
+
y.current.delete(e), t?.();
|
|
39
63
|
};
|
|
40
64
|
},
|
|
41
|
-
[
|
|
42
|
-
),
|
|
43
|
-
const e =
|
|
44
|
-
return
|
|
45
|
-
|
|
65
|
+
[k]
|
|
66
|
+
), v = r(() => {
|
|
67
|
+
const e = h.current ? [h.current] : [];
|
|
68
|
+
return y.current.forEach((t) => {
|
|
69
|
+
t.isConnected && e.push(t);
|
|
46
70
|
}), Array.from(new Set(e));
|
|
47
71
|
}, []);
|
|
48
|
-
|
|
49
|
-
if (
|
|
50
|
-
const e = (
|
|
51
|
-
const
|
|
52
|
-
|
|
72
|
+
D(() => {
|
|
73
|
+
if (!$ || !o) return;
|
|
74
|
+
const e = (t) => {
|
|
75
|
+
const E = t.composedPath(), i = p.current;
|
|
76
|
+
i && E.includes(i) || v().some((ce) => E.includes(ce)) || C();
|
|
53
77
|
};
|
|
54
78
|
return document.addEventListener("mousedown", e, !0), document.addEventListener("touchstart", e, !0), () => {
|
|
55
79
|
document.removeEventListener("mousedown", e, !0), document.removeEventListener("touchstart", e, !0);
|
|
56
80
|
};
|
|
57
|
-
}, [
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
81
|
+
}, [$, o, C, v]), Re(
|
|
82
|
+
z,
|
|
83
|
+
o,
|
|
84
|
+
C,
|
|
85
|
+
p,
|
|
86
|
+
b,
|
|
87
|
+
R,
|
|
88
|
+
ee
|
|
65
89
|
);
|
|
66
|
-
const
|
|
90
|
+
const re = Q(
|
|
67
91
|
() => [
|
|
68
|
-
|
|
69
|
-
|
|
92
|
+
ae(N + (l ? f / 2 : 0)),
|
|
93
|
+
de({ padding: w }),
|
|
70
94
|
// 必须在 shift 之前:否则 availableHeight 是 shift 推动后的位置算出的(≈整屏),高度约束失效
|
|
71
|
-
|
|
72
|
-
padding:
|
|
73
|
-
apply({ availableWidth: e, availableHeight:
|
|
74
|
-
|
|
95
|
+
ue({
|
|
96
|
+
padding: w,
|
|
97
|
+
apply({ availableWidth: e, availableHeight: t, rects: E, elements: i }) {
|
|
98
|
+
i.floating.style.setProperty(
|
|
75
99
|
"--t-popover-available-width",
|
|
76
100
|
`${Math.max(0, e)}px`
|
|
77
|
-
),
|
|
101
|
+
), i.floating.style.setProperty(
|
|
78
102
|
"--t-popover-available-height",
|
|
79
|
-
`${Math.max(0,
|
|
80
|
-
),
|
|
103
|
+
`${Math.max(0, t)}px`
|
|
104
|
+
), i.floating.style.setProperty(
|
|
81
105
|
"--t-popover-reference-width",
|
|
82
|
-
`${
|
|
106
|
+
`${E.reference.width}px`
|
|
83
107
|
);
|
|
84
108
|
}
|
|
85
109
|
}),
|
|
86
|
-
|
|
87
|
-
padding:
|
|
110
|
+
fe({
|
|
111
|
+
padding: w,
|
|
88
112
|
crossAxis: !0,
|
|
89
113
|
mainAxis: !0,
|
|
90
|
-
limiter:
|
|
114
|
+
limiter: me()
|
|
91
115
|
}),
|
|
92
|
-
...
|
|
116
|
+
...l ? (
|
|
93
117
|
// floating-ui 的 arrow 中间件按设计就是收一个 ref 对象(它在定位阶段自己读
|
|
94
118
|
// .current),不是我们在渲染期读 ref 的值。没有保留该 API 的改写方式。
|
|
95
119
|
// eslint-disable-next-line react-hooks/refs
|
|
96
|
-
[
|
|
120
|
+
[pe({ element: m, padding: w })]
|
|
97
121
|
) : [],
|
|
98
|
-
|
|
122
|
+
he()
|
|
99
123
|
],
|
|
100
|
-
[
|
|
124
|
+
[N, l, f, m]
|
|
101
125
|
), {
|
|
102
|
-
x:
|
|
103
|
-
y:
|
|
104
|
-
refs:
|
|
105
|
-
placement:
|
|
106
|
-
middlewareData:
|
|
107
|
-
} =
|
|
108
|
-
open:
|
|
109
|
-
strategy:
|
|
110
|
-
placement:
|
|
111
|
-
middleware:
|
|
112
|
-
whileElementsMounted:
|
|
113
|
-
}),
|
|
126
|
+
x: _,
|
|
127
|
+
y: A,
|
|
128
|
+
refs: g,
|
|
129
|
+
placement: se,
|
|
130
|
+
middlewareData: B
|
|
131
|
+
} = ve({
|
|
132
|
+
open: o,
|
|
133
|
+
strategy: x,
|
|
134
|
+
placement: we(oe, Y),
|
|
135
|
+
middleware: re,
|
|
136
|
+
whileElementsMounted: ge
|
|
137
|
+
}), J = se.split("-")[0], ie = Q(
|
|
114
138
|
() => ({
|
|
115
|
-
opened:
|
|
116
|
-
setOpen:
|
|
117
|
-
toggle:
|
|
118
|
-
trigger:
|
|
119
|
-
disabled:
|
|
120
|
-
id:
|
|
121
|
-
withArrow:
|
|
122
|
-
arrowSize:
|
|
123
|
-
x:
|
|
124
|
-
y:
|
|
125
|
-
strategy:
|
|
126
|
-
resolvedSide:
|
|
127
|
-
middlewareData:
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
139
|
+
opened: o,
|
|
140
|
+
setOpen: n,
|
|
141
|
+
toggle: q,
|
|
142
|
+
trigger: a,
|
|
143
|
+
disabled: I,
|
|
144
|
+
id: b,
|
|
145
|
+
withArrow: l,
|
|
146
|
+
arrowSize: f,
|
|
147
|
+
x: _,
|
|
148
|
+
y: A,
|
|
149
|
+
strategy: x,
|
|
150
|
+
resolvedSide: J,
|
|
151
|
+
middlewareData: B,
|
|
152
|
+
scheduleHover: O,
|
|
153
|
+
cancelHoverTimer: s,
|
|
154
|
+
referenceRef: p,
|
|
155
|
+
floatingRef: h,
|
|
156
|
+
arrowRef: m,
|
|
157
|
+
setReference: g.setReference,
|
|
158
|
+
setFloating: g.setFloating,
|
|
159
|
+
depth: R,
|
|
160
|
+
registerNestedFloatingElement: V,
|
|
161
|
+
getFloatingScopeElements: v,
|
|
162
|
+
initialFocusRef: S,
|
|
163
|
+
trapFocus: G,
|
|
164
|
+
preventAutoFocus: H,
|
|
165
|
+
ariaLabelledby: j
|
|
141
166
|
}),
|
|
142
167
|
[
|
|
143
|
-
t,
|
|
144
168
|
o,
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
b,
|
|
148
|
-
F,
|
|
149
|
-
r,
|
|
169
|
+
n,
|
|
170
|
+
q,
|
|
150
171
|
a,
|
|
151
|
-
|
|
172
|
+
I,
|
|
173
|
+
b,
|
|
174
|
+
l,
|
|
175
|
+
f,
|
|
176
|
+
_,
|
|
177
|
+
A,
|
|
178
|
+
x,
|
|
179
|
+
J,
|
|
180
|
+
B,
|
|
152
181
|
O,
|
|
153
|
-
|
|
182
|
+
s,
|
|
183
|
+
p,
|
|
184
|
+
h,
|
|
185
|
+
m,
|
|
186
|
+
g.setReference,
|
|
187
|
+
g.setFloating,
|
|
188
|
+
R,
|
|
154
189
|
V,
|
|
155
|
-
|
|
156
|
-
T,
|
|
157
|
-
d,
|
|
158
|
-
u,
|
|
159
|
-
i,
|
|
160
|
-
p.setReference,
|
|
161
|
-
p.setFloating,
|
|
162
|
-
x,
|
|
163
|
-
k,
|
|
164
|
-
f,
|
|
165
|
-
L,
|
|
166
|
-
M,
|
|
190
|
+
v,
|
|
167
191
|
S,
|
|
168
|
-
|
|
192
|
+
G,
|
|
193
|
+
H,
|
|
194
|
+
j
|
|
169
195
|
]
|
|
170
196
|
);
|
|
171
|
-
return /* @__PURE__ */
|
|
197
|
+
return /* @__PURE__ */ le(W.Provider, { value: ie, children: X });
|
|
172
198
|
};
|
|
173
199
|
export {
|
|
174
|
-
|
|
200
|
+
Ie as Popover
|
|
175
201
|
};
|
|
@@ -22,7 +22,11 @@ export interface PopoverProps {
|
|
|
22
22
|
*/
|
|
23
23
|
offset?: number;
|
|
24
24
|
/**
|
|
25
|
-
*
|
|
25
|
+
* 受控模式:是否展开。
|
|
26
|
+
*
|
|
27
|
+
* 受控之后内部不再持有开关状态,所有内部触发都只转发给 `onOpenChange`,
|
|
28
|
+
* 所以除 `trigger="none"` 外**必须同时提供 `onOpenChange`** ——
|
|
29
|
+
* 漏传会让 click / hover 以及 `openDelay` / `closeDelay` 全部静默失效。
|
|
26
30
|
*/
|
|
27
31
|
opened?: boolean;
|
|
28
32
|
/**
|
|
@@ -31,7 +35,8 @@ export interface PopoverProps {
|
|
|
31
35
|
*/
|
|
32
36
|
defaultOpened?: boolean;
|
|
33
37
|
/**
|
|
34
|
-
*
|
|
38
|
+
* 展开状态变更回调。受控与非受控都会调用;受控下它是内部触发唯一的出口,
|
|
39
|
+
* 必须无条件回写,业务上的启用与否交给 `disabled`。
|
|
35
40
|
*/
|
|
36
41
|
onOpenChange?: (opened: boolean) => void;
|
|
37
42
|
/**
|
|
@@ -55,6 +60,22 @@ export interface PopoverProps {
|
|
|
55
60
|
* @default 'click'
|
|
56
61
|
*/
|
|
57
62
|
trigger?: PopoverTrigger;
|
|
63
|
+
/**
|
|
64
|
+
* hover 打开延迟(ms),0 表示立即打开。
|
|
65
|
+
* 仅 `trigger="hover"` 的鼠标移入生效;键盘聚焦始终立即打开。
|
|
66
|
+
* @default 0
|
|
67
|
+
*/
|
|
68
|
+
openDelay?: number;
|
|
69
|
+
/**
|
|
70
|
+
* hover 关闭延迟(ms),留出鼠标从触发元素移动到浮层的时间。
|
|
71
|
+
* 仅 `trigger="hover"` 生效。
|
|
72
|
+
*
|
|
73
|
+
* 设为 `0` 即取消这段缓冲:鼠标离开触发元素就同步关闭,够不到浮层,键盘也 Tab 不进去。
|
|
74
|
+
* 想要「只给看、不给进一步操作」的富文本 tooltip 就该设 `0`,但浮层内容必须纯展示;
|
|
75
|
+
* 浮层内有可交互内容时不要设 `0`。
|
|
76
|
+
* @default 100
|
|
77
|
+
*/
|
|
78
|
+
closeDelay?: number;
|
|
58
79
|
/**
|
|
59
80
|
* 点击外部区域时关闭
|
|
60
81
|
* @default true
|
|
@@ -188,7 +209,10 @@ export interface PopoverContextValue {
|
|
|
188
209
|
escaped?: boolean;
|
|
189
210
|
};
|
|
190
211
|
};
|
|
191
|
-
|
|
212
|
+
/** hover 触发的延迟开关调度:同一时刻只保留一个待执行任务,延迟为 0 时同步执行 */
|
|
213
|
+
scheduleHover: (next: boolean) => void;
|
|
214
|
+
/** 取消尚未执行的 hover 开关任务 */
|
|
215
|
+
cancelHoverTimer: () => void;
|
|
192
216
|
referenceRef: React.RefObject<HTMLElement | null>;
|
|
193
217
|
floatingRef: React.RefObject<HTMLDivElement | null>;
|
|
194
218
|
arrowRef: React.RefObject<HTMLDivElement | null>;
|
package/dist/provider/hooks.js
CHANGED
|
@@ -1,26 +1,27 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { useContext as n } from "react";
|
|
3
|
-
import {
|
|
4
|
-
|
|
3
|
+
import { isDev as r } from "../common/is-dev.js";
|
|
4
|
+
import { UiContext as a } from "./ui-context.js";
|
|
5
|
+
const t = () => n(a), u = () => t().locale, p = () => {
|
|
5
6
|
const { deviceType: e } = t();
|
|
6
7
|
return { deviceType: e };
|
|
7
|
-
},
|
|
8
|
+
}, v = () => {
|
|
8
9
|
const { deviceType: e } = t();
|
|
9
10
|
return {
|
|
10
11
|
isMobile: e === "mobile",
|
|
11
12
|
isTablet: e === "tablet",
|
|
12
13
|
isDesktop: e === "desktop"
|
|
13
14
|
};
|
|
14
|
-
}, o = /* @__PURE__ */ new Set(),
|
|
15
|
-
const { linkComponent:
|
|
16
|
-
return
|
|
15
|
+
}, o = /* @__PURE__ */ new Set(), f = (e) => {
|
|
16
|
+
const { linkComponent: i, hasProvider: s } = t();
|
|
17
|
+
return r() && !s && !o.has(e) && (o.add(e), console.warn(
|
|
17
18
|
`[@wisdomgarden/torque] <${e}> rendered outside <UiProvider>, falling back to a plain <a>. On a host with a router this silently turns client-side navigation into a full page load.`
|
|
18
|
-
)),
|
|
19
|
+
)), i;
|
|
19
20
|
};
|
|
20
21
|
export {
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
22
|
+
v as useCheckDevice,
|
|
23
|
+
p as useDeviceType,
|
|
24
|
+
u as useLocale,
|
|
24
25
|
t as useUiContext,
|
|
25
|
-
|
|
26
|
+
f as useUiLink
|
|
26
27
|
};
|