@carbon/react 1.76.0 → 1.77.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 (188) hide show
  1. package/.playwright/INTERNAL_AVT_REPORT_DO_NOT_USE.json +810 -775
  2. package/es/components/Button/Button.d.ts +9 -1
  3. package/es/components/Button/Button.js +8 -0
  4. package/es/components/CodeSnippet/CodeSnippet.d.ts +2 -2
  5. package/es/components/ComboBox/ComboBox.d.ts +2 -2
  6. package/es/components/ComboBox/ComboBox.js +34 -12
  7. package/es/components/ComboButton/index.js +1 -2
  8. package/es/components/ComposedModal/ComposedModal.js +1 -1
  9. package/es/components/ContentSwitcher/index.d.ts +0 -1
  10. package/es/components/ContextMenu/useContextMenu.d.ts +0 -1
  11. package/es/components/Copy/Copy.js +1 -1
  12. package/es/components/DataTable/DataTable.d.ts +12 -20
  13. package/es/components/DataTable/DataTable.js +1 -9
  14. package/es/components/DataTable/Table.js +1 -1
  15. package/es/components/DataTable/TableActionList.d.ts +1 -1
  16. package/es/components/DataTable/TableBody.js +1 -1
  17. package/es/components/DataTable/TableContext.d.ts +0 -1
  18. package/es/components/DataTable/TableHead.d.ts +1 -1
  19. package/es/components/DataTable/TableToolbarContent.d.ts +1 -1
  20. package/es/components/DatePicker/plugins/fixEventsPlugin.js +2 -2
  21. package/es/components/DatePickerInput/DatePickerInput.js +1 -1
  22. package/es/components/Dropdown/Dropdown.js +1 -2
  23. package/es/components/FluidForm/FormContext.d.ts +0 -1
  24. package/es/components/Grid/CSSGrid.js +1 -1
  25. package/es/components/Grid/Grid.js +1 -1
  26. package/es/components/Grid/GridTypes.d.ts +0 -1
  27. package/es/components/Heading/index.d.ts +1 -1
  28. package/es/components/IconButton/index.d.ts +17 -1
  29. package/es/components/IconButton/index.js +20 -1
  30. package/es/components/InlineCheckbox/InlineCheckbox.js +1 -1
  31. package/es/components/InlineLoading/InlineLoading.d.ts +1 -1
  32. package/es/components/InlineLoading/InlineLoading.js +21 -7
  33. package/es/components/Menu/Menu.js +2 -2
  34. package/es/components/Menu/MenuContext.d.ts +1 -1
  35. package/es/components/MenuButton/index.d.ts +1 -1
  36. package/es/components/MenuButton/index.js +1 -2
  37. package/es/components/Modal/Modal.js +1 -1
  38. package/es/components/Modal/next/index.d.ts +175 -0
  39. package/es/components/MultiSelect/FilterableMultiSelect.d.ts +2 -2
  40. package/es/components/MultiSelect/FilterableMultiSelect.js +12 -5
  41. package/es/components/MultiSelect/MultiSelect.d.ts +1 -1
  42. package/es/components/MultiSelect/MultiSelect.js +1 -2
  43. package/es/components/Pagination/Pagination.js +2 -2
  44. package/es/components/Popover/index.js +2 -3
  45. package/es/components/PrimaryButton/PrimaryButton.d.ts +1 -1
  46. package/es/components/RadioTile/RadioTile.d.ts +1 -1
  47. package/es/components/SecondaryButton/SecondaryButton.d.ts +1 -1
  48. package/es/components/Slider/Slider.d.ts +1 -1
  49. package/es/components/Slider/Slider.js +1 -1
  50. package/es/components/Slider/index.d.ts +0 -1
  51. package/es/components/Tabs/Tabs.d.ts +3 -3
  52. package/es/components/Tabs/Tabs.js +4 -4
  53. package/es/components/Tag/DismissibleTag.d.ts +2 -2
  54. package/es/components/Tag/OperationalTag.d.ts +1 -1
  55. package/es/components/Tag/SelectableTag.d.ts +2 -2
  56. package/es/components/Text/index.d.ts +2 -2
  57. package/es/components/TextInput/PasswordInput.d.ts +1 -1
  58. package/es/components/Theme/index.d.ts +1 -1
  59. package/es/components/Tile/Tile.d.ts +1 -1
  60. package/es/components/Tile/Tile.js +1 -1
  61. package/es/components/Toggletip/index.d.ts +3 -3
  62. package/es/components/Toggletip/index.js +5 -4
  63. package/es/components/Tooltip/Tooltip.d.ts +17 -1
  64. package/es/components/Tooltip/Tooltip.js +12 -2
  65. package/es/components/TreeView/TreeNode.d.ts +27 -19
  66. package/es/components/TreeView/TreeNode.js +100 -31
  67. package/es/components/TreeView/TreeView.js +1 -1
  68. package/es/components/UIShell/Content.d.ts +9 -9
  69. package/es/components/UIShell/HeaderGlobalBar.d.ts +1 -1
  70. package/es/components/UIShell/HeaderMenu.d.ts +69 -25
  71. package/es/components/UIShell/HeaderMenuButton.d.ts +69 -27
  72. package/es/components/UIShell/HeaderMenuItem.d.ts +4 -3
  73. package/es/components/UIShell/HeaderMenuItem.js +1 -1
  74. package/es/components/UIShell/HeaderName.js +1 -1
  75. package/es/components/UIShell/HeaderNavigation.d.ts +69 -25
  76. package/es/components/UIShell/Link.d.ts +14 -11
  77. package/es/components/UIShell/Link.js +5 -6
  78. package/es/components/UIShell/SideNav.js +3 -3
  79. package/es/components/UIShell/SideNavLink.js +1 -1
  80. package/es/components/UIShell/SideNavMenuItem.d.ts +51 -3
  81. package/es/components/UIShell/SideNavMenuItem.js +6 -6
  82. package/es/components/UIShell/SwitcherItem.d.ts +2 -2
  83. package/es/components/UIShell/SwitcherItem.js +1 -1
  84. package/es/internal/PolymorphicProps.d.ts +0 -1
  85. package/es/internal/Selection.d.ts +38 -0
  86. package/es/internal/Selection.js +26 -113
  87. package/es/node_modules/es-toolkit/dist/compat/function/debounce.mjs.js +55 -0
  88. package/es/node_modules/es-toolkit/dist/compat/function/throttle.mjs.js +23 -0
  89. package/es/node_modules/es-toolkit/dist/function/debounce.mjs.js +70 -0
  90. package/es/tools/wrapComponent.d.ts +1 -1
  91. package/lib/components/Button/Button.d.ts +9 -1
  92. package/lib/components/Button/Button.js +8 -0
  93. package/lib/components/CodeSnippet/CodeSnippet.d.ts +2 -2
  94. package/lib/components/ComboBox/ComboBox.d.ts +2 -2
  95. package/lib/components/ComboBox/ComboBox.js +34 -12
  96. package/lib/components/ComboButton/index.js +1 -2
  97. package/lib/components/ComposedModal/ComposedModal.js +2 -2
  98. package/lib/components/ContentSwitcher/index.d.ts +0 -1
  99. package/lib/components/ContextMenu/useContextMenu.d.ts +0 -1
  100. package/lib/components/Copy/Copy.js +2 -2
  101. package/lib/components/DataTable/DataTable.d.ts +12 -20
  102. package/lib/components/DataTable/DataTable.js +1 -9
  103. package/lib/components/DataTable/Table.js +3 -3
  104. package/lib/components/DataTable/TableActionList.d.ts +1 -1
  105. package/lib/components/DataTable/TableBody.js +1 -1
  106. package/lib/components/DataTable/TableContext.d.ts +0 -1
  107. package/lib/components/DataTable/TableHead.d.ts +1 -1
  108. package/lib/components/DataTable/TableToolbarContent.d.ts +1 -1
  109. package/lib/components/DatePicker/plugins/fixEventsPlugin.js +2 -2
  110. package/lib/components/DatePickerInput/DatePickerInput.js +1 -1
  111. package/lib/components/Dropdown/Dropdown.js +1 -2
  112. package/lib/components/FluidForm/FormContext.d.ts +0 -1
  113. package/lib/components/Grid/CSSGrid.js +1 -1
  114. package/lib/components/Grid/Grid.js +1 -1
  115. package/lib/components/Grid/GridTypes.d.ts +0 -1
  116. package/lib/components/Heading/index.d.ts +1 -1
  117. package/lib/components/IconButton/index.d.ts +17 -1
  118. package/lib/components/IconButton/index.js +20 -1
  119. package/lib/components/InlineCheckbox/InlineCheckbox.js +1 -1
  120. package/lib/components/InlineLoading/InlineLoading.d.ts +1 -1
  121. package/lib/components/InlineLoading/InlineLoading.js +20 -6
  122. package/lib/components/Menu/Menu.js +2 -2
  123. package/lib/components/Menu/MenuContext.d.ts +1 -1
  124. package/lib/components/MenuButton/index.d.ts +1 -1
  125. package/lib/components/MenuButton/index.js +1 -2
  126. package/lib/components/Modal/Modal.js +2 -2
  127. package/lib/components/Modal/next/index.d.ts +175 -0
  128. package/lib/components/MultiSelect/FilterableMultiSelect.d.ts +2 -2
  129. package/lib/components/MultiSelect/FilterableMultiSelect.js +11 -4
  130. package/lib/components/MultiSelect/MultiSelect.d.ts +1 -1
  131. package/lib/components/MultiSelect/MultiSelect.js +1 -2
  132. package/lib/components/Pagination/Pagination.js +3 -2
  133. package/lib/components/Popover/index.js +2 -3
  134. package/lib/components/PrimaryButton/PrimaryButton.d.ts +1 -1
  135. package/lib/components/RadioTile/RadioTile.d.ts +1 -1
  136. package/lib/components/SecondaryButton/SecondaryButton.d.ts +1 -1
  137. package/lib/components/Slider/Slider.d.ts +1 -1
  138. package/lib/components/Slider/Slider.js +2 -2
  139. package/lib/components/Slider/index.d.ts +0 -1
  140. package/lib/components/Tabs/Tabs.d.ts +3 -3
  141. package/lib/components/Tabs/Tabs.js +6 -6
  142. package/lib/components/Tag/DismissibleTag.d.ts +2 -2
  143. package/lib/components/Tag/OperationalTag.d.ts +1 -1
  144. package/lib/components/Tag/SelectableTag.d.ts +2 -2
  145. package/lib/components/Text/index.d.ts +2 -2
  146. package/lib/components/TextInput/PasswordInput.d.ts +1 -1
  147. package/lib/components/Theme/index.d.ts +1 -1
  148. package/lib/components/Tile/Tile.d.ts +1 -1
  149. package/lib/components/Tile/Tile.js +1 -1
  150. package/lib/components/Toggletip/index.d.ts +3 -3
  151. package/lib/components/Toggletip/index.js +5 -4
  152. package/lib/components/Tooltip/Tooltip.d.ts +17 -1
  153. package/lib/components/Tooltip/Tooltip.js +12 -2
  154. package/lib/components/TreeView/TreeNode.d.ts +27 -19
  155. package/lib/components/TreeView/TreeNode.js +100 -31
  156. package/lib/components/TreeView/TreeView.js +1 -1
  157. package/lib/components/UIShell/Content.d.ts +9 -9
  158. package/lib/components/UIShell/HeaderGlobalBar.d.ts +1 -1
  159. package/lib/components/UIShell/HeaderMenu.d.ts +69 -25
  160. package/lib/components/UIShell/HeaderMenuButton.d.ts +69 -27
  161. package/lib/components/UIShell/HeaderMenuItem.d.ts +4 -3
  162. package/lib/components/UIShell/HeaderMenuItem.js +1 -1
  163. package/lib/components/UIShell/HeaderName.js +1 -1
  164. package/lib/components/UIShell/HeaderNavigation.d.ts +69 -25
  165. package/lib/components/UIShell/Link.d.ts +14 -11
  166. package/lib/components/UIShell/Link.js +4 -4
  167. package/lib/components/UIShell/SideNav.js +3 -3
  168. package/lib/components/UIShell/SideNavLink.js +1 -1
  169. package/lib/components/UIShell/SideNavMenuItem.d.ts +51 -3
  170. package/lib/components/UIShell/SideNavMenuItem.js +6 -6
  171. package/lib/components/UIShell/SwitcherItem.d.ts +2 -2
  172. package/lib/components/UIShell/SwitcherItem.js +1 -1
  173. package/lib/internal/PolymorphicProps.d.ts +0 -1
  174. package/lib/internal/Selection.d.ts +38 -0
  175. package/lib/internal/Selection.js +24 -114
  176. package/lib/node_modules/es-toolkit/dist/compat/function/debounce.mjs.js +59 -0
  177. package/lib/node_modules/es-toolkit/dist/compat/function/throttle.mjs.js +27 -0
  178. package/lib/node_modules/es-toolkit/dist/function/debounce.mjs.js +74 -0
  179. package/lib/tools/wrapComponent.d.ts +1 -1
  180. package/package.json +10 -9
  181. package/es/node_modules/@floating-ui/core/dist/floating-ui.core.mjs.js +0 -896
  182. package/es/node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs.js +0 -76
  183. package/es/node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs.js +0 -139
  184. package/es/tools/array.js +0 -29
  185. package/lib/node_modules/@floating-ui/core/dist/floating-ui.core.mjs.js +0 -909
  186. package/lib/node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs.js +0 -80
  187. package/lib/node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs.js +0 -163
  188. package/lib/tools/array.js +0 -33
