@atlaskit/jql-editor 4.0.0

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

@@ -0,0 +1,24 @@
+"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)({
+  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/cjs/ui/jql-editor-layout/index.js

@@ -0,0 +1,104 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.JQLEditorReadOnly = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _useEditorTheme = require("../../hooks/use-editor-theme");
+var _splitTextByNewLine = require("../../utils/split-text-by-new-line");
+var _readOnlyControlsContent = require("../jql-editor-controls-content/read-only-controls-content");
+var _styled = require("./styled");
+var _excluded = ["isSearch", "isCompact"]; // eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports
+var JQLEditorLayout = function JQLEditorLayout(props) {
+  var _useEditorThemeContex = (0, _useEditorTheme.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.default.createElement(_styled.EditorMain, {
+    id: mainId,
+    ref: onEditorMainRef
+  }, /*#__PURE__*/_react.default.createElement(_styled.EditorViewContainer, {
+    editorViewHasFocus: editorViewHasFocus,
+    editorViewIsInvalid: editorViewIsInvalid,
+    ref: onEditorViewContainerRef,
+    onScroll: onEditorViewContainerScroll
+  }, /*#__PURE__*/_react.default.createElement(_styled.LineNumberToolbar, {
+    lineNumbersVisible: lineNumbersVisible
+  }), /*#__PURE__*/_react.default.createElement(_styled.EditorView, {
+    defaultMaxRows: defaultMaxRows,
+    expandedRows: expandedRows,
+    isCompact: isCompact,
+    lineNumbersVisible: lineNumbersVisible,
+    ref: onEditorViewRef,
+    onBlur: onEditorViewBlur,
+    onFocus: onEditorViewFocus,
+    onTransitionEnd: onEditorViewTransitionEnd
+  }), /*#__PURE__*/_react.default.createElement(_styled.EditorControls, {
+    isSearch: isSearch,
+    isCompact: isCompact
+  }, EditorControlsContent)), /*#__PURE__*/_react.default.createElement(_styled.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 = (0, _useEditorTheme.useEditorThemeContext)(),
+    defaultMaxRows = _useEditorThemeContex2.defaultMaxRows,
+    expandedRows = _useEditorThemeContex2.expandedRows,
+    isSearch = _useEditorThemeContex2.isSearch,
+    isCompact = _useEditorThemeContex2.isCompact;
+  var blocks = (0, _splitTextByNewLine.splitTextByNewLine)(query);
+  var lineNumbersVisible = blocks.length > 1;
+  return /*#__PURE__*/_react.default.createElement(_styled.EditorMain, null, /*#__PURE__*/_react.default.createElement(_styled.ReadOnlyEditorViewContainer, null, /*#__PURE__*/_react.default.createElement(_styled.LineNumberToolbar, {
+    lineNumbersVisible: lineNumbersVisible
+  }), /*#__PURE__*/_react.default.createElement(_styled.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.default.createElement("p", {
+      key: index
+    }, block);
+  })), /*#__PURE__*/_react.default.createElement(_styled.EditorControls, {
+    isSearch: isSearch,
+    isCompact: isCompact
+  }, /*#__PURE__*/_react.default.createElement(_readOnlyControlsContent.ReadOnlyControlsContent, null))), /*#__PURE__*/_react.default.createElement(_styled.EditorFooter, null));
+};
+var JQLEditorReadOnly = exports.JQLEditorReadOnly = function JQLEditorReadOnly(_ref2) {
+  var isSearch = _ref2.isSearch,
+    isCompact = _ref2.isCompact,
+    props = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+  var editorTheme = (0, _useEditorTheme.useEditorTheme)({
+    isSearch: isSearch,
+    isCompact: isCompact
+  });
+  return /*#__PURE__*/_react.default.createElement(_useEditorTheme.EditorThemeContext.Provider, {
+    value: editorTheme
+  }, /*#__PURE__*/_react.default.createElement(JQLEditorReadOnlyWithoutTheme, props));
+};
+var _default = exports.default = JQLEditorLayout;

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

@@ -0,0 +1,61 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ReadOnlyEditorViewContainer = exports.ReadOnlyEditorView = exports.LineNumberToolbar = exports.EditorViewContainer = exports.EditorView = exports.EditorMain = exports.EditorFooter = exports.EditorControls = 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 _constants2 = require("../../plugins/validation-tooltip/constants");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
+var fadeIn = (0, _react.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n"])));
+var fadeOut = (0, _react.keyframes)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  from {\n    visibility: visible;\n    opacity: 1;\n  }\n\n  to {\n    opacity: 0;\n  }\n"])));
+var EditorMain = exports.EditorMain = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\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"])), _constants.fontFamily, _constants.fontSize, _constants2.TOOLTIP_CLASSNAME, "var(--ds-background-neutral-bold, ".concat(_colors.N800, ")"), "var(--ds-text-inverse, ".concat(_colors.N0, ")"), "var(--ds-border-radius-100, 3px)", "var(--ds-space-025, 2px)", "var(--ds-space-075, 6px)", _constants.layers.tooltip(), "var(--ds-space-200, 16px)", _constants2.TOOLTIP_ENTER_CLASSNAME, fadeIn, _constants2.TOOLTIP_EXIT_CLASSNAME, fadeOut);
+var EditorFooter = exports.EditorFooter = _styled.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\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 = (0, _constants.gridSize)() * 2.75;
+// Vertical padding for the editor input
+var getEditorInputVerticalPadding = function getEditorInputVerticalPadding(isCompact) {
+  return isCompact ? 3 : 7;
+};
+var editorInputHorizontalPadding = 6;
+var EditorViewContainer = exports.EditorViewContainer = _styled.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\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(_colors.N10, ")"), "var(--ds-border, ".concat(_colors.N40, ")"), "var(--ds-border-radius-100, 3px)", "var(--ds-text, ".concat(_colors.N900, ")"), function (props) {
+  return props.editorViewHasFocus ? (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n          background-color: ", ";\n          border-color: ", ";\n        "])), "var(--ds-surface, ".concat(_colors.N0, ")"), "var(--ds-border-focused, ".concat(_colors.B100, ")")) : (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n          :hover {\n            background-color: ", ";\n          }\n        "])), "var(--ds-background-input-hovered, ".concat(_colors.N30, ")"));
+}, function (props) {
+  return props.editorViewIsInvalid && (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n      border-color: ", ";\n    "])), "var(--ds-border-danger, ".concat(_colors.R400, ")"));
+});
+var ReadOnlyEditorViewContainer = exports.ReadOnlyEditorViewContainer = (0, _styled.default)(EditorViewContainer)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  color: ", ";\n  pointer-events: none;\n"])), "var(--ds-background-disabled, ".concat(_colors.N30, ")"), "var(--ds-text-disabled, ".concat(_colors.N100, ")"));
+var LineNumberToolbar = exports.LineNumberToolbar = _styled.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  flex-shrink: 0;\n  width: 30px;\n  position: sticky;\n  top: 0;\n\n  ", "\n"])), "var(--ds-background-neutral, ".concat(_colors.N30, ")"), function (props) {
+  return !props.lineNumbersVisible && (0, _react.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n      display: none;\n    "])));
+});
+
+/**
+ * The main div which the Prosemirror editor will be rendered into.
+ */
+var EditorView = exports.EditorView = _styled.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\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 / (0, _constants.fontSize)(), _constants.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(_colors.N700, ")"), function (props) {
+  return getEditorInputVerticalPadding(props.isCompact);
+}, editorInputHorizontalPadding, "var(--ds-text-accent-purple, ".concat(_colors.P400, ")"), "var(--ds-text-accent-blue, ".concat(_colors.B300, ")"), "var(--ds-text-accent-green, ".concat(_colors.G300, ")"), "var(--ds-text-danger, ".concat(_colors.R400, ")"), "var(--ds-text-subtlest, ".concat(_colors.N100, ")"), rowHeight / 10, "var(--ds-space-100, 8px)", "var(--ds-space-025, 2px)", "var(--ds-space-100, 8px)", function (props) {
+  return !props.lineNumbersVisible && (0, _react.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n          display: none;\n        "])));
+});
+var ReadOnlyEditorView = exports.ReadOnlyEditorView = (0, _styled.default)(EditorView)(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\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);
+var EditorControls = exports.EditorControls = _styled.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\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/cjs/ui/jql-editor-portal-provider/context.js

