@atlaskit/jql-editor 4.0.0

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

@@ -0,0 +1,278 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
+var _accessibility = require("../../../../accessibility");
+var _constants = require("../../../../common/constants");
+var _state = require("../../../../state");
+var _constants2 = require("../../constants");
+var _messages = require("../../messages");
+var _autocompleteOption = _interopRequireDefault(require("../autocomplete-option"));
+var _styled = require("./styled");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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 = (0, _react.useRef)(null);
+  var scrollContainerRef = (0, _react.useRef)(null);
+  var selectedItemRef = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    navigatingWithKeyboard = _useState2[0],
+    setNavigatingWithKeyboard = _useState2[1];
+  var _useIntl = (0, _state.useIntl)(),
+    _useIntl2 = (0, _slicedToArray2.default)(_useIntl, 1),
+    intl = _useIntl2[0];
+  var _useStoreActions = (0, _state.useStoreActions)(),
+    _useStoreActions2 = (0, _slicedToArray2.default)(_useStoreActions, 2),
+    _useStoreActions2$ = _useStoreActions2[1],
+    onEditorViewFocus = _useStoreActions2$.onEditorViewFocus,
+    onEditorViewBlur = _useStoreActions2$.onEditorViewBlur;
+  var _useAutocomplete = (0, _state.useAutocomplete)(),
+    _useAutocomplete2 = (0, _slicedToArray2.default)(_useAutocomplete, 2),
+    selectedOptionId = _useAutocomplete2[0].selectedOptionId,
+    _useAutocomplete2$ = _useAutocomplete2[1],
+    closeAutocomplete = _useAutocomplete2$.closeAutocomplete,
+    setAutocompleteContainer = _useAutocomplete2$.setAutocompleteContainer,
+    setSelectedAutocompleteOptionId = _useAutocomplete2$.setSelectedAutocompleteOptionId;
+  var _useAutocompleteIsOpe = (0, _state.useAutocompleteIsOpen)(),
+    _useAutocompleteIsOpe2 = (0, _slicedToArray2.default)(_useAutocompleteIsOpe, 1),
+    isAutocompleteOpen = _useAutocompleteIsOpe2[0];
+  var _useAutocompletePosit = (0, _state.useAutocompletePosition)(),
+    _useAutocompletePosit2 = (0, _slicedToArray2.default)(_useAutocompletePosit, 1),
+    _useAutocompletePosit3 = _useAutocompletePosit2[0],
+    top = _useAutocompletePosit3.top,
+    left = _useAutocompletePosit3.left;
+  var _useRichInlineNodesEn = (0, _state.useRichInlineNodesEnabled)(),
+    _useRichInlineNodesEn2 = (0, _slicedToArray2.default)(_useRichInlineNodesEn, 1),
+    areRichInlineNodesEnabled = _useRichInlineNodesEn2[0];
+  var _useScopedId = (0, _state.useScopedId)(_constants.JQL_EDITOR_AUTOCOMPLETE_ID),
+    _useScopedId2 = (0, _slicedToArray2.default)(_useScopedId, 1),
+    autocompleteId = _useScopedId2[0];
+  var onContainerRef = (0, _react.useCallback)(function (container) {
+    containerRef.current = container;
+    setAutocompleteContainer(container);
+  }, [containerRef, setAutocompleteContainer]);
+  var onScrollContainerRef = (0, _react.useCallback)(function (container) {
+    scrollContainerRef.current = container;
+  }, [scrollContainerRef]);
+  var handleClick = (0, _react.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 = (0, _react.useCallback)(function () {
+    if (navigatingWithKeyboard) {
+      setNavigatingWithKeyboard(false);
+    }
+  }, [navigatingWithKeyboard, setNavigatingWithKeyboard]);
+  (0, _react.useEffect)(function () {
+    keymap.bindKey(_constants2.ARROW_UP_KEY, function () {
+      if (!isAutocompleteOpen) {
+        return false;
+      }
+      !navigatingWithKeyboard && setNavigatingWithKeyboard(true);
+      var previousOptionId = getPreviousOptionId(options, selectedOptionId);
+      setSelectedAutocompleteOptionId(previousOptionId);
+      return true;
+    });
+    keymap.bindKey(_constants2.ARROW_DOWN_KEY, function () {
+      if (!isAutocompleteOpen) {
+        return false;
+      }
+      !navigatingWithKeyboard && setNavigatingWithKeyboard(true);
+      var nextOptionId = getNextOptionId(options, selectedOptionId);
+      setSelectedAutocompleteOptionId(nextOptionId);
+      return true;
+    });
+    keymap.bindMultipleKeys([_constants2.ENTER_KEY, _constants2.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(_constants2.ESCAPE_KEY, function () {
+      if (!isAutocompleteOpen) {
+        return false;
+      }
+      closeAutocomplete();
+      return true;
+    });
+    keymap.bindMultipleKeys([_constants2.HOME_KEY, _constants2.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([_constants2.END_KEY, _constants2.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(_constants2.ARROW_UP_KEY);
+      keymap.unbindKey(_constants2.ARROW_DOWN_KEY);
+      keymap.unbindKey(_constants2.ENTER_KEY);
+      keymap.unbindKey(_constants2.TAB_KEY);
+      keymap.unbindKey(_constants2.ESCAPE_KEY);
+      keymap.unbindKey(_constants2.HOME_KEY);
+      keymap.unbindKey(_constants2.END_KEY);
+      keymap.unbindKey(_constants2.CMD_ARROW_UP_KEY);
+      keymap.unbindKey(_constants2.CMD_ARROW_DOWN_KEY);
+    };
+  }, [keymap, isAutocompleteOpen, closeAutocomplete, navigatingWithKeyboard, setNavigatingWithKeyboard, options, selectedOptionId, setSelectedAutocompleteOptionId, handleClick]);
+  (0, _react.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]);
+  (0, _react.useLayoutEffect)(function () {
+    requestAnimationFrame(function () {
+      if (containerRef.current) {
+        containerRef.current.style.top = "".concat(top, "px");
+        containerRef.current.style.left = "".concat(left, "px");
+      }
+    });
+  }, [top, left]);
+  (0, _react.useLayoutEffect)(function () {
+    if (navigatingWithKeyboard) {
+      var _selectedItemRef$curr;
+      (_selectedItemRef$curr = selectedItemRef.current) === null || _selectedItemRef$curr === void 0 || _selectedItemRef$curr.scrollIntoView({
+        block: 'nearest'
+      });
+    }
+  }, [navigatingWithKeyboard, selectedOptionId, selectedItemRef]);
+  (0, _react.useLayoutEffect)(function () {
+    var _selectedItemRef$curr2;
+    (_selectedItemRef$curr2 = selectedItemRef.current) === null || _selectedItemRef$curr2 === void 0 || _selectedItemRef$curr2.scrollIntoView({
+      block: 'nearest'
+    });
+  }, [options, selectedItemRef]);
+  (0, _react.useLayoutEffect)(function () {
+    if (isAutocompleteOpen && !selectedOptionId && scrollContainerRef.current) {
+      scrollContainerRef.current.scrollTop = 0;
+    }
+  }, [isAutocompleteOpen, selectedOptionId]);
+  var announcedMessage = (0, _react.useMemo)(function () {
+    if (!isAutocompleteOpen || !options.length) {
+      return '';
+    }
+    return intl.formatMessage(_messages.messages.optionsFound);
+  }, [isAutocompleteOpen, intl, options]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styled.AutocompleteContainer, {
+    "data-testid": "jql-editor-autocomplete",
+    tabIndex: -1,
+    ref: onContainerRef,
+    isOpen: isAutocompleteOpen,
+    onBlur: onEditorViewBlur,
+    onFocus: onEditorViewFocus
+  }, /*#__PURE__*/_react.default.createElement(_styled.AutocompleteOptionsContainer, {
+    ref: onScrollContainerRef,
+    onMouseMove: onMouseMove
+  }, /*#__PURE__*/_react.default.createElement(_styled.OptionList, {
+    role: "listbox",
+    id: autocompleteId
+  }, options.map(function (option, index) {
+    var isSelected = option.id === selectedOptionId;
+    return /*#__PURE__*/_react.default.createElement(_autocompleteOption.default, (0, _extends2.default)({
+      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.default.createElement(_styled.AutocompleteLoadingFooter, {
+    "data-testid": "jql-editor-autocomplete-loading",
+    hasOptions: !!options.length
+  }, /*#__PURE__*/_react.default.createElement(_spinner.default, {
+    size: "small"
+  }))), /*#__PURE__*/_react.default.createElement(_accessibility.ScreenReaderText, {
+    role: "status",
+    "aria-live": "polite"
+  }, announcedMessage));
+};
+var _default = exports.default = AutocompleteDropdown;

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

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.OptionList = exports.AutocompleteOptionsContainer = exports.AutocompleteLoadingFooter = exports.AutocompleteContainer = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = require("@emotion/react");
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _colors = require("@atlaskit/theme/colors");
+var _constants = require("@atlaskit/theme/constants");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5; // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
+var AutocompleteContainer = exports.AutocompleteContainer = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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';
+}, _constants.layers.dialog, "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")"), "var(--ds-space-075, 6px)", 25 * (0, _constants.gridSize)(), 50 * (0, _constants.gridSize)());
+var AutocompleteOptionsContainer = exports.AutocompleteOptionsContainer = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  max-height: ", "px;\n  overflow: auto;\n"])), 36 * (0, _constants.gridSize)());
+var OptionList = exports.OptionList = _styled.default.ul(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  list-style: none;\n  margin: 0;\n  padding: 0;\n"])));
+var AutocompleteLoadingFooter = exports.AutocompleteLoadingFooter = _styled.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\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(_colors.N200, ")"), "var(--ds-space-150, 12px)", function (props) {
+  return props.hasOptions ? // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n          border-top: solid 1px ", ";\n          margin-top: ", ";\n          /* 3/2 + 3/4 */\n          padding-top: ", "px;\n        "])), "var(--ds-border, ".concat(_colors.N40, ")"), "var(--ds-space-075, 6px)", 9 / 4 * (0, _constants.gridSize)()) : '';
+});

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

@@ -0,0 +1,104 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.timeStampGlyph = exports.shortTextGlyph = exports.peopleGlyph = exports.paragraphGlyph = exports.numberGlyph = exports.labelGlyph = exports.dropdownGlyph = exports.dateGlyph = exports.checkboxGlyph = void 0;
+var _react = _interopRequireDefault(require("react"));
+// Custom icons not from Atlaskit
+
+var numberGlyph = exports.numberGlyph = function numberGlyph() {
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    viewBox: "0 0 24 24",
+    focusable: "false"
+  }, /*#__PURE__*/_react.default.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.
+
+var checkboxGlyph = exports.checkboxGlyph = function checkboxGlyph() {
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    viewBox: "0 0 24 24",
+    focusable: "false"
+  }, /*#__PURE__*/_react.default.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"
+  }));
+};
+var dateGlyph = exports.dateGlyph = function dateGlyph() {
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    viewBox: "0 0 24 24",
+    focusable: "false"
+  }, /*#__PURE__*/_react.default.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"
+  }));
+};
+var dropdownGlyph = exports.dropdownGlyph = function dropdownGlyph() {
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    viewBox: "0 0 24 24",
+    focusable: "false"
+  }, /*#__PURE__*/_react.default.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"
+  }));
+};
+var labelGlyph = exports.labelGlyph = function labelGlyph() {
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    viewBox: "0 0 24 24",
+    focusable: "false"
+  }, /*#__PURE__*/_react.default.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"
+  }));
+};
+var paragraphGlyph = exports.paragraphGlyph = function paragraphGlyph() {
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    viewBox: "0 0 24 24",
+    focusable: "false"
+  }, /*#__PURE__*/_react.default.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"
+  }));
+};
+var peopleGlyph = exports.peopleGlyph = function peopleGlyph() {
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    viewBox: "0 0 24 24",
+    focusable: "false"
+  }, /*#__PURE__*/_react.default.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"
+  }));
+};
+var shortTextGlyph = exports.shortTextGlyph = function shortTextGlyph() {
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    viewBox: "0 0 24 24",
+    focusable: "false"
+  }, /*#__PURE__*/_react.default.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"
+  }));
+};
+var timeStampGlyph = exports.timeStampGlyph = function timeStampGlyph() {
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    viewBox: "0 0 24 24",
+    focusable: "false"
+  }, /*#__PURE__*/_react.default.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/cjs/plugins/autocomplete/components/autocomplete-option/index.js

