@soomo/react-text-annotator 3.1.0-staging.20 → 3.1.0-staging.22

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