@jetbrains/ring-ui-built 6.0.32 → 6.0.33

package/components/query-assist/query-assist.js

@@ -1,3 +1,18 @@
+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';
+import 'core-js/modules/es.symbol.js';
+import 'core-js/modules/es.symbol.description.js';
+import 'core-js/modules/es.array.concat.js';
+import 'core-js/modules/es.array.filter.js';
+import 'core-js/modules/es.array.find.js';
+import 'core-js/modules/es.array.from.js';
+import 'core-js/modules/es.array.map.js';
+import 'core-js/modules/es.array.splice.js';
+import 'core-js/modules/es.object.assign.js';
+import 'core-js/modules/es.object.to-string.js';
+import 'core-js/modules/es.promise.js';
+import 'core-js/modules/es.regexp.exec.js';
+import 'core-js/modules/es.string.replace.js';
+import 'core-js/modules/web.dom-collections.for-each.js';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import debounce from 'just-debounce-it';
@@ -7,7 +22,7 @@ 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 { getRect, preventDefault } from '../global/dom.js';
 import Caret from '../caret/caret.js';
 import ContentEditable from '../contenteditable/contenteditable.js';
 import PopupMenu from '../popup-menu/popup-menu.js';
@@ -20,16 +35,26 @@ import { ControlsHeightContext, ControlsHeight } from '../global/controls-height
 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 '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/es.regexp.to-string.js';
+import 'core-js/modules/es.array.reduce.js';
+import 'core-js/modules/es.object.entries.js';
+import 'core-js/modules/es.array.iterator.js';
+import 'core-js/modules/es.set.js';
+import 'core-js/modules/es.string.split.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import 'react-dom/server';
 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.array.sort.js';
+import 'core-js/modules/es.string.includes.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';
@@ -37,6 +62,8 @@ 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';
@@ -44,9 +71,12 @@ import '../link/clickableLink.js';
 import '../_helpers/link.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-12px';
 import '@jetbrains/icons/remove-12px';
@@ -64,13 +94,16 @@ 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 '@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';
 
