@jetbrains/ring-ui 4.1.1 → 4.1.2

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

@@ -0,0 +1,1092 @@
+import { _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import debounce from 'just-debounce-it';
+import classNames from 'classnames';
+import deepEqual from 'deep-equal';
+import searchIcon from '@jetbrains/icons/search';
+import closeIcon from '@jetbrains/icons/close';
+import getUID from '../global/get-uid.js';
+import joinDataTestAttributes from '../global/data-tests.js';
+import { preventDefault, getRect } from '../global/dom.js';
+import Caret from '../caret/caret.js';
+import ContentEditable from '../contenteditable/contenteditable.js';
+import PopupMenu from '../popup-menu/popup-menu.js';
+import LoaderInline from '../loader-inline/loader-inline.js';
+import Shortcuts from '../shortcuts/shortcuts.js';
+import rerenderHOC from '../global/rerender-hoc.js';
+import Theme from '../global/theme.js';
+import Button from '../button/button.js';
+import { Q as QueryAssistSuggestions, m as modules_da7ab055 } from '../_helpers/query-assist__suggestions.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 '../popup/popup.consts.js';
+import '../popup/popup.target.js';
+import '../shortcuts/core.js';
+import 'combokeys';
+import '../global/sniffer.js';
+import 'sniffr';
+import '../list/list.js';
+import 'react-virtualized/dist/es/List';
+import 'react-virtualized/dist/es/AutoSizer';
+import 'react-virtualized/dist/es/WindowScroller';
+import 'react-virtualized/dist/es/CellMeasurer';
+import 'util-deprecate';
+import 'memoize-one';
+import '../global/memoize.js';
+import '../global/create-stateful-context.js';
+import '../list/list__link.js';
+import '../link/link.js';
+import 'focus-visible';
+import '../link/clickableLink.js';
+import '../_helpers/link.js';
+import '../_helpers/list.js';
+import '../list/list__item.js';
+import '../avatar/avatar.js';
+import '../global/url.js';
+import '../avatar/fallback-avatar.js';
+import '../checkbox/checkbox.js';
+import '@jetbrains/icons/checkmark';
+import '@jetbrains/icons/remove-10px';
+import '../icon/icon.js';
+import '../icon/icon__constants.js';
+import '../_helpers/icon.js';
+import '../icon/icon__svg.js';
+import '../_helpers/checkbox.js';
+import '../list/list__custom.js';
+import '../global/get-event-key.js';
+import '../list/list__title.js';
+import '../list/list__separator.js';
+import '../list/list__hint.js';
+import '../list/consts.js';
+import '../_helpers/inject-styles.js';
+import '../global/conic-gradient.js';
+import 'conic-gradient';
+import '../global/supports-css.js';
+import '../global/inject-styles.js';
+import '../global/radial-gradient-mask.js';
+import '@jetbrains/icons/chevron-10px';
+import '../_helpers/button__classes.js';
+
+const POPUP_COMPENSATION = PopupMenu.ListProps.Dimension.ITEM_PADDING + PopupMenu.PopupProps.Dimension.BORDER_WIDTH;
+const ngModelStateField = 'query';
+
+function noop() {}
+
+function cleanText(text) {
+  return text.replace(/([\n\r])+/g, ' ');
+}
+/**
+ * @name Query Assist
+ */
+
+/**
+ * ## Data source function
+
+ Component class calls a data source function when user input happens and passes an object with fields \`caret\`, \`focus\` and \`query\` as the only argument.
+ The function must return an object with the fields described below. The object can be optionally wrapped in a Promise.
+
+ ### Return object fields
+
+ \`caret\` and \`query\` should just return server values provided to data source function.
+ These fields allow the Query Assist component to recognise and drop earlier responses from the server.
+
+ + __caret__ (\`string=0\`) Caret from request
+ + __query__ (\`string=''\`) Query from request
+ + __styleRanges__ (\`Array<suggestion>=\`) Array of \`styleRange\` objects, used to highlight the request in the input field
+ + __suggestions__ (\`Array<styleRange>\`) Array of \`suggestion\` objects to show.
+
+ ### **styleRange** object fields
+
+ start \`number\` Range start (in characters)
+ length \`number\` Range length (in characters)
+ style \`string\` Style of the range. Possible values: \`text\`, \`field_value\`, \`field_name\`, \`operator\`
+
+ ### **suggestion** object fields
+
+ + __prefix__ \`string=\` Suggestion option prefix
+ + __option__ \`string\` Suggestion option
+ + __suffix__ \`string=\` Suggestion option suffix
+ + __description__ \`string=\` Suggestion option description. Is not visible when a group is set
+ + __matchingStart__ \`number\` (required when matchingEnd is set) Start of the highlighted part of an option in the suggestions list (in characters)
+ + __matchingEnd__ \`number\` (required when matchingEnd is set) End of the highlighted part of an option in the suggestions list (in characters)
+ + __caret__ \`number\` Caret position after option completion (in characters)
+ + __completionStart__ \`number\` Where to start insertion (or replacement, when completing with the \`Tab\` key) of the completion option (in characters)
+ + __completionEnd__ \`number\` Where to end insertion of the completion option (in characters)
+ + __group__ \`string=\` Group title. Options with the same title are grouped under it
+ + __icon__ \`string=\` Icon URI, Data URI is possible
+ */
+
+
+class QueryAssist extends Component {
+  constructor() {
+    var _this;
+
+    super(...arguments);
+    _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, "ngModelStateField", ngModelStateField);
+
+    _defineProperty(this, "historyStack", []);
+
+    _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, "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;
+      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;
+      }
+
+      if (_this.immediateState.focus && !_this.props.disabled) {
+        if (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 && _this.immediateState.selection.startOffset !== undefined) {
+          _this.caret.setPosition(_this.immediateState.selection);
+        } else if (!_this.immediateState.selection || 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, "handleInput", e => {
+      this.togglePlaceholder();
+      const currentCaret = this.caret.getPosition();
+      const props = {
+        dirty: true,
+        query: this.getQuery(),
+        caret: Number.isInteger(currentCaret) ? currentCaret : currentCaret.position,
+        focus: true
+      };
+
+      if (this.immediateState.query === props.query && !this.isComposing) {
+        this.handleCaretMove(e);
+        return;
+      }
+
+      if (this.isComposing) {
+        return;
+      }
+
+      this.immediateState = props;
+      this.props.onChange(props);
+
+      if (props.query.length > 0) {
+        this.requestData();
+      }
+    });
+
+    _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 ? void 0 : resolve();
+      });
+    });
+
+    _defineProperty(this, "undo", e => {
+      // eslint-disable-next-line no-unused-vars
+      const [current, previous] = this.historyStack.splice(0, 2);
+
+      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 => {
+      if (this.isComposing) {
+        return;
+      }
+
+      const currentCaret = this.caret.getPosition();
+      const caret = Number.isInteger(currentCaret) ? currentCaret : currentCaret.position;
+      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", _ref => {
+      let {
+        suggestions,
+        ...restProps
+      } = _ref;
+      return this.handleResponse(restProps);
+    });
+
+    _defineProperty(this, "handleResponse", function (_ref2) {
+      let {
+        query = '',
+        caret = 0,
+        styleRanges,
+        suggestions = []
+      } = _ref2;
+      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) => {
+      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,
+        selection: suggestion.caret,
+        query: query.substr(0, suggestion.completionStart) + prefix + suggestion.option + suffix
+      };
+
+      if (typeof replace === 'boolean' && replace) {
+        state.query += this.immediateState.query.substr(suggestion.completionEnd);
+      } 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, "inputRef", node => {
+      if (!node) {
+        return;
+      }
+
+      this.input = node;
+      this.caret = new Caret(this.input);
+    });
+
+    _defineProperty(this, "popupRef", node => {
+      this._popup = node;
+    });
+
+    _defineProperty(this, "placeholderRef", node => {
+      this.placeholder = node;
+    });
+
+    _defineProperty(this, "glassRef", node => {
+      this.glass = node;
+    });
+
+    _defineProperty(this, "loaderRef", node => {
+      this.loader = node;
+    });
+
+    _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
+    });
+  }
+
+  static getDerivedStateFromProps(_ref3, _ref4) {
+    let {
+      query
+    } = _ref3;
+    let {
+      prevQuery
+    } = _ref4;
+    const nextState = {
+      prevQuery: query
+    };
+
+    if (typeof query === 'string' && query !== prevQuery) {
+      nextState.query = query;
+      nextState.placeholderEnabled = !query;
+    }
+
+    return nextState;
+  }
+
+  componentDidMount() {
+    const query = this.props.query || '';
+    this.immediateState = {
+      query,
+      caret: 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 && 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.caret = caret;
+    }
+
+    if (typeof query === 'string' && queryChanged && query !== this.immediateState.query) {
+      this.immediateState.query = query;
+
+      if (query && prevProps.autoOpen && query.length > 0) {
+        this.requestData();
+      } else if (query) {
+        this.requestStyleRanges();
+      }
+    }
+  }
+
+  updateFocus(_ref5) {
+    let {
+      focus,
+      caret
+    } = _ref5;
+    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);
+    }
+  }
+
+  scrollInput() {
+    const caretOffset = this.caret.getOffset();
+
+    if (this.input.clientWidth !== this.input.scrollWidth && caretOffset > this.input.clientWidth) {
+      this.input.scrollLeft += caretOffset;
+    }
+  }
+
+  getQuery() {
+    return this.input.textContent.replace(/\s/g, ' ');
+  }
+
+  isRenderingGlassOrLoader() {
+    const renderLoader = this.props.loader !== false && this.state.loading;
+    return this.props.glass || renderLoader;
+  }
+
+  _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;
+
+    if (queryIsSet && !queryIsSame) {
+      var _this$caret$getPositi, _this$caret;
+
+      this.historyStack.unshift({
+        query: state.query,
+        caret: (_this$caret$getPositi = (_this$caret = this.caret) === null || _this$caret === void 0 ? void 0 : _this$caret.getPosition({
+          avoidFocus: true
+        })) !== null && _this$caret$getPositi !== void 0 ? _this$caret$getPositi : -1
+      });
+    }
+  }
+
+  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
+        });
+      }
+
+      if (params.query === this.immediateState.query) {
+        this.closePopup();
+      }
+    }, CLOSE_POPUP_TIMEOUT);
+    dataPromise.then(() => window.clearTimeout(timeout)).catch(() => {
+      window.clearTimeout(timeout);
+      this.setState({
+        loading: false
+      });
+    });
+    return dataPromise;
+  }
+
+  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 && this.input.firstChild.children;
+    const completionStartNode = inputChildren && Number.isInteger(completionStart) && inputChildren[Math.min(completionStart, inputChildren.length - 1)];
+    let offset = completionStartNode && getRect(completionStartNode).right - getRect(this.input).left;
+
+    if (!offset) {
+      const caret = this.caret.getOffset(); // Do not compensate caret in the beginning of field
+
+      if (caret === 0) {
+        return minOffset;
+      } else {
+        offset = caret;
+      }
+    }
+
+    const result = offset - POPUP_COMPENSATION;
+    return result < minOffset ? minOffset : result;
+  }
+
+  blurInput() {
+    this.immediateState.selection = {};
+
+    if (!this.props.focus) {
+      this.caret.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.
+   */
+
+
+  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;
+      }
+    }
+  }
+
+  _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 [];
+    }
+
+    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;
+        }
+
+        const styleName = `${LETTER_CLASS}-${item.style.replace('_', '-')}`;
+
+        for (let i = item.start; i < item.start + item.length; i++) {
+          classes[i] = modules_da7ab055[styleName];
+        }
+      });
+    }
+
+    return 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
+      });
+    }
+  }
+
+  renderActions() {
+    const actions = [].concat(this.props.actions || []);
+    const renderClear = this.props.clear && !!this.state.query;
+
+    if (renderClear) {
+      actions.push( /*#__PURE__*/React.createElement(Button, {
+        icon: closeIcon,
+        key: 'clearAction',
+        className: modules_da7ab055.icon,
+        iconClassName: modules_da7ab055.iconInner,
+        title: this.props.translations.clearTitle,
+        ref: this.clearRef,
+        onClick: this.clearQuery,
+        "data-test": "query-assist-clear-icon"
+      }));
+    }
+
+    return actions;
+  }
+
+  render() {
+    const {
+      theme,
+      glass,
+      'data-test': dataTest,
+      className,
+      useCustomItemRender
+    } = this.props;
+    const renderPlaceholder = !!this.props.placeholder && this.state.placeholderEnabled;
+    const renderLoader = this.props.loader !== false && this.state.loading;
+    const renderGlass = glass && !renderLoader;
+    const renderUnderline = theme === Theme.DARK;
+    const actions = this.renderActions();
+    const inputClasses = classNames({
+      [`${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.inputLeftGap]: this.isRenderingGlassOrLoader() && glass,
+      [modules_da7ab055.inputDisabled]: this.props.disabled
+    });
+    return /*#__PURE__*/React.createElement("div", {
+      "data-test": joinDataTestAttributes('ring-query-assist', dataTest),
+      className: classNames(className, modules_da7ab055.queryAssist, modules_da7ab055[theme]),
+      role: "presentation",
+      ref: this.nodeRef
+    }, this.state.shortcuts && /*#__PURE__*/React.createElement(Shortcuts, {
+      map: this.shortcutsMap,
+      scope: this.shortcutsScope
+    }), renderGlass && /*#__PURE__*/React.createElement(Button, {
+      icon: searchIcon,
+      className: modules_da7ab055.icon,
+      iconClassName: modules_da7ab055.iconInner,
+      title: this.props.translations.searchTitle,
+      ref: this.glassRef,
+      onClick: this.handleApply,
+      "data-test": "query-assist-search-icon"
+    }), renderLoader && /*#__PURE__*/React.createElement("div", {
+      className: classNames(modules_da7ab055.icon, modules_da7ab055.loader, {
+        [modules_da7ab055.loaderOnTheRight]: !glass
+      }),
+      ref: this.loaderRef
+    }, /*#__PURE__*/React.createElement(LoaderInline, {
+      theme: theme
+    })), /*#__PURE__*/React.createElement(ContentEditable, {
+      "aria-label": this.props.translations.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: classNames(modules_da7ab055.placeholder, {
+        [modules_da7ab055.placeholderSpaced]: glass
+      }),
+      ref: this.placeholderRef,
+      onClick: this.handleCaretMove,
+      "data-test": "query-assist-placeholder"
+    }, this.props.placeholder), renderUnderline && /*#__PURE__*/React.createElement("div", {
+      className: modules_da7ab055.focusUnderline
+    }), actions && /*#__PURE__*/React.createElement("div", {
+      "data-test": "ring-query-assist-actions",
+      className: modules_da7ab055.actions
+    }, actions), /*#__PURE__*/React.createElement(PopupMenu, {
+      hidden: !this.state.showPopup,
+      onCloseAttempt: this.closePopup,
+      ref: this.popupRef,
+      anchorElement: this.node,
+      keepMounted: true,
+      attached: true,
+      className: classNames(modules_da7ab055[theme], 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,
+      hintOnSelection: this.props.hintOnSelection,
+      left: this.getPopupOffset(this.state.suggestions),
+      maxHeight: PopupMenu.PopupProps.MaxHeight.SCREEN,
+      onMouseDown: this.trackPopupMouseState,
+      onMouseUp: this.trackPopupMouseState,
+      onSelect: this.handleComplete
+    }));
+  }
+
+}
+
+_defineProperty(QueryAssist, "propTypes", {
+  theme: PropTypes.string,
+
+  /**
+   * Open suggestions popup during the initial render
+   */
+  autoOpen: PropTypes.bool,
+
+  /**
+   * 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,
+
+  /**
+   * 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
+});
+
+_defineProperty(QueryAssist, "defaultProps", {
+  theme: Theme.LIGHT,
+  onApply: noop,
+  onChange: noop,
+  onApplySuggestion: noop,
+  onClear: noop,
+  onFocusChange: noop,
+  translations: {
+    searchTitle: 'Search',
+    clearTitle: 'Clear search input'
+  }
+});
+
+_defineProperty(QueryAssist, "ngModelStateField", ngModelStateField);
+
+_defineProperty(QueryAssist, "Theme", Theme);
+
+const RerenderableQueryAssist = rerenderHOC(QueryAssist);
+
+export { RerenderableQueryAssist, QueryAssist as default };