@atlaskit/jql-editor 4.0.0

package/dist/esm/ui/jql-editor-controls-content/syntax-help/index.js

@@ -0,0 +1,50 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useCallback } from 'react';
+import Tooltip from '@atlaskit/tooltip';
+import { ScreenReaderText } from '../../../accessibility';
+import { Action, ActionSubject, ActionSubjectId, EventType } from '../../../analytics';
+import { SYNTAX_HELP_DESCRIPTION_ID } from '../../../common/constants';
+import { TooltipContent } from '../../../common/styled';
+import { useIntl, useOnSyntaxHelp, useScopedId } from '../../../state';
+// eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports
+import { TooltipTag } from '../../tooltip-tag';
+// eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports
+import { BaseSyntaxHelp } from '../base-syntax-help';
+import { messages } from './messages';
+export var SyntaxHelp = function SyntaxHelp() {
+  var _useIntl = useIntl(),
+    _useIntl2 = _slicedToArray(_useIntl, 1),
+    intl = _useIntl2[0];
+  var label = intl.formatMessage(messages.syntaxHelpTooltip);
+  var _useScopedId = useScopedId(SYNTAX_HELP_DESCRIPTION_ID),
+    _useScopedId2 = _slicedToArray(_useScopedId, 1),
+    descriptionId = _useScopedId2[0];
+  var _useOnSyntaxHelp = useOnSyntaxHelp(),
+    _useOnSyntaxHelp2 = _slicedToArray(_useOnSyntaxHelp, 2),
+    onSyntaxHelp = _useOnSyntaxHelp2[0],
+    createAndFireAnalyticsEvent = _useOnSyntaxHelp2[1].createAndFireAnalyticsEvent;
+  var onClick = useCallback(function (e) {
+    createAndFireAnalyticsEvent({
+      action: Action.CLICKED,
+      actionSubject: ActionSubject.BUTTON,
+      actionSubjectId: ActionSubjectId.EDITOR_HELP,
+      eventType: EventType.UI
+    });
+    var handled = onSyntaxHelp && onSyntaxHelp(e);
+    // Prevent default behaviour when the event is handled on the consumer side.
+    if (handled) {
+      e.preventDefault();
+    }
+  }, [createAndFireAnalyticsEvent, onSyntaxHelp]);
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    position: 'bottom',
+    content: /*#__PURE__*/React.createElement(TooltipContent, null, label),
+    tag: TooltipTag
+  }, /*#__PURE__*/React.createElement(BaseSyntaxHelp, {
+    describedby: descriptionId,
+    label: label,
+    onClick: onClick
+  }), /*#__PURE__*/React.createElement(ScreenReaderText, {
+    id: descriptionId
+  }, intl.formatMessage(messages.syntaxHelpDescription)));
+};

package/dist/esm/ui/jql-editor-controls-content/syntax-help/messages.js

@@ -0,0 +1,13 @@
+import { defineMessages } from 'react-intl-next';
+export var messages = defineMessages({
+  syntaxHelpDescription: {
+    id: 'jql-editor.ui.jql-editor-footer-content.jql-editor-help.syntax-help.description',
+    defaultMessage: 'Open JQL syntax help in a new tab.',
+    description: 'Description read when the syntax help link is focused.'
+  },
+  syntaxHelpTooltip: {
+    id: 'jql-editor.ui.jql-editor-footer-content.jql-editor-help.syntax-help.tooltip',
+    defaultMessage: 'Syntax help',
+    description: 'Tooltip to show when the syntax help link is focused.'
+  }
+});

package/dist/esm/ui/jql-editor-footer-content/index.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { di } from 'react-magnetic-di';
+import { useEditorViewHasInfos } from '../../hooks/use-editor-view-has-infos';
+import { useEditorViewHasWarnings } from '../../hooks/use-editor-view-has-warnings';
+import { useEditorViewIsInvalid } from '../../hooks/use-editor-view-is-invalid';
+import { JQLEditorHelp } from './jql-editor-help';
+import { ErrorMessages, InfoMessages, WarningMessages } from './jql-messages';
+
+/**
+ * Message components are rendered by priority.
+ * Message component decides on its own what exactly to render (GQL vs external messages).
+ */
+
+export var JQLEditorFooterContent = function JQLEditorFooterContent() {
+  var editorViewIsInvalid = useEditorViewIsInvalid();
+  var editorViewHasWarnings = useEditorViewHasWarnings();
+  var editorViewHasInfos = useEditorViewHasInfos();
+  if (editorViewIsInvalid) {
+    return /*#__PURE__*/React.createElement(ErrorMessages, null);
+  }
+  if (editorViewHasWarnings) {
+    return /*#__PURE__*/React.createElement(WarningMessages, null);
+  }
+  if (editorViewHasInfos) {
+    return /*#__PURE__*/React.createElement(InfoMessages, null);
+  }
+  return /*#__PURE__*/React.createElement(JQLEditorHelp, null);
+};

