@jetbrains/ring-ui-built 7.0.65 → 7.0.70

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

@@ -1,8 +1,3 @@
-import { _ as _defineProperty, a as _objectWithoutProperties } from '../_helpers/_rollupPluginBabelHelpers.js';
-import 'core-js/modules/es.symbol.description.js';
-import 'core-js/modules/es.regexp.exec.js';
-import 'core-js/modules/es.string.replace.js';
-import 'core-js/modules/web.dom-collections.iterator.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Component } from 'react';
 import debounce from 'just-debounce-it';
@@ -32,12 +27,10 @@ import 'react-dom';
 import '../global/schedule-raf.js';
 import '../tab-trap/tab-trap.js';
 import '../popup/position.js';
-import 'core-js/modules/es.array.sort.js';
 import '../popup/popup.consts.js';
 import '../popup/popup.target.js';
 import '../popup/position-css.js';
 import '../list/list.js';
-import 'core-js/modules/es.string.trim.js';
 import 'react-virtualized/dist/es/List';
 import 'react-virtualized/dist/es/AutoSizer';
 import 'react-virtualized/dist/es/WindowScroller';
@@ -80,7 +73,6 @@ import '../_helpers/button.classes.js';
 import '../control-label/control-label.js';
 import '../i18n/i18n.js';
 
-const _excluded = ["suggestions"];
 const POPUP_COMPENSATION = PopupMenu.ListProps.Dimension.ITEM_PADDING + PopupMenu.PopupProps.Dimension.BORDER_WIDTH;
 const ngModelStateField = 'query';
 function noop() {}
