@atlaskit/jql-editor 4.0.0

package/dist/esm/plugins/autocomplete/components/autocomplete-dropdown/index.js

@@ -0,0 +1,268 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import Spinner from '@atlaskit/spinner';
+import { ScreenReaderText } from '../../../../accessibility';
+import { JQL_EDITOR_AUTOCOMPLETE_ID } from '../../../../common/constants';
+import { useAutocomplete, useAutocompleteIsOpen, useAutocompletePosition, useIntl, useRichInlineNodesEnabled, useScopedId, useStoreActions } from '../../../../state';
+import { ARROW_DOWN_KEY, ARROW_UP_KEY, CMD_ARROW_DOWN_KEY, CMD_ARROW_UP_KEY, END_KEY, ENTER_KEY, ESCAPE_KEY, HOME_KEY, TAB_KEY } from '../../constants';
+import { messages } from '../../messages';
+import AutocompleteOption from '../autocomplete-option';
+import { AutocompleteContainer, AutocompleteLoadingFooter, AutocompleteOptionsContainer, OptionList } from './styled';
+var getPreviousOptionId = function getPreviousOptionId(options, selectedOptionId) {
+  if (!selectedOptionId) {
+    return options[options.length - 1].id;
+  }
+  var index = options.findIndex(function (option) {
+    return option.id === selectedOptionId;
+  });
+  if (index === -1) {
+    return options[options.length - 1].id;
+  }
+  if (index > 0) {
+    return options[index - 1].id;
+  }
+  return undefined;
+};
+var getNextOptionId = function getNextOptionId(options, selectedOptionId) {
+  if (!selectedOptionId) {
+    return options[0].id;
+  }
+  var index = options.findIndex(function (option) {
+    return option.id === selectedOptionId;
+  });
+  if (index === -1) {
+    return options[0].id;
+  }
+  if (index < options.length - 1) {
+    return options[index + 1].id;
+  }
+  return undefined;
+};
+var AutocompleteDropdown = function AutocompleteDropdown(_ref) {
+  var options = _ref.options,
+    loading = _ref.loading,
+    keymap = _ref.keymap,
+    onClick = _ref.onClick;
+  var containerRef = useRef(null);
+  var scrollContainerRef = useRef(null);
+  var selectedItemRef = useRef(null);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    navigatingWithKeyboard = _useState2[0],
+    setNavigatingWithKeyboard = _useState2[1];
+  var _useIntl = useIntl(),
+    _useIntl2 = _slicedToArray(_useIntl, 1),
+    intl = _useIntl2[0];
+  var _useStoreActions = useStoreActions(),
+    _useStoreActions2 = _slicedToArray(_useStoreActions, 2),
+    _useStoreActions2$ = _useStoreActions2[1],
+    onEditorViewFocus = _useStoreActions2$.onEditorViewFocus,
+    onEditorViewBlur = _useStoreActions2$.onEditorViewBlur;
+  var _useAutocomplete = useAutocomplete(),
+    _useAutocomplete2 = _slicedToArray(_useAutocomplete, 2),
+    selectedOptionId = _useAutocomplete2[0].selectedOptionId,
+    _useAutocomplete2$ = _useAutocomplete2[1],
+    closeAutocomplete = _useAutocomplete2$.closeAutocomplete,
+    setAutocompleteContainer = _useAutocomplete2$.setAutocompleteContainer,
+    setSelectedAutocompleteOptionId = _useAutocomplete2$.setSelectedAutocompleteOptionId;
+  var _useAutocompleteIsOpe = useAutocompleteIsOpen(),
+    _useAutocompleteIsOpe2 = _slicedToArray(_useAutocompleteIsOpe, 1),
+    isAutocompleteOpen = _useAutocompleteIsOpe2[0];
+  var _useAutocompletePosit = useAutocompletePosition(),
+    _useAutocompletePosit2 = _slicedToArray(_useAutocompletePosit, 1),
+    _useAutocompletePosit3 = _useAutocompletePosit2[0],
+    top = _useAutocompletePosit3.top,
+    left = _useAutocompletePosit3.left;
+  var _useRichInlineNodesEn = useRichInlineNodesEnabled(),
+    _useRichInlineNodesEn2 = _slicedToArray(_useRichInlineNodesEn, 1),
+    areRichInlineNodesEnabled = _useRichInlineNodesEn2[0];
+  var _useScopedId = useScopedId(JQL_EDITOR_AUTOCOMPLETE_ID),
+    _useScopedId2 = _slicedToArray(_useScopedId, 1),
+    autocompleteId = _useScopedId2[0];
+  var onContainerRef = useCallback(function (container) {
+    containerRef.current = container;
+    setAutocompleteContainer(container);
+  }, [containerRef, setAutocompleteContainer]);
+  var onScrollContainerRef = useCallback(function (container) {
+    scrollContainerRef.current = container;
+  }, [scrollContainerRef]);
+  var handleClick = useCallback(function (option, optionIndex, keyboard) {
+    closeAutocomplete();
+    onClick(option, {
+      keyboard: keyboard,
+      numberOfOptions: options.length,
+      optionIndex: optionIndex,
+      optionType: option.type,
+      queryLength: option.matchedText.length,
+      nodeType: areRichInlineNodesEnabled && option.valueType !== undefined ? option.valueType : 'text'
+    });
+  }, [options, onClick, closeAutocomplete, areRichInlineNodesEnabled]);
+  var onMouseMove = useCallback(function () {
+    if (navigatingWithKeyboard) {
+      setNavigatingWithKeyboard(false);
+    }
+  }, [navigatingWithKeyboard, setNavigatingWithKeyboard]);
+  useEffect(function () {
+    keymap.bindKey(ARROW_UP_KEY, function () {
+      if (!isAutocompleteOpen) {
+        return false;
+      }
+      !navigatingWithKeyboard && setNavigatingWithKeyboard(true);
+      var previousOptionId = getPreviousOptionId(options, selectedOptionId);
+      setSelectedAutocompleteOptionId(previousOptionId);
+      return true;
+    });
+    keymap.bindKey(ARROW_DOWN_KEY, function () {
+      if (!isAutocompleteOpen) {
+        return false;
+      }
+      !navigatingWithKeyboard && setNavigatingWithKeyboard(true);
+      var nextOptionId = getNextOptionId(options, selectedOptionId);
+      setSelectedAutocompleteOptionId(nextOptionId);
+      return true;
+    });
+    keymap.bindMultipleKeys([ENTER_KEY, TAB_KEY], function () {
+      if (!isAutocompleteOpen) {
+        return false;
+      }
+      var selectedOptionIndex = options.findIndex(function (option) {
+        return option.id === selectedOptionId;
+      });
+      if (selectedOptionId && selectedOptionIndex !== -1) {
+        if (options[selectedOptionIndex].isDeprecated) {
+          return true;
+        }
+        handleClick(options[selectedOptionIndex], selectedOptionIndex, true);
+        return true;
+      }
+      // Open with no option selected, so we let PM do its stuff (a.k.a. keep inserting new lines)
+      return false;
+    });
+    keymap.bindKey(ESCAPE_KEY, function () {
+      if (!isAutocompleteOpen) {
+        return false;
+      }
+      closeAutocomplete();
+      return true;
+    });
+    keymap.bindMultipleKeys([HOME_KEY, CMD_ARROW_UP_KEY], function () {
+      var _options$;
+      if (!isAutocompleteOpen) {
+        return false;
+      }
+      !navigatingWithKeyboard && setNavigatingWithKeyboard(true);
+      setSelectedAutocompleteOptionId((_options$ = options[0]) === null || _options$ === void 0 ? void 0 : _options$.id);
+      return true;
+    });
+    keymap.bindMultipleKeys([END_KEY, CMD_ARROW_DOWN_KEY], function () {
+      var _options;
+      if (!isAutocompleteOpen) {
+        return false;
+      }
+      !navigatingWithKeyboard && setNavigatingWithKeyboard(true);
+      setSelectedAutocompleteOptionId((_options = options[options.length - 1]) === null || _options === void 0 ? void 0 : _options.id);
+      return true;
+    });
+
+    // New bindings should also be registered in plugins/autocomplete/index.tsx
+
+    return function () {
+      keymap.unbindKey(ARROW_UP_KEY);
+      keymap.unbindKey(ARROW_DOWN_KEY);
+      keymap.unbindKey(ENTER_KEY);
+      keymap.unbindKey(TAB_KEY);
+      keymap.unbindKey(ESCAPE_KEY);
+      keymap.unbindKey(HOME_KEY);
+      keymap.unbindKey(END_KEY);
+      keymap.unbindKey(CMD_ARROW_UP_KEY);
+      keymap.unbindKey(CMD_ARROW_DOWN_KEY);
+    };
+  }, [keymap, isAutocompleteOpen, closeAutocomplete, navigatingWithKeyboard, setNavigatingWithKeyboard, options, selectedOptionId, setSelectedAutocompleteOptionId, handleClick]);
+  useEffect(function () {
+    // Reset to no selection when:
+    // - autocomplete is closed
+    // - we get new options and those don't include the currently selected option
+    if (!isAutocompleteOpen || !options.some(function (option) {
+      return option.id === selectedOptionId;
+    })) {
+      setSelectedAutocompleteOptionId(undefined);
+    }
+  }, [isAutocompleteOpen, options, selectedOptionId, setSelectedAutocompleteOptionId]);
+  useLayoutEffect(function () {
+    requestAnimationFrame(function () {
+      if (containerRef.current) {
+        containerRef.current.style.top = "".concat(top, "px");
+        containerRef.current.style.left = "".concat(left, "px");
+      }
+    });
+  }, [top, left]);
+  useLayoutEffect(function () {
+    if (navigatingWithKeyboard) {
+      var _selectedItemRef$curr;
+      (_selectedItemRef$curr = selectedItemRef.current) === null || _selectedItemRef$curr === void 0 || _selectedItemRef$curr.scrollIntoView({
+        block: 'nearest'
+      });
+    }
+  }, [navigatingWithKeyboard, selectedOptionId, selectedItemRef]);
+  useLayoutEffect(function () {
+    var _selectedItemRef$curr2;
+    (_selectedItemRef$curr2 = selectedItemRef.current) === null || _selectedItemRef$curr2 === void 0 || _selectedItemRef$curr2.scrollIntoView({
+      block: 'nearest'
+    });
+  }, [options, selectedItemRef]);
+  useLayoutEffect(function () {
+    if (isAutocompleteOpen && !selectedOptionId && scrollContainerRef.current) {
+      scrollContainerRef.current.scrollTop = 0;
+    }
+  }, [isAutocompleteOpen, selectedOptionId]);
+  var announcedMessage = useMemo(function () {
+    if (!isAutocompleteOpen || !options.length) {
+      return '';
+    }
+    return intl.formatMessage(messages.optionsFound);
+  }, [isAutocompleteOpen, intl, options]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AutocompleteContainer, {
+    "data-testid": "jql-editor-autocomplete",
+    tabIndex: -1,
+    ref: onContainerRef,
+    isOpen: isAutocompleteOpen,
+    onBlur: onEditorViewBlur,
+    onFocus: onEditorViewFocus
+  }, /*#__PURE__*/React.createElement(AutocompleteOptionsContainer, {
+    ref: onScrollContainerRef,
+    onMouseMove: onMouseMove
+  }, /*#__PURE__*/React.createElement(OptionList, {
+    role: "listbox",
+    id: autocompleteId
+  }, options.map(function (option, index) {
+    var isSelected = option.id === selectedOptionId;
+    return /*#__PURE__*/React.createElement(AutocompleteOption, _extends({
+      key: option.value,
+      isSelected: isSelected
+    }, isSelected && {
+      ref: selectedItemRef
+    }, {
+      option: option,
+      onClick: function onClick() {
+        return handleClick(option, index, false);
+      },
+      onMouseMove: function onMouseMove() {
+        var _options$index;
+        if (((_options$index = options[index]) === null || _options$index === void 0 ? void 0 : _options$index.id) !== selectedOptionId) {
+          var _options$index2;
+          setSelectedAutocompleteOptionId((_options$index2 = options[index]) === null || _options$index2 === void 0 ? void 0 : _options$index2.id);
+        }
+      }
+    }));
+  }))), loading && /*#__PURE__*/React.createElement(AutocompleteLoadingFooter, {
+    "data-testid": "jql-editor-autocomplete-loading",
+    hasOptions: !!options.length
+  }, /*#__PURE__*/React.createElement(Spinner, {
+    size: "small"
+  }))), /*#__PURE__*/React.createElement(ScreenReaderText, {
+    role: "status",
+    "aria-live": "polite"
+  }, announcedMessage));
+};
+export default AutocompleteDropdown;