package/dist/esm/ui/jql-editor-footer-content/jql-editor-help/index.js

@@ -0,0 +1,35 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React from 'react';
+import { HelperMessage } from '@atlaskit/form';
+import { JQL_EDITOR_HELP_CONTENT_ID } from '../../../common/constants';
+import { useEditorThemeContext } from '../../../hooks/use-editor-theme';
+import { useEditorViewHasFocus, useIntl, useScopedId } from '../../../state';
+import { messages } from './messages';
+import { HelpContainer } from './styled';
+export var JQLEditorHelp = function JQLEditorHelp() {
+  var _useIntl = useIntl(),
+    _useIntl2 = _slicedToArray(_useIntl, 1),
+    formatMessage = _useIntl2[0].formatMessage;
+  var _useEditorViewHasFocu = useEditorViewHasFocus(),
+    _useEditorViewHasFocu2 = _slicedToArray(_useEditorViewHasFocu, 1),
+    editorViewHasFocus = _useEditorViewHasFocu2[0];
+  var _useEditorThemeContex = useEditorThemeContext(),
+    isSearch = _useEditorThemeContex.isSearch;
+  var _useScopedId = useScopedId(JQL_EDITOR_HELP_CONTENT_ID),
+    _useScopedId2 = _slicedToArray(_useScopedId, 1),
+    helpContentId = _useScopedId2[0];
+  var SearchMessage = /*#__PURE__*/React.createElement("span", null, formatMessage(messages.searchCommand, {
+    b: function b(text) {
+      return /*#__PURE__*/React.createElement("b", null, text);
+    }
+  }));
+  var NewLineMessage = /*#__PURE__*/React.createElement("span", null, formatMessage(isSearch ? messages.newLineCommand : messages.fieldNewLineCommand, {
+    b: function b(text) {
+      return /*#__PURE__*/React.createElement("b", null, text);
+    }
+  }));
+  return /*#__PURE__*/React.createElement(HelpContainer, {
+    id: helpContentId,
+    isVisible: editorViewHasFocus
+  }, isSearch && /*#__PURE__*/React.createElement(HelperMessage, null, SearchMessage), /*#__PURE__*/React.createElement(HelperMessage, null, NewLineMessage));
+};

package/dist/esm/ui/jql-editor-footer-content/jql-editor-help/messages.js

@@ -0,0 +1,18 @@
+import { defineMessages } from 'react-intl-next';
+export var messages = defineMessages({
+  searchCommand: {
+    id: 'jql-editor.ui.jql-editor-help.search-command',
+    defaultMessage: '<b>Enter</b> to search',
+    description: "Message to inform users to press the 'Enter' key on the keyboard to search a query."
+  },
+  newLineCommand: {
+    id: 'jql-editor.ui.jql-editor-help.new-line-command',
+    defaultMessage: '<b>Shift+Enter</b> to add a new line',
+    description: "In search mode, message to inform users to press the 'Shift' and 'Enter' keys on the keyboard to add a new line into the query."
+  },
+  fieldNewLineCommand: {
+    id: 'jql-editor.ui.jql-editor-help.field-new-line-command',
+    defaultMessage: '<b>Enter</b> to add a new line',
+    description: "In field mode, message to inform users to press the 'Enter' key on the keyboard to add a new line into the query."
+  }
+});

package/dist/esm/ui/jql-editor-footer-content/jql-editor-help/styled.js

@@ -0,0 +1,8 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3;
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { hiddenMixin } from '../../../common/styled';
+export var HelpContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  margin-left: auto;\n  margin-right: 0;\n  flex-shrink: 0;\n  padding: 0 ", ";\n\n  > * + * {\n    margin-left: ", ";\n  }\n\n  ", "\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-200, 16px)", function (props) {
+  return props.isVisible ? css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          visibility: visible;\n          opacity: 1;\n          transition: opacity 250ms cubic-bezier(0.15, 1, 0.3, 1);\n        "]))) : css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          ", ";\n          opacity: 0;\n        "])), hiddenMixin);
+});

package/dist/esm/ui/jql-editor-footer-content/jql-messages/errors/index.js

