@jetbrains/ring-ui 6.0.2-beta.0 → 6.0.2

package/dist/query-assist/query-assist.js

@@ -1,1080 +0,0 @@
-import { _ as _defineProperty, a as _inherits, b as _createSuper, c as _classCallCheck, k as _assertThisInitialized, l as _typeof, m as _toConsumableArray, o as _get, p as _getPrototypeOf, e as _objectWithoutProperties, d as _createClass } from '../_helpers/_rollupPluginBabelHelpers.js';
-import 'core-js/modules/es.regexp.exec.js';
-import 'core-js/modules/es.string.replace.js';
-import 'core-js/modules/es.number.is-integer.js';
-import 'core-js/modules/es.number.constructor.js';
-import 'core-js/modules/es.array.find.js';
-import 'core-js/modules/es.object.to-string.js';
-import 'core-js/modules/web.dom-collections.for-each.js';
-import 'core-js/modules/es.array.filter.js';
-import 'core-js/modules/es.array.splice.js';
-import 'core-js/modules/es.promise.js';
-import 'core-js/modules/es.object.assign.js';
-import 'core-js/modules/es.symbol.js';
-import 'core-js/modules/es.symbol.description.js';
-import 'core-js/modules/es.array.map.js';
-import 'core-js/modules/es.array.from.js';
-import 'core-js/modules/es.string.iterator.js';
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import debounce from 'just-debounce-it';
-import classNames from 'classnames';
-import deepEqual from 'deep-equal';
-import searchIcon from '@jetbrains/icons/search';
-import closeIcon from '@jetbrains/icons/close-12px';
-import getUID from '../global/get-uid.js';
-import joinDataTestAttributes from '../global/data-tests.js';
-import { preventDefault, getRect } from '../global/dom.js';
-import Caret from '../caret/caret.js';
-import ContentEditable from '../contenteditable/contenteditable.js';
-import PopupMenu from '../popup-menu/popup-menu.js';
-import LoaderInline from '../loader-inline/loader-inline.js';
-import Shortcuts from '../shortcuts/shortcuts.js';
-import rerenderHOC from '../global/rerender-hoc.js';
-import { Button } from '../button/button.js';
-import Icon from '../icon/icon.js';
-import { ControlsHeightContext, ControlsHeight } from '../global/controls-height.js';
-import { S as Size, m as modules_88cfaf40 } from '../_helpers/input.js';
-import { I18nContext } from '../i18n/i18n-context.js';
-import { Q as QueryAssistSuggestions, m as modules_da7ab055 } from '../_helpers/query-assist__suggestions.js';
-import 'core-js/modules/es.regexp.to-string.js';
-import 'core-js/modules/es.array.concat.js';
-import 'core-js/modules/es.array.reduce.js';
-import 'core-js/modules/es.object.entries.js';
-import 'core-js/modules/es.string.split.js';
-import 'core-js/modules/es.object.keys.js';
-import 'core-js/modules/es.array.iterator.js';
-import 'core-js/modules/es.set.js';
-import 'core-js/modules/web.dom-collections.iterator.js';
-import 'react-dom/server';
-import 'core-js/modules/es.parse-float.js';
-import '../popup/popup.js';
-import 'react-dom';
-import '../global/schedule-raf.js';
-import '../tab-trap/tab-trap.js';
-import '../popup/position.js';
-import 'core-js/modules/es.array.includes.js';
-import 'core-js/modules/es.string.includes.js';
-import 'core-js/modules/es.array.sort.js';
-import '../popup/popup.consts.js';
-import '../popup/popup.target.js';
-import '../list/list.js';
-import 'core-js/modules/es.array.find-index.js';
-import 'react-virtualized/dist/es/List';
-import 'react-virtualized/dist/es/AutoSizer';
-import 'react-virtualized/dist/es/WindowScroller';
-import 'react-virtualized/dist/es/CellMeasurer';
-import 'util-deprecate';
-import 'memoize-one';
-import '../global/memoize.js';
-import 'core-js/modules/es.map.js';
-import 'core-js/modules/es.weak-map.js';
-import '../global/create-stateful-context.js';
-import '../list/list__link.js';
-import '../link/link.js';
-import '../link/clickableLink.js';
-import '../_helpers/list.js';
-import '../list/list__item.js';
-import 'core-js/modules/es.array.index-of.js';
-import '../avatar/avatar.js';
-import '../global/url.js';
-import 'core-js/modules/es.string.match.js';
-import '../avatar/fallback-avatar.js';
-import 'core-js/modules/es.array.slice.js';
-import '../checkbox/checkbox.js';
-import '@jetbrains/icons/checkmark-14px';
-import '@jetbrains/icons/remove-14px';
-import '../global/prop-types.js';
-import '../global/composeRefs.js';
-import '../list/list__custom.js';
-import '../global/get-event-key.js';
-import '../list/list__title.js';
-import '../list/list__separator.js';
-import '../list/list__hint.js';
-import '../list/consts.js';
-import '../shortcuts/core.js';
-import 'combokeys';
-import '../global/sniffer.js';
-import 'sniffr';
-import '../icon/icon__constants.js';
-import '../_helpers/icon__svg.js';
-import 'core-js/modules/es.string.starts-with.js';
-import '../global/react-render-adapter.js';
-import '@jetbrains/icons/chevron-10px';
-import '../_helpers/button__classes.js';
-import 'core-js/modules/es.object.values.js';
-import '../control-label/control-label.js';
-import '../i18n/i18n.js';
-
-var _excluded = ["suggestions"];
-var POPUP_COMPENSATION = PopupMenu.ListProps.Dimension.ITEM_PADDING + PopupMenu.PopupProps.Dimension.BORDER_WIDTH;
-var ngModelStateField = 'query';
-function noop() {}
-function cleanText(text) {
-  return text.replace(/([\n\r])+/g, ' ');
-}
-/**
- * @name Query Assist
- */
-/**
- * ## Data source function
-
- Component class calls a data source function when user input happens and passes an object with fields \`caret\`, \`focus\` and \`query\` as the only argument.
- The function must return an object with the fields described below. The object can be optionally wrapped in a Promise.
-
- ### Return object fields
-
- \`caret\` and \`query\` should just return server values provided to data source function.
- These fields allow the Query Assist component to recognise and drop earlier responses from the server.
-
- + __caret__ (\`string=0\`) Caret from request
- + __query__ (\`string=''\`) Query from request
- + __styleRanges__ (\`Array<suggestion>=\`) Array of \`styleRange\` objects, used to highlight the request in the input field
- + __suggestions__ (\`Array<styleRange>\`) Array of \`suggestion\` objects to show.
-
- ### **styleRange** object fields
-
- start \`number\` Range start (in characters)
- length \`number\` Range length (in characters)
- style \`string\` Style of the range. Possible values: \`text\`, \`field_value\`, \`field_name\`, \`operator\`
-
- ### **suggestion** object fields
-
- + __prefix__ \`string=\` Suggestion option prefix
- + __option__ \`string\` Suggestion option
- + __suffix__ \`string=\` Suggestion option suffix
- + __description__ \`string=\` Suggestion option description. Is not visible when a group is set
- + __matchingStart__ \`number\` (required when matchingEnd is set) Start of the highlighted part of an option in the suggestions list (in characters)
- + __matchingEnd__ \`number\` (required when matchingEnd is set) End of the highlighted part of an option in the suggestions list (in characters)
- + __caret__ \`number\` Caret position after option completion (in characters)
- + __completionStart__ \`number\` Where to start insertion (or replacement, when completing with the \`Tab\` key) of the completion option (in characters)
- + __completionEnd__ \`number\` Where to end insertion of the completion option (in characters)
- + __group__ \`string=\` Group title. Options with the same title are grouped under it
- + __icon__ \`string=\` Icon URI, Data URI is possible
- */
-var QueryAssist = /*#__PURE__*/function (_Component) {
-  _inherits(QueryAssist, _Component);
-  var _super = _createSuper(QueryAssist);
-  function QueryAssist(_props) {
-    var _thisSuper, _this;
-    _classCallCheck(this, QueryAssist);
-    _this = _super.call(this, _props);
-    _defineProperty(_assertThisInitialized(_this), "state", {
-      dirty: !_this.props.query,
-      query: _this.props.query,
-      placeholderEnabled: !_this.props.query,
-      shortcuts: !!_this.props.focus,
-      suggestions: [],
-      showPopup: false
-    });
-    _defineProperty(_assertThisInitialized(_this), "immediateState", void 0);
-    _defineProperty(_assertThisInitialized(_this), "requestData", void 0);
-    _defineProperty(_assertThisInitialized(_this), "ngModelStateField", ngModelStateField);
-    // An array of {query: string; caret: number}[]
-    _defineProperty(_assertThisInitialized(_this), "historyStack", []);
-    _defineProperty(_assertThisInitialized(_this), "mouseIsDownOnPopup", void 0);
-    _defineProperty(_assertThisInitialized(_this), "handleFocusChange", function (e) {
-      // otherwise it's blur and false
-      var focus = e.type === 'focus';
-      _this.immediateState.focus = focus;
-      if (!focus) {
-        _this.blurInput();
-        // Close popup on blur by keyboard (mostly shift+tab)
-        if (!_this.mouseIsDownOnPopup) {
-          _this.closePopup();
-        }
-      } else {
-        _this.setCaretPosition();
-      }
-      if (!_this.mouseIsDownOnPopup) {
-        _this.props.onFocusChange({
-          focus: focus
-        });
-      }
-      _this.setState({
-        shortcuts: focus
-      });
-    });
-    _defineProperty(_assertThisInitialized(_this), "node", void 0);
-    _defineProperty(_assertThisInitialized(_this), "nodeRef", function (node) {
-      _this.node = node;
-    });
-    _defineProperty(_assertThisInitialized(_this), "setCaretPosition", function () {
-      var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-      var queryLength = _this.immediateState.query != null ? _this.immediateState.query.length : 0;
-      var newCaretPosition = _this.immediateState.caret < queryLength ? _this.immediateState.caret : queryLength;
-      if (params.fromContentEditable) {
-        _this.immediateState.selection = _this.immediateState.selection ? _this.immediateState.selection : _this.state.query && _this.state.query.length || null;
-      }
-      if (_this.immediateState.focus && !_this.props.disabled) {
-        if (typeof _this.immediateState.selection === 'number' && Number.isInteger(_this.immediateState.selection) && _this.immediateState.selection > -1) {
-          var _this$caret;
-          // Set to end of field value if newCaretPosition is inappropriate
-          (_this$caret = _this.caret) === null || _this$caret === void 0 ? void 0 : _this$caret.setPosition(newCaretPosition >= 0 ? newCaretPosition : -1);
-          _this.scrollInput();
-        } else if (_this.immediateState.selection && _typeof(_this.immediateState.selection) === 'object' && _this.immediateState.selection.startOffset !== undefined) {
-          var _this$caret2;
-          (_this$caret2 = _this.caret) === null || _this$caret2 === void 0 ? void 0 : _this$caret2.setPosition(_this.immediateState.selection);
-        } else if (_this.immediateState.selection === undefined || params.forceSetCaret) {
-          var _this$caret3;
-          (_this$caret3 = _this.caret) === null || _this$caret3 === void 0 ? void 0 : _this$caret3.setPosition(-1);
-        }
-      }
-    });
-    _defineProperty(_assertThisInitialized(_this), "togglePlaceholder", function () {
-      var query = _this.getQuery();
-      var currentQueryIsEmpty = _this.immediateState.query === '';
-      var newQueryIsEmpty = query === '';
-      if (newQueryIsEmpty !== currentQueryIsEmpty) {
-        _this.setState({
-          placeholderEnabled: newQueryIsEmpty
-        });
-      }
-    });
-    _defineProperty(_assertThisInitialized(_this), "isComposing", void 0);
-    _defineProperty(_assertThisInitialized(_this), "handleInput", function (e) {
-      var _this$caret4, _currentCaret$positio;
-      _this.togglePlaceholder();
-      var currentCaret = (_this$caret4 = _this.caret) === null || _this$caret4 === void 0 ? void 0 : _this$caret4.getPosition();
-      var props = {
-        dirty: true,
-        query: _this.getQuery(),
-        caret: typeof currentCaret === 'number' ? currentCaret : (_currentCaret$positio = currentCaret === null || currentCaret === void 0 ? void 0 : currentCaret.position) !== null && _currentCaret$positio !== void 0 ? _currentCaret$positio : 0,
-        focus: true
-      };
-      if (_this.immediateState.query === props.query && !_this.isComposing) {
-        _this.handleCaretMove(e);
-        return;
-      }
-      if (_this.isComposing) {
-        return;
-      }
-      _this.immediateState = props;
-      if (_this.state.query) {
-        var _this$state$styleRang;
-        var i = 0;
-        while (_this.state.query[i] === _this.immediateState.query[i] && i < _this.state.query.length - 1) {
-          i++;
-        }
-        var diff = _this.immediateState.query.length - _this.state.query.length;
-        var originalIndex = _this.immediateState.caret - diff;
-        var ranges = _toConsumableArray((_this$state$styleRang = _this.state.styleRanges) !== null && _this$state$styleRang !== void 0 ? _this$state$styleRang : []);
-        var range = ranges.find(function (r) {
-          return originalIndex >= r.start && originalIndex <= r.start + r.length;
-        });
-        if (range) {
-          range.length += diff;
-        }
-        ranges.filter(function (r) {
-          return r.start > originalIndex;
-        }).forEach(function (r) {
-          r.start += diff;
-        });
-      }
-      _this.props.onChange(props);
-      if (_this.props.autoOpen === 'force' || props.query.length > 0) {
-        var _this$requestData, _this2;
-        (_this$requestData = (_this2 = _this).requestData) === null || _this$requestData === void 0 ? void 0 : _this$requestData.call(_this2);
-      }
-    });
-    // It's necessary to prevent new element creation before any other hooks
-    _defineProperty(_assertThisInitialized(_this), "handleEnter", function (e) {
-      if (e.key === 'Enter') {
-        preventDefault(e);
-      }
-    });
-    _defineProperty(_assertThisInitialized(_this), "handleTab", function (e) {
-      var list = _this._popup && _this._popup.list;
-      var suggestion = list && (list.getSelected() || list.getFirst());
-      if (suggestion && _this.state.showPopup) {
-        preventDefault(e);
-        if (_this.getQuery() !== _this.immediateState.suggestionsQuery) {
-          return false;
-        }
-        return _this.handleComplete(suggestion, true);
-      }
-      if (_this.state.loading) {
-        preventDefault(e);
-        return false;
-      }
-      return true;
-    });
-    _defineProperty(_assertThisInitialized(_this), "setState", function (state, resolve) {
-      _get((_thisSuper = _assertThisInitialized(_this), _getPrototypeOf(QueryAssist.prototype)), "setState", _thisSuper).call(_thisSuper, state, function () {
-        _this._pushHistory(state);
-        resolve === null || resolve === void 0 ? void 0 : resolve();
-      });
-    });
-    _defineProperty(_assertThisInitialized(_this), "undo", function (e) {
-      var previous = _this.historyStack.splice(0, 2)[1];
-      if (!previous) {
-        return;
-      }
-      _this.setState({
-        query: previous.query
-      }, function () {
-        var _this$caret5;
-        (_this$caret5 = _this.caret) === null || _this$caret5 === void 0 ? void 0 : _this$caret5.setPosition(previous.caret);
-        _this.handleInput(e);
-      });
-    });
-    _defineProperty(_assertThisInitialized(_this), "handlePaste", function (e) {
-      var INSERT_COMMAND = 'insertText';
-      if (e.clipboardData && document.queryCommandSupported(INSERT_COMMAND)) {
-        preventDefault(e);
-        var text = cleanText(e.clipboardData.getData('text/plain'));
-        document.execCommand(INSERT_COMMAND, false, text);
-        _this.handleInput(e);
-      }
-    });
-    _defineProperty(_assertThisInitialized(_this), "handleCaretMove", function (e) {
-      var _this$caret6, _currentCaret$positio2;
-      if (_this.isComposing) {
-        return;
-      }
-      var currentCaret = (_this$caret6 = _this.caret) === null || _this$caret6 === void 0 ? void 0 : _this$caret6.getPosition();
-      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;
-      var popupHidden = !_this.state.showPopup && e.type === 'click';
-      if (!_this.props.disabled && (caret !== _this.immediateState.caret || popupHidden)) {
-        _this.immediateState.caret = caret;
-        _this.scrollInput();
-        if (_this.immediateState.query.length > 0) {
-          var _this$requestData2, _this3;
-          (_this$requestData2 = (_this3 = _this).requestData) === null || _this$requestData2 === void 0 ? void 0 : _this$requestData2.call(_this3);
-        }
-      }
-      if (_this.immediateState.query.length < 1) {
-        _this.setState({
-          showPopup: false
-        });
-      }
-    });
-    _defineProperty(_assertThisInitialized(_this), "handleStyleRangesResponse", function (_ref) {
-      _ref.suggestions;
-        var restProps = _objectWithoutProperties(_ref, _excluded);
-      return _this.handleResponse(restProps);
-    });
-    _defineProperty(_assertThisInitialized(_this), "handleResponse", function (_ref2) {
-      var _ref2$query = _ref2.query,
-        query = _ref2$query === void 0 ? '' : _ref2$query,
-        _ref2$caret = _ref2.caret,
-        caret = _ref2$caret === void 0 ? 0 : _ref2$caret,
-        styleRanges = _ref2.styleRanges,
-        _ref2$suggestions = _ref2.suggestions,
-        suggestions = _ref2$suggestions === void 0 ? [] : _ref2$suggestions;
-      var afterCompletion = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-      return new Promise(function (resolve, reject) {
-        if (query === _this.getQuery() && (caret === _this.immediateState.caret || _this.immediateState.caret === undefined)) {
-          var _this$caret7;
-          // Do not setState on unmounted component
-          if (!_this.node) {
-            return;
-          }
-          var state = {
-            dirty: _this.immediateState.dirty,
-            loading: false,
-            placeholderEnabled: !query,
-            query: query,
-            suggestions: suggestions,
-            showPopup: !!suggestions.length && !afterCompletion
-          };
-          _this.immediateState.suggestionsQuery = query;
-          // Do not update deep equal styleRanges to simplify shouldComponentUpdate check
-          if (!deepEqual(_this.state.styleRanges, styleRanges)) {
-            state.styleRanges = styleRanges;
-          }
-          _this.immediateState.selection = (_this$caret7 = _this.caret) === null || _this$caret7 === void 0 ? void 0 : _this$caret7.getPosition({
-            avoidFocus: true
-          });
-          _this.setState(state, resolve);
-        } else {
-          reject(new Error('Current and response queries mismatch'));
-        }
-      });
-    });
-    _defineProperty(_assertThisInitialized(_this), "handleApply", function () {
-      _this.closePopup();
-      _this.immediateState.dirty = false;
-      // Only set dirty to false when query is saved already
-      if (_this.immediateState.query === _this.state.query) {
-        _this.setState({
-          dirty: false
-        });
-      }
-      return _this.props.onApply(_this.immediateState);
-    });
-    _defineProperty(_assertThisInitialized(_this), "handleComplete", function (data, replace) {
-      var _suggestion$caret, _suggestion$caret2, _this$requestData3, _this4;
-      if (!data || !data.data) {
-        _this.handleApply();
-        return;
-      }
-      var query = _this.getQuery();
-      var currentCaret = _this.immediateState.caret;
-      var suggestion = data.data;
-      var prefix = suggestion.prefix || '';
-      var suffix = suggestion.suffix || '';
-      var state = {
-        caret: (_suggestion$caret = suggestion.caret) !== null && _suggestion$caret !== void 0 ? _suggestion$caret : 0,
-        selection: (_suggestion$caret2 = suggestion.caret) !== null && _suggestion$caret2 !== void 0 ? _suggestion$caret2 : 0,
-        query: query.substr(0, suggestion.completionStart) + prefix + suggestion.option + suffix
-      };
-      if (typeof replace === 'boolean' && replace) {
-        var _suggestion$completio;
-        state.query += _this.immediateState.query.substr((_suggestion$completio = suggestion.completionEnd) !== null && _suggestion$completio !== void 0 ? _suggestion$completio : 0);
-      } else {
-        state.query += _this.immediateState.query.substr(_this.immediateState.caret);
-      }
-      _this.props.onChange(state);
-      _this.props.onApplySuggestion(data.data, state);
-      var focusState = {
-        focus: true
-      };
-      _this.props.onFocusChange(focusState);
-      if (state.query !== _this.immediateState.query) {
-        _this.setState({
-          placeholderEnabled: !state.query,
-          query: state.query
-        });
-      }
-      _this.immediateState = Object.assign(state, focusState);
-      if (_this.immediateState.caret !== currentCaret) {
-        _this.setCaretPosition();
-      }
-      _this.closePopup();
-      (_this$requestData3 = (_this4 = _this).requestData) === null || _this$requestData3 === void 0 ? void 0 : _this$requestData3.call(_this4, true);
-    });
-    _defineProperty(_assertThisInitialized(_this), "requestStyleRanges", function () {
-      var _this$immediateState = _this.immediateState,
-        query = _this$immediateState.query,
-        caret = _this$immediateState.caret;
-      if (!query) {
-        return Promise.reject(new Error('Query is empty'));
-      }
-      return _this.sendRequest({
-        query: query,
-        caret: caret,
-        omitSuggestions: true
-      }).then(_this.handleStyleRangesResponse).catch(noop);
-    });
-    _defineProperty(_assertThisInitialized(_this), "requestHandler", function () {
-      var afterCompletion = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-      if (_this.props.disabled) {
-        return Promise.reject(new Error('QueryAssist(@jetbrains/ring-ui): null exception'));
-      }
-      var _this$immediateState2 = _this.immediateState,
-        query = _this$immediateState2.query,
-        caret = _this$immediateState2.caret;
-      return _this.sendRequest({
-        query: query,
-        caret: caret
-      }).then(function (data) {
-        return _this.handleResponse(data, afterCompletion);
-      }).catch(noop);
-    });
-    _defineProperty(_assertThisInitialized(_this), "handleCtrlSpace", function (e) {
-      preventDefault(e);
-      if (!_this.state.showPopup) {
-        var _this$requestData4, _this5;
-        (_this$requestData4 = (_this5 = _this).requestData) === null || _this$requestData4 === void 0 ? void 0 : _this$requestData4.call(_this5);
-      }
-    });
-    _defineProperty(_assertThisInitialized(_this), "trackPopupMouseState", function (e) {
-      _this.mouseIsDownOnPopup = e.type === 'mousedown';
-    });
-    _defineProperty(_assertThisInitialized(_this), "trackCompositionState", function (e) {
-      _this.isComposing = e.type !== 'compositionend';
-    });
-    _defineProperty(_assertThisInitialized(_this), "closePopup", function () {
-      if (_this.node) {
-        _this.setState({
-          showPopup: false
-        });
-      }
-    });
-    _defineProperty(_assertThisInitialized(_this), "clearQuery", function () {
-      var state = {
-        dirty: false,
-        caret: 0,
-        query: '',
-        focus: true
-      };
-      _this.props.onChange(state);
-      _this.props.onClear();
-      _this.immediateState = state;
-      _this.setState({
-        dirty: false,
-        query: '',
-        placeholderEnabled: true,
-        loading: false
-      });
-    });
-    _defineProperty(_assertThisInitialized(_this), "input", void 0);
-    _defineProperty(_assertThisInitialized(_this), "caret", void 0);
-    _defineProperty(_assertThisInitialized(_this), "inputRef", function (node) {
-      if (!node) {
-        return;
-      }
-      _this.input = node;
-      _this.caret = new Caret(_this.input);
-    });
-    _defineProperty(_assertThisInitialized(_this), "_popup", void 0);
-    _defineProperty(_assertThisInitialized(_this), "popupRef", function (node) {
-      _this._popup = node;
-    });
-    _defineProperty(_assertThisInitialized(_this), "placeholder", void 0);
-    _defineProperty(_assertThisInitialized(_this), "placeholderRef", function (node) {
-      _this.placeholder = node;
-    });
-    _defineProperty(_assertThisInitialized(_this), "glass", void 0);
-    _defineProperty(_assertThisInitialized(_this), "glassRef", function (node) {
-      _this.glass = node;
-    });
-    _defineProperty(_assertThisInitialized(_this), "loader", void 0);
-    _defineProperty(_assertThisInitialized(_this), "loaderRef", function (node) {
-      _this.loader = node;
-    });
-    _defineProperty(_assertThisInitialized(_this), "clear", void 0);
-    _defineProperty(_assertThisInitialized(_this), "clearRef", function (node) {
-      _this.clear = node;
-    });
-    _defineProperty(_assertThisInitialized(_this), "shortcutsScope", getUID('ring-query-assist-'));
-    _defineProperty(_assertThisInitialized(_this), "shortcutsMap", {
-      del: noop,
-      enter: function enter() {
-        return _this.handleComplete();
-      },
-      'command+enter': function commandEnter() {
-        return _this.handleComplete();
-      },
-      'ctrl+enter': function ctrlEnter() {
-        return _this.handleComplete();
-      },
-      'ctrl+space': _this.handleCtrlSpace,
-      tab: _this.handleTab,
-      'meta+z': _this.undo,
-      right: noop,
-      left: noop,
-      space: noop,
-      home: noop,
-      end: noop
-    });
-    var _query = _props.query || '';
-    _this.immediateState = {
-      query: _query,
-      caret: typeof _props.caret === 'number' && Number.isFinite(_props.caret) ? _props.caret : _query.length,
-      focus: Boolean(_props.autoOpen || _props.focus)
-    };
-    return _this;
-  }
-  _createClass(QueryAssist, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var query = this.props.query || '';
-      this.immediateState = {
-        query: query,
-        caret: typeof this.props.caret === 'number' && Number.isFinite(this.props.caret) ? this.props.caret : query.length,
-        focus: Boolean(this.props.autoOpen || this.props.focus)
-      };
-      this.setupRequestHandler(this.props.delay);
-      if (this.props.autoOpen === 'force' || this.props.autoOpen && query.length > 0) {
-        this.requestHandler().catch(noop);
-      } else {
-        this.requestStyleRanges().catch(noop);
-      }
-      this.setCaretPosition();
-      this._pushHistory(this.state);
-    }
-  }, {
-    key: "shouldComponentUpdate",
-    value: function shouldComponentUpdate(props, state) {
-      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;
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      var _this$props = this.props,
-        caret = _this$props.caret,
-        delay = _this$props.delay,
-        query = _this$props.query;
-      var queryChanged = query !== prevProps.query;
-      this.updateFocus(prevProps);
-      this.setupRequestHandler(delay);
-      var shouldSetCaret = typeof caret === 'number' && caret !== prevProps.caret;
-      if (shouldSetCaret) {
-        this.immediateState.caret = caret;
-      }
-      if (typeof query === 'string' && queryChanged && query !== this.immediateState.query) {
-        this.immediateState.query = query;
-        if (prevProps.autoOpen && (query === null || query === void 0 ? void 0 : query.length) > 0) {
-          var _this$requestData5;
-          (_this$requestData5 = this.requestData) === null || _this$requestData5 === void 0 ? void 0 : _this$requestData5.call(this);
-        } else if (query) {
-          this.requestStyleRanges();
-        }
-      }
-    }
-  }, {
-    key: "updateFocus",
-    value: function updateFocus(_ref3) {
-      var focus = _ref3.focus,
-        caret = _ref3.caret;
-      var isCaretChanged = caret !== this.props.caret;
-      var isFocusChanged = focus !== this.props.focus;
-      if (isFocusChanged || isCaretChanged) {
-        var focusValue = isFocusChanged ? this.props.focus : true;
-        this.setFocus(focusValue);
-      }
-    }
-  }, {
-    key: "scrollInput",
-    value: function scrollInput() {
-      var _this$caret8, _this$input, _this$input2, _this$input3;
-      var caretOffset = (_this$caret8 = this.caret) === null || _this$caret8 === void 0 ? void 0 : _this$caret8.getOffset();
-      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) {
-        this.input.scrollLeft += caretOffset;
-      }
-    }
-  }, {
-    key: "getQuery",
-    value: function getQuery() {
-      var _this$input$textConte, _this$input4;
-      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 : '';
-    }
-  }, {
-    key: "isRenderingGlassOrLoader",
-    value: function isRenderingGlassOrLoader() {
-      var renderLoader = this.props.loader !== false && this.state.loading;
-      return this.props.glass || renderLoader;
-    }
-  }, {
-    key: "_pushHistory",
-    value: function _pushHistory(state) {
-      var _this$historyStack$;
-      var queryIsSet = ('query' in state);
-      var queryIsSame = ((_this$historyStack$ = this.historyStack[0]) === null || _this$historyStack$ === void 0 ? void 0 : _this$historyStack$.query) === state.query;
-      if (queryIsSet && !queryIsSame) {
-        var _this$caret$getPositi, _this$caret9;
-        this.historyStack.unshift({
-          query: state.query,
-          caret: (_this$caret$getPositi = (_this$caret9 = this.caret) === null || _this$caret9 === void 0 ? void 0 : _this$caret9.getPosition({
-            avoidFocus: true
-          })) !== null && _this$caret$getPositi !== void 0 ? _this$caret$getPositi : -1
-        });
-      }
-    }
-  }, {
-    key: "sendRequest",
-    value: function sendRequest(params) {
-      var _this6 = this;
-      var value = this.props.dataSource(params);
-      var dataPromise = Promise.resolve(value);
-      var CLOSE_POPUP_TIMEOUT = 500;
-      // Close popup after timeout between long requests
-      var timeout = window.setTimeout(function () {
-        if (_this6.node) {
-          _this6.setState({
-            loading: true
-          });
-        }
-        if (params.query === _this6.immediateState.query) {
-          _this6.closePopup();
-        }
-      }, CLOSE_POPUP_TIMEOUT);
-      dataPromise.then(function () {
-        return window.clearTimeout(timeout);
-      }).catch(function () {
-        window.clearTimeout(timeout);
-        _this6.setState({
-          loading: false
-        });
-      });
-      return dataPromise;
-    }
-  }, {
-    key: "getPopupOffset",
-    value: function getPopupOffset(suggestions) {
-      var ICON_SPACING = 12;
-      var minOffset = this.isRenderingGlassOrLoader() ? ICON_SPACING : 0;
-      if (!this.input) {
-        return minOffset;
-      }
-      // First suggestion should be enough?
-      var suggestion = suggestions && suggestions[0];
-      // Check if suggestion begins not from the end
-      var completionStart = suggestion && suggestion.completionStart !== suggestion.completionEnd && suggestion.completionStart;
-      var inputChildren = this.input.firstChild instanceof Element && this.input.firstChild.children;
-      var completionStartNode = inputChildren && typeof completionStart === 'number' && inputChildren[Math.min(completionStart, inputChildren.length - 1)];
-      var offset = completionStartNode && getRect(completionStartNode).right - getRect(this.input).left;
-      if (!offset) {
-        var _this$caret$getOffset, _this$caret10;
-        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;
-        // Do not compensate caret in the beginning of field
-        if (caret === 0) {
-          return minOffset;
-        } else {
-          offset = caret;
-        }
-      }
-      var result = offset - POPUP_COMPENSATION;
-      return result < minOffset ? minOffset : result;
-    }
-  }, {
-    key: "blurInput",
-    value: function blurInput() {
-      this.immediateState.selection = null;
-      if (!this.props.focus) {
-        var _this$caret11;
-        (_this$caret11 = this.caret) === null || _this$caret11 === void 0 ? void 0 : _this$caret11.target.blur();
-      }
-    }
-    /**
-     * Optionally setup data request delay. For each component create a separate
-     * instance of the delayed function. This may help reduce the load on the server
-     * when the user quickly inputs data.
-     */
-  }, {
-    key: "setupRequestHandler",
-    value: function setupRequestHandler(delay) {
-      var needDelay = typeof delay === 'number';
-      var hasDelay = this.requestData !== this.requestHandler;
-      if (!this.requestData || hasDelay !== needDelay) {
-        if (needDelay) {
-          this.requestData = debounce(this.requestHandler, delay);
-        } else {
-          this.requestData = this.requestHandler;
-        }
-      }
-    }
-  }, {
-    key: "_renderSuggestion",
-    value: function _renderSuggestion(suggestion) {
-      var ITEM = PopupMenu.ListProps.Type.ITEM;
-      var description = suggestion.description,
-        icon = suggestion.icon,
-        group = suggestion.group;
-      var key = QueryAssistSuggestions.createKey(suggestion);
-      var label = QueryAssistSuggestions.renderLabel(suggestion);
-      return {
-        key: key,
-        icon: icon,
-        label: label,
-        description: description,
-        group: group,
-        rgItemType: ITEM,
-        data: suggestion
-      };
-    }
-  }, {
-    key: "renderSuggestions",
-    value: function renderSuggestions() {
-      var suggestions = this.state.suggestions;
-      if (!suggestions || !suggestions.length) {
-        return [];
-      }
-      return QueryAssistSuggestions.renderList(suggestions, this._renderSuggestion);
-    }
-  }, {
-    key: "renderQuery",
-    value: function renderQuery() {
-      var _this$state = this.state,
-        dirty = _this$state.dirty,
-        styleRanges = _this$state.styleRanges,
-        query = _this$state.query;
-      var classes = [];
-      var LETTER_CLASS = 'letter';
-      var LETTER_DEFAULT_CLASS = modules_da7ab055.letterDefault;
-      if (styleRanges && styleRanges.length) {
-        styleRanges.forEach(function (item, index) {
-          if (dirty && index === styleRanges.length - 1 && item.style === 'text') {
-            return;
-          }
-          var styleName = "".concat(LETTER_CLASS, "-").concat(item.style.replace('_', '-'));
-          for (var i = item.start; i < item.start + item.length; i++) {
-            classes[i] = modules_da7ab055[styleName];
-          }
-        });
-      }
-      return query && Array.from(query).map(function (letter, index, letters) {
-        var className = classNames(modules_da7ab055.letter, classes[index] || LETTER_DEFAULT_CLASS);
-        var dataTest = letters.length - 1 === index ? 'ring-query-assist-last-letter' : null;
-        // \u00a0 === &nbsp;
-        return /*#__PURE__*/React.createElement("span", {
-          // eslint-disable-next-line react/no-array-index-key
-          key: index + letter,
-          className: className,
-          "data-test": dataTest
-        }, letter === ' ' ? "\xA0" : letter);
-      });
-    }
-  }, {
-    key: "setFocus",
-    value: function setFocus(focus) {
-      this.setState({
-        shortcuts: !!focus
-      });
-      var isComponentFocused = Boolean(this.immediateState.focus);
-      if (focus === false && isComponentFocused) {
-        this.immediateState.focus = focus;
-        this.blurInput();
-      } else if (focus === true && !isComponentFocused) {
-        this.immediateState.focus = focus;
-        this.setCaretPosition({
-          forceSetCaret: true
-        });
-      }
-    }
-  }, {
-    key: "renderActions",
-    value: function renderActions() {
-      var _this7 = this;
-      var actions = _toConsumableArray(this.props.actions || []);
-      var renderClear = this.props.clear && !!this.state.query;
-      if (renderClear) {
-        actions.push( /*#__PURE__*/React.createElement(I18nContext.Consumer, {
-          key: 'clearAction'
-        }, function (_ref4) {
-          var _this7$props$translat, _this7$props$translat2;
-          var translate = _ref4.translate;
-          return /*#__PURE__*/React.createElement(Button, {
-            icon: closeIcon,
-            className: modules_da7ab055.clear,
-            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'),
-            ref: _this7.clearRef,
-            onClick: _this7.clearQuery,
-            "data-test": "query-assist-clear-icon"
-          });
-        }));
-      }
-      return actions;
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _classNames,
-        _classNames2,
-        _classNames3,
-        _this8 = this;
-      var _this$props2 = this.props,
-        glass = _this$props2.glass,
-        dataTest = _this$props2['data-test'],
-        className = _this$props2.className,
-        useCustomItemRender = _this$props2.useCustomItemRender,
-        huge = _this$props2.huge,
-        size = _this$props2.size,
-        translations = _this$props2.translations;
-      var renderPlaceholder = !!this.props.placeholder && this.state.placeholderEnabled;
-      var renderLoader = this.props.loader !== false && this.state.loading;
-      var renderGlass = glass && !renderLoader;
-      var actions = this.renderActions();
-      var containerClasses = classNames(className, modules_88cfaf40["size".concat(huge ? Size.FULL : size)], (_classNames = {}, _defineProperty(_classNames, modules_da7ab055.queryAssist, true), _defineProperty(_classNames, modules_da7ab055.withIcon, renderGlass && !huge || renderLoader), _defineProperty(_classNames, modules_da7ab055.huge, huge), _defineProperty(_classNames, modules_da7ab055.queryAssistDisabled, this.props.disabled), _classNames));
-      var inputClasses = classNames(this.props.inputClassName, (_classNames2 = {}, _defineProperty(_classNames2, "".concat(modules_da7ab055.input, " ring-js-shortcuts"), true), _defineProperty(_classNames2, modules_da7ab055.inputGap, actions.length || this.isRenderingGlassOrLoader() && !glass), _defineProperty(_classNames2, modules_da7ab055.inputGap2, actions.length === 2), _defineProperty(_classNames2, modules_da7ab055.inputRevertOrder, !glass || huge), _classNames2));
-      var placeholderStyles = classNames((_classNames3 = {}, _defineProperty(_classNames3, modules_da7ab055.placeholder, true), _defineProperty(_classNames3, modules_da7ab055.hugePlaceholder, huge), _defineProperty(_classNames3, modules_da7ab055.withoutGlass, !glass || !renderLoader && huge), _classNames3));
-      return /*#__PURE__*/React.createElement(ControlsHeightContext.Provider, {
-        value: ControlsHeight.M
-      }, /*#__PURE__*/React.createElement(I18nContext.Consumer, null, function (_ref5) {
-        var _translations$searchT, _classNames4, _translations$searchT2, _translations$searchT3;
-        var translate = _ref5.translate;
-        return /*#__PURE__*/React.createElement("div", {
-          "data-test": joinDataTestAttributes('ring-query-assist', dataTest),
-          className: containerClasses,
-          role: "presentation",
-          ref: _this8.nodeRef
-        }, _this8.state.shortcuts && /*#__PURE__*/React.createElement(Shortcuts, {
-          map: _this8.shortcutsMap,
-          scope: _this8.shortcutsScope
-        }), renderGlass && !huge && /*#__PURE__*/React.createElement(Icon, {
-          glyph: searchIcon,
-          className: modules_da7ab055.icon,
-          title: (_translations$searchT = translations === null || translations === void 0 ? void 0 : translations.searchTitle) !== null && _translations$searchT !== void 0 ? _translations$searchT : translate('searchTitle'),
-          ref: _this8.glassRef,
-          "data-test": "query-assist-search-icon"
-        }), renderLoader && /*#__PURE__*/React.createElement("div", {
-          className: classNames(modules_da7ab055.icon, modules_da7ab055.loader, (_classNames4 = {}, _defineProperty(_classNames4, modules_da7ab055.loaderOnTheRight, !glass && !huge), _defineProperty(_classNames4, modules_da7ab055.loaderActive, renderLoader), _classNames4)),
-          ref: _this8.loaderRef
-        }, /*#__PURE__*/React.createElement(LoaderInline, null)), /*#__PURE__*/React.createElement(ContentEditable, {
-          "aria-label": (_translations$searchT2 = translations === null || translations === void 0 ? void 0 : translations.searchTitle) !== null && _translations$searchT2 !== void 0 ? _translations$searchT2 : translate('searchTitle'),
-          className: inputClasses,
-          "data-test": "ring-query-assist-input",
-          inputRef: _this8.inputRef,
-          disabled: _this8.props.disabled,
-          onComponentUpdate: function onComponentUpdate() {
-            return _this8.setCaretPosition({
-              fromContentEditable: true
-            });
-          },
-          onBlur: _this8.handleFocusChange,
-          onClick: _this8.handleCaretMove,
-          onCompositionStart: _this8.trackCompositionState,
-          onCompositionEnd: _this8.trackCompositionState,
-          onFocus: _this8.handleFocusChange,
-          onInput: _this8.handleInput // To support IE use the same method
-          ,
-          onKeyUp: _this8.handleInput // to handle input and key up
-          ,
-          onKeyDown: _this8.handleEnter,
-          onPaste: _this8.handlePaste,
-          spellCheck: "false"
-        }, _this8.state.query && /*#__PURE__*/React.createElement("span", null, _this8.renderQuery())), renderPlaceholder && /*#__PURE__*/React.createElement("button", {
-          type: "button",
-          className: placeholderStyles,
-          ref: _this8.placeholderRef,
-          onClick: _this8.handleCaretMove,
-          "data-test": "query-assist-placeholder"
-        }, _this8.props.placeholder), actions.length ? /*#__PURE__*/React.createElement("div", {
-          "data-test": "ring-query-assist-actions",
-          className: modules_da7ab055.actions
-        }, actions) : null, /*#__PURE__*/React.createElement(PopupMenu, {
-          hidden: !_this8.state.showPopup,
-          onCloseAttempt: _this8.closePopup,
-          ref: _this8.popupRef,
-          anchorElement: _this8.node,
-          keepMounted: true,
-          attached: true,
-          className: _this8.props.popupClassName,
-          directions: [PopupMenu.PopupProps.Directions.BOTTOM_RIGHT],
-          data: useCustomItemRender ? _this8.state.suggestions : _this8.renderSuggestions(),
-          "data-test": "ring-query-assist-popup",
-          hint: _this8.props.hint,
-          hintOnSelection: _this8.props.hintOnSelection,
-          left: _this8.getPopupOffset(_this8.state.suggestions),
-          maxHeight: PopupMenu.PopupProps.MaxHeight.SCREEN,
-          onMouseDown: _this8.trackPopupMouseState,
-          onMouseUp: _this8.trackPopupMouseState,
-          onSelect: function onSelect(item) {
-            return _this8.handleComplete(item);
-          }
-        }), glass && huge && /*#__PURE__*/React.createElement("div", {
-          className: modules_da7ab055.rightSearchButton,
-          "data-test": "query-assist-search-button"
-        }, /*#__PURE__*/React.createElement(Icon, {
-          glyph: searchIcon,
-          className: modules_da7ab055.rightSearchIcon,
-          title: (_translations$searchT3 = translations === null || translations === void 0 ? void 0 : translations.searchTitle) !== null && _translations$searchT3 !== void 0 ? _translations$searchT3 : translate('searchTitle'),
-          onClick: _this8.handleApply,
-          ref: _this8.glassRef,
-          "data-test": "query-assist-search-icon"
-        })));
-      }));
-    }
-  }], [{
-    key: "getDerivedStateFromProps",
-    value: function getDerivedStateFromProps(_ref6, _ref7) {
-      var query = _ref6.query;
-      var prevQuery = _ref7.prevQuery;
-      var nextState = {
-        prevQuery: query
-      };
-      if (typeof query === 'string' && query !== prevQuery) {
-        nextState.query = query;
-        nextState.placeholderEnabled = !query;
-      }
-      return nextState;
-    }
-  }]);
-  return QueryAssist;
-}(Component);
-_defineProperty(QueryAssist, "propTypes", {
-  /**
-   * Open suggestions popup during the initial render
-   */
-  autoOpen: PropTypes.oneOf([true, false, 'force']),
-  /**
-   * Initial caret position
-   */
-  caret: PropTypes.number,
-  /**
-   * Show clickable "cross" icon on the right which clears the query
-   */
-  clear: PropTypes.bool,
-  /**
-   * Additional class for the component
-   */
-  className: PropTypes.string,
-  /**
-   * Additional class for the popup
-   */
-  popupClassName: PropTypes.string,
-  /**
-   * Additional class for the input
-   */
-  inputClassName: PropTypes.string,
-  /**
-   * Data source function
-   */
-  dataSource: PropTypes.func.isRequired,
-  /**
-   * Input debounce delay
-   */
-  delay: PropTypes.number,
-  /**
-   * Disable the component
-   */
-  disabled: PropTypes.bool,
-  /**
-   * Initial focus
-   */
-  focus: PropTypes.bool,
-  /**
-   * Hint under the suggestions list
-   */
-  hint: PropTypes.string,
-  /**
-   * Hint under the suggestions list visible when a suggestion is selected
-   */
-  hintOnSelection: PropTypes.string,
-  /**
-   * Show clickable "glass" icon on the right which applies the query
-   */
-  glass: PropTypes.bool,
-  /**
-   * Show loader when a data request is in process
-   */
-  loader: PropTypes.bool,
-  /**
-   * Field placeholder value
-   */
-  placeholder: PropTypes.string,
-  /**
-   * Called when the query is applied. An object with fields `caret`, `focus` and `query` is passed as an argument
-   */
-  onApply: PropTypes.func,
-  /**
-   * Called when the query is changed. An object with fields `caret` and `query` is passed as an argument
-   */
-  onChange: PropTypes.func,
-  /**
-   * Called when the query is cleared. Called without arguments
-   */
-  onClear: PropTypes.func,
-  /**
-   * Called when the suggestion is applied
-   */
-  onApplySuggestion: PropTypes.func,
-  /**
-   * Called when the focus status is changed. An object with fields `focus` is passed as an argument
-   */
-  onFocusChange: PropTypes.func,
-  /**
-   * Initial query
-   */
-  query: PropTypes.string,
-  useCustomItemRender: PropTypes.bool,
-  translations: PropTypes.object,
-  actions: PropTypes.array,
-  'data-test': PropTypes.string,
-  huge: PropTypes.bool,
-  size: PropTypes.string
-});
-_defineProperty(QueryAssist, "defaultProps", {
-  onApply: noop,
-  onChange: noop,
-  onApplySuggestion: noop,
-  onClear: noop,
-  onFocusChange: noop,
-  size: Size.L
-});
-_defineProperty(QueryAssist, "ngModelStateField", ngModelStateField);
-var RerenderableQueryAssist = rerenderHOC(QueryAssist);
-
-export { RerenderableQueryAssist, QueryAssist as default };