-const POPUP_COMPENSATION = PopupMenu.ListProps.Dimension.ITEM_PADDING + PopupMenu.PopupProps.Dimension.BORDER_WIDTH;
-const ngModelStateField = 'query';
+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, ' ');
@@ -114,905 +147,950 @@ function cleanText(text) {
  + __group__ \`string=\` Group title. Options with the same title are grouped under it
  + __icon__ \`string=\` Icon URI, Data URI is possible
  */
-class QueryAssist extends Component {
-  static 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
-  };
-  static defaultProps = {
-    onApply: noop,
-    onChange: noop,
-    onApplySuggestion: noop,
-    onClear: noop,
-    onFocusChange: noop,
-    size: Size.L
-  };
-  static getDerivedStateFromProps(_ref, _ref2) {
-    let {
-      query
-    } = _ref;
-    let {
-      prevQuery
-    } = _ref2;
-    const nextState = {
-      prevQuery: query
-    };
-    if (typeof query === 'string' && query !== prevQuery) {
-      nextState.query = query;
-      nextState.placeholderEnabled = !query;
-    }
-    return nextState;
-  }
-  constructor(props) {
-    super(props);
-    const query = props.query || '';
-    this.immediateState = {
-      query,
-      caret: typeof props.caret === 'number' && Number.isFinite(props.caret) ? props.caret : query.length,
-      focus: Boolean(props.autoOpen || props.focus)
-    };
-  }
-  state = {
-    dirty: !this.props.query,
-    query: this.props.query,
-    placeholderEnabled: !this.props.query,
-    shortcuts: !!this.props.focus,
-    suggestions: [],
-    showPopup: false
-  };
-  componentDidMount() {
-    const query = this.props.query || '';
-    this.immediateState = {
-      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);
-  }
-  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;
-  }
-  componentDidUpdate(prevProps) {
-    const {
-      caret,
-      delay,
-      query
-    } = this.props;
-    const queryChanged = query !== prevProps.query;
-    this.updateFocus(prevProps);
-    this.setupRequestHandler(delay);
-    const shouldSetCaret = typeof caret === 'number' && caret !== prevProps.caret;
-    if (shouldSetCaret) {
-      this.immediateState.prevCaret = prevProps.caret;
-      this.immediateState.caret = caret;
-    }
-    if (typeof query === 'string' && queryChanged && query !== this.immediateState.query) {
-      this.immediateState.query = query;
-      if (query && (this.props.autoOpen === 'force' || prevProps.autoOpen && query.length > 0)) {
-        this.requestData?.();
-      } else if (query) {
-        this.requestStyleRanges();
+var QueryAssist = /*#__PURE__*/function (_Component) {
+  function QueryAssist(_props) {
+    var _this;
+    _classCallCheck(this, QueryAssist);
+    _this = _callSuper(this, QueryAssist, [_props]);
+    _defineProperty(_this, "state", {
+      dirty: !_this.props.query,
+      query: _this.props.query,
+      placeholderEnabled: !_this.props.query,
+      shortcuts: !!_this.props.focus,
+      suggestions: [],
+      showPopup: false
+    });
+    _defineProperty(_this, "immediateState", void 0);
+    _defineProperty(_this, "requestData", void 0);
+    _defineProperty(_this, "ngModelStateField", ngModelStateField);
+    // An array of {query: string; caret: number}[]
+    _defineProperty(_this, "historyStack", []);
+    _defineProperty(_this, "mouseIsDownOnPopup", void 0);
+    _defineProperty(_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();
       }
-    }
-  }
-  static ngModelStateField = ngModelStateField;
-  immediateState;
-  requestData;
-  ngModelStateField = ngModelStateField;
-  // An array of {query: string; caret: number}[]
-  historyStack = [];
-  mouseIsDownOnPopup;
-  handleFocusChange = e => {
-    // otherwise it's blur and false
-    const 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
+      if (!_this.mouseIsDownOnPopup) {
+        _this.props.onFocusChange({
+          focus
+        });
+      }
+      _this.setState({
+        shortcuts: focus
       });
-    }
-    this.setState({
-      shortcuts: focus
     });
-  };
-  node;
-  nodeRef = node => {
-    this.node = node;
-  };
-  updateFocus(_ref3) {
-    let {
-      focus,
-      caret
-    } = _ref3;
-    const isCaretChanged = caret !== this.props.caret;
-    const isFocusChanged = focus !== this.props.focus;
-    if (isFocusChanged || isCaretChanged) {
-      const focusValue = isFocusChanged ? this.props.focus : true;
-      this.setFocus(focusValue);
-    }
-  }
-  setCaretPosition = (() => {
-    var _this = this;
-    return function () {
-      let params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-      const queryLength = _this.immediateState.query != null ? _this.immediateState.query.length : 0;
-      const newCaretPosition = _this.immediateState.caret < queryLength ? _this.immediateState.caret : queryLength;
+    _defineProperty(_this, "node", void 0);
+    _defineProperty(_this, "nodeRef", function (node) {
+      _this.node = node;
+    });
+    _defineProperty(_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?.setPosition(newCaretPosition >= 0 ? newCaretPosition : -1);
+          (_this$caret = _this.caret) === null || _this$caret === 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) {
-          _this.caret?.setPosition(_this.immediateState.selection);
+          var _this$caret2;
+          (_this$caret2 = _this.caret) === null || _this$caret2 === void 0 || _this$caret2.setPosition(_this.immediateState.selection);
         } else if (_this.immediateState.selection === undefined || params.forceSetCaret) {
-          _this.caret?.setPosition(-1);
+          var _this$caret3;
+          (_this$caret3 = _this.caret) === null || _this$caret3 === void 0 || _this$caret3.setPosition(-1);
         }
       }
-    };
-  })();
-  scrollInput() {
-    const caretOffset = this.caret?.getOffset();
-    if (this.input?.clientWidth !== this.input?.scrollWidth && caretOffset != null && this.input?.clientWidth != null && caretOffset > this.input.clientWidth) {
-      this.input.scrollLeft += caretOffset;
-    }
-  }
-  getQuery() {
-    var _this$input$textConte;
-    return (_this$input$textConte = this.input?.textContent?.replace(/\s/g, ' ')) !== null && _this$input$textConte !== void 0 ? _this$input$textConte : '';
-  }
-  isRenderingGlassOrLoader() {
-    const renderLoader = this.props.loader !== false && this.state.loading;
-    return this.props.glass || renderLoader;
-  }
-  togglePlaceholder = () => {
-    const query = this.getQuery();
-    const currentQueryIsEmpty = this.immediateState.query === '';
-    const newQueryIsEmpty = query === '';
-    if (newQueryIsEmpty !== currentQueryIsEmpty) {
-      this.setState({
-        placeholderEnabled: newQueryIsEmpty
-      });
-    }
-  };
-  isComposing;
-  handleInput = e => {
-    var _currentCaret$positio;
-    this.togglePlaceholder();
-    const currentCaret = this.caret?.getPosition();
-    const props = {
-      dirty: true,
-      query: this.getQuery(),
-      caret: typeof currentCaret === 'number' ? currentCaret : (_currentCaret$positio = 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;
-      let i = 0;
-      while (this.state.query[i] === this.immediateState.query[i] && i < this.state.query.length - 1) {
-        i++;
-      }
-      const diff = this.immediateState.query.length - this.state.query.length;
-      const originalIndex = this.immediateState.caret - diff;
-      const ranges = [...((_this$state$styleRang = this.state.styleRanges) !== null && _this$state$styleRang !== void 0 ? _this$state$styleRang : [])];
-      const range = ranges.find(r => originalIndex >= r.start && originalIndex <= r.start + r.length);
-      if (range) {
-        range.length += diff;
-      }
-      ranges.filter(r => r.start > originalIndex).forEach(r => {
-        r.start += diff;
-      });
-    }
-    this.props.onChange(props);
-    if (this.props.autoOpen === 'force' || props.query.length > 0) {
-      this.requestData?.();
-    }
-  };
-  // It's necessary to prevent new element creation before any other hooks
-  handleEnter = e => {
-    if (e.key === 'Enter') {
-      preventDefault(e);
-    }
-  };
-  handleTab = e => {
-    const list = this._popup && this._popup.list;
-    const suggestion = list && (list.getSelected() || list.getFirst());
-    if (suggestion && this.state.showPopup) {
-      preventDefault(e);
-      if (this.getQuery() !== this.immediateState.suggestionsQuery) {
+    });
+    _defineProperty(_this, "togglePlaceholder", function () {
+      var query = _this.getQuery();
+      var currentQueryIsEmpty = _this.immediateState.query === '';
+      var newQueryIsEmpty = query === '';
+      if (newQueryIsEmpty !== currentQueryIsEmpty) {
+        _this.setState({
+          placeholderEnabled: newQueryIsEmpty
+        });
+      }
+    });
+    _defineProperty(_this, "isComposing", void 0);
+    _defineProperty(_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 || _this$requestData.call(_this2);
+      }
+    });
+    // It's necessary to prevent new element creation before any other hooks
+    _defineProperty(_this, "handleEnter", function (e) {
+      if (e.key === 'Enter') {
+        preventDefault(e);
+      }
+    });
+    _defineProperty(_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 this.handleComplete(suggestion, true);
-    }
-    if (this.state.loading) {
-      preventDefault(e);
-      return false;
-    }
-    return true;
-  };
-  setState = (state, resolve) => {
-    super.setState(state, () => {
-      this._pushHistory(state);
-      resolve?.();
+      return true;
     });
-  };
-  _pushHistory(state) {
-    const queryIsSet = ('query' in state);
-    const queryIsSame = this.historyStack[0]?.query === state.query;
-    if (queryIsSet && !queryIsSame) {
-      var _this$caret$getPositi;
-      this.historyStack.unshift({
-        query: state.query,
-        caret: (_this$caret$getPositi = this.caret?.getPosition({
-          avoidFocus: true
-        })) !== null && _this$caret$getPositi !== void 0 ? _this$caret$getPositi : -1
+    _defineProperty(_this, "setState", function (state, resolve) {
+      _get((_getPrototypeOf(QueryAssist.prototype)), "setState", _this).call(_this, state, function () {
+        _this._pushHistory(state);
+        resolve === null || resolve === void 0 || resolve();
       });
-    }
-  }
-  undo = e => {
-    const previous = this.historyStack.splice(0, 2)[1];
-    if (!previous) {
-      return;
-    }
-    this.setState({
-      query: previous.query
-    }, () => {
-      this.caret?.setPosition(previous.caret);
-      this.handleInput(e);
     });
-  };
-  handlePaste = e => {
-    const INSERT_COMMAND = 'insertText';
-    if (e.clipboardData && document.queryCommandSupported(INSERT_COMMAND)) {
-      preventDefault(e);
-      const text = cleanText(e.clipboardData.getData('text/plain'));
-      document.execCommand(INSERT_COMMAND, false, text);
-      this.handleInput(e);
-    }
-  };
-  handleCaretMove = e => {
-    var _currentCaret$positio2;
-    if (this.isComposing) {
-      return;
-    }
-    const currentCaret = this.caret?.getPosition();
-    const caret = typeof currentCaret === 'number' ? currentCaret : (_currentCaret$positio2 = currentCaret?.position) !== null && _currentCaret$positio2 !== void 0 ? _currentCaret$positio2 : 0;
-    const popupHidden = !this.state.showPopup && e.type === 'click';
-    if (!this.props.disabled && (caret !== this.immediateState.caret || popupHidden)) {
-      this.immediateState.prevCaret = this.immediateState.caret;
-      this.immediateState.caret = caret;
-      this.scrollInput();
-      if (this.immediateState.query.length > 0) {
-        this.requestData?.();
+    _defineProperty(_this, "undo", function (e) {
+      var previous = _this.historyStack.splice(0, 2)[1];
+      if (!previous) {
+        return;
       }
-    }
-    if (this.props.autoOpen !== 'force' && this.immediateState.query.length < 1) {
-      this.setState({
-        showPopup: false
+      _this.setState({
+        query: previous.query
+      }, function () {
+        var _this$caret5;
+        (_this$caret5 = _this.caret) === null || _this$caret5 === void 0 || _this$caret5.setPosition(previous.caret);
+        _this.handleInput(e);
       });
-    }
-  };
-  handleStyleRangesResponse = _ref4 => {
-    let {
-      suggestions,
-      ...restProps
-    } = _ref4;
-    return this.handleResponse(restProps);
-  };
-  handleResponse = (() => {
-    var _this2 = this;
-    return function (_ref5) {
-      let {
-        query = '',
-        caret = 0,
-        styleRanges,
-        suggestions = []
-      } = _ref5;
-      let afterCompletion = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-      return new Promise((resolve, reject) => {
-        if (query === _this2.getQuery() && (caret === _this2.immediateState.caret || _this2.immediateState.caret === undefined)) {
+    });
+    _defineProperty(_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(_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.prevCaret = _this.immediateState.caret;
+        _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 || _this$requestData2.call(_this3);
+        }
+      }
+      if (_this.props.autoOpen !== 'force' && _this.immediateState.query.length < 1) {
+        _this.setState({
+          showPopup: false
+        });
+      }
+    });
+    _defineProperty(_this, "handleStyleRangesResponse", function (_ref) {
+      _ref.suggestions;
+        var restProps = _objectWithoutProperties(_ref, _excluded);
+      return _this.handleResponse(restProps);
+    });
+    _defineProperty(_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 (!_this2.node) {
+          if (!_this.node) {
             return;
           }
-          const state = {
-            dirty: _this2.immediateState.dirty,
+          var state = {
+            dirty: _this.immediateState.dirty,
             loading: false,
             placeholderEnabled: !query,
             query,
             suggestions,
-            showPopup: !!suggestions.length && (_this2.props.autoOpen === 'force' || !afterCompletion)
+            showPopup: !!suggestions.length && (_this.props.autoOpen === 'force' || !afterCompletion)
           };
-          _this2.immediateState.suggestionsQuery = query;
+          _this.immediateState.suggestionsQuery = query;
           // Do not update deep equal styleRanges to simplify shouldComponentUpdate check
-          if (!deepEqual(_this2.state.styleRanges, styleRanges)) {
+          if (!deepEqual(_this.state.styleRanges, styleRanges)) {
             state.styleRanges = styleRanges;
           }
-          _this2.immediateState.selection = _this2.caret?.getPosition({
+          _this.immediateState.selection = (_this$caret7 = _this.caret) === null || _this$caret7 === void 0 ? void 0 : _this$caret7.getPosition({
             avoidFocus: true
           });
-          _this2.setState(state, resolve);
+          _this.setState(state, resolve);
         } else {
           reject(new Error('Current and response queries mismatch'));
         }
       });
-    };
-  })();
-  handleApply = () => {
-    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);
-  };
-  handleComplete = (data, replace) => {
-    var _suggestion$caret, _suggestion$caret2;
-    if (!data || !data.data) {
-      this.handleApply();
-      return;
-    }
-    const query = this.getQuery();
-    const currentCaret = this.immediateState.caret;
-    const suggestion = data.data;
-    const prefix = suggestion.prefix || '';
-    const suffix = suggestion.suffix || '';
-    const state = {
-      prevCaret: currentCaret,
-      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);
-    const 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.requestData?.(true);
-  };
-  requestStyleRanges = () => {
-    const {
-      query,
-      caret
-    } = this.immediateState;
-    if (!query) {
-      return Promise.reject(new Error('Query is empty'));
-    }
-    return this.sendRequest({
-      query,
-      caret,
-      omitSuggestions: true
-    }).then(this.handleStyleRangesResponse).catch(noop);
-  };
-  requestHandler = (() => {
-    var _this3 = this;
-    return function () {
-      let afterCompletion = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-      if (_this3.props.disabled) {
-        return Promise.reject(new Error('QueryAssist(@jetbrains/ring-ui): null exception'));
+    });
+    _defineProperty(_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(_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 = {
+        prevCaret: currentCaret,
+        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
+        });
       }
-      const {
+      _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 || _this$requestData3.call(_this4, true);
+    });
+    _defineProperty(_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,
-        caret
-      } = _this3.immediateState;
-      return _this3.sendRequest({
+        caret,
+        omitSuggestions: true
+      }).then(_this.handleStyleRangesResponse).catch(noop);
+    });
+    _defineProperty(_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,
         caret
-      }).then(data => _this3.handleResponse(data, afterCompletion)).catch(noop);
-    };
-  })();
-  sendRequest(params) {
-    const value = this.props.dataSource(params);
-    const dataPromise = Promise.resolve(value);
-    const CLOSE_POPUP_TIMEOUT = 500;
-    // Close popup after timeout between long requests
-    const timeout = window.setTimeout(() => {
-      if (this.node) {
-        this.setState({
-          loading: true
-        });
+      }).then(function (data) {
+        return _this.handleResponse(data, afterCompletion);
+      }).catch(noop);
+    });
+    _defineProperty(_this, "handleCtrlSpace", function (e) {
+      preventDefault(e);
+      if (!_this.state.showPopup) {
+        var _this$requestData4, _this5;
+        (_this$requestData4 = (_this5 = _this).requestData) === null || _this$requestData4 === void 0 || _this$requestData4.call(_this5);
       }
-      if (params.query === this.immediateState.query) {
-        this.closePopup();
+    });
+    _defineProperty(_this, "trackPopupMouseState", function (e) {
+      _this.mouseIsDownOnPopup = e.type === 'mousedown';
+    });
+    _defineProperty(_this, "trackCompositionState", function (e) {
+      _this.isComposing = e.type !== 'compositionend';
+    });
+    _defineProperty(_this, "closePopup", function () {
+      if (_this.node) {
+        _this.setState({
+          showPopup: false
+        });
       }
-    }, CLOSE_POPUP_TIMEOUT);
-    dataPromise.then(() => window.clearTimeout(timeout)).catch(() => {
-      window.clearTimeout(timeout);
-      this.setState({
+    });
+    _defineProperty(_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
       });
     });
-    return dataPromise;
+    _defineProperty(_this, "input", void 0);
+    _defineProperty(_this, "caret", void 0);
+    _defineProperty(_this, "inputRef", function (node) {
+      if (!node) {
+        return;
+      }
+      _this.input = node;
+      _this.caret = new Caret(_this.input);
+    });
+    _defineProperty(_this, "_popup", void 0);
+    _defineProperty(_this, "popupRef", function (node) {
+      _this._popup = node;
+    });
+    _defineProperty(_this, "placeholder", void 0);
+    _defineProperty(_this, "placeholderRef", function (node) {
+      _this.placeholder = node;
+    });
+    _defineProperty(_this, "glass", void 0);
+    _defineProperty(_this, "glassRef", function (node) {
+      _this.glass = node;
+    });
+    _defineProperty(_this, "loader", void 0);
+    _defineProperty(_this, "loaderRef", function (node) {
+      _this.loader = node;
+    });
+    _defineProperty(_this, "clear", void 0);
+    _defineProperty(_this, "clearRef", function (node) {
+      _this.clear = node;
+    });
+    _defineProperty(_this, "shortcutsScope", getUID('ring-query-assist-'));
+    _defineProperty(_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
+    });
+    _defineProperty(_this, "listShortcutsMap", {
+      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;
   }
-  getPopupOffset(suggestions) {
-    const ICON_SPACING = 12;
-    const minOffset = this.isRenderingGlassOrLoader() ? ICON_SPACING : 0;
-    if (!this.input) {
-      return minOffset;
-    }
-    // First suggestion should be enough?
-    const suggestion = suggestions && suggestions[0];
-    // Check if suggestion begins not from the end
-    const completionStart = suggestion && suggestion.completionStart !== suggestion.completionEnd && suggestion.completionStart;
-    const inputChildren = this.input.firstChild instanceof Element && this.input.firstChild.children;
-    const completionStartNode = inputChildren && typeof completionStart === 'number' && inputChildren[Math.min(completionStart, inputChildren.length - 1)];
-    let offset = completionStartNode && getRect(completionStartNode).right - getRect(this.input).left;
-    if (!offset) {
-      var _this$caret$getOffset;
-      const caret = (_this$caret$getOffset = this.caret?.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;
+  _inherits(QueryAssist, _Component);
+  return _createClass(QueryAssist, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var query = this.props.query || '';
+      this.immediateState = {
+        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 {
-        offset = caret;
+        this.requestStyleRanges().catch(noop);
       }
+      this.setCaretPosition();
+      this._pushHistory(this.state);
     }
-    const result = offset - POPUP_COMPENSATION;
-    return result < minOffset ? minOffset : result;
-  }
-  handleCtrlSpace = e => {
-    preventDefault(e);
-    if (!this.state.showPopup) {
-      this.requestData?.();
+  }, {
+    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;
     }
-  };
-  trackPopupMouseState = e => {
-    this.mouseIsDownOnPopup = e.type === 'mousedown';
-  };
-  trackCompositionState = e => {
-    this.isComposing = e.type !== 'compositionend';
-  };
-  closePopup = () => {
-    if (this.node) {
-      this.setState({
-        showPopup: false
-      });
+  }, {
+    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.prevCaret = prevProps.caret;
+        this.immediateState.caret = caret;
+      }
+      if (typeof query === 'string' && queryChanged && query !== this.immediateState.query) {
+        this.immediateState.query = query;
+        if (query && (this.props.autoOpen === 'force' || prevProps.autoOpen && query.length > 0)) {
+          var _this$requestData5;
+          (_this$requestData5 = this.requestData) === null || _this$requestData5 === void 0 || _this$requestData5.call(this);
+        } else if (query) {
+          this.requestStyleRanges();
+        }
+      }
     }
-  };
-  clearQuery = () => {
-    const 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
-    });
-  };
-  blurInput() {
-    this.immediateState.selection = null;
-    if (!this.props.focus) {
-      this.caret?.target.blur();
+  }, {
+    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);
+      }
     }
-  }
-  /**
-   * 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.
-   */
-  setupRequestHandler(delay) {
-    const needDelay = typeof delay === 'number';
-    const hasDelay = this.requestData !== this.requestHandler;
-    if (!this.requestData || hasDelay !== needDelay) {
-      if (needDelay) {
-        this.requestData = debounce(this.requestHandler, delay);
-      } else {
-        this.requestData = this.requestHandler;
+  }, {
+    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;
       }
     }
-  }
-  _renderSuggestion(suggestion) {
-    const {
-      ITEM
-    } = PopupMenu.ListProps.Type;
-    const {
-      description,
-      icon,
-      group
-    } = suggestion;
-    const key = QueryAssistSuggestions.createKey(suggestion);
-    const label = QueryAssistSuggestions.renderLabel(suggestion);
-    return {
-      key,
-      icon,
-      label,
-      description,
-      group,
-      rgItemType: ITEM,
-      data: suggestion
-    };
-  }
-  renderSuggestions() {
-    const {
-      suggestions
-    } = this.state;
-    if (!suggestions || !suggestions.length) {
-      return [];
+  }, {
+    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 : '';
     }
-    return QueryAssistSuggestions.renderList(suggestions, this._renderSuggestion);
-  }
-  renderQuery() {
-    const {
-      dirty,
-      styleRanges,
-      query
-    } = this.state;
-    const classes = [];
-    const LETTER_CLASS = 'letter';
-    const LETTER_DEFAULT_CLASS = modules_da7ab055.letterDefault;
-    if (styleRanges && styleRanges.length) {
-      styleRanges.forEach((item, index) => {
-        if (dirty && index === styleRanges.length - 1 && item.style === 'text') {
-          return;
+  }, {
+    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
+          });
         }
-        const styleName = `${LETTER_CLASS}-${item.style.replace('_', '-')}`;
-        for (let i = item.start; i < item.start + item.length; i++) {
-          classes[i] = modules_da7ab055[styleName];
+        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;
     }
-    return query && Array.from(query).map((letter, index, letters) => {
-      const className = classNames(modules_da7ab055.letter, classes[index] || LETTER_DEFAULT_CLASS);
-      const 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 === ' ' ? '\u00a0' : letter);
-    });
-  }
-  setFocus(focus) {
-    this.setState({
-      shortcuts: !!focus
-    });
-    const 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: "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;
     }
-  }
-  input;
-  caret;
-  inputRef = node => {
-    if (!node) {
-      return;
+  }, {
+    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 || _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;
+        }
+      }
     }
-    this.input = node;
-    this.caret = new Caret(this.input);
-  };
-  _popup;
-  popupRef = node => {
-    this._popup = node;
-  };
-  placeholder;
-  placeholderRef = node => {
-    this.placeholder = node;
-  };
-  glass;
-  glassRef = node => {
-    this.glass = node;
-  };
-  loader;
-  loaderRef = node => {
-    this.loader = node;
-  };
-  clear;
-  clearRef = node => {
-    this.clear = node;
-  };
-  shortcutsScope = getUID('ring-query-assist-');
-  shortcutsMap = {
-    del: noop,
-    enter: () => this.handleComplete(),
-    'command+enter': () => this.handleComplete(),
-    'ctrl+enter': () => this.handleComplete(),
-    'ctrl+space': this.handleCtrlSpace,
-    tab: this.handleTab,
-    'meta+z': this.undo,
-    right: noop,
-    left: noop,
-    space: noop,
-    home: noop,
-    end: noop
-  };
-  listShortcutsMap = {
-    home: noop,
-    end: noop
-  };
-  renderActions() {
-    const actions = [...(this.props.actions || [])];
-    const renderClear = this.props.clear && !!this.state.query;
-    if (renderClear) {
-      actions.push( /*#__PURE__*/React.createElement(I18nContext.Consumer, {
-        key: 'clearAction'
-      }, _ref6 => {
-        var _this$props$translati;
-        let {
-          translate
-        } = _ref6;
-        return /*#__PURE__*/React.createElement(Button, {
-          icon: closeIcon,
-          className: modules_da7ab055.clear,
-          title: (_this$props$translati = this.props.translations?.clearTitle) !== null && _this$props$translati !== void 0 ? _this$props$translati : translate('clearTitle'),
-          ref: this.clearRef,
-          onClick: this.clearQuery,
-          "data-test": "query-assist-clear-icon"
+  }, {
+    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,
+        icon,
+        label,
+        description,
+        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 === ' ' ? '\u00a0' : 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 _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)], {
+        [modules_da7ab055.queryAssist]: true,
+        [modules_da7ab055.withIcon]: renderGlass && !huge || renderLoader,
+        [modules_da7ab055.huge]: huge,
+        [modules_da7ab055.queryAssistDisabled]: this.props.disabled
+      });
+      var inputClasses = classNames(this.props.inputClassName, {
+        ["".concat(modules_da7ab055.input, " ring-js-shortcuts")]: true,
+        [modules_da7ab055.inputGap]: actions.length || this.isRenderingGlassOrLoader() && !glass,
+        [modules_da7ab055.inputGap2]: actions.length === 2,
+        // TODO: replace with flex-box layout
+        [modules_da7ab055.inputRevertOrder]: !glass || huge
+      });
+      var placeholderStyles = classNames({
+        [modules_da7ab055.placeholder]: true,
+        [modules_da7ab055.hugePlaceholder]: huge,
+        [modules_da7ab055.withoutGlass]: !glass || !renderLoader && huge
+      });
+      return /*#__PURE__*/React.createElement(ControlsHeightContext.Provider, {
+        value: ControlsHeight.M
+      }, /*#__PURE__*/React.createElement(I18nContext.Consumer, null, function (_ref5) {
+        var _translations$searchT, _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, {
+            [modules_da7ab055.loaderOnTheRight]: !glass && !huge,
+            [modules_da7ab055.loaderActive]: renderLoader
+          }),
+          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,
+          shortcutsMap: _this8.listShortcutsMap,
+          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"
+        })));
       }));
     }
-    return actions;
-  }
-  render() {
-    const {
-      glass,
-      'data-test': dataTest,
-      className,
-      useCustomItemRender,
-      huge,
-      size,
-      translations
-    } = this.props;
-    const renderPlaceholder = !!this.props.placeholder && this.state.placeholderEnabled;
-    const renderLoader = this.props.loader !== false && this.state.loading;
-    const renderGlass = glass && !renderLoader;
-    const actions = this.renderActions();
-    const containerClasses = classNames(className, modules_88cfaf40[`size${huge ? Size.FULL : size}`], {
-      [modules_da7ab055.queryAssist]: true,
-      [modules_da7ab055.withIcon]: renderGlass && !huge || renderLoader,
-      [modules_da7ab055.huge]: huge,
-      [modules_da7ab055.queryAssistDisabled]: this.props.disabled
-    });
-    const inputClasses = classNames(this.props.inputClassName, {
-      [`${modules_da7ab055.input} ring-js-shortcuts`]: true,
-      [modules_da7ab055.inputGap]: actions.length || this.isRenderingGlassOrLoader() && !glass,
-      [modules_da7ab055.inputGap2]: actions.length === 2,
-      // TODO: replace with flex-box layout
-      [modules_da7ab055.inputRevertOrder]: !glass || huge
-    });
-    const placeholderStyles = classNames({
-      [modules_da7ab055.placeholder]: true,
-      [modules_da7ab055.hugePlaceholder]: huge,
-      [modules_da7ab055.withoutGlass]: !glass || !renderLoader && huge
-    });
-    return /*#__PURE__*/React.createElement(ControlsHeightContext.Provider, {
-      value: ControlsHeight.M
-    }, /*#__PURE__*/React.createElement(I18nContext.Consumer, null, _ref7 => {
-      var _translations$searchT, _translations$searchT2, _translations$searchT3;
-      let {
-        translate
-      } = _ref7;
-      return /*#__PURE__*/React.createElement("div", {
-        "data-test": joinDataTestAttributes('ring-query-assist', dataTest),
-        className: containerClasses,
-        role: "presentation",
-        ref: this.nodeRef
-      }, this.state.shortcuts && /*#__PURE__*/React.createElement(Shortcuts, {
-        map: this.shortcutsMap,
-        scope: this.shortcutsScope
-      }), renderGlass && !huge && /*#__PURE__*/React.createElement(Icon, {
-        glyph: searchIcon,
-        className: modules_da7ab055.icon,
-        title: (_translations$searchT = translations?.searchTitle) !== null && _translations$searchT !== void 0 ? _translations$searchT : translate('searchTitle'),
-        ref: this.glassRef,
-        "data-test": "query-assist-search-icon"
-      }), renderLoader && /*#__PURE__*/React.createElement("div", {
-        className: classNames(modules_da7ab055.icon, modules_da7ab055.loader, {
-          [modules_da7ab055.loaderOnTheRight]: !glass && !huge,
-          [modules_da7ab055.loaderActive]: renderLoader
-        }),
-        ref: this.loaderRef
-      }, /*#__PURE__*/React.createElement(LoaderInline, null)), /*#__PURE__*/React.createElement(ContentEditable, {
-        "aria-label": (_translations$searchT2 = translations?.searchTitle) !== null && _translations$searchT2 !== void 0 ? _translations$searchT2 : translate('searchTitle'),
-        className: inputClasses,
-        "data-test": "ring-query-assist-input",
-        inputRef: this.inputRef,
-        disabled: this.props.disabled,
-        onComponentUpdate: () => this.setCaretPosition({
-          fromContentEditable: true
-        }),
-        onBlur: this.handleFocusChange,
-        onClick: this.handleCaretMove,
-        onCompositionStart: this.trackCompositionState,
-        onCompositionEnd: this.trackCompositionState,
-        onFocus: this.handleFocusChange,
-        onInput: this.handleInput // To support IE use the same method
-        ,
-        onKeyUp: this.handleInput // to handle input and key up
-        ,
-        onKeyDown: this.handleEnter,
-        onPaste: this.handlePaste,
-        spellCheck: "false"
-      }, this.state.query && /*#__PURE__*/React.createElement("span", null, this.renderQuery())), renderPlaceholder && /*#__PURE__*/React.createElement("button", {
-        type: "button",
-        className: placeholderStyles,
-        ref: this.placeholderRef,
-        onClick: this.handleCaretMove,
-        "data-test": "query-assist-placeholder"
-      }, this.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: !this.state.showPopup,
-        onCloseAttempt: this.closePopup,
-        ref: this.popupRef,
-        anchorElement: this.node,
-        keepMounted: true,
-        attached: true,
-        className: this.props.popupClassName,
-        directions: [PopupMenu.PopupProps.Directions.BOTTOM_RIGHT],
-        data: useCustomItemRender ? this.state.suggestions : this.renderSuggestions(),
-        "data-test": "ring-query-assist-popup",
-        hint: this.props.hint,
-        shortcutsMap: this.listShortcutsMap,
-        hintOnSelection: this.props.hintOnSelection,
-        left: this.getPopupOffset(this.state.suggestions),
-        maxHeight: PopupMenu.PopupProps.MaxHeight.SCREEN,
-        onMouseDown: this.trackPopupMouseState,
-        onMouseUp: this.trackPopupMouseState,
-        onSelect: item => this.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?.searchTitle) !== null && _translations$searchT3 !== void 0 ? _translations$searchT3 : translate('searchTitle'),
-        onClick: this.handleApply,
-        ref: this.glassRef,
-        "data-test": "query-assist-search-icon"
-      })));
-    }));
-  }
-}
-const RerenderableQueryAssist = rerenderHOC(QueryAssist);
+  }], [{
+    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;
+    }
+  }]);
+}(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 };