@atlaskit/jql-editor 4.0.0

package/dist/es2019/i18n/zh.js

@@ -0,0 +1,62 @@
+/* prettier-ignore */
+/**
+ * NOTE:
+ *
+ * This file is automatically generated by Traduki 2.0.
+ * DO NOT CHANGE IT BY HAND or your changes will be lost.
+ */
+//Chinese (Simplified)
+export default {
+  'jql-editor.common.validation.unknown-error': '无法解析该查询。',
+  'jql-editor.plugins.autocomplete.autocomplete-option.deprecated-tooltip.default': '此字段已被弃用，且将来可能会停止使用。',
+  'jql-editor.plugins.autocomplete.autocomplete-option.deprecated-tooltip.epic-link': "<b>''{received}'</b> 很快就会被替换为 <b>''{parentReplacement}'</b>。请改为使用 <b>''{parentReplacement}'</b> 字段。",
+  'jql-editor.plugins.autocomplete.options-found': '从以下推荐的选项列表中进行选择。',
+  'jql-editor.plugins.jql-ast.error-messages.expectingCFButReceived': "需要一个字段名称，但收到 '['。您是否是指 'cf['？",
+  'jql-editor.plugins.jql-ast.error-messages.expectingCustomFieldId': "需要一个在 'cf' 之后用 '[]' 括起来的自定义字段 ID。例如：'cf[10021]'。",
+  'jql-editor.plugins.jql-ast.error-messages.expectingFieldBeforeEOF': '在查询末尾前需有一个字段名称。',
+  'jql-editor.plugins.jql-ast.error-messages.expectingFieldButReceived': "需要一个字段名称，但收到 ''{received}'。您必须将 ''{received}' 用引号括起，以将其用作字段名称。",
+  'jql-editor.plugins.jql-ast.error-messages.expectingFieldPropertyIdBeforeEOF': '在查询末尾前需有一个属性 ID。',
+  'jql-editor.plugins.jql-ast.error-messages.expectingFieldPropertyIdButReceived': "需要一个属性 ID，但收到 ''{received}'。您必须将 ''{received}' 用引号括起，以将其用作值。",
+  'jql-editor.plugins.jql-ast.error-messages.expectingFunctionArgBeforeEOF': '在查询末尾前需有一个函数参数。',
+  'jql-editor.plugins.jql-ast.error-messages.expectingFunctionArgButReceived': "需要一个函数参数，但收到 ''{received}'。您必须将 ''{received}' 用引号括起，以将其用作值。",
+  'jql-editor.plugins.jql-ast.error-messages.expectingFunctionBeforeEOF': '在查询末尾前需有一个函数。',
+  'jql-editor.plugins.jql-ast.error-messages.expectingFunctionButReceived': "需要一个函数，但收到 ''{received}'。您必须将 ''{received}' 用引号括起，以将其用作值。",
+  'jql-editor.plugins.jql-ast.error-messages.expectingListBeforeEOF': '在查询末尾前需有一个列表。',
+  'jql-editor.plugins.jql-ast.error-messages.expectingListButReceived': "需要一个列表，但收到 ''{received}'。您必须将 ''{received}' 用引号括起，以将其用作值。",
+  'jql-editor.plugins.jql-ast.error-messages.expectingListOrFunctionBeforeEOF': '在查询末尾前需有一个列表或函数。',
+  'jql-editor.plugins.jql-ast.error-messages.expectingListOrFunctionButReceived': "需要一个列表或函数，但收到 ''{received}'。您必须将 ''{received}' 用引号括起，以将其用作值。",
+  'jql-editor.plugins.jql-ast.error-messages.expectingMultipleTokensBeforeEOF': "在查询末尾前需有{firstExpectedTokens}或 ''{lastExpectedToken}'。",
+  'jql-editor.plugins.jql-ast.error-messages.expectingMultipleTokensButReceived': "需要{firstExpectedTokens}或 ''{lastExpectedToken}'，但收到 ''{received}'。",
+  'jql-editor.plugins.jql-ast.error-messages.expectingOperandBeforeEOF': '在查询末尾前需有一个值、列表或函数。',
+  'jql-editor.plugins.jql-ast.error-messages.expectingOperandButReceived': "需要一个值、列表或函数，但收到 ''{received}'。您必须将 ''{received}' 用引号括起，以将其用作值。",
+  'jql-editor.plugins.jql-ast.error-messages.expectingOperatorBeforeEOF': "在查询末尾前需有一个运算符。有效的运算符为 '='、'!='、'<'、'>'、'<='、'>='、'~'、'!~'、'IN'、'NOT IN'、'IS' 和 'IS NOT'。",
+  'jql-editor.plugins.jql-ast.error-messages.expectingOperatorButReceived': "需要一个运算符，但收到 ''{received}'。有效的运算符为 '='、'!='、'<'、'>'、'<='、'>='、'~'、'!~'、'IN'、'NOT IN'、'IS' 和 'IS NOT'。",
+  'jql-editor.plugins.jql-ast.error-messages.expectingTokenBeforeEOF': "在查询末尾前需有 ''{expectedToken}'。",
+  'jql-editor.plugins.jql-ast.error-messages.expectingTokenButReceived': "需要 ''{expectedToken}'，但收到 ''{received}'。",
+  'jql-editor.plugins.jql-ast.error-messages.expectingValueBeforeEOF': '在查询末尾前需有一个值。',
+  'jql-editor.plugins.jql-ast.error-messages.expectingValueButReceived': "需要一个值，但收到 ''{received}'。您必须将 ''{received}' 用引号括起，以将其用作值。",
+  'jql-editor.plugins.jql-ast.error-messages.expectingValueOrFunctionBeforeEOF': '在查询末尾前需有一个值或函数。',
+  'jql-editor.plugins.jql-ast.error-messages.expectingValueOrFunctionButReceived': "需要一个值或函数，但收到 ''{received}'。您必须将 ''{received}' 用引号括起，以将其用作值。",
+  'jql-editor.plugins.jql-ast.error-messages.illegalChar': "必须对字符 ''{char}' 进行转义。请改用转义符 ''{escapedChar}'。",
+  'jql-editor.plugins.jql-ast.error-messages.illegalEscape': "''{received}' 为非法 JQL 转义序列。有效的转义序列为 \\'、\\\"、\\t、\\n、\\r、\\\\、'\\ ' 和 \\uXXXX。",
+  'jql-editor.plugins.jql-ast.error-messages.illegalEscapeBlank': "转义序列尚不完整。有效的转义序列为 \\'、\\\"、\\t、\\n、\\r、\\\\、'\\ ' 和 \\uXXXX。",
+  'jql-editor.plugins.jql-ast.error-messages.reservedChar': "字符 ''{char}' 为 JQL 保留字符。您必须将它放进字符串中，或改用转义符 ''{escapedChar}'。",
+  'jql-editor.plugins.jql-ast.error-messages.reservedWord': "''{word}' 为 JQL 保留字。您必须将它用引号括起，才能在查询中使用。",
+  'jql-editor.plugins.jql-ast.error-messages.unfinishedString': "带引号的字符串 ''{received}' 尚不完整。",
+  'jql-editor.plugins.jql-ast.error-messages.unfinishedStringBlank': '带引号的字符串尚不完整。',
+  'jql-editor.plugins.jql-ast.error-messages.unknownErrorAtToken': "无法解析位于 ''{received}' 的查询。",
+  'jql-editor.ui.input-label': 'JQL 查询',
+  'jql-editor.ui.jql-editor-controls-content.expand-toggle.button-label': '编辑器',
+  'jql-editor.ui.jql-editor-controls-content.expand-toggle.collapse-tooltip': '收起编辑器',
+  'jql-editor.ui.jql-editor-controls-content.expand-toggle.expand-tooltip': '展开编辑器',
+  'jql-editor.ui.jql-editor-controls-content.search.label': '搜索',
+  'jql-editor.ui.jql-editor-footer-content.jql-editor-help.syntax-help.description': '在新选项卡中打开 JQL 语法帮助。',
+  'jql-editor.ui.jql-editor-footer-content.jql-editor-help.syntax-help.tooltip': '语法帮助',
+  'jql-editor.ui.jql-editor-help.field-new-line-command': '按 <b>Enter</b> 添加新行',
+  'jql-editor.ui.jql-editor-help.new-line-command': '按 <b>Shift+Enter</b> 添加新行',
+  'jql-editor.ui.jql-editor-help.search-command': '按 <b>Enter</b> 进行搜索',
+  'jql-editor.ui.jql-validation-message.jql-error-position': '（第 {lineNumber} 行，第 {charPosition} 个字符）',
+  'jql-editor.ui.jql-warning-message.default': '"{deprecatedField}" 已被弃用，且将来可能会停止使用。',
+  'jql-editor.ui.jql-warning-message.deprecated-both-epic-link-parent-link-field': '{receivedFirst}和{receivedSecond}很快就会被替换为{parentReplacement}。<link>请更新为{parentReplacement}</link>，以准备好应对这些变更。',
+  'jql-editor.ui.jql-warning-message.deprecated-epic-link-or-parent-link-field': '{deprecatedField}很快就会被替换为{parentReplacement}。<link>请更新为{parentReplacement}</link>，以准备好应对这些变更。'
+};

