@atlaskit/jql-editor 4.5.2 → 4.6.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/jql-editor
 
+## 4.6.1
+
+### Patch Changes
+
+- [`c2faa85c89bec`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c2faa85c89bec) -
+  a11y fixes for read only loading states
+
+## 4.6.0
+
+### Minor Changes
+
+- [`31ba9e3c9a657`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/31ba9e3c9a657) -
+  Typography migration (https://product-fabric.atlassian.net/browse/PYX-881)
+
 ## 4.5.2
 
 ### Patch Changes

package/dist/cjs/analytics/util.js

@@ -6,5 +6,5 @@ Object.defineProperty(exports, "__esModule", {
 exports.useJqlEditorAnalytics = void 0;
 var _jqlEditorCommon = require("@atlaskit/jql-editor-common");
 var useJqlEditorAnalytics = exports.useJqlEditorAnalytics = function useJqlEditorAnalytics(analyticsSource) {
-  return (0, _jqlEditorCommon.useJqlPackageAnalytics)(analyticsSource, "@atlaskit/jql-editor", "4.5.2", _jqlEditorCommon.ANALYTICS_CHANNEL);
+  return (0, _jqlEditorCommon.useJqlPackageAnalytics)(analyticsSource, "@atlaskit/jql-editor", "4.6.1", _jqlEditorCommon.ANALYTICS_CHANNEL);
 };

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

@@ -20,8 +20,11 @@ var _baseSyntaxHelp = require("../base-syntax-help");
 var ReadOnlyControlsContent = exports.ReadOnlyControlsContent = function ReadOnlyControlsContent() {
   var _useEditorThemeContex = (0, _useEditorTheme.useEditorThemeContext)(),
     isSearch = _useEditorThemeContex.isSearch;
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_baseExpandToggle.BaseExpandToggle, {
-    label: '',
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_baseExpandToggle.BaseExpandToggle
+  // The label here is for avoiding a11y violations only
+  // This component ReadOnlyControlsContent is only used as a fallback for a loading state
+  , {
+    label: 'Editor',
     editorId: '',
     expanded: false,
     onClick: _noop.default,
@@ -30,8 +33,11 @@ var ReadOnlyControlsContent = exports.ReadOnlyControlsContent = function ReadOnl
     label: '',
     onClick: _noop.default,
     isDisabled: true
-  }), isSearch && /*#__PURE__*/_react.default.createElement(_baseSearch.BaseSearch, {
-    label: '',
+  }), isSearch && /*#__PURE__*/_react.default.createElement(_baseSearch.BaseSearch
+  // The label here is for avoiding a11y violations only
+  // This component ReadOnlyControlsContent is only used as a fallback for a loading state
+  , {
+    label: 'Search',
     onSearch: _noop.default,
     isDisabled: true
   }));

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

@@ -8,6 +8,7 @@ exports.JQLEditorHelp = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireDefault(require("react"));
 var _form = require("@atlaskit/form");
+var _primitives = require("@atlaskit/primitives");
 var _constants = require("../../../common/constants");
 var _useEditorTheme = require("../../../hooks/use-editor-theme");
 var _state = require("../../../state");
@@ -25,12 +26,18 @@ var JQLEditorHelp = exports.JQLEditorHelp = function JQLEditorHelp() {
   var _useScopedId = (0, _state.useScopedId)(_constants.JQL_EDITOR_HELP_CONTENT_ID),
     _useScopedId2 = (0, _slicedToArray2.default)(_useScopedId, 1),
     helpContentId = _useScopedId2[0];
-  var SearchMessage = /*#__PURE__*/_react.default.createElement("span", null, formatMessage(_messages.messages.searchCommand, {
+  var SearchMessage = /*#__PURE__*/_react.default.createElement(_primitives.Text, {
+    size: "UNSAFE_small",
+    color: "inherit"
+  }, formatMessage(_messages.messages.searchCommand, {
     b: function b(text) {
       return /*#__PURE__*/_react.default.createElement("b", null, text);
     }
   }));
-  var NewLineMessage = /*#__PURE__*/_react.default.createElement("span", null, formatMessage(isSearch ? _messages.messages.newLineCommand : _messages.messages.fieldNewLineCommand, {
+  var NewLineMessage = /*#__PURE__*/_react.default.createElement(_primitives.Text, {
+    size: "UNSAFE_small",
+    color: "inherit"
+  }, formatMessage(isSearch ? _messages.messages.newLineCommand : _messages.messages.fieldNewLineCommand, {
     b: function b(text) {
       return /*#__PURE__*/_react.default.createElement("b", null, text);
     }

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

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.JQLEditorReadOnly = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
+var _primitives = require("@atlaskit/primitives");
 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");
@@ -80,8 +81,16 @@ var JQLEditorReadOnlyWithoutTheme = function JQLEditorReadOnlyWithoutTheme(_ref)
     expandedRows: expandedRows,
     lineNumbersVisible: lineNumbersVisible,
     isCompact: isCompact
+    // aria-expanded and aria-controls here are placeholders only. This is to avoid a11y violations.
+    // This component JQLEditorReadOnlyWithoutTheme is only a loading state
+    // Therefore the autocomplete combobox is never shown to the users
+    ,
+    "aria-expanded": false,
+    "aria-controls": "dummy-jql-editor-auto-complete-id",
+    "aria-label": "JQL query"
   }, blocks.map(function (block, index) {
-    return /*#__PURE__*/_react.default.createElement("p", {
+    return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+      as: "p",
       key: index
     }, block);
   })), /*#__PURE__*/_react.default.createElement(_styled.EditorControls, {

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

@@ -32,7 +32,7 @@ var fadeOut = (0, _react.keyframes)({
 });
 
 // eslint-disable-next-line @atlaskit/design-system/no-styled-tagged-template-expression, @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var EditorMain = exports.EditorMain = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t/* CSS reset */\n\tfont-family: ", ";\n\tfont-size: ", "px;\n\tflex-grow: 1;\n\n\t/* These styles and animations are derived from @atlaskit/tooltip */\n\n\t.", " {\n\t\tbackground-color: ", ";\n\t\tcolor: ", ";\n\t\tborder-radius: ", ";\n\t\tbox-sizing: border-box;\n\t\tfont-size: 12px;\n\t\tline-height: 1.3;\n\t\tmax-width: 240px;\n\t\tpadding: ", " ", ";\n\t\tword-wrap: break-word;\n\t\toverflow-wrap: break-word;\n\t\tz-index: ", ";\n\t\tpointer-events: none;\n\t\tposition: absolute;\n\t\tvisibility: hidden;\n\n\t\t/* Horizontally center and vertically position above the target element */\n\t\ttransform: translate(-50%, calc(-100% - ", "));\n\n\t\t&.", " {\n\t\t\tanimation: ", " 350ms cubic-bezier(0.15, 1, 0.3, 1);\n\t\t\tvisibility: visible;\n\t\t}\n\n\t\t&.", " {\n\t\t\tanimation: ", " 350ms cubic-bezier(0.15, 1, 0.3, 1);\n\t\t}\n\t}\n"])), (0, _constants.fontFamily)(), (0, _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 EditorMain = exports.EditorMain = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t/* CSS reset */\n\tfont-family: ", ";\n\tfont-size: ", "px;\n\tflex-grow: 1;\n\n\t/* These styles and animations are derived from @atlaskit/tooltip */\n\n\t.", " {\n\t\tbackground-color: ", ";\n\t\tcolor: ", ";\n\t\tborder-radius: ", ";\n\t\tbox-sizing: border-box;\n\t\tfont: ", ";\n\t\tline-height: 1.3;\n\t\tmax-width: 240px;\n\t\tpadding: ", " ", ";\n\t\tword-wrap: break-word;\n\t\toverflow-wrap: break-word;\n\t\tz-index: ", ";\n\t\tpointer-events: none;\n\t\tposition: absolute;\n\t\tvisibility: hidden;\n\n\t\t/* Horizontally center and vertically position above the target element */\n\t\ttransform: translate(-50%, calc(-100% - ", "));\n\n\t\t&.", " {\n\t\t\tanimation: ", " 350ms cubic-bezier(0.15, 1, 0.3, 1);\n\t\t\tvisibility: visible;\n\t\t}\n\n\t\t&.", " {\n\t\t\tanimation: ", " 350ms cubic-bezier(0.15, 1, 0.3, 1);\n\t\t}\n\t}\n"])), (0, _constants.fontFamily)(), (0, _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-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)", "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);
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var EditorFooter = exports.EditorFooter = _styled.default.div({

package/dist/es2019/analytics/util.js

@@ -1,4 +1,4 @@
 import { ANALYTICS_CHANNEL, useJqlPackageAnalytics } from '@atlaskit/jql-editor-common';
 export const useJqlEditorAnalytics = analyticsSource => {
-  return useJqlPackageAnalytics(analyticsSource, "@atlaskit/jql-editor", "4.5.2", ANALYTICS_CHANNEL);
+  return useJqlPackageAnalytics(analyticsSource, "@atlaskit/jql-editor", "4.6.1", ANALYTICS_CHANNEL);
 };

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

@@ -11,8 +11,11 @@ export const ReadOnlyControlsContent = () => {
   const {
     isSearch
   } = useEditorThemeContext();
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BaseExpandToggle, {
-    label: '',
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BaseExpandToggle
+  // The label here is for avoiding a11y violations only
+  // This component ReadOnlyControlsContent is only used as a fallback for a loading state
+  , {
+    label: 'Editor',
     editorId: '',
     expanded: false,
     onClick: noop,
@@ -21,8 +24,11 @@ export const ReadOnlyControlsContent = () => {
     label: '',
     onClick: noop,
     isDisabled: true
-  }), isSearch && /*#__PURE__*/React.createElement(BaseSearch, {
-    label: '',
+  }), isSearch && /*#__PURE__*/React.createElement(BaseSearch
+  // The label here is for avoiding a11y violations only
+  // This component ReadOnlyControlsContent is only used as a fallback for a loading state
+  , {
+    label: 'Search',
     onSearch: noop,
     isDisabled: true
   }));

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { HelperMessage } from '@atlaskit/form';
+import { Text } from '@atlaskit/primitives';
 import { JQL_EDITOR_HELP_CONTENT_ID } from '../../../common/constants';
 import { useEditorThemeContext } from '../../../hooks/use-editor-theme';
 import { useEditorViewHasFocus, useIntl, useScopedId } from '../../../state';
@@ -14,10 +15,16 @@ export const JQLEditorHelp = () => {
     isSearch
   } = useEditorThemeContext();
   const [helpContentId] = useScopedId(JQL_EDITOR_HELP_CONTENT_ID);
-  const SearchMessage = /*#__PURE__*/React.createElement("span", null, formatMessage(messages.searchCommand, {
+  const SearchMessage = /*#__PURE__*/React.createElement(Text, {
+    size: "UNSAFE_small",
+    color: "inherit"
+  }, formatMessage(messages.searchCommand, {
     b: text => /*#__PURE__*/React.createElement("b", null, text)
   }));
-  const NewLineMessage = /*#__PURE__*/React.createElement("span", null, formatMessage(isSearch ? messages.newLineCommand : messages.fieldNewLineCommand, {
+  const NewLineMessage = /*#__PURE__*/React.createElement(Text, {
+    size: "UNSAFE_small",
+    color: "inherit"
+  }, formatMessage(isSearch ? messages.newLineCommand : messages.fieldNewLineCommand, {
     b: text => /*#__PURE__*/React.createElement("b", null, text)
   }));
   return /*#__PURE__*/React.createElement(HelpContainer, {

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Box } from '@atlaskit/primitives';
 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
@@ -77,7 +78,15 @@ const JQLEditorReadOnlyWithoutTheme = ({
     expandedRows: expandedRows,
     lineNumbersVisible: lineNumbersVisible,
     isCompact: isCompact
-  }, blocks.map((block, index) => /*#__PURE__*/React.createElement("p", {
+    // aria-expanded and aria-controls here are placeholders only. This is to avoid a11y violations.
+    // This component JQLEditorReadOnlyWithoutTheme is only a loading state
+    // Therefore the autocomplete combobox is never shown to the users
+    ,
+    "aria-expanded": false,
+    "aria-controls": "dummy-jql-editor-auto-complete-id",
+    "aria-label": "JQL query"
+  }, blocks.map((block, index) => /*#__PURE__*/React.createElement(Box, {
+    as: "p",
     key: index
   }, block))), /*#__PURE__*/React.createElement(EditorControls, {
     isSearch: isSearch,

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

@@ -39,7 +39,7 @@ export const EditorMain = styled.div`
 		color: ${`var(--ds-text-inverse, ${N0})`};
 		border-radius: ${"var(--ds-border-radius-100, 3px)"};
 		box-sizing: border-box;
-		font-size: 12px;
+		font: ${"var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"};
 		line-height: 1.3;
 		max-width: 240px;
 		padding: ${"var(--ds-space-025, 2px)"} ${"var(--ds-space-075, 6px)"};

package/dist/esm/analytics/util.js

@@ -1,4 +1,4 @@
 import { ANALYTICS_CHANNEL, useJqlPackageAnalytics } from '@atlaskit/jql-editor-common';
 export var useJqlEditorAnalytics = function useJqlEditorAnalytics(analyticsSource) {
-  return useJqlPackageAnalytics(analyticsSource, "@atlaskit/jql-editor", "4.5.2", ANALYTICS_CHANNEL);
+  return useJqlPackageAnalytics(analyticsSource, "@atlaskit/jql-editor", "4.6.1", ANALYTICS_CHANNEL);
 };

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

@@ -10,8 +10,11 @@ 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: '',
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BaseExpandToggle
+  // The label here is for avoiding a11y violations only
+  // This component ReadOnlyControlsContent is only used as a fallback for a loading state
+  , {
+    label: 'Editor',
     editorId: '',
     expanded: false,
     onClick: noop,
@@ -20,8 +23,11 @@ export var ReadOnlyControlsContent = function ReadOnlyControlsContent() {
     label: '',
     onClick: noop,
     isDisabled: true
-  }), isSearch && /*#__PURE__*/React.createElement(BaseSearch, {
-    label: '',
+  }), isSearch && /*#__PURE__*/React.createElement(BaseSearch
+  // The label here is for avoiding a11y violations only
+  // This component ReadOnlyControlsContent is only used as a fallback for a loading state
+  , {
+    label: 'Search',
     onSearch: noop,
     isDisabled: true
   }));

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

@@ -1,6 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React from 'react';
 import { HelperMessage } from '@atlaskit/form';
+import { Text } from '@atlaskit/primitives';
 import { JQL_EDITOR_HELP_CONTENT_ID } from '../../../common/constants';
 import { useEditorThemeContext } from '../../../hooks/use-editor-theme';
 import { useEditorViewHasFocus, useIntl, useScopedId } from '../../../state';
@@ -18,12 +19,18 @@ export var JQLEditorHelp = function JQLEditorHelp() {
   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, {
+  var SearchMessage = /*#__PURE__*/React.createElement(Text, {
+    size: "UNSAFE_small",
+    color: "inherit"
+  }, 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, {
+  var NewLineMessage = /*#__PURE__*/React.createElement(Text, {
+    size: "UNSAFE_small",
+    color: "inherit"
+  }, formatMessage(isSearch ? messages.newLineCommand : messages.fieldNewLineCommand, {
     b: function b(text) {
       return /*#__PURE__*/React.createElement("b", null, text);
     }

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

@@ -1,6 +1,7 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["isSearch", "isCompact"];
 import React from 'react';
+import { Box } from '@atlaskit/primitives';
 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
@@ -74,8 +75,16 @@ var JQLEditorReadOnlyWithoutTheme = function JQLEditorReadOnlyWithoutTheme(_ref)
     expandedRows: expandedRows,
     lineNumbersVisible: lineNumbersVisible,
     isCompact: isCompact
+    // aria-expanded and aria-controls here are placeholders only. This is to avoid a11y violations.
+    // This component JQLEditorReadOnlyWithoutTheme is only a loading state
+    // Therefore the autocomplete combobox is never shown to the users
+    ,
+    "aria-expanded": false,
+    "aria-controls": "dummy-jql-editor-auto-complete-id",
+    "aria-label": "JQL query"
   }, blocks.map(function (block, index) {
-    return /*#__PURE__*/React.createElement("p", {
+    return /*#__PURE__*/React.createElement(Box, {
+      as: "p",
       key: index
     }, block);
   })), /*#__PURE__*/React.createElement(EditorControls, {

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

@@ -28,7 +28,7 @@ var fadeOut = keyframes({
 });
 
 // eslint-disable-next-line @atlaskit/design-system/no-styled-tagged-template-expression, @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var EditorMain = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t/* CSS reset */\n\tfont-family: ", ";\n\tfont-size: ", "px;\n\tflex-grow: 1;\n\n\t/* These styles and animations are derived from @atlaskit/tooltip */\n\n\t.", " {\n\t\tbackground-color: ", ";\n\t\tcolor: ", ";\n\t\tborder-radius: ", ";\n\t\tbox-sizing: border-box;\n\t\tfont-size: 12px;\n\t\tline-height: 1.3;\n\t\tmax-width: 240px;\n\t\tpadding: ", " ", ";\n\t\tword-wrap: break-word;\n\t\toverflow-wrap: break-word;\n\t\tz-index: ", ";\n\t\tpointer-events: none;\n\t\tposition: absolute;\n\t\tvisibility: hidden;\n\n\t\t/* Horizontally center and vertically position above the target element */\n\t\ttransform: translate(-50%, calc(-100% - ", "));\n\n\t\t&.", " {\n\t\t\tanimation: ", " 350ms cubic-bezier(0.15, 1, 0.3, 1);\n\t\t\tvisibility: visible;\n\t\t}\n\n\t\t&.", " {\n\t\t\tanimation: ", " 350ms cubic-bezier(0.15, 1, 0.3, 1);\n\t\t}\n\t}\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 EditorMain = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t/* CSS reset */\n\tfont-family: ", ";\n\tfont-size: ", "px;\n\tflex-grow: 1;\n\n\t/* These styles and animations are derived from @atlaskit/tooltip */\n\n\t.", " {\n\t\tbackground-color: ", ";\n\t\tcolor: ", ";\n\t\tborder-radius: ", ";\n\t\tbox-sizing: border-box;\n\t\tfont: ", ";\n\t\tline-height: 1.3;\n\t\tmax-width: 240px;\n\t\tpadding: ", " ", ";\n\t\tword-wrap: break-word;\n\t\toverflow-wrap: break-word;\n\t\tz-index: ", ";\n\t\tpointer-events: none;\n\t\tposition: absolute;\n\t\tvisibility: hidden;\n\n\t\t/* Horizontally center and vertically position above the target element */\n\t\ttransform: translate(-50%, calc(-100% - ", "));\n\n\t\t&.", " {\n\t\t\tanimation: ", " 350ms cubic-bezier(0.15, 1, 0.3, 1);\n\t\t\tvisibility: visible;\n\t\t}\n\n\t\t&.", " {\n\t\t\tanimation: ", " 350ms cubic-bezier(0.15, 1, 0.3, 1);\n\t\t}\n\t}\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-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)", "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);
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var EditorFooter = styled.div({

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/jql-editor",
-	"version": "4.5.2",
+	"version": "4.6.1",
 	"description": "This package allows consumers to render an advanced JQL editor component to enable autocomplete-assisted authoring and validation of JQL queries.",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -9,8 +9,6 @@
 	},
 	"atlassian": {
 		"team": "Jira Platform: Search Experience / Empanada",
-		"inPublicMirror": true,
-		"releaseModel": "continuous",
 		"website": {
 			"name": "JQL Editor",
 			"category": "JQL"
@@ -39,17 +37,18 @@
 		"@atlaskit/analytics-gas-types": "^5.1.0",
 		"@atlaskit/analytics-next": "^10.1.0",
 		"@atlaskit/avatar": "^21.15.0",
-		"@atlaskit/button": "^20.0.0",
+		"@atlaskit/button": "^20.1.0",
 		"@atlaskit/editor-prosemirror": "5.0.1",
 		"@atlaskit/form": "^10.5.0",
-		"@atlaskit/icon": "^22.13.0",
+		"@atlaskit/icon": "^22.15.0",
 		"@atlaskit/jql-ast": "^3.3.0",
 		"@atlaskit/jql-autocomplete": "^2.0.0",
 		"@atlaskit/jql-editor-common": "^2.0.0",
 		"@atlaskit/jql-parser": "^2.0.0",
+		"@atlaskit/primitives": "^12.1.0",
 		"@atlaskit/spinner": "^16.3.0",
 		"@atlaskit/theme": "^13.0.0",
-		"@atlaskit/tokens": "^1.58.0",
+		"@atlaskit/tokens": "^1.59.0",
 		"@atlaskit/tooltip": "^18.7.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",