@atlaskit/jql-editor 5.0.8 → 5.1.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/jql-editor
 
+## 5.1.0
+
+### Minor Changes
+
+- [#129443](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/129443)
+  [`cea97763ee228`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/cea97763ee228) -
+  Pass down validation error messages and extra IDs for a11y [GRAVITYAI-2553]
+
 ## 5.0.8
 
 ### 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.0.8", _jqlEditorCommon.ANALYTICS_CHANNEL);
+  return (0, _jqlEditorCommon.useJqlPackageAnalytics)(analyticsSource, "@atlaskit/jql-editor", "5.1.0", _jqlEditorCommon.ANALYTICS_CHANNEL);
 };

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

@@ -61,6 +61,65 @@ var useFormattedErrorMessage = function useFormattedErrorMessage() {
   }
   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
+   */
+  var toExternalMessageShape = function toExternalMessageShape(message) {
+    return [{
+      type: 'error',
+      message: message
+    }];
+  };
+
+  // Prioritise client errors over external errors
+  if (jqlError instanceof _jqlAst.JQLSyntaxError) {
+    return toExternalMessageShape("".concat(jqlError.message, " ").concat(formatMessage(_messages2.messages.jqlErrorPosition, {
+      lineNumber: jqlError.line,
+      charPosition: jqlError.charPositionInLine + 1
+    })));
+  }
+  if (externalErrors.length > 0) {
+    return externalErrors;
+  }
+  if (jqlError !== null) {
+    return toExternalMessageShape(formatMessage(_messages.commonMessages.unknownError));
+  }
+  return null;
+};
+
 /**
  * This is a decorator component to include the editorTheme prop to the already passed list of props
  */
@@ -86,10 +145,41 @@ 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];
-  var errorMessage = useFormattedErrorMessage();
+  // 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 _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, {
     testId: _constants.JQL_EDITOR_VALIDATION_ID
   }, (0, _platformFeatureFlags.fg)('jql_editor_a11y') ? /*#__PURE__*/_react.default.createElement("span", {

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

@@ -4,8 +4,9 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.MessageContainer = exports.FormatMessages = void 0;
+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
@@ -20,6 +21,20 @@ 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) {
     return null;
   }
@@ -31,4 +46,16 @@ var FormatMessages = exports.FormatMessages = function FormatMessages(_ref2) {
       key: i
     }, m.message);
   }));
+};
+
+/**
+ * This function was extracted from FormatMessages, so that the rendering is decoupled from the logic
+ * This is so that the extractMessageNodes can used elsewhere where rendering is delegated to a different renderer
+ *
+ * Simply put, this function only handles getting m.message, and limiting to MAX_MESSAGES
+ */
+var extractMessageNodes = exports.extractMessageNodes = function extractMessageNodes(messages) {
+  return messages.slice(0, MAX_MESSAGES).map(function (m) {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, m.message);
+  });
 };

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

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

@@ -9,7 +9,7 @@ import { commonMessages } from '../../../../common/messages';
 import { useEditorThemeContext } from '../../../../hooks/use-editor-theme';
 import { useEditorViewIsInvalid } from '../../../../hooks/use-editor-view-is-invalid';
 import { useCustomErrorComponent, useExternalMessages, useIntl, useJqlError, useScopedId, useStoreActions } from '../../../../state';
