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

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