@@ -0,0 +1,60 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useEffect } from 'react';
+import { di } from 'react-magnetic-di';
+import { ErrorMessage } from '@atlaskit/form';
+import { JQLSyntaxError } from '@atlaskit/jql-ast';
+import { JQL_EDITOR_INPUT_ID } from '../../../../common/constants';
+import { commonMessages } from '../../../../common/messages';
+import { useEditorViewIsInvalid } from '../../../../hooks/use-editor-view-is-invalid';
+import { useExternalMessages, useIntl, useJqlError, useScopedId, useStoreActions } from '../../../../state';
+import { FormatMessages, MessageContainer } from '../format';
+import { messages } from './messages';
+var useFormattedErrorMessage = function useFormattedErrorMessage() {
+  var _useIntl = useIntl(),
+    _useIntl2 = _slicedToArray(_useIntl, 1),
+    formatMessage = _useIntl2[0].formatMessage;
+  var _useJqlError = useJqlError(),
+    _useJqlError2 = _slicedToArray(_useJqlError, 1),
+    jqlError = _useJqlError2[0];
+  var _useExternalMessages = useExternalMessages(),
+    _useExternalMessages2 = _slicedToArray(_useExternalMessages, 1),
+    externalErrors = _useExternalMessages2[0].errors;
+  var _useStoreActions = useStoreActions(),
+    _useStoreActions2 = _slicedToArray(_useStoreActions, 2),
+    externalErrorMessageViewed = _useStoreActions2[1].externalErrorMessageViewed;
+  var editorViewIsInvalid = useEditorViewIsInvalid();
+  useEffect(function () {
+    // Emit a UI event whenever external errors has changed
+    externalErrorMessageViewed();
+  }, [externalErrorMessageViewed, externalErrors]);
+  if (!editorViewIsInvalid) {
+    return null;
+  }
+
+  // Prioritise client over external errors
+  if (jqlError instanceof JQLSyntaxError) {
+    return "".concat(jqlError.message, " ").concat(formatMessage(messages.jqlErrorPosition, {
+      lineNumber: jqlError.line,
+      charPosition: jqlError.charPositionInLine + 1
+    }));
+  } else if (externalErrors.length > 0) {
+    return /*#__PURE__*/React.createElement(FormatMessages, {
+      messages: externalErrors
+    });
+  } else if (jqlError !== null) {
+    return formatMessage(commonMessages.unknownError);
+  }
+  return null;
+};
+export var ErrorMessages = function ErrorMessages() {
+  var _useScopedId = useScopedId(JQL_EDITOR_INPUT_ID),
+    _useScopedId2 = _slicedToArray(_useScopedId, 1),
+    editorId = _useScopedId2[0];
+  var errorMessage = useFormattedErrorMessage();
+  return errorMessage != null ? /*#__PURE__*/React.createElement(MessageContainer, null, /*#__PURE__*/React.createElement(ErrorMessage, {
+    testId: "jql-editor-validation"
+  }, /*#__PURE__*/React.createElement("span", {
+    role: "alert",
+    "aria-describedby": editorId
+  }, errorMessage))) : null;
+};

package/dist/esm/ui/jql-editor-footer-content/jql-messages/errors/messages.js

@@ -0,0 +1,8 @@
+import { defineMessages } from 'react-intl-next';
+export var messages = defineMessages({
+  jqlErrorPosition: {
+    id: 'jql-editor.ui.jql-validation-message.jql-error-position',
+    defaultMessage: '(line {lineNumber}, character {charPosition})',
+    description: 'Show the line and character position that an error occurs in the JQL string, e.g. (line 1, character 23)'
+  }
+});

package/dist/esm/ui/jql-editor-footer-content/jql-messages/format/index.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { useEditorThemeContext } from '../../../../hooks/use-editor-theme';
+import { MessageContainer as MessageContainerStyled, MessageList } from './styled';
+
+// Max number messages we want to show
+var MAX_MESSAGES = 10;
+export var MessageContainer = function MessageContainer(_ref) {
+  var children = _ref.children;
+  var _useEditorThemeContex = useEditorThemeContext(),
+    isSearch = _useEditorThemeContex.isSearch;
+  return /*#__PURE__*/React.createElement(MessageContainerStyled, {
+    isSearch: isSearch
+  }, children);
+};
+export var FormatMessages = function FormatMessages(_ref2) {
+  var messages = _ref2.messages;
+  if (messages.length === 0) {
+    return null;
+  }
+  if (messages.length === 1) {
+    return /*#__PURE__*/React.createElement("span", null, messages[0].message);
+  }
+  return /*#__PURE__*/React.createElement(MessageList, null, messages.slice(0, MAX_MESSAGES).map(function (m, i) {
+    return /*#__PURE__*/React.createElement("li", {
+      key: i
+    }, m.message);
+  }));
+};

package/dist/esm/ui/jql-editor-footer-content/jql-messages/format/styled.js

