@carbon/react 1.66.0-rc.0 → 1.67.0-rc.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 (150) hide show
  1. package/.playwright/INTERNAL_AVT_REPORT_DO_NOT_USE.json +1031 -1047
  2. package/es/components/AILabel/index.d.ts +37 -0
  3. package/es/components/AILabel/index.js +38 -14
  4. package/es/components/Accordion/Accordion.d.ts +5 -1
  5. package/es/components/Breadcrumb/BreadcrumbItem.js +1 -1
  6. package/es/components/Button/Button.d.ts +2 -1
  7. package/es/components/Button/Button.js +14 -3
  8. package/es/components/CodeSnippet/CodeSnippet.d.ts +9 -1
  9. package/es/components/CodeSnippet/CodeSnippet.js +7 -0
  10. package/es/components/ComboBox/ComboBox.js +37 -14
  11. package/es/components/ComboButton/index.js +1 -1
  12. package/es/components/Copy/Copy.d.ts +9 -1
  13. package/es/components/Copy/Copy.js +6 -0
  14. package/es/components/CopyButton/CopyButton.d.ts +9 -1
  15. package/es/components/CopyButton/CopyButton.js +6 -0
  16. package/es/components/DataTable/TableExpandHeader.d.ts +2 -2
  17. package/es/components/DataTable/TableExpandHeader.js +1 -1
  18. package/es/components/DatePicker/DatePicker.js +1 -0
  19. package/es/components/Dropdown/Dropdown.js +2 -2
  20. package/es/components/FeatureFlags/index.js +27 -7
  21. package/es/components/FluidNumberInput/FluidNumberInput.Skeleton.d.ts +15 -0
  22. package/es/components/FluidNumberInput/FluidNumberInput.d.ts +95 -0
  23. package/es/components/FluidNumberInput/index.d.ts +11 -0
  24. package/es/components/FluidSearch/FluidSearch.Skeleton.d.ts +15 -0
  25. package/es/components/FluidSearch/FluidSearch.Skeleton.js +2 -2
  26. package/es/components/FluidSearch/FluidSearch.d.ts +73 -0
  27. package/es/components/FluidSearch/FluidSearch.js +1 -2
  28. package/es/components/FluidSearch/index.d.ts +11 -0
  29. package/es/components/FluidSelect/FluidSelect.Skeleton.d.ts +15 -0
  30. package/es/components/FluidSelect/FluidSelect.Skeleton.js +1 -2
  31. package/es/components/FluidSelect/FluidSelect.d.ts +57 -0
  32. package/es/components/FluidSelect/FluidSelect.js +1 -2
  33. package/es/components/FluidSelect/index.d.ts +13 -0
  34. package/es/components/FluidSelect/index.js +1 -0
  35. package/es/components/FluidTextArea/FluidTextArea.Skeleton.d.ts +20 -0
  36. package/es/components/FluidTextArea/FluidTextArea.Skeleton.js +3 -20
  37. package/es/components/FluidTextArea/FluidTextArea.d.ts +96 -0
  38. package/es/components/FluidTextArea/FluidTextArea.js +2 -2
  39. package/es/components/FluidTextArea/index.d.ts +12 -0
  40. package/es/components/FluidTextInput/FluidPasswordInput.d.ts +83 -0
  41. package/es/components/FluidTextInput/FluidPasswordInput.js +87 -0
  42. package/es/components/FluidTextInput/FluidTextInput.Skeleton.d.ts +15 -0
  43. package/es/components/FluidTextInput/FluidTextInput.Skeleton.js +2 -2
  44. package/es/components/FluidTextInput/FluidTextInput.d.ts +70 -0
  45. package/es/components/FluidTextInput/FluidTextInput.js +6 -4
  46. package/es/components/FluidTextInput/index.d.ts +15 -0
  47. package/es/components/FluidTextInput/index.js +2 -0
  48. package/es/components/FluidTimePicker/FluidTimePicker.Skeleton.d.ts +35 -0
  49. package/es/components/FluidTimePicker/FluidTimePicker.Skeleton.js +4 -2
  50. package/es/components/FluidTimePicker/FluidTimePicker.d.ts +45 -0
  51. package/es/components/FluidTimePicker/FluidTimePicker.js +5 -5
  52. package/es/components/FluidTimePicker/index.d.ts +13 -0
  53. package/es/components/FluidTimePickerSelect/FluidTimePickerSelect.d.ts +41 -0
  54. package/es/components/FluidTimePickerSelect/FluidTimePickerSelect.js +2 -2
  55. package/es/components/FluidTimePickerSelect/index.d.ts +11 -0
  56. package/es/components/IconButton/index.d.ts +4 -0
  57. package/es/components/IconButton/index.js +6 -0
  58. package/es/components/Menu/Menu.js +2 -1
  59. package/es/components/MultiSelect/FilterableMultiSelect.js +6 -5
  60. package/es/components/MultiSelect/MultiSelect.js +2 -1
  61. package/es/components/Notification/Notification.js +4 -2
  62. package/es/components/OverflowMenu/next/index.js +3 -1
  63. package/es/components/OverflowMenuV2/index.js +1 -3
  64. package/es/components/Pagination/Pagination.js +1 -1
  65. package/es/components/Popover/index.js +2 -2
  66. package/es/components/Tabs/Tabs.js +1 -1
  67. package/es/components/Tag/DismissibleTag.d.ts +9 -1
  68. package/es/components/Tag/DismissibleTag.js +7 -3
  69. package/es/components/Tag/Tag.js +2 -2
  70. package/es/components/Toggletip/index.js +2 -1
  71. package/es/components/UIShell/HeaderPanel.js +1 -1
  72. package/es/index.js +12 -11
  73. package/es/node_modules/@floating-ui/core/dist/floating-ui.core.mjs.js +757 -4
  74. package/es/node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs.js +76 -0
  75. package/es/node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs.js +106 -6
  76. package/lib/components/AILabel/index.d.ts +37 -0
  77. package/lib/components/AILabel/index.js +38 -14
  78. package/lib/components/Accordion/Accordion.d.ts +5 -1
  79. package/lib/components/Breadcrumb/BreadcrumbItem.js +1 -1
  80. package/lib/components/Button/Button.d.ts +2 -1
  81. package/lib/components/Button/Button.js +13 -2
  82. package/lib/components/CodeSnippet/CodeSnippet.d.ts +9 -1
  83. package/lib/components/CodeSnippet/CodeSnippet.js +7 -0
  84. package/lib/components/ComboBox/ComboBox.js +38 -15
  85. package/lib/components/ComboButton/index.js +2 -2
  86. package/lib/components/Copy/Copy.d.ts +9 -1
  87. package/lib/components/Copy/Copy.js +6 -0
  88. package/lib/components/CopyButton/CopyButton.d.ts +9 -1
  89. package/lib/components/CopyButton/CopyButton.js +6 -0
  90. package/lib/components/DataTable/TableExpandHeader.d.ts +2 -2
  91. package/lib/components/DataTable/TableExpandHeader.js +1 -1
  92. package/lib/components/DatePicker/DatePicker.js +1 -0
  93. package/lib/components/Dropdown/Dropdown.js +3 -3
  94. package/lib/components/FeatureFlags/index.js +27 -7
  95. package/lib/components/FluidNumberInput/FluidNumberInput.Skeleton.d.ts +15 -0
  96. package/lib/components/FluidNumberInput/FluidNumberInput.d.ts +95 -0
  97. package/lib/components/FluidNumberInput/index.d.ts +11 -0
  98. package/lib/components/FluidSearch/FluidSearch.Skeleton.d.ts +15 -0
  99. package/lib/components/FluidSearch/FluidSearch.Skeleton.js +2 -2
  100. package/lib/components/FluidSearch/FluidSearch.d.ts +73 -0
  101. package/lib/components/FluidSearch/FluidSearch.js +1 -2
  102. package/lib/components/FluidSearch/index.d.ts +11 -0
  103. package/lib/components/FluidSelect/FluidSelect.Skeleton.d.ts +15 -0
  104. package/lib/components/FluidSelect/FluidSelect.Skeleton.js +1 -2
  105. package/lib/components/FluidSelect/FluidSelect.d.ts +57 -0
  106. package/lib/components/FluidSelect/FluidSelect.js +1 -2
  107. package/lib/components/FluidSelect/index.d.ts +13 -0
  108. package/lib/components/FluidSelect/index.js +2 -0
  109. package/lib/components/FluidTextArea/FluidTextArea.Skeleton.d.ts +20 -0
  110. package/lib/components/FluidTextArea/FluidTextArea.Skeleton.js +3 -22
  111. package/lib/components/FluidTextArea/FluidTextArea.d.ts +96 -0
  112. package/lib/components/FluidTextArea/FluidTextArea.js +2 -2
  113. package/lib/components/FluidTextArea/index.d.ts +12 -0
  114. package/lib/components/FluidTextInput/FluidPasswordInput.d.ts +83 -0
  115. package/lib/components/FluidTextInput/FluidPasswordInput.js +93 -0
  116. package/lib/components/FluidTextInput/FluidTextInput.Skeleton.d.ts +15 -0
  117. package/lib/components/FluidTextInput/FluidTextInput.Skeleton.js +2 -2
  118. package/lib/components/FluidTextInput/FluidTextInput.d.ts +70 -0
  119. package/lib/components/FluidTextInput/FluidTextInput.js +6 -4
  120. package/lib/components/FluidTextInput/index.d.ts +15 -0
  121. package/lib/components/FluidTextInput/index.js +3 -0
  122. package/lib/components/FluidTimePicker/FluidTimePicker.Skeleton.d.ts +35 -0
  123. package/lib/components/FluidTimePicker/FluidTimePicker.Skeleton.js +4 -2
  124. package/lib/components/FluidTimePicker/FluidTimePicker.d.ts +45 -0
  125. package/lib/components/FluidTimePicker/FluidTimePicker.js +6 -6
  126. package/lib/components/FluidTimePicker/index.d.ts +13 -0
  127. package/lib/components/FluidTimePickerSelect/FluidTimePickerSelect.d.ts +41 -0
  128. package/lib/components/FluidTimePickerSelect/FluidTimePickerSelect.js +2 -2
  129. package/lib/components/FluidTimePickerSelect/index.d.ts +11 -0
  130. package/lib/components/IconButton/index.d.ts +4 -0
  131. package/lib/components/IconButton/index.js +6 -0
  132. package/lib/components/Menu/Menu.js +2 -1
  133. package/lib/components/MultiSelect/FilterableMultiSelect.js +7 -6
  134. package/lib/components/MultiSelect/MultiSelect.js +3 -2
  135. package/lib/components/Notification/Notification.js +4 -2
  136. package/lib/components/OverflowMenu/next/index.js +3 -1
  137. package/lib/components/OverflowMenuV2/index.js +1 -3
  138. package/lib/components/Pagination/Pagination.js +1 -1
  139. package/lib/components/Popover/index.js +3 -3
  140. package/lib/components/Tabs/Tabs.js +1 -1
  141. package/lib/components/Tag/DismissibleTag.d.ts +9 -1
  142. package/lib/components/Tag/DismissibleTag.js +7 -3
  143. package/lib/components/Tag/Tag.js +2 -2
  144. package/lib/components/Toggletip/index.js +2 -1
  145. package/lib/components/UIShell/HeaderPanel.js +1 -1
  146. package/lib/index.js +23 -22
  147. package/lib/node_modules/@floating-ui/core/dist/floating-ui.core.mjs.js +763 -2
  148. package/lib/node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs.js +80 -0
  149. package/lib/node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs.js +121 -5
  150. package/package.json +10 -10