package/dist/es2019/i18n/zh_TW.js

@@ -0,0 +1,62 @@
+/* prettier-ignore */
+/**
+ * NOTE:
+ *
+ * This file is automatically generated by Traduki 2.0.
+ * DO NOT CHANGE IT BY HAND or your changes will be lost.
+ */
+//Chinese (Traditional)
+export default {
+  'jql-editor.common.validation.unknown-error': '無法剖析查詢。',
+  'jql-editor.plugins.autocomplete.autocomplete-option.deprecated-tooltip.default': '此欄位已被淘汰，未來可能會停止運作。',
+  'jql-editor.plugins.autocomplete.autocomplete-option.deprecated-tooltip.epic-link': '<b>「{received}」</b>很快就會替換為「<b>{parentReplacement}」</b>。請改用<b>「{parentReplacement}」</b>欄位。',
+  'jql-editor.plugins.autocomplete.options-found': '從下方的建議選項列表中選擇。',
+  'jql-editor.plugins.jql-ast.error-messages.expectingCFButReceived': "預期為欄位名稱，但結果為 '['。請問您是指 'cf[' 嗎？",
+  'jql-editor.plugins.jql-ast.error-messages.expectingCustomFieldId': "預期為包含在 '[ ]' 中且放在 'cf' 之後的自訂欄位 ID。例如：'cf[10021]'。",
+  'jql-editor.plugins.jql-ast.error-messages.expectingFieldBeforeEOF': '查詢結尾前應有欄位名稱。',
+  'jql-editor.plugins.jql-ast.error-messages.expectingFieldButReceived': "預期為欄位名稱，但結果是 ''{received}'。您必須將 ''{received}' 包含在引號內，以作為欄位名稱。",
+  'jql-editor.plugins.jql-ast.error-messages.expectingFieldPropertyIdBeforeEOF': '查詢結尾前應有屬性 ID。',
+  'jql-editor.plugins.jql-ast.error-messages.expectingFieldPropertyIdButReceived': "預期為屬性 ID，但結果是 ''{received}'。您必須將 ''{received}' 包含在引號內，以作為值使用。",
+  'jql-editor.plugins.jql-ast.error-messages.expectingFunctionArgBeforeEOF': '查詢結尾前應有函數引數。',
+  'jql-editor.plugins.jql-ast.error-messages.expectingFunctionArgButReceived': "預期為函數引數，但結果是 ''{received}'。您必須將 ''{received}' 包含在引號內，以作為值使用。",
+  'jql-editor.plugins.jql-ast.error-messages.expectingFunctionBeforeEOF': '查詢結尾前應有函數。',
+  'jql-editor.plugins.jql-ast.error-messages.expectingFunctionButReceived': "預期為函數，但結果是 ''{received}'。您必須將 ''{received}' 包含在引號內，以作為值使用。",
+  'jql-editor.plugins.jql-ast.error-messages.expectingListBeforeEOF': '查詢結尾前應有列表。',
+  'jql-editor.plugins.jql-ast.error-messages.expectingListButReceived': "預期為列表，但結果是 ''{received}'。您必須將 ''{received}' 包含在引號內，以作為值使用。",
+  'jql-editor.plugins.jql-ast.error-messages.expectingListOrFunctionBeforeEOF': '查詢結尾前應有列表或函數。',
+  'jql-editor.plugins.jql-ast.error-messages.expectingListOrFunctionButReceived': "預期為列表或函數，但結果是 ''{received}'。您必須將 ''{received}' 包含在引號內，以作為值使用。",
+  'jql-editor.plugins.jql-ast.error-messages.expectingMultipleTokensBeforeEOF': "查詢結尾前應使用 {firstExpectedTokens} 或 ''{lastExpectedToken}'。",
+  'jql-editor.plugins.jql-ast.error-messages.expectingMultipleTokensButReceived': "預期為 {firstExpectedTokens} 或 ''{lastExpectedToken}'，但結果是 ''{received}'。",
+  'jql-editor.plugins.jql-ast.error-messages.expectingOperandBeforeEOF': '查詢結尾前應有值、列表或函數。',
+  'jql-editor.plugins.jql-ast.error-messages.expectingOperandButReceived': "預期為值、列表或函數，但結果是 ''{received}'。您必須將 ''{received}' 包含在引號內，以作為值使用。",
+  'jql-editor.plugins.jql-ast.error-messages.expectingOperatorBeforeEOF': "查詢結尾前應使用運算子。有效的運算子為 '='、'!='、'<'、'>'、'<='、'>='、'~'、'!~'、'IN'、'NOT IN'、'IS' 和 'IS NOT'。",
+  'jql-editor.plugins.jql-ast.error-messages.expectingOperatorButReceived': "預期為運算子，但結果是 ''{received}'。有效的運算子為 '='、'!='、'<'、'>'、'<='、'>='、'~'、'!~'、'IN'、'NOT IN'、'IS' 和 'IS NOT'。",
+  'jql-editor.plugins.jql-ast.error-messages.expectingTokenBeforeEOF': "查詢結尾前應使用 ''{expectedToken}'。",
+  'jql-editor.plugins.jql-ast.error-messages.expectingTokenButReceived': "預期為 ''{expectedToken}'，但結果是 ''{received}'。",
+  'jql-editor.plugins.jql-ast.error-messages.expectingValueBeforeEOF': '查詢結尾前應有值。',
+  'jql-editor.plugins.jql-ast.error-messages.expectingValueButReceived': "預期為值，但結果是 ''{received}'。您必須將 ''{received}' 包含在引號內，以作為值使用。",
+  'jql-editor.plugins.jql-ast.error-messages.expectingValueOrFunctionBeforeEOF': '查詢結尾前應有值或函數。',
+  'jql-editor.plugins.jql-ast.error-messages.expectingValueOrFunctionButReceived': "預期為值或函數，但結果是 ''{received}'。您必須將 ''{received}' 包含在引號內，以作為值使用。",
+  'jql-editor.plugins.jql-ast.error-messages.illegalChar': "必須將字元 ''{char}' 逸出。改用 ''{escapedChar}' 逸出字元。",
+  'jql-editor.plugins.jql-ast.error-messages.illegalEscape': "''{received}' 是不合規定的 JQL 逸出序列。有效的逸出序列為 \\'、\\\"、\\t、\\n、\\r、\\\\、'\\ ' 和。",
+  'jql-editor.plugins.jql-ast.error-messages.illegalEscapeBlank': "逸出序列尚未完成。有效的逸出序列為 \\'、\\\"、\\t、\\n、\\r、\\\\、'\\ ' 和 \\uXXXX。",
+  'jql-editor.plugins.jql-ast.error-messages.reservedChar': "''{char}' 字元是保留的 JQL 字元。您必須將其包含在字串中或改用 ''{escapedChar}' 逸出字元。",
+  'jql-editor.plugins.jql-ast.error-messages.reservedWord': "''{word}' 是保留的 JQL 文字。必須將其用引號括起來，才能在查詢中使用。",
+  'jql-editor.plugins.jql-ast.error-messages.unfinishedString': "加上引號的字串 ''{received}' 尚未完成。",
+  'jql-editor.plugins.jql-ast.error-messages.unfinishedStringBlank': '加上引號的字串尚未完成。',
+  'jql-editor.plugins.jql-ast.error-messages.unknownErrorAtToken': "無法剖析位於 ''{received}' 的查詢。",
+  'jql-editor.ui.input-label': 'JQL 查詢',
+  'jql-editor.ui.jql-editor-controls-content.expand-toggle.button-label': '編輯器',
+  'jql-editor.ui.jql-editor-controls-content.expand-toggle.collapse-tooltip': '摺疊編輯器',
+  'jql-editor.ui.jql-editor-controls-content.expand-toggle.expand-tooltip': '展開編輯器',
+  'jql-editor.ui.jql-editor-controls-content.search.label': '搜尋',
+  'jql-editor.ui.jql-editor-footer-content.jql-editor-help.syntax-help.description': '在新的分頁中開啟 JQL 語法說明。',
+  'jql-editor.ui.jql-editor-footer-content.jql-editor-help.syntax-help.tooltip': '語法說明',
+  'jql-editor.ui.jql-editor-help.field-new-line-command': '按 <b>Enter</b> 鍵即可加入新的一行',
+  'jql-editor.ui.jql-editor-help.new-line-command': '按 <b>Shift+Enter</b> 可加入新的一行',
+  'jql-editor.ui.jql-editor-help.search-command': '按 <b>Enter</b> 可進行搜尋',
+  'jql-editor.ui.jql-validation-message.jql-error-position': '(第 {lineNumber} 行，第 {charPosition} 個字元)',
+  'jql-editor.ui.jql-warning-message.default': '「{deprecatedField}」已被淘汰，未來可能會停止運作。',
+  'jql-editor.ui.jql-warning-message.deprecated-both-epic-link-parent-link-field': '{receivedFirst}和{receivedSecond}很快就會替換為{parentReplacement}。<link>更新至{parentReplacement}</link>以便為這些變更做準備。',
+  'jql-editor.ui.jql-warning-message.deprecated-epic-link-or-parent-link-field': '{deprecatedField}很快就會替換為{parentReplacement}。<link>更新至{parentReplacement}</link>以便為這些變更做準備。'
+};

