@jetbrains/ring-ui-built 7.0.0-beta.1 → 7.0.0-beta.10

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 (349) 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 +23 -20
  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/header.js +1 -1
  8. package/components/_helpers/icon__svg.js +27 -29
  9. package/components/_helpers/input.js +151 -193
  10. package/components/_helpers/query-assist__suggestions.js +79 -94
  11. package/components/_helpers/select__filter.js +56 -75
  12. package/components/_helpers/services-link.js +23 -39
  13. package/components/_helpers/sidebar.js +91 -102
  14. package/components/_helpers/tab-link.js +8 -12
  15. package/components/_helpers/theme.js +61 -51
  16. package/components/_helpers/title.js +59 -84
  17. package/components/alert/alert.d.ts +7 -24
  18. package/components/alert/alert.js +111 -179
  19. package/components/alert/container.d.ts +0 -5
  20. package/components/alert/container.js +32 -44
  21. package/components/alert-service/alert-service.js +104 -162
  22. package/components/analytics/analytics.js +12 -20
  23. package/components/analytics/analytics__custom-plugin.js +52 -68
  24. package/components/auth/auth.js +2 -31
  25. package/components/auth/auth__core.d.ts +4 -4
  26. package/components/auth/auth__core.js +755 -1433
  27. package/components/auth/background-flow.js +84 -121
  28. package/components/auth/down-notification.js +32 -79
  29. package/components/auth/iframe-flow.js +71 -125
  30. package/components/auth/request-builder.js +46 -77
  31. package/components/auth/response-parser.js +84 -112
  32. package/components/auth/storage.js +162 -324
  33. package/components/auth/token-validator.js +132 -227
  34. package/components/auth/window-flow.js +84 -121
  35. package/components/auth-dialog/auth-dialog.d.ts +0 -18
  36. package/components/auth-dialog/auth-dialog.js +107 -176
  37. package/components/auth-dialog-service/auth-dialog-service.js +12 -33
  38. package/components/avatar/avatar-example-datauri.js +1 -1
  39. package/components/avatar/avatar.d.ts +0 -13
  40. package/components/avatar/avatar.js +94 -136
  41. package/components/avatar/fallback-avatar.d.ts +1 -10
  42. package/components/avatar/fallback-avatar.js +20 -40
  43. package/components/badge/badge.d.ts +0 -10
  44. package/components/badge/badge.js +32 -48
  45. package/components/breadcrumbs/breadcrumbs.js +13 -17
  46. package/components/button/button.d.ts +0 -21
  47. package/components/button/button.js +68 -104
  48. package/components/button/button__classes.d.ts +1 -1
  49. package/components/button-group/button-group.d.ts +0 -5
  50. package/components/button-group/button-group.js +27 -41
  51. package/components/button-group/caption.d.ts +0 -4
  52. package/components/button-group/caption.js +0 -1
  53. package/components/button-set/button-set.d.ts +0 -6
  54. package/components/button-set/button-set.js +19 -33
  55. package/components/button-toolbar/button-toolbar.d.ts +0 -6
  56. package/components/button-toolbar/button-toolbar.js +17 -31
  57. package/components/caret/caret.js +184 -211
  58. package/components/checkbox/checkbox.d.ts +0 -19
  59. package/components/checkbox/checkbox.js +69 -104
  60. package/components/clipboard/clipboard-fallback.js +7 -7
  61. package/components/clipboard/clipboard.js +36 -129
  62. package/components/code/code.d.ts +0 -12
  63. package/components/code/code.js +83 -163
  64. package/components/collapse/collapse-content.js +42 -60
  65. package/components/collapse/collapse-context.js +2 -2
  66. package/components/collapse/collapse-control.js +12 -12
  67. package/components/collapse/collapse.js +12 -17
  68. package/components/collapse/consts.js +4 -4
  69. package/components/collapse/utils.js +1 -3
  70. package/components/confirm/confirm.d.ts +0 -14
  71. package/components/confirm/confirm.js +68 -112
  72. package/components/confirm-service/confirm-service.js +25 -47
  73. package/components/content-layout/content-layout.d.ts +0 -7
  74. package/components/content-layout/content-layout.js +41 -63
  75. package/components/content-layout/sidebar.d.ts +0 -9
  76. package/components/content-layout/sidebar.js +1 -2
  77. package/components/contenteditable/contenteditable.d.ts +1 -22
  78. package/components/contenteditable/contenteditable.js +37 -60
  79. package/components/control-help/control-help.js +5 -3
  80. package/components/control-label/control-label.js +9 -14
  81. package/components/data-list/data-list.d.ts +0 -2
  82. package/components/data-list/data-list.js +115 -179
  83. package/components/data-list/data-list.mock.js +3 -6
  84. package/components/data-list/item.js +119 -165
  85. package/components/data-list/selection.js +77 -135
  86. package/components/data-list/title.d.ts +2 -2
  87. package/components/data-list/title.js +2 -12
  88. package/components/date-picker/consts.d.ts +0 -2
  89. package/components/date-picker/consts.js +16 -24
  90. package/components/date-picker/date-input.d.ts +0 -20
  91. package/components/date-picker/date-input.js +100 -148
  92. package/components/date-picker/date-picker.d.ts +0 -29
  93. package/components/date-picker/date-picker.js +143 -224
  94. package/components/date-picker/date-popup.d.ts +0 -22
  95. package/components/date-picker/date-popup.js +282 -352
  96. package/components/date-picker/day.d.ts +0 -14
  97. package/components/date-picker/day.js +72 -109
  98. package/components/date-picker/month-names.d.ts +1 -11
  99. package/components/date-picker/month-names.js +42 -72
  100. package/components/date-picker/month-slider.d.ts +0 -9
  101. package/components/date-picker/month-slider.js +43 -71
  102. package/components/date-picker/month.d.ts +1 -9
  103. package/components/date-picker/month.js +18 -30
  104. package/components/date-picker/months.d.ts +1 -9
  105. package/components/date-picker/months.js +45 -55
  106. package/components/date-picker/weekdays.d.ts +2 -8
  107. package/components/date-picker/weekdays.js +12 -25
  108. package/components/date-picker/years.d.ts +0 -6
  109. package/components/date-picker/years.js +77 -104
  110. package/components/dialog/dialog.d.ts +0 -20
  111. package/components/dialog/dialog.js +153 -211
  112. package/components/dialog/dialog__body-scroll-preventer.js +0 -3
  113. package/components/dropdown/anchor.d.ts +1 -8
  114. package/components/dropdown/anchor.js +0 -7
  115. package/components/dropdown/dropdown.d.ts +4 -22
  116. package/components/dropdown/dropdown.js +134 -176
  117. package/components/dropdown-menu/dropdown-menu.js +51 -103
  118. package/components/editable-heading/editable-heading.js +69 -118
  119. package/components/error-bubble/error-bubble.d.ts +0 -6
  120. package/components/error-bubble/error-bubble.js +30 -60
  121. package/components/error-message/error-message.d.ts +0 -10
  122. package/components/error-message/error-message.js +34 -59
  123. package/components/footer/footer.js +28 -44
  124. package/components/form/form.js +1 -1
  125. package/components/global/compose.js +1 -8
  126. package/components/global/composeRefs.d.ts +0 -3
  127. package/components/global/composeRefs.js +8 -15
  128. package/components/global/controls-height.js +2 -2
  129. package/components/global/create-stateful-context.d.ts +0 -4
  130. package/components/global/create-stateful-context.js +14 -17
  131. package/components/global/data-tests.js +7 -12
  132. package/components/global/dom.js +49 -82
  133. package/components/global/focus-sensor-hoc.js +95 -122
  134. package/components/global/fuzzy-highlight.js +23 -34
  135. package/components/global/get-event-key.js +8 -8
  136. package/components/global/get-uid.js +3 -7
  137. package/components/global/inject-styles.js +7 -14
  138. package/components/global/listeners.js +28 -47
  139. package/components/global/memoize.js +6 -10
  140. package/components/global/normalize-indent.js +19 -46
  141. package/components/global/promise-with-timeout.js +6 -8
  142. package/components/global/react-dom-renderer.d.ts +0 -5
  143. package/components/global/react-dom-renderer.js +29 -45
  144. package/components/global/rerender-hoc.d.ts +2 -2
  145. package/components/global/rerender-hoc.js +16 -32
  146. package/components/global/schedule-raf.js +4 -4
  147. package/components/global/sniffer.js +1 -1
  148. package/components/global/theme.d.ts +8 -2
  149. package/components/global/theme.js +2 -20
  150. package/components/global/trivial-template-tag.js +4 -9
  151. package/components/global/typescript-utils.js +2 -6
  152. package/components/global/url.js +20 -23
  153. package/components/global/use-event-callback.js +7 -4
  154. package/components/grid/col.d.ts +0 -14
  155. package/components/grid/col.js +27 -53
  156. package/components/grid/grid.d.ts +0 -5
  157. package/components/grid/grid.js +20 -32
  158. package/components/grid/row.d.ts +0 -18
  159. package/components/grid/row.js +23 -47
  160. package/components/group/group.d.ts +0 -5
  161. package/components/group/group.js +18 -27
  162. package/components/header/header-icon.d.ts +0 -22
  163. package/components/header/header-icon.js +20 -37
  164. package/components/header/header.d.ts +0 -7
  165. package/components/header/header.js +30 -74
  166. package/components/header/links.d.ts +2 -0
  167. package/components/header/links.js +20 -0
  168. package/components/header/logo.d.ts +0 -4
  169. package/components/header/logo.js +15 -30
  170. package/components/header/profile.d.ts +1 -39
  171. package/components/header/profile.js +126 -191
  172. package/components/header/services-link.d.ts +0 -10
  173. package/components/header/services-link.js +1 -4
  174. package/components/header/services.d.ts +0 -14
  175. package/components/header/services.js +65 -110
  176. package/components/header/smart-profile.d.ts +0 -9
  177. package/components/header/smart-profile.js +116 -205
  178. package/components/header/smart-services.d.ts +0 -4
  179. package/components/header/smart-services.js +72 -141
  180. package/components/header/tray.d.ts +0 -5
  181. package/components/header/tray.js +21 -35
  182. package/components/heading/heading.js +21 -26
  183. package/components/http/http.js +162 -319
  184. package/components/http/http.mock.js +50 -98
  185. package/components/hub-source/hub-source.js +77 -182
  186. package/components/hub-source/hub-source__user.js +9 -37
  187. package/components/hub-source/hub-source__users-groups.js +34 -60
  188. package/components/i18n/i18n-context.js +7 -8
  189. package/components/i18n/i18n.js +3 -6
  190. package/components/icon/icon.d.ts +0 -11
  191. package/components/icon/icon.js +60 -85
  192. package/components/icon/icon__svg.d.ts +0 -8
  193. package/components/icon/icon__svg.js +0 -6
  194. package/components/icon/index.js +0 -6
  195. package/components/input/input-legacy.js +1 -1
  196. package/components/input/input.js +2 -14
  197. package/components/input-size/input-size.js +1 -1
  198. package/components/island/adaptive-island-hoc.d.ts +0 -1
  199. package/components/island/adaptive-island-hoc.js +30 -39
  200. package/components/island/content.d.ts +0 -10
  201. package/components/island/content.js +99 -119
  202. package/components/island/header.js +55 -73
  203. package/components/island/island.d.ts +0 -9
  204. package/components/island/island.js +25 -41
  205. package/components/island-legacy/content-legacy.d.ts +0 -5
  206. package/components/island-legacy/content-legacy.js +16 -27
  207. package/components/island-legacy/header-legacy.d.ts +0 -5
  208. package/components/island-legacy/header-legacy.js +19 -30
  209. package/components/island-legacy/island-legacy.d.ts +0 -5
  210. package/components/island-legacy/island-legacy.js +16 -27
  211. package/components/link/clickableLink.d.ts +0 -9
  212. package/components/link/clickableLink.js +33 -51
  213. package/components/link/link.d.ts +0 -25
  214. package/components/link/link.js +47 -68
  215. package/components/list/consts.js +2 -2
  216. package/components/list/list.d.ts +0 -32
  217. package/components/list/list.js +399 -516
  218. package/components/list/list__custom.js +51 -78
  219. package/components/list/list__hint.d.ts +0 -4
  220. package/components/list/list__hint.js +8 -21
  221. package/components/list/list__item.js +147 -211
  222. package/components/list/list__link.js +39 -59
  223. package/components/list/list__separator.js +15 -30
  224. package/components/list/list__title.js +25 -41
  225. package/components/list/list__users-groups-source.js +55 -123
  226. package/components/loader/loader.d.ts +0 -10
  227. package/components/loader/loader.js +38 -70
  228. package/components/loader/loader__core.js +123 -184
  229. package/components/loader-inline/loader-inline.d.ts +0 -6
  230. package/components/loader-inline/loader-inline.js +24 -38
  231. package/components/loader-screen/loader-screen.d.ts +0 -6
  232. package/components/loader-screen/loader-screen.js +24 -46
  233. package/components/login-dialog/login-dialog.d.ts +0 -11
  234. package/components/login-dialog/login-dialog.js +94 -145
  235. package/components/login-dialog/service.js +11 -33
  236. package/components/markdown/markdown.js +16 -29
  237. package/components/message/message.js +171 -218
  238. package/components/old-browsers-message/old-browsers-message.js +11 -14
  239. package/components/old-browsers-message/old-browsers-message__stop.js +1 -4
  240. package/components/old-browsers-message/white-list.js +8 -13
  241. package/components/pager/pager.js +211 -275
  242. package/components/panel/panel.d.ts +0 -5
  243. package/components/panel/panel.js +16 -27
  244. package/components/permissions/permissions.js +118 -161
  245. package/components/permissions/permissions__cache.js +191 -218
  246. package/components/popup/popup.consts.js +1 -1
  247. package/components/popup/popup.js +237 -329
  248. package/components/popup/popup.target.js +9 -12
  249. package/components/popup/position.js +94 -101
  250. package/components/popup-menu/popup-menu.js +31 -76
  251. package/components/progress-bar/progress-bar.d.ts +19 -33
  252. package/components/progress-bar/progress-bar.js +55 -99
  253. package/components/query-assist/query-assist.d.ts +63 -93
  254. package/components/query-assist/query-assist.js +585 -748
  255. package/components/query-assist/query-assist__suggestions.js +2 -28
  256. package/components/radio/radio.d.ts +0 -8
  257. package/components/radio/radio.js +15 -35
  258. package/components/radio/radio__item.d.ts +0 -9
  259. package/components/radio/radio__item.js +52 -72
  260. package/components/scrollable-section/scrollable-section.js +53 -0
  261. package/components/select/select.d.ts +3 -0
  262. package/components/select/select.js +714 -863
  263. package/components/select/select__filter.js +2 -29
  264. package/components/select/select__popup.js +317 -465
  265. package/components/shortcuts/core.js +147 -195
  266. package/components/shortcuts/shortcut-title.js +6 -10
  267. package/components/shortcuts/shortcuts-hoc.d.ts +0 -5
  268. package/components/shortcuts/shortcuts-hoc.js +23 -46
  269. package/components/shortcuts/shortcuts.d.ts +0 -8
  270. package/components/shortcuts/shortcuts.js +41 -72
  271. package/components/slider/slider.js +93 -113
  272. package/components/slider/slider.utils.js +16 -23
  273. package/components/storage/storage.d.ts +2 -3
  274. package/components/storage/storage.js +2 -46
  275. package/components/storage/storage__local.js +89 -148
  276. package/components/style.css +1 -1
  277. package/components/tab-trap/tab-trap.js +35 -61
  278. package/components/table/cell.d.ts +0 -6
  279. package/components/table/cell.js +11 -27
  280. package/components/table/disable-hover-hoc.d.ts +0 -1
  281. package/components/table/disable-hover-hoc.js +27 -42
  282. package/components/table/header-cell.d.ts +0 -10
  283. package/components/table/header-cell.js +59 -85
  284. package/components/table/header.d.ts +1 -23
  285. package/components/table/header.js +89 -126
  286. package/components/table/multitable.d.ts +0 -4
  287. package/components/table/multitable.js +83 -93
  288. package/components/table/row-with-focus-sensor.d.ts +2 -2
  289. package/components/table/row-with-focus-sensor.js +26 -60
  290. package/components/table/row.js +170 -235
  291. package/components/table/selection-adapter.js +2 -2
  292. package/components/table/selection-shortcuts-hoc.js +102 -126
  293. package/components/table/selection.js +150 -217
  294. package/components/table/simple-table.d.ts +0 -44
  295. package/components/table/simple-table.js +18 -59
  296. package/components/table/smart-table.d.ts +0 -48
  297. package/components/table/smart-table.js +41 -83
  298. package/components/table/table.d.ts +0 -2
  299. package/components/table/table.js +269 -377
  300. package/components/tabs/collapsible-more.d.ts +1 -9
  301. package/components/tabs/collapsible-more.js +47 -97
  302. package/components/tabs/collapsible-tab.js +32 -44
  303. package/components/tabs/collapsible-tabs.d.ts +2 -29
  304. package/components/tabs/collapsible-tabs.js +89 -161
  305. package/components/tabs/custom-item.d.ts +1 -7
  306. package/components/tabs/custom-item.js +4 -7
  307. package/components/tabs/dumb-tabs.d.ts +0 -11
  308. package/components/tabs/dumb-tabs.js +60 -104
  309. package/components/tabs/smart-tabs.d.ts +0 -6
  310. package/components/tabs/smart-tabs.js +29 -68
  311. package/components/tabs/tab-link.d.ts +0 -8
  312. package/components/tabs/tab-link.js +1 -4
  313. package/components/tabs/tab.d.ts +0 -8
  314. package/components/tabs/tab.js +14 -32
  315. package/components/tabs/tabs.js +1 -28
  316. package/components/tag/tag.d.ts +0 -19
  317. package/components/tag/tag.js +120 -179
  318. package/components/tags-input/tags-input.d.ts +7 -33
  319. package/components/tags-input/tags-input.js +224 -339
  320. package/components/tags-list/tags-list.d.ts +0 -13
  321. package/components/tags-list/tags-list.js +45 -74
  322. package/components/text/text.d.ts +0 -7
  323. package/components/text/text.js +27 -43
  324. package/components/toggle/toggle.d.ts +0 -15
  325. package/components/toggle/toggle.js +52 -77
  326. package/components/tooltip/tooltip.d.ts +4 -10
  327. package/components/tooltip/tooltip.js +105 -137
  328. package/components/user-agreement/service.d.ts +2 -1
  329. package/components/user-agreement/service.js +260 -405
  330. package/components/user-agreement/user-agreement.d.ts +0 -18
  331. package/components/user-agreement/user-agreement.js +92 -138
  332. package/components/user-card/card.d.ts +0 -35
  333. package/components/user-card/card.js +2 -27
  334. package/components/user-card/smart-user-card-tooltip.d.ts +0 -5
  335. package/components/user-card/smart-user-card-tooltip.js +52 -108
  336. package/components/user-card/tooltip.d.ts +0 -9
  337. package/components/user-card/tooltip.js +35 -74
  338. package/components/user-card/user-card.js +1 -26
  339. package/package.json +4 -6
  340. package/components/global/prop-types.d.ts +0 -4
  341. package/components/global/prop-types.js +0 -9
  342. package/components/global/react-render-adapter.d.ts +0 -1
  343. package/components/global/react-render-adapter.js +0 -6
  344. package/components/header/scrollable-section.js +0 -47
  345. package/components/header/tray-icon.d.ts +0 -1
  346. package/components/header/tray-icon.js +0 -26
  347. package/components/storage/storage__fallback.d.ts +0 -79
  348. package/components/storage/storage__fallback.js +0 -253
  349. /package/components/{header → scrollable-section}/scrollable-section.d.ts +0 -0