@@ -1,896 +0,0 @@
1
- /**
2
- * Copyright IBM Corp. 2016, 2023
3
- *
4
- * This source code is licensed under the Apache-2.0 license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- */
7
-
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
- export { rectToClientRect } from '../../utils/dist/floating-ui.utils.mjs.js';
10
-
11
- /**
12
- * Resolves with an object of overflow side offsets that determine how much the
13
- * element is overflowing a given clipping boundary on each side.
14
- * - positive = overflowing the boundary by that number of pixels
15
- * - negative = how many pixels left before it will overflow
16
- * - 0 = lies flush with the boundary
17
- * @see https://floating-ui.com/docs/detectOverflow
18
- */
19
- async function detectOverflow(state, options) {
20
- var _await$platform$isEle;
21
- if (options === void 0) {
22
- options = {};
23
- }
24
- const {
25
- x,
26
- y,
27
- platform,
28
- rects,
29
- elements,
30
- strategy
31
- } = state;
32
- const {
33
- boundary = 'clippingAncestors',
34
- rootBoundary = 'viewport',
35
- elementContext = 'floating',
36
- altBoundary = false,
37
- padding = 0
38
- } = evaluate(options, state);
39
- const paddingObject = getPaddingObject(padding);
40
- const altContext = elementContext === 'floating' ? 'reference' : 'floating';
41
- const element = elements[altBoundary ? altContext : elementContext];
42
- const clippingClientRect = rectToClientRect(await platform.getClippingRect({
43
- 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))),
44
- boundary,
45
- rootBoundary,
46
- strategy
47
- }));
48
- const rect = elementContext === 'floating' ? {
49
- x,
50
- y,
51
- width: rects.floating.width,
52
- height: rects.floating.height
53
- } : rects.reference;
54
- const offsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating));
55
- const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) ? (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || {
56
- x: 1,
57
- y: 1
58
- } : {
59
- x: 1,
60
- y: 1
61
- };
62
- const elementClientRect = rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({
63
- elements,
64
- rect,
65
- offsetParent,
66
- strategy
67
- }) : rect);
68
- return {
69
- top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
70
- bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
71
- left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
72
- right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
73
- };
74
- }
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
-
387
- function getSideOffsets(overflow, rect) {
388
- return {
389
- top: overflow.top - rect.height,
390
- right: overflow.right - rect.width,
391
- bottom: overflow.bottom - rect.height,
392
- left: overflow.left - rect.width
393
- };
394
- }
395
- function isAnySideFullyClipped(overflow) {
396
- return sides.some(side => overflow[side] >= 0);
397
- }
398
- /**
399
- * Provides data to hide the floating element in applicable situations, such as
400
- * when it is not in the same clipping context as the reference element.
401
- * @see https://floating-ui.com/docs/hide
402
- */
403
- const hide = function (options) {
404
- if (options === void 0) {
405
- options = {};
406
- }
407
- return {
408
- name: 'hide',
409
- options,
410
- async fn(state) {
411
- const {
412
- rects
413
- } = state;
414
- const {
415
- strategy = 'referenceHidden',
416
- ...detectOverflowOptions
417
- } = evaluate(options, state);
418
- switch (strategy) {
419
- case 'referenceHidden':
420
- {
421
- const overflow = await detectOverflow(state, {
422
- ...detectOverflowOptions,
423
- elementContext: 'reference'
424
- });
425
- const offsets = getSideOffsets(overflow, rects.reference);
426
- return {
427
- data: {
428
- referenceHiddenOffsets: offsets,
429
- referenceHidden: isAnySideFullyClipped(offsets)
430
- }
431
- };
432
- }
433
- case 'escaped':
434
- {
435
- const overflow = await detectOverflow(state, {
436
- ...detectOverflowOptions,
437
- altBoundary: true
438
- });
439
- const offsets = getSideOffsets(overflow, rects.floating);
440
- return {
441
- data: {
442
- escapedOffsets: offsets,
443
- escaped: isAnySideFullyClipped(offsets)
444
- }
445
- };
446
- }
447
- default:
448
- {
449
- return {};
450
- }
451
- }
452
- }
453
- };
454
- };
455
-
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 };