@jetbrains/ring-ui-built 7.0.0-beta.2 → 7.0.0-beta.3

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