@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,5 +1,19 @@
1
- import { _ as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
2
- import React, { Component, Fragment } from 'react';
1
+ import { _ as _defineProperty, a as _inherits, b as _createClass, d as _objectSpread2, e as _extends, f as _classCallCheck, g as _callSuper, c as _objectWithoutProperties, o as _toPropertyKey } from '../_helpers/_rollupPluginBabelHelpers.js';
2
+ import 'core-js/modules/es.array.concat.js';
3
+ import 'core-js/modules/es.array.filter.js';
4
+ import 'core-js/modules/es.array.find.js';
5
+ import 'core-js/modules/es.array.index-of.js';
6
+ import 'core-js/modules/es.array.map.js';
7
+ import 'core-js/modules/es.array.reduce.js';
8
+ import 'core-js/modules/es.array.slice.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.object.values.js';
12
+ import 'core-js/modules/es.regexp.exec.js';
13
+ import 'core-js/modules/es.string.replace.js';
14
+ import 'core-js/modules/es.string.trim.js';
15
+ import 'core-js/modules/web.dom-collections.for-each.js';
16
+ import React, { Fragment, Component } from 'react';
3
17
  import classNames from 'classnames';
4
18
  import PropTypes from 'prop-types';
5
19
  import chevronDownIcon from '@jetbrains/icons/chevron-down';
@@ -22,29 +36,47 @@ import { I18nContext } from '../i18n/i18n-context.js';
22
36
  import composeRefs from '../global/composeRefs.js';
23
37
  import { refObject } from '../global/prop-types.js';
24
38
  import { isArray } from '../global/typescript-utils.js';
25
- import { ControlsHeightContext, ControlsHeight } from '../global/controls-height.js';
39
+ import { ControlsHeight, ControlsHeightContext } from '../global/controls-height.js';
26
40
  import SelectPopup from './select__popup.js';
27
41
  import { A as Anchor } from '../_helpers/anchor.js';
42
+ import 'core-js/modules/es.object.entries.js';
28
43
  import '@jetbrains/icons/chevron-10px';
29
44
  import '../icon/icon.js';
30
45
  import 'util-deprecate';
31
46
  import '../icon/icon__constants.js';
32
47
  import '../_helpers/icon__svg.js';
48
+ import 'core-js/modules/es.string.starts-with.js';
49
+ import 'core-js/modules/es.array.iterator.js';
50
+ import 'core-js/modules/es.map.js';
51
+ import 'core-js/modules/es.weak-map.js';
52
+ import 'core-js/modules/web.dom-collections.iterator.js';
33
53
  import '../link/clickableLink.js';
34
54
  import '../_helpers/button__classes.js';
35
55
  import '../global/url.js';
56
+ import 'core-js/modules/es.string.match.js';
36
57
  import '../global/dom.js';
58
+ import 'core-js/modules/es.set.js';
59
+ import 'core-js/modules/es.string.split.js';
37
60
  import '../avatar/fallback-avatar.js';
61
+ import 'core-js/modules/es.array.from.js';
62
+ import 'core-js/modules/es.regexp.to-string.js';
38
63
  import 'react-dom';
39
64
  import '../global/schedule-raf.js';
40
65
  import '../tab-trap/tab-trap.js';
41
66
  import '../popup/position.js';
67
+ import 'core-js/modules/es.array.includes.js';
68
+ import 'core-js/modules/es.array.sort.js';
69
+ import 'core-js/modules/es.string.includes.js';
42
70
  import '../popup/popup.consts.js';
43
71
  import '../popup/popup.target.js';
44
72
  import '../shortcuts/core.js';
73
+ import 'core-js/modules/es.array.find-index.js';
74
+ import 'core-js/modules/es.array.splice.js';
45
75
  import 'combokeys';
46
76
  import '../global/sniffer.js';
47
77
  import 'sniffr';
78
+ import 'core-js/modules/es.symbol.js';
79
+ import 'core-js/modules/es.symbol.description.js';
48
80
  import 'react-virtualized/dist/es/List';
49
81
  import 'react-virtualized/dist/es/AutoSizer';
50
82
  import 'react-virtualized/dist/es/WindowScroller';
@@ -92,12 +124,16 @@ var Type;
92
124
  Type["INLINE"] = "INLINE";
93
125
  Type["INPUT_WITHOUT_CONTROLS"] = "INPUT_WITHOUT_CONTROLS";
94
126
  })(Type || (Type = {}));