-import { FormatMessages, MessageContainer } from '../format';
+import { extractMessageNodes, FormatMessages, MessageContainer } from '../format';
 import { messages } from './messages';
 const useFormattedErrorMessage = () => {
   const [{
@@ -46,6 +46,61 @@ const useFormattedErrorMessage = () => {
   }
   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 [{
+    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;
+  }
+
+  /**
+   * 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
+   */
+  const toExternalMessageShape = message => [{
+    type: 'error',
+    message
+  }];
+
+  // Prioritise client errors over external errors
+  if (jqlError instanceof JQLSyntaxError) {
+    return toExternalMessageShape(`${jqlError.message} ${formatMessage(messages.jqlErrorPosition, {
+      lineNumber: jqlError.line,
+      charPosition: jqlError.charPositionInLine + 1
+    })}`);
+  }
+  if (externalErrors.length > 0) {
+    return externalErrors;
+  }
+  if (jqlError !== null) {
+    return toExternalMessageShape(formatMessage(commonMessages.unknownError));
+  }
+  return null;
+};
+
 /**
  * This is a decorator component to include the editorTheme prop to the already passed list of props
  */
@@ -69,8 +124,39 @@ const CustomComponentDecoratedWithEditorTheme = props => {
 export const ErrorMessages = () => {
   const [editorId] = useScopedId(JQL_EDITOR_INPUT_ID);
   const [validationId] = useScopedId(JQL_EDITOR_VALIDATION_ID);
-  const errorMessage = useFormattedErrorMessage();
+  // 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 [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, {
     testId: JQL_EDITOR_VALIDATION_ID
   }, fg('jql_editor_a11y') ? /*#__PURE__*/React.createElement("span", {

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

@@ -1,4 +1,5 @@
 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';
 
@@ -17,6 +18,18 @@ 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) {
     return null;
   }
@@ -26,4 +39,14 @@ export const FormatMessages = ({
   return /*#__PURE__*/React.createElement(MessageList, null, messages.slice(0, MAX_MESSAGES).map((m, i) => /*#__PURE__*/React.createElement("li", {
     key: i
   }, m.message)));
+};
+
+/**
+ * This function was extracted from FormatMessages, so that the rendering is decoupled from the logic
+ * This is so that the extractMessageNodes can used elsewhere where rendering is delegated to a different renderer
+ *
+ * Simply put, this function only handles getting m.message, and limiting to MAX_MESSAGES
+ */
+export const extractMessageNodes = messages => {
+  return messages.slice(0, MAX_MESSAGES).map(m => /*#__PURE__*/React.createElement(React.Fragment, null, m.message));
 };

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

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

@@ -12,7 +12,7 @@ import { commonMessages } from '../../../../common/messages';
 import { useEditorThemeContext } from '../../../../hooks/use-editor-theme';
 import { useEditorViewIsInvalid } from '../../../../hooks/use-editor-view-is-invalid';
 import { useCustomErrorComponent, useExternalMessages, useIntl, useJqlError, useScopedId, useStoreActions } from '../../../../state';
-import { FormatMessages, MessageContainer } from '../format';
+import { extractMessageNodes, FormatMessages, MessageContainer } from '../format';
 import { messages } from './messages';
 var useFormattedErrorMessage = function useFormattedErrorMessage() {
   var _useIntl = useIntl(),
@@ -51,6 +51,65 @@ var useFormattedErrorMessage = function useFormattedErrorMessage() {
   }
   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
+   */
+  var toExternalMessageShape = function toExternalMessageShape(message) {
+    return [{
+      type: 'error',
+      message: message
+    }];
+  };
+
+  // Prioritise client errors over external errors
+  if (jqlError instanceof JQLSyntaxError) {
+    return toExternalMessageShape("".concat(jqlError.message, " ").concat(formatMessage(messages.jqlErrorPosition, {
+      lineNumber: jqlError.line,
+      charPosition: jqlError.charPositionInLine + 1
+    })));
+  }
+  if (externalErrors.length > 0) {
+    return externalErrors;
+  }
+  if (jqlError !== null) {
+    return toExternalMessageShape(formatMessage(commonMessages.unknownError));
+  }
+  return null;
+};
+
 /**
  * This is a decorator component to include the editorTheme prop to the already passed list of props
  */
@@ -76,10 +135,41 @@ export var ErrorMessages = function ErrorMessages() {
   var _useScopedId3 = useScopedId(JQL_EDITOR_VALIDATION_ID),
     _useScopedId4 = _slicedToArray(_useScopedId3, 1),
     validationId = _useScopedId4[0];
-  var errorMessage = useFormattedErrorMessage();
+  // 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 _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, {
     testId: JQL_EDITOR_VALIDATION_ID
   }, fg('jql_editor_a11y') ? /*#__PURE__*/React.createElement("span", {

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

@@ -1,4 +1,5 @@
 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';
 
@@ -14,6 +15,20 @@ 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) {
     return null;
   }
@@ -25,4 +40,16 @@ export var FormatMessages = function FormatMessages(_ref2) {
       key: i
     }, m.message);
   }));
+};
+
+/**
+ * This function was extracted from FormatMessages, so that the rendering is decoupled from the logic
+ * This is so that the extractMessageNodes can used elsewhere where rendering is delegated to a different renderer
+ *
+ * Simply put, this function only handles getting m.message, and limiting to MAX_MESSAGES
+ */
+export var extractMessageNodes = function extractMessageNodes(messages) {
+  return messages.slice(0, MAX_MESSAGES).map(function (m) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, m.message);
+  });
 };

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

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

package/dist/types/ui/jql-editor-footer-content/jql-messages/format/index.d.ts

@@ -6,3 +6,10 @@ export declare const MessageContainer: ({ children }: {
 export declare const FormatMessages: ({ messages }: {
     messages: ExternalMessage[];
 }) => React.JSX.Element | null;
+/**
+ * This function was extracted from FormatMessages, so that the rendering is decoupled from the logic
+ * This is so that the extractMessageNodes can used elsewhere where rendering is delegated to a different renderer
+ *
+ * Simply put, this function only handles getting m.message, and limiting to MAX_MESSAGES
+ */
+export declare const extractMessageNodes: (messages: ExternalMessage[]) => React.ReactElement[];

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

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

package/dist/types-ts4.5/ui/jql-editor-footer-content/jql-messages/format/index.d.ts

@@ -6,3 +6,10 @@ export declare const MessageContainer: ({ children }: {
 export declare const FormatMessages: ({ messages }: {
     messages: ExternalMessage[];
 }) => React.JSX.Element | null;
+/**
+ * This function was extracted from FormatMessages, so that the rendering is decoupled from the logic
+ * This is so that the extractMessageNodes can used elsewhere where rendering is delegated to a different renderer
+ *
+ * Simply put, this function only handles getting m.message, and limiting to MAX_MESSAGES
+ */
+export declare const extractMessageNodes: (messages: ExternalMessage[]) => React.ReactElement[];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/jql-editor",
-	"version": "5.0.8",
+	"version": "5.1.0",
 	"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",
@@ -136,6 +136,9 @@
 		},
 		"jql_editor_a11y": {
 			"type": "boolean"
+		},
+		"gravityai-2553-fix-jql-debugger-flicker": {
+			"type": "boolean"
 		}
 	}
 }