@atlaskit/jql-editor 4.0.0

package/dist/esm/state/types.js

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

package/dist/esm/state/util.js

@@ -0,0 +1,169 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+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) { _defineProperty(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; }
+import escapeRegExp from 'lodash/escapeRegExp';
+import uuidv5 from 'uuid/v5';
+import { AbstractJastVisitor } from '@atlaskit/jql-ast';
+import getDocumentPosition from '../plugins/common/get-document-position';
+import { getNodeText } from '../utils/document-text';
+// Unique namespace to identify JQL autocomplete options!
+var UUID_NAMESPACE = '9a90299c-aa58-494b-b6a1-e93206e3fdd6';
+export var getAutocompleteOptionId = function getAutocompleteOptionId(value) {
+  return uuidv5(value, UUID_NAMESPACE);
+};
+export var tokensToAutocompleteOptions = function tokensToAutocompleteOptions(tokens) {
+  var tokensToDisplay = tokens.values;
+  if (tokens.matchedText !== '') {
+    // Candidates that start with last token text but are not an exact match (case insensitive)
+    var regex = new RegExp("^".concat(escapeRegExp(tokens.matchedText), "[^$]"), 'i');
+    tokensToDisplay = tokens.values.filter(function (token) {
+      return regex.test(token);
+    });
+  }
+  return tokensToDisplay.map(function (token) {
+    var _tokens$context;
+    return {
+      id: getAutocompleteOptionId(token),
+      name: token,
+      value: token,
+      replacePosition: tokens.replacePosition,
+      matchedText: tokens.matchedText,
+      context: (_tokens$context = tokens.context) !== null && _tokens$context !== void 0 ? _tokens$context : null,
+      type: 'keyword'
+    };
+  });
+};
+export var getReplacePositionStart = function getReplacePositionStart(_ref) {
+  var rules = _ref.rules,
+    tokens = _ref.tokens;
+  // Matching tokens should be prioritized over rules when calculating autocomplete dropdown position
+  if (tokens.values.length) {
+    return tokens.replacePosition[0];
+  }
+
+  // Same precedence as `useAutocompleteOptions`, this may change in future if we don't limit suggestions to one rule
+  var rulePrecedence = ['value', 'function', 'list', 'operator', 'field'];
+  for (var _i = 0, _rulePrecedence = rulePrecedence; _i < _rulePrecedence.length; _i++) {
+    var rule = _rulePrecedence[_i];
+    if (Object.prototype.hasOwnProperty.call(rules, rule)) {
+      return rules[rule].replacePosition[0];
+    }
+  }
+  return tokens.replacePosition[0];
+};
+export var getAutocompletePosition = function getAutocompletePosition(editorView, replacePositionStart) {
+  var _editorView$state = editorView.state,
+    doc = _editorView$state.doc,
+    selection = _editorView$state.selection;
+  var documentPosition = getDocumentPosition(doc, replacePositionStart);
+  var _editorView$coordsAtP = editorView.coordsAtPos(documentPosition),
+    left = _editorView$coordsAtP.left;
+  // Vertically position autocomplete relative to selection end
+  var _editorView$coordsAtP2 = editorView.coordsAtPos(selection.to),
+    bottom = _editorView$coordsAtP2.bottom;
+  return {
+    top: bottom,
+    left: left
+  };
+};
+var getDebugSelectionAttributes = function getDebugSelectionAttributes() {
+  var _selection$anchorNode, _selection$anchorNode2, _selection$focusNode, _selection$focusNode2;
+  var selection = document.getSelection();
+  if (selection === null || selection.type === 'None') {
+    return {};
+  }
+  return {
+    anchorOffset: selection.anchorOffset,
+    anchorNodeText: (_selection$anchorNode = selection.anchorNode) === null || _selection$anchorNode === void 0 ? void 0 : _selection$anchorNode.textContent,
+    anchorNodeName: (_selection$anchorNode2 = selection.anchorNode) === null || _selection$anchorNode2 === void 0 ? void 0 : _selection$anchorNode2.nodeName,
+    focusOffset: selection.focusOffset,
+    focusNodeText: (_selection$focusNode = selection.focusNode) === null || _selection$focusNode === void 0 ? void 0 : _selection$focusNode.textContent,
+    focusNodeName: (_selection$focusNode2 = selection.focusNode) === null || _selection$focusNode2 === void 0 ? void 0 : _selection$focusNode2.nodeName
+  };
+};
+export var sendDebugMessage = function sendDebugMessage(message, editorView, editorState, onDebugUnsafeMessage, eventAttributes) {
+  if (!onDebugUnsafeMessage) {
+    return;
+  }
+  try {
+    var editorViewStateText = getNodeText(editorView.state.doc, 0, editorView.state.doc.content.size);
+    var editorViewStateJson = JSON.stringify(editorView.state.toJSON());
+    var editorStateJson = JSON.stringify(editorState.toJSON());
+    var editorViewHtml = editorView.dom.innerHTML;
+    onDebugUnsafeMessage(message, _objectSpread(_objectSpread({
+      editorStateJson: editorStateJson,
+      editorViewStateText: editorViewStateText,
+      editorViewStateJson: editorViewStateJson,
+      editorViewHtml: editorViewHtml
+    }, getDebugSelectionAttributes()), eventAttributes));
+  } catch (ignored) {
+    // Do nothing
+  }
+};
+export var getFieldNodes = function getFieldNodes(ast) {
+  if (!ast.query) {
+    return new Set();
+  }
+  var visitor = new FindFieldsVisitor();
+  ast.query.accept(visitor);
+  return visitor.fields;
+};
+var FindFieldsVisitor = /*#__PURE__*/function (_AbstractJastVisitor) {
+  _inherits(FindFieldsVisitor, _AbstractJastVisitor);
+  var _super = _createSuper(FindFieldsVisitor);
+  function FindFieldsVisitor() {
+    var _this;
+    _classCallCheck(this, FindFieldsVisitor);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "fields", new Set());
+    _defineProperty(_assertThisInitialized(_this), "visitQuery", function (query) {
+      if (query.where !== undefined) {
+        query.where.accept(_assertThisInitialized(_this));
+      }
+      if (query.orderBy !== undefined) {
+        query.orderBy.accept(_assertThisInitialized(_this));
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "visitOrderBy", function (orderBy) {
+      orderBy.fields.map(function (orderByField) {
+        return orderByField.accept(_assertThisInitialized(_this));
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "visitOrderByField", function (orderByField) {
+      orderByField.field.accept(_assertThisInitialized(_this));
+    });
+    _defineProperty(_assertThisInitialized(_this), "visitCompoundClause", function (compoundClause) {
+      compoundClause.clauses.map(function (clause) {
+        return clause.accept(_assertThisInitialized(_this));
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "visitTerminalClause", function (terminalClause) {
+      terminalClause.field.accept(_assertThisInitialized(_this));
+    });
+    _defineProperty(_assertThisInitialized(_this), "visitNotClause", function (notClause) {
+      notClause.clause.accept(_assertThisInitialized(_this));
+    });
+    _defineProperty(_assertThisInitialized(_this), "visitField", function (field) {
+      _this.fields.add(field.value.toLowerCase());
+    });
+    return _this;
+  }
+  _createClass(FindFieldsVisitor, [{
+    key: "defaultResult",
+    value: function defaultResult() {
+      return;
+    }
+  }]);
+  return FindFieldsVisitor;
+}(AbstractJastVisitor);

package/dist/esm/types.js

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

package/dist/esm/ui/error-boundary/index.js

@@ -0,0 +1,73 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+import React, { Component } from 'react';
+
+// eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports
+import { JQLEditorReadOnly } from '../jql-editor-layout';
+// eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports
+// eslint-disable-next-line @repo/internal/react/no-class-components
+var ErrorBoundary = /*#__PURE__*/function (_Component) {
+  _inherits(ErrorBoundary, _Component);
+  var _super = _createSuper(ErrorBoundary);
+  function ErrorBoundary() {
+    var _this;
+    _classCallCheck(this, ErrorBoundary);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      error: null
+    });
+    return _this;
+  }
+  _createClass(ErrorBoundary, [{
+    key: "componentDidCatch",
+    value: function componentDidCatch(error) {
+      this.setState({
+        error: error
+      });
+      this.props.onError && this.props.onError(error);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        children = _this$props.children,
+        renderFallback = _this$props.render;
+      var error = this.state.error;
+      if (error === null) {
+        return children;
+      }
+      return renderFallback({
+        error: error
+      });
+    }
+  }]);
+  return ErrorBoundary;
+}(Component);
+export var withErrorBoundary = function withErrorBoundary(WrappedComponent) {
+  return function (props) {
+    var query = props.query,
+      onRenderError = props.onRenderError,
+      onSearch = props.onSearch,
+      isCompact = props.isCompact;
+    return /*#__PURE__*/React.createElement(ErrorBoundary, {
+      onError: onRenderError,
+      render: function render() {
+        return /*#__PURE__*/React.createElement(JQLEditorReadOnly, {
+          query: query,
+          isSearch: !!onSearch,
+          isCompact: isCompact
+        });
+      }
+    }, /*#__PURE__*/React.createElement(WrappedComponent, props));
+  };
+};

package/dist/esm/ui/index.js

@@ -0,0 +1,4 @@
+import { withErrorBoundary } from './error-boundary';
+import { withIntlProvider } from './intl-provider';
+import JQLEditorUI from './jql-editor';
+export default withIntlProvider(withErrorBoundary(JQLEditorUI));

package/dist/esm/ui/intl-provider/index.js

@@ -0,0 +1,16 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["locale"];
+import React from 'react';
+import { IntlProvider } from 'react-intl-next';
+export var withIntlProvider = function withIntlProvider(WrappedComponent) {
+  return function (props) {
+    var locale = props.locale,
+      rest = _objectWithoutProperties(props, _excluded);
+    if (locale) {
+      return /*#__PURE__*/React.createElement(IntlProvider, {
+        locale: locale
+      }, /*#__PURE__*/React.createElement(WrappedComponent, rest));
+    }
+    return /*#__PURE__*/React.createElement(WrappedComponent, rest);
+  };
+};

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

@@ -0,0 +1,63 @@
+import React, { useEffect, useRef } from 'react';
+import { injectIntl } from 'react-intl-next';
+import { di } from 'react-magnetic-di';
+import { useJqlEditorAnalytics } from '../../analytics';
+import { EditorThemeContext, useEditorTheme } from '../../hooks/use-editor-theme';
+import { EditorStateContainer } from '../../state';
+// eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports
+import { JQLEditorPortalRenderer } from '../jql-editor-portal-provider';
+// eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports
+import JQLEditorView from '../jql-editor-view';
+var JQLEditorInner = function JQLEditorInner(_ref) {
+  var analyticsSource = _ref.analyticsSource,
+    query = _ref.query,
+    _ref$messages = _ref.messages,
+    messages = _ref$messages === void 0 ? [] : _ref$messages,
+    inputRef = _ref.inputRef,
+    isSearching = _ref.isSearching,
+    onEditorMounted = _ref.onEditorMounted,
+    onDebugUnsafeMessage = _ref.onDebugUnsafeMessage,
+    onHydrate = _ref.onHydrate,
+    onUpdate = _ref.onUpdate,
+    onSearch = _ref.onSearch,
+    autocompleteProvider = _ref.autocompleteProvider,
+    intl = _ref.intl,
+    _ref$enableRichInline = _ref.enableRichInlineNodes,
+    enableRichInlineNodes = _ref$enableRichInline === void 0 ? false : _ref$enableRichInline,
+    isCompact = _ref.isCompact,
+    onSyntaxHelp = _ref.onSyntaxHelp,
+    onFocus = _ref.onFocus;
+  var editorTheme = useEditorTheme({
+    isSearch: !!onSearch,
+    isCompact: isCompact
+  });
+  var _useJqlEditorAnalytic = useJqlEditorAnalytics(analyticsSource),
+    createAndFireAnalyticsEvent = _useJqlEditorAnalytic.createAndFireAnalyticsEvent;
+
+  // Create and update a mutable ref for our intl object so it can be used by Prosemirror plugins.
+  var intlRef = useRef(intl);
+  useEffect(function () {
+    intlRef.current = intl;
+  }, [intl]);
+  return /*#__PURE__*/React.createElement(EditorStateContainer, {
+    query: query,
+    externalMessages: messages,
+    isSearching: isSearching,
+    intlRef: intlRef,
+    onEditorMounted: onEditorMounted,
+    onDebugUnsafeMessage: onDebugUnsafeMessage,
+    onHydrate: onHydrate,
+    onUpdate: onUpdate,
+    onSearch: onSearch,
+    createAndFireAnalyticsEvent: createAndFireAnalyticsEvent,
+    autocompleteProvider: autocompleteProvider,
+    enableRichInlineNodes: enableRichInlineNodes,
+    onSyntaxHelp: onSyntaxHelp,
+    onFocus: onFocus
+  }, /*#__PURE__*/React.createElement(EditorThemeContext.Provider, {
+    value: editorTheme
+  }, /*#__PURE__*/React.createElement(JQLEditorPortalRenderer, null, /*#__PURE__*/React.createElement(JQLEditorView, {
+    inputRef: inputRef
+  }))));
+};
+export default injectIntl(JQLEditorInner);

package/dist/esm/ui/jql-editor/types.js

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

package/dist/esm/ui/jql-editor-controls-content/base-expand-toggle/index.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import Button from '@atlaskit/button';
+import MediaServicesActualSizeIcon from '@atlaskit/icon/glyph/media-services/actual-size';
+import MediaServicesFitToPageIcon from '@atlaskit/icon/glyph/media-services/fit-to-page';
+import { N50, N500 } from '@atlaskit/theme/colors';
+import { ExpandToggleContainer } from './styled';
+
+// Atlaskit doesn't provide a circle variation of the expand/collapse icons so we have to implement our own
+var ExpandCircleIcon = function ExpandCircleIcon(_ref) {
+  var isDisabled = _ref.isDisabled;
+  return /*#__PURE__*/React.createElement(MediaServicesActualSizeIcon, {
+    label: '',
+    size: 'small',
+    primaryColor: isDisabled ? "var(--ds-icon-disabled, ".concat(N50, ")") : "var(--ds-icon, ".concat(N500, ")")
+  });
+};
+var CollapseCircleIcon = function CollapseCircleIcon(_ref2) {
+  var isDisabled = _ref2.isDisabled;
+  return /*#__PURE__*/React.createElement(MediaServicesFitToPageIcon, {
+    label: '',
+    size: 'small',
+    primaryColor: isDisabled ? "var(--ds-icon-disabled, ".concat(N50, ")") : "var(--ds-icon, ".concat(N500, ")")
+  });
+};
+export var BaseExpandToggle = function BaseExpandToggle(_ref3) {
+  var expanded = _ref3.expanded,
+    editorId = _ref3.editorId,
+    isDisabled = _ref3.isDisabled,
+    label = _ref3.label,
+    onClick = _ref3.onClick;
+  var Icon;
+  if (expanded) {
+    Icon = CollapseCircleIcon;
+  } else {
+    Icon = ExpandCircleIcon;
+  }
+  return /*#__PURE__*/React.createElement(ExpandToggleContainer, null, /*#__PURE__*/React.createElement(Button, {
+    appearance: 'subtle',
+    "aria-expanded": expanded,
+    "aria-controls": editorId,
+    "aria-label": label,
+    isDisabled: isDisabled,
+    spacing: 'none',
+    onClick: onClick,
+    iconBefore: /*#__PURE__*/React.createElement(Icon, {
+      isDisabled: isDisabled
+    })
+  }));
+};

package/dist/esm/ui/jql-editor-controls-content/base-expand-toggle/styled.js

@@ -0,0 +1,5 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject;
+import styled from '@emotion/styled';
+import { N40, N50 } from '@atlaskit/theme/colors';
+export var ExpandToggleContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  /* Override background styles for our button to match designs */\n\n  > button {\n    border-radius: 100%;\n    /* Fill the remaining vertical space for a single line in our editor and space between buttons */\n    margin: ", " 0;\n\n    &:hover {\n      background: ", ";\n    }\n\n    &:active,\n    &[data-firefox-is-active='true'] {\n      background: ", ";\n    }\n  }\n"])), "var(--ds-space-050, 4px)", "var(--ds-background-neutral-subtle-hovered, ".concat(N40, ")"), "var(--ds-background-neutral-subtle-pressed, ".concat(N50, ")"));

package/dist/esm/ui/jql-editor-controls-content/base-search/index.js

@@ -0,0 +1,34 @@
+import React, { useCallback } from 'react';
+import { LoadingButton } from '@atlaskit/button';
+import SearchIcon from '@atlaskit/icon/glyph/editor/search';
+var style = {
+  // Fixes an issue where loading button makes the editor flicker with a scrollbar
+  overflow: 'hidden'
+};
+export var BaseSearch = function BaseSearch(_ref) {
+  var isDisabled = _ref.isDisabled,
+    isSearching = _ref.isSearching,
+    label = _ref.label,
+    onSearch = _ref.onSearch;
+  // Prevent click events being repeatedly fired if the Enter key is held down.
+  var preventRepeatClick = useCallback(function (e) {
+    if (e.key === 'Enter' && e.repeat) {
+      e.preventDefault();
+    }
+  }, []);
+  return /*#__PURE__*/React.createElement(LoadingButton, {
+    "aria-label": label,
+    isDisabled: isDisabled,
+    testId: "jql-editor-search",
+    style: style,
+    appearance: 'primary',
+    spacing: 'none',
+    onClick: onSearch,
+    onKeyDown: preventRepeatClick,
+    isLoading: isSearching,
+    iconBefore: /*#__PURE__*/React.createElement(SearchIcon, {
+      label: '',
+      size: 'medium'
+    })
+  });
+};

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import Button from '@atlaskit/button';
+import QuestionIcon from '@atlaskit/icon/glyph/question';
+import { N0 } from '@atlaskit/theme/colors';
+import { SyntaxHelpContainer } from './styled';
+export var BaseSyntaxHelp = function BaseSyntaxHelp(_ref) {
+  var describedby = _ref.describedby,
+    isDisabled = _ref.isDisabled,
+    label = _ref.label,
+    onClick = _ref.onClick;
+  return /*#__PURE__*/React.createElement(SyntaxHelpContainer, null, /*#__PURE__*/React.createElement(Button, {
+    "aria-describedby": describedby,
+    "aria-label": label,
+    isDisabled: isDisabled,
+    appearance: 'subtle',
+    spacing: 'none',
+    target: 'blank',
+    href: "https://confluence.atlassian.com/display/SERVICEDESKCLOUD/Advanced+searching",
+    iconBefore: /*#__PURE__*/React.createElement(QuestionIcon, {
+      label: '',
+      primaryColor: isDisabled ? "var(--ds-icon-disabled, ".concat(N0, ")") : "var(--ds-icon-inverse, ".concat(N0, ")"),
+      size: 'small'
+    }),
+    onClick: onClick
+  }));
+};

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

@@ -0,0 +1,5 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject;
+import styled from '@emotion/styled';
+import { N50, N500, N600, N70 } from '@atlaskit/theme/colors';
+export var SyntaxHelpContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  /* Override background styles for our button to match designs */\n\n  > a {\n    background: ", ";\n    border-radius: 100%;\n    /* Fill the remaining vertical space for a single line in our editor and space between buttons */\n    margin: ", ";\n\n    &:hover {\n      background: ", ";\n    }\n\n    &:focus {\n      background: ", ";\n    }\n\n    &:active,\n    &[data-firefox-is-active='true'] {\n      background: ", ";\n    }\n\n    &[disabled] {\n      background: ", ";\n    }\n  }\n"])), "var(--ds-background-neutral-bold, ".concat(N70, ")"), "var(--ds-space-050, 4px)", "var(--ds-background-neutral-bold-hovered, ".concat(N500, ")"), "var(--ds-background-neutral-bold, ".concat(N70, ")"), "var(--ds-background-neutral-bold-pressed, ".concat(N600, ")"), "var(--ds-background-disabled, ".concat(N50, ")"));

package/dist/esm/ui/jql-editor-controls-content/expand-toggle/index.js

@@ -0,0 +1,55 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useCallback } from 'react';
+import Tooltip from '@atlaskit/tooltip';
+import { Action, ActionSubject, ActionSubjectId, EventType } from '../../../analytics';
+import { JQL_EDITOR_INPUT_ID } from '../../../common/constants';
+import { TooltipContent } from '../../../common/styled';
+import { useEditorThemeContext } from '../../../hooks/use-editor-theme';
+import { useIntl, useScopedId, useStoreActions } 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 { BaseExpandToggle } from '../base-expand-toggle';
+import { messages } from './messages';
+export var ExpandToggle = function ExpandToggle() {
+  var _useEditorThemeContex = useEditorThemeContext(),
+    expanded = _useEditorThemeContex.expanded,
+    toggleExpanded = _useEditorThemeContex.toggleExpanded;
+  var _useStoreActions = useStoreActions(),
+    _useStoreActions2 = _slicedToArray(_useStoreActions, 2),
+    createAndFireAnalyticsEvent = _useStoreActions2[1].createAndFireAnalyticsEvent;
+  var _useScopedId = useScopedId(JQL_EDITOR_INPUT_ID),
+    _useScopedId2 = _slicedToArray(_useScopedId, 1),
+    editorId = _useScopedId2[0];
+  var _useIntl = useIntl(),
+    _useIntl2 = _slicedToArray(_useIntl, 1),
+    intl = _useIntl2[0];
+  var message;
+  if (expanded) {
+    message = intl.formatMessage(messages.collapseTooltip);
+  } else {
+    message = intl.formatMessage(messages.expandTooltip);
+  }
+  var onClick = useCallback(function () {
+    createAndFireAnalyticsEvent({
+      action: Action.CLICKED,
+      actionSubject: ActionSubject.BUTTON,
+      actionSubjectId: ActionSubjectId.EDITOR_EXPAND,
+      eventType: EventType.UI,
+      attributes: {
+        expanded: !expanded
+      }
+    });
+    toggleExpanded();
+  }, [expanded, createAndFireAnalyticsEvent, toggleExpanded]);
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    position: 'bottom',
+    content: /*#__PURE__*/React.createElement(TooltipContent, null, message),
+    tag: TooltipTag
+  }, /*#__PURE__*/React.createElement(BaseExpandToggle, {
+    expanded: expanded,
+    editorId: editorId,
+    label: intl.formatMessage(messages.buttonLabel),
+    onClick: onClick
+  }));
+};

package/dist/esm/ui/jql-editor-controls-content/expand-toggle/messages.js

@@ -0,0 +1,18 @@
+import { defineMessages } from 'react-intl-next';
+export var messages = defineMessages({
+  buttonLabel: {
+    id: 'jql-editor.ui.jql-editor-controls-content.expand-toggle.button-label',
+    defaultMessage: 'Editor',
+    description: 'Label that tells the user the expand toggle is controlling the JQL editor.'
+  },
+  expandTooltip: {
+    id: 'jql-editor.ui.jql-editor-controls-content.expand-toggle.expand-tooltip',
+    defaultMessage: 'Expand editor',
+    description: 'Tooltip to show for the expand icon which increases the height of the editor'
+  },
+  collapseTooltip: {
+    id: 'jql-editor.ui.jql-editor-controls-content.expand-toggle.collapse-tooltip',
+    defaultMessage: 'Collapse editor',
+    description: 'Tooltip to show for the collapse icon which shrinks the height of the editor'
+  }
+});

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { useEditorThemeContext } from '../../hooks/use-editor-theme';
+import { ExpandToggle } from './expand-toggle';
+import { Search } from './search';
+import { SyntaxHelp } from './syntax-help';
+export var JQLEditorControlsContent = function JQLEditorControlsContent() {
+  var _useEditorThemeContex = useEditorThemeContext(),
+    isSearch = _useEditorThemeContex.isSearch;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ExpandToggle, null), /*#__PURE__*/React.createElement(SyntaxHelp, null), isSearch && /*#__PURE__*/React.createElement(Search, null));
+};

package/dist/esm/ui/jql-editor-controls-content/read-only-controls-content/index.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import noop from 'lodash/noop';
+import { useEditorThemeContext } from '../../../hooks/use-editor-theme';
+// eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports
+import { BaseExpandToggle } from '../base-expand-toggle';
+// eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports
+import { BaseSearch } from '../base-search';
+// eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports
+import { BaseSyntaxHelp } from '../base-syntax-help';
+export var ReadOnlyControlsContent = function ReadOnlyControlsContent() {
+  var _useEditorThemeContex = useEditorThemeContext(),
+    isSearch = _useEditorThemeContex.isSearch;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BaseExpandToggle, {
+    label: '',
+    editorId: '',
+    expanded: false,
+    onClick: noop,
+    isDisabled: true
+  }), /*#__PURE__*/React.createElement(BaseSyntaxHelp, {
+    label: '',
+    onClick: noop,
+    isDisabled: true
+  }), isSearch && /*#__PURE__*/React.createElement(BaseSearch, {
+    label: '',
+    onSearch: noop,
+    isDisabled: true
+  }));
+};

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

