@jetbrains/ring-ui 5.0.126 → 5.0.128

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

@@ -1,4 +1,3 @@
-import { _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import debounce from 'just-debounce-it';
@@ -21,6 +20,7 @@ import { ControlsHeightContext, ControlsHeight } from '../global/controls-height
 import { Size } from '../input/input.js';
 import { m as modules_88cfaf40 } from '../_helpers/input.js';
 import { Q as QueryAssistSuggestions, m as modules_da7ab055 } from '../_helpers/query-assist__suggestions.js';
+import '../_helpers/_rollupPluginBabelHelpers.js';
 import 'react-dom/server';
 import '../popup/popup.js';
 import 'react-dom';
@@ -119,6 +119,110 @@ function cleanText(text) {
  + __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,
+    translations: {
+      searchTitle: 'Search',
+      clearTitle: 'Clear search input'
+    }
+  };
   static getDerivedStateFromProps(_ref, _ref2) {
     let {
       query
@@ -135,400 +239,23 @@ class QueryAssist extends Component {
     }
     return nextState;
   }
-  constructor(_props) {
-    var _this;
-    super(_props);
-    _this = this;
-    _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", 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
-        });
-      }
-      this.setState({
-        shortcuts: focus
-      });
-    });
-    _defineProperty(this, "node", void 0);
-    _defineProperty(this, "nodeRef", node => {
-      this.node = node;
-    });
-    _defineProperty(this, "setCaretPosition", 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;
-      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) {
-          // Set to end of field value if newCaretPosition is inappropriate
-          _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);
-        } else if (_this.immediateState.selection === undefined || params.forceSetCaret) {
-          _this.caret?.setPosition(-1);
-        }
-      }
-    });
-    _defineProperty(this, "togglePlaceholder", () => {
-      const query = this.getQuery();
-      const currentQueryIsEmpty = this.immediateState.query === '';
-      const newQueryIsEmpty = query === '';
-      if (newQueryIsEmpty !== currentQueryIsEmpty) {
-        this.setState({
-          placeholderEnabled: newQueryIsEmpty
-        });
-      }
-    });
-    _defineProperty(this, "isComposing", void 0);
-    _defineProperty(this, "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
-    _defineProperty(this, "handleEnter", e => {
-      if (e.key === 'Enter') {
-        preventDefault(e);
-      }
-    });
-    _defineProperty(this, "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) {
-          return false;
-        }
-        return this.handleComplete(suggestion, true);
-      }
-      if (this.state.loading) {
-        preventDefault(e);
-        return false;
-      }
-      return true;
-    });
-    _defineProperty(this, "setState", (state, resolve) => {
-      super.setState(state, () => {
-        this._pushHistory(state);
-        resolve?.();
-      });
-    });
-    _defineProperty(this, "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);
-      });
-    });
-    _defineProperty(this, "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);
-      }
-    });
-    _defineProperty(this, "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.caret = caret;
-        this.scrollInput();
-        if (this.immediateState.query.length > 0) {
-          this.requestData?.();
-        }
-      }
-      if (this.immediateState.query.length < 1) {
-        this.setState({
-          showPopup: false
-        });
-      }
-    });
-    _defineProperty(this, "handleStyleRangesResponse", _ref3 => {
-      let {
-        suggestions,
-        ...restProps
-      } = _ref3;
-      return this.handleResponse(restProps);
-    });
-    _defineProperty(this, "handleResponse", function (_ref4) {
-      let {
-        query = '',
-        caret = 0,
-        styleRanges,
-        suggestions = []
-      } = _ref4;
-      let afterCompletion = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-      return new Promise((resolve, reject) => {
-        if (query === _this.getQuery() && (caret === _this.immediateState.caret || _this.immediateState.caret === undefined)) {
-          // Do not setState on unmounted component
-          if (!_this.node) {
-            return;
-          }
-          const state = {
-            dirty: _this.immediateState.dirty,
-            loading: false,
-            placeholderEnabled: !query,
-            query,
-            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.caret?.getPosition({
-            avoidFocus: true
-          });
-          _this.setState(state, resolve);
-        } else {
-          reject(new Error('Current and response queries mismatch'));
-        }
-      });
-    });
-    _defineProperty(this, "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);
-    });
-    _defineProperty(this, "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 = {
-        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);
-    });
-    _defineProperty(this, "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);
-    });
-    _defineProperty(this, "requestHandler", function () {
-      let 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'));
-      }
-      const {
-        query,
-        caret
-      } = _this.immediateState;
-      return _this.sendRequest({
-        query,
-        caret
-      }).then(data => _this.handleResponse(data, afterCompletion)).catch(noop);
-    });
-    _defineProperty(this, "handleCtrlSpace", e => {
-      preventDefault(e);
-      if (!this.state.showPopup) {
-        this.requestData?.();
-      }
-    });
-    _defineProperty(this, "trackPopupMouseState", e => {
-      this.mouseIsDownOnPopup = e.type === 'mousedown';
-    });
-    _defineProperty(this, "trackCompositionState", e => {
-      this.isComposing = e.type !== 'compositionend';
-    });
-    _defineProperty(this, "closePopup", () => {
-      if (this.node) {
-        this.setState({
-          showPopup: false
-        });
-      }
-    });
-    _defineProperty(this, "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
-      });
-    });
-    _defineProperty(this, "input", void 0);
-    _defineProperty(this, "caret", void 0);
-    _defineProperty(this, "inputRef", node => {
-      if (!node) {
-        return;
-      }
-      this.input = node;
-      this.caret = new Caret(this.input);
-    });
-    _defineProperty(this, "_popup", void 0);
-    _defineProperty(this, "popupRef", node => {
-      this._popup = node;
-    });
-    _defineProperty(this, "placeholder", void 0);
-    _defineProperty(this, "placeholderRef", node => {
-      this.placeholder = node;
-    });
-    _defineProperty(this, "glass", void 0);
-    _defineProperty(this, "glassRef", node => {
-      this.glass = node;
-    });
-    _defineProperty(this, "loader", void 0);
-    _defineProperty(this, "loaderRef", node => {
-      this.loader = node;
-    });
-    _defineProperty(this, "clear", void 0);
-    _defineProperty(this, "clearRef", node => {
-      this.clear = node;
-    });
-    _defineProperty(this, "shortcutsScope", getUID('ring-query-assist-'));
-    _defineProperty(this, "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
-    });
-    const _query = _props.query || '';
+  constructor(props) {
+    super(props);
+    const 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)
+      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 = {
@@ -570,11 +297,44 @@ class QueryAssist extends Component {
       }
     }
   }