@@ -1,28 +1,17 @@
1
- import { _ as _defineProperty, a as _inherits, b as _createClass, j as _toConsumableArray, e as _classCallCheck, f as _callSuper, l as _get, m as _getPrototypeOf, c as _objectWithoutProperties } from '../_helpers/_rollupPluginBabelHelpers.js';
2
- import 'core-js/modules/es.symbol.js';
1
+ import { _ as _defineProperty, a as _objectWithoutProperties } from '../_helpers/_rollupPluginBabelHelpers.js';
3
2
  import 'core-js/modules/es.symbol.description.js';
4
- import 'core-js/modules/es.array.concat.js';
5
- import 'core-js/modules/es.array.filter.js';
6
- import 'core-js/modules/es.array.find.js';
7
- import 'core-js/modules/es.array.from.js';
8
- import 'core-js/modules/es.array.map.js';
9
- import 'core-js/modules/es.array.splice.js';
10
- import 'core-js/modules/es.object.assign.js';
11
- import 'core-js/modules/es.object.to-string.js';
12
- import 'core-js/modules/es.promise.js';
13
3
  import 'core-js/modules/es.regexp.exec.js';
14
4
  import 'core-js/modules/es.string.replace.js';
15
- import 'core-js/modules/web.dom-collections.for-each.js';
5
+ import 'core-js/modules/web.dom-collections.iterator.js';
16
6
  import { Component } from 'react';
17
- import PropTypes from 'prop-types';
18
7
  import debounce from 'just-debounce-it';
19
8
  import classNames from 'classnames';
20
- import deepEqual from 'deep-equal';
9
+ import { dequal } from 'dequal';
21
10
  import searchIcon from '@jetbrains/icons/search';
22
11
  import closeIcon from '@jetbrains/icons/close-12px';
23
12
  import getUID from '../global/get-uid.js';
24
13
  import joinDataTestAttributes from '../global/data-tests.js';
25
- import { getRect, preventDefault } from '../global/dom.js';
14
+ import { preventDefault, getRect } from '../global/dom.js';
26
15
  import Caret from '../caret/caret.js';
27
16
  import ContentEditable from '../contenteditable/contenteditable.js';
28
17
  import PopupMenu from '../popup-menu/popup-menu.js';
@@ -36,26 +25,17 @@ import { S as Size, m as modules_88cfaf40 } from '../_helpers/input.js';
36
25
  import { I18nContext } from '../i18n/i18n-context.js';
37
26
  import { Q as QueryAssistSuggestions, m as modules_da7ab055 } from '../_helpers/query-assist__suggestions.js';
38
27
  import { jsx, jsxs } from 'react/jsx-runtime';
39
- import 'core-js/modules/es.regexp.to-string.js';
40
28
  import 'core-js/modules/es.array.reduce.js';
41
- import 'core-js/modules/es.object.entries.js';
42
- import 'core-js/modules/es.array.iterator.js';
43
- import 'core-js/modules/es.set.js';
44
- import 'core-js/modules/es.string.split.js';
45
- import 'core-js/modules/web.dom-collections.iterator.js';
46
29
  import 'react-dom/server';
47
30
  import '../popup/popup.js';
48
31
  import 'react-dom';
49
32
  import '../global/schedule-raf.js';
50
33
  import '../tab-trap/tab-trap.js';
51
34
  import '../popup/position.js';
52
- import 'core-js/modules/es.array.includes.js';
53
35
  import 'core-js/modules/es.array.sort.js';
54
- import 'core-js/modules/es.string.includes.js';
55
36
  import '../popup/popup.consts.js';
56
37
  import '../popup/popup.target.js';
57
38
  import '../list/list.js';
58
- import 'core-js/modules/es.array.find-index.js';
59
39
  import 'react-virtualized/dist/es/List';
60
40
  import 'react-virtualized/dist/es/AutoSizer';
61
41
  import 'react-virtualized/dist/es/WindowScroller';
@@ -63,8 +43,6 @@ import 'react-virtualized/dist/es/CellMeasurer';
63
43
  import 'util-deprecate';
64
44
  import 'memoize-one';
65
45
  import '../global/memoize.js';
66
- import 'core-js/modules/es.map.js';
67
- import 'core-js/modules/es.weak-map.js';
68
46
  import '../global/create-stateful-context.js';
69
47
  import '../list/list__link.js';
70
48
  import '../link/link.js';
@@ -72,16 +50,12 @@ import '../link/clickableLink.js';
72
50
  import '../_helpers/link.js';
73
51
  import '../_helpers/list.js';
74
52
  import '../list/list__item.js';
75
- import 'core-js/modules/es.array.index-of.js';
76
53
  import '../avatar/avatar.js';
77
54
  import '../global/url.js';
78
- import 'core-js/modules/es.string.match.js';
79
55
  import '../avatar/fallback-avatar.js';
80
- import 'core-js/modules/es.array.slice.js';
81
56
  import '../checkbox/checkbox.js';
