@jetbrains/ring-ui-built 6.0.32 → 6.0.34

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