@jetbrains/ring-ui 4.1.0-beta.3 → 4.1.1

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 (234) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/README.md +17 -15
  3. package/babel.config.js +3 -2
  4. package/components/alert/alert.js +9 -3
  5. package/components/alert/alert.test.js +21 -48
  6. package/components/alert/container.css +1 -1
  7. package/components/alert/container.test.js +3 -13
  8. package/components/alert-service/alert-service.examples.css +18 -0
  9. package/components/alert-service/alert-service.examples.js +21 -0
  10. package/components/alert-service/alert-service.js +10 -3
  11. package/components/analytics/analytics__fus-plugin.js +3 -3
  12. package/components/analytics/analytics__ga-plugin.js +2 -2
  13. package/components/auth/auth.test.js +14 -7
  14. package/components/auth/auth__core.js +64 -33
  15. package/components/auth-dialog/auth-dialog.css +2 -3
  16. package/components/auth-dialog/auth-dialog.js +4 -1
  17. package/components/auth-dialog/auth-dialog.test.js +3 -19
  18. package/components/avatar/avatar.css +4 -1
  19. package/components/avatar/avatar.examples.js +3 -2
  20. package/components/avatar/avatar.js +34 -6
  21. package/components/avatar/avatar.test.js +20 -17
  22. package/components/avatar/fallback-avatar.js +136 -0
  23. package/components/avatar-editor-ng/avatar-editor-ng.css +2 -2
  24. package/components/avatar-editor-ng/avatar-editor-ng.js +2 -1
  25. package/components/avatar-editor-ng/{avatar-editor-ng.html → avatar-editor-ng__template.js} +2 -2
  26. package/components/badge/badge.test.js +13 -20
  27. package/components/button/button.css +2 -2
  28. package/components/button/button.js +4 -1
  29. package/components/button/button.test.js +32 -33
  30. package/components/button-group/button-group.js +1 -1
  31. package/components/button-group/caption.js +1 -1
  32. package/components/button-ng/button-ng.js +1 -1
  33. package/components/button-set-ng/button-set-ng.js +3 -1
  34. package/components/checkbox/checkbox.css +1 -1
  35. package/components/code/code.js +2 -5
  36. package/components/confirm/confirm.js +1 -0
  37. package/components/confirm-service/confirm-service.js +5 -5
  38. package/components/content-layout/content-layout.css +1 -1
  39. package/components/data-list/data-list.css +1 -1
  40. package/components/date-picker/date-input.js +5 -4
  41. package/components/date-picker/date-picker.css +34 -22
  42. package/components/date-picker/date-picker.js +16 -14
  43. package/components/date-picker/date-popup.js +22 -7
  44. package/components/date-picker/month-names.js +8 -5
  45. package/components/date-picker/month.js +6 -2
  46. package/components/date-picker/weekdays.js +10 -2
  47. package/components/dialog/dialog.examples.js +3 -1
  48. package/components/dialog/dialog.js +10 -5
  49. package/components/dialog/dialog.test.js +1 -1
  50. package/components/dialog/dialog__body-scroll-preventer.js +51 -31
  51. package/components/dialog-ng/dialog-ng.js +10 -10
  52. package/components/dialog-ng/{dialog-ng.html → dialog-ng__template.js} +2 -2
  53. package/components/dropdown/dropdown.examples.js +36 -1
  54. package/components/dropdown/dropdown.test.js +2 -2
  55. package/components/dropdown-menu/dropdown-menu.examples.js +47 -0
  56. package/components/dropdown-menu/dropdown-menu.js +117 -0
  57. package/components/dropdown-menu/dropdown-menu.test.js +76 -0
  58. package/components/error-bubble/error-bubble-legacy.css +1 -1
  59. package/components/error-bubble/error-bubble.css +1 -1
  60. package/components/error-bubble/error-bubble.examples.js +1 -1
  61. package/components/error-page/error-page.css +2 -2
  62. package/components/footer-ng/footer-ng.js +13 -3
  63. package/components/form/form.css +2 -2
  64. package/components/form-ng/form-ng.js +3 -1
  65. package/components/global/global.css +1 -1
  66. package/components/global/theme.js +1 -1
  67. package/components/global/variables.css +8 -1
  68. package/components/grid/grid.css +10 -9
  69. package/components/header/header.css +1 -1
  70. package/components/header/header.examples.js +7 -8
  71. package/components/header/profile.js +10 -11
  72. package/components/http/http.js +1 -1
  73. package/components/icon/icon.css +5 -4
  74. package/components/input/input-legacy.css +7 -7
  75. package/components/island/header.js +2 -2
  76. package/components/island/island.css +8 -3
  77. package/components/island-legacy/island-legacy.css +3 -1
  78. package/components/list/list.js +6 -1
  79. package/components/list/list__custom.js +9 -3
  80. package/components/list/list__item.js +8 -2
  81. package/components/list/list__link.js +2 -1
  82. package/components/loader-inline/loader-inline.css +1 -1
  83. package/components/loader-screen/loader-screen.css +1 -1
  84. package/components/message/message.css +1 -1
  85. package/components/message/message.examples.js +8 -7
  86. package/components/pager/pager.js +5 -3
  87. package/components/permissions/permissions.js +1 -1
  88. package/components/popup/popup.js +1 -1
  89. package/components/popup/popup.test.js +15 -13
  90. package/components/progress-bar/progress-bar.css +1 -1
  91. package/components/progress-bar/progress-bar.examples.js +3 -3
  92. package/components/progress-bar/progress-bar.js +5 -2
  93. package/components/progress-bar/progress-bar.test.js +12 -13
  94. package/components/progress-bar-ng/progress-bar-ng.examples.js +3 -3
  95. package/components/query-assist/query-assist.css +13 -3
  96. package/components/query-assist/query-assist.examples.js +3 -4
  97. package/components/query-assist/query-assist.js +56 -12
  98. package/components/query-assist/query-assist.test.js +37 -5
  99. package/components/save-field-ng/save-field-ng.css +0 -3
  100. package/components/save-field-ng/save-field-ng.js +3 -1
  101. package/components/save-field-ng/{save-field-ng.html → save-field-ng__template.js} +2 -2
  102. package/components/select/select.css +12 -7
  103. package/components/select/select.examples.js +13 -0
  104. package/components/select/select.js +30 -43
  105. package/components/select/select.test.js +4 -5
  106. package/components/select/select__popup.js +1 -0
  107. package/components/shortcuts-hint-ng/shortcuts-hint-ng.css +1 -1
  108. package/components/shortcuts-hint-ng/shortcuts-hint-ng.js +1 -1
  109. package/components/shortcuts-hint-ng/{shortcuts-hint-ng.html → shortcuts-hint-ng__template.js} +2 -2
  110. package/components/sidebar/sidebar.css +1 -0
  111. package/components/sidebar-ng/sidebar-ng.js +6 -2
  112. package/components/sidebar-ng/{sidebar-ng__button.html → sidebar-ng__button-template.js} +2 -2
  113. package/components/sidebar-ng/{sidebar-ng.html → sidebar-ng__template.js} +2 -2
  114. package/components/table/header.js +9 -1
  115. package/components/table/row.js +2 -1
  116. package/components/table/table.css +2 -1
  117. package/components/table-legacy/table-legacy.css +2 -2
  118. package/components/table-legacy/table-legacy__toolbar.css +2 -2
  119. package/components/table-legacy-ng/table-legacy-ng.js +38 -5
  120. package/components/table-legacy-ng/table-legacy-ng__pager.js +7 -1
  121. package/components/tabs/collapsible-tab.js +2 -2
  122. package/components/tabs/collapsible-tabs.js +5 -9
  123. package/components/tabs/tab-link.js +4 -2
  124. package/components/tabs/tabs.css +32 -5
  125. package/components/tabs-ng/tabs-ng.js +4 -2
  126. package/components/tabs-ng/{tabs-ng.html → tabs-ng__template.js} +6 -2
  127. package/components/tag/tag.css +5 -2
  128. package/components/tag/tag.examples.js +3 -0
  129. package/components/tag/tag.js +19 -16
  130. package/components/tags-input/tag-input.examples.js +1 -1
  131. package/components/tags-input/tags-input.js +5 -2
  132. package/components/template-ng/template-ng.js +1 -1
  133. package/components/tooltip/tooltip.js +7 -2
  134. package/components/user-agreement/user-agreement.css +1 -5
  135. package/components/user-agreement/user-agreement.examples.js +7 -6
  136. package/components/user-agreement/user-agreement.js +11 -3
  137. package/package.json +85 -83
  138. package/webpack.config.js +14 -10
  139. package/components/button-set-ng/button-set-ng.html +0 -1
  140. package/components/footer-ng/footer-ng.html +0 -13
  141. package/components/form-ng/form-ng__error-bubble.html +0 -3
  142. package/components/table-legacy-ng/table-legacy-ng.html +0 -4
  143. package/components/table-legacy-ng/table-legacy-ng__column.html +0 -12
  144. package/components/table-legacy-ng/table-legacy-ng__header.html +0 -4
  145. package/components/table-legacy-ng/table-legacy-ng__pager.html +0 -7
  146. package/components/table-legacy-ng/table-legacy-ng__row.html +0 -12
  147. package/components/table-legacy-ng/table-legacy-ng__title.html +0 -9
  148. package/dist/_helpers/_rollupPluginBabelHelpers.js +0 -123
  149. package/dist/_helpers/background-flow.js +0 -232
  150. package/dist/_helpers/badge.js +0 -3
  151. package/dist/_helpers/button.js +0 -145
  152. package/dist/_helpers/clickableLink.js +0 -65
  153. package/dist/_helpers/data-tests.js +0 -15
  154. package/dist/_helpers/disable-hover-hoc.js +0 -407
  155. package/dist/_helpers/dom.js +0 -101
  156. package/dist/_helpers/get-uid.js +0 -15
  157. package/dist/_helpers/linear-function.js +0 -17
  158. package/dist/_helpers/list.js +0 -1327
  159. package/dist/_helpers/logo.js +0 -36
  160. package/dist/_helpers/memoize.js +0 -17
  161. package/dist/_helpers/popup.js +0 -691
  162. package/dist/_helpers/popup.target.js +0 -27
  163. package/dist/_helpers/rerender-hoc.js +0 -49
  164. package/dist/_helpers/schedule-raf.js +0 -31
  165. package/dist/_helpers/sniffer.js +0 -6
  166. package/dist/_helpers/theme.js +0 -40
  167. package/dist/_helpers/url.js +0 -125
  168. package/dist/alert-service.js +0 -149
  169. package/dist/alert.js +0 -284
  170. package/dist/analytics.js +0 -116
  171. package/dist/auth-dialog-service.js +0 -56
  172. package/dist/auth-dialog.js +0 -122
  173. package/dist/auth.js +0 -1744
  174. package/dist/avatar.js +0 -152
  175. package/dist/badge.js +0 -52
  176. package/dist/button-group.js +0 -48
  177. package/dist/button-set.js +0 -27
  178. package/dist/button-toolbar.js +0 -30
  179. package/dist/button.js +0 -12
  180. package/dist/caret.js +0 -262
  181. package/dist/checkbox.js +0 -108
  182. package/dist/confirm-service.js +0 -102
  183. package/dist/confirm.js +0 -113
  184. package/dist/content-layout.js +0 -184
  185. package/dist/contenteditable.js +0 -81
  186. package/dist/data-list.js +0 -466
  187. package/dist/date-picker.js +0 -1398
  188. package/dist/dialog.js +0 -223
  189. package/dist/dropdown.js +0 -250
  190. package/dist/error-bubble.js +0 -56
  191. package/dist/error-message.js +0 -53
  192. package/dist/footer.js +0 -124
  193. package/dist/grid.js +0 -148
  194. package/dist/group.js +0 -34
  195. package/dist/header.js +0 -658
  196. package/dist/heading.js +0 -76
  197. package/dist/http.js +0 -207
  198. package/dist/hub-source.js +0 -130
  199. package/dist/icon.js +0 -211
  200. package/dist/input.js +0 -228
  201. package/dist/island.js +0 -314
  202. package/dist/link.js +0 -117
  203. package/dist/list.js +0 -29
  204. package/dist/loader-inline.js +0 -165
  205. package/dist/loader-screen.js +0 -45
  206. package/dist/loader.js +0 -338
  207. package/dist/login-dialog.js +0 -173
  208. package/dist/logo.js +0 -8
  209. package/dist/message.js +0 -226
  210. package/dist/old-browsers-message.js +0 -129
  211. package/dist/pager.js +0 -325
  212. package/dist/panel.js +0 -34
  213. package/dist/permissions.js +0 -466
  214. package/dist/popup-menu.js +0 -93
  215. package/dist/popup.js +0 -16
  216. package/dist/progress-bar.js +0 -111
  217. package/dist/proxy-attrs.js +0 -19
  218. package/dist/query-assist.js +0 -1081
  219. package/dist/radio.js +0 -112
  220. package/dist/select.js +0 -1920
  221. package/dist/selection.js +0 -213
  222. package/dist/shortcuts.js +0 -307
  223. package/dist/storage.js +0 -373
  224. package/dist/style.css +0 -1
  225. package/dist/tab-trap.js +0 -174
  226. package/dist/table.js +0 -903
  227. package/dist/tabs.js +0 -721
  228. package/dist/tag.js +0 -187
  229. package/dist/tags-input.js +0 -440
  230. package/dist/tags-list.js +0 -91
  231. package/dist/text.js +0 -38
  232. package/dist/toggle.js +0 -80
  233. package/dist/tooltip.js +0 -202
  234. package/dist/user-card.js +0 -218