82
57
  import '@jetbrains/icons/checkmark-12px';
83
58
  import '@jetbrains/icons/remove-12px';
84
- import '../global/prop-types.js';
85
59
  import '../global/composeRefs.js';
86
60
  import '../control-help/control-help.js';
87
61
  import '../list/list__custom.js';
@@ -96,16 +70,14 @@ import '../global/sniffer.js';
96
70
  import 'sniffr';
97
71
  import '../icon/icon__constants.js';
98
72
  import '../_helpers/icon__svg.js';
99
- import 'core-js/modules/es.string.starts-with.js';
100
73
  import '@jetbrains/icons/chevron-down';
101
74
  import '../_helpers/button__classes.js';
102
- import 'core-js/modules/es.object.values.js';
103
75
  import '../control-label/control-label.js';
104
76
  import '../i18n/i18n.js';
105
77
 
106
- var _excluded = ["suggestions"];
107
- var POPUP_COMPENSATION = PopupMenu.ListProps.Dimension.ITEM_PADDING + PopupMenu.PopupProps.Dimension.BORDER_WIDTH;
108
- var ngModelStateField = 'query';
78
+ const _excluded = ["suggestions"];
79
+ const POPUP_COMPENSATION = PopupMenu.ListProps.Dimension.ITEM_PADDING + PopupMenu.PopupProps.Dimension.BORDER_WIDTH;
80
+ const ngModelStateField = 'query';
109
81
  function noop() {}
