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

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