@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.
Files changed (178) hide show
  1. package/Combobox.d.ts +1 -0
  2. package/Combobox.js +17 -0
  3. package/dist/Autocomplete/index.cjs +0 -2
  4. package/dist/Autocomplete/index.mjs +0 -2
  5. package/dist/Autocomplete-cjs.js +4 -5
  6. package/dist/Autocomplete-es.js +1 -2
  7. package/dist/Card/index.cjs +2 -2
  8. package/dist/Card/index.mjs +2 -2
  9. package/dist/Chip/index.cjs +0 -2
  10. package/dist/Chip/index.mjs +0 -2
  11. package/dist/Chips/InternalChipDismissible/hooks/index.cjs +0 -2
  12. package/dist/Chips/InternalChipDismissible/hooks/index.mjs +0 -2
  13. package/dist/Chips/InternalChipDismissible/index.cjs +0 -2
  14. package/dist/Chips/InternalChipDismissible/index.mjs +0 -2
  15. package/dist/Chips/index.cjs +0 -2
  16. package/dist/Chips/index.mjs +0 -2
  17. package/dist/Combobox/Combobox.contentSlots.d.ts +5 -0
  18. package/dist/Combobox/Combobox.context.d.ts +34 -0
  19. package/dist/Combobox/Combobox.d.ts +69 -0
  20. package/dist/Combobox/Combobox.footer.d.ts +7 -0
  21. package/dist/Combobox/Combobox.items.d.ts +25 -0
  22. package/dist/Combobox/Combobox.responsive.d.ts +54 -0
  23. package/dist/Combobox/Combobox.selectAll.d.ts +4 -0
  24. package/dist/Combobox/Combobox.slotFactory.d.ts +7 -0
  25. package/dist/Combobox/Combobox.testUtils.d.ts +12 -0
  26. package/dist/Combobox/Combobox.types.d.ts +166 -0
  27. package/dist/Combobox/index.cjs +35 -0
  28. package/dist/Combobox/index.d.ts +2 -0
  29. package/dist/Combobox/index.mjs +29 -0
  30. package/dist/Combobox-cjs.js +675 -0
  31. package/dist/Combobox-es.js +673 -0
  32. package/dist/ComboboxPrimitive-cjs.js +88 -47
  33. package/dist/ComboboxPrimitive-es.js +39 -23
  34. package/dist/{ComboboxChipRemove-cjs.js → ComboboxSeparator-cjs.js} +501 -455
  35. package/dist/{ComboboxChipRemove-es.js → ComboboxSeparator-es.js} +500 -456
  36. package/dist/ConfirmationModal/index.cjs +0 -2
  37. package/dist/ConfirmationModal/index.mjs +0 -2
  38. package/dist/ContentBlock/index.cjs +1 -0
  39. package/dist/ContentBlock/index.mjs +1 -0
  40. package/dist/ContentBlock-cjs.js +2 -18
  41. package/dist/ContentBlock-es.js +1 -17
  42. package/dist/DataDump/index.cjs +2 -2
  43. package/dist/DataDump/index.mjs +2 -2
  44. package/dist/DataList/components/DataListActions/index.cjs +0 -2
  45. package/dist/DataList/components/DataListActions/index.mjs +0 -2
  46. package/dist/DataList/components/DataListBulkActions/index.cjs +0 -2
  47. package/dist/DataList/components/DataListBulkActions/index.mjs +0 -2
  48. package/dist/DataList/components/DataListFilters/components/DataListSort/index.cjs +0 -2
  49. package/dist/DataList/components/DataListFilters/components/DataListSort/index.mjs +0 -2
  50. package/dist/DataList/components/DataListFilters/index.cjs +0 -2
  51. package/dist/DataList/components/DataListFilters/index.mjs +0 -2
  52. package/dist/DataList/components/DataListHeader/index.cjs +0 -2
  53. package/dist/DataList/components/DataListHeader/index.mjs +0 -2
  54. package/dist/DataList/components/DataListItem/index.cjs +0 -2
  55. package/dist/DataList/components/DataListItem/index.mjs +0 -2
  56. package/dist/DataList/components/DataListItemActions/index.cjs +0 -2
  57. package/dist/DataList/components/DataListItemActions/index.mjs +0 -2
  58. package/dist/DataList/components/DataListItemActionsOverflow/index.cjs +0 -2
  59. package/dist/DataList/components/DataListItemActionsOverflow/index.mjs +0 -2
  60. package/dist/DataList/components/DataListItems/index.cjs +0 -2
  61. package/dist/DataList/components/DataListItems/index.mjs +0 -2
  62. package/dist/DataList/components/DataListLayout/index.cjs +0 -2
  63. package/dist/DataList/components/DataListLayout/index.mjs +0 -2
  64. package/dist/DataList/components/DataListLayoutActions/index.cjs +0 -2
  65. package/dist/DataList/components/DataListLayoutActions/index.mjs +0 -2
  66. package/dist/DataList/index.cjs +0 -2
  67. package/dist/DataList/index.mjs +0 -2
  68. package/dist/DatePicker/index.cjs +0 -2
  69. package/dist/DatePicker/index.mjs +0 -2
  70. package/dist/DatePicker-cjs.js +4 -5
  71. package/dist/DatePicker-es.js +1 -2
  72. package/dist/Dialog/index.cjs +2 -2
  73. package/dist/Dialog/index.mjs +2 -2
  74. package/dist/DrawerDescription-cjs.js +268 -99
  75. package/dist/DrawerDescription-es.js +270 -103
  76. package/dist/DrawerTitle-cjs.js +2 -6
  77. package/dist/DrawerTitle-es.js +3 -7
  78. package/dist/FieldDescription-cjs.js +184 -181
  79. package/dist/FieldDescription-es.js +187 -184
  80. package/dist/FilterPicker/components/FilterPickerActivator/index.cjs +0 -2
  81. package/dist/FilterPicker/components/FilterPickerActivator/index.mjs +0 -2
  82. package/dist/FilterPicker/components/FilterPickerContent/index.cjs +0 -2
  83. package/dist/FilterPicker/components/FilterPickerContent/index.mjs +0 -2
  84. package/dist/FilterPicker/components/FilterPickerTrigger/index.cjs +0 -2
  85. package/dist/FilterPicker/components/FilterPickerTrigger/index.mjs +0 -2
  86. package/dist/FilterPicker/index.cjs +0 -2
  87. package/dist/FilterPicker/index.mjs +0 -2
  88. package/dist/FilterPickerContent-cjs.js +4 -5
  89. package/dist/FilterPickerContent-es.js +1 -2
  90. package/dist/FormatFile/index.cjs +0 -2
  91. package/dist/FormatFile/index.mjs +0 -2
  92. package/dist/Gallery/index.cjs +0 -2
  93. package/dist/Gallery/index.mjs +0 -2
  94. package/dist/InputDate/index.cjs +0 -2
  95. package/dist/InputDate/index.mjs +0 -2
  96. package/dist/InputNumber/index.cjs +2 -2
  97. package/dist/InputNumber/index.mjs +2 -2
  98. package/dist/InputNumber/types.d.ts +5 -0
  99. package/dist/InputNumber-cjs.js +2 -2
  100. package/dist/InputNumber-es.js +2 -2
  101. package/dist/LightBox/index.cjs +0 -2
  102. package/dist/LightBox/index.mjs +0 -2
  103. package/dist/Menu/index.cjs +2 -2
  104. package/dist/Menu/index.mjs +2 -2
  105. package/dist/Menu-cjs.js +4 -5
  106. package/dist/Menu-es.js +1 -2
  107. package/dist/MenuSubmenuTrigger-cjs.js +206 -164
  108. package/dist/MenuSubmenuTrigger-es.js +194 -152
  109. package/dist/Modal/index.cjs +0 -2
  110. package/dist/Modal/index.mjs +1 -3
  111. package/dist/NumberFieldInput-cjs.js +187 -308
  112. package/dist/NumberFieldInput-es.js +187 -308
  113. package/dist/Page/index.cjs +2 -2
  114. package/dist/Page/index.mjs +2 -2
  115. package/dist/Popover/index.cjs +0 -2
  116. package/dist/Popover/index.mjs +0 -2
  117. package/dist/Popover-cjs.js +7 -8
  118. package/dist/Popover-es.js +1 -2
  119. package/dist/ScrollAreaViewport-cjs.js +747 -1093
  120. package/dist/ScrollAreaViewport-es.js +734 -1081
  121. package/dist/Select/index.cjs +2 -2
  122. package/dist/Select/index.mjs +2 -2
  123. package/dist/SelectGroupLabel-cjs.js +207 -306
  124. package/dist/SelectGroupLabel-es.js +203 -302
  125. package/dist/SelectPrimitive-cjs.js +11 -17
  126. package/dist/SelectPrimitive-es.js +1 -7
  127. package/dist/Tooltip/index.cjs +0 -2
  128. package/dist/Tooltip/index.mjs +0 -2
  129. package/dist/Tooltip-cjs.js +6 -7
  130. package/dist/Tooltip-es.js +1 -2
  131. package/dist/buttonRenderAdapter-cjs.js +2 -1
  132. package/dist/buttonRenderAdapter-es.js +2 -1
  133. package/dist/dialogReturnFocus-cjs.js +1 -1
  134. package/dist/dialogReturnFocus-es.js +2 -2
  135. package/dist/docs/InputNumber/InputNumber.md +2 -2
  136. package/dist/docs/SelectPrimitive/SelectPrimitive.md +1 -1
  137. package/dist/floating-ui.react-cjs.js +2557 -185
  138. package/dist/floating-ui.react-es.js +2512 -149
  139. package/dist/getMappedBreakpointWidth-cjs.js +21 -0
  140. package/dist/getMappedBreakpointWidth-es.js +18 -0
  141. package/dist/index.cjs +15 -10
  142. package/dist/index.d.mts +1 -0
  143. package/dist/index.d.ts +1 -0
  144. package/dist/index.mjs +14 -10
  145. package/dist/mergeClassName-cjs.js +12 -0
  146. package/dist/mergeClassName-es.js +10 -0
  147. package/dist/primitives/BottomSheet/index.cjs +1 -1
  148. package/dist/primitives/BottomSheet/index.mjs +1 -1
  149. package/dist/primitives/ComboboxPrimitive/ComboboxPrimitive.d.ts +2 -2
  150. package/dist/primitives/ComboboxPrimitive/index.cjs +4 -5
  151. package/dist/primitives/ComboboxPrimitive/index.mjs +4 -5
  152. package/dist/primitives/SelectPrimitive/index.cjs +1 -2
  153. package/dist/primitives/SelectPrimitive/index.mjs +1 -2
  154. package/dist/primitives/index.cjs +3 -3
  155. package/dist/primitives/index.mjs +3 -3
  156. package/dist/scrollEdges-cjs.js +1 -11
  157. package/dist/scrollEdges-es.js +1 -11
  158. package/dist/scrollable-cjs.js +58 -0
  159. package/dist/scrollable-es.js +54 -0
  160. package/dist/styles.css +759 -42
  161. package/dist/unstyledPrimitives/index.cjs +720 -478
  162. package/dist/unstyledPrimitives/index.mjs +663 -421
  163. package/dist/useCompositeListItem-cjs.js +2108 -361
  164. package/dist/useCompositeListItem-es.js +2076 -331
  165. package/dist/useLabel-cjs.js +2 -3
  166. package/dist/useLabel-es.js +2 -3
  167. package/dist/useRenderElement-cjs.js +9 -7
  168. package/dist/useRenderElement-es.js +9 -7
  169. package/dist/useScrollLock-cjs.js +819 -344
  170. package/dist/useScrollLock-es.js +732 -296
  171. package/dist/useScrollToActive-cjs.js +4 -5
  172. package/dist/useScrollToActive-es.js +1 -2
  173. package/dist/utils/meta/meta.json +43 -1
  174. package/package.json +8 -3
  175. package/dist/floating-ui.react-dom-cjs.js +0 -2103
  176. package/dist/floating-ui.react-dom-es.js +0 -2072
  177. package/dist/floating-ui.utils-cjs.js +0 -342
  178. package/dist/floating-ui.utils-es.js +0 -300