@@ -0,0 +1,7 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2;
+import styled from '@emotion/styled';
+export var MessageContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding-left: ", ";\n"])), function (props) {
+  return props.isSearch ? "var(--ds-space-100, 8px)" : "var(--ds-space-0, 0px)";
+});
+export var MessageList = styled.ul(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin: 0;\n  padding-left: ", ";\n"])), "var(--ds-space-300, 24px)");

package/dist/esm/ui/jql-editor-footer-content/jql-messages/index.js

@@ -0,0 +1,3 @@
+export { ErrorMessages } from './errors';
+export { InfoMessages } from './infos';
+export { WarningMessages } from './warnings';

package/dist/esm/ui/jql-editor-footer-content/jql-messages/infos/index.js

@@ -0,0 +1,31 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React from 'react';
+import { di } from 'react-magnetic-di';
+import { HelperMessage } from '@atlaskit/form';
+import InfoIcon from '@atlaskit/icon/glyph/info';
+import * as colors from '@atlaskit/theme/colors';
+import { useEditorViewHasInfos } from '../../../../hooks/use-editor-view-has-infos';
+import { useExternalMessages } from '../../../../state';
+import { FormatMessages, MessageContainer } from '../format';
+export var useFormattedInfoMessage = function useFormattedInfoMessage() {
+  var _useExternalMessages = useExternalMessages(),
+    _useExternalMessages2 = _slicedToArray(_useExternalMessages, 1),
+    externalInfos = _useExternalMessages2[0].infos;
+  var hasInfos = useEditorViewHasInfos();
+  if (!hasInfos) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(FormatMessages, {
+    messages: externalInfos
+  });
+};
+export var InfoMessages = function InfoMessages() {
+  var infoMessage = useFormattedInfoMessage();
+  return infoMessage != null ? /*#__PURE__*/React.createElement(MessageContainer, null, /*#__PURE__*/React.createElement(HelperMessage, {
+    testId: "jql-editor-info-message"
+  }, /*#__PURE__*/React.createElement(InfoIcon, {
+    label: "",
+    primaryColor: "var(--ds-icon-information, ".concat(colors.B500, ")"),
+    size: "small"
+  }), infoMessage)) : null;
+};

package/dist/esm/ui/jql-editor-footer-content/jql-messages/warnings/index.js

@@ -0,0 +1,100 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useCallback } from 'react';
+import { di } from 'react-magnetic-di';
+import { HelperMessage } from '@atlaskit/form';
+import WarningIcon from '@atlaskit/icon/glyph/warning';
+import * as colors from '@atlaskit/theme/colors';
+import { useEditorViewHasWarnings } from '../../../../hooks/use-editor-view-has-warnings';
+import { useExternalMessages, useHydratedDeprecations, useIntl } from '../../../../state';
+import { FormatMessages, MessageContainer } from '../format';
+import { messages } from './messages';
+var softDeprecateEpicParentDocsLink = 'https://support.atlassian.com/jira-software-cloud/docs/upcoming-changes-epic-link-replaced-with-parent/';
+var getEpicLinkDeprecationTerm = function getEpicLinkDeprecationTerm(hydratedDeprecations) {
+  var epicLinkWarning = hydratedDeprecations.filter(function (warning) {
+    return warning.deprecatedSearcherKey === 'com.pyxis.greenhopper.jira:gh-epic-link-searcher';
+  });
+  return epicLinkWarning.length > 0 ? epicLinkWarning[0].id : null;
+};
+var getParentLinkDeprecationTerm = function getParentLinkDeprecationTerm(hydratedDeprecations) {
+  var parentLinkWarning = hydratedDeprecations.filter(function (warning) {
+    return warning.deprecatedSearcherKey === 'com.atlassian.jpo:jpo-custom-field-parent-searcher';
+  });
+  return parentLinkWarning.length > 0 ? parentLinkWarning[0].id : null;
+};
+export var useFormattedWarningMessage = function useFormattedWarningMessage() {
+  var _useHydratedDeprecati = useHydratedDeprecations(),
+    _useHydratedDeprecati2 = _slicedToArray(_useHydratedDeprecati, 1),
+    hydratedDeprecations = _useHydratedDeprecati2[0];
+  var _useExternalMessages = useExternalMessages(),
+    _useExternalMessages2 = _slicedToArray(_useExternalMessages, 1),
+    externalWarnings = _useExternalMessages2[0].warnings;
+  var hasWarnings = useEditorViewHasWarnings();
+  var _useIntl = useIntl(),
+    _useIntl2 = _slicedToArray(_useIntl, 1),
+    formatMessage = _useIntl2[0].formatMessage;
+  var epicLinkDeprecationTerm = getEpicLinkDeprecationTerm(hydratedDeprecations);
+  var parentLinkDeprecationTerm = getParentLinkDeprecationTerm(hydratedDeprecations);
+  var formatWarnings = useCallback(function (message) {
+    var combinedMessages = [{
+      type: 'warning',
+      message: message
+    }].concat(_toConsumableArray(externalWarnings));
+    return /*#__PURE__*/React.createElement(FormatMessages, {
+      messages: combinedMessages
+    });
+  }, [externalWarnings]);
+  if (!hasWarnings) {
+    return null;
+  } else if (!hydratedDeprecations.length && externalWarnings.length) {
+    return /*#__PURE__*/React.createElement(FormatMessages, {
+      messages: externalWarnings
+    });
+  } else if (epicLinkDeprecationTerm == null && parentLinkDeprecationTerm == null) {
+    var _hydratedDeprecations;
+    return formatWarnings(formatMessage(messages.defaultWarning, {
+      deprecatedField: (_hydratedDeprecations = hydratedDeprecations[0]) === null || _hydratedDeprecations === void 0 ? void 0 : _hydratedDeprecations.id
+    }));
+  } else if (epicLinkDeprecationTerm && parentLinkDeprecationTerm) {
+    return formatWarnings(formatMessage(messages.deprecatedBothParentReplacementMessage, {
+      link: function link(chunks) {
+        return /*#__PURE__*/React.createElement("a", {
+          href: softDeprecateEpicParentDocsLink,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          onClick: function onClick(e) {
+            return e.stopPropagation();
+          }
+        }, chunks);
+      },
+      receivedFirst: epicLinkDeprecationTerm,
+      receivedSecond: parentLinkDeprecationTerm,
+      parentReplacement: 'Parent'
+    }));
+  } else if (epicLinkDeprecationTerm || parentLinkDeprecationTerm) {
+    return formatWarnings(formatMessage(messages.deprecatedParentReplacementMessage, {
+      link: function link(chunks) {
+        return /*#__PURE__*/React.createElement("a", {
+          href: softDeprecateEpicParentDocsLink,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          onClick: function onClick(e) {
+            return e.stopPropagation();
+          }
+        }, chunks);
+      },
+      deprecatedField: epicLinkDeprecationTerm ? epicLinkDeprecationTerm : parentLinkDeprecationTerm,
+      parentReplacement: 'Parent'
+    }));
+  }
+};
+export var WarningMessages = function WarningMessages() {
+  var warningMessage = useFormattedWarningMessage();
+  return warningMessage != null ? /*#__PURE__*/React.createElement(MessageContainer, null, /*#__PURE__*/React.createElement(HelperMessage, {
+    testId: "jql-editor-warning-message"
+  }, /*#__PURE__*/React.createElement(WarningIcon, {
+    label: "",
+    primaryColor: "var(--ds-icon-warning, ".concat(colors.Y400, ")"),
+    size: "small"
+  }), warningMessage)) : null;
+};