@@ -0,0 +1,17 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePortalActionsContext = exports.PortalActionsContext = void 0;
+var _react = require("react");
+var _noop = _interopRequireDefault(require("lodash/noop"));
+var PortalActionsContext = exports.PortalActionsContext = /*#__PURE__*/(0, _react.createContext)({
+  onCreatePortal: _noop.default,
+  onDestroyPortal: _noop.default,
+  onRegisterPluginContainer: _noop.default
+});
+var usePortalActionsContext = exports.usePortalActionsContext = function usePortalActionsContext() {
+  return (0, _react.useContext)(PortalActionsContext);
+};

package/dist/cjs/ui/jql-editor-portal-provider/index.js

@@ -0,0 +1,116 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.JQLEditorPortalRenderer = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactDom = require("react-dom");
+var _context = require("./context");
+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; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var initialState = {
+  components: {},
+  containers: {}
+};
+var reducer = function reducer(state, action) {
+  switch (action.type) {
+    case 'createPortal':
+      {
+        var _action$payload = action.payload,
+          key = _action$payload.key,
+          portalComponent = _action$payload.portalComponent,
+          container = _action$payload.container;
+        return _objectSpread(_objectSpread({}, state), {}, {
+          components: _objectSpread(_objectSpread({}, state.components), {}, (0, _defineProperty2.default)({}, key, {
+            portalComponent: portalComponent,
+            container: container
+          }))
+        });
+      }
+    case 'destroyPortal':
+      {
+        var _state$components = state.components,
+          _action$payload2 = action.payload,
+          toDestroy = _state$components[_action$payload2],
+          components = (0, _objectWithoutProperties2.default)(_state$components, [_action$payload2].map(_toPropertyKey));
+        return _objectSpread(_objectSpread({}, state), {}, {
+          components: components
+        });
+      }
+    case 'registerPluginContainer':
+      {
+        var _action$payload3 = action.payload,
+          element = _action$payload3.element,
+          containerKey = _action$payload3.containerKey;
+        if (!element) {
+          return state;
+        }
+        return _objectSpread(_objectSpread({}, state), {}, {
+          containers: _objectSpread(_objectSpread({}, state.containers), {}, (0, _defineProperty2.default)({}, containerKey, element))
+        });
+      }
+    default:
+      {
+        return state;
+      }
+  }
+};
+
+/**
+ * Provides actions to manage portals via context and renders portalled components into the React tree.
+ */
+var JQLEditorPortalRenderer = exports.JQLEditorPortalRenderer = function JQLEditorPortalRenderer(_ref) {
+  var children = _ref.children;
+  var _useReducer = (0, _react.useReducer)(reducer, initialState),
+    _useReducer2 = (0, _slicedToArray2.default)(_useReducer, 2),
+    state = _useReducer2[0],
+    dispatch = _useReducer2[1];
+  var actionsContext = (0, _react.useMemo)(function () {
+    return {
+      onCreatePortal: function onCreatePortal(key, portalComponent, container) {
+        return dispatch({
+          type: 'createPortal',
+          payload: {
+            key: key,
+            portalComponent: portalComponent,
+            container: container
+          }
+        });
+      },
+      onDestroyPortal: function onDestroyPortal(key) {
+        return dispatch({
+          type: 'destroyPortal',
+          payload: key
+        });
+      },
+      onRegisterPluginContainer: function onRegisterPluginContainer(containerKey, element) {
+        return dispatch({
+          type: 'registerPluginContainer',
+          payload: {
+            containerKey: containerKey,
+            element: element
+          }
+        });
+      }
+    };
+  }, [dispatch]);
+  return /*#__PURE__*/_react.default.createElement(_context.PortalActionsContext.Provider, {
+    value: actionsContext
+  }, children, Object.entries(state.components).map(function (_ref2) {
+    var _ref3 = (0, _slicedToArray2.default)(_ref2, 2),
+      key = _ref3[0],
+      value = _ref3[1];
+    var container = value.container instanceof Element ? value.container : state.containers[value.container];
+    return container !== undefined ? /*#__PURE__*/(0, _reactDom.createPortal)(value.portalComponent, container, key) : null;
+  }));
+};

