@carbon/ibm-products 2.71.0 → 2.72.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 (222) hide show
  1. package/css/carbon.css +50 -0
  2. package/css/carbon.css.map +1 -1
  3. package/css/index-full-carbon.css +560 -185
  4. package/css/index-full-carbon.css.map +1 -1
  5. package/css/index-full-carbon.min.css +1 -1
  6. package/css/index-full-carbon.min.css.map +1 -1
  7. package/css/index-without-carbon-released-only.css +132 -1
  8. package/css/index-without-carbon-released-only.css.map +1 -1
  9. package/css/index-without-carbon-released-only.min.css +1 -1
  10. package/css/index-without-carbon-released-only.min.css.map +1 -1
  11. package/css/index-without-carbon.css +570 -245
  12. package/css/index-without-carbon.css.map +1 -1
  13. package/css/index-without-carbon.min.css +1 -1
  14. package/css/index-without-carbon.min.css.map +1 -1
  15. package/css/index.css +358 -33
  16. package/css/index.css.map +1 -1
  17. package/css/index.min.css +1 -1
  18. package/css/index.min.css.map +1 -1
  19. package/es/components/{BigNumbers/BigNumbers.d.ts → BigNumber/BigNumber.d.ts} +5 -5
  20. package/es/components/{BigNumbers/BigNumbers.js → BigNumber/BigNumber.js} +12 -12
  21. package/es/components/BigNumber/BigNumberSkeleton.d.ts +17 -0
  22. package/es/components/{BigNumbers/BigNumbersSkeleton.js → BigNumber/BigNumberSkeleton.js} +16 -16
  23. package/es/components/{BigNumbers → BigNumber}/constants.d.ts +3 -3
  24. package/es/components/{BigNumbers → BigNumber}/constants.js +6 -6
  25. package/es/components/{BigNumbers → BigNumber}/index.d.ts +2 -2
  26. package/es/components/Coachmark/next/Coachmark/Coachmark.d.ts +72 -0
  27. package/es/components/Coachmark/next/Coachmark/Coachmark.js +185 -0
  28. package/es/components/Coachmark/next/Coachmark/CoachmarkBeacon/CoachmarkBeacon.d.ts +44 -0
  29. package/es/components/Coachmark/next/Coachmark/CoachmarkBeacon/index.d.ts +8 -0
  30. package/es/components/Coachmark/next/Coachmark/CoachmarkBubble/CoachmarkBubble.d.ts +38 -0
  31. package/es/components/Coachmark/next/Coachmark/CoachmarkBubble/CoachmarkBubble.js +125 -0
  32. package/es/components/Coachmark/next/Coachmark/CoachmarkBubble/CoachmarkBubbleHeader.d.ts +24 -0
  33. package/es/components/Coachmark/next/Coachmark/CoachmarkBubble/CoachmarkBubbleHeader.js +25 -0
  34. package/es/components/Coachmark/next/Coachmark/CoachmarkBubble/index.d.ts +10 -0
  35. package/es/components/Coachmark/next/Coachmark/CoachmarkContent.d.ts +34 -0
  36. package/es/components/Coachmark/next/Coachmark/CoachmarkContent.js +118 -0
  37. package/es/components/Coachmark/next/Coachmark/ContentBody.d.ts +23 -0
  38. package/es/components/Coachmark/next/Coachmark/ContentBody.js +37 -0
  39. package/es/components/Coachmark/next/Coachmark/ContentHeader.d.ts +21 -0
  40. package/es/components/Coachmark/next/Coachmark/ContentHeader.js +89 -0
  41. package/{lib/components/BigNumbers → es/components/Coachmark/next/Coachmark}/index.d.ts +2 -2
  42. package/es/components/CoachmarkBeacon/CoachmarkBeacon.js +0 -1
  43. package/es/components/ConditionBuilder/ConditionBuilderContent/ConditionBuilderContent.js +2 -1
  44. package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItem.js +11 -5
  45. package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemDate/ConditionBuilderItemDate.js +1 -1
  46. package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemNumber/ConditionBuilderItemNumber.js +11 -4
  47. package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ItemOption.js +2 -2
  48. package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ItemOptionForValueField.js +1 -1
  49. package/es/components/ConditionBuilder/ConditionGroupBuilder/ConditionGroupBuilder.js +42 -3
  50. package/es/components/ConditionBuilder/ConditionPreview/ConditionPreview.d.ts +3 -1
  51. package/es/components/ConditionBuilder/ConditionPreview/ConditionPreview.js +5 -3
  52. package/es/components/ConditionBuilder/utils/useTranslations.js +1 -1
  53. package/es/components/EditInPlace/EditInPlace.js +0 -3
  54. package/es/components/EmptyStates/EmptyState.d.ts +2 -2
  55. package/es/components/EmptyStates/EmptyState.js +2 -8
  56. package/es/components/FilterPanel/FilterPanelGroup/index.d.ts +1 -0
  57. package/es/components/InterstitialScreen/InterstitialScreen.d.ts +1 -25
  58. package/es/components/InterstitialScreen/InterstitialScreen.js +3 -19
  59. package/es/components/InterstitialScreen/InterstitialScreenBody.d.ts +1 -1
  60. package/es/components/InterstitialScreen/InterstitialScreenBody.js +1 -1
  61. package/es/components/InterstitialScreen/InterstitialScreenFooter.d.ts +1 -1
  62. package/es/components/InterstitialScreen/InterstitialScreenFooter.js +1 -1
  63. package/es/components/InterstitialScreen/InterstitialScreenHeader.d.ts +6 -0
  64. package/es/components/InterstitialScreen/InterstitialScreenHeader.js +1 -1
  65. package/es/components/InterstitialScreen/_story-assets/InterstitialScreenViewModule/InterstitialScreenViewModule.d.ts +1 -1
  66. package/es/components/InterstitialScreen/context.d.ts +31 -0
  67. package/es/components/InterstitialScreen/context.js +18 -0
  68. package/es/components/InterstitialScreen/index.d.ts +3 -2
  69. package/es/components/NotificationsPanel/NotificationsPanel.js +36 -13
  70. package/es/components/PageHeader/PageHeader.d.ts +2 -1
  71. package/es/components/PageHeader/PageHeader.js +2 -1
  72. package/es/components/PageHeader/next/PageHeader.d.ts +18 -3
  73. package/es/components/PageHeader/next/PageHeader.js +260 -12
  74. package/es/components/PageHeader/next/context.d.ts +25 -0
  75. package/es/components/PageHeader/next/context.js +30 -0
  76. package/es/components/PageHeader/next/index.d.ts +3 -3
  77. package/es/components/PageHeader/next/overflowHandler.d.ts +95 -0
  78. package/es/components/PageHeader/next/overflowHandler.js +162 -0
  79. package/es/components/PageHeader/next/utils.d.ts +19 -0
  80. package/es/components/PageHeader/next/utils.js +68 -0
  81. package/es/components/ProductiveCard/ProductiveCard.js +2 -1
  82. package/es/components/ScrollGradient/ScrollGradient.js +1 -2
  83. package/es/components/SidePanel/SidePanel.d.ts +4 -0
  84. package/es/components/SidePanel/SidePanel.js +8 -2
  85. package/es/components/Tearsheet/TearsheetShell.js +8 -5
  86. package/es/components/TruncatedText/TruncatedText.d.ts +48 -0
  87. package/es/components/TruncatedText/TruncatedText.js +86 -0
  88. package/es/components/TruncatedText/index.d.ts +7 -0
  89. package/es/components/TruncatedText/useTruncatedText.d.ts +16 -0
  90. package/es/components/TruncatedText/useTruncatedText.js +41 -0
  91. package/es/components/index.d.ts +4 -2
  92. package/es/global/js/hooks/useOverflowString.d.ts +2 -2
  93. package/es/global/js/hooks/useResizeObserver.d.ts +1 -1
  94. package/es/global/js/package-settings.d.ts +2 -1
  95. package/es/global/js/package-settings.js +3 -2
  96. package/es/global/js/utils/checkForOverflow.js +21 -0
  97. package/es/global/js/utils/makeDraggable/index.d.ts +1 -0
  98. package/es/global/js/utils/makeDraggable/makeDraggable.d.ts +19 -0
  99. package/es/global/js/utils/makeDraggable/makeDraggable.js +91 -0
  100. package/es/global/js/utils/makeDraggable/makeDraggable.stories.d.ts +22 -0
  101. package/es/index.js +4 -2
  102. package/es/node_modules/@floating-ui/core/dist/floating-ui.core.js +592 -0
  103. package/es/node_modules/@floating-ui/dom/dist/floating-ui.dom.js +713 -0
  104. package/es/node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js +95 -0
  105. package/es/node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.js +161 -0
  106. package/es/node_modules/@floating-ui/utils/dist/floating-ui.utils.js +142 -0
  107. package/es/settings.d.ts +2 -1
  108. package/lib/components/{BigNumbers/BigNumbers.d.ts → BigNumber/BigNumber.d.ts} +5 -5
  109. package/lib/components/{BigNumbers/BigNumbers.js → BigNumber/BigNumber.js} +11 -11
  110. package/lib/components/BigNumber/BigNumberSkeleton.d.ts +17 -0
  111. package/lib/components/{BigNumbers/BigNumbersSkeleton.js → BigNumber/BigNumberSkeleton.js} +15 -15
  112. package/lib/components/{BigNumbers → BigNumber}/constants.d.ts +3 -3
  113. package/lib/components/{BigNumbers → BigNumber}/constants.js +6 -6
  114. package/lib/components/BigNumber/index.d.ts +7 -0
  115. package/lib/components/Coachmark/Coachmark.js +2 -2
  116. package/lib/components/Coachmark/next/Coachmark/Coachmark.d.ts +72 -0
  117. package/lib/components/Coachmark/next/Coachmark/Coachmark.js +189 -0
  118. package/lib/components/Coachmark/next/Coachmark/CoachmarkBeacon/CoachmarkBeacon.d.ts +44 -0
  119. package/lib/components/Coachmark/next/Coachmark/CoachmarkBeacon/index.d.ts +8 -0
  120. package/lib/components/Coachmark/next/Coachmark/CoachmarkBubble/CoachmarkBubble.d.ts +38 -0
  121. package/lib/components/Coachmark/next/Coachmark/CoachmarkBubble/CoachmarkBubble.js +127 -0
  122. package/lib/components/Coachmark/next/Coachmark/CoachmarkBubble/CoachmarkBubbleHeader.d.ts +24 -0
  123. package/lib/components/Coachmark/next/Coachmark/CoachmarkBubble/CoachmarkBubbleHeader.js +27 -0
  124. package/lib/components/Coachmark/next/Coachmark/CoachmarkBubble/index.d.ts +10 -0
  125. package/lib/components/Coachmark/next/Coachmark/CoachmarkContent.d.ts +34 -0
  126. package/lib/components/Coachmark/next/Coachmark/CoachmarkContent.js +122 -0
  127. package/lib/components/Coachmark/next/Coachmark/ContentBody.d.ts +23 -0
  128. package/lib/components/Coachmark/next/Coachmark/ContentBody.js +41 -0
  129. package/lib/components/Coachmark/next/Coachmark/ContentHeader.d.ts +21 -0
  130. package/lib/components/Coachmark/next/Coachmark/ContentHeader.js +93 -0
  131. package/lib/components/Coachmark/next/Coachmark/index.d.ts +7 -0
  132. package/lib/components/CoachmarkBeacon/CoachmarkBeacon.js +0 -1
  133. package/lib/components/CoachmarkFixed/CoachmarkFixed.js +2 -2
  134. package/lib/components/CoachmarkStack/CoachmarkStack.js +2 -2
  135. package/lib/components/CoachmarkStack/CoachmarkStackHome.js +2 -2
  136. package/lib/components/ConditionBuilder/ConditionBuilderContent/ConditionBuilderContent.js +2 -1
  137. package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItem.js +11 -5
  138. package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemDate/ConditionBuilderItemDate.js +1 -1
  139. package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemNumber/ConditionBuilderItemNumber.js +11 -4
  140. package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ItemOption.js +2 -2
  141. package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ItemOptionForValueField.js +1 -1
  142. package/lib/components/ConditionBuilder/ConditionGroupBuilder/ConditionGroupBuilder.js +41 -2
  143. package/lib/components/ConditionBuilder/ConditionPreview/ConditionPreview.d.ts +3 -1
  144. package/lib/components/ConditionBuilder/ConditionPreview/ConditionPreview.js +5 -3
  145. package/lib/components/ConditionBuilder/utils/useTranslations.js +1 -1
  146. package/lib/components/EditInPlace/EditInPlace.js +0 -3
  147. package/lib/components/EmptyStates/EmptyState.d.ts +2 -2
  148. package/lib/components/EmptyStates/EmptyState.js +2 -8
  149. package/lib/components/FilterPanel/FilterPanelGroup/index.d.ts +1 -0
  150. package/lib/components/InterstitialScreen/InterstitialScreen.d.ts +1 -25
  151. package/lib/components/InterstitialScreen/InterstitialScreen.js +6 -25
  152. package/lib/components/InterstitialScreen/InterstitialScreenBody.d.ts +1 -1
  153. package/lib/components/InterstitialScreen/InterstitialScreenBody.js +6 -6
  154. package/lib/components/InterstitialScreen/InterstitialScreenFooter.d.ts +1 -1
  155. package/lib/components/InterstitialScreen/InterstitialScreenFooter.js +9 -9
  156. package/lib/components/InterstitialScreen/InterstitialScreenHeader.d.ts +6 -0
  157. package/lib/components/InterstitialScreen/InterstitialScreenHeader.js +5 -5
  158. package/lib/components/InterstitialScreen/_story-assets/InterstitialScreenViewModule/InterstitialScreenViewModule.d.ts +1 -1
  159. package/lib/components/InterstitialScreen/context.d.ts +31 -0
  160. package/lib/components/InterstitialScreen/context.js +21 -0
  161. package/lib/components/InterstitialScreen/index.d.ts +3 -2
  162. package/lib/components/NotificationsPanel/NotificationsPanel.js +36 -13
  163. package/lib/components/PageHeader/PageHeader.d.ts +2 -1
  164. package/lib/components/PageHeader/PageHeader.js +2 -1
  165. package/lib/components/PageHeader/next/PageHeader.d.ts +18 -3
  166. package/lib/components/PageHeader/next/PageHeader.js +261 -7
  167. package/lib/components/PageHeader/next/context.d.ts +25 -0
  168. package/lib/components/PageHeader/next/context.js +33 -0
  169. package/lib/components/PageHeader/next/index.d.ts +3 -3
  170. package/lib/components/PageHeader/next/overflowHandler.d.ts +95 -0
  171. package/lib/components/PageHeader/next/overflowHandler.js +166 -0
  172. package/lib/components/PageHeader/next/utils.d.ts +19 -0
  173. package/lib/components/PageHeader/next/utils.js +71 -0
  174. package/lib/components/ProductiveCard/ProductiveCard.js +2 -1
  175. package/lib/components/ScrollGradient/ScrollGradient.js +1 -2
  176. package/lib/components/SidePanel/SidePanel.d.ts +4 -0
  177. package/lib/components/SidePanel/SidePanel.js +8 -2
  178. package/lib/components/Tearsheet/TearsheetShell.js +8 -5
  179. package/lib/components/TruncatedText/TruncatedText.d.ts +48 -0
  180. package/lib/components/TruncatedText/TruncatedText.js +86 -0
  181. package/lib/components/TruncatedText/index.d.ts +7 -0
  182. package/lib/components/TruncatedText/useTruncatedText.d.ts +16 -0
  183. package/lib/components/TruncatedText/useTruncatedText.js +45 -0
  184. package/lib/components/index.d.ts +4 -2
  185. package/lib/global/js/hooks/useOverflowString.d.ts +2 -2
  186. package/lib/global/js/hooks/usePortalTarget.js +2 -2
  187. package/lib/global/js/hooks/useResizeObserver.d.ts +1 -1
  188. package/lib/global/js/package-settings.d.ts +2 -1
  189. package/lib/global/js/package-settings.js +3 -2
  190. package/lib/global/js/utils/checkForOverflow.js +23 -0
  191. package/lib/global/js/utils/makeDraggable/index.d.ts +1 -0
  192. package/lib/global/js/utils/makeDraggable/makeDraggable.d.ts +19 -0
  193. package/lib/global/js/utils/makeDraggable/makeDraggable.js +93 -0
  194. package/lib/global/js/utils/makeDraggable/makeDraggable.stories.d.ts +22 -0
  195. package/lib/index.js +11 -4
  196. package/lib/node_modules/@floating-ui/core/dist/floating-ui.core.js +600 -0
  197. package/lib/node_modules/@floating-ui/dom/dist/floating-ui.dom.js +722 -0
  198. package/lib/node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js +102 -0
  199. package/lib/node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.js +182 -0
  200. package/lib/node_modules/@floating-ui/utils/dist/floating-ui.utils.js +164 -0
  201. package/lib/settings.d.ts +2 -1
  202. package/package.json +10 -11
  203. package/scss/components/{BigNumbers/_big-numbers.scss → BigNumber/_big-number.scss} +5 -5
  204. package/scss/components/{BigNumbers → BigNumber}/_carbon-imports.scss +3 -3
  205. package/scss/components/{BigNumbers → BigNumber}/_index-with-carbon.scss +2 -2
  206. package/scss/components/{BigNumbers → BigNumber}/_index.scss +2 -2
  207. package/scss/components/Card/_card.scss +2 -0
  208. package/scss/components/Coachmark/_bubble.scss +62 -0
  209. package/scss/components/Coachmark/_coachmark-beacon.scss +164 -0
  210. package/scss/components/Coachmark/_coachmark.scss +15 -0
  211. package/scss/components/ConditionBuilder/_condition-builder.scss +8 -0
  212. package/scss/components/PageHeader/_page-header.scss +144 -1
  213. package/scss/components/Tearsheet/_tearsheet.scss +6 -0
  214. package/scss/components/TruncatedText/_carbon-imports.scss +6 -0
  215. package/scss/components/TruncatedText/_index-with-carbon.scss +9 -0
  216. package/scss/components/TruncatedText/_index.scss +8 -0
  217. package/scss/components/TruncatedText/_truncated-text.scss +26 -0
  218. package/scss/components/_index-with-carbon.scss +3 -2
  219. package/scss/components/_index.scss +3 -2
  220. package/telemetry.yml +24 -5
  221. package/es/components/BigNumbers/BigNumbersSkeleton.d.ts +0 -17
  222. package/lib/components/BigNumbers/BigNumbersSkeleton.d.ts +0 -17