package/dist/esm/plugins/autocomplete/components/autocomplete-dropdown/styled.js

@@ -0,0 +1,16 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { N200, N40, N50A, N60A } from '@atlaskit/theme/colors';
+// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
+import { gridSize, layers } from '@atlaskit/theme/constants';
+export var AutocompleteContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  background-color: ", ";\n  border-radius: ", ";\n  will-change: top, left;\n  visibility: ", ";\n  z-index: ", ";\n  box-shadow: ", ";\n  padding: ", " 0;\n  min-width: ", "px;\n  max-width: ", "px;\n\n  &:focus {\n    outline: none;\n  }\n"])), "var(--ds-surface-overlay, white)", "var(--ds-border-radius-100, 3px)", function (props) {
+  return props.isOpen ? 'visible' : 'hidden';
+}, layers.dialog, "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")"), "var(--ds-space-075, 6px)", 25 * gridSize(), 50 * gridSize());
+export var AutocompleteOptionsContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  max-height: ", "px;\n  overflow: auto;\n"])), 36 * gridSize());
+export var OptionList = styled.ul(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  list-style: none;\n  margin: 0;\n  padding: 0;\n"])));
+export var AutocompleteLoadingFooter = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  color: ", ";\n  font-style: italic;\n  padding: ", ";\n  text-align: center;\n  ", ";\n"])), "var(--ds-text-subtlest, ".concat(N200, ")"), "var(--ds-space-150, 12px)", function (props) {
+  return props.hasOptions ? // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n          border-top: solid 1px ", ";\n          margin-top: ", ";\n          /* 3/2 + 3/4 */\n          padding-top: ", "px;\n        "])), "var(--ds-border, ".concat(N40, ")"), "var(--ds-space-075, 6px)", 9 / 4 * gridSize()) : '';
+});

