@soomo/react-text-annotator 3.0.0-staging.59 → 3.0.0-staging.60

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