-  updateFocus(_ref5) {
+  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
+      });
+    }
+    this.setState({
+      shortcuts: focus
+    });
+  };
+  node;
+  nodeRef = node => {
+    this.node = node;
+  };
+  updateFocus(_ref3) {
     let {
       focus,
       caret
-    } = _ref5;
+    } = _ref3;
     const isCaretChanged = caret !== this.props.caret;
     const isFocusChanged = focus !== this.props.focus;
     if (isFocusChanged || isCaretChanged) {
@@ -582,6 +342,28 @@ class QueryAssist extends Component {
       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;
+      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) {
+          // Set to end of field value if newCaretPosition is inappropriate
+          _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);
+        } else if (_this.immediateState.selection === undefined || params.forceSetCaret) {
+          _this.caret?.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) {
@@ -596,6 +378,85 @@ class QueryAssist extends Component {
     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) {
+        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?.();
+    });
+  };
   _pushHistory(state) {
     const queryIsSet = ('query' in state);
     const queryIsSame = this.historyStack[0]?.query === state.query;
@@ -609,6 +470,177 @@ class QueryAssist extends Component {
       });
     }
   }
+  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.caret = caret;
+      this.scrollInput();
+      if (this.immediateState.query.length > 0) {
+        this.requestData?.();
+      }
+    }
+    if (this.immediateState.query.length < 1) {
+      this.setState({
+        showPopup: false
+      });
+    }
+  };
+  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)) {
+          // Do not setState on unmounted component
+          if (!_this2.node) {
+            return;
+          }
+          const state = {
+            dirty: _this2.immediateState.dirty,
+            loading: false,
+            placeholderEnabled: !query,
+            query,
+            suggestions,
+            showPopup: !!suggestions.length && !afterCompletion
+          };
+          _this2.immediateState.suggestionsQuery = query;
+          // Do not update deep equal styleRanges to simplify shouldComponentUpdate check
+          if (!deepEqual(_this2.state.styleRanges, styleRanges)) {
+            state.styleRanges = styleRanges;
+          }
+          _this2.immediateState.selection = _this2.caret?.getPosition({
+            avoidFocus: true
+          });
+          _this2.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 = {
+      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'));
+      }
+      const {
+        query,
+        caret
+      } = _this3.immediateState;
+      return _this3.sendRequest({
+        query,
+        caret
+      }).then(data => _this3.handleResponse(data, afterCompletion)).catch(noop);
+    };
+  })();
   sendRequest(params) {
     const value = this.props.dataSource(params);
     const dataPromise = Promise.resolve(value);
@@ -658,6 +690,42 @@ class QueryAssist extends Component {
     const result = offset - POPUP_COMPENSATION;
     return result < minOffset ? minOffset : result;
   }
+  handleCtrlSpace = e => {
+    preventDefault(e);
+    if (!this.state.showPopup) {
+      this.requestData?.();
+    }
+  };
+  trackPopupMouseState = e => {
+    this.mouseIsDownOnPopup = e.type === 'mousedown';
+  };
+  trackCompositionState = e => {
+    this.isComposing = e.type !== 'compositionend';
+  };
+  closePopup = () => {
+    if (this.node) {
+      this.setState({
+        showPopup: false
+      });
+    }
+  };
+  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) {
@@ -757,6 +825,50 @@ class QueryAssist extends Component {
       });
     }
   }
+  input;
+  caret;
+  inputRef = node => {
+    if (!node) {
+      return;
+    }
+    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
+  };
   renderActions() {
     const actions = [...(this.props.actions || [])];
     const renderClear = this.props.clear && !!this.state.query;
@@ -808,7 +920,7 @@ class QueryAssist extends Component {
     }, /*#__PURE__*/React.createElement("div", {
       "data-test": joinDataTestAttributes('ring-query-assist', dataTest),
       className: containerClasses,
-      role: "search",
+      role: "presentation",
       ref: this.nodeRef
     }, this.state.shortcuts && /*#__PURE__*/React.createElement(Shortcuts, {
       map: this.shortcutsMap,
@@ -827,7 +939,6 @@ class QueryAssist extends Component {
       ref: this.loaderRef
     }, /*#__PURE__*/React.createElement(LoaderInline, null)), /*#__PURE__*/React.createElement(ContentEditable, {
       "aria-label": this.props.translations.searchTitle,
-      role: "searchbox",
       className: inputClasses,
       "data-test": "ring-query-assist-input",
       inputRef: this.inputRef,
@@ -887,111 +998,6 @@ class QueryAssist extends 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,
-  translations: {
-    searchTitle: 'Search',
-    clearTitle: 'Clear search input'
-  }
-});
-_defineProperty(QueryAssist, "ngModelStateField", ngModelStateField);
 const RerenderableQueryAssist = rerenderHOC(QueryAssist);
 
 export { RerenderableQueryAssist, QueryAssist as default };