@jetbrains/ring-ui-built 6.0.32 → 6.0.34

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 (226) hide show
  1. package/components/_helpers/_rollupPluginBabelHelpers.js +567 -1
  2. package/components/_helpers/anchor.js +6 -7
  3. package/components/_helpers/button__classes.js +14 -16
  4. package/components/_helpers/caption.js +20 -14
  5. package/components/_helpers/card.js +105 -95
  6. package/components/_helpers/dialog__body-scroll-preventer.js +19 -11
  7. package/components/_helpers/icon__svg.js +25 -22
  8. package/components/_helpers/input.js +176 -146
  9. package/components/_helpers/query-assist__suggestions.js +90 -74
  10. package/components/_helpers/select__filter.js +69 -48
  11. package/components/_helpers/services-link.js +37 -29
  12. package/components/_helpers/sidebar.js +107 -99
  13. package/components/_helpers/tab-link.js +7 -7
  14. package/components/_helpers/theme.js +40 -31
  15. package/components/_helpers/title.js +72 -57
  16. package/components/alert/alert.js +202 -150
  17. package/components/alert/container.js +41 -32
  18. package/components/alert-service/alert-service.js +170 -105
  19. package/components/analytics/analytics.js +22 -12
  20. package/components/analytics/analytics__custom-plugin.js +75 -54
  21. package/components/auth/auth.js +36 -4
  22. package/components/auth/auth__core.js +1471 -746
  23. package/components/auth/background-flow.js +127 -87
  24. package/components/auth/down-notification.js +73 -30
  25. package/components/auth/iframe-flow.js +133 -75
  26. package/components/auth/request-builder.js +82 -46
  27. package/components/auth/response-parser.js +116 -86
  28. package/components/auth/storage.js +334 -171
  29. package/components/auth/token-validator.js +242 -137
  30. package/components/auth/window-flow.js +134 -92
  31. package/components/auth-dialog/auth-dialog.js +172 -114
  32. package/components/auth-dialog-service/auth-dialog-service.js +31 -8
  33. package/components/avatar/avatar-example-datauri.js +1 -23
  34. package/components/avatar/avatar.js +152 -119
  35. package/components/avatar/fallback-avatar.js +38 -22
  36. package/components/badge/badge.js +45 -35
  37. package/components/button/button.js +107 -86
  38. package/components/button-group/button-group.js +33 -19
  39. package/components/button-set/button-set.js +32 -20
  40. package/components/button-toolbar/button-toolbar.js +31 -19
  41. package/components/caret/caret.js +220 -186
  42. package/components/checkbox/checkbox.js +101 -76
  43. package/components/clipboard/clipboard-fallback.js +10 -10
  44. package/components/clipboard/clipboard.js +132 -35
  45. package/components/code/code.js +166 -92
  46. package/components/collapse/collapse-content.js +64 -42
  47. package/components/collapse/collapse-context.js +2 -2
  48. package/components/collapse/collapse-control.js +14 -12
  49. package/components/collapse/collapse.js +17 -11
  50. package/components/collapse/consts.js +4 -4
  51. package/components/collapse/utils.js +3 -1
  52. package/components/confirm/confirm.js +104 -66
  53. package/components/confirm-service/confirm-service.js +59 -37
  54. package/components/content-layout/content-layout.js +64 -43
  55. package/components/content-layout/sidebar.js +1 -0
  56. package/components/contenteditable/contenteditable.js +59 -50
  57. package/components/control-label/control-label.js +9 -9
  58. package/components/data-list/data-list.js +182 -129
  59. package/components/data-list/data-list.mock.js +6 -2
  60. package/components/data-list/item.js +170 -143
  61. package/components/data-list/selection.js +136 -76
  62. package/components/data-list/title.js +12 -1
  63. package/components/date-picker/consts.js +26 -19
  64. package/components/date-picker/date-input.js +144 -113
  65. package/components/date-picker/date-picker.js +282 -227
  66. package/components/date-picker/date-popup.js +395 -350
  67. package/components/date-picker/day.js +116 -87
  68. package/components/date-picker/month-names.js +66 -43
  69. package/components/date-picker/month-slider.js +76 -51
  70. package/components/date-picker/month.js +25 -16
  71. package/components/date-picker/months.js +50 -43
  72. package/components/date-picker/weekdays.js +22 -12
  73. package/components/date-picker/years.js +110 -83
  74. package/components/dialog/dialog.js +190 -142
  75. package/components/dialog/dialog__body-scroll-preventer.js +4 -0
  76. package/components/dropdown/anchor.js +9 -0
  77. package/components/dropdown/dropdown.js +213 -182
  78. package/components/dropdown-menu/dropdown-menu.js +97 -71
  79. package/components/editable-heading/editable-heading.js +127 -75
  80. package/components/error-bubble/error-bubble.js +60 -31
  81. package/components/error-message/error-message.js +59 -39
  82. package/components/footer/footer.js +30 -27
  83. package/components/global/compose.js +10 -1
  84. package/components/global/composeRefs.js +12 -7
  85. package/components/global/controls-height.js +2 -2
  86. package/components/global/create-stateful-context.js +15 -15
  87. package/components/global/data-tests.js +14 -6
  88. package/components/global/dom.js +86 -47
  89. package/components/global/focus-sensor-hoc.js +132 -122
  90. package/components/global/fuzzy-highlight.js +36 -22
  91. package/components/global/get-event-key.js +8 -8
  92. package/components/global/get-uid.js +8 -4
  93. package/components/global/inject-styles.js +15 -10
  94. package/components/global/listeners.js +51 -27
  95. package/components/global/memoize.js +12 -6
  96. package/components/global/normalize-indent.js +50 -19
  97. package/components/global/promise-with-timeout.js +8 -6
  98. package/components/global/prop-types.js +5 -3
  99. package/components/global/react-dom-renderer.js +44 -28
  100. package/components/global/react-render-adapter.js +1 -1
  101. package/components/global/rerender-hoc.js +30 -12
  102. package/components/global/schedule-raf.js +6 -5
  103. package/components/global/sniffer.js +1 -1
  104. package/components/global/theme.js +22 -0
  105. package/components/global/trivial-template-tag.js +10 -3
  106. package/components/global/typescript-utils.js +6 -2
  107. package/components/global/url.js +26 -20
  108. package/components/global/use-event-callback.js +4 -6
  109. package/components/grid/col.js +52 -35
  110. package/components/grid/grid.js +31 -17
  111. package/components/grid/row.js +47 -35
  112. package/components/group/group.js +25 -17
  113. package/components/header/header.js +78 -33
  114. package/components/header/logo.js +36 -20
  115. package/components/header/profile.js +199 -166
  116. package/components/header/services-link.js +4 -0
  117. package/components/header/services.js +116 -73
  118. package/components/header/smart-profile.js +203 -111
  119. package/components/header/smart-services.js +113 -62
  120. package/components/header/tray-icon.js +37 -21
  121. package/components/header/tray.js +32 -21
  122. package/components/heading/heading.js +25 -24
  123. package/components/http/http.d.ts +1 -2
  124. package/components/http/http.js +345 -203
  125. package/components/http/http.mock.d.ts +1 -5
  126. package/components/http/http.mock.js +101 -49
  127. package/components/hub-source/hub-source.js +190 -83
  128. package/components/hub-source/hub-source__user.js +44 -11
  129. package/components/hub-source/hub-source__users-groups.js +65 -37
  130. package/components/i18n/i18n-context.js +10 -7
  131. package/components/i18n/i18n.js +10 -7
  132. package/components/icon/icon.js +93 -76
  133. package/components/icon/icon__svg.js +8 -0
  134. package/components/icon/index.js +8 -0
  135. package/components/input/input.js +13 -0
  136. package/components/island/adaptive-island-hoc.js +43 -30
  137. package/components/island/content.js +132 -115
  138. package/components/island/header.js +70 -57
  139. package/components/island/island.js +40 -28
  140. package/components/island-legacy/content-legacy.js +25 -17
  141. package/components/island-legacy/header-legacy.js +27 -19
  142. package/components/island-legacy/island-legacy.js +25 -17
  143. package/components/link/clickableLink.js +59 -44
  144. package/components/link/link.js +68 -57
  145. package/components/list/consts.js +2 -2
  146. package/components/list/list.js +698 -611
  147. package/components/list/list__custom.js +62 -44
  148. package/components/list/list__hint.js +19 -10
  149. package/components/list/list__item.js +174 -133
  150. package/components/list/list__link.js +50 -37
  151. package/components/list/list__separator.js +24 -14
  152. package/components/list/list__title.js +32 -22
  153. package/components/list/list__users-groups-source.js +126 -54
  154. package/components/loader/loader.js +74 -43
  155. package/components/loader/loader__core.js +263 -198
  156. package/components/loader-inline/loader-inline.js +35 -23
  157. package/components/loader-screen/loader-screen.js +46 -25
  158. package/components/login-dialog/login-dialog.js +158 -111
  159. package/components/login-dialog/service.js +34 -8
  160. package/components/markdown/markdown.js +23 -15
  161. package/components/message/message.js +203 -161
  162. package/components/old-browsers-message/old-browsers-message.js +18 -11
  163. package/components/old-browsers-message/old-browsers-message__stop.js +7 -0
  164. package/components/old-browsers-message/white-list.js +17 -9
  165. package/components/pager/pager.js +271 -212
  166. package/components/panel/panel.js +25 -17
  167. package/components/permissions/permissions.js +172 -127
  168. package/components/permissions/permissions__cache.js +224 -194
  169. package/components/popup/popup.consts.js +1 -1
  170. package/components/popup/popup.js +343 -284
  171. package/components/popup/popup.target.js +8 -9
  172. package/components/popup/position.js +106 -96
  173. package/components/popup-menu/popup-menu.js +81 -44
  174. package/components/progress-bar/progress-bar.js +104 -87
  175. package/components/query-assist/query-assist.js +916 -838
  176. package/components/query-assist/query-assist__suggestions.js +30 -1
  177. package/components/radio/radio.js +34 -19
  178. package/components/radio/radio__item.js +69 -52
  179. package/components/select/select.js +957 -852
  180. package/components/select/select__filter.js +30 -0
  181. package/components/select/select__popup.js +487 -373
  182. package/components/shortcuts/core.js +217 -166
  183. package/components/shortcuts/shortcut-title.js +11 -6
  184. package/components/shortcuts/shortcuts-hoc.js +45 -19
  185. package/components/shortcuts/shortcuts.js +75 -50
  186. package/components/slider/slider.js +122 -99
  187. package/components/slider/slider.utils.js +24 -14
  188. package/components/storage/storage.js +33 -4
  189. package/components/storage/storage__fallback.js +224 -149
  190. package/components/storage/storage__local.js +153 -90
  191. package/components/tab-trap/tab-trap.js +153 -122
  192. package/components/table/cell.js +26 -14
  193. package/components/table/disable-hover-hoc.js +51 -33
  194. package/components/table/header-cell.js +89 -64
  195. package/components/table/header.js +132 -104
  196. package/components/table/multitable.js +125 -107
  197. package/components/table/row-with-focus-sensor.js +69 -25
  198. package/components/table/row.js +216 -175
  199. package/components/table/selection-adapter.js +3 -1
  200. package/components/table/selection-shortcuts-hoc.js +181 -180
  201. package/components/table/selection.js +226 -156
  202. package/components/table/smart-table.js +88 -50
  203. package/components/table/table.js +358 -289
  204. package/components/tabs/collapsible-more.js +79 -46
  205. package/components/tabs/collapsible-tab.js +38 -31
  206. package/components/tabs/collapsible-tabs.js +153 -88
  207. package/components/tabs/custom-item.js +2 -4
  208. package/components/tabs/dumb-tabs.js +117 -74
  209. package/components/tabs/smart-tabs.js +69 -29
  210. package/components/tabs/tab-link.js +5 -1
  211. package/components/tabs/tab.js +31 -19
  212. package/components/tabs/tabs.js +31 -0
  213. package/components/tag/tag.js +173 -133
  214. package/components/tags-input/tags-input.js +427 -329
  215. package/components/tags-list/tags-list.js +78 -57
  216. package/components/text/text.js +39 -28
  217. package/components/toggle/toggle.js +70 -56
  218. package/components/tooltip/tooltip.js +190 -146
  219. package/components/user-agreement/service.js +371 -228
  220. package/components/user-agreement/toolbox.eula.js +1 -160
  221. package/components/user-agreement/user-agreement.js +120 -85
  222. package/components/user-card/card.js +29 -0
  223. package/components/user-card/smart-user-card-tooltip.js +111 -51
  224. package/components/user-card/tooltip.js +84 -47
  225. package/components/user-card/user-card.js +29 -0
  226. package/package.json +1 -2