package/dist/es2019/index.js

@@ -0,0 +1,4 @@
+export { default as JQLEditor } from './ui';
+export { JQLEditorAsync } from './async';
+export { JQLEditorReadOnly } from './ui/jql-editor-layout';
+export { JQLEditorAnalyticsListener, ANALYTICS_CHANNEL, useJqlPackageAnalytics, EventType } from './analytics';

package/dist/es2019/plugins/autocomplete/components/autocomplete/index.js

@@ -0,0 +1,33 @@
+import React, { useCallback } from 'react';
+import { EventType } from '@atlaskit/jql-editor-common';
+import { Action, ActionSubject } from '../../../../analytics';
+import { useAutocompleteLoading, useAutocompleteOptions, useStoreActions } from '../../../../state';
+import AutocompleteDropdown from '../autocomplete-dropdown';
+const Autocomplete = ({
+  keymap,
+  onClick
+}) => {
+  const [options] = useAutocompleteOptions();
+  const [loading] = useAutocompleteLoading();
+  const [, {
+    createAndFireAnalyticsEvent
+  }] = useStoreActions();
+  const handleClick = useCallback((option, analyticsAttributes) => {
+    onClick(option);
+    createAndFireAnalyticsEvent({
+      action: Action.SELECTED,
+      actionSubject: ActionSubject.AUTOCOMPLETE_OPTION,
+      eventType: EventType.TRACK,
+      attributes: {
+        ...analyticsAttributes
+      }
+    });
+  }, [createAndFireAnalyticsEvent, onClick]);
+  return /*#__PURE__*/React.createElement(AutocompleteDropdown, {
+    options: options,
+    loading: loading,
+    keymap: keymap,
+    onClick: handleClick
+  });
+};
+export default Autocomplete;

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

