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