package/dist/cjs/ui/jql-editor-portal-provider/types.js

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

package/dist/cjs/ui/jql-editor-view/index.js

@@ -0,0 +1,198 @@
+"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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _throttle = _interopRequireDefault(require("lodash/throttle"));
+var _constants = require("../../common/constants");
+var _useEditorTheme = require("../../hooks/use-editor-theme");
+var _useEditorViewIsInvalid = require("../../hooks/use-editor-view-is-invalid");
+var _state = require("../../state");
+var _jqlEditorControlsContent = require("../jql-editor-controls-content");
+var _jqlEditorFooterContent = require("../jql-editor-footer-content");
+var _jqlEditorLayout = _interopRequireDefault(require("../jql-editor-layout"));
+var _context = require("../jql-editor-portal-provider/context");
+var _messages = require("../messages");
+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; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } // eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports
+// eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports
+// eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports
+// eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports
+// eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports
+/**
+ * This wraps ProseMirror's EditorView as a React component.
+ */
+var JQLEditorView = function JQLEditorView(_ref) {
+  var inputRef = _ref.inputRef;
+  var _useEditorView = (0, _state.useEditorView)(),
+    _useEditorView2 = (0, _slicedToArray2.default)(_useEditorView, 2),
+    editorView = _useEditorView2[0],
+    _useEditorView2$ = _useEditorView2[1],
+    initialiseEditorView = _useEditorView2$.initialiseEditorView,
+    updateEditorView = _useEditorView2$.updateEditorView;
+  var editorViewNodeRef = (0, _react.useRef)(null);
+  var _useScopedId = (0, _state.useScopedId)(_constants.JQL_EDITOR_MAIN_ID),
+    _useScopedId2 = (0, _slicedToArray2.default)(_useScopedId, 1),
+    mainId = _useScopedId2[0];
+  var _useScopedId3 = (0, _state.useScopedId)(_constants.JQL_EDITOR_AUTOCOMPLETE_ID),
+    _useScopedId4 = (0, _slicedToArray2.default)(_useScopedId3, 1),
+    autocompleteId = _useScopedId4[0];
+  var _useScopedId5 = (0, _state.useScopedId)(_constants.JQL_EDITOR_INPUT_ID),
+    _useScopedId6 = (0, _slicedToArray2.default)(_useScopedId5, 1),
+    editorId = _useScopedId6[0];
+  var _useScopedId7 = (0, _state.useScopedId)(_constants.JQL_EDITOR_HELP_CONTENT_ID),
+    _useScopedId8 = (0, _slicedToArray2.default)(_useScopedId7, 1),
+    helpContentId = _useScopedId8[0];
+  var _useIntl = (0, _state.useIntl)(),
+    _useIntl2 = (0, _slicedToArray2.default)(_useIntl, 1),
+    intl = _useIntl2[0];
+  var portalActions = (0, _context.usePortalActionsContext)();
+  var _useStoreActions = (0, _state.useStoreActions)(),
+    _useStoreActions2 = (0, _slicedToArray2.default)(_useStoreActions, 2),
+    _useStoreActions2$ = _useStoreActions2[1],
+    setEditorViewContainer = _useStoreActions2$.setEditorViewContainer,
+    setEditorViewContainerScroll = _useStoreActions2$.setEditorViewContainerScroll;
+  var _useEditorViewHasFocu = (0, _state.useEditorViewHasFocus)(),
+    _useEditorViewHasFocu2 = (0, _slicedToArray2.default)(_useEditorViewHasFocu, 2),
+    editorViewHasFocus = _useEditorViewHasFocu2[0],
+    _useEditorViewHasFocu3 = _useEditorViewHasFocu2[1],
+    onEditorViewBlur = _useEditorViewHasFocu3.onEditorViewBlur,
+    onEditorViewFocus = _useEditorViewHasFocu3.onEditorViewFocus;
+  var _useLineNumbersVisibl = (0, _state.useLineNumbersVisible)(),
+    _useLineNumbersVisibl2 = (0, _slicedToArray2.default)(_useLineNumbersVisibl, 1),
+    lineNumbersVisible = _useLineNumbersVisibl2[0];
+  var _useAutocomplete = (0, _state.useAutocomplete)(),
+    _useAutocomplete2 = (0, _slicedToArray2.default)(_useAutocomplete, 1),
+    selectedOptionId = _useAutocomplete2[0].selectedOptionId;
+  var _useAutocompleteIsOpe = (0, _state.useAutocompleteIsOpen)(),
+    _useAutocompleteIsOpe2 = (0, _slicedToArray2.default)(_useAutocompleteIsOpe, 1),
+    isAutocompleteOpen = _useAutocompleteIsOpe2[0];
+  var editorViewIsInvalid = (0, _useEditorViewIsInvalid.useEditorViewIsInvalid)();
+  var _useEditorThemeContex = (0, _useEditorTheme.useEditorThemeContext)(),
+    expanded = _useEditorThemeContex.expanded;
+  var previousExpanded = (0, _react.useRef)(expanded);
+  var onEditorViewTransitionEnd = (0, _react.useCallback)(function () {
+    if (!expanded && editorViewNodeRef.current) {
+      // Clear any fixed heights when the editor is collapsed
+      editorViewNodeRef.current.style.height = '';
+    }
+  }, [expanded, editorViewNodeRef]);
+  var onMainRef = (0, _react.useCallback)(function (element) {
+    return portalActions.onRegisterPluginContainer('main', element);
+  }, [portalActions]);
+  var onEditorViewContainerRef = (0, _react.useCallback)(function (editorViewContainer) {
+    if (editorViewContainer) {
+      setEditorViewContainer(editorViewContainer);
+    }
+  }, [setEditorViewContainer]);
+  var throttledSetEditorViewContainerScroll = (0, _react.useMemo)(function () {
+    return (0, _throttle.default)(function (scrollTop) {
+      setEditorViewContainerScroll(scrollTop);
+    }, 1000 / 60);
+  },
+  // 60 fps
+  [setEditorViewContainerScroll]);
+  var onEditorViewContainerScroll = (0, _react.useCallback)(function (event) {
+    var scrollTop = event.currentTarget.scrollTop;
+    throttledSetEditorViewContainerScroll(scrollTop);
+  }, [throttledSetEditorViewContainerScroll]);
+
+  // Compute HTML attributes to be applied to the Prosemirror editor view
+  var getAttributes = (0, _react.useCallback)(function () {
+    return _objectSpread(_objectSpread({
+      id: editorId,
+      'data-testid': 'jql-editor-input',
+      // Disable grammarly
+      'data-gramm': 'false',
+      // Combobox might not be a semantically correct role for the editor,
+      // however some browsers like Safari will only announce suggestions when this role is present
+      role: 'combobox',
+      'aria-expanded': "".concat(isAutocompleteOpen),
+      'aria-autocomplete': 'list',
+      'aria-label': intl.formatMessage(_messages.messages.inputLabel),
+      'aria-controls': autocompleteId,
+      'aria-owns': autocompleteId,
+      'aria-describedby': helpContentId
+    }, selectedOptionId && {
+      'aria-activedescendant': selectedOptionId
+    }), editorViewIsInvalid && {
+      'aria-invalid': 'true'
+    });
+  }, [editorId, isAutocompleteOpen, intl, autocompleteId, helpContentId, selectedOptionId, editorViewIsInvalid]);
+
+  // Update attributes on our editor view whenever they have changed
+  (0, _react.useEffect)(function () {
+    updateEditorView(getAttributes());
+  }, [getAttributes, updateEditorView]);
+  var onEditorViewRef = (0, _react.useCallback)(function (editorViewNode) {
+    if (editorViewNode && !editorView) {
+      initialiseEditorView(editorViewNode, getAttributes(), portalActions);
+      editorViewNodeRef.current = editorViewNode;
+    }
+  }, [editorView, initialiseEditorView, getAttributes, portalActions]);
+  (0, _react.useEffect)(function () {
+    if (editorViewNodeRef.current && expanded !== previousExpanded.current) {
+      if (expanded) {
+        // Set fixed height based on the current element height so we can transition to the expanded height
+        editorViewNodeRef.current.style.height = editorViewNodeRef.current.clientHeight + 'px';
+        requestAnimationFrame(function () {
+          if (editorViewNodeRef.current) {
+            editorViewNodeRef.current.style.height = '';
+            editorViewNodeRef.current.setAttribute('data-expanded', 'true');
+          }
+        });
+      } else {
+        if (editorView) {
+          requestAnimationFrame(function () {
+            if (editorViewNodeRef.current && editorView) {
+              // Transition to the default height based on the content of the editor
+              editorViewNodeRef.current.style.height = editorView.dom.clientHeight + 'px';
+              editorViewNodeRef.current.removeAttribute('data-expanded');
+            }
+          });
+        }
+      }
+    }
+    previousExpanded.current = expanded;
+  }, [expanded, previousExpanded, editorViewNodeRef, editorView]);
+  (0, _react.useImperativeHandle)(inputRef, function () {
+    return {
+      focus: function focus() {
+        if (editorView) {
+          editorView.focus();
+        }
+      }
+    };
+  });
+  (0, _react.useEffect)(function () {
+    return function () {
+      if (editorView) {
+        editorView.destroy();
+      }
+    };
+  }, [editorView]);
+  return /*#__PURE__*/_react.default.createElement(_jqlEditorLayout.default, {
+    EditorControlsContent: /*#__PURE__*/_react.default.createElement(_jqlEditorControlsContent.JQLEditorControlsContent, null),
+    EditorFooterContent: /*#__PURE__*/_react.default.createElement(_jqlEditorFooterContent.JQLEditorFooterContent, null),
+    editorViewHasFocus: editorViewHasFocus,
+    lineNumbersVisible: lineNumbersVisible,
+    editorViewIsInvalid: editorViewIsInvalid,
+    mainId: mainId,
+    onEditorMainRef: onMainRef,
+    onEditorViewContainerRef: onEditorViewContainerRef,
+    onEditorViewContainerScroll: onEditorViewContainerScroll,
+    onEditorViewRef: onEditorViewRef,
+    onEditorViewBlur: onEditorViewBlur,
+    onEditorViewFocus: onEditorViewFocus,
+    onEditorViewTransitionEnd: onEditorViewTransitionEnd
+  });
+};
+var _default = exports.default = JQLEditorView;