package/dist/esm/plugins/autocomplete/components/autocomplete-option/glyphs.js

@@ -0,0 +1,98 @@
+import React from 'react';
+
+// Custom icons not from Atlaskit
+
+export var numberGlyph = function numberGlyph() {
+  return /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 24 24",
+    focusable: "false"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M7 4h10a3 3 0 0 1 3 3v10a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3zm.417 10.636h1.15V9.141H7.42L6 10.12v1.07l1.348-.93h.069v4.376zm1.923-3.85v.02h1.067v-.024c0-.506.365-.857.898-.857.503 0 .861.313.861.755 0 .357-.194.643-.967 1.397l-1.794 1.756v.803h3.964v-.955h-2.406v-.069l1.05-1.002c.953-.895 1.277-1.409 1.277-2.007 0-.944-.8-1.603-1.947-1.603-1.188 0-2.003.724-2.003 1.786zm5.811 1.466h.682c.617 0 .994.297.994.777 0 .469-.4.792-.975.792-.59 0-.983-.293-1.017-.757h-1.1c.05 1.035.88 1.713 2.106 1.713 1.253 0 2.159-.697 2.159-1.66 0-.724-.472-1.226-1.226-1.31v-.069c.613-.125 1.013-.62 1.013-1.257 0-.864-.811-1.481-1.939-1.481-1.2 0-1.972.655-2.01 1.695H14.9c.03-.476.385-.777.918-.777.537 0 .88.282.88.723 0 .45-.355.754-.876.754h-.67v.857z",
+    fill: "currentColor",
+    fillRule: "evenodd"
+  }));
+};
+
+// Following same approach as SWIFT page in Jira Frontend:
+// Most glyphs in the Atlaskit icon package are 20x20 on a 24px canvas, however there are several icons we use which do
+// not match these dimensions. We've copied these icons and standardised them to fit within a 16x16 box on a 24px canvas
+// to remain visually consistent. See jira-frontend/src/packages/project-settings/common/src/glyphs.js for more details.
+
+export var checkboxGlyph = function checkboxGlyph() {
+  return /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 24 24",
+    focusable: "false"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M4 5.994C4 4.893 4.895 4 5.994 4h12.012C19.107 4 20 4.895 20 5.994v12.012A1.995 1.995 0 0 1 18.006 20H5.994A1.995 1.995 0 0 1 4 18.006V5.994zm5.707 5.299a1 1 0 1 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 1 0-1.414-1.414L11 12.586l-1.293-1.293z",
+    fill: "currentColor",
+    fillRule: "evenodd"
+  }));
+};
+export var dateGlyph = function dateGlyph() {
+  return /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 24 24",
+    focusable: "false"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M8.667 6.167V7A.834.834 0 0 1 7 7V5.333a.834.834 0 0 1 1.667 0v.834zm6.666 0v-.834a.834.834 0 0 1 1.667 0V7a.834.834 0 0 1-1.667 0v-.833zm2.5 0h.005c.918 0 1.662.745 1.662 1.661v10.01c0 .918-.743 1.662-1.662 1.662H6.161A1.663 1.663 0 0 1 4.5 17.838V7.828c0-.917.743-1.661 1.662-1.661h.005V7c0 .927.746 1.667 1.666 1.667C8.76 8.667 9.5 7.92 9.5 7v-.833h5V7c0 .927.746 1.667 1.667 1.667.927 0 1.666-.747 1.666-1.667v-.833zm-10 6.667H9.5v-1.667H7.833v1.667zm0 3.334H9.5V14.5H7.833v1.668zm3.334-3.334h1.666v-1.667h-1.666v1.667zm0 3.334h1.666V14.5h-1.666v1.668zm3.333-3.334h1.667v-1.667H14.5v1.667zm0 3.334h1.667V14.5H14.5v1.668z",
+    fill: "currentColor",
+    fillRule: "evenodd"
+  }));
+};
+export var dropdownGlyph = function dropdownGlyph() {
+  return /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 24 24",
+    focusable: "false"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M12 19.5a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15zm.65-5.268l2.44-2.463a.84.84 0 0 0 0-1.182.822.822 0 0 0-1.17 0l-1.916 1.93-1.922-1.939a.824.824 0 0 0-1.173 0 .842.842 0 0 0 0 1.183l2.45 2.47a.92.92 0 0 0 .649.269.9.9 0 0 0 .641-.268z",
+    fill: "currentColor"
+  }));
+};
+export var labelGlyph = function labelGlyph() {
+  return /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 24 24",
+    focusable: "false"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M11.433 5.428l-4.207.6a2 2 0 0 0-1.697 1.698l-.601 4.207a1 1 0 0 0 .283.849l6.894 6.894a1 1 0 0 0 1.414 0l5.657-5.657a1 1 0 0 0 0-1.414L12.282 5.71a1 1 0 0 0-.849-.283zm-.647 5.858a1.667 1.667 0 1 1-2.357-2.357 1.667 1.667 0 0 1 2.357 2.357z",
+    fill: "currentColor",
+    fillRule: "evenodd"
+  }));
+};
+export var paragraphGlyph = function paragraphGlyph() {
+  return /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 24 24",
+    focusable: "false"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M7 7h11a1 1 0 0 1 0 2H7a1 1 0 1 1 0-2zm0 4h11a1 1 0 0 1 0 2H7a1 1 0 0 1 0-2zm0 4h6a1 1 0 0 1 0 2H7a1 1 0 0 1 0-2z",
+    fill: "currentColor",
+    fillRule: "evenodd"
+  }));
+};
+export var peopleGlyph = function peopleGlyph() {
+  return /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 24 24",
+    focusable: "false"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M12.12 20.249a8.398 8.398 0 0 1-.39-.003A8.25 8.25 0 0 1 3.75 12 8.25 8.25 0 0 1 12 3.75 8.25 8.25 0 0 1 20.25 12a8.25 8.25 0 0 1-8.13 8.25v-.001zm4.463-3.762A6.396 6.396 0 0 0 18.417 12 6.424 6.424 0 0 0 12 5.583 6.424 6.424 0 0 0 5.583 12c0 1.745.7 3.33 1.834 4.487v-1.27a2.291 2.291 0 0 1 2.292-2.292h4.582a2.292 2.292 0 0 1 2.292 2.291v1.27zM12 12a2.75 2.75 0 1 1 0-5.5 2.75 2.75 0 0 1 0 5.5z",
+    fill: "currentColor",
+    fillRule: "evenodd"
+  }));
+};
+export var shortTextGlyph = function shortTextGlyph() {
+  return /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 24 24",
+    focusable: "false"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M6.72 7.178l-2.93 8.627a.5.5 0 0 0 .473.661h.842a.75.75 0 0 0 .716-.53l.581-1.887h3.425l.58 1.887a.75.75 0 0 0 .717.53h.916a.5.5 0 0 0 .473-.66L9.578 7.177a1 1 0 0 0-.946-.678h-.966a1 1 0 0 0-.947.678zm1.37 1.228h.047l1.25 4.082H6.841l1.25-4.082zm10.187 1.872v-.23a.986.986 0 1 1 1.972 0v5.433a.986.986 0 0 1-1.972 0v-.217h-.08c-.36.802-1.13 1.32-2.217 1.32-1.81 0-2.952-1.479-2.952-3.834 0-2.334 1.149-3.805 2.952-3.805 1.075 0 1.858.546 2.216 1.333h.08zm-.04 2.486c0-1.347-.63-2.203-1.61-2.203-.978 0-1.58.843-1.58 2.203 0 1.368.602 2.196 1.58 2.196.988 0 1.61-.836 1.61-2.196z",
+    fill: "currentColor"
+  }));
+};
+export var timeStampGlyph = function timeStampGlyph() {
+  return /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 24 24",
+    focusable: "false"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M12 20a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm.787-7.674V8.944c0-.52-.402-.944-.893-.944-.492 0-.894.425-.894.944v3.777c0 .263.104.5.269.672l2.207 2.332a.862.862 0 0 0 1.263 0 .985.985 0 0 0 0-1.336l-1.952-2.063z",
+    fill: "currentColor",
+    fillRule: "evenodd"
+  }));
+};