@@ -0,0 +1,245 @@
+import _extends from "@babel/runtime/helpers/extends";
+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';
+const getPreviousOptionId = (options, selectedOptionId) => {
+  if (!selectedOptionId) {
+    return options[options.length - 1].id;
+  }
+  const index = options.findIndex(option => option.id === selectedOptionId);
+  if (index === -1) {
+    return options[options.length - 1].id;
+  }
+  if (index > 0) {
+    return options[index - 1].id;
+  }
+  return undefined;
+};
+const getNextOptionId = (options, selectedOptionId) => {
+  if (!selectedOptionId) {
+    return options[0].id;
+  }
+  const index = options.findIndex(option => option.id === selectedOptionId);
+  if (index === -1) {
+    return options[0].id;
+  }
+  if (index < options.length - 1) {
+    return options[index + 1].id;
+  }
+  return undefined;
+};
+const AutocompleteDropdown = ({
+  options,
+  loading,
+  keymap,
+  onClick
+}) => {
+  const containerRef = useRef(null);
+  const scrollContainerRef = useRef(null);
+  const selectedItemRef = useRef(null);
+  const [navigatingWithKeyboard, setNavigatingWithKeyboard] = useState(false);
+  const [intl] = useIntl();
+  const [, {
+    onEditorViewFocus,
+    onEditorViewBlur
+  }] = useStoreActions();
+  const [{
+    selectedOptionId
+  }, {
+    closeAutocomplete,
+    setAutocompleteContainer,
+    setSelectedAutocompleteOptionId
+  }] = useAutocomplete();
+  const [isAutocompleteOpen] = useAutocompleteIsOpen();
+  const [{
+    top,
+    left
+  }] = useAutocompletePosition();
+  const [areRichInlineNodesEnabled] = useRichInlineNodesEnabled();
+  const [autocompleteId] = useScopedId(JQL_EDITOR_AUTOCOMPLETE_ID);
+  const onContainerRef = useCallback(container => {
+    containerRef.current = container;
+    setAutocompleteContainer(container);
+  }, [containerRef, setAutocompleteContainer]);
+  const onScrollContainerRef = useCallback(container => {
+    scrollContainerRef.current = container;
+  }, [scrollContainerRef]);
+  const handleClick = useCallback((option, optionIndex, keyboard) => {
+    closeAutocomplete();
+    onClick(option, {
+      keyboard,
+      numberOfOptions: options.length,
+      optionIndex,
+      optionType: option.type,
+      queryLength: option.matchedText.length,
+      nodeType: areRichInlineNodesEnabled && option.valueType !== undefined ? option.valueType : 'text'
+    });
+  }, [options, onClick, closeAutocomplete, areRichInlineNodesEnabled]);
+  const onMouseMove = useCallback(() => {
+    if (navigatingWithKeyboard) {
+      setNavigatingWithKeyboard(false);
+    }
+  }, [navigatingWithKeyboard, setNavigatingWithKeyboard]);
+  useEffect(() => {
+    keymap.bindKey(ARROW_UP_KEY, () => {
+      if (!isAutocompleteOpen) {
+        return false;
+      }
+      !navigatingWithKeyboard && setNavigatingWithKeyboard(true);
+      const previousOptionId = getPreviousOptionId(options, selectedOptionId);
+      setSelectedAutocompleteOptionId(previousOptionId);
+      return true;
+    });
+    keymap.bindKey(ARROW_DOWN_KEY, () => {
+      if (!isAutocompleteOpen) {
+        return false;
+      }
+      !navigatingWithKeyboard && setNavigatingWithKeyboard(true);
+      const nextOptionId = getNextOptionId(options, selectedOptionId);
+      setSelectedAutocompleteOptionId(nextOptionId);
+      return true;
+    });
+    keymap.bindMultipleKeys([ENTER_KEY, TAB_KEY], () => {
+      if (!isAutocompleteOpen) {
+        return false;
+      }
+      const selectedOptionIndex = options.findIndex(option => 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, () => {
+      if (!isAutocompleteOpen) {
+        return false;
+      }
+      closeAutocomplete();
+      return true;
+    });
+    keymap.bindMultipleKeys([HOME_KEY, CMD_ARROW_UP_KEY], () => {
+      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], () => {
+      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 () => {
+      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(() => {
+    // 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(option => option.id === selectedOptionId)) {
+      setSelectedAutocompleteOptionId(undefined);
+    }
+  }, [isAutocompleteOpen, options, selectedOptionId, setSelectedAutocompleteOptionId]);
+  useLayoutEffect(() => {
+    requestAnimationFrame(() => {
+      if (containerRef.current) {
+        containerRef.current.style.top = `${top}px`;
+        containerRef.current.style.left = `${left}px`;
+      }
+    });
+  }, [top, left]);
+  useLayoutEffect(() => {
+    if (navigatingWithKeyboard) {
+      var _selectedItemRef$curr;
+      (_selectedItemRef$curr = selectedItemRef.current) === null || _selectedItemRef$curr === void 0 ? void 0 : _selectedItemRef$curr.scrollIntoView({
+        block: 'nearest'
+      });
+    }
+  }, [navigatingWithKeyboard, selectedOptionId, selectedItemRef]);
+  useLayoutEffect(() => {
+    var _selectedItemRef$curr2;
+    (_selectedItemRef$curr2 = selectedItemRef.current) === null || _selectedItemRef$curr2 === void 0 ? void 0 : _selectedItemRef$curr2.scrollIntoView({
+      block: 'nearest'
+    });
+  }, [options, selectedItemRef]);
+  useLayoutEffect(() => {
+    if (isAutocompleteOpen && !selectedOptionId && scrollContainerRef.current) {
+      scrollContainerRef.current.scrollTop = 0;
+    }
+  }, [isAutocompleteOpen, selectedOptionId]);
+  const announcedMessage = useMemo(() => {
+    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((option, index) => {
+    const isSelected = option.id === selectedOptionId;
+    return /*#__PURE__*/React.createElement(AutocompleteOption, _extends({
+      key: option.value,
+      isSelected: isSelected
+    }, isSelected && {
+      ref: selectedItemRef
+    }, {
+      option: option,
+      onClick: () => handleClick(option, index, false),
+      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/es2019/plugins/autocomplete/components/autocomplete-dropdown/styled.js

@@ -0,0 +1,46 @@
+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 const AutocompleteContainer = styled.div`
+  position: absolute;
+  background-color: ${"var(--ds-surface-overlay, white)"};
+  border-radius: ${"var(--ds-border-radius-100, 3px)"};
+  will-change: top, left;
+  visibility: ${props => props.isOpen ? 'visible' : 'hidden'};
+  z-index: ${layers.dialog};
+  box-shadow: ${`var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`})`};
+  padding: ${"var(--ds-space-075, 6px)"} 0;
+  min-width: ${25 * gridSize()}px;
+  max-width: ${50 * gridSize()}px;
+
+  &:focus {
+    outline: none;
+  }
+`;
+export const AutocompleteOptionsContainer = styled.div`
+  max-height: ${36 * gridSize()}px;
+  overflow: auto;
+`;
+export const OptionList = styled.ul`
+  list-style: none;
+  margin: 0;
+  padding: 0;
+`;
+export const AutocompleteLoadingFooter = styled.div`
+  display: flex;
+  justify-content: center;
+  color: ${`var(--ds-text-subtlest, ${N200})`};
+  font-style: italic;
+  padding: ${"var(--ds-space-150, 12px)"};
+  text-align: center;
+  ${props => props.hasOptions ?
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+css`
+          border-top: solid 1px ${`var(--ds-border, ${N40})`};
+          margin-top: ${"var(--ds-space-075, 6px)"};
+          /* 3/2 + 3/4 */
+          padding-top: ${9 / 4 * gridSize()}px;
+        ` : ''};
+`;

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

@@ -0,0 +1,80 @@
+import React from 'react';
+
+// Custom icons not from Atlaskit
+
+export const numberGlyph = () => /*#__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 const checkboxGlyph = () => /*#__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 const dateGlyph = () => /*#__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 const dropdownGlyph = () => /*#__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 const labelGlyph = () => /*#__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 const paragraphGlyph = () => /*#__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 const peopleGlyph = () => /*#__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 const shortTextGlyph = () => /*#__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 const timeStampGlyph = () => /*#__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"
+}));