package/es/index.js CHANGED
@@ -82,6 +82,7 @@ export { Checklist } from './components/Checklist/Checklist.js';
82
82
  export { Coachmark } from './components/Coachmark/Coachmark.js';
83
83
  import 'react';
84
84
  import './components/Coachmark/CoachmarkTagline.js';
85
+ export { Coachmark as preview__Coachmark } from './components/Coachmark/next/Coachmark/Coachmark.js';
85
86
  export { CoachmarkBeacon } from './components/CoachmarkBeacon/CoachmarkBeacon.js';
86
87
  export { CoachmarkButton } from './components/CoachmarkButton/CoachmarkButton.js';
87
88
  export { CoachmarkFixed } from './components/CoachmarkFixed/CoachmarkFixed.js';
@@ -95,8 +96,9 @@ export { InlineTip } from './components/InlineTip/InlineTip.js';
95
96
  export { InlineTipButton } from './components/InlineTip/InlineTipButton.js';
96
97
  export { InlineTipLink } from './components/InlineTip/InlineTipLink.js';
97
98
  export { NonLinearReading } from './components/NonLinearReading/NonLinearReading.js';
98
- export { BigNumbers } from './components/BigNumbers/BigNumbers.js';
99
+ export { BigNumber } from './components/BigNumber/BigNumber.js';
99
100
  export { TruncatedList } from './components/TruncatedList/TruncatedList.js';