package/dist/esm/ui/jql-editor-footer-content/jql-messages/warnings/messages.js

@@ -0,0 +1,18 @@
+import { defineMessages } from 'react-intl-next';
+export var messages = defineMessages({
+  deprecatedParentReplacementMessage: {
+    id: 'jql-editor.ui.jql-warning-message.deprecated-epic-link-or-parent-link-field',
+    defaultMessage: '{deprecatedField} will soon be replaced with {parentReplacement}. <link>Update to {parentReplacement}</link> to prepare for these changes.',
+    description: 'Warning message for Epic Link and Parent Link deprecation, with link to docs'
+  },
+  deprecatedBothParentReplacementMessage: {
+    id: 'jql-editor.ui.jql-warning-message.deprecated-both-epic-link-parent-link-field',
+    defaultMessage: '{receivedFirst} and {receivedSecond} will soon be replaced with {parentReplacement}. <link>Update to {parentReplacement}</link> to prepare for these changes.',
+    description: 'Warning message for both Epic Link and Parent Link deprecation, with link to docs'
+  },
+  defaultWarning: {
+    id: 'jql-editor.ui.jql-warning-message.default',
+    defaultMessage: '{deprecatedField} has been deprecated and may stop working in the future.',
+    description: 'Default warning message to show on NIN'
+  }
+});

package/dist/esm/ui/jql-editor-layout/index.js