@@ -1,2072 +0,0 @@
1
- import { l as getSideAxis, m as getAlignmentAxis, n as getSide, o as getAlignment, p as evaluate, q as getPaddingObject, r as rectToClientRect, s as getOppositePlacement, t as getExpandedPlacements, u as getOppositeAxisPlacements, v as getAlignmentSides, w as clamp, x as min, y as max, z as getAxisLength, A as sides, B as getOppositeAxis, C as placements, D as getOppositeAlignmentPlacement, E as getDocumentElement, b as isElement, i as isHTMLElement, F as createCoords, G as round, H as isTopLayer, g as getNodeName, I as isOverflowElement, J as getNodeScroll, K as getWindow, e as getParentNode, d as isLastTraversableNode, L as isTableElement, M as isContainingBlock, N as getContainingBlock, h as getComputedStyle$1, j as getOverflowAncestors, O as getFrameElement, k as isWebKit, f as floor } from './floating-ui.utils-es.js';
2
- import * as React from 'react';
3
- import { useLayoutEffect } from 'react';
4
- import * as ReactDOM from 'react-dom';
5
-
6
- function computeCoordsFromPlacement(_ref, placement, rtl) {
7
- let {
8
- reference,
9
- floating
10
- } = _ref;
11
- const sideAxis = getSideAxis(placement);
12
- const alignmentAxis = getAlignmentAxis(placement);
13
- const alignLength = getAxisLength(alignmentAxis);
14
- const side = getSide(placement);
15
- const isVertical = sideAxis === 'y';
16
- const commonX = reference.x + reference.width / 2 - floating.width / 2;
17
- const commonY = reference.y + reference.height / 2 - floating.height / 2;
18
- const commonAlign = reference[alignLength] / 2 - floating[alignLength] / 2;
19
- let coords;
20
- switch (side) {
21
- case 'top':
22
- coords = {
23
- x: commonX,
24
- y: reference.y - floating.height
25
- };
26
- break;
27
- case 'bottom':
28
- coords = {
29
- x: commonX,
30
- y: reference.y + reference.height
31
- };
32
- break;
33
- case 'right':
34
- coords = {
35
- x: reference.x + reference.width,
36
- y: commonY
37
- };
38
- break;
39
- case 'left':
40
- coords = {
41
- x: reference.x - floating.width,
42
- y: commonY
43
- };
44
- break;
45
- default:
46
- coords = {
47
- x: reference.x,
48
- y: reference.y
49
- };
50
- }
51
- switch (getAlignment(placement)) {
52
- case 'start':
53
- coords[alignmentAxis] -= commonAlign * (rtl && isVertical ? -1 : 1);
54
- break;
55
- case 'end':
56
- coords[alignmentAxis] += commonAlign * (rtl && isVertical ? -1 : 1);
57
- break;
58
- }
59
- return coords;
60
- }
61
-
62
- /**
63
- * Resolves with an object of overflow side offsets that determine how much the
64
- * element is overflowing a given clipping boundary on each side.
65
- * - positive = overflowing the boundary by that number of pixels
66
- * - negative = how many pixels left before it will overflow
67
- * - 0 = lies flush with the boundary
68
- * @see https://floating-ui.com/docs/detectOverflow
69
- */
70
- async function detectOverflow(state, options) {
71
- var _await$platform$isEle;
72
- if (options === void 0) {
73
- options = {};
74
- }
75
- const {
76
- x,
77
- y,
78
- platform,
79
- rects,
80
- elements,
81
- strategy
82
- } = state;
83
- const {
84
- boundary = 'clippingAncestors',
85
- rootBoundary = 'viewport',
86
- elementContext = 'floating',
87
- altBoundary = false,
88
- padding = 0
89
- } = evaluate(options, state);
90
- const paddingObject = getPaddingObject(padding);
91
- const altContext = elementContext === 'floating' ? 'reference' : 'floating';
92
- const element = elements[altBoundary ? altContext : elementContext];
93
- const clippingClientRect = rectToClientRect(await platform.getClippingRect({
94
- 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))),
95
- boundary,
96
- rootBoundary,
97
- strategy
98
- }));
99
- const rect = elementContext === 'floating' ? {
100
- x,
101
- y,
102
- width: rects.floating.width,
103
- height: rects.floating.height
104
- } : rects.reference;
105
- const offsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating));
106
- const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) ? (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || {
107
- x: 1,
108
- y: 1
109
- } : {
110
- x: 1,
111
- y: 1
112
- };
113
- const elementClientRect = rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({
114
- elements,
115
- rect,
116
- offsetParent,
117
- strategy
118
- }) : rect);
119
- return {
120
- top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
121
- bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
122
- left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
123
- right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
124
- };
125
- }
126
-
127
- // Maximum number of resets that can occur before bailing to avoid infinite reset loops.
128
- const MAX_RESET_COUNT = 50;
129
-
130
- /**
131
- * Computes the `x` and `y` coordinates that will place the floating element
132
- * next to a given reference element.
133
- *
134
- * This export does not have any `platform` interface logic. You will need to
135
- * write one for the platform you are using Floating UI with.
136
- */
137
- const computePosition$1 = async (reference, floating, config) => {
138
- const {
139
- placement = 'bottom',
140
- strategy = 'absolute',
141
- middleware = [],
142
- platform
143
- } = config;
144
- const platformWithDetectOverflow = platform.detectOverflow ? platform : {
145
- ...platform,
146
- detectOverflow
147
- };
148
- const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(floating));
149
- let rects = await platform.getElementRects({
150
- reference,
151
- floating,
152
- strategy
153
- });
154
- let {
155
- x,
156
- y
157
- } = computeCoordsFromPlacement(rects, placement, rtl);
158
- let statefulPlacement = placement;
159
- let resetCount = 0;
160
- const middlewareData = {};
161
- for (let i = 0; i < middleware.length; i++) {
162
- const currentMiddleware = middleware[i];
163
- if (!currentMiddleware) {
164
- continue;
165
- }
166
- const {
167
- name,
168
- fn
169
- } = currentMiddleware;
170
- const {
171
- x: nextX,
172
- y: nextY,
173
- data,
174
- reset
175
- } = await fn({
176
- x,
177
- y,
178
- initialPlacement: placement,
179
- placement: statefulPlacement,
180
- strategy,
181
- middlewareData,
182
- rects,
183
- platform: platformWithDetectOverflow,
184
- elements: {
185
- reference,
186
- floating
187
- }
188
- });
189
- x = nextX != null ? nextX : x;
190
- y = nextY != null ? nextY : y;
191
- middlewareData[name] = {
192
- ...middlewareData[name],
193
- ...data
194
- };
195
- if (reset && resetCount < MAX_RESET_COUNT) {
196
- resetCount++;
197
- if (typeof reset === 'object') {
198
- if (reset.placement) {
199
- statefulPlacement = reset.placement;
200
- }
201
- if (reset.rects) {
202
- rects = reset.rects === true ? await platform.getElementRects({
203
- reference,
204
- floating,
205
- strategy
206
- }) : reset.rects;
207
- }
208
- ({
209
- x,
210
- y
211
- } = computeCoordsFromPlacement(rects, statefulPlacement, rtl));
212
- }
213
- i = -1;
214
- }
215
- }
216
- return {
217
- x,
218
- y,
219
- placement: statefulPlacement,
220
- strategy,
221
- middlewareData
222
- };
223
- };
224
-
225
- /**
226
- * Provides data to position an inner element of the floating element so that it
227
- * appears centered to the reference element.
228
- * @see https://floating-ui.com/docs/arrow
229
- */
230
- const arrow$3 = options => ({
231
- name: 'arrow',
232
- options,
233
- async fn(state) {
234
- const {
235
- x,
236
- y,
237
- placement,
238
- rects,
239
- platform,
240
- elements,
241
- middlewareData
242
- } = state;
243
- // Since `element` is required, we don't Partial<> the type.
244
- const {
245
- element,
246
- padding = 0
247
- } = evaluate(options, state) || {};
248
- if (element == null) {
249
- return {};
250
- }
251
- const paddingObject = getPaddingObject(padding);
252
- const coords = {
253
- x,
254
- y
255
- };
256
- const axis = getAlignmentAxis(placement);
257
- const length = getAxisLength(axis);
258
- const arrowDimensions = await platform.getDimensions(element);
259
- const isYAxis = axis === 'y';
260
- const minProp = isYAxis ? 'top' : 'left';
261
- const maxProp = isYAxis ? 'bottom' : 'right';
262
- const clientProp = isYAxis ? 'clientHeight' : 'clientWidth';
263
- const endDiff = rects.reference[length] + rects.reference[axis] - coords[axis] - rects.floating[length];
264
- const startDiff = coords[axis] - rects.reference[axis];
265
- const arrowOffsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(element));
266
- let clientSize = arrowOffsetParent ? arrowOffsetParent[clientProp] : 0;
267
-
268
- // DOM platform can return `window` as the `offsetParent`.
269
- if (!clientSize || !(await (platform.isElement == null ? void 0 : platform.isElement(arrowOffsetParent)))) {
270
- clientSize = elements.floating[clientProp] || rects.floating[length];
271
- }
272
- const centerToReference = endDiff / 2 - startDiff / 2;
273
-
274
- // If the padding is large enough that it causes the arrow to no longer be
275
- // centered, modify the padding so that it is centered.
276
- const largestPossiblePadding = clientSize / 2 - arrowDimensions[length] / 2 - 1;
277
- const minPadding = min(paddingObject[minProp], largestPossiblePadding);
278
- const maxPadding = min(paddingObject[maxProp], largestPossiblePadding);
279
-
280
- // Make sure the arrow doesn't overflow the floating element if the center
281
- // point is outside the floating element's bounds.
282
- const min$1 = minPadding;
283
- const max = clientSize - arrowDimensions[length] - maxPadding;
284
- const center = clientSize / 2 - arrowDimensions[length] / 2 + centerToReference;
285
- const offset = clamp(min$1, center, max);
286
-
287
- // If the reference is small enough that the arrow's padding causes it to
288
- // to point to nothing for an aligned placement, adjust the offset of the
289
- // floating element itself. To ensure `shift()` continues to take action,
290
- // a single reset is performed when this is true.
291
- const shouldAddOffset = !middlewareData.arrow && getAlignment(placement) != null && center !== offset && rects.reference[length] / 2 - (center < min$1 ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0;
292
- const alignmentOffset = shouldAddOffset ? center < min$1 ? center - min$1 : center - max : 0;
293
- return {
294
- [axis]: coords[axis] + alignmentOffset,
295
- data: {
296
- [axis]: offset,
297
- centerOffset: center - offset - alignmentOffset,
298
- ...(shouldAddOffset && {
299
- alignmentOffset
300
- })
301
- },
302
- reset: shouldAddOffset
303
- };
304
- }
305
- });
306
-
307
- function getPlacementList(alignment, autoAlignment, allowedPlacements) {
308
- const allowedPlacementsSortedByAlignment = alignment ? [...allowedPlacements.filter(placement => getAlignment(placement) === alignment), ...allowedPlacements.filter(placement => getAlignment(placement) !== alignment)] : allowedPlacements.filter(placement => getSide(placement) === placement);
309
- return allowedPlacementsSortedByAlignment.filter(placement => {
310
- if (alignment) {
311
- return getAlignment(placement) === alignment || (autoAlignment ? getOppositeAlignmentPlacement(placement) !== placement : false);
312
- }
313
- return true;
314
- });
315
- }
316
- /**
317
- * Optimizes the visibility of the floating element by choosing the placement
318
- * that has the most space available automatically, without needing to specify a
319
- * preferred placement. Alternative to `flip`.
320
- * @see https://floating-ui.com/docs/autoPlacement
321
- */
322
- const autoPlacement$2 = function (options) {
323
- if (options === void 0) {
324
- options = {};
325
- }
326
- return {
327
- name: 'autoPlacement',
328
- options,
329
- async fn(state) {
330
- var _middlewareData$autoP, _middlewareData$autoP2, _placementsThatFitOnE;
331
- const {
332
- rects,
333
- middlewareData,
334
- placement,
335
- platform,
336
- elements
337
- } = state;
338
- const {
339
- crossAxis = false,
340
- alignment,
341
- allowedPlacements = placements,
342
- autoAlignment = true,
343
- ...detectOverflowOptions
344
- } = evaluate(options, state);
345
- const placements$1 = alignment !== undefined || allowedPlacements === placements ? getPlacementList(alignment || null, autoAlignment, allowedPlacements) : allowedPlacements;
346
- const overflow = await platform.detectOverflow(state, detectOverflowOptions);
347
- const currentIndex = ((_middlewareData$autoP = middlewareData.autoPlacement) == null ? void 0 : _middlewareData$autoP.index) || 0;
348
- const currentPlacement = placements$1[currentIndex];
349
- if (currentPlacement == null) {
350
- return {};
351
- }
352
- const alignmentSides = getAlignmentSides(currentPlacement, rects, await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating)));
353
-
354
- // Make `computeCoords` start from the right place.
355
- if (placement !== currentPlacement) {
356
- return {
357
- reset: {
358
- placement: placements$1[0]
359
- }
360
- };
361
- }
362
- const currentOverflows = [overflow[getSide(currentPlacement)], overflow[alignmentSides[0]], overflow[alignmentSides[1]]];
363
- const allOverflows = [...(((_middlewareData$autoP2 = middlewareData.autoPlacement) == null ? void 0 : _middlewareData$autoP2.overflows) || []), {
364
- placement: currentPlacement,
365
- overflows: currentOverflows
366
- }];
367
- const nextPlacement = placements$1[currentIndex + 1];
368
-
369
- // There are more placements to check.
370
- if (nextPlacement) {
371
- return {
372
- data: {
373
- index: currentIndex + 1,
374
- overflows: allOverflows
375
- },
376
- reset: {
377
- placement: nextPlacement
378
- }
379
- };
380
- }
381
- const placementsSortedByMostSpace = allOverflows.map(d => {
382
- const alignment = getAlignment(d.placement);
383
- return [d.placement, alignment && crossAxis ?
384
- // Check along the mainAxis and main crossAxis side.
385
- d.overflows.slice(0, 2).reduce((acc, v) => acc + v, 0) :
386
- // Check only the mainAxis.
387
- d.overflows[0], d.overflows];
388
- }).sort((a, b) => a[1] - b[1]);
389
- const placementsThatFitOnEachSide = placementsSortedByMostSpace.filter(d => d[2].slice(0,
390
- // Aligned placements should not check their opposite crossAxis
391
- // side.
392
- getAlignment(d[0]) ? 2 : 3).every(v => v <= 0));
393
- const resetPlacement = ((_placementsThatFitOnE = placementsThatFitOnEachSide[0]) == null ? void 0 : _placementsThatFitOnE[0]) || placementsSortedByMostSpace[0][0];
394
- if (resetPlacement !== placement) {
395
- return {
396
- data: {
397
- index: currentIndex + 1,
398
- overflows: allOverflows
399
- },
400
- reset: {
401
- placement: resetPlacement
402
- }
403
- };
404
- }
405
- return {};
406
- }
407
- };
408
- };
409
-
410
- /**
411
- * Optimizes the visibility of the floating element by flipping the `placement`
412
- * in order to keep it in view when the preferred placement(s) will overflow the
413
- * clipping boundary. Alternative to `autoPlacement`.
414
- * @see https://floating-ui.com/docs/flip
415
- */
416
- const flip$2 = function (options) {
417
- if (options === void 0) {
418
- options = {};
419
- }
420
- return {
421
- name: 'flip',
422
- options,
423
- async fn(state) {
424
- var _middlewareData$arrow, _middlewareData$flip;
425
- const {
426
- placement,
427
- middlewareData,
428
- rects,
429
- initialPlacement,
430
- platform,
431
- elements
432
- } = state;
433
- const {
434
- mainAxis: checkMainAxis = true,
435
- crossAxis: checkCrossAxis = true,
436
- fallbackPlacements: specifiedFallbackPlacements,
437
- fallbackStrategy = 'bestFit',
438
- fallbackAxisSideDirection = 'none',
439
- flipAlignment = true,
440
- ...detectOverflowOptions
441
- } = evaluate(options, state);
442
-
443
- // If a reset by the arrow was caused due to an alignment offset being
444
- // added, we should skip any logic now since `flip()` has already done its
445
- // work.
446
- // https://github.com/floating-ui/floating-ui/issues/2549#issuecomment-1719601643
447
- if ((_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
448
- return {};
449
- }
450
- const side = getSide(placement);
451
- const initialSideAxis = getSideAxis(initialPlacement);
452
- const isBasePlacement = getSide(initialPlacement) === initialPlacement;
453
- const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
454
- const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement));
455
- const hasFallbackAxisSideDirection = fallbackAxisSideDirection !== 'none';
456
- if (!specifiedFallbackPlacements && hasFallbackAxisSideDirection) {
457
- fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
458
- }
459
- const placements = [initialPlacement, ...fallbackPlacements];
460
- const overflow = await platform.detectOverflow(state, detectOverflowOptions);
461
- const overflows = [];
462
- let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
463
- if (checkMainAxis) {
464
- overflows.push(overflow[side]);
465
- }
466
- if (checkCrossAxis) {
467
- const sides = getAlignmentSides(placement, rects, rtl);
468
- overflows.push(overflow[sides[0]], overflow[sides[1]]);
469
- }
470
- overflowsData = [...overflowsData, {
471
- placement,
472
- overflows
473
- }];
474
-
475
- // One or more sides is overflowing.
476
- if (!overflows.every(side => side <= 0)) {
477
- var _middlewareData$flip2, _overflowsData$filter;
478
- const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
479
- const nextPlacement = placements[nextIndex];
480
- if (nextPlacement) {
481
- const ignoreCrossAxisOverflow = checkCrossAxis === 'alignment' ? initialSideAxis !== getSideAxis(nextPlacement) : false;
482
- if (!ignoreCrossAxisOverflow ||
483
- // We leave the current main axis only if every placement on that axis
484
- // overflows the main axis.
485
- overflowsData.every(d => getSideAxis(d.placement) === initialSideAxis ? d.overflows[0] > 0 : true)) {
486
- // Try next placement and re-run the lifecycle.
487
- return {
488
- data: {
489
- index: nextIndex,
490
- overflows: overflowsData
491
- },
492
- reset: {
493
- placement: nextPlacement
494
- }
495
- };
496
- }
497
- }
498
-
499
- // First, find the candidates that fit on the mainAxis side of overflow,
500
- // then find the placement that fits the best on the main crossAxis side.
501
- 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;
502
-
503
- // Otherwise fallback.
504
- if (!resetPlacement) {
505
- switch (fallbackStrategy) {
506
- case 'bestFit':
507
- {
508
- var _overflowsData$filter2;
509
- const placement = (_overflowsData$filter2 = overflowsData.filter(d => {
510
- if (hasFallbackAxisSideDirection) {
511
- const currentSideAxis = getSideAxis(d.placement);
512
- return currentSideAxis === initialSideAxis ||
513
- // Create a bias to the `y` side axis due to horizontal
514
- // reading directions favoring greater width.
515
- currentSideAxis === 'y';
516
- }
517
- return true;
518
- }).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];
519
- if (placement) {
520
- resetPlacement = placement;
521
- }
522
- break;
523
- }
524
- case 'initialPlacement':
525
- resetPlacement = initialPlacement;
526
- break;
527
- }
528
- }
529
- if (placement !== resetPlacement) {
530
- return {
531
- reset: {
532
- placement: resetPlacement
533
- }
534
- };
535
- }
536
- }
537
- return {};
538
- }
539
- };
540
- };
541
-
542
- function getSideOffsets(overflow, rect) {
543
- return {
544
- top: overflow.top - rect.height,
545
- right: overflow.right - rect.width,
546
- bottom: overflow.bottom - rect.height,
547
- left: overflow.left - rect.width
548
- };
549
- }
550
- function isAnySideFullyClipped(overflow) {
551
- return sides.some(side => overflow[side] >= 0);
552
- }
553
- /**
554
- * Provides data to hide the floating element in applicable situations, such as
555
- * when it is not in the same clipping context as the reference element.
556
- * @see https://floating-ui.com/docs/hide
557
- */
558
- const hide$2 = function (options) {
559
- if (options === void 0) {
560
- options = {};
561
- }
562
- return {
563
- name: 'hide',
564
- options,
565
- async fn(state) {
566
- const {
567
- rects,
568
- platform
569
- } = state;
570
- const {
571
- strategy = 'referenceHidden',
572
- ...detectOverflowOptions
573
- } = evaluate(options, state);
574
- switch (strategy) {
575
- case 'referenceHidden':
576
- {
577
- const overflow = await platform.detectOverflow(state, {
578
- ...detectOverflowOptions,
579
- elementContext: 'reference'
580
- });
581
- const offsets = getSideOffsets(overflow, rects.reference);
582
- return {
583
- data: {
584
- referenceHiddenOffsets: offsets,
585
- referenceHidden: isAnySideFullyClipped(offsets)
586
- }
587
- };
588
- }
589
- case 'escaped':
590
- {
591
- const overflow = await platform.detectOverflow(state, {
592
- ...detectOverflowOptions,
593
- altBoundary: true
594
- });
595
- const offsets = getSideOffsets(overflow, rects.floating);
596
- return {
597
- data: {
598
- escapedOffsets: offsets,
599
- escaped: isAnySideFullyClipped(offsets)
600
- }
601
- };
602
- }
603
- default:
604
- {
605
- return {};
606
- }
607
- }
608
- }
609
- };
610
- };
611
-
612
- const originSides = /*#__PURE__*/new Set(['left', 'top']);
613
-
614
- // For type backwards-compatibility, the `OffsetOptions` type was also
615
- // Derivable.
616
-
617
- async function convertValueToCoords(state, options) {
618
- const {
619
- placement,
620
- platform,
621
- elements
622
- } = state;
623
- const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
624
- const side = getSide(placement);
625
- const alignment = getAlignment(placement);
626
- const isVertical = getSideAxis(placement) === 'y';
627
- const mainAxisMulti = originSides.has(side) ? -1 : 1;
628
- const crossAxisMulti = rtl && isVertical ? -1 : 1;
629
- const rawValue = evaluate(options, state);
630
-
631
- // eslint-disable-next-line prefer-const
632
- let {
633
- mainAxis,
634
- crossAxis,
635
- alignmentAxis
636
- } = typeof rawValue === 'number' ? {
637
- mainAxis: rawValue,
638
- crossAxis: 0,
639
- alignmentAxis: null
640
- } : {
641
- mainAxis: rawValue.mainAxis || 0,
642
- crossAxis: rawValue.crossAxis || 0,
643
- alignmentAxis: rawValue.alignmentAxis
644
- };
645
- if (alignment && typeof alignmentAxis === 'number') {
646
- crossAxis = alignment === 'end' ? alignmentAxis * -1 : alignmentAxis;
647
- }
648
- return isVertical ? {
649
- x: crossAxis * crossAxisMulti,
650
- y: mainAxis * mainAxisMulti
651
- } : {
652
- x: mainAxis * mainAxisMulti,
653
- y: crossAxis * crossAxisMulti
654
- };
655
- }
656
-
657
- /**
658
- * Modifies the placement by translating the floating element along the
659
- * specified axes.
660
- * A number (shorthand for `mainAxis` or distance), or an axes configuration
661
- * object may be passed.
662
- * @see https://floating-ui.com/docs/offset
663
- */
664
- const offset$2 = function (options) {
665
- if (options === void 0) {
666
- options = 0;
667
- }
668
- return {
669
- name: 'offset',
670
- options,
671
- async fn(state) {
672
- var _middlewareData$offse, _middlewareData$arrow;
673
- const {
674
- x,
675
- y,
676
- placement,
677
- middlewareData
678
- } = state;
679
- const diffCoords = await convertValueToCoords(state, options);
680
-
681
- // If the placement is the same and the arrow caused an alignment offset
682
- // then we don't need to change the positioning coordinates.
683
- if (placement === ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse.placement) && (_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
684
- return {};
685
- }
686
- return {
687
- x: x + diffCoords.x,
688
- y: y + diffCoords.y,
689
- data: {
690
- ...diffCoords,
691
- placement
692
- }
693
- };
694
- }
695
- };
696
- };
697
-
698
- /**
699
- * Optimizes the visibility of the floating element by shifting it in order to
700
- * keep it in view when it will overflow the clipping boundary.
701
- * @see https://floating-ui.com/docs/shift
702
- */
703
- const shift$2 = function (options) {
704
- if (options === void 0) {
705
- options = {};
706
- }
707
- return {
708
- name: 'shift',
709
- options,
710
- async fn(state) {
711
- const {
712
- x,
713
- y,
714
- placement,
715
- platform
716
- } = state;
717
- const {
718
- mainAxis: checkMainAxis = true,
719
- crossAxis: checkCrossAxis = false,
720
- limiter = {
721
- fn: _ref => {
722
- let {
723
- x,
724
- y
725
- } = _ref;
726
- return {
727
- x,
728
- y
729
- };
730
- }
731
- },
732
- ...detectOverflowOptions
733
- } = evaluate(options, state);
734
- const coords = {
735
- x,
736
- y
737
- };
738
- const overflow = await platform.detectOverflow(state, detectOverflowOptions);
739
- const crossAxis = getSideAxis(getSide(placement));
740
- const mainAxis = getOppositeAxis(crossAxis);
741
- let mainAxisCoord = coords[mainAxis];
742
- let crossAxisCoord = coords[crossAxis];
743
- if (checkMainAxis) {
744
- const minSide = mainAxis === 'y' ? 'top' : 'left';
745
- const maxSide = mainAxis === 'y' ? 'bottom' : 'right';
746
- const min = mainAxisCoord + overflow[minSide];
747
- const max = mainAxisCoord - overflow[maxSide];
748
- mainAxisCoord = clamp(min, mainAxisCoord, max);
749
- }
750
- if (checkCrossAxis) {
751
- const minSide = crossAxis === 'y' ? 'top' : 'left';
752
- const maxSide = crossAxis === 'y' ? 'bottom' : 'right';
753
- const min = crossAxisCoord + overflow[minSide];
754
- const max = crossAxisCoord - overflow[maxSide];
755
- crossAxisCoord = clamp(min, crossAxisCoord, max);
756
- }
757
- const limitedCoords = limiter.fn({
758
- ...state,
759
- [mainAxis]: mainAxisCoord,
760
- [crossAxis]: crossAxisCoord
761
- });
762
- return {
763
- ...limitedCoords,
764
- data: {
765
- x: limitedCoords.x - x,
766
- y: limitedCoords.y - y,
767
- enabled: {
768
- [mainAxis]: checkMainAxis,
769
- [crossAxis]: checkCrossAxis
770
- }
771
- }
772
- };
773
- }
774
- };
775
- };
776
- /**
777
- * Built-in `limiter` that will stop `shift()` at a certain point.
778
- */
779
- const limitShift$2 = function (options) {
780
- if (options === void 0) {
781
- options = {};
782
- }
783
- return {
784
- options,
785
- fn(state) {
786
- const {
787
- x,
788
- y,
789
- placement,
790
- rects,
791
- middlewareData
792
- } = state;
793
- const {
794
- offset = 0,
795
- mainAxis: checkMainAxis = true,
796
- crossAxis: checkCrossAxis = true
797
- } = evaluate(options, state);
798
- const coords = {
799
- x,
800
- y
801
- };
802
- const crossAxis = getSideAxis(placement);
803
- const mainAxis = getOppositeAxis(crossAxis);
804
- let mainAxisCoord = coords[mainAxis];
805
- let crossAxisCoord = coords[crossAxis];
806
- const rawOffset = evaluate(offset, state);
807
- const computedOffset = typeof rawOffset === 'number' ? {
808
- mainAxis: rawOffset,
809
- crossAxis: 0
810
- } : {
811
- mainAxis: 0,
812
- crossAxis: 0,
813
- ...rawOffset
814
- };
815
- if (checkMainAxis) {
816
- const len = mainAxis === 'y' ? 'height' : 'width';
817
- const limitMin = rects.reference[mainAxis] - rects.floating[len] + computedOffset.mainAxis;
818
- const limitMax = rects.reference[mainAxis] + rects.reference[len] - computedOffset.mainAxis;
819
- if (mainAxisCoord < limitMin) {
820
- mainAxisCoord = limitMin;
821
- } else if (mainAxisCoord > limitMax) {
822
- mainAxisCoord = limitMax;
823
- }
824
- }
825
- if (checkCrossAxis) {
826
- var _middlewareData$offse, _middlewareData$offse2;
827
- const len = mainAxis === 'y' ? 'width' : 'height';
828
- const isOriginSide = originSides.has(getSide(placement));
829
- 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);
830
- 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);
831
- if (crossAxisCoord < limitMin) {
832
- crossAxisCoord = limitMin;
833
- } else if (crossAxisCoord > limitMax) {
834
- crossAxisCoord = limitMax;
835
- }
836
- }
837
- return {
838
- [mainAxis]: mainAxisCoord,
839
- [crossAxis]: crossAxisCoord
840
- };
841
- }
842
- };
843
- };
844
-
845
- /**
846
- * Provides data that allows you to change the size of the floating element —
847
- * for instance, prevent it from overflowing the clipping boundary or match the
848
- * width of the reference element.
849
- * @see https://floating-ui.com/docs/size
850
- */
851
- const size$2 = function (options) {
852
- if (options === void 0) {
853
- options = {};
854
- }
855
- return {
856
- name: 'size',
857
- options,
858
- async fn(state) {
859
- var _state$middlewareData, _state$middlewareData2;
860
- const {
861
- placement,
862
- rects,
863
- platform,
864
- elements
865
- } = state;
866
- const {
867
- apply = () => {},
868
- ...detectOverflowOptions
869
- } = evaluate(options, state);
870
- const overflow = await platform.detectOverflow(state, detectOverflowOptions);
871
- const side = getSide(placement);
872
- const alignment = getAlignment(placement);
873
- const isYAxis = getSideAxis(placement) === 'y';
874
- const {
875
- width,
876
- height
877
- } = rects.floating;
878
- let heightSide;
879
- let widthSide;
880
- if (side === 'top' || side === 'bottom') {
881
- heightSide = side;
882
- widthSide = alignment === ((await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating))) ? 'start' : 'end') ? 'left' : 'right';
883
- } else {
884
- widthSide = side;
885
- heightSide = alignment === 'end' ? 'top' : 'bottom';
886
- }
887
- const maximumClippingHeight = height - overflow.top - overflow.bottom;
888
- const maximumClippingWidth = width - overflow.left - overflow.right;
889
- const overflowAvailableHeight = min(height - overflow[heightSide], maximumClippingHeight);
890
- const overflowAvailableWidth = min(width - overflow[widthSide], maximumClippingWidth);
891
- const noShift = !state.middlewareData.shift;
892
- let availableHeight = overflowAvailableHeight;
893
- let availableWidth = overflowAvailableWidth;
894
- if ((_state$middlewareData = state.middlewareData.shift) != null && _state$middlewareData.enabled.x) {
895
- availableWidth = maximumClippingWidth;
896
- }
897
- if ((_state$middlewareData2 = state.middlewareData.shift) != null && _state$middlewareData2.enabled.y) {
898
- availableHeight = maximumClippingHeight;
899
- }
900
- if (noShift && !alignment) {
901
- const xMin = max(overflow.left, 0);
902
- const xMax = max(overflow.right, 0);
903
- const yMin = max(overflow.top, 0);
904
- const yMax = max(overflow.bottom, 0);
905
- if (isYAxis) {
906
- availableWidth = width - 2 * (xMin !== 0 || xMax !== 0 ? xMin + xMax : max(overflow.left, overflow.right));
907
- } else {
908
- availableHeight = height - 2 * (yMin !== 0 || yMax !== 0 ? yMin + yMax : max(overflow.top, overflow.bottom));
909
- }
910
- }
911
- await apply({
912
- ...state,
913
- availableWidth,
914
- availableHeight
915
- });
916
- const nextDimensions = await platform.getDimensions(elements.floating);
917
- if (width !== nextDimensions.width || height !== nextDimensions.height) {
918
- return {
919
- reset: {
920
- rects: true
921
- }
922
- };
923
- }
924
- return {};
925
- }
926
- };
927
- };
928
-
929
- function getCssDimensions(element) {
930
- const css = getComputedStyle$1(element);
931
- // In testing environments, the `width` and `height` properties are empty
932
- // strings for SVG elements, returning NaN. Fallback to `0` in this case.
933
- let width = parseFloat(css.width) || 0;
934
- let height = parseFloat(css.height) || 0;
935
- const hasOffset = isHTMLElement(element);
936
- const offsetWidth = hasOffset ? element.offsetWidth : width;
937
- const offsetHeight = hasOffset ? element.offsetHeight : height;
938
- const shouldFallback = round(width) !== offsetWidth || round(height) !== offsetHeight;
939
- if (shouldFallback) {
940
- width = offsetWidth;
941
- height = offsetHeight;
942
- }
943
- return {
944
- width,
945
- height,
946
- $: shouldFallback
947
- };
948
- }
949
-
950
- function unwrapElement(element) {
951
- return !isElement(element) ? element.contextElement : element;
952
- }
953
-
954
- function getScale(element) {
955
- const domElement = unwrapElement(element);
956
- if (!isHTMLElement(domElement)) {
957
- return createCoords(1);
958
- }
959
- const rect = domElement.getBoundingClientRect();
960
- const {
961
- width,
962
- height,
963
- $
964
- } = getCssDimensions(domElement);
965
- let x = ($ ? round(rect.width) : rect.width) / width;
966
- let y = ($ ? round(rect.height) : rect.height) / height;
967
-
968
- // 0, NaN, or Infinity should always fallback to 1.
969
-
970
- if (!x || !Number.isFinite(x)) {
971
- x = 1;
972
- }
973
- if (!y || !Number.isFinite(y)) {
974
- y = 1;
975
- }
976
- return {
977
- x,
978
- y
979
- };
980
- }
981
-
982
- const noOffsets = /*#__PURE__*/createCoords(0);
983
- function getVisualOffsets(element) {
984
- const win = getWindow(element);
985
- if (!isWebKit() || !win.visualViewport) {
986
- return noOffsets;
987
- }
988
- return {
989
- x: win.visualViewport.offsetLeft,
990
- y: win.visualViewport.offsetTop
991
- };
992
- }
993
- function shouldAddVisualOffsets(element, isFixed, floatingOffsetParent) {
994
- if (isFixed === void 0) {
995
- isFixed = false;
996
- }
997
- if (!floatingOffsetParent || isFixed && floatingOffsetParent !== getWindow(element)) {
998
- return false;
999
- }
1000
- return isFixed;
1001
- }
1002
-
1003
- function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetParent) {
1004
- if (includeScale === void 0) {
1005
- includeScale = false;
1006
- }
1007
- if (isFixedStrategy === void 0) {
1008
- isFixedStrategy = false;
1009
- }
1010
- const clientRect = element.getBoundingClientRect();
1011
- const domElement = unwrapElement(element);
1012
- let scale = createCoords(1);
1013
- if (includeScale) {
1014
- if (offsetParent) {
1015
- if (isElement(offsetParent)) {
1016
- scale = getScale(offsetParent);
1017
- }
1018
- } else {
1019
- scale = getScale(element);
1020
- }
1021
- }
1022
- const visualOffsets = shouldAddVisualOffsets(domElement, isFixedStrategy, offsetParent) ? getVisualOffsets(domElement) : createCoords(0);
1023
- let x = (clientRect.left + visualOffsets.x) / scale.x;
1024
- let y = (clientRect.top + visualOffsets.y) / scale.y;
1025
- let width = clientRect.width / scale.x;
1026
- let height = clientRect.height / scale.y;
1027
- if (domElement) {
1028
- const win = getWindow(domElement);
1029
- const offsetWin = offsetParent && isElement(offsetParent) ? getWindow(offsetParent) : offsetParent;
1030
- let currentWin = win;
1031
- let currentIFrame = getFrameElement(currentWin);
1032
- while (currentIFrame && offsetParent && offsetWin !== currentWin) {
1033
- const iframeScale = getScale(currentIFrame);
1034
- const iframeRect = currentIFrame.getBoundingClientRect();
1035
- const css = getComputedStyle$1(currentIFrame);
1036
- const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
1037
- const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
1038
- x *= iframeScale.x;
1039
- y *= iframeScale.y;
1040
- width *= iframeScale.x;
1041
- height *= iframeScale.y;
1042
- x += left;
1043
- y += top;
1044
- currentWin = getWindow(currentIFrame);
1045
- currentIFrame = getFrameElement(currentWin);
1046
- }
1047
- }
1048
- return rectToClientRect({
1049
- width,
1050
- height,
1051
- x,
1052
- y
1053
- });
1054
- }
1055
-
1056
- // If <html> has a CSS width greater than the viewport, then this will be
1057
- // incorrect for RTL.
1058
- function getWindowScrollBarX(element, rect) {
1059
- const leftScroll = getNodeScroll(element).scrollLeft;
1060
- if (!rect) {
1061
- return getBoundingClientRect(getDocumentElement(element)).left + leftScroll;
1062
- }
1063
- return rect.left + leftScroll;
1064
- }
1065
-
1066
- function getHTMLOffset(documentElement, scroll) {
1067
- const htmlRect = documentElement.getBoundingClientRect();
1068
- const x = htmlRect.left + scroll.scrollLeft - getWindowScrollBarX(documentElement, htmlRect);
1069
- const y = htmlRect.top + scroll.scrollTop;
1070
- return {
1071
- x,
1072
- y
1073
- };
1074
- }
1075
-
1076
- function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
1077
- let {
1078
- elements,
1079
- rect,
1080
- offsetParent,
1081
- strategy
1082
- } = _ref;
1083
- const isFixed = strategy === 'fixed';
1084
- const documentElement = getDocumentElement(offsetParent);
1085
- const topLayer = elements ? isTopLayer(elements.floating) : false;
1086
- if (offsetParent === documentElement || topLayer && isFixed) {
1087
- return rect;
1088
- }
1089
- let scroll = {
1090
- scrollLeft: 0,
1091
- scrollTop: 0
1092
- };
1093
- let scale = createCoords(1);
1094
- const offsets = createCoords(0);
1095
- const isOffsetParentAnElement = isHTMLElement(offsetParent);
1096
- if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
1097
- if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
1098
- scroll = getNodeScroll(offsetParent);
1099
- }
1100
- if (isOffsetParentAnElement) {
1101
- const offsetRect = getBoundingClientRect(offsetParent);
1102
- scale = getScale(offsetParent);
1103
- offsets.x = offsetRect.x + offsetParent.clientLeft;
1104
- offsets.y = offsetRect.y + offsetParent.clientTop;
1105
- }
1106
- }
1107
- const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
1108
- return {
1109
- width: rect.width * scale.x,
1110
- height: rect.height * scale.y,
1111
- x: rect.x * scale.x - scroll.scrollLeft * scale.x + offsets.x + htmlOffset.x,
1112
- y: rect.y * scale.y - scroll.scrollTop * scale.y + offsets.y + htmlOffset.y
1113
- };
1114
- }
1115
-
1116
- function getClientRects(element) {
1117
- return Array.from(element.getClientRects());
1118
- }
1119
-
1120
- // Gets the entire size of the scrollable document area, even extending outside
1121
- // of the `<html>` and `<body>` rect bounds if horizontally scrollable.
1122
- function getDocumentRect(element) {
1123
- const html = getDocumentElement(element);
1124
- const scroll = getNodeScroll(element);
1125
- const body = element.ownerDocument.body;
1126
- const width = max(html.scrollWidth, html.clientWidth, body.scrollWidth, body.clientWidth);
1127
- const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight);
1128
- let x = -scroll.scrollLeft + getWindowScrollBarX(element);
1129
- const y = -scroll.scrollTop;
1130
- if (getComputedStyle$1(body).direction === 'rtl') {
1131
- x += max(html.clientWidth, body.clientWidth) - width;
1132
- }
1133
- return {
1134
- width,
1135
- height,
1136
- x,
1137
- y
1138
- };
1139
- }
1140
-
1141
- // Safety check: ensure the scrollbar space is reasonable in case this
1142
- // calculation is affected by unusual styles.
1143
- // Most scrollbars leave 15-18px of space.
1144
- const SCROLLBAR_MAX = 25;
1145
- function getViewportRect(element, strategy) {
1146
- const win = getWindow(element);
1147
- const html = getDocumentElement(element);
1148
- const visualViewport = win.visualViewport;
1149
- let width = html.clientWidth;
1150
- let height = html.clientHeight;
1151
- let x = 0;
1152
- let y = 0;
1153
- if (visualViewport) {
1154
- width = visualViewport.width;
1155
- height = visualViewport.height;
1156
- const visualViewportBased = isWebKit();
1157
- if (!visualViewportBased || visualViewportBased && strategy === 'fixed') {
1158
- x = visualViewport.offsetLeft;
1159
- y = visualViewport.offsetTop;
1160
- }
1161
- }
1162
- const windowScrollbarX = getWindowScrollBarX(html);
1163
- // <html> `overflow: hidden` + `scrollbar-gutter: stable` reduces the
1164
- // visual width of the <html> but this is not considered in the size
1165
- // of `html.clientWidth`.
1166
- if (windowScrollbarX <= 0) {
1167
- const doc = html.ownerDocument;
1168
- const body = doc.body;
1169
- const bodyStyles = getComputedStyle(body);
1170
- const bodyMarginInline = doc.compatMode === 'CSS1Compat' ? parseFloat(bodyStyles.marginLeft) + parseFloat(bodyStyles.marginRight) || 0 : 0;
1171
- const clippingStableScrollbarWidth = Math.abs(html.clientWidth - body.clientWidth - bodyMarginInline);
1172
- if (clippingStableScrollbarWidth <= SCROLLBAR_MAX) {
1173
- width -= clippingStableScrollbarWidth;
1174
- }
1175
- } else if (windowScrollbarX <= SCROLLBAR_MAX) {
1176
- // If the <body> scrollbar is on the left, the width needs to be extended
1177
- // by the scrollbar amount so there isn't extra space on the right.
1178
- width += windowScrollbarX;
1179
- }
1180
- return {
1181
- width,
1182
- height,
1183
- x,
1184
- y
1185
- };
1186
- }
1187
-
1188
- // Returns the inner client rect, subtracting scrollbars if present.
1189
- function getInnerBoundingClientRect(element, strategy) {
1190
- const clientRect = getBoundingClientRect(element, true, strategy === 'fixed');
1191
- const top = clientRect.top + element.clientTop;
1192
- const left = clientRect.left + element.clientLeft;
1193
- const scale = isHTMLElement(element) ? getScale(element) : createCoords(1);
1194
- const width = element.clientWidth * scale.x;
1195
- const height = element.clientHeight * scale.y;
1196
- const x = left * scale.x;
1197
- const y = top * scale.y;
1198
- return {
1199
- width,
1200
- height,
1201
- x,
1202
- y
1203
- };
1204
- }
1205
- function getClientRectFromClippingAncestor(element, clippingAncestor, strategy) {
1206
- let rect;
1207
- if (clippingAncestor === 'viewport') {
1208
- rect = getViewportRect(element, strategy);
1209
- } else if (clippingAncestor === 'document') {
1210
- rect = getDocumentRect(getDocumentElement(element));
1211
- } else if (isElement(clippingAncestor)) {
1212
- rect = getInnerBoundingClientRect(clippingAncestor, strategy);
1213
- } else {
1214
- const visualOffsets = getVisualOffsets(element);
1215
- rect = {
1216
- x: clippingAncestor.x - visualOffsets.x,
1217
- y: clippingAncestor.y - visualOffsets.y,
1218
- width: clippingAncestor.width,
1219
- height: clippingAncestor.height
1220
- };
1221
- }
1222
- return rectToClientRect(rect);
1223
- }
1224
- function hasFixedPositionAncestor(element, stopNode) {
1225
- const parentNode = getParentNode(element);
1226
- if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) {
1227
- return false;
1228
- }
1229
- return getComputedStyle$1(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode);
1230
- }
1231
-
1232
- // A "clipping ancestor" is an `overflow` element with the characteristic of
1233
- // clipping (or hiding) child elements. This returns all clipping ancestors
1234
- // of the given element up the tree.
1235
- function getClippingElementAncestors(element, cache) {
1236
- const cachedResult = cache.get(element);
1237
- if (cachedResult) {
1238
- return cachedResult;
1239
- }
1240
- let result = getOverflowAncestors(element, [], false).filter(el => isElement(el) && getNodeName(el) !== 'body');
1241
- let currentContainingBlockComputedStyle = null;
1242
- const elementIsFixed = getComputedStyle$1(element).position === 'fixed';
1243
- let currentNode = elementIsFixed ? getParentNode(element) : element;
1244
-
1245
- // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
1246
- while (isElement(currentNode) && !isLastTraversableNode(currentNode)) {
1247
- const computedStyle = getComputedStyle$1(currentNode);
1248
- const currentNodeIsContaining = isContainingBlock(currentNode);
1249
- if (!currentNodeIsContaining && computedStyle.position === 'fixed') {
1250
- currentContainingBlockComputedStyle = null;
1251
- }
1252
- const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && (currentContainingBlockComputedStyle.position === 'absolute' || currentContainingBlockComputedStyle.position === 'fixed') || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
1253
- if (shouldDropCurrentNode) {
1254
- // Drop non-containing blocks.
1255
- result = result.filter(ancestor => ancestor !== currentNode);
1256
- } else {
1257
- // Record last containing block for next iteration.
1258
- currentContainingBlockComputedStyle = computedStyle;
1259
- }
1260
- currentNode = getParentNode(currentNode);
1261
- }
1262
- cache.set(element, result);
1263
- return result;
1264
- }
1265
-
1266
- // Gets the maximum area that the element is visible in due to any number of
1267
- // clipping ancestors.
1268
- function getClippingRect(_ref) {
1269
- let {
1270
- element,
1271
- boundary,
1272
- rootBoundary,
1273
- strategy
1274
- } = _ref;
1275
- const elementClippingAncestors = boundary === 'clippingAncestors' ? isTopLayer(element) ? [] : getClippingElementAncestors(element, this._c) : [].concat(boundary);
1276
- const clippingAncestors = [...elementClippingAncestors, rootBoundary];
1277
- const firstRect = getClientRectFromClippingAncestor(element, clippingAncestors[0], strategy);
1278
- let top = firstRect.top;
1279
- let right = firstRect.right;
1280
- let bottom = firstRect.bottom;
1281
- let left = firstRect.left;
1282
- for (let i = 1; i < clippingAncestors.length; i++) {
1283
- const rect = getClientRectFromClippingAncestor(element, clippingAncestors[i], strategy);
1284
- top = max(rect.top, top);
1285
- right = min(rect.right, right);
1286
- bottom = min(rect.bottom, bottom);
1287
- left = max(rect.left, left);
1288
- }
1289
- return {
1290
- width: right - left,
1291
- height: bottom - top,
1292
- x: left,
1293
- y: top
1294
- };
1295
- }
1296
-
1297
- function getDimensions(element) {
1298
- const {
1299
- width,
1300
- height
1301
- } = getCssDimensions(element);
1302
- return {
1303
- width,
1304
- height
1305
- };
1306
- }
1307
-
1308
- function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
1309
- const isOffsetParentAnElement = isHTMLElement(offsetParent);
1310
- const documentElement = getDocumentElement(offsetParent);
1311
- const isFixed = strategy === 'fixed';
1312
- const rect = getBoundingClientRect(element, true, isFixed, offsetParent);
1313
- let scroll = {
1314
- scrollLeft: 0,
1315
- scrollTop: 0
1316
- };
1317
- const offsets = createCoords(0);
1318
-
1319
- // If the <body> scrollbar appears on the left (e.g. RTL systems). Use
1320
- // Firefox with layout.scrollbar.side = 3 in about:config to test this.
1321
- function setLeftRTLScrollbarOffset() {
1322
- offsets.x = getWindowScrollBarX(documentElement);
1323
- }
1324
- if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
1325
- if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
1326
- scroll = getNodeScroll(offsetParent);
1327
- }
1328
- if (isOffsetParentAnElement) {
1329
- const offsetRect = getBoundingClientRect(offsetParent, true, isFixed, offsetParent);
1330
- offsets.x = offsetRect.x + offsetParent.clientLeft;
1331
- offsets.y = offsetRect.y + offsetParent.clientTop;
1332
- } else if (documentElement) {
1333
- setLeftRTLScrollbarOffset();
1334
- }
1335
- }
1336
- if (isFixed && !isOffsetParentAnElement && documentElement) {
1337
- setLeftRTLScrollbarOffset();
1338
- }
1339
- const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
1340
- const x = rect.left + scroll.scrollLeft - offsets.x - htmlOffset.x;
1341
- const y = rect.top + scroll.scrollTop - offsets.y - htmlOffset.y;
1342
- return {
1343
- x,
1344
- y,
1345
- width: rect.width,
1346
- height: rect.height
1347
- };
1348
- }
1349
-
1350
- function isStaticPositioned(element) {
1351
- return getComputedStyle$1(element).position === 'static';
1352
- }
1353
-
1354
- function getTrueOffsetParent(element, polyfill) {
1355
- if (!isHTMLElement(element) || getComputedStyle$1(element).position === 'fixed') {
1356
- return null;
1357
- }
1358
- if (polyfill) {
1359
- return polyfill(element);
1360
- }
1361
- let rawOffsetParent = element.offsetParent;
1362
-
1363
- // Firefox returns the <html> element as the offsetParent if it's non-static,
1364
- // while Chrome and Safari return the <body> element. The <body> element must
1365
- // be used to perform the correct calculations even if the <html> element is
1366
- // non-static.
1367
- if (getDocumentElement(element) === rawOffsetParent) {
1368
- rawOffsetParent = rawOffsetParent.ownerDocument.body;
1369
- }
1370
- return rawOffsetParent;
1371
- }
1372
-
1373
- // Gets the closest ancestor positioned element. Handles some edge cases,
1374
- // such as table ancestors and cross browser bugs.
1375
- function getOffsetParent(element, polyfill) {
1376
- const win = getWindow(element);
1377
- if (isTopLayer(element)) {
1378
- return win;
1379
- }
1380
- if (!isHTMLElement(element)) {
1381
- let svgOffsetParent = getParentNode(element);
1382
- while (svgOffsetParent && !isLastTraversableNode(svgOffsetParent)) {
1383
- if (isElement(svgOffsetParent) && !isStaticPositioned(svgOffsetParent)) {
1384
- return svgOffsetParent;
1385
- }
1386
- svgOffsetParent = getParentNode(svgOffsetParent);
1387
- }
1388
- return win;
1389
- }
1390
- let offsetParent = getTrueOffsetParent(element, polyfill);
1391
- while (offsetParent && isTableElement(offsetParent) && isStaticPositioned(offsetParent)) {
1392
- offsetParent = getTrueOffsetParent(offsetParent, polyfill);
1393
- }
1394
- if (offsetParent && isLastTraversableNode(offsetParent) && isStaticPositioned(offsetParent) && !isContainingBlock(offsetParent)) {
1395
- return win;
1396
- }
1397
- return offsetParent || getContainingBlock(element) || win;
1398
- }
1399
-
1400
- const getElementRects = async function (data) {
1401
- const getOffsetParentFn = this.getOffsetParent || getOffsetParent;
1402
- const getDimensionsFn = this.getDimensions;
1403
- const floatingDimensions = await getDimensionsFn(data.floating);
1404
- return {
1405
- reference: getRectRelativeToOffsetParent(data.reference, await getOffsetParentFn(data.floating), data.strategy),
1406
- floating: {
1407
- x: 0,
1408
- y: 0,
1409
- width: floatingDimensions.width,
1410
- height: floatingDimensions.height
1411
- }
1412
- };
1413
- };
1414
-
1415
- function isRTL(element) {
1416
- return getComputedStyle$1(element).direction === 'rtl';
1417
- }
1418
-
1419
- const platform = {
1420
- convertOffsetParentRelativeRectToViewportRelativeRect,
1421
- getDocumentElement,
1422
- getClippingRect,
1423
- getOffsetParent,
1424
- getElementRects,
1425
- getClientRects,
1426
- getDimensions,
1427
- getScale,
1428
- isElement,
1429
- isRTL
1430
- };
1431
-
1432
- function rectsAreEqual(a, b) {
1433
- return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
1434
- }
1435
-
1436
- // https://samthor.au/2021/observing-dom/
1437
- function observeMove(element, onMove) {
1438
- let io = null;
1439
- let timeoutId;
1440
- const root = getDocumentElement(element);
1441
- function cleanup() {
1442
- var _io;
1443
- clearTimeout(timeoutId);
1444
- (_io = io) == null || _io.disconnect();
1445
- io = null;
1446
- }
1447
- function refresh(skip, threshold) {
1448
- if (skip === void 0) {
1449
- skip = false;
1450
- }
1451
- if (threshold === void 0) {
1452
- threshold = 1;
1453
- }
1454
- cleanup();
1455
- const elementRectForRootMargin = element.getBoundingClientRect();
1456
- const {
1457
- left,
1458
- top,
1459
- width,
1460
- height
1461
- } = elementRectForRootMargin;
1462
- if (!skip) {
1463
- onMove();
1464
- }
1465
- if (!width || !height) {
1466
- return;
1467
- }
1468
- const insetTop = floor(top);
1469
- const insetRight = floor(root.clientWidth - (left + width));
1470
- const insetBottom = floor(root.clientHeight - (top + height));
1471
- const insetLeft = floor(left);
1472
- const rootMargin = -insetTop + "px " + -insetRight + "px " + -insetBottom + "px " + -insetLeft + "px";
1473
- const options = {
1474
- rootMargin,
1475
- threshold: max(0, min(1, threshold)) || 1
1476
- };
1477
- let isFirstUpdate = true;
1478
- function handleObserve(entries) {
1479
- const ratio = entries[0].intersectionRatio;
1480
- if (ratio !== threshold) {
1481
- if (!isFirstUpdate) {
1482
- return refresh();
1483
- }
1484
- if (!ratio) {
1485
- // If the reference is clipped, the ratio is 0. Throttle the refresh
1486
- // to prevent an infinite loop of updates.
1487
- timeoutId = setTimeout(() => {
1488
- refresh(false, 1e-7);
1489
- }, 1000);
1490
- } else {
1491
- refresh(false, ratio);
1492
- }
1493
- }
1494
- if (ratio === 1 && !rectsAreEqual(elementRectForRootMargin, element.getBoundingClientRect())) {
1495
- // It's possible that even though the ratio is reported as 1, the
1496
- // element is not actually fully within the IntersectionObserver's root
1497
- // area anymore. This can happen under performance constraints. This may
1498
- // be a bug in the browser's IntersectionObserver implementation. To
1499
- // work around this, we compare the element's bounding rect now with
1500
- // what it was at the time we created the IntersectionObserver. If they
1501
- // are not equal then the element moved, so we refresh.
1502
- refresh();
1503
- }
1504
- isFirstUpdate = false;
1505
- }
1506
-
1507
- // Older browsers don't support a `document` as the root and will throw an
1508
- // error.
1509
- try {
1510
- io = new IntersectionObserver(handleObserve, {
1511
- ...options,
1512
- // Handle <iframe>s
1513
- root: root.ownerDocument
1514
- });
1515
- } catch (_e) {
1516
- io = new IntersectionObserver(handleObserve, options);
1517
- }
1518
- io.observe(element);
1519
- }
1520
- refresh(true);
1521
- return cleanup;
1522
- }
1523
-
1524
- /**
1525
- * Automatically updates the position of the floating element when necessary.
1526
- * Should only be called when the floating element is mounted on the DOM or
1527
- * visible on the screen.
1528
- * @returns cleanup function that should be invoked when the floating element is
1529
- * removed from the DOM or hidden from the screen.
1530
- * @see https://floating-ui.com/docs/autoUpdate
1531
- */
1532
- function autoUpdate(reference, floating, update, options) {
1533
- if (options === void 0) {
1534
- options = {};
1535
- }
1536
- const {
1537
- ancestorScroll = true,
1538
- ancestorResize = true,
1539
- elementResize = typeof ResizeObserver === 'function',
1540
- layoutShift = typeof IntersectionObserver === 'function',
1541
- animationFrame = false
1542
- } = options;
1543
- const referenceEl = unwrapElement(reference);
1544
- const ancestors = ancestorScroll || ancestorResize ? [...(referenceEl ? getOverflowAncestors(referenceEl) : []), ...(floating ? getOverflowAncestors(floating) : [])] : [];
1545
- ancestors.forEach(ancestor => {
1546
- ancestorScroll && ancestor.addEventListener('scroll', update, {
1547
- passive: true
1548
- });
1549
- ancestorResize && ancestor.addEventListener('resize', update);
1550
- });
1551
- const cleanupIo = referenceEl && layoutShift ? observeMove(referenceEl, update) : null;
1552
- let reobserveFrame = -1;
1553
- let resizeObserver = null;
1554
- if (elementResize) {
1555
- resizeObserver = new ResizeObserver(_ref => {
1556
- let [firstEntry] = _ref;
1557
- if (firstEntry && firstEntry.target === referenceEl && resizeObserver && floating) {
1558
- // Prevent update loops when using the `size` middleware.
1559
- // https://github.com/floating-ui/floating-ui/issues/1740
1560
- resizeObserver.unobserve(floating);
1561
- cancelAnimationFrame(reobserveFrame);
1562
- reobserveFrame = requestAnimationFrame(() => {
1563
- var _resizeObserver;
1564
- (_resizeObserver = resizeObserver) == null || _resizeObserver.observe(floating);
1565
- });
1566
- }
1567
- update();
1568
- });
1569
- if (referenceEl && !animationFrame) {
1570
- resizeObserver.observe(referenceEl);
1571
- }
1572
- if (floating) {
1573
- resizeObserver.observe(floating);
1574
- }
1575
- }
1576
- let frameId;
1577
- let prevRefRect = animationFrame ? getBoundingClientRect(reference) : null;
1578
- if (animationFrame) {
1579
- frameLoop();
1580
- }
1581
- function frameLoop() {
1582
- const nextRefRect = getBoundingClientRect(reference);
1583
- if (prevRefRect && !rectsAreEqual(prevRefRect, nextRefRect)) {
1584
- update();
1585
- }
1586
- prevRefRect = nextRefRect;
1587
- frameId = requestAnimationFrame(frameLoop);
1588
- }
1589
- update();
1590
- return () => {
1591
- var _resizeObserver2;
1592
- ancestors.forEach(ancestor => {
1593
- ancestorScroll && ancestor.removeEventListener('scroll', update);
1594
- ancestorResize && ancestor.removeEventListener('resize', update);
1595
- });
1596
- cleanupIo == null || cleanupIo();
1597
- (_resizeObserver2 = resizeObserver) == null || _resizeObserver2.disconnect();
1598
- resizeObserver = null;
1599
- if (animationFrame) {
1600
- cancelAnimationFrame(frameId);
1601
- }
1602
- };
1603
- }
1604
-
1605
- /**
1606
- * Modifies the placement by translating the floating element along the
1607
- * specified axes.
1608
- * A number (shorthand for `mainAxis` or distance), or an axes configuration
1609
- * object may be passed.
1610
- * @see https://floating-ui.com/docs/offset
1611
- */
1612
- const offset$1 = offset$2;
1613
-
1614
- /**
1615
- * Optimizes the visibility of the floating element by choosing the placement
1616
- * that has the most space available automatically, without needing to specify a
1617
- * preferred placement. Alternative to `flip`.
1618
- * @see https://floating-ui.com/docs/autoPlacement
1619
- */
1620
- const autoPlacement$1 = autoPlacement$2;
1621
-
1622
- /**
1623
- * Optimizes the visibility of the floating element by shifting it in order to
1624
- * keep it in view when it will overflow the clipping boundary.
1625
- * @see https://floating-ui.com/docs/shift
1626
- */
1627
- const shift$1 = shift$2;
1628
-
1629
- /**
1630
- * Optimizes the visibility of the floating element by flipping the `placement`
1631
- * in order to keep it in view when the preferred placement(s) will overflow the
1632
- * clipping boundary. Alternative to `autoPlacement`.
1633
- * @see https://floating-ui.com/docs/flip
1634
- */
1635
- const flip$1 = flip$2;
1636
-
1637
- /**
1638
- * Provides data that allows you to change the size of the floating element —
1639
- * for instance, prevent it from overflowing the clipping boundary or match the
1640
- * width of the reference element.
1641
- * @see https://floating-ui.com/docs/size
1642
- */
1643
- const size$1 = size$2;
1644
-
1645
- /**
1646
- * Provides data to hide the floating element in applicable situations, such as
1647
- * when it is not in the same clipping context as the reference element.
1648
- * @see https://floating-ui.com/docs/hide
1649
- */
1650
- const hide$1 = hide$2;
1651
-
1652
- /**
1653
- * Provides data to position an inner element of the floating element so that it
1654
- * appears centered to the reference element.
1655
- * @see https://floating-ui.com/docs/arrow
1656
- */
1657
- const arrow$2 = arrow$3;
1658
-
1659
- /**
1660
- * Built-in `limiter` that will stop `shift()` at a certain point.
1661
- */
1662
- const limitShift$1 = limitShift$2;
1663
-
1664
- /**
1665
- * Computes the `x` and `y` coordinates that will place the floating element
1666
- * next to a given reference element.
1667
- */
1668
- const computePosition = (reference, floating, options) => {
1669
- // This caches the expensive `getClippingElementAncestors` function so that
1670
- // multiple lifecycle resets re-use the same result. It only lives for a
1671
- // single call. If other functions become expensive, we can add them as well.
1672
- const cache = new Map();
1673
- const mergedOptions = {
1674
- platform,
1675
- ...options
1676
- };
1677
- const platformWithCache = {
1678
- ...mergedOptions.platform,
1679
- _c: cache
1680
- };
1681
- return computePosition$1(reference, floating, {
1682
- ...mergedOptions,
1683
- platform: platformWithCache
1684
- });
1685
- };
1686
-
1687
- var isClient = typeof document !== 'undefined';
1688
-
1689
- var noop = function noop() {};
1690
- var index = isClient ? useLayoutEffect : noop;
1691
-
1692
- // Fork of `fast-deep-equal` that only does the comparisons we need and compares
1693
- // functions
1694
- function deepEqual(a, b) {
1695
- if (a === b) {
1696
- return true;
1697
- }
1698
- if (typeof a !== typeof b) {
1699
- return false;
1700
- }
1701
- if (typeof a === 'function' && a.toString() === b.toString()) {
1702
- return true;
1703
- }
1704
- let length;
1705
- let i;
1706
- let keys;
1707
- if (a && b && typeof a === 'object') {
1708
- if (Array.isArray(a)) {
1709
- length = a.length;
1710
- if (length !== b.length) return false;
1711
- for (i = length; i-- !== 0;) {
1712
- if (!deepEqual(a[i], b[i])) {
1713
- return false;
1714
- }
1715
- }
1716
- return true;
1717
- }
1718
- keys = Object.keys(a);
1719
- length = keys.length;
1720
- if (length !== Object.keys(b).length) {
1721
- return false;
1722
- }
1723
- for (i = length; i-- !== 0;) {
1724
- if (!{}.hasOwnProperty.call(b, keys[i])) {
1725
- return false;
1726
- }
1727
- }
1728
- for (i = length; i-- !== 0;) {
1729
- const key = keys[i];
1730
- if (key === '_owner' && a.$$typeof) {
1731
- continue;
1732
- }
1733
- if (!deepEqual(a[key], b[key])) {
1734
- return false;
1735
- }
1736
- }
1737
- return true;
1738
- }
1739
- return a !== a && b !== b;
1740
- }
1741
-
1742
- function getDPR(element) {
1743
- if (typeof window === 'undefined') {
1744
- return 1;
1745
- }
1746
- const win = element.ownerDocument.defaultView || window;
1747
- return win.devicePixelRatio || 1;
1748
- }
1749
-
1750
- function roundByDPR(element, value) {
1751
- const dpr = getDPR(element);
1752
- return Math.round(value * dpr) / dpr;
1753
- }
1754
-
1755
- function useLatestRef(value) {
1756
- const ref = React.useRef(value);
1757
- index(() => {
1758
- ref.current = value;
1759
- });
1760
- return ref;
1761
- }
1762
-
1763
- /**
1764
- * Provides data to position a floating element.
1765
- * @see https://floating-ui.com/docs/useFloating
1766
- */
1767
- function useFloating(options) {
1768
- if (options === void 0) {
1769
- options = {};
1770
- }
1771
- const {
1772
- placement = 'bottom',
1773
- strategy = 'absolute',
1774
- middleware = [],
1775
- platform,
1776
- elements: {
1777
- reference: externalReference,
1778
- floating: externalFloating
1779
- } = {},
1780
- transform = true,
1781
- whileElementsMounted,
1782
- open
1783
- } = options;
1784
- const [data, setData] = React.useState({
1785
- x: 0,
1786
- y: 0,
1787
- strategy,
1788
- placement,
1789
- middlewareData: {},
1790
- isPositioned: false
1791
- });
1792
- const [latestMiddleware, setLatestMiddleware] = React.useState(middleware);
1793
- if (!deepEqual(latestMiddleware, middleware)) {
1794
- setLatestMiddleware(middleware);
1795
- }
1796
- const [_reference, _setReference] = React.useState(null);
1797
- const [_floating, _setFloating] = React.useState(null);
1798
- const setReference = React.useCallback(node => {
1799
- if (node !== referenceRef.current) {
1800
- referenceRef.current = node;
1801
- _setReference(node);
1802
- }
1803
- }, []);
1804
- const setFloating = React.useCallback(node => {
1805
- if (node !== floatingRef.current) {
1806
- floatingRef.current = node;
1807
- _setFloating(node);
1808
- }
1809
- }, []);
1810
- const referenceEl = externalReference || _reference;
1811
- const floatingEl = externalFloating || _floating;
1812
- const referenceRef = React.useRef(null);
1813
- const floatingRef = React.useRef(null);
1814
- const dataRef = React.useRef(data);
1815
- const hasWhileElementsMounted = whileElementsMounted != null;
1816
- const whileElementsMountedRef = useLatestRef(whileElementsMounted);
1817
- const platformRef = useLatestRef(platform);
1818
- const openRef = useLatestRef(open);
1819
- const update = React.useCallback(() => {
1820
- if (!referenceRef.current || !floatingRef.current) {
1821
- return;
1822
- }
1823
- const config = {
1824
- placement,
1825
- strategy,
1826
- middleware: latestMiddleware
1827
- };
1828
- if (platformRef.current) {
1829
- config.platform = platformRef.current;
1830
- }
1831
- computePosition(referenceRef.current, floatingRef.current, config).then(data => {
1832
- const fullData = {
1833
- ...data,
1834
- // The floating element's position may be recomputed while it's closed
1835
- // but still mounted (such as when transitioning out). To ensure
1836
- // `isPositioned` will be `false` initially on the next open, avoid
1837
- // setting it to `true` when `open === false` (must be specified).
1838
- isPositioned: openRef.current !== false
1839
- };
1840
- if (isMountedRef.current && !deepEqual(dataRef.current, fullData)) {
1841
- dataRef.current = fullData;
1842
- ReactDOM.flushSync(() => {
1843
- setData(fullData);
1844
- });
1845
- }
1846
- });
1847
- }, [latestMiddleware, placement, strategy, platformRef, openRef]);
1848
- index(() => {
1849
- if (open === false && dataRef.current.isPositioned) {
1850
- dataRef.current.isPositioned = false;
1851
- setData(data => ({
1852
- ...data,
1853
- isPositioned: false
1854
- }));
1855
- }
1856
- }, [open]);
1857
- const isMountedRef = React.useRef(false);
1858
- index(() => {
1859
- isMountedRef.current = true;
1860
- return () => {
1861
- isMountedRef.current = false;
1862
- };
1863
- }, []);
1864
- index(() => {
1865
- if (referenceEl) referenceRef.current = referenceEl;
1866
- if (floatingEl) floatingRef.current = floatingEl;
1867
- if (referenceEl && floatingEl) {
1868
- if (whileElementsMountedRef.current) {
1869
- return whileElementsMountedRef.current(referenceEl, floatingEl, update);
1870
- }
1871
- update();
1872
- }
1873
- }, [referenceEl, floatingEl, update, whileElementsMountedRef, hasWhileElementsMounted]);
1874
- const refs = React.useMemo(() => ({
1875
- reference: referenceRef,
1876
- floating: floatingRef,
1877
- setReference,
1878
- setFloating
1879
- }), [setReference, setFloating]);
1880
- const elements = React.useMemo(() => ({
1881
- reference: referenceEl,
1882
- floating: floatingEl
1883
- }), [referenceEl, floatingEl]);
1884
- const floatingStyles = React.useMemo(() => {
1885
- const initialStyles = {
1886
- position: strategy,
1887
- left: 0,
1888
- top: 0
1889
- };
1890
- if (!elements.floating) {
1891
- return initialStyles;
1892
- }
1893
- const x = roundByDPR(elements.floating, data.x);
1894
- const y = roundByDPR(elements.floating, data.y);
1895
- if (transform) {
1896
- return {
1897
- ...initialStyles,
1898
- transform: "translate(" + x + "px, " + y + "px)",
1899
- ...(getDPR(elements.floating) >= 1.5 && {
1900
- willChange: 'transform'
1901
- })
1902
- };
1903
- }
1904
- return {
1905
- position: strategy,
1906
- left: x,
1907
- top: y
1908
- };
1909
- }, [strategy, transform, elements.floating, data.x, data.y]);
1910
- return React.useMemo(() => ({
1911
- ...data,
1912
- update,
1913
- refs,
1914
- elements,
1915
- floatingStyles
1916
- }), [data, update, refs, elements, floatingStyles]);
1917
- }
1918
-
1919
- /**
1920
- * Provides data to position an inner element of the floating element so that it
1921
- * appears centered to the reference element.
1922
- * This wraps the core `arrow` middleware to allow React refs as the element.
1923
- * @see https://floating-ui.com/docs/arrow
1924
- */
1925
- const arrow$1 = options => {
1926
- function isRef(value) {
1927
- return {}.hasOwnProperty.call(value, 'current');
1928
- }
1929
- return {
1930
- name: 'arrow',
1931
- options,
1932
- fn(state) {
1933
- const {
1934
- element,
1935
- padding
1936
- } = typeof options === 'function' ? options(state) : options;
1937
- if (element && isRef(element)) {
1938
- if (element.current != null) {
1939
- return arrow$2({
1940
- element: element.current,
1941
- padding
1942
- }).fn(state);
1943
- }
1944
- return {};
1945
- }
1946
- if (element) {
1947
- return arrow$2({
1948
- element,
1949
- padding
1950
- }).fn(state);
1951
- }
1952
- return {};
1953
- }
1954
- };
1955
- };
1956
-
1957
- /**
1958
- * Modifies the placement by translating the floating element along the
1959
- * specified axes.
1960
- * A number (shorthand for `mainAxis` or distance), or an axes configuration
1961
- * object may be passed.
1962
- * @see https://floating-ui.com/docs/offset
1963
- */
1964
- const offset = (options, deps) => {
1965
- const result = offset$1(options);
1966
- return {
1967
- name: result.name,
1968
- fn: result.fn,
1969
- options: [options, deps]
1970
- };
1971
- };
1972
-
1973
- /**
1974
- * Optimizes the visibility of the floating element by shifting it in order to
1975
- * keep it in view when it will overflow the clipping boundary.
1976
- * @see https://floating-ui.com/docs/shift
1977
- */
1978
- const shift = (options, deps) => {
1979
- const result = shift$1(options);
1980
- return {
1981
- name: result.name,
1982
- fn: result.fn,
1983
- options: [options, deps]
1984
- };
1985
- };
1986
-
1987
- /**
1988
- * Built-in `limiter` that will stop `shift()` at a certain point.
1989
- */
1990
- const limitShift = (options, deps) => {
1991
- const result = limitShift$1(options);
1992
- return {
1993
- fn: result.fn,
1994
- options: [options, deps]
1995
- };
1996
- };
1997
-
1998
- /**
1999
- * Optimizes the visibility of the floating element by flipping the `placement`
2000
- * in order to keep it in view when the preferred placement(s) will overflow the
2001
- * clipping boundary. Alternative to `autoPlacement`.
2002
- * @see https://floating-ui.com/docs/flip
2003
- */
2004
- const flip = (options, deps) => {
2005
- const result = flip$1(options);
2006
- return {
2007
- name: result.name,
2008
- fn: result.fn,
2009
- options: [options, deps]
2010
- };
2011
- };
2012
-
2013
- /**
2014
- * Provides data that allows you to change the size of the floating element —
2015
- * for instance, prevent it from overflowing the clipping boundary or match the
2016
- * width of the reference element.
2017
- * @see https://floating-ui.com/docs/size
2018
- */
2019
- const size = (options, deps) => {
2020
- const result = size$1(options);
2021
- return {
2022
- name: result.name,
2023
- fn: result.fn,
2024
- options: [options, deps]
2025
- };
2026
- };
2027
-
2028
- /**
2029
- * Optimizes the visibility of the floating element by choosing the placement
2030
- * that has the most space available automatically, without needing to specify a
2031
- * preferred placement. Alternative to `flip`.
2032
- * @see https://floating-ui.com/docs/autoPlacement
2033
- */
2034
- const autoPlacement = (options, deps) => {
2035
- const result = autoPlacement$1(options);
2036
- return {
2037
- name: result.name,
2038
- fn: result.fn,
2039
- options: [options, deps]
2040
- };
2041
- };
2042
-
2043
- /**
2044
- * Provides data to hide the floating element in applicable situations, such as
2045
- * when it is not in the same clipping context as the reference element.
2046
- * @see https://floating-ui.com/docs/hide
2047
- */
2048
- const hide = (options, deps) => {
2049
- const result = hide$1(options);
2050
- return {
2051
- name: result.name,
2052
- fn: result.fn,
2053
- options: [options, deps]
2054
- };
2055
- };
2056
-
2057
- /**
2058
- * Provides data to position an inner element of the floating element so that it
2059
- * appears centered to the reference element.
2060
- * This wraps the core `arrow` middleware to allow React refs as the element.
2061
- * @see https://floating-ui.com/docs/arrow
2062
- */
2063
- const arrow = (options, deps) => {
2064
- const result = arrow$1(options);
2065
- return {
2066
- name: result.name,
2067
- fn: result.fn,
2068
- options: [options, deps]
2069
- };
2070
- };
2071
-
2072
- export { arrow as a, autoUpdate as b, autoPlacement as c, size as d, flip as f, hide as h, limitShift as l, offset as o, platform as p, shift as s, useFloating as u };