@@ -127,13 +119,19 @@ function cleanText(text) {
  + __icon__ \`string=\` Icon URI, Data URI is possible
  */
 class QueryAssist extends Component {
-  static getDerivedStateFromProps(_ref, _ref2) {
-    let {
-      query
-    } = _ref;
-    let {
-      prevQuery
-    } = _ref2;
+  static defaultProps = {
+    onApply: noop,
+    onChange: noop,
+    onApplySuggestion: noop,
+    onClear: noop,
+    onFocusChange: noop,
+    size: Size.L
+  };
+  static getDerivedStateFromProps({
+    query
+  }, {
+    prevQuery
+  }) {
     const nextState = {
       prevQuery: query
     };
@@ -143,417 +141,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
-        });
-      }
-      if (this.state.shortcuts !== focus) {
-        this.setState({
-          shortcuts: focus
-        });
-      }
-    });
-    _defineProperty(this, "node", void 0);
-    _defineProperty(this, "nodeRef", node => {
-      this.node = node;
-    });
-    // eslint-disable-next-line complexity
-    _defineProperty(this, "setCaretPosition", function () {
-      let params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-      const queryLength = _this.immediateState.query ? _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) {
-          var _this$caret;
-          // Set to end of field value if newCaretPosition is inappropriate
-          (_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) {
-          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) {
-          var _this$caret3;
-          (_this$caret3 = _this.caret) === null || _this$caret3 === void 0 || _this$caret3.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 _this$caret4, _currentCaret$positio;
-      this.togglePlaceholder();
-      const currentCaret = (_this$caret4 = this.caret) === null || _this$caret4 === void 0 ? void 0 : _this$caret4.getPosition();
-      const 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;
-        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) {
-        var _this$requestData;
-        (_this$requestData = this.requestData) === null || _this$requestData === void 0 || _this$requestData.call(this);
-      }
-    });
-    // 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 === null || resolve === void 0 || resolve();
-      });
-    });
-    _defineProperty(this, "undo", e => {
-      const previous = this.historyStack.splice(0, 2)[1];
-      if (!previous) {
-        return;
-      }
-      this.setState({
-        query: previous.query
-      }, () => {
-        var _this$caret5;
-        (_this$caret5 = this.caret) === null || _this$caret5 === void 0 || _this$caret5.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 _this$caret6, _currentCaret$positio2;
-      if (this.isComposing) {
-        return;
-      }
-      const currentCaret = (_this$caret6 = this.caret) === null || _this$caret6 === void 0 ? void 0 : _this$caret6.getPosition();
-      const caret = typeof currentCaret === 'number' ? currentCaret : (_currentCaret$positio2 = currentCaret === null || currentCaret === void 0 ? void 0 : currentCaret.position) !== null && _currentCaret$positio2 !== void 0 ? _currentCaret$positio2 : 0;
-      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) {
-          var _this$requestData2;
-          (_this$requestData2 = this.requestData) === null || _this$requestData2 === void 0 || _this$requestData2.call(this);
-        }
-      }
-      if (this.props.autoOpen !== 'force' && this.immediateState.query.length < 1) {
-        this.setState({
-          showPopup: false
-        });
-      }
-    });
-    _defineProperty(this, "handleStyleRangesResponse", _ref3 => {
-      let {
-          suggestions
-        } = _ref3,
-        restProps = _objectWithoutProperties(_ref3, _excluded);
-      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)) {
-          var _this$caret7;
-          // 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 && (_this.props.autoOpen === 'force' || !afterCompletion)
-          };
-          _this.immediateState.suggestionsQuery = query;
-          // Do not update deep equal styleRanges to simplify shouldComponentUpdate check
-          if (!dequal(_this.state.styleRanges, styleRanges)) {
-            state.styleRanges = styleRanges;
-          }
-          _this.immediateState.selection = (_this$caret7 = _this.caret) === null || _this$caret7 === void 0 ? void 0 : _this$caret7.getPosition({
-            avoidFocus: true
-          });
-          _this.setState(state, resolve);
-        } else {
-          reject(new Error('Current and response queries mismatch'));
-        }
-      });
-    });
-    _defineProperty(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, _this$requestData3;
-      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$requestData3 = this.requestData) === null || _this$requestData3 === void 0 || _this$requestData3.call(this, 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) {
-        var _this$requestData4;
-        (_this$requestData4 = this.requestData) === null || _this$requestData4 === void 0 || _this$requestData4.call(this);
-      }
-    });
-    _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
-    });
-    _defineProperty(this, "listShortcutsMap", {
-      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 = {
@@ -590,18 +194,51 @@ class QueryAssist extends Component {
     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);
+        this.requestData?.();
       } else if (query) {
         this.requestStyleRanges();
       }
     }
   }
-  updateFocus(_ref5) {
-    let {
-      focus,
-      caret
-    } = _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
+      });
+    }
+    if (this.state.shortcuts !== focus) {
+      this.setState({
+        shortcuts: focus
+      });
+    }
+  };
+  node;
+  nodeRef = node => {
+    this.node = node;
+  };
+  updateFocus({
+    focus,
+    caret
+  }) {
     const isCaretChanged = caret !== this.props.caret;
     const isFocusChanged = focus !== this.props.focus;
     if (isFocusChanged || isCaretChanged) {
@@ -609,35 +246,290 @@ class QueryAssist extends Component {
       this.setFocus(focusValue);
     }
   }
+  // eslint-disable-next-line complexity
+  setCaretPosition = (params = {}) => {
+    const queryLength = this.immediateState.query ? 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() {
-    var _this$caret8, _this$input, _this$input2, _this$input3, _this$input4;
-    const 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 && (_this$input3 = this.input) !== null && _this$input3 !== void 0 && _this$input3.clientWidth && caretOffset > ((_this$input4 = this.input) === null || _this$input4 === void 0 ? void 0 : _this$input4.clientWidth)) {
+    const caretOffset = this.caret?.getOffset();
+    if (this.input?.clientWidth !== this.input?.scrollWidth && caretOffset && this.input?.clientWidth !== undefined && caretOffset > this.input?.clientWidth) {
       this.input.scrollLeft += caretOffset;
     }
   }
   getQuery() {
-    var _this$input$textConte, _this$input5;
-    return (_this$input$textConte = (_this$input5 = this.input) === null || _this$input5 === void 0 || (_this$input5 = _this$input5.textContent) === null || _this$input5 === void 0 ? void 0 : _this$input5.replace(/\s/g, ' ')) !== null && _this$input$textConte !== void 0 ? _this$input$textConte : '';
+    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) {
+        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) {
-    var _this$historyStack$;
     const queryIsSet = 'query' in state;
-    const queryIsSame = ((_this$historyStack$ = this.historyStack[0]) === null || _this$historyStack$ === void 0 ? void 0 : _this$historyStack$.query) === state.query;
+    const queryIsSame = this.historyStack[0]?.query === state.query;
     if (queryIsSet && !queryIsSame) {
-      var _this$caret$getPositi, _this$caret9;
+      var _this$caret$getPositi;
       this.historyStack.unshift({
         query: state.query,
-        caret: (_this$caret$getPositi = (_this$caret9 = this.caret) === null || _this$caret9 === void 0 ? void 0 : _this$caret9.getPosition({
+        caret: (_this$caret$getPositi = this.caret?.getPosition({
           avoidFocus: true
         })) !== null && _this$caret$getPositi !== void 0 ? _this$caret$getPositi : -1
       });
     }
   }
+  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?.();
+      }
+    }
+    if (this.props.autoOpen !== 'force' && this.immediateState.query.length < 1) {
+      this.setState({
+        showPopup: false
+      });
+    }
+  };
+  handleStyleRangesResponse = ({
+    suggestions,
+    ...restProps
+  }) => this.handleResponse(restProps);
+  handleResponse = ({
+    query = '',
+    caret = 0,
+    styleRanges,
+    suggestions = []
+  }, afterCompletion = false) => 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 && (this.props.autoOpen === 'force' || !afterCompletion)
+      };
+      this.immediateState.suggestionsQuery = query;
+      // Do not update deep equal styleRanges to simplify shouldComponentUpdate check
+      if (!dequal(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'));
+    }
+  });
+  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 = (afterCompletion = 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);
+  };
   sendRequest(params) {
     const value = this.props.dataSource(params);
     const dataPromise = Promise.resolve(value);
@@ -675,8 +567,8 @@ class QueryAssist extends Component {
     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, _this$caret0;
-      const caret = (_this$caret$getOffset = (_this$caret0 = this.caret) === null || _this$caret0 === void 0 ? void 0 : _this$caret0.getOffset()) !== null && _this$caret$getOffset !== void 0 ? _this$caret$getOffset : 0;
+      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;
@@ -686,11 +578,46 @@ 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) {
-      var _this$caret1;
-      (_this$caret1 = this.caret) === null || _this$caret1 === void 0 || _this$caret1.target.blur();
+      this.caret?.target.blur();
     }
   }
   /**
@@ -753,7 +680,7 @@ class QueryAssist extends Component {
         if (dirty && index === styleRanges.length - 1 && item.style === 'text') {
           return;
         }
-        const styleName = "".concat(LETTER_CLASS, "-").concat(item.style.replace('_', '-'));
+        const styleName = `${LETTER_CLASS}-${item.style.replace('_', '-')}`;
         for (let i = item.start; i < item.start + item.length; i++) {
           classes[i] = styles[styleName];
         }
@@ -785,20 +712,67 @@ 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
+  };
+  listShortcutsMap = {
+    home: noop,
+    end: noop
+  };
   renderActions() {
     const actions = [...(this.props.actions || [])];
     const renderClear = this.props.clear && !!this.state.query;
     if (renderClear) {
       actions.push(jsx(I18nContext.Consumer, {
-        children: _ref6 => {
-          var _this$props$translati, _this$props$translati2;
-          let {
-            translate
-          } = _ref6;
+        children: ({
+          translate
+        }) => {
+          var _this$props$translati;
           return jsx(Button, {
             icon: closeIcon,
             className: styles.clear,
-            title: (_this$props$translati = (_this$props$translati2 = this.props.translations) === null || _this$props$translati2 === void 0 ? void 0 : _this$props$translati2.clearTitle) !== null && _this$props$translati !== void 0 ? _this$props$translati : translate('clearTitle'),
+            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'
@@ -822,14 +796,14 @@ class QueryAssist extends Component {
     const renderLoader = this.props.loader !== false && this.state.loading;
     const renderGlass = glass && !renderLoader;
     const actions = this.renderActions();
-    const containerClasses = classNames(className, inputStyles["size".concat(huge ? Size.FULL : size)], {
+    const containerClasses = classNames(className, inputStyles[`size${huge ? Size.FULL : size}`], {
       [styles.queryAssist]: true,
       [styles.withIcon]: renderGlass && !huge || renderLoader,
       [styles.huge]: huge,
       [styles.queryAssistDisabled]: this.props.disabled
     });
     const inputClasses = classNames(this.props.inputClassName, {
-      ["".concat(styles.input, " ring-js-shortcuts")]: true,
+      [`${styles.input} ring-js-shortcuts`]: true,
       [styles.inputGap]: actions.length || this.isRenderingGlassOrLoader() && !glass,
       [styles.inputGap2]: actions.length === 2,
       // TODO: replace with flex-box layout
@@ -843,11 +817,10 @@ class QueryAssist extends Component {
     return jsx(ControlsHeightContext.Provider, {
       value: ControlsHeight.M,
       children: jsx(I18nContext.Consumer, {
-        children: _ref7 => {
+        children: ({
+          translate
+        }) => {
           var _translations$searchT, _translations$searchT2, _translations$searchT3;
-          let {
-            translate
-          } = _ref7;
           return jsxs("div", {
             "data-test": joinDataTestAttributes('ring-query-assist', dataTest),
             className: containerClasses,
@@ -859,7 +832,7 @@ class QueryAssist extends Component {
             }), renderGlass && !huge && jsx(Icon, {
               glyph: searchIcon,
               className: styles.icon,
-              title: (_translations$searchT = translations === null || translations === void 0 ? void 0 : translations.searchTitle) !== null && _translations$searchT !== void 0 ? _translations$searchT : translate('searchTitle'),
+              title: (_translations$searchT = translations?.searchTitle) !== null && _translations$searchT !== void 0 ? _translations$searchT : translate('searchTitle'),
               ref: this.glassRef,
               "data-test": 'query-assist-search-icon'
             }), renderLoader && jsx("div", {
@@ -870,7 +843,7 @@ class QueryAssist extends Component {
               ref: this.loaderRef,
               children: jsx(LoaderInline, {})
             }), jsx(ContentEditable, {
-              "aria-label": (_translations$searchT2 = translations === null || translations === void 0 ? void 0 : translations.searchTitle) !== null && _translations$searchT2 !== void 0 ? _translations$searchT2 : translate('searchTitle'),
+              "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,
@@ -929,7 +902,7 @@ class QueryAssist extends Component {
               children: jsx(Icon, {
                 glyph: searchIcon,
                 className: styles.rightSearchIcon,
-                title: (_translations$searchT3 = translations === null || translations === void 0 ? void 0 : translations.searchTitle) !== null && _translations$searchT3 !== void 0 ? _translations$searchT3 : translate('searchTitle'),
+                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'
@@ -941,15 +914,6 @@ class QueryAssist extends Component {
     });
   }
 }
-_defineProperty(QueryAssist, "defaultProps", {
-  onApply: noop,
-  onChange: noop,
-  onApplySuggestion: noop,
-  onClear: noop,
-  onFocusChange: noop,
-  size: Size.L
-});
-_defineProperty(QueryAssist, "ngModelStateField", ngModelStateField);
 const RerenderableQueryAssist = rerenderHOC(QueryAssist);
 
 export { RerenderableQueryAssist, QueryAssist as default };