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