@@ -0,0 +1,98 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["isSearch", "isCompact"];
+import React from 'react';
+import { EditorThemeContext, useEditorTheme, useEditorThemeContext } from '../../hooks/use-editor-theme';
+import { splitTextByNewLine } from '../../utils/split-text-by-new-line';
+// eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports
+import { ReadOnlyControlsContent } from '../jql-editor-controls-content/read-only-controls-content';
+import { EditorControls, EditorFooter, EditorMain, EditorView, EditorViewContainer, LineNumberToolbar, ReadOnlyEditorView, ReadOnlyEditorViewContainer } from './styled';
+var JQLEditorLayout = function JQLEditorLayout(props) {
+  var _useEditorThemeContex = useEditorThemeContext(),
+    defaultMaxRows = _useEditorThemeContex.defaultMaxRows,
+    expandedRows = _useEditorThemeContex.expandedRows,
+    isSearch = _useEditorThemeContex.isSearch,
+    isCompact = _useEditorThemeContex.isCompact;
+  var editorViewHasFocus = props.editorViewHasFocus,
+    EditorControlsContent = props.EditorControlsContent,
+    EditorFooterContent = props.EditorFooterContent,
+    editorViewIsInvalid = props.editorViewIsInvalid,
+    lineNumbersVisible = props.lineNumbersVisible,
+    mainId = props.mainId,
+    onEditorMainRef = props.onEditorMainRef,
+    onEditorViewContainerRef = props.onEditorViewContainerRef,
+    onEditorViewContainerScroll = props.onEditorViewContainerScroll,
+    onEditorViewRef = props.onEditorViewRef,
+    onEditorViewBlur = props.onEditorViewBlur,
+    onEditorViewFocus = props.onEditorViewFocus,
+    onEditorViewTransitionEnd = props.onEditorViewTransitionEnd;
+  return /*#__PURE__*/React.createElement(EditorMain, {
+    id: mainId,
+    ref: onEditorMainRef
+  }, /*#__PURE__*/React.createElement(EditorViewContainer, {
+    editorViewHasFocus: editorViewHasFocus,
+    editorViewIsInvalid: editorViewIsInvalid,
+    ref: onEditorViewContainerRef,
+    onScroll: onEditorViewContainerScroll
+  }, /*#__PURE__*/React.createElement(LineNumberToolbar, {
+    lineNumbersVisible: lineNumbersVisible
+  }), /*#__PURE__*/React.createElement(EditorView, {
+    defaultMaxRows: defaultMaxRows,
+    expandedRows: expandedRows,
+    isCompact: isCompact,
+    lineNumbersVisible: lineNumbersVisible,
+    ref: onEditorViewRef,
+    onBlur: onEditorViewBlur,
+    onFocus: onEditorViewFocus,
+    onTransitionEnd: onEditorViewTransitionEnd
+  }), /*#__PURE__*/React.createElement(EditorControls, {
+    isSearch: isSearch,
+    isCompact: isCompact
+  }, EditorControlsContent)), /*#__PURE__*/React.createElement(EditorFooter, null, EditorFooterContent));
+};
+/**
+ * A read only version of the JQL Editor which mimics the layout of the complete component, suitable as an intermediary
+ * state when rendering the editor asynchronously.
+ * In order to minimise bundle size impact on consumers, it is critical that this component (and any child component)
+ * only imports the bare minimum dependencies required to replicate the editor layout.
+ */
+var JQLEditorReadOnlyWithoutTheme = function JQLEditorReadOnlyWithoutTheme(_ref) {
+  var query = _ref.query;
+  var _useEditorThemeContex2 = useEditorThemeContext(),
+    defaultMaxRows = _useEditorThemeContex2.defaultMaxRows,
+    expandedRows = _useEditorThemeContex2.expandedRows,
+    isSearch = _useEditorThemeContex2.isSearch,
+    isCompact = _useEditorThemeContex2.isCompact;
+  var blocks = splitTextByNewLine(query);
+  var lineNumbersVisible = blocks.length > 1;
+  return /*#__PURE__*/React.createElement(EditorMain, null, /*#__PURE__*/React.createElement(ReadOnlyEditorViewContainer, null, /*#__PURE__*/React.createElement(LineNumberToolbar, {
+    lineNumbersVisible: lineNumbersVisible
+  }), /*#__PURE__*/React.createElement(ReadOnlyEditorView, {
+    "data-testid": "jql-editor-read-only",
+    role: "combobox",
+    "aria-readonly": true,
+    defaultMaxRows: defaultMaxRows,
+    expandedRows: expandedRows,
+    lineNumbersVisible: lineNumbersVisible,
+    isCompact: isCompact
+  }, blocks.map(function (block, index) {
+    return /*#__PURE__*/React.createElement("p", {
+      key: index
+    }, block);
+  })), /*#__PURE__*/React.createElement(EditorControls, {
+    isSearch: isSearch,
+    isCompact: isCompact
+  }, /*#__PURE__*/React.createElement(ReadOnlyControlsContent, null))), /*#__PURE__*/React.createElement(EditorFooter, null));
+};
+export var JQLEditorReadOnly = function JQLEditorReadOnly(_ref2) {
+  var isSearch = _ref2.isSearch,
+    isCompact = _ref2.isCompact,
+    props = _objectWithoutProperties(_ref2, _excluded);
+  var editorTheme = useEditorTheme({
+    isSearch: isSearch,
+    isCompact: isCompact
+  });
+  return /*#__PURE__*/React.createElement(EditorThemeContext.Provider, {
+    value: editorTheme
+  }, /*#__PURE__*/React.createElement(JQLEditorReadOnlyWithoutTheme, props));
+};
+export default JQLEditorLayout;

