@jobber/components 9.5.3 → 9.6.0
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/Combobox.d.ts +1 -0
- package/Combobox.js +17 -0
- package/dist/Autocomplete/index.cjs +0 -2
- package/dist/Autocomplete/index.mjs +0 -2
- package/dist/Autocomplete-cjs.js +4 -5
- package/dist/Autocomplete-es.js +1 -2
- package/dist/Card/index.cjs +2 -2
- package/dist/Card/index.mjs +2 -2
- package/dist/Chip/index.cjs +0 -2
- package/dist/Chip/index.mjs +0 -2
- package/dist/Chips/InternalChipDismissible/hooks/index.cjs +0 -2
- package/dist/Chips/InternalChipDismissible/hooks/index.mjs +0 -2
- package/dist/Chips/InternalChipDismissible/index.cjs +0 -2
- package/dist/Chips/InternalChipDismissible/index.mjs +0 -2
- package/dist/Chips/index.cjs +0 -2
- package/dist/Chips/index.mjs +0 -2
- package/dist/Combobox/Combobox.contentSlots.d.ts +5 -0
- package/dist/Combobox/Combobox.context.d.ts +34 -0
- package/dist/Combobox/Combobox.d.ts +69 -0
- package/dist/Combobox/Combobox.footer.d.ts +7 -0
- package/dist/Combobox/Combobox.items.d.ts +25 -0
- package/dist/Combobox/Combobox.responsive.d.ts +54 -0
- package/dist/Combobox/Combobox.selectAll.d.ts +4 -0
- package/dist/Combobox/Combobox.slotFactory.d.ts +7 -0
- package/dist/Combobox/Combobox.testUtils.d.ts +12 -0
- package/dist/Combobox/Combobox.types.d.ts +166 -0
- package/dist/Combobox/index.cjs +35 -0
- package/dist/Combobox/index.d.ts +2 -0
- package/dist/Combobox/index.mjs +29 -0
- package/dist/Combobox-cjs.js +675 -0
- package/dist/Combobox-es.js +673 -0
- package/dist/ComboboxPrimitive-cjs.js +88 -47
- package/dist/ComboboxPrimitive-es.js +39 -23
- package/dist/{ComboboxChipRemove-cjs.js → ComboboxSeparator-cjs.js} +501 -455
- package/dist/{ComboboxChipRemove-es.js → ComboboxSeparator-es.js} +500 -456
- package/dist/ConfirmationModal/index.cjs +0 -2
- package/dist/ConfirmationModal/index.mjs +0 -2
- package/dist/ContentBlock/index.cjs +1 -0
- package/dist/ContentBlock/index.mjs +1 -0
- package/dist/ContentBlock-cjs.js +2 -18
- package/dist/ContentBlock-es.js +1 -17
- package/dist/DataDump/index.cjs +2 -2
- package/dist/DataDump/index.mjs +2 -2
- package/dist/DataList/components/DataListActions/index.cjs +0 -2
- package/dist/DataList/components/DataListActions/index.mjs +0 -2
- package/dist/DataList/components/DataListBulkActions/index.cjs +0 -2
- package/dist/DataList/components/DataListBulkActions/index.mjs +0 -2
- package/dist/DataList/components/DataListFilters/components/DataListSort/index.cjs +0 -2
- package/dist/DataList/components/DataListFilters/components/DataListSort/index.mjs +0 -2
- package/dist/DataList/components/DataListFilters/index.cjs +0 -2
- package/dist/DataList/components/DataListFilters/index.mjs +0 -2
- package/dist/DataList/components/DataListHeader/index.cjs +0 -2
- package/dist/DataList/components/DataListHeader/index.mjs +0 -2
- package/dist/DataList/components/DataListItem/index.cjs +0 -2
- package/dist/DataList/components/DataListItem/index.mjs +0 -2
- package/dist/DataList/components/DataListItemActions/index.cjs +0 -2
- package/dist/DataList/components/DataListItemActions/index.mjs +0 -2
- package/dist/DataList/components/DataListItemActionsOverflow/index.cjs +0 -2
- package/dist/DataList/components/DataListItemActionsOverflow/index.mjs +0 -2
- package/dist/DataList/components/DataListItems/index.cjs +0 -2
- package/dist/DataList/components/DataListItems/index.mjs +0 -2
- package/dist/DataList/components/DataListLayout/index.cjs +0 -2
- package/dist/DataList/components/DataListLayout/index.mjs +0 -2
- package/dist/DataList/components/DataListLayoutActions/index.cjs +0 -2
- package/dist/DataList/components/DataListLayoutActions/index.mjs +0 -2
- package/dist/DataList/index.cjs +0 -2
- package/dist/DataList/index.mjs +0 -2
- package/dist/DatePicker/index.cjs +0 -2
- package/dist/DatePicker/index.mjs +0 -2
- package/dist/DatePicker-cjs.js +4 -5
- package/dist/DatePicker-es.js +1 -2
- package/dist/Dialog/index.cjs +2 -2
- package/dist/Dialog/index.mjs +2 -2
- package/dist/DrawerDescription-cjs.js +268 -99
- package/dist/DrawerDescription-es.js +270 -103
- package/dist/DrawerTitle-cjs.js +2 -6
- package/dist/DrawerTitle-es.js +3 -7
- package/dist/FieldDescription-cjs.js +184 -181
- package/dist/FieldDescription-es.js +187 -184
- package/dist/FilterPicker/components/FilterPickerActivator/index.cjs +0 -2
- package/dist/FilterPicker/components/FilterPickerActivator/index.mjs +0 -2
- package/dist/FilterPicker/components/FilterPickerContent/index.cjs +0 -2
- package/dist/FilterPicker/components/FilterPickerContent/index.mjs +0 -2
- package/dist/FilterPicker/components/FilterPickerTrigger/index.cjs +0 -2
- package/dist/FilterPicker/components/FilterPickerTrigger/index.mjs +0 -2
- package/dist/FilterPicker/index.cjs +0 -2
- package/dist/FilterPicker/index.mjs +0 -2
- package/dist/FilterPickerContent-cjs.js +4 -5
- package/dist/FilterPickerContent-es.js +1 -2
- package/dist/FormatFile/index.cjs +0 -2
- package/dist/FormatFile/index.mjs +0 -2
- package/dist/Gallery/index.cjs +0 -2
- package/dist/Gallery/index.mjs +0 -2
- package/dist/InputDate/index.cjs +0 -2
- package/dist/InputDate/index.mjs +0 -2
- package/dist/InputNumber/index.cjs +2 -2
- package/dist/InputNumber/index.mjs +2 -2
- package/dist/InputNumber/types.d.ts +5 -0
- package/dist/InputNumber-cjs.js +2 -2
- package/dist/InputNumber-es.js +2 -2
- package/dist/LightBox/index.cjs +0 -2
- package/dist/LightBox/index.mjs +0 -2
- package/dist/Menu/index.cjs +2 -2
- package/dist/Menu/index.mjs +2 -2
- package/dist/Menu-cjs.js +4 -5
- package/dist/Menu-es.js +1 -2
- package/dist/MenuSubmenuTrigger-cjs.js +206 -164
- package/dist/MenuSubmenuTrigger-es.js +194 -152
- package/dist/Modal/index.cjs +0 -2
- package/dist/Modal/index.mjs +1 -3
- package/dist/NumberFieldInput-cjs.js +187 -308
- package/dist/NumberFieldInput-es.js +187 -308
- package/dist/Page/index.cjs +2 -2
- package/dist/Page/index.mjs +2 -2
- package/dist/Popover/index.cjs +0 -2
- package/dist/Popover/index.mjs +0 -2
- package/dist/Popover-cjs.js +7 -8
- package/dist/Popover-es.js +1 -2
- package/dist/ScrollAreaViewport-cjs.js +747 -1093
- package/dist/ScrollAreaViewport-es.js +734 -1081
- package/dist/Select/index.cjs +2 -2
- package/dist/Select/index.mjs +2 -2
- package/dist/SelectGroupLabel-cjs.js +207 -306
- package/dist/SelectGroupLabel-es.js +203 -302
- package/dist/SelectPrimitive-cjs.js +11 -17
- package/dist/SelectPrimitive-es.js +1 -7
- package/dist/Tooltip/index.cjs +0 -2
- package/dist/Tooltip/index.mjs +0 -2
- package/dist/Tooltip-cjs.js +6 -7
- package/dist/Tooltip-es.js +1 -2
- package/dist/buttonRenderAdapter-cjs.js +2 -1
- package/dist/buttonRenderAdapter-es.js +2 -1
- package/dist/dialogReturnFocus-cjs.js +1 -1
- package/dist/dialogReturnFocus-es.js +2 -2
- package/dist/docs/InputNumber/InputNumber.md +2 -2
- package/dist/docs/SelectPrimitive/SelectPrimitive.md +1 -1
- package/dist/floating-ui.react-cjs.js +2557 -185
- package/dist/floating-ui.react-es.js +2512 -149
- package/dist/getMappedBreakpointWidth-cjs.js +21 -0
- package/dist/getMappedBreakpointWidth-es.js +18 -0
- package/dist/index.cjs +15 -10
- package/dist/index.d.mts +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.mjs +14 -10
- package/dist/mergeClassName-cjs.js +12 -0
- package/dist/mergeClassName-es.js +10 -0
- package/dist/primitives/BottomSheet/index.cjs +1 -1
- package/dist/primitives/BottomSheet/index.mjs +1 -1
- package/dist/primitives/ComboboxPrimitive/ComboboxPrimitive.d.ts +2 -2
- package/dist/primitives/ComboboxPrimitive/index.cjs +4 -5
- package/dist/primitives/ComboboxPrimitive/index.mjs +4 -5
- package/dist/primitives/SelectPrimitive/index.cjs +1 -2
- package/dist/primitives/SelectPrimitive/index.mjs +1 -2
- package/dist/primitives/index.cjs +3 -3
- package/dist/primitives/index.mjs +3 -3
- package/dist/scrollEdges-cjs.js +1 -11
- package/dist/scrollEdges-es.js +1 -11
- package/dist/scrollable-cjs.js +58 -0
- package/dist/scrollable-es.js +54 -0
- package/dist/styles.css +759 -42
- package/dist/unstyledPrimitives/index.cjs +720 -478
- package/dist/unstyledPrimitives/index.mjs +663 -421
- package/dist/useCompositeListItem-cjs.js +2108 -361
- package/dist/useCompositeListItem-es.js +2076 -331
- package/dist/useLabel-cjs.js +2 -3
- package/dist/useLabel-es.js +2 -3
- package/dist/useRenderElement-cjs.js +9 -7
- package/dist/useRenderElement-es.js +9 -7
- package/dist/useScrollLock-cjs.js +819 -344
- package/dist/useScrollLock-es.js +732 -296
- package/dist/useScrollToActive-cjs.js +4 -5
- package/dist/useScrollToActive-es.js +1 -2
- package/dist/utils/meta/meta.json +43 -1
- package/package.json +8 -3
- package/dist/floating-ui.react-dom-cjs.js +0 -2103
- package/dist/floating-ui.react-dom-es.js +0 -2072
- package/dist/floating-ui.utils-cjs.js +0 -342
- package/dist/floating-ui.utils-es.js +0 -300
|
@@ -1,10 +1,8 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var React = require('react');
|
|
4
|
-
var floatingUi_utils = require('./floating-ui.utils-cjs.js');
|
|
5
4
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
5
|
var ReactDOM = require('react-dom');
|
|
7
|
-
var floatingUi_reactDom = require('./floating-ui.react-dom-cjs.js');
|
|
8
6
|
|
|
9
7
|
function _interopNamespaceDefault(e) {
|
|
10
8
|
var n = Object.create(null);
|
|
@@ -26,6 +24,305 @@ function _interopNamespaceDefault(e) {
|
|
|
26
24
|
var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
|
|
27
25
|
var ReactDOM__namespace = /*#__PURE__*/_interopNamespaceDefault(ReactDOM);
|
|
28
26
|
|
|
27
|
+
function hasWindow() {
|
|
28
|
+
return typeof window !== 'undefined';
|
|
29
|
+
}
|
|
30
|
+
function getNodeName(node) {
|
|
31
|
+
if (isNode(node)) {
|
|
32
|
+
return (node.nodeName || '').toLowerCase();
|
|
33
|
+
}
|
|
34
|
+
// Mocked nodes in testing environments may not be instances of Node. By
|
|
35
|
+
// returning `#document` an infinite loop won't occur.
|
|
36
|
+
// https://github.com/floating-ui/floating-ui/issues/2317
|
|
37
|
+
return '#document';
|
|
38
|
+
}
|
|
39
|
+
function getWindow(node) {
|
|
40
|
+
var _node$ownerDocument;
|
|
41
|
+
return (node == null || (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
|
|
42
|
+
}
|
|
43
|
+
function getDocumentElement(node) {
|
|
44
|
+
var _ref;
|
|
45
|
+
return (_ref = (isNode(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;
|
|
46
|
+
}
|
|
47
|
+
function isNode(value) {
|
|
48
|
+
if (!hasWindow()) {
|
|
49
|
+
return false;
|
|
50
|
+
}
|
|
51
|
+
return value instanceof Node || value instanceof getWindow(value).Node;
|
|
52
|
+
}
|
|
53
|
+
function isElement(value) {
|
|
54
|
+
if (!hasWindow()) {
|
|
55
|
+
return false;
|
|
56
|
+
}
|
|
57
|
+
return value instanceof Element || value instanceof getWindow(value).Element;
|
|
58
|
+
}
|
|
59
|
+
function isHTMLElement(value) {
|
|
60
|
+
if (!hasWindow()) {
|
|
61
|
+
return false;
|
|
62
|
+
}
|
|
63
|
+
return value instanceof HTMLElement || value instanceof getWindow(value).HTMLElement;
|
|
64
|
+
}
|
|
65
|
+
function isShadowRoot(value) {
|
|
66
|
+
if (!hasWindow() || typeof ShadowRoot === 'undefined') {
|
|
67
|
+
return false;
|
|
68
|
+
}
|
|
69
|
+
return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
|
|
70
|
+
}
|
|
71
|
+
function isOverflowElement(element) {
|
|
72
|
+
const {
|
|
73
|
+
overflow,
|
|
74
|
+
overflowX,
|
|
75
|
+
overflowY,
|
|
76
|
+
display
|
|
77
|
+
} = getComputedStyle$1(element);
|
|
78
|
+
return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && display !== 'inline' && display !== 'contents';
|
|
79
|
+
}
|
|
80
|
+
function isTableElement(element) {
|
|
81
|
+
return /^(table|td|th)$/.test(getNodeName(element));
|
|
82
|
+
}
|
|
83
|
+
function isTopLayer(element) {
|
|
84
|
+
try {
|
|
85
|
+
if (element.matches(':popover-open')) {
|
|
86
|
+
return true;
|
|
87
|
+
}
|
|
88
|
+
} catch (_e) {
|
|
89
|
+
// no-op
|
|
90
|
+
}
|
|
91
|
+
try {
|
|
92
|
+
return element.matches(':modal');
|
|
93
|
+
} catch (_e) {
|
|
94
|
+
return false;
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
const willChangeRe = /transform|translate|scale|rotate|perspective|filter/;
|
|
98
|
+
const containRe = /paint|layout|strict|content/;
|
|
99
|
+
const isNotNone = value => !!value && value !== 'none';
|
|
100
|
+
let isWebKitValue;
|
|
101
|
+
function isContainingBlock(elementOrCss) {
|
|
102
|
+
const css = isElement(elementOrCss) ? getComputedStyle$1(elementOrCss) : elementOrCss;
|
|
103
|
+
|
|
104
|
+
// https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
|
|
105
|
+
// https://drafts.csswg.org/css-transforms-2/#individual-transforms
|
|
106
|
+
return isNotNone(css.transform) || isNotNone(css.translate) || isNotNone(css.scale) || isNotNone(css.rotate) || isNotNone(css.perspective) || !isWebKit() && (isNotNone(css.backdropFilter) || isNotNone(css.filter)) || willChangeRe.test(css.willChange || '') || containRe.test(css.contain || '');
|
|
107
|
+
}
|
|
108
|
+
function getContainingBlock(element) {
|
|
109
|
+
let currentNode = getParentNode(element);
|
|
110
|
+
while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
|
|
111
|
+
if (isContainingBlock(currentNode)) {
|
|
112
|
+
return currentNode;
|
|
113
|
+
} else if (isTopLayer(currentNode)) {
|
|
114
|
+
return null;
|
|
115
|
+
}
|
|
116
|
+
currentNode = getParentNode(currentNode);
|
|
117
|
+
}
|
|
118
|
+
return null;
|
|
119
|
+
}
|
|
120
|
+
function isWebKit() {
|
|
121
|
+
if (isWebKitValue == null) {
|
|
122
|
+
isWebKitValue = typeof CSS !== 'undefined' && CSS.supports && CSS.supports('-webkit-backdrop-filter', 'none');
|
|
123
|
+
}
|
|
124
|
+
return isWebKitValue;
|
|
125
|
+
}
|
|
126
|
+
function isLastTraversableNode(node) {
|
|
127
|
+
return /^(html|body|#document)$/.test(getNodeName(node));
|
|
128
|
+
}
|
|
129
|
+
function getComputedStyle$1(element) {
|
|
130
|
+
return getWindow(element).getComputedStyle(element);
|
|
131
|
+
}
|
|
132
|
+
function getNodeScroll(element) {
|
|
133
|
+
if (isElement(element)) {
|
|
134
|
+
return {
|
|
135
|
+
scrollLeft: element.scrollLeft,
|
|
136
|
+
scrollTop: element.scrollTop
|
|
137
|
+
};
|
|
138
|
+
}
|
|
139
|
+
return {
|
|
140
|
+
scrollLeft: element.scrollX,
|
|
141
|
+
scrollTop: element.scrollY
|
|
142
|
+
};
|
|
143
|
+
}
|
|
144
|
+
function getParentNode(node) {
|
|
145
|
+
if (getNodeName(node) === 'html') {
|
|
146
|
+
return node;
|
|
147
|
+
}
|
|
148
|
+
const result =
|
|
149
|
+
// Step into the shadow DOM of the parent of a slotted node.
|
|
150
|
+
node.assignedSlot ||
|
|
151
|
+
// DOM Element detected.
|
|
152
|
+
node.parentNode ||
|
|
153
|
+
// ShadowRoot detected.
|
|
154
|
+
isShadowRoot(node) && node.host ||
|
|
155
|
+
// Fallback.
|
|
156
|
+
getDocumentElement(node);
|
|
157
|
+
return isShadowRoot(result) ? result.host : result;
|
|
158
|
+
}
|
|
159
|
+
function getNearestOverflowAncestor(node) {
|
|
160
|
+
const parentNode = getParentNode(node);
|
|
161
|
+
if (isLastTraversableNode(parentNode)) {
|
|
162
|
+
return node.ownerDocument ? node.ownerDocument.body : node.body;
|
|
163
|
+
}
|
|
164
|
+
if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) {
|
|
165
|
+
return parentNode;
|
|
166
|
+
}
|
|
167
|
+
return getNearestOverflowAncestor(parentNode);
|
|
168
|
+
}
|
|
169
|
+
function getOverflowAncestors(node, list, traverseIframes) {
|
|
170
|
+
var _node$ownerDocument2;
|
|
171
|
+
if (list === void 0) {
|
|
172
|
+
list = [];
|
|
173
|
+
}
|
|
174
|
+
if (traverseIframes === void 0) {
|
|
175
|
+
traverseIframes = true;
|
|
176
|
+
}
|
|
177
|
+
const scrollableAncestor = getNearestOverflowAncestor(node);
|
|
178
|
+
const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body);
|
|
179
|
+
const win = getWindow(scrollableAncestor);
|
|
180
|
+
if (isBody) {
|
|
181
|
+
const frameElement = getFrameElement(win);
|
|
182
|
+
return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], frameElement && traverseIframes ? getOverflowAncestors(frameElement) : []);
|
|
183
|
+
} else {
|
|
184
|
+
return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
|
|
185
|
+
}
|
|
186
|
+
}
|
|
187
|
+
function getFrameElement(win) {
|
|
188
|
+
return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
/**
|
|
192
|
+
* Custom positioning reference element.
|
|
193
|
+
* @see https://floating-ui.com/docs/virtual-elements
|
|
194
|
+
*/
|
|
195
|
+
|
|
196
|
+
const sides = ['top', 'right', 'bottom', 'left'];
|
|
197
|
+
const alignments = ['start', 'end'];
|
|
198
|
+
const placements = /*#__PURE__*/sides.reduce((acc, side) => acc.concat(side, side + "-" + alignments[0], side + "-" + alignments[1]), []);
|
|
199
|
+
const min = Math.min;
|
|
200
|
+
const max = Math.max;
|
|
201
|
+
const round = Math.round;
|
|
202
|
+
const floor = Math.floor;
|
|
203
|
+
const createCoords = v => ({
|
|
204
|
+
x: v,
|
|
205
|
+
y: v
|
|
206
|
+
});
|
|
207
|
+
const oppositeSideMap = {
|
|
208
|
+
left: 'right',
|
|
209
|
+
right: 'left',
|
|
210
|
+
bottom: 'top',
|
|
211
|
+
top: 'bottom'
|
|
212
|
+
};
|
|
213
|
+
function clamp(start, value, end) {
|
|
214
|
+
return max(start, min(value, end));
|
|
215
|
+
}
|
|
216
|
+
function evaluate(value, param) {
|
|
217
|
+
return typeof value === 'function' ? value(param) : value;
|
|
218
|
+
}
|
|
219
|
+
function getSide(placement) {
|
|
220
|
+
return placement.split('-')[0];
|
|
221
|
+
}
|
|
222
|
+
function getAlignment(placement) {
|
|
223
|
+
return placement.split('-')[1];
|
|
224
|
+
}
|
|
225
|
+
function getOppositeAxis(axis) {
|
|
226
|
+
return axis === 'x' ? 'y' : 'x';
|
|
227
|
+
}
|
|
228
|
+
function getAxisLength(axis) {
|
|
229
|
+
return axis === 'y' ? 'height' : 'width';
|
|
230
|
+
}
|
|
231
|
+
function getSideAxis(placement) {
|
|
232
|
+
const firstChar = placement[0];
|
|
233
|
+
return firstChar === 't' || firstChar === 'b' ? 'y' : 'x';
|
|
234
|
+
}
|
|
235
|
+
function getAlignmentAxis(placement) {
|
|
236
|
+
return getOppositeAxis(getSideAxis(placement));
|
|
237
|
+
}
|
|
238
|
+
function getAlignmentSides(placement, rects, rtl) {
|
|
239
|
+
if (rtl === void 0) {
|
|
240
|
+
rtl = false;
|
|
241
|
+
}
|
|
242
|
+
const alignment = getAlignment(placement);
|
|
243
|
+
const alignmentAxis = getAlignmentAxis(placement);
|
|
244
|
+
const length = getAxisLength(alignmentAxis);
|
|
245
|
+
let mainAlignmentSide = alignmentAxis === 'x' ? alignment === (rtl ? 'end' : 'start') ? 'right' : 'left' : alignment === 'start' ? 'bottom' : 'top';
|
|
246
|
+
if (rects.reference[length] > rects.floating[length]) {
|
|
247
|
+
mainAlignmentSide = getOppositePlacement(mainAlignmentSide);
|
|
248
|
+
}
|
|
249
|
+
return [mainAlignmentSide, getOppositePlacement(mainAlignmentSide)];
|
|
250
|
+
}
|
|
251
|
+
function getExpandedPlacements(placement) {
|
|
252
|
+
const oppositePlacement = getOppositePlacement(placement);
|
|
253
|
+
return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
|
|
254
|
+
}
|
|
255
|
+
function getOppositeAlignmentPlacement(placement) {
|
|
256
|
+
return placement.includes('start') ? placement.replace('start', 'end') : placement.replace('end', 'start');
|
|
257
|
+
}
|
|
258
|
+
const lrPlacement = ['left', 'right'];
|
|
259
|
+
const rlPlacement = ['right', 'left'];
|
|
260
|
+
const tbPlacement = ['top', 'bottom'];
|
|
261
|
+
const btPlacement = ['bottom', 'top'];
|
|
262
|
+
function getSideList(side, isStart, rtl) {
|
|
263
|
+
switch (side) {
|
|
264
|
+
case 'top':
|
|
265
|
+
case 'bottom':
|
|
266
|
+
if (rtl) return isStart ? rlPlacement : lrPlacement;
|
|
267
|
+
return isStart ? lrPlacement : rlPlacement;
|
|
268
|
+
case 'left':
|
|
269
|
+
case 'right':
|
|
270
|
+
return isStart ? tbPlacement : btPlacement;
|
|
271
|
+
default:
|
|
272
|
+
return [];
|
|
273
|
+
}
|
|
274
|
+
}
|
|
275
|
+
function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {
|
|
276
|
+
const alignment = getAlignment(placement);
|
|
277
|
+
let list = getSideList(getSide(placement), direction === 'start', rtl);
|
|
278
|
+
if (alignment) {
|
|
279
|
+
list = list.map(side => side + "-" + alignment);
|
|
280
|
+
if (flipAlignment) {
|
|
281
|
+
list = list.concat(list.map(getOppositeAlignmentPlacement));
|
|
282
|
+
}
|
|
283
|
+
}
|
|
284
|
+
return list;
|
|
285
|
+
}
|
|
286
|
+
function getOppositePlacement(placement) {
|
|
287
|
+
const side = getSide(placement);
|
|
288
|
+
return oppositeSideMap[side] + placement.slice(side.length);
|
|
289
|
+
}
|
|
290
|
+
function expandPaddingObject(padding) {
|
|
291
|
+
return {
|
|
292
|
+
top: 0,
|
|
293
|
+
right: 0,
|
|
294
|
+
bottom: 0,
|
|
295
|
+
left: 0,
|
|
296
|
+
...padding
|
|
297
|
+
};
|
|
298
|
+
}
|
|
299
|
+
function getPaddingObject(padding) {
|
|
300
|
+
return typeof padding !== 'number' ? expandPaddingObject(padding) : {
|
|
301
|
+
top: padding,
|
|
302
|
+
right: padding,
|
|
303
|
+
bottom: padding,
|
|
304
|
+
left: padding
|
|
305
|
+
};
|
|
306
|
+
}
|
|
307
|
+
function rectToClientRect(rect) {
|
|
308
|
+
const {
|
|
309
|
+
x,
|
|
310
|
+
y,
|
|
311
|
+
width,
|
|
312
|
+
height
|
|
313
|
+
} = rect;
|
|
314
|
+
return {
|
|
315
|
+
width,
|
|
316
|
+
height,
|
|
317
|
+
top: y,
|
|
318
|
+
left: x,
|
|
319
|
+
right: x + width,
|
|
320
|
+
bottom: y + height,
|
|
321
|
+
x,
|
|
322
|
+
y
|
|
323
|
+
};
|
|
324
|
+
}
|
|
325
|
+
|
|
29
326
|
/*!
|
|
30
327
|
* tabbable 6.4.0
|
|
31
328
|
* @license MIT, https://github.com/focus-trap/tabbable/blob/master/LICENSE
|
|
@@ -662,7 +959,7 @@ function contains(parent, child) {
|
|
|
662
959
|
}
|
|
663
960
|
|
|
664
961
|
// then fallback to custom implementation with Shadow DOM support
|
|
665
|
-
if (rootNode &&
|
|
962
|
+
if (rootNode && isShadowRoot(rootNode)) {
|
|
666
963
|
let next = child;
|
|
667
964
|
while (next) {
|
|
668
965
|
if (parent === next) {
|
|
@@ -704,7 +1001,7 @@ function getDocument$1(node) {
|
|
|
704
1001
|
return (node == null ? void 0 : node.ownerDocument) || document;
|
|
705
1002
|
}
|
|
706
1003
|
function isTypeableElement(element) {
|
|
707
|
-
return
|
|
1004
|
+
return isHTMLElement(element) && element.matches(TYPEABLE_SELECTOR);
|
|
708
1005
|
}
|
|
709
1006
|
function isTypeableCombobox(element) {
|
|
710
1007
|
if (!element) return false;
|
|
@@ -794,19 +1091,19 @@ function isMouseLikePointerType(pointerType, strict) {
|
|
|
794
1091
|
return values.includes(pointerType);
|
|
795
1092
|
}
|
|
796
1093
|
|
|
797
|
-
var isClient = typeof document !== 'undefined';
|
|
1094
|
+
var isClient$1 = typeof document !== 'undefined';
|
|
798
1095
|
|
|
799
|
-
var noop = function noop() {};
|
|
800
|
-
var index = isClient ? React.useLayoutEffect : noop;
|
|
1096
|
+
var noop$1 = function noop() {};
|
|
1097
|
+
var index$1 = isClient$1 ? React.useLayoutEffect : noop$1;
|
|
801
1098
|
|
|
802
1099
|
// https://github.com/mui/material-ui/issues/41190#issuecomment-2040873379
|
|
803
1100
|
const SafeReact$1 = {
|
|
804
1101
|
...React__namespace
|
|
805
1102
|
};
|
|
806
1103
|
|
|
807
|
-
function useLatestRef(value) {
|
|
1104
|
+
function useLatestRef$1(value) {
|
|
808
1105
|
const ref = React__namespace.useRef(value);
|
|
809
|
-
index(() => {
|
|
1106
|
+
index$1(() => {
|
|
810
1107
|
ref.current = value;
|
|
811
1108
|
});
|
|
812
1109
|
return ref;
|
|
@@ -926,7 +1223,7 @@ function getGridNavigatedIndex(listRef, _ref) {
|
|
|
926
1223
|
|
|
927
1224
|
// Remains on the same row/column.
|
|
928
1225
|
if (orientation === 'both') {
|
|
929
|
-
const prevRow =
|
|
1226
|
+
const prevRow = floor(prevIndex / cols);
|
|
930
1227
|
if (event.key === (rtl ? ARROW_LEFT$1 : ARROW_RIGHT$1)) {
|
|
931
1228
|
stop && stopEvent(event);
|
|
932
1229
|
if (prevIndex % cols !== cols - 1) {
|
|
@@ -976,7 +1273,7 @@ function getGridNavigatedIndex(listRef, _ref) {
|
|
|
976
1273
|
nextIndex = prevIndex;
|
|
977
1274
|
}
|
|
978
1275
|
}
|
|
979
|
-
const lastRow =
|
|
1276
|
+
const lastRow = floor(maxIndex / cols) === prevRow;
|
|
980
1277
|
if (isIndexOutOfListBounds(listRef, nextIndex)) {
|
|
981
1278
|
if (loop && lastRow) {
|
|
982
1279
|
nextIndex = event.key === (rtl ? ARROW_RIGHT$1 : ARROW_LEFT$1) ? maxIndex : findNonDisabledListIndex(listRef, {
|
|
@@ -991,131 +1288,2197 @@ function getGridNavigatedIndex(listRef, _ref) {
|
|
|
991
1288
|
return nextIndex;
|
|
992
1289
|
}
|
|
993
1290
|
|
|
994
|
-
/** For each cell index, gets the item index that occupies that cell */
|
|
995
|
-
function createGridCellMap(sizes, cols, dense) {
|
|
996
|
-
const cellMap = [];
|
|
997
|
-
let startIndex = 0;
|
|
998
|
-
sizes.forEach((_ref2, index) => {
|
|
999
|
-
let {
|
|
1000
|
-
width,
|
|
1001
|
-
height
|
|
1002
|
-
} = _ref2;
|
|
1003
|
-
if (width > cols) {
|
|
1004
|
-
if (process.env.NODE_ENV !== "production") {
|
|
1005
|
-
throw new Error("[Floating UI]: Invalid grid - item width at index " + index + " is greater than grid columns");
|
|
1291
|
+
/** For each cell index, gets the item index that occupies that cell */
|
|
1292
|
+
function createGridCellMap(sizes, cols, dense) {
|
|
1293
|
+
const cellMap = [];
|
|
1294
|
+
let startIndex = 0;
|
|
1295
|
+
sizes.forEach((_ref2, index) => {
|
|
1296
|
+
let {
|
|
1297
|
+
width,
|
|
1298
|
+
height
|
|
1299
|
+
} = _ref2;
|
|
1300
|
+
if (width > cols) {
|
|
1301
|
+
if (process.env.NODE_ENV !== "production") {
|
|
1302
|
+
throw new Error("[Floating UI]: Invalid grid - item width at index " + index + " is greater than grid columns");
|
|
1303
|
+
}
|
|
1304
|
+
}
|
|
1305
|
+
let itemPlaced = false;
|
|
1306
|
+
if (dense) {
|
|
1307
|
+
startIndex = 0;
|
|
1308
|
+
}
|
|
1309
|
+
while (!itemPlaced) {
|
|
1310
|
+
const targetCells = [];
|
|
1311
|
+
for (let i = 0; i < width; i++) {
|
|
1312
|
+
for (let j = 0; j < height; j++) {
|
|
1313
|
+
targetCells.push(startIndex + i + j * cols);
|
|
1314
|
+
}
|
|
1315
|
+
}
|
|
1316
|
+
if (startIndex % cols + width <= cols && targetCells.every(cell => cellMap[cell] == null)) {
|
|
1317
|
+
targetCells.forEach(cell => {
|
|
1318
|
+
cellMap[cell] = index;
|
|
1319
|
+
});
|
|
1320
|
+
itemPlaced = true;
|
|
1321
|
+
} else {
|
|
1322
|
+
startIndex++;
|
|
1323
|
+
}
|
|
1324
|
+
}
|
|
1325
|
+
});
|
|
1326
|
+
|
|
1327
|
+
// convert into a non-sparse array
|
|
1328
|
+
return [...cellMap];
|
|
1329
|
+
}
|
|
1330
|
+
|
|
1331
|
+
/** Gets cell index of an item's corner or -1 when index is -1. */
|
|
1332
|
+
function getGridCellIndexOfCorner(index, sizes, cellMap, cols, corner) {
|
|
1333
|
+
if (index === -1) return -1;
|
|
1334
|
+
const firstCellIndex = cellMap.indexOf(index);
|
|
1335
|
+
const sizeItem = sizes[index];
|
|
1336
|
+
switch (corner) {
|
|
1337
|
+
case 'tl':
|
|
1338
|
+
return firstCellIndex;
|
|
1339
|
+
case 'tr':
|
|
1340
|
+
if (!sizeItem) {
|
|
1341
|
+
return firstCellIndex;
|
|
1342
|
+
}
|
|
1343
|
+
return firstCellIndex + sizeItem.width - 1;
|
|
1344
|
+
case 'bl':
|
|
1345
|
+
if (!sizeItem) {
|
|
1346
|
+
return firstCellIndex;
|
|
1347
|
+
}
|
|
1348
|
+
return firstCellIndex + (sizeItem.height - 1) * cols;
|
|
1349
|
+
case 'br':
|
|
1350
|
+
return cellMap.lastIndexOf(index);
|
|
1351
|
+
}
|
|
1352
|
+
}
|
|
1353
|
+
|
|
1354
|
+
/** Gets all cell indices that correspond to the specified indices */
|
|
1355
|
+
function getGridCellIndices(indices, cellMap) {
|
|
1356
|
+
return cellMap.flatMap((index, cellIndex) => indices.includes(index) ? [cellIndex] : []);
|
|
1357
|
+
}
|
|
1358
|
+
function isListIndexDisabled(listRef, index, disabledIndices) {
|
|
1359
|
+
if (typeof disabledIndices === 'function') {
|
|
1360
|
+
return disabledIndices(index);
|
|
1361
|
+
} else if (disabledIndices) {
|
|
1362
|
+
return disabledIndices.includes(index);
|
|
1363
|
+
}
|
|
1364
|
+
const element = listRef.current[index];
|
|
1365
|
+
return element == null || element.hasAttribute('disabled') || element.getAttribute('aria-disabled') === 'true';
|
|
1366
|
+
}
|
|
1367
|
+
|
|
1368
|
+
const getTabbableOptions = () => ({
|
|
1369
|
+
getShadowRoot: true,
|
|
1370
|
+
displayCheck:
|
|
1371
|
+
// JSDOM does not support the `tabbable` library. To solve this we can
|
|
1372
|
+
// check if `ResizeObserver` is a real function (not polyfilled), which
|
|
1373
|
+
// determines if the current environment is JSDOM-like.
|
|
1374
|
+
typeof ResizeObserver === 'function' && ResizeObserver.toString().includes('[native code]') ? 'full' : 'none'
|
|
1375
|
+
});
|
|
1376
|
+
function getTabbableIn(container, dir) {
|
|
1377
|
+
const list = tabbable(container, getTabbableOptions());
|
|
1378
|
+
const len = list.length;
|
|
1379
|
+
if (len === 0) return;
|
|
1380
|
+
const active = activeElement(getDocument$1(container));
|
|
1381
|
+
const index = list.indexOf(active);
|
|
1382
|
+
const nextIndex = index === -1 ? dir === 1 ? 0 : len - 1 : index + dir;
|
|
1383
|
+
return list[nextIndex];
|
|
1384
|
+
}
|
|
1385
|
+
function getNextTabbable(referenceElement) {
|
|
1386
|
+
return getTabbableIn(getDocument$1(referenceElement).body, 1) || referenceElement;
|
|
1387
|
+
}
|
|
1388
|
+
function getPreviousTabbable(referenceElement) {
|
|
1389
|
+
return getTabbableIn(getDocument$1(referenceElement).body, -1) || referenceElement;
|
|
1390
|
+
}
|
|
1391
|
+
function isOutsideEvent(event, container) {
|
|
1392
|
+
const containerElement = container || event.currentTarget;
|
|
1393
|
+
const relatedTarget = event.relatedTarget;
|
|
1394
|
+
return !relatedTarget || !contains(containerElement, relatedTarget);
|
|
1395
|
+
}
|
|
1396
|
+
function disableFocusInside(container) {
|
|
1397
|
+
const tabbableElements = tabbable(container, getTabbableOptions());
|
|
1398
|
+
tabbableElements.forEach(element => {
|
|
1399
|
+
element.dataset.tabindex = element.getAttribute('tabindex') || '';
|
|
1400
|
+
element.setAttribute('tabindex', '-1');
|
|
1401
|
+
});
|
|
1402
|
+
}
|
|
1403
|
+
function enableFocusInside(container) {
|
|
1404
|
+
const elements = container.querySelectorAll('[data-tabindex]');
|
|
1405
|
+
elements.forEach(element => {
|
|
1406
|
+
const tabindex = element.dataset.tabindex;
|
|
1407
|
+
delete element.dataset.tabindex;
|
|
1408
|
+
if (tabindex) {
|
|
1409
|
+
element.setAttribute('tabindex', tabindex);
|
|
1410
|
+
} else {
|
|
1411
|
+
element.removeAttribute('tabindex');
|
|
1412
|
+
}
|
|
1413
|
+
});
|
|
1414
|
+
}
|
|
1415
|
+
|
|
1416
|
+
function computeCoordsFromPlacement(_ref, placement, rtl) {
|
|
1417
|
+
let {
|
|
1418
|
+
reference,
|
|
1419
|
+
floating
|
|
1420
|
+
} = _ref;
|
|
1421
|
+
const sideAxis = getSideAxis(placement);
|
|
1422
|
+
const alignmentAxis = getAlignmentAxis(placement);
|
|
1423
|
+
const alignLength = getAxisLength(alignmentAxis);
|
|
1424
|
+
const side = getSide(placement);
|
|
1425
|
+
const isVertical = sideAxis === 'y';
|
|
1426
|
+
const commonX = reference.x + reference.width / 2 - floating.width / 2;
|
|
1427
|
+
const commonY = reference.y + reference.height / 2 - floating.height / 2;
|
|
1428
|
+
const commonAlign = reference[alignLength] / 2 - floating[alignLength] / 2;
|
|
1429
|
+
let coords;
|
|
1430
|
+
switch (side) {
|
|
1431
|
+
case 'top':
|
|
1432
|
+
coords = {
|
|
1433
|
+
x: commonX,
|
|
1434
|
+
y: reference.y - floating.height
|
|
1435
|
+
};
|
|
1436
|
+
break;
|
|
1437
|
+
case 'bottom':
|
|
1438
|
+
coords = {
|
|
1439
|
+
x: commonX,
|
|
1440
|
+
y: reference.y + reference.height
|
|
1441
|
+
};
|
|
1442
|
+
break;
|
|
1443
|
+
case 'right':
|
|
1444
|
+
coords = {
|
|
1445
|
+
x: reference.x + reference.width,
|
|
1446
|
+
y: commonY
|
|
1447
|
+
};
|
|
1448
|
+
break;
|
|
1449
|
+
case 'left':
|
|
1450
|
+
coords = {
|
|
1451
|
+
x: reference.x - floating.width,
|
|
1452
|
+
y: commonY
|
|
1453
|
+
};
|
|
1454
|
+
break;
|
|
1455
|
+
default:
|
|
1456
|
+
coords = {
|
|
1457
|
+
x: reference.x,
|
|
1458
|
+
y: reference.y
|
|
1459
|
+
};
|
|
1460
|
+
}
|
|
1461
|
+
switch (getAlignment(placement)) {
|
|
1462
|
+
case 'start':
|
|
1463
|
+
coords[alignmentAxis] -= commonAlign * (rtl && isVertical ? -1 : 1);
|
|
1464
|
+
break;
|
|
1465
|
+
case 'end':
|
|
1466
|
+
coords[alignmentAxis] += commonAlign * (rtl && isVertical ? -1 : 1);
|
|
1467
|
+
break;
|
|
1468
|
+
}
|
|
1469
|
+
return coords;
|
|
1470
|
+
}
|
|
1471
|
+
|
|
1472
|
+
/**
|
|
1473
|
+
* Resolves with an object of overflow side offsets that determine how much the
|
|
1474
|
+
* element is overflowing a given clipping boundary on each side.
|
|
1475
|
+
* - positive = overflowing the boundary by that number of pixels
|
|
1476
|
+
* - negative = how many pixels left before it will overflow
|
|
1477
|
+
* - 0 = lies flush with the boundary
|
|
1478
|
+
* @see https://floating-ui.com/docs/detectOverflow
|
|
1479
|
+
*/
|
|
1480
|
+
async function detectOverflow(state, options) {
|
|
1481
|
+
var _await$platform$isEle;
|
|
1482
|
+
if (options === void 0) {
|
|
1483
|
+
options = {};
|
|
1484
|
+
}
|
|
1485
|
+
const {
|
|
1486
|
+
x,
|
|
1487
|
+
y,
|
|
1488
|
+
platform,
|
|
1489
|
+
rects,
|
|
1490
|
+
elements,
|
|
1491
|
+
strategy
|
|
1492
|
+
} = state;
|
|
1493
|
+
const {
|
|
1494
|
+
boundary = 'clippingAncestors',
|
|
1495
|
+
rootBoundary = 'viewport',
|
|
1496
|
+
elementContext = 'floating',
|
|
1497
|
+
altBoundary = false,
|
|
1498
|
+
padding = 0
|
|
1499
|
+
} = evaluate(options, state);
|
|
1500
|
+
const paddingObject = getPaddingObject(padding);
|
|
1501
|
+
const altContext = elementContext === 'floating' ? 'reference' : 'floating';
|
|
1502
|
+
const element = elements[altBoundary ? altContext : elementContext];
|
|
1503
|
+
const clippingClientRect = rectToClientRect(await platform.getClippingRect({
|
|
1504
|
+
element: ((_await$platform$isEle = await (platform.isElement == null ? void 0 : platform.isElement(element))) != null ? _await$platform$isEle : true) ? element : element.contextElement || (await (platform.getDocumentElement == null ? void 0 : platform.getDocumentElement(elements.floating))),
|
|
1505
|
+
boundary,
|
|
1506
|
+
rootBoundary,
|
|
1507
|
+
strategy
|
|
1508
|
+
}));
|
|
1509
|
+
const rect = elementContext === 'floating' ? {
|
|
1510
|
+
x,
|
|
1511
|
+
y,
|
|
1512
|
+
width: rects.floating.width,
|
|
1513
|
+
height: rects.floating.height
|
|
1514
|
+
} : rects.reference;
|
|
1515
|
+
const offsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating));
|
|
1516
|
+
const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) ? (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || {
|
|
1517
|
+
x: 1,
|
|
1518
|
+
y: 1
|
|
1519
|
+
} : {
|
|
1520
|
+
x: 1,
|
|
1521
|
+
y: 1
|
|
1522
|
+
};
|
|
1523
|
+
const elementClientRect = rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({
|
|
1524
|
+
elements,
|
|
1525
|
+
rect,
|
|
1526
|
+
offsetParent,
|
|
1527
|
+
strategy
|
|
1528
|
+
}) : rect);
|
|
1529
|
+
return {
|
|
1530
|
+
top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
|
|
1531
|
+
bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
|
|
1532
|
+
left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
|
|
1533
|
+
right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
|
|
1534
|
+
};
|
|
1535
|
+
}
|
|
1536
|
+
|
|
1537
|
+
// Maximum number of resets that can occur before bailing to avoid infinite reset loops.
|
|
1538
|
+
const MAX_RESET_COUNT = 50;
|
|
1539
|
+
|
|
1540
|
+
/**
|
|
1541
|
+
* Computes the `x` and `y` coordinates that will place the floating element
|
|
1542
|
+
* next to a given reference element.
|
|
1543
|
+
*
|
|
1544
|
+
* This export does not have any `platform` interface logic. You will need to
|
|
1545
|
+
* write one for the platform you are using Floating UI with.
|
|
1546
|
+
*/
|
|
1547
|
+
const computePosition$1 = async (reference, floating, config) => {
|
|
1548
|
+
const {
|
|
1549
|
+
placement = 'bottom',
|
|
1550
|
+
strategy = 'absolute',
|
|
1551
|
+
middleware = [],
|
|
1552
|
+
platform
|
|
1553
|
+
} = config;
|
|
1554
|
+
const platformWithDetectOverflow = platform.detectOverflow ? platform : {
|
|
1555
|
+
...platform,
|
|
1556
|
+
detectOverflow
|
|
1557
|
+
};
|
|
1558
|
+
const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(floating));
|
|
1559
|
+
let rects = await platform.getElementRects({
|
|
1560
|
+
reference,
|
|
1561
|
+
floating,
|
|
1562
|
+
strategy
|
|
1563
|
+
});
|
|
1564
|
+
let {
|
|
1565
|
+
x,
|
|
1566
|
+
y
|
|
1567
|
+
} = computeCoordsFromPlacement(rects, placement, rtl);
|
|
1568
|
+
let statefulPlacement = placement;
|
|
1569
|
+
let resetCount = 0;
|
|
1570
|
+
const middlewareData = {};
|
|
1571
|
+
for (let i = 0; i < middleware.length; i++) {
|
|
1572
|
+
const currentMiddleware = middleware[i];
|
|
1573
|
+
if (!currentMiddleware) {
|
|
1574
|
+
continue;
|
|
1575
|
+
}
|
|
1576
|
+
const {
|
|
1577
|
+
name,
|
|
1578
|
+
fn
|
|
1579
|
+
} = currentMiddleware;
|
|
1580
|
+
const {
|
|
1581
|
+
x: nextX,
|
|
1582
|
+
y: nextY,
|
|
1583
|
+
data,
|
|
1584
|
+
reset
|
|
1585
|
+
} = await fn({
|
|
1586
|
+
x,
|
|
1587
|
+
y,
|
|
1588
|
+
initialPlacement: placement,
|
|
1589
|
+
placement: statefulPlacement,
|
|
1590
|
+
strategy,
|
|
1591
|
+
middlewareData,
|
|
1592
|
+
rects,
|
|
1593
|
+
platform: platformWithDetectOverflow,
|
|
1594
|
+
elements: {
|
|
1595
|
+
reference,
|
|
1596
|
+
floating
|
|
1597
|
+
}
|
|
1598
|
+
});
|
|
1599
|
+
x = nextX != null ? nextX : x;
|
|
1600
|
+
y = nextY != null ? nextY : y;
|
|
1601
|
+
middlewareData[name] = {
|
|
1602
|
+
...middlewareData[name],
|
|
1603
|
+
...data
|
|
1604
|
+
};
|
|
1605
|
+
if (reset && resetCount < MAX_RESET_COUNT) {
|
|
1606
|
+
resetCount++;
|
|
1607
|
+
if (typeof reset === 'object') {
|
|
1608
|
+
if (reset.placement) {
|
|
1609
|
+
statefulPlacement = reset.placement;
|
|
1610
|
+
}
|
|
1611
|
+
if (reset.rects) {
|
|
1612
|
+
rects = reset.rects === true ? await platform.getElementRects({
|
|
1613
|
+
reference,
|
|
1614
|
+
floating,
|
|
1615
|
+
strategy
|
|
1616
|
+
}) : reset.rects;
|
|
1617
|
+
}
|
|
1618
|
+
({
|
|
1619
|
+
x,
|
|
1620
|
+
y
|
|
1621
|
+
} = computeCoordsFromPlacement(rects, statefulPlacement, rtl));
|
|
1622
|
+
}
|
|
1623
|
+
i = -1;
|
|
1624
|
+
}
|
|
1625
|
+
}
|
|
1626
|
+
return {
|
|
1627
|
+
x,
|
|
1628
|
+
y,
|
|
1629
|
+
placement: statefulPlacement,
|
|
1630
|
+
strategy,
|
|
1631
|
+
middlewareData
|
|
1632
|
+
};
|
|
1633
|
+
};
|
|
1634
|
+
|
|
1635
|
+
/**
|
|
1636
|
+
* Provides data to position an inner element of the floating element so that it
|
|
1637
|
+
* appears centered to the reference element.
|
|
1638
|
+
* @see https://floating-ui.com/docs/arrow
|
|
1639
|
+
*/
|
|
1640
|
+
const arrow$3 = options => ({
|
|
1641
|
+
name: 'arrow',
|
|
1642
|
+
options,
|
|
1643
|
+
async fn(state) {
|
|
1644
|
+
const {
|
|
1645
|
+
x,
|
|
1646
|
+
y,
|
|
1647
|
+
placement,
|
|
1648
|
+
rects,
|
|
1649
|
+
platform,
|
|
1650
|
+
elements,
|
|
1651
|
+
middlewareData
|
|
1652
|
+
} = state;
|
|
1653
|
+
// Since `element` is required, we don't Partial<> the type.
|
|
1654
|
+
const {
|
|
1655
|
+
element,
|
|
1656
|
+
padding = 0
|
|
1657
|
+
} = evaluate(options, state) || {};
|
|
1658
|
+
if (element == null) {
|
|
1659
|
+
return {};
|
|
1660
|
+
}
|
|
1661
|
+
const paddingObject = getPaddingObject(padding);
|
|
1662
|
+
const coords = {
|
|
1663
|
+
x,
|
|
1664
|
+
y
|
|
1665
|
+
};
|
|
1666
|
+
const axis = getAlignmentAxis(placement);
|
|
1667
|
+
const length = getAxisLength(axis);
|
|
1668
|
+
const arrowDimensions = await platform.getDimensions(element);
|
|
1669
|
+
const isYAxis = axis === 'y';
|
|
1670
|
+
const minProp = isYAxis ? 'top' : 'left';
|
|
1671
|
+
const maxProp = isYAxis ? 'bottom' : 'right';
|
|
1672
|
+
const clientProp = isYAxis ? 'clientHeight' : 'clientWidth';
|
|
1673
|
+
const endDiff = rects.reference[length] + rects.reference[axis] - coords[axis] - rects.floating[length];
|
|
1674
|
+
const startDiff = coords[axis] - rects.reference[axis];
|
|
1675
|
+
const arrowOffsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(element));
|
|
1676
|
+
let clientSize = arrowOffsetParent ? arrowOffsetParent[clientProp] : 0;
|
|
1677
|
+
|
|
1678
|
+
// DOM platform can return `window` as the `offsetParent`.
|
|
1679
|
+
if (!clientSize || !(await (platform.isElement == null ? void 0 : platform.isElement(arrowOffsetParent)))) {
|
|
1680
|
+
clientSize = elements.floating[clientProp] || rects.floating[length];
|
|
1681
|
+
}
|
|
1682
|
+
const centerToReference = endDiff / 2 - startDiff / 2;
|
|
1683
|
+
|
|
1684
|
+
// If the padding is large enough that it causes the arrow to no longer be
|
|
1685
|
+
// centered, modify the padding so that it is centered.
|
|
1686
|
+
const largestPossiblePadding = clientSize / 2 - arrowDimensions[length] / 2 - 1;
|
|
1687
|
+
const minPadding = min(paddingObject[minProp], largestPossiblePadding);
|
|
1688
|
+
const maxPadding = min(paddingObject[maxProp], largestPossiblePadding);
|
|
1689
|
+
|
|
1690
|
+
// Make sure the arrow doesn't overflow the floating element if the center
|
|
1691
|
+
// point is outside the floating element's bounds.
|
|
1692
|
+
const min$1 = minPadding;
|
|
1693
|
+
const max = clientSize - arrowDimensions[length] - maxPadding;
|
|
1694
|
+
const center = clientSize / 2 - arrowDimensions[length] / 2 + centerToReference;
|
|
1695
|
+
const offset = clamp(min$1, center, max);
|
|
1696
|
+
|
|
1697
|
+
// If the reference is small enough that the arrow's padding causes it to
|
|
1698
|
+
// to point to nothing for an aligned placement, adjust the offset of the
|
|
1699
|
+
// floating element itself. To ensure `shift()` continues to take action,
|
|
1700
|
+
// a single reset is performed when this is true.
|
|
1701
|
+
const shouldAddOffset = !middlewareData.arrow && getAlignment(placement) != null && center !== offset && rects.reference[length] / 2 - (center < min$1 ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0;
|
|
1702
|
+
const alignmentOffset = shouldAddOffset ? center < min$1 ? center - min$1 : center - max : 0;
|
|
1703
|
+
return {
|
|
1704
|
+
[axis]: coords[axis] + alignmentOffset,
|
|
1705
|
+
data: {
|
|
1706
|
+
[axis]: offset,
|
|
1707
|
+
centerOffset: center - offset - alignmentOffset,
|
|
1708
|
+
...(shouldAddOffset && {
|
|
1709
|
+
alignmentOffset
|
|
1710
|
+
})
|
|
1711
|
+
},
|
|
1712
|
+
reset: shouldAddOffset
|
|
1713
|
+
};
|
|
1714
|
+
}
|
|
1715
|
+
});
|
|
1716
|
+
|
|
1717
|
+
function getPlacementList(alignment, autoAlignment, allowedPlacements) {
|
|
1718
|
+
const allowedPlacementsSortedByAlignment = alignment ? [...allowedPlacements.filter(placement => getAlignment(placement) === alignment), ...allowedPlacements.filter(placement => getAlignment(placement) !== alignment)] : allowedPlacements.filter(placement => getSide(placement) === placement);
|
|
1719
|
+
return allowedPlacementsSortedByAlignment.filter(placement => {
|
|
1720
|
+
if (alignment) {
|
|
1721
|
+
return getAlignment(placement) === alignment || (autoAlignment ? getOppositeAlignmentPlacement(placement) !== placement : false);
|
|
1722
|
+
}
|
|
1723
|
+
return true;
|
|
1724
|
+
});
|
|
1725
|
+
}
|
|
1726
|
+
/**
|
|
1727
|
+
* Optimizes the visibility of the floating element by choosing the placement
|
|
1728
|
+
* that has the most space available automatically, without needing to specify a
|
|
1729
|
+
* preferred placement. Alternative to `flip`.
|
|
1730
|
+
* @see https://floating-ui.com/docs/autoPlacement
|
|
1731
|
+
*/
|
|
1732
|
+
const autoPlacement$2 = function (options) {
|
|
1733
|
+
if (options === void 0) {
|
|
1734
|
+
options = {};
|
|
1735
|
+
}
|
|
1736
|
+
return {
|
|
1737
|
+
name: 'autoPlacement',
|
|
1738
|
+
options,
|
|
1739
|
+
async fn(state) {
|
|
1740
|
+
var _middlewareData$autoP, _middlewareData$autoP2, _placementsThatFitOnE;
|
|
1741
|
+
const {
|
|
1742
|
+
rects,
|
|
1743
|
+
middlewareData,
|
|
1744
|
+
placement,
|
|
1745
|
+
platform,
|
|
1746
|
+
elements
|
|
1747
|
+
} = state;
|
|
1748
|
+
const {
|
|
1749
|
+
crossAxis = false,
|
|
1750
|
+
alignment,
|
|
1751
|
+
allowedPlacements = placements,
|
|
1752
|
+
autoAlignment = true,
|
|
1753
|
+
...detectOverflowOptions
|
|
1754
|
+
} = evaluate(options, state);
|
|
1755
|
+
const placements$1 = alignment !== undefined || allowedPlacements === placements ? getPlacementList(alignment || null, autoAlignment, allowedPlacements) : allowedPlacements;
|
|
1756
|
+
const overflow = await platform.detectOverflow(state, detectOverflowOptions);
|
|
1757
|
+
const currentIndex = ((_middlewareData$autoP = middlewareData.autoPlacement) == null ? void 0 : _middlewareData$autoP.index) || 0;
|
|
1758
|
+
const currentPlacement = placements$1[currentIndex];
|
|
1759
|
+
if (currentPlacement == null) {
|
|
1760
|
+
return {};
|
|
1761
|
+
}
|
|
1762
|
+
const alignmentSides = getAlignmentSides(currentPlacement, rects, await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating)));
|
|
1763
|
+
|
|
1764
|
+
// Make `computeCoords` start from the right place.
|
|
1765
|
+
if (placement !== currentPlacement) {
|
|
1766
|
+
return {
|
|
1767
|
+
reset: {
|
|
1768
|
+
placement: placements$1[0]
|
|
1769
|
+
}
|
|
1770
|
+
};
|
|
1771
|
+
}
|
|
1772
|
+
const currentOverflows = [overflow[getSide(currentPlacement)], overflow[alignmentSides[0]], overflow[alignmentSides[1]]];
|
|
1773
|
+
const allOverflows = [...(((_middlewareData$autoP2 = middlewareData.autoPlacement) == null ? void 0 : _middlewareData$autoP2.overflows) || []), {
|
|
1774
|
+
placement: currentPlacement,
|
|
1775
|
+
overflows: currentOverflows
|
|
1776
|
+
}];
|
|
1777
|
+
const nextPlacement = placements$1[currentIndex + 1];
|
|
1778
|
+
|
|
1779
|
+
// There are more placements to check.
|
|
1780
|
+
if (nextPlacement) {
|
|
1781
|
+
return {
|
|
1782
|
+
data: {
|
|
1783
|
+
index: currentIndex + 1,
|
|
1784
|
+
overflows: allOverflows
|
|
1785
|
+
},
|
|
1786
|
+
reset: {
|
|
1787
|
+
placement: nextPlacement
|
|
1788
|
+
}
|
|
1789
|
+
};
|
|
1790
|
+
}
|
|
1791
|
+
const placementsSortedByMostSpace = allOverflows.map(d => {
|
|
1792
|
+
const alignment = getAlignment(d.placement);
|
|
1793
|
+
return [d.placement, alignment && crossAxis ?
|
|
1794
|
+
// Check along the mainAxis and main crossAxis side.
|
|
1795
|
+
d.overflows.slice(0, 2).reduce((acc, v) => acc + v, 0) :
|
|
1796
|
+
// Check only the mainAxis.
|
|
1797
|
+
d.overflows[0], d.overflows];
|
|
1798
|
+
}).sort((a, b) => a[1] - b[1]);
|
|
1799
|
+
const placementsThatFitOnEachSide = placementsSortedByMostSpace.filter(d => d[2].slice(0,
|
|
1800
|
+
// Aligned placements should not check their opposite crossAxis
|
|
1801
|
+
// side.
|
|
1802
|
+
getAlignment(d[0]) ? 2 : 3).every(v => v <= 0));
|
|
1803
|
+
const resetPlacement = ((_placementsThatFitOnE = placementsThatFitOnEachSide[0]) == null ? void 0 : _placementsThatFitOnE[0]) || placementsSortedByMostSpace[0][0];
|
|
1804
|
+
if (resetPlacement !== placement) {
|
|
1805
|
+
return {
|
|
1806
|
+
data: {
|
|
1807
|
+
index: currentIndex + 1,
|
|
1808
|
+
overflows: allOverflows
|
|
1809
|
+
},
|
|
1810
|
+
reset: {
|
|
1811
|
+
placement: resetPlacement
|
|
1812
|
+
}
|
|
1813
|
+
};
|
|
1814
|
+
}
|
|
1815
|
+
return {};
|
|
1816
|
+
}
|
|
1817
|
+
};
|
|
1818
|
+
};
|
|
1819
|
+
|
|
1820
|
+
/**
|
|
1821
|
+
* Optimizes the visibility of the floating element by flipping the `placement`
|
|
1822
|
+
* in order to keep it in view when the preferred placement(s) will overflow the
|
|
1823
|
+
* clipping boundary. Alternative to `autoPlacement`.
|
|
1824
|
+
* @see https://floating-ui.com/docs/flip
|
|
1825
|
+
*/
|
|
1826
|
+
const flip$2 = function (options) {
|
|
1827
|
+
if (options === void 0) {
|
|
1828
|
+
options = {};
|
|
1829
|
+
}
|
|
1830
|
+
return {
|
|
1831
|
+
name: 'flip',
|
|
1832
|
+
options,
|
|
1833
|
+
async fn(state) {
|
|
1834
|
+
var _middlewareData$arrow, _middlewareData$flip;
|
|
1835
|
+
const {
|
|
1836
|
+
placement,
|
|
1837
|
+
middlewareData,
|
|
1838
|
+
rects,
|
|
1839
|
+
initialPlacement,
|
|
1840
|
+
platform,
|
|
1841
|
+
elements
|
|
1842
|
+
} = state;
|
|
1843
|
+
const {
|
|
1844
|
+
mainAxis: checkMainAxis = true,
|
|
1845
|
+
crossAxis: checkCrossAxis = true,
|
|
1846
|
+
fallbackPlacements: specifiedFallbackPlacements,
|
|
1847
|
+
fallbackStrategy = 'bestFit',
|
|
1848
|
+
fallbackAxisSideDirection = 'none',
|
|
1849
|
+
flipAlignment = true,
|
|
1850
|
+
...detectOverflowOptions
|
|
1851
|
+
} = evaluate(options, state);
|
|
1852
|
+
|
|
1853
|
+
// If a reset by the arrow was caused due to an alignment offset being
|
|
1854
|
+
// added, we should skip any logic now since `flip()` has already done its
|
|
1855
|
+
// work.
|
|
1856
|
+
// https://github.com/floating-ui/floating-ui/issues/2549#issuecomment-1719601643
|
|
1857
|
+
if ((_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
|
|
1858
|
+
return {};
|
|
1859
|
+
}
|
|
1860
|
+
const side = getSide(placement);
|
|
1861
|
+
const initialSideAxis = getSideAxis(initialPlacement);
|
|
1862
|
+
const isBasePlacement = getSide(initialPlacement) === initialPlacement;
|
|
1863
|
+
const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
|
|
1864
|
+
const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement));
|
|
1865
|
+
const hasFallbackAxisSideDirection = fallbackAxisSideDirection !== 'none';
|
|
1866
|
+
if (!specifiedFallbackPlacements && hasFallbackAxisSideDirection) {
|
|
1867
|
+
fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
|
|
1868
|
+
}
|
|
1869
|
+
const placements = [initialPlacement, ...fallbackPlacements];
|
|
1870
|
+
const overflow = await platform.detectOverflow(state, detectOverflowOptions);
|
|
1871
|
+
const overflows = [];
|
|
1872
|
+
let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
|
|
1873
|
+
if (checkMainAxis) {
|
|
1874
|
+
overflows.push(overflow[side]);
|
|
1875
|
+
}
|
|
1876
|
+
if (checkCrossAxis) {
|
|
1877
|
+
const sides = getAlignmentSides(placement, rects, rtl);
|
|
1878
|
+
overflows.push(overflow[sides[0]], overflow[sides[1]]);
|
|
1879
|
+
}
|
|
1880
|
+
overflowsData = [...overflowsData, {
|
|
1881
|
+
placement,
|
|
1882
|
+
overflows
|
|
1883
|
+
}];
|
|
1884
|
+
|
|
1885
|
+
// One or more sides is overflowing.
|
|
1886
|
+
if (!overflows.every(side => side <= 0)) {
|
|
1887
|
+
var _middlewareData$flip2, _overflowsData$filter;
|
|
1888
|
+
const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
|
|
1889
|
+
const nextPlacement = placements[nextIndex];
|
|
1890
|
+
if (nextPlacement) {
|
|
1891
|
+
const ignoreCrossAxisOverflow = checkCrossAxis === 'alignment' ? initialSideAxis !== getSideAxis(nextPlacement) : false;
|
|
1892
|
+
if (!ignoreCrossAxisOverflow ||
|
|
1893
|
+
// We leave the current main axis only if every placement on that axis
|
|
1894
|
+
// overflows the main axis.
|
|
1895
|
+
overflowsData.every(d => getSideAxis(d.placement) === initialSideAxis ? d.overflows[0] > 0 : true)) {
|
|
1896
|
+
// Try next placement and re-run the lifecycle.
|
|
1897
|
+
return {
|
|
1898
|
+
data: {
|
|
1899
|
+
index: nextIndex,
|
|
1900
|
+
overflows: overflowsData
|
|
1901
|
+
},
|
|
1902
|
+
reset: {
|
|
1903
|
+
placement: nextPlacement
|
|
1904
|
+
}
|
|
1905
|
+
};
|
|
1906
|
+
}
|
|
1907
|
+
}
|
|
1908
|
+
|
|
1909
|
+
// First, find the candidates that fit on the mainAxis side of overflow,
|
|
1910
|
+
// then find the placement that fits the best on the main crossAxis side.
|
|
1911
|
+
let resetPlacement = (_overflowsData$filter = overflowsData.filter(d => d.overflows[0] <= 0).sort((a, b) => a.overflows[1] - b.overflows[1])[0]) == null ? void 0 : _overflowsData$filter.placement;
|
|
1912
|
+
|
|
1913
|
+
// Otherwise fallback.
|
|
1914
|
+
if (!resetPlacement) {
|
|
1915
|
+
switch (fallbackStrategy) {
|
|
1916
|
+
case 'bestFit':
|
|
1917
|
+
{
|
|
1918
|
+
var _overflowsData$filter2;
|
|
1919
|
+
const placement = (_overflowsData$filter2 = overflowsData.filter(d => {
|
|
1920
|
+
if (hasFallbackAxisSideDirection) {
|
|
1921
|
+
const currentSideAxis = getSideAxis(d.placement);
|
|
1922
|
+
return currentSideAxis === initialSideAxis ||
|
|
1923
|
+
// Create a bias to the `y` side axis due to horizontal
|
|
1924
|
+
// reading directions favoring greater width.
|
|
1925
|
+
currentSideAxis === 'y';
|
|
1926
|
+
}
|
|
1927
|
+
return true;
|
|
1928
|
+
}).map(d => [d.placement, d.overflows.filter(overflow => overflow > 0).reduce((acc, overflow) => acc + overflow, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? void 0 : _overflowsData$filter2[0];
|
|
1929
|
+
if (placement) {
|
|
1930
|
+
resetPlacement = placement;
|
|
1931
|
+
}
|
|
1932
|
+
break;
|
|
1933
|
+
}
|
|
1934
|
+
case 'initialPlacement':
|
|
1935
|
+
resetPlacement = initialPlacement;
|
|
1936
|
+
break;
|
|
1937
|
+
}
|
|
1938
|
+
}
|
|
1939
|
+
if (placement !== resetPlacement) {
|
|
1940
|
+
return {
|
|
1941
|
+
reset: {
|
|
1942
|
+
placement: resetPlacement
|
|
1943
|
+
}
|
|
1944
|
+
};
|
|
1945
|
+
}
|
|
1946
|
+
}
|
|
1947
|
+
return {};
|
|
1948
|
+
}
|
|
1949
|
+
};
|
|
1950
|
+
};
|
|
1951
|
+
|
|
1952
|
+
function getSideOffsets(overflow, rect) {
|
|
1953
|
+
return {
|
|
1954
|
+
top: overflow.top - rect.height,
|
|
1955
|
+
right: overflow.right - rect.width,
|
|
1956
|
+
bottom: overflow.bottom - rect.height,
|
|
1957
|
+
left: overflow.left - rect.width
|
|
1958
|
+
};
|
|
1959
|
+
}
|
|
1960
|
+
function isAnySideFullyClipped(overflow) {
|
|
1961
|
+
return sides.some(side => overflow[side] >= 0);
|
|
1962
|
+
}
|
|
1963
|
+
/**
|
|
1964
|
+
* Provides data to hide the floating element in applicable situations, such as
|
|
1965
|
+
* when it is not in the same clipping context as the reference element.
|
|
1966
|
+
* @see https://floating-ui.com/docs/hide
|
|
1967
|
+
*/
|
|
1968
|
+
const hide$2 = function (options) {
|
|
1969
|
+
if (options === void 0) {
|
|
1970
|
+
options = {};
|
|
1971
|
+
}
|
|
1972
|
+
return {
|
|
1973
|
+
name: 'hide',
|
|
1974
|
+
options,
|
|
1975
|
+
async fn(state) {
|
|
1976
|
+
const {
|
|
1977
|
+
rects,
|
|
1978
|
+
platform
|
|
1979
|
+
} = state;
|
|
1980
|
+
const {
|
|
1981
|
+
strategy = 'referenceHidden',
|
|
1982
|
+
...detectOverflowOptions
|
|
1983
|
+
} = evaluate(options, state);
|
|
1984
|
+
switch (strategy) {
|
|
1985
|
+
case 'referenceHidden':
|
|
1986
|
+
{
|
|
1987
|
+
const overflow = await platform.detectOverflow(state, {
|
|
1988
|
+
...detectOverflowOptions,
|
|
1989
|
+
elementContext: 'reference'
|
|
1990
|
+
});
|
|
1991
|
+
const offsets = getSideOffsets(overflow, rects.reference);
|
|
1992
|
+
return {
|
|
1993
|
+
data: {
|
|
1994
|
+
referenceHiddenOffsets: offsets,
|
|
1995
|
+
referenceHidden: isAnySideFullyClipped(offsets)
|
|
1996
|
+
}
|
|
1997
|
+
};
|
|
1998
|
+
}
|
|
1999
|
+
case 'escaped':
|
|
2000
|
+
{
|
|
2001
|
+
const overflow = await platform.detectOverflow(state, {
|
|
2002
|
+
...detectOverflowOptions,
|
|
2003
|
+
altBoundary: true
|
|
2004
|
+
});
|
|
2005
|
+
const offsets = getSideOffsets(overflow, rects.floating);
|
|
2006
|
+
return {
|
|
2007
|
+
data: {
|
|
2008
|
+
escapedOffsets: offsets,
|
|
2009
|
+
escaped: isAnySideFullyClipped(offsets)
|
|
2010
|
+
}
|
|
2011
|
+
};
|
|
2012
|
+
}
|
|
2013
|
+
default:
|
|
2014
|
+
{
|
|
2015
|
+
return {};
|
|
2016
|
+
}
|
|
2017
|
+
}
|
|
2018
|
+
}
|
|
2019
|
+
};
|
|
2020
|
+
};
|
|
2021
|
+
|
|
2022
|
+
const originSides = /*#__PURE__*/new Set(['left', 'top']);
|
|
2023
|
+
|
|
2024
|
+
// For type backwards-compatibility, the `OffsetOptions` type was also
|
|
2025
|
+
// Derivable.
|
|
2026
|
+
|
|
2027
|
+
async function convertValueToCoords(state, options) {
|
|
2028
|
+
const {
|
|
2029
|
+
placement,
|
|
2030
|
+
platform,
|
|
2031
|
+
elements
|
|
2032
|
+
} = state;
|
|
2033
|
+
const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
|
|
2034
|
+
const side = getSide(placement);
|
|
2035
|
+
const alignment = getAlignment(placement);
|
|
2036
|
+
const isVertical = getSideAxis(placement) === 'y';
|
|
2037
|
+
const mainAxisMulti = originSides.has(side) ? -1 : 1;
|
|
2038
|
+
const crossAxisMulti = rtl && isVertical ? -1 : 1;
|
|
2039
|
+
const rawValue = evaluate(options, state);
|
|
2040
|
+
|
|
2041
|
+
// eslint-disable-next-line prefer-const
|
|
2042
|
+
let {
|
|
2043
|
+
mainAxis,
|
|
2044
|
+
crossAxis,
|
|
2045
|
+
alignmentAxis
|
|
2046
|
+
} = typeof rawValue === 'number' ? {
|
|
2047
|
+
mainAxis: rawValue,
|
|
2048
|
+
crossAxis: 0,
|
|
2049
|
+
alignmentAxis: null
|
|
2050
|
+
} : {
|
|
2051
|
+
mainAxis: rawValue.mainAxis || 0,
|
|
2052
|
+
crossAxis: rawValue.crossAxis || 0,
|
|
2053
|
+
alignmentAxis: rawValue.alignmentAxis
|
|
2054
|
+
};
|
|
2055
|
+
if (alignment && typeof alignmentAxis === 'number') {
|
|
2056
|
+
crossAxis = alignment === 'end' ? alignmentAxis * -1 : alignmentAxis;
|
|
2057
|
+
}
|
|
2058
|
+
return isVertical ? {
|
|
2059
|
+
x: crossAxis * crossAxisMulti,
|
|
2060
|
+
y: mainAxis * mainAxisMulti
|
|
2061
|
+
} : {
|
|
2062
|
+
x: mainAxis * mainAxisMulti,
|
|
2063
|
+
y: crossAxis * crossAxisMulti
|
|
2064
|
+
};
|
|
2065
|
+
}
|
|
2066
|
+
|
|
2067
|
+
/**
|
|
2068
|
+
* Modifies the placement by translating the floating element along the
|
|
2069
|
+
* specified axes.
|
|
2070
|
+
* A number (shorthand for `mainAxis` or distance), or an axes configuration
|
|
2071
|
+
* object may be passed.
|
|
2072
|
+
* @see https://floating-ui.com/docs/offset
|
|
2073
|
+
*/
|
|
2074
|
+
const offset$2 = function (options) {
|
|
2075
|
+
if (options === void 0) {
|
|
2076
|
+
options = 0;
|
|
2077
|
+
}
|
|
2078
|
+
return {
|
|
2079
|
+
name: 'offset',
|
|
2080
|
+
options,
|
|
2081
|
+
async fn(state) {
|
|
2082
|
+
var _middlewareData$offse, _middlewareData$arrow;
|
|
2083
|
+
const {
|
|
2084
|
+
x,
|
|
2085
|
+
y,
|
|
2086
|
+
placement,
|
|
2087
|
+
middlewareData
|
|
2088
|
+
} = state;
|
|
2089
|
+
const diffCoords = await convertValueToCoords(state, options);
|
|
2090
|
+
|
|
2091
|
+
// If the placement is the same and the arrow caused an alignment offset
|
|
2092
|
+
// then we don't need to change the positioning coordinates.
|
|
2093
|
+
if (placement === ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse.placement) && (_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
|
|
2094
|
+
return {};
|
|
2095
|
+
}
|
|
2096
|
+
return {
|
|
2097
|
+
x: x + diffCoords.x,
|
|
2098
|
+
y: y + diffCoords.y,
|
|
2099
|
+
data: {
|
|
2100
|
+
...diffCoords,
|
|
2101
|
+
placement
|
|
2102
|
+
}
|
|
2103
|
+
};
|
|
2104
|
+
}
|
|
2105
|
+
};
|
|
2106
|
+
};
|
|
2107
|
+
|
|
2108
|
+
/**
|
|
2109
|
+
* Optimizes the visibility of the floating element by shifting it in order to
|
|
2110
|
+
* keep it in view when it will overflow the clipping boundary.
|
|
2111
|
+
* @see https://floating-ui.com/docs/shift
|
|
2112
|
+
*/
|
|
2113
|
+
const shift$2 = function (options) {
|
|
2114
|
+
if (options === void 0) {
|
|
2115
|
+
options = {};
|
|
2116
|
+
}
|
|
2117
|
+
return {
|
|
2118
|
+
name: 'shift',
|
|
2119
|
+
options,
|
|
2120
|
+
async fn(state) {
|
|
2121
|
+
const {
|
|
2122
|
+
x,
|
|
2123
|
+
y,
|
|
2124
|
+
placement,
|
|
2125
|
+
platform
|
|
2126
|
+
} = state;
|
|
2127
|
+
const {
|
|
2128
|
+
mainAxis: checkMainAxis = true,
|
|
2129
|
+
crossAxis: checkCrossAxis = false,
|
|
2130
|
+
limiter = {
|
|
2131
|
+
fn: _ref => {
|
|
2132
|
+
let {
|
|
2133
|
+
x,
|
|
2134
|
+
y
|
|
2135
|
+
} = _ref;
|
|
2136
|
+
return {
|
|
2137
|
+
x,
|
|
2138
|
+
y
|
|
2139
|
+
};
|
|
2140
|
+
}
|
|
2141
|
+
},
|
|
2142
|
+
...detectOverflowOptions
|
|
2143
|
+
} = evaluate(options, state);
|
|
2144
|
+
const coords = {
|
|
2145
|
+
x,
|
|
2146
|
+
y
|
|
2147
|
+
};
|
|
2148
|
+
const overflow = await platform.detectOverflow(state, detectOverflowOptions);
|
|
2149
|
+
const crossAxis = getSideAxis(getSide(placement));
|
|
2150
|
+
const mainAxis = getOppositeAxis(crossAxis);
|
|
2151
|
+
let mainAxisCoord = coords[mainAxis];
|
|
2152
|
+
let crossAxisCoord = coords[crossAxis];
|
|
2153
|
+
if (checkMainAxis) {
|
|
2154
|
+
const minSide = mainAxis === 'y' ? 'top' : 'left';
|
|
2155
|
+
const maxSide = mainAxis === 'y' ? 'bottom' : 'right';
|
|
2156
|
+
const min = mainAxisCoord + overflow[minSide];
|
|
2157
|
+
const max = mainAxisCoord - overflow[maxSide];
|
|
2158
|
+
mainAxisCoord = clamp(min, mainAxisCoord, max);
|
|
2159
|
+
}
|
|
2160
|
+
if (checkCrossAxis) {
|
|
2161
|
+
const minSide = crossAxis === 'y' ? 'top' : 'left';
|
|
2162
|
+
const maxSide = crossAxis === 'y' ? 'bottom' : 'right';
|
|
2163
|
+
const min = crossAxisCoord + overflow[minSide];
|
|
2164
|
+
const max = crossAxisCoord - overflow[maxSide];
|
|
2165
|
+
crossAxisCoord = clamp(min, crossAxisCoord, max);
|
|
2166
|
+
}
|
|
2167
|
+
const limitedCoords = limiter.fn({
|
|
2168
|
+
...state,
|
|
2169
|
+
[mainAxis]: mainAxisCoord,
|
|
2170
|
+
[crossAxis]: crossAxisCoord
|
|
2171
|
+
});
|
|
2172
|
+
return {
|
|
2173
|
+
...limitedCoords,
|
|
2174
|
+
data: {
|
|
2175
|
+
x: limitedCoords.x - x,
|
|
2176
|
+
y: limitedCoords.y - y,
|
|
2177
|
+
enabled: {
|
|
2178
|
+
[mainAxis]: checkMainAxis,
|
|
2179
|
+
[crossAxis]: checkCrossAxis
|
|
2180
|
+
}
|
|
2181
|
+
}
|
|
2182
|
+
};
|
|
2183
|
+
}
|
|
2184
|
+
};
|
|
2185
|
+
};
|
|
2186
|
+
/**
|
|
2187
|
+
* Built-in `limiter` that will stop `shift()` at a certain point.
|
|
2188
|
+
*/
|
|
2189
|
+
const limitShift$2 = function (options) {
|
|
2190
|
+
if (options === void 0) {
|
|
2191
|
+
options = {};
|
|
2192
|
+
}
|
|
2193
|
+
return {
|
|
2194
|
+
options,
|
|
2195
|
+
fn(state) {
|
|
2196
|
+
const {
|
|
2197
|
+
x,
|
|
2198
|
+
y,
|
|
2199
|
+
placement,
|
|
2200
|
+
rects,
|
|
2201
|
+
middlewareData
|
|
2202
|
+
} = state;
|
|
2203
|
+
const {
|
|
2204
|
+
offset = 0,
|
|
2205
|
+
mainAxis: checkMainAxis = true,
|
|
2206
|
+
crossAxis: checkCrossAxis = true
|
|
2207
|
+
} = evaluate(options, state);
|
|
2208
|
+
const coords = {
|
|
2209
|
+
x,
|
|
2210
|
+
y
|
|
2211
|
+
};
|
|
2212
|
+
const crossAxis = getSideAxis(placement);
|
|
2213
|
+
const mainAxis = getOppositeAxis(crossAxis);
|
|
2214
|
+
let mainAxisCoord = coords[mainAxis];
|
|
2215
|
+
let crossAxisCoord = coords[crossAxis];
|
|
2216
|
+
const rawOffset = evaluate(offset, state);
|
|
2217
|
+
const computedOffset = typeof rawOffset === 'number' ? {
|
|
2218
|
+
mainAxis: rawOffset,
|
|
2219
|
+
crossAxis: 0
|
|
2220
|
+
} : {
|
|
2221
|
+
mainAxis: 0,
|
|
2222
|
+
crossAxis: 0,
|
|
2223
|
+
...rawOffset
|
|
2224
|
+
};
|
|
2225
|
+
if (checkMainAxis) {
|
|
2226
|
+
const len = mainAxis === 'y' ? 'height' : 'width';
|
|
2227
|
+
const limitMin = rects.reference[mainAxis] - rects.floating[len] + computedOffset.mainAxis;
|
|
2228
|
+
const limitMax = rects.reference[mainAxis] + rects.reference[len] - computedOffset.mainAxis;
|
|
2229
|
+
if (mainAxisCoord < limitMin) {
|
|
2230
|
+
mainAxisCoord = limitMin;
|
|
2231
|
+
} else if (mainAxisCoord > limitMax) {
|
|
2232
|
+
mainAxisCoord = limitMax;
|
|
2233
|
+
}
|
|
2234
|
+
}
|
|
2235
|
+
if (checkCrossAxis) {
|
|
2236
|
+
var _middlewareData$offse, _middlewareData$offse2;
|
|
2237
|
+
const len = mainAxis === 'y' ? 'width' : 'height';
|
|
2238
|
+
const isOriginSide = originSides.has(getSide(placement));
|
|
2239
|
+
const limitMin = rects.reference[crossAxis] - rects.floating[len] + (isOriginSide ? ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse[crossAxis]) || 0 : 0) + (isOriginSide ? 0 : computedOffset.crossAxis);
|
|
2240
|
+
const limitMax = rects.reference[crossAxis] + rects.reference[len] + (isOriginSide ? 0 : ((_middlewareData$offse2 = middlewareData.offset) == null ? void 0 : _middlewareData$offse2[crossAxis]) || 0) - (isOriginSide ? computedOffset.crossAxis : 0);
|
|
2241
|
+
if (crossAxisCoord < limitMin) {
|
|
2242
|
+
crossAxisCoord = limitMin;
|
|
2243
|
+
} else if (crossAxisCoord > limitMax) {
|
|
2244
|
+
crossAxisCoord = limitMax;
|
|
2245
|
+
}
|
|
2246
|
+
}
|
|
2247
|
+
return {
|
|
2248
|
+
[mainAxis]: mainAxisCoord,
|
|
2249
|
+
[crossAxis]: crossAxisCoord
|
|
2250
|
+
};
|
|
2251
|
+
}
|
|
2252
|
+
};
|
|
2253
|
+
};
|
|
2254
|
+
|
|
2255
|
+
/**
|
|
2256
|
+
* Provides data that allows you to change the size of the floating element —
|
|
2257
|
+
* for instance, prevent it from overflowing the clipping boundary or match the
|
|
2258
|
+
* width of the reference element.
|
|
2259
|
+
* @see https://floating-ui.com/docs/size
|
|
2260
|
+
*/
|
|
2261
|
+
const size$2 = function (options) {
|
|
2262
|
+
if (options === void 0) {
|
|
2263
|
+
options = {};
|
|
2264
|
+
}
|
|
2265
|
+
return {
|
|
2266
|
+
name: 'size',
|
|
2267
|
+
options,
|
|
2268
|
+
async fn(state) {
|
|
2269
|
+
var _state$middlewareData, _state$middlewareData2;
|
|
2270
|
+
const {
|
|
2271
|
+
placement,
|
|
2272
|
+
rects,
|
|
2273
|
+
platform,
|
|
2274
|
+
elements
|
|
2275
|
+
} = state;
|
|
2276
|
+
const {
|
|
2277
|
+
apply = () => {},
|
|
2278
|
+
...detectOverflowOptions
|
|
2279
|
+
} = evaluate(options, state);
|
|
2280
|
+
const overflow = await platform.detectOverflow(state, detectOverflowOptions);
|
|
2281
|
+
const side = getSide(placement);
|
|
2282
|
+
const alignment = getAlignment(placement);
|
|
2283
|
+
const isYAxis = getSideAxis(placement) === 'y';
|
|
2284
|
+
const {
|
|
2285
|
+
width,
|
|
2286
|
+
height
|
|
2287
|
+
} = rects.floating;
|
|
2288
|
+
let heightSide;
|
|
2289
|
+
let widthSide;
|
|
2290
|
+
if (side === 'top' || side === 'bottom') {
|
|
2291
|
+
heightSide = side;
|
|
2292
|
+
widthSide = alignment === ((await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating))) ? 'start' : 'end') ? 'left' : 'right';
|
|
2293
|
+
} else {
|
|
2294
|
+
widthSide = side;
|
|
2295
|
+
heightSide = alignment === 'end' ? 'top' : 'bottom';
|
|
2296
|
+
}
|
|
2297
|
+
const maximumClippingHeight = height - overflow.top - overflow.bottom;
|
|
2298
|
+
const maximumClippingWidth = width - overflow.left - overflow.right;
|
|
2299
|
+
const overflowAvailableHeight = min(height - overflow[heightSide], maximumClippingHeight);
|
|
2300
|
+
const overflowAvailableWidth = min(width - overflow[widthSide], maximumClippingWidth);
|
|
2301
|
+
const noShift = !state.middlewareData.shift;
|
|
2302
|
+
let availableHeight = overflowAvailableHeight;
|
|
2303
|
+
let availableWidth = overflowAvailableWidth;
|
|
2304
|
+
if ((_state$middlewareData = state.middlewareData.shift) != null && _state$middlewareData.enabled.x) {
|
|
2305
|
+
availableWidth = maximumClippingWidth;
|
|
2306
|
+
}
|
|
2307
|
+
if ((_state$middlewareData2 = state.middlewareData.shift) != null && _state$middlewareData2.enabled.y) {
|
|
2308
|
+
availableHeight = maximumClippingHeight;
|
|
2309
|
+
}
|
|
2310
|
+
if (noShift && !alignment) {
|
|
2311
|
+
const xMin = max(overflow.left, 0);
|
|
2312
|
+
const xMax = max(overflow.right, 0);
|
|
2313
|
+
const yMin = max(overflow.top, 0);
|
|
2314
|
+
const yMax = max(overflow.bottom, 0);
|
|
2315
|
+
if (isYAxis) {
|
|
2316
|
+
availableWidth = width - 2 * (xMin !== 0 || xMax !== 0 ? xMin + xMax : max(overflow.left, overflow.right));
|
|
2317
|
+
} else {
|
|
2318
|
+
availableHeight = height - 2 * (yMin !== 0 || yMax !== 0 ? yMin + yMax : max(overflow.top, overflow.bottom));
|
|
2319
|
+
}
|
|
2320
|
+
}
|
|
2321
|
+
await apply({
|
|
2322
|
+
...state,
|
|
2323
|
+
availableWidth,
|
|
2324
|
+
availableHeight
|
|
2325
|
+
});
|
|
2326
|
+
const nextDimensions = await platform.getDimensions(elements.floating);
|
|
2327
|
+
if (width !== nextDimensions.width || height !== nextDimensions.height) {
|
|
2328
|
+
return {
|
|
2329
|
+
reset: {
|
|
2330
|
+
rects: true
|
|
2331
|
+
}
|
|
2332
|
+
};
|
|
2333
|
+
}
|
|
2334
|
+
return {};
|
|
2335
|
+
}
|
|
2336
|
+
};
|
|
2337
|
+
};
|
|
2338
|
+
|
|
2339
|
+
function getCssDimensions(element) {
|
|
2340
|
+
const css = getComputedStyle$1(element);
|
|
2341
|
+
// In testing environments, the `width` and `height` properties are empty
|
|
2342
|
+
// strings for SVG elements, returning NaN. Fallback to `0` in this case.
|
|
2343
|
+
let width = parseFloat(css.width) || 0;
|
|
2344
|
+
let height = parseFloat(css.height) || 0;
|
|
2345
|
+
const hasOffset = isHTMLElement(element);
|
|
2346
|
+
const offsetWidth = hasOffset ? element.offsetWidth : width;
|
|
2347
|
+
const offsetHeight = hasOffset ? element.offsetHeight : height;
|
|
2348
|
+
const shouldFallback = round(width) !== offsetWidth || round(height) !== offsetHeight;
|
|
2349
|
+
if (shouldFallback) {
|
|
2350
|
+
width = offsetWidth;
|
|
2351
|
+
height = offsetHeight;
|
|
2352
|
+
}
|
|
2353
|
+
return {
|
|
2354
|
+
width,
|
|
2355
|
+
height,
|
|
2356
|
+
$: shouldFallback
|
|
2357
|
+
};
|
|
2358
|
+
}
|
|
2359
|
+
|
|
2360
|
+
function unwrapElement(element) {
|
|
2361
|
+
return !isElement(element) ? element.contextElement : element;
|
|
2362
|
+
}
|
|
2363
|
+
|
|
2364
|
+
function getScale(element) {
|
|
2365
|
+
const domElement = unwrapElement(element);
|
|
2366
|
+
if (!isHTMLElement(domElement)) {
|
|
2367
|
+
return createCoords(1);
|
|
2368
|
+
}
|
|
2369
|
+
const rect = domElement.getBoundingClientRect();
|
|
2370
|
+
const {
|
|
2371
|
+
width,
|
|
2372
|
+
height,
|
|
2373
|
+
$
|
|
2374
|
+
} = getCssDimensions(domElement);
|
|
2375
|
+
let x = ($ ? round(rect.width) : rect.width) / width;
|
|
2376
|
+
let y = ($ ? round(rect.height) : rect.height) / height;
|
|
2377
|
+
|
|
2378
|
+
// 0, NaN, or Infinity should always fallback to 1.
|
|
2379
|
+
|
|
2380
|
+
if (!x || !Number.isFinite(x)) {
|
|
2381
|
+
x = 1;
|
|
2382
|
+
}
|
|
2383
|
+
if (!y || !Number.isFinite(y)) {
|
|
2384
|
+
y = 1;
|
|
2385
|
+
}
|
|
2386
|
+
return {
|
|
2387
|
+
x,
|
|
2388
|
+
y
|
|
2389
|
+
};
|
|
2390
|
+
}
|
|
2391
|
+
|
|
2392
|
+
const noOffsets = /*#__PURE__*/createCoords(0);
|
|
2393
|
+
function getVisualOffsets(element) {
|
|
2394
|
+
const win = getWindow(element);
|
|
2395
|
+
if (!isWebKit() || !win.visualViewport) {
|
|
2396
|
+
return noOffsets;
|
|
2397
|
+
}
|
|
2398
|
+
return {
|
|
2399
|
+
x: win.visualViewport.offsetLeft,
|
|
2400
|
+
y: win.visualViewport.offsetTop
|
|
2401
|
+
};
|
|
2402
|
+
}
|
|
2403
|
+
function shouldAddVisualOffsets(element, isFixed, floatingOffsetParent) {
|
|
2404
|
+
if (isFixed === void 0) {
|
|
2405
|
+
isFixed = false;
|
|
2406
|
+
}
|
|
2407
|
+
if (!floatingOffsetParent || isFixed && floatingOffsetParent !== getWindow(element)) {
|
|
2408
|
+
return false;
|
|
2409
|
+
}
|
|
2410
|
+
return isFixed;
|
|
2411
|
+
}
|
|
2412
|
+
|
|
2413
|
+
function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetParent) {
|
|
2414
|
+
if (includeScale === void 0) {
|
|
2415
|
+
includeScale = false;
|
|
2416
|
+
}
|
|
2417
|
+
if (isFixedStrategy === void 0) {
|
|
2418
|
+
isFixedStrategy = false;
|
|
2419
|
+
}
|
|
2420
|
+
const clientRect = element.getBoundingClientRect();
|
|
2421
|
+
const domElement = unwrapElement(element);
|
|
2422
|
+
let scale = createCoords(1);
|
|
2423
|
+
if (includeScale) {
|
|
2424
|
+
if (offsetParent) {
|
|
2425
|
+
if (isElement(offsetParent)) {
|
|
2426
|
+
scale = getScale(offsetParent);
|
|
2427
|
+
}
|
|
2428
|
+
} else {
|
|
2429
|
+
scale = getScale(element);
|
|
2430
|
+
}
|
|
2431
|
+
}
|
|
2432
|
+
const visualOffsets = shouldAddVisualOffsets(domElement, isFixedStrategy, offsetParent) ? getVisualOffsets(domElement) : createCoords(0);
|
|
2433
|
+
let x = (clientRect.left + visualOffsets.x) / scale.x;
|
|
2434
|
+
let y = (clientRect.top + visualOffsets.y) / scale.y;
|
|
2435
|
+
let width = clientRect.width / scale.x;
|
|
2436
|
+
let height = clientRect.height / scale.y;
|
|
2437
|
+
if (domElement) {
|
|
2438
|
+
const win = getWindow(domElement);
|
|
2439
|
+
const offsetWin = offsetParent && isElement(offsetParent) ? getWindow(offsetParent) : offsetParent;
|
|
2440
|
+
let currentWin = win;
|
|
2441
|
+
let currentIFrame = getFrameElement(currentWin);
|
|
2442
|
+
while (currentIFrame && offsetParent && offsetWin !== currentWin) {
|
|
2443
|
+
const iframeScale = getScale(currentIFrame);
|
|
2444
|
+
const iframeRect = currentIFrame.getBoundingClientRect();
|
|
2445
|
+
const css = getComputedStyle$1(currentIFrame);
|
|
2446
|
+
const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
|
|
2447
|
+
const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
|
|
2448
|
+
x *= iframeScale.x;
|
|
2449
|
+
y *= iframeScale.y;
|
|
2450
|
+
width *= iframeScale.x;
|
|
2451
|
+
height *= iframeScale.y;
|
|
2452
|
+
x += left;
|
|
2453
|
+
y += top;
|
|
2454
|
+
currentWin = getWindow(currentIFrame);
|
|
2455
|
+
currentIFrame = getFrameElement(currentWin);
|
|
2456
|
+
}
|
|
2457
|
+
}
|
|
2458
|
+
return rectToClientRect({
|
|
2459
|
+
width,
|
|
2460
|
+
height,
|
|
2461
|
+
x,
|
|
2462
|
+
y
|
|
2463
|
+
});
|
|
2464
|
+
}
|
|
2465
|
+
|
|
2466
|
+
// If <html> has a CSS width greater than the viewport, then this will be
|
|
2467
|
+
// incorrect for RTL.
|
|
2468
|
+
function getWindowScrollBarX(element, rect) {
|
|
2469
|
+
const leftScroll = getNodeScroll(element).scrollLeft;
|
|
2470
|
+
if (!rect) {
|
|
2471
|
+
return getBoundingClientRect(getDocumentElement(element)).left + leftScroll;
|
|
2472
|
+
}
|
|
2473
|
+
return rect.left + leftScroll;
|
|
2474
|
+
}
|
|
2475
|
+
|
|
2476
|
+
function getHTMLOffset(documentElement, scroll) {
|
|
2477
|
+
const htmlRect = documentElement.getBoundingClientRect();
|
|
2478
|
+
const x = htmlRect.left + scroll.scrollLeft - getWindowScrollBarX(documentElement, htmlRect);
|
|
2479
|
+
const y = htmlRect.top + scroll.scrollTop;
|
|
2480
|
+
return {
|
|
2481
|
+
x,
|
|
2482
|
+
y
|
|
2483
|
+
};
|
|
2484
|
+
}
|
|
2485
|
+
|
|
2486
|
+
function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
|
|
2487
|
+
let {
|
|
2488
|
+
elements,
|
|
2489
|
+
rect,
|
|
2490
|
+
offsetParent,
|
|
2491
|
+
strategy
|
|
2492
|
+
} = _ref;
|
|
2493
|
+
const isFixed = strategy === 'fixed';
|
|
2494
|
+
const documentElement = getDocumentElement(offsetParent);
|
|
2495
|
+
const topLayer = elements ? isTopLayer(elements.floating) : false;
|
|
2496
|
+
if (offsetParent === documentElement || topLayer && isFixed) {
|
|
2497
|
+
return rect;
|
|
2498
|
+
}
|
|
2499
|
+
let scroll = {
|
|
2500
|
+
scrollLeft: 0,
|
|
2501
|
+
scrollTop: 0
|
|
2502
|
+
};
|
|
2503
|
+
let scale = createCoords(1);
|
|
2504
|
+
const offsets = createCoords(0);
|
|
2505
|
+
const isOffsetParentAnElement = isHTMLElement(offsetParent);
|
|
2506
|
+
if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
|
|
2507
|
+
if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
|
|
2508
|
+
scroll = getNodeScroll(offsetParent);
|
|
2509
|
+
}
|
|
2510
|
+
if (isOffsetParentAnElement) {
|
|
2511
|
+
const offsetRect = getBoundingClientRect(offsetParent);
|
|
2512
|
+
scale = getScale(offsetParent);
|
|
2513
|
+
offsets.x = offsetRect.x + offsetParent.clientLeft;
|
|
2514
|
+
offsets.y = offsetRect.y + offsetParent.clientTop;
|
|
2515
|
+
}
|
|
2516
|
+
}
|
|
2517
|
+
const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
|
|
2518
|
+
return {
|
|
2519
|
+
width: rect.width * scale.x,
|
|
2520
|
+
height: rect.height * scale.y,
|
|
2521
|
+
x: rect.x * scale.x - scroll.scrollLeft * scale.x + offsets.x + htmlOffset.x,
|
|
2522
|
+
y: rect.y * scale.y - scroll.scrollTop * scale.y + offsets.y + htmlOffset.y
|
|
2523
|
+
};
|
|
2524
|
+
}
|
|
2525
|
+
|
|
2526
|
+
function getClientRects(element) {
|
|
2527
|
+
return Array.from(element.getClientRects());
|
|
2528
|
+
}
|
|
2529
|
+
|
|
2530
|
+
// Gets the entire size of the scrollable document area, even extending outside
|
|
2531
|
+
// of the `<html>` and `<body>` rect bounds if horizontally scrollable.
|
|
2532
|
+
function getDocumentRect(element) {
|
|
2533
|
+
const html = getDocumentElement(element);
|
|
2534
|
+
const scroll = getNodeScroll(element);
|
|
2535
|
+
const body = element.ownerDocument.body;
|
|
2536
|
+
const width = max(html.scrollWidth, html.clientWidth, body.scrollWidth, body.clientWidth);
|
|
2537
|
+
const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight);
|
|
2538
|
+
let x = -scroll.scrollLeft + getWindowScrollBarX(element);
|
|
2539
|
+
const y = -scroll.scrollTop;
|
|
2540
|
+
if (getComputedStyle$1(body).direction === 'rtl') {
|
|
2541
|
+
x += max(html.clientWidth, body.clientWidth) - width;
|
|
2542
|
+
}
|
|
2543
|
+
return {
|
|
2544
|
+
width,
|
|
2545
|
+
height,
|
|
2546
|
+
x,
|
|
2547
|
+
y
|
|
2548
|
+
};
|
|
2549
|
+
}
|
|
2550
|
+
|
|
2551
|
+
// Safety check: ensure the scrollbar space is reasonable in case this
|
|
2552
|
+
// calculation is affected by unusual styles.
|
|
2553
|
+
// Most scrollbars leave 15-18px of space.
|
|
2554
|
+
const SCROLLBAR_MAX = 25;
|
|
2555
|
+
function getViewportRect(element, strategy) {
|
|
2556
|
+
const win = getWindow(element);
|
|
2557
|
+
const html = getDocumentElement(element);
|
|
2558
|
+
const visualViewport = win.visualViewport;
|
|
2559
|
+
let width = html.clientWidth;
|
|
2560
|
+
let height = html.clientHeight;
|
|
2561
|
+
let x = 0;
|
|
2562
|
+
let y = 0;
|
|
2563
|
+
if (visualViewport) {
|
|
2564
|
+
width = visualViewport.width;
|
|
2565
|
+
height = visualViewport.height;
|
|
2566
|
+
const visualViewportBased = isWebKit();
|
|
2567
|
+
if (!visualViewportBased || visualViewportBased && strategy === 'fixed') {
|
|
2568
|
+
x = visualViewport.offsetLeft;
|
|
2569
|
+
y = visualViewport.offsetTop;
|
|
2570
|
+
}
|
|
2571
|
+
}
|
|
2572
|
+
const windowScrollbarX = getWindowScrollBarX(html);
|
|
2573
|
+
// <html> `overflow: hidden` + `scrollbar-gutter: stable` reduces the
|
|
2574
|
+
// visual width of the <html> but this is not considered in the size
|
|
2575
|
+
// of `html.clientWidth`.
|
|
2576
|
+
if (windowScrollbarX <= 0) {
|
|
2577
|
+
const doc = html.ownerDocument;
|
|
2578
|
+
const body = doc.body;
|
|
2579
|
+
const bodyStyles = getComputedStyle(body);
|
|
2580
|
+
const bodyMarginInline = doc.compatMode === 'CSS1Compat' ? parseFloat(bodyStyles.marginLeft) + parseFloat(bodyStyles.marginRight) || 0 : 0;
|
|
2581
|
+
const clippingStableScrollbarWidth = Math.abs(html.clientWidth - body.clientWidth - bodyMarginInline);
|
|
2582
|
+
if (clippingStableScrollbarWidth <= SCROLLBAR_MAX) {
|
|
2583
|
+
width -= clippingStableScrollbarWidth;
|
|
2584
|
+
}
|
|
2585
|
+
} else if (windowScrollbarX <= SCROLLBAR_MAX) {
|
|
2586
|
+
// If the <body> scrollbar is on the left, the width needs to be extended
|
|
2587
|
+
// by the scrollbar amount so there isn't extra space on the right.
|
|
2588
|
+
width += windowScrollbarX;
|
|
2589
|
+
}
|
|
2590
|
+
return {
|
|
2591
|
+
width,
|
|
2592
|
+
height,
|
|
2593
|
+
x,
|
|
2594
|
+
y
|
|
2595
|
+
};
|
|
2596
|
+
}
|
|
2597
|
+
|
|
2598
|
+
// Returns the inner client rect, subtracting scrollbars if present.
|
|
2599
|
+
function getInnerBoundingClientRect(element, strategy) {
|
|
2600
|
+
const clientRect = getBoundingClientRect(element, true, strategy === 'fixed');
|
|
2601
|
+
const top = clientRect.top + element.clientTop;
|
|
2602
|
+
const left = clientRect.left + element.clientLeft;
|
|
2603
|
+
const scale = isHTMLElement(element) ? getScale(element) : createCoords(1);
|
|
2604
|
+
const width = element.clientWidth * scale.x;
|
|
2605
|
+
const height = element.clientHeight * scale.y;
|
|
2606
|
+
const x = left * scale.x;
|
|
2607
|
+
const y = top * scale.y;
|
|
2608
|
+
return {
|
|
2609
|
+
width,
|
|
2610
|
+
height,
|
|
2611
|
+
x,
|
|
2612
|
+
y
|
|
2613
|
+
};
|
|
2614
|
+
}
|
|
2615
|
+
function getClientRectFromClippingAncestor(element, clippingAncestor, strategy) {
|
|
2616
|
+
let rect;
|
|
2617
|
+
if (clippingAncestor === 'viewport') {
|
|
2618
|
+
rect = getViewportRect(element, strategy);
|
|
2619
|
+
} else if (clippingAncestor === 'document') {
|
|
2620
|
+
rect = getDocumentRect(getDocumentElement(element));
|
|
2621
|
+
} else if (isElement(clippingAncestor)) {
|
|
2622
|
+
rect = getInnerBoundingClientRect(clippingAncestor, strategy);
|
|
2623
|
+
} else {
|
|
2624
|
+
const visualOffsets = getVisualOffsets(element);
|
|
2625
|
+
rect = {
|
|
2626
|
+
x: clippingAncestor.x - visualOffsets.x,
|
|
2627
|
+
y: clippingAncestor.y - visualOffsets.y,
|
|
2628
|
+
width: clippingAncestor.width,
|
|
2629
|
+
height: clippingAncestor.height
|
|
2630
|
+
};
|
|
2631
|
+
}
|
|
2632
|
+
return rectToClientRect(rect);
|
|
2633
|
+
}
|
|
2634
|
+
function hasFixedPositionAncestor(element, stopNode) {
|
|
2635
|
+
const parentNode = getParentNode(element);
|
|
2636
|
+
if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) {
|
|
2637
|
+
return false;
|
|
2638
|
+
}
|
|
2639
|
+
return getComputedStyle$1(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode);
|
|
2640
|
+
}
|
|
2641
|
+
|
|
2642
|
+
// A "clipping ancestor" is an `overflow` element with the characteristic of
|
|
2643
|
+
// clipping (or hiding) child elements. This returns all clipping ancestors
|
|
2644
|
+
// of the given element up the tree.
|
|
2645
|
+
function getClippingElementAncestors(element, cache) {
|
|
2646
|
+
const cachedResult = cache.get(element);
|
|
2647
|
+
if (cachedResult) {
|
|
2648
|
+
return cachedResult;
|
|
2649
|
+
}
|
|
2650
|
+
let result = getOverflowAncestors(element, [], false).filter(el => isElement(el) && getNodeName(el) !== 'body');
|
|
2651
|
+
let currentContainingBlockComputedStyle = null;
|
|
2652
|
+
const elementIsFixed = getComputedStyle$1(element).position === 'fixed';
|
|
2653
|
+
let currentNode = elementIsFixed ? getParentNode(element) : element;
|
|
2654
|
+
|
|
2655
|
+
// https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
|
|
2656
|
+
while (isElement(currentNode) && !isLastTraversableNode(currentNode)) {
|
|
2657
|
+
const computedStyle = getComputedStyle$1(currentNode);
|
|
2658
|
+
const currentNodeIsContaining = isContainingBlock(currentNode);
|
|
2659
|
+
if (!currentNodeIsContaining && computedStyle.position === 'fixed') {
|
|
2660
|
+
currentContainingBlockComputedStyle = null;
|
|
2661
|
+
}
|
|
2662
|
+
const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && (currentContainingBlockComputedStyle.position === 'absolute' || currentContainingBlockComputedStyle.position === 'fixed') || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
|
|
2663
|
+
if (shouldDropCurrentNode) {
|
|
2664
|
+
// Drop non-containing blocks.
|
|
2665
|
+
result = result.filter(ancestor => ancestor !== currentNode);
|
|
2666
|
+
} else {
|
|
2667
|
+
// Record last containing block for next iteration.
|
|
2668
|
+
currentContainingBlockComputedStyle = computedStyle;
|
|
2669
|
+
}
|
|
2670
|
+
currentNode = getParentNode(currentNode);
|
|
2671
|
+
}
|
|
2672
|
+
cache.set(element, result);
|
|
2673
|
+
return result;
|
|
2674
|
+
}
|
|
2675
|
+
|
|
2676
|
+
// Gets the maximum area that the element is visible in due to any number of
|
|
2677
|
+
// clipping ancestors.
|
|
2678
|
+
function getClippingRect(_ref) {
|
|
2679
|
+
let {
|
|
2680
|
+
element,
|
|
2681
|
+
boundary,
|
|
2682
|
+
rootBoundary,
|
|
2683
|
+
strategy
|
|
2684
|
+
} = _ref;
|
|
2685
|
+
const elementClippingAncestors = boundary === 'clippingAncestors' ? isTopLayer(element) ? [] : getClippingElementAncestors(element, this._c) : [].concat(boundary);
|
|
2686
|
+
const clippingAncestors = [...elementClippingAncestors, rootBoundary];
|
|
2687
|
+
const firstRect = getClientRectFromClippingAncestor(element, clippingAncestors[0], strategy);
|
|
2688
|
+
let top = firstRect.top;
|
|
2689
|
+
let right = firstRect.right;
|
|
2690
|
+
let bottom = firstRect.bottom;
|
|
2691
|
+
let left = firstRect.left;
|
|
2692
|
+
for (let i = 1; i < clippingAncestors.length; i++) {
|
|
2693
|
+
const rect = getClientRectFromClippingAncestor(element, clippingAncestors[i], strategy);
|
|
2694
|
+
top = max(rect.top, top);
|
|
2695
|
+
right = min(rect.right, right);
|
|
2696
|
+
bottom = min(rect.bottom, bottom);
|
|
2697
|
+
left = max(rect.left, left);
|
|
2698
|
+
}
|
|
2699
|
+
return {
|
|
2700
|
+
width: right - left,
|
|
2701
|
+
height: bottom - top,
|
|
2702
|
+
x: left,
|
|
2703
|
+
y: top
|
|
2704
|
+
};
|
|
2705
|
+
}
|
|
2706
|
+
|
|
2707
|
+
function getDimensions(element) {
|
|
2708
|
+
const {
|
|
2709
|
+
width,
|
|
2710
|
+
height
|
|
2711
|
+
} = getCssDimensions(element);
|
|
2712
|
+
return {
|
|
2713
|
+
width,
|
|
2714
|
+
height
|
|
2715
|
+
};
|
|
2716
|
+
}
|
|
2717
|
+
|
|
2718
|
+
function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
|
|
2719
|
+
const isOffsetParentAnElement = isHTMLElement(offsetParent);
|
|
2720
|
+
const documentElement = getDocumentElement(offsetParent);
|
|
2721
|
+
const isFixed = strategy === 'fixed';
|
|
2722
|
+
const rect = getBoundingClientRect(element, true, isFixed, offsetParent);
|
|
2723
|
+
let scroll = {
|
|
2724
|
+
scrollLeft: 0,
|
|
2725
|
+
scrollTop: 0
|
|
2726
|
+
};
|
|
2727
|
+
const offsets = createCoords(0);
|
|
2728
|
+
|
|
2729
|
+
// If the <body> scrollbar appears on the left (e.g. RTL systems). Use
|
|
2730
|
+
// Firefox with layout.scrollbar.side = 3 in about:config to test this.
|
|
2731
|
+
function setLeftRTLScrollbarOffset() {
|
|
2732
|
+
offsets.x = getWindowScrollBarX(documentElement);
|
|
2733
|
+
}
|
|
2734
|
+
if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
|
|
2735
|
+
if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
|
|
2736
|
+
scroll = getNodeScroll(offsetParent);
|
|
2737
|
+
}
|
|
2738
|
+
if (isOffsetParentAnElement) {
|
|
2739
|
+
const offsetRect = getBoundingClientRect(offsetParent, true, isFixed, offsetParent);
|
|
2740
|
+
offsets.x = offsetRect.x + offsetParent.clientLeft;
|
|
2741
|
+
offsets.y = offsetRect.y + offsetParent.clientTop;
|
|
2742
|
+
} else if (documentElement) {
|
|
2743
|
+
setLeftRTLScrollbarOffset();
|
|
2744
|
+
}
|
|
2745
|
+
}
|
|
2746
|
+
if (isFixed && !isOffsetParentAnElement && documentElement) {
|
|
2747
|
+
setLeftRTLScrollbarOffset();
|
|
2748
|
+
}
|
|
2749
|
+
const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
|
|
2750
|
+
const x = rect.left + scroll.scrollLeft - offsets.x - htmlOffset.x;
|
|
2751
|
+
const y = rect.top + scroll.scrollTop - offsets.y - htmlOffset.y;
|
|
2752
|
+
return {
|
|
2753
|
+
x,
|
|
2754
|
+
y,
|
|
2755
|
+
width: rect.width,
|
|
2756
|
+
height: rect.height
|
|
2757
|
+
};
|
|
2758
|
+
}
|
|
2759
|
+
|
|
2760
|
+
function isStaticPositioned(element) {
|
|
2761
|
+
return getComputedStyle$1(element).position === 'static';
|
|
2762
|
+
}
|
|
2763
|
+
|
|
2764
|
+
function getTrueOffsetParent(element, polyfill) {
|
|
2765
|
+
if (!isHTMLElement(element) || getComputedStyle$1(element).position === 'fixed') {
|
|
2766
|
+
return null;
|
|
2767
|
+
}
|
|
2768
|
+
if (polyfill) {
|
|
2769
|
+
return polyfill(element);
|
|
2770
|
+
}
|
|
2771
|
+
let rawOffsetParent = element.offsetParent;
|
|
2772
|
+
|
|
2773
|
+
// Firefox returns the <html> element as the offsetParent if it's non-static,
|
|
2774
|
+
// while Chrome and Safari return the <body> element. The <body> element must
|
|
2775
|
+
// be used to perform the correct calculations even if the <html> element is
|
|
2776
|
+
// non-static.
|
|
2777
|
+
if (getDocumentElement(element) === rawOffsetParent) {
|
|
2778
|
+
rawOffsetParent = rawOffsetParent.ownerDocument.body;
|
|
2779
|
+
}
|
|
2780
|
+
return rawOffsetParent;
|
|
2781
|
+
}
|
|
2782
|
+
|
|
2783
|
+
// Gets the closest ancestor positioned element. Handles some edge cases,
|
|
2784
|
+
// such as table ancestors and cross browser bugs.
|
|
2785
|
+
function getOffsetParent(element, polyfill) {
|
|
2786
|
+
const win = getWindow(element);
|
|
2787
|
+
if (isTopLayer(element)) {
|
|
2788
|
+
return win;
|
|
2789
|
+
}
|
|
2790
|
+
if (!isHTMLElement(element)) {
|
|
2791
|
+
let svgOffsetParent = getParentNode(element);
|
|
2792
|
+
while (svgOffsetParent && !isLastTraversableNode(svgOffsetParent)) {
|
|
2793
|
+
if (isElement(svgOffsetParent) && !isStaticPositioned(svgOffsetParent)) {
|
|
2794
|
+
return svgOffsetParent;
|
|
2795
|
+
}
|
|
2796
|
+
svgOffsetParent = getParentNode(svgOffsetParent);
|
|
2797
|
+
}
|
|
2798
|
+
return win;
|
|
2799
|
+
}
|
|
2800
|
+
let offsetParent = getTrueOffsetParent(element, polyfill);
|
|
2801
|
+
while (offsetParent && isTableElement(offsetParent) && isStaticPositioned(offsetParent)) {
|
|
2802
|
+
offsetParent = getTrueOffsetParent(offsetParent, polyfill);
|
|
2803
|
+
}
|
|
2804
|
+
if (offsetParent && isLastTraversableNode(offsetParent) && isStaticPositioned(offsetParent) && !isContainingBlock(offsetParent)) {
|
|
2805
|
+
return win;
|
|
2806
|
+
}
|
|
2807
|
+
return offsetParent || getContainingBlock(element) || win;
|
|
2808
|
+
}
|
|
2809
|
+
|
|
2810
|
+
const getElementRects = async function (data) {
|
|
2811
|
+
const getOffsetParentFn = this.getOffsetParent || getOffsetParent;
|
|
2812
|
+
const getDimensionsFn = this.getDimensions;
|
|
2813
|
+
const floatingDimensions = await getDimensionsFn(data.floating);
|
|
2814
|
+
return {
|
|
2815
|
+
reference: getRectRelativeToOffsetParent(data.reference, await getOffsetParentFn(data.floating), data.strategy),
|
|
2816
|
+
floating: {
|
|
2817
|
+
x: 0,
|
|
2818
|
+
y: 0,
|
|
2819
|
+
width: floatingDimensions.width,
|
|
2820
|
+
height: floatingDimensions.height
|
|
2821
|
+
}
|
|
2822
|
+
};
|
|
2823
|
+
};
|
|
2824
|
+
|
|
2825
|
+
function isRTL(element) {
|
|
2826
|
+
return getComputedStyle$1(element).direction === 'rtl';
|
|
2827
|
+
}
|
|
2828
|
+
|
|
2829
|
+
const platform = {
|
|
2830
|
+
convertOffsetParentRelativeRectToViewportRelativeRect,
|
|
2831
|
+
getDocumentElement,
|
|
2832
|
+
getClippingRect,
|
|
2833
|
+
getOffsetParent,
|
|
2834
|
+
getElementRects,
|
|
2835
|
+
getClientRects,
|
|
2836
|
+
getDimensions,
|
|
2837
|
+
getScale,
|
|
2838
|
+
isElement,
|
|
2839
|
+
isRTL
|
|
2840
|
+
};
|
|
2841
|
+
|
|
2842
|
+
function rectsAreEqual(a, b) {
|
|
2843
|
+
return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
|
|
2844
|
+
}
|
|
2845
|
+
|
|
2846
|
+
// https://samthor.au/2021/observing-dom/
|
|
2847
|
+
function observeMove(element, onMove) {
|
|
2848
|
+
let io = null;
|
|
2849
|
+
let timeoutId;
|
|
2850
|
+
const root = getDocumentElement(element);
|
|
2851
|
+
function cleanup() {
|
|
2852
|
+
var _io;
|
|
2853
|
+
clearTimeout(timeoutId);
|
|
2854
|
+
(_io = io) == null || _io.disconnect();
|
|
2855
|
+
io = null;
|
|
2856
|
+
}
|
|
2857
|
+
function refresh(skip, threshold) {
|
|
2858
|
+
if (skip === void 0) {
|
|
2859
|
+
skip = false;
|
|
2860
|
+
}
|
|
2861
|
+
if (threshold === void 0) {
|
|
2862
|
+
threshold = 1;
|
|
2863
|
+
}
|
|
2864
|
+
cleanup();
|
|
2865
|
+
const elementRectForRootMargin = element.getBoundingClientRect();
|
|
2866
|
+
const {
|
|
2867
|
+
left,
|
|
2868
|
+
top,
|
|
2869
|
+
width,
|
|
2870
|
+
height
|
|
2871
|
+
} = elementRectForRootMargin;
|
|
2872
|
+
if (!skip) {
|
|
2873
|
+
onMove();
|
|
2874
|
+
}
|
|
2875
|
+
if (!width || !height) {
|
|
2876
|
+
return;
|
|
2877
|
+
}
|
|
2878
|
+
const insetTop = floor(top);
|
|
2879
|
+
const insetRight = floor(root.clientWidth - (left + width));
|
|
2880
|
+
const insetBottom = floor(root.clientHeight - (top + height));
|
|
2881
|
+
const insetLeft = floor(left);
|
|
2882
|
+
const rootMargin = -insetTop + "px " + -insetRight + "px " + -insetBottom + "px " + -insetLeft + "px";
|
|
2883
|
+
const options = {
|
|
2884
|
+
rootMargin,
|
|
2885
|
+
threshold: max(0, min(1, threshold)) || 1
|
|
2886
|
+
};
|
|
2887
|
+
let isFirstUpdate = true;
|
|
2888
|
+
function handleObserve(entries) {
|
|
2889
|
+
const ratio = entries[0].intersectionRatio;
|
|
2890
|
+
if (ratio !== threshold) {
|
|
2891
|
+
if (!isFirstUpdate) {
|
|
2892
|
+
return refresh();
|
|
2893
|
+
}
|
|
2894
|
+
if (!ratio) {
|
|
2895
|
+
// If the reference is clipped, the ratio is 0. Throttle the refresh
|
|
2896
|
+
// to prevent an infinite loop of updates.
|
|
2897
|
+
timeoutId = setTimeout(() => {
|
|
2898
|
+
refresh(false, 1e-7);
|
|
2899
|
+
}, 1000);
|
|
2900
|
+
} else {
|
|
2901
|
+
refresh(false, ratio);
|
|
2902
|
+
}
|
|
2903
|
+
}
|
|
2904
|
+
if (ratio === 1 && !rectsAreEqual(elementRectForRootMargin, element.getBoundingClientRect())) {
|
|
2905
|
+
// It's possible that even though the ratio is reported as 1, the
|
|
2906
|
+
// element is not actually fully within the IntersectionObserver's root
|
|
2907
|
+
// area anymore. This can happen under performance constraints. This may
|
|
2908
|
+
// be a bug in the browser's IntersectionObserver implementation. To
|
|
2909
|
+
// work around this, we compare the element's bounding rect now with
|
|
2910
|
+
// what it was at the time we created the IntersectionObserver. If they
|
|
2911
|
+
// are not equal then the element moved, so we refresh.
|
|
2912
|
+
refresh();
|
|
2913
|
+
}
|
|
2914
|
+
isFirstUpdate = false;
|
|
2915
|
+
}
|
|
2916
|
+
|
|
2917
|
+
// Older browsers don't support a `document` as the root and will throw an
|
|
2918
|
+
// error.
|
|
2919
|
+
try {
|
|
2920
|
+
io = new IntersectionObserver(handleObserve, {
|
|
2921
|
+
...options,
|
|
2922
|
+
// Handle <iframe>s
|
|
2923
|
+
root: root.ownerDocument
|
|
2924
|
+
});
|
|
2925
|
+
} catch (_e) {
|
|
2926
|
+
io = new IntersectionObserver(handleObserve, options);
|
|
2927
|
+
}
|
|
2928
|
+
io.observe(element);
|
|
2929
|
+
}
|
|
2930
|
+
refresh(true);
|
|
2931
|
+
return cleanup;
|
|
2932
|
+
}
|
|
2933
|
+
|
|
2934
|
+
/**
|
|
2935
|
+
* Automatically updates the position of the floating element when necessary.
|
|
2936
|
+
* Should only be called when the floating element is mounted on the DOM or
|
|
2937
|
+
* visible on the screen.
|
|
2938
|
+
* @returns cleanup function that should be invoked when the floating element is
|
|
2939
|
+
* removed from the DOM or hidden from the screen.
|
|
2940
|
+
* @see https://floating-ui.com/docs/autoUpdate
|
|
2941
|
+
*/
|
|
2942
|
+
function autoUpdate(reference, floating, update, options) {
|
|
2943
|
+
if (options === void 0) {
|
|
2944
|
+
options = {};
|
|
2945
|
+
}
|
|
2946
|
+
const {
|
|
2947
|
+
ancestorScroll = true,
|
|
2948
|
+
ancestorResize = true,
|
|
2949
|
+
elementResize = typeof ResizeObserver === 'function',
|
|
2950
|
+
layoutShift = typeof IntersectionObserver === 'function',
|
|
2951
|
+
animationFrame = false
|
|
2952
|
+
} = options;
|
|
2953
|
+
const referenceEl = unwrapElement(reference);
|
|
2954
|
+
const ancestors = ancestorScroll || ancestorResize ? [...(referenceEl ? getOverflowAncestors(referenceEl) : []), ...(floating ? getOverflowAncestors(floating) : [])] : [];
|
|
2955
|
+
ancestors.forEach(ancestor => {
|
|
2956
|
+
ancestorScroll && ancestor.addEventListener('scroll', update, {
|
|
2957
|
+
passive: true
|
|
2958
|
+
});
|
|
2959
|
+
ancestorResize && ancestor.addEventListener('resize', update);
|
|
2960
|
+
});
|
|
2961
|
+
const cleanupIo = referenceEl && layoutShift ? observeMove(referenceEl, update) : null;
|
|
2962
|
+
let reobserveFrame = -1;
|
|
2963
|
+
let resizeObserver = null;
|
|
2964
|
+
if (elementResize) {
|
|
2965
|
+
resizeObserver = new ResizeObserver(_ref => {
|
|
2966
|
+
let [firstEntry] = _ref;
|
|
2967
|
+
if (firstEntry && firstEntry.target === referenceEl && resizeObserver && floating) {
|
|
2968
|
+
// Prevent update loops when using the `size` middleware.
|
|
2969
|
+
// https://github.com/floating-ui/floating-ui/issues/1740
|
|
2970
|
+
resizeObserver.unobserve(floating);
|
|
2971
|
+
cancelAnimationFrame(reobserveFrame);
|
|
2972
|
+
reobserveFrame = requestAnimationFrame(() => {
|
|
2973
|
+
var _resizeObserver;
|
|
2974
|
+
(_resizeObserver = resizeObserver) == null || _resizeObserver.observe(floating);
|
|
2975
|
+
});
|
|
2976
|
+
}
|
|
2977
|
+
update();
|
|
2978
|
+
});
|
|
2979
|
+
if (referenceEl && !animationFrame) {
|
|
2980
|
+
resizeObserver.observe(referenceEl);
|
|
2981
|
+
}
|
|
2982
|
+
if (floating) {
|
|
2983
|
+
resizeObserver.observe(floating);
|
|
2984
|
+
}
|
|
2985
|
+
}
|
|
2986
|
+
let frameId;
|
|
2987
|
+
let prevRefRect = animationFrame ? getBoundingClientRect(reference) : null;
|
|
2988
|
+
if (animationFrame) {
|
|
2989
|
+
frameLoop();
|
|
2990
|
+
}
|
|
2991
|
+
function frameLoop() {
|
|
2992
|
+
const nextRefRect = getBoundingClientRect(reference);
|
|
2993
|
+
if (prevRefRect && !rectsAreEqual(prevRefRect, nextRefRect)) {
|
|
2994
|
+
update();
|
|
2995
|
+
}
|
|
2996
|
+
prevRefRect = nextRefRect;
|
|
2997
|
+
frameId = requestAnimationFrame(frameLoop);
|
|
2998
|
+
}
|
|
2999
|
+
update();
|
|
3000
|
+
return () => {
|
|
3001
|
+
var _resizeObserver2;
|
|
3002
|
+
ancestors.forEach(ancestor => {
|
|
3003
|
+
ancestorScroll && ancestor.removeEventListener('scroll', update);
|
|
3004
|
+
ancestorResize && ancestor.removeEventListener('resize', update);
|
|
3005
|
+
});
|
|
3006
|
+
cleanupIo == null || cleanupIo();
|
|
3007
|
+
(_resizeObserver2 = resizeObserver) == null || _resizeObserver2.disconnect();
|
|
3008
|
+
resizeObserver = null;
|
|
3009
|
+
if (animationFrame) {
|
|
3010
|
+
cancelAnimationFrame(frameId);
|
|
3011
|
+
}
|
|
3012
|
+
};
|
|
3013
|
+
}
|
|
3014
|
+
|
|
3015
|
+
/**
|
|
3016
|
+
* Modifies the placement by translating the floating element along the
|
|
3017
|
+
* specified axes.
|
|
3018
|
+
* A number (shorthand for `mainAxis` or distance), or an axes configuration
|
|
3019
|
+
* object may be passed.
|
|
3020
|
+
* @see https://floating-ui.com/docs/offset
|
|
3021
|
+
*/
|
|
3022
|
+
const offset$1 = offset$2;
|
|
3023
|
+
|
|
3024
|
+
/**
|
|
3025
|
+
* Optimizes the visibility of the floating element by choosing the placement
|
|
3026
|
+
* that has the most space available automatically, without needing to specify a
|
|
3027
|
+
* preferred placement. Alternative to `flip`.
|
|
3028
|
+
* @see https://floating-ui.com/docs/autoPlacement
|
|
3029
|
+
*/
|
|
3030
|
+
const autoPlacement$1 = autoPlacement$2;
|
|
3031
|
+
|
|
3032
|
+
/**
|
|
3033
|
+
* Optimizes the visibility of the floating element by shifting it in order to
|
|
3034
|
+
* keep it in view when it will overflow the clipping boundary.
|
|
3035
|
+
* @see https://floating-ui.com/docs/shift
|
|
3036
|
+
*/
|
|
3037
|
+
const shift$1 = shift$2;
|
|
3038
|
+
|
|
3039
|
+
/**
|
|
3040
|
+
* Optimizes the visibility of the floating element by flipping the `placement`
|
|
3041
|
+
* in order to keep it in view when the preferred placement(s) will overflow the
|
|
3042
|
+
* clipping boundary. Alternative to `autoPlacement`.
|
|
3043
|
+
* @see https://floating-ui.com/docs/flip
|
|
3044
|
+
*/
|
|
3045
|
+
const flip$1 = flip$2;
|
|
3046
|
+
|
|
3047
|
+
/**
|
|
3048
|
+
* Provides data that allows you to change the size of the floating element —
|
|
3049
|
+
* for instance, prevent it from overflowing the clipping boundary or match the
|
|
3050
|
+
* width of the reference element.
|
|
3051
|
+
* @see https://floating-ui.com/docs/size
|
|
3052
|
+
*/
|
|
3053
|
+
const size$1 = size$2;
|
|
3054
|
+
|
|
3055
|
+
/**
|
|
3056
|
+
* Provides data to hide the floating element in applicable situations, such as
|
|
3057
|
+
* when it is not in the same clipping context as the reference element.
|
|
3058
|
+
* @see https://floating-ui.com/docs/hide
|
|
3059
|
+
*/
|
|
3060
|
+
const hide$1 = hide$2;
|
|
3061
|
+
|
|
3062
|
+
/**
|
|
3063
|
+
* Provides data to position an inner element of the floating element so that it
|
|
3064
|
+
* appears centered to the reference element.
|
|
3065
|
+
* @see https://floating-ui.com/docs/arrow
|
|
3066
|
+
*/
|
|
3067
|
+
const arrow$2 = arrow$3;
|
|
3068
|
+
|
|
3069
|
+
/**
|
|
3070
|
+
* Built-in `limiter` that will stop `shift()` at a certain point.
|
|
3071
|
+
*/
|
|
3072
|
+
const limitShift$1 = limitShift$2;
|
|
3073
|
+
|
|
3074
|
+
/**
|
|
3075
|
+
* Computes the `x` and `y` coordinates that will place the floating element
|
|
3076
|
+
* next to a given reference element.
|
|
3077
|
+
*/
|
|
3078
|
+
const computePosition = (reference, floating, options) => {
|
|
3079
|
+
// This caches the expensive `getClippingElementAncestors` function so that
|
|
3080
|
+
// multiple lifecycle resets re-use the same result. It only lives for a
|
|
3081
|
+
// single call. If other functions become expensive, we can add them as well.
|
|
3082
|
+
const cache = new Map();
|
|
3083
|
+
const mergedOptions = {
|
|
3084
|
+
platform,
|
|
3085
|
+
...options
|
|
3086
|
+
};
|
|
3087
|
+
const platformWithCache = {
|
|
3088
|
+
...mergedOptions.platform,
|
|
3089
|
+
_c: cache
|
|
3090
|
+
};
|
|
3091
|
+
return computePosition$1(reference, floating, {
|
|
3092
|
+
...mergedOptions,
|
|
3093
|
+
platform: platformWithCache
|
|
3094
|
+
});
|
|
3095
|
+
};
|
|
3096
|
+
|
|
3097
|
+
var isClient = typeof document !== 'undefined';
|
|
3098
|
+
|
|
3099
|
+
var noop = function noop() {};
|
|
3100
|
+
var index = isClient ? React.useLayoutEffect : noop;
|
|
3101
|
+
|
|
3102
|
+
// Fork of `fast-deep-equal` that only does the comparisons we need and compares
|
|
3103
|
+
// functions
|
|
3104
|
+
function deepEqual(a, b) {
|
|
3105
|
+
if (a === b) {
|
|
3106
|
+
return true;
|
|
3107
|
+
}
|
|
3108
|
+
if (typeof a !== typeof b) {
|
|
3109
|
+
return false;
|
|
3110
|
+
}
|
|
3111
|
+
if (typeof a === 'function' && a.toString() === b.toString()) {
|
|
3112
|
+
return true;
|
|
3113
|
+
}
|
|
3114
|
+
let length;
|
|
3115
|
+
let i;
|
|
3116
|
+
let keys;
|
|
3117
|
+
if (a && b && typeof a === 'object') {
|
|
3118
|
+
if (Array.isArray(a)) {
|
|
3119
|
+
length = a.length;
|
|
3120
|
+
if (length !== b.length) return false;
|
|
3121
|
+
for (i = length; i-- !== 0;) {
|
|
3122
|
+
if (!deepEqual(a[i], b[i])) {
|
|
3123
|
+
return false;
|
|
3124
|
+
}
|
|
1006
3125
|
}
|
|
3126
|
+
return true;
|
|
1007
3127
|
}
|
|
1008
|
-
|
|
1009
|
-
|
|
1010
|
-
|
|
3128
|
+
keys = Object.keys(a);
|
|
3129
|
+
length = keys.length;
|
|
3130
|
+
if (length !== Object.keys(b).length) {
|
|
3131
|
+
return false;
|
|
1011
3132
|
}
|
|
1012
|
-
|
|
1013
|
-
|
|
1014
|
-
|
|
1015
|
-
for (let j = 0; j < height; j++) {
|
|
1016
|
-
targetCells.push(startIndex + i + j * cols);
|
|
1017
|
-
}
|
|
1018
|
-
}
|
|
1019
|
-
if (startIndex % cols + width <= cols && targetCells.every(cell => cellMap[cell] == null)) {
|
|
1020
|
-
targetCells.forEach(cell => {
|
|
1021
|
-
cellMap[cell] = index;
|
|
1022
|
-
});
|
|
1023
|
-
itemPlaced = true;
|
|
1024
|
-
} else {
|
|
1025
|
-
startIndex++;
|
|
3133
|
+
for (i = length; i-- !== 0;) {
|
|
3134
|
+
if (!{}.hasOwnProperty.call(b, keys[i])) {
|
|
3135
|
+
return false;
|
|
1026
3136
|
}
|
|
1027
3137
|
}
|
|
1028
|
-
|
|
1029
|
-
|
|
1030
|
-
|
|
1031
|
-
|
|
1032
|
-
}
|
|
1033
|
-
|
|
1034
|
-
/** Gets cell index of an item's corner or -1 when index is -1. */
|
|
1035
|
-
function getGridCellIndexOfCorner(index, sizes, cellMap, cols, corner) {
|
|
1036
|
-
if (index === -1) return -1;
|
|
1037
|
-
const firstCellIndex = cellMap.indexOf(index);
|
|
1038
|
-
const sizeItem = sizes[index];
|
|
1039
|
-
switch (corner) {
|
|
1040
|
-
case 'tl':
|
|
1041
|
-
return firstCellIndex;
|
|
1042
|
-
case 'tr':
|
|
1043
|
-
if (!sizeItem) {
|
|
1044
|
-
return firstCellIndex;
|
|
3138
|
+
for (i = length; i-- !== 0;) {
|
|
3139
|
+
const key = keys[i];
|
|
3140
|
+
if (key === '_owner' && a.$$typeof) {
|
|
3141
|
+
continue;
|
|
1045
3142
|
}
|
|
1046
|
-
|
|
1047
|
-
|
|
1048
|
-
if (!sizeItem) {
|
|
1049
|
-
return firstCellIndex;
|
|
3143
|
+
if (!deepEqual(a[key], b[key])) {
|
|
3144
|
+
return false;
|
|
1050
3145
|
}
|
|
1051
|
-
|
|
1052
|
-
|
|
1053
|
-
return cellMap.lastIndexOf(index);
|
|
3146
|
+
}
|
|
3147
|
+
return true;
|
|
1054
3148
|
}
|
|
3149
|
+
return a !== a && b !== b;
|
|
1055
3150
|
}
|
|
1056
3151
|
|
|
1057
|
-
|
|
1058
|
-
|
|
1059
|
-
|
|
1060
|
-
}
|
|
1061
|
-
function isListIndexDisabled(listRef, index, disabledIndices) {
|
|
1062
|
-
if (typeof disabledIndices === 'function') {
|
|
1063
|
-
return disabledIndices(index);
|
|
1064
|
-
} else if (disabledIndices) {
|
|
1065
|
-
return disabledIndices.includes(index);
|
|
3152
|
+
function getDPR(element) {
|
|
3153
|
+
if (typeof window === 'undefined') {
|
|
3154
|
+
return 1;
|
|
1066
3155
|
}
|
|
1067
|
-
const
|
|
1068
|
-
return
|
|
3156
|
+
const win = element.ownerDocument.defaultView || window;
|
|
3157
|
+
return win.devicePixelRatio || 1;
|
|
1069
3158
|
}
|
|
1070
3159
|
|
|
1071
|
-
|
|
1072
|
-
|
|
1073
|
-
|
|
1074
|
-
// JSDOM does not support the `tabbable` library. To solve this we can
|
|
1075
|
-
// check if `ResizeObserver` is a real function (not polyfilled), which
|
|
1076
|
-
// determines if the current environment is JSDOM-like.
|
|
1077
|
-
typeof ResizeObserver === 'function' && ResizeObserver.toString().includes('[native code]') ? 'full' : 'none'
|
|
1078
|
-
});
|
|
1079
|
-
function getTabbableIn(container, dir) {
|
|
1080
|
-
const list = tabbable(container, getTabbableOptions());
|
|
1081
|
-
const len = list.length;
|
|
1082
|
-
if (len === 0) return;
|
|
1083
|
-
const active = activeElement(getDocument$1(container));
|
|
1084
|
-
const index = list.indexOf(active);
|
|
1085
|
-
const nextIndex = index === -1 ? dir === 1 ? 0 : len - 1 : index + dir;
|
|
1086
|
-
return list[nextIndex];
|
|
1087
|
-
}
|
|
1088
|
-
function getNextTabbable(referenceElement) {
|
|
1089
|
-
return getTabbableIn(getDocument$1(referenceElement).body, 1) || referenceElement;
|
|
1090
|
-
}
|
|
1091
|
-
function getPreviousTabbable(referenceElement) {
|
|
1092
|
-
return getTabbableIn(getDocument$1(referenceElement).body, -1) || referenceElement;
|
|
1093
|
-
}
|
|
1094
|
-
function isOutsideEvent(event, container) {
|
|
1095
|
-
const containerElement = container || event.currentTarget;
|
|
1096
|
-
const relatedTarget = event.relatedTarget;
|
|
1097
|
-
return !relatedTarget || !contains(containerElement, relatedTarget);
|
|
3160
|
+
function roundByDPR(element, value) {
|
|
3161
|
+
const dpr = getDPR(element);
|
|
3162
|
+
return Math.round(value * dpr) / dpr;
|
|
1098
3163
|
}
|
|
1099
|
-
|
|
1100
|
-
|
|
1101
|
-
|
|
1102
|
-
|
|
1103
|
-
|
|
3164
|
+
|
|
3165
|
+
function useLatestRef(value) {
|
|
3166
|
+
const ref = React__namespace.useRef(value);
|
|
3167
|
+
index(() => {
|
|
3168
|
+
ref.current = value;
|
|
1104
3169
|
});
|
|
3170
|
+
return ref;
|
|
1105
3171
|
}
|
|
1106
|
-
|
|
1107
|
-
|
|
1108
|
-
|
|
1109
|
-
|
|
1110
|
-
|
|
1111
|
-
|
|
1112
|
-
|
|
1113
|
-
|
|
1114
|
-
|
|
1115
|
-
|
|
3172
|
+
|
|
3173
|
+
/**
|
|
3174
|
+
* Provides data to position a floating element.
|
|
3175
|
+
* @see https://floating-ui.com/docs/useFloating
|
|
3176
|
+
*/
|
|
3177
|
+
function useFloating$1(options) {
|
|
3178
|
+
if (options === void 0) {
|
|
3179
|
+
options = {};
|
|
3180
|
+
}
|
|
3181
|
+
const {
|
|
3182
|
+
placement = 'bottom',
|
|
3183
|
+
strategy = 'absolute',
|
|
3184
|
+
middleware = [],
|
|
3185
|
+
platform,
|
|
3186
|
+
elements: {
|
|
3187
|
+
reference: externalReference,
|
|
3188
|
+
floating: externalFloating
|
|
3189
|
+
} = {},
|
|
3190
|
+
transform = true,
|
|
3191
|
+
whileElementsMounted,
|
|
3192
|
+
open
|
|
3193
|
+
} = options;
|
|
3194
|
+
const [data, setData] = React__namespace.useState({
|
|
3195
|
+
x: 0,
|
|
3196
|
+
y: 0,
|
|
3197
|
+
strategy,
|
|
3198
|
+
placement,
|
|
3199
|
+
middlewareData: {},
|
|
3200
|
+
isPositioned: false
|
|
1116
3201
|
});
|
|
3202
|
+
const [latestMiddleware, setLatestMiddleware] = React__namespace.useState(middleware);
|
|
3203
|
+
if (!deepEqual(latestMiddleware, middleware)) {
|
|
3204
|
+
setLatestMiddleware(middleware);
|
|
3205
|
+
}
|
|
3206
|
+
const [_reference, _setReference] = React__namespace.useState(null);
|
|
3207
|
+
const [_floating, _setFloating] = React__namespace.useState(null);
|
|
3208
|
+
const setReference = React__namespace.useCallback(node => {
|
|
3209
|
+
if (node !== referenceRef.current) {
|
|
3210
|
+
referenceRef.current = node;
|
|
3211
|
+
_setReference(node);
|
|
3212
|
+
}
|
|
3213
|
+
}, []);
|
|
3214
|
+
const setFloating = React__namespace.useCallback(node => {
|
|
3215
|
+
if (node !== floatingRef.current) {
|
|
3216
|
+
floatingRef.current = node;
|
|
3217
|
+
_setFloating(node);
|
|
3218
|
+
}
|
|
3219
|
+
}, []);
|
|
3220
|
+
const referenceEl = externalReference || _reference;
|
|
3221
|
+
const floatingEl = externalFloating || _floating;
|
|
3222
|
+
const referenceRef = React__namespace.useRef(null);
|
|
3223
|
+
const floatingRef = React__namespace.useRef(null);
|
|
3224
|
+
const dataRef = React__namespace.useRef(data);
|
|
3225
|
+
const hasWhileElementsMounted = whileElementsMounted != null;
|
|
3226
|
+
const whileElementsMountedRef = useLatestRef(whileElementsMounted);
|
|
3227
|
+
const platformRef = useLatestRef(platform);
|
|
3228
|
+
const openRef = useLatestRef(open);
|
|
3229
|
+
const update = React__namespace.useCallback(() => {
|
|
3230
|
+
if (!referenceRef.current || !floatingRef.current) {
|
|
3231
|
+
return;
|
|
3232
|
+
}
|
|
3233
|
+
const config = {
|
|
3234
|
+
placement,
|
|
3235
|
+
strategy,
|
|
3236
|
+
middleware: latestMiddleware
|
|
3237
|
+
};
|
|
3238
|
+
if (platformRef.current) {
|
|
3239
|
+
config.platform = platformRef.current;
|
|
3240
|
+
}
|
|
3241
|
+
computePosition(referenceRef.current, floatingRef.current, config).then(data => {
|
|
3242
|
+
const fullData = {
|
|
3243
|
+
...data,
|
|
3244
|
+
// The floating element's position may be recomputed while it's closed
|
|
3245
|
+
// but still mounted (such as when transitioning out). To ensure
|
|
3246
|
+
// `isPositioned` will be `false` initially on the next open, avoid
|
|
3247
|
+
// setting it to `true` when `open === false` (must be specified).
|
|
3248
|
+
isPositioned: openRef.current !== false
|
|
3249
|
+
};
|
|
3250
|
+
if (isMountedRef.current && !deepEqual(dataRef.current, fullData)) {
|
|
3251
|
+
dataRef.current = fullData;
|
|
3252
|
+
ReactDOM__namespace.flushSync(() => {
|
|
3253
|
+
setData(fullData);
|
|
3254
|
+
});
|
|
3255
|
+
}
|
|
3256
|
+
});
|
|
3257
|
+
}, [latestMiddleware, placement, strategy, platformRef, openRef]);
|
|
3258
|
+
index(() => {
|
|
3259
|
+
if (open === false && dataRef.current.isPositioned) {
|
|
3260
|
+
dataRef.current.isPositioned = false;
|
|
3261
|
+
setData(data => ({
|
|
3262
|
+
...data,
|
|
3263
|
+
isPositioned: false
|
|
3264
|
+
}));
|
|
3265
|
+
}
|
|
3266
|
+
}, [open]);
|
|
3267
|
+
const isMountedRef = React__namespace.useRef(false);
|
|
3268
|
+
index(() => {
|
|
3269
|
+
isMountedRef.current = true;
|
|
3270
|
+
return () => {
|
|
3271
|
+
isMountedRef.current = false;
|
|
3272
|
+
};
|
|
3273
|
+
}, []);
|
|
3274
|
+
index(() => {
|
|
3275
|
+
if (referenceEl) referenceRef.current = referenceEl;
|
|
3276
|
+
if (floatingEl) floatingRef.current = floatingEl;
|
|
3277
|
+
if (referenceEl && floatingEl) {
|
|
3278
|
+
if (whileElementsMountedRef.current) {
|
|
3279
|
+
return whileElementsMountedRef.current(referenceEl, floatingEl, update);
|
|
3280
|
+
}
|
|
3281
|
+
update();
|
|
3282
|
+
}
|
|
3283
|
+
}, [referenceEl, floatingEl, update, whileElementsMountedRef, hasWhileElementsMounted]);
|
|
3284
|
+
const refs = React__namespace.useMemo(() => ({
|
|
3285
|
+
reference: referenceRef,
|
|
3286
|
+
floating: floatingRef,
|
|
3287
|
+
setReference,
|
|
3288
|
+
setFloating
|
|
3289
|
+
}), [setReference, setFloating]);
|
|
3290
|
+
const elements = React__namespace.useMemo(() => ({
|
|
3291
|
+
reference: referenceEl,
|
|
3292
|
+
floating: floatingEl
|
|
3293
|
+
}), [referenceEl, floatingEl]);
|
|
3294
|
+
const floatingStyles = React__namespace.useMemo(() => {
|
|
3295
|
+
const initialStyles = {
|
|
3296
|
+
position: strategy,
|
|
3297
|
+
left: 0,
|
|
3298
|
+
top: 0
|
|
3299
|
+
};
|
|
3300
|
+
if (!elements.floating) {
|
|
3301
|
+
return initialStyles;
|
|
3302
|
+
}
|
|
3303
|
+
const x = roundByDPR(elements.floating, data.x);
|
|
3304
|
+
const y = roundByDPR(elements.floating, data.y);
|
|
3305
|
+
if (transform) {
|
|
3306
|
+
return {
|
|
3307
|
+
...initialStyles,
|
|
3308
|
+
transform: "translate(" + x + "px, " + y + "px)",
|
|
3309
|
+
...(getDPR(elements.floating) >= 1.5 && {
|
|
3310
|
+
willChange: 'transform'
|
|
3311
|
+
})
|
|
3312
|
+
};
|
|
3313
|
+
}
|
|
3314
|
+
return {
|
|
3315
|
+
position: strategy,
|
|
3316
|
+
left: x,
|
|
3317
|
+
top: y
|
|
3318
|
+
};
|
|
3319
|
+
}, [strategy, transform, elements.floating, data.x, data.y]);
|
|
3320
|
+
return React__namespace.useMemo(() => ({
|
|
3321
|
+
...data,
|
|
3322
|
+
update,
|
|
3323
|
+
refs,
|
|
3324
|
+
elements,
|
|
3325
|
+
floatingStyles
|
|
3326
|
+
}), [data, update, refs, elements, floatingStyles]);
|
|
1117
3327
|
}
|
|
1118
3328
|
|
|
3329
|
+
/**
|
|
3330
|
+
* Provides data to position an inner element of the floating element so that it
|
|
3331
|
+
* appears centered to the reference element.
|
|
3332
|
+
* This wraps the core `arrow` middleware to allow React refs as the element.
|
|
3333
|
+
* @see https://floating-ui.com/docs/arrow
|
|
3334
|
+
*/
|
|
3335
|
+
const arrow$1 = options => {
|
|
3336
|
+
function isRef(value) {
|
|
3337
|
+
return {}.hasOwnProperty.call(value, 'current');
|
|
3338
|
+
}
|
|
3339
|
+
return {
|
|
3340
|
+
name: 'arrow',
|
|
3341
|
+
options,
|
|
3342
|
+
fn(state) {
|
|
3343
|
+
const {
|
|
3344
|
+
element,
|
|
3345
|
+
padding
|
|
3346
|
+
} = typeof options === 'function' ? options(state) : options;
|
|
3347
|
+
if (element && isRef(element)) {
|
|
3348
|
+
if (element.current != null) {
|
|
3349
|
+
return arrow$2({
|
|
3350
|
+
element: element.current,
|
|
3351
|
+
padding
|
|
3352
|
+
}).fn(state);
|
|
3353
|
+
}
|
|
3354
|
+
return {};
|
|
3355
|
+
}
|
|
3356
|
+
if (element) {
|
|
3357
|
+
return arrow$2({
|
|
3358
|
+
element,
|
|
3359
|
+
padding
|
|
3360
|
+
}).fn(state);
|
|
3361
|
+
}
|
|
3362
|
+
return {};
|
|
3363
|
+
}
|
|
3364
|
+
};
|
|
3365
|
+
};
|
|
3366
|
+
|
|
3367
|
+
/**
|
|
3368
|
+
* Modifies the placement by translating the floating element along the
|
|
3369
|
+
* specified axes.
|
|
3370
|
+
* A number (shorthand for `mainAxis` or distance), or an axes configuration
|
|
3371
|
+
* object may be passed.
|
|
3372
|
+
* @see https://floating-ui.com/docs/offset
|
|
3373
|
+
*/
|
|
3374
|
+
const offset = (options, deps) => {
|
|
3375
|
+
const result = offset$1(options);
|
|
3376
|
+
return {
|
|
3377
|
+
name: result.name,
|
|
3378
|
+
fn: result.fn,
|
|
3379
|
+
options: [options, deps]
|
|
3380
|
+
};
|
|
3381
|
+
};
|
|
3382
|
+
|
|
3383
|
+
/**
|
|
3384
|
+
* Optimizes the visibility of the floating element by shifting it in order to
|
|
3385
|
+
* keep it in view when it will overflow the clipping boundary.
|
|
3386
|
+
* @see https://floating-ui.com/docs/shift
|
|
3387
|
+
*/
|
|
3388
|
+
const shift = (options, deps) => {
|
|
3389
|
+
const result = shift$1(options);
|
|
3390
|
+
return {
|
|
3391
|
+
name: result.name,
|
|
3392
|
+
fn: result.fn,
|
|
3393
|
+
options: [options, deps]
|
|
3394
|
+
};
|
|
3395
|
+
};
|
|
3396
|
+
|
|
3397
|
+
/**
|
|
3398
|
+
* Built-in `limiter` that will stop `shift()` at a certain point.
|
|
3399
|
+
*/
|
|
3400
|
+
const limitShift = (options, deps) => {
|
|
3401
|
+
const result = limitShift$1(options);
|
|
3402
|
+
return {
|
|
3403
|
+
fn: result.fn,
|
|
3404
|
+
options: [options, deps]
|
|
3405
|
+
};
|
|
3406
|
+
};
|
|
3407
|
+
|
|
3408
|
+
/**
|
|
3409
|
+
* Optimizes the visibility of the floating element by flipping the `placement`
|
|
3410
|
+
* in order to keep it in view when the preferred placement(s) will overflow the
|
|
3411
|
+
* clipping boundary. Alternative to `autoPlacement`.
|
|
3412
|
+
* @see https://floating-ui.com/docs/flip
|
|
3413
|
+
*/
|
|
3414
|
+
const flip = (options, deps) => {
|
|
3415
|
+
const result = flip$1(options);
|
|
3416
|
+
return {
|
|
3417
|
+
name: result.name,
|
|
3418
|
+
fn: result.fn,
|
|
3419
|
+
options: [options, deps]
|
|
3420
|
+
};
|
|
3421
|
+
};
|
|
3422
|
+
|
|
3423
|
+
/**
|
|
3424
|
+
* Provides data that allows you to change the size of the floating element —
|
|
3425
|
+
* for instance, prevent it from overflowing the clipping boundary or match the
|
|
3426
|
+
* width of the reference element.
|
|
3427
|
+
* @see https://floating-ui.com/docs/size
|
|
3428
|
+
*/
|
|
3429
|
+
const size = (options, deps) => {
|
|
3430
|
+
const result = size$1(options);
|
|
3431
|
+
return {
|
|
3432
|
+
name: result.name,
|
|
3433
|
+
fn: result.fn,
|
|
3434
|
+
options: [options, deps]
|
|
3435
|
+
};
|
|
3436
|
+
};
|
|
3437
|
+
|
|
3438
|
+
/**
|
|
3439
|
+
* Optimizes the visibility of the floating element by choosing the placement
|
|
3440
|
+
* that has the most space available automatically, without needing to specify a
|
|
3441
|
+
* preferred placement. Alternative to `flip`.
|
|
3442
|
+
* @see https://floating-ui.com/docs/autoPlacement
|
|
3443
|
+
*/
|
|
3444
|
+
const autoPlacement = (options, deps) => {
|
|
3445
|
+
const result = autoPlacement$1(options);
|
|
3446
|
+
return {
|
|
3447
|
+
name: result.name,
|
|
3448
|
+
fn: result.fn,
|
|
3449
|
+
options: [options, deps]
|
|
3450
|
+
};
|
|
3451
|
+
};
|
|
3452
|
+
|
|
3453
|
+
/**
|
|
3454
|
+
* Provides data to hide the floating element in applicable situations, such as
|
|
3455
|
+
* when it is not in the same clipping context as the reference element.
|
|
3456
|
+
* @see https://floating-ui.com/docs/hide
|
|
3457
|
+
*/
|
|
3458
|
+
const hide = (options, deps) => {
|
|
3459
|
+
const result = hide$1(options);
|
|
3460
|
+
return {
|
|
3461
|
+
name: result.name,
|
|
3462
|
+
fn: result.fn,
|
|
3463
|
+
options: [options, deps]
|
|
3464
|
+
};
|
|
3465
|
+
};
|
|
3466
|
+
|
|
3467
|
+
/**
|
|
3468
|
+
* Provides data to position an inner element of the floating element so that it
|
|
3469
|
+
* appears centered to the reference element.
|
|
3470
|
+
* This wraps the core `arrow` middleware to allow React refs as the element.
|
|
3471
|
+
* @see https://floating-ui.com/docs/arrow
|
|
3472
|
+
*/
|
|
3473
|
+
const arrow = (options, deps) => {
|
|
3474
|
+
const result = arrow$1(options);
|
|
3475
|
+
return {
|
|
3476
|
+
name: result.name,
|
|
3477
|
+
fn: result.fn,
|
|
3478
|
+
options: [options, deps]
|
|
3479
|
+
};
|
|
3480
|
+
};
|
|
3481
|
+
|
|
1119
3482
|
const FOCUSABLE_ATTRIBUTE = 'data-floating-ui-focusable';
|
|
1120
3483
|
const ACTIVE_KEY = 'active';
|
|
1121
3484
|
const SELECTED_KEY = 'selected';
|
|
@@ -1136,7 +3499,7 @@ const genId = () => // Ensure the id is unique with multiple independent version
|
|
|
1136
3499
|
"floating-ui-" + Math.random().toString(36).slice(2, 6) + count++;
|
|
1137
3500
|
function useFloatingId() {
|
|
1138
3501
|
const [id, setId] = React__namespace.useState(() => serverHandoffComplete ? genId() : undefined);
|
|
1139
|
-
index(() => {
|
|
3502
|
+
index$1(() => {
|
|
1140
3503
|
if (id == null) {
|
|
1141
3504
|
setId(genId());
|
|
1142
3505
|
}
|
|
@@ -1224,9 +3587,9 @@ const FloatingArrow = /*#__PURE__*/React__namespace.forwardRef(function Floating
|
|
|
1224
3587
|
const [isRTL, setIsRTL] = React__namespace.useState(false);
|
|
1225
3588
|
|
|
1226
3589
|
// https://github.com/floating-ui/floating-ui/issues/2932
|
|
1227
|
-
index(() => {
|
|
3590
|
+
index$1(() => {
|
|
1228
3591
|
if (!floating) return;
|
|
1229
|
-
const isRTL =
|
|
3592
|
+
const isRTL = getComputedStyle$1(floating).direction === 'rtl';
|
|
1230
3593
|
if (isRTL) {
|
|
1231
3594
|
setIsRTL(true);
|
|
1232
3595
|
}
|
|
@@ -1347,7 +3710,7 @@ function useFloatingNodeId(customParentId) {
|
|
|
1347
3710
|
const tree = useFloatingTree();
|
|
1348
3711
|
const reactParentId = useFloatingParentNodeId();
|
|
1349
3712
|
const parentId = reactParentId;
|
|
1350
|
-
index(() => {
|
|
3713
|
+
index$1(() => {
|
|
1351
3714
|
if (!id) return;
|
|
1352
3715
|
const node = {
|
|
1353
3716
|
id,
|
|
@@ -1499,7 +3862,7 @@ function applyAttributeToOthers(uncorrectedAvoidElements, body, ariaHidden, iner
|
|
|
1499
3862
|
return;
|
|
1500
3863
|
}
|
|
1501
3864
|
[].forEach.call(parent.children, node => {
|
|
1502
|
-
if (
|
|
3865
|
+
if (getNodeName(node) === 'script') return;
|
|
1503
3866
|
if (elementsToKeep.has(node)) {
|
|
1504
3867
|
deep(node);
|
|
1505
3868
|
} else {
|
|
@@ -1578,7 +3941,7 @@ const HIDDEN_STYLES = {
|
|
|
1578
3941
|
};
|
|
1579
3942
|
const FocusGuard = /*#__PURE__*/React__namespace.forwardRef(function FocusGuard(props, ref) {
|
|
1580
3943
|
const [role, setRole] = React__namespace.useState();
|
|
1581
|
-
index(() => {
|
|
3944
|
+
index$1(() => {
|
|
1582
3945
|
if (isSafari()) {
|
|
1583
3946
|
// Unlike other screen readers such as NVDA and JAWS, the virtual cursor
|
|
1584
3947
|
// on VoiceOver does trigger the onFocus event, so we can use the focus
|
|
@@ -1620,7 +3983,7 @@ function useFloatingPortalNode(props) {
|
|
|
1620
3983
|
const portalContext = usePortalContext();
|
|
1621
3984
|
const [portalNode, setPortalNode] = React__namespace.useState(null);
|
|
1622
3985
|
const portalNodeRef = React__namespace.useRef(null);
|
|
1623
|
-
index(() => {
|
|
3986
|
+
index$1(() => {
|
|
1624
3987
|
return () => {
|
|
1625
3988
|
portalNode == null || portalNode.remove();
|
|
1626
3989
|
// Allow the subsequent layout effects to create a new node on updates.
|
|
@@ -1631,7 +3994,7 @@ function useFloatingPortalNode(props) {
|
|
|
1631
3994
|
});
|
|
1632
3995
|
};
|
|
1633
3996
|
}, [portalNode]);
|
|
1634
|
-
index(() => {
|
|
3997
|
+
index$1(() => {
|
|
1635
3998
|
// Wait for the uniqueId to be generated before creating the portal node in
|
|
1636
3999
|
// React <18 (using `useFloatingId` instead of the native `useId`).
|
|
1637
4000
|
// https://github.com/floating-ui/floating-ui/issues/2778
|
|
@@ -1646,14 +4009,14 @@ function useFloatingPortalNode(props) {
|
|
|
1646
4009
|
portalNodeRef.current = subRoot;
|
|
1647
4010
|
setPortalNode(subRoot);
|
|
1648
4011
|
}, [id, uniqueId]);
|
|
1649
|
-
index(() => {
|
|
4012
|
+
index$1(() => {
|
|
1650
4013
|
// Wait for the root to exist before creating the portal node. The root must
|
|
1651
4014
|
// be stored in state, not a ref, for this to work reactively.
|
|
1652
4015
|
if (root === null) return;
|
|
1653
4016
|
if (!uniqueId) return;
|
|
1654
4017
|
if (portalNodeRef.current) return;
|
|
1655
4018
|
let container = root || (portalContext == null ? void 0 : portalContext.portalNode);
|
|
1656
|
-
if (container && !
|
|
4019
|
+
if (container && !isNode(container)) container = container.current;
|
|
1657
4020
|
container = container || document.body;
|
|
1658
4021
|
let idWrapper = null;
|
|
1659
4022
|
if (id) {
|
|
@@ -1801,7 +4164,7 @@ function clearDisconnectedPreviouslyFocusedElements() {
|
|
|
1801
4164
|
}
|
|
1802
4165
|
function addPreviouslyFocusedElement(element) {
|
|
1803
4166
|
clearDisconnectedPreviouslyFocusedElements();
|
|
1804
|
-
if (element &&
|
|
4167
|
+
if (element && getNodeName(element) !== 'body') {
|
|
1805
4168
|
previouslyFocusedElements.push(element);
|
|
1806
4169
|
if (previouslyFocusedElements.length > LIST_LIMIT) {
|
|
1807
4170
|
previouslyFocusedElements = previouslyFocusedElements.slice(-20);
|
|
@@ -1896,9 +4259,9 @@ function FloatingFocusManager(props) {
|
|
|
1896
4259
|
const inertSupported = supportsInert();
|
|
1897
4260
|
const guards = inertSupported ? _guards : true;
|
|
1898
4261
|
const useInert = !guards || inertSupported && outsideElementsInert;
|
|
1899
|
-
const orderRef = useLatestRef(order);
|
|
1900
|
-
const initialFocusRef = useLatestRef(initialFocus);
|
|
1901
|
-
const returnFocusRef = useLatestRef(returnFocus);
|
|
4262
|
+
const orderRef = useLatestRef$1(order);
|
|
4263
|
+
const initialFocusRef = useLatestRef$1(initialFocus);
|
|
4264
|
+
const returnFocusRef = useLatestRef$1(returnFocus);
|
|
1902
4265
|
const tree = useFloatingTree();
|
|
1903
4266
|
const portalContext = usePortalContext();
|
|
1904
4267
|
const startDismissButtonRef = React__namespace.useRef(null);
|
|
@@ -2007,13 +4370,13 @@ function FloatingFocusManager(props) {
|
|
|
2007
4370
|
if (restoreFocus && currentTarget !== domReference && !(target != null && target.isConnected) && activeElement(getDocument$1(floatingFocusElement)) === getDocument$1(floatingFocusElement).body) {
|
|
2008
4371
|
// Let `FloatingPortal` effect knows that focus is still inside the
|
|
2009
4372
|
// floating tree.
|
|
2010
|
-
if (
|
|
4373
|
+
if (isHTMLElement(floatingFocusElement)) {
|
|
2011
4374
|
floatingFocusElement.focus();
|
|
2012
4375
|
}
|
|
2013
4376
|
const prevTabbableIndex = tabbableIndexRef.current;
|
|
2014
4377
|
const tabbableContent = getTabbableContent();
|
|
2015
4378
|
const nodeToFocus = tabbableContent[prevTabbableIndex] || tabbableContent[tabbableContent.length - 1] || floatingFocusElement;
|
|
2016
|
-
if (
|
|
4379
|
+
if (isHTMLElement(nodeToFocus)) {
|
|
2017
4380
|
nodeToFocus.focus();
|
|
2018
4381
|
}
|
|
2019
4382
|
}
|
|
@@ -2042,7 +4405,7 @@ function FloatingFocusManager(props) {
|
|
|
2042
4405
|
dataRef.current.insideReactTree = false;
|
|
2043
4406
|
});
|
|
2044
4407
|
}
|
|
2045
|
-
if (floating &&
|
|
4408
|
+
if (floating && isHTMLElement(domReference)) {
|
|
2046
4409
|
domReference.addEventListener('focusout', handleFocusOutside);
|
|
2047
4410
|
domReference.addEventListener('pointerdown', handlePointerDown);
|
|
2048
4411
|
floating.addEventListener('focusout', handleFocusOutside);
|
|
@@ -2081,8 +4444,8 @@ function FloatingFocusManager(props) {
|
|
|
2081
4444
|
cleanup();
|
|
2082
4445
|
};
|
|
2083
4446
|
}, [disabled, domReference, floating, modal, orderRef, portalContext, isUntrappedTypeableCombobox, guards, useInert, tree, getNodeId, getInsideElements]);
|
|
2084
|
-
index(() => {
|
|
2085
|
-
if (disabled || !
|
|
4447
|
+
index$1(() => {
|
|
4448
|
+
if (disabled || !isHTMLElement(floatingFocusElement)) return;
|
|
2086
4449
|
const doc = getDocument$1(floatingFocusElement);
|
|
2087
4450
|
const previouslyFocusedElement = activeElement(doc);
|
|
2088
4451
|
|
|
@@ -2099,7 +4462,7 @@ function FloatingFocusManager(props) {
|
|
|
2099
4462
|
}
|
|
2100
4463
|
});
|
|
2101
4464
|
}, [disabled, open, floatingFocusElement, ignoreInitialFocus, getTabbableElements, initialFocusRef]);
|
|
2102
|
-
index(() => {
|
|
4465
|
+
index$1(() => {
|
|
2103
4466
|
if (disabled || !floatingFocusElement) return;
|
|
2104
4467
|
const doc = getDocument$1(floatingFocusElement);
|
|
2105
4468
|
const previouslyFocusedElement = activeElement(doc);
|
|
@@ -2164,7 +4527,7 @@ function FloatingFocusManager(props) {
|
|
|
2164
4527
|
const tabbableReturnElement = getFirstTabbableElement(returnElement);
|
|
2165
4528
|
if (
|
|
2166
4529
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
2167
|
-
returnFocusRef.current && !preventReturnFocusRef.current &&
|
|
4530
|
+
returnFocusRef.current && !preventReturnFocusRef.current && isHTMLElement(tabbableReturnElement) && (
|
|
2168
4531
|
// If the focus moved somewhere else after mount, avoid returning focus
|
|
2169
4532
|
// since it likely entered a different element which should be
|
|
2170
4533
|
// respected: https://github.com/floating-ui/floating-ui/issues/2607
|
|
@@ -2190,7 +4553,7 @@ function FloatingFocusManager(props) {
|
|
|
2190
4553
|
|
|
2191
4554
|
// Synchronize the `context` & `modal` value to the FloatingPortal context.
|
|
2192
4555
|
// It will decide whether or not it needs to render its own guards.
|
|
2193
|
-
index(() => {
|
|
4556
|
+
index$1(() => {
|
|
2194
4557
|
if (disabled) return;
|
|
2195
4558
|
if (!portalContext) return;
|
|
2196
4559
|
portalContext.setFocusManagerState({
|
|
@@ -2204,7 +4567,7 @@ function FloatingFocusManager(props) {
|
|
|
2204
4567
|
portalContext.setFocusManagerState(null);
|
|
2205
4568
|
};
|
|
2206
4569
|
}, [disabled, portalContext, modal, open, onOpenChange, closeOnFocusOut, domReference]);
|
|
2207
|
-
index(() => {
|
|
4570
|
+
index$1(() => {
|
|
2208
4571
|
if (disabled) return;
|
|
2209
4572
|
if (!floatingFocusElement) return;
|
|
2210
4573
|
handleTabIndex(floatingFocusElement, orderRef);
|
|
@@ -2326,7 +4689,7 @@ const FloatingOverlay = /*#__PURE__*/React__namespace.forwardRef(function Floati
|
|
|
2326
4689
|
lockScroll = false,
|
|
2327
4690
|
...rest
|
|
2328
4691
|
} = props;
|
|
2329
|
-
index(() => {
|
|
4692
|
+
index$1(() => {
|
|
2330
4693
|
if (!lockScroll) return;
|
|
2331
4694
|
lockCount++;
|
|
2332
4695
|
if (lockCount === 1) {
|
|
@@ -2355,10 +4718,10 @@ const FloatingOverlay = /*#__PURE__*/React__namespace.forwardRef(function Floati
|
|
|
2355
4718
|
});
|
|
2356
4719
|
|
|
2357
4720
|
function isButtonTarget(event) {
|
|
2358
|
-
return
|
|
4721
|
+
return isHTMLElement(event.target) && event.target.tagName === 'BUTTON';
|
|
2359
4722
|
}
|
|
2360
4723
|
function isAnchorTarget(event) {
|
|
2361
|
-
return
|
|
4724
|
+
return isHTMLElement(event.target) && event.target.tagName === 'A';
|
|
2362
4725
|
}
|
|
2363
4726
|
function isSpaceIgnored(element) {
|
|
2364
4727
|
return isTypeableElement(element);
|
|
@@ -2583,10 +4946,10 @@ function useDismiss(context, props) {
|
|
|
2583
4946
|
const target = getTarget(event);
|
|
2584
4947
|
const inertSelector = "[" + createAttribute('inert') + "]";
|
|
2585
4948
|
const markers = getDocument$1(elements.floating).querySelectorAll(inertSelector);
|
|
2586
|
-
let targetRootAncestor =
|
|
2587
|
-
while (targetRootAncestor && !
|
|
2588
|
-
const nextParent =
|
|
2589
|
-
if (
|
|
4949
|
+
let targetRootAncestor = isElement(target) ? target : null;
|
|
4950
|
+
while (targetRootAncestor && !isLastTraversableNode(targetRootAncestor)) {
|
|
4951
|
+
const nextParent = getParentNode(targetRootAncestor);
|
|
4952
|
+
if (isLastTraversableNode(nextParent) || !isElement(nextParent)) {
|
|
2590
4953
|
break;
|
|
2591
4954
|
}
|
|
2592
4955
|
targetRootAncestor = nextParent;
|
|
@@ -2594,7 +4957,7 @@ function useDismiss(context, props) {
|
|
|
2594
4957
|
|
|
2595
4958
|
// Check if the click occurred on a third-party element injected after the
|
|
2596
4959
|
// floating element rendered.
|
|
2597
|
-
if (markers.length &&
|
|
4960
|
+
if (markers.length && isElement(target) && !isRootElement(target) &&
|
|
2598
4961
|
// Clicked on a direct ancestor (e.g. FloatingOverlay).
|
|
2599
4962
|
!contains(target, elements.floating) &&
|
|
2600
4963
|
// If the target root element contains none of the markers, then the
|
|
@@ -2604,9 +4967,9 @@ function useDismiss(context, props) {
|
|
|
2604
4967
|
}
|
|
2605
4968
|
|
|
2606
4969
|
// Check if the click occurred on the scrollbar
|
|
2607
|
-
if (
|
|
2608
|
-
const lastTraversableNode =
|
|
2609
|
-
const style =
|
|
4970
|
+
if (isHTMLElement(target) && floating) {
|
|
4971
|
+
const lastTraversableNode = isLastTraversableNode(target);
|
|
4972
|
+
const style = getComputedStyle$1(target);
|
|
2610
4973
|
const scrollRe = /auto|scroll/;
|
|
2611
4974
|
const isScrollableX = lastTraversableNode || scrollRe.test(style.overflowX);
|
|
2612
4975
|
const isScrollableY = lastTraversableNode || scrollRe.test(style.overflowY);
|
|
@@ -2681,7 +5044,7 @@ function useDismiss(context, props) {
|
|
|
2681
5044
|
},
|
|
2682
5045
|
// 0ms or 1ms don't work in Safari. 5ms appears to consistently work.
|
|
2683
5046
|
// Only apply to WebKit for the test to remain 0ms.
|
|
2684
|
-
|
|
5047
|
+
isWebKit() ? 5 : 0);
|
|
2685
5048
|
}
|
|
2686
5049
|
const doc = getDocument$1(elements.floating);
|
|
2687
5050
|
if (escapeKey) {
|
|
@@ -2692,14 +5055,14 @@ function useDismiss(context, props) {
|
|
|
2692
5055
|
outsidePress && doc.addEventListener(outsidePressEvent, outsidePressCapture ? closeOnPressOutsideCapture : closeOnPressOutside, outsidePressCapture);
|
|
2693
5056
|
let ancestors = [];
|
|
2694
5057
|
if (ancestorScroll) {
|
|
2695
|
-
if (
|
|
2696
|
-
ancestors =
|
|
5058
|
+
if (isElement(elements.domReference)) {
|
|
5059
|
+
ancestors = getOverflowAncestors(elements.domReference);
|
|
2697
5060
|
}
|
|
2698
|
-
if (
|
|
2699
|
-
ancestors = ancestors.concat(
|
|
5061
|
+
if (isElement(elements.floating)) {
|
|
5062
|
+
ancestors = ancestors.concat(getOverflowAncestors(elements.floating));
|
|
2700
5063
|
}
|
|
2701
|
-
if (!
|
|
2702
|
-
ancestors = ancestors.concat(
|
|
5064
|
+
if (!isElement(elements.reference) && elements.reference && elements.reference.contextElement) {
|
|
5065
|
+
ancestors = ancestors.concat(getOverflowAncestors(elements.reference.contextElement));
|
|
2703
5066
|
}
|
|
2704
5067
|
}
|
|
2705
5068
|
|
|
@@ -2772,7 +5135,7 @@ function useFloatingRootContext(options) {
|
|
|
2772
5135
|
const nested = useFloatingParentNodeId() != null;
|
|
2773
5136
|
if (process.env.NODE_ENV !== "production") {
|
|
2774
5137
|
const optionDomReference = elementsProp.reference;
|
|
2775
|
-
if (optionDomReference && !
|
|
5138
|
+
if (optionDomReference && !isElement(optionDomReference)) {
|
|
2776
5139
|
error('Cannot pass a virtual element to the `elements.reference` option,', 'as it must be a real DOM element. Use `refs.setPositionReference()`', 'instead.');
|
|
2777
5140
|
}
|
|
2778
5141
|
}
|
|
@@ -2833,12 +5196,12 @@ function useFloating(options) {
|
|
|
2833
5196
|
const domReference = optionDomReference || _domReference;
|
|
2834
5197
|
const domReferenceRef = React__namespace.useRef(null);
|
|
2835
5198
|
const tree = useFloatingTree();
|
|
2836
|
-
index(() => {
|
|
5199
|
+
index$1(() => {
|
|
2837
5200
|
if (domReference) {
|
|
2838
5201
|
domReferenceRef.current = domReference;
|
|
2839
5202
|
}
|
|
2840
5203
|
}, [domReference]);
|
|
2841
|
-
const position =
|
|
5204
|
+
const position = useFloating$1({
|
|
2842
5205
|
...options,
|
|
2843
5206
|
elements: {
|
|
2844
5207
|
...computedElements,
|
|
@@ -2848,7 +5211,7 @@ function useFloating(options) {
|
|
|
2848
5211
|
}
|
|
2849
5212
|
});
|
|
2850
5213
|
const setPositionReference = React__namespace.useCallback(node => {
|
|
2851
|
-
const computedPositionReference =
|
|
5214
|
+
const computedPositionReference = isElement(node) ? {
|
|
2852
5215
|
getBoundingClientRect: () => node.getBoundingClientRect(),
|
|
2853
5216
|
getClientRects: () => node.getClientRects(),
|
|
2854
5217
|
contextElement: node
|
|
@@ -2859,18 +5222,18 @@ function useFloating(options) {
|
|
|
2859
5222
|
position.refs.setReference(computedPositionReference);
|
|
2860
5223
|
}, [position.refs]);
|
|
2861
5224
|
const setReference = React__namespace.useCallback(node => {
|
|
2862
|
-
if (
|
|
5225
|
+
if (isElement(node) || node === null) {
|
|
2863
5226
|
domReferenceRef.current = node;
|
|
2864
5227
|
setDomReference(node);
|
|
2865
5228
|
}
|
|
2866
5229
|
|
|
2867
5230
|
// Backwards-compatibility for passing a virtual element to `reference`
|
|
2868
5231
|
// after it has set the DOM reference.
|
|
2869
|
-
if (
|
|
5232
|
+
if (isElement(position.refs.reference.current) || position.refs.reference.current === null ||
|
|
2870
5233
|
// Don't allow setting virtual elements using the old technique back to
|
|
2871
5234
|
// `null` to support `positionReference` + an unstable `reference`
|
|
2872
5235
|
// callback ref.
|
|
2873
|
-
node !== null && !
|
|
5236
|
+
node !== null && !isElement(node)) {
|
|
2874
5237
|
position.refs.setReference(node);
|
|
2875
5238
|
}
|
|
2876
5239
|
}, [position.refs]);
|
|
@@ -2891,7 +5254,7 @@ function useFloating(options) {
|
|
|
2891
5254
|
elements,
|
|
2892
5255
|
nodeId
|
|
2893
5256
|
}), [position, refs, elements, nodeId, rootContext]);
|
|
2894
|
-
index(() => {
|
|
5257
|
+
index$1(() => {
|
|
2895
5258
|
rootContext.dataRef.current.floatingContext = context;
|
|
2896
5259
|
const node = tree == null ? void 0 : tree.nodesRef.current.find(node => node.id === nodeId);
|
|
2897
5260
|
if (node) {
|
|
@@ -3074,10 +5437,10 @@ function useListNavigation(context, props) {
|
|
|
3074
5437
|
}
|
|
3075
5438
|
}
|
|
3076
5439
|
const floatingFocusElement = getFloatingFocusElement(elements.floating);
|
|
3077
|
-
const floatingFocusElementRef = useLatestRef(floatingFocusElement);
|
|
5440
|
+
const floatingFocusElementRef = useLatestRef$1(floatingFocusElement);
|
|
3078
5441
|
const parentId = useFloatingParentNodeId();
|
|
3079
5442
|
const tree = useFloatingTree();
|
|
3080
|
-
index(() => {
|
|
5443
|
+
index$1(() => {
|
|
3081
5444
|
context.dataRef.current.orientation = orientation;
|
|
3082
5445
|
}, [context, orientation]);
|
|
3083
5446
|
const onNavigate = useEffectEvent(() => {
|
|
@@ -3093,10 +5456,10 @@ function useListNavigation(context, props) {
|
|
|
3093
5456
|
const previousOpenRef = React__namespace.useRef(open);
|
|
3094
5457
|
const forceSyncFocusRef = React__namespace.useRef(false);
|
|
3095
5458
|
const forceScrollIntoViewRef = React__namespace.useRef(false);
|
|
3096
|
-
const disabledIndicesRef = useLatestRef(disabledIndices);
|
|
3097
|
-
const latestOpenRef = useLatestRef(open);
|
|
3098
|
-
const scrollItemIntoViewRef = useLatestRef(scrollItemIntoView);
|
|
3099
|
-
const selectedIndexRef = useLatestRef(selectedIndex);
|
|
5459
|
+
const disabledIndicesRef = useLatestRef$1(disabledIndices);
|
|
5460
|
+
const latestOpenRef = useLatestRef$1(open);
|
|
5461
|
+
const scrollItemIntoViewRef = useLatestRef$1(scrollItemIntoView);
|
|
5462
|
+
const selectedIndexRef = useLatestRef$1(selectedIndex);
|
|
3100
5463
|
const [activeId, setActiveId] = React__namespace.useState();
|
|
3101
5464
|
const [virtualId, setVirtualId] = React__namespace.useState();
|
|
3102
5465
|
const focusItem = useEffectEvent(() => {
|
|
@@ -3145,7 +5508,7 @@ function useListNavigation(context, props) {
|
|
|
3145
5508
|
|
|
3146
5509
|
// Sync `selectedIndex` to be the `activeIndex` upon opening the floating
|
|
3147
5510
|
// element. Also, reset `activeIndex` upon closing the floating element.
|
|
3148
|
-
index(() => {
|
|
5511
|
+
index$1(() => {
|
|
3149
5512
|
if (!enabled) return;
|
|
3150
5513
|
if (open && elements.floating) {
|
|
3151
5514
|
if (focusItemOnOpenRef.current && selectedIndex != null) {
|
|
@@ -3166,7 +5529,7 @@ function useListNavigation(context, props) {
|
|
|
3166
5529
|
|
|
3167
5530
|
// Sync `activeIndex` to be the focused item while the floating element is
|
|
3168
5531
|
// open.
|
|
3169
|
-
index(() => {
|
|
5532
|
+
index$1(() => {
|
|
3170
5533
|
if (!enabled) return;
|
|
3171
5534
|
if (!open) return;
|
|
3172
5535
|
if (!elements.floating) return;
|
|
@@ -3212,7 +5575,7 @@ function useListNavigation(context, props) {
|
|
|
3212
5575
|
|
|
3213
5576
|
// Ensure the parent floating element has focus when a nested child closes
|
|
3214
5577
|
// to allow arrow key navigation to work after the pointer leaves the child.
|
|
3215
|
-
index(() => {
|
|
5578
|
+
index$1(() => {
|
|
3216
5579
|
var _nodes$find;
|
|
3217
5580
|
if (!enabled || elements.floating || !tree || virtual || !previousMountedRef.current) {
|
|
3218
5581
|
return;
|
|
@@ -3227,7 +5590,7 @@ function useListNavigation(context, props) {
|
|
|
3227
5590
|
});
|
|
3228
5591
|
}
|
|
3229
5592
|
}, [enabled, elements.floating, tree, parentId, virtual]);
|
|
3230
|
-
index(() => {
|
|
5593
|
+
index$1(() => {
|
|
3231
5594
|
if (!enabled) return;
|
|
3232
5595
|
if (!tree) return;
|
|
3233
5596
|
if (!virtual) return;
|
|
@@ -3243,12 +5606,12 @@ function useListNavigation(context, props) {
|
|
|
3243
5606
|
tree.events.off('virtualfocus', handleVirtualFocus);
|
|
3244
5607
|
};
|
|
3245
5608
|
}, [enabled, tree, virtual, parentId, virtualItemRef]);
|
|
3246
|
-
index(() => {
|
|
5609
|
+
index$1(() => {
|
|
3247
5610
|
previousOnNavigateRef.current = onNavigate;
|
|
3248
5611
|
previousOpenRef.current = open;
|
|
3249
5612
|
previousMountedRef.current = !!elements.floating;
|
|
3250
5613
|
});
|
|
3251
|
-
index(() => {
|
|
5614
|
+
index$1(() => {
|
|
3252
5615
|
if (!open) {
|
|
3253
5616
|
keyRef.current = null;
|
|
3254
5617
|
focusItemOnOpenRef.current = focusItemOnOpen;
|
|
@@ -3343,7 +5706,7 @@ function useListNavigation(context, props) {
|
|
|
3343
5706
|
stopEvent(event);
|
|
3344
5707
|
}
|
|
3345
5708
|
onOpenChange(false, event.nativeEvent, 'list-navigation');
|
|
3346
|
-
if (
|
|
5709
|
+
if (isHTMLElement(elements.domReference)) {
|
|
3347
5710
|
if (virtual) {
|
|
3348
5711
|
tree == null || tree.events.emit('virtualfocus', elements.domReference);
|
|
3349
5712
|
} else {
|
|
@@ -3726,7 +6089,7 @@ function useTransitionStatus(context, props) {
|
|
|
3726
6089
|
if (!isMounted && status === 'close') {
|
|
3727
6090
|
setStatus('unmounted');
|
|
3728
6091
|
}
|
|
3729
|
-
index(() => {
|
|
6092
|
+
index$1(() => {
|
|
3730
6093
|
if (!floating) return;
|
|
3731
6094
|
if (open) {
|
|
3732
6095
|
setStatus('initial');
|
|
@@ -3786,11 +6149,11 @@ function useTransitionStyles(context, props) {
|
|
|
3786
6149
|
} = useTransitionStatus(context, {
|
|
3787
6150
|
duration
|
|
3788
6151
|
});
|
|
3789
|
-
const initialRef = useLatestRef(unstable_initial);
|
|
3790
|
-
const openRef = useLatestRef(unstable_open);
|
|
3791
|
-
const closeRef = useLatestRef(unstable_close);
|
|
3792
|
-
const commonRef = useLatestRef(unstable_common);
|
|
3793
|
-
index(() => {
|
|
6152
|
+
const initialRef = useLatestRef$1(unstable_initial);
|
|
6153
|
+
const openRef = useLatestRef$1(unstable_open);
|
|
6154
|
+
const closeRef = useLatestRef$1(unstable_close);
|
|
6155
|
+
const commonRef = useLatestRef$1(unstable_common);
|
|
6156
|
+
index$1(() => {
|
|
3794
6157
|
const initialStyles = execWithArgsOrReturn(initialRef.current, fnArgs);
|
|
3795
6158
|
const closeStyles = execWithArgsOrReturn(closeRef.current, fnArgs);
|
|
3796
6159
|
const commonStyles = execWithArgsOrReturn(commonRef.current, fnArgs);
|
|
@@ -3835,6 +6198,15 @@ exports.FloatingNode = FloatingNode;
|
|
|
3835
6198
|
exports.FloatingOverlay = FloatingOverlay;
|
|
3836
6199
|
exports.FloatingPortal = FloatingPortal;
|
|
3837
6200
|
exports.FloatingTree = FloatingTree;
|
|
6201
|
+
exports.arrow = arrow;
|
|
6202
|
+
exports.autoPlacement = autoPlacement;
|
|
6203
|
+
exports.autoUpdate = autoUpdate;
|
|
6204
|
+
exports.flip = flip;
|
|
6205
|
+
exports.hide = hide;
|
|
6206
|
+
exports.limitShift = limitShift;
|
|
6207
|
+
exports.offset = offset;
|
|
6208
|
+
exports.shift = shift;
|
|
6209
|
+
exports.size = size;
|
|
3838
6210
|
exports.useClick = useClick;
|
|
3839
6211
|
exports.useDismiss = useDismiss;
|
|
3840
6212
|
exports.useFloating = useFloating;
|