95
- const ICONS_OFFSET = 5;
96
- const ICON_WIDTH = 20;
97
- const getStyle = memoize(iconsLength => ({
98
- paddingRight: ICONS_OFFSET + iconsLength * ICON_WIDTH
99
- }));
100
- const isInputMode = type => type === Type.INPUT || type === Type.INPUT_WITHOUT_CONTROLS;
127
+ var ICONS_OFFSET = 5;
128
+ var ICON_WIDTH = 20;
129
+ var getStyle = memoize(function (iconsLength) {
130
+ return {
131
+ paddingRight: ICONS_OFFSET + iconsLength * ICON_WIDTH
132
+ };
133
+ });
134
+ var _isInputMode = function isInputMode(type) {
135
+ return type === Type.INPUT || type === Type.INPUT_WITHOUT_CONTROLS;
136
+ };
101
137
  function getLowerCaseLabel(item) {
102
138
  if (List.isItemType(List.ListProps.Type.SEPARATOR, item) || List.isItemType(List.ListProps.Type.HINT, item) || typeof item.label !== 'string') {
103
139
  return null;
@@ -105,65 +141,76 @@ function getLowerCaseLabel(item) {
105
141
  return item.label.toLowerCase();
106
142
  }
107
143
  function doesLabelMatch(itemToCheck, fn) {
108
- const lowerCaseLabel = getLowerCaseLabel(itemToCheck);
144
+ var lowerCaseLabel = getLowerCaseLabel(itemToCheck);
109
145
  if (lowerCaseLabel == null) {
110
146
  return true;
111
147
  }
112
148
  return fn(lowerCaseLabel);
113
149
  }
114
- function getFilterFn(filter) {
150
+ function _getFilterFn(filter) {
115
151
  if (typeof filter === 'object') {
116
152
  if (filter.fn) {
117
153
  return filter.fn;
118
154
  }
119
155
  if (filter.fuzzy) {
120
- return (itemToCheck, checkString) => doesLabelMatch(itemToCheck, lowerCaseLabel => fuzzyHighlight(checkString, lowerCaseLabel).matched);
156
+ return function (itemToCheck, checkString) {
157
+ return doesLabelMatch(itemToCheck, function (lowerCaseLabel) {
158
+ return fuzzyHighlight(checkString, lowerCaseLabel).matched;
159
+ });
160
+ };
121
161
  }
122
162
  }
123
- return (itemToCheck, checkString) => doesLabelMatch(itemToCheck, lowerCaseLabel => lowerCaseLabel.indexOf(checkString) >= 0);
163
+ return function (itemToCheck, checkString) {
164
+ return doesLabelMatch(itemToCheck, function (lowerCaseLabel) {
165
+ return lowerCaseLabel.indexOf(checkString) >= 0;
166
+ });
167
+ };
124
168
  }
125
169
  function buildMultipleMap(selected) {
126
- return selected.reduce((acc, item) => {
170
+ return selected.reduce(function (acc, item) {
127
171
  acc[item.key] = true;
128
172
  return acc;
129
173
  }, {});
130
174
  }
131
- function getListItems(props, state, rawFilterString) {
132
- let data = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : props.data;
133
- let filterString = rawFilterString.trim();
134
- if (isInputMode(props.type) && !props.allowAny && state.selected && !Array.isArray(state.selected) && filterString === state.selected.label) {
175
+ function _getListItems(props, state, rawFilterString) {
176
+ var data = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : props.data;
177
+ var filterString = rawFilterString.trim();
178
+ if (_isInputMode(props.type) && !props.allowAny && state.selected && !Array.isArray(state.selected) && filterString === state.selected.label) {
135
179
  filterString = ''; // ignore multiple if it is exactly the selected item
136
180
  }
137
- const lowerCaseString = filterString.toLowerCase();
138
- const filteredData = [];
139
- let exactMatch = false;
140
- const check = getFilterFn(props.filter);
141
- for (let i = 0; i < data.length; i++) {
142
- const item = {
143
- ...data[i]
144
- };
181
+ var lowerCaseString = filterString.toLowerCase();
182
+ var filteredData = [];
183
+ var exactMatch = false;
184
+ var check = _getFilterFn(props.filter);
185
+ var _loop = function _loop() {
186
+ var item = _objectSpread2({}, data[i]);
145
187
  if (check(item, lowerCaseString, data)) {
188
+ var _state$multipleMap2;
146
189
  exactMatch = item.label === filterString;
147
190
  if (props.multiple && !(typeof props.multiple === 'object' && props.multiple.removeSelectedItems)) {
148
- item.checkbox = !!state.multipleMap?.[item.key];
191
+ var _state$multipleMap;
192
+ item.checkbox = !!((_state$multipleMap = state.multipleMap) !== null && _state$multipleMap !== void 0 && _state$multipleMap[item.key]);
149
193
  }
150
194
  if (props.multiple && typeof props.multiple === 'object' && props.multiple.limit && Array.isArray(state.selected)) {
151
- item.disabled = props.multiple.limit === state.selected.length && !state.selected.find(selectedItem => selectedItem.key === item.key);
195
+ item.disabled = props.multiple.limit === state.selected.length && !state.selected.find(function (selectedItem) {
196
+ return selectedItem.key === item.key;
197
+ });
152
198
  }
153
199
  // Ignore item if it's multiple and is already selected
154
- if (!(props.multiple && typeof props.multiple === 'object' && props.multiple.removeSelectedItems && state.multipleMap?.[item.key])) {
200
+ if (!(props.multiple && typeof props.multiple === 'object' && props.multiple.removeSelectedItems && (_state$multipleMap2 = state.multipleMap) !== null && _state$multipleMap2 !== void 0 && _state$multipleMap2[item.key])) {
155
201
  filteredData.push(item);
156
202
  }
157
203
  }
204
+ };
205
+ for (var i = 0; i < data.length; i++) {
206
+ _loop();
158
207
  }
159
- let addButton = null;
160
- const {
161
- add
162
- } = props;
208
+ var addButton = null;
209
+ var add = props.add;
163
210
  if (add && filterString && !exactMatch || add && add.alwaysVisible) {
164
211
  if (!(add.regexp && !add.regexp.test(filterString)) && !(add.minlength && filterString.length < +add.minlength) || add.alwaysVisible) {
165
212
  var _add$delayed;
166
- let label;
213
+ var label;
167
214
  if (add.label) {
168
215
  label = typeof add.label === 'function' ? add.label(filterString) : add.label;
169
216
  } else {
@@ -182,12 +229,12 @@ function getListItems(props, state, rawFilterString) {
182
229
  };
183
230
  }
184
231
  function getSelectedIndex(selected, data) {
185
- const firstSelected = Array.isArray(selected) ? selected[0] : selected;
232
+ var firstSelected = Array.isArray(selected) ? selected[0] : selected;
186
233
  if (firstSelected == null) {
187
234
  return null;
188
235
  }
189
- for (let i = 0; i < data.length; i++) {
190
- const item = data[i];
236
+ for (var i = 0; i < data.length; i++) {
237
+ var item = data[i];
191
238
  if (item.key === undefined) {
192
239
  continue;
193
240
  }
@@ -197,26 +244,28 @@ function getSelectedIndex(selected, data) {
197
244
  }
198
245
  return null;
199
246
  }
200
- const getItemLabel = _ref => {
201
- let {
202
- selectedLabel,
203
- label
204
- } = _ref;
247
+ var getItemLabel = function getItemLabel(_ref) {
248
+ var selectedLabel = _ref.selectedLabel,
249
+ label = _ref.label;
205
250
  if (selectedLabel != null) {
206
251
  return selectedLabel;
207
252
  }
208
253
  return typeof label === 'string' ? label : '';
209
254
  };
210
- const getValueForFilter = (selected, type, filterValue) => selected && !isArray(selected) && isInputMode(type) ? getItemLabel(selected) : filterValue;
255
+ var _getValueForFilter = function getValueForFilter(selected, type, filterValue) {
256
+ return selected && !isArray(selected) && _isInputMode(type) ? getItemLabel(selected) : filterValue;
257
+ };
211
258
  function isSameSelected(prevSelected, selected) {
212
259
  if (!prevSelected || !selected || prevSelected.length !== selected.length) {
213
260
  return false;
214
261
  }
215
- const keysMap = selected.reduce((result, item) => {
262
+ var keysMap = selected.reduce(function (result, item) {
216
263
  result[item.key] = true;
217
264
  return result;
218
265
  }, {});
219
- return prevSelected.every(it => keysMap[it.key]);
266
+ return prevSelected.every(function (it) {
267
+ return keysMap[it.key];
268
+ });
220
269
  }
221
270
  /**
222
271
  * @name Select
@@ -226,538 +275,216 @@ function isSameSelected(prevSelected, selected) {
226
275
  /**
227
276
  * Displays a select.
228
277
  */
229
- class Select extends Component {
230
- static defaultProps = {
231
- data: [],
232
- filter: false,
233
- // enable filter (not in INPUT modes)
234
- filterIcon: null,
235
- filterRef: noop,
236
- multiple: false,
237
- // multiple can be an object - see demo for more information
238
- clear: false,
239
- // enable clear button that clears the "selected" state
240
- loading: false,
241
- // show a loading indicator while data is loading
242
- disabled: false,
243
- // disable select
244
- type: Type.BUTTON,
245
- size: Size.M,
246
- targetElement: null,
247
- // element to bind the popup to (select BUTTON or INPUT by default)
248
- hideSelected: false,
249
- // INPUT mode: clears the input after an option is selected (useful when the selection is displayed in some custom way elsewhere)
250
- allowAny: false,
251
- // INPUT mode: allows any value to be entered
252
- hideArrow: false,
253
- // hide dropdown arrow icon
254
- showPopup: false,
255
- maxHeight: 600,
256
- // height of the options list, including the filter and the 'Add' button
257
- directions: [Popup.PopupProps.Directions.BOTTOM_RIGHT, Popup.PopupProps.Directions.BOTTOM_LEFT, Popup.PopupProps.Directions.TOP_LEFT, Popup.PopupProps.Directions.TOP_RIGHT],
258
- selected: null,
259
- // current selection (item / array of items)
260
- label: null,
261
- // BUTTON or INPUT label (nothing selected)
262
- selectedLabel: null,
263
- // BUTTON or INPUT label (something selected)
264
- inputPlaceholder: '',
265
- // Placeholder for input modes
266
- hint: null,
267
- // hint text to display under the list
268
- shortcutsEnabled: false,
269
- onBeforeOpen: noop,
270
- onLoadMore: noop,
271
- onOpen: noop,
272
- onClose: noop,
273
- onFilter: noop,
274
- // search string as first argument
275
- onFocus: noop,
276
- onBlur: noop,
277
- onKeyDown: noop,
278
- onSelect: noop,
279
- // single + multi
280
- onDeselect: noop,
281
- // multi
282
- onOutsideClick: noop,
283
- // multi
284
- onChange: noop,
285
- // multi
286
- onAdd: noop,
287
- // search string as first argument
288
- onDone: noop,
289
- onReset: noop,
290
- tags: null,
291
- ringPopupTarget: null,
292
- dir: 'ltr'
293
- };
294
- static getDerivedStateFromProps(nextProps, prevState) {
295
- const {
296
- multiple,
297
- data,
298
- type
299
- } = nextProps;
300
- const {
301
- prevSelected,
302
- prevData,
303
- prevMultiple,
304
- filterValue
305
- } = prevState;
306
- const nextState = {
307
- prevData: data,
308
- prevSelected: nextProps.selected,
309
- prevMultiple: multiple
310
- };
311
- if ('data' in nextProps && data !== prevData) {
312
- const {
313
- filteredData,
314
- addButton
315
- } = getListItems(nextProps, prevState, filterValue, data);
316
- Object.assign(nextState, {
317
- shownData: filteredData,
318
- addButton
319
- });
320
- if (prevState.selected) {
321
- Object.assign(nextState, {
322
- selectedIndex: getSelectedIndex(prevState.selected, data),
323
- filterValue: getValueForFilter(prevState.selected, type, filterValue)
324
- });
325
- }
326
- }
327
- if ('selected' in nextProps && nextProps.selected !== prevSelected) {
328
- const selected = nextProps.selected || (multiple ? [] : null);
329
- const selectedIndex = getSelectedIndex(selected, data || prevData);
330
- Object.assign(nextState, {
331
- selected,
332
- filterValue: getValueForFilter(selected, type, filterValue)
333
- });
334
- if (!Array.isArray(prevSelected) || !Array.isArray(selected) || !isSameSelected(prevSelected, selected)) {
335
- Object.assign(nextState, {
336
- selectedIndex
337
- });
338
- }
339
- }
340
- if (prevMultiple !== multiple && !deepEqual(prevMultiple, multiple)) {
341
- nextState.selected = multiple ? [] : null;
342
- }
343
- if (multiple && !nextState.selected) {
344
- nextState.selected = prevState.selected;
345
- }
346
- const {
347
- selected
348
- } = {
349
- ...prevState,
350
- ...nextState
351
- };
352
- if (selected && Array.isArray(selected)) {
353
- nextState.multipleMap = buildMultipleMap(selected);
354
- const {
355
- filteredData,
356
- addButton
357
- } = getListItems(nextProps, nextState, filterValue, data);
358
- Object.assign(nextState, {
359
- shownData: filteredData,
360
- addButton
361
- });
362
- }
363
- return nextState;
364
- }
365
- state = {
366
- data: [],
367
- shownData: [],
368
- selected: this.props.multiple ? [] : null,
369
- selectedIndex: null,
370
- filterValue: this.props.filter && typeof this.props.filter === 'object' && this.props.filter.value || '',
371
- shortcutsEnabled: false,
372
- popupShortcuts: false,
373
- showPopup: this.props.showPopup,
374
- prevData: this.props.data,
375
- prevSelected: null,
376
- prevMultiple: this.props.multiple,
377
- multipleMap: {},
378
- addButton: null
379
- };
380
- componentDidUpdate(prevProps, prevState) {
381
- const {
382
- showPopup,
383
- selected
384
- } = this.state;
385
- const {
386
- onClose,
387
- onOpen,
388
- onChange,
389
- multiple
390
- } = this.props;
391
- if (prevState.showPopup && !showPopup) {
392
- onClose(selected);
393
- } else if (!prevState.showPopup && showPopup) {
394
- onOpen();
395
- }
396
- if (multiple !== prevProps.multiple && !deepEqual(multiple, prevProps.multiple)) {
397
- onChange(selected);
278
+ var Select = /*#__PURE__*/function (_Component) {
279
+ function Select() {
280
+ var _this;
281
+ _classCallCheck(this, Select);
282
+ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
283
+ args[_key] = arguments[_key];
398
284
  }
399
- }
400
- static contextType = ControlsHeightContext;
401
- static Type = Type;
402
- static Size = Size;
403
- id = getUID('select-');
404
- shortcutsScope = this.id;
405
- listId = `${this.id}:list`;
406
- _focusHandler = e => {
407
- this.props.onFocus(e);
408
- this.setState({
409
- shortcutsEnabled: true,
410
- focused: true
285
+ _this = _callSuper(this, Select, [].concat(args));
286
+ _defineProperty(_this, "state", {
287
+ data: [],
288
+ shownData: [],
289
+ selected: _this.props.multiple ? [] : null,
290
+ selectedIndex: null,
291
+ filterValue: _this.props.filter && typeof _this.props.filter === 'object' && _this.props.filter.value || '',
292
+ shortcutsEnabled: false,
293
+ popupShortcuts: false,
294
+ showPopup: _this.props.showPopup,
295
+ prevData: _this.props.data,
296
+ prevSelected: null,
297
+ prevMultiple: _this.props.multiple,
298
+ multipleMap: {},
299
+ addButton: null
411
300
  });
412
- };
413
- _blurHandler = () => {
414
- this.props.onBlur();
415
- if (this._popup && this._popup.isVisible() && !this._popup.isClickingPopup) {
416
- window.setTimeout(() => {
417
- this.setState({
418
- showPopup: false
419
- });
301
+ _defineProperty(_this, "id", getUID('select-'));
302
+ _defineProperty(_this, "shortcutsScope", _this.id);
303
+ _defineProperty(_this, "listId", "".concat(_this.id, ":list"));
304
+ _defineProperty(_this, "_focusHandler", function (e) {
305
+ _this.props.onFocus(e);
306
+ _this.setState({
307
+ shortcutsEnabled: true,
308
+ focused: true
420
309
  });
421
- }
422
- if (!this._popup?.isClickingPopup) {
423
- this.setState({
424
- shortcutsEnabled: false,
425
- focused: false
426
- });
427
- }
428
- };
429
- node;
430
- nodeRef = el => {
431
- this.node = el;
432
- };
433
- _popup = null;
434
- onEmptyPopupEnter = () => {
435
- if (this.state.addButton) {
436
- this.addHandler();
437
- }
438
- };
439
- focus = () => {
440
- const focusableSelectExists = this.node?.querySelector('[data-test~=ring-select__focus]');
441
- const restoreFocusNode = this.props.targetElement || focusableSelectExists;
442
- restoreFocusNode?.focus();
443
- };
444
- _onEnter = () => {
445
- if (this.state.addButton && this.state.shownData.length === 0) {
446
- this.addHandler();
447
- }
448
- this.props.onDone();
449
- if (!this._popup?.isVisible() && this.props.allowAny) {
450
- return true;
451
- }
452
- return undefined;
453
- };
454
- _onEsc = event => {
455
- if (!this._popup?.isVisible()) {
456
- return true;
457
- } else if (this.props.multiple || !this.props.getInitial) {
458
- return false;
459
- }
460
- const selected = {
461
- key: Math.random(),
462
- label: this.props.getInitial()
463
- };
464
- this.setState({
465
- selected,
466
- filterValue: this.getValueForFilter(selected)
467
- }, () => {
468
- this.props.onChange(selected, event);
469
- this.props.onReset();
470
310
  });
471
- return undefined;
472
- };
473
- _inputShortcutHandler = () => {
474
- if (this.state.focused && this._popup && !this._popup.isVisible()) {
475
- this._clickHandler();
476
- }
477
- };
478
- getValueForFilter(selected) {
479
- return getValueForFilter(selected, this.props.type, this.state.filterValue);
480
- }
481
- _getSelectedIndex(selected, data) {
482
- return getSelectedIndex(selected, data);
483
- }
484
- popupRef = el => {
485
- this._popup = el;
486
- };
487
- _getResetOption() {
488
- const isOptionsSelected = Array.isArray(this.state.selected) && this.state.selected.length;
489
- const reset = this.props.tags && typeof this.props.tags === 'object' ? this.props.tags.reset : null;
490
- if (!isOptionsSelected || !reset) {
491
- return null;
492
- }
493
- const resetHandler = (item, event) => {
494
- this.clear(event);
495
- this.clearFilter();
496
- this.props.onFilter('');
497
- this.setState(prevState => ({
498
- shownData: prevState.shownData.slice(reset.separator ? 2 : 1),
499
- multipleMap: {}
500
- }));
501
- this._redrawPopup();
502
- };
503
- return {
504
- isResetItem: true,
505
- separator: reset.separator,
506
- key: reset.label,
507
- rgItemType: List.ListProps.Type.CUSTOM,
508
- template: /*#__PURE__*/React.createElement(Button, {
509
- text: true,
510
- className: modules_9d0de074.button,
511
- "data-test": "ring-select-reset-tags-button",
512
- height: ControlsHeight.S
513
- }, reset.label),
514
- glyph: reset.glyph,
515
- onClick: resetHandler
516
- };
517
- }
518
- _prependResetOption(shownData) {
519
- const resetOption = this._getResetOption();
520
- if (resetOption) {
521
- const resetItems = [resetOption];
522
- if (resetOption.separator) {
523
- resetItems.push({
524
- rgItemType: List.ListProps.Type.SEPARATOR
311
+ _defineProperty(_this, "_blurHandler", function () {
312
+ var _this$_popup;
313
+ _this.props.onBlur();
314
+ if (_this._popup && _this._popup.isVisible() && !_this._popup.isClickingPopup) {
315
+ window.setTimeout(function () {
316
+ _this.setState({
317
+ showPopup: false
318
+ });
525
319
  });
526
320
  }
527
- return resetItems.concat(shownData);
528
- }
529
- return shownData;
530
- }
531
- _renderPopup() {
532
- const anchorElement = this.props.targetElement || this.node;
533
- const {
534
- showPopup,
535
- shownData
536
- } = this.state;
537
- const _shownData = this._prependResetOption(shownData);
538
- return /*#__PURE__*/React.createElement(I18nContext.Consumer, null, _ref2 => {
539
- let {
540
- translate
541
- } = _ref2;
542
- let message;
543
- if (this.props.loading) {
544
- var _this$props$loadingMe;
545
- message = (_this$props$loadingMe = this.props.loadingMessage) !== null && _this$props$loadingMe !== void 0 ? _this$props$loadingMe : translate('loading');
546
- } else if (!shownData.length) {
547
- var _this$props$notFoundM;
548
- message = (_this$props$notFoundM = this.props.notFoundMessage) !== null && _this$props$notFoundM !== void 0 ? _this$props$notFoundM : translate('noOptionsFound');
321
+ if (!((_this$_popup = _this._popup) !== null && _this$_popup !== void 0 && _this$_popup.isClickingPopup)) {
322
+ _this.setState({
323
+ shortcutsEnabled: false,
324
+ focused: false
325
+ });
549
326
  }
550
- return /*#__PURE__*/React.createElement(SelectPopup, {
551
- data: _shownData,
552
- message: message,
553
- toolbar: showPopup && this.getToolbar(),
554
- topbar: this.getTopbar(),
555
- loading: this.props.loading,
556
- activeIndex: this.state.selectedIndex,
557
- hidden: !showPopup,
558
- ref: this.popupRef,
559
- maxHeight: this.props.maxHeight,
560
- minWidth: this.props.minWidth,
561
- directions: this.props.directions,
562
- className: this.props.popupClassName,
563
- style: this.props.popupStyle,
564
- top: this.props.top,
565
- left: this.props.left,
566
- filter: this.isInputMode() ? false : this.props.filter // disable popup filter in INPUT mode
567
- ,
568
- filterIcon: this.props.filterIcon,
569
- filterRef: this.props.filterRef,
570
- multiple: this.props.multiple,
571
- filterValue: this.state.filterValue,
572
- anchorElement: anchorElement,
573
- onCloseAttempt: this._onCloseAttempt,
574
- onOutsideClick: this.props.onOutsideClick,
575
- onSelect: this._listSelectHandler,
576
- onSelectAll: this._listSelectAllHandler,
577
- onFilter: this._filterChangeHandler,
578
- onClear: this.clearFilter,
579
- onLoadMore: this.props.onLoadMore,
580
- isInputMode: this.isInputMode(),
581
- selected: this.state.selected,
582
- tags: this.props.tags,
583
- compact: this.props.compact,
584
- renderOptimization: this.props.renderOptimization,
585
- ringPopupTarget: this.props.ringPopupTarget,
586
- disableMoveOverflow: this.props.disableMoveOverflow,
587
- disableScrollToActive: this.props.disableScrollToActive,
588
- dir: this.props.dir,
589
- onEmptyPopupEnter: this.onEmptyPopupEnter,
590
- listId: this.listId,
591
- preventListOverscroll: this.props.preventListOverscroll
592
- });
593
327
  });
594
- }
595
- _showPopup = () => {
596
- if (!this.node) {
597
- return;
598
- }
599
- const shownData = this.getListItems(this.filterValue());
600
- this.setState({
601
- showPopup: true,
602
- shownData
328
+ _defineProperty(_this, "node", void 0);
329
+ _defineProperty(_this, "nodeRef", function (el) {
330
+ _this.node = el;
603
331
  });
604
- };
605
- _hidePopup = tryFocusAnchor => {
606
- if (this.node && this.state.showPopup) {
607
- this.setState(prevState => ({
608
- showPopup: false,
609
- filterValue: this.props.allowAny ? prevState.filterValue : ''
610
- }));
611
- if (tryFocusAnchor) {
612
- this.focus();
332
+ _defineProperty(_this, "_popup", null);
333
+ _defineProperty(_this, "onEmptyPopupEnter", function () {
334
+ if (_this.state.addButton) {
335
+ _this.addHandler();
613
336
  }
614
- }
615
- };
616
- addHandler = () => {
617
- const value = this.filterValue();
618
- this._hidePopup();
619
- this.props.onAdd(value);
620
- };
621
- getToolbar() {
622
- const {
623
- hint,
624
- renderBottomToolbar
625
- } = this.props;
626
- const {
627
- prefix,
628
- label,
629
- delayed
630
- } = this.state.addButton || {};
631
- const isToolbarHasElements = this.state.addButton || hint || renderBottomToolbar;
632
- if (!isToolbarHasElements) {
633
- return null;
634
- }
635
- return /*#__PURE__*/React.createElement("div", {
636
- className: classNames({
637
- [modules_9d0de074.toolbar]: Boolean(this.state.addButton || renderBottomToolbar)
638
- }),
639
- "data-test": "ring-select-toolbar"
640
- }, renderBottomToolbar && renderBottomToolbar(), this.state.addButton && /*#__PURE__*/React.createElement(Button, {
641
- text: true,
642
- delayed: delayed,
643
- className: classNames(modules_9d0de074.button, modules_9d0de074.buttonSpaced),
644
- onClick: this.addHandler,
645
- "data-test": "ring-select-toolbar-button"
646
- }, prefix ? `${prefix} ${label}` : label), hint && /*#__PURE__*/React.createElement(List.ListHint, {
647
- label: hint,
648
- "data-test": "ring-select-toolbar-hint"
649
- }));
650
- }
651
- getTopbar() {
652
- return this.props.renderTopToolbar?.();
653
- }
654
- getLowerCaseLabel = getLowerCaseLabel;
655
- doesLabelMatch = doesLabelMatch;
656
- getFilterFn() {
657
- return getFilterFn(this.props.filter);
658
- }
659
- getListItems(rawFilterString, data) {
660
- const {
661
- filteredData,
662
- addButton
663
- } = getListItems(this.props, this.state, rawFilterString, data);
664
- this.setState({
665
- addButton
666
337
  });
667
- return filteredData;
668
- }
669
- filterValue(setValue) {
670
- if (typeof setValue === 'string' || typeof setValue === 'number') {
671
- this.setState({
672
- filterValue: setValue
673
- });
338
+ _defineProperty(_this, "focus", function () {
339
+ var _this$node;
340
+ var focusableSelectExists = (_this$node = _this.node) === null || _this$node === void 0 ? void 0 : _this$node.querySelector('[data-test~=ring-select__focus]');
341
+ var restoreFocusNode = _this.props.targetElement || focusableSelectExists;
342
+ restoreFocusNode === null || restoreFocusNode === void 0 || restoreFocusNode.focus();
343
+ });
344
+ _defineProperty(_this, "_onEnter", function () {
345
+ var _this$_popup2;
346
+ if (_this.state.addButton && _this.state.shownData.length === 0) {
347
+ _this.addHandler();
348
+ }
349
+ _this.props.onDone();
350
+ if (!((_this$_popup2 = _this._popup) !== null && _this$_popup2 !== void 0 && _this$_popup2.isVisible()) && _this.props.allowAny) {
351
+ return true;
352
+ }
674
353
  return undefined;
675
- } else {
676
- return this.state.filterValue;
677
- }
678
- }
679
- isInputMode() {
680
- return isInputMode(this.props.type);
681
- }
682
- _clickHandler = () => {
683
- if (!this.props.disabled) {
684
- if (this.state.showPopup) {
685
- this._hidePopup();
686
- } else {
687
- this.props.onBeforeOpen();
688
- this._showPopup();
354
+ });
355
+ _defineProperty(_this, "_onEsc", function (event) {
356
+ var _this$_popup3;
357
+ if (!((_this$_popup3 = _this._popup) !== null && _this$_popup3 !== void 0 && _this$_popup3.isVisible())) {
358
+ return true;
359
+ } else if (_this.props.multiple || !_this.props.getInitial) {
360
+ return false;
689
361
  }
690
- }
691
- };
692
- _openPopupIfClosed = () => {
693
- if (this.props.disabled || this.state.showPopup) {
694
- return;
695
- }
696
- this.props.onBeforeOpen();
697
- this._showPopup();
698
- };
699
- _filterChangeHandler = e => {
700
- this._setFilter(e.currentTarget.value, e);
701
- };
702
- _setFilter = (value, event) => {
703
- if (this.isInputMode() && !this.state.focused) {
704
- return;
705
- }
706
- if (value === this.state.filterValue) {
707
- return;
708
- }
709
- const filterValue = value.replace(/^\s+/g, '');
710
- this.props.onFilter(filterValue);
711
- if (this.props.allowAny) {
712
- const fakeSelected = {
362
+ var selected = {
713
363
  key: Math.random(),
714
- label: filterValue
364
+ label: _this.props.getInitial()
715
365
  };
716
- this.setState({
717
- selected: filterValue === '' ? null : fakeSelected,
718
- selectedIndex: null
719
- }, () => {
720
- this.props.onSelect(fakeSelected, event);
721
- this.props.onChange(fakeSelected, event);
366
+ _this.setState({
367
+ selected,
368
+ filterValue: _this.getValueForFilter(selected)
369
+ }, function () {
370
+ _this.props.onChange(selected, event);
371
+ _this.props.onReset();
722
372
  });
723
- }
724
- !this._popup?.isVisible() && this.props.onBeforeOpen();
725
- this.setState({
726
- filterValue
727
- }, () => {
728
- this._showPopup();
373
+ return undefined;
729
374
  });
730
- };
731
- _rebuildMultipleMap(selected) {
732
- if (Array.isArray(selected)) {
733
- this.setState({
734
- multipleMap: buildMultipleMap(selected)
375
+ _defineProperty(_this, "_inputShortcutHandler", function () {
376
+ if (_this.state.focused && _this._popup && !_this._popup.isVisible()) {
377
+ _this._clickHandler();
378
+ }
379
+ });
380
+ _defineProperty(_this, "popupRef", function (el) {
381
+ _this._popup = el;
382
+ });
383
+ _defineProperty(_this, "_showPopup", function () {
384
+ if (!_this.node) {
385
+ return;
386
+ }
387
+ var shownData = _this.getListItems(_this.filterValue());
388
+ _this.setState({
389
+ showPopup: true,
390
+ shownData
735
391
  });
736
- }
737
- }
738
- _redrawPopup = () => {
739
- if (this.props.multiple) {
740
- setTimeout(() => {
741
- this.isInputMode() && this.clearFilter();
742
- this._showPopup();
743
- }, 0);
744
- }
745
- };
746
- _listSelectHandler = (() => {
747
- var _this = this;
748
- return function (selected, event) {
392
+ });
393
+ _defineProperty(_this, "_hidePopup", function (tryFocusAnchor) {
394
+ if (_this.node && _this.state.showPopup) {
395
+ _this.setState(function (prevState) {
396
+ return {
397
+ showPopup: false,
398
+ filterValue: _this.props.allowAny ? prevState.filterValue : ''
399
+ };
400
+ });
401
+ if (tryFocusAnchor) {
402
+ _this.focus();
403
+ }
404
+ }
405
+ });
406
+ _defineProperty(_this, "addHandler", function () {
407
+ var value = _this.filterValue();
408
+ _this._hidePopup();
409
+ _this.props.onAdd(value);
410
+ });
411
+ _defineProperty(_this, "getLowerCaseLabel", getLowerCaseLabel);
412
+ _defineProperty(_this, "doesLabelMatch", doesLabelMatch);
413
+ _defineProperty(_this, "_clickHandler", function () {
414
+ if (!_this.props.disabled) {
415
+ if (_this.state.showPopup) {
416
+ _this._hidePopup();
417
+ } else {
418
+ _this.props.onBeforeOpen();
419
+ _this._showPopup();
420
+ }
421
+ }
422
+ });
423
+ _defineProperty(_this, "_openPopupIfClosed", function () {
424
+ if (_this.props.disabled || _this.state.showPopup) {
425
+ return;
426
+ }
427
+ _this.props.onBeforeOpen();
428
+ _this._showPopup();
429
+ });
430
+ _defineProperty(_this, "_filterChangeHandler", function (e) {
431
+ _this._setFilter(e.currentTarget.value, e);
432
+ });
433
+ _defineProperty(_this, "_setFilter", function (value, event) {
434
+ var _this$_popup4;
435
+ if (_this.isInputMode() && !_this.state.focused) {
436
+ return;
437
+ }
438
+ if (value === _this.state.filterValue) {
439
+ return;
440
+ }
441
+ var filterValue = value.replace(/^\s+/g, '');
442
+ _this.props.onFilter(filterValue);
443
+ if (_this.props.allowAny) {
444
+ var fakeSelected = {
445
+ key: Math.random(),
446
+ label: filterValue
447
+ };
448
+ _this.setState({
449
+ selected: filterValue === '' ? null : fakeSelected,
450
+ selectedIndex: null
451
+ }, function () {
452
+ _this.props.onSelect(fakeSelected, event);
453
+ _this.props.onChange(fakeSelected, event);
454
+ });
455
+ }
456
+ !((_this$_popup4 = _this._popup) !== null && _this$_popup4 !== void 0 && _this$_popup4.isVisible()) && _this.props.onBeforeOpen();
457
+ _this.setState({
458
+ filterValue
459
+ }, function () {
460
+ _this._showPopup();
461
+ });
462
+ });
463
+ _defineProperty(_this, "_redrawPopup", function () {
464
+ if (_this.props.multiple) {
465
+ setTimeout(function () {
466
+ _this.isInputMode() && _this.clearFilter();
467
+ _this._showPopup();
468
+ }, 0);
469
+ }
470
+ });
471
+ _defineProperty(_this, "_listSelectHandler", function (selected, event) {
749
472
  var _this$props$tryKeepOp;
750
- let opts = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
751
- const isItem = item => List.isItemType(List.ListProps.Type.ITEM, item);
752
- const isCustomItem = item => List.isItemType(List.ListProps.Type.CUSTOM, item);
753
- const isSelectItemEvent = event && (event.type === 'select' || event.type === 'keydown');
473
+ var opts = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
474
+ var isItem = function isItem(item) {
475
+ return List.isItemType(List.ListProps.Type.ITEM, item);
476
+ };
477
+ var isCustomItem = function isCustomItem(item) {
478
+ return List.isItemType(List.ListProps.Type.CUSTOM, item);
479
+ };
480
+ var isSelectItemEvent = event && (event.type === 'select' || event.type === 'keydown');
754
481
  if (isSelectItemEvent) {
755
482
  event.preventDefault();
756
483
  }
757
484
  if (!isItem(selected) && !isCustomItem(selected) || selected.disabled || selected.isResetItem) {
758
485
  return;
759
486
  }
760
- const tryKeepOpen = (_this$props$tryKeepOp = _this.props.tryKeepOpen) !== null && _this$props$tryKeepOp !== void 0 ? _this$props$tryKeepOp : opts.tryKeepOpen;
487
+ var tryKeepOpen = (_this$props$tryKeepOp = _this.props.tryKeepOpen) !== null && _this$props$tryKeepOp !== void 0 ? _this$props$tryKeepOp : opts.tryKeepOpen;
761
488
  if (!_this.props.multiple) {
762
489
  if (!tryKeepOpen) {
763
490
  _this._hidePopup(isSelectItemEvent);
@@ -765,8 +492,8 @@ class Select extends Component {
765
492
  _this.setState({
766
493
  selected,
767
494
  selectedIndex: _this._getSelectedIndex(selected, _this.props.data)
768
- }, () => {
769
- const newFilterValue = _this.isInputMode() && !_this.props.hideSelected ? getItemLabel(selected) : '';
495
+ }, function () {
496
+ var newFilterValue = _this.isInputMode() && !_this.props.hideSelected ? getItemLabel(selected) : '';
770
497
  _this.filterValue(newFilterValue);
771
498
  _this.props.onFilter(newFilterValue);
772
499
  _this.props.onSelect(selected, event);
@@ -779,359 +506,737 @@ class Select extends Component {
779
506
  if (selected.key == null) {
780
507
  throw new Error('Multiple selection requires each item to have the "key" property');
781
508
  }
782
- _this.setState(prevState => {
783
- const currentSelection = prevState.selected;
784
- let nextSelection;
509
+ _this.setState(function (prevState) {
510
+ var currentSelection = prevState.selected;
511
+ var nextSelection;
785
512
  if (!prevState.multipleMap[selected.key]) {
786
513
  nextSelection = currentSelection.concat(selected);
787
514
  _this.props.onSelect && _this.props.onSelect(selected, event);
788
515
  } else {
789
- nextSelection = currentSelection.filter(item => item.key !== selected.key);
516
+ nextSelection = currentSelection.filter(function (item) {
517
+ return item.key !== selected.key;
518
+ });
790
519
  _this.props.onDeselect && _this.props.onDeselect(selected);
791
520
  }
792
521
  _this.props.onChange(nextSelection, event);
793
- const nextState = {
522
+ var nextState = {
794
523
  filterValue: '',
795
524
  selected: nextSelection,
796
525
  selectedIndex: _this._getSelectedIndex(selected, _this.props.data)
797
526
  };
798
527
  if (typeof _this.props.multiple === 'object' && _this.props.multiple.limit && nextSelection.length === _this.props.multiple.limit) {
799
- nextState.shownData = prevState.shownData.map(item => nextSelection.find(selectedItem => selectedItem.key === item.key) ? item : {
800
- ...item,
801
- disabled: true
528
+ nextState.shownData = prevState.shownData.map(function (item) {
529
+ return nextSelection.find(function (selectedItem) {
530
+ return selectedItem.key === item.key;
531
+ }) ? item : _objectSpread2(_objectSpread2({}, item), {}, {
532
+ disabled: true
533
+ });
802
534
  });
803
535
  }
804
536
  if (!prevState.multipleMap[selected.key]) {
805
- nextState.multipleMap = {
806
- ...prevState.multipleMap,
537
+ nextState.multipleMap = _objectSpread2(_objectSpread2({}, prevState.multipleMap), {}, {
807
538
  [selected.key]: true
808
- };
539
+ });
809
540
  } else {
810
- const {
811
- [selected.key]: _,
812
- ...restMultipleMap
813
- } = prevState.multipleMap;
541
+ var _prevState$multipleMa = prevState.multipleMap,
542
+ _selected$key = selected.key;
543
+ _prevState$multipleMa[_selected$key];
544
+ var restMultipleMap = _objectWithoutProperties(_prevState$multipleMa, [_selected$key].map(_toPropertyKey));
814
545
  nextState.multipleMap = restMultipleMap;
815
546
  }
816
- return {
817
- ...prevState,
818
- ...nextState
819
- };
820
- }, () => {
547
+ return _objectSpread2(_objectSpread2({}, prevState), nextState);
548
+ }, function () {
821
549
  if (tryKeepOpen) {
822
550
  _this._redrawPopup();
823
551
  }
824
552
  });
825
553
  }
826
- };
827
- })();
828
- _listSelectAllHandler = (() => {
829
- var _this2 = this;
830
- return function () {
831
- let isSelectAll = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
832
- const isItem = item => List.isItemType(List.ListProps.Type.ITEM, item);
833
- const isCustomItem = item => List.isItemType(List.ListProps.Type.CUSTOM, item);
834
- _this2.setState(prevState => {
835
- const currentSelection = prevState.selected;
836
- let nextSelection;
554
+ });
555
+ _defineProperty(_this, "_listSelectAllHandler", function () {
556
+ var isSelectAll = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
557
+ var isItem = function isItem(item) {
558
+ return List.isItemType(List.ListProps.Type.ITEM, item);
559
+ };
560
+ var isCustomItem = function isCustomItem(item) {
561
+ return List.isItemType(List.ListProps.Type.CUSTOM, item);
562
+ };
563
+ _this.setState(function (prevState) {
564
+ var currentSelection = prevState.selected;
565
+ var nextSelection;
837
566
  if (isSelectAll) {
838
- nextSelection = _this2.props.data.filter(item => (isItem(item) || isCustomItem(item)) && !item.disabled);
839
- nextSelection.filter(item => !_this2.props.selected.find(selectedItem => item.key === selectedItem.key)).forEach(item => {
840
- _this2.props.onSelect && _this2.props.onSelect(item);
567
+ nextSelection = _this.props.data.filter(function (item) {
568
+ return (isItem(item) || isCustomItem(item)) && !item.disabled;
569
+ });
570
+ nextSelection.filter(function (item) {
571
+ return !_this.props.selected.find(function (selectedItem) {
572
+ return item.key === selectedItem.key;
573
+ });
574
+ }).forEach(function (item) {
575
+ _this.props.onSelect && _this.props.onSelect(item);
841
576
  });
842
577
  } else {
843
578
  nextSelection = [];
844
- currentSelection.forEach(item => {
845
- _this2.props.onDeselect && _this2.props.onDeselect(item);
579
+ currentSelection.forEach(function (item) {
580
+ _this.props.onDeselect && _this.props.onDeselect(item);
846
581
  });
847
582
  }
848
- _this2.props.onChange(nextSelection, event);
583
+ _this.props.onChange(nextSelection, event);
849
584
  return {
850
585
  filterValue: '',
851
586
  selected: nextSelection,
852
- selectedIndex: isSelectAll ? _this2._getSelectedIndex(nextSelection, _this2.props.data) : null,
853
- shownData: prevState.shownData.map(item => ({
854
- ...item,
855
- checkbox: isSelectAll
856
- })),
857
- multipleMap: isSelectAll ? buildMultipleMap(_this2.props.data.filter(item => !item.disabled)) : {}
587
+ selectedIndex: isSelectAll ? _this._getSelectedIndex(nextSelection, _this.props.data) : null,
588
+ shownData: prevState.shownData.map(function (item) {
589
+ return _objectSpread2(_objectSpread2({}, item), {}, {
590
+ checkbox: isSelectAll
591
+ });
592
+ }),
593
+ multipleMap: isSelectAll ? buildMultipleMap(_this.props.data.filter(function (item) {
594
+ return !item.disabled;
595
+ })) : {}
858
596
  };
859
- }, _this2._redrawPopup);
860
- };
861
- })();
862
- _onCloseAttempt = (event, isEsc) => {
863
- if (this.isInputMode()) {
864
- if (!this.props.allowAny) {
865
- if (this.props.hideSelected || !this.state.selected || this.props.multiple) {
866
- this.clearFilter();
867
- } else if (this.state.selected && !Array.isArray(this.state.selected)) {
868
- this.filterValue(getItemLabel(this.state.selected));
597
+ }, _this._redrawPopup);
598
+ });
599
+ _defineProperty(_this, "_onCloseAttempt", function (event, isEsc) {
600
+ if (_this.isInputMode()) {
601
+ if (!_this.props.allowAny) {
602
+ if (_this.props.hideSelected || !_this.state.selected || _this.props.multiple) {
603
+ _this.clearFilter();
604
+ } else if (_this.state.selected && !Array.isArray(_this.state.selected)) {
605
+ _this.filterValue(getItemLabel(_this.state.selected));
606
+ }
607
+ }
608
+ }
609
+ var isTagRemoved = _this.props.tags && event && event.target && event.target instanceof Element && event.target.matches('[data-test="ring-tag-remove"]');
610
+ if (!isTagRemoved) {
611
+ _this._hidePopup(isEsc);
612
+ }
613
+ });
614
+ _defineProperty(_this, "clearFilter", function (e) {
615
+ _this._setFilter('', e);
616
+ });
617
+ _defineProperty(_this, "clear", function (event) {
618
+ if (event) {
619
+ event.stopPropagation();
620
+ }
621
+ var empty = _this.props.multiple ? [] : null;
622
+ _this.setState({
623
+ selected: empty,
624
+ selectedIndex: null,
625
+ filterValue: ''
626
+ }, function () {
627
+ if (_this.props.onChange) {
628
+ _this.props.onChange(empty, event);
869
629
  }
630
+ });
631
+ return false;
632
+ });
633
+ _defineProperty(_this, "filter", void 0);
634
+ _defineProperty(_this, "filterRef", function (el) {
635
+ _this.filter = el;
636
+ });
637
+ return _this;
638
+ }
639
+ _inherits(Select, _Component);
640
+ return _createClass(Select, [{
641
+ key: "componentDidUpdate",
642
+ value: function componentDidUpdate(prevProps, prevState) {
643
+ var _this$state = this.state,
644
+ showPopup = _this$state.showPopup,
645
+ selected = _this$state.selected;
646
+ var _this$props = this.props,
647
+ onClose = _this$props.onClose,
648
+ onOpen = _this$props.onOpen,
649
+ onChange = _this$props.onChange,
650
+ multiple = _this$props.multiple;
651
+ if (prevState.showPopup && !showPopup) {
652
+ onClose(selected);
653
+ } else if (!prevState.showPopup && showPopup) {
654
+ onOpen();
655
+ }
656
+ if (multiple !== prevProps.multiple && !deepEqual(multiple, prevProps.multiple)) {
657
+ onChange(selected);
870
658
  }
871
659
  }
872
- const isTagRemoved = this.props.tags && event && event.target && event.target instanceof Element && event.target.matches('[data-test="ring-tag-remove"]');
873
- if (!isTagRemoved) {
874
- this._hidePopup(isEsc);
660
+ }, {
661
+ key: "getValueForFilter",
662
+ value: function getValueForFilter(selected) {
663
+ return _getValueForFilter(selected, this.props.type, this.state.filterValue);
875
664
  }
876
- };
877
- clearFilter = e => {
878
- this._setFilter('', e);
879
- };
880
- clear = event => {
881
- if (event) {
882
- event.stopPropagation();
665
+ }, {
666
+ key: "_getSelectedIndex",
667
+ value: function _getSelectedIndex(selected, data) {
668
+ return getSelectedIndex(selected, data);
883
669
  }
884
- const empty = this.props.multiple ? [] : null;
885
- this.setState({
886
- selected: empty,
887
- selectedIndex: null,
888
- filterValue: ''
889
- }, () => {
890
- if (this.props.onChange) {
891
- this.props.onChange(empty, event);
670
+ }, {
671
+ key: "_getResetOption",
672
+ value: function _getResetOption() {
673
+ var _this2 = this;
674
+ var isOptionsSelected = Array.isArray(this.state.selected) && this.state.selected.length;
675
+ var reset = this.props.tags && typeof this.props.tags === 'object' ? this.props.tags.reset : null;
676
+ if (!isOptionsSelected || !reset) {
677
+ return null;
892
678
  }
893
- });
894
- return false;
895
- };
896
- _selectionIsEmpty() {
897
- return Array.isArray(this.state.selected) && !this.state.selected.length || !this.state.selected;
898
- }
899
- _getLabel() {
900
- var _ref3, _this$props$label;
901
- return (_ref3 = (_this$props$label = this.props.label) !== null && _this$props$label !== void 0 ? _this$props$label : this.props.selectedLabel) !== null && _ref3 !== void 0 ? _ref3 : 'Select an option';
902
- }
903
- _getPlaceholder() {
904
- if (this._selectionIsEmpty()) {
905
- var _this$props$label2;
906
- return (_this$props$label2 = this.props.label) !== null && _this$props$label2 !== void 0 ? _this$props$label2 : 'Select an option';
679
+ var resetHandler = function resetHandler(item, event) {
680
+ _this2.clear(event);
681
+ _this2.clearFilter();
682
+ _this2.props.onFilter('');
683
+ _this2.setState(function (prevState) {
684
+ return {
685
+ shownData: prevState.shownData.slice(reset.separator ? 2 : 1),
686
+ multipleMap: {}
687
+ };
688
+ });
689
+ _this2._redrawPopup();
690
+ };
691
+ return {
692
+ isResetItem: true,
693
+ separator: reset.separator,
694
+ key: reset.label,
695
+ rgItemType: List.ListProps.Type.CUSTOM,
696
+ template: /*#__PURE__*/React.createElement(Button, {
697
+ text: true,
698
+ className: modules_9d0de074.button,
699
+ "data-test": "ring-select-reset-tags-button",
700
+ height: ControlsHeight.S
701
+ }, reset.label),
702
+ glyph: reset.glyph,
703
+ onClick: resetHandler
704
+ };
907
705
  }
908
- return this._getSelectedString();
909
- }
910
- _getSelectedString() {
911
- if (Array.isArray(this.state.selected)) {
912
- const labels = [];
913
- for (let i = 0; i < this.state.selected.length; i++) {
914
- labels.push(getItemLabel(this.state.selected[i]));
706
+ }, {
707
+ key: "_prependResetOption",
708
+ value: function _prependResetOption(shownData) {
709
+ var resetOption = this._getResetOption();
710
+ if (resetOption) {
711
+ var resetItems = [resetOption];
712
+ if (resetOption.separator) {
713
+ resetItems.push({
714
+ rgItemType: List.ListProps.Type.SEPARATOR
715
+ });
716
+ }
717
+ return resetItems.concat(shownData);
915
718
  }
916
- return labels.filter(Boolean).join(', ');
917
- } else {
918
- return this.state.selected != null ? getItemLabel(this.state.selected) : null;
719
+ return shownData;
919
720
  }
920
- }
921
- _getIcons() {
922
- const {
923
- selected
924
- } = this.state;
925
- const {
926
- disabled,
927
- clear,
928
- hideArrow
929
- } = this.props;
930
- const icons = [];
931
- const height = this.props.height || this.context;
932
- if (!Array.isArray(selected) && selected?.icon) {
933
- icons.push( /*#__PURE__*/React.createElement("button", {
934
- title: "Toggle options popup",
935
- type: "button",
936
- className: modules_9d0de074.selectedIcon,
937
- key: "selected",
938
- disabled: this.props.disabled,
939
- onClick: this._clickHandler,
940
- style: {
941
- backgroundImage: `url(${selected.icon})`
721
+ }, {
722
+ key: "_renderPopup",
723
+ value: function _renderPopup() {
724
+ var _this3 = this;
725
+ var anchorElement = this.props.targetElement || this.node;
726
+ var _this$state2 = this.state,
727
+ showPopup = _this$state2.showPopup,
728
+ shownData = _this$state2.shownData;
729
+ var _shownData = this._prependResetOption(shownData);
730
+ return /*#__PURE__*/React.createElement(I18nContext.Consumer, null, function (_ref2) {
731
+ var translate = _ref2.translate;
732
+ var message;
733
+ if (_this3.props.loading) {
734
+ var _this3$props$loadingM;
735
+ message = (_this3$props$loadingM = _this3.props.loadingMessage) !== null && _this3$props$loadingM !== void 0 ? _this3$props$loadingM : translate('loading');
736
+ } else if (!shownData.length) {
737
+ var _this3$props$notFound;
738
+ message = (_this3$props$notFound = _this3.props.notFoundMessage) !== null && _this3$props$notFound !== void 0 ? _this3$props$notFound : translate('noOptionsFound');
942
739
  }
943
- }));
740
+ return /*#__PURE__*/React.createElement(SelectPopup, {
741
+ data: _shownData,
742
+ message: message,
743
+ toolbar: showPopup && _this3.getToolbar(),
744
+ topbar: _this3.getTopbar(),
745
+ loading: _this3.props.loading,
746
+ activeIndex: _this3.state.selectedIndex,
747
+ hidden: !showPopup,
748
+ ref: _this3.popupRef,
749
+ maxHeight: _this3.props.maxHeight,
750
+ minWidth: _this3.props.minWidth,
751
+ directions: _this3.props.directions,
752
+ className: _this3.props.popupClassName,
753
+ style: _this3.props.popupStyle,
754
+ top: _this3.props.top,
755
+ left: _this3.props.left,
756
+ filter: _this3.isInputMode() ? false : _this3.props.filter // disable popup filter in INPUT mode
757
+ ,
758
+ filterIcon: _this3.props.filterIcon,
759
+ filterRef: _this3.props.filterRef,
760
+ multiple: _this3.props.multiple,
761
+ filterValue: _this3.state.filterValue,
762
+ anchorElement: anchorElement,
763
+ onCloseAttempt: _this3._onCloseAttempt,
764
+ onOutsideClick: _this3.props.onOutsideClick,
765
+ onSelect: _this3._listSelectHandler,
766
+ onSelectAll: _this3._listSelectAllHandler,
767
+ onFilter: _this3._filterChangeHandler,
768
+ onClear: _this3.clearFilter,
769
+ onLoadMore: _this3.props.onLoadMore,
770
+ isInputMode: _this3.isInputMode(),
771
+ selected: _this3.state.selected,
772
+ tags: _this3.props.tags,
773
+ compact: _this3.props.compact,
774
+ renderOptimization: _this3.props.renderOptimization,
775
+ ringPopupTarget: _this3.props.ringPopupTarget,
776
+ disableMoveOverflow: _this3.props.disableMoveOverflow,
777
+ disableScrollToActive: _this3.props.disableScrollToActive,
778
+ dir: _this3.props.dir,
779
+ onEmptyPopupEnter: _this3.onEmptyPopupEnter,
780
+ listId: _this3.listId,
781
+ preventListOverscroll: _this3.props.preventListOverscroll
782
+ });
783
+ });
944
784
  }
945
- if (clear && !disabled && !this._selectionIsEmpty()) {
946
- icons.push( /*#__PURE__*/React.createElement(Button, {
947
- title: "Clear selection",
948
- "data-test": "ring-clear-select",
949
- className: modules_9d0de074.clearIcon,
950
- key: "close",
951
- disabled: this.props.disabled,
952
- onClick: this.clear,
953
- height: height,
954
- icon: closeIcon
785
+ }, {
786
+ key: "getToolbar",
787
+ value: function getToolbar() {
788
+ var _this$props2 = this.props,
789
+ hint = _this$props2.hint,
790
+ renderBottomToolbar = _this$props2.renderBottomToolbar;
791
+ var _ref3 = this.state.addButton || {},
792
+ prefix = _ref3.prefix,
793
+ label = _ref3.label,
794
+ delayed = _ref3.delayed;
795
+ var isToolbarHasElements = this.state.addButton || hint || renderBottomToolbar;
796
+ if (!isToolbarHasElements) {
797
+ return null;
798
+ }
799
+ return /*#__PURE__*/React.createElement("div", {
800
+ className: classNames({
801
+ [modules_9d0de074.toolbar]: Boolean(this.state.addButton || renderBottomToolbar)
802
+ }),
803
+ "data-test": "ring-select-toolbar"
804
+ }, renderBottomToolbar && renderBottomToolbar(), this.state.addButton && /*#__PURE__*/React.createElement(Button, {
805
+ text: true,
806
+ delayed: delayed,
807
+ className: classNames(modules_9d0de074.button, modules_9d0de074.buttonSpaced),
808
+ onClick: this.addHandler,
809
+ "data-test": "ring-select-toolbar-button"
810
+ }, prefix ? "".concat(prefix, " ").concat(label) : label), hint && /*#__PURE__*/React.createElement(List.ListHint, {
811
+ label: hint,
812
+ "data-test": "ring-select-toolbar-hint"
955
813
  }));
956
814
  }
957
- if (!hideArrow) {
958
- icons.push( /*#__PURE__*/React.createElement(Button, {
959
- title: "Toggle options popup",
960
- className: modules_9d0de074.chevron,
961
- iconClassName: modules_9d0de074.chevronIcon,
962
- icon: chevronDownIcon,
963
- key: "hide",
964
- disabled: this.props.disabled,
965
- height: height,
966
- onClick: this._clickHandler
967
- }));
815
+ }, {
816
+ key: "getTopbar",
817
+ value: function getTopbar() {
818
+ var _this$props$renderTop, _this$props3;
819
+ return (_this$props$renderTop = (_this$props3 = this.props).renderTopToolbar) === null || _this$props$renderTop === void 0 ? void 0 : _this$props$renderTop.call(_this$props3);
968
820
  }
969
- return icons;
970
- }
971
- _getAvatar() {
972
- return !Array.isArray(this.state.selected) && (this.state.selected?.avatar || this.state.selected?.showGeneratedAvatar) && /*#__PURE__*/React.createElement(Avatar, {
973
- className: modules_9d0de074.avatar,
974
- url: this.state.selected.avatar,
975
- username: this.state.selected.username,
976
- size: Size$1.Size20
977
- });
978
- }
979
- filter;
980
- filterRef = el => {
981
- this.filter = el;
982
- };
983
- getShortcutsMap() {
984
- return {
985
- enter: this._onEnter,
986
- esc: this._onEsc,
987
- up: this._inputShortcutHandler,
988
- down: this._inputShortcutHandler,
989
- right: noop,
990
- left: noop,
991
- 'shift+up': noop,
992
- 'shift+down': noop,
993
- space: noop
994
- };
995
- }
996
- renderSelect(activeItemId) {
997
- var _this$props$label3, _this$props$label4, _this$props$buttonCla;
998
- const dataTest = this.props['data-test'];
999
- const {
1000
- selectedLabel
1001
- } = this.props;
1002
- const {
1003
- shortcutsEnabled
1004
- } = this.state;
1005
- const classes = classNames(modules_9d0de074.select, 'ring-js-shortcuts', this.props.className, modules_9d0de074[`height${this.props.height || this.context}`], {
1006
- [modules_9d0de074[`size${this.props.size}`]]: this.props.type !== Type.INLINE,
1007
- [modules_9d0de074.disabled]: this.props.disabled
1008
- });
1009
- const icons = this._getIcons();
1010
- const style = getStyle(icons.length);
1011
- const iconsNode = /*#__PURE__*/React.createElement("div", {
1012
- className: modules_9d0de074.icons
1013
- }, icons);
1014
- const ariaProps = this.state.showPopup ? {
1015
- 'aria-owns': this.listId,
1016
- 'aria-activedescendant': activeItemId,
1017
- 'aria-label': (_this$props$label3 = this.props.label) !== null && _this$props$label3 !== void 0 ? _this$props$label3 : undefined
1018
- } : {
1019
- 'aria-label': (_this$props$label4 = this.props.label) !== null && _this$props$label4 !== void 0 ? _this$props$label4 : undefined
1020
- };
1021
- switch (this.props.type) {
1022
- case Type.INPUT_WITHOUT_CONTROLS:
1023
- case Type.INPUT:
1024
- return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
1025
- ref: this.nodeRef,
1026
- className: classNames(classes, modules_9d0de074.inputMode),
1027
- "data-test": joinDataTestAttributes('ring-select', dataTest)
1028
- }, shortcutsEnabled && /*#__PURE__*/React.createElement(Shortcuts, {
1029
- map: this.getShortcutsMap(),
1030
- scope: this.shortcutsScope
1031
- }), /*#__PURE__*/React.createElement(Input, _extends({}, ariaProps, {
1032
- height: this.props.height,
1033
- autoComplete: "off",
1034
- id: this.props.id,
1035
- onClick: this._clickHandler,
1036
- inputRef: composeRefs(this.filterRef, this.props.filterRef),
1037
- disabled: this.props.disabled,
1038
- value: this.state.filterValue,
1039
- borderless: this.props.type === Type.INPUT_WITHOUT_CONTROLS,
1040
- style: style,
1041
- size: Size.FULL,
1042
- onChange: this._filterChangeHandler,
1043
- onFocus: this._focusHandler,
1044
- onBlur: this._blurHandler
1045
- // Input with error style without description
1046
- ,
1047
- error: this.props.error != null ? '' : null,
1048
- label: this.props.type === Type.INPUT ? this._getLabel() : null,
1049
- placeholder: this.props.inputPlaceholder,
1050
- onKeyDown: this.props.onKeyDown,
1051
- "data-test": "ring-select__focus",
1052
- enableShortcuts: shortcutsEnabled ? Object.keys({
1053
- ...this.getShortcutsMap(),
1054
- ...this._popup?.list?.shortcutsMap
1055
- }) : undefined,
1056
- icon: this.props.filterIcon,
1057
- afterInput: this.props.type === Type.INPUT && iconsNode
1058
- })), this._renderPopup()), this.props.error && /*#__PURE__*/React.createElement("div", {
1059
- className: classNames(modules_88cfaf40.errorText, modules_88cfaf40[`size${this.props.size}`])
1060
- }, this.props.error));
1061
- case Type.BUTTON:
1062
- return /*#__PURE__*/React.createElement("div", {
1063
- ref: this.nodeRef,
1064
- className: classNames(classes, modules_9d0de074.buttonMode),
1065
- "data-test": joinDataTestAttributes('ring-select', dataTest)
1066
- }, selectedLabel && /*#__PURE__*/React.createElement(ControlLabel, {
1067
- type: this.props.labelType,
821
+ }, {
822
+ key: "getFilterFn",
823
+ value: function getFilterFn() {
824
+ return _getFilterFn(this.props.filter);
825
+ }
826
+ }, {
827
+ key: "getListItems",
828
+ value: function getListItems(rawFilterString, data) {
829
+ var _getListItems2 = _getListItems(this.props, this.state, rawFilterString, data),
830
+ filteredData = _getListItems2.filteredData,
831
+ addButton = _getListItems2.addButton;
832
+ this.setState({
833
+ addButton
834
+ });
835
+ return filteredData;
836
+ }
837
+ }, {
838
+ key: "filterValue",
839
+ value: function filterValue(setValue) {
840
+ if (typeof setValue === 'string' || typeof setValue === 'number') {
841
+ this.setState({
842
+ filterValue: setValue
843
+ });
844
+ return undefined;
845
+ } else {
846
+ return this.state.filterValue;
847
+ }
848
+ }
849
+ }, {
850
+ key: "isInputMode",
851
+ value: function isInputMode() {
852
+ return _isInputMode(this.props.type);
853
+ }
854
+ }, {
855
+ key: "_rebuildMultipleMap",
856
+ value: function _rebuildMultipleMap(selected) {
857
+ if (Array.isArray(selected)) {
858
+ this.setState({
859
+ multipleMap: buildMultipleMap(selected)
860
+ });
861
+ }
862
+ }
863
+ }, {
864
+ key: "_selectionIsEmpty",
865
+ value: function _selectionIsEmpty() {
866
+ return Array.isArray(this.state.selected) && !this.state.selected.length || !this.state.selected;
867
+ }
868
+ }, {
869
+ key: "_getLabel",
870
+ value: function _getLabel() {
871
+ var _ref4, _this$props$label;
872
+ return (_ref4 = (_this$props$label = this.props.label) !== null && _this$props$label !== void 0 ? _this$props$label : this.props.selectedLabel) !== null && _ref4 !== void 0 ? _ref4 : 'Select an option';
873
+ }
874
+ }, {
875
+ key: "_getPlaceholder",
876
+ value: function _getPlaceholder() {
877
+ if (this._selectionIsEmpty()) {
878
+ var _this$props$label2;
879
+ return (_this$props$label2 = this.props.label) !== null && _this$props$label2 !== void 0 ? _this$props$label2 : 'Select an option';
880
+ }
881
+ return this._getSelectedString();
882
+ }
883
+ }, {
884
+ key: "_getSelectedString",
885
+ value: function _getSelectedString() {
886
+ if (Array.isArray(this.state.selected)) {
887
+ var labels = [];
888
+ for (var i = 0; i < this.state.selected.length; i++) {
889
+ labels.push(getItemLabel(this.state.selected[i]));
890
+ }
891
+ return labels.filter(Boolean).join(', ');
892
+ } else {
893
+ return this.state.selected != null ? getItemLabel(this.state.selected) : null;
894
+ }
895
+ }
896
+ }, {
897
+ key: "_getIcons",
898
+ value: function _getIcons() {
899
+ var selected = this.state.selected;
900
+ var _this$props4 = this.props,
901
+ disabled = _this$props4.disabled,
902
+ clear = _this$props4.clear,
903
+ hideArrow = _this$props4.hideArrow;
904
+ var icons = [];
905
+ var height = this.props.height || this.context;
906
+ if (!Array.isArray(selected) && selected !== null && selected !== void 0 && selected.icon) {
907
+ icons.push( /*#__PURE__*/React.createElement("button", {
908
+ title: "Toggle options popup",
909
+ type: "button",
910
+ className: modules_9d0de074.selectedIcon,
911
+ key: "selected",
1068
912
  disabled: this.props.disabled,
1069
- htmlFor: this.props.id
1070
- }, selectedLabel), shortcutsEnabled && /*#__PURE__*/React.createElement(Shortcuts, {
1071
- map: this.getShortcutsMap(),
1072
- scope: this.shortcutsScope
1073
- }), /*#__PURE__*/React.createElement("div", {
1074
- className: modules_9d0de074.buttonContainer
1075
- }, /*#__PURE__*/React.createElement(Button, _extends({}, ariaProps, {
1076
- height: this.props.height,
1077
- id: this.props.id,
1078
913
  onClick: this._clickHandler,
1079
- className: classNames(this.props.buttonClassName, modules_9d0de074.buttonValue, {
1080
- [modules_9d0de074.buttonValueOpen]: this.state.showPopup,
1081
- [modules_9d0de074.buttonValueEmpty]: this._selectionIsEmpty()
1082
- }),
914
+ style: {
915
+ backgroundImage: "url(".concat(selected.icon, ")")
916
+ }
917
+ }));
918
+ }
919
+ if (clear && !disabled && !this._selectionIsEmpty()) {
920
+ icons.push( /*#__PURE__*/React.createElement(Button, {
921
+ title: "Clear selection",
922
+ "data-test": "ring-clear-select",
923
+ className: modules_9d0de074.clearIcon,
924
+ key: "close",
1083
925
  disabled: this.props.disabled,
1084
- style: style,
1085
- "data-test": "ring-select__button ring-select__focus"
1086
- }), this._getAvatar(), this._getPlaceholder()), iconsNode), this._renderPopup());
1087
- case Type.INLINE:
1088
- return /*#__PURE__*/React.createElement("div", {
1089
- className: classes,
1090
- ref: this.nodeRef,
1091
- "data-test": joinDataTestAttributes('ring-select', dataTest)
1092
- }, shortcutsEnabled && /*#__PURE__*/React.createElement(Shortcuts, {
1093
- map: this.getShortcutsMap(),
1094
- scope: this.shortcutsScope
1095
- }), /*#__PURE__*/React.createElement(Anchor, _extends({}, ariaProps, {
1096
- className: (_this$props$buttonCla = this.props.buttonClassName) !== null && _this$props$buttonCla !== void 0 ? _this$props$buttonCla : undefined,
1097
- id: this.props.id,
1098
- onClick: this._clickHandler,
1099
- "data-test": "ring-select__focus",
926
+ onClick: this.clear,
927
+ height: height,
928
+ icon: closeIcon
929
+ }));
930
+ }
931
+ if (!hideArrow) {
932
+ icons.push( /*#__PURE__*/React.createElement(Button, {
933
+ title: "Toggle options popup",
934
+ className: modules_9d0de074.chevron,
935
+ iconClassName: modules_9d0de074.chevronIcon,
936
+ icon: chevronDownIcon,
937
+ key: "hide",
1100
938
  disabled: this.props.disabled,
1101
- active: this.state.showPopup
1102
- }), this._getPlaceholder()), this._renderPopup());
1103
- default:
1104
- if (this.props.customAnchor) {
1105
- return /*#__PURE__*/React.createElement(Fragment, null, shortcutsEnabled && /*#__PURE__*/React.createElement(Shortcuts, {
939
+ height: height,
940
+ onClick: this._clickHandler
941
+ }));
942
+ }
943
+ return icons;
944
+ }
945
+ }, {
946
+ key: "_getAvatar",
947
+ value: function _getAvatar() {
948
+ var _this$state$selected, _this$state$selected2;
949
+ return !Array.isArray(this.state.selected) && (((_this$state$selected = this.state.selected) === null || _this$state$selected === void 0 ? void 0 : _this$state$selected.avatar) || ((_this$state$selected2 = this.state.selected) === null || _this$state$selected2 === void 0 ? void 0 : _this$state$selected2.showGeneratedAvatar)) && /*#__PURE__*/React.createElement(Avatar, {
950
+ className: modules_9d0de074.avatar,
951
+ url: this.state.selected.avatar,
952
+ username: this.state.selected.username,
953
+ size: Size$1.Size20
954
+ });
955
+ }
956
+ }, {
957
+ key: "getShortcutsMap",
958
+ value: function getShortcutsMap() {
959
+ return {
960
+ enter: this._onEnter,
961
+ esc: this._onEsc,
962
+ up: this._inputShortcutHandler,
963
+ down: this._inputShortcutHandler,
964
+ right: noop,
965
+ left: noop,
966
+ 'shift+up': noop,
967
+ 'shift+down': noop,
968
+ space: noop
969
+ };
970
+ }
971
+ }, {
972
+ key: "renderSelect",
973
+ value: function renderSelect(activeItemId) {
974
+ var _this$props$label3, _this$props$label4, _this$_popup5, _this$props$buttonCla;
975
+ var dataTest = this.props['data-test'];
976
+ var selectedLabel = this.props.selectedLabel;
977
+ var shortcutsEnabled = this.state.shortcutsEnabled;
978
+ var classes = classNames(modules_9d0de074.select, 'ring-js-shortcuts', this.props.className, modules_9d0de074["height".concat(this.props.height || this.context)], {
979
+ [modules_9d0de074["size".concat(this.props.size)]]: this.props.type !== Type.INLINE,
980
+ [modules_9d0de074.disabled]: this.props.disabled
981
+ });
982
+ var icons = this._getIcons();
983
+ var style = getStyle(icons.length);
984
+ var iconsNode = /*#__PURE__*/React.createElement("div", {
985
+ className: modules_9d0de074.icons
986
+ }, icons);
987
+ var ariaProps = this.state.showPopup ? {
988
+ 'aria-owns': this.listId,
989
+ 'aria-activedescendant': activeItemId,
990
+ 'aria-label': (_this$props$label3 = this.props.label) !== null && _this$props$label3 !== void 0 ? _this$props$label3 : undefined
991
+ } : {
992
+ 'aria-label': (_this$props$label4 = this.props.label) !== null && _this$props$label4 !== void 0 ? _this$props$label4 : undefined
993
+ };
994
+ switch (this.props.type) {
995
+ case Type.INPUT_WITHOUT_CONTROLS:
996
+ case Type.INPUT:
997
+ return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
998
+ ref: this.nodeRef,
999
+ className: classNames(classes, modules_9d0de074.inputMode),
1000
+ "data-test": joinDataTestAttributes('ring-select', dataTest)
1001
+ }, shortcutsEnabled && /*#__PURE__*/React.createElement(Shortcuts, {
1002
+ map: this.getShortcutsMap(),
1003
+ scope: this.shortcutsScope
1004
+ }), /*#__PURE__*/React.createElement(Input, _extends({}, ariaProps, {
1005
+ height: this.props.height,
1006
+ autoComplete: "off",
1007
+ id: this.props.id,
1008
+ onClick: this._clickHandler,
1009
+ inputRef: composeRefs(this.filterRef, this.props.filterRef),
1010
+ disabled: this.props.disabled,
1011
+ value: this.state.filterValue,
1012
+ borderless: this.props.type === Type.INPUT_WITHOUT_CONTROLS,
1013
+ style: style,
1014
+ size: Size.FULL,
1015
+ onChange: this._filterChangeHandler,
1016
+ onFocus: this._focusHandler,
1017
+ onBlur: this._blurHandler
1018
+ // Input with error style without description
1019
+ ,
1020
+ error: this.props.error != null ? '' : null,
1021
+ label: this.props.type === Type.INPUT ? this._getLabel() : null,
1022
+ placeholder: this.props.inputPlaceholder,
1023
+ onKeyDown: this.props.onKeyDown,
1024
+ "data-test": "ring-select__focus",
1025
+ enableShortcuts: shortcutsEnabled ? Object.keys(_objectSpread2(_objectSpread2({}, this.getShortcutsMap()), (_this$_popup5 = this._popup) === null || _this$_popup5 === void 0 || (_this$_popup5 = _this$_popup5.list) === null || _this$_popup5 === void 0 ? void 0 : _this$_popup5.shortcutsMap)) : undefined,
1026
+ icon: this.props.filterIcon,
1027
+ afterInput: this.props.type === Type.INPUT && iconsNode
1028
+ })), this._renderPopup()), this.props.error && /*#__PURE__*/React.createElement("div", {
1029
+ className: classNames(modules_88cfaf40.errorText, modules_88cfaf40["size".concat(this.props.size)])
1030
+ }, this.props.error));
1031
+ case Type.BUTTON:
1032
+ return /*#__PURE__*/React.createElement("div", {
1033
+ ref: this.nodeRef,
1034
+ className: classNames(classes, modules_9d0de074.buttonMode),
1035
+ "data-test": joinDataTestAttributes('ring-select', dataTest)
1036
+ }, selectedLabel && /*#__PURE__*/React.createElement(ControlLabel, {
1037
+ type: this.props.labelType,
1038
+ disabled: this.props.disabled,
1039
+ htmlFor: this.props.id
1040
+ }, selectedLabel), shortcutsEnabled && /*#__PURE__*/React.createElement(Shortcuts, {
1041
+ map: this.getShortcutsMap(),
1042
+ scope: this.shortcutsScope
1043
+ }), /*#__PURE__*/React.createElement("div", {
1044
+ className: modules_9d0de074.buttonContainer
1045
+ }, /*#__PURE__*/React.createElement(Button, _extends({}, ariaProps, {
1046
+ height: this.props.height,
1047
+ id: this.props.id,
1048
+ onClick: this._clickHandler,
1049
+ className: classNames(this.props.buttonClassName, modules_9d0de074.buttonValue, {
1050
+ [modules_9d0de074.buttonValueOpen]: this.state.showPopup,
1051
+ [modules_9d0de074.buttonValueEmpty]: this._selectionIsEmpty()
1052
+ }),
1053
+ disabled: this.props.disabled,
1054
+ style: style,
1055
+ "data-test": "ring-select__button ring-select__focus"
1056
+ }), this._getAvatar(), this._getPlaceholder()), iconsNode), this._renderPopup());
1057
+ case Type.INLINE:
1058
+ return /*#__PURE__*/React.createElement("div", {
1059
+ className: classes,
1060
+ ref: this.nodeRef,
1061
+ "data-test": joinDataTestAttributes('ring-select', dataTest)
1062
+ }, shortcutsEnabled && /*#__PURE__*/React.createElement(Shortcuts, {
1106
1063
  map: this.getShortcutsMap(),
1107
1064
  scope: this.shortcutsScope
1108
- }), this.props.customAnchor({
1109
- wrapperProps: {
1110
- ref: this.nodeRef,
1111
- 'data-test': joinDataTestAttributes('ring-select', dataTest)
1112
- },
1113
- buttonProps: {
1114
- ...ariaProps,
1115
- id: this.props.id,
1116
- onClick: this._clickHandler,
1117
- disabled: this.props.disabled,
1118
- children: this._getPlaceholder(),
1119
- 'data-test': 'ring-select__focus'
1120
- },
1121
- popup: this._renderPopup()
1122
- }));
1065
+ }), /*#__PURE__*/React.createElement(Anchor, _extends({}, ariaProps, {
1066
+ className: (_this$props$buttonCla = this.props.buttonClassName) !== null && _this$props$buttonCla !== void 0 ? _this$props$buttonCla : undefined,
1067
+ id: this.props.id,
1068
+ onClick: this._clickHandler,
1069
+ "data-test": "ring-select__focus",
1070
+ disabled: this.props.disabled,
1071
+ active: this.state.showPopup
1072
+ }), this._getPlaceholder()), this._renderPopup());
1073
+ default:
1074
+ if (this.props.customAnchor) {
1075
+ return /*#__PURE__*/React.createElement(Fragment, null, shortcutsEnabled && /*#__PURE__*/React.createElement(Shortcuts, {
1076
+ map: this.getShortcutsMap(),
1077
+ scope: this.shortcutsScope
1078
+ }), this.props.customAnchor({
1079
+ wrapperProps: {
1080
+ ref: this.nodeRef,
1081
+ 'data-test': joinDataTestAttributes('ring-select', dataTest)
1082
+ },
1083
+ buttonProps: _objectSpread2(_objectSpread2({}, ariaProps), {}, {
1084
+ id: this.props.id,
1085
+ onClick: this._clickHandler,
1086
+ disabled: this.props.disabled,
1087
+ children: this._getPlaceholder(),
1088
+ 'data-test': 'ring-select__focus'
1089
+ }),
1090
+ popup: this._renderPopup()
1091
+ }));
1092
+ }
1093
+ return /*#__PURE__*/React.createElement("span", {
1094
+ id: this.props.id,
1095
+ ref: this.nodeRef,
1096
+ "data-test": "ring-select"
1097
+ }, this._renderPopup());
1098
+ }
1099
+ }
1100
+ }, {
1101
+ key: "render",
1102
+ value: function render() {
1103
+ var _this4 = this;
1104
+ return /*#__PURE__*/React.createElement(ActiveItemContext.Provider, null, /*#__PURE__*/React.createElement(ActiveItemContext.ValueContext.Consumer, null, function (activeItemId) {
1105
+ return _this4.renderSelect(activeItemId);
1106
+ }));
1107
+ }
1108
+ }], [{
1109
+ key: "getDerivedStateFromProps",
1110
+ value: function getDerivedStateFromProps(nextProps, prevState) {
1111
+ var multiple = nextProps.multiple,
1112
+ data = nextProps.data,
1113
+ type = nextProps.type;
1114
+ var prevSelected = prevState.prevSelected,
1115
+ prevData = prevState.prevData,
1116
+ prevMultiple = prevState.prevMultiple,
1117
+ filterValue = prevState.filterValue;
1118
+ var nextState = {
1119
+ prevData: data,
1120
+ prevSelected: nextProps.selected,
1121
+ prevMultiple: multiple
1122
+ };
1123
+ if ('data' in nextProps && data !== prevData) {
1124
+ var _getListItems3 = _getListItems(nextProps, prevState, filterValue, data),
1125
+ filteredData = _getListItems3.filteredData,
1126
+ addButton = _getListItems3.addButton;
1127
+ Object.assign(nextState, {
1128
+ shownData: filteredData,
1129
+ addButton
1130
+ });
1131
+ if (prevState.selected) {
1132
+ Object.assign(nextState, {
1133
+ selectedIndex: getSelectedIndex(prevState.selected, data),
1134
+ filterValue: _getValueForFilter(prevState.selected, type, filterValue)
1135
+ });
1136
+ }
1137
+ }
1138
+ if ('selected' in nextProps && nextProps.selected !== prevSelected) {
1139
+ var _selected = nextProps.selected || (multiple ? [] : null);
1140
+ var selectedIndex = getSelectedIndex(_selected, data || prevData);
1141
+ Object.assign(nextState, {
1142
+ selected: _selected,
1143
+ filterValue: _getValueForFilter(_selected, type, filterValue)
1144
+ });
1145
+ if (!Array.isArray(prevSelected) || !Array.isArray(_selected) || !isSameSelected(prevSelected, _selected)) {
1146
+ Object.assign(nextState, {
1147
+ selectedIndex
1148
+ });
1123
1149
  }
1124
- return /*#__PURE__*/React.createElement("span", {
1125
- id: this.props.id,
1126
- ref: this.nodeRef,
1127
- "data-test": "ring-select"
1128
- }, this._renderPopup());
1150
+ }
1151
+ if (prevMultiple !== multiple && !deepEqual(prevMultiple, multiple)) {
1152
+ nextState.selected = multiple ? [] : null;
1153
+ }
1154
+ if (multiple && !nextState.selected) {
1155
+ nextState.selected = prevState.selected;
1156
+ }
1157
+ var _prevState$nextState = _objectSpread2(_objectSpread2({}, prevState), nextState),
1158
+ selected = _prevState$nextState.selected;
1159
+ if (selected && Array.isArray(selected)) {
1160
+ nextState.multipleMap = buildMultipleMap(selected);
1161
+ var _getListItems4 = _getListItems(nextProps, nextState, filterValue, data),
1162
+ _filteredData = _getListItems4.filteredData,
1163
+ _addButton = _getListItems4.addButton;
1164
+ Object.assign(nextState, {
1165
+ shownData: _filteredData,
1166
+ addButton: _addButton
1167
+ });
1168
+ }
1169
+ return nextState;
1129
1170
  }
1130
- }
1131
- render() {
1132
- return /*#__PURE__*/React.createElement(ActiveItemContext.Provider, null, /*#__PURE__*/React.createElement(ActiveItemContext.ValueContext.Consumer, null, activeItemId => this.renderSelect(activeItemId)));
1133
- }
1134
- }
1171
+ }]);
1172
+ }(Component);
1173
+ _defineProperty(Select, "defaultProps", {
1174
+ data: [],
1175
+ filter: false,
1176
+ // enable filter (not in INPUT modes)
1177
+ filterIcon: null,
1178
+ filterRef: noop,
1179
+ multiple: false,
1180
+ // multiple can be an object - see demo for more information
1181
+ clear: false,
1182
+ // enable clear button that clears the "selected" state
1183
+ loading: false,
1184
+ // show a loading indicator while data is loading
1185
+ disabled: false,
1186
+ // disable select
1187
+ type: Type.BUTTON,
1188
+ size: Size.M,
1189
+ targetElement: null,
1190
+ // element to bind the popup to (select BUTTON or INPUT by default)
1191
+ hideSelected: false,
1192
+ // INPUT mode: clears the input after an option is selected (useful when the selection is displayed in some custom way elsewhere)
1193
+ allowAny: false,
1194
+ // INPUT mode: allows any value to be entered
1195
+ hideArrow: false,
1196
+ // hide dropdown arrow icon
1197
+ showPopup: false,
1198
+ maxHeight: 600,
1199
+ // height of the options list, including the filter and the 'Add' button
1200
+ directions: [Popup.PopupProps.Directions.BOTTOM_RIGHT, Popup.PopupProps.Directions.BOTTOM_LEFT, Popup.PopupProps.Directions.TOP_LEFT, Popup.PopupProps.Directions.TOP_RIGHT],
1201
+ selected: null,
1202
+ // current selection (item / array of items)
1203
+ label: null,
1204
+ // BUTTON or INPUT label (nothing selected)
1205
+ selectedLabel: null,
1206
+ // BUTTON or INPUT label (something selected)
1207
+ inputPlaceholder: '',
1208
+ // Placeholder for input modes
1209
+ hint: null,
1210
+ // hint text to display under the list
1211
+ shortcutsEnabled: false,
1212
+ onBeforeOpen: noop,
1213
+ onLoadMore: noop,
1214
+ onOpen: noop,
1215
+ onClose: noop,
1216
+ onFilter: noop,
1217
+ // search string as first argument
1218
+ onFocus: noop,
1219
+ onBlur: noop,
1220
+ onKeyDown: noop,
1221
+ onSelect: noop,
1222
+ // single + multi
1223
+ onDeselect: noop,
1224
+ // multi
1225
+ onOutsideClick: noop,
1226
+ // multi
1227
+ onChange: noop,
1228
+ // multi
1229
+ onAdd: noop,
1230
+ // search string as first argument
1231
+ onDone: noop,
1232
+ onReset: noop,
1233
+ tags: null,
1234
+ ringPopupTarget: null,
1235
+ dir: 'ltr'
1236
+ });
1237
+ _defineProperty(Select, "contextType", ControlsHeightContext);
1238
+ _defineProperty(Select, "Type", Type);
1239
+ _defineProperty(Select, "Size", Size);
1135
1240
  Select.propTypes = {
1136
1241
  className: PropTypes.string,
1137
1242
  buttonClassName: PropTypes.string,
@@ -1195,6 +1300,6 @@ Select.propTypes = {
1195
1300
  dir: PropTypes.oneOf(['ltr', 'rtl']),
1196
1301
  'data-test': PropTypes.string
1197
1302
  };
1198
- const RerenderableSelect = rerenderHOC(Select);
1303
+ var RerenderableSelect = rerenderHOC(Select);
1199
1304
 
1200
1305
  export { RerenderableSelect, Type, Select as default };