package/dist/esm/ui/jql-editor-layout/styled.js

@@ -0,0 +1,56 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
+import { css, keyframes } from '@emotion/react';
+import styled from '@emotion/styled';
+import { B100, B300, G300, N0, N10, N100, N30, N40, N700, N800, N900, P400, R400 } from '@atlaskit/theme/colors';
+import { codeFontFamily, fontFamily, fontSize,
+// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
+gridSize, layers } from '@atlaskit/theme/constants';
+import { TOOLTIP_CLASSNAME, TOOLTIP_ENTER_CLASSNAME, TOOLTIP_EXIT_CLASSNAME } from '../../plugins/validation-tooltip/constants';
+var fadeIn = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n"])));
+var fadeOut = keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  from {\n    visibility: visible;\n    opacity: 1;\n  }\n\n  to {\n    opacity: 0;\n  }\n"])));
+export var EditorMain = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  /* CSS reset */\n  font-family: ", ";\n  font-size: ", "px;\n  flex-grow: 1;\n\n  /* These styles and animations are derived from @atlaskit/tooltip */\n\n  .", " {\n    background-color: ", ";\n    color: ", ";\n    border-radius: ", ";\n    box-sizing: border-box;\n    font-size: 12px;\n    line-height: 1.3;\n    max-width: 240px;\n    padding: ", " ", ";\n    word-wrap: break-word;\n    overflow-wrap: break-word;\n    z-index: ", ";\n    pointer-events: none;\n    position: absolute;\n    visibility: hidden;\n\n    /* Horizontally center and vertically position above the target element */\n    transform: translate(-50%, calc(-100% - ", "));\n\n    &.", " {\n      animation: ", " 350ms cubic-bezier(0.15, 1, 0.3, 1);\n      visibility: visible;\n    }\n\n    &.", " {\n      animation: ", " 350ms cubic-bezier(0.15, 1, 0.3, 1);\n    }\n  }\n"])), fontFamily, fontSize, TOOLTIP_CLASSNAME, "var(--ds-background-neutral-bold, ".concat(N800, ")"), "var(--ds-text-inverse, ".concat(N0, ")"), "var(--ds-border-radius-100, 3px)", "var(--ds-space-025, 2px)", "var(--ds-space-075, 6px)", layers.tooltip(), "var(--ds-space-200, 16px)", TOOLTIP_ENTER_CLASSNAME, fadeIn, TOOLTIP_EXIT_CLASSNAME, fadeOut);
+export var EditorFooter = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  /* We always have at least 1 row of space allocated to the footer */\n  min-height: 20px;\n"])));
+
+// Height (in px) for a single row in the editor
+var rowHeight = gridSize() * 2.75;
+// Vertical padding for the editor input
+var getEditorInputVerticalPadding = function getEditorInputVerticalPadding(isCompact) {
+  return isCompact ? 3 : 7;
+};
+var editorInputHorizontalPadding = 6;
+export var EditorViewContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-style: solid;\n  border-width: 2px;\n  border-color: ", ";\n  border-radius: ", ";\n  box-sizing: border-box;\n  color: ", ";\n  display: flex;\n  overflow: auto;\n  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;\n\n  ", "\n\n  ", "\n"])), "var(--ds-background-input, ".concat(N10, ")"), "var(--ds-border, ".concat(N40, ")"), "var(--ds-border-radius-100, 3px)", "var(--ds-text, ".concat(N900, ")"), function (props) {
+  return props.editorViewHasFocus ? css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n          background-color: ", ";\n          border-color: ", ";\n        "])), "var(--ds-surface, ".concat(N0, ")"), "var(--ds-border-focused, ".concat(B100, ")")) : css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n          :hover {\n            background-color: ", ";\n          }\n        "])), "var(--ds-background-input-hovered, ".concat(N30, ")"));
+}, function (props) {
+  return props.editorViewIsInvalid && css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      border-color: ", ";\n    "])), "var(--ds-border-danger, ".concat(R400, ")"));
+});
+export var ReadOnlyEditorViewContainer = styled(EditorViewContainer)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  color: ", ";\n  pointer-events: none;\n"])), "var(--ds-background-disabled, ".concat(N30, ")"), "var(--ds-text-disabled, ".concat(N100, ")"));
+export var LineNumberToolbar = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  flex-shrink: 0;\n  width: 30px;\n  position: sticky;\n  top: 0;\n\n  ", "\n"])), "var(--ds-background-neutral, ".concat(N30, ")"), function (props) {
+  return !props.lineNumbersVisible && css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n      display: none;\n    "])));
+});
+
+/**
+ * The main div which the Prosemirror editor will be rendered into.
+ */
+export var EditorView = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  counter-reset: lineNumber;\n  flex-grow: 1;\n\n  transition: height 250ms cubic-bezier(0.15, 1, 0.3, 1),\n    max-height 250ms cubic-bezier(0.15, 1, 0.3, 1);\n  max-height: ", "px;\n\n  line-height: ", ";\n  font-family: ", ";\n  word-break: break-word;\n  overflow-wrap: anywhere;\n  white-space: pre-wrap;\n\n  &[data-expanded] {\n    height: ", "px;\n    max-height: ", "px;\n  }\n\n  .ProseMirror {\n    color: ", ";\n    padding: ", "px\n      ", "px;\n\n    &:focus {\n      outline: none;\n    }\n\n    .mark-token-keyword {\n      color: ", ";\n    }\n\n    .mark-token-field {\n      color: ", ";\n    }\n\n    .mark-token-operator {\n      color: ", ";\n    }\n\n    .mark-token-error {\n      color: ", ";\n      text-decoration: wavy underline;\n      text-decoration-thickness: 1px;\n      text-decoration-skip-ink: none;\n    }\n  }\n\n  p {\n    margin: 0;\n    counter-increment: lineNumber;\n    position: relative;\n\n    /* Show the current line number before each paragraph block. */\n\n    &::before {\n      content: counter(lineNumber);\n      color: ", ";\n      font-size: 10px;\n      line-height: ", ";\n      padding: 0 ", " 0 ", ";\n      position: absolute;\n      box-sizing: border-box;\n      /* Shift the line number tag 100% (plus 8px padding) to the left to position it inside the LineNumberToolbar */\n      transform: translateX(calc(-100% - ", "));\n\n      /* We can fit 3 digits before ellipses. This is not very responsive but saves us having to add expensive width\n        recalculation logic to the LineNumberToolbar for a scenario that *should* never happen. */\n      max-width: 30px;\n      text-overflow: ellipsis;\n      overflow: hidden;\n      white-space: nowrap;\n\n      ", "\n    }\n  }\n"])), function (props) {
+  return rowHeight * props.defaultMaxRows + getEditorInputVerticalPadding(props.isCompact) * 2;
+}, rowHeight / fontSize(), codeFontFamily, function (props) {
+  return rowHeight * props.expandedRows + getEditorInputVerticalPadding(props.isCompact) * 2;
+}, function (props) {
+  return rowHeight * props.expandedRows + getEditorInputVerticalPadding(props.isCompact) * 2;
+}, "var(--ds-text, ".concat(N700, ")"), function (props) {
+  return getEditorInputVerticalPadding(props.isCompact);
+}, editorInputHorizontalPadding, "var(--ds-text-accent-purple, ".concat(P400, ")"), "var(--ds-text-accent-blue, ".concat(B300, ")"), "var(--ds-text-accent-green, ".concat(G300, ")"), "var(--ds-text-danger, ".concat(R400, ")"), "var(--ds-text-subtlest, ".concat(N100, ")"), rowHeight / 10, "var(--ds-space-100, 8px)", "var(--ds-space-025, 2px)", "var(--ds-space-100, 8px)", function (props) {
+  return !props.lineNumbersVisible && css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n          display: none;\n        "])));
+});
+export var ReadOnlyEditorView = styled(EditorView)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  /* We need to replicate padding from the inner prosemirror element in our read only state. That means we also need\n  recompute max height excluding the child padding. */\n  padding: ", "px\n    ", "px;\n  max-height: ", "px;\n\n  > p {\n    /* Prevent collapsing empty paragraphs */\n    min-height: ", "px;\n  }\n"])), function (props) {
+  return getEditorInputVerticalPadding(props.isCompact);
+}, editorInputHorizontalPadding, function (props) {
+  return rowHeight * props.defaultMaxRows;
+}, rowHeight);
+export var EditorControls = styled.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n  flex-shrink: 0;\n  margin-left: auto;\n  margin-right: ", "px;\n  line-height: normal;\n  position: sticky;\n  top: 0;\n  height: ", "px;\n"])), function (props) {
+  return props.isSearch ? getEditorInputVerticalPadding(props.isCompact) - 1 // the search button needs the same vertical & horizontal spacing
+  : editorInputHorizontalPadding - 3;
+}, function (props) {
+  return rowHeight + 2 * getEditorInputVerticalPadding(props.isCompact);
+});

package/dist/esm/ui/jql-editor-portal-provider/context.js

@@ -0,0 +1,10 @@
+import { createContext, useContext } from 'react';
+import noop from 'lodash/noop';
+export var PortalActionsContext = /*#__PURE__*/createContext({
+  onCreatePortal: noop,
+  onDestroyPortal: noop,
+  onRegisterPluginContainer: noop
+});
+export var usePortalActionsContext = function usePortalActionsContext() {
+  return useContext(PortalActionsContext);
+};