@@ -1,4 +1,14 @@
1
- import { _ as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
1
+ import { _ as _defineProperty, a as _inherits, b as _createClass, d as _objectSpread2, f as _classCallCheck, g as _callSuper, c as _objectWithoutProperties, e as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
2
+ import 'core-js/modules/es.symbol.js';
3
+ import 'core-js/modules/es.symbol.description.js';
4
+ import 'core-js/modules/es.array.concat.js';
5
+ import 'core-js/modules/es.array.find.js';
6
+ import 'core-js/modules/es.array.find-index.js';
7
+ import 'core-js/modules/es.array.includes.js';
8
+ import 'core-js/modules/es.array.map.js';
9
+ import 'core-js/modules/es.object.assign.js';
10
+ import 'core-js/modules/es.object.to-string.js';
11
+ import 'core-js/modules/es.string.includes.js';
2
12
  import React, { Component } from 'react';
3
13
  import PropTypes from 'prop-types';
4
14
  import classNames from 'classnames';
@@ -23,48 +33,72 @@ import ListSeparator from './list__separator.js';
23
33
  import ListHint from './list__hint.js';
24
34
  import { Type, Dimension, DEFAULT_ITEM_TYPE } from './consts.js';
25
35
  import { m as modules_3b67a421 } from '../_helpers/list.js';
36
+ import 'core-js/modules/es.array.reduce.js';
37
+ import 'core-js/modules/es.object.entries.js';
38
+ import 'core-js/modules/es.regexp.to-string.js';
39
+ import 'core-js/modules/es.array.iterator.js';
40
+ import 'core-js/modules/es.map.js';
41
+ import 'core-js/modules/es.weak-map.js';
42
+ import 'core-js/modules/web.dom-collections.iterator.js';
43
+ import 'core-js/modules/es.array.filter.js';
44
+ import 'core-js/modules/es.regexp.exec.js';
45
+ import 'core-js/modules/es.set.js';
46
+ import 'core-js/modules/es.string.split.js';
47
+ import 'core-js/modules/web.dom-collections.for-each.js';
26
48
  import '../shortcuts/core.js';
49
+ import 'core-js/modules/es.array.slice.js';
50
+ import 'core-js/modules/es.array.splice.js';
51
+ import 'core-js/modules/es.string.match.js';
27
52
  import 'combokeys';
28
53
  import '../global/sniffer.js';
29
54
  import 'sniffr';
30
55
  import '../link/link.js';
31
56
  import '../link/clickableLink.js';
32
57
  import '../_helpers/link.js';
58
+ import 'core-js/modules/es.array.index-of.js';
33
59
  import '../avatar/avatar.js';
34
60
  import '../global/url.js';
61
+ import 'core-js/modules/es.string.replace.js';
35
62
  import '../avatar/fallback-avatar.js';
63
+ import 'core-js/modules/es.array.from.js';
36
64
  import '../checkbox/checkbox.js';
37
65
  import '@jetbrains/icons/checkmark-12px';
38
66
  import '@jetbrains/icons/remove-12px';
39
67
  import '../icon/icon.js';
40
68
  import '../icon/icon__constants.js';
41
69
  import '../_helpers/icon__svg.js';
70
+ import 'core-js/modules/es.string.starts-with.js';
42
71
  import '../global/prop-types.js';
43
72
  import '../global/composeRefs.js';
44
73
  import '../global/get-event-key.js';
45
74
 
75
+ var _excluded = ["selectedLabel", "originalModel"];
46
76
  function noop() {}
47
- const warnEmptyKey = deprecate(() => {}, 'No key passed for list item with non-string label. It is considered as a bad practice and has been deprecated, please provide a key.');
77
+ var warnEmptyKey = deprecate(function () {}, 'No key passed for list item with non-string label. It is considered as a bad practice and has been deprecated, please provide a key.');
48
78
  /**
49
79
  * @param {Type} listItemType
50
80
  * @param {Object} item list item
51
81
  */
52
82
  function isItemType(listItemType, item) {
53
- let type = item.rgItemType;
83
+ var type = item.rgItemType;
54
84
  if (type == null) {
55
85
  type = DEFAULT_ITEM_TYPE;
56
86
  }
57
87
  return type === listItemType;
58
88
  }
59
- const nonActivatableTypes = [Type.SEPARATOR, Type.TITLE, Type.MARGIN];
89
+ var nonActivatableTypes = [Type.SEPARATOR, Type.TITLE, Type.MARGIN];
60
90
  function isActivatable(item) {
61
91
  return item != null && !nonActivatableTypes.includes(item.rgItemType) && !item.disabled;
62
92
  }
63
93
  function getDataHash(data) {
64
- return data.map(it => `${it.key}-${it.disabled}`).join('-');
94
+ return data.map(function (it) {
95
+ return "".concat(it.key, "-").concat(it.disabled);
96
+ }).join('-');
65
97
  }
66
- const shouldActivateFirstItem = props => props.activateFirstItem || props.activateSingleItem && props.data.length === 1;
67
- const ActiveItemContext = createStatefulContext(undefined, 'ActiveItem');
98
+ var shouldActivateFirstItem = function shouldActivateFirstItem(props) {
99
+ return props.activateFirstItem || props.activateSingleItem && props.data.length === 1;
100
+ };
101
+ var ActiveItemContext = createStatefulContext(undefined, 'ActiveItem');
68
102
  /**
69
103
  * @name List
70
104
  * @constructor
@@ -73,646 +107,699 @@ const ActiveItemContext = createStatefulContext(undefined, 'ActiveItem');
73
107
  /**
74
108
  * Displays a list of items.
75
109
  */
76
- class List extends Component {
77
- static propTypes = {
78
- id: PropTypes.string,
79
- className: PropTypes.string,
80
- hint: PropTypes.node,
81
- hintOnSelection: PropTypes.string,
82
- data: PropTypes.array,
83
- maxHeight: PropTypes.number,
84
- activeIndex: PropTypes.number,
85
- restoreActiveIndex: PropTypes.bool,
86
- activateSingleItem: PropTypes.bool,
87
- activateFirstItem: PropTypes.bool,
88
- shortcuts: PropTypes.bool,
89
- shortcutsMap: PropTypes.object,
90
- onMouseOut: PropTypes.func,
91
- onSelect: PropTypes.func,
92
- onScrollToBottom: PropTypes.func,
93
- onResize: PropTypes.func,
94
- useMouseUp: PropTypes.bool,
95
- visible: PropTypes.bool,
96
- renderOptimization: PropTypes.bool,
97
- disableMoveOverflow: PropTypes.bool,
98
- disableMoveDownOverflow: PropTypes.bool,
99
- compact: PropTypes.bool,
100
- disableScrollToActive: PropTypes.bool,
101
- hidden: PropTypes.bool,
102
- ariaLabel: PropTypes.string,
103
- preventListOverscroll: PropTypes.bool
104
- };
105
- static defaultProps = {
106
- data: [],
107
- restoreActiveIndex: false,
108
- // restore active item using its "key" property
109
- activateSingleItem: false,
110
- // if there is only one item, activate it
111
- activateFirstItem: false,
112
- // if there no active items, activate the first one
113
- onMouseOut: noop,
114
- onSelect: noop,
115
- onScrollToBottom: noop,
116
- onResize: noop,
117
- shortcuts: false,
118
- renderOptimization: true,
119
- disableMoveDownOverflow: false,
120
- ariaLabel: 'List'
121
- };
122
- state = {
123
- activeIndex: null,
124
- prevActiveIndex: null,
125
- prevData: [],
126
- activeItem: null,
127
- needScrollToActive: false,
128
- scrolling: false,
129
- hasOverflow: false,
130
- disabledHover: false,
131
- scrolledToBottom: false
132
- };
133
- static getDerivedStateFromProps(nextProps, prevState) {
134
- const {
135
- prevActiveIndex,
136
- prevData,
137
- activeItem
138
- } = prevState;
139
- const {
140
- data,
141
- activeIndex,
142
- restoreActiveIndex
143
- } = nextProps;
144
- const nextState = {
145
- prevActiveIndex: activeIndex,
146
- prevData: data
147
- };
148
- if (data !== prevData) {
149
- Object.assign(nextState, {
150
- activeIndex: null,
151
- activeItem: null
152
- });
110
+ var List = /*#__PURE__*/function (_Component) {
111
+ function List() {
112
+ var _this;
113
+ _classCallCheck(this, List);
114
+ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
115
+ args[_key] = arguments[_key];
153
116
  }
154
- if (activeIndex != null && activeIndex !== prevActiveIndex && data[activeIndex] != null) {
155
- Object.assign(nextState, {
156
- activeIndex,
157
- activeItem: data[activeIndex],
158
- needScrollToActive: true
159
- });
160
- } else if (data !== prevData && restoreActiveIndex && activeItem != null && activeItem.key != null) {
161
- // Restore active index if there is an item with the same "key" property
162
- const index = data.findIndex(item => item.key === activeItem.key);
163
- if (index >= 0) {
164
- Object.assign(nextState, {
165
- activeIndex: index,
166
- activeItem: data[index]
117
+ _this = _callSuper(this, List, [].concat(args));
118
+ _defineProperty(_this, "state", {
119
+ activeIndex: null,
120
+ prevActiveIndex: null,
121
+ prevData: [],
122
+ activeItem: null,
123
+ needScrollToActive: false,
124
+ scrolling: false,
125
+ hasOverflow: false,
126
+ disabledHover: false,
127
+ scrolledToBottom: false
128
+ });
129
+ _defineProperty(_this, "scheduleScrollListener", scheduleRAF());
130
+ _defineProperty(_this, "scheduleHoverListener", scheduleRAF());
131
+ _defineProperty(_this, "virtualizedList", void 0);
132
+ _defineProperty(_this, "unmounted", void 0);
133
+ _defineProperty(_this, "container", void 0);
134
+ _defineProperty(_this, "hoverHandler", memoize(function (index) {
135
+ return function () {
136
+ return _this.scheduleHoverListener(function () {
137
+ if (_this.state.disabledHover) {
138
+ return;
139
+ }
140
+ if (_this.container) {
141
+ _this.setState({
142
+ activeIndex: index,
143
+ activeItem: _this.props.data[index],
144
+ needScrollToActive: false
145
+ });
146
+ }
167
147
  });
168
- }
169
- }
170
- return nextState;
171
- }
172
- componentDidMount() {
173
- document.addEventListener('mousemove', this.onDocumentMouseMove);
174
- document.addEventListener('keydown', this.onDocumentKeyDown, true);
175
- if (this.props.activeIndex == null && shouldActivateFirstItem(this.props)) {
176
- this.activateFirst();
177
- }
178
- }
179
- shouldComponentUpdate(nextProps, nextState) {
180
- return nextProps !== this.props || Object.keys(nextState).some(key => nextState[key] !== this.state[key]);
181
- }
182
- componentDidUpdate(prevProps) {
183
- if (this.virtualizedList && prevProps.data !== this.props.data) {
184
- this.virtualizedList.recomputeRowHeights();
185
- }
186
- if (this.props.activeIndex == null && getDataHash(this.props.data) !== getDataHash(prevProps.data) && shouldActivateFirstItem(this.props)) {
187
- this.activateFirst();
188
- }
189
- this.checkOverflow();
190
- }
191
- componentWillUnmount() {
192
- this.unmounted = true;
193
- document.removeEventListener('mousemove', this.onDocumentMouseMove);
194
- document.removeEventListener('keydown', this.onDocumentKeyDown, true);
195
- }
196
- scheduleScrollListener = scheduleRAF();
197
- scheduleHoverListener = scheduleRAF();
198
- static isItemType = isItemType;
199
- static ListHint = ListHint;
200
- static ListProps = {
201
- Type,
202
- Dimension
203
- };
204
- virtualizedList;
205
- unmounted;
206
- container;
207
- hoverHandler = memoize(index => () => this.scheduleHoverListener(() => {
208
- if (this.state.disabledHover) {
209
- return;
210
- }
211
- if (this.container) {
212
- this.setState({
213
- activeIndex: index,
214
- activeItem: this.props.data[index],
215
- needScrollToActive: false
216
- });
217
- }
218
- }));
219
- // eslint-disable-next-line @typescript-eslint/no-magic-numbers
220
- _bufferSize = 10; // keep X items above and below of the visible area
221
- // reuse size cache for similar items
222
- sizeCacheKey = index => {
223
- if (index === 0 || index === this.props.data.length + 1) {
224
- return Type.MARGIN;
225
- }
226
- const item = this.props.data[index - 1];
227
- const isFirst = index === 1;
228
- switch (item.rgItemType) {
229
- case Type.SEPARATOR:
230
- case Type.TITLE:
231
- return `${item.rgItemType}${isFirst ? '_first' : ''}${item.description ? '_desc' : ''}`;
232
- case Type.MARGIN:
148
+ };
149
+ }));
150
+ // eslint-disable-next-line @typescript-eslint/no-magic-numbers
151
+ _defineProperty(_this, "_bufferSize", 10);
152
+ // keep X items above and below of the visible area
153
+ // reuse size cache for similar items
154
+ _defineProperty(_this, "sizeCacheKey", function (index) {
155
+ if (index === 0 || index === _this.props.data.length + 1) {
233
156
  return Type.MARGIN;
234
- case Type.CUSTOM:
235
- return `${Type.CUSTOM}_${item.key}`;
236
- case Type.ITEM:
237
- case Type.LINK:
238
- default:
239
- if (item.details) {
240
- return `${Type.ITEM}_${item.details}`;
241
- }
242
- return Type.ITEM;
243
- }
244
- };
245
- _cache = new CellMeasurerCache({
246
- defaultHeight: this.defaultItemHeight(),
247
- fixedWidth: true,
248
- keyMapper: this.sizeCacheKey
249
- });
250
- _hasActivatableItems = memoizeOne(items => items.some(isActivatable));
251
- hasActivatableItems() {
252
- return this._hasActivatableItems(this.props.data);
253
- }
254
- activateFirst = () => {
255
- const firstActivatableIndex = this.props.data.findIndex(isActivatable);
256
- if (firstActivatableIndex >= 0) {
257
- this.setState({
258
- activeIndex: firstActivatableIndex,
259
- activeItem: this.props.data[firstActivatableIndex],
260
- needScrollToActive: true
261
- });
262
- }
263
- };
264
- selectHandler = memoize(index => {
265
- var _this = this;
266
- return function (event) {
267
- let tryKeepOpen = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
268
- const item = _this.props.data[index];
269
- if (!_this.props.useMouseUp && item.onClick) {
270
- item.onClick(item, event);
271
- } else if (_this.props.useMouseUp && item.onMouseUp) {
272
- item.onMouseUp(item, event);
273
157
  }
274
- if (_this.props.onSelect) {
275
- _this.props.onSelect(item, event, {
276
- tryKeepOpen
158
+ var item = _this.props.data[index - 1];
159
+ var isFirst = index === 1;
160
+ switch (item.rgItemType) {
161
+ case Type.SEPARATOR:
162
+ case Type.TITLE:
163
+ return "".concat(item.rgItemType).concat(isFirst ? '_first' : '').concat(item.description ? '_desc' : '');
164
+ case Type.MARGIN:
165
+ return Type.MARGIN;
166
+ case Type.CUSTOM:
167
+ return "".concat(Type.CUSTOM, "_").concat(item.key);
168
+ case Type.ITEM:
169
+ case Type.LINK:
170
+ default:
171
+ if (item.details) {
172
+ return "".concat(Type.ITEM, "_").concat(item.details);
173
+ }
174
+ return Type.ITEM;
175
+ }
176
+ });
177
+ _defineProperty(_this, "_cache", new CellMeasurerCache({
178
+ defaultHeight: _this.defaultItemHeight(),
179
+ fixedWidth: true,
180
+ keyMapper: _this.sizeCacheKey
181
+ }));
182
+ _defineProperty(_this, "_hasActivatableItems", memoizeOne(function (items) {
183
+ return items.some(isActivatable);
184
+ }));
185
+ _defineProperty(_this, "activateFirst", function () {
186
+ var firstActivatableIndex = _this.props.data.findIndex(isActivatable);
187
+ if (firstActivatableIndex >= 0) {
188
+ _this.setState({
189
+ activeIndex: firstActivatableIndex,
190
+ activeItem: _this.props.data[firstActivatableIndex],
191
+ needScrollToActive: true
277
192
  });
278
193
  }
279
- };
280
- });
281
- checkboxHandler = memoize(index => event => this.selectHandler(index)(event, true));
282
- upHandler = e => {
283
- const {
284
- data,
285
- disableMoveOverflow
286
- } = this.props;
287
- const index = this.state.activeIndex;
288
- let newIndex;
289
- if (index === null || index === 0) {
290
- if (!disableMoveOverflow) {
291
- newIndex = data.length - 1;
194
+ });
195
+ _defineProperty(_this, "selectHandler", memoize(function (index) {
196
+ return function (event) {
197
+ var tryKeepOpen = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
198
+ var item = _this.props.data[index];
199
+ if (!_this.props.useMouseUp && item.onClick) {
200
+ item.onClick(item, event);
201
+ } else if (_this.props.useMouseUp && item.onMouseUp) {
202
+ item.onMouseUp(item, event);
203
+ }
204
+ if (_this.props.onSelect) {
205
+ _this.props.onSelect(item, event, {
206
+ tryKeepOpen
207
+ });
208
+ }
209
+ };
210
+ }));
211
+ _defineProperty(_this, "checkboxHandler", memoize(function (index) {
212
+ return function (event) {
213
+ return _this.selectHandler(index)(event, true);
214
+ };
215
+ }));
216
+ _defineProperty(_this, "upHandler", function (e) {
217
+ var _this$props = _this.props,
218
+ data = _this$props.data,
219
+ disableMoveOverflow = _this$props.disableMoveOverflow;
220
+ var index = _this.state.activeIndex;
221
+ var newIndex;
222
+ if (index === null || index === 0) {
223
+ if (!disableMoveOverflow) {
224
+ newIndex = data.length - 1;
225
+ } else {
226
+ return;
227
+ }
292
228
  } else {
293
- return;
229
+ newIndex = index - 1;
294
230
  }
295
- } else {
296
- newIndex = index - 1;
297
- }
298
- this.moveHandler(newIndex, this.upHandler, e);
299
- };
300
- downHandler = e => {
301
- const {
302
- data,
303
- disableMoveOverflow,
304
- disableMoveDownOverflow
305
- } = this.props;
306
- const index = this.state.activeIndex;
307
- let newIndex;
308
- if (index === null) {
309
- newIndex = 0;
310
- } else if (index + 1 === data.length) {
311
- if (!disableMoveOverflow && !disableMoveDownOverflow) {
231
+ _this.moveHandler(newIndex, _this.upHandler, e);
232
+ });
233
+ _defineProperty(_this, "downHandler", function (e) {
234
+ var _this$props2 = _this.props,
235
+ data = _this$props2.data,
236
+ disableMoveOverflow = _this$props2.disableMoveOverflow,
237
+ disableMoveDownOverflow = _this$props2.disableMoveDownOverflow;
238
+ var index = _this.state.activeIndex;
239
+ var newIndex;
240
+ if (index === null) {
312
241
  newIndex = 0;
242
+ } else if (index + 1 === data.length) {
243
+ if (!disableMoveOverflow && !disableMoveDownOverflow) {
244
+ newIndex = 0;
245
+ } else {
246
+ return;
247
+ }
313
248
  } else {
314
- return;
249
+ newIndex = index + 1;
315
250
  }
316
- } else {
317
- newIndex = index + 1;
318
- }
319
- this.moveHandler(newIndex, this.downHandler, e);
320
- };
321
- homeHandler = e => {
322
- this.moveHandler(0, this.downHandler, e);
323
- };
324
- endHandler = e => {
325
- this.moveHandler(this.props.data.length - 1, this.upHandler, e);
326
- };
327
- onDocumentMouseMove = () => {
328
- if (this.state.disabledHover) {
329
- this.setState({
330
- disabledHover: false
331
- });
332
- }
333
- };
334
- onDocumentKeyDown = e => {
335
- const metaKeys = [16, 17, 18, 19, 20, 91]; // eslint-disable-line @typescript-eslint/no-magic-numbers
336
- if (!this.state.disabledHover && !metaKeys.includes(e.keyCode)) {
337
- this.setState({
338
- disabledHover: true
339
- });
340
- }
341
- };
342
- moveHandler(index, retryCallback, e) {
343
- let correctedIndex;
344
- if (this.props.data.length === 0 || !this.hasActivatableItems()) {
345
- return;
346
- } else if (this.props.data.length < index) {
347
- correctedIndex = 0;
348
- } else {
349
- correctedIndex = index;
350
- }
351
- const item = this.props.data[correctedIndex];
352
- this.setState({
353
- activeIndex: correctedIndex,
354
- activeItem: item,
355
- needScrollToActive: true
356
- }, function onSet() {
357
- if (!isActivatable(item)) {
358
- retryCallback(e);
359
- return;
251
+ _this.moveHandler(newIndex, _this.downHandler, e);
252
+ });
253
+ _defineProperty(_this, "homeHandler", function (e) {
254
+ _this.moveHandler(0, _this.downHandler, e);
255
+ });
256
+ _defineProperty(_this, "endHandler", function (e) {
257
+ _this.moveHandler(_this.props.data.length - 1, _this.upHandler, e);
258
+ });
259
+ _defineProperty(_this, "onDocumentMouseMove", function () {
260
+ if (_this.state.disabledHover) {
261
+ _this.setState({
262
+ disabledHover: false
263
+ });
360
264
  }
361
- if (e.key !== 'Home' && e.key !== 'End') {
362
- preventDefault(e);
265
+ });
266
+ _defineProperty(_this, "onDocumentKeyDown", function (e) {
267
+ var metaKeys = [16, 17, 18, 19, 20, 91]; // eslint-disable-line @typescript-eslint/no-magic-numbers
268
+ if (!_this.state.disabledHover && !metaKeys.includes(e.keyCode)) {
269
+ _this.setState({
270
+ disabledHover: true
271
+ });
363
272
  }
364
273
  });
365
- }
366
- mouseHandler = () => {
367
- this.setState({
368
- scrolling: false
274
+ _defineProperty(_this, "mouseHandler", function () {
275
+ _this.setState({
276
+ scrolling: false
277
+ });
369
278
  });
370
- };
371
- scrollHandler = () => {
372
- this.setState({
373
- scrolling: true
374
- }, this.scrollEndHandler);
375
- };
376
- enterHandler = (event, shortcut) => {
377
- if (this.state.activeIndex !== null) {
378
- const item = this.props.data[this.state.activeIndex];
379
- this.selectHandler(this.state.activeIndex)(event);
380
- if (item.href && !event.defaultPrevented) {
381
- if (shortcut != null && ['command+enter', 'ctrl+enter'].includes(shortcut)) {
382
- window.open(item.href, '_blank');
383
- } else if (shortcut === 'shift+enter') {
384
- window.open(item.href);
385
- } else {
386
- window.location.href = item.href;
279
+ _defineProperty(_this, "scrollHandler", function () {
280
+ _this.setState({
281
+ scrolling: true
282
+ }, _this.scrollEndHandler);
283
+ });
284
+ _defineProperty(_this, "enterHandler", function (event, shortcut) {
285
+ if (_this.state.activeIndex !== null) {
286
+ var item = _this.props.data[_this.state.activeIndex];
287
+ _this.selectHandler(_this.state.activeIndex)(event);
288
+ if (item.href && !event.defaultPrevented) {
289
+ if (shortcut != null && ['command+enter', 'ctrl+enter'].includes(shortcut)) {
290
+ window.open(item.href, '_blank');
291
+ } else if (shortcut === 'shift+enter') {
292
+ window.open(item.href);
293
+ } else {
294
+ window.location.href = item.href;
295
+ }
387
296
  }
297
+ return false; // do not propagate event
298
+ } else {
299
+ return true; // propagate event to the parent component (e.g., QueryAssist)
388
300
  }
389
- return false; // do not propagate event
390
- } else {
391
- return true; // propagate event to the parent component (e.g., QueryAssist)
392
- }
393
- };
394
- getFirst() {
395
- return this.props.data.find(item => item.rgItemType === Type.ITEM || item.rgItemType === Type.CUSTOM);
396
- }
397
- getSelected() {
398
- return this.state.activeIndex != null ? this.props.data[this.state.activeIndex] : null;
399
- }
400
- clearSelected = () => {
401
- this.setState({
402
- activeIndex: null,
403
- needScrollToActive: false
404
301
  });
405
- };
406
- defaultItemHeight() {
407
- return this.props.compact ? Dimension.COMPACT_ITEM_HEIGHT : Dimension.ITEM_HEIGHT;
408
- }
409
- scrollEndHandler = () => this.scheduleScrollListener(() => {
410
- const innerContainer = this.inner;
411
- if (innerContainer) {
412
- const maxScrollingPosition = innerContainer.scrollHeight;
413
- const sensitivity = this.defaultItemHeight() / 2;
414
- const currentScrollingPosition = innerContainer.scrollTop + innerContainer.clientHeight + sensitivity;
415
- const scrolledToBottom = maxScrollingPosition > 0 && currentScrollingPosition >= maxScrollingPosition;
416
- if (!this.unmounted) {
417
- this.setState({
418
- scrolledToBottom
302
+ _defineProperty(_this, "clearSelected", function () {
303
+ _this.setState({
304
+ activeIndex: null,
305
+ needScrollToActive: false
306
+ });
307
+ });
308
+ _defineProperty(_this, "scrollEndHandler", function () {
309
+ return _this.scheduleScrollListener(function () {
310
+ var innerContainer = _this.inner;
311
+ if (innerContainer) {
312
+ var maxScrollingPosition = innerContainer.scrollHeight;
313
+ var sensitivity = _this.defaultItemHeight() / 2;
314
+ var currentScrollingPosition = innerContainer.scrollTop + innerContainer.clientHeight + sensitivity;
315
+ var scrolledToBottom = maxScrollingPosition > 0 && currentScrollingPosition >= maxScrollingPosition;
316
+ if (!_this.unmounted) {
317
+ _this.setState({
318
+ scrolledToBottom
319
+ });
320
+ }
321
+ if (scrolledToBottom) {
322
+ _this.props.onScrollToBottom();
323
+ }
324
+ }
325
+ });
326
+ });
327
+ _defineProperty(_this, "checkOverflow", function () {
328
+ if (_this.inner) {
329
+ _this.setState({
330
+ hasOverflow: _this.inner.scrollHeight - _this.inner.clientHeight > 1
419
331
  });
420
332
  }
421
- if (scrolledToBottom) {
422
- this.props.onScrollToBottom();
333
+ });
334
+ _defineProperty(_this, "renderItem", function (_ref) {
335
+ var _ref$index = _ref.index,
336
+ index = _ref$index === void 0 ? 1 : _ref$index,
337
+ style = _ref.style,
338
+ _ref$isScrolling = _ref.isScrolling,
339
+ isScrolling = _ref$isScrolling === void 0 ? false : _ref$isScrolling,
340
+ parent = _ref.parent,
341
+ key = _ref.key;
342
+ var itemKey;
343
+ var el;
344
+ var realIndex = index - 1;
345
+ var item = _this.props.data[realIndex];
346
+ var itemId = _this.getId(item);
347
+ // top and bottom margins
348
+ if (index === 0 || index === _this.props.data.length + 1 || item.rgItemType === Type.MARGIN) {
349
+ itemKey = key || "".concat(Type.MARGIN, "_").concat(index);
350
+ el = /*#__PURE__*/React.createElement("div", {
351
+ style: {
352
+ height: Dimension.MARGIN
353
+ }
354
+ });
355
+ } else {
356
+ // Hack around SelectNG implementation
357
+ item.selectedLabel;
358
+ item.originalModel;
359
+ var restProps = _objectWithoutProperties(item, _excluded);
360
+ var cleanedProps = restProps;
361
+ if (cleanedProps.url) {
362
+ cleanedProps.href = cleanedProps.url;
363
+ }
364
+ if (cleanedProps.href) {
365
+ cleanedProps.rgItemType = Type.LINK;
366
+ }
367
+ var itemProps = Object.assign({
368
+ rgItemType: DEFAULT_ITEM_TYPE
369
+ }, restProps);
370
+ itemKey = key || itemId;
371
+ itemProps.hover = realIndex === _this.state.activeIndex;
372
+ if (itemProps.hoverClassName != null && itemProps.hover) {
373
+ itemProps.className = classNames(itemProps.className, itemProps.hoverClassName);
374
+ }
375
+ itemProps.onMouseOver = _this.hoverHandler(realIndex);
376
+ itemProps.tabIndex = -1;
377
+ itemProps.scrolling = isScrolling;
378
+ var selectHandler = _this.selectHandler(realIndex);
379
+ if (_this.props.useMouseUp) {
380
+ itemProps.onMouseUp = selectHandler;
381
+ } else {
382
+ itemProps.onClick = selectHandler;
383
+ }
384
+ itemProps.onCheckboxChange = _this.checkboxHandler(realIndex);
385
+ if (itemProps.compact == null) {
386
+ itemProps.compact = _this.props.compact;
387
+ }
388
+ var ItemComponent;
389
+ var isFirst = index === 1;
390
+ switch (itemProps.rgItemType) {
391
+ case Type.SEPARATOR:
392
+ ItemComponent = ListSeparator;
393
+ itemProps.isFirst = isFirst;
394
+ break;
395
+ case Type.LINK:
396
+ ItemComponent = ListLink;
397
+ _this.addItemDataTestToProp(itemProps);
398
+ break;
399
+ case Type.ITEM:
400
+ ItemComponent = ListItem;
401
+ _this.addItemDataTestToProp(itemProps);
402
+ break;
403
+ case Type.CUSTOM:
404
+ ItemComponent = ListCustom;
405
+ _this.addItemDataTestToProp(itemProps);
406
+ break;
407
+ case Type.TITLE:
408
+ itemProps.isFirst = isFirst;
409
+ ItemComponent = ListTitle;
410
+ break;
411
+ default:
412
+ throw new Error("Unknown menu element type: ".concat(itemProps.rgItemType));
413
+ }
414
+ el = /*#__PURE__*/React.createElement(ItemComponent, _extends({}, itemProps, {
415
+ key: itemProps.key
416
+ }));
423
417
  }
424
- }
425
- });
426
- checkOverflow = () => {
427
- if (this.inner) {
428
- this.setState({
429
- hasOverflow: this.inner.scrollHeight - this.inner.clientHeight > 1
430
- });
431
- }
432
- };
433
- getVisibleListHeight(maxHeight) {
434
- return maxHeight - this.defaultItemHeight() - Dimension.INNER_PADDING;
418
+ return parent ? /*#__PURE__*/React.createElement(CellMeasurer, {
419
+ cache: _this._cache,
420
+ key: itemKey,
421
+ parent: parent,
422
+ rowIndex: index,
423
+ columnIndex: 0
424
+ }, function (_ref2) {
425
+ var registerChild = _ref2.registerChild;
426
+ return /*#__PURE__*/React.createElement("div", {
427
+ ref: registerChild,
428
+ style: style,
429
+ role: "row",
430
+ id: itemId
431
+ }, /*#__PURE__*/React.createElement("div", {
432
+ role: "cell"
433
+ }, el));
434
+ }) : /*#__PURE__*/React.createElement("div", {
435
+ role: "row",
436
+ id: itemId,
437
+ key: itemKey
438
+ }, /*#__PURE__*/React.createElement("div", {
439
+ role: "cell"
440
+ }, el));
441
+ });
442
+ _defineProperty(_this, "addItemDataTestToProp", function (props) {
443
+ props['data-test'] = joinDataTestAttributes('ring-list-item', props['data-test']);
444
+ return props;
445
+ });
446
+ _defineProperty(_this, "virtualizedListRef", function (el) {
447
+ _this.virtualizedList = el;
448
+ });
449
+ _defineProperty(_this, "containerRef", function (el) {
450
+ _this.container = el;
451
+ });
452
+ _defineProperty(_this, "_inner", void 0);
453
+ _defineProperty(_this, "id", getUID('list-'));
454
+ _defineProperty(_this, "shortcutsScope", _this.id);
455
+ _defineProperty(_this, "shortcutsMap", {
456
+ up: _this.upHandler,
457
+ down: _this.downHandler,
458
+ home: _this.homeHandler,
459
+ end: _this.endHandler,
460
+ enter: _this.enterHandler,
461
+ 'meta+enter': _this.enterHandler,
462
+ 'ctrl+enter': _this.enterHandler,
463
+ 'command+enter': _this.enterHandler,
464
+ 'shift+enter': _this.enterHandler
465
+ });
466
+ return _this;
435
467
  }
436
- _deprecatedGenerateKeyFromContent(itemProps) {
437
- const identificator = itemProps.label || itemProps.description;
438
- const isString = typeof identificator === 'string' || identificator instanceof String;
439
- if (identificator && !isString) {
440
- warnEmptyKey();
441
- `${itemProps.rgItemType}_${JSON.stringify(identificator)}`;
468
+ _inherits(List, _Component);
469
+ return _createClass(List, [{
470
+ key: "componentDidMount",
471
+ value: function componentDidMount() {
472
+ document.addEventListener('mousemove', this.onDocumentMouseMove);
473
+ document.addEventListener('keydown', this.onDocumentKeyDown, true);
474
+ if (this.props.activeIndex == null && shouldActivateFirstItem(this.props)) {
475
+ this.activateFirst();
476
+ }
442
477
  }
443
- return `${itemProps.rgItemType}_${identificator}`;
444
- }
445
- getId(item) {
446
- return item != null ? `${this.id}:${item.key || this._deprecatedGenerateKeyFromContent(item)}` : undefined;
447
- }
448
- renderItem = _ref => {
449
- let {
450
- index = 1,
451
- style,
452
- isScrolling = false,
453
- parent,
454
- key
455
- } = _ref;
456
- let itemKey;
457
- let el;
458
- const realIndex = index - 1;
459
- const item = this.props.data[realIndex];
460
- const itemId = this.getId(item);
461
- // top and bottom margins
462
- if (index === 0 || index === this.props.data.length + 1 || item.rgItemType === Type.MARGIN) {
463
- itemKey = key || `${Type.MARGIN}_${index}`;
464
- el = /*#__PURE__*/React.createElement("div", {
465
- style: {
466
- height: Dimension.MARGIN
467
- }
478
+ }, {
479
+ key: "shouldComponentUpdate",
480
+ value: function shouldComponentUpdate(nextProps, nextState) {
481
+ var _this2 = this;
482
+ return nextProps !== this.props || Object.keys(nextState).some(function (key) {
483
+ return nextState[key] !== _this2.state[key];
468
484
  });
469
- } else {
470
- // Hack around SelectNG implementation
471
- const {
472
- selectedLabel,
473
- originalModel,
474
- ...restProps
475
- } = item;
476
- const cleanedProps = restProps;
477
- if (cleanedProps.url) {
478
- cleanedProps.href = cleanedProps.url;
479
- }
480
- if (cleanedProps.href) {
481
- cleanedProps.rgItemType = Type.LINK;
485
+ }
486
+ }, {
487
+ key: "componentDidUpdate",
488
+ value: function componentDidUpdate(prevProps) {
489
+ if (this.virtualizedList && prevProps.data !== this.props.data) {
490
+ this.virtualizedList.recomputeRowHeights();
482
491
  }
483
- const itemProps = Object.assign({
484
- rgItemType: DEFAULT_ITEM_TYPE
485
- }, restProps);
486
- itemKey = key || itemId;
487
- itemProps.hover = realIndex === this.state.activeIndex;
488
- if (itemProps.hoverClassName != null && itemProps.hover) {
489
- itemProps.className = classNames(itemProps.className, itemProps.hoverClassName);
492
+ if (this.props.activeIndex == null && getDataHash(this.props.data) !== getDataHash(prevProps.data) && shouldActivateFirstItem(this.props)) {
493
+ this.activateFirst();
490
494
  }
491
- itemProps.onMouseOver = this.hoverHandler(realIndex);
492
- itemProps.tabIndex = -1;
493
- itemProps.scrolling = isScrolling;
494
- const selectHandler = this.selectHandler(realIndex);
495
- if (this.props.useMouseUp) {
496
- itemProps.onMouseUp = selectHandler;
495
+ this.checkOverflow();
496
+ }
497
+ }, {
498
+ key: "componentWillUnmount",
499
+ value: function componentWillUnmount() {
500
+ this.unmounted = true;
501
+ document.removeEventListener('mousemove', this.onDocumentMouseMove);
502
+ document.removeEventListener('keydown', this.onDocumentKeyDown, true);
503
+ }
504
+ }, {
505
+ key: "hasActivatableItems",
506
+ value: function hasActivatableItems() {
507
+ return this._hasActivatableItems(this.props.data);
508
+ }
509
+ }, {
510
+ key: "moveHandler",
511
+ value: function moveHandler(index, retryCallback, e) {
512
+ var correctedIndex;
513
+ if (this.props.data.length === 0 || !this.hasActivatableItems()) {
514
+ return;
515
+ } else if (this.props.data.length < index) {
516
+ correctedIndex = 0;
497
517
  } else {
498
- itemProps.onClick = selectHandler;
518
+ correctedIndex = index;
499
519
  }
500
- itemProps.onCheckboxChange = this.checkboxHandler(realIndex);
501
- if (itemProps.compact == null) {
502
- itemProps.compact = this.props.compact;
520
+ var item = this.props.data[correctedIndex];
521
+ this.setState({
522
+ activeIndex: correctedIndex,
523
+ activeItem: item,
524
+ needScrollToActive: true
525
+ }, function onSet() {
526
+ if (!isActivatable(item)) {
527
+ retryCallback(e);
528
+ return;
529
+ }
530
+ if (e.key !== 'Home' && e.key !== 'End') {
531
+ preventDefault(e);
532
+ }
533
+ });
534
+ }
535
+ }, {
536
+ key: "getFirst",
537
+ value: function getFirst() {
538
+ return this.props.data.find(function (item) {
539
+ return item.rgItemType === Type.ITEM || item.rgItemType === Type.CUSTOM;
540
+ });
541
+ }
542
+ }, {
543
+ key: "getSelected",
544
+ value: function getSelected() {
545
+ return this.state.activeIndex != null ? this.props.data[this.state.activeIndex] : null;
546
+ }
547
+ }, {
548
+ key: "defaultItemHeight",
549
+ value: function defaultItemHeight() {
550
+ return this.props.compact ? Dimension.COMPACT_ITEM_HEIGHT : Dimension.ITEM_HEIGHT;
551
+ }
552
+ }, {
553
+ key: "getVisibleListHeight",
554
+ value: function getVisibleListHeight(maxHeight) {
555
+ return maxHeight - this.defaultItemHeight() - Dimension.INNER_PADDING;
556
+ }
557
+ }, {
558
+ key: "_deprecatedGenerateKeyFromContent",
559
+ value: function _deprecatedGenerateKeyFromContent(itemProps) {
560
+ var identificator = itemProps.label || itemProps.description;
561
+ var isString = typeof identificator === 'string' || identificator instanceof String;
562
+ if (identificator && !isString) {
563
+ warnEmptyKey();
564
+ "".concat(itemProps.rgItemType, "_").concat(JSON.stringify(identificator));
503
565
  }
504
- let ItemComponent;
505
- const isFirst = index === 1;
506
- switch (itemProps.rgItemType) {
507
- case Type.SEPARATOR:
508
- ItemComponent = ListSeparator;
509
- itemProps.isFirst = isFirst;
510
- break;
511
- case Type.LINK:
512
- ItemComponent = ListLink;
513
- this.addItemDataTestToProp(itemProps);
514
- break;
515
- case Type.ITEM:
516
- ItemComponent = ListItem;
517
- this.addItemDataTestToProp(itemProps);
518
- break;
519
- case Type.CUSTOM:
520
- ItemComponent = ListCustom;
521
- this.addItemDataTestToProp(itemProps);
522
- break;
523
- case Type.TITLE:
524
- itemProps.isFirst = isFirst;
525
- ItemComponent = ListTitle;
526
- break;
527
- default:
528
- throw new Error(`Unknown menu element type: ${itemProps.rgItemType}`);
566
+ return "".concat(itemProps.rgItemType, "_").concat(identificator);
567
+ }
568
+ }, {
569
+ key: "getId",
570
+ value: function getId(item) {
571
+ return item != null ? "".concat(this.id, ":").concat(item.key || this._deprecatedGenerateKeyFromContent(item)) : undefined;
572
+ }
573
+ }, {
574
+ key: "inner",
575
+ get: function get() {
576
+ if (!this._inner) {
577
+ this._inner = this.container && this.container.querySelector('.ring-list__i');
529
578
  }
530
- el = /*#__PURE__*/React.createElement(ItemComponent, _extends({}, itemProps, {
531
- key: itemProps.key
532
- }));
579
+ return this._inner;
533
580
  }
534
- return parent ? /*#__PURE__*/React.createElement(CellMeasurer, {
535
- cache: this._cache,
536
- key: itemKey,
537
- parent: parent,
538
- rowIndex: index,
539
- columnIndex: 0
540
- }, _ref2 => {
541
- let {
542
- registerChild
543
- } = _ref2;
544
- return /*#__PURE__*/React.createElement("div", {
545
- ref: registerChild,
546
- style: style,
547
- role: "row",
548
- id: itemId
549
- }, /*#__PURE__*/React.createElement("div", {
550
- role: "cell"
551
- }, el));
552
- }) : /*#__PURE__*/React.createElement("div", {
553
- role: "row",
554
- id: itemId,
555
- key: itemKey
556
- }, /*#__PURE__*/React.createElement("div", {
557
- role: "cell"
558
- }, el));
559
- };
560
- addItemDataTestToProp = props => {
561
- props['data-test'] = joinDataTestAttributes('ring-list-item', props['data-test']);
562
- return props;
563
- };
564
- virtualizedListRef = el => {
565
- this.virtualizedList = el;
566
- };
567
- containerRef = el => {
568
- this.container = el;
569
- };
570
- _inner;
571
- get inner() {
572
- if (!this._inner) {
573
- this._inner = this.container && this.container.querySelector('.ring-list__i');
581
+ }, {
582
+ key: "renderVirtualizedInner",
583
+ value: function renderVirtualizedInner(_ref3) {
584
+ var _this3 = this;
585
+ var height = _ref3.height,
586
+ maxHeight = _ref3.maxHeight,
587
+ _ref3$autoHeight = _ref3.autoHeight,
588
+ autoHeight = _ref3$autoHeight === void 0 ? false : _ref3$autoHeight,
589
+ rowCount = _ref3.rowCount,
590
+ isScrolling = _ref3.isScrolling,
591
+ _ref3$onChildScroll = _ref3.onChildScroll,
592
+ onChildScroll = _ref3$onChildScroll === void 0 ? noop : _ref3$onChildScroll,
593
+ scrollTop = _ref3.scrollTop,
594
+ registerChild = _ref3.registerChild;
595
+ var dirOverride = {
596
+ direction: 'inherit'
597
+ }; // Virtualized sets "direction: ltr" by default https://github.com/bvaughn/react-virtualized/issues/457
598
+ return /*#__PURE__*/React.createElement(AutoSizer, {
599
+ disableHeight: true,
600
+ onResize: this.props.onResize
601
+ }, function (_ref4) {
602
+ var width = _ref4.width;
603
+ return /*#__PURE__*/React.createElement("div", {
604
+ ref: registerChild
605
+ }, /*#__PURE__*/React.createElement(VirtualizedList, {
606
+ "aria-label": _this3.props.ariaLabel,
607
+ ref: _this3.virtualizedListRef,
608
+ className: classNames('ring-list__i', {
609
+ [modules_3b67a421.overscrollNone]: _this3.props.preventListOverscroll
610
+ }),
611
+ autoHeight: autoHeight,
612
+ style: maxHeight ? _objectSpread2({
613
+ maxHeight,
614
+ height: 'auto'
615
+ }, dirOverride) : dirOverride,
616
+ autoContainerWidth: true,
617
+ height: height,
618
+ width: width,
619
+ isScrolling: isScrolling,
620
+ onScroll: function onScroll(e) {
621
+ onChildScroll(e);
622
+ _this3.scrollEndHandler();
623
+ },
624
+ scrollTop: scrollTop,
625
+ rowCount: rowCount,
626
+ estimatedRowSize: _this3.defaultItemHeight(),
627
+ rowHeight: _this3._cache.rowHeight,
628
+ rowRenderer: _this3.renderItem,
629
+ overscanRowCount: _this3._bufferSize
630
+ // ensure rerendering
631
+ ,
632
+ noop: function noop() {},
633
+ scrollToIndex: !_this3.props.disableScrollToActive && _this3.state.needScrollToActive && _this3.state.activeIndex != null ? _this3.state.activeIndex + 1 : undefined,
634
+ scrollToAlignment: "center",
635
+ deferredMeasurementCache: _this3._cache,
636
+ onRowsRendered: _this3.checkOverflow
637
+ }));
638
+ });
574
639
  }
575
- return this._inner;
576
- }
577
- renderVirtualizedInner(_ref3) {
578
- let {
579
- height,
580
- maxHeight,
581
- autoHeight = false,
582
- rowCount,
583
- isScrolling,
584
- onChildScroll = noop,
585
- scrollTop,
586
- registerChild
587
- } = _ref3;
588
- const dirOverride = {
589
- direction: 'inherit'
590
- }; // Virtualized sets "direction: ltr" by default https://github.com/bvaughn/react-virtualized/issues/457
591
- return /*#__PURE__*/React.createElement(AutoSizer, {
592
- disableHeight: true,
593
- onResize: this.props.onResize
594
- }, _ref4 => {
595
- let {
596
- width
597
- } = _ref4;
640
+ }, {
641
+ key: "renderVirtualized",
642
+ value: function renderVirtualized(maxHeight, rowCount) {
643
+ var _this4 = this;
644
+ if (maxHeight) {
645
+ return this.renderVirtualizedInner({
646
+ height: maxHeight,
647
+ maxHeight,
648
+ rowCount
649
+ });
650
+ }
651
+ return /*#__PURE__*/React.createElement(WindowScroller, null, function (props) {
652
+ return _this4.renderVirtualizedInner(_objectSpread2(_objectSpread2({}, props), {}, {
653
+ rowCount,
654
+ autoHeight: true
655
+ }));
656
+ });
657
+ }
658
+ }, {
659
+ key: "renderSimple",
660
+ value: function renderSimple(maxHeight, rowCount) {
661
+ var items = [];
662
+ for (var index = 0; index < rowCount; index++) {
663
+ items.push(this.renderItem({
664
+ index,
665
+ isScrolling: this.state.scrolling
666
+ }));
667
+ }
598
668
  return /*#__PURE__*/React.createElement("div", {
599
- ref: registerChild
600
- }, /*#__PURE__*/React.createElement(VirtualizedList, {
669
+ className: classNames('ring-list__i', modules_3b67a421.simpleInner),
670
+ onScroll: this.scrollHandler,
671
+ onMouseMove: this.mouseHandler
672
+ }, /*#__PURE__*/React.createElement("div", {
601
673
  "aria-label": this.props.ariaLabel,
602
- ref: this.virtualizedListRef,
603
- className: classNames('ring-list__i', {
604
- [modules_3b67a421.overscrollNone]: this.props.preventListOverscroll
605
- }),
606
- autoHeight: autoHeight,
674
+ role: "grid",
607
675
  style: maxHeight ? {
608
- maxHeight,
609
- height: 'auto',
610
- ...dirOverride
611
- } : dirOverride,
612
- autoContainerWidth: true,
613
- height: height,
614
- width: width,
615
- isScrolling: isScrolling,
616
- onScroll: e => {
617
- onChildScroll(e);
618
- this.scrollEndHandler();
619
- },
620
- scrollTop: scrollTop,
621
- rowCount: rowCount,
622
- estimatedRowSize: this.defaultItemHeight(),
623
- rowHeight: this._cache.rowHeight,
624
- rowRenderer: this.renderItem,
625
- overscanRowCount: this._bufferSize
626
- // ensure rerendering
627
- ,
628
- noop: () => {},
629
- scrollToIndex: !this.props.disableScrollToActive && this.state.needScrollToActive && this.state.activeIndex != null ? this.state.activeIndex + 1 : undefined,
630
- scrollToAlignment: "center",
631
- deferredMeasurementCache: this._cache,
632
- onRowsRendered: this.checkOverflow
633
- }));
634
- });
635
- }
636
- renderVirtualized(maxHeight, rowCount) {
637
- if (maxHeight) {
638
- return this.renderVirtualizedInner({
639
- height: maxHeight,
640
- maxHeight,
641
- rowCount
642
- });
676
+ maxHeight: this.getVisibleListHeight(maxHeight)
677
+ } : undefined
678
+ }, items));
643
679
  }
644
- return /*#__PURE__*/React.createElement(WindowScroller, null, props => this.renderVirtualizedInner({
645
- ...props,
646
- rowCount,
647
- autoHeight: true
648
- }));
649
- }
650
- renderSimple(maxHeight, rowCount) {
651
- const items = [];
652
- for (let index = 0; index < rowCount; index++) {
653
- items.push(this.renderItem({
654
- index,
655
- isScrolling: this.state.scrolling
656
- }));
680
+ }, {
681
+ key: "render",
682
+ value: /** @override */
683
+ function render() {
684
+ var hint = this.getSelected() && this.props.hintOnSelection || this.props.hint;
685
+ var fadeStyles = hint ? {
686
+ bottom: Dimension.ITEM_HEIGHT
687
+ } : undefined;
688
+ var rowCount = this.props.data.length + 2;
689
+ var maxHeight = this.props.maxHeight && this.getVisibleListHeight(this.props.maxHeight);
690
+ var classes = classNames(modules_3b67a421.list, this.props.className);
691
+ return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ActiveItemContext.Updater, {
692
+ value: this.getId(this.state.activeItem),
693
+ skipUpdate: this.props.hidden || !isActivatable(this.state.activeItem)
694
+ }), /*#__PURE__*/React.createElement("div", {
695
+ id: this.props.id,
696
+ ref: this.containerRef,
697
+ className: classes,
698
+ onMouseOut: this.props.onMouseOut,
699
+ onBlur: this.props.onMouseOut,
700
+ onMouseLeave: this.clearSelected,
701
+ "data-test": "ring-list"
702
+ }, this.props.shortcuts && /*#__PURE__*/React.createElement(Shortcuts, {
703
+ map: this.props.shortcutsMap ? _objectSpread2(_objectSpread2({}, this.shortcutsMap), this.props.shortcutsMap) : this.shortcutsMap,
704
+ scope: this.shortcutsScope
705
+ }), this.props.renderOptimization ? this.renderVirtualized(maxHeight, rowCount) : this.renderSimple(maxHeight, rowCount), this.state.hasOverflow && !this.state.scrolledToBottom && /*#__PURE__*/React.createElement("div", {
706
+ className: modules_3b67a421.fade,
707
+ style: fadeStyles
708
+ }), hint && /*#__PURE__*/React.createElement(ListHint, {
709
+ label: hint
710
+ })));
657
711
  }
658
- return /*#__PURE__*/React.createElement("div", {
659
- className: classNames('ring-list__i', modules_3b67a421.simpleInner),
660
- onScroll: this.scrollHandler,
661
- onMouseMove: this.mouseHandler
662
- }, /*#__PURE__*/React.createElement("div", {
663
- "aria-label": this.props.ariaLabel,
664
- role: "grid",
665
- style: maxHeight ? {
666
- maxHeight: this.getVisibleListHeight(maxHeight)
667
- } : undefined
668
- }, items));
669
- }
670
- id = getUID('list-');
671
- shortcutsScope = this.id;
672
- shortcutsMap = {
673
- up: this.upHandler,
674
- down: this.downHandler,
675
- home: this.homeHandler,
676
- end: this.endHandler,
677
- enter: this.enterHandler,
678
- 'meta+enter': this.enterHandler,
679
- 'ctrl+enter': this.enterHandler,
680
- 'command+enter': this.enterHandler,
681
- 'shift+enter': this.enterHandler
682
- };
683
- /** @override */
684
- render() {
685
- const hint = this.getSelected() && this.props.hintOnSelection || this.props.hint;
686
- const fadeStyles = hint ? {
687
- bottom: Dimension.ITEM_HEIGHT
688
- } : undefined;
689
- const rowCount = this.props.data.length + 2;
690
- const maxHeight = this.props.maxHeight && this.getVisibleListHeight(this.props.maxHeight);
691
- const classes = classNames(modules_3b67a421.list, this.props.className);
692
- return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ActiveItemContext.Updater, {
693
- value: this.getId(this.state.activeItem),
694
- skipUpdate: this.props.hidden || !isActivatable(this.state.activeItem)
695
- }), /*#__PURE__*/React.createElement("div", {
696
- id: this.props.id,
697
- ref: this.containerRef,
698
- className: classes,
699
- onMouseOut: this.props.onMouseOut,
700
- onBlur: this.props.onMouseOut,
701
- onMouseLeave: this.clearSelected,
702
- "data-test": "ring-list"
703
- }, this.props.shortcuts && /*#__PURE__*/React.createElement(Shortcuts, {
704
- map: this.props.shortcutsMap ? {
705
- ...this.shortcutsMap,
706
- ...this.props.shortcutsMap
707
- } : this.shortcutsMap,
708
- scope: this.shortcutsScope
709
- }), this.props.renderOptimization ? this.renderVirtualized(maxHeight, rowCount) : this.renderSimple(maxHeight, rowCount), this.state.hasOverflow && !this.state.scrolledToBottom && /*#__PURE__*/React.createElement("div", {
710
- className: modules_3b67a421.fade,
711
- style: fadeStyles
712
- }), hint && /*#__PURE__*/React.createElement(ListHint, {
713
- label: hint
714
- })));
715
- }
716
- }
712
+ }], [{
713
+ key: "getDerivedStateFromProps",
714
+ value: function getDerivedStateFromProps(nextProps, prevState) {
715
+ var prevActiveIndex = prevState.prevActiveIndex,
716
+ prevData = prevState.prevData,
717
+ activeItem = prevState.activeItem;
718
+ var data = nextProps.data,
719
+ activeIndex = nextProps.activeIndex,
720
+ restoreActiveIndex = nextProps.restoreActiveIndex;
721
+ var nextState = {
722
+ prevActiveIndex: activeIndex,
723
+ prevData: data
724
+ };
725
+ if (data !== prevData) {
726
+ Object.assign(nextState, {
727
+ activeIndex: null,
728
+ activeItem: null
729
+ });
730
+ }
731
+ if (activeIndex != null && activeIndex !== prevActiveIndex && data[activeIndex] != null) {
732
+ Object.assign(nextState, {
733
+ activeIndex,
734
+ activeItem: data[activeIndex],
735
+ needScrollToActive: true
736
+ });
737
+ } else if (data !== prevData && restoreActiveIndex && activeItem != null && activeItem.key != null) {
738
+ // Restore active index if there is an item with the same "key" property
739
+ var index = data.findIndex(function (item) {
740
+ return item.key === activeItem.key;
741
+ });
742
+ if (index >= 0) {
743
+ Object.assign(nextState, {
744
+ activeIndex: index,
745
+ activeItem: data[index]
746
+ });
747
+ }
748
+ }
749
+ return nextState;
750
+ }
751
+ }]);
752
+ }(Component);
753
+ _defineProperty(List, "propTypes", {
754
+ id: PropTypes.string,
755
+ className: PropTypes.string,
756
+ hint: PropTypes.node,
757
+ hintOnSelection: PropTypes.string,
758
+ data: PropTypes.array,
759
+ maxHeight: PropTypes.number,
760
+ activeIndex: PropTypes.number,
761
+ restoreActiveIndex: PropTypes.bool,
762
+ activateSingleItem: PropTypes.bool,
763
+ activateFirstItem: PropTypes.bool,
764
+ shortcuts: PropTypes.bool,
765
+ shortcutsMap: PropTypes.object,
766
+ onMouseOut: PropTypes.func,
767
+ onSelect: PropTypes.func,
768
+ onScrollToBottom: PropTypes.func,
769
+ onResize: PropTypes.func,
770
+ useMouseUp: PropTypes.bool,
771
+ visible: PropTypes.bool,
772
+ renderOptimization: PropTypes.bool,
773
+ disableMoveOverflow: PropTypes.bool,
774
+ disableMoveDownOverflow: PropTypes.bool,
775
+ compact: PropTypes.bool,
776
+ disableScrollToActive: PropTypes.bool,
777
+ hidden: PropTypes.bool,
778
+ ariaLabel: PropTypes.string,
779
+ preventListOverscroll: PropTypes.bool
780
+ });
781
+ _defineProperty(List, "defaultProps", {
782
+ data: [],
783
+ restoreActiveIndex: false,
784
+ // restore active item using its "key" property
785
+ activateSingleItem: false,
786
+ // if there is only one item, activate it
787
+ activateFirstItem: false,
788
+ // if there no active items, activate the first one
789
+ onMouseOut: noop,
790
+ onSelect: noop,
791
+ onScrollToBottom: noop,
792
+ onResize: noop,
793
+ shortcuts: false,
794
+ renderOptimization: true,
795
+ disableMoveDownOverflow: false,
796
+ ariaLabel: 'List'
797
+ });
798
+ _defineProperty(List, "isItemType", isItemType);
799
+ _defineProperty(List, "ListHint", ListHint);
800
+ _defineProperty(List, "ListProps", {
801
+ Type,
802
+ Dimension
803
+ });
717
804
 
718
805
  export { ActiveItemContext, List as default };