@@ -1,691 +0,0 @@
1
- import { b as _defineProperty, c as _objectSpread2 } from './_rollupPluginBabelHelpers.js';
2
- import React, { PureComponent } from 'react';
3
- import { createPortal } from 'react-dom';
4
- import PropTypes from 'prop-types';
5
- import classNames from 'classnames';
6
- import { g as getUID } from './get-uid.js';
7
- import { s as scheduleRAF } from './schedule-raf.js';
8
- import { g as getRect, b as isMounted, c as getDocumentScrollTop, d as getDocumentScrollLeft, e as getWindowHeight, L as Listeners, f as getStyles } from './dom.js';
9
- import Shortcuts from '../shortcuts.js';
10
- import { j as joinDataTestAttributes } from './data-tests.js';
11
- import TabTrap from '../tab-trap.js';
12
- import { a as PopupTargetContext, P as PopupTarget } from './popup.target.js';
13
-
14
- const Directions = {
15
- BOTTOM_RIGHT: 'BOTTOM_RIGHT',
16
- BOTTOM_LEFT: 'BOTTOM_LEFT',
17
- BOTTOM_CENTER: 'BOTTOM_CENTER',
18
- TOP_LEFT: 'TOP_LEFT',
19
- TOP_RIGHT: 'TOP_RIGHT',
20
- TOP_CENTER: 'TOP_CENTER',
21
- RIGHT_TOP: 'RIGHT_TOP',
22
- RIGHT_BOTTOM: 'RIGHT_BOTTOM',
23
- RIGHT_CENTER: 'RIGHT_CENTER',
24
- LEFT_TOP: 'LEFT_TOP',
25
- LEFT_BOTTOM: 'LEFT_BOTTOM',
26
- LEFT_CENTER: 'LEFT_CENTER'
27
- };
28
- /**
29
- * When positioning a popup, directions will be tried in the listed order.
30
- * @type {Array.<string>}
31
- */
32
-
33
- const DEFAULT_DIRECTIONS = [Directions.BOTTOM_RIGHT, Directions.BOTTOM_LEFT, Directions.TOP_LEFT, Directions.TOP_RIGHT, Directions.RIGHT_TOP, Directions.RIGHT_BOTTOM, Directions.LEFT_TOP, Directions.LEFT_BOTTOM];
34
- /**
35
- * @enum {number}
36
- */
37
-
38
- const Dimension = {
39
- MARGIN: 16,
40
- BORDER_WIDTH: 1
41
- };
42
- const MinWidth = {
43
- TARGET: -1
44
- };
45
- const MaxHeight = {
46
- SCREEN: -1
47
- };
48
- const Display = {
49
- HIDDEN: 0,
50
- SHOWING: 1,
51
- SHOWN: 2
52
- };
53
-
54
- function getScrollingCoordinates(container) {
55
- if (container !== null) {
56
- return {
57
- top: container.scrollTop,
58
- left: container.scrollLeft
59
- };
60
- }
61
-
62
- return {
63
- top: getDocumentScrollTop(),
64
- left: getDocumentScrollLeft()
65
- };
66
- }
67
-
68
- function getPositionStyles(popup, anchorRect, anchorLeft, anchorTop, offset) {
69
- const popupWidth = popup.clientWidth;
70
- const popupHeight = popup.clientHeight;
71
- const anchorBottom = anchorTop + anchorRect.height;
72
- const anchorRight = anchorLeft + anchorRect.width;
73
- const popupLeft = anchorLeft - popupWidth;
74
- const popupTop = anchorTop - popupHeight;
75
- const popupRightToLeft = anchorRight - popupWidth;
76
- const popupHorizontalCenter = anchorLeft + anchorRect.width / 2 - popupWidth / 2;
77
- const popupVerticalCenter = anchorTop + anchorRect.height / 2 - popupHeight / 2;
78
- const popupBottomToTop = anchorBottom - popupHeight;
79
- return {
80
- [Directions.BOTTOM_RIGHT]: {
81
- left: anchorLeft,
82
- top: anchorBottom + offset
83
- },
84
- [Directions.BOTTOM_LEFT]: {
85
- left: popupRightToLeft,
86
- top: anchorBottom + offset
87
- },
88
- [Directions.BOTTOM_CENTER]: {
89
- left: popupHorizontalCenter,
90
- top: anchorBottom + offset
91
- },
92
- [Directions.TOP_RIGHT]: {
93
- left: anchorLeft,
94
- top: popupTop - offset
95
- },
96
- [Directions.TOP_LEFT]: {
97
- left: popupRightToLeft,
98
- top: popupTop - offset
99
- },
100
- [Directions.TOP_CENTER]: {
101
- left: popupHorizontalCenter,
102
- top: popupTop - offset
103
- },
104
- [Directions.LEFT_BOTTOM]: {
105
- left: popupLeft - offset,
106
- top: anchorTop
107
- },
108
- [Directions.LEFT_TOP]: {
109
- left: popupLeft - offset,
110
- top: popupBottomToTop
111
- },
112
- [Directions.LEFT_CENTER]: {
113
- left: popupLeft - offset,
114
- top: popupVerticalCenter
115
- },
116
- [Directions.RIGHT_BOTTOM]: {
117
- left: anchorRight + offset,
118
- top: anchorTop
119
- },
120
- [Directions.RIGHT_TOP]: {
121
- left: anchorRight + offset,
122
- top: popupBottomToTop
123
- },
124
- [Directions.RIGHT_CENTER]: {
125
- left: anchorRight + offset,
126
- top: popupVerticalCenter
127
- }
128
- };
129
- }
130
-
131
- function verticalOverflow(styles, scrollingCoordinates, attrs) {
132
- const containerHeight = attrs.container !== null ? attrs.container.clientHeight : getWindowHeight();
133
- const viewportMinX = scrollingCoordinates.top + attrs.sidePadding;
134
- const viewportMaxX = scrollingCoordinates.top + containerHeight - attrs.sidePadding;
135
- const topOverflow = Math.max(viewportMinX - styles.top, 0);
136
- const popupHeight = attrs.popup.clientHeight;
137
- const verticalDiff = styles.top + popupHeight - viewportMaxX;
138
- const bottomOverflow = Math.max(verticalDiff, 0);
139
- return topOverflow + bottomOverflow;
140
- }
141
-
142
- function horizontalOverflow(styles, scrollingCoordinates, attrs) {
143
- const containerWidth = attrs.container !== null ? attrs.container.clientWidth : window.innerWidth;
144
- const viewportMinY = scrollingCoordinates.left + attrs.sidePadding;
145
- const viewportMaxY = scrollingCoordinates.left + containerWidth - attrs.sidePadding;
146
- const leftOverflow = Math.max(viewportMinY - styles.left, 0);
147
- const popupWidth = attrs.popup.clientWidth;
148
- const horizontalDiff = styles.left + popupWidth - viewportMaxY;
149
- const rightOverflow = Math.max(horizontalDiff, 0);
150
- return leftOverflow + rightOverflow;
151
- }
152
-
153
- const positionPropKeys = ['directions', 'autoPositioning', 'autoCorrectTopOverflow', 'sidePadding', 'top', 'left', 'offset', 'maxHeight', 'minWidth'];
154
- const defaultcontainerRect = {
155
- top: 0,
156
- left: 0
157
- };
158
-
159
- function handleTopOffScreen({
160
- sidePadding,
161
- styles,
162
- anchorRect,
163
- maxHeight,
164
- popupScrollHeight,
165
- direction,
166
- scroll
167
- }) {
168
- const BORDER_COMPENSATION = 1;
169
- const {
170
- TOP_LEFT,
171
- TOP_RIGHT,
172
- TOP_CENTER,
173
- RIGHT_TOP,
174
- LEFT_TOP
175
- } = Directions;
176
- const openedToTop = [TOP_LEFT, TOP_RIGHT, TOP_CENTER, RIGHT_TOP, LEFT_TOP].includes(direction);
177
-
178
- if (!openedToTop) {
179
- return styles;
180
- }
181
-
182
- const isAttachedToAnchorTop = [TOP_LEFT, TOP_CENTER, TOP_RIGHT].includes(direction);
183
- const attachingPointY = isAttachedToAnchorTop ? anchorRect.top : anchorRect.bottom;
184
- const effectiveHeight = maxHeight ? Math.min(popupScrollHeight, maxHeight) : popupScrollHeight;
185
- const hypotheticalTop = attachingPointY - effectiveHeight;
186
-
187
- if (hypotheticalTop <= sidePadding) {
188
- styles.top = sidePadding + scroll.top;
189
- styles.maxHeight = attachingPointY - sidePadding + BORDER_COMPENSATION;
190
- }
191
-
192
- return styles;
193
- }
194
-
195
- function maxHeightForDirection(direction, anchorNode, containerNode) {
196
- const container = containerNode || document.documentElement;
197
- const domRect = anchorNode.getBoundingClientRect();
198
- const containerRect = container.getBoundingClientRect();
199
- const topMaxHeight = Math.max(domRect.top - containerRect.top, 0);
200
- const containerHeight = Math.max(containerRect.height, // XXX
201
- // If container is the document element
202
- // then we check client height too because we may have situation when
203
- // "height" from "getBoundingClientRect" less then "clientHeight".
204
- container === document.documentElement ? container.clientHeight : 0);
205
- const bottomMaxHeight = Math.max(containerHeight - (topMaxHeight + domRect.height), 0);
206
-
207
- switch (direction) {
208
- case Directions.TOP_LEFT:
209
- case Directions.TOP_CENTER:
210
- case Directions.TOP_RIGHT:
211
- return topMaxHeight;
212
-
213
- case Directions.BOTTOM_LEFT:
214
- case Directions.BOTTOM_CENTER:
215
- case Directions.BOTTOM_RIGHT:
216
- return bottomMaxHeight;
217
-
218
- case Directions.LEFT_BOTTOM:
219
- case Directions.RIGHT_BOTTOM:
220
- return domRect.height + bottomMaxHeight;
221
-
222
- case Directions.LEFT_TOP:
223
- case Directions.RIGHT_TOP:
224
- return domRect.height + topMaxHeight;
225
-
226
- case Directions.RIGHT_CENTER:
227
- case Directions.LEFT_CENTER:
228
- return domRect.height / 2 + Math.min(bottomMaxHeight / 2, topMaxHeight / 2);
229
-
230
- default:
231
- return null;
232
- }
233
- }
234
- function position(attrs) {
235
- const {
236
- popup,
237
- anchor,
238
- container,
239
- directions,
240
- autoPositioning,
241
- sidePadding,
242
- top,
243
- left,
244
- offset,
245
- maxHeight,
246
- minWidth,
247
- autoCorrectTopOverflow = true
248
- } = attrs;
249
- let styles = {
250
- top: 0,
251
- left: 0
252
- };
253
- let chosenDirection = null;
254
- const containerRect = container !== null ? getRect(container) : defaultcontainerRect;
255
- const defaultAnchor = container !== null ? container : document.body;
256
- const anchorRect = getRect(isMounted(anchor) ? anchor : defaultAnchor);
257
- const scroll = getScrollingCoordinates(container);
258
- const anchorLeft = anchorRect.left + scroll.left + left - containerRect.left;
259
- const anchorTop = anchorRect.top + scroll.top + top - containerRect.top;
260
-
261
- if (popup) {
262
- const directionsMatrix = getPositionStyles(popup, anchorRect, anchorLeft, anchorTop, offset);
263
-
264
- if (!autoPositioning || directions.length === 1) {
265
- styles = directionsMatrix[directions[0]];
266
- chosenDirection = directions[0];
267
- } else {
268
- const sortedByIncreasingOverflow = directions. // Fall back to the first option
269
- concat(directions[0]).filter(direction => directionsMatrix[direction]).map(direction => ({
270
- styles: directionsMatrix[direction],
271
- direction
272
- })).sort(({
273
- styles: stylesA
274
- }, {
275
- styles: stylesB
276
- }) => {
277
- const overflowA = verticalOverflow(stylesA, scroll, attrs) + horizontalOverflow(stylesA, scroll, attrs);
278
- const overflowB = verticalOverflow(stylesB, scroll, attrs) + horizontalOverflow(stylesB, scroll, attrs);
279
- return overflowA - overflowB;
280
- });
281
- styles = sortedByIncreasingOverflow[0].styles;
282
- chosenDirection = sortedByIncreasingOverflow[0].direction;
283
- } // because of the anchor negative margin top and left also may become negative
284
-
285
-
286
- ['left', 'top'].forEach(key => {
287
- if (styles[key] < 0) {
288
- styles[key] = 0;
289
- }
290
- });
291
- }
292
-
293
- if (maxHeight === MaxHeight.SCREEN || maxHeight === 'screen') {
294
- // this feature works properly only when direction is BOTTOM_* or *_BOTTOM
295
- styles.maxHeight = window.innerHeight + scroll.top - styles.top - Dimension.MARGIN;
296
- } else if (maxHeight) {
297
- styles.maxHeight = maxHeight;
298
- }
299
-
300
- if (autoCorrectTopOverflow) {
301
- styles = handleTopOffScreen({
302
- sidePadding,
303
- styles,
304
- anchorRect,
305
- maxHeight,
306
- direction: chosenDirection,
307
- popupScrollHeight: popup.scrollHeight,
308
- scroll
309
- });
310
- }
311
-
312
- if (minWidth === MinWidth.TARGET || minWidth === 'target') {
313
- styles.minWidth = anchorRect.width;
314
- } else if (minWidth) {
315
- styles.minWidth = anchorRect.width < minWidth ? minWidth : anchorRect.width;
316
- }
317
-
318
- return {
319
- styles,
320
- direction: chosenDirection
321
- };
322
- }
323
-
324
- var modules_2f69e2e2 = {"popup":"popup_popup__d157c5ca global_font__0f8f4370","hidden":"popup_hidden__d157c5ca","showing":"popup_showing__d157c5ca","attached":"popup_attached__d157c5ca"};
325
-
326
- const stop = e => e.stopPropagation();
327
-
328
- const getPopupContainer = target => typeof target === 'string' ? document.querySelector(`[data-portaltarget=${target}]`) : target;
329
- /**
330
- * @constructor
331
- * @name Popup
332
- * @extends {ReactComponent}
333
- */
334
-
335
- class Popup extends PureComponent {
336
- constructor(...args) {
337
- super(...args);
338
-
339
- _defineProperty(this, "state", {
340
- display: Display.SHOWING
341
- });
342
-
343
- _defineProperty(this, "listeners", new Listeners());
344
-
345
- _defineProperty(this, "redrawScheduler", scheduleRAF(true));
346
-
347
- _defineProperty(this, "uid", getUID('popup-'));
348
-
349
- _defineProperty(this, "calculateDisplay", prevState => _objectSpread2(_objectSpread2({}, prevState), {}, {
350
- display: this.props.hidden ? Display.SHOWING : Display.SHOWN
351
- }));
352
-
353
- _defineProperty(this, "portalRef", el => {
354
- this.node = el;
355
- this.parent = el && el.parentElement;
356
-
357
- if (el && this.getContainer()) {
358
- this._redraw();
359
- }
360
- });
361
-
362
- _defineProperty(this, "popupRef", el => {
363
- this.popup = el;
364
-
365
- this._redraw();
366
- });
367
-
368
- _defineProperty(this, "containerRef", el => {
369
- this.container = el;
370
- });
371
-
372
- _defineProperty(this, "_updateDirection", newDirection => {
373
- if (this.state.direction !== newDirection) {
374
- this.setState({
375
- direction: newDirection
376
- });
377
-
378
- if (this.props.onDirectionChange) {
379
- this.props.onDirectionChange(newDirection);
380
- }
381
- }
382
- });
383
-
384
- _defineProperty(this, "_updatePosition", () => {
385
- if (this.popup) {
386
- this.popup.style.position = 'absolute';
387
-
388
- if (this.isVisible()) {
389
- const {
390
- styles: style,
391
- direction
392
- } = this.position();
393
- Object.keys(style).forEach(key => {
394
- const value = style[key];
395
-
396
- if (typeof value === 'number') {
397
- this.popup.style[key] = `${value}px`;
398
- } else {
399
- this.popup.style[key] = value.toString();
400
- }
401
- });
402
-
403
- this._updateDirection(direction);
404
- }
405
-
406
- this.setState(this.calculateDisplay);
407
- }
408
- });
409
-
410
- _defineProperty(this, "_redraw", () => {
411
- if (this.isVisible()) {
412
- this.redrawScheduler(this._updatePosition);
413
- }
414
- });
415
-
416
- _defineProperty(this, "_onEscPress", evt => {
417
- this.props.onEscPress(evt);
418
-
419
- this._onCloseAttempt(evt, true);
420
- });
421
-
422
- _defineProperty(this, "_onDocumentClick", evt => {
423
- if (this.container && this.container.contains(evt.target) || !this._listenersEnabled || this.props.dontCloseOnAnchorClick && this._getAnchor() && this._getAnchor().contains(evt.target)) {
424
- return;
425
- }
426
-
427
- this.props.onOutsideClick(evt);
428
-
429
- this._onCloseAttempt(evt, false);
430
- });
431
-
432
- _defineProperty(this, "shortcutsScope", this.uid);
433
-
434
- _defineProperty(this, "shortcutsMap", {
435
- esc: this._onEscPress
436
- });
437
- }
438
-
439
- componentDidMount() {
440
- if (!this.props.client) {
441
- // eslint-disable-next-line react/no-did-mount-set-state
442
- this.setState({
443
- client: true
444
- });
445
- }
446
-
447
- if (!this.props.hidden) {
448
- this._setListenersEnabled(true);
449
- }
450
- }
451
-
452
- componentDidUpdate(prevProps, prevState) {
453
- const {
454
- hidden
455
- } = this.props;
456
-
457
- if (this.props !== prevProps) {
458
- if (prevProps.hidden !== hidden) {
459
- this._setListenersEnabled(!hidden);
460
- }
461
-
462
- this._redraw();
463
- }
464
-
465
- if (this.props.onShow && !hidden && this.state.display === Display.SHOWN && (prevProps.hidden || prevState.display !== Display.SHOWN)) {
466
- this.props.onShow();
467
- }
468
- }
469
-
470
- componentWillUnmount() {
471
- this._setListenersEnabled(false);
472
-
473
- this.popup = null;
474
- }
475
-
476
- shouldUseShortcuts() {
477
- const {
478
- shortcuts,
479
- hidden
480
- } = this.props;
481
- return shortcuts && !hidden;
482
- }
483
-
484
- getContainer() {
485
- const target = this.props.target || this.ringPopupTarget;
486
- return target && getPopupContainer(target);
487
- }
488
-
489
- position() {
490
- const positionProps = positionPropKeys.reduce((acc, key) => {
491
- acc[key] = this.props[key];
492
- return acc;
493
- }, {});
494
- const container = this.getContainer();
495
- return position(_objectSpread2({
496
- popup: this.popup,
497
- container: container && getStyles(container).position !== 'static' ? container : null,
498
- anchor: this._getAnchor()
499
- }, positionProps));
500
- }
501
-
502
- _getAnchor() {
503
- return this.props.anchorElement || this.parent;
504
- }
505
- /**
506
- * @param {boolean} enable
507
- * @private
508
- */
509
-
510
-
511
- _setListenersEnabled(enable) {
512
- if (enable && !this._listenersEnabled) {
513
- setTimeout(() => {
514
- this._listenersEnabled = true;
515
- this.listeners.add(window, 'resize', this._redraw);
516
- this.listeners.add(window, 'scroll', this._redraw);
517
- this.listeners.add(document, 'click', this._onDocumentClick, true);
518
-
519
- let el = this._getAnchor();
520
-
521
- while (el) {
522
- this.listeners.add(el, 'scroll', this._redraw);
523
- el = el.parentElement;
524
- }
525
- }, 0);
526
- return;
527
- }
528
-
529
- if (!enable && this._listenersEnabled) {
530
- this.listeners.removeAll();
531
- this._listenersEnabled = false;
532
- }
533
- }
534
- /**
535
- * Returns visibility state
536
- * @return {boolean}
537
- */
538
-
539
-
540
- isVisible() {
541
- return !this.props.hidden;
542
- }
543
-
544
- _onCloseAttempt(evt, isEsc) {
545
- this.props.onCloseAttempt(evt, isEsc);
546
- }
547
-
548
- getInternalContent() {
549
- const {
550
- trapFocus,
551
- autoFocusFirst,
552
- children
553
- } = this.props;
554
- return trapFocus ? /*#__PURE__*/React.createElement(TabTrap, {
555
- autoFocusFirst: autoFocusFirst,
556
- focusBackOnExit: true
557
- }, children) : children;
558
- }
559
-
560
- render() {
561
- const {
562
- className,
563
- style,
564
- hidden,
565
- attached,
566
- keepMounted,
567
- client,
568
- onMouseDown,
569
- onMouseUp,
570
- onMouseOver,
571
- onMouseOut,
572
- onContextMenu,
573
- 'data-test': dataTest
574
- } = this.props;
575
- const showing = this.state.display === Display.SHOWING;
576
- const classes = classNames(className, modules_2f69e2e2.popup, {
577
- [modules_2f69e2e2.attached]: attached,
578
- [modules_2f69e2e2.hidden]: hidden,
579
- [modules_2f69e2e2.showing]: showing
580
- });
581
- const direction = (this.state.direction || '').toLowerCase().replace(/[_]/g, '-');
582
- return /*#__PURE__*/React.createElement(PopupTargetContext.Consumer, null, value => {
583
- this.ringPopupTarget = value;
584
- return /*#__PURE__*/React.createElement("span", {
585
- // prevent bubbling through portal
586
- onClick: stop // This handler only blocks bubbling through React portal
587
- ,
588
- role: "presentation",
589
- ref: this.portalRef
590
- }, this.shouldUseShortcuts() && /*#__PURE__*/React.createElement(Shortcuts, {
591
- map: this.shortcutsMap,
592
- scope: this.shortcutsScope
593
- }), (client || this.state.client) && (keepMounted || !hidden) && /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(PopupTarget, {
594
- id: this.uid,
595
- ref: this.containerRef,
596
- onMouseOver: onMouseOver,
597
- onFocus: onMouseOver,
598
- onMouseOut: onMouseOut,
599
- onBlur: onMouseOut,
600
- onContextMenu: onContextMenu
601
- }, /*#__PURE__*/React.createElement("div", {
602
- "data-test": joinDataTestAttributes('ring-popup', dataTest),
603
- "data-test-shown": !hidden && !showing,
604
- "data-test-direction": direction,
605
- ref: this.popupRef,
606
- className: classes,
607
- style: style,
608
- onMouseDown: onMouseDown,
609
- onMouseUp: onMouseUp // mouse handlers are used to track clicking on inner elements
610
- ,
611
- role: "presentation"
612
- }, this.getInternalContent())), this.getContainer() || document.body));
613
- });
614
- }
615
-
616
- }
617
-
618
- _defineProperty(Popup, "propTypes", {
619
- anchorElement: PropTypes.instanceOf(Node),
620
- target: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Element)]),
621
- className: PropTypes.string,
622
- style: PropTypes.object,
623
- hidden: PropTypes.bool.isRequired,
624
- onOutsideClick: PropTypes.func,
625
- onEscPress: PropTypes.func,
626
- // onCloseAttempt is a common callback for ESC pressing and outside clicking.
627
- // Use it if you don't need different behaviors for this cases.
628
- onCloseAttempt: PropTypes.func,
629
- children: PropTypes.node.isRequired,
630
- dontCloseOnAnchorClick: PropTypes.bool,
631
- shortcuts: PropTypes.bool,
632
- keepMounted: PropTypes.bool,
633
- // pass this prop to preserve the popup's DOM state while hidden
634
- 'data-test': PropTypes.string,
635
- client: PropTypes.bool,
636
- // true means that it's never used in SSR
637
- directions: PropTypes.arrayOf(PropTypes.string),
638
- autoPositioning: PropTypes.bool,
639
- autoCorrectTopOverflow: PropTypes.bool,
640
- left: PropTypes.number,
641
- top: PropTypes.number,
642
- maxHeight: PropTypes.number,
643
- minWidth: PropTypes.number,
644
- sidePadding: PropTypes.number,
645
- attached: PropTypes.bool,
646
- // Popup adjacent to an input, without upper border and shadow
647
- onMouseDown: PropTypes.func,
648
- onMouseUp: PropTypes.func,
649
- onMouseOver: PropTypes.func,
650
- onMouseOut: PropTypes.func,
651
- onContextMenu: PropTypes.func,
652
- onDirectionChange: PropTypes.func,
653
- onShow: PropTypes.func,
654
- // set to true whenever popup contains focusable and scrollable content
655
- trapFocus: PropTypes.bool,
656
- autoFocusFirst: PropTypes.bool
657
- });
658
-
659
- _defineProperty(Popup, "defaultProps", {
660
- shortcuts: true,
661
- hidden: false,
662
-
663
- onOutsideClick() {},
664
-
665
- onEscPress() {},
666
-
667
- onCloseAttempt() {},
668
-
669
- dontCloseOnAnchorClick: false,
670
- keepMounted: false,
671
- directions: DEFAULT_DIRECTIONS,
672
- autoPositioning: true,
673
- autoCorrectTopOverflow: true,
674
- left: 0,
675
- top: 0,
676
- offset: 0,
677
- sidePadding: 8,
678
- attached: false,
679
- trapFocus: false,
680
- autoFocusFirst: false,
681
- legacy: false
682
- });
683
-
684
- _defineProperty(Popup, "PopupProps", {
685
- Directions,
686
- Dimension,
687
- MinWidth,
688
- MaxHeight
689
- });
690
-
691
- export { Directions as D, Popup as P, DEFAULT_DIRECTIONS as a, getPopupContainer as g, maxHeightForDirection as m };
@@ -1,27 +0,0 @@
1
- import { _ as _objectWithoutProperties, a as _extends } from './_rollupPluginBabelHelpers.js';
2
- import React, { createContext, forwardRef } from 'react';
3
- import PropTypes from 'prop-types';
4
-
5
- const PopupTargetContext = /*#__PURE__*/createContext();
6
- const PopupTarget = /*#__PURE__*/forwardRef(function PopupTarget(_ref, ref) {
7
- let {
8
- id,
9
- children
10
- } = _ref,
11
- restProps = _objectWithoutProperties(_ref, ["id", "children"]);
12
-
13
- const isFunctionChild = typeof children === 'function';
14
- const target = /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
15
- "data-portaltarget": id,
16
- ref: ref
17
- }), !isFunctionChild && children);
18
- return /*#__PURE__*/React.createElement(PopupTargetContext.Provider, {
19
- value: id
20
- }, isFunctionChild ? children(target) : target);
21
- });
22
- PopupTarget.propTypes = {
23
- id: PropTypes.string.isRequired,
24
- children: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
25
- };
26
-
27
- export { PopupTarget as P, PopupTargetContext as a };