@atlaskit/jql-editor 5.1.2 → 5.2.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/jql-editor
 
+## 5.2.1
+
+### Patch Changes
+
+- [#144736](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/144736)
+  [`ff74b78729adb`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ff74b78729adb) -
+  Internal change to move to Compiled CSS-in-JS styling.
+
+## 5.2.0
+
+### Minor Changes
+
+- [#140363](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/140363)
+  [`46ddb88edd38f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/46ddb88edd38f) -
+  Cleanup FG gravityai-2553-fix-jql-debugger-flicker [GRAVITYAI-2751]
+
 ## 5.1.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", "5.1.2", _jqlEditorCommon.ANALYTICS_CHANNEL);
+  return (0, _jqlEditorCommon.useJqlPackageAnalytics)(analyticsSource, "@atlaskit/jql-editor", "5.2.1", _jqlEditorCommon.ANALYTICS_CHANNEL);
 };

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

@@ -53,7 +53,8 @@ var SyntaxHelp = exports.SyntaxHelp = function SyntaxHelp() {
     content: /*#__PURE__*/_react.default.createElement(_styled.TooltipContent, null, label)
     // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
     ,
-    tag: _tooltipTag.TooltipTag
+    tag: _tooltipTag.TooltipTag,
+    isScreenReaderAnnouncementDisabled: true
   }, /*#__PURE__*/_react.default.createElement(_baseSyntaxHelp.BaseSyntaxHelp, {
     describedby: descriptionId,
     label: label,

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

@@ -8,7 +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 _compiled = require("@atlaskit/primitives/compiled");
 var _constants = require("../../../common/constants");
 var _useEditorTheme = require("../../../hooks/use-editor-theme");
 var _state = require("../../../state");
@@ -26,7 +26,7 @@ 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(_primitives.Text, {
+  var SearchMessage = /*#__PURE__*/_react.default.createElement(_compiled.Text, {
     size: "UNSAFE_small",
     color: "inherit"
   }, formatMessage(_messages.messages.searchCommand, {
@@ -34,7 +34,7 @@ var JQLEditorHelp = exports.JQLEditorHelp = function JQLEditorHelp() {
       return /*#__PURE__*/_react.default.createElement("b", null, text);
     }
   }));
-  var NewLineMessage = /*#__PURE__*/_react.default.createElement(_primitives.Text, {
+  var NewLineMessage = /*#__PURE__*/_react.default.createElement(_compiled.Text, {
     size: "UNSAFE_small",
     color: "inherit"
   }, formatMessage(isSearch ? _messages.messages.newLineCommand : _messages.messages.fieldNewLineCommand, {

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

@@ -24,7 +24,11 @@ var _messages2 = require("./messages");
 var _excluded = ["Component"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-var useFormattedErrorMessage = function useFormattedErrorMessage() {
+/**
+ * This function maps client side validation errors and external messages into a unified format
+ * This is so that the output of this function can then be processed in a unified manner by different renderers
+ */
+var useErrorMessages = function useErrorMessages() {
   var _useIntl = (0, _state.useIntl)(),
     _useIntl2 = (0, _slicedToArray2.default)(_useIntl, 1),
     formatMessage = _useIntl2[0].formatMessage;
@@ -46,53 +50,6 @@ var useFormattedErrorMessage = function useFormattedErrorMessage() {
     return null;
   }
 
-  // Prioritise client over external errors
-  if (jqlError instanceof _jqlAst.JQLSyntaxError) {
-    return "".concat(jqlError.message, " ").concat(formatMessage(_messages2.messages.jqlErrorPosition, {
-      lineNumber: jqlError.line,
-      charPosition: jqlError.charPositionInLine + 1
-    }));
-  } else if (externalErrors.length > 0) {
-    return /*#__PURE__*/_react.default.createElement(_format.FormatMessages, {
-      messages: externalErrors
-    });
-  } else if (jqlError !== null) {
-    return formatMessage(_messages.commonMessages.unknownError);
-  }
-  return null;
-};
-
-/**
- * This function maps client side validation errors and external messages into a unified format
- * This is so that the output of this function can then be processed in a unified manner by different renderers
- *
- * ------ REMOVE THE FOLLOWING COMMENTS WITH THE FG CLEANUP OF gravityai-2553-fix-jql-debugger-flicker -----
- * Cloned from useFormattedErrorMessage. Differences are:
- *  - return type is ExternalMessage[] instead of ReactNode
- *  - Stripped rendering logic away (i.e. FormatMessages) to make the implementation modular
- */
-var useErrorMessages = function useErrorMessages() {
-  var _useIntl3 = (0, _state.useIntl)(),
-    _useIntl4 = (0, _slicedToArray2.default)(_useIntl3, 1),
-    formatMessage = _useIntl4[0].formatMessage;
-  var _useJqlError3 = (0, _state.useJqlError)(),
-    _useJqlError4 = (0, _slicedToArray2.default)(_useJqlError3, 1),
-    jqlError = _useJqlError4[0];
-  var _useExternalMessages3 = (0, _state.useExternalMessages)(),
-    _useExternalMessages4 = (0, _slicedToArray2.default)(_useExternalMessages3, 1),
-    externalErrors = _useExternalMessages4[0].errors;
-  var _useStoreActions3 = (0, _state.useStoreActions)(),
-    _useStoreActions4 = (0, _slicedToArray2.default)(_useStoreActions3, 2),
-    externalErrorMessageViewed = _useStoreActions4[1].externalErrorMessageViewed;
-  var editorViewIsInvalid = (0, _useEditorViewIsInvalid.useEditorViewIsInvalid)();
-  (0, _react.useEffect)(function () {
-    // Emit a UI event whenever external errors has changed
-    externalErrorMessageViewed();
-  }, [externalErrorMessageViewed, externalErrors]);
-  if (!editorViewIsInvalid) {
-    return null;
-  }
-
   /**
    * Transform a string message to take the form of an ExternalMessage,
    * so that we can reduce a bunch of conditionals when processing the output of useErrorMessages
@@ -145,57 +102,32 @@ var ErrorMessages = exports.ErrorMessages = function ErrorMessages() {
   var _useScopedId3 = (0, _state.useScopedId)(_constants.JQL_EDITOR_VALIDATION_ID),
     _useScopedId4 = (0, _slicedToArray2.default)(_useScopedId3, 1),
     validationId = _useScopedId4[0];
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  var errorMessages = (0, _platformFeatureFlags.fg)('gravityai-2553-fix-jql-debugger-flicker') ? useErrorMessages() : null;
-  var errorMessage = !(0, _platformFeatureFlags.fg)('gravityai-2553-fix-jql-debugger-flicker') ?
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  useFormattedErrorMessage() : null;
+  var errorMessages = useErrorMessages();
   var _useCustomErrorCompon = (0, _state.useCustomErrorComponent)(),
     _useCustomErrorCompon2 = (0, _slicedToArray2.default)(_useCustomErrorCompon, 1),
     CustomErrorComponent = _useCustomErrorCompon2[0];
-  if ((0, _platformFeatureFlags.fg)('gravityai-2553-fix-jql-debugger-flicker')) {
-    var _childrenToRender = errorMessages != null ? /*#__PURE__*/_react.default.createElement(_format.MessageContainer, null, /*#__PURE__*/_react.default.createElement(_form.ErrorMessage, {
-      testId: _constants.JQL_EDITOR_VALIDATION_ID
-    }, (0, _platformFeatureFlags.fg)('jql_editor_a11y') ? /*#__PURE__*/_react.default.createElement("span", {
-      role: "alert",
-      id: validationId
-    }, /*#__PURE__*/_react.default.createElement(_format.FormatMessages, {
-      messages: errorMessages
-    })) : /*#__PURE__*/_react.default.createElement("span", {
-      role: "alert",
-      "aria-describedby": editorId
-    }, /*#__PURE__*/_react.default.createElement(_format.FormatMessages, {
-      messages: errorMessages
-    })))) : null;
-
-    // Only render CustomErrorComponent if there is an errorMessage
-    if (errorMessages != null && CustomErrorComponent) {
-      return /*#__PURE__*/_react.default.createElement(CustomComponentDecoratedWithEditorTheme, {
-        testId: _constants.JQL_EDITOR_VALIDATION_ID,
-        editorId: editorId,
-        validationId: validationId,
-        Component: CustomErrorComponent,
-        errorMessages: (0, _format.extractMessageNodes)(errorMessages)
-      }, _childrenToRender);
-    }
-    return _childrenToRender;
-  }
-  var childrenToRender = errorMessage != null ? /*#__PURE__*/_react.default.createElement(_format.MessageContainer, null, /*#__PURE__*/_react.default.createElement(_form.ErrorMessage, {
+  var childrenToRender = errorMessages != null ? /*#__PURE__*/_react.default.createElement(_format.MessageContainer, null, /*#__PURE__*/_react.default.createElement(_form.ErrorMessage, {
     testId: _constants.JQL_EDITOR_VALIDATION_ID
   }, (0, _platformFeatureFlags.fg)('jql_editor_a11y') ? /*#__PURE__*/_react.default.createElement("span", {
     role: "alert",
     id: validationId
-  }, errorMessage) : /*#__PURE__*/_react.default.createElement("span", {
+  }, /*#__PURE__*/_react.default.createElement(_format.FormatMessages, {
+    messages: errorMessages
+  })) : /*#__PURE__*/_react.default.createElement("span", {
     role: "alert",
     "aria-describedby": editorId
-  }, errorMessage))) : null;
+  }, /*#__PURE__*/_react.default.createElement(_format.FormatMessages, {
+    messages: errorMessages
+  })))) : null;
 
   // Only render CustomErrorComponent if there is an errorMessage
-  if (errorMessage != null && CustomErrorComponent) {
+  if (errorMessages != null && CustomErrorComponent) {
     return /*#__PURE__*/_react.default.createElement(CustomComponentDecoratedWithEditorTheme, {
       testId: _constants.JQL_EDITOR_VALIDATION_ID,
       editorId: editorId,
-      Component: CustomErrorComponent
+      validationId: validationId,
+      Component: CustomErrorComponent,
+      errorMessages: (0, _format.extractMessageNodes)(errorMessages)
     }, childrenToRender);
   }
   return childrenToRender;

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

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.extractMessageNodes = exports.MessageContainer = exports.FormatMessages = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _useEditorTheme = require("../../../../hooks/use-editor-theme");
 var _styled = require("./styled");
 // Max number messages we want to show
@@ -21,30 +20,17 @@ var MessageContainer = exports.MessageContainer = function MessageContainer(_ref
 };
 var FormatMessages = exports.FormatMessages = function FormatMessages(_ref2) {
   var messages = _ref2.messages;
-  if ((0, _platformFeatureFlags.fg)('gravityai-2553-fix-jql-debugger-flicker')) {
-    var messageNodes = extractMessageNodes(messages);
-    if (messageNodes.length === 0) {
-      return null;
-    }
-    if (messageNodes.length === 1) {
-      return /*#__PURE__*/_react.default.createElement("span", null, messageNodes[0]);
-    }
-    return /*#__PURE__*/_react.default.createElement(_styled.MessageList, null, messageNodes.map(function (m, i) {
-      return /*#__PURE__*/_react.default.createElement("li", {
-        key: i
-      }, m);
-    }));
-  }
-  if (messages.length === 0) {
+  var messageNodes = extractMessageNodes(messages);
+  if (messageNodes.length === 0) {
     return null;
   }
-  if (messages.length === 1) {
-    return /*#__PURE__*/_react.default.createElement("span", null, messages[0].message);
+  if (messageNodes.length === 1) {
+    return /*#__PURE__*/_react.default.createElement("span", null, messageNodes[0]);
   }
-  return /*#__PURE__*/_react.default.createElement(_styled.MessageList, null, messages.slice(0, MAX_MESSAGES).map(function (m, i) {
+  return /*#__PURE__*/_react.default.createElement(_styled.MessageList, null, messageNodes.map(function (m, i) {
     return /*#__PURE__*/_react.default.createElement("li", {
       key: i
-    }, m.message);
+    }, m);
   }));
 };
 

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

@@ -12,7 +12,7 @@ var _reactMagneticDi = require("react-magnetic-di");
 var _form = require("@atlaskit/form");
 var _info = _interopRequireDefault(require("@atlaskit/icon/glyph/info"));
 var _information = _interopRequireDefault(require("@atlaskit/icon/utility/information"));
-var _primitives = require("@atlaskit/primitives");
+var _compiled = require("@atlaskit/primitives/compiled");
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 var _useEditorViewHasInfos = require("../../../../hooks/use-editor-view-has-infos");
 var _state = require("../../../../state");
@@ -35,7 +35,7 @@ var InfoMessages = exports.InfoMessages = function InfoMessages() {
   var infoMessage = useFormattedInfoMessage();
   return infoMessage != null ? /*#__PURE__*/_react.default.createElement(_format.MessageContainer, null, /*#__PURE__*/_react.default.createElement(_form.HelperMessage, {
     testId: "jql-editor-info-message"
-  }, /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
     as: "span",
     paddingInlineEnd: "space.050"
   }, /*#__PURE__*/_react.default.createElement(_information.default, {

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

@@ -13,7 +13,7 @@ var _reactMagneticDi = require("react-magnetic-di");
 var _form = require("@atlaskit/form");
 var _warning = _interopRequireDefault(require("@atlaskit/icon/glyph/warning"));
 var _warning2 = _interopRequireDefault(require("@atlaskit/icon/utility/warning"));
-var _primitives = require("@atlaskit/primitives");
+var _compiled = require("@atlaskit/primitives/compiled");
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 var _useEditorViewHasWarnings = require("../../../../hooks/use-editor-view-has-warnings");
 var _state = require("../../../../state");
@@ -104,7 +104,7 @@ var WarningMessages = exports.WarningMessages = function WarningMessages() {
   var warningMessage = useFormattedWarningMessage();
   return warningMessage != null ? /*#__PURE__*/_react.default.createElement(_format.MessageContainer, null, /*#__PURE__*/_react.default.createElement(_form.HelperMessage, {
     testId: "jql-editor-warning-message"
-  }, /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
     as: "span",
     paddingInlineEnd: "space.050"
   }, /*#__PURE__*/_react.default.createElement(_warning2.default, {

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

@@ -8,7 +8,7 @@ exports.default = exports.JQLEditorReadOnly = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _primitives = require("@atlaskit/primitives");
+var _compiled = require("@atlaskit/primitives/compiled");
 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");
@@ -91,7 +91,7 @@ var JQLEditorReadOnlyWithoutTheme = function JQLEditorReadOnlyWithoutTheme(_ref)
     "aria-controls": "dummy-jql-editor-auto-complete-id",
     "aria-label": "JQL query"
   }, blocks.map(function (block, index) {
-    return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
       as: "p",
       key: index
     }, block);

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", "5.1.2", ANALYTICS_CHANNEL);
+  return useJqlPackageAnalytics(analyticsSource, "@atlaskit/jql-editor", "5.2.1", ANALYTICS_CHANNEL);
 };

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

@@ -35,7 +35,8 @@ export const SyntaxHelp = () => {
     content: /*#__PURE__*/React.createElement(TooltipContent, null, label)
     // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
     ,
-    tag: TooltipTag
+    tag: TooltipTag,
+    isScreenReaderAnnouncementDisabled: true
   }, /*#__PURE__*/React.createElement(BaseSyntaxHelp, {
     describedby: descriptionId,
     label: label,

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { HelperMessage } from '@atlaskit/form';
-import { Text } from '@atlaskit/primitives';
+import { Text } from '@atlaskit/primitives/compiled';
 import { JQL_EDITOR_HELP_CONTENT_ID } from '../../../common/constants';
 import { useEditorThemeContext } from '../../../hooks/use-editor-theme';
 import { useEditorViewHasFocus, useIntl, useScopedId } from '../../../state';

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

@@ -11,50 +11,10 @@ import { useEditorViewIsInvalid } from '../../../../hooks/use-editor-view-is-inv
 import { useCustomErrorComponent, useExternalMessages, useIntl, useJqlError, useScopedId, useStoreActions } from '../../../../state';
 import { extractMessageNodes, FormatMessages, MessageContainer } from '../format';
 import { messages } from './messages';
-const useFormattedErrorMessage = () => {
-  const [{
-    formatMessage
-  }] = useIntl();
-  const [jqlError] = useJqlError();
-  const [{
-    errors: externalErrors
-  }] = useExternalMessages();
-  const [, {
-    externalErrorMessageViewed
-  }] = useStoreActions();
-  const editorViewIsInvalid = useEditorViewIsInvalid();
-  useEffect(() => {
-    // Emit a UI event whenever external errors has changed
-    externalErrorMessageViewed();
-  }, [externalErrorMessageViewed, externalErrors]);
-  if (!editorViewIsInvalid) {
-    return null;
-  }
-
-  // Prioritise client over external errors
-  if (jqlError instanceof JQLSyntaxError) {
-    return `${jqlError.message} ${formatMessage(messages.jqlErrorPosition, {
-      lineNumber: jqlError.line,
-      charPosition: jqlError.charPositionInLine + 1
-    })}`;
-  } else if (externalErrors.length > 0) {
-    return /*#__PURE__*/React.createElement(FormatMessages, {
-      messages: externalErrors
-    });
-  } else if (jqlError !== null) {
-    return formatMessage(commonMessages.unknownError);
-  }
-  return null;
-};
 
 /**
  * This function maps client side validation errors and external messages into a unified format
  * This is so that the output of this function can then be processed in a unified manner by different renderers
- *
- * ------ REMOVE THE FOLLOWING COMMENTS WITH THE FG CLEANUP OF gravityai-2553-fix-jql-debugger-flicker -----
- * Cloned from useFormattedErrorMessage. Differences are:
- *  - return type is ExternalMessage[] instead of ReactNode
- *  - Stripped rendering logic away (i.e. FormatMessages) to make the implementation modular
  */
 const useErrorMessages = () => {
   const [{
@@ -124,55 +84,30 @@ const CustomComponentDecoratedWithEditorTheme = props => {
 export const ErrorMessages = () => {
   const [editorId] = useScopedId(JQL_EDITOR_INPUT_ID);
   const [validationId] = useScopedId(JQL_EDITOR_VALIDATION_ID);
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  const errorMessages = fg('gravityai-2553-fix-jql-debugger-flicker') ? useErrorMessages() : null;
-  const errorMessage = !fg('gravityai-2553-fix-jql-debugger-flicker') ?
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  useFormattedErrorMessage() : null;
+  const errorMessages = useErrorMessages();
   const [CustomErrorComponent] = useCustomErrorComponent();
-  if (fg('gravityai-2553-fix-jql-debugger-flicker')) {
-    const childrenToRender = errorMessages != null ? /*#__PURE__*/React.createElement(MessageContainer, null, /*#__PURE__*/React.createElement(ErrorMessage, {
-      testId: JQL_EDITOR_VALIDATION_ID
-    }, fg('jql_editor_a11y') ? /*#__PURE__*/React.createElement("span", {
-      role: "alert",
-      id: validationId
-    }, /*#__PURE__*/React.createElement(FormatMessages, {
-      messages: errorMessages
-    })) : /*#__PURE__*/React.createElement("span", {
-      role: "alert",
-      "aria-describedby": editorId
-    }, /*#__PURE__*/React.createElement(FormatMessages, {
-      messages: errorMessages
-    })))) : null;
-
-    // Only render CustomErrorComponent if there is an errorMessage
-    if (errorMessages != null && CustomErrorComponent) {
-      return /*#__PURE__*/React.createElement(CustomComponentDecoratedWithEditorTheme, {
-        testId: JQL_EDITOR_VALIDATION_ID,
-        editorId: editorId,
-        validationId: validationId,
-        Component: CustomErrorComponent,
-        errorMessages: extractMessageNodes(errorMessages)
-      }, childrenToRender);
-    }
-    return childrenToRender;
-  }
-  const childrenToRender = errorMessage != null ? /*#__PURE__*/React.createElement(MessageContainer, null, /*#__PURE__*/React.createElement(ErrorMessage, {
+  const childrenToRender = errorMessages != null ? /*#__PURE__*/React.createElement(MessageContainer, null, /*#__PURE__*/React.createElement(ErrorMessage, {
     testId: JQL_EDITOR_VALIDATION_ID
   }, fg('jql_editor_a11y') ? /*#__PURE__*/React.createElement("span", {
     role: "alert",
     id: validationId
-  }, errorMessage) : /*#__PURE__*/React.createElement("span", {
+  }, /*#__PURE__*/React.createElement(FormatMessages, {
+    messages: errorMessages
+  })) : /*#__PURE__*/React.createElement("span", {
     role: "alert",
     "aria-describedby": editorId
-  }, errorMessage))) : null;
+  }, /*#__PURE__*/React.createElement(FormatMessages, {
+    messages: errorMessages
+  })))) : null;
 
   // Only render CustomErrorComponent if there is an errorMessage
-  if (errorMessage != null && CustomErrorComponent) {
+  if (errorMessages != null && CustomErrorComponent) {
     return /*#__PURE__*/React.createElement(CustomComponentDecoratedWithEditorTheme, {
       testId: JQL_EDITOR_VALIDATION_ID,
       editorId: editorId,
-      Component: CustomErrorComponent
+      validationId: validationId,
+      Component: CustomErrorComponent,
+      errorMessages: extractMessageNodes(errorMessages)
     }, childrenToRender);
   }
   return childrenToRender;

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { useEditorThemeContext } from '../../../../hooks/use-editor-theme';
 import { MessageContainer as MessageContainerStyled, MessageList } from './styled';
 
@@ -18,27 +17,16 @@ export const MessageContainer = ({
 export const FormatMessages = ({
   messages
 }) => {
-  if (fg('gravityai-2553-fix-jql-debugger-flicker')) {
-    const messageNodes = extractMessageNodes(messages);
-    if (messageNodes.length === 0) {
-      return null;
-    }
-    if (messageNodes.length === 1) {
-      return /*#__PURE__*/React.createElement("span", null, messageNodes[0]);
-    }
-    return /*#__PURE__*/React.createElement(MessageList, null, messageNodes.map((m, i) => /*#__PURE__*/React.createElement("li", {
-      key: i
-    }, m)));
-  }
-  if (messages.length === 0) {
+  const messageNodes = extractMessageNodes(messages);
+  if (messageNodes.length === 0) {
     return null;
   }
-  if (messages.length === 1) {
-    return /*#__PURE__*/React.createElement("span", null, messages[0].message);
+  if (messageNodes.length === 1) {
+    return /*#__PURE__*/React.createElement("span", null, messageNodes[0]);
   }
-  return /*#__PURE__*/React.createElement(MessageList, null, messages.slice(0, MAX_MESSAGES).map((m, i) => /*#__PURE__*/React.createElement("li", {
+  return /*#__PURE__*/React.createElement(MessageList, null, messageNodes.map((m, i) => /*#__PURE__*/React.createElement("li", {
     key: i
-  }, m.message)));
+  }, m)));
 };
 
 /**

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

@@ -3,7 +3,7 @@ import { di } from 'react-magnetic-di';
 import { HelperMessage } from '@atlaskit/form';
 import LegacyInfoIcon from '@atlaskit/icon/glyph/info';
 import InfoIcon from '@atlaskit/icon/utility/information';
-import { Box } from '@atlaskit/primitives';
+import { Box } from '@atlaskit/primitives/compiled';
 import * as colors from '@atlaskit/theme/colors';
 import { useEditorViewHasInfos } from '../../../../hooks/use-editor-view-has-infos';
 import { useExternalMessages } from '../../../../state';

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

@@ -3,7 +3,7 @@ import { di } from 'react-magnetic-di';
 import { HelperMessage } from '@atlaskit/form';
 import LegacyWarningIcon from '@atlaskit/icon/glyph/warning';
 import WarningIcon from '@atlaskit/icon/utility/warning';
-import { Box } from '@atlaskit/primitives';
+import { Box } from '@atlaskit/primitives/compiled';
 import * as colors from '@atlaskit/theme/colors';
 import { useEditorViewHasWarnings } from '../../../../hooks/use-editor-view-has-warnings';
 import { useExternalMessages, useHydratedDeprecations, useIntl } from '../../../../state';

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { Box } from '@atlaskit/primitives';
+import { Box } from '@atlaskit/primitives/compiled';
 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

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", "5.1.2", ANALYTICS_CHANNEL);
+  return useJqlPackageAnalytics(analyticsSource, "@atlaskit/jql-editor", "5.2.1", ANALYTICS_CHANNEL);
 };

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

@@ -41,7 +41,8 @@ export var SyntaxHelp = function SyntaxHelp() {
     content: /*#__PURE__*/React.createElement(TooltipContent, null, label)
     // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
     ,
-    tag: TooltipTag
+    tag: TooltipTag,
+    isScreenReaderAnnouncementDisabled: true
   }, /*#__PURE__*/React.createElement(BaseSyntaxHelp, {
     describedby: descriptionId,
     label: label,

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

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React from 'react';
 import { HelperMessage } from '@atlaskit/form';
-import { Text } from '@atlaskit/primitives';
+import { Text } from '@atlaskit/primitives/compiled';
 import { JQL_EDITOR_HELP_CONTENT_ID } from '../../../common/constants';
 import { useEditorThemeContext } from '../../../hooks/use-editor-theme';
 import { useEditorViewHasFocus, useIntl, useScopedId } from '../../../state';

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

@@ -14,7 +14,12 @@ import { useEditorViewIsInvalid } from '../../../../hooks/use-editor-view-is-inv
 import { useCustomErrorComponent, useExternalMessages, useIntl, useJqlError, useScopedId, useStoreActions } from '../../../../state';
 import { extractMessageNodes, FormatMessages, MessageContainer } from '../format';
 import { messages } from './messages';
-var useFormattedErrorMessage = function useFormattedErrorMessage() {
+
+/**
+ * This function maps client side validation errors and external messages into a unified format
+ * This is so that the output of this function can then be processed in a unified manner by different renderers
+ */
+var useErrorMessages = function useErrorMessages() {
   var _useIntl = useIntl(),
     _useIntl2 = _slicedToArray(_useIntl, 1),
     formatMessage = _useIntl2[0].formatMessage;
@@ -36,53 +41,6 @@ var useFormattedErrorMessage = function useFormattedErrorMessage() {
     return null;
   }
 
-  // Prioritise client over external errors
-  if (jqlError instanceof JQLSyntaxError) {
-    return "".concat(jqlError.message, " ").concat(formatMessage(messages.jqlErrorPosition, {
-      lineNumber: jqlError.line,
-      charPosition: jqlError.charPositionInLine + 1
-    }));
-  } else if (externalErrors.length > 0) {
-    return /*#__PURE__*/React.createElement(FormatMessages, {
-      messages: externalErrors
-    });
-  } else if (jqlError !== null) {
-    return formatMessage(commonMessages.unknownError);
-  }
-  return null;
-};
-
-/**
- * This function maps client side validation errors and external messages into a unified format
- * This is so that the output of this function can then be processed in a unified manner by different renderers
- *
- * ------ REMOVE THE FOLLOWING COMMENTS WITH THE FG CLEANUP OF gravityai-2553-fix-jql-debugger-flicker -----
- * Cloned from useFormattedErrorMessage. Differences are:
- *  - return type is ExternalMessage[] instead of ReactNode
- *  - Stripped rendering logic away (i.e. FormatMessages) to make the implementation modular
- */
-var useErrorMessages = function useErrorMessages() {
-  var _useIntl3 = useIntl(),
-    _useIntl4 = _slicedToArray(_useIntl3, 1),
-    formatMessage = _useIntl4[0].formatMessage;
-  var _useJqlError3 = useJqlError(),
-    _useJqlError4 = _slicedToArray(_useJqlError3, 1),
-    jqlError = _useJqlError4[0];
-  var _useExternalMessages3 = useExternalMessages(),
-    _useExternalMessages4 = _slicedToArray(_useExternalMessages3, 1),
-    externalErrors = _useExternalMessages4[0].errors;
-  var _useStoreActions3 = useStoreActions(),
-    _useStoreActions4 = _slicedToArray(_useStoreActions3, 2),
-    externalErrorMessageViewed = _useStoreActions4[1].externalErrorMessageViewed;
-  var editorViewIsInvalid = useEditorViewIsInvalid();
-  useEffect(function () {
-    // Emit a UI event whenever external errors has changed
-    externalErrorMessageViewed();
-  }, [externalErrorMessageViewed, externalErrors]);
-  if (!editorViewIsInvalid) {
-    return null;
-  }
-
   /**
    * Transform a string message to take the form of an ExternalMessage,
    * so that we can reduce a bunch of conditionals when processing the output of useErrorMessages
@@ -135,57 +93,32 @@ export var ErrorMessages = function ErrorMessages() {
   var _useScopedId3 = useScopedId(JQL_EDITOR_VALIDATION_ID),
     _useScopedId4 = _slicedToArray(_useScopedId3, 1),
     validationId = _useScopedId4[0];
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  var errorMessages = fg('gravityai-2553-fix-jql-debugger-flicker') ? useErrorMessages() : null;
-  var errorMessage = !fg('gravityai-2553-fix-jql-debugger-flicker') ?
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  useFormattedErrorMessage() : null;
+  var errorMessages = useErrorMessages();
   var _useCustomErrorCompon = useCustomErrorComponent(),
     _useCustomErrorCompon2 = _slicedToArray(_useCustomErrorCompon, 1),
     CustomErrorComponent = _useCustomErrorCompon2[0];
-  if (fg('gravityai-2553-fix-jql-debugger-flicker')) {
-    var _childrenToRender = errorMessages != null ? /*#__PURE__*/React.createElement(MessageContainer, null, /*#__PURE__*/React.createElement(ErrorMessage, {
-      testId: JQL_EDITOR_VALIDATION_ID
-    }, fg('jql_editor_a11y') ? /*#__PURE__*/React.createElement("span", {
-      role: "alert",
-      id: validationId
-    }, /*#__PURE__*/React.createElement(FormatMessages, {
-      messages: errorMessages
-    })) : /*#__PURE__*/React.createElement("span", {
-      role: "alert",
-      "aria-describedby": editorId
-    }, /*#__PURE__*/React.createElement(FormatMessages, {
-      messages: errorMessages
-    })))) : null;
-
-    // Only render CustomErrorComponent if there is an errorMessage
-    if (errorMessages != null && CustomErrorComponent) {
-      return /*#__PURE__*/React.createElement(CustomComponentDecoratedWithEditorTheme, {
-        testId: JQL_EDITOR_VALIDATION_ID,
-        editorId: editorId,
-        validationId: validationId,
-        Component: CustomErrorComponent,
-        errorMessages: extractMessageNodes(errorMessages)
-      }, _childrenToRender);
-    }
-    return _childrenToRender;
-  }
-  var childrenToRender = errorMessage != null ? /*#__PURE__*/React.createElement(MessageContainer, null, /*#__PURE__*/React.createElement(ErrorMessage, {
+  var childrenToRender = errorMessages != null ? /*#__PURE__*/React.createElement(MessageContainer, null, /*#__PURE__*/React.createElement(ErrorMessage, {
     testId: JQL_EDITOR_VALIDATION_ID
   }, fg('jql_editor_a11y') ? /*#__PURE__*/React.createElement("span", {
     role: "alert",
     id: validationId
-  }, errorMessage) : /*#__PURE__*/React.createElement("span", {
+  }, /*#__PURE__*/React.createElement(FormatMessages, {
+    messages: errorMessages
+  })) : /*#__PURE__*/React.createElement("span", {
     role: "alert",
     "aria-describedby": editorId
-  }, errorMessage))) : null;
+  }, /*#__PURE__*/React.createElement(FormatMessages, {
+    messages: errorMessages
+  })))) : null;
 
   // Only render CustomErrorComponent if there is an errorMessage
-  if (errorMessage != null && CustomErrorComponent) {
+  if (errorMessages != null && CustomErrorComponent) {
     return /*#__PURE__*/React.createElement(CustomComponentDecoratedWithEditorTheme, {
       testId: JQL_EDITOR_VALIDATION_ID,
       editorId: editorId,
-      Component: CustomErrorComponent
+      validationId: validationId,
+      Component: CustomErrorComponent,
+      errorMessages: extractMessageNodes(errorMessages)
     }, childrenToRender);
   }
   return childrenToRender;

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { useEditorThemeContext } from '../../../../hooks/use-editor-theme';
 import { MessageContainer as MessageContainerStyled, MessageList } from './styled';
 
@@ -15,30 +14,17 @@ export var MessageContainer = function MessageContainer(_ref) {
 };
 export var FormatMessages = function FormatMessages(_ref2) {
   var messages = _ref2.messages;
-  if (fg('gravityai-2553-fix-jql-debugger-flicker')) {
-    var messageNodes = extractMessageNodes(messages);
-    if (messageNodes.length === 0) {
-      return null;
-    }
-    if (messageNodes.length === 1) {
-      return /*#__PURE__*/React.createElement("span", null, messageNodes[0]);
-    }
-    return /*#__PURE__*/React.createElement(MessageList, null, messageNodes.map(function (m, i) {
-      return /*#__PURE__*/React.createElement("li", {
-        key: i
-      }, m);
-    }));
-  }
-  if (messages.length === 0) {
+  var messageNodes = extractMessageNodes(messages);
+  if (messageNodes.length === 0) {
     return null;
   }
-  if (messages.length === 1) {
-    return /*#__PURE__*/React.createElement("span", null, messages[0].message);
+  if (messageNodes.length === 1) {
+    return /*#__PURE__*/React.createElement("span", null, messageNodes[0]);
   }
-  return /*#__PURE__*/React.createElement(MessageList, null, messages.slice(0, MAX_MESSAGES).map(function (m, i) {
+  return /*#__PURE__*/React.createElement(MessageList, null, messageNodes.map(function (m, i) {
     return /*#__PURE__*/React.createElement("li", {
       key: i
-    }, m.message);
+    }, m);
   }));
 };
 

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

@@ -4,7 +4,7 @@ import { di } from 'react-magnetic-di';
 import { HelperMessage } from '@atlaskit/form';
 import LegacyInfoIcon from '@atlaskit/icon/glyph/info';
 import InfoIcon from '@atlaskit/icon/utility/information';
-import { Box } from '@atlaskit/primitives';
+import { Box } from '@atlaskit/primitives/compiled';
 import * as colors from '@atlaskit/theme/colors';
 import { useEditorViewHasInfos } from '../../../../hooks/use-editor-view-has-infos';
 import { useExternalMessages } from '../../../../state';

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

@@ -5,7 +5,7 @@ import { di } from 'react-magnetic-di';
 import { HelperMessage } from '@atlaskit/form';
 import LegacyWarningIcon from '@atlaskit/icon/glyph/warning';
 import WarningIcon from '@atlaskit/icon/utility/warning';
-import { Box } from '@atlaskit/primitives';
+import { Box } from '@atlaskit/primitives/compiled';
 import * as colors from '@atlaskit/theme/colors';
 import { useEditorViewHasWarnings } from '../../../../hooks/use-editor-view-has-warnings';
 import { useExternalMessages, useHydratedDeprecations, useIntl } from '../../../../state';

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

@@ -2,7 +2,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["isSearch", "isCompact"];
 import React from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { Box } from '@atlaskit/primitives';
+import { Box } from '@atlaskit/primitives/compiled';
 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

package/dist/types/state/types.d.ts

@@ -69,8 +69,8 @@ export type CustomErrorComponent = React.ComponentType<PropsWithChildren<{
     testId: string;
     editorTheme: EditorTheme;
     editorId: string;
-    errorMessages?: React.ReactElement[];
-    validationId?: string;
+    errorMessages: React.ReactElement[];
+    validationId: string;
 }>>;
 export type CustomErrorMessageProps = Omit<React.ComponentProps<CustomErrorComponent>, 'editorTheme'> & {
     Component: CustomErrorComponent;

package/dist/types-ts4.5/state/types.d.ts

@@ -69,8 +69,8 @@ export type CustomErrorComponent = React.ComponentType<PropsWithChildren<{
     testId: string;
     editorTheme: EditorTheme;
     editorId: string;
-    errorMessages?: React.ReactElement[];
-    validationId?: string;
+    errorMessages: React.ReactElement[];
+    validationId: string;
 }>>;
 export type CustomErrorMessageProps = Omit<React.ComponentProps<CustomErrorComponent>, 'editorTheme'> & {
     Component: CustomErrorComponent;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/jql-editor",
-	"version": "5.1.2",
+	"version": "5.2.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",
@@ -43,17 +43,17 @@
 		"@atlaskit/button": "^23.0.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/form": "^12.0.0",
-		"@atlaskit/icon": "^25.4.0",
+		"@atlaskit/icon": "^25.6.0",
 		"@atlaskit/jql-ast": "^3.3.0",
 		"@atlaskit/jql-autocomplete": "^2.0.0",
 		"@atlaskit/jql-editor-common": "^3.0.0",
 		"@atlaskit/jql-parser": "^2.0.0",
 		"@atlaskit/legacy-custom-icons": "^0.22.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/primitives": "^14.2.0",
+		"@atlaskit/primitives": "^14.4.0",
 		"@atlaskit/spinner": "^18.0.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tokens": "^4.5.0",
+		"@atlaskit/tokens": "^4.8.0",
 		"@atlaskit/tooltip": "^20.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
@@ -136,9 +136,6 @@
 		},
 		"jql_editor_a11y": {
 			"type": "boolean"
-		},
-		"gravityai-2553-fix-jql-debugger-flicker": {
-			"type": "boolean"
 		}
 	}
 }