@taskon/widget-react 0.0.1-beta.1
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/README.md +1065 -0
- package/dist/CommunityTaskList.css +4893 -0
- package/dist/EligibilityInfo.css +2337 -0
- package/dist/LeaderboardWidget.css +815 -0
- package/dist/PageBuilder.css +54 -0
- package/dist/Quest.css +4214 -0
- package/dist/TaskOnProvider.css +163 -0
- package/dist/TipPopover.css +210 -0
- package/dist/UserCenterWidget.css +297 -0
- package/dist/UserCenterWidget2.css +3519 -0
- package/dist/WidgetShell.css +182 -0
- package/dist/chunks/CommunityTaskList-DoPGZsw1.js +6813 -0
- package/dist/chunks/EligibilityInfo-C7GZ2G5u.js +22228 -0
- package/dist/chunks/LeaderboardWidget-CmYfDeHV.js +1068 -0
- package/dist/chunks/PageBuilder-Tmhf2GTS.js +150 -0
- package/dist/chunks/Quest-DKFZ-pPU.js +8839 -0
- package/dist/chunks/TaskOnProvider-BD6Vp2x8.js +1435 -0
- package/dist/chunks/ThemeProvider-wnSXrNQb.js +1118 -0
- package/dist/chunks/TipPopover-BrW8jo71.js +2926 -0
- package/dist/chunks/UserCenterWidget-BE329iS7.js +3546 -0
- package/dist/chunks/UserCenterWidget-BVw_IEEd.js +3989 -0
- package/dist/chunks/WidgetShell-D_5OjvNZ.js +1517 -0
- package/dist/chunks/common-ja-DWhTaFHb.js +23 -0
- package/dist/chunks/common-ko-80ezXsMG.js +23 -0
- package/dist/chunks/dynamic-import-helper-DxEFwm31.js +537 -0
- package/dist/chunks/index-CwMvO_wZ.js +777 -0
- package/dist/chunks/leaderboardwidget-ja-Bj6gz6y1.js +119 -0
- package/dist/chunks/leaderboardwidget-ko-f1cLO9ic.js +119 -0
- package/dist/chunks/useToast-B-wyO5zL.js +93 -0
- package/dist/chunks/useWidgetLocale-JDelxtt8.js +74 -0
- package/dist/chunks/usercenter-ja-uu-XfVF9.js +332 -0
- package/dist/chunks/usercenter-ko-DYgUOVzd.js +332 -0
- package/dist/community-task.d.ts +451 -0
- package/dist/community-task.js +9 -0
- package/dist/core.d.ts +803 -0
- package/dist/core.js +22 -0
- package/dist/dynamic-import-helper.css +389 -0
- package/dist/index.d.ts +1660 -0
- package/dist/index.js +41 -0
- package/dist/leaderboard.d.ts +547 -0
- package/dist/leaderboard.js +18 -0
- package/dist/page-builder.d.ts +20 -0
- package/dist/page-builder.js +4 -0
- package/dist/quest.d.ts +400 -0
- package/dist/quest.js +8 -0
- package/dist/user-center.d.ts +1780 -0
- package/dist/user-center.js +713 -0
- package/package.json +105 -0
|
@@ -0,0 +1,1517 @@
|
|
|
1
|
+
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import { useState, useEffect, useMemo } from "react";
|
|
4
|
+
import { e as useLayoutEffect2, h as useCallbackRef$1, g as useComposedRefs, P as Primitive, i as useControllableState, f as createContextScope, k as Presence, l as Portal$1, j as composeEventHandlers, m as createSlot, D as DismissableLayer, o as createContext2, b as useTaskOnContext, T as ThemeProvider } from "./ThemeProvider-wnSXrNQb.js";
|
|
5
|
+
import { createWidgetApi, parseWidgetConfig } from "@taskon/core";
|
|
6
|
+
import '../WidgetShell.css';var useReactId = React[" useId ".trim().toString()] || (() => void 0);
|
|
7
|
+
var count$1 = 0;
|
|
8
|
+
function useId(deterministicId) {
|
|
9
|
+
const [id, setId] = React.useState(useReactId());
|
|
10
|
+
useLayoutEffect2(() => {
|
|
11
|
+
setId((reactId) => reactId ?? String(count$1++));
|
|
12
|
+
}, [deterministicId]);
|
|
13
|
+
return deterministicId || (id ? `radix-${id}` : "");
|
|
14
|
+
}
|
|
15
|
+
var AUTOFOCUS_ON_MOUNT = "focusScope.autoFocusOnMount";
|
|
16
|
+
var AUTOFOCUS_ON_UNMOUNT = "focusScope.autoFocusOnUnmount";
|
|
17
|
+
var EVENT_OPTIONS = { bubbles: false, cancelable: true };
|
|
18
|
+
var FOCUS_SCOPE_NAME = "FocusScope";
|
|
19
|
+
var FocusScope = React.forwardRef((props, forwardedRef) => {
|
|
20
|
+
const {
|
|
21
|
+
loop = false,
|
|
22
|
+
trapped = false,
|
|
23
|
+
onMountAutoFocus: onMountAutoFocusProp,
|
|
24
|
+
onUnmountAutoFocus: onUnmountAutoFocusProp,
|
|
25
|
+
...scopeProps
|
|
26
|
+
} = props;
|
|
27
|
+
const [container, setContainer] = React.useState(null);
|
|
28
|
+
const onMountAutoFocus = useCallbackRef$1(onMountAutoFocusProp);
|
|
29
|
+
const onUnmountAutoFocus = useCallbackRef$1(onUnmountAutoFocusProp);
|
|
30
|
+
const lastFocusedElementRef = React.useRef(null);
|
|
31
|
+
const composedRefs = useComposedRefs(forwardedRef, (node) => setContainer(node));
|
|
32
|
+
const focusScope = React.useRef({
|
|
33
|
+
paused: false,
|
|
34
|
+
pause() {
|
|
35
|
+
this.paused = true;
|
|
36
|
+
},
|
|
37
|
+
resume() {
|
|
38
|
+
this.paused = false;
|
|
39
|
+
}
|
|
40
|
+
}).current;
|
|
41
|
+
React.useEffect(() => {
|
|
42
|
+
if (trapped) {
|
|
43
|
+
let handleFocusIn2 = function(event) {
|
|
44
|
+
if (focusScope.paused || !container) return;
|
|
45
|
+
const target = event.target;
|
|
46
|
+
if (container.contains(target)) {
|
|
47
|
+
lastFocusedElementRef.current = target;
|
|
48
|
+
} else {
|
|
49
|
+
focus(lastFocusedElementRef.current, { select: true });
|
|
50
|
+
}
|
|
51
|
+
}, handleFocusOut2 = function(event) {
|
|
52
|
+
if (focusScope.paused || !container) return;
|
|
53
|
+
const relatedTarget = event.relatedTarget;
|
|
54
|
+
if (relatedTarget === null) return;
|
|
55
|
+
if (!container.contains(relatedTarget)) {
|
|
56
|
+
focus(lastFocusedElementRef.current, { select: true });
|
|
57
|
+
}
|
|
58
|
+
}, handleMutations2 = function(mutations) {
|
|
59
|
+
const focusedElement = document.activeElement;
|
|
60
|
+
if (focusedElement !== document.body) return;
|
|
61
|
+
for (const mutation of mutations) {
|
|
62
|
+
if (mutation.removedNodes.length > 0) focus(container);
|
|
63
|
+
}
|
|
64
|
+
};
|
|
65
|
+
document.addEventListener("focusin", handleFocusIn2);
|
|
66
|
+
document.addEventListener("focusout", handleFocusOut2);
|
|
67
|
+
const mutationObserver = new MutationObserver(handleMutations2);
|
|
68
|
+
if (container) mutationObserver.observe(container, { childList: true, subtree: true });
|
|
69
|
+
return () => {
|
|
70
|
+
document.removeEventListener("focusin", handleFocusIn2);
|
|
71
|
+
document.removeEventListener("focusout", handleFocusOut2);
|
|
72
|
+
mutationObserver.disconnect();
|
|
73
|
+
};
|
|
74
|
+
}
|
|
75
|
+
}, [trapped, container, focusScope.paused]);
|
|
76
|
+
React.useEffect(() => {
|
|
77
|
+
if (container) {
|
|
78
|
+
focusScopesStack.add(focusScope);
|
|
79
|
+
const previouslyFocusedElement = document.activeElement;
|
|
80
|
+
const hasFocusedCandidate = container.contains(previouslyFocusedElement);
|
|
81
|
+
if (!hasFocusedCandidate) {
|
|
82
|
+
const mountEvent = new CustomEvent(AUTOFOCUS_ON_MOUNT, EVENT_OPTIONS);
|
|
83
|
+
container.addEventListener(AUTOFOCUS_ON_MOUNT, onMountAutoFocus);
|
|
84
|
+
container.dispatchEvent(mountEvent);
|
|
85
|
+
if (!mountEvent.defaultPrevented) {
|
|
86
|
+
focusFirst(removeLinks(getTabbableCandidates(container)), { select: true });
|
|
87
|
+
if (document.activeElement === previouslyFocusedElement) {
|
|
88
|
+
focus(container);
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
return () => {
|
|
93
|
+
container.removeEventListener(AUTOFOCUS_ON_MOUNT, onMountAutoFocus);
|
|
94
|
+
setTimeout(() => {
|
|
95
|
+
const unmountEvent = new CustomEvent(AUTOFOCUS_ON_UNMOUNT, EVENT_OPTIONS);
|
|
96
|
+
container.addEventListener(AUTOFOCUS_ON_UNMOUNT, onUnmountAutoFocus);
|
|
97
|
+
container.dispatchEvent(unmountEvent);
|
|
98
|
+
if (!unmountEvent.defaultPrevented) {
|
|
99
|
+
focus(previouslyFocusedElement ?? document.body, { select: true });
|
|
100
|
+
}
|
|
101
|
+
container.removeEventListener(AUTOFOCUS_ON_UNMOUNT, onUnmountAutoFocus);
|
|
102
|
+
focusScopesStack.remove(focusScope);
|
|
103
|
+
}, 0);
|
|
104
|
+
};
|
|
105
|
+
}
|
|
106
|
+
}, [container, onMountAutoFocus, onUnmountAutoFocus, focusScope]);
|
|
107
|
+
const handleKeyDown = React.useCallback(
|
|
108
|
+
(event) => {
|
|
109
|
+
if (!loop && !trapped) return;
|
|
110
|
+
if (focusScope.paused) return;
|
|
111
|
+
const isTabKey = event.key === "Tab" && !event.altKey && !event.ctrlKey && !event.metaKey;
|
|
112
|
+
const focusedElement = document.activeElement;
|
|
113
|
+
if (isTabKey && focusedElement) {
|
|
114
|
+
const container2 = event.currentTarget;
|
|
115
|
+
const [first, last] = getTabbableEdges(container2);
|
|
116
|
+
const hasTabbableElementsInside = first && last;
|
|
117
|
+
if (!hasTabbableElementsInside) {
|
|
118
|
+
if (focusedElement === container2) event.preventDefault();
|
|
119
|
+
} else {
|
|
120
|
+
if (!event.shiftKey && focusedElement === last) {
|
|
121
|
+
event.preventDefault();
|
|
122
|
+
if (loop) focus(first, { select: true });
|
|
123
|
+
} else if (event.shiftKey && focusedElement === first) {
|
|
124
|
+
event.preventDefault();
|
|
125
|
+
if (loop) focus(last, { select: true });
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
},
|
|
130
|
+
[loop, trapped, focusScope.paused]
|
|
131
|
+
);
|
|
132
|
+
return /* @__PURE__ */ jsx(Primitive.div, { tabIndex: -1, ...scopeProps, ref: composedRefs, onKeyDown: handleKeyDown });
|
|
133
|
+
});
|
|
134
|
+
FocusScope.displayName = FOCUS_SCOPE_NAME;
|
|
135
|
+
function focusFirst(candidates, { select = false } = {}) {
|
|
136
|
+
const previouslyFocusedElement = document.activeElement;
|
|
137
|
+
for (const candidate of candidates) {
|
|
138
|
+
focus(candidate, { select });
|
|
139
|
+
if (document.activeElement !== previouslyFocusedElement) return;
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
function getTabbableEdges(container) {
|
|
143
|
+
const candidates = getTabbableCandidates(container);
|
|
144
|
+
const first = findVisible(candidates, container);
|
|
145
|
+
const last = findVisible(candidates.reverse(), container);
|
|
146
|
+
return [first, last];
|
|
147
|
+
}
|
|
148
|
+
function getTabbableCandidates(container) {
|
|
149
|
+
const nodes = [];
|
|
150
|
+
const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
|
|
151
|
+
acceptNode: (node) => {
|
|
152
|
+
const isHiddenInput = node.tagName === "INPUT" && node.type === "hidden";
|
|
153
|
+
if (node.disabled || node.hidden || isHiddenInput) return NodeFilter.FILTER_SKIP;
|
|
154
|
+
return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
|
|
155
|
+
}
|
|
156
|
+
});
|
|
157
|
+
while (walker.nextNode()) nodes.push(walker.currentNode);
|
|
158
|
+
return nodes;
|
|
159
|
+
}
|
|
160
|
+
function findVisible(elements, container) {
|
|
161
|
+
for (const element of elements) {
|
|
162
|
+
if (!isHidden(element, { upTo: container })) return element;
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
function isHidden(node, { upTo }) {
|
|
166
|
+
if (getComputedStyle(node).visibility === "hidden") return true;
|
|
167
|
+
while (node) {
|
|
168
|
+
if (upTo !== void 0 && node === upTo) return false;
|
|
169
|
+
if (getComputedStyle(node).display === "none") return true;
|
|
170
|
+
node = node.parentElement;
|
|
171
|
+
}
|
|
172
|
+
return false;
|
|
173
|
+
}
|
|
174
|
+
function isSelectableInput(element) {
|
|
175
|
+
return element instanceof HTMLInputElement && "select" in element;
|
|
176
|
+
}
|
|
177
|
+
function focus(element, { select = false } = {}) {
|
|
178
|
+
if (element && element.focus) {
|
|
179
|
+
const previouslyFocusedElement = document.activeElement;
|
|
180
|
+
element.focus({ preventScroll: true });
|
|
181
|
+
if (element !== previouslyFocusedElement && isSelectableInput(element) && select)
|
|
182
|
+
element.select();
|
|
183
|
+
}
|
|
184
|
+
}
|
|
185
|
+
var focusScopesStack = createFocusScopesStack();
|
|
186
|
+
function createFocusScopesStack() {
|
|
187
|
+
let stack = [];
|
|
188
|
+
return {
|
|
189
|
+
add(focusScope) {
|
|
190
|
+
const activeFocusScope = stack[0];
|
|
191
|
+
if (focusScope !== activeFocusScope) {
|
|
192
|
+
activeFocusScope == null ? void 0 : activeFocusScope.pause();
|
|
193
|
+
}
|
|
194
|
+
stack = arrayRemove(stack, focusScope);
|
|
195
|
+
stack.unshift(focusScope);
|
|
196
|
+
},
|
|
197
|
+
remove(focusScope) {
|
|
198
|
+
var _a;
|
|
199
|
+
stack = arrayRemove(stack, focusScope);
|
|
200
|
+
(_a = stack[0]) == null ? void 0 : _a.resume();
|
|
201
|
+
}
|
|
202
|
+
};
|
|
203
|
+
}
|
|
204
|
+
function arrayRemove(array, item) {
|
|
205
|
+
const updatedArray = [...array];
|
|
206
|
+
const index = updatedArray.indexOf(item);
|
|
207
|
+
if (index !== -1) {
|
|
208
|
+
updatedArray.splice(index, 1);
|
|
209
|
+
}
|
|
210
|
+
return updatedArray;
|
|
211
|
+
}
|
|
212
|
+
function removeLinks(items) {
|
|
213
|
+
return items.filter((item) => item.tagName !== "A");
|
|
214
|
+
}
|
|
215
|
+
var count = 0;
|
|
216
|
+
function useFocusGuards() {
|
|
217
|
+
React.useEffect(() => {
|
|
218
|
+
const edgeGuards = document.querySelectorAll("[data-radix-focus-guard]");
|
|
219
|
+
document.body.insertAdjacentElement("afterbegin", edgeGuards[0] ?? createFocusGuard());
|
|
220
|
+
document.body.insertAdjacentElement("beforeend", edgeGuards[1] ?? createFocusGuard());
|
|
221
|
+
count++;
|
|
222
|
+
return () => {
|
|
223
|
+
if (count === 1) {
|
|
224
|
+
document.querySelectorAll("[data-radix-focus-guard]").forEach((node) => node.remove());
|
|
225
|
+
}
|
|
226
|
+
count--;
|
|
227
|
+
};
|
|
228
|
+
}, []);
|
|
229
|
+
}
|
|
230
|
+
function createFocusGuard() {
|
|
231
|
+
const element = document.createElement("span");
|
|
232
|
+
element.setAttribute("data-radix-focus-guard", "");
|
|
233
|
+
element.tabIndex = 0;
|
|
234
|
+
element.style.outline = "none";
|
|
235
|
+
element.style.opacity = "0";
|
|
236
|
+
element.style.position = "fixed";
|
|
237
|
+
element.style.pointerEvents = "none";
|
|
238
|
+
return element;
|
|
239
|
+
}
|
|
240
|
+
var __assign = function() {
|
|
241
|
+
__assign = Object.assign || function __assign2(t) {
|
|
242
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
243
|
+
s = arguments[i];
|
|
244
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
|
245
|
+
}
|
|
246
|
+
return t;
|
|
247
|
+
};
|
|
248
|
+
return __assign.apply(this, arguments);
|
|
249
|
+
};
|
|
250
|
+
function __rest(s, e) {
|
|
251
|
+
var t = {};
|
|
252
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
253
|
+
t[p] = s[p];
|
|
254
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
255
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
256
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
257
|
+
t[p[i]] = s[p[i]];
|
|
258
|
+
}
|
|
259
|
+
return t;
|
|
260
|
+
}
|
|
261
|
+
function __spreadArray(to, from, pack) {
|
|
262
|
+
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
263
|
+
if (ar || !(i in from)) {
|
|
264
|
+
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
265
|
+
ar[i] = from[i];
|
|
266
|
+
}
|
|
267
|
+
}
|
|
268
|
+
return to.concat(ar || Array.prototype.slice.call(from));
|
|
269
|
+
}
|
|
270
|
+
typeof SuppressedError === "function" ? SuppressedError : function(error, suppressed, message) {
|
|
271
|
+
var e = new Error(message);
|
|
272
|
+
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
273
|
+
};
|
|
274
|
+
var zeroRightClassName = "right-scroll-bar-position";
|
|
275
|
+
var fullWidthClassName = "width-before-scroll-bar";
|
|
276
|
+
var noScrollbarsClassName = "with-scroll-bars-hidden";
|
|
277
|
+
var removedBarSizeVariable = "--removed-body-scroll-bar-size";
|
|
278
|
+
function assignRef(ref, value) {
|
|
279
|
+
if (typeof ref === "function") {
|
|
280
|
+
ref(value);
|
|
281
|
+
} else if (ref) {
|
|
282
|
+
ref.current = value;
|
|
283
|
+
}
|
|
284
|
+
return ref;
|
|
285
|
+
}
|
|
286
|
+
function useCallbackRef(initialValue, callback) {
|
|
287
|
+
var ref = useState(function() {
|
|
288
|
+
return {
|
|
289
|
+
// value
|
|
290
|
+
value: initialValue,
|
|
291
|
+
// last callback
|
|
292
|
+
callback,
|
|
293
|
+
// "memoized" public interface
|
|
294
|
+
facade: {
|
|
295
|
+
get current() {
|
|
296
|
+
return ref.value;
|
|
297
|
+
},
|
|
298
|
+
set current(value) {
|
|
299
|
+
var last = ref.value;
|
|
300
|
+
if (last !== value) {
|
|
301
|
+
ref.value = value;
|
|
302
|
+
ref.callback(value, last);
|
|
303
|
+
}
|
|
304
|
+
}
|
|
305
|
+
}
|
|
306
|
+
};
|
|
307
|
+
})[0];
|
|
308
|
+
ref.callback = callback;
|
|
309
|
+
return ref.facade;
|
|
310
|
+
}
|
|
311
|
+
var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
|
|
312
|
+
var currentValues = /* @__PURE__ */ new WeakMap();
|
|
313
|
+
function useMergeRefs(refs, defaultValue) {
|
|
314
|
+
var callbackRef = useCallbackRef(null, function(newValue) {
|
|
315
|
+
return refs.forEach(function(ref) {
|
|
316
|
+
return assignRef(ref, newValue);
|
|
317
|
+
});
|
|
318
|
+
});
|
|
319
|
+
useIsomorphicLayoutEffect(function() {
|
|
320
|
+
var oldValue = currentValues.get(callbackRef);
|
|
321
|
+
if (oldValue) {
|
|
322
|
+
var prevRefs_1 = new Set(oldValue);
|
|
323
|
+
var nextRefs_1 = new Set(refs);
|
|
324
|
+
var current_1 = callbackRef.current;
|
|
325
|
+
prevRefs_1.forEach(function(ref) {
|
|
326
|
+
if (!nextRefs_1.has(ref)) {
|
|
327
|
+
assignRef(ref, null);
|
|
328
|
+
}
|
|
329
|
+
});
|
|
330
|
+
nextRefs_1.forEach(function(ref) {
|
|
331
|
+
if (!prevRefs_1.has(ref)) {
|
|
332
|
+
assignRef(ref, current_1);
|
|
333
|
+
}
|
|
334
|
+
});
|
|
335
|
+
}
|
|
336
|
+
currentValues.set(callbackRef, refs);
|
|
337
|
+
}, [refs]);
|
|
338
|
+
return callbackRef;
|
|
339
|
+
}
|
|
340
|
+
function ItoI(a) {
|
|
341
|
+
return a;
|
|
342
|
+
}
|
|
343
|
+
function innerCreateMedium(defaults, middleware) {
|
|
344
|
+
if (middleware === void 0) {
|
|
345
|
+
middleware = ItoI;
|
|
346
|
+
}
|
|
347
|
+
var buffer = [];
|
|
348
|
+
var assigned = false;
|
|
349
|
+
var medium = {
|
|
350
|
+
read: function() {
|
|
351
|
+
if (assigned) {
|
|
352
|
+
throw new Error("Sidecar: could not `read` from an `assigned` medium. `read` could be used only with `useMedium`.");
|
|
353
|
+
}
|
|
354
|
+
if (buffer.length) {
|
|
355
|
+
return buffer[buffer.length - 1];
|
|
356
|
+
}
|
|
357
|
+
return defaults;
|
|
358
|
+
},
|
|
359
|
+
useMedium: function(data) {
|
|
360
|
+
var item = middleware(data, assigned);
|
|
361
|
+
buffer.push(item);
|
|
362
|
+
return function() {
|
|
363
|
+
buffer = buffer.filter(function(x) {
|
|
364
|
+
return x !== item;
|
|
365
|
+
});
|
|
366
|
+
};
|
|
367
|
+
},
|
|
368
|
+
assignSyncMedium: function(cb) {
|
|
369
|
+
assigned = true;
|
|
370
|
+
while (buffer.length) {
|
|
371
|
+
var cbs = buffer;
|
|
372
|
+
buffer = [];
|
|
373
|
+
cbs.forEach(cb);
|
|
374
|
+
}
|
|
375
|
+
buffer = {
|
|
376
|
+
push: function(x) {
|
|
377
|
+
return cb(x);
|
|
378
|
+
},
|
|
379
|
+
filter: function() {
|
|
380
|
+
return buffer;
|
|
381
|
+
}
|
|
382
|
+
};
|
|
383
|
+
},
|
|
384
|
+
assignMedium: function(cb) {
|
|
385
|
+
assigned = true;
|
|
386
|
+
var pendingQueue = [];
|
|
387
|
+
if (buffer.length) {
|
|
388
|
+
var cbs = buffer;
|
|
389
|
+
buffer = [];
|
|
390
|
+
cbs.forEach(cb);
|
|
391
|
+
pendingQueue = buffer;
|
|
392
|
+
}
|
|
393
|
+
var executeQueue = function() {
|
|
394
|
+
var cbs2 = pendingQueue;
|
|
395
|
+
pendingQueue = [];
|
|
396
|
+
cbs2.forEach(cb);
|
|
397
|
+
};
|
|
398
|
+
var cycle = function() {
|
|
399
|
+
return Promise.resolve().then(executeQueue);
|
|
400
|
+
};
|
|
401
|
+
cycle();
|
|
402
|
+
buffer = {
|
|
403
|
+
push: function(x) {
|
|
404
|
+
pendingQueue.push(x);
|
|
405
|
+
cycle();
|
|
406
|
+
},
|
|
407
|
+
filter: function(filter) {
|
|
408
|
+
pendingQueue = pendingQueue.filter(filter);
|
|
409
|
+
return buffer;
|
|
410
|
+
}
|
|
411
|
+
};
|
|
412
|
+
}
|
|
413
|
+
};
|
|
414
|
+
return medium;
|
|
415
|
+
}
|
|
416
|
+
function createSidecarMedium(options) {
|
|
417
|
+
if (options === void 0) {
|
|
418
|
+
options = {};
|
|
419
|
+
}
|
|
420
|
+
var medium = innerCreateMedium(null);
|
|
421
|
+
medium.options = __assign({ async: true, ssr: false }, options);
|
|
422
|
+
return medium;
|
|
423
|
+
}
|
|
424
|
+
var SideCar$1 = function(_a) {
|
|
425
|
+
var sideCar = _a.sideCar, rest = __rest(_a, ["sideCar"]);
|
|
426
|
+
if (!sideCar) {
|
|
427
|
+
throw new Error("Sidecar: please provide `sideCar` property to import the right car");
|
|
428
|
+
}
|
|
429
|
+
var Target = sideCar.read();
|
|
430
|
+
if (!Target) {
|
|
431
|
+
throw new Error("Sidecar medium not found");
|
|
432
|
+
}
|
|
433
|
+
return React.createElement(Target, __assign({}, rest));
|
|
434
|
+
};
|
|
435
|
+
SideCar$1.isSideCarExport = true;
|
|
436
|
+
function exportSidecar(medium, exported) {
|
|
437
|
+
medium.useMedium(exported);
|
|
438
|
+
return SideCar$1;
|
|
439
|
+
}
|
|
440
|
+
var effectCar = createSidecarMedium();
|
|
441
|
+
var nothing = function() {
|
|
442
|
+
return;
|
|
443
|
+
};
|
|
444
|
+
var RemoveScroll = React.forwardRef(function(props, parentRef) {
|
|
445
|
+
var ref = React.useRef(null);
|
|
446
|
+
var _a = React.useState({
|
|
447
|
+
onScrollCapture: nothing,
|
|
448
|
+
onWheelCapture: nothing,
|
|
449
|
+
onTouchMoveCapture: nothing
|
|
450
|
+
}), callbacks = _a[0], setCallbacks = _a[1];
|
|
451
|
+
var forwardProps = props.forwardProps, children = props.children, className = props.className, removeScrollBar = props.removeScrollBar, enabled = props.enabled, shards = props.shards, sideCar = props.sideCar, noRelative = props.noRelative, noIsolation = props.noIsolation, inert = props.inert, allowPinchZoom = props.allowPinchZoom, _b = props.as, Container = _b === void 0 ? "div" : _b, gapMode = props.gapMode, rest = __rest(props, ["forwardProps", "children", "className", "removeScrollBar", "enabled", "shards", "sideCar", "noRelative", "noIsolation", "inert", "allowPinchZoom", "as", "gapMode"]);
|
|
452
|
+
var SideCar2 = sideCar;
|
|
453
|
+
var containerRef = useMergeRefs([ref, parentRef]);
|
|
454
|
+
var containerProps = __assign(__assign({}, rest), callbacks);
|
|
455
|
+
return React.createElement(
|
|
456
|
+
React.Fragment,
|
|
457
|
+
null,
|
|
458
|
+
enabled && React.createElement(SideCar2, { sideCar: effectCar, removeScrollBar, shards, noRelative, noIsolation, inert, setCallbacks, allowPinchZoom: !!allowPinchZoom, lockRef: ref, gapMode }),
|
|
459
|
+
forwardProps ? React.cloneElement(React.Children.only(children), __assign(__assign({}, containerProps), { ref: containerRef })) : React.createElement(Container, __assign({}, containerProps, { className, ref: containerRef }), children)
|
|
460
|
+
);
|
|
461
|
+
});
|
|
462
|
+
RemoveScroll.defaultProps = {
|
|
463
|
+
enabled: true,
|
|
464
|
+
removeScrollBar: true,
|
|
465
|
+
inert: false
|
|
466
|
+
};
|
|
467
|
+
RemoveScroll.classNames = {
|
|
468
|
+
fullWidth: fullWidthClassName,
|
|
469
|
+
zeroRight: zeroRightClassName
|
|
470
|
+
};
|
|
471
|
+
var getNonce = function() {
|
|
472
|
+
if (typeof __webpack_nonce__ !== "undefined") {
|
|
473
|
+
return __webpack_nonce__;
|
|
474
|
+
}
|
|
475
|
+
return void 0;
|
|
476
|
+
};
|
|
477
|
+
function makeStyleTag() {
|
|
478
|
+
if (!document)
|
|
479
|
+
return null;
|
|
480
|
+
var tag = document.createElement("style");
|
|
481
|
+
tag.type = "text/css";
|
|
482
|
+
var nonce = getNonce();
|
|
483
|
+
if (nonce) {
|
|
484
|
+
tag.setAttribute("nonce", nonce);
|
|
485
|
+
}
|
|
486
|
+
return tag;
|
|
487
|
+
}
|
|
488
|
+
function injectStyles(tag, css) {
|
|
489
|
+
if (tag.styleSheet) {
|
|
490
|
+
tag.styleSheet.cssText = css;
|
|
491
|
+
} else {
|
|
492
|
+
tag.appendChild(document.createTextNode(css));
|
|
493
|
+
}
|
|
494
|
+
}
|
|
495
|
+
function insertStyleTag(tag) {
|
|
496
|
+
var head = document.head || document.getElementsByTagName("head")[0];
|
|
497
|
+
head.appendChild(tag);
|
|
498
|
+
}
|
|
499
|
+
var stylesheetSingleton = function() {
|
|
500
|
+
var counter = 0;
|
|
501
|
+
var stylesheet = null;
|
|
502
|
+
return {
|
|
503
|
+
add: function(style) {
|
|
504
|
+
if (counter == 0) {
|
|
505
|
+
if (stylesheet = makeStyleTag()) {
|
|
506
|
+
injectStyles(stylesheet, style);
|
|
507
|
+
insertStyleTag(stylesheet);
|
|
508
|
+
}
|
|
509
|
+
}
|
|
510
|
+
counter++;
|
|
511
|
+
},
|
|
512
|
+
remove: function() {
|
|
513
|
+
counter--;
|
|
514
|
+
if (!counter && stylesheet) {
|
|
515
|
+
stylesheet.parentNode && stylesheet.parentNode.removeChild(stylesheet);
|
|
516
|
+
stylesheet = null;
|
|
517
|
+
}
|
|
518
|
+
}
|
|
519
|
+
};
|
|
520
|
+
};
|
|
521
|
+
var styleHookSingleton = function() {
|
|
522
|
+
var sheet = stylesheetSingleton();
|
|
523
|
+
return function(styles, isDynamic) {
|
|
524
|
+
React.useEffect(function() {
|
|
525
|
+
sheet.add(styles);
|
|
526
|
+
return function() {
|
|
527
|
+
sheet.remove();
|
|
528
|
+
};
|
|
529
|
+
}, [styles && isDynamic]);
|
|
530
|
+
};
|
|
531
|
+
};
|
|
532
|
+
var styleSingleton = function() {
|
|
533
|
+
var useStyle = styleHookSingleton();
|
|
534
|
+
var Sheet = function(_a) {
|
|
535
|
+
var styles = _a.styles, dynamic = _a.dynamic;
|
|
536
|
+
useStyle(styles, dynamic);
|
|
537
|
+
return null;
|
|
538
|
+
};
|
|
539
|
+
return Sheet;
|
|
540
|
+
};
|
|
541
|
+
var zeroGap = {
|
|
542
|
+
left: 0,
|
|
543
|
+
top: 0,
|
|
544
|
+
right: 0,
|
|
545
|
+
gap: 0
|
|
546
|
+
};
|
|
547
|
+
var parse = function(x) {
|
|
548
|
+
return parseInt(x || "", 10) || 0;
|
|
549
|
+
};
|
|
550
|
+
var getOffset = function(gapMode) {
|
|
551
|
+
var cs = window.getComputedStyle(document.body);
|
|
552
|
+
var left = cs[gapMode === "padding" ? "paddingLeft" : "marginLeft"];
|
|
553
|
+
var top = cs[gapMode === "padding" ? "paddingTop" : "marginTop"];
|
|
554
|
+
var right = cs[gapMode === "padding" ? "paddingRight" : "marginRight"];
|
|
555
|
+
return [parse(left), parse(top), parse(right)];
|
|
556
|
+
};
|
|
557
|
+
var getGapWidth = function(gapMode) {
|
|
558
|
+
if (gapMode === void 0) {
|
|
559
|
+
gapMode = "margin";
|
|
560
|
+
}
|
|
561
|
+
if (typeof window === "undefined") {
|
|
562
|
+
return zeroGap;
|
|
563
|
+
}
|
|
564
|
+
var offsets = getOffset(gapMode);
|
|
565
|
+
var documentWidth = document.documentElement.clientWidth;
|
|
566
|
+
var windowWidth = window.innerWidth;
|
|
567
|
+
return {
|
|
568
|
+
left: offsets[0],
|
|
569
|
+
top: offsets[1],
|
|
570
|
+
right: offsets[2],
|
|
571
|
+
gap: Math.max(0, windowWidth - documentWidth + offsets[2] - offsets[0])
|
|
572
|
+
};
|
|
573
|
+
};
|
|
574
|
+
var Style = styleSingleton();
|
|
575
|
+
var lockAttribute = "data-scroll-locked";
|
|
576
|
+
var getStyles = function(_a, allowRelative, gapMode, important) {
|
|
577
|
+
var left = _a.left, top = _a.top, right = _a.right, gap = _a.gap;
|
|
578
|
+
if (gapMode === void 0) {
|
|
579
|
+
gapMode = "margin";
|
|
580
|
+
}
|
|
581
|
+
return "\n .".concat(noScrollbarsClassName, " {\n overflow: hidden ").concat(important, ";\n padding-right: ").concat(gap, "px ").concat(important, ";\n }\n body[").concat(lockAttribute, "] {\n overflow: hidden ").concat(important, ";\n overscroll-behavior: contain;\n ").concat([
|
|
582
|
+
allowRelative && "position: relative ".concat(important, ";"),
|
|
583
|
+
gapMode === "margin" && "\n padding-left: ".concat(left, "px;\n padding-top: ").concat(top, "px;\n padding-right: ").concat(right, "px;\n margin-left:0;\n margin-top:0;\n margin-right: ").concat(gap, "px ").concat(important, ";\n "),
|
|
584
|
+
gapMode === "padding" && "padding-right: ".concat(gap, "px ").concat(important, ";")
|
|
585
|
+
].filter(Boolean).join(""), "\n }\n \n .").concat(zeroRightClassName, " {\n right: ").concat(gap, "px ").concat(important, ";\n }\n \n .").concat(fullWidthClassName, " {\n margin-right: ").concat(gap, "px ").concat(important, ";\n }\n \n .").concat(zeroRightClassName, " .").concat(zeroRightClassName, " {\n right: 0 ").concat(important, ";\n }\n \n .").concat(fullWidthClassName, " .").concat(fullWidthClassName, " {\n margin-right: 0 ").concat(important, ";\n }\n \n body[").concat(lockAttribute, "] {\n ").concat(removedBarSizeVariable, ": ").concat(gap, "px;\n }\n");
|
|
586
|
+
};
|
|
587
|
+
var getCurrentUseCounter = function() {
|
|
588
|
+
var counter = parseInt(document.body.getAttribute(lockAttribute) || "0", 10);
|
|
589
|
+
return isFinite(counter) ? counter : 0;
|
|
590
|
+
};
|
|
591
|
+
var useLockAttribute = function() {
|
|
592
|
+
React.useEffect(function() {
|
|
593
|
+
document.body.setAttribute(lockAttribute, (getCurrentUseCounter() + 1).toString());
|
|
594
|
+
return function() {
|
|
595
|
+
var newCounter = getCurrentUseCounter() - 1;
|
|
596
|
+
if (newCounter <= 0) {
|
|
597
|
+
document.body.removeAttribute(lockAttribute);
|
|
598
|
+
} else {
|
|
599
|
+
document.body.setAttribute(lockAttribute, newCounter.toString());
|
|
600
|
+
}
|
|
601
|
+
};
|
|
602
|
+
}, []);
|
|
603
|
+
};
|
|
604
|
+
var RemoveScrollBar = function(_a) {
|
|
605
|
+
var noRelative = _a.noRelative, noImportant = _a.noImportant, _b = _a.gapMode, gapMode = _b === void 0 ? "margin" : _b;
|
|
606
|
+
useLockAttribute();
|
|
607
|
+
var gap = React.useMemo(function() {
|
|
608
|
+
return getGapWidth(gapMode);
|
|
609
|
+
}, [gapMode]);
|
|
610
|
+
return React.createElement(Style, { styles: getStyles(gap, !noRelative, gapMode, !noImportant ? "!important" : "") });
|
|
611
|
+
};
|
|
612
|
+
var passiveSupported = false;
|
|
613
|
+
if (typeof window !== "undefined") {
|
|
614
|
+
try {
|
|
615
|
+
var options = Object.defineProperty({}, "passive", {
|
|
616
|
+
get: function() {
|
|
617
|
+
passiveSupported = true;
|
|
618
|
+
return true;
|
|
619
|
+
}
|
|
620
|
+
});
|
|
621
|
+
window.addEventListener("test", options, options);
|
|
622
|
+
window.removeEventListener("test", options, options);
|
|
623
|
+
} catch (err) {
|
|
624
|
+
passiveSupported = false;
|
|
625
|
+
}
|
|
626
|
+
}
|
|
627
|
+
var nonPassive = passiveSupported ? { passive: false } : false;
|
|
628
|
+
var alwaysContainsScroll = function(node) {
|
|
629
|
+
return node.tagName === "TEXTAREA";
|
|
630
|
+
};
|
|
631
|
+
var elementCanBeScrolled = function(node, overflow) {
|
|
632
|
+
if (!(node instanceof Element)) {
|
|
633
|
+
return false;
|
|
634
|
+
}
|
|
635
|
+
var styles = window.getComputedStyle(node);
|
|
636
|
+
return (
|
|
637
|
+
// not-not-scrollable
|
|
638
|
+
styles[overflow] !== "hidden" && // contains scroll inside self
|
|
639
|
+
!(styles.overflowY === styles.overflowX && !alwaysContainsScroll(node) && styles[overflow] === "visible")
|
|
640
|
+
);
|
|
641
|
+
};
|
|
642
|
+
var elementCouldBeVScrolled = function(node) {
|
|
643
|
+
return elementCanBeScrolled(node, "overflowY");
|
|
644
|
+
};
|
|
645
|
+
var elementCouldBeHScrolled = function(node) {
|
|
646
|
+
return elementCanBeScrolled(node, "overflowX");
|
|
647
|
+
};
|
|
648
|
+
var locationCouldBeScrolled = function(axis, node) {
|
|
649
|
+
var ownerDocument = node.ownerDocument;
|
|
650
|
+
var current = node;
|
|
651
|
+
do {
|
|
652
|
+
if (typeof ShadowRoot !== "undefined" && current instanceof ShadowRoot) {
|
|
653
|
+
current = current.host;
|
|
654
|
+
}
|
|
655
|
+
var isScrollable = elementCouldBeScrolled(axis, current);
|
|
656
|
+
if (isScrollable) {
|
|
657
|
+
var _a = getScrollVariables(axis, current), scrollHeight = _a[1], clientHeight = _a[2];
|
|
658
|
+
if (scrollHeight > clientHeight) {
|
|
659
|
+
return true;
|
|
660
|
+
}
|
|
661
|
+
}
|
|
662
|
+
current = current.parentNode;
|
|
663
|
+
} while (current && current !== ownerDocument.body);
|
|
664
|
+
return false;
|
|
665
|
+
};
|
|
666
|
+
var getVScrollVariables = function(_a) {
|
|
667
|
+
var scrollTop = _a.scrollTop, scrollHeight = _a.scrollHeight, clientHeight = _a.clientHeight;
|
|
668
|
+
return [
|
|
669
|
+
scrollTop,
|
|
670
|
+
scrollHeight,
|
|
671
|
+
clientHeight
|
|
672
|
+
];
|
|
673
|
+
};
|
|
674
|
+
var getHScrollVariables = function(_a) {
|
|
675
|
+
var scrollLeft = _a.scrollLeft, scrollWidth = _a.scrollWidth, clientWidth = _a.clientWidth;
|
|
676
|
+
return [
|
|
677
|
+
scrollLeft,
|
|
678
|
+
scrollWidth,
|
|
679
|
+
clientWidth
|
|
680
|
+
];
|
|
681
|
+
};
|
|
682
|
+
var elementCouldBeScrolled = function(axis, node) {
|
|
683
|
+
return axis === "v" ? elementCouldBeVScrolled(node) : elementCouldBeHScrolled(node);
|
|
684
|
+
};
|
|
685
|
+
var getScrollVariables = function(axis, node) {
|
|
686
|
+
return axis === "v" ? getVScrollVariables(node) : getHScrollVariables(node);
|
|
687
|
+
};
|
|
688
|
+
var getDirectionFactor = function(axis, direction) {
|
|
689
|
+
return axis === "h" && direction === "rtl" ? -1 : 1;
|
|
690
|
+
};
|
|
691
|
+
var handleScroll = function(axis, endTarget, event, sourceDelta, noOverscroll) {
|
|
692
|
+
var directionFactor = getDirectionFactor(axis, window.getComputedStyle(endTarget).direction);
|
|
693
|
+
var delta = directionFactor * sourceDelta;
|
|
694
|
+
var target = event.target;
|
|
695
|
+
var targetInLock = endTarget.contains(target);
|
|
696
|
+
var shouldCancelScroll = false;
|
|
697
|
+
var isDeltaPositive = delta > 0;
|
|
698
|
+
var availableScroll = 0;
|
|
699
|
+
var availableScrollTop = 0;
|
|
700
|
+
do {
|
|
701
|
+
if (!target) {
|
|
702
|
+
break;
|
|
703
|
+
}
|
|
704
|
+
var _a = getScrollVariables(axis, target), position = _a[0], scroll_1 = _a[1], capacity = _a[2];
|
|
705
|
+
var elementScroll = scroll_1 - capacity - directionFactor * position;
|
|
706
|
+
if (position || elementScroll) {
|
|
707
|
+
if (elementCouldBeScrolled(axis, target)) {
|
|
708
|
+
availableScroll += elementScroll;
|
|
709
|
+
availableScrollTop += position;
|
|
710
|
+
}
|
|
711
|
+
}
|
|
712
|
+
var parent_1 = target.parentNode;
|
|
713
|
+
target = parent_1 && parent_1.nodeType === Node.DOCUMENT_FRAGMENT_NODE ? parent_1.host : parent_1;
|
|
714
|
+
} while (
|
|
715
|
+
// portaled content
|
|
716
|
+
!targetInLock && target !== document.body || // self content
|
|
717
|
+
targetInLock && (endTarget.contains(target) || endTarget === target)
|
|
718
|
+
);
|
|
719
|
+
if (isDeltaPositive && (Math.abs(availableScroll) < 1 || false)) {
|
|
720
|
+
shouldCancelScroll = true;
|
|
721
|
+
} else if (!isDeltaPositive && (Math.abs(availableScrollTop) < 1 || false)) {
|
|
722
|
+
shouldCancelScroll = true;
|
|
723
|
+
}
|
|
724
|
+
return shouldCancelScroll;
|
|
725
|
+
};
|
|
726
|
+
var getTouchXY = function(event) {
|
|
727
|
+
return "changedTouches" in event ? [event.changedTouches[0].clientX, event.changedTouches[0].clientY] : [0, 0];
|
|
728
|
+
};
|
|
729
|
+
var getDeltaXY = function(event) {
|
|
730
|
+
return [event.deltaX, event.deltaY];
|
|
731
|
+
};
|
|
732
|
+
var extractRef = function(ref) {
|
|
733
|
+
return ref && "current" in ref ? ref.current : ref;
|
|
734
|
+
};
|
|
735
|
+
var deltaCompare = function(x, y) {
|
|
736
|
+
return x[0] === y[0] && x[1] === y[1];
|
|
737
|
+
};
|
|
738
|
+
var generateStyle = function(id) {
|
|
739
|
+
return "\n .block-interactivity-".concat(id, " {pointer-events: none;}\n .allow-interactivity-").concat(id, " {pointer-events: all;}\n");
|
|
740
|
+
};
|
|
741
|
+
var idCounter = 0;
|
|
742
|
+
var lockStack = [];
|
|
743
|
+
function RemoveScrollSideCar(props) {
|
|
744
|
+
var shouldPreventQueue = React.useRef([]);
|
|
745
|
+
var touchStartRef = React.useRef([0, 0]);
|
|
746
|
+
var activeAxis = React.useRef();
|
|
747
|
+
var id = React.useState(idCounter++)[0];
|
|
748
|
+
var Style2 = React.useState(styleSingleton)[0];
|
|
749
|
+
var lastProps = React.useRef(props);
|
|
750
|
+
React.useEffect(function() {
|
|
751
|
+
lastProps.current = props;
|
|
752
|
+
}, [props]);
|
|
753
|
+
React.useEffect(function() {
|
|
754
|
+
if (props.inert) {
|
|
755
|
+
document.body.classList.add("block-interactivity-".concat(id));
|
|
756
|
+
var allow_1 = __spreadArray([props.lockRef.current], (props.shards || []).map(extractRef), true).filter(Boolean);
|
|
757
|
+
allow_1.forEach(function(el) {
|
|
758
|
+
return el.classList.add("allow-interactivity-".concat(id));
|
|
759
|
+
});
|
|
760
|
+
return function() {
|
|
761
|
+
document.body.classList.remove("block-interactivity-".concat(id));
|
|
762
|
+
allow_1.forEach(function(el) {
|
|
763
|
+
return el.classList.remove("allow-interactivity-".concat(id));
|
|
764
|
+
});
|
|
765
|
+
};
|
|
766
|
+
}
|
|
767
|
+
return;
|
|
768
|
+
}, [props.inert, props.lockRef.current, props.shards]);
|
|
769
|
+
var shouldCancelEvent = React.useCallback(function(event, parent) {
|
|
770
|
+
if ("touches" in event && event.touches.length === 2 || event.type === "wheel" && event.ctrlKey) {
|
|
771
|
+
return !lastProps.current.allowPinchZoom;
|
|
772
|
+
}
|
|
773
|
+
var touch = getTouchXY(event);
|
|
774
|
+
var touchStart = touchStartRef.current;
|
|
775
|
+
var deltaX = "deltaX" in event ? event.deltaX : touchStart[0] - touch[0];
|
|
776
|
+
var deltaY = "deltaY" in event ? event.deltaY : touchStart[1] - touch[1];
|
|
777
|
+
var currentAxis;
|
|
778
|
+
var target = event.target;
|
|
779
|
+
var moveDirection = Math.abs(deltaX) > Math.abs(deltaY) ? "h" : "v";
|
|
780
|
+
if ("touches" in event && moveDirection === "h" && target.type === "range") {
|
|
781
|
+
return false;
|
|
782
|
+
}
|
|
783
|
+
var selection = window.getSelection();
|
|
784
|
+
var anchorNode = selection && selection.anchorNode;
|
|
785
|
+
var isTouchingSelection = anchorNode ? anchorNode === target || anchorNode.contains(target) : false;
|
|
786
|
+
if (isTouchingSelection) {
|
|
787
|
+
return false;
|
|
788
|
+
}
|
|
789
|
+
var canBeScrolledInMainDirection = locationCouldBeScrolled(moveDirection, target);
|
|
790
|
+
if (!canBeScrolledInMainDirection) {
|
|
791
|
+
return true;
|
|
792
|
+
}
|
|
793
|
+
if (canBeScrolledInMainDirection) {
|
|
794
|
+
currentAxis = moveDirection;
|
|
795
|
+
} else {
|
|
796
|
+
currentAxis = moveDirection === "v" ? "h" : "v";
|
|
797
|
+
canBeScrolledInMainDirection = locationCouldBeScrolled(moveDirection, target);
|
|
798
|
+
}
|
|
799
|
+
if (!canBeScrolledInMainDirection) {
|
|
800
|
+
return false;
|
|
801
|
+
}
|
|
802
|
+
if (!activeAxis.current && "changedTouches" in event && (deltaX || deltaY)) {
|
|
803
|
+
activeAxis.current = currentAxis;
|
|
804
|
+
}
|
|
805
|
+
if (!currentAxis) {
|
|
806
|
+
return true;
|
|
807
|
+
}
|
|
808
|
+
var cancelingAxis = activeAxis.current || currentAxis;
|
|
809
|
+
return handleScroll(cancelingAxis, parent, event, cancelingAxis === "h" ? deltaX : deltaY);
|
|
810
|
+
}, []);
|
|
811
|
+
var shouldPrevent = React.useCallback(function(_event) {
|
|
812
|
+
var event = _event;
|
|
813
|
+
if (!lockStack.length || lockStack[lockStack.length - 1] !== Style2) {
|
|
814
|
+
return;
|
|
815
|
+
}
|
|
816
|
+
var delta = "deltaY" in event ? getDeltaXY(event) : getTouchXY(event);
|
|
817
|
+
var sourceEvent = shouldPreventQueue.current.filter(function(e) {
|
|
818
|
+
return e.name === event.type && (e.target === event.target || event.target === e.shadowParent) && deltaCompare(e.delta, delta);
|
|
819
|
+
})[0];
|
|
820
|
+
if (sourceEvent && sourceEvent.should) {
|
|
821
|
+
if (event.cancelable) {
|
|
822
|
+
event.preventDefault();
|
|
823
|
+
}
|
|
824
|
+
return;
|
|
825
|
+
}
|
|
826
|
+
if (!sourceEvent) {
|
|
827
|
+
var shardNodes = (lastProps.current.shards || []).map(extractRef).filter(Boolean).filter(function(node) {
|
|
828
|
+
return node.contains(event.target);
|
|
829
|
+
});
|
|
830
|
+
var shouldStop = shardNodes.length > 0 ? shouldCancelEvent(event, shardNodes[0]) : !lastProps.current.noIsolation;
|
|
831
|
+
if (shouldStop) {
|
|
832
|
+
if (event.cancelable) {
|
|
833
|
+
event.preventDefault();
|
|
834
|
+
}
|
|
835
|
+
}
|
|
836
|
+
}
|
|
837
|
+
}, []);
|
|
838
|
+
var shouldCancel = React.useCallback(function(name, delta, target, should) {
|
|
839
|
+
var event = { name, delta, target, should, shadowParent: getOutermostShadowParent(target) };
|
|
840
|
+
shouldPreventQueue.current.push(event);
|
|
841
|
+
setTimeout(function() {
|
|
842
|
+
shouldPreventQueue.current = shouldPreventQueue.current.filter(function(e) {
|
|
843
|
+
return e !== event;
|
|
844
|
+
});
|
|
845
|
+
}, 1);
|
|
846
|
+
}, []);
|
|
847
|
+
var scrollTouchStart = React.useCallback(function(event) {
|
|
848
|
+
touchStartRef.current = getTouchXY(event);
|
|
849
|
+
activeAxis.current = void 0;
|
|
850
|
+
}, []);
|
|
851
|
+
var scrollWheel = React.useCallback(function(event) {
|
|
852
|
+
shouldCancel(event.type, getDeltaXY(event), event.target, shouldCancelEvent(event, props.lockRef.current));
|
|
853
|
+
}, []);
|
|
854
|
+
var scrollTouchMove = React.useCallback(function(event) {
|
|
855
|
+
shouldCancel(event.type, getTouchXY(event), event.target, shouldCancelEvent(event, props.lockRef.current));
|
|
856
|
+
}, []);
|
|
857
|
+
React.useEffect(function() {
|
|
858
|
+
lockStack.push(Style2);
|
|
859
|
+
props.setCallbacks({
|
|
860
|
+
onScrollCapture: scrollWheel,
|
|
861
|
+
onWheelCapture: scrollWheel,
|
|
862
|
+
onTouchMoveCapture: scrollTouchMove
|
|
863
|
+
});
|
|
864
|
+
document.addEventListener("wheel", shouldPrevent, nonPassive);
|
|
865
|
+
document.addEventListener("touchmove", shouldPrevent, nonPassive);
|
|
866
|
+
document.addEventListener("touchstart", scrollTouchStart, nonPassive);
|
|
867
|
+
return function() {
|
|
868
|
+
lockStack = lockStack.filter(function(inst) {
|
|
869
|
+
return inst !== Style2;
|
|
870
|
+
});
|
|
871
|
+
document.removeEventListener("wheel", shouldPrevent, nonPassive);
|
|
872
|
+
document.removeEventListener("touchmove", shouldPrevent, nonPassive);
|
|
873
|
+
document.removeEventListener("touchstart", scrollTouchStart, nonPassive);
|
|
874
|
+
};
|
|
875
|
+
}, []);
|
|
876
|
+
var removeScrollBar = props.removeScrollBar, inert = props.inert;
|
|
877
|
+
return React.createElement(
|
|
878
|
+
React.Fragment,
|
|
879
|
+
null,
|
|
880
|
+
inert ? React.createElement(Style2, { styles: generateStyle(id) }) : null,
|
|
881
|
+
removeScrollBar ? React.createElement(RemoveScrollBar, { noRelative: props.noRelative, gapMode: props.gapMode }) : null
|
|
882
|
+
);
|
|
883
|
+
}
|
|
884
|
+
function getOutermostShadowParent(node) {
|
|
885
|
+
var shadowParent = null;
|
|
886
|
+
while (node !== null) {
|
|
887
|
+
if (node instanceof ShadowRoot) {
|
|
888
|
+
shadowParent = node.host;
|
|
889
|
+
node = node.host;
|
|
890
|
+
}
|
|
891
|
+
node = node.parentNode;
|
|
892
|
+
}
|
|
893
|
+
return shadowParent;
|
|
894
|
+
}
|
|
895
|
+
const SideCar = exportSidecar(effectCar, RemoveScrollSideCar);
|
|
896
|
+
var ReactRemoveScroll = React.forwardRef(function(props, ref) {
|
|
897
|
+
return React.createElement(RemoveScroll, __assign({}, props, { ref, sideCar: SideCar }));
|
|
898
|
+
});
|
|
899
|
+
ReactRemoveScroll.classNames = RemoveScroll.classNames;
|
|
900
|
+
var getDefaultParent = function(originalTarget) {
|
|
901
|
+
if (typeof document === "undefined") {
|
|
902
|
+
return null;
|
|
903
|
+
}
|
|
904
|
+
var sampleTarget = Array.isArray(originalTarget) ? originalTarget[0] : originalTarget;
|
|
905
|
+
return sampleTarget.ownerDocument.body;
|
|
906
|
+
};
|
|
907
|
+
var counterMap = /* @__PURE__ */ new WeakMap();
|
|
908
|
+
var uncontrolledNodes = /* @__PURE__ */ new WeakMap();
|
|
909
|
+
var markerMap = {};
|
|
910
|
+
var lockCount = 0;
|
|
911
|
+
var unwrapHost = function(node) {
|
|
912
|
+
return node && (node.host || unwrapHost(node.parentNode));
|
|
913
|
+
};
|
|
914
|
+
var correctTargets = function(parent, targets) {
|
|
915
|
+
return targets.map(function(target) {
|
|
916
|
+
if (parent.contains(target)) {
|
|
917
|
+
return target;
|
|
918
|
+
}
|
|
919
|
+
var correctedTarget = unwrapHost(target);
|
|
920
|
+
if (correctedTarget && parent.contains(correctedTarget)) {
|
|
921
|
+
return correctedTarget;
|
|
922
|
+
}
|
|
923
|
+
console.error("aria-hidden", target, "in not contained inside", parent, ". Doing nothing");
|
|
924
|
+
return null;
|
|
925
|
+
}).filter(function(x) {
|
|
926
|
+
return Boolean(x);
|
|
927
|
+
});
|
|
928
|
+
};
|
|
929
|
+
var applyAttributeToOthers = function(originalTarget, parentNode, markerName, controlAttribute) {
|
|
930
|
+
var targets = correctTargets(parentNode, Array.isArray(originalTarget) ? originalTarget : [originalTarget]);
|
|
931
|
+
if (!markerMap[markerName]) {
|
|
932
|
+
markerMap[markerName] = /* @__PURE__ */ new WeakMap();
|
|
933
|
+
}
|
|
934
|
+
var markerCounter = markerMap[markerName];
|
|
935
|
+
var hiddenNodes = [];
|
|
936
|
+
var elementsToKeep = /* @__PURE__ */ new Set();
|
|
937
|
+
var elementsToStop = new Set(targets);
|
|
938
|
+
var keep = function(el) {
|
|
939
|
+
if (!el || elementsToKeep.has(el)) {
|
|
940
|
+
return;
|
|
941
|
+
}
|
|
942
|
+
elementsToKeep.add(el);
|
|
943
|
+
keep(el.parentNode);
|
|
944
|
+
};
|
|
945
|
+
targets.forEach(keep);
|
|
946
|
+
var deep = function(parent) {
|
|
947
|
+
if (!parent || elementsToStop.has(parent)) {
|
|
948
|
+
return;
|
|
949
|
+
}
|
|
950
|
+
Array.prototype.forEach.call(parent.children, function(node) {
|
|
951
|
+
if (elementsToKeep.has(node)) {
|
|
952
|
+
deep(node);
|
|
953
|
+
} else {
|
|
954
|
+
try {
|
|
955
|
+
var attr = node.getAttribute(controlAttribute);
|
|
956
|
+
var alreadyHidden = attr !== null && attr !== "false";
|
|
957
|
+
var counterValue = (counterMap.get(node) || 0) + 1;
|
|
958
|
+
var markerValue = (markerCounter.get(node) || 0) + 1;
|
|
959
|
+
counterMap.set(node, counterValue);
|
|
960
|
+
markerCounter.set(node, markerValue);
|
|
961
|
+
hiddenNodes.push(node);
|
|
962
|
+
if (counterValue === 1 && alreadyHidden) {
|
|
963
|
+
uncontrolledNodes.set(node, true);
|
|
964
|
+
}
|
|
965
|
+
if (markerValue === 1) {
|
|
966
|
+
node.setAttribute(markerName, "true");
|
|
967
|
+
}
|
|
968
|
+
if (!alreadyHidden) {
|
|
969
|
+
node.setAttribute(controlAttribute, "true");
|
|
970
|
+
}
|
|
971
|
+
} catch (e) {
|
|
972
|
+
console.error("aria-hidden: cannot operate on ", node, e);
|
|
973
|
+
}
|
|
974
|
+
}
|
|
975
|
+
});
|
|
976
|
+
};
|
|
977
|
+
deep(parentNode);
|
|
978
|
+
elementsToKeep.clear();
|
|
979
|
+
lockCount++;
|
|
980
|
+
return function() {
|
|
981
|
+
hiddenNodes.forEach(function(node) {
|
|
982
|
+
var counterValue = counterMap.get(node) - 1;
|
|
983
|
+
var markerValue = markerCounter.get(node) - 1;
|
|
984
|
+
counterMap.set(node, counterValue);
|
|
985
|
+
markerCounter.set(node, markerValue);
|
|
986
|
+
if (!counterValue) {
|
|
987
|
+
if (!uncontrolledNodes.has(node)) {
|
|
988
|
+
node.removeAttribute(controlAttribute);
|
|
989
|
+
}
|
|
990
|
+
uncontrolledNodes.delete(node);
|
|
991
|
+
}
|
|
992
|
+
if (!markerValue) {
|
|
993
|
+
node.removeAttribute(markerName);
|
|
994
|
+
}
|
|
995
|
+
});
|
|
996
|
+
lockCount--;
|
|
997
|
+
if (!lockCount) {
|
|
998
|
+
counterMap = /* @__PURE__ */ new WeakMap();
|
|
999
|
+
counterMap = /* @__PURE__ */ new WeakMap();
|
|
1000
|
+
uncontrolledNodes = /* @__PURE__ */ new WeakMap();
|
|
1001
|
+
markerMap = {};
|
|
1002
|
+
}
|
|
1003
|
+
};
|
|
1004
|
+
};
|
|
1005
|
+
var hideOthers = function(originalTarget, parentNode, markerName) {
|
|
1006
|
+
if (markerName === void 0) {
|
|
1007
|
+
markerName = "data-aria-hidden";
|
|
1008
|
+
}
|
|
1009
|
+
var targets = Array.from(Array.isArray(originalTarget) ? originalTarget : [originalTarget]);
|
|
1010
|
+
var activeParentNode = getDefaultParent(originalTarget);
|
|
1011
|
+
if (!activeParentNode) {
|
|
1012
|
+
return function() {
|
|
1013
|
+
return null;
|
|
1014
|
+
};
|
|
1015
|
+
}
|
|
1016
|
+
targets.push.apply(targets, Array.from(activeParentNode.querySelectorAll("[aria-live], script")));
|
|
1017
|
+
return applyAttributeToOthers(targets, activeParentNode, markerName, "aria-hidden");
|
|
1018
|
+
};
|
|
1019
|
+
var DIALOG_NAME = "Dialog";
|
|
1020
|
+
var [createDialogContext] = createContextScope(DIALOG_NAME);
|
|
1021
|
+
var [DialogProvider, useDialogContext] = createDialogContext(DIALOG_NAME);
|
|
1022
|
+
var Dialog$1 = (props) => {
|
|
1023
|
+
const {
|
|
1024
|
+
__scopeDialog,
|
|
1025
|
+
children,
|
|
1026
|
+
open: openProp,
|
|
1027
|
+
defaultOpen,
|
|
1028
|
+
onOpenChange,
|
|
1029
|
+
modal = true
|
|
1030
|
+
} = props;
|
|
1031
|
+
const triggerRef = React.useRef(null);
|
|
1032
|
+
const contentRef = React.useRef(null);
|
|
1033
|
+
const [open, setOpen] = useControllableState({
|
|
1034
|
+
prop: openProp,
|
|
1035
|
+
defaultProp: defaultOpen ?? false,
|
|
1036
|
+
onChange: onOpenChange,
|
|
1037
|
+
caller: DIALOG_NAME
|
|
1038
|
+
});
|
|
1039
|
+
return /* @__PURE__ */ jsx(
|
|
1040
|
+
DialogProvider,
|
|
1041
|
+
{
|
|
1042
|
+
scope: __scopeDialog,
|
|
1043
|
+
triggerRef,
|
|
1044
|
+
contentRef,
|
|
1045
|
+
contentId: useId(),
|
|
1046
|
+
titleId: useId(),
|
|
1047
|
+
descriptionId: useId(),
|
|
1048
|
+
open,
|
|
1049
|
+
onOpenChange: setOpen,
|
|
1050
|
+
onOpenToggle: React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen]),
|
|
1051
|
+
modal,
|
|
1052
|
+
children
|
|
1053
|
+
}
|
|
1054
|
+
);
|
|
1055
|
+
};
|
|
1056
|
+
Dialog$1.displayName = DIALOG_NAME;
|
|
1057
|
+
var TRIGGER_NAME = "DialogTrigger";
|
|
1058
|
+
var DialogTrigger = React.forwardRef(
|
|
1059
|
+
(props, forwardedRef) => {
|
|
1060
|
+
const { __scopeDialog, ...triggerProps } = props;
|
|
1061
|
+
const context = useDialogContext(TRIGGER_NAME, __scopeDialog);
|
|
1062
|
+
const composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef);
|
|
1063
|
+
return /* @__PURE__ */ jsx(
|
|
1064
|
+
Primitive.button,
|
|
1065
|
+
{
|
|
1066
|
+
type: "button",
|
|
1067
|
+
"aria-haspopup": "dialog",
|
|
1068
|
+
"aria-expanded": context.open,
|
|
1069
|
+
"aria-controls": context.contentId,
|
|
1070
|
+
"data-state": getState(context.open),
|
|
1071
|
+
...triggerProps,
|
|
1072
|
+
ref: composedTriggerRef,
|
|
1073
|
+
onClick: composeEventHandlers(props.onClick, context.onOpenToggle)
|
|
1074
|
+
}
|
|
1075
|
+
);
|
|
1076
|
+
}
|
|
1077
|
+
);
|
|
1078
|
+
DialogTrigger.displayName = TRIGGER_NAME;
|
|
1079
|
+
var PORTAL_NAME = "DialogPortal";
|
|
1080
|
+
var [PortalProvider, usePortalContext] = createDialogContext(PORTAL_NAME, {
|
|
1081
|
+
forceMount: void 0
|
|
1082
|
+
});
|
|
1083
|
+
var DialogPortal = (props) => {
|
|
1084
|
+
const { __scopeDialog, forceMount, children, container } = props;
|
|
1085
|
+
const context = useDialogContext(PORTAL_NAME, __scopeDialog);
|
|
1086
|
+
return /* @__PURE__ */ jsx(PortalProvider, { scope: __scopeDialog, forceMount, children: React.Children.map(children, (child) => /* @__PURE__ */ jsx(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsx(Portal$1, { asChild: true, container, children: child }) })) });
|
|
1087
|
+
};
|
|
1088
|
+
DialogPortal.displayName = PORTAL_NAME;
|
|
1089
|
+
var OVERLAY_NAME = "DialogOverlay";
|
|
1090
|
+
var DialogOverlay = React.forwardRef(
|
|
1091
|
+
(props, forwardedRef) => {
|
|
1092
|
+
const portalContext = usePortalContext(OVERLAY_NAME, props.__scopeDialog);
|
|
1093
|
+
const { forceMount = portalContext.forceMount, ...overlayProps } = props;
|
|
1094
|
+
const context = useDialogContext(OVERLAY_NAME, props.__scopeDialog);
|
|
1095
|
+
return context.modal ? /* @__PURE__ */ jsx(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsx(DialogOverlayImpl, { ...overlayProps, ref: forwardedRef }) }) : null;
|
|
1096
|
+
}
|
|
1097
|
+
);
|
|
1098
|
+
DialogOverlay.displayName = OVERLAY_NAME;
|
|
1099
|
+
var Slot = createSlot("DialogOverlay.RemoveScroll");
|
|
1100
|
+
var DialogOverlayImpl = React.forwardRef(
|
|
1101
|
+
(props, forwardedRef) => {
|
|
1102
|
+
const { __scopeDialog, ...overlayProps } = props;
|
|
1103
|
+
const context = useDialogContext(OVERLAY_NAME, __scopeDialog);
|
|
1104
|
+
return (
|
|
1105
|
+
// Make sure `Content` is scrollable even when it doesn't live inside `RemoveScroll`
|
|
1106
|
+
// ie. when `Overlay` and `Content` are siblings
|
|
1107
|
+
/* @__PURE__ */ jsx(ReactRemoveScroll, { as: Slot, allowPinchZoom: true, shards: [context.contentRef], children: /* @__PURE__ */ jsx(
|
|
1108
|
+
Primitive.div,
|
|
1109
|
+
{
|
|
1110
|
+
"data-state": getState(context.open),
|
|
1111
|
+
...overlayProps,
|
|
1112
|
+
ref: forwardedRef,
|
|
1113
|
+
style: { pointerEvents: "auto", ...overlayProps.style }
|
|
1114
|
+
}
|
|
1115
|
+
) })
|
|
1116
|
+
);
|
|
1117
|
+
}
|
|
1118
|
+
);
|
|
1119
|
+
var CONTENT_NAME = "DialogContent";
|
|
1120
|
+
var DialogContent = React.forwardRef(
|
|
1121
|
+
(props, forwardedRef) => {
|
|
1122
|
+
const portalContext = usePortalContext(CONTENT_NAME, props.__scopeDialog);
|
|
1123
|
+
const { forceMount = portalContext.forceMount, ...contentProps } = props;
|
|
1124
|
+
const context = useDialogContext(CONTENT_NAME, props.__scopeDialog);
|
|
1125
|
+
return /* @__PURE__ */ jsx(Presence, { present: forceMount || context.open, children: context.modal ? /* @__PURE__ */ jsx(DialogContentModal, { ...contentProps, ref: forwardedRef }) : /* @__PURE__ */ jsx(DialogContentNonModal, { ...contentProps, ref: forwardedRef }) });
|
|
1126
|
+
}
|
|
1127
|
+
);
|
|
1128
|
+
DialogContent.displayName = CONTENT_NAME;
|
|
1129
|
+
var DialogContentModal = React.forwardRef(
|
|
1130
|
+
(props, forwardedRef) => {
|
|
1131
|
+
const context = useDialogContext(CONTENT_NAME, props.__scopeDialog);
|
|
1132
|
+
const contentRef = React.useRef(null);
|
|
1133
|
+
const composedRefs = useComposedRefs(forwardedRef, context.contentRef, contentRef);
|
|
1134
|
+
React.useEffect(() => {
|
|
1135
|
+
const content = contentRef.current;
|
|
1136
|
+
if (content) return hideOthers(content);
|
|
1137
|
+
}, []);
|
|
1138
|
+
return /* @__PURE__ */ jsx(
|
|
1139
|
+
DialogContentImpl,
|
|
1140
|
+
{
|
|
1141
|
+
...props,
|
|
1142
|
+
ref: composedRefs,
|
|
1143
|
+
trapFocus: context.open,
|
|
1144
|
+
disableOutsidePointerEvents: true,
|
|
1145
|
+
onCloseAutoFocus: composeEventHandlers(props.onCloseAutoFocus, (event) => {
|
|
1146
|
+
var _a;
|
|
1147
|
+
event.preventDefault();
|
|
1148
|
+
(_a = context.triggerRef.current) == null ? void 0 : _a.focus();
|
|
1149
|
+
}),
|
|
1150
|
+
onPointerDownOutside: composeEventHandlers(props.onPointerDownOutside, (event) => {
|
|
1151
|
+
const originalEvent = event.detail.originalEvent;
|
|
1152
|
+
const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
|
|
1153
|
+
const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
|
|
1154
|
+
if (isRightClick) event.preventDefault();
|
|
1155
|
+
}),
|
|
1156
|
+
onFocusOutside: composeEventHandlers(
|
|
1157
|
+
props.onFocusOutside,
|
|
1158
|
+
(event) => event.preventDefault()
|
|
1159
|
+
)
|
|
1160
|
+
}
|
|
1161
|
+
);
|
|
1162
|
+
}
|
|
1163
|
+
);
|
|
1164
|
+
var DialogContentNonModal = React.forwardRef(
|
|
1165
|
+
(props, forwardedRef) => {
|
|
1166
|
+
const context = useDialogContext(CONTENT_NAME, props.__scopeDialog);
|
|
1167
|
+
const hasInteractedOutsideRef = React.useRef(false);
|
|
1168
|
+
const hasPointerDownOutsideRef = React.useRef(false);
|
|
1169
|
+
return /* @__PURE__ */ jsx(
|
|
1170
|
+
DialogContentImpl,
|
|
1171
|
+
{
|
|
1172
|
+
...props,
|
|
1173
|
+
ref: forwardedRef,
|
|
1174
|
+
trapFocus: false,
|
|
1175
|
+
disableOutsidePointerEvents: false,
|
|
1176
|
+
onCloseAutoFocus: (event) => {
|
|
1177
|
+
var _a, _b;
|
|
1178
|
+
(_a = props.onCloseAutoFocus) == null ? void 0 : _a.call(props, event);
|
|
1179
|
+
if (!event.defaultPrevented) {
|
|
1180
|
+
if (!hasInteractedOutsideRef.current) (_b = context.triggerRef.current) == null ? void 0 : _b.focus();
|
|
1181
|
+
event.preventDefault();
|
|
1182
|
+
}
|
|
1183
|
+
hasInteractedOutsideRef.current = false;
|
|
1184
|
+
hasPointerDownOutsideRef.current = false;
|
|
1185
|
+
},
|
|
1186
|
+
onInteractOutside: (event) => {
|
|
1187
|
+
var _a, _b;
|
|
1188
|
+
(_a = props.onInteractOutside) == null ? void 0 : _a.call(props, event);
|
|
1189
|
+
if (!event.defaultPrevented) {
|
|
1190
|
+
hasInteractedOutsideRef.current = true;
|
|
1191
|
+
if (event.detail.originalEvent.type === "pointerdown") {
|
|
1192
|
+
hasPointerDownOutsideRef.current = true;
|
|
1193
|
+
}
|
|
1194
|
+
}
|
|
1195
|
+
const target = event.target;
|
|
1196
|
+
const targetIsTrigger = (_b = context.triggerRef.current) == null ? void 0 : _b.contains(target);
|
|
1197
|
+
if (targetIsTrigger) event.preventDefault();
|
|
1198
|
+
if (event.detail.originalEvent.type === "focusin" && hasPointerDownOutsideRef.current) {
|
|
1199
|
+
event.preventDefault();
|
|
1200
|
+
}
|
|
1201
|
+
}
|
|
1202
|
+
}
|
|
1203
|
+
);
|
|
1204
|
+
}
|
|
1205
|
+
);
|
|
1206
|
+
var DialogContentImpl = React.forwardRef(
|
|
1207
|
+
(props, forwardedRef) => {
|
|
1208
|
+
const { __scopeDialog, trapFocus, onOpenAutoFocus, onCloseAutoFocus, ...contentProps } = props;
|
|
1209
|
+
const context = useDialogContext(CONTENT_NAME, __scopeDialog);
|
|
1210
|
+
const contentRef = React.useRef(null);
|
|
1211
|
+
const composedRefs = useComposedRefs(forwardedRef, contentRef);
|
|
1212
|
+
useFocusGuards();
|
|
1213
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
1214
|
+
/* @__PURE__ */ jsx(
|
|
1215
|
+
FocusScope,
|
|
1216
|
+
{
|
|
1217
|
+
asChild: true,
|
|
1218
|
+
loop: true,
|
|
1219
|
+
trapped: trapFocus,
|
|
1220
|
+
onMountAutoFocus: onOpenAutoFocus,
|
|
1221
|
+
onUnmountAutoFocus: onCloseAutoFocus,
|
|
1222
|
+
children: /* @__PURE__ */ jsx(
|
|
1223
|
+
DismissableLayer,
|
|
1224
|
+
{
|
|
1225
|
+
role: "dialog",
|
|
1226
|
+
id: context.contentId,
|
|
1227
|
+
"aria-describedby": context.descriptionId,
|
|
1228
|
+
"aria-labelledby": context.titleId,
|
|
1229
|
+
"data-state": getState(context.open),
|
|
1230
|
+
...contentProps,
|
|
1231
|
+
ref: composedRefs,
|
|
1232
|
+
onDismiss: () => context.onOpenChange(false)
|
|
1233
|
+
}
|
|
1234
|
+
)
|
|
1235
|
+
}
|
|
1236
|
+
),
|
|
1237
|
+
/* @__PURE__ */ jsxs(Fragment, { children: [
|
|
1238
|
+
/* @__PURE__ */ jsx(TitleWarning, { titleId: context.titleId }),
|
|
1239
|
+
/* @__PURE__ */ jsx(DescriptionWarning, { contentRef, descriptionId: context.descriptionId })
|
|
1240
|
+
] })
|
|
1241
|
+
] });
|
|
1242
|
+
}
|
|
1243
|
+
);
|
|
1244
|
+
var TITLE_NAME = "DialogTitle";
|
|
1245
|
+
var DialogTitle = React.forwardRef(
|
|
1246
|
+
(props, forwardedRef) => {
|
|
1247
|
+
const { __scopeDialog, ...titleProps } = props;
|
|
1248
|
+
const context = useDialogContext(TITLE_NAME, __scopeDialog);
|
|
1249
|
+
return /* @__PURE__ */ jsx(Primitive.h2, { id: context.titleId, ...titleProps, ref: forwardedRef });
|
|
1250
|
+
}
|
|
1251
|
+
);
|
|
1252
|
+
DialogTitle.displayName = TITLE_NAME;
|
|
1253
|
+
var DESCRIPTION_NAME = "DialogDescription";
|
|
1254
|
+
var DialogDescription = React.forwardRef(
|
|
1255
|
+
(props, forwardedRef) => {
|
|
1256
|
+
const { __scopeDialog, ...descriptionProps } = props;
|
|
1257
|
+
const context = useDialogContext(DESCRIPTION_NAME, __scopeDialog);
|
|
1258
|
+
return /* @__PURE__ */ jsx(Primitive.p, { id: context.descriptionId, ...descriptionProps, ref: forwardedRef });
|
|
1259
|
+
}
|
|
1260
|
+
);
|
|
1261
|
+
DialogDescription.displayName = DESCRIPTION_NAME;
|
|
1262
|
+
var CLOSE_NAME = "DialogClose";
|
|
1263
|
+
var DialogClose = React.forwardRef(
|
|
1264
|
+
(props, forwardedRef) => {
|
|
1265
|
+
const { __scopeDialog, ...closeProps } = props;
|
|
1266
|
+
const context = useDialogContext(CLOSE_NAME, __scopeDialog);
|
|
1267
|
+
return /* @__PURE__ */ jsx(
|
|
1268
|
+
Primitive.button,
|
|
1269
|
+
{
|
|
1270
|
+
type: "button",
|
|
1271
|
+
...closeProps,
|
|
1272
|
+
ref: forwardedRef,
|
|
1273
|
+
onClick: composeEventHandlers(props.onClick, () => context.onOpenChange(false))
|
|
1274
|
+
}
|
|
1275
|
+
);
|
|
1276
|
+
}
|
|
1277
|
+
);
|
|
1278
|
+
DialogClose.displayName = CLOSE_NAME;
|
|
1279
|
+
function getState(open) {
|
|
1280
|
+
return open ? "open" : "closed";
|
|
1281
|
+
}
|
|
1282
|
+
var TITLE_WARNING_NAME = "DialogTitleWarning";
|
|
1283
|
+
var [WarningProvider, useWarningContext] = createContext2(TITLE_WARNING_NAME, {
|
|
1284
|
+
contentName: CONTENT_NAME,
|
|
1285
|
+
titleName: TITLE_NAME,
|
|
1286
|
+
docsSlug: "dialog"
|
|
1287
|
+
});
|
|
1288
|
+
var TitleWarning = ({ titleId }) => {
|
|
1289
|
+
const titleWarningContext = useWarningContext(TITLE_WARNING_NAME);
|
|
1290
|
+
const MESSAGE = `\`${titleWarningContext.contentName}\` requires a \`${titleWarningContext.titleName}\` for the component to be accessible for screen reader users.
|
|
1291
|
+
|
|
1292
|
+
If you want to hide the \`${titleWarningContext.titleName}\`, you can wrap it with our VisuallyHidden component.
|
|
1293
|
+
|
|
1294
|
+
For more information, see https://radix-ui.com/primitives/docs/components/${titleWarningContext.docsSlug}`;
|
|
1295
|
+
React.useEffect(() => {
|
|
1296
|
+
if (titleId) {
|
|
1297
|
+
const hasTitle = document.getElementById(titleId);
|
|
1298
|
+
if (!hasTitle) console.error(MESSAGE);
|
|
1299
|
+
}
|
|
1300
|
+
}, [MESSAGE, titleId]);
|
|
1301
|
+
return null;
|
|
1302
|
+
};
|
|
1303
|
+
var DESCRIPTION_WARNING_NAME = "DialogDescriptionWarning";
|
|
1304
|
+
var DescriptionWarning = ({ contentRef, descriptionId }) => {
|
|
1305
|
+
const descriptionWarningContext = useWarningContext(DESCRIPTION_WARNING_NAME);
|
|
1306
|
+
const MESSAGE = `Warning: Missing \`Description\` or \`aria-describedby={undefined}\` for {${descriptionWarningContext.contentName}}.`;
|
|
1307
|
+
React.useEffect(() => {
|
|
1308
|
+
var _a;
|
|
1309
|
+
const describedById = (_a = contentRef.current) == null ? void 0 : _a.getAttribute("aria-describedby");
|
|
1310
|
+
if (descriptionId && describedById) {
|
|
1311
|
+
const hasDescription = document.getElementById(descriptionId);
|
|
1312
|
+
if (!hasDescription) console.warn(MESSAGE);
|
|
1313
|
+
}
|
|
1314
|
+
}, [MESSAGE, contentRef, descriptionId]);
|
|
1315
|
+
return null;
|
|
1316
|
+
};
|
|
1317
|
+
var Root = Dialog$1;
|
|
1318
|
+
var Portal = DialogPortal;
|
|
1319
|
+
var Overlay = DialogOverlay;
|
|
1320
|
+
var Content = DialogContent;
|
|
1321
|
+
var Title = DialogTitle;
|
|
1322
|
+
var Description = DialogDescription;
|
|
1323
|
+
var Close = DialogClose;
|
|
1324
|
+
function CloseIcon() {
|
|
1325
|
+
return /* @__PURE__ */ jsx(
|
|
1326
|
+
"svg",
|
|
1327
|
+
{
|
|
1328
|
+
width: "24",
|
|
1329
|
+
height: "24",
|
|
1330
|
+
viewBox: "0 0 24 24",
|
|
1331
|
+
fill: "none",
|
|
1332
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
1333
|
+
children: /* @__PURE__ */ jsx(
|
|
1334
|
+
"path",
|
|
1335
|
+
{
|
|
1336
|
+
d: "M18 6L6 18M6 6L18 18",
|
|
1337
|
+
stroke: "currentColor",
|
|
1338
|
+
strokeWidth: "2",
|
|
1339
|
+
strokeLinecap: "round",
|
|
1340
|
+
strokeLinejoin: "round"
|
|
1341
|
+
}
|
|
1342
|
+
)
|
|
1343
|
+
}
|
|
1344
|
+
);
|
|
1345
|
+
}
|
|
1346
|
+
function Dialog({
|
|
1347
|
+
open,
|
|
1348
|
+
onOpenChange,
|
|
1349
|
+
children,
|
|
1350
|
+
title,
|
|
1351
|
+
description,
|
|
1352
|
+
showCloseButton = true,
|
|
1353
|
+
closeOnOverlayClick = true,
|
|
1354
|
+
closeOnEscapeKey = true,
|
|
1355
|
+
className,
|
|
1356
|
+
contentClassName,
|
|
1357
|
+
overlayClassName,
|
|
1358
|
+
rightSlot,
|
|
1359
|
+
maxWidth
|
|
1360
|
+
}) {
|
|
1361
|
+
const contentStyle = maxWidth ? { maxWidth: typeof maxWidth === "number" ? `${maxWidth}px` : maxWidth } : {};
|
|
1362
|
+
const handleInteractOutside = (event) => {
|
|
1363
|
+
if (!closeOnOverlayClick) {
|
|
1364
|
+
event.preventDefault();
|
|
1365
|
+
}
|
|
1366
|
+
};
|
|
1367
|
+
const handleEscapeKeyDown = (event) => {
|
|
1368
|
+
if (!closeOnEscapeKey) {
|
|
1369
|
+
event.preventDefault();
|
|
1370
|
+
}
|
|
1371
|
+
};
|
|
1372
|
+
return /* @__PURE__ */ jsx(Root, { open, onOpenChange, children: /* @__PURE__ */ jsxs(Portal, { children: [
|
|
1373
|
+
/* @__PURE__ */ jsx(
|
|
1374
|
+
Overlay,
|
|
1375
|
+
{
|
|
1376
|
+
className: `taskon-dialog-overlay ${overlayClassName || ""}`
|
|
1377
|
+
}
|
|
1378
|
+
),
|
|
1379
|
+
/* @__PURE__ */ jsxs(
|
|
1380
|
+
Content,
|
|
1381
|
+
{
|
|
1382
|
+
className: `taskon-dialog-content ${contentClassName || ""} ${className || ""}`,
|
|
1383
|
+
style: contentStyle,
|
|
1384
|
+
"aria-describedby": description ? void 0 : void 0,
|
|
1385
|
+
onInteractOutside: handleInteractOutside,
|
|
1386
|
+
onEscapeKeyDown: handleEscapeKeyDown,
|
|
1387
|
+
children: [
|
|
1388
|
+
title && /* @__PURE__ */ jsx(Title, { className: "taskon-dialog-title--sr-only", children: title }),
|
|
1389
|
+
description && /* @__PURE__ */ jsx(Description, { className: "taskon-dialog-description--sr-only", children: description }),
|
|
1390
|
+
(showCloseButton || rightSlot) && /* @__PURE__ */ jsxs("div", { className: "taskon-dialog-header", children: [
|
|
1391
|
+
rightSlot && /* @__PURE__ */ jsx("div", { className: "taskon-dialog-header-slot", children: rightSlot }),
|
|
1392
|
+
showCloseButton && /* @__PURE__ */ jsx(
|
|
1393
|
+
Close,
|
|
1394
|
+
{
|
|
1395
|
+
className: "taskon-dialog-close",
|
|
1396
|
+
"aria-label": "关闭",
|
|
1397
|
+
children: /* @__PURE__ */ jsx(CloseIcon, {})
|
|
1398
|
+
}
|
|
1399
|
+
)
|
|
1400
|
+
] }),
|
|
1401
|
+
/* @__PURE__ */ jsx("div", { className: "taskon-dialog-body", children })
|
|
1402
|
+
]
|
|
1403
|
+
}
|
|
1404
|
+
)
|
|
1405
|
+
] }) });
|
|
1406
|
+
}
|
|
1407
|
+
function useWidgetConfig(widgetId) {
|
|
1408
|
+
const { client } = useTaskOnContext();
|
|
1409
|
+
const [config, setConfig] = useState(null);
|
|
1410
|
+
const [isLoading, setIsLoading] = useState(false);
|
|
1411
|
+
const [error, setError] = useState(null);
|
|
1412
|
+
useEffect(() => {
|
|
1413
|
+
if (!widgetId || !client) {
|
|
1414
|
+
setConfig(null);
|
|
1415
|
+
setIsLoading(false);
|
|
1416
|
+
setError(null);
|
|
1417
|
+
return;
|
|
1418
|
+
}
|
|
1419
|
+
let cancelled = false;
|
|
1420
|
+
setIsLoading(true);
|
|
1421
|
+
setError(null);
|
|
1422
|
+
const api = createWidgetApi(client);
|
|
1423
|
+
api.getWidgetInfo(widgetId).then((info) => {
|
|
1424
|
+
if (!cancelled) {
|
|
1425
|
+
setConfig(parseWidgetConfig(info));
|
|
1426
|
+
}
|
|
1427
|
+
}).catch((err) => {
|
|
1428
|
+
if (!cancelled) {
|
|
1429
|
+
console.warn("[TaskOn] Failed to load widget config:", err);
|
|
1430
|
+
setError(
|
|
1431
|
+
err instanceof Error ? err.message : "Failed to load widget config"
|
|
1432
|
+
);
|
|
1433
|
+
}
|
|
1434
|
+
}).finally(() => {
|
|
1435
|
+
if (!cancelled) {
|
|
1436
|
+
setIsLoading(false);
|
|
1437
|
+
}
|
|
1438
|
+
});
|
|
1439
|
+
return () => {
|
|
1440
|
+
cancelled = true;
|
|
1441
|
+
};
|
|
1442
|
+
}, [widgetId, client]);
|
|
1443
|
+
return { config, isLoading, error };
|
|
1444
|
+
}
|
|
1445
|
+
function cloudThemeToReactTheme(cloud) {
|
|
1446
|
+
let mode;
|
|
1447
|
+
if (cloud.colorMode.type === "dual") {
|
|
1448
|
+
mode = "auto";
|
|
1449
|
+
} else {
|
|
1450
|
+
mode = cloud.colorMode.type;
|
|
1451
|
+
}
|
|
1452
|
+
const mapColorToSeed = (color) => ({
|
|
1453
|
+
colorPrimary: color.primaryColor,
|
|
1454
|
+
colorSecondary: color.secondaryColor,
|
|
1455
|
+
colorSuccess: color.successColor,
|
|
1456
|
+
colorWarning: color.warningColor,
|
|
1457
|
+
colorError: color.errorColor,
|
|
1458
|
+
borderRadius: cloud.shape.borderRadius,
|
|
1459
|
+
fontSize: cloud.shape.fontSize
|
|
1460
|
+
});
|
|
1461
|
+
return {
|
|
1462
|
+
mode,
|
|
1463
|
+
// Global seed (shape values applied regardless of mode)
|
|
1464
|
+
seed: {
|
|
1465
|
+
borderRadius: cloud.shape.borderRadius,
|
|
1466
|
+
fontSize: cloud.shape.fontSize
|
|
1467
|
+
},
|
|
1468
|
+
// Per-mode color overrides
|
|
1469
|
+
light: { seed: mapColorToSeed(cloud.light) },
|
|
1470
|
+
dark: { seed: mapColorToSeed(cloud.dark) }
|
|
1471
|
+
};
|
|
1472
|
+
}
|
|
1473
|
+
function useResolvedWidgetConfig(widgetId) {
|
|
1474
|
+
const { config, isLoading, error } = useWidgetConfig(widgetId);
|
|
1475
|
+
const cloudTheme = useMemo(() => {
|
|
1476
|
+
if (!(config == null ? void 0 : config.theme)) return void 0;
|
|
1477
|
+
return cloudThemeToReactTheme(config.theme);
|
|
1478
|
+
}, [config == null ? void 0 : config.theme]);
|
|
1479
|
+
return {
|
|
1480
|
+
functionConfig: (config == null ? void 0 : config.functionConfig) ?? null,
|
|
1481
|
+
cloudTheme,
|
|
1482
|
+
isConfigLoading: isLoading,
|
|
1483
|
+
configError: error
|
|
1484
|
+
};
|
|
1485
|
+
}
|
|
1486
|
+
function WidgetShell({
|
|
1487
|
+
widgetId,
|
|
1488
|
+
isConfigLoading,
|
|
1489
|
+
cloudTheme,
|
|
1490
|
+
className,
|
|
1491
|
+
errorMessage,
|
|
1492
|
+
children
|
|
1493
|
+
}) {
|
|
1494
|
+
if (widgetId && isConfigLoading) {
|
|
1495
|
+
return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsxs("div", { className: `${className}-loading`, children: [
|
|
1496
|
+
/* @__PURE__ */ jsx("div", { className: `${className}-loading-spinner` }),
|
|
1497
|
+
/* @__PURE__ */ jsx("span", { children: "Loading config..." })
|
|
1498
|
+
] }) });
|
|
1499
|
+
}
|
|
1500
|
+
if (errorMessage) {
|
|
1501
|
+
return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx("div", { className: `${className}-error`, children: /* @__PURE__ */ jsx("span", { className: `${className}-error-message`, children: errorMessage }) }) });
|
|
1502
|
+
}
|
|
1503
|
+
if (cloudTheme) {
|
|
1504
|
+
return /* @__PURE__ */ jsx(ThemeProvider, { theme: cloudTheme, children });
|
|
1505
|
+
}
|
|
1506
|
+
return /* @__PURE__ */ jsx(Fragment, { children });
|
|
1507
|
+
}
|
|
1508
|
+
export {
|
|
1509
|
+
Dialog as D,
|
|
1510
|
+
FocusScope as F,
|
|
1511
|
+
ReactRemoveScroll as R,
|
|
1512
|
+
WidgetShell as W,
|
|
1513
|
+
useId as a,
|
|
1514
|
+
useFocusGuards as b,
|
|
1515
|
+
hideOthers as h,
|
|
1516
|
+
useResolvedWidgetConfig as u
|
|
1517
|
+
};
|