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