package/dist/esm/plugins/autocomplete/components/autocomplete-option/index.js

@@ -0,0 +1,165 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { forwardRef, useCallback, useMemo, useState } from 'react';
+import deburr from 'lodash/deburr';
+import noop from 'lodash/noop';
+import Icon from '@atlaskit/icon';
+import InfoIcon from '@atlaskit/icon/glyph/editor/panel';
+import { normaliseJqlString } from '@atlaskit/jql-ast';
+import { N400 } from '@atlaskit/theme/colors';
+import Tooltip from '@atlaskit/tooltip';
+import { useIntl } from '../../../../state';
+import { checkboxGlyph, dateGlyph, dropdownGlyph, labelGlyph, numberGlyph, paragraphGlyph, peopleGlyph, shortTextGlyph, timeStampGlyph } from './glyphs';
+import { messages } from './messages';
+import { DeprecatedOptionContainer, FieldType, FieldTypeIcon, OptionHighlight, OptionListItem, OptionName, TooltipContent } from './styled';
+var ResizedIcon = function ResizedIcon(_ref) {
+  var glyph = _ref.glyph;
+  return /*#__PURE__*/React.createElement(Icon, {
+    glyph: glyph,
+    size: "small",
+    label: "",
+    testId: "jql-editor-field-type-icon"
+  });
+};
+
+/**
+ * List of types with supported icons is derived from GIN
+ * Custom SVGs are provisional while we work on making field type icons consistent across Atlassian
+ */
+var getFieldTypeIcon = function getFieldTypeIcon(type) {
+  switch (type) {
+    case 'Checkboxes':
+      return /*#__PURE__*/React.createElement(ResizedIcon, {
+        glyph: checkboxGlyph
+      });
+    case 'Date':
+      return /*#__PURE__*/React.createElement(ResizedIcon, {
+        glyph: dateGlyph
+      });
+    case 'Dropdown':
+      return /*#__PURE__*/React.createElement(ResizedIcon, {
+        glyph: dropdownGlyph
+      });
+    case 'Labels':
+      return /*#__PURE__*/React.createElement(ResizedIcon, {
+        glyph: labelGlyph
+      });
+    case 'Number':
+      return /*#__PURE__*/React.createElement(ResizedIcon, {
+        glyph: numberGlyph
+      });
+    case 'Paragraph':
+      return /*#__PURE__*/React.createElement(ResizedIcon, {
+        glyph: paragraphGlyph
+      });
+    case 'People':
+      return /*#__PURE__*/React.createElement(ResizedIcon, {
+        glyph: peopleGlyph
+      });
+    case 'Short text':
+      return /*#__PURE__*/React.createElement(ResizedIcon, {
+        glyph: shortTextGlyph
+      });
+    case 'Time stamp':
+      return /*#__PURE__*/React.createElement(ResizedIcon, {
+        glyph: timeStampGlyph
+      });
+    default:
+      return null;
+  }
+};
+var getHighlightPosition = function getHighlightPosition(name, matchedText) {
+  var normalizedName = deburr(name).toLowerCase();
+  var normalizedMatchedText = deburr(normaliseJqlString(matchedText)).toLowerCase();
+  var index = normalizedName.indexOf(normalizedMatchedText);
+  if (index === -1) {
+    return null;
+  }
+  return [index, index + normalizedMatchedText.length];
+};
+var getDeprecatedTooltipMessage = function getDeprecatedTooltipMessage(deprecatedSearcherKey) {
+  switch (deprecatedSearcherKey) {
+    case 'com.pyxis.greenhopper.jira:gh-epic-link-searcher':
+    case 'com.atlassian.jpo:jpo-custom-field-parent-searcher':
+      return messages.deprecatedFieldTooltipParentReplacementMessage;
+    default:
+      return messages.deprecatedFieldTooltipDefaultMessage;
+  }
+};
+var AutocompleteOption = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _props$option = props.option,
+    id = _props$option.id,
+    name = _props$option.name,
+    fieldType = _props$option.fieldType,
+    matchedText = _props$option.matchedText,
+    _props$option$isDepre = _props$option.isDeprecated,
+    isDeprecated = _props$option$isDepre === void 0 ? false : _props$option$isDepre,
+    deprecatedSearcherKey = _props$option.deprecatedSearcherKey,
+    isSelected = props.isSelected,
+    onClick = props.onClick,
+    onMouseMove = props.onMouseMove;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    overflows = _useState2[0],
+    setOverflows = _useState2[1];
+  var _useIntl = useIntl(),
+    _useIntl2 = _slicedToArray(_useIntl, 1),
+    formatMessage = _useIntl2[0].formatMessage;
+  var onNameRef = useCallback(function (node) {
+    // This ref will be re-invoked after a tooltip is rendered, so we avoid recomputing the overflow in that instance
+    // so we don't risk infinite re-renders (which we've observed through production logs).
+    if (node != null && !overflows) {
+      setOverflows(node.offsetWidth < node.scrollWidth);
+    }
+  }, [overflows]);
+
+  // TODO: verify type is i18n'd after integrating with GraphQL API
+
+  var fieldTypeIcon = fieldType ? getFieldTypeIcon(fieldType) : null;
+  var optionName = useMemo(function () {
+    var highlightPosition = getHighlightPosition(name, matchedText);
+    return highlightPosition ? /*#__PURE__*/React.createElement(OptionName, {
+      ref: onNameRef,
+      "aria-label": name
+    }, name.substring(0, highlightPosition[0]), /*#__PURE__*/React.createElement(OptionHighlight, null, name.substring.apply(name, _toConsumableArray(highlightPosition))), name.substring(highlightPosition[1])) : /*#__PURE__*/React.createElement(OptionName, {
+      ref: onNameRef
+    }, name);
+  }, [onNameRef, name, matchedText]);
+  var deprecatedTooltipContent = /*#__PURE__*/React.createElement(TooltipContent, null, formatMessage(getDeprecatedTooltipMessage(deprecatedSearcherKey), {
+    b: function b(text) {
+      return /*#__PURE__*/React.createElement("b", null, text);
+    },
+    received: name,
+    parentReplacement: 'Parent'
+  }));
+  var ListItem = /*#__PURE__*/React.createElement(OptionListItem, _extends({
+    id: id,
+    "data-testid": "jql-editor-autocomplete-option",
+    role: "option",
+    isSelected: isSelected,
+    isDeprecated: isDeprecated,
+    onClick: isDeprecated ? noop : onClick,
+    onMouseMove: isDeprecated ? noop : onMouseMove
+  }, ref && {
+    ref: ref
+  }, {
+    "aria-selected": isSelected
+  }), isDeprecated ? /*#__PURE__*/React.createElement(DeprecatedOptionContainer, null, optionName, /*#__PURE__*/React.createElement(Tooltip, {
+    content: deprecatedTooltipContent,
+    position: 'right'
+  }, /*#__PURE__*/React.createElement(InfoIcon, {
+    testId: "jql-editor-deprecated-icon",
+    label: "",
+    primaryColor: "var(--ds-icon, ".concat(N400, ")")
+  }))) : optionName, fieldType && /*#__PURE__*/React.createElement(FieldType, null, fieldTypeIcon && /*#__PURE__*/React.createElement(FieldTypeIcon, null, fieldTypeIcon), fieldType));
+  var tooltipContent = /*#__PURE__*/React.createElement(TooltipContent, null, name);
+  if (overflows) {
+    return /*#__PURE__*/React.createElement(Tooltip, {
+      content: tooltipContent,
+      position: 'right'
+    }, ListItem);
+  }
+  return ListItem;
+});
+export default AutocompleteOption;