110
82
  function cleanText(text) {
111
83
  return text.replace(/([\n\r])+/g, ' ');
@@ -149,55 +121,71 @@ function cleanText(text) {
149
121
  + __group__ \`string=\` Group title. Options with the same title are grouped under it
150
122
  + __icon__ \`string=\` Icon URI, Data URI is possible
151
123
  */
152
- var QueryAssist = /*#__PURE__*/function (_Component) {
153
- function QueryAssist(_props) {
124
+ class QueryAssist extends Component {
125
+ static getDerivedStateFromProps(_ref, _ref2) {
126
+ let {
127
+ query
128
+ } = _ref;
129
+ let {
130
+ prevQuery
131
+ } = _ref2;
132
+ const nextState = {
133
+ prevQuery: query
134
+ };
135
+ if (typeof query === 'string' && query !== prevQuery) {
136
+ nextState.query = query;
137
+ nextState.placeholderEnabled = !query;
138
+ }
139
+ return nextState;
140
+ }
141
+ constructor(_props) {
154
142
  var _this;
155
- _classCallCheck(this, QueryAssist);
156
- _this = _callSuper(this, QueryAssist, [_props]);
157
- _defineProperty(_this, "state", {
158
- dirty: !_this.props.query,
159
- query: _this.props.query,
160
- placeholderEnabled: !_this.props.query,
161
- shortcuts: !!_this.props.focus,
143
+ super(_props);
144
+ _this = this;
145
+ _defineProperty(this, "state", {
146
+ dirty: !this.props.query,
147
+ query: this.props.query,
148
+ placeholderEnabled: !this.props.query,
149
+ shortcuts: !!this.props.focus,
162
150
  suggestions: [],
163
151
  showPopup: false
164
152
  });
165
- _defineProperty(_this, "immediateState", void 0);
166
- _defineProperty(_this, "requestData", void 0);
167
- _defineProperty(_this, "ngModelStateField", ngModelStateField);
153
+ _defineProperty(this, "immediateState", void 0);
154
+ _defineProperty(this, "requestData", void 0);
155
+ _defineProperty(this, "ngModelStateField", ngModelStateField);
168
156
  // An array of {query: string; caret: number}[]
169
- _defineProperty(_this, "historyStack", []);
170
- _defineProperty(_this, "mouseIsDownOnPopup", void 0);
171
- _defineProperty(_this, "handleFocusChange", function (e) {
157
+ _defineProperty(this, "historyStack", []);
158
+ _defineProperty(this, "mouseIsDownOnPopup", void 0);
159
+ _defineProperty(this, "handleFocusChange", e => {
172
160
  // otherwise it's blur and false
173
- var focus = e.type === 'focus';
174
- _this.immediateState.focus = focus;
161
+ const focus = e.type === 'focus';
162
+ this.immediateState.focus = focus;
175
163
  if (!focus) {
176
- _this.blurInput();
164
+ this.blurInput();
177
165
  // Close popup on blur by keyboard (mostly shift+tab)
178
- if (!_this.mouseIsDownOnPopup) {
179
- _this.closePopup();
166
+ if (!this.mouseIsDownOnPopup) {
167
+ this.closePopup();
180
168
  }
181
169
  } else {
182
- _this.setCaretPosition();
170
+ this.setCaretPosition();
183
171
  }
184
- if (!_this.mouseIsDownOnPopup) {
185
- _this.props.onFocusChange({
172
+ if (!this.mouseIsDownOnPopup) {
173
+ this.props.onFocusChange({
186
174
  focus
187
175
  });
188
176
  }
189
- _this.setState({
177
+ this.setState({
190
178
  shortcuts: focus
191
179
  });
192
180
  });
193
- _defineProperty(_this, "node", void 0);
194
- _defineProperty(_this, "nodeRef", function (node) {
195
- _this.node = node;
181
+ _defineProperty(this, "node", void 0);
182
+ _defineProperty(this, "nodeRef", node => {
183
+ this.node = node;
196
184
  });
197
- _defineProperty(_this, "setCaretPosition", function () {
198
- var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
199
- var queryLength = _this.immediateState.query != null ? _this.immediateState.query.length : 0;
200
- var newCaretPosition = _this.immediateState.caret < queryLength ? _this.immediateState.caret : queryLength;
185
+ _defineProperty(this, "setCaretPosition", function () {
186
+ let params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
187
+ const queryLength = _this.immediateState.query != null ? _this.immediateState.query.length : 0;
188
+ const newCaretPosition = _this.immediateState.caret < queryLength ? _this.immediateState.caret : queryLength;
201
189
  if (params.fromContentEditable) {
202
190
  _this.immediateState.selection = _this.immediateState.selection ? _this.immediateState.selection : _this.state.query && _this.state.query.length || null;
203
191
  }
@@ -216,157 +204,151 @@ var QueryAssist = /*#__PURE__*/function (_Component) {
216
204
  }
217
205
  }
218
206
  });
219
- _defineProperty(_this, "togglePlaceholder", function () {
220
- var query = _this.getQuery();
221
- var currentQueryIsEmpty = _this.immediateState.query === '';
222
- var newQueryIsEmpty = query === '';
207
+ _defineProperty(this, "togglePlaceholder", () => {
208
+ const query = this.getQuery();
209
+ const currentQueryIsEmpty = this.immediateState.query === '';
210
+ const newQueryIsEmpty = query === '';
223
211
  if (newQueryIsEmpty !== currentQueryIsEmpty) {
224
- _this.setState({
212
+ this.setState({
225
213
  placeholderEnabled: newQueryIsEmpty
226
214
  });
227
215
  }
228
216
  });
229
- _defineProperty(_this, "isComposing", void 0);
230
- _defineProperty(_this, "handleInput", function (e) {
217
+ _defineProperty(this, "isComposing", void 0);
218
+ _defineProperty(this, "handleInput", e => {
231
219
  var _this$caret4, _currentCaret$positio;
232
- _this.togglePlaceholder();
233
- var currentCaret = (_this$caret4 = _this.caret) === null || _this$caret4 === void 0 ? void 0 : _this$caret4.getPosition();
234
- var props = {
220
+ this.togglePlaceholder();
221
+ const currentCaret = (_this$caret4 = this.caret) === null || _this$caret4 === void 0 ? void 0 : _this$caret4.getPosition();
222
+ const props = {
235
223
  dirty: true,
236
- query: _this.getQuery(),
224
+ query: this.getQuery(),
237
225
  caret: typeof currentCaret === 'number' ? currentCaret : (_currentCaret$positio = currentCaret === null || currentCaret === void 0 ? void 0 : currentCaret.position) !== null && _currentCaret$positio !== void 0 ? _currentCaret$positio : 0,
238
226
  focus: true
239
227
  };
240
- if (_this.immediateState.query === props.query && !_this.isComposing) {
241
- _this.handleCaretMove(e);
228
+ if (this.immediateState.query === props.query && !this.isComposing) {
229
+ this.handleCaretMove(e);
242
230
  return;
243
231
  }
244
- if (_this.isComposing) {
232
+ if (this.isComposing) {
245
233
  return;
246
234
  }
247
- _this.immediateState = props;
248
- if (_this.state.query) {
235
+ this.immediateState = props;
236
+ if (this.state.query) {
249
237
  var _this$state$styleRang;
250
- var i = 0;
251
- while (_this.state.query[i] === _this.immediateState.query[i] && i < _this.state.query.length - 1) {
238
+ let i = 0;
239
+ while (this.state.query[i] === this.immediateState.query[i] && i < this.state.query.length - 1) {
252
240
  i++;
253
241
  }
254
- var diff = _this.immediateState.query.length - _this.state.query.length;
255
- var originalIndex = _this.immediateState.caret - diff;
256
- var ranges = _toConsumableArray((_this$state$styleRang = _this.state.styleRanges) !== null && _this$state$styleRang !== void 0 ? _this$state$styleRang : []);
257
- var range = ranges.find(function (r) {
258
- return originalIndex >= r.start && originalIndex <= r.start + r.length;
259
- });
242
+ const diff = this.immediateState.query.length - this.state.query.length;
243
+ const originalIndex = this.immediateState.caret - diff;
244
+ const ranges = [...((_this$state$styleRang = this.state.styleRanges) !== null && _this$state$styleRang !== void 0 ? _this$state$styleRang : [])];
245
+ const range = ranges.find(r => originalIndex >= r.start && originalIndex <= r.start + r.length);
260
246
  if (range) {
261
247
  range.length += diff;
262
248
  }
263
- ranges.filter(function (r) {
264
- return r.start > originalIndex;
265
- }).forEach(function (r) {
249
+ ranges.filter(r => r.start > originalIndex).forEach(r => {
266
250
  r.start += diff;
267
251
  });
268
252
  }
269
- _this.props.onChange(props);
270
- if (_this.props.autoOpen === 'force' || props.query.length > 0) {
271
- var _this$requestData, _this2;
272
- (_this$requestData = (_this2 = _this).requestData) === null || _this$requestData === void 0 || _this$requestData.call(_this2);
253
+ this.props.onChange(props);
254
+ if (this.props.autoOpen === 'force' || props.query.length > 0) {
255
+ var _this$requestData;
256
+ (_this$requestData = this.requestData) === null || _this$requestData === void 0 || _this$requestData.call(this);
273
257
  }
274
258
  });
275
259
  // It's necessary to prevent new element creation before any other hooks
276
- _defineProperty(_this, "handleEnter", function (e) {
260
+ _defineProperty(this, "handleEnter", e => {
277
261
  if (e.key === 'Enter') {
278
262
  preventDefault(e);
279
263
  }
280
264
  });
281
- _defineProperty(_this, "handleTab", function (e) {
282
- var list = _this._popup && _this._popup.list;
283
- var suggestion = list && (list.getSelected() || list.getFirst());
284
- if (suggestion && _this.state.showPopup) {
265
+ _defineProperty(this, "handleTab", e => {
266
+ const list = this._popup && this._popup.list;
267
+ const suggestion = list && (list.getSelected() || list.getFirst());
268
+ if (suggestion && this.state.showPopup) {
285
269
  preventDefault(e);
286
- if (_this.getQuery() !== _this.immediateState.suggestionsQuery) {
270
+ if (this.getQuery() !== this.immediateState.suggestionsQuery) {
287
271
  return false;
288
272
  }
289
- return _this.handleComplete(suggestion, true);
273
+ return this.handleComplete(suggestion, true);
290
274
  }
291
- if (_this.state.loading) {
275
+ if (this.state.loading) {
292
276
  preventDefault(e);
293
277
  return false;
294
278
  }
295
279
  return true;
296
280
  });
297
- _defineProperty(_this, "setState", function (state, resolve) {
298
- _get((_getPrototypeOf(QueryAssist.prototype)), "setState", _this).call(_this, state, function () {
299
- _this._pushHistory(state);
281
+ _defineProperty(this, "setState", (state, resolve) => {
282
+ super.setState(state, () => {
283
+ this._pushHistory(state);
300
284
  resolve === null || resolve === void 0 || resolve();
301
285
  });
302
286
  });
303
- _defineProperty(_this, "undo", function (e) {
304
- var previous = _this.historyStack.splice(0, 2)[1];
287
+ _defineProperty(this, "undo", e => {
288
+ const previous = this.historyStack.splice(0, 2)[1];
305
289
  if (!previous) {
306
290
  return;
307
291
  }
308
- _this.setState({
292
+ this.setState({
309
293
  query: previous.query
310
- }, function () {
294
+ }, () => {
311
295
  var _this$caret5;
312
- (_this$caret5 = _this.caret) === null || _this$caret5 === void 0 || _this$caret5.setPosition(previous.caret);
313
- _this.handleInput(e);
296
+ (_this$caret5 = this.caret) === null || _this$caret5 === void 0 || _this$caret5.setPosition(previous.caret);
297
+ this.handleInput(e);
314
298
  });
315
299
  });
316
- _defineProperty(_this, "handlePaste", function (e) {
317
- var INSERT_COMMAND = 'insertText';
300
+ _defineProperty(this, "handlePaste", e => {
301
+ const INSERT_COMMAND = 'insertText';
318
302
  if (e.clipboardData && document.queryCommandSupported(INSERT_COMMAND)) {
319
303
  preventDefault(e);
320
- var text = cleanText(e.clipboardData.getData('text/plain'));
304
+ const text = cleanText(e.clipboardData.getData('text/plain'));
321
305
  document.execCommand(INSERT_COMMAND, false, text);
322
- _this.handleInput(e);
306
+ this.handleInput(e);
323
307
  }
324
308
  });
325
- _defineProperty(_this, "handleCaretMove", function (e) {
309
+ _defineProperty(this, "handleCaretMove", e => {
326
310
  var _this$caret6, _currentCaret$positio2;
327
- if (_this.isComposing) {
311
+ if (this.isComposing) {
328
312
  return;
329
313
  }
330
- var currentCaret = (_this$caret6 = _this.caret) === null || _this$caret6 === void 0 ? void 0 : _this$caret6.getPosition();
331
- var caret = typeof currentCaret === 'number' ? currentCaret : (_currentCaret$positio2 = currentCaret === null || currentCaret === void 0 ? void 0 : currentCaret.position) !== null && _currentCaret$positio2 !== void 0 ? _currentCaret$positio2 : 0;
332
- var popupHidden = !_this.state.showPopup && e.type === 'click';
333
- if (!_this.props.disabled && (caret !== _this.immediateState.caret || popupHidden)) {
334
- _this.immediateState.prevCaret = _this.immediateState.caret;
335
- _this.immediateState.caret = caret;
336
- _this.scrollInput();
337
- if (_this.immediateState.query.length > 0) {
338
- var _this$requestData2, _this3;
339
- (_this$requestData2 = (_this3 = _this).requestData) === null || _this$requestData2 === void 0 || _this$requestData2.call(_this3);
314
+ const currentCaret = (_this$caret6 = this.caret) === null || _this$caret6 === void 0 ? void 0 : _this$caret6.getPosition();
315
+ const caret = typeof currentCaret === 'number' ? currentCaret : (_currentCaret$positio2 = currentCaret === null || currentCaret === void 0 ? void 0 : currentCaret.position) !== null && _currentCaret$positio2 !== void 0 ? _currentCaret$positio2 : 0;
316
+ const popupHidden = !this.state.showPopup && e.type === 'click';
317
+ if (!this.props.disabled && (caret !== this.immediateState.caret || popupHidden)) {
318
+ this.immediateState.prevCaret = this.immediateState.caret;
319
+ this.immediateState.caret = caret;
320
+ this.scrollInput();
321
+ if (this.immediateState.query.length > 0) {
322
+ var _this$requestData2;
323
+ (_this$requestData2 = this.requestData) === null || _this$requestData2 === void 0 || _this$requestData2.call(this);
340
324
  }
341
325
  }
342
- if (_this.props.autoOpen !== 'force' && _this.immediateState.query.length < 1) {
343
- _this.setState({
326
+ if (this.props.autoOpen !== 'force' && this.immediateState.query.length < 1) {
327
+ this.setState({
344
328
  showPopup: false
345
329
  });
346
330
  }
347
331
  });
348
- _defineProperty(_this, "handleStyleRangesResponse", function (_ref) {
349
- _ref.suggestions;
350
- var restProps = _objectWithoutProperties(_ref, _excluded);
351
- return _this.handleResponse(restProps);
332
+ _defineProperty(this, "handleStyleRangesResponse", _ref3 => {
333
+ let restProps = _objectWithoutProperties(_ref3, _excluded);
334
+ return this.handleResponse(restProps);
352
335
  });
353
- _defineProperty(_this, "handleResponse", function (_ref2) {
354
- var _ref2$query = _ref2.query,
355
- query = _ref2$query === void 0 ? '' : _ref2$query,
356
- _ref2$caret = _ref2.caret,
357
- caret = _ref2$caret === void 0 ? 0 : _ref2$caret,
358
- styleRanges = _ref2.styleRanges,
359
- _ref2$suggestions = _ref2.suggestions,
360
- suggestions = _ref2$suggestions === void 0 ? [] : _ref2$suggestions;
361
- var afterCompletion = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
362
- return new Promise(function (resolve, reject) {
336
+ _defineProperty(this, "handleResponse", function (_ref4) {
337
+ let {
338
+ query = '',
339
+ caret = 0,
340
+ styleRanges,
341
+ suggestions = []
342
+ } = _ref4;
343
+ let afterCompletion = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
344
+ return new Promise((resolve, reject) => {
363
345
  if (query === _this.getQuery() && (caret === _this.immediateState.caret || _this.immediateState.caret === undefined)) {
364
346
  var _this$caret7;
365
347
  // Do not setState on unmounted component
366
348
  if (!_this.node) {
367
349
  return;
368
350
  }
369
- var state = {
351
+ const state = {
370
352
  dirty: _this.immediateState.dirty,
371
353
  loading: false,
372
354
  placeholderEnabled: !query,
@@ -376,7 +358,7 @@ var QueryAssist = /*#__PURE__*/function (_Component) {
376
358
  };
377
359
  _this.immediateState.suggestionsQuery = query;
378
360
  // Do not update deep equal styleRanges to simplify shouldComponentUpdate check
379
- if (!deepEqual(_this.state.styleRanges, styleRanges)) {
361
+ if (!dequal(_this.state.styleRanges, styleRanges)) {
380
362
  state.styleRanges = styleRanges;
381
363
  }
382
364
  _this.immediateState.selection = (_this$caret7 = _this.caret) === null || _this$caret7 === void 0 ? void 0 : _this$caret7.getPosition({
@@ -388,29 +370,29 @@ var QueryAssist = /*#__PURE__*/function (_Component) {
388
370
  }
389
371
  });
390
372
  });
391
- _defineProperty(_this, "handleApply", function () {
392
- _this.closePopup();
393
- _this.immediateState.dirty = false;
373
+ _defineProperty(this, "handleApply", () => {
374
+ this.closePopup();
375
+ this.immediateState.dirty = false;
394
376
  // Only set dirty to false when query is saved already
395
- if (_this.immediateState.query === _this.state.query) {
396
- _this.setState({
377
+ if (this.immediateState.query === this.state.query) {
378
+ this.setState({
397
379
  dirty: false
398
380
  });
399
381
  }
400
- return _this.props.onApply(_this.immediateState);
382
+ return this.props.onApply(this.immediateState);
401
383
  });
402
- _defineProperty(_this, "handleComplete", function (data, replace) {
403
- var _suggestion$caret, _suggestion$caret2, _this$requestData3, _this4;
384
+ _defineProperty(this, "handleComplete", (data, replace) => {
385
+ var _suggestion$caret, _suggestion$caret2, _this$requestData3;
404
386
  if (!data || !data.data) {
405
- _this.handleApply();
387
+ this.handleApply();
406
388
  return;
407
389
  }
408
- var query = _this.getQuery();
409
- var currentCaret = _this.immediateState.caret;
410
- var suggestion = data.data;
411
- var prefix = suggestion.prefix || '';
412
- var suffix = suggestion.suffix || '';
413
- var state = {
390
+ const query = this.getQuery();
391
+ const currentCaret = this.immediateState.caret;
392
+ const suggestion = data.data;
393
+ const prefix = suggestion.prefix || '';
394
+ const suffix = suggestion.suffix || '';
395
+ const state = {
414
396
  prevCaret: currentCaret,
415
397
  caret: (_suggestion$caret = suggestion.caret) !== null && _suggestion$caret !== void 0 ? _suggestion$caret : 0,
416
398
  selection: (_suggestion$caret2 = suggestion.caret) !== null && _suggestion$caret2 !== void 0 ? _suggestion$caret2 : 0,
@@ -418,683 +400,538 @@ var QueryAssist = /*#__PURE__*/function (_Component) {
418
400
  };
419
401
  if (typeof replace === 'boolean' && replace) {
420
402
  var _suggestion$completio;
421
- state.query += _this.immediateState.query.substr((_suggestion$completio = suggestion.completionEnd) !== null && _suggestion$completio !== void 0 ? _suggestion$completio : 0);
403
+ state.query += this.immediateState.query.substr((_suggestion$completio = suggestion.completionEnd) !== null && _suggestion$completio !== void 0 ? _suggestion$completio : 0);
422
404
  } else {
423
- state.query += _this.immediateState.query.substr(_this.immediateState.caret);
405
+ state.query += this.immediateState.query.substr(this.immediateState.caret);
424
406
  }
425
- _this.props.onChange(state);
426
- _this.props.onApplySuggestion(data.data, state);
427
- var focusState = {
407
+ this.props.onChange(state);
408
+ this.props.onApplySuggestion(data.data, state);
409
+ const focusState = {
428
410
  focus: true
429
411
  };
430
- _this.props.onFocusChange(focusState);
431
- if (state.query !== _this.immediateState.query) {
432
- _this.setState({
412
+ this.props.onFocusChange(focusState);
413
+ if (state.query !== this.immediateState.query) {
414
+ this.setState({
433
415
  placeholderEnabled: !state.query,
434
416
  query: state.query
435
417
  });
436
418
  }
437
- _this.immediateState = Object.assign(state, focusState);
438
- if (_this.immediateState.caret !== currentCaret) {
439
- _this.setCaretPosition();
419
+ this.immediateState = Object.assign(state, focusState);
420
+ if (this.immediateState.caret !== currentCaret) {
421
+ this.setCaretPosition();
440
422
  }
441
- _this.closePopup();
442
- (_this$requestData3 = (_this4 = _this).requestData) === null || _this$requestData3 === void 0 || _this$requestData3.call(_this4, true);
423
+ this.closePopup();
424
+ (_this$requestData3 = this.requestData) === null || _this$requestData3 === void 0 || _this$requestData3.call(this, true);
443
425
  });
444
- _defineProperty(_this, "requestStyleRanges", function () {
445
- var _this$immediateState = _this.immediateState,
446
- query = _this$immediateState.query,
447
- caret = _this$immediateState.caret;
426
+ _defineProperty(this, "requestStyleRanges", () => {
427
+ const {
428
+ query,
429
+ caret
430
+ } = this.immediateState;
448
431
  if (!query) {
449
432
  return Promise.reject(new Error('Query is empty'));
450
433
  }
451
- return _this.sendRequest({
434
+ return this.sendRequest({
452
435
  query,
453
436
  caret,
454
437
  omitSuggestions: true
455
- }).then(_this.handleStyleRangesResponse).catch(noop);
438
+ }).then(this.handleStyleRangesResponse).catch(noop);
456
439
  });
457
- _defineProperty(_this, "requestHandler", function () {
458
- var afterCompletion = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
440
+ _defineProperty(this, "requestHandler", function () {
441
+ let afterCompletion = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
459
442
  if (_this.props.disabled) {
460
443
  return Promise.reject(new Error('QueryAssist(@jetbrains/ring-ui): null exception'));
461
444
  }
462
- var _this$immediateState2 = _this.immediateState,
463
- query = _this$immediateState2.query,
464
- caret = _this$immediateState2.caret;
445
+ const {
446
+ query,
447
+ caret
448
+ } = _this.immediateState;
465
449
  return _this.sendRequest({
466
450
  query,
467
451
  caret
468
- }).then(function (data) {
469
- return _this.handleResponse(data, afterCompletion);
470
- }).catch(noop);
452
+ }).then(data => _this.handleResponse(data, afterCompletion)).catch(noop);
471
453
  });
472
- _defineProperty(_this, "handleCtrlSpace", function (e) {
454
+ _defineProperty(this, "handleCtrlSpace", e => {
473
455
  preventDefault(e);
474
- if (!_this.state.showPopup) {
475
- var _this$requestData4, _this5;
476
- (_this$requestData4 = (_this5 = _this).requestData) === null || _this$requestData4 === void 0 || _this$requestData4.call(_this5);
456
+ if (!this.state.showPopup) {
457
+ var _this$requestData4;
458
+ (_this$requestData4 = this.requestData) === null || _this$requestData4 === void 0 || _this$requestData4.call(this);
477
459
  }
478
460
  });
479
- _defineProperty(_this, "trackPopupMouseState", function (e) {
480
- _this.mouseIsDownOnPopup = e.type === 'mousedown';
461
+ _defineProperty(this, "trackPopupMouseState", e => {
462
+ this.mouseIsDownOnPopup = e.type === 'mousedown';
481
463
  });
482
- _defineProperty(_this, "trackCompositionState", function (e) {
483
- _this.isComposing = e.type !== 'compositionend';
464
+ _defineProperty(this, "trackCompositionState", e => {
465
+ this.isComposing = e.type !== 'compositionend';
484
466
  });
485
- _defineProperty(_this, "closePopup", function () {
486
- if (_this.node) {
487
- _this.setState({
467
+ _defineProperty(this, "closePopup", () => {
468
+ if (this.node) {
469
+ this.setState({
488
470
  showPopup: false
489
471
  });
490
472
  }
491
473
  });
492
- _defineProperty(_this, "clearQuery", function () {
493
- var state = {
474
+ _defineProperty(this, "clearQuery", () => {
475
+ const state = {
494
476
  dirty: false,
495
477
  caret: 0,
496
478
  query: '',
497
479
  focus: true
498
480
  };
499
- _this.props.onChange(state);
500
- _this.props.onClear();
501
- _this.immediateState = state;
502
- _this.setState({
481
+ this.props.onChange(state);
482
+ this.props.onClear();
483
+ this.immediateState = state;
484
+ this.setState({
503
485
  dirty: false,
504
486
  query: '',
505
487
  placeholderEnabled: true,
506
488
  loading: false
507
489
  });
508
490
  });
509
- _defineProperty(_this, "input", void 0);
510
- _defineProperty(_this, "caret", void 0);
511
- _defineProperty(_this, "inputRef", function (node) {
491
+ _defineProperty(this, "input", void 0);
492
+ _defineProperty(this, "caret", void 0);
493
+ _defineProperty(this, "inputRef", node => {
512
494
  if (!node) {
513
495
  return;
514
496
  }
515
- _this.input = node;
516
- _this.caret = new Caret(_this.input);
497
+ this.input = node;
498
+ this.caret = new Caret(this.input);
517
499
  });
518
- _defineProperty(_this, "_popup", void 0);
519
- _defineProperty(_this, "popupRef", function (node) {
520
- _this._popup = node;
500
+ _defineProperty(this, "_popup", void 0);
501
+ _defineProperty(this, "popupRef", node => {
502
+ this._popup = node;
521
503
  });
522
- _defineProperty(_this, "placeholder", void 0);
523
- _defineProperty(_this, "placeholderRef", function (node) {
524
- _this.placeholder = node;
504
+ _defineProperty(this, "placeholder", void 0);
505
+ _defineProperty(this, "placeholderRef", node => {
506
+ this.placeholder = node;
525
507
  });
526
- _defineProperty(_this, "glass", void 0);
527
- _defineProperty(_this, "glassRef", function (node) {
528
- _this.glass = node;
508
+ _defineProperty(this, "glass", void 0);
509
+ _defineProperty(this, "glassRef", node => {
510
+ this.glass = node;
529
511
  });
530
- _defineProperty(_this, "loader", void 0);
531
- _defineProperty(_this, "loaderRef", function (node) {
532
- _this.loader = node;
512
+ _defineProperty(this, "loader", void 0);
513
+ _defineProperty(this, "loaderRef", node => {
514
+ this.loader = node;
533
515
  });
534
- _defineProperty(_this, "clear", void 0);
535
- _defineProperty(_this, "clearRef", function (node) {
536
- _this.clear = node;
516
+ _defineProperty(this, "clear", void 0);
517
+ _defineProperty(this, "clearRef", node => {
518
+ this.clear = node;
537
519
  });
538
- _defineProperty(_this, "shortcutsScope", getUID('ring-query-assist-'));
539
- _defineProperty(_this, "shortcutsMap", {
520
+ _defineProperty(this, "shortcutsScope", getUID('ring-query-assist-'));
521
+ _defineProperty(this, "shortcutsMap", {
540
522
  del: noop,
541
- enter: function enter() {
542
- return _this.handleComplete();
543
- },
544
- 'command+enter': function commandEnter() {
545
- return _this.handleComplete();
546
- },
547
- 'ctrl+enter': function ctrlEnter() {
548
- return _this.handleComplete();
549
- },
550
- 'ctrl+space': _this.handleCtrlSpace,
551
- tab: _this.handleTab,
552
- 'meta+z': _this.undo,
523
+ enter: () => this.handleComplete(),
524
+ 'command+enter': () => this.handleComplete(),
525
+ 'ctrl+enter': () => this.handleComplete(),
526
+ 'ctrl+space': this.handleCtrlSpace,
527
+ tab: this.handleTab,
528
+ 'meta+z': this.undo,
553
529
  right: noop,
554
530
  left: noop,
555
531
  space: noop,
556
532
  home: noop,
557
533
  end: noop
558
534
  });
559
- _defineProperty(_this, "listShortcutsMap", {
535
+ _defineProperty(this, "listShortcutsMap", {
560
536
  home: noop,
561
537
  end: noop
562
538
  });
563
- var _query = _props.query || '';
564
- _this.immediateState = {
539
+ const _query = _props.query || '';
540
+ this.immediateState = {
565
541
  query: _query,
566
542
  caret: typeof _props.caret === 'number' && Number.isFinite(_props.caret) ? _props.caret : _query.length,
567
543
  focus: Boolean(_props.autoOpen || _props.focus)
568
544
  };
569
- return _this;
570
545
  }
571
- _inherits(QueryAssist, _Component);
572
- return _createClass(QueryAssist, [{
573
- key: "componentDidMount",
574
- value: function componentDidMount() {
575
- var query = this.props.query || '';
576
- this.immediateState = {
577
- query,
578
- caret: typeof this.props.caret === 'number' && Number.isFinite(this.props.caret) ? this.props.caret : query.length,
579
- focus: Boolean(this.props.autoOpen || this.props.focus)
580
- };
581
- this.setupRequestHandler(this.props.delay);
582
- if (this.props.autoOpen === 'force' || this.props.autoOpen && query.length > 0) {
583
- this.requestHandler().catch(noop);
584
- } else {
585
- this.requestStyleRanges().catch(noop);
586
- }
587
- this.setCaretPosition();
588
- this._pushHistory(this.state);
589
- }
590
- }, {
591
- key: "shouldComponentUpdate",
592
- value: function shouldComponentUpdate(props, state) {
593
- return state.query !== this.state.query || state.dirty !== this.state.dirty || state.loading !== this.state.loading || state.showPopup !== this.state.showPopup || state.suggestions !== this.state.suggestions || state.styleRanges !== this.state.styleRanges || state.placeholderEnabled !== this.state.placeholderEnabled || props.placeholder !== this.props.placeholder || props.disabled !== this.props.disabled || props.clear !== this.props.clear || props.focus !== this.props.focus || props.actions !== this.props.actions || props.loader !== this.props.loader || props.glass !== this.props.glass;
546
+ componentDidMount() {
547
+ const query = this.props.query || '';
548
+ this.immediateState = {
549
+ query,
550
+ caret: typeof this.props.caret === 'number' && Number.isFinite(this.props.caret) ? this.props.caret : query.length,
551
+ focus: Boolean(this.props.autoOpen || this.props.focus)
552
+ };
553
+ this.setupRequestHandler(this.props.delay);
554
+ if (this.props.autoOpen === 'force' || this.props.autoOpen && query.length > 0) {
555
+ this.requestHandler().catch(noop);
556
+ } else {
557
+ this.requestStyleRanges().catch(noop);
594
558
  }
595
- }, {
596
- key: "componentDidUpdate",
597
- value: function componentDidUpdate(prevProps) {
598
- var _this$props = this.props,
599
- caret = _this$props.caret,
600
- delay = _this$props.delay,
601
- query = _this$props.query;
602
- var queryChanged = query !== prevProps.query;
603
- this.updateFocus(prevProps);
604
- this.setupRequestHandler(delay);
605
- var shouldSetCaret = typeof caret === 'number' && caret !== prevProps.caret;
606
- if (shouldSetCaret) {
607
- this.immediateState.prevCaret = prevProps.caret;
608
- this.immediateState.caret = caret;
609
- }
610
- if (typeof query === 'string' && queryChanged && query !== this.immediateState.query) {
611
- this.immediateState.query = query;
612
- if (query && (this.props.autoOpen === 'force' || prevProps.autoOpen && query.length > 0)) {
613
- var _this$requestData5;
614
- (_this$requestData5 = this.requestData) === null || _this$requestData5 === void 0 || _this$requestData5.call(this);
615
- } else if (query) {
616
- this.requestStyleRanges();
617
- }
618
- }
559
+ this.setCaretPosition();
560
+ this._pushHistory(this.state);
561
+ }
562
+ shouldComponentUpdate(props, state) {
563
+ return state.query !== this.state.query || state.dirty !== this.state.dirty || state.loading !== this.state.loading || state.showPopup !== this.state.showPopup || state.suggestions !== this.state.suggestions || state.styleRanges !== this.state.styleRanges || state.placeholderEnabled !== this.state.placeholderEnabled || props.placeholder !== this.props.placeholder || props.disabled !== this.props.disabled || props.clear !== this.props.clear || props.focus !== this.props.focus || props.actions !== this.props.actions || props.loader !== this.props.loader || props.glass !== this.props.glass;
564
+ }
565
+ componentDidUpdate(prevProps) {
566
+ const {
567
+ caret,
568
+ delay,
569
+ query
570
+ } = this.props;
571
+ const queryChanged = query !== prevProps.query;
572
+ this.updateFocus(prevProps);
573
+ this.setupRequestHandler(delay);
574
+ const shouldSetCaret = typeof caret === 'number' && caret !== prevProps.caret;
575
+ if (shouldSetCaret) {
576
+ this.immediateState.prevCaret = prevProps.caret;
577
+ this.immediateState.caret = caret;
619
578
  }
620
- }, {
621
- key: "updateFocus",
622
- value: function updateFocus(_ref3) {
623
- var focus = _ref3.focus,
624
- caret = _ref3.caret;
625
- var isCaretChanged = caret !== this.props.caret;
626
- var isFocusChanged = focus !== this.props.focus;
627
- if (isFocusChanged || isCaretChanged) {
628
- var focusValue = isFocusChanged ? this.props.focus : true;
629
- this.setFocus(focusValue);
579
+ if (typeof query === 'string' && queryChanged && query !== this.immediateState.query) {
580
+ this.immediateState.query = query;
581
+ if (query && (this.props.autoOpen === 'force' || prevProps.autoOpen && query.length > 0)) {
582
+ var _this$requestData5;
583
+ (_this$requestData5 = this.requestData) === null || _this$requestData5 === void 0 || _this$requestData5.call(this);
584
+ } else if (query) {
585
+ this.requestStyleRanges();
630
586
  }
631
587
  }
632
- }, {
633
- key: "scrollInput",
634
- value: function scrollInput() {
635
- var _this$caret8, _this$input, _this$input2, _this$input3;
636
- var caretOffset = (_this$caret8 = this.caret) === null || _this$caret8 === void 0 ? void 0 : _this$caret8.getOffset();
637
- if (((_this$input = this.input) === null || _this$input === void 0 ? void 0 : _this$input.clientWidth) !== ((_this$input2 = this.input) === null || _this$input2 === void 0 ? void 0 : _this$input2.scrollWidth) && caretOffset != null && ((_this$input3 = this.input) === null || _this$input3 === void 0 ? void 0 : _this$input3.clientWidth) != null && caretOffset > this.input.clientWidth) {
638
- this.input.scrollLeft += caretOffset;
639
- }
588
+ }
589
+ updateFocus(_ref5) {
590
+ let {
591
+ focus,
592
+ caret
593
+ } = _ref5;
594
+ const isCaretChanged = caret !== this.props.caret;
595
+ const isFocusChanged = focus !== this.props.focus;
596
+ if (isFocusChanged || isCaretChanged) {
597
+ const focusValue = isFocusChanged ? this.props.focus : true;
598
+ this.setFocus(focusValue);
640
599
  }
641
- }, {
642
- key: "getQuery",
643
- value: function getQuery() {
644
- var _this$input$textConte, _this$input4;
645
- return (_this$input$textConte = (_this$input4 = this.input) === null || _this$input4 === void 0 || (_this$input4 = _this$input4.textContent) === null || _this$input4 === void 0 ? void 0 : _this$input4.replace(/\s/g, ' ')) !== null && _this$input$textConte !== void 0 ? _this$input$textConte : '';
600
+ }
601
+ scrollInput() {
602
+ var _this$caret8, _this$input, _this$input2, _this$input3;
603
+ const caretOffset = (_this$caret8 = this.caret) === null || _this$caret8 === void 0 ? void 0 : _this$caret8.getOffset();
604
+ if (((_this$input = this.input) === null || _this$input === void 0 ? void 0 : _this$input.clientWidth) !== ((_this$input2 = this.input) === null || _this$input2 === void 0 ? void 0 : _this$input2.scrollWidth) && caretOffset != null && ((_this$input3 = this.input) === null || _this$input3 === void 0 ? void 0 : _this$input3.clientWidth) != null && caretOffset > this.input.clientWidth) {
605
+ this.input.scrollLeft += caretOffset;
646
606
  }
647
- }, {
648
- key: "isRenderingGlassOrLoader",
649
- value: function isRenderingGlassOrLoader() {
650
- var renderLoader = this.props.loader !== false && this.state.loading;
651
- return this.props.glass || renderLoader;
607
+ }
608
+ getQuery() {
609
+ var _this$input$textConte, _this$input4;
610
+ return (_this$input$textConte = (_this$input4 = this.input) === null || _this$input4 === void 0 || (_this$input4 = _this$input4.textContent) === null || _this$input4 === void 0 ? void 0 : _this$input4.replace(/\s/g, ' ')) !== null && _this$input$textConte !== void 0 ? _this$input$textConte : '';
611
+ }
612
+ isRenderingGlassOrLoader() {
613
+ const renderLoader = this.props.loader !== false && this.state.loading;
614
+ return this.props.glass || renderLoader;
615
+ }
616
+ _pushHistory(state) {
617
+ var _this$historyStack$;
618
+ const queryIsSet = 'query' in state;
619
+ const queryIsSame = ((_this$historyStack$ = this.historyStack[0]) === null || _this$historyStack$ === void 0 ? void 0 : _this$historyStack$.query) === state.query;
620
+ if (queryIsSet && !queryIsSame) {
621
+ var _this$caret$getPositi, _this$caret9;
622
+ this.historyStack.unshift({
623
+ query: state.query,
624
+ caret: (_this$caret$getPositi = (_this$caret9 = this.caret) === null || _this$caret9 === void 0 ? void 0 : _this$caret9.getPosition({
625
+ avoidFocus: true
626
+ })) !== null && _this$caret$getPositi !== void 0 ? _this$caret$getPositi : -1
627
+ });
652
628
  }
653
- }, {
654
- key: "_pushHistory",
655
- value: function _pushHistory(state) {
656
- var _this$historyStack$;
657
- var queryIsSet = 'query' in state;
658
- var queryIsSame = ((_this$historyStack$ = this.historyStack[0]) === null || _this$historyStack$ === void 0 ? void 0 : _this$historyStack$.query) === state.query;
659
- if (queryIsSet && !queryIsSame) {
660
- var _this$caret$getPositi, _this$caret9;
661
- this.historyStack.unshift({
662
- query: state.query,
663
- caret: (_this$caret$getPositi = (_this$caret9 = this.caret) === null || _this$caret9 === void 0 ? void 0 : _this$caret9.getPosition({
664
- avoidFocus: true
665
- })) !== null && _this$caret$getPositi !== void 0 ? _this$caret$getPositi : -1
629
+ }
630
+ sendRequest(params) {
631
+ const value = this.props.dataSource(params);
632
+ const dataPromise = Promise.resolve(value);
633
+ const CLOSE_POPUP_TIMEOUT = 500;
634
+ // Close popup after timeout between long requests
635
+ const timeout = window.setTimeout(() => {
636
+ if (this.node) {
637
+ this.setState({
638
+ loading: true
666
639
  });
667
640
  }
668
- }
669
- }, {
670
- key: "sendRequest",
671
- value: function sendRequest(params) {
672
- var _this6 = this;
673
- var value = this.props.dataSource(params);
674
- var dataPromise = Promise.resolve(value);
675
- var CLOSE_POPUP_TIMEOUT = 500;
676
- // Close popup after timeout between long requests
677
- var timeout = window.setTimeout(function () {
678
- if (_this6.node) {
679
- _this6.setState({
680
- loading: true
681
- });
682
- }
683
- if (params.query === _this6.immediateState.query) {
684
- _this6.closePopup();
685
- }
686
- }, CLOSE_POPUP_TIMEOUT);
687
- dataPromise.then(function () {
688
- return window.clearTimeout(timeout);
689
- }).catch(function () {
690
- window.clearTimeout(timeout);
691
- _this6.setState({
692
- loading: false
693
- });
641
+ if (params.query === this.immediateState.query) {
642
+ this.closePopup();
643
+ }
644
+ }, CLOSE_POPUP_TIMEOUT);
645
+ dataPromise.then(() => window.clearTimeout(timeout)).catch(() => {
646
+ window.clearTimeout(timeout);
647
+ this.setState({
648
+ loading: false
694
649
  });
695
- return dataPromise;
650
+ });
651
+ return dataPromise;
652
+ }
653
+ getPopupOffset(suggestions) {
654
+ const ICON_SPACING = 12;
655
+ const minOffset = this.isRenderingGlassOrLoader() ? ICON_SPACING : 0;
656
+ if (!this.input) {
657
+ return minOffset;
696
658
  }
697
- }, {
698
- key: "getPopupOffset",
699
- value: function getPopupOffset(suggestions) {
700
- var ICON_SPACING = 12;
701
- var minOffset = this.isRenderingGlassOrLoader() ? ICON_SPACING : 0;
702
- if (!this.input) {
659
+ // First suggestion should be enough?
660
+ const suggestion = suggestions && suggestions[0];
661
+ // Check if suggestion begins not from the end
662
+ const completionStart = suggestion && suggestion.completionStart !== suggestion.completionEnd && suggestion.completionStart;
663
+ const inputChildren = this.input.firstChild instanceof Element && this.input.firstChild.children;
664
+ const completionStartNode = inputChildren && typeof completionStart === 'number' && inputChildren[Math.min(completionStart, inputChildren.length - 1)];
665
+ let offset = completionStartNode && getRect(completionStartNode).right - getRect(this.input).left;
666
+ if (!offset) {
667
+ var _this$caret$getOffset, _this$caret10;
668
+ const caret = (_this$caret$getOffset = (_this$caret10 = this.caret) === null || _this$caret10 === void 0 ? void 0 : _this$caret10.getOffset()) !== null && _this$caret$getOffset !== void 0 ? _this$caret$getOffset : 0;
669
+ // Do not compensate caret in the beginning of field
670
+ if (caret === 0) {
703
671
  return minOffset;
672
+ } else {
673
+ offset = caret;
704
674
  }
705
- // First suggestion should be enough?
706
- var suggestion = suggestions && suggestions[0];
707
- // Check if suggestion begins not from the end
708
- var completionStart = suggestion && suggestion.completionStart !== suggestion.completionEnd && suggestion.completionStart;
709
- var inputChildren = this.input.firstChild instanceof Element && this.input.firstChild.children;
710
- var completionStartNode = inputChildren && typeof completionStart === 'number' && inputChildren[Math.min(completionStart, inputChildren.length - 1)];
711
- var offset = completionStartNode && getRect(completionStartNode).right - getRect(this.input).left;
712
- if (!offset) {
713
- var _this$caret$getOffset, _this$caret10;
714
- var caret = (_this$caret$getOffset = (_this$caret10 = this.caret) === null || _this$caret10 === void 0 ? void 0 : _this$caret10.getOffset()) !== null && _this$caret$getOffset !== void 0 ? _this$caret$getOffset : 0;
715
- // Do not compensate caret in the beginning of field
716
- if (caret === 0) {
717
- return minOffset;
718
- } else {
719
- offset = caret;
720
- }
721
- }
722
- var result = offset - POPUP_COMPENSATION;
723
- return result < minOffset ? minOffset : result;
724
675
  }
725
- }, {
726
- key: "blurInput",
727
- value: function blurInput() {
728
- this.immediateState.selection = null;
729
- if (!this.props.focus) {
730
- var _this$caret11;
731
- (_this$caret11 = this.caret) === null || _this$caret11 === void 0 || _this$caret11.target.blur();
732
- }
676
+ const result = offset - POPUP_COMPENSATION;
677
+ return result < minOffset ? minOffset : result;
678
+ }
679
+ blurInput() {
680
+ this.immediateState.selection = null;
681
+ if (!this.props.focus) {
682
+ var _this$caret11;
683
+ (_this$caret11 = this.caret) === null || _this$caret11 === void 0 || _this$caret11.target.blur();
733
684
  }
734
- /**
735
- * Optionally setup data request delay. For each component create a separate
736
- * instance of the delayed function. This may help reduce the load on the server
737
- * when the user quickly inputs data.
738
- */
739
- }, {
740
- key: "setupRequestHandler",
741
- value: function setupRequestHandler(delay) {
742
- var needDelay = typeof delay === 'number';
743
- var hasDelay = this.requestData !== this.requestHandler;
744
- if (!this.requestData || hasDelay !== needDelay) {
745
- if (needDelay) {
746
- this.requestData = debounce(this.requestHandler, delay);
747
- } else {
748
- this.requestData = this.requestHandler;
749
- }
685
+ }
686
+ /**
687
+ * Optionally setup data request delay. For each component create a separate
688
+ * instance of the delayed function. This may help reduce the load on the server
689
+ * when the user quickly inputs data.
690
+ */
691
+ setupRequestHandler(delay) {
692
+ const needDelay = typeof delay === 'number';
693
+ const hasDelay = this.requestData !== this.requestHandler;
694
+ if (!this.requestData || hasDelay !== needDelay) {
695
+ if (needDelay) {
696
+ this.requestData = debounce(this.requestHandler, delay);
697
+ } else {
698
+ this.requestData = this.requestHandler;
750
699
  }
751
700
  }
752
- }, {
753
- key: "_renderSuggestion",
754
- value: function _renderSuggestion(suggestion) {
755
- var ITEM = PopupMenu.ListProps.Type.ITEM;
756
- var description = suggestion.description,
757
- icon = suggestion.icon,
758
- group = suggestion.group;
759
- var key = QueryAssistSuggestions.createKey(suggestion);
760
- var label = QueryAssistSuggestions.renderLabel(suggestion);
761
- return {
762
- key,
763
- icon,
764
- label,
765
- description,
766
- group,
767
- rgItemType: ITEM,
768
- data: suggestion
769
- };
770
- }
771
- }, {
772
- key: "renderSuggestions",
773
- value: function renderSuggestions() {
774
- var suggestions = this.state.suggestions;
775
- if (!suggestions || !suggestions.length) {
776
- return [];
777
- }
778
- return QueryAssistSuggestions.renderList(suggestions, this._renderSuggestion);
701
+ }
702
+ _renderSuggestion(suggestion) {
703
+ const {
704
+ ITEM
705
+ } = PopupMenu.ListProps.Type;
706
+ const {
707
+ description,
708
+ icon,
709
+ group
710
+ } = suggestion;
711
+ const key = QueryAssistSuggestions.createKey(suggestion);
712
+ const label = QueryAssistSuggestions.renderLabel(suggestion);
713
+ return {
714
+ key,
715
+ icon,
716
+ label,
717
+ description,
718
+ group,
719
+ rgItemType: ITEM,
720
+ data: suggestion
721
+ };
722
+ }
723
+ renderSuggestions() {
724
+ const {
725
+ suggestions
726
+ } = this.state;
727
+ if (!suggestions || !suggestions.length) {
728
+ return [];
779
729
  }
780
- }, {
781
- key: "renderQuery",
782
- value: function renderQuery() {
783
- var _this$state = this.state,
784
- dirty = _this$state.dirty,
785
- styleRanges = _this$state.styleRanges,
786
- query = _this$state.query;
787
- var classes = [];
788
- var LETTER_CLASS = 'letter';
789
- var LETTER_DEFAULT_CLASS = modules_da7ab055.letterDefault;
790
- if (styleRanges && styleRanges.length) {
791
- styleRanges.forEach(function (item, index) {
792
- if (dirty && index === styleRanges.length - 1 && item.style === 'text') {
793
- return;
794
- }
795
- var styleName = "".concat(LETTER_CLASS, "-").concat(item.style.replace('_', '-'));
796
- for (var i = item.start; i < item.start + item.length; i++) {
797
- classes[i] = modules_da7ab055[styleName];
798
- }
799
- });
800
- }
801
- return query && Array.from(query).map(function (letter, index, letters) {
802
- var className = classNames(modules_da7ab055.letter, classes[index] || LETTER_DEFAULT_CLASS);
803
- var dataTest = letters.length - 1 === index ? 'ring-query-assist-last-letter' : null;
804
- // \u00a0 === &nbsp;
805
- return /*#__PURE__*/jsx("span", {
806
- className: className,
807
- "data-test": dataTest,
808
- children: letter === ' ' ? '\u00a0' : letter
809
- }, index + letter);
730
+ return QueryAssistSuggestions.renderList(suggestions, this._renderSuggestion);
731
+ }
732
+ renderQuery() {
733
+ const {
734
+ dirty,
735
+ styleRanges,
736
+ query
737
+ } = this.state;
738
+ const classes = [];
739
+ const LETTER_CLASS = 'letter';
740
+ const LETTER_DEFAULT_CLASS = modules_da7ab055.letterDefault;
741
+ if (styleRanges && styleRanges.length) {
742
+ styleRanges.forEach((item, index) => {
743
+ if (dirty && index === styleRanges.length - 1 && item.style === 'text') {
744
+ return;
745
+ }
746
+ const styleName = "".concat(LETTER_CLASS, "-").concat(item.style.replace('_', '-'));
747
+ for (let i = item.start; i < item.start + item.length; i++) {
748
+ classes[i] = modules_da7ab055[styleName];
749
+ }
810
750
  });
811
751
  }
812
- }, {
813
- key: "setFocus",
814
- value: function setFocus(focus) {
815
- this.setState({
816
- shortcuts: !!focus
752
+ return query && Array.from(query).map((letter, index, letters) => {
753
+ const className = classNames(modules_da7ab055.letter, classes[index] || LETTER_DEFAULT_CLASS);
754
+ const dataTest = letters.length - 1 === index ? 'ring-query-assist-last-letter' : null;
755
+ // \u00a0 === &nbsp;
756
+ return /*#__PURE__*/jsx("span", {
757
+ className: className,
758
+ "data-test": dataTest,
759
+ children: letter === ' ' ? '\u00a0' : letter
760
+ }, index + letter);
761
+ });
762
+ }
763
+ setFocus(focus) {
764
+ this.setState({
765
+ shortcuts: !!focus
766
+ });
767
+ const isComponentFocused = Boolean(this.immediateState.focus);
768
+ if (focus === false && isComponentFocused) {
769
+ this.immediateState.focus = focus;
770
+ this.blurInput();
771
+ } else if (focus === true && !isComponentFocused) {
772
+ this.immediateState.focus = focus;
773
+ this.setCaretPosition({
774
+ forceSetCaret: true
817
775
  });
818
- var isComponentFocused = Boolean(this.immediateState.focus);
819
- if (focus === false && isComponentFocused) {
820
- this.immediateState.focus = focus;
821
- this.blurInput();
822
- } else if (focus === true && !isComponentFocused) {
823
- this.immediateState.focus = focus;
824
- this.setCaretPosition({
825
- forceSetCaret: true
826
- });
827
- }
828
776
  }
829
- }, {
830
- key: "renderActions",
831
- value: function renderActions() {
832
- var _this7 = this;
833
- var actions = _toConsumableArray(this.props.actions || []);
834
- var renderClear = this.props.clear && !!this.state.query;
835
- if (renderClear) {
836
- actions.push( /*#__PURE__*/jsx(I18nContext.Consumer, {
837
- children: function children(_ref4) {
838
- var _this7$props$translat, _this7$props$translat2;
839
- var translate = _ref4.translate;
840
- return /*#__PURE__*/jsx(Button, {
841
- icon: closeIcon,
842
- className: modules_da7ab055.clear,
843
- title: (_this7$props$translat = (_this7$props$translat2 = _this7.props.translations) === null || _this7$props$translat2 === void 0 ? void 0 : _this7$props$translat2.clearTitle) !== null && _this7$props$translat !== void 0 ? _this7$props$translat : translate('clearTitle'),
844
- ref: _this7.clearRef,
845
- onClick: _this7.clearQuery,
846
- "data-test": "query-assist-clear-icon"
847
- });
848
- }
849
- }, 'clearAction'));
850
- }
851
- return actions;
777
+ }
778
+ renderActions() {
779
+ const actions = [...(this.props.actions || [])];
780
+ const renderClear = this.props.clear && !!this.state.query;
781
+ if (renderClear) {
782
+ actions.push(/*#__PURE__*/jsx(I18nContext.Consumer, {
783
+ children: _ref6 => {
784
+ var _this$props$translati, _this$props$translati2;
785
+ let {
786
+ translate
787
+ } = _ref6;
788
+ return /*#__PURE__*/jsx(Button, {
789
+ icon: closeIcon,
790
+ className: modules_da7ab055.clear,
791
+ title: (_this$props$translati = (_this$props$translati2 = this.props.translations) === null || _this$props$translati2 === void 0 ? void 0 : _this$props$translati2.clearTitle) !== null && _this$props$translati !== void 0 ? _this$props$translati : translate('clearTitle'),
792
+ ref: this.clearRef,
793
+ onClick: this.clearQuery,
794
+ "data-test": "query-assist-clear-icon"
795
+ });
796
+ }
797
+ }, 'clearAction'));
852
798
  }
853
- }, {
854
- key: "render",
855
- value: function render() {
856
- var _this8 = this;
857
- var _this$props2 = this.props,
858
- glass = _this$props2.glass,
859
- dataTest = _this$props2['data-test'],
860
- className = _this$props2.className,
861
- useCustomItemRender = _this$props2.useCustomItemRender,
862
- huge = _this$props2.huge,
863
- size = _this$props2.size,
864
- translations = _this$props2.translations;
865
- var renderPlaceholder = !!this.props.placeholder && this.state.placeholderEnabled;
866
- var renderLoader = this.props.loader !== false && this.state.loading;
867
- var renderGlass = glass && !renderLoader;
868
- var actions = this.renderActions();
869
- var containerClasses = classNames(className, modules_88cfaf40["size".concat(huge ? Size.FULL : size)], {
870
- [modules_da7ab055.queryAssist]: true,
871
- [modules_da7ab055.withIcon]: renderGlass && !huge || renderLoader,
872
- [modules_da7ab055.huge]: huge,
873
- [modules_da7ab055.queryAssistDisabled]: this.props.disabled
874
- });
875
- var inputClasses = classNames(this.props.inputClassName, {
876
- ["".concat(modules_da7ab055.input, " ring-js-shortcuts")]: true,
877
- [modules_da7ab055.inputGap]: actions.length || this.isRenderingGlassOrLoader() && !glass,
878
- [modules_da7ab055.inputGap2]: actions.length === 2,
879
- // TODO: replace with flex-box layout
880
- [modules_da7ab055.inputRevertOrder]: !glass || huge
881
- });
882
- var placeholderStyles = classNames({
883
- [modules_da7ab055.placeholder]: true,
884
- [modules_da7ab055.hugePlaceholder]: huge,
885
- [modules_da7ab055.withoutGlass]: !glass || !renderLoader && huge
886
- });
887
- return /*#__PURE__*/jsx(ControlsHeightContext.Provider, {
888
- value: ControlsHeight.M,
889
- children: /*#__PURE__*/jsx(I18nContext.Consumer, {
890
- children: function children(_ref5) {
891
- var _translations$searchT, _translations$searchT2, _translations$searchT3;
892
- var translate = _ref5.translate;
893
- return /*#__PURE__*/jsxs("div", {
894
- "data-test": joinDataTestAttributes('ring-query-assist', dataTest),
895
- className: containerClasses,
896
- role: "presentation",
897
- ref: _this8.nodeRef,
898
- children: [_this8.state.shortcuts && /*#__PURE__*/jsx(Shortcuts, {
899
- map: _this8.shortcutsMap,
900
- scope: _this8.shortcutsScope
901
- }), renderGlass && !huge && /*#__PURE__*/jsx(Icon, {
799
+ return actions;
800
+ }
801
+ render() {
802
+ const {
803
+ glass,
804
+ 'data-test': dataTest,
805
+ className,
806
+ useCustomItemRender,
807
+ huge,
808
+ size,
809
+ translations
810
+ } = this.props;
811
+ const renderPlaceholder = !!this.props.placeholder && this.state.placeholderEnabled;
812
+ const renderLoader = this.props.loader !== false && this.state.loading;
813
+ const renderGlass = glass && !renderLoader;
814
+ const actions = this.renderActions();
815
+ const containerClasses = classNames(className, modules_88cfaf40["size".concat(huge ? Size.FULL : size)], {
816
+ [modules_da7ab055.queryAssist]: true,
817
+ [modules_da7ab055.withIcon]: renderGlass && !huge || renderLoader,
818
+ [modules_da7ab055.huge]: huge,
819
+ [modules_da7ab055.queryAssistDisabled]: this.props.disabled
820
+ });
821
+ const inputClasses = classNames(this.props.inputClassName, {
822
+ ["".concat(modules_da7ab055.input, " ring-js-shortcuts")]: true,
823
+ [modules_da7ab055.inputGap]: actions.length || this.isRenderingGlassOrLoader() && !glass,
824
+ [modules_da7ab055.inputGap2]: actions.length === 2,
825
+ // TODO: replace with flex-box layout
826
+ [modules_da7ab055.inputRevertOrder]: !glass || huge
827
+ });
828
+ const placeholderStyles = classNames({
829
+ [modules_da7ab055.placeholder]: true,
830
+ [modules_da7ab055.hugePlaceholder]: huge,
831
+ [modules_da7ab055.withoutGlass]: !glass || !renderLoader && huge
832
+ });
833
+ return /*#__PURE__*/jsx(ControlsHeightContext.Provider, {
834
+ value: ControlsHeight.M,
835
+ children: /*#__PURE__*/jsx(I18nContext.Consumer, {
836
+ children: _ref7 => {
837
+ var _translations$searchT, _translations$searchT2, _translations$searchT3;
838
+ let {
839
+ translate
840
+ } = _ref7;
841
+ return /*#__PURE__*/jsxs("div", {
842
+ "data-test": joinDataTestAttributes('ring-query-assist', dataTest),
843
+ className: containerClasses,
844
+ role: "presentation",
845
+ ref: this.nodeRef,
846
+ children: [this.state.shortcuts && /*#__PURE__*/jsx(Shortcuts, {
847
+ map: this.shortcutsMap,
848
+ scope: this.shortcutsScope
849
+ }), renderGlass && !huge && /*#__PURE__*/jsx(Icon, {
850
+ glyph: searchIcon,
851
+ className: modules_da7ab055.icon,
852
+ title: (_translations$searchT = translations === null || translations === void 0 ? void 0 : translations.searchTitle) !== null && _translations$searchT !== void 0 ? _translations$searchT : translate('searchTitle'),
853
+ ref: this.glassRef,
854
+ "data-test": "query-assist-search-icon"
855
+ }), renderLoader && /*#__PURE__*/jsx("div", {
856
+ className: classNames(modules_da7ab055.icon, modules_da7ab055.loader, {
857
+ [modules_da7ab055.loaderOnTheRight]: !glass && !huge,
858
+ [modules_da7ab055.loaderActive]: renderLoader
859
+ }),
860
+ ref: this.loaderRef,
861
+ children: /*#__PURE__*/jsx(LoaderInline, {})
862
+ }), /*#__PURE__*/jsx(ContentEditable, {
863
+ "aria-label": (_translations$searchT2 = translations === null || translations === void 0 ? void 0 : translations.searchTitle) !== null && _translations$searchT2 !== void 0 ? _translations$searchT2 : translate('searchTitle'),
864
+ className: inputClasses,
865
+ "data-test": "ring-query-assist-input",
866
+ inputRef: this.inputRef,
867
+ disabled: this.props.disabled,
868
+ onComponentUpdate: () => this.setCaretPosition({
869
+ fromContentEditable: true
870
+ }),
871
+ onBlur: this.handleFocusChange,
872
+ onClick: this.handleCaretMove,
873
+ onCompositionStart: this.trackCompositionState,
874
+ onCompositionEnd: this.trackCompositionState,
875
+ onFocus: this.handleFocusChange,
876
+ onInput: this.handleInput // To support IE use the same method
877
+ ,
878
+ onKeyUp: this.handleInput // to handle input and key up
879
+ ,
880
+ onKeyDown: this.handleEnter,
881
+ onPaste: this.handlePaste,
882
+ spellCheck: "false",
883
+ children: this.state.query && /*#__PURE__*/jsx("span", {
884
+ children: this.renderQuery()
885
+ })
886
+ }), renderPlaceholder && /*#__PURE__*/jsx("button", {
887
+ type: "button",
888
+ className: placeholderStyles,
889
+ ref: this.placeholderRef,
890
+ onClick: this.handleCaretMove,
891
+ "data-test": "query-assist-placeholder",
892
+ disabled: this.props.disabled,
893
+ children: this.props.placeholder
894
+ }), actions.length ? /*#__PURE__*/jsx("div", {
895
+ "data-test": "ring-query-assist-actions",
896
+ className: modules_da7ab055.actions,
897
+ children: actions
898
+ }) : null, /*#__PURE__*/jsx(PopupMenu, {
899
+ hidden: !this.state.showPopup,
900
+ onCloseAttempt: this.closePopup,
901
+ ref: this.popupRef,
902
+ anchorElement: this.node,
903
+ keepMounted: true,
904
+ attached: true,
905
+ className: this.props.popupClassName,
906
+ directions: [PopupMenu.PopupProps.Directions.BOTTOM_RIGHT],
907
+ data: useCustomItemRender ? this.state.suggestions : this.renderSuggestions(),
908
+ "data-test": "ring-query-assist-popup",
909
+ hint: this.props.hint,
910
+ shortcutsMap: this.listShortcutsMap,
911
+ hintOnSelection: this.props.hintOnSelection,
912
+ left: this.getPopupOffset(this.state.suggestions),
913
+ maxHeight: PopupMenu.PopupProps.MaxHeight.SCREEN,
914
+ onMouseDown: this.trackPopupMouseState,
915
+ onMouseUp: this.trackPopupMouseState,
916
+ onSelect: item => this.handleComplete(item)
917
+ }), glass && huge && /*#__PURE__*/jsx("div", {
918
+ className: modules_da7ab055.rightSearchButton,
919
+ "data-test": "query-assist-search-button",
920
+ children: /*#__PURE__*/jsx(Icon, {
902
921
  glyph: searchIcon,
903
- className: modules_da7ab055.icon,
904
- title: (_translations$searchT = translations === null || translations === void 0 ? void 0 : translations.searchTitle) !== null && _translations$searchT !== void 0 ? _translations$searchT : translate('searchTitle'),
905
- ref: _this8.glassRef,
922
+ className: modules_da7ab055.rightSearchIcon,
923
+ title: (_translations$searchT3 = translations === null || translations === void 0 ? void 0 : translations.searchTitle) !== null && _translations$searchT3 !== void 0 ? _translations$searchT3 : translate('searchTitle'),
924
+ onClick: this.handleApply,
925
+ ref: this.glassRef,
906
926
  "data-test": "query-assist-search-icon"
907
- }), renderLoader && /*#__PURE__*/jsx("div", {
908
- className: classNames(modules_da7ab055.icon, modules_da7ab055.loader, {
909
- [modules_da7ab055.loaderOnTheRight]: !glass && !huge,
910
- [modules_da7ab055.loaderActive]: renderLoader
911
- }),
912
- ref: _this8.loaderRef,
913
- children: /*#__PURE__*/jsx(LoaderInline, {})
914
- }), /*#__PURE__*/jsx(ContentEditable, {
915
- "aria-label": (_translations$searchT2 = translations === null || translations === void 0 ? void 0 : translations.searchTitle) !== null && _translations$searchT2 !== void 0 ? _translations$searchT2 : translate('searchTitle'),
916
- className: inputClasses,
917
- "data-test": "ring-query-assist-input",
918
- inputRef: _this8.inputRef,
919
- disabled: _this8.props.disabled,
920
- onComponentUpdate: function onComponentUpdate() {
921
- return _this8.setCaretPosition({
922
- fromContentEditable: true
923
- });
924
- },
925
- onBlur: _this8.handleFocusChange,
926
- onClick: _this8.handleCaretMove,
927
- onCompositionStart: _this8.trackCompositionState,
928
- onCompositionEnd: _this8.trackCompositionState,
929
- onFocus: _this8.handleFocusChange,
930
- onInput: _this8.handleInput // To support IE use the same method
931
- ,
932
- onKeyUp: _this8.handleInput // to handle input and key up
933
- ,
934
- onKeyDown: _this8.handleEnter,
935
- onPaste: _this8.handlePaste,
936
- spellCheck: "false",
937
- children: _this8.state.query && /*#__PURE__*/jsx("span", {
938
- children: _this8.renderQuery()
939
- })
940
- }), renderPlaceholder && /*#__PURE__*/jsx("button", {
941
- type: "button",
942
- className: placeholderStyles,
943
- ref: _this8.placeholderRef,
944
- onClick: _this8.handleCaretMove,
945
- "data-test": "query-assist-placeholder",
946
- disabled: _this8.props.disabled,
947
- children: _this8.props.placeholder
948
- }), actions.length ? /*#__PURE__*/jsx("div", {
949
- "data-test": "ring-query-assist-actions",
950
- className: modules_da7ab055.actions,
951
- children: actions
952
- }) : null, /*#__PURE__*/jsx(PopupMenu, {
953
- hidden: !_this8.state.showPopup,
954
- onCloseAttempt: _this8.closePopup,
955
- ref: _this8.popupRef,
956
- anchorElement: _this8.node,
957
- keepMounted: true,
958
- attached: true,
959
- className: _this8.props.popupClassName,
960
- directions: [PopupMenu.PopupProps.Directions.BOTTOM_RIGHT],
961
- data: useCustomItemRender ? _this8.state.suggestions : _this8.renderSuggestions(),
962
- "data-test": "ring-query-assist-popup",
963
- hint: _this8.props.hint,
964
- shortcutsMap: _this8.listShortcutsMap,
965
- hintOnSelection: _this8.props.hintOnSelection,
966
- left: _this8.getPopupOffset(_this8.state.suggestions),
967
- maxHeight: PopupMenu.PopupProps.MaxHeight.SCREEN,
968
- onMouseDown: _this8.trackPopupMouseState,
969
- onMouseUp: _this8.trackPopupMouseState,
970
- onSelect: function onSelect(item) {
971
- return _this8.handleComplete(item);
972
- }
973
- }), glass && huge && /*#__PURE__*/jsx("div", {
974
- className: modules_da7ab055.rightSearchButton,
975
- "data-test": "query-assist-search-button",
976
- children: /*#__PURE__*/jsx(Icon, {
977
- glyph: searchIcon,
978
- className: modules_da7ab055.rightSearchIcon,
979
- title: (_translations$searchT3 = translations === null || translations === void 0 ? void 0 : translations.searchTitle) !== null && _translations$searchT3 !== void 0 ? _translations$searchT3 : translate('searchTitle'),
980
- onClick: _this8.handleApply,
981
- ref: _this8.glassRef,
982
- "data-test": "query-assist-search-icon"
983
- })
984
- })]
985
- });
986
- }
987
- })
988
- });
989
- }
990
- }], [{
991
- key: "getDerivedStateFromProps",
992
- value: function getDerivedStateFromProps(_ref6, _ref7) {
993
- var query = _ref6.query;
994
- var prevQuery = _ref7.prevQuery;
995
- var nextState = {
996
- prevQuery: query
997
- };
998
- if (typeof query === 'string' && query !== prevQuery) {
999
- nextState.query = query;
1000
- nextState.placeholderEnabled = !query;
1001
- }
1002
- return nextState;
1003
- }
1004
- }]);
1005
- }(Component);
1006
- _defineProperty(QueryAssist, "propTypes", {
1007
- /**
1008
- * Open suggestions popup during the initial render
1009
- */
1010
- autoOpen: PropTypes.oneOf([true, false, 'force']),
1011
- /**
1012
- * Initial caret position
1013
- */
1014
- caret: PropTypes.number,
1015
- /**
1016
- * Show clickable "cross" icon on the right which clears the query
1017
- */
1018
- clear: PropTypes.bool,
1019
- /**
1020
- * Additional class for the component
1021
- */
1022
- className: PropTypes.string,
1023
- /**
1024
- * Additional class for the popup
1025
- */
1026
- popupClassName: PropTypes.string,
1027
- /**
1028
- * Additional class for the input
1029
- */
1030
- inputClassName: PropTypes.string,
1031
- /**
1032
- * Data source function
1033
- */
1034
- dataSource: PropTypes.func.isRequired,
1035
- /**
1036
- * Input debounce delay
1037
- */
1038
- delay: PropTypes.number,
1039
- /**
1040
- * Disable the component
1041
- */
1042
- disabled: PropTypes.bool,
1043
- /**
1044
- * Initial focus
1045
- */
1046
- focus: PropTypes.bool,
1047
- /**
1048
- * Hint under the suggestions list
1049
- */
1050
- hint: PropTypes.string,
1051
- /**
1052
- * Hint under the suggestions list visible when a suggestion is selected
1053
- */
1054
- hintOnSelection: PropTypes.string,
1055
- /**
1056
- * Show clickable "glass" icon on the right which applies the query
1057
- */
1058
- glass: PropTypes.bool,
1059
- /**
1060
- * Show loader when a data request is in process
1061
- */
1062
- loader: PropTypes.bool,
1063
- /**
1064
- * Field placeholder value
1065
- */
1066
- placeholder: PropTypes.string,
1067
- /**
1068
- * Called when the query is applied. An object with fields `caret`, `focus` and `query` is passed as an argument
1069
- */
1070
- onApply: PropTypes.func,
1071
- /**
1072
- * Called when the query is changed. An object with fields `caret` and `query` is passed as an argument
1073
- */
1074
- onChange: PropTypes.func,
1075
- /**
1076
- * Called when the query is cleared. Called without arguments
1077
- */
1078
- onClear: PropTypes.func,
1079
- /**
1080
- * Called when the suggestion is applied
1081
- */
1082
- onApplySuggestion: PropTypes.func,
1083
- /**
1084
- * Called when the focus status is changed. An object with fields `focus` is passed as an argument
1085
- */
1086
- onFocusChange: PropTypes.func,
1087
- /**
1088
- * Initial query
1089
- */
1090
- query: PropTypes.string,
1091
- useCustomItemRender: PropTypes.bool,
1092
- translations: PropTypes.object,
1093
- actions: PropTypes.array,
1094
- 'data-test': PropTypes.string,
1095
- huge: PropTypes.bool,
1096
- size: PropTypes.string
1097
- });
927
+ })
928
+ })]
929
+ });
930
+ }
931
+ })
932
+ });
933
+ }
934
+ }
1098
935
  _defineProperty(QueryAssist, "defaultProps", {
1099
936
  onApply: noop,
1100
937
  onChange: noop,
@@ -1104,6 +941,6 @@ _defineProperty(QueryAssist, "defaultProps", {
1104
941
  size: Size.L
1105
942
  });
1106
943
  _defineProperty(QueryAssist, "ngModelStateField", ngModelStateField);
1107
- var RerenderableQueryAssist = rerenderHOC(QueryAssist);
944
+ const RerenderableQueryAssist = rerenderHOC(QueryAssist);
1108
945
 
1109
946
  export { RerenderableQueryAssist, QueryAssist as default };