@telegraph/modal 0.0.83 → 0.0.84
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/CHANGELOG.md +17 -0
- package/dist/cjs/index.js +1 -1
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/index.mjs +246 -238
- package/dist/esm/index.mjs.map +1 -1
- package/package.json +12 -12
package/dist/esm/index.mjs
CHANGED
|
@@ -1,84 +1,91 @@
|
|
|
1
|
-
import { jsx as d,
|
|
1
|
+
import { jsx as d, jsxs as S } from "react/jsx-runtime";
|
|
2
2
|
import * as v from "@radix-ui/react-dialog";
|
|
3
3
|
import * as i from "react";
|
|
4
4
|
import g from "react";
|
|
5
|
-
import * as
|
|
6
|
-
import { FocusScope as
|
|
7
|
-
import * as
|
|
8
|
-
import * as
|
|
9
|
-
import { Button as
|
|
10
|
-
import { RefToTgphRef as
|
|
11
|
-
import { Lucide as
|
|
12
|
-
import { Stack as E, Box as
|
|
13
|
-
import { AnimatePresence as
|
|
14
|
-
function
|
|
15
|
-
return function(
|
|
16
|
-
if (e == null || e(
|
|
17
|
-
return t == null ? void 0 : t(
|
|
5
|
+
import * as H from "react-dom";
|
|
6
|
+
import { FocusScope as Z } from "@radix-ui/react-focus-scope";
|
|
7
|
+
import * as q from "@radix-ui/react-portal";
|
|
8
|
+
import * as G from "@radix-ui/react-visually-hidden";
|
|
9
|
+
import { Button as J } from "@telegraph/button";
|
|
10
|
+
import { RefToTgphRef as Q } from "@telegraph/helpers";
|
|
11
|
+
import { Lucide as ee } from "@telegraph/icon";
|
|
12
|
+
import { Stack as E, Box as te } from "@telegraph/layout";
|
|
13
|
+
import { AnimatePresence as ne, motion as T } from "framer-motion";
|
|
14
|
+
function O(e, t, { checkForDefaultPrevented: r = !0 } = {}) {
|
|
15
|
+
return function(n) {
|
|
16
|
+
if (e == null || e(n), r === !1 || !n.defaultPrevented)
|
|
17
|
+
return t == null ? void 0 : t(n);
|
|
18
18
|
};
|
|
19
19
|
}
|
|
20
|
-
function
|
|
20
|
+
function F(e, t) {
|
|
21
21
|
if (typeof e == "function")
|
|
22
22
|
return e(t);
|
|
23
23
|
e != null && (e.current = t);
|
|
24
24
|
}
|
|
25
|
-
function
|
|
25
|
+
function $(...e) {
|
|
26
26
|
return (t) => {
|
|
27
|
-
let
|
|
28
|
-
const o = e.map((
|
|
29
|
-
const s =
|
|
30
|
-
return !
|
|
27
|
+
let r = !1;
|
|
28
|
+
const o = e.map((n) => {
|
|
29
|
+
const s = F(n, t);
|
|
30
|
+
return !r && typeof s == "function" && (r = !0), s;
|
|
31
31
|
});
|
|
32
|
-
if (
|
|
32
|
+
if (r)
|
|
33
33
|
return () => {
|
|
34
|
-
for (let
|
|
35
|
-
const s = o[
|
|
36
|
-
typeof s == "function" ? s() :
|
|
34
|
+
for (let n = 0; n < o.length; n++) {
|
|
35
|
+
const s = o[n];
|
|
36
|
+
typeof s == "function" ? s() : F(e[n], null);
|
|
37
37
|
}
|
|
38
38
|
};
|
|
39
39
|
};
|
|
40
40
|
}
|
|
41
|
-
function
|
|
42
|
-
return i.useCallback(
|
|
41
|
+
function M(...e) {
|
|
42
|
+
return i.useCallback($(...e), e);
|
|
43
43
|
}
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
const
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
44
|
+
// @__NO_SIDE_EFFECTS__
|
|
45
|
+
function re(e) {
|
|
46
|
+
const t = /* @__PURE__ */ oe(e), r = i.forwardRef((o, n) => {
|
|
47
|
+
const { children: s, ...l } = o, a = i.Children.toArray(s), f = a.find(ie);
|
|
48
|
+
if (f) {
|
|
49
|
+
const u = f.props.children, c = a.map((y) => y === f ? i.Children.count(u) > 1 ? i.Children.only(null) : i.isValidElement(u) ? u.props.children : null : y);
|
|
50
|
+
return /* @__PURE__ */ d(t, { ...l, ref: n, children: i.isValidElement(u) ? i.cloneElement(u, void 0, c) : null });
|
|
51
|
+
}
|
|
52
|
+
return /* @__PURE__ */ d(t, { ...l, ref: n, children: s });
|
|
53
|
+
});
|
|
54
|
+
return r.displayName = `${e}.Slot`, r;
|
|
55
|
+
}
|
|
56
|
+
// @__NO_SIDE_EFFECTS__
|
|
57
|
+
function oe(e) {
|
|
58
|
+
const t = i.forwardRef((r, o) => {
|
|
59
|
+
const { children: n, ...s } = r;
|
|
60
|
+
if (i.isValidElement(n)) {
|
|
61
|
+
const l = ce(n), a = ae(s, n.props);
|
|
62
|
+
return n.type !== i.Fragment && (a.ref = o ? $(o, l) : l), i.cloneElement(n, a);
|
|
63
|
+
}
|
|
64
|
+
return i.Children.count(n) > 1 ? i.Children.only(null) : null;
|
|
65
|
+
});
|
|
66
|
+
return t.displayName = `${e}.SlotClone`, t;
|
|
67
|
+
}
|
|
68
|
+
var se = Symbol("radix.slottable");
|
|
69
|
+
function ie(e) {
|
|
70
|
+
return i.isValidElement(e) && typeof e.type == "function" && "__radixId" in e.type && e.type.__radixId === se;
|
|
65
71
|
}
|
|
66
|
-
function
|
|
67
|
-
const
|
|
72
|
+
function ae(e, t) {
|
|
73
|
+
const r = { ...t };
|
|
68
74
|
for (const o in t) {
|
|
69
|
-
const
|
|
70
|
-
/^on[A-Z]/.test(o) ?
|
|
71
|
-
s(...
|
|
72
|
-
|
|
75
|
+
const n = e[o], s = t[o];
|
|
76
|
+
/^on[A-Z]/.test(o) ? n && s ? r[o] = (...a) => {
|
|
77
|
+
const f = s(...a);
|
|
78
|
+
return n(...a), f;
|
|
79
|
+
} : n && (r[o] = n) : o === "style" ? r[o] = { ...n, ...s } : o === "className" && (r[o] = [n, s].filter(Boolean).join(" "));
|
|
73
80
|
}
|
|
74
|
-
return { ...e, ...
|
|
81
|
+
return { ...e, ...r };
|
|
75
82
|
}
|
|
76
|
-
function
|
|
77
|
-
var o,
|
|
78
|
-
let t = (o = Object.getOwnPropertyDescriptor(e.props, "ref")) == null ? void 0 : o.get,
|
|
79
|
-
return
|
|
83
|
+
function ce(e) {
|
|
84
|
+
var o, n;
|
|
85
|
+
let t = (o = Object.getOwnPropertyDescriptor(e.props, "ref")) == null ? void 0 : o.get, r = t && "isReactWarning" in t && t.isReactWarning;
|
|
86
|
+
return r ? e.ref : (t = (n = Object.getOwnPropertyDescriptor(e, "ref")) == null ? void 0 : n.get, r = t && "isReactWarning" in t && t.isReactWarning, r ? e.props.ref : e.props.ref || e.ref);
|
|
80
87
|
}
|
|
81
|
-
var
|
|
88
|
+
var le = [
|
|
82
89
|
"a",
|
|
83
90
|
"button",
|
|
84
91
|
"div",
|
|
@@ -92,204 +99,205 @@ var ue = [
|
|
|
92
99
|
"nav",
|
|
93
100
|
"ol",
|
|
94
101
|
"p",
|
|
102
|
+
"select",
|
|
95
103
|
"span",
|
|
96
104
|
"svg",
|
|
97
105
|
"ul"
|
|
98
|
-
],
|
|
99
|
-
const
|
|
100
|
-
const { asChild:
|
|
101
|
-
return typeof window < "u" && (window[Symbol.for("radix-ui")] = !0), /* @__PURE__ */ d(
|
|
106
|
+
], j = le.reduce((e, t) => {
|
|
107
|
+
const r = /* @__PURE__ */ re(`Primitive.${t}`), o = i.forwardRef((n, s) => {
|
|
108
|
+
const { asChild: l, ...a } = n, f = l ? r : t;
|
|
109
|
+
return typeof window < "u" && (window[Symbol.for("radix-ui")] = !0), /* @__PURE__ */ d(f, { ...a, ref: s });
|
|
102
110
|
});
|
|
103
|
-
return
|
|
111
|
+
return o.displayName = `Primitive.${t}`, { ...e, [t]: o };
|
|
104
112
|
}, {});
|
|
105
|
-
function
|
|
106
|
-
e &&
|
|
113
|
+
function ue(e, t) {
|
|
114
|
+
e && H.flushSync(() => e.dispatchEvent(t));
|
|
107
115
|
}
|
|
108
|
-
function
|
|
116
|
+
function I(e) {
|
|
109
117
|
const t = i.useRef(e);
|
|
110
118
|
return i.useEffect(() => {
|
|
111
119
|
t.current = e;
|
|
112
|
-
}), i.useMemo(() => (...
|
|
120
|
+
}), i.useMemo(() => (...r) => {
|
|
113
121
|
var o;
|
|
114
|
-
return (o = t.current) == null ? void 0 : o.call(t, ...
|
|
122
|
+
return (o = t.current) == null ? void 0 : o.call(t, ...r);
|
|
115
123
|
}, []);
|
|
116
124
|
}
|
|
117
|
-
function
|
|
118
|
-
const
|
|
125
|
+
function de(e, t = globalThis == null ? void 0 : globalThis.document) {
|
|
126
|
+
const r = I(e);
|
|
119
127
|
i.useEffect(() => {
|
|
120
|
-
const o = (
|
|
121
|
-
|
|
128
|
+
const o = (n) => {
|
|
129
|
+
n.key === "Escape" && r(n);
|
|
122
130
|
};
|
|
123
131
|
return t.addEventListener("keydown", o, { capture: !0 }), () => t.removeEventListener("keydown", o, { capture: !0 });
|
|
124
|
-
}, [
|
|
132
|
+
}, [r, t]);
|
|
125
133
|
}
|
|
126
|
-
var
|
|
134
|
+
var fe = "DismissableLayer", B = "dismissableLayer.update", pe = "dismissableLayer.pointerDownOutside", ye = "dismissableLayer.focusOutside", A, U = i.createContext({
|
|
127
135
|
layers: /* @__PURE__ */ new Set(),
|
|
128
136
|
layersWithOutsidePointerEventsDisabled: /* @__PURE__ */ new Set(),
|
|
129
137
|
branches: /* @__PURE__ */ new Set()
|
|
130
|
-
}),
|
|
138
|
+
}), z = i.forwardRef(
|
|
131
139
|
(e, t) => {
|
|
132
140
|
const {
|
|
133
|
-
disableOutsidePointerEvents:
|
|
141
|
+
disableOutsidePointerEvents: r = !1,
|
|
134
142
|
onEscapeKeyDown: o,
|
|
135
|
-
onPointerDownOutside:
|
|
143
|
+
onPointerDownOutside: n,
|
|
136
144
|
onFocusOutside: s,
|
|
137
|
-
onInteractOutside:
|
|
138
|
-
onDismiss:
|
|
139
|
-
...
|
|
140
|
-
} = e, u = i.useContext(
|
|
141
|
-
const R =
|
|
142
|
-
!
|
|
143
|
-
},
|
|
144
|
-
const R =
|
|
145
|
-
[...u.branches].some((
|
|
146
|
-
},
|
|
147
|
-
return
|
|
148
|
-
|
|
149
|
-
},
|
|
145
|
+
onInteractOutside: l,
|
|
146
|
+
onDismiss: a,
|
|
147
|
+
...f
|
|
148
|
+
} = e, u = i.useContext(U), [c, y] = i.useState(null), m = (c == null ? void 0 : c.ownerDocument) ?? (globalThis == null ? void 0 : globalThis.document), [, L] = i.useState({}), b = M(t, (p) => y(p)), C = Array.from(u.layers), [P] = [...u.layersWithOutsidePointerEventsDisabled].slice(-1), h = C.indexOf(P), x = c ? C.indexOf(c) : -1, w = u.layersWithOutsidePointerEventsDisabled.size > 0, W = x >= h, Y = ve((p) => {
|
|
149
|
+
const R = p.target, k = [...u.branches].some((D) => D.contains(R));
|
|
150
|
+
!W || k || (n == null || n(p), l == null || l(p), p.defaultPrevented || a == null || a());
|
|
151
|
+
}, m), N = Ee((p) => {
|
|
152
|
+
const R = p.target;
|
|
153
|
+
[...u.branches].some((D) => D.contains(R)) || (s == null || s(p), l == null || l(p), p.defaultPrevented || a == null || a());
|
|
154
|
+
}, m);
|
|
155
|
+
return de((p) => {
|
|
156
|
+
x === u.layers.size - 1 && (o == null || o(p), !p.defaultPrevented && a && (p.preventDefault(), a()));
|
|
157
|
+
}, m), i.useEffect(() => {
|
|
150
158
|
if (c)
|
|
151
|
-
return
|
|
152
|
-
|
|
159
|
+
return r && (u.layersWithOutsidePointerEventsDisabled.size === 0 && (A = m.body.style.pointerEvents, m.body.style.pointerEvents = "none"), u.layersWithOutsidePointerEventsDisabled.add(c)), u.layers.add(c), _(), () => {
|
|
160
|
+
r && u.layersWithOutsidePointerEventsDisabled.size === 1 && (m.body.style.pointerEvents = A);
|
|
153
161
|
};
|
|
154
|
-
}, [c,
|
|
155
|
-
c && (u.layers.delete(c), u.layersWithOutsidePointerEventsDisabled.delete(c),
|
|
162
|
+
}, [c, m, r, u]), i.useEffect(() => () => {
|
|
163
|
+
c && (u.layers.delete(c), u.layersWithOutsidePointerEventsDisabled.delete(c), _());
|
|
156
164
|
}, [c, u]), i.useEffect(() => {
|
|
157
|
-
const
|
|
158
|
-
return document.addEventListener(
|
|
165
|
+
const p = () => L({});
|
|
166
|
+
return document.addEventListener(B, p), () => document.removeEventListener(B, p);
|
|
159
167
|
}, []), /* @__PURE__ */ d(
|
|
160
|
-
|
|
168
|
+
j.div,
|
|
161
169
|
{
|
|
162
|
-
...
|
|
170
|
+
...f,
|
|
163
171
|
ref: b,
|
|
164
172
|
style: {
|
|
165
|
-
pointerEvents:
|
|
173
|
+
pointerEvents: w ? W ? "auto" : "none" : void 0,
|
|
166
174
|
...e.style
|
|
167
175
|
},
|
|
168
|
-
onFocusCapture:
|
|
169
|
-
onBlurCapture:
|
|
170
|
-
onPointerDownCapture:
|
|
176
|
+
onFocusCapture: O(e.onFocusCapture, N.onFocusCapture),
|
|
177
|
+
onBlurCapture: O(e.onBlurCapture, N.onBlurCapture),
|
|
178
|
+
onPointerDownCapture: O(
|
|
171
179
|
e.onPointerDownCapture,
|
|
172
|
-
|
|
180
|
+
Y.onPointerDownCapture
|
|
173
181
|
)
|
|
174
182
|
}
|
|
175
183
|
);
|
|
176
184
|
}
|
|
177
185
|
);
|
|
178
|
-
|
|
179
|
-
var me = "DismissableLayerBranch",
|
|
180
|
-
const
|
|
186
|
+
z.displayName = fe;
|
|
187
|
+
var me = "DismissableLayerBranch", he = i.forwardRef((e, t) => {
|
|
188
|
+
const r = i.useContext(U), o = i.useRef(null), n = M(t, o);
|
|
181
189
|
return i.useEffect(() => {
|
|
182
190
|
const s = o.current;
|
|
183
191
|
if (s)
|
|
184
|
-
return
|
|
185
|
-
|
|
192
|
+
return r.branches.add(s), () => {
|
|
193
|
+
r.branches.delete(s);
|
|
186
194
|
};
|
|
187
|
-
}, [
|
|
195
|
+
}, [r.branches]), /* @__PURE__ */ d(j.div, { ...e, ref: n });
|
|
188
196
|
});
|
|
189
|
-
|
|
190
|
-
function
|
|
191
|
-
const
|
|
197
|
+
he.displayName = me;
|
|
198
|
+
function ve(e, t = globalThis == null ? void 0 : globalThis.document) {
|
|
199
|
+
const r = I(e), o = i.useRef(!1), n = i.useRef(() => {
|
|
192
200
|
});
|
|
193
201
|
return i.useEffect(() => {
|
|
194
|
-
const s = (
|
|
195
|
-
if (
|
|
196
|
-
let
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
202
|
+
const s = (a) => {
|
|
203
|
+
if (a.target && !o.current) {
|
|
204
|
+
let f = function() {
|
|
205
|
+
V(
|
|
206
|
+
pe,
|
|
207
|
+
r,
|
|
200
208
|
u,
|
|
201
209
|
{ discrete: !0 }
|
|
202
210
|
);
|
|
203
211
|
};
|
|
204
|
-
const u = { originalEvent:
|
|
205
|
-
|
|
212
|
+
const u = { originalEvent: a };
|
|
213
|
+
a.pointerType === "touch" ? (t.removeEventListener("click", n.current), n.current = f, t.addEventListener("click", n.current, { once: !0 })) : f();
|
|
206
214
|
} else
|
|
207
|
-
t.removeEventListener("click",
|
|
215
|
+
t.removeEventListener("click", n.current);
|
|
208
216
|
o.current = !1;
|
|
209
|
-
},
|
|
217
|
+
}, l = window.setTimeout(() => {
|
|
210
218
|
t.addEventListener("pointerdown", s);
|
|
211
219
|
}, 0);
|
|
212
220
|
return () => {
|
|
213
|
-
window.clearTimeout(
|
|
221
|
+
window.clearTimeout(l), t.removeEventListener("pointerdown", s), t.removeEventListener("click", n.current);
|
|
214
222
|
};
|
|
215
|
-
}, [t,
|
|
223
|
+
}, [t, r]), {
|
|
216
224
|
// ensures we check React component tree (not just DOM tree)
|
|
217
225
|
onPointerDownCapture: () => o.current = !0
|
|
218
226
|
};
|
|
219
227
|
}
|
|
220
|
-
function
|
|
221
|
-
const
|
|
228
|
+
function Ee(e, t = globalThis == null ? void 0 : globalThis.document) {
|
|
229
|
+
const r = I(e), o = i.useRef(!1);
|
|
222
230
|
return i.useEffect(() => {
|
|
223
|
-
const
|
|
224
|
-
s.target && !o.current &&
|
|
231
|
+
const n = (s) => {
|
|
232
|
+
s.target && !o.current && V(ye, r, { originalEvent: s }, {
|
|
225
233
|
discrete: !1
|
|
226
234
|
});
|
|
227
235
|
};
|
|
228
|
-
return t.addEventListener("focusin",
|
|
229
|
-
}, [t,
|
|
236
|
+
return t.addEventListener("focusin", n), () => t.removeEventListener("focusin", n);
|
|
237
|
+
}, [t, r]), {
|
|
230
238
|
onFocusCapture: () => o.current = !0,
|
|
231
239
|
onBlurCapture: () => o.current = !1
|
|
232
240
|
};
|
|
233
241
|
}
|
|
234
|
-
function
|
|
235
|
-
const e = new CustomEvent(
|
|
242
|
+
function _() {
|
|
243
|
+
const e = new CustomEvent(B);
|
|
236
244
|
document.dispatchEvent(e);
|
|
237
245
|
}
|
|
238
|
-
function
|
|
239
|
-
const
|
|
240
|
-
t &&
|
|
246
|
+
function V(e, t, r, { discrete: o }) {
|
|
247
|
+
const n = r.originalEvent.target, s = new CustomEvent(e, { bubbles: !1, cancelable: !0, detail: r });
|
|
248
|
+
t && n.addEventListener(e, t, { once: !0 }), o ? ue(n, s) : n.dispatchEvent(s);
|
|
241
249
|
}
|
|
242
|
-
var
|
|
243
|
-
},
|
|
244
|
-
function
|
|
250
|
+
var ge = globalThis != null && globalThis.document ? i.useLayoutEffect : () => {
|
|
251
|
+
}, be = i[" useInsertionEffect ".trim().toString()] || ge;
|
|
252
|
+
function Ce({
|
|
245
253
|
prop: e,
|
|
246
254
|
defaultProp: t,
|
|
247
|
-
onChange:
|
|
255
|
+
onChange: r = () => {
|
|
248
256
|
},
|
|
249
257
|
caller: o
|
|
250
258
|
}) {
|
|
251
|
-
const [
|
|
259
|
+
const [n, s, l] = Le({
|
|
252
260
|
defaultProp: t,
|
|
253
|
-
onChange:
|
|
254
|
-
}),
|
|
261
|
+
onChange: r
|
|
262
|
+
}), a = e !== void 0, f = a ? e : n;
|
|
255
263
|
{
|
|
256
264
|
const c = i.useRef(e !== void 0);
|
|
257
265
|
i.useEffect(() => {
|
|
258
|
-
const
|
|
259
|
-
|
|
260
|
-
`${o} is changing from ${
|
|
261
|
-
), c.current =
|
|
262
|
-
}, [
|
|
266
|
+
const y = c.current;
|
|
267
|
+
y !== a && console.warn(
|
|
268
|
+
`${o} is changing from ${y ? "controlled" : "uncontrolled"} to ${a ? "controlled" : "uncontrolled"}. Components should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled value for the lifetime of the component.`
|
|
269
|
+
), c.current = a;
|
|
270
|
+
}, [a, o]);
|
|
263
271
|
}
|
|
264
272
|
const u = i.useCallback(
|
|
265
273
|
(c) => {
|
|
266
|
-
var
|
|
267
|
-
if (
|
|
268
|
-
const
|
|
269
|
-
|
|
274
|
+
var y;
|
|
275
|
+
if (a) {
|
|
276
|
+
const m = Pe(c) ? c(e) : c;
|
|
277
|
+
m !== e && ((y = l.current) == null || y.call(l, m));
|
|
270
278
|
} else
|
|
271
279
|
s(c);
|
|
272
280
|
},
|
|
273
|
-
[
|
|
281
|
+
[a, e, s, l]
|
|
274
282
|
);
|
|
275
|
-
return [
|
|
283
|
+
return [f, u];
|
|
276
284
|
}
|
|
277
|
-
function
|
|
285
|
+
function Le({
|
|
278
286
|
defaultProp: e,
|
|
279
287
|
onChange: t
|
|
280
288
|
}) {
|
|
281
|
-
const [
|
|
282
|
-
return
|
|
289
|
+
const [r, o] = i.useState(e), n = i.useRef(r), s = i.useRef(t);
|
|
290
|
+
return be(() => {
|
|
283
291
|
s.current = t;
|
|
284
292
|
}, [t]), i.useEffect(() => {
|
|
285
|
-
var
|
|
286
|
-
|
|
287
|
-
}, [
|
|
293
|
+
var l;
|
|
294
|
+
n.current !== r && ((l = s.current) == null || l.call(s, r), n.current = r);
|
|
295
|
+
}, [r, n]), [r, o, s];
|
|
288
296
|
}
|
|
289
297
|
function Pe(e) {
|
|
290
298
|
return typeof e == "function";
|
|
291
299
|
}
|
|
292
|
-
const
|
|
300
|
+
const K = g.createContext({
|
|
293
301
|
layers: [],
|
|
294
302
|
setLayers: () => {
|
|
295
303
|
},
|
|
@@ -299,97 +307,97 @@ const Y = g.createContext({
|
|
|
299
307
|
},
|
|
300
308
|
removeTopLayer: () => {
|
|
301
309
|
}
|
|
302
|
-
}),
|
|
303
|
-
const [t,
|
|
304
|
-
|
|
305
|
-
},
|
|
306
|
-
|
|
310
|
+
}), je = ({ children: e }) => {
|
|
311
|
+
const [t, r] = g.useState([]), o = (l) => {
|
|
312
|
+
r((a) => [...a, l]);
|
|
313
|
+
}, n = (l) => {
|
|
314
|
+
r(t.filter((a) => a !== l));
|
|
307
315
|
}, s = () => {
|
|
308
|
-
const
|
|
309
|
-
|
|
316
|
+
const l = t[t.length - 1];
|
|
317
|
+
l && n(l);
|
|
310
318
|
};
|
|
311
319
|
return /* @__PURE__ */ d(
|
|
312
|
-
|
|
320
|
+
K.Provider,
|
|
313
321
|
{
|
|
314
|
-
value: { layers: t, setLayers:
|
|
322
|
+
value: { layers: t, setLayers: r, addLayer: o, removeLayer: n, removeTopLayer: s },
|
|
315
323
|
children: e
|
|
316
324
|
}
|
|
317
325
|
);
|
|
318
|
-
},
|
|
326
|
+
}, X = () => g.useContext(K), we = ({
|
|
319
327
|
defaultOpen: e,
|
|
320
328
|
open: t,
|
|
321
|
-
onOpenChange:
|
|
329
|
+
onOpenChange: r,
|
|
322
330
|
...o
|
|
323
331
|
}) => {
|
|
324
|
-
const [
|
|
332
|
+
const [n, s] = Ce({
|
|
325
333
|
prop: t,
|
|
326
|
-
onChange:
|
|
327
|
-
defaultProp: e
|
|
328
|
-
}),
|
|
334
|
+
onChange: r,
|
|
335
|
+
defaultProp: e ?? !1
|
|
336
|
+
}), l = X(), a = o.a11yTitle;
|
|
329
337
|
if (g.useEffect(() => {
|
|
330
|
-
!
|
|
331
|
-
}, [
|
|
332
|
-
return /* @__PURE__ */ d(
|
|
333
|
-
},
|
|
338
|
+
!n && l.layers.includes(a) && l.removeLayer(a);
|
|
339
|
+
}, [a, l, n]), !!n)
|
|
340
|
+
return /* @__PURE__ */ d(Re, { open: n, onOpenChange: s, ...o });
|
|
341
|
+
}, Re = ({
|
|
334
342
|
open: e,
|
|
335
343
|
onOpenChange: t,
|
|
336
|
-
a11yTitle:
|
|
344
|
+
a11yTitle: r,
|
|
337
345
|
a11yDescription: o,
|
|
338
|
-
children:
|
|
346
|
+
children: n,
|
|
339
347
|
// Focus scope props
|
|
340
348
|
trapped: s,
|
|
341
|
-
onMountAutoFocus:
|
|
342
|
-
onUnmountAutoFocus:
|
|
343
|
-
...
|
|
349
|
+
onMountAutoFocus: l,
|
|
350
|
+
onUnmountAutoFocus: a,
|
|
351
|
+
...f
|
|
344
352
|
}) => {
|
|
345
|
-
var C,
|
|
346
|
-
const u =
|
|
353
|
+
var C, P;
|
|
354
|
+
const u = r, c = X();
|
|
347
355
|
g.useEffect(() => {
|
|
348
356
|
!c || !e || c.layers.includes(u) || c.addLayer(u);
|
|
349
357
|
}, [u, c, e]);
|
|
350
|
-
const
|
|
358
|
+
const y = ((C = c.layers) == null ? void 0 : C.indexOf(u)) || 0, m = ((P = c.layers) == null ? void 0 : P.length) || 0, L = y !== 0, b = u === c.layers[c.layers.length - 1];
|
|
351
359
|
return /* @__PURE__ */ d(
|
|
352
|
-
|
|
360
|
+
z,
|
|
353
361
|
{
|
|
354
|
-
onEscapeKeyDown: (
|
|
355
|
-
b && (
|
|
362
|
+
onEscapeKeyDown: (h) => {
|
|
363
|
+
b && (h.preventDefault(), c.removeTopLayer(), t(!1));
|
|
356
364
|
},
|
|
357
|
-
onPointerDownOutside: (
|
|
358
|
-
b && (
|
|
365
|
+
onPointerDownOutside: (h) => {
|
|
366
|
+
b && (h.preventDefault(), c.removeTopLayer(), t(!1));
|
|
359
367
|
},
|
|
360
368
|
children: /* @__PURE__ */ S(
|
|
361
369
|
v.Root,
|
|
362
370
|
{
|
|
363
371
|
open: e,
|
|
364
|
-
onOpenChange: (
|
|
365
|
-
var
|
|
366
|
-
if (((
|
|
367
|
-
return
|
|
368
|
-
t(
|
|
372
|
+
onOpenChange: (h) => {
|
|
373
|
+
var w;
|
|
374
|
+
if (((w = c == null ? void 0 : c.layers) == null ? void 0 : w.length) > 0)
|
|
375
|
+
return h === !1 && u === c.layers[c.layers.length - 1] ? (c.removeLayer(u), t(!1)) : void 0;
|
|
376
|
+
t(h);
|
|
369
377
|
},
|
|
370
378
|
children: [
|
|
371
|
-
/* @__PURE__ */ S(
|
|
372
|
-
/* @__PURE__ */ d(v.Title, { children:
|
|
379
|
+
/* @__PURE__ */ S(G.Root, { children: [
|
|
380
|
+
/* @__PURE__ */ d(v.Title, { children: r }),
|
|
373
381
|
o && /* @__PURE__ */ d(v.Description, { children: o })
|
|
374
382
|
] }),
|
|
375
|
-
/* @__PURE__ */ d(
|
|
383
|
+
/* @__PURE__ */ d(ne, { children: e && // We add the className "tgph" here so that styles within
|
|
376
384
|
// the portal get scoped properly to telegraph
|
|
377
|
-
/* @__PURE__ */ d(
|
|
378
|
-
|
|
385
|
+
/* @__PURE__ */ d(q.Root, { className: "tgph", children: /* @__PURE__ */ d(xe, { layer: y, children: /* @__PURE__ */ d(
|
|
386
|
+
Z,
|
|
379
387
|
{
|
|
380
388
|
trapped: typeof s == "boolean" ? s : b,
|
|
381
|
-
onMountAutoFocus:
|
|
382
|
-
onUnmountAutoFocus:
|
|
389
|
+
onMountAutoFocus: l,
|
|
390
|
+
onUnmountAutoFocus: a,
|
|
383
391
|
asChild: !0,
|
|
384
|
-
children: /* @__PURE__ */ d(
|
|
392
|
+
children: /* @__PURE__ */ d(Q, { children: /* @__PURE__ */ d(
|
|
385
393
|
E,
|
|
386
394
|
{
|
|
387
395
|
as: T.div,
|
|
388
396
|
initial: {
|
|
389
|
-
top: `calc(var(--tgph-spacing-16) + var(--tgph-spacing-4) * ${
|
|
397
|
+
top: `calc(var(--tgph-spacing-16) + var(--tgph-spacing-4) * ${m - 1})`
|
|
390
398
|
},
|
|
391
399
|
animate: {
|
|
392
|
-
top: L ? `calc(var(--tgph-spacing-16) + var(--tgph-spacing-4) * ${
|
|
400
|
+
top: L ? `calc(var(--tgph-spacing-16) + var(--tgph-spacing-4) * ${y} )` : "var(--tgph-spacing-16)"
|
|
393
401
|
},
|
|
394
402
|
exit: { top: 0 },
|
|
395
403
|
transition: { type: "spring", duration: 0.3, bounce: 0 },
|
|
@@ -400,7 +408,7 @@ const Y = g.createContext({
|
|
|
400
408
|
left: 0,
|
|
401
409
|
maxHeight: "calc(100vh - var(--tgph-spacing-32))",
|
|
402
410
|
maxWidth: "calc(100vw - var(--tgph-spacing-8))",
|
|
403
|
-
zIndex: `calc(var(--tgph-zIndex-modal) + ${
|
|
411
|
+
zIndex: `calc(var(--tgph-zIndex-modal) + ${y})`
|
|
404
412
|
},
|
|
405
413
|
children: /* @__PURE__ */ d(
|
|
406
414
|
E,
|
|
@@ -408,7 +416,7 @@ const Y = g.createContext({
|
|
|
408
416
|
direction: "column",
|
|
409
417
|
as: T.div,
|
|
410
418
|
animate: {
|
|
411
|
-
scale: 1.02 - Math.abs(
|
|
419
|
+
scale: 1.02 - Math.abs(m - y) * 0.02,
|
|
412
420
|
transformOrigin: "center center"
|
|
413
421
|
},
|
|
414
422
|
transition: {
|
|
@@ -416,14 +424,14 @@ const Y = g.createContext({
|
|
|
416
424
|
bounce: 0,
|
|
417
425
|
type: "spring"
|
|
418
426
|
},
|
|
419
|
-
maxW:
|
|
420
|
-
w:
|
|
427
|
+
maxW: f.maxW ?? "160",
|
|
428
|
+
w: f.w ?? "full",
|
|
421
429
|
bg: "surface-1",
|
|
422
430
|
border: "px",
|
|
423
431
|
rounded: "4",
|
|
424
432
|
shadow: "3",
|
|
425
|
-
...
|
|
426
|
-
children:
|
|
433
|
+
...f,
|
|
434
|
+
children: n
|
|
427
435
|
},
|
|
428
436
|
`content-${u}`
|
|
429
437
|
)
|
|
@@ -438,9 +446,9 @@ const Y = g.createContext({
|
|
|
438
446
|
)
|
|
439
447
|
}
|
|
440
448
|
);
|
|
441
|
-
},
|
|
449
|
+
}, xe = ({ layer: e, children: t }) => e > 0 ? t : /* @__PURE__ */ S(v.Overlay, { children: [
|
|
442
450
|
/* @__PURE__ */ d(
|
|
443
|
-
|
|
451
|
+
te,
|
|
444
452
|
{
|
|
445
453
|
as: T.div,
|
|
446
454
|
initial: { opacity: 0 },
|
|
@@ -459,24 +467,24 @@ const Y = g.createContext({
|
|
|
459
467
|
}
|
|
460
468
|
),
|
|
461
469
|
t
|
|
462
|
-
] }),
|
|
463
|
-
({ children: e, ...t },
|
|
464
|
-
),
|
|
470
|
+
] }), De = g.forwardRef(
|
|
471
|
+
({ children: e, ...t }, r) => /* @__PURE__ */ d(v.Content, { ref: r, asChild: !0, ...t, children: /* @__PURE__ */ d(E, { direction: "column", h: "full", ...t, children: e }) })
|
|
472
|
+
), Oe = ({
|
|
465
473
|
size: e = "1",
|
|
466
474
|
variant: t = "ghost",
|
|
467
|
-
...
|
|
475
|
+
...r
|
|
468
476
|
}) => /* @__PURE__ */ d(v.Close, { asChild: !0, children: /* @__PURE__ */ d(
|
|
469
|
-
|
|
477
|
+
J,
|
|
470
478
|
{
|
|
471
|
-
icon: { icon:
|
|
479
|
+
icon: { icon: ee.X, alt: "Close Modal" },
|
|
472
480
|
variant: t,
|
|
473
481
|
size: e,
|
|
474
|
-
...
|
|
482
|
+
...r
|
|
475
483
|
}
|
|
476
|
-
) }),
|
|
484
|
+
) }), Se = ({
|
|
477
485
|
style: e,
|
|
478
486
|
children: t,
|
|
479
|
-
...
|
|
487
|
+
...r
|
|
480
488
|
}) => /* @__PURE__ */ d(
|
|
481
489
|
E,
|
|
482
490
|
{
|
|
@@ -487,10 +495,10 @@ const Y = g.createContext({
|
|
|
487
495
|
overflowY: "auto",
|
|
488
496
|
...e
|
|
489
497
|
},
|
|
490
|
-
...
|
|
498
|
+
...r,
|
|
491
499
|
children: t
|
|
492
500
|
}
|
|
493
|
-
),
|
|
501
|
+
), Te = ({
|
|
494
502
|
children: e,
|
|
495
503
|
...t
|
|
496
504
|
}) => /* @__PURE__ */ d(
|
|
@@ -505,7 +513,7 @@ const Y = g.createContext({
|
|
|
505
513
|
...t,
|
|
506
514
|
children: e
|
|
507
515
|
}
|
|
508
|
-
),
|
|
516
|
+
), Be = ({
|
|
509
517
|
children: e,
|
|
510
518
|
...t
|
|
511
519
|
}) => /* @__PURE__ */ d(
|
|
@@ -521,17 +529,17 @@ const Y = g.createContext({
|
|
|
521
529
|
...t,
|
|
522
530
|
children: e
|
|
523
531
|
}
|
|
524
|
-
),
|
|
525
|
-
Object.assign(
|
|
526
|
-
Root:
|
|
527
|
-
Content:
|
|
528
|
-
Close:
|
|
529
|
-
Body:
|
|
530
|
-
Header:
|
|
531
|
-
Footer:
|
|
532
|
+
), Ie = {};
|
|
533
|
+
Object.assign(Ie, {
|
|
534
|
+
Root: we,
|
|
535
|
+
Content: De,
|
|
536
|
+
Close: Oe,
|
|
537
|
+
Body: Se,
|
|
538
|
+
Header: Te,
|
|
539
|
+
Footer: Be
|
|
532
540
|
});
|
|
533
541
|
export {
|
|
534
|
-
|
|
535
|
-
|
|
542
|
+
Ie as Modal,
|
|
543
|
+
je as ModalStackingProvider
|
|
536
544
|
};
|
|
537
545
|
//# sourceMappingURL=index.mjs.map
|