@soomo/react-text-annotator 3.0.0-staging.42 → 3.0.0-staging.43
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/TextAnnotatorPopup/TextAnnotatorPopup.d.ts.map +1 -1
- package/dist/react-text-annotator.es11.js +5 -5
- package/dist/react-text-annotator.es12.js +1448 -61
- package/dist/react-text-annotator.es12.js.map +1 -1
- package/dist/react-text-annotator.es14.js +189 -1399
- package/dist/react-text-annotator.es14.js.map +1 -1
- package/dist/react-text-annotator.es15.js +572 -0
- package/dist/react-text-annotator.es15.js.map +1 -0
- package/dist/react-text-annotator.es16.js +57 -234
- package/dist/react-text-annotator.es16.js.map +1 -1
- package/dist/react-text-annotator.es17.js +33 -557
- package/dist/react-text-annotator.es17.js.map +1 -1
- package/dist/react-text-annotator.es19.js +1 -1
- package/dist/react-text-annotator.es20.js +1 -1
- package/dist/react-text-annotator.es21.js +114 -2
- package/dist/react-text-annotator.es21.js.map +1 -1
- package/dist/react-text-annotator.es22.js +309 -2
- package/dist/react-text-annotator.es22.js.map +1 -1
- package/dist/react-text-annotator.es23.js +53 -109
- package/dist/react-text-annotator.es23.js.map +1 -1
- package/dist/react-text-annotator.es24.js +17 -306
- package/dist/react-text-annotator.es24.js.map +1 -1
- package/dist/react-text-annotator.es25.js +2 -58
- package/dist/react-text-annotator.es25.js.map +1 -1
- package/dist/react-text-annotator.es26.js +2 -20
- package/dist/react-text-annotator.es26.js.map +1 -1
- package/dist/react-text-annotator.es5.js +2 -2
- package/dist/react-text-annotator.es7.js +22 -18
- package/dist/react-text-annotator.es7.js.map +1 -1
- package/package.json +2 -2
- package/dist/react-text-annotator.es13.js +0 -48
- package/dist/react-text-annotator.es13.js.map +0 -1
|
@@ -1,1454 +1,244 @@
|
|
|
1
|
+
import { computePosition, offset as offset$1, shift as shift$1, flip as flip$1, inline as inline$1 } from "./react-text-annotator.es15.js";
|
|
2
|
+
import { autoUpdate, platform } from "./react-text-annotator.es15.js";
|
|
1
3
|
import * as React from "react";
|
|
2
|
-
import { useLayoutEffect, useEffect
|
|
3
|
-
import { isTypeableCombobox, getDocument, activeElement, contains, isVirtualClick, isVirtualPointerEvent, isSafari, stopEvent, getTarget, isReactEvent, isRootElement, isEventTargetWithin } from "./react-text-annotator.es27.js";
|
|
4
|
-
import { isHTMLElement, isElement, getOverflowAncestors, getNodeName, isLastTraversableNode, getParentNode, getComputedStyle } from "./react-text-annotator.es28.js";
|
|
5
|
-
import { tabbable, isTabbable } from "./react-text-annotator.es29.js";
|
|
4
|
+
import { useLayoutEffect, useEffect } from "react";
|
|
6
5
|
import * as ReactDOM from "react-dom";
|
|
7
|
-
import { useFloating as useFloating$1 } from "./react-text-annotator.es16.js";
|
|
8
|
-
import { flip, inline, offset, shift } from "./react-text-annotator.es16.js";
|
|
9
|
-
const SafeReact = {
|
|
10
|
-
...React
|
|
11
|
-
};
|
|
12
|
-
const useInsertionEffect = SafeReact.useInsertionEffect;
|
|
13
|
-
const useSafeInsertionEffect = useInsertionEffect || ((fn) => fn());
|
|
14
|
-
function useEffectEvent(callback) {
|
|
15
|
-
const ref = React.useRef(() => {
|
|
16
|
-
if (process.env.NODE_ENV !== "production") {
|
|
17
|
-
throw new Error("Cannot call an event handler while rendering.");
|
|
18
|
-
}
|
|
19
|
-
});
|
|
20
|
-
useSafeInsertionEffect(() => {
|
|
21
|
-
ref.current = callback;
|
|
22
|
-
});
|
|
23
|
-
return React.useCallback(function() {
|
|
24
|
-
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
25
|
-
args[_key] = arguments[_key];
|
|
26
|
-
}
|
|
27
|
-
return ref.current == null ? void 0 : ref.current(...args);
|
|
28
|
-
}, []);
|
|
29
|
-
}
|
|
30
|
-
let rafId = 0;
|
|
31
|
-
function enqueueFocus(el, options) {
|
|
32
|
-
if (options === void 0) {
|
|
33
|
-
options = {};
|
|
34
|
-
}
|
|
35
|
-
const {
|
|
36
|
-
preventScroll = false,
|
|
37
|
-
cancelPrevious = true,
|
|
38
|
-
sync = false
|
|
39
|
-
} = options;
|
|
40
|
-
cancelPrevious && cancelAnimationFrame(rafId);
|
|
41
|
-
const exec = () => el == null ? void 0 : el.focus({
|
|
42
|
-
preventScroll
|
|
43
|
-
});
|
|
44
|
-
if (sync) {
|
|
45
|
-
exec();
|
|
46
|
-
} else {
|
|
47
|
-
rafId = requestAnimationFrame(exec);
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
6
|
var index = typeof document !== "undefined" ? useLayoutEffect : useEffect;
|
|
51
|
-
function
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
var source = arguments[i];
|
|
55
|
-
for (var key in source) {
|
|
56
|
-
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
57
|
-
target[key] = source[key];
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
return target;
|
|
62
|
-
};
|
|
63
|
-
return _extends.apply(this, arguments);
|
|
64
|
-
}
|
|
65
|
-
let serverHandoffComplete = false;
|
|
66
|
-
let count = 0;
|
|
67
|
-
const genId = () => (
|
|
68
|
-
// Ensure the id is unique with multiple independent versions of Floating UI
|
|
69
|
-
// on <React 18
|
|
70
|
-
"floating-ui-" + Math.random().toString(36).slice(2, 6) + count++
|
|
71
|
-
);
|
|
72
|
-
function useFloatingId() {
|
|
73
|
-
const [id, setId] = React.useState(() => serverHandoffComplete ? genId() : void 0);
|
|
74
|
-
index(() => {
|
|
75
|
-
if (id == null) {
|
|
76
|
-
setId(genId());
|
|
77
|
-
}
|
|
78
|
-
}, []);
|
|
79
|
-
React.useEffect(() => {
|
|
80
|
-
serverHandoffComplete = true;
|
|
81
|
-
}, []);
|
|
82
|
-
return id;
|
|
83
|
-
}
|
|
84
|
-
const useReactId = SafeReact.useId;
|
|
85
|
-
const useId = useReactId || useFloatingId;
|
|
86
|
-
let devMessageSet;
|
|
87
|
-
if (process.env.NODE_ENV !== "production") {
|
|
88
|
-
devMessageSet = /* @__PURE__ */ new Set();
|
|
89
|
-
}
|
|
90
|
-
function error() {
|
|
91
|
-
var _devMessageSet3;
|
|
92
|
-
for (var _len2 = arguments.length, messages = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
|
|
93
|
-
messages[_key2] = arguments[_key2];
|
|
7
|
+
function deepEqual(a, b) {
|
|
8
|
+
if (a === b) {
|
|
9
|
+
return true;
|
|
94
10
|
}
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
var _devMessageSet4;
|
|
98
|
-
(_devMessageSet4 = devMessageSet) == null || _devMessageSet4.add(message);
|
|
99
|
-
console.error(message);
|
|
11
|
+
if (typeof a !== typeof b) {
|
|
12
|
+
return false;
|
|
100
13
|
}
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
const map = /* @__PURE__ */ new Map();
|
|
104
|
-
return {
|
|
105
|
-
emit(event, data) {
|
|
106
|
-
var _map$get;
|
|
107
|
-
(_map$get = map.get(event)) == null || _map$get.forEach((handler) => handler(data));
|
|
108
|
-
},
|
|
109
|
-
on(event, listener) {
|
|
110
|
-
map.set(event, [...map.get(event) || [], listener]);
|
|
111
|
-
},
|
|
112
|
-
off(event, listener) {
|
|
113
|
-
var _map$get2;
|
|
114
|
-
map.set(event, ((_map$get2 = map.get(event)) == null ? void 0 : _map$get2.filter((l) => l !== listener)) || []);
|
|
115
|
-
}
|
|
116
|
-
};
|
|
117
|
-
}
|
|
118
|
-
const FloatingNodeContext = /* @__PURE__ */ React.createContext(null);
|
|
119
|
-
const FloatingTreeContext = /* @__PURE__ */ React.createContext(null);
|
|
120
|
-
const useFloatingParentNodeId = () => {
|
|
121
|
-
var _React$useContext;
|
|
122
|
-
return ((_React$useContext = React.useContext(FloatingNodeContext)) == null ? void 0 : _React$useContext.id) || null;
|
|
123
|
-
};
|
|
124
|
-
const useFloatingTree = () => React.useContext(FloatingTreeContext);
|
|
125
|
-
function createAttribute(name) {
|
|
126
|
-
return "data-floating-ui-" + name;
|
|
127
|
-
}
|
|
128
|
-
function useLatestRef(value) {
|
|
129
|
-
const ref = useRef(value);
|
|
130
|
-
index(() => {
|
|
131
|
-
ref.current = value;
|
|
132
|
-
});
|
|
133
|
-
return ref;
|
|
134
|
-
}
|
|
135
|
-
function getAncestors(nodes, id) {
|
|
136
|
-
var _nodes$find;
|
|
137
|
-
let allAncestors = [];
|
|
138
|
-
let currentParentId = (_nodes$find = nodes.find((node) => node.id === id)) == null ? void 0 : _nodes$find.parentId;
|
|
139
|
-
while (currentParentId) {
|
|
140
|
-
const currentNode = nodes.find((node) => node.id === currentParentId);
|
|
141
|
-
currentParentId = currentNode == null ? void 0 : currentNode.parentId;
|
|
142
|
-
if (currentNode) {
|
|
143
|
-
allAncestors = allAncestors.concat(currentNode);
|
|
144
|
-
}
|
|
14
|
+
if (typeof a === "function" && a.toString() === b.toString()) {
|
|
15
|
+
return true;
|
|
145
16
|
}
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
return node.parentId === n.id && ((_node$context2 = node.context) == null ? void 0 : _node$context2.open);
|
|
160
|
-
});
|
|
161
|
-
});
|
|
162
|
-
allChildren = allChildren.concat(currentChildren);
|
|
163
|
-
}
|
|
164
|
-
return allChildren;
|
|
165
|
-
}
|
|
166
|
-
let counterMap = /* @__PURE__ */ new WeakMap();
|
|
167
|
-
let uncontrolledElementsSet = /* @__PURE__ */ new WeakSet();
|
|
168
|
-
let markerMap = {};
|
|
169
|
-
let lockCount = 0;
|
|
170
|
-
const supportsInert = () => typeof HTMLElement !== "undefined" && "inert" in HTMLElement.prototype;
|
|
171
|
-
const unwrapHost = (node) => node && (node.host || unwrapHost(node.parentNode));
|
|
172
|
-
const correctElements = (parent, targets) => targets.map((target) => {
|
|
173
|
-
if (parent.contains(target)) {
|
|
174
|
-
return target;
|
|
175
|
-
}
|
|
176
|
-
const correctedTarget = unwrapHost(target);
|
|
177
|
-
if (parent.contains(correctedTarget)) {
|
|
178
|
-
return correctedTarget;
|
|
179
|
-
}
|
|
180
|
-
return null;
|
|
181
|
-
}).filter((x) => x != null);
|
|
182
|
-
function applyAttributeToOthers(uncorrectedAvoidElements, body, ariaHidden, inert) {
|
|
183
|
-
const markerName = "data-floating-ui-inert";
|
|
184
|
-
const controlAttribute = inert ? "inert" : ariaHidden ? "aria-hidden" : null;
|
|
185
|
-
const avoidElements = correctElements(body, uncorrectedAvoidElements);
|
|
186
|
-
const elementsToKeep = /* @__PURE__ */ new Set();
|
|
187
|
-
const elementsToStop = new Set(avoidElements);
|
|
188
|
-
const hiddenElements = [];
|
|
189
|
-
if (!markerMap[markerName]) {
|
|
190
|
-
markerMap[markerName] = /* @__PURE__ */ new WeakMap();
|
|
191
|
-
}
|
|
192
|
-
const markerCounter = markerMap[markerName];
|
|
193
|
-
avoidElements.forEach(keep);
|
|
194
|
-
deep(body);
|
|
195
|
-
elementsToKeep.clear();
|
|
196
|
-
function keep(el) {
|
|
197
|
-
if (!el || elementsToKeep.has(el)) {
|
|
198
|
-
return;
|
|
17
|
+
let length;
|
|
18
|
+
let i;
|
|
19
|
+
let keys;
|
|
20
|
+
if (a && b && typeof a === "object") {
|
|
21
|
+
if (Array.isArray(a)) {
|
|
22
|
+
length = a.length;
|
|
23
|
+
if (length !== b.length) return false;
|
|
24
|
+
for (i = length; i-- !== 0; ) {
|
|
25
|
+
if (!deepEqual(a[i], b[i])) {
|
|
26
|
+
return false;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
return true;
|
|
199
30
|
}
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
if (!parent || elementsToStop.has(parent)) {
|
|
205
|
-
return;
|
|
31
|
+
keys = Object.keys(a);
|
|
32
|
+
length = keys.length;
|
|
33
|
+
if (length !== Object.keys(b).length) {
|
|
34
|
+
return false;
|
|
206
35
|
}
|
|
207
|
-
|
|
208
|
-
if (
|
|
209
|
-
|
|
210
|
-
deep(node);
|
|
211
|
-
} else {
|
|
212
|
-
const attr2 = controlAttribute ? node.getAttribute(controlAttribute) : null;
|
|
213
|
-
const alreadyHidden = attr2 !== null && attr2 !== "false";
|
|
214
|
-
const counterValue = (counterMap.get(node) || 0) + 1;
|
|
215
|
-
const markerValue = (markerCounter.get(node) || 0) + 1;
|
|
216
|
-
counterMap.set(node, counterValue);
|
|
217
|
-
markerCounter.set(node, markerValue);
|
|
218
|
-
hiddenElements.push(node);
|
|
219
|
-
if (counterValue === 1 && alreadyHidden) {
|
|
220
|
-
uncontrolledElementsSet.add(node);
|
|
221
|
-
}
|
|
222
|
-
if (markerValue === 1) {
|
|
223
|
-
node.setAttribute(markerName, "");
|
|
224
|
-
}
|
|
225
|
-
if (!alreadyHidden && controlAttribute) {
|
|
226
|
-
node.setAttribute(controlAttribute, "true");
|
|
227
|
-
}
|
|
36
|
+
for (i = length; i-- !== 0; ) {
|
|
37
|
+
if (!{}.hasOwnProperty.call(b, keys[i])) {
|
|
38
|
+
return false;
|
|
228
39
|
}
|
|
229
|
-
}
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
const counterValue = (counterMap.get(element) || 0) - 1;
|
|
235
|
-
const markerValue = (markerCounter.get(element) || 0) - 1;
|
|
236
|
-
counterMap.set(element, counterValue);
|
|
237
|
-
markerCounter.set(element, markerValue);
|
|
238
|
-
if (!counterValue) {
|
|
239
|
-
if (!uncontrolledElementsSet.has(element) && controlAttribute) {
|
|
240
|
-
element.removeAttribute(controlAttribute);
|
|
241
|
-
}
|
|
242
|
-
uncontrolledElementsSet.delete(element);
|
|
40
|
+
}
|
|
41
|
+
for (i = length; i-- !== 0; ) {
|
|
42
|
+
const key = keys[i];
|
|
43
|
+
if (key === "_owner" && a.$$typeof) {
|
|
44
|
+
continue;
|
|
243
45
|
}
|
|
244
|
-
if (!
|
|
245
|
-
|
|
46
|
+
if (!deepEqual(a[key], b[key])) {
|
|
47
|
+
return false;
|
|
246
48
|
}
|
|
247
|
-
});
|
|
248
|
-
lockCount--;
|
|
249
|
-
if (!lockCount) {
|
|
250
|
-
counterMap = /* @__PURE__ */ new WeakMap();
|
|
251
|
-
counterMap = /* @__PURE__ */ new WeakMap();
|
|
252
|
-
uncontrolledElementsSet = /* @__PURE__ */ new WeakSet();
|
|
253
|
-
markerMap = {};
|
|
254
49
|
}
|
|
255
|
-
|
|
256
|
-
}
|
|
257
|
-
function markOthers(avoidElements, ariaHidden, inert) {
|
|
258
|
-
if (ariaHidden === void 0) {
|
|
259
|
-
ariaHidden = false;
|
|
260
|
-
}
|
|
261
|
-
if (inert === void 0) {
|
|
262
|
-
inert = false;
|
|
50
|
+
return true;
|
|
263
51
|
}
|
|
264
|
-
|
|
265
|
-
return applyAttributeToOthers(avoidElements.concat(Array.from(body.querySelectorAll("[aria-live]"))), body, ariaHidden, inert);
|
|
52
|
+
return a !== a && b !== b;
|
|
266
53
|
}
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
// JSDOM does not support the `tabbable` library. To solve this we can
|
|
271
|
-
// check if `ResizeObserver` is a real function (not polyfilled), which
|
|
272
|
-
// determines if the current environment is JSDOM-like.
|
|
273
|
-
typeof ResizeObserver === "function" && ResizeObserver.toString().includes("[native code]") ? "full" : "none"
|
|
274
|
-
)
|
|
275
|
-
});
|
|
276
|
-
function getTabbableIn(container, direction) {
|
|
277
|
-
const allTabbable = tabbable(container, getTabbableOptions());
|
|
278
|
-
if (direction === "prev") {
|
|
279
|
-
allTabbable.reverse();
|
|
54
|
+
function getDPR(element) {
|
|
55
|
+
if (typeof window === "undefined") {
|
|
56
|
+
return 1;
|
|
280
57
|
}
|
|
281
|
-
const
|
|
282
|
-
|
|
283
|
-
return nextTabbableElements[0];
|
|
284
|
-
}
|
|
285
|
-
function getNextTabbable() {
|
|
286
|
-
return getTabbableIn(document.body, "next");
|
|
287
|
-
}
|
|
288
|
-
function getPreviousTabbable() {
|
|
289
|
-
return getTabbableIn(document.body, "prev");
|
|
290
|
-
}
|
|
291
|
-
function isOutsideEvent(event, container) {
|
|
292
|
-
const containerElement = container || event.currentTarget;
|
|
293
|
-
const relatedTarget = event.relatedTarget;
|
|
294
|
-
return !relatedTarget || !contains(containerElement, relatedTarget);
|
|
58
|
+
const win = element.ownerDocument.defaultView || window;
|
|
59
|
+
return win.devicePixelRatio || 1;
|
|
295
60
|
}
|
|
296
|
-
function
|
|
297
|
-
const
|
|
298
|
-
|
|
299
|
-
element.dataset.tabindex = element.getAttribute("tabindex") || "";
|
|
300
|
-
element.setAttribute("tabindex", "-1");
|
|
301
|
-
});
|
|
302
|
-
}
|
|
303
|
-
function enableFocusInside(container) {
|
|
304
|
-
const elements = container.querySelectorAll("[data-tabindex]");
|
|
305
|
-
elements.forEach((element) => {
|
|
306
|
-
const tabindex = element.dataset.tabindex;
|
|
307
|
-
delete element.dataset.tabindex;
|
|
308
|
-
if (tabindex) {
|
|
309
|
-
element.setAttribute("tabindex", tabindex);
|
|
310
|
-
} else {
|
|
311
|
-
element.removeAttribute("tabindex");
|
|
312
|
-
}
|
|
313
|
-
});
|
|
314
|
-
}
|
|
315
|
-
function getClosestTabbableElement(tabbableElements, element, floating) {
|
|
316
|
-
const elementIndex = tabbableElements.indexOf(element);
|
|
317
|
-
function traverseTabbableElements(next2) {
|
|
318
|
-
const attr2 = createAttribute("focus-guard");
|
|
319
|
-
let index2 = elementIndex + (next2 ? 1 : 0);
|
|
320
|
-
let currentElement = tabbableElements[index2];
|
|
321
|
-
while (currentElement && (!currentElement.isConnected || currentElement.hasAttribute(attr2) || contains(floating, currentElement))) {
|
|
322
|
-
if (next2) {
|
|
323
|
-
index2++;
|
|
324
|
-
} else {
|
|
325
|
-
index2--;
|
|
326
|
-
}
|
|
327
|
-
currentElement = tabbableElements[index2];
|
|
328
|
-
}
|
|
329
|
-
return currentElement;
|
|
330
|
-
}
|
|
331
|
-
const next = traverseTabbableElements(true);
|
|
332
|
-
if (next) {
|
|
333
|
-
return next;
|
|
334
|
-
}
|
|
335
|
-
return traverseTabbableElements(false);
|
|
61
|
+
function roundByDPR(element, value) {
|
|
62
|
+
const dpr = getDPR(element);
|
|
63
|
+
return Math.round(value * dpr) / dpr;
|
|
336
64
|
}
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
clip: "rect(0 0 0 0)",
|
|
340
|
-
height: "1px",
|
|
341
|
-
margin: "-1px",
|
|
342
|
-
overflow: "hidden",
|
|
343
|
-
padding: 0,
|
|
344
|
-
position: "fixed",
|
|
345
|
-
whiteSpace: "nowrap",
|
|
346
|
-
width: "1px",
|
|
347
|
-
top: 0,
|
|
348
|
-
left: 0
|
|
349
|
-
};
|
|
350
|
-
let timeoutId;
|
|
351
|
-
function setActiveElementOnTab(event) {
|
|
352
|
-
if (event.key === "Tab") {
|
|
353
|
-
event.target;
|
|
354
|
-
clearTimeout(timeoutId);
|
|
355
|
-
}
|
|
356
|
-
}
|
|
357
|
-
const FocusGuard = /* @__PURE__ */ React.forwardRef(function FocusGuard2(props, ref) {
|
|
358
|
-
const [role, setRole] = React.useState();
|
|
359
|
-
index(() => {
|
|
360
|
-
if (isSafari()) {
|
|
361
|
-
setRole("button");
|
|
362
|
-
}
|
|
363
|
-
document.addEventListener("keydown", setActiveElementOnTab);
|
|
364
|
-
return () => {
|
|
365
|
-
document.removeEventListener("keydown", setActiveElementOnTab);
|
|
366
|
-
};
|
|
367
|
-
}, []);
|
|
368
|
-
const restProps = {
|
|
369
|
-
ref,
|
|
370
|
-
tabIndex: 0,
|
|
371
|
-
// Role is only for VoiceOver
|
|
372
|
-
role,
|
|
373
|
-
"aria-hidden": role ? void 0 : true,
|
|
374
|
-
[createAttribute("focus-guard")]: "",
|
|
375
|
-
style: HIDDEN_STYLES
|
|
376
|
-
};
|
|
377
|
-
return /* @__PURE__ */ React.createElement("span", _extends({}, props, restProps));
|
|
378
|
-
});
|
|
379
|
-
const PortalContext = /* @__PURE__ */ React.createContext(null);
|
|
380
|
-
const attr = /* @__PURE__ */ createAttribute("portal");
|
|
381
|
-
function useFloatingPortalNode(props) {
|
|
382
|
-
if (props === void 0) {
|
|
383
|
-
props = {};
|
|
384
|
-
}
|
|
385
|
-
const {
|
|
386
|
-
id,
|
|
387
|
-
root
|
|
388
|
-
} = props;
|
|
389
|
-
const uniqueId = useId();
|
|
390
|
-
const portalContext = usePortalContext();
|
|
391
|
-
const [portalNode, setPortalNode] = React.useState(null);
|
|
392
|
-
const portalNodeRef = React.useRef(null);
|
|
393
|
-
index(() => {
|
|
394
|
-
return () => {
|
|
395
|
-
portalNode == null || portalNode.remove();
|
|
396
|
-
queueMicrotask(() => {
|
|
397
|
-
portalNodeRef.current = null;
|
|
398
|
-
});
|
|
399
|
-
};
|
|
400
|
-
}, [portalNode]);
|
|
401
|
-
index(() => {
|
|
402
|
-
if (!uniqueId) return;
|
|
403
|
-
if (portalNodeRef.current) return;
|
|
404
|
-
const existingIdRoot = id ? document.getElementById(id) : null;
|
|
405
|
-
if (!existingIdRoot) return;
|
|
406
|
-
const subRoot = document.createElement("div");
|
|
407
|
-
subRoot.id = uniqueId;
|
|
408
|
-
subRoot.setAttribute(attr, "");
|
|
409
|
-
existingIdRoot.appendChild(subRoot);
|
|
410
|
-
portalNodeRef.current = subRoot;
|
|
411
|
-
setPortalNode(subRoot);
|
|
412
|
-
}, [id, uniqueId]);
|
|
65
|
+
function useLatestRef(value) {
|
|
66
|
+
const ref = React.useRef(value);
|
|
413
67
|
index(() => {
|
|
414
|
-
|
|
415
|
-
if (portalNodeRef.current) return;
|
|
416
|
-
let container = root || (portalContext == null ? void 0 : portalContext.portalNode);
|
|
417
|
-
if (container && !isElement(container)) container = container.current;
|
|
418
|
-
container = container || document.body;
|
|
419
|
-
let idWrapper = null;
|
|
420
|
-
if (id) {
|
|
421
|
-
idWrapper = document.createElement("div");
|
|
422
|
-
idWrapper.id = id;
|
|
423
|
-
container.appendChild(idWrapper);
|
|
424
|
-
}
|
|
425
|
-
const subRoot = document.createElement("div");
|
|
426
|
-
subRoot.id = uniqueId;
|
|
427
|
-
subRoot.setAttribute(attr, "");
|
|
428
|
-
container = idWrapper || container;
|
|
429
|
-
container.appendChild(subRoot);
|
|
430
|
-
portalNodeRef.current = subRoot;
|
|
431
|
-
setPortalNode(subRoot);
|
|
432
|
-
}, [id, root, uniqueId, portalContext]);
|
|
433
|
-
return portalNode;
|
|
434
|
-
}
|
|
435
|
-
function FloatingPortal(props) {
|
|
436
|
-
const {
|
|
437
|
-
children,
|
|
438
|
-
id,
|
|
439
|
-
root = null,
|
|
440
|
-
preserveTabOrder = true
|
|
441
|
-
} = props;
|
|
442
|
-
const portalNode = useFloatingPortalNode({
|
|
443
|
-
id,
|
|
444
|
-
root
|
|
68
|
+
ref.current = value;
|
|
445
69
|
});
|
|
446
|
-
|
|
447
|
-
const beforeOutsideRef = React.useRef(null);
|
|
448
|
-
const afterOutsideRef = React.useRef(null);
|
|
449
|
-
const beforeInsideRef = React.useRef(null);
|
|
450
|
-
const afterInsideRef = React.useRef(null);
|
|
451
|
-
const shouldRenderGuards = (
|
|
452
|
-
// The FocusManager and therefore floating element are currently open/
|
|
453
|
-
// rendered.
|
|
454
|
-
!!focusManagerState && // Guards are only for non-modal focus management.
|
|
455
|
-
!focusManagerState.modal && // Don't render if unmount is transitioning.
|
|
456
|
-
focusManagerState.open && preserveTabOrder && !!(root || portalNode)
|
|
457
|
-
);
|
|
458
|
-
React.useEffect(() => {
|
|
459
|
-
if (!portalNode || !preserveTabOrder || focusManagerState != null && focusManagerState.modal) {
|
|
460
|
-
return;
|
|
461
|
-
}
|
|
462
|
-
function onFocus(event) {
|
|
463
|
-
if (portalNode && isOutsideEvent(event)) {
|
|
464
|
-
const focusing = event.type === "focusin";
|
|
465
|
-
const manageFocus = focusing ? enableFocusInside : disableFocusInside;
|
|
466
|
-
manageFocus(portalNode);
|
|
467
|
-
}
|
|
468
|
-
}
|
|
469
|
-
portalNode.addEventListener("focusin", onFocus, true);
|
|
470
|
-
portalNode.addEventListener("focusout", onFocus, true);
|
|
471
|
-
return () => {
|
|
472
|
-
portalNode.removeEventListener("focusin", onFocus, true);
|
|
473
|
-
portalNode.removeEventListener("focusout", onFocus, true);
|
|
474
|
-
};
|
|
475
|
-
}, [portalNode, preserveTabOrder, focusManagerState == null ? void 0 : focusManagerState.modal]);
|
|
476
|
-
return /* @__PURE__ */ React.createElement(PortalContext.Provider, {
|
|
477
|
-
value: React.useMemo(() => ({
|
|
478
|
-
preserveTabOrder,
|
|
479
|
-
beforeOutsideRef,
|
|
480
|
-
afterOutsideRef,
|
|
481
|
-
beforeInsideRef,
|
|
482
|
-
afterInsideRef,
|
|
483
|
-
portalNode,
|
|
484
|
-
setFocusManagerState
|
|
485
|
-
}), [preserveTabOrder, portalNode])
|
|
486
|
-
}, shouldRenderGuards && portalNode && /* @__PURE__ */ React.createElement(FocusGuard, {
|
|
487
|
-
"data-type": "outside",
|
|
488
|
-
ref: beforeOutsideRef,
|
|
489
|
-
onFocus: (event) => {
|
|
490
|
-
if (isOutsideEvent(event, portalNode)) {
|
|
491
|
-
var _beforeInsideRef$curr;
|
|
492
|
-
(_beforeInsideRef$curr = beforeInsideRef.current) == null || _beforeInsideRef$curr.focus();
|
|
493
|
-
} else {
|
|
494
|
-
const prevTabbable = getPreviousTabbable() || (focusManagerState == null ? void 0 : focusManagerState.refs.domReference.current);
|
|
495
|
-
prevTabbable == null || prevTabbable.focus();
|
|
496
|
-
}
|
|
497
|
-
}
|
|
498
|
-
}), shouldRenderGuards && portalNode && /* @__PURE__ */ React.createElement("span", {
|
|
499
|
-
"aria-owns": portalNode.id,
|
|
500
|
-
style: HIDDEN_STYLES
|
|
501
|
-
}), portalNode && /* @__PURE__ */ ReactDOM.createPortal(children, portalNode), shouldRenderGuards && portalNode && /* @__PURE__ */ React.createElement(FocusGuard, {
|
|
502
|
-
"data-type": "outside",
|
|
503
|
-
ref: afterOutsideRef,
|
|
504
|
-
onFocus: (event) => {
|
|
505
|
-
if (isOutsideEvent(event, portalNode)) {
|
|
506
|
-
var _afterInsideRef$curre;
|
|
507
|
-
(_afterInsideRef$curre = afterInsideRef.current) == null || _afterInsideRef$curre.focus();
|
|
508
|
-
} else {
|
|
509
|
-
const nextTabbable = getNextTabbable() || (focusManagerState == null ? void 0 : focusManagerState.refs.domReference.current);
|
|
510
|
-
nextTabbable == null || nextTabbable.focus();
|
|
511
|
-
(focusManagerState == null ? void 0 : focusManagerState.closeOnFocusOut) && (focusManagerState == null ? void 0 : focusManagerState.onOpenChange(false, event.nativeEvent));
|
|
512
|
-
}
|
|
513
|
-
}
|
|
514
|
-
}));
|
|
70
|
+
return ref;
|
|
515
71
|
}
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
function addPreviouslyFocusedElement(element) {
|
|
520
|
-
previouslyFocusedElements = previouslyFocusedElements.filter((el) => el.isConnected);
|
|
521
|
-
let tabbableEl = element;
|
|
522
|
-
if (!tabbableEl || getNodeName(tabbableEl) === "body") return;
|
|
523
|
-
if (!isTabbable(tabbableEl, getTabbableOptions())) {
|
|
524
|
-
const tabbableChild = tabbable(tabbableEl, getTabbableOptions())[0];
|
|
525
|
-
if (tabbableChild) {
|
|
526
|
-
tabbableEl = tabbableChild;
|
|
527
|
-
}
|
|
528
|
-
}
|
|
529
|
-
previouslyFocusedElements.push(tabbableEl);
|
|
530
|
-
if (previouslyFocusedElements.length > LIST_LIMIT) {
|
|
531
|
-
previouslyFocusedElements = previouslyFocusedElements.slice(-LIST_LIMIT);
|
|
72
|
+
function useFloating(options) {
|
|
73
|
+
if (options === void 0) {
|
|
74
|
+
options = {};
|
|
532
75
|
}
|
|
533
|
-
}
|
|
534
|
-
function getPreviouslyFocusedElement() {
|
|
535
|
-
return previouslyFocusedElements.slice().reverse().find((el) => el.isConnected);
|
|
536
|
-
}
|
|
537
|
-
const VisuallyHiddenDismiss = /* @__PURE__ */ React.forwardRef(function VisuallyHiddenDismiss2(props, ref) {
|
|
538
|
-
return /* @__PURE__ */ React.createElement("button", _extends({}, props, {
|
|
539
|
-
type: "button",
|
|
540
|
-
ref,
|
|
541
|
-
tabIndex: -1,
|
|
542
|
-
style: HIDDEN_STYLES
|
|
543
|
-
}));
|
|
544
|
-
});
|
|
545
|
-
function FloatingFocusManager(props) {
|
|
546
76
|
const {
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
guards: _guards = true,
|
|
552
|
-
initialFocus = 0,
|
|
553
|
-
returnFocus = true,
|
|
554
|
-
restoreFocus = false,
|
|
555
|
-
modal = true,
|
|
556
|
-
visuallyHiddenDismiss = false,
|
|
557
|
-
closeOnFocusOut = true
|
|
558
|
-
} = props;
|
|
559
|
-
const {
|
|
560
|
-
open,
|
|
561
|
-
refs,
|
|
562
|
-
nodeId,
|
|
563
|
-
onOpenChange,
|
|
564
|
-
events,
|
|
565
|
-
dataRef,
|
|
566
|
-
floatingId,
|
|
77
|
+
placement = "bottom",
|
|
78
|
+
strategy = "absolute",
|
|
79
|
+
middleware = [],
|
|
80
|
+
platform: platform2,
|
|
567
81
|
elements: {
|
|
568
|
-
|
|
569
|
-
floating
|
|
570
|
-
}
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
const
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
const
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
const
|
|
588
|
-
const
|
|
589
|
-
|
|
590
|
-
|
|
82
|
+
reference: externalReference,
|
|
83
|
+
floating: externalFloating
|
|
84
|
+
} = {},
|
|
85
|
+
transform = true,
|
|
86
|
+
whileElementsMounted,
|
|
87
|
+
open
|
|
88
|
+
} = options;
|
|
89
|
+
const [data, setData] = React.useState({
|
|
90
|
+
x: 0,
|
|
91
|
+
y: 0,
|
|
92
|
+
strategy,
|
|
93
|
+
placement,
|
|
94
|
+
middlewareData: {},
|
|
95
|
+
isPositioned: false
|
|
96
|
+
});
|
|
97
|
+
const [latestMiddleware, setLatestMiddleware] = React.useState(middleware);
|
|
98
|
+
if (!deepEqual(latestMiddleware, middleware)) {
|
|
99
|
+
setLatestMiddleware(middleware);
|
|
100
|
+
}
|
|
101
|
+
const [_reference, _setReference] = React.useState(null);
|
|
102
|
+
const [_floating, _setFloating] = React.useState(null);
|
|
103
|
+
const setReference = React.useCallback((node) => {
|
|
104
|
+
if (node !== referenceRef.current) {
|
|
105
|
+
referenceRef.current = node;
|
|
106
|
+
_setReference(node);
|
|
591
107
|
}
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
if (domReference && type === "reference") {
|
|
598
|
-
return domReference;
|
|
599
|
-
}
|
|
600
|
-
if (floatingFocusNode && type === "floating") {
|
|
601
|
-
return floatingFocusNode;
|
|
602
|
-
}
|
|
603
|
-
return content;
|
|
604
|
-
}).filter(Boolean).flat();
|
|
605
|
-
});
|
|
606
|
-
React.useEffect(() => {
|
|
607
|
-
if (disabled) return;
|
|
608
|
-
if (!modal) return;
|
|
609
|
-
function onKeyDown(event) {
|
|
610
|
-
if (event.key === "Tab") {
|
|
611
|
-
if (contains(floatingFocusNode, activeElement(getDocument(floatingFocusNode))) && getTabbableContent().length === 0 && !isUntrappedTypeableCombobox) {
|
|
612
|
-
stopEvent(event);
|
|
613
|
-
}
|
|
614
|
-
const els = getTabbableElements();
|
|
615
|
-
const target = getTarget(event);
|
|
616
|
-
if (orderRef.current[0] === "reference" && target === domReference) {
|
|
617
|
-
stopEvent(event);
|
|
618
|
-
if (event.shiftKey) {
|
|
619
|
-
enqueueFocus(els[els.length - 1]);
|
|
620
|
-
} else {
|
|
621
|
-
enqueueFocus(els[1]);
|
|
622
|
-
}
|
|
623
|
-
}
|
|
624
|
-
if (orderRef.current[1] === "floating" && target === floatingFocusNode && event.shiftKey) {
|
|
625
|
-
stopEvent(event);
|
|
626
|
-
enqueueFocus(els[0]);
|
|
627
|
-
}
|
|
628
|
-
}
|
|
108
|
+
}, []);
|
|
109
|
+
const setFloating = React.useCallback((node) => {
|
|
110
|
+
if (node !== floatingRef.current) {
|
|
111
|
+
floatingRef.current = node;
|
|
112
|
+
_setFloating(node);
|
|
629
113
|
}
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
const tabbableIndex = tabbableContent.indexOf(target);
|
|
643
|
-
if (tabbableIndex !== -1) {
|
|
644
|
-
tabbableIndexRef.current = tabbableIndex;
|
|
645
|
-
}
|
|
114
|
+
}, []);
|
|
115
|
+
const referenceEl = externalReference || _reference;
|
|
116
|
+
const floatingEl = externalFloating || _floating;
|
|
117
|
+
const referenceRef = React.useRef(null);
|
|
118
|
+
const floatingRef = React.useRef(null);
|
|
119
|
+
const dataRef = React.useRef(data);
|
|
120
|
+
const hasWhileElementsMounted = whileElementsMounted != null;
|
|
121
|
+
const whileElementsMountedRef = useLatestRef(whileElementsMounted);
|
|
122
|
+
const platformRef = useLatestRef(platform2);
|
|
123
|
+
const update = React.useCallback(() => {
|
|
124
|
+
if (!referenceRef.current || !floatingRef.current) {
|
|
125
|
+
return;
|
|
646
126
|
}
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
127
|
+
const config = {
|
|
128
|
+
placement,
|
|
129
|
+
strategy,
|
|
130
|
+
middleware: latestMiddleware
|
|
650
131
|
};
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
if (disabled) return;
|
|
654
|
-
if (!closeOnFocusOut) return;
|
|
655
|
-
function handlePointerDown() {
|
|
656
|
-
isPointerDownRef.current = true;
|
|
657
|
-
setTimeout(() => {
|
|
658
|
-
isPointerDownRef.current = false;
|
|
659
|
-
});
|
|
660
|
-
}
|
|
661
|
-
function handleFocusOutside(event) {
|
|
662
|
-
const relatedTarget = event.relatedTarget;
|
|
663
|
-
queueMicrotask(() => {
|
|
664
|
-
const movedToUnrelatedNode = !(contains(domReference, relatedTarget) || contains(floating, relatedTarget) || contains(relatedTarget, floating) || contains(portalContext == null ? void 0 : portalContext.portalNode, relatedTarget) || relatedTarget != null && relatedTarget.hasAttribute(createAttribute("focus-guard")) || tree && (getChildren(tree.nodesRef.current, nodeId).find((node) => {
|
|
665
|
-
var _node$context, _node$context2;
|
|
666
|
-
return contains((_node$context = node.context) == null ? void 0 : _node$context.elements.floating, relatedTarget) || contains((_node$context2 = node.context) == null ? void 0 : _node$context2.elements.domReference, relatedTarget);
|
|
667
|
-
}) || getAncestors(tree.nodesRef.current, nodeId).find((node) => {
|
|
668
|
-
var _node$context3, _node$context4;
|
|
669
|
-
return ((_node$context3 = node.context) == null ? void 0 : _node$context3.elements.floating) === relatedTarget || ((_node$context4 = node.context) == null ? void 0 : _node$context4.elements.domReference) === relatedTarget;
|
|
670
|
-
})));
|
|
671
|
-
if (restoreFocus && movedToUnrelatedNode && activeElement(getDocument(floatingFocusNode)) === getDocument(floatingFocusNode).body) {
|
|
672
|
-
if (isHTMLElement(floatingFocusNode)) {
|
|
673
|
-
floatingFocusNode == null || floatingFocusNode.focus();
|
|
674
|
-
}
|
|
675
|
-
const prevTabbableIndex = tabbableIndexRef.current;
|
|
676
|
-
const tabbableContent = getTabbableContent();
|
|
677
|
-
const nodeToFocus = tabbableContent[prevTabbableIndex] || tabbableContent[tabbableContent.length - 1] || floatingFocusNode;
|
|
678
|
-
if (isHTMLElement(nodeToFocus)) {
|
|
679
|
-
nodeToFocus.focus();
|
|
680
|
-
}
|
|
681
|
-
}
|
|
682
|
-
if ((isUntrappedTypeableCombobox ? true : !modal) && relatedTarget && movedToUnrelatedNode && !isPointerDownRef.current && // Fix React 18 Strict Mode returnFocus due to double rendering.
|
|
683
|
-
relatedTarget !== getPreviouslyFocusedElement()) {
|
|
684
|
-
preventReturnFocusRef.current = true;
|
|
685
|
-
onOpenChange(false, event);
|
|
686
|
-
}
|
|
687
|
-
});
|
|
688
|
-
}
|
|
689
|
-
if (floating && isHTMLElement(domReference)) {
|
|
690
|
-
domReference.addEventListener("focusout", handleFocusOutside);
|
|
691
|
-
domReference.addEventListener("pointerdown", handlePointerDown);
|
|
692
|
-
floating.addEventListener("focusout", handleFocusOutside);
|
|
693
|
-
return () => {
|
|
694
|
-
domReference.removeEventListener("focusout", handleFocusOutside);
|
|
695
|
-
domReference.removeEventListener("pointerdown", handlePointerDown);
|
|
696
|
-
floating.removeEventListener("focusout", handleFocusOutside);
|
|
697
|
-
};
|
|
132
|
+
if (platformRef.current) {
|
|
133
|
+
config.platform = platformRef.current;
|
|
698
134
|
}
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
const portalNodes = Array.from((portalContext == null || (_portalContext$portal = portalContext.portalNode) == null ? void 0 : _portalContext$portal.querySelectorAll("[" + createAttribute("portal") + "]")) || []);
|
|
704
|
-
if (floating) {
|
|
705
|
-
const insideElements = [floating, ...portalNodes, startDismissButtonRef.current, endDismissButtonRef.current, orderRef.current.includes("reference") || isUntrappedTypeableCombobox ? domReference : null].filter((x) => x != null);
|
|
706
|
-
const cleanup = modal || isUntrappedTypeableCombobox ? markOthers(insideElements, guards, !guards) : markOthers(insideElements);
|
|
707
|
-
return () => {
|
|
708
|
-
cleanup();
|
|
135
|
+
computePosition(referenceRef.current, floatingRef.current, config).then((data2) => {
|
|
136
|
+
const fullData = {
|
|
137
|
+
...data2,
|
|
138
|
+
isPositioned: true
|
|
709
139
|
};
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
const doc = getDocument(floatingFocusNode);
|
|
715
|
-
const previouslyFocusedElement = activeElement(doc);
|
|
716
|
-
queueMicrotask(() => {
|
|
717
|
-
const focusableElements = getTabbableElements(floatingFocusNode);
|
|
718
|
-
const initialFocusValue = initialFocusRef.current;
|
|
719
|
-
const elToFocus = (typeof initialFocusValue === "number" ? focusableElements[initialFocusValue] : initialFocusValue.current) || floatingFocusNode;
|
|
720
|
-
const focusAlreadyInsideFloatingEl = contains(floatingFocusNode, previouslyFocusedElement);
|
|
721
|
-
if (!ignoreInitialFocus && !focusAlreadyInsideFloatingEl && open) {
|
|
722
|
-
enqueueFocus(elToFocus, {
|
|
723
|
-
preventScroll: elToFocus === floatingFocusNode
|
|
140
|
+
if (isMountedRef.current && !deepEqual(dataRef.current, fullData)) {
|
|
141
|
+
dataRef.current = fullData;
|
|
142
|
+
ReactDOM.flushSync(() => {
|
|
143
|
+
setData(fullData);
|
|
724
144
|
});
|
|
725
145
|
}
|
|
726
146
|
});
|
|
727
|
-
}, [
|
|
728
|
-
index(() => {
|
|
729
|
-
if (disabled || !floatingFocusNode) return;
|
|
730
|
-
let preventReturnFocusScroll = false;
|
|
731
|
-
const doc = getDocument(floatingFocusNode);
|
|
732
|
-
const previouslyFocusedElement = activeElement(doc);
|
|
733
|
-
const contextData = dataRef.current;
|
|
734
|
-
let openEvent = contextData.openEvent;
|
|
735
|
-
const domReference2 = refs.domReference.current;
|
|
736
|
-
addPreviouslyFocusedElement(previouslyFocusedElement);
|
|
737
|
-
function onOpenChange2(_ref) {
|
|
738
|
-
let {
|
|
739
|
-
open: open2,
|
|
740
|
-
reason,
|
|
741
|
-
event,
|
|
742
|
-
nested
|
|
743
|
-
} = _ref;
|
|
744
|
-
if (open2) {
|
|
745
|
-
openEvent = event;
|
|
746
|
-
}
|
|
747
|
-
if (reason === "escape-key" && refs.domReference.current) {
|
|
748
|
-
addPreviouslyFocusedElement(refs.domReference.current);
|
|
749
|
-
}
|
|
750
|
-
if (reason === "hover" && event.type === "mouseleave") {
|
|
751
|
-
preventReturnFocusRef.current = true;
|
|
752
|
-
}
|
|
753
|
-
if (reason !== "outside-press") return;
|
|
754
|
-
if (nested) {
|
|
755
|
-
preventReturnFocusRef.current = false;
|
|
756
|
-
preventReturnFocusScroll = true;
|
|
757
|
-
} else {
|
|
758
|
-
preventReturnFocusRef.current = !(isVirtualClick(event) || isVirtualPointerEvent(event));
|
|
759
|
-
}
|
|
760
|
-
}
|
|
761
|
-
events.on("openchange", onOpenChange2);
|
|
762
|
-
return () => {
|
|
763
|
-
events.off("openchange", onOpenChange2);
|
|
764
|
-
const activeEl = activeElement(doc);
|
|
765
|
-
const isFocusInsideFloatingTree = contains(floating, activeEl) || tree && getChildren(tree.nodesRef.current, nodeId).some((node) => {
|
|
766
|
-
var _node$context5;
|
|
767
|
-
return contains((_node$context5 = node.context) == null ? void 0 : _node$context5.elements.floating, activeEl);
|
|
768
|
-
});
|
|
769
|
-
const shouldFocusReference = isFocusInsideFloatingTree || openEvent && ["click", "mousedown"].includes(openEvent.type);
|
|
770
|
-
if (shouldFocusReference && refs.domReference.current) {
|
|
771
|
-
addPreviouslyFocusedElement(refs.domReference.current);
|
|
772
|
-
}
|
|
773
|
-
const returnContextElement = domReference2 || previouslyFocusedElement;
|
|
774
|
-
const tabbableElements = tabbable(getDocument(returnContextElement).body, getTabbableOptions());
|
|
775
|
-
queueMicrotask(() => {
|
|
776
|
-
let returnElement = getPreviouslyFocusedElement();
|
|
777
|
-
if (!returnElement && isHTMLElement(returnContextElement) && floating) {
|
|
778
|
-
returnElement = getClosestTabbableElement(tabbableElements, returnContextElement, floating);
|
|
779
|
-
}
|
|
780
|
-
if (
|
|
781
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
782
|
-
returnFocusRef.current && !preventReturnFocusRef.current && isHTMLElement(returnElement) && // If the focus moved somewhere else after mount, avoid returning focus
|
|
783
|
-
// since it likely entered a different element which should be
|
|
784
|
-
// respected: https://github.com/floating-ui/floating-ui/issues/2607
|
|
785
|
-
(returnElement !== activeEl && activeEl !== doc.body ? isFocusInsideFloatingTree : true)
|
|
786
|
-
) {
|
|
787
|
-
returnElement.focus({
|
|
788
|
-
preventScroll: preventReturnFocusScroll
|
|
789
|
-
});
|
|
790
|
-
}
|
|
791
|
-
});
|
|
792
|
-
};
|
|
793
|
-
}, [disabled, floating, floatingFocusNode, returnFocusRef, dataRef, refs, events, tree, nodeId]);
|
|
147
|
+
}, [latestMiddleware, placement, strategy, platformRef]);
|
|
794
148
|
index(() => {
|
|
795
|
-
if (
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
|
|
804
|
-
return () => {
|
|
805
|
-
portalContext.setFocusManagerState(null);
|
|
806
|
-
};
|
|
807
|
-
}, [disabled, portalContext, modal, open, onOpenChange, refs, closeOnFocusOut]);
|
|
149
|
+
if (open === false && dataRef.current.isPositioned) {
|
|
150
|
+
dataRef.current.isPositioned = false;
|
|
151
|
+
setData((data2) => ({
|
|
152
|
+
...data2,
|
|
153
|
+
isPositioned: false
|
|
154
|
+
}));
|
|
155
|
+
}
|
|
156
|
+
}, [open]);
|
|
157
|
+
const isMountedRef = React.useRef(false);
|
|
808
158
|
index(() => {
|
|
809
|
-
|
|
810
|
-
if (!floatingFocusNode) return;
|
|
811
|
-
if (typeof MutationObserver !== "function") return;
|
|
812
|
-
if (ignoreInitialFocus) return;
|
|
813
|
-
const handleMutation = () => {
|
|
814
|
-
const tabIndex = floatingFocusNode.getAttribute("tabindex");
|
|
815
|
-
const tabbableContent = getTabbableContent();
|
|
816
|
-
const activeEl = activeElement(getDocument(floating));
|
|
817
|
-
const tabbableIndex = tabbableContent.indexOf(activeEl);
|
|
818
|
-
if (tabbableIndex !== -1) {
|
|
819
|
-
tabbableIndexRef.current = tabbableIndex;
|
|
820
|
-
}
|
|
821
|
-
if (orderRef.current.includes("floating") || activeEl !== refs.domReference.current && tabbableContent.length === 0) {
|
|
822
|
-
if (tabIndex !== "0") {
|
|
823
|
-
floatingFocusNode.setAttribute("tabindex", "0");
|
|
824
|
-
}
|
|
825
|
-
} else if (tabIndex !== "-1") {
|
|
826
|
-
floatingFocusNode.setAttribute("tabindex", "-1");
|
|
827
|
-
}
|
|
828
|
-
};
|
|
829
|
-
handleMutation();
|
|
830
|
-
const observer = new MutationObserver(handleMutation);
|
|
831
|
-
observer.observe(floatingFocusNode, {
|
|
832
|
-
childList: true,
|
|
833
|
-
subtree: true,
|
|
834
|
-
attributes: true
|
|
835
|
-
});
|
|
159
|
+
isMountedRef.current = true;
|
|
836
160
|
return () => {
|
|
837
|
-
|
|
161
|
+
isMountedRef.current = false;
|
|
838
162
|
};
|
|
839
|
-
}, [
|
|
840
|
-
function renderDismissButton(location) {
|
|
841
|
-
if (disabled || !visuallyHiddenDismiss || !modal) {
|
|
842
|
-
return null;
|
|
843
|
-
}
|
|
844
|
-
return /* @__PURE__ */ React.createElement(VisuallyHiddenDismiss, {
|
|
845
|
-
ref: location === "start" ? startDismissButtonRef : endDismissButtonRef,
|
|
846
|
-
onClick: (event) => onOpenChange(false, event.nativeEvent)
|
|
847
|
-
}, typeof visuallyHiddenDismiss === "string" ? visuallyHiddenDismiss : "Dismiss");
|
|
848
|
-
}
|
|
849
|
-
const shouldRenderGuards = !disabled && guards && (modal ? !isUntrappedTypeableCombobox : true) && (isInsidePortal || modal);
|
|
850
|
-
return /* @__PURE__ */ React.createElement(React.Fragment, null, shouldRenderGuards && /* @__PURE__ */ React.createElement(FocusGuard, {
|
|
851
|
-
"data-type": "inside",
|
|
852
|
-
ref: portalContext == null ? void 0 : portalContext.beforeInsideRef,
|
|
853
|
-
onFocus: (event) => {
|
|
854
|
-
if (modal) {
|
|
855
|
-
const els = getTabbableElements();
|
|
856
|
-
enqueueFocus(order[0] === "reference" ? els[0] : els[els.length - 1]);
|
|
857
|
-
} else if (portalContext != null && portalContext.preserveTabOrder && portalContext.portalNode) {
|
|
858
|
-
preventReturnFocusRef.current = false;
|
|
859
|
-
if (isOutsideEvent(event, portalContext.portalNode)) {
|
|
860
|
-
const nextTabbable = getNextTabbable() || domReference;
|
|
861
|
-
nextTabbable == null || nextTabbable.focus();
|
|
862
|
-
} else {
|
|
863
|
-
var _portalContext$before;
|
|
864
|
-
(_portalContext$before = portalContext.beforeOutsideRef.current) == null || _portalContext$before.focus();
|
|
865
|
-
}
|
|
866
|
-
}
|
|
867
|
-
}
|
|
868
|
-
}), !isUntrappedTypeableCombobox && renderDismissButton("start"), children, renderDismissButton("end"), shouldRenderGuards && /* @__PURE__ */ React.createElement(FocusGuard, {
|
|
869
|
-
"data-type": "inside",
|
|
870
|
-
ref: portalContext == null ? void 0 : portalContext.afterInsideRef,
|
|
871
|
-
onFocus: (event) => {
|
|
872
|
-
if (modal) {
|
|
873
|
-
enqueueFocus(getTabbableElements()[0]);
|
|
874
|
-
} else if (portalContext != null && portalContext.preserveTabOrder && portalContext.portalNode) {
|
|
875
|
-
if (closeOnFocusOut) {
|
|
876
|
-
preventReturnFocusRef.current = true;
|
|
877
|
-
}
|
|
878
|
-
if (isOutsideEvent(event, portalContext.portalNode)) {
|
|
879
|
-
const prevTabbable = getPreviousTabbable() || domReference;
|
|
880
|
-
prevTabbable == null || prevTabbable.focus();
|
|
881
|
-
} else {
|
|
882
|
-
var _portalContext$afterO;
|
|
883
|
-
(_portalContext$afterO = portalContext.afterOutsideRef.current) == null || _portalContext$afterO.focus();
|
|
884
|
-
}
|
|
885
|
-
}
|
|
886
|
-
}
|
|
887
|
-
}));
|
|
888
|
-
}
|
|
889
|
-
const bubbleHandlerKeys = {
|
|
890
|
-
pointerdown: "onPointerDown",
|
|
891
|
-
mousedown: "onMouseDown",
|
|
892
|
-
click: "onClick"
|
|
893
|
-
};
|
|
894
|
-
const captureHandlerKeys = {
|
|
895
|
-
pointerdown: "onPointerDownCapture",
|
|
896
|
-
mousedown: "onMouseDownCapture",
|
|
897
|
-
click: "onClickCapture"
|
|
898
|
-
};
|
|
899
|
-
const normalizeProp = (normalizable) => {
|
|
900
|
-
var _normalizable$escapeK, _normalizable$outside;
|
|
901
|
-
return {
|
|
902
|
-
escapeKey: typeof normalizable === "boolean" ? normalizable : (_normalizable$escapeK = normalizable == null ? void 0 : normalizable.escapeKey) != null ? _normalizable$escapeK : false,
|
|
903
|
-
outsidePress: typeof normalizable === "boolean" ? normalizable : (_normalizable$outside = normalizable == null ? void 0 : normalizable.outsidePress) != null ? _normalizable$outside : true
|
|
904
|
-
};
|
|
905
|
-
};
|
|
906
|
-
function useDismiss(context, props) {
|
|
907
|
-
if (props === void 0) {
|
|
908
|
-
props = {};
|
|
909
|
-
}
|
|
910
|
-
const {
|
|
911
|
-
open,
|
|
912
|
-
onOpenChange,
|
|
913
|
-
elements,
|
|
914
|
-
dataRef
|
|
915
|
-
} = context;
|
|
916
|
-
const {
|
|
917
|
-
enabled = true,
|
|
918
|
-
escapeKey = true,
|
|
919
|
-
outsidePress: unstable_outsidePress = true,
|
|
920
|
-
outsidePressEvent = "pointerdown",
|
|
921
|
-
referencePress = false,
|
|
922
|
-
referencePressEvent = "pointerdown",
|
|
923
|
-
ancestorScroll = false,
|
|
924
|
-
bubbles,
|
|
925
|
-
capture
|
|
926
|
-
} = props;
|
|
927
|
-
const tree = useFloatingTree();
|
|
928
|
-
const outsidePressFn = useEffectEvent(typeof unstable_outsidePress === "function" ? unstable_outsidePress : () => false);
|
|
929
|
-
const outsidePress = typeof unstable_outsidePress === "function" ? outsidePressFn : unstable_outsidePress;
|
|
930
|
-
const insideReactTreeRef = React.useRef(false);
|
|
931
|
-
const endedOrStartedInsideRef = React.useRef(false);
|
|
932
|
-
const {
|
|
933
|
-
escapeKey: escapeKeyBubbles,
|
|
934
|
-
outsidePress: outsidePressBubbles
|
|
935
|
-
} = normalizeProp(bubbles);
|
|
936
|
-
const {
|
|
937
|
-
escapeKey: escapeKeyCapture,
|
|
938
|
-
outsidePress: outsidePressCapture
|
|
939
|
-
} = normalizeProp(capture);
|
|
940
|
-
const closeOnEscapeKeyDown = useEffectEvent((event) => {
|
|
941
|
-
var _dataRef$current$floa;
|
|
942
|
-
if (!open || !enabled || !escapeKey || event.key !== "Escape") {
|
|
943
|
-
return;
|
|
944
|
-
}
|
|
945
|
-
const nodeId = (_dataRef$current$floa = dataRef.current.floatingContext) == null ? void 0 : _dataRef$current$floa.nodeId;
|
|
946
|
-
const children = tree ? getChildren(tree.nodesRef.current, nodeId) : [];
|
|
947
|
-
if (!escapeKeyBubbles) {
|
|
948
|
-
event.stopPropagation();
|
|
949
|
-
if (children.length > 0) {
|
|
950
|
-
let shouldDismiss = true;
|
|
951
|
-
children.forEach((child) => {
|
|
952
|
-
var _child$context;
|
|
953
|
-
if ((_child$context = child.context) != null && _child$context.open && !child.context.dataRef.current.__escapeKeyBubbles) {
|
|
954
|
-
shouldDismiss = false;
|
|
955
|
-
return;
|
|
956
|
-
}
|
|
957
|
-
});
|
|
958
|
-
if (!shouldDismiss) {
|
|
959
|
-
return;
|
|
960
|
-
}
|
|
961
|
-
}
|
|
962
|
-
}
|
|
963
|
-
onOpenChange(false, isReactEvent(event) ? event.nativeEvent : event, "escape-key");
|
|
964
|
-
});
|
|
965
|
-
const closeOnEscapeKeyDownCapture = useEffectEvent((event) => {
|
|
966
|
-
var _getTarget2;
|
|
967
|
-
const callback = () => {
|
|
968
|
-
var _getTarget;
|
|
969
|
-
closeOnEscapeKeyDown(event);
|
|
970
|
-
(_getTarget = getTarget(event)) == null || _getTarget.removeEventListener("keydown", callback);
|
|
971
|
-
};
|
|
972
|
-
(_getTarget2 = getTarget(event)) == null || _getTarget2.addEventListener("keydown", callback);
|
|
973
|
-
});
|
|
974
|
-
const closeOnPressOutside = useEffectEvent((event) => {
|
|
975
|
-
var _dataRef$current$floa2;
|
|
976
|
-
const insideReactTree = insideReactTreeRef.current;
|
|
977
|
-
insideReactTreeRef.current = false;
|
|
978
|
-
const endedOrStartedInside = endedOrStartedInsideRef.current;
|
|
979
|
-
endedOrStartedInsideRef.current = false;
|
|
980
|
-
if (outsidePressEvent === "click" && endedOrStartedInside) {
|
|
981
|
-
return;
|
|
982
|
-
}
|
|
983
|
-
if (insideReactTree) {
|
|
984
|
-
return;
|
|
985
|
-
}
|
|
986
|
-
if (typeof outsidePress === "function" && !outsidePress(event)) {
|
|
987
|
-
return;
|
|
988
|
-
}
|
|
989
|
-
const target = getTarget(event);
|
|
990
|
-
const inertSelector = "[" + createAttribute("inert") + "]";
|
|
991
|
-
const markers = getDocument(elements.floating).querySelectorAll(inertSelector);
|
|
992
|
-
let targetRootAncestor = isElement(target) ? target : null;
|
|
993
|
-
while (targetRootAncestor && !isLastTraversableNode(targetRootAncestor)) {
|
|
994
|
-
const nextParent = getParentNode(targetRootAncestor);
|
|
995
|
-
if (isLastTraversableNode(nextParent) || !isElement(nextParent)) {
|
|
996
|
-
break;
|
|
997
|
-
}
|
|
998
|
-
targetRootAncestor = nextParent;
|
|
999
|
-
}
|
|
1000
|
-
if (markers.length && isElement(target) && !isRootElement(target) && // Clicked on a direct ancestor (e.g. FloatingOverlay).
|
|
1001
|
-
!contains(target, elements.floating) && // If the target root element contains none of the markers, then the
|
|
1002
|
-
// element was injected after the floating element rendered.
|
|
1003
|
-
Array.from(markers).every((marker) => !contains(targetRootAncestor, marker))) {
|
|
1004
|
-
return;
|
|
1005
|
-
}
|
|
1006
|
-
if (isHTMLElement(target) && floating) {
|
|
1007
|
-
const canScrollX = target.clientWidth > 0 && target.scrollWidth > target.clientWidth;
|
|
1008
|
-
const canScrollY = target.clientHeight > 0 && target.scrollHeight > target.clientHeight;
|
|
1009
|
-
let xCond = canScrollY && event.offsetX > target.clientWidth;
|
|
1010
|
-
if (canScrollY) {
|
|
1011
|
-
const isRTL = getComputedStyle(target).direction === "rtl";
|
|
1012
|
-
if (isRTL) {
|
|
1013
|
-
xCond = event.offsetX <= target.offsetWidth - target.clientWidth;
|
|
1014
|
-
}
|
|
1015
|
-
}
|
|
1016
|
-
if (xCond || canScrollX && event.offsetY > target.clientHeight) {
|
|
1017
|
-
return;
|
|
1018
|
-
}
|
|
1019
|
-
}
|
|
1020
|
-
const nodeId = (_dataRef$current$floa2 = dataRef.current.floatingContext) == null ? void 0 : _dataRef$current$floa2.nodeId;
|
|
1021
|
-
const targetIsInsideChildren = tree && getChildren(tree.nodesRef.current, nodeId).some((node) => {
|
|
1022
|
-
var _node$context;
|
|
1023
|
-
return isEventTargetWithin(event, (_node$context = node.context) == null ? void 0 : _node$context.elements.floating);
|
|
1024
|
-
});
|
|
1025
|
-
if (isEventTargetWithin(event, elements.floating) || isEventTargetWithin(event, elements.domReference) || targetIsInsideChildren) {
|
|
1026
|
-
return;
|
|
1027
|
-
}
|
|
1028
|
-
const children = tree ? getChildren(tree.nodesRef.current, nodeId) : [];
|
|
1029
|
-
if (children.length > 0) {
|
|
1030
|
-
let shouldDismiss = true;
|
|
1031
|
-
children.forEach((child) => {
|
|
1032
|
-
var _child$context2;
|
|
1033
|
-
if ((_child$context2 = child.context) != null && _child$context2.open && !child.context.dataRef.current.__outsidePressBubbles) {
|
|
1034
|
-
shouldDismiss = false;
|
|
1035
|
-
return;
|
|
1036
|
-
}
|
|
1037
|
-
});
|
|
1038
|
-
if (!shouldDismiss) {
|
|
1039
|
-
return;
|
|
1040
|
-
}
|
|
1041
|
-
}
|
|
1042
|
-
onOpenChange(false, event, "outside-press");
|
|
1043
|
-
});
|
|
1044
|
-
const closeOnPressOutsideCapture = useEffectEvent((event) => {
|
|
1045
|
-
var _getTarget4;
|
|
1046
|
-
const callback = () => {
|
|
1047
|
-
var _getTarget3;
|
|
1048
|
-
closeOnPressOutside(event);
|
|
1049
|
-
(_getTarget3 = getTarget(event)) == null || _getTarget3.removeEventListener(outsidePressEvent, callback);
|
|
1050
|
-
};
|
|
1051
|
-
(_getTarget4 = getTarget(event)) == null || _getTarget4.addEventListener(outsidePressEvent, callback);
|
|
1052
|
-
});
|
|
1053
|
-
React.useEffect(() => {
|
|
1054
|
-
if (!open || !enabled) {
|
|
1055
|
-
return;
|
|
1056
|
-
}
|
|
1057
|
-
dataRef.current.__escapeKeyBubbles = escapeKeyBubbles;
|
|
1058
|
-
dataRef.current.__outsidePressBubbles = outsidePressBubbles;
|
|
1059
|
-
function onScroll(event) {
|
|
1060
|
-
onOpenChange(false, event, "ancestor-scroll");
|
|
1061
|
-
}
|
|
1062
|
-
const doc = getDocument(elements.floating);
|
|
1063
|
-
escapeKey && doc.addEventListener("keydown", escapeKeyCapture ? closeOnEscapeKeyDownCapture : closeOnEscapeKeyDown, escapeKeyCapture);
|
|
1064
|
-
outsidePress && doc.addEventListener(outsidePressEvent, outsidePressCapture ? closeOnPressOutsideCapture : closeOnPressOutside, outsidePressCapture);
|
|
1065
|
-
let ancestors = [];
|
|
1066
|
-
if (ancestorScroll) {
|
|
1067
|
-
if (isElement(elements.domReference)) {
|
|
1068
|
-
ancestors = getOverflowAncestors(elements.domReference);
|
|
1069
|
-
}
|
|
1070
|
-
if (isElement(elements.floating)) {
|
|
1071
|
-
ancestors = ancestors.concat(getOverflowAncestors(elements.floating));
|
|
1072
|
-
}
|
|
1073
|
-
if (!isElement(elements.reference) && elements.reference && elements.reference.contextElement) {
|
|
1074
|
-
ancestors = ancestors.concat(getOverflowAncestors(elements.reference.contextElement));
|
|
1075
|
-
}
|
|
1076
|
-
}
|
|
1077
|
-
ancestors = ancestors.filter((ancestor) => {
|
|
1078
|
-
var _doc$defaultView;
|
|
1079
|
-
return ancestor !== ((_doc$defaultView = doc.defaultView) == null ? void 0 : _doc$defaultView.visualViewport);
|
|
1080
|
-
});
|
|
1081
|
-
ancestors.forEach((ancestor) => {
|
|
1082
|
-
ancestor.addEventListener("scroll", onScroll, {
|
|
1083
|
-
passive: true
|
|
1084
|
-
});
|
|
1085
|
-
});
|
|
1086
|
-
return () => {
|
|
1087
|
-
escapeKey && doc.removeEventListener("keydown", escapeKeyCapture ? closeOnEscapeKeyDownCapture : closeOnEscapeKeyDown, escapeKeyCapture);
|
|
1088
|
-
outsidePress && doc.removeEventListener(outsidePressEvent, outsidePressCapture ? closeOnPressOutsideCapture : closeOnPressOutside, outsidePressCapture);
|
|
1089
|
-
ancestors.forEach((ancestor) => {
|
|
1090
|
-
ancestor.removeEventListener("scroll", onScroll);
|
|
1091
|
-
});
|
|
1092
|
-
};
|
|
1093
|
-
}, [dataRef, elements, escapeKey, outsidePress, outsidePressEvent, open, onOpenChange, ancestorScroll, enabled, escapeKeyBubbles, outsidePressBubbles, closeOnEscapeKeyDown, escapeKeyCapture, closeOnEscapeKeyDownCapture, closeOnPressOutside, outsidePressCapture, closeOnPressOutsideCapture]);
|
|
1094
|
-
React.useEffect(() => {
|
|
1095
|
-
insideReactTreeRef.current = false;
|
|
1096
|
-
}, [outsidePress, outsidePressEvent]);
|
|
1097
|
-
const reference = React.useMemo(() => ({
|
|
1098
|
-
onKeyDown: closeOnEscapeKeyDown,
|
|
1099
|
-
[bubbleHandlerKeys[referencePressEvent]]: (event) => {
|
|
1100
|
-
if (referencePress) {
|
|
1101
|
-
onOpenChange(false, event.nativeEvent, "reference-press");
|
|
1102
|
-
}
|
|
1103
|
-
}
|
|
1104
|
-
}), [closeOnEscapeKeyDown, onOpenChange, referencePress, referencePressEvent]);
|
|
1105
|
-
const floating = React.useMemo(() => ({
|
|
1106
|
-
onKeyDown: closeOnEscapeKeyDown,
|
|
1107
|
-
onMouseDown() {
|
|
1108
|
-
endedOrStartedInsideRef.current = true;
|
|
1109
|
-
},
|
|
1110
|
-
onMouseUp() {
|
|
1111
|
-
endedOrStartedInsideRef.current = true;
|
|
1112
|
-
},
|
|
1113
|
-
[captureHandlerKeys[outsidePressEvent]]: () => {
|
|
1114
|
-
insideReactTreeRef.current = true;
|
|
1115
|
-
}
|
|
1116
|
-
}), [closeOnEscapeKeyDown, outsidePressEvent]);
|
|
1117
|
-
return React.useMemo(() => enabled ? {
|
|
1118
|
-
reference,
|
|
1119
|
-
floating
|
|
1120
|
-
} : {}, [enabled, reference, floating]);
|
|
1121
|
-
}
|
|
1122
|
-
function useFloatingRootContext(options) {
|
|
1123
|
-
const {
|
|
1124
|
-
open = false,
|
|
1125
|
-
onOpenChange: onOpenChangeProp,
|
|
1126
|
-
elements: elementsProp
|
|
1127
|
-
} = options;
|
|
1128
|
-
const floatingId = useId();
|
|
1129
|
-
const dataRef = React.useRef({});
|
|
1130
|
-
const [events] = React.useState(() => createPubSub());
|
|
1131
|
-
const nested = useFloatingParentNodeId() != null;
|
|
1132
|
-
if (process.env.NODE_ENV !== "production") {
|
|
1133
|
-
const optionDomReference = elementsProp.reference;
|
|
1134
|
-
if (optionDomReference && !isElement(optionDomReference)) {
|
|
1135
|
-
error("Cannot pass a virtual element to the `elements.reference` option,", "as it must be a real DOM element. Use `refs.setPositionReference()`", "instead.");
|
|
1136
|
-
}
|
|
1137
|
-
}
|
|
1138
|
-
const [positionReference, setPositionReference] = React.useState(elementsProp.reference);
|
|
1139
|
-
const onOpenChange = useEffectEvent((open2, event, reason) => {
|
|
1140
|
-
dataRef.current.openEvent = open2 ? event : void 0;
|
|
1141
|
-
events.emit("openchange", {
|
|
1142
|
-
open: open2,
|
|
1143
|
-
event,
|
|
1144
|
-
reason,
|
|
1145
|
-
nested
|
|
1146
|
-
});
|
|
1147
|
-
onOpenChangeProp == null || onOpenChangeProp(open2, event, reason);
|
|
1148
|
-
});
|
|
1149
|
-
const refs = React.useMemo(() => ({
|
|
1150
|
-
setPositionReference
|
|
1151
|
-
}), []);
|
|
1152
|
-
const elements = React.useMemo(() => ({
|
|
1153
|
-
reference: positionReference || elementsProp.reference || null,
|
|
1154
|
-
floating: elementsProp.floating || null,
|
|
1155
|
-
domReference: elementsProp.reference
|
|
1156
|
-
}), [positionReference, elementsProp.reference, elementsProp.floating]);
|
|
1157
|
-
return React.useMemo(() => ({
|
|
1158
|
-
dataRef,
|
|
1159
|
-
open,
|
|
1160
|
-
onOpenChange,
|
|
1161
|
-
elements,
|
|
1162
|
-
events,
|
|
1163
|
-
floatingId,
|
|
1164
|
-
refs
|
|
1165
|
-
}), [open, onOpenChange, elements, events, floatingId, refs]);
|
|
1166
|
-
}
|
|
1167
|
-
function useFloating(options) {
|
|
1168
|
-
if (options === void 0) {
|
|
1169
|
-
options = {};
|
|
1170
|
-
}
|
|
1171
|
-
const {
|
|
1172
|
-
nodeId
|
|
1173
|
-
} = options;
|
|
1174
|
-
const internalRootContext = useFloatingRootContext({
|
|
1175
|
-
...options,
|
|
1176
|
-
elements: {
|
|
1177
|
-
reference: null,
|
|
1178
|
-
floating: null,
|
|
1179
|
-
...options.elements
|
|
1180
|
-
}
|
|
1181
|
-
});
|
|
1182
|
-
const rootContext = options.rootContext || internalRootContext;
|
|
1183
|
-
const computedElements = rootContext.elements;
|
|
1184
|
-
const [_domReference, setDomReference] = React.useState(null);
|
|
1185
|
-
const [positionReference, _setPositionReference] = React.useState(null);
|
|
1186
|
-
const optionDomReference = computedElements == null ? void 0 : computedElements.reference;
|
|
1187
|
-
const domReference = optionDomReference || _domReference;
|
|
1188
|
-
const domReferenceRef = React.useRef(null);
|
|
1189
|
-
const tree = useFloatingTree();
|
|
163
|
+
}, []);
|
|
1190
164
|
index(() => {
|
|
1191
|
-
if (
|
|
1192
|
-
|
|
1193
|
-
|
|
1194
|
-
|
|
1195
|
-
|
|
1196
|
-
...options,
|
|
1197
|
-
elements: {
|
|
1198
|
-
...computedElements,
|
|
1199
|
-
...positionReference && {
|
|
1200
|
-
reference: positionReference
|
|
165
|
+
if (referenceEl) referenceRef.current = referenceEl;
|
|
166
|
+
if (floatingEl) floatingRef.current = floatingEl;
|
|
167
|
+
if (referenceEl && floatingEl) {
|
|
168
|
+
if (whileElementsMountedRef.current) {
|
|
169
|
+
return whileElementsMountedRef.current(referenceEl, floatingEl, update);
|
|
1201
170
|
}
|
|
171
|
+
update();
|
|
1202
172
|
}
|
|
1203
|
-
});
|
|
1204
|
-
const setPositionReference = React.useCallback((node) => {
|
|
1205
|
-
const computedPositionReference = isElement(node) ? {
|
|
1206
|
-
getBoundingClientRect: () => node.getBoundingClientRect(),
|
|
1207
|
-
contextElement: node
|
|
1208
|
-
} : node;
|
|
1209
|
-
_setPositionReference(computedPositionReference);
|
|
1210
|
-
position.refs.setReference(computedPositionReference);
|
|
1211
|
-
}, [position.refs]);
|
|
1212
|
-
const setReference = React.useCallback((node) => {
|
|
1213
|
-
if (isElement(node) || node === null) {
|
|
1214
|
-
domReferenceRef.current = node;
|
|
1215
|
-
setDomReference(node);
|
|
1216
|
-
}
|
|
1217
|
-
if (isElement(position.refs.reference.current) || position.refs.reference.current === null || // Don't allow setting virtual elements using the old technique back to
|
|
1218
|
-
// `null` to support `positionReference` + an unstable `reference`
|
|
1219
|
-
// callback ref.
|
|
1220
|
-
node !== null && !isElement(node)) {
|
|
1221
|
-
position.refs.setReference(node);
|
|
1222
|
-
}
|
|
1223
|
-
}, [position.refs]);
|
|
173
|
+
}, [referenceEl, floatingEl, update, whileElementsMountedRef, hasWhileElementsMounted]);
|
|
1224
174
|
const refs = React.useMemo(() => ({
|
|
1225
|
-
|
|
175
|
+
reference: referenceRef,
|
|
176
|
+
floating: floatingRef,
|
|
1226
177
|
setReference,
|
|
1227
|
-
|
|
1228
|
-
|
|
1229
|
-
}), [position.refs, setReference, setPositionReference]);
|
|
178
|
+
setFloating
|
|
179
|
+
}), [setReference, setFloating]);
|
|
1230
180
|
const elements = React.useMemo(() => ({
|
|
1231
|
-
|
|
1232
|
-
|
|
1233
|
-
}), [
|
|
1234
|
-
const
|
|
1235
|
-
|
|
1236
|
-
|
|
1237
|
-
|
|
1238
|
-
|
|
1239
|
-
|
|
1240
|
-
|
|
1241
|
-
|
|
1242
|
-
|
|
1243
|
-
const
|
|
1244
|
-
|
|
1245
|
-
|
|
1246
|
-
}
|
|
1247
|
-
});
|
|
1248
|
-
return React.useMemo(() => ({
|
|
1249
|
-
...position,
|
|
1250
|
-
context,
|
|
1251
|
-
refs,
|
|
1252
|
-
elements
|
|
1253
|
-
}), [position, refs, elements, context]);
|
|
1254
|
-
}
|
|
1255
|
-
const ACTIVE_KEY = "active";
|
|
1256
|
-
const SELECTED_KEY = "selected";
|
|
1257
|
-
function mergeProps(userProps, propsList, elementKey) {
|
|
1258
|
-
const map = /* @__PURE__ */ new Map();
|
|
1259
|
-
const isItem = elementKey === "item";
|
|
1260
|
-
let domUserProps = userProps;
|
|
1261
|
-
if (isItem && userProps) {
|
|
1262
|
-
const {
|
|
1263
|
-
[ACTIVE_KEY]: _,
|
|
1264
|
-
[SELECTED_KEY]: __,
|
|
1265
|
-
...validProps
|
|
1266
|
-
} = userProps;
|
|
1267
|
-
domUserProps = validProps;
|
|
1268
|
-
}
|
|
1269
|
-
return {
|
|
1270
|
-
...elementKey === "floating" && {
|
|
1271
|
-
tabIndex: -1
|
|
1272
|
-
},
|
|
1273
|
-
...domUserProps,
|
|
1274
|
-
...propsList.map((value) => {
|
|
1275
|
-
const propsOrGetProps = value ? value[elementKey] : null;
|
|
1276
|
-
if (typeof propsOrGetProps === "function") {
|
|
1277
|
-
return userProps ? propsOrGetProps(userProps) : null;
|
|
1278
|
-
}
|
|
1279
|
-
return propsOrGetProps;
|
|
1280
|
-
}).concat(userProps).reduce((acc, props) => {
|
|
1281
|
-
if (!props) {
|
|
1282
|
-
return acc;
|
|
1283
|
-
}
|
|
1284
|
-
Object.entries(props).forEach((_ref) => {
|
|
1285
|
-
let [key, value] = _ref;
|
|
1286
|
-
if (isItem && [ACTIVE_KEY, SELECTED_KEY].includes(key)) {
|
|
1287
|
-
return;
|
|
1288
|
-
}
|
|
1289
|
-
if (key.indexOf("on") === 0) {
|
|
1290
|
-
if (!map.has(key)) {
|
|
1291
|
-
map.set(key, []);
|
|
1292
|
-
}
|
|
1293
|
-
if (typeof value === "function") {
|
|
1294
|
-
var _map$get;
|
|
1295
|
-
(_map$get = map.get(key)) == null || _map$get.push(value);
|
|
1296
|
-
acc[key] = function() {
|
|
1297
|
-
var _map$get2;
|
|
1298
|
-
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
1299
|
-
args[_key] = arguments[_key];
|
|
1300
|
-
}
|
|
1301
|
-
return (_map$get2 = map.get(key)) == null ? void 0 : _map$get2.map((fn) => fn(...args)).find((val) => val !== void 0);
|
|
1302
|
-
};
|
|
1303
|
-
}
|
|
1304
|
-
} else {
|
|
1305
|
-
acc[key] = value;
|
|
1306
|
-
}
|
|
1307
|
-
});
|
|
1308
|
-
return acc;
|
|
1309
|
-
}, {})
|
|
1310
|
-
};
|
|
1311
|
-
}
|
|
1312
|
-
function useInteractions(propsList) {
|
|
1313
|
-
if (propsList === void 0) {
|
|
1314
|
-
propsList = [];
|
|
1315
|
-
}
|
|
1316
|
-
const referenceDeps = propsList.map((key) => key == null ? void 0 : key.reference);
|
|
1317
|
-
const floatingDeps = propsList.map((key) => key == null ? void 0 : key.floating);
|
|
1318
|
-
const itemDeps = propsList.map((key) => key == null ? void 0 : key.item);
|
|
1319
|
-
const getReferenceProps = React.useCallback(
|
|
1320
|
-
(userProps) => mergeProps(userProps, propsList, "reference"),
|
|
1321
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
1322
|
-
referenceDeps
|
|
1323
|
-
);
|
|
1324
|
-
const getFloatingProps = React.useCallback(
|
|
1325
|
-
(userProps) => mergeProps(userProps, propsList, "floating"),
|
|
1326
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
1327
|
-
floatingDeps
|
|
1328
|
-
);
|
|
1329
|
-
const getItemProps = React.useCallback(
|
|
1330
|
-
(userProps) => mergeProps(userProps, propsList, "item"),
|
|
1331
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
1332
|
-
itemDeps
|
|
1333
|
-
);
|
|
1334
|
-
return React.useMemo(() => ({
|
|
1335
|
-
getReferenceProps,
|
|
1336
|
-
getFloatingProps,
|
|
1337
|
-
getItemProps
|
|
1338
|
-
}), [getReferenceProps, getFloatingProps, getItemProps]);
|
|
1339
|
-
}
|
|
1340
|
-
const componentRoleToAriaRoleMap = /* @__PURE__ */ new Map([["select", "listbox"], ["combobox", "listbox"], ["label", false]]);
|
|
1341
|
-
function useRole(context, props) {
|
|
1342
|
-
var _componentRoleToAriaR;
|
|
1343
|
-
if (props === void 0) {
|
|
1344
|
-
props = {};
|
|
1345
|
-
}
|
|
1346
|
-
const {
|
|
1347
|
-
open,
|
|
1348
|
-
floatingId
|
|
1349
|
-
} = context;
|
|
1350
|
-
const {
|
|
1351
|
-
enabled = true,
|
|
1352
|
-
role = "dialog"
|
|
1353
|
-
} = props;
|
|
1354
|
-
const ariaRole = (_componentRoleToAriaR = componentRoleToAriaRoleMap.get(role)) != null ? _componentRoleToAriaR : role;
|
|
1355
|
-
const referenceId = useId();
|
|
1356
|
-
const parentId = useFloatingParentNodeId();
|
|
1357
|
-
const isNested = parentId != null;
|
|
1358
|
-
const reference = React.useMemo(() => {
|
|
1359
|
-
if (ariaRole === "tooltip" || role === "label") {
|
|
181
|
+
reference: referenceEl,
|
|
182
|
+
floating: floatingEl
|
|
183
|
+
}), [referenceEl, floatingEl]);
|
|
184
|
+
const floatingStyles = React.useMemo(() => {
|
|
185
|
+
const initialStyles = {
|
|
186
|
+
position: strategy,
|
|
187
|
+
left: 0,
|
|
188
|
+
top: 0
|
|
189
|
+
};
|
|
190
|
+
if (!elements.floating) {
|
|
191
|
+
return initialStyles;
|
|
192
|
+
}
|
|
193
|
+
const x = roundByDPR(elements.floating, data.x);
|
|
194
|
+
const y = roundByDPR(elements.floating, data.y);
|
|
195
|
+
if (transform) {
|
|
1360
196
|
return {
|
|
1361
|
-
|
|
197
|
+
...initialStyles,
|
|
198
|
+
transform: "translate(" + x + "px, " + y + "px)",
|
|
199
|
+
...getDPR(elements.floating) >= 1.5 && {
|
|
200
|
+
willChange: "transform"
|
|
201
|
+
}
|
|
1362
202
|
};
|
|
1363
203
|
}
|
|
1364
204
|
return {
|
|
1365
|
-
|
|
1366
|
-
|
|
1367
|
-
|
|
1368
|
-
...ariaRole === "listbox" && {
|
|
1369
|
-
role: "combobox"
|
|
1370
|
-
},
|
|
1371
|
-
...ariaRole === "menu" && {
|
|
1372
|
-
id: referenceId
|
|
1373
|
-
},
|
|
1374
|
-
...ariaRole === "menu" && isNested && {
|
|
1375
|
-
role: "menuitem"
|
|
1376
|
-
},
|
|
1377
|
-
...role === "select" && {
|
|
1378
|
-
"aria-autocomplete": "none"
|
|
1379
|
-
},
|
|
1380
|
-
...role === "combobox" && {
|
|
1381
|
-
"aria-autocomplete": "list"
|
|
1382
|
-
}
|
|
1383
|
-
};
|
|
1384
|
-
}, [ariaRole, floatingId, isNested, open, referenceId, role]);
|
|
1385
|
-
const floating = React.useMemo(() => {
|
|
1386
|
-
const floatingProps = {
|
|
1387
|
-
id: floatingId,
|
|
1388
|
-
...ariaRole && {
|
|
1389
|
-
role: ariaRole
|
|
1390
|
-
}
|
|
1391
|
-
};
|
|
1392
|
-
if (ariaRole === "tooltip" || role === "label") {
|
|
1393
|
-
return floatingProps;
|
|
1394
|
-
}
|
|
1395
|
-
return {
|
|
1396
|
-
...floatingProps,
|
|
1397
|
-
...ariaRole === "menu" && {
|
|
1398
|
-
"aria-labelledby": referenceId
|
|
1399
|
-
}
|
|
1400
|
-
};
|
|
1401
|
-
}, [ariaRole, floatingId, referenceId, role]);
|
|
1402
|
-
const item = React.useCallback((_ref) => {
|
|
1403
|
-
let {
|
|
1404
|
-
active,
|
|
1405
|
-
selected
|
|
1406
|
-
} = _ref;
|
|
1407
|
-
const commonProps = {
|
|
1408
|
-
role: "option",
|
|
1409
|
-
...active && {
|
|
1410
|
-
id: floatingId + "-option"
|
|
1411
|
-
}
|
|
205
|
+
position: strategy,
|
|
206
|
+
left: x,
|
|
207
|
+
top: y
|
|
1412
208
|
};
|
|
1413
|
-
|
|
1414
|
-
|
|
1415
|
-
|
|
1416
|
-
|
|
1417
|
-
|
|
1418
|
-
|
|
1419
|
-
|
|
1420
|
-
|
|
1421
|
-
...commonProps,
|
|
1422
|
-
...active && {
|
|
1423
|
-
"aria-selected": true
|
|
1424
|
-
}
|
|
1425
|
-
};
|
|
1426
|
-
}
|
|
1427
|
-
}
|
|
1428
|
-
return {};
|
|
1429
|
-
}, [floatingId, role]);
|
|
1430
|
-
return React.useMemo(() => enabled ? {
|
|
1431
|
-
reference,
|
|
1432
|
-
floating,
|
|
1433
|
-
item
|
|
1434
|
-
} : {}, [enabled, reference, floating, item]);
|
|
209
|
+
}, [strategy, transform, elements.floating, data.x, data.y]);
|
|
210
|
+
return React.useMemo(() => ({
|
|
211
|
+
...data,
|
|
212
|
+
update,
|
|
213
|
+
refs,
|
|
214
|
+
elements,
|
|
215
|
+
floatingStyles
|
|
216
|
+
}), [data, update, refs, elements, floatingStyles]);
|
|
1435
217
|
}
|
|
218
|
+
const offset = (options, deps) => ({
|
|
219
|
+
...offset$1(options),
|
|
220
|
+
options: [options, deps]
|
|
221
|
+
});
|
|
222
|
+
const shift = (options, deps) => ({
|
|
223
|
+
...shift$1(options),
|
|
224
|
+
options: [options, deps]
|
|
225
|
+
});
|
|
226
|
+
const flip = (options, deps) => ({
|
|
227
|
+
...flip$1(options),
|
|
228
|
+
options: [options, deps]
|
|
229
|
+
});
|
|
230
|
+
const inline = (options, deps) => ({
|
|
231
|
+
...inline$1(options),
|
|
232
|
+
options: [options, deps]
|
|
233
|
+
});
|
|
1436
234
|
export {
|
|
1437
|
-
|
|
1438
|
-
|
|
235
|
+
autoUpdate,
|
|
236
|
+
computePosition,
|
|
1439
237
|
flip,
|
|
1440
|
-
getOverflowAncestors,
|
|
1441
238
|
inline,
|
|
1442
239
|
offset,
|
|
240
|
+
platform,
|
|
1443
241
|
shift,
|
|
1444
|
-
|
|
1445
|
-
useFloating,
|
|
1446
|
-
useFloatingParentNodeId,
|
|
1447
|
-
useFloatingPortalNode,
|
|
1448
|
-
useFloatingRootContext,
|
|
1449
|
-
useFloatingTree,
|
|
1450
|
-
useId,
|
|
1451
|
-
useInteractions,
|
|
1452
|
-
useRole
|
|
242
|
+
useFloating
|
|
1453
243
|
};
|
|
1454
244
|
//# sourceMappingURL=react-text-annotator.es14.js.map
|