@@ -0,0 +1,175 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _deburr = _interopRequireDefault(require("lodash/deburr"));
+var _noop = _interopRequireDefault(require("lodash/noop"));
+var _icon = _interopRequireDefault(require("@atlaskit/icon"));
+var _panel = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/panel"));
+var _jqlAst = require("@atlaskit/jql-ast");
+var _colors = require("@atlaskit/theme/colors");
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+var _state = require("../../../../state");
+var _glyphs = require("./glyphs");
+var _messages = require("./messages");
+var _styled = require("./styled");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var ResizedIcon = function ResizedIcon(_ref) {
+  var glyph = _ref.glyph;
+  return /*#__PURE__*/_react.default.createElement(_icon.default, {
+    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.default.createElement(ResizedIcon, {
+        glyph: _glyphs.checkboxGlyph
+      });
+    case 'Date':
+      return /*#__PURE__*/_react.default.createElement(ResizedIcon, {
+        glyph: _glyphs.dateGlyph
+      });
+    case 'Dropdown':
+      return /*#__PURE__*/_react.default.createElement(ResizedIcon, {
+        glyph: _glyphs.dropdownGlyph
+      });
+    case 'Labels':
+      return /*#__PURE__*/_react.default.createElement(ResizedIcon, {
+        glyph: _glyphs.labelGlyph
+      });
+    case 'Number':
+      return /*#__PURE__*/_react.default.createElement(ResizedIcon, {
+        glyph: _glyphs.numberGlyph
+      });
+    case 'Paragraph':
+      return /*#__PURE__*/_react.default.createElement(ResizedIcon, {
+        glyph: _glyphs.paragraphGlyph
+      });
+    case 'People':
+      return /*#__PURE__*/_react.default.createElement(ResizedIcon, {
+        glyph: _glyphs.peopleGlyph
+      });
+    case 'Short text':
+      return /*#__PURE__*/_react.default.createElement(ResizedIcon, {
+        glyph: _glyphs.shortTextGlyph
+      });
+    case 'Time stamp':
+      return /*#__PURE__*/_react.default.createElement(ResizedIcon, {
+        glyph: _glyphs.timeStampGlyph
+      });
+    default:
+      return null;
+  }
+};
+var getHighlightPosition = function getHighlightPosition(name, matchedText) {
+  var normalizedName = (0, _deburr.default)(name).toLowerCase();
+  var normalizedMatchedText = (0, _deburr.default)((0, _jqlAst.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.messages.deprecatedFieldTooltipParentReplacementMessage;
+    default:
+      return _messages.messages.deprecatedFieldTooltipDefaultMessage;
+  }
+};
+var AutocompleteOption = /*#__PURE__*/(0, _react.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 = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    overflows = _useState2[0],
+    setOverflows = _useState2[1];
+  var _useIntl = (0, _state.useIntl)(),
+    _useIntl2 = (0, _slicedToArray2.default)(_useIntl, 1),
+    formatMessage = _useIntl2[0].formatMessage;
+  var onNameRef = (0, _react.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 = (0, _react.useMemo)(function () {
+    var highlightPosition = getHighlightPosition(name, matchedText);
+    return highlightPosition ? /*#__PURE__*/_react.default.createElement(_styled.OptionName, {
+      ref: onNameRef,
+      "aria-label": name
+    }, name.substring(0, highlightPosition[0]), /*#__PURE__*/_react.default.createElement(_styled.OptionHighlight, null, name.substring.apply(name, (0, _toConsumableArray2.default)(highlightPosition))), name.substring(highlightPosition[1])) : /*#__PURE__*/_react.default.createElement(_styled.OptionName, {
+      ref: onNameRef
+    }, name);
+  }, [onNameRef, name, matchedText]);
+  var deprecatedTooltipContent = /*#__PURE__*/_react.default.createElement(_styled.TooltipContent, null, formatMessage(getDeprecatedTooltipMessage(deprecatedSearcherKey), {
+    b: function b(text) {
+      return /*#__PURE__*/_react.default.createElement("b", null, text);
+    },
+    received: name,
+    parentReplacement: 'Parent'
+  }));
+  var ListItem = /*#__PURE__*/_react.default.createElement(_styled.OptionListItem, (0, _extends2.default)({
+    id: id,
+    "data-testid": "jql-editor-autocomplete-option",
+    role: "option",
+    isSelected: isSelected,
+    isDeprecated: isDeprecated,
+    onClick: isDeprecated ? _noop.default : onClick,
+    onMouseMove: isDeprecated ? _noop.default : onMouseMove
+  }, ref && {
+    ref: ref
+  }, {
+    "aria-selected": isSelected
+  }), isDeprecated ? /*#__PURE__*/_react.default.createElement(_styled.DeprecatedOptionContainer, null, optionName, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+    content: deprecatedTooltipContent,
+    position: 'right'
+  }, /*#__PURE__*/_react.default.createElement(_panel.default, {
+    testId: "jql-editor-deprecated-icon",
+    label: "",
+    primaryColor: "var(--ds-icon, ".concat(_colors.N400, ")")
+  }))) : optionName, fieldType && /*#__PURE__*/_react.default.createElement(_styled.FieldType, null, fieldTypeIcon && /*#__PURE__*/_react.default.createElement(_styled.FieldTypeIcon, null, fieldTypeIcon), fieldType));
+  var tooltipContent = /*#__PURE__*/_react.default.createElement(_styled.TooltipContent, null, name);
+  if (overflows) {
+    return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+      content: tooltipContent,
+      position: 'right'
+    }, ListItem);
+  }
+  return ListItem;
+});
+var _default = exports.default = AutocompleteOption;

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

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.messages = void 0;
+var _reactIntlNext = require("react-intl-next");
+var messages = exports.messages = (0, _reactIntlNext.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/cjs/plugins/autocomplete/components/autocomplete-option/styled.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TooltipContent = exports.OptionName = exports.OptionListItem = exports.OptionHighlight = exports.FieldTypeIcon = exports.FieldType = exports.DeprecatedOptionContainer = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = require("@emotion/react");
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _colors = require("@atlaskit/theme/colors");
+var _constants = require("@atlaskit/theme/constants");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+var TooltipContent = exports.TooltipContent = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  font-family: ", ";\n"])), _constants.fontFamily);
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+var OptionListItem = exports.OptionListItem = _styled.default.li(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  cursor: pointer;\n  padding: ", " ", "px;\n  font-family: ", ";\n  line-height: 24px;\n  ", "\n  ", "\n"])), "var(--ds-space-075, 6px)", 5 / 4 * (0, _constants.gridSize)(), _constants.codeFontFamily, function (props) {
+  return props.isSelected ? (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n          background: ", ";\n        "])), "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N20, ")")) : '';
+}, function (props) {
+  return props.isDeprecated ? (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n          cursor: default;\n          color: ", ";\n        "])), "var(--ds-text-disabled, ".concat(_colors.N50, ")")) : '';
+});
+var OptionName = exports.OptionName = _styled.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\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(_colors.N800, ")"));
+var DeprecatedOptionContainer = exports.DeprecatedOptionContainer = _styled.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  display: flex;\n  justify-content: space-between;\n  opacity: 0.6;\n"])), "var(--ds-text-disabled, ".concat(_colors.N50, ")"));
+var OptionHighlight = exports.OptionHighlight = _styled.default.span(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: bold;\n"])));
+var FieldType = exports.FieldType = _styled.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  margin-top: ", ";\n  color: ", ";\n"])), "var(--ds-space-negative-025, -2px)", "var(--ds-text-subtlest, ".concat(_colors.N100, ")"));
+var FieldTypeIcon = exports.FieldTypeIcon = _styled.default.span(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-right: ", ";\n"])), "var(--ds-space-050, 4px)");

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

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});