101
+ export { TruncatedText } from './components/TruncatedText/TruncatedText.js';
100
102
  export { InterstitialScreen } from './components/InterstitialScreen/InterstitialScreen.js';
101
103
  export { DelimitedList } from './components/DelimitedList/DelimitedList.js';
102
104
  export { FullPageError } from './components/FullPageError/FullPageError.js';
@@ -104,7 +106,7 @@ export { SearchBar } from './components/SearchBar/SearchBar.js';
104
106
  export { TagOverflow } from './components/TagOverflow/TagOverflow.js';
105
107
  export { GetStartedCard } from './components/GetStartedCard/GetStartedCard.js';
106
108
  import * as PageHeader from './components/PageHeader/next/PageHeader.js';
107
- export { PageHeader as unstable__PageHeader };
109
+ export { PageHeader as preview__PageHeader };
108
110
  export { FeatureFlags as unstable_FeatureFlags, useFeatureFlag as unstable_useFeatureFlag, useFeatureFlags as unstable_useFeatureFlags } from './components/FeatureFlags/index.js';
109
111
  export { default as useFilterContext } from './components/Datagrid/Datagrid/addons/Filtering/hooks/useFilterContext.js';
110
112
  export { usePrefix } from './global/js/hooks/usePrefix.js';
@@ -0,0 +1,592 @@
1
+ /**
2
+ * Copyright IBM Corp. 2020, 2025
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, getSide, getSideAxis, getOppositePlacement, getExpandedPlacements, getOppositeAxisPlacements, getAlignmentSides, clamp, getAlignment, getPaddingObject, rectToClientRect, getOppositeAxis, getAlignmentAxis, getAxisLength, min } from '../../utils/dist/floating-ui.utils.js';
9
+
10
+ function computeCoordsFromPlacement(_ref, placement, rtl) {
11
+ let {
12
+ reference,
13
+ floating
14
+ } = _ref;
15
+ const sideAxis = getSideAxis(placement);
16
+ const alignmentAxis = getAlignmentAxis(placement);
17
+ const alignLength = getAxisLength(alignmentAxis);
18
+ const side = getSide(placement);
19
+ const isVertical = sideAxis === 'y';
20
+ const commonX = reference.x + reference.width / 2 - floating.width / 2;
21
+ const commonY = reference.y + reference.height / 2 - floating.height / 2;
22
+ const commonAlign = reference[alignLength] / 2 - floating[alignLength] / 2;
23
+ let coords;
24
+ switch (side) {
25
+ case 'top':
26
+ coords = {
27
+ x: commonX,
28
+ y: reference.y - floating.height
29
+ };
30
+ break;
31
+ case 'bottom':
32
+ coords = {
33
+ x: commonX,
34
+ y: reference.y + reference.height
35
+ };
36
+ break;
37
+ case 'right':
38
+ coords = {
39
+ x: reference.x + reference.width,
40
+ y: commonY
41
+ };
42
+ break;
43
+ case 'left':
44
+ coords = {
45
+ x: reference.x - floating.width,
46
+ y: commonY
47
+ };
48
+ break;
49
+ default:
50
+ coords = {
51
+ x: reference.x,
52
+ y: reference.y
53
+ };
54
+ }
55
+ switch (getAlignment(placement)) {
56
+ case 'start':
57
+ coords[alignmentAxis] -= commonAlign * (rtl && isVertical ? -1 : 1);
58
+ break;
59
+ case 'end':
60
+ coords[alignmentAxis] += commonAlign * (rtl && isVertical ? -1 : 1);
61
+ break;
62
+ }
63
+ return coords;
64
+ }
65
+
66
+ /**
67
+ * Computes the `x` and `y` coordinates that will place the floating element
68
+ * next to a given reference element.
69
+ *
70
+ * This export does not have any `platform` interface logic. You will need to
71
+ * write one for the platform you are using Floating UI with.
72
+ */
73
+ const computePosition = async (reference, floating, config) => {
74
+ const {
75
+ placement = 'bottom',
76
+ strategy = 'absolute',
77
+ middleware = [],
78
+ platform
79
+ } = config;
80
+ const validMiddleware = middleware.filter(Boolean);
81
+ const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(floating));
82
+ let rects = await platform.getElementRects({
83
+ reference,
84
+ floating,
85
+ strategy
86
+ });
87
+ let {
88
+ x,
89
+ y
90
+ } = computeCoordsFromPlacement(rects, placement, rtl);
91
+ let statefulPlacement = placement;
92
+ let middlewareData = {};
93
+ let resetCount = 0;
94
+ for (let i = 0; i < validMiddleware.length; i++) {
95
+ const {
96
+ name,
97
+ fn
98
+ } = validMiddleware[i];
99
+ const {
100
+ x: nextX,
101
+ y: nextY,
102
+ data,
103
+ reset
104
+ } = await fn({
105
+ x,
106
+ y,
107
+ initialPlacement: placement,
108
+ placement: statefulPlacement,
109
+ strategy,
110
+ middlewareData,
111
+ rects,
112
+ platform,
113
+ elements: {
114
+ reference,
115
+ floating
116
+ }
117
+ });
118
+ x = nextX != null ? nextX : x;
119
+ y = nextY != null ? nextY : y;
120
+ middlewareData = {
121
+ ...middlewareData,
122
+ [name]: {
123
+ ...middlewareData[name],
124
+ ...data
125
+ }
126
+ };
127
+ if (reset && resetCount <= 50) {
128
+ resetCount++;
129
+ if (typeof reset === 'object') {
130
+ if (reset.placement) {
131
+ statefulPlacement = reset.placement;
132
+ }
133
+ if (reset.rects) {
134
+ rects = reset.rects === true ? await platform.getElementRects({
135
+ reference,
136
+ floating,
137
+ strategy
138
+ }) : reset.rects;
139
+ }
140
+ ({
141
+ x,
142
+ y
143
+ } = computeCoordsFromPlacement(rects, statefulPlacement, rtl));
144
+ }
145
+ i = -1;
146
+ }
147
+ }
148
+ return {
149
+ x,
150
+ y,
151
+ placement: statefulPlacement,
152
+ strategy,
153
+ middlewareData
154
+ };
155
+ };
156
+
157
+ /**
158
+ * Resolves with an object of overflow side offsets that determine how much the
159
+ * element is overflowing a given clipping boundary on each side.
160
+ * - positive = overflowing the boundary by that number of pixels
161
+ * - negative = how many pixels left before it will overflow
162
+ * - 0 = lies flush with the boundary
163
+ * @see https://floating-ui.com/docs/detectOverflow
164
+ */
165
+ async function detectOverflow(state, options) {
166
+ var _await$platform$isEle;
167
+ if (options === void 0) {
168
+ options = {};
169
+ }
170
+ const {
171
+ x,
172
+ y,
173
+ platform,
174
+ rects,
175
+ elements,
176
+ strategy
177
+ } = state;
178
+ const {
179
+ boundary = 'clippingAncestors',
180
+ rootBoundary = 'viewport',
181
+ elementContext = 'floating',
182
+ altBoundary = false,
183
+ padding = 0
184
+ } = evaluate(options, state);
185
+ const paddingObject = getPaddingObject(padding);
186
+ const altContext = elementContext === 'floating' ? 'reference' : 'floating';
187
+ const element = elements[altBoundary ? altContext : elementContext];
188
+ const clippingClientRect = rectToClientRect(await platform.getClippingRect({
189
+ 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))),
190
+ boundary,
191
+ rootBoundary,
192
+ strategy
193
+ }));
194
+ const rect = elementContext === 'floating' ? {
195
+ x,
196
+ y,
197
+ width: rects.floating.width,
198
+ height: rects.floating.height
199
+ } : rects.reference;
200
+ const offsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating));
201
+ const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) ? (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || {
202
+ x: 1,
203
+ y: 1
204
+ } : {
205
+ x: 1,
206
+ y: 1
207
+ };
208
+ const elementClientRect = rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({
209
+ elements,
210
+ rect,
211
+ offsetParent,
212
+ strategy
213
+ }) : rect);
214
+ return {
215
+ top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
216
+ bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
217
+ left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
218
+ right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
219
+ };
220
+ }
221
+
222
+ /**
223
+ * Provides data to position an inner element of the floating element so that it
224
+ * appears centered to the reference element.
225
+ * @see https://floating-ui.com/docs/arrow
226
+ */
227
+ const arrow = options => ({
228
+ name: 'arrow',
229
+ options,
230
+ async fn(state) {
231
+ const {
232
+ x,
233
+ y,
234
+ placement,
235
+ rects,
236
+ platform,
237
+ elements,
238
+ middlewareData
239
+ } = state;
240
+ // Since `element` is required, we don't Partial<> the type.
241
+ const {
242
+ element,
243
+ padding = 0
244
+ } = evaluate(options, state) || {};
245
+ if (element == null) {
246
+ return {};
247
+ }
248
+ const paddingObject = getPaddingObject(padding);
249
+ const coords = {
250
+ x,
251
+ y
252
+ };
253
+ const axis = getAlignmentAxis(placement);
254
+ const length = getAxisLength(axis);
255
+ const arrowDimensions = await platform.getDimensions(element);
256
+ const isYAxis = axis === 'y';
257
+ const minProp = isYAxis ? 'top' : 'left';
258
+ const maxProp = isYAxis ? 'bottom' : 'right';
259
+ const clientProp = isYAxis ? 'clientHeight' : 'clientWidth';
260
+ const endDiff = rects.reference[length] + rects.reference[axis] - coords[axis] - rects.floating[length];
261
+ const startDiff = coords[axis] - rects.reference[axis];
262
+ const arrowOffsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(element));
263
+ let clientSize = arrowOffsetParent ? arrowOffsetParent[clientProp] : 0;
264
+
265
+ // DOM platform can return `window` as the `offsetParent`.
266
+ if (!clientSize || !(await (platform.isElement == null ? void 0 : platform.isElement(arrowOffsetParent)))) {
267
+ clientSize = elements.floating[clientProp] || rects.floating[length];
268
+ }
269
+ const centerToReference = endDiff / 2 - startDiff / 2;
270
+
271
+ // If the padding is large enough that it causes the arrow to no longer be
272
+ // centered, modify the padding so that it is centered.
273
+ const largestPossiblePadding = clientSize / 2 - arrowDimensions[length] / 2 - 1;
274
+ const minPadding = min(paddingObject[minProp], largestPossiblePadding);
275
+ const maxPadding = min(paddingObject[maxProp], largestPossiblePadding);
276
+
277
+ // Make sure the arrow doesn't overflow the floating element if the center
278
+ // point is outside the floating element's bounds.
279
+ const min$1 = minPadding;
280
+ const max = clientSize - arrowDimensions[length] - maxPadding;
281
+ const center = clientSize / 2 - arrowDimensions[length] / 2 + centerToReference;
282
+ const offset = clamp(min$1, center, max);
283
+
284
+ // If the reference is small enough that the arrow's padding causes it to
285
+ // to point to nothing for an aligned placement, adjust the offset of the
286
+ // floating element itself. To ensure `shift()` continues to take action,
287
+ // a single reset is performed when this is true.
288
+ const shouldAddOffset = !middlewareData.arrow && getAlignment(placement) != null && center !== offset && rects.reference[length] / 2 - (center < min$1 ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0;
289
+ const alignmentOffset = shouldAddOffset ? center < min$1 ? center - min$1 : center - max : 0;
290
+ return {
291
+ [axis]: coords[axis] + alignmentOffset,
292
+ data: {
293
+ [axis]: offset,
294
+ centerOffset: center - offset - alignmentOffset,
295
+ ...(shouldAddOffset && {
296
+ alignmentOffset
297
+ })
298
+ },
299
+ reset: shouldAddOffset
300
+ };
301
+ }
302
+ });
303
+
304
+ /**
305
+ * Optimizes the visibility of the floating element by flipping the `placement`
306
+ * in order to keep it in view when the preferred placement(s) will overflow the
307
+ * clipping boundary. Alternative to `autoPlacement`.
308
+ * @see https://floating-ui.com/docs/flip
309
+ */
310
+ const flip = function (options) {
311
+ if (options === void 0) {
312
+ options = {};
313
+ }
314
+ return {
315
+ name: 'flip',
316
+ options,
317
+ async fn(state) {
318
+ var _middlewareData$arrow, _middlewareData$flip;
319
+ const {
320
+ placement,
321
+ middlewareData,
322
+ rects,
323
+ initialPlacement,
324
+ platform,
325
+ elements
326
+ } = state;
327
+ const {
328
+ mainAxis: checkMainAxis = true,
329
+ crossAxis: checkCrossAxis = true,
330
+ fallbackPlacements: specifiedFallbackPlacements,
331
+ fallbackStrategy = 'bestFit',
332
+ fallbackAxisSideDirection = 'none',
333
+ flipAlignment = true,
334
+ ...detectOverflowOptions
335
+ } = evaluate(options, state);
336
+
337
+ // If a reset by the arrow was caused due to an alignment offset being
338
+ // added, we should skip any logic now since `flip()` has already done its
339
+ // work.
340
+ // https://github.com/floating-ui/floating-ui/issues/2549#issuecomment-1719601643
341
+ if ((_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
342
+ return {};
343
+ }
344
+ const side = getSide(placement);
345
+ const initialSideAxis = getSideAxis(initialPlacement);
346
+ const isBasePlacement = getSide(initialPlacement) === initialPlacement;
347
+ const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
348
+ const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement));
349
+ const hasFallbackAxisSideDirection = fallbackAxisSideDirection !== 'none';
350
+ if (!specifiedFallbackPlacements && hasFallbackAxisSideDirection) {
351
+ fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
352
+ }
353
+ const placements = [initialPlacement, ...fallbackPlacements];
354
+ const overflow = await detectOverflow(state, detectOverflowOptions);
355
+ const overflows = [];
356
+ let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
357
+ if (checkMainAxis) {
358
+ overflows.push(overflow[side]);
359
+ }
360
+ if (checkCrossAxis) {
361
+ const sides = getAlignmentSides(placement, rects, rtl);
362
+ overflows.push(overflow[sides[0]], overflow[sides[1]]);
363
+ }
364
+ overflowsData = [...overflowsData, {
365
+ placement,
366
+ overflows
367
+ }];
368
+
369
+ // One or more sides is overflowing.
370
+ if (!overflows.every(side => side <= 0)) {
371
+ var _middlewareData$flip2, _overflowsData$filter;
372
+ const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
373
+ const nextPlacement = placements[nextIndex];
374
+ if (nextPlacement) {
375
+ // Try next placement and re-run the lifecycle.
376
+ return {
377
+ data: {
378
+ index: nextIndex,
379
+ overflows: overflowsData
380
+ },
381
+ reset: {
382
+ placement: nextPlacement
383
+ }
384
+ };
385
+ }
386
+
387
+ // First, find the candidates that fit on the mainAxis side of overflow,
388
+ // then find the placement that fits the best on the main crossAxis side.
389
+ 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;
390
+
391
+ // Otherwise fallback.
392
+ if (!resetPlacement) {
393
+ switch (fallbackStrategy) {
394
+ case 'bestFit':
395
+ {
396
+ var _overflowsData$filter2;
397
+ const placement = (_overflowsData$filter2 = overflowsData.filter(d => {
398
+ if (hasFallbackAxisSideDirection) {
399
+ const currentSideAxis = getSideAxis(d.placement);
400
+ return currentSideAxis === initialSideAxis ||
401
+ // Create a bias to the `y` side axis due to horizontal
402
+ // reading directions favoring greater width.
403
+ currentSideAxis === 'y';
404
+ }
405
+ return true;
406
+ }).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];
407
+ if (placement) {
408
+ resetPlacement = placement;
409
+ }
410
+ break;
411
+ }
412
+ case 'initialPlacement':
413
+ resetPlacement = initialPlacement;
414
+ break;
415
+ }
416
+ }
417
+ if (placement !== resetPlacement) {
418
+ return {
419
+ reset: {
420
+ placement: resetPlacement
421
+ }
422
+ };
423
+ }
424
+ }
425
+ return {};
426
+ }
427
+ };
428
+ };
429
+
430
+ // For type backwards-compatibility, the `OffsetOptions` type was also
431
+ // Derivable.
432
+
433
+ async function convertValueToCoords(state, options) {
434
+ const {
435
+ placement,
436
+ platform,
437
+ elements
438
+ } = state;
439
+ const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
440
+ const side = getSide(placement);
441
+ const alignment = getAlignment(placement);
442
+ const isVertical = getSideAxis(placement) === 'y';
443
+ const mainAxisMulti = ['left', 'top'].includes(side) ? -1 : 1;
444
+ const crossAxisMulti = rtl && isVertical ? -1 : 1;
445
+ const rawValue = evaluate(options, state);
446
+
447
+ // eslint-disable-next-line prefer-const
448
+ let {
449
+ mainAxis,
450
+ crossAxis,
451
+ alignmentAxis
452
+ } = typeof rawValue === 'number' ? {
453
+ mainAxis: rawValue,
454
+ crossAxis: 0,
455
+ alignmentAxis: null
456
+ } : {
457
+ mainAxis: rawValue.mainAxis || 0,
458
+ crossAxis: rawValue.crossAxis || 0,
459
+ alignmentAxis: rawValue.alignmentAxis
460
+ };
461
+ if (alignment && typeof alignmentAxis === 'number') {
462
+ crossAxis = alignment === 'end' ? alignmentAxis * -1 : alignmentAxis;
463
+ }
464
+ return isVertical ? {
465
+ x: crossAxis * crossAxisMulti,
466
+ y: mainAxis * mainAxisMulti
467
+ } : {
468
+ x: mainAxis * mainAxisMulti,
469
+ y: crossAxis * crossAxisMulti
470
+ };
471
+ }
472
+
473
+ /**
474
+ * Modifies the placement by translating the floating element along the
475
+ * specified axes.
476
+ * A number (shorthand for `mainAxis` or distance), or an axes configuration
477
+ * object may be passed.
478
+ * @see https://floating-ui.com/docs/offset
479
+ */
480
+ const offset = function (options) {
481
+ if (options === void 0) {
482
+ options = 0;
483
+ }
484
+ return {
485
+ name: 'offset',
486
+ options,
487
+ async fn(state) {
488
+ var _middlewareData$offse, _middlewareData$arrow;
489
+ const {
490
+ x,
491
+ y,
492
+ placement,
493
+ middlewareData
494
+ } = state;
495
+ const diffCoords = await convertValueToCoords(state, options);
496
+
497
+ // If the placement is the same and the arrow caused an alignment offset
498
+ // then we don't need to change the positioning coordinates.
499
+ if (placement === ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse.placement) && (_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
500
+ return {};
501
+ }
502
+ return {
503
+ x: x + diffCoords.x,
504
+ y: y + diffCoords.y,
505
+ data: {
506
+ ...diffCoords,
507
+ placement
508
+ }
509
+ };
510
+ }
511
+ };
512
+ };
513
+
514
+ /**
515
+ * Optimizes the visibility of the floating element by shifting it in order to
516
+ * keep it in view when it will overflow the clipping boundary.
517
+ * @see https://floating-ui.com/docs/shift
518
+ */
519
+ const shift = function (options) {
520
+ if (options === void 0) {
521
+ options = {};
522
+ }
523
+ return {
524
+ name: 'shift',
525
+ options,
526
+ async fn(state) {
527
+ const {
528
+ x,
529
+ y,
530
+ placement
531
+ } = state;
532
+ const {
533
+ mainAxis: checkMainAxis = true,
534
+ crossAxis: checkCrossAxis = false,
535
+ limiter = {
536
+ fn: _ref => {
537
+ let {
538
+ x,
539
+ y
540
+ } = _ref;
541
+ return {
542
+ x,
543
+ y
544
+ };
545
+ }
546
+ },
547
+ ...detectOverflowOptions
548
+ } = evaluate(options, state);
549
+ const coords = {
550
+ x,
551
+ y
552
+ };
553
+ const overflow = await detectOverflow(state, detectOverflowOptions);
554
+ const crossAxis = getSideAxis(getSide(placement));
555
+ const mainAxis = getOppositeAxis(crossAxis);
556
+ let mainAxisCoord = coords[mainAxis];
557
+ let crossAxisCoord = coords[crossAxis];
558
+ if (checkMainAxis) {
559
+ const minSide = mainAxis === 'y' ? 'top' : 'left';
560
+ const maxSide = mainAxis === 'y' ? 'bottom' : 'right';
561
+ const min = mainAxisCoord + overflow[minSide];
562
+ const max = mainAxisCoord - overflow[maxSide];
563
+ mainAxisCoord = clamp(min, mainAxisCoord, max);
564
+ }
565
+ if (checkCrossAxis) {
566
+ const minSide = crossAxis === 'y' ? 'top' : 'left';
567
+ const maxSide = crossAxis === 'y' ? 'bottom' : 'right';
568
+ const min = crossAxisCoord + overflow[minSide];
569
+ const max = crossAxisCoord - overflow[maxSide];
570
+ crossAxisCoord = clamp(min, crossAxisCoord, max);
571
+ }
572
+ const limitedCoords = limiter.fn({
573
+ ...state,
574
+ [mainAxis]: mainAxisCoord,
575
+ [crossAxis]: crossAxisCoord
576
+ });
577
+ return {
578
+ ...limitedCoords,
579
+ data: {
580
+ x: limitedCoords.x - x,
581
+ y: limitedCoords.y - y,
582
+ enabled: {
583
+ [mainAxis]: checkMainAxis,
584
+ [crossAxis]: checkCrossAxis
585
+ }
586
+ }
587
+ };
588
+ }
589
+ };
590
+ };
591
+
592
+ export { arrow, computePosition, detectOverflow, flip, offset, rectToClientRect, shift };