package/dist/esm/plugins/autocomplete/components/autocomplete-option/messages.js

@@ -0,0 +1,13 @@
+import { defineMessages } from 'react-intl-next';
+export var messages = defineMessages({
+  deprecatedFieldTooltipDefaultMessage: {
+    id: 'jql-editor.plugins.autocomplete.autocomplete-option.deprecated-tooltip.default',
+    defaultMessage: 'This field has been deprecated and may stop working in the future.',
+    description: 'Default tooltip message for a deprecated field.'
+  },
+  deprecatedFieldTooltipParentReplacementMessage: {
+    id: 'jql-editor.plugins.autocomplete.autocomplete-option.deprecated-tooltip.epic-link',
+    defaultMessage: "<b>''{received}''</b> will soon be replaced with <b>''{parentReplacement}''</b>. Use the <b>''{parentReplacement}''</b> field instead.",
+    description: 'Tooltip message served to user when there is a deprecated field'
+  }
+});

package/dist/esm/plugins/autocomplete/components/autocomplete-option/styled.js

@@ -0,0 +1,21 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { N100, N20, N50, N800 } from '@atlaskit/theme/colors';
+import { codeFontFamily, fontFamily,
+// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
+gridSize } from '@atlaskit/theme/constants';
+export var TooltipContent = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  font-family: ", ";\n"])), fontFamily);
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+export var OptionListItem = styled.li(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  cursor: pointer;\n  padding: ", " ", "px;\n  font-family: ", ";\n  line-height: 24px;\n  ", "\n  ", "\n"])), "var(--ds-space-075, 6px)", 5 / 4 * gridSize(), codeFontFamily, function (props) {
+  return props.isSelected ? css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          background: ", ";\n        "])), "var(--ds-background-neutral-subtle-hovered, ".concat(N20, ")")) : '';
+}, function (props) {
+  return props.isDeprecated ? css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n          cursor: default;\n          color: ", ";\n        "])), "var(--ds-text-disabled, ".concat(N50, ")")) : '';
+});
+export var OptionName = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  color: ", ";\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  // Added so that overflowed option names do not squish the deprecated info icon\n  flex: 1;\n"])), "var(--ds-text, ".concat(N800, ")"));
+export var DeprecatedOptionContainer = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  color: ", ";\n  display: flex;\n  justify-content: space-between;\n  opacity: 0.6;\n"])), "var(--ds-text-disabled, ".concat(N50, ")"));
+export var OptionHighlight = styled.span(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  font-weight: bold;\n"])));
+export var FieldType = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  margin-top: ", ";\n  color: ", ";\n"])), "var(--ds-space-negative-025, -2px)", "var(--ds-text-subtlest, ".concat(N100, ")"));
+export var FieldTypeIcon = styled.span(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  display: flex;\n  margin-right: ", ";\n"])), "var(--ds-space-050, 4px)");

package/dist/esm/plugins/autocomplete/components/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/plugins/autocomplete/constants.js

@@ -0,0 +1,29 @@
+import { empty } from 'rxjs/observable/empty';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+export var AUTOCOMPLETE_PLUGIN_NAME = 'jql-autocomplete-plugin';
+export var ARROW_UP_KEY = 'ArrowUp';
+export var ARROW_DOWN_KEY = 'ArrowDown';
+export var CMD_ARROW_UP_KEY = 'Cmd-ArrowUp';
+export var CMD_ARROW_DOWN_KEY = 'Cmd-ArrowDown';
+export var HOME_KEY = 'Home'; // === Fn-Left in Mac
+export var END_KEY = 'End'; // === Fn-Right in Mac
+export var ENTER_KEY = 'Enter';
+export var ESCAPE_KEY = 'Escape';
+export var TAB_KEY = 'Tab';
+
+// No-op autocomplete provider used when creating the initial state
+export var defaultAutocompleteProvider = {
+  onFields: function onFields() {
+    return empty();
+  },
+  onOperators: function onOperators() {
+    return empty();
+  },
+  onValues: function onValues() {
+    return empty();
+  },
+  onFunctions: function onFunctions() {
+    return empty();
+  }
+};
+export var JQLAutocompletePluginKey = new PluginKey(AUTOCOMPLETE_PLUGIN_NAME);

package/dist/esm/plugins/autocomplete/index.js

@@ -0,0 +1,30 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { keydownHandler } from '@atlaskit/editor-prosemirror/keymap';
+import { Plugin } from '@atlaskit/editor-prosemirror/state';
+import { PluginKeymap } from '../common/plugin-keymap';
+import { ARROW_DOWN_KEY, ARROW_UP_KEY, CMD_ARROW_DOWN_KEY, CMD_ARROW_UP_KEY, END_KEY, ENTER_KEY, ESCAPE_KEY, HOME_KEY, JQLAutocompletePluginKey, TAB_KEY } from './constants';
+import AutocompletePluginView from './view';
+var getKeyHandler = function getKeyHandler(keymap, key) {
+  return function (state, dispatch, view) {
+    var binding = keymap.getKeyBinding(key);
+    return binding ? binding(state, dispatch, view) : false;
+  };
+};
+var autocompletePlugin = function autocompletePlugin(portalActions, enableRichInlineNodes) {
+  var _keydownHandler;
+  // Empty keymap passed down to the React component so it can register key bindings
+  var keymap = new PluginKeymap();
+  return new Plugin({
+    key: JQLAutocompletePluginKey,
+    view: function view(editorView) {
+      var view = new AutocompletePluginView(editorView, keymap, portalActions, enableRichInlineNodes);
+      // Initialise view to mount the react component
+      view.init();
+      return view;
+    },
+    props: {
+      handleKeyDown: keydownHandler((_keydownHandler = {}, _defineProperty(_keydownHandler, ARROW_UP_KEY, getKeyHandler(keymap, ARROW_UP_KEY)), _defineProperty(_keydownHandler, ARROW_DOWN_KEY, getKeyHandler(keymap, ARROW_DOWN_KEY)), _defineProperty(_keydownHandler, CMD_ARROW_UP_KEY, getKeyHandler(keymap, CMD_ARROW_UP_KEY)), _defineProperty(_keydownHandler, CMD_ARROW_DOWN_KEY, getKeyHandler(keymap, CMD_ARROW_DOWN_KEY)), _defineProperty(_keydownHandler, HOME_KEY, getKeyHandler(keymap, HOME_KEY)), _defineProperty(_keydownHandler, END_KEY, getKeyHandler(keymap, END_KEY)), _defineProperty(_keydownHandler, ESCAPE_KEY, getKeyHandler(keymap, ESCAPE_KEY)), _defineProperty(_keydownHandler, ENTER_KEY, getKeyHandler(keymap, ENTER_KEY)), _defineProperty(_keydownHandler, TAB_KEY, getKeyHandler(keymap, TAB_KEY)), _keydownHandler))
+    }
+  });
+};
+export default autocompletePlugin;

package/dist/esm/plugins/autocomplete/messages.js

@@ -0,0 +1,8 @@
+import { defineMessages } from 'react-intl-next';
+export var messages = defineMessages({
+  optionsFound: {
+    id: 'jql-editor.plugins.autocomplete.options-found',
+    defaultMessage: 'Choose from the suggested list of options below.',
+    description: 'This message is read by screen readers when autocomplete suggestions are available in the JQL editor.'
+  }
+});