@@ -5,7 +5,7 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
7
 
8
- import { evaluate, getPaddingObject, rectToClientRect, sides } from '../../utils/dist/floating-ui.utils.mjs.js';
8
+ import { evaluate, getPaddingObject, getAlignmentAxis, min, clamp, getAlignment, placements, getAlignmentSides, getSide, getSideAxis, getOppositePlacement, getExpandedPlacements, getOppositeAxisPlacements, rectToClientRect, max, getAxisLength, getOppositeAlignmentPlacement, sides, getOppositeAxis } from '../../utils/dist/floating-ui.utils.mjs.js';
9
9
  export { rectToClientRect } from '../../utils/dist/floating-ui.utils.mjs.js';
10
10
 
11
11
  /**
@@ -46,9 +46,10 @@ async function detectOverflow(state, options) {
46
46
  strategy
47
47
  }));
48
48
  const rect = elementContext === 'floating' ? {
49
- ...rects.floating,
50
49
  x,
51
- y
50
+ y,
51
+ width: rects.floating.width,
52
+ height: rects.floating.height
52
53
  } : rects.reference;
53
54
  const offsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating));
54
55
  const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) ? (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || {
@@ -59,6 +60,7 @@ async function detectOverflow(state, options) {
59
60
  y: 1
60
61
  };
61
62
  const elementClientRect = rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({
63
+ elements,
62
64
  rect,
63
65
  offsetParent,
64
66
  strategy
@@ -71,6 +73,317 @@ async function detectOverflow(state, options) {
71
73
  };
72
74
  }
73
75
 
76
+ /**
77
+ * Provides data to position an inner element of the floating element so that it
78
+ * appears centered to the reference element.
79
+ * @see https://floating-ui.com/docs/arrow
80
+ */
81
+ const arrow = options => ({
82
+ name: 'arrow',
83
+ options,
84
+ async fn(state) {
85
+ const {
86
+ x,
87
+ y,
88
+ placement,
89
+ rects,
90
+ platform,
91
+ elements,
92
+ middlewareData
93
+ } = state;
94
+ // Since `element` is required, we don't Partial<> the type.
95
+ const {
96
+ element,
97
+ padding = 0
98
+ } = evaluate(options, state) || {};
99
+ if (element == null) {
100
+ return {};
101
+ }
102
+ const paddingObject = getPaddingObject(padding);
103
+ const coords = {
104
+ x,
105
+ y
106
+ };
107
+ const axis = getAlignmentAxis(placement);
108
+ const length = getAxisLength(axis);
109
+ const arrowDimensions = await platform.getDimensions(element);
110
+ const isYAxis = axis === 'y';
111
+ const minProp = isYAxis ? 'top' : 'left';
112
+ const maxProp = isYAxis ? 'bottom' : 'right';
113
+ const clientProp = isYAxis ? 'clientHeight' : 'clientWidth';
114
+ const endDiff = rects.reference[length] + rects.reference[axis] - coords[axis] - rects.floating[length];
115
+ const startDiff = coords[axis] - rects.reference[axis];
116
+ const arrowOffsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(element));
117
+ let clientSize = arrowOffsetParent ? arrowOffsetParent[clientProp] : 0;
118
+
119
+ // DOM platform can return `window` as the `offsetParent`.
120
+ if (!clientSize || !(await (platform.isElement == null ? void 0 : platform.isElement(arrowOffsetParent)))) {
121
+ clientSize = elements.floating[clientProp] || rects.floating[length];
122
+ }
123
+ const centerToReference = endDiff / 2 - startDiff / 2;
124
+
125
+ // If the padding is large enough that it causes the arrow to no longer be
126
+ // centered, modify the padding so that it is centered.
127
+ const largestPossiblePadding = clientSize / 2 - arrowDimensions[length] / 2 - 1;
128
+ const minPadding = min(paddingObject[minProp], largestPossiblePadding);
129
+ const maxPadding = min(paddingObject[maxProp], largestPossiblePadding);
130
+
131
+ // Make sure the arrow doesn't overflow the floating element if the center
132
+ // point is outside the floating element's bounds.
133
+ const min$1 = minPadding;
134
+ const max = clientSize - arrowDimensions[length] - maxPadding;
135
+ const center = clientSize / 2 - arrowDimensions[length] / 2 + centerToReference;
136
+ const offset = clamp(min$1, center, max);
137
+
138
+ // If the reference is small enough that the arrow's padding causes it to
139
+ // to point to nothing for an aligned placement, adjust the offset of the
140
+ // floating element itself. To ensure `shift()` continues to take action,
141
+ // a single reset is performed when this is true.
142
+ const shouldAddOffset = !middlewareData.arrow && getAlignment(placement) != null && center !== offset && rects.reference[length] / 2 - (center < min$1 ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0;
143
+ const alignmentOffset = shouldAddOffset ? center < min$1 ? center - min$1 : center - max : 0;
144
+ return {
145
+ [axis]: coords[axis] + alignmentOffset,
146
+ data: {
147
+ [axis]: offset,
148
+ centerOffset: center - offset - alignmentOffset,
149
+ ...(shouldAddOffset && {
150
+ alignmentOffset
151
+ })
152
+ },
153
+ reset: shouldAddOffset
154
+ };
155
+ }
156
+ });
157
+
158
+ function getPlacementList(alignment, autoAlignment, allowedPlacements) {
159
+ const allowedPlacementsSortedByAlignment = alignment ? [...allowedPlacements.filter(placement => getAlignment(placement) === alignment), ...allowedPlacements.filter(placement => getAlignment(placement) !== alignment)] : allowedPlacements.filter(placement => getSide(placement) === placement);
160
+ return allowedPlacementsSortedByAlignment.filter(placement => {
161
+ if (alignment) {
162
+ return getAlignment(placement) === alignment || (autoAlignment ? getOppositeAlignmentPlacement(placement) !== placement : false);
163
+ }
164
+ return true;
165
+ });
166
+ }
167
+ /**
168
+ * Optimizes the visibility of the floating element by choosing the placement
169
+ * that has the most space available automatically, without needing to specify a
170
+ * preferred placement. Alternative to `flip`.
171
+ * @see https://floating-ui.com/docs/autoPlacement
172
+ */
173
+ const autoPlacement = function (options) {
174
+ if (options === void 0) {
175
+ options = {};
176
+ }
177
+ return {
178
+ name: 'autoPlacement',
179
+ options,
180
+ async fn(state) {
181
+ var _middlewareData$autoP, _middlewareData$autoP2, _placementsThatFitOnE;
182
+ const {
183
+ rects,
184
+ middlewareData,
185
+ placement,
186
+ platform,
187
+ elements
188
+ } = state;
189
+ const {
190
+ crossAxis = false,
191
+ alignment,
192
+ allowedPlacements = placements,
193
+ autoAlignment = true,
194
+ ...detectOverflowOptions
195
+ } = evaluate(options, state);
196
+ const placements$1 = alignment !== undefined || allowedPlacements === placements ? getPlacementList(alignment || null, autoAlignment, allowedPlacements) : allowedPlacements;
197
+ const overflow = await detectOverflow(state, detectOverflowOptions);
198
+ const currentIndex = ((_middlewareData$autoP = middlewareData.autoPlacement) == null ? void 0 : _middlewareData$autoP.index) || 0;
199
+ const currentPlacement = placements$1[currentIndex];
200
+ if (currentPlacement == null) {
201
+ return {};
202
+ }
203
+ const alignmentSides = getAlignmentSides(currentPlacement, rects, await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating)));
204
+
205
+ // Make `computeCoords` start from the right place.
206
+ if (placement !== currentPlacement) {
207
+ return {
208
+ reset: {
209
+ placement: placements$1[0]
210
+ }
211
+ };
212
+ }
213
+ const currentOverflows = [overflow[getSide(currentPlacement)], overflow[alignmentSides[0]], overflow[alignmentSides[1]]];
214
+ const allOverflows = [...(((_middlewareData$autoP2 = middlewareData.autoPlacement) == null ? void 0 : _middlewareData$autoP2.overflows) || []), {
215
+ placement: currentPlacement,
216
+ overflows: currentOverflows
217
+ }];
218
+ const nextPlacement = placements$1[currentIndex + 1];
219
+
220
+ // There are more placements to check.
221
+ if (nextPlacement) {
222
+ return {
223
+ data: {
224
+ index: currentIndex + 1,
225
+ overflows: allOverflows
226
+ },
227
+ reset: {
228
+ placement: nextPlacement
229
+ }
230
+ };
231
+ }
232
+ const placementsSortedByMostSpace = allOverflows.map(d => {
233
+ const alignment = getAlignment(d.placement);
234
+ return [d.placement, alignment && crossAxis ?
235
+ // Check along the mainAxis and main crossAxis side.
236
+ d.overflows.slice(0, 2).reduce((acc, v) => acc + v, 0) :
237
+ // Check only the mainAxis.
238
+ d.overflows[0], d.overflows];
239
+ }).sort((a, b) => a[1] - b[1]);
240
+ const placementsThatFitOnEachSide = placementsSortedByMostSpace.filter(d => d[2].slice(0,
241
+ // Aligned placements should not check their opposite crossAxis
242
+ // side.
243
+ getAlignment(d[0]) ? 2 : 3).every(v => v <= 0));
244
+ const resetPlacement = ((_placementsThatFitOnE = placementsThatFitOnEachSide[0]) == null ? void 0 : _placementsThatFitOnE[0]) || placementsSortedByMostSpace[0][0];
245
+ if (resetPlacement !== placement) {
246
+ return {
247
+ data: {
248
+ index: currentIndex + 1,
249
+ overflows: allOverflows
250
+ },
251
+ reset: {
252
+ placement: resetPlacement
253
+ }
254
+ };
255
+ }
256
+ return {};
257
+ }
258
+ };
259
+ };
260
+
261
+ /**
262
+ * Optimizes the visibility of the floating element by flipping the `placement`
263
+ * in order to keep it in view when the preferred placement(s) will overflow the
264
+ * clipping boundary. Alternative to `autoPlacement`.
265
+ * @see https://floating-ui.com/docs/flip
266
+ */
267
+ const flip = function (options) {
268
+ if (options === void 0) {
269
+ options = {};
270
+ }
271
+ return {
272
+ name: 'flip',
273
+ options,
274
+ async fn(state) {
275
+ var _middlewareData$arrow, _middlewareData$flip;
276
+ const {
277
+ placement,
278
+ middlewareData,
279
+ rects,
280
+ initialPlacement,
281
+ platform,
282
+ elements
283
+ } = state;
284
+ const {
285
+ mainAxis: checkMainAxis = true,
286
+ crossAxis: checkCrossAxis = true,
287
+ fallbackPlacements: specifiedFallbackPlacements,
288
+ fallbackStrategy = 'bestFit',
289
+ fallbackAxisSideDirection = 'none',
290
+ flipAlignment = true,
291
+ ...detectOverflowOptions
292
+ } = evaluate(options, state);
293
+
294
+ // If a reset by the arrow was caused due to an alignment offset being
295
+ // added, we should skip any logic now since `flip()` has already done its
296
+ // work.
297
+ // https://github.com/floating-ui/floating-ui/issues/2549#issuecomment-1719601643
298
+ if ((_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
299
+ return {};
300
+ }
301
+ const side = getSide(placement);
302
+ const initialSideAxis = getSideAxis(initialPlacement);
303
+ const isBasePlacement = getSide(initialPlacement) === initialPlacement;
304
+ const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
305
+ const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement));
306
+ const hasFallbackAxisSideDirection = fallbackAxisSideDirection !== 'none';
307
+ if (!specifiedFallbackPlacements && hasFallbackAxisSideDirection) {
308
+ fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
309
+ }
310
+ const placements = [initialPlacement, ...fallbackPlacements];
311
+ const overflow = await detectOverflow(state, detectOverflowOptions);
312
+ const overflows = [];
313
+ let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
314
+ if (checkMainAxis) {
315
+ overflows.push(overflow[side]);
316
+ }
317
+ if (checkCrossAxis) {
318
+ const sides = getAlignmentSides(placement, rects, rtl);
319
+ overflows.push(overflow[sides[0]], overflow[sides[1]]);
320
+ }
321
+ overflowsData = [...overflowsData, {
322
+ placement,
323
+ overflows
324
+ }];
325
+
326
+ // One or more sides is overflowing.
327
+ if (!overflows.every(side => side <= 0)) {
328
+ var _middlewareData$flip2, _overflowsData$filter;
329
+ const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
330
+ const nextPlacement = placements[nextIndex];
331
+ if (nextPlacement) {
332
+ // Try next placement and re-run the lifecycle.
333
+ return {
334
+ data: {
335
+ index: nextIndex,
336
+ overflows: overflowsData
337
+ },
338
+ reset: {
339
+ placement: nextPlacement
340
+ }
341
+ };
342
+ }
343
+
344
+ // First, find the candidates that fit on the mainAxis side of overflow,
345
+ // then find the placement that fits the best on the main crossAxis side.
346
+ 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;
347
+
348
+ // Otherwise fallback.
349
+ if (!resetPlacement) {
350
+ switch (fallbackStrategy) {
351
+ case 'bestFit':
352
+ {
353
+ var _overflowsData$filter2;
354
+ const placement = (_overflowsData$filter2 = overflowsData.filter(d => {
355
+ if (hasFallbackAxisSideDirection) {
356
+ const currentSideAxis = getSideAxis(d.placement);
357
+ return currentSideAxis === initialSideAxis ||
358
+ // Create a bias to the `y` side axis due to horizontal
359
+ // reading directions favoring greater width.
360
+ currentSideAxis === 'y';
361
+ }
362
+ return true;
363
+ }).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];
364
+ if (placement) {
365
+ resetPlacement = placement;
366
+ }
367
+ break;
368
+ }
369
+ case 'initialPlacement':
370
+ resetPlacement = initialPlacement;
371
+ break;
372
+ }
373
+ }
374
+ if (placement !== resetPlacement) {
375
+ return {
376
+ reset: {
377
+ placement: resetPlacement
378
+ }
379
+ };
380
+ }
381
+ }
382
+ return {};
383
+ }
384
+ };
385
+ };
386
+
74
387
  function getSideOffsets(overflow, rect) {
75
388
  return {
76
389
  top: overflow.top - rect.height,
@@ -140,4 +453,444 @@ const hide = function (options) {
140
453
  };
141
454
  };
142
455
 
143
- export { detectOverflow, hide };
456
+ function getBoundingRect(rects) {
457
+ const minX = min(...rects.map(rect => rect.left));
458
+ const minY = min(...rects.map(rect => rect.top));
459
+ const maxX = max(...rects.map(rect => rect.right));
460
+ const maxY = max(...rects.map(rect => rect.bottom));
461
+ return {
462
+ x: minX,
463
+ y: minY,
464
+ width: maxX - minX,
465
+ height: maxY - minY
466
+ };
467
+ }
468
+ function getRectsByLine(rects) {
469
+ const sortedRects = rects.slice().sort((a, b) => a.y - b.y);
470
+ const groups = [];
471
+ let prevRect = null;
472
+ for (let i = 0; i < sortedRects.length; i++) {
473
+ const rect = sortedRects[i];
474
+ if (!prevRect || rect.y - prevRect.y > prevRect.height / 2) {
475
+ groups.push([rect]);
476
+ } else {
477
+ groups[groups.length - 1].push(rect);
478
+ }
479
+ prevRect = rect;
480
+ }
481
+ return groups.map(rect => rectToClientRect(getBoundingRect(rect)));
482
+ }
483
+ /**
484
+ * Provides improved positioning for inline reference elements that can span
485
+ * over multiple lines, such as hyperlinks or range selections.
486
+ * @see https://floating-ui.com/docs/inline
487
+ */
488
+ const inline = function (options) {
489
+ if (options === void 0) {
490
+ options = {};
491
+ }
492
+ return {
493
+ name: 'inline',
494
+ options,
495
+ async fn(state) {
496
+ const {
497
+ placement,
498
+ elements,
499
+ rects,
500
+ platform,
501
+ strategy
502
+ } = state;
503
+ // A MouseEvent's client{X,Y} coords can be up to 2 pixels off a
504
+ // ClientRect's bounds, despite the event listener being triggered. A
505
+ // padding of 2 seems to handle this issue.
506
+ const {
507
+ padding = 2,
508
+ x,
509
+ y
510
+ } = evaluate(options, state);
511
+ const nativeClientRects = Array.from((await (platform.getClientRects == null ? void 0 : platform.getClientRects(elements.reference))) || []);
512
+ const clientRects = getRectsByLine(nativeClientRects);
513
+ const fallback = rectToClientRect(getBoundingRect(nativeClientRects));
514
+ const paddingObject = getPaddingObject(padding);
515
+ function getBoundingClientRect() {
516
+ // There are two rects and they are disjoined.
517
+ if (clientRects.length === 2 && clientRects[0].left > clientRects[1].right && x != null && y != null) {
518
+ // Find the first rect in which the point is fully inside.
519
+ return clientRects.find(rect => x > rect.left - paddingObject.left && x < rect.right + paddingObject.right && y > rect.top - paddingObject.top && y < rect.bottom + paddingObject.bottom) || fallback;
520
+ }
521
+
522
+ // There are 2 or more connected rects.
523
+ if (clientRects.length >= 2) {
524
+ if (getSideAxis(placement) === 'y') {
525
+ const firstRect = clientRects[0];
526
+ const lastRect = clientRects[clientRects.length - 1];
527
+ const isTop = getSide(placement) === 'top';
528
+ const top = firstRect.top;
529
+ const bottom = lastRect.bottom;
530
+ const left = isTop ? firstRect.left : lastRect.left;
531
+ const right = isTop ? firstRect.right : lastRect.right;
532
+ const width = right - left;
533
+ const height = bottom - top;
534
+ return {
535
+ top,
536
+ bottom,
537
+ left,
538
+ right,
539
+ width,
540
+ height,
541
+ x: left,
542
+ y: top
543
+ };
544
+ }
545
+ const isLeftSide = getSide(placement) === 'left';
546
+ const maxRight = max(...clientRects.map(rect => rect.right));
547
+ const minLeft = min(...clientRects.map(rect => rect.left));
548
+ const measureRects = clientRects.filter(rect => isLeftSide ? rect.left === minLeft : rect.right === maxRight);
549
+ const top = measureRects[0].top;
550
+ const bottom = measureRects[measureRects.length - 1].bottom;
551
+ const left = minLeft;
552
+ const right = maxRight;
553
+ const width = right - left;
554
+ const height = bottom - top;
555
+ return {
556
+ top,
557
+ bottom,
558
+ left,
559
+ right,
560
+ width,
561
+ height,
562
+ x: left,
563
+ y: top
564
+ };
565
+ }
566
+ return fallback;
567
+ }
568
+ const resetRects = await platform.getElementRects({
569
+ reference: {
570
+ getBoundingClientRect
571
+ },
572
+ floating: elements.floating,
573
+ strategy
574
+ });
575
+ if (rects.reference.x !== resetRects.reference.x || rects.reference.y !== resetRects.reference.y || rects.reference.width !== resetRects.reference.width || rects.reference.height !== resetRects.reference.height) {
576
+ return {
577
+ reset: {
578
+ rects: resetRects
579
+ }
580
+ };
581
+ }
582
+ return {};
583
+ }
584
+ };
585
+ };
586
+
587
+ // For type backwards-compatibility, the `OffsetOptions` type was also
588
+ // Derivable.
589
+
590
+ async function convertValueToCoords(state, options) {
591
+ const {
592
+ placement,
593
+ platform,
594
+ elements
595
+ } = state;
596
+ const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
597
+ const side = getSide(placement);
598
+ const alignment = getAlignment(placement);
599
+ const isVertical = getSideAxis(placement) === 'y';
600
+ const mainAxisMulti = ['left', 'top'].includes(side) ? -1 : 1;
601
+ const crossAxisMulti = rtl && isVertical ? -1 : 1;
602
+ const rawValue = evaluate(options, state);
603
+
604
+ // eslint-disable-next-line prefer-const
605
+ let {
606
+ mainAxis,
607
+ crossAxis,
608
+ alignmentAxis
609
+ } = typeof rawValue === 'number' ? {
610
+ mainAxis: rawValue,
611
+ crossAxis: 0,
612
+ alignmentAxis: null
613
+ } : {
614
+ mainAxis: 0,
615
+ crossAxis: 0,
616
+ alignmentAxis: null,
617
+ ...rawValue
618
+ };
619
+ if (alignment && typeof alignmentAxis === 'number') {
620
+ crossAxis = alignment === 'end' ? alignmentAxis * -1 : alignmentAxis;
621
+ }
622
+ return isVertical ? {
623
+ x: crossAxis * crossAxisMulti,
624
+ y: mainAxis * mainAxisMulti
625
+ } : {
626
+ x: mainAxis * mainAxisMulti,
627
+ y: crossAxis * crossAxisMulti
628
+ };
629
+ }
630
+
631
+ /**
632
+ * Modifies the placement by translating the floating element along the
633
+ * specified axes.
634
+ * A number (shorthand for `mainAxis` or distance), or an axes configuration
635
+ * object may be passed.
636
+ * @see https://floating-ui.com/docs/offset
637
+ */
638
+ const offset = function (options) {
639
+ if (options === void 0) {
640
+ options = 0;
641
+ }
642
+ return {
643
+ name: 'offset',
644
+ options,
645
+ async fn(state) {
646
+ var _middlewareData$offse, _middlewareData$arrow;
647
+ const {
648
+ x,
649
+ y,
650
+ placement,
651
+ middlewareData
652
+ } = state;
653
+ const diffCoords = await convertValueToCoords(state, options);
654
+
655
+ // If the placement is the same and the arrow caused an alignment offset
656
+ // then we don't need to change the positioning coordinates.
657
+ if (placement === ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse.placement) && (_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
658
+ return {};
659
+ }
660
+ return {
661
+ x: x + diffCoords.x,
662
+ y: y + diffCoords.y,
663
+ data: {
664
+ ...diffCoords,
665
+ placement
666
+ }
667
+ };
668
+ }
669
+ };
670
+ };
671
+
672
+ /**
673
+ * Optimizes the visibility of the floating element by shifting it in order to
674
+ * keep it in view when it will overflow the clipping boundary.
675
+ * @see https://floating-ui.com/docs/shift
676
+ */
677
+ const shift = function (options) {
678
+ if (options === void 0) {
679
+ options = {};
680
+ }
681
+ return {
682
+ name: 'shift',
683
+ options,
684
+ async fn(state) {
685
+ const {
686
+ x,
687
+ y,
688
+ placement
689
+ } = state;
690
+ const {
691
+ mainAxis: checkMainAxis = true,
692
+ crossAxis: checkCrossAxis = false,
693
+ limiter = {
694
+ fn: _ref => {
695
+ let {
696
+ x,
697
+ y
698
+ } = _ref;
699
+ return {
700
+ x,
701
+ y
702
+ };
703
+ }
704
+ },
705
+ ...detectOverflowOptions
706
+ } = evaluate(options, state);
707
+ const coords = {
708
+ x,
709
+ y
710
+ };
711
+ const overflow = await detectOverflow(state, detectOverflowOptions);
712
+ const crossAxis = getSideAxis(getSide(placement));
713
+ const mainAxis = getOppositeAxis(crossAxis);
714
+ let mainAxisCoord = coords[mainAxis];
715
+ let crossAxisCoord = coords[crossAxis];
716
+ if (checkMainAxis) {
717
+ const minSide = mainAxis === 'y' ? 'top' : 'left';
718
+ const maxSide = mainAxis === 'y' ? 'bottom' : 'right';
719
+ const min = mainAxisCoord + overflow[minSide];
720
+ const max = mainAxisCoord - overflow[maxSide];
721
+ mainAxisCoord = clamp(min, mainAxisCoord, max);
722
+ }
723
+ if (checkCrossAxis) {
724
+ const minSide = crossAxis === 'y' ? 'top' : 'left';
725
+ const maxSide = crossAxis === 'y' ? 'bottom' : 'right';
726
+ const min = crossAxisCoord + overflow[minSide];
727
+ const max = crossAxisCoord - overflow[maxSide];
728
+ crossAxisCoord = clamp(min, crossAxisCoord, max);
729
+ }
730
+ const limitedCoords = limiter.fn({
731
+ ...state,
732
+ [mainAxis]: mainAxisCoord,
733
+ [crossAxis]: crossAxisCoord
734
+ });
735
+ return {
736
+ ...limitedCoords,
737
+ data: {
738
+ x: limitedCoords.x - x,
739
+ y: limitedCoords.y - y
740
+ }
741
+ };
742
+ }
743
+ };
744
+ };
745
+ /**
746
+ * Built-in `limiter` that will stop `shift()` at a certain point.
747
+ */
748
+ const limitShift = function (options) {
749
+ if (options === void 0) {
750
+ options = {};
751
+ }
752
+ return {
753
+ options,
754
+ fn(state) {
755
+ const {
756
+ x,
757
+ y,
758
+ placement,
759
+ rects,
760
+ middlewareData
761
+ } = state;
762
+ const {
763
+ offset = 0,
764
+ mainAxis: checkMainAxis = true,
765
+ crossAxis: checkCrossAxis = true
766
+ } = evaluate(options, state);
767
+ const coords = {
768
+ x,
769
+ y
770
+ };
771
+ const crossAxis = getSideAxis(placement);
772
+ const mainAxis = getOppositeAxis(crossAxis);
773
+ let mainAxisCoord = coords[mainAxis];
774
+ let crossAxisCoord = coords[crossAxis];
775
+ const rawOffset = evaluate(offset, state);
776
+ const computedOffset = typeof rawOffset === 'number' ? {
777
+ mainAxis: rawOffset,
778
+ crossAxis: 0
779
+ } : {
780
+ mainAxis: 0,
781
+ crossAxis: 0,
782
+ ...rawOffset
783
+ };
784
+ if (checkMainAxis) {
785
+ const len = mainAxis === 'y' ? 'height' : 'width';
786
+ const limitMin = rects.reference[mainAxis] - rects.floating[len] + computedOffset.mainAxis;
787
+ const limitMax = rects.reference[mainAxis] + rects.reference[len] - computedOffset.mainAxis;
788
+ if (mainAxisCoord < limitMin) {
789
+ mainAxisCoord = limitMin;
790
+ } else if (mainAxisCoord > limitMax) {
791
+ mainAxisCoord = limitMax;
792
+ }
793
+ }
794
+ if (checkCrossAxis) {
795
+ var _middlewareData$offse, _middlewareData$offse2;
796
+ const len = mainAxis === 'y' ? 'width' : 'height';
797
+ const isOriginSide = ['top', 'left'].includes(getSide(placement));
798
+ 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);
799
+ 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);
800
+ if (crossAxisCoord < limitMin) {
801
+ crossAxisCoord = limitMin;
802
+ } else if (crossAxisCoord > limitMax) {
803
+ crossAxisCoord = limitMax;
804
+ }
805
+ }
806
+ return {
807
+ [mainAxis]: mainAxisCoord,
808
+ [crossAxis]: crossAxisCoord
809
+ };
810
+ }
811
+ };
812
+ };
813
+
814
+ /**
815
+ * Provides data that allows you to change the size of the floating element —
816
+ * for instance, prevent it from overflowing the clipping boundary or match the
817
+ * width of the reference element.
818
+ * @see https://floating-ui.com/docs/size
819
+ */
820
+ const size = function (options) {
821
+ if (options === void 0) {
822
+ options = {};
823
+ }
824
+ return {
825
+ name: 'size',
826
+ options,
827
+ async fn(state) {
828
+ const {
829
+ placement,
830
+ rects,
831
+ platform,
832
+ elements
833
+ } = state;
834
+ const {
835
+ apply = () => {},
836
+ ...detectOverflowOptions
837
+ } = evaluate(options, state);
838
+ const overflow = await detectOverflow(state, detectOverflowOptions);
839
+ const side = getSide(placement);
840
+ const alignment = getAlignment(placement);
841
+ const isYAxis = getSideAxis(placement) === 'y';
842
+ const {
843
+ width,
844
+ height
845
+ } = rects.floating;
846
+ let heightSide;
847
+ let widthSide;
848
+ if (side === 'top' || side === 'bottom') {
849
+ heightSide = side;
850
+ widthSide = alignment === ((await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating))) ? 'start' : 'end') ? 'left' : 'right';
851
+ } else {
852
+ widthSide = side;
853
+ heightSide = alignment === 'end' ? 'top' : 'bottom';
854
+ }
855
+ const maximumClippingHeight = height - overflow.top - overflow.bottom;
856
+ const maximumClippingWidth = width - overflow.left - overflow.right;
857
+ const overflowAvailableHeight = min(height - overflow[heightSide], maximumClippingHeight);
858
+ const overflowAvailableWidth = min(width - overflow[widthSide], maximumClippingWidth);
859
+ const noShift = !state.middlewareData.shift;
860
+ let availableHeight = overflowAvailableHeight;
861
+ let availableWidth = overflowAvailableWidth;
862
+ if (isYAxis) {
863
+ availableWidth = alignment || noShift ? min(overflowAvailableWidth, maximumClippingWidth) : maximumClippingWidth;
864
+ } else {
865
+ availableHeight = alignment || noShift ? min(overflowAvailableHeight, maximumClippingHeight) : maximumClippingHeight;
866
+ }
867
+ if (noShift && !alignment) {
868
+ const xMin = max(overflow.left, 0);
869
+ const xMax = max(overflow.right, 0);
870
+ const yMin = max(overflow.top, 0);
871
+ const yMax = max(overflow.bottom, 0);
872
+ if (isYAxis) {
873
+ availableWidth = width - 2 * (xMin !== 0 || xMax !== 0 ? xMin + xMax : max(overflow.left, overflow.right));
874
+ } else {
875
+ availableHeight = height - 2 * (yMin !== 0 || yMax !== 0 ? yMin + yMax : max(overflow.top, overflow.bottom));
876
+ }
877
+ }
878
+ await apply({
879
+ ...state,
880
+ availableWidth,
881
+ availableHeight
882
+ });
883
+ const nextDimensions = await platform.getDimensions(elements.floating);
884
+ if (width !== nextDimensions.width || height !== nextDimensions.height) {
885
+ return {
886
+ reset: {
887
+ rects: true
888
+ }
889
+ };
890
+ }
891
+ return {};
892
+ }
893
+ };
894
+ };
895
+
896
+ export { arrow, autoPlacement, detectOverflow, flip, hide, inline, limitShift, offset, shift, size };