@@ -0,0 +1,31 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React from 'react';
+import Tooltip from '@atlaskit/tooltip';
+import { TooltipContent } from '../../../common/styled';
+import { useIntl, useIsSearching, useStoreActions } 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 { BaseSearch } from '../base-search';
+import { messages } from './messages';
+export var Search = function Search() {
+  var _useIntl = useIntl(),
+    _useIntl2 = _slicedToArray(_useIntl, 1),
+    intl = _useIntl2[0];
+  var _useStoreActions = useStoreActions(),
+    _useStoreActions2 = _slicedToArray(_useStoreActions, 2),
+    onSearch = _useStoreActions2[1].onSearch;
+  var label = intl.formatMessage(messages.searchLabel);
+  var _useIsSearching = useIsSearching(),
+    _useIsSearching2 = _slicedToArray(_useIsSearching, 1),
+    isSearching = _useIsSearching2[0];
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    position: 'bottom',
+    content: /*#__PURE__*/React.createElement(TooltipContent, null, label),
+    tag: TooltipTag
+  }, /*#__PURE__*/React.createElement(BaseSearch, {
+    label: label,
+    onSearch: onSearch,
+    isSearching: isSearching
+  }));
+};

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

@@ -0,0 +1,8 @@
+import { defineMessages } from 'react-intl-next';
+export var messages = defineMessages({
+  searchLabel: {
+    id: 'jql-editor.ui.jql-editor-controls-content.search.label',
+    defaultMessage: 'Search',
+    description: 'Label to show for the search icon which the user can press to perform a search.'
+  }
+});