package/dist/cjs/ui/messages.js

@@ -0,0 +1,14 @@
+"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)({
+  inputLabel: {
+    id: 'jql-editor.ui.input-label',
+    defaultMessage: 'JQL query',
+    description: 'Label for the input where users can type a JQL query. This text is not visible and is only read by screen readers.'
+  }
+});

package/dist/cjs/ui/tooltip-tag/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TooltipTag = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+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; }
+// We need to use a custom tag element in our tooltip to prevent extra whitespace being rendered after the element
+var TooltipTag = exports.TooltipTag = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  return /*#__PURE__*/_react.default.createElement(_styled.StyledTooltipTag, (0, _extends2.default)({
+    ref: ref
+  }, props));
+});

package/dist/cjs/ui/tooltip-tag/styled.js

@@ -0,0 +1,11 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledTooltipTag = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _templateObject;
+var StyledTooltipTag = exports.StyledTooltipTag = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n"])));

package/dist/cjs/ui/types.js

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

package/dist/cjs/utils/document-text/index.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getNodeText = exports.getFragmentText = void 0;
+/**
+ * Get all text between positions `from` and `to` with a newline char between block nodes.
+ */
+var getNodeText = exports.getNodeText = function getNodeText(node, from, to) {
+  return getFragmentText(node.content, from, to);
+};
+
+/**
+ * Get all text between positions `from` and `to` with a newline char between block nodes.
+ */
+var getFragmentText = exports.getFragmentText = function getFragmentText(fragment, from, to) {
+  return textBetween(fragment, from, to, '\n');
+};
+
+/**
+ * A modified version of {@link Fragment#textBetween}. The default implementation does not insert `blockSeparator` for
+ * consecutive empty block nodes (i.e. empty blocks are collapsed into one).
+ */
+var textBetween = function textBetween(fragment, from, to, blockSeparator, leafText) {
+  var text = '';
+  var enteredInitialBlock = false;
+  fragment.nodesBetween(from, to, function (innerNode, pos) {
+    if (innerNode.isText) {
+      var _innerNode$text;
+      text += (_innerNode$text = innerNode.text) === null || _innerNode$text === void 0 ? void 0 : _innerNode$text.slice(Math.max(from, pos) - pos, to - pos);
+    } else if (innerNode.isLeaf && leafText) {
+      text += leafText;
+    } else if (innerNode.isBlock) {
+      if (enteredInitialBlock) {
+        text += blockSeparator;
+      } else {
+        enteredInitialBlock = true;
+      }
+    }
+  }, 0);
+  return text;
+};