@atlaskit/jql-editor 4.10.7 → 4.11.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/jql-editor
 
+## 4.11.0
+
+### Minor Changes
+
+- [#169739](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/169739)
+  [`0eafd620f45b3`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0eafd620f45b3) -
+  Implement mechanism to override JQL Editor components [GRAVITYAI-1949]
+
 ## 4.10.7
 
 ### 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.10.7", _jqlEditorCommon.ANALYTICS_CHANNEL);
+  return (0, _jqlEditorCommon.useJqlPackageAnalytics)(analyticsSource, "@atlaskit/jql-editor", "4.11.0", _jqlEditorCommon.ANALYTICS_CHANNEL);
 };

package/dist/cjs/state/index.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useStoreActions = exports.useScopedId = exports.useRichInlineNodesEnabled = exports.useOnSyntaxHelp = exports.useLineNumbersVisible = exports.useJqlError = exports.useIsSearching = exports.useIntl = exports.useIdPrefix = exports.useHydratedValue = exports.useHydratedUser = exports.useHydratedDeprecations = exports.useExternalMessages = exports.useEditorViewHasFocus = exports.useEditorView = exports.useEditorStateHasJqlError = exports.useEditorState = exports.useAutocompleteProvider = exports.useAutocompletePosition = exports.useAutocompleteOptions = exports.useAutocompleteLoading = exports.useAutocompleteIsOpen = exports.useAutocomplete = exports.initialState = exports.actions = exports.EditorStateContainer = void 0;
+exports.useStoreActions = exports.useScopedId = exports.useRichInlineNodesEnabled = exports.useOnSyntaxHelp = exports.useLineNumbersVisible = exports.useJqlError = exports.useIsSearching = exports.useIntl = exports.useIdPrefix = exports.useHydratedValue = exports.useHydratedUser = exports.useHydratedDeprecations = exports.useExternalMessages = exports.useEditorViewHasFocus = exports.useEditorView = exports.useEditorStateHasJqlError = exports.useEditorState = exports.useCustomErrorComponent = exports.useAutocompleteProvider = exports.useAutocompletePosition = exports.useAutocompleteOptions = exports.useAutocompleteLoading = exports.useAutocompleteIsOpen = exports.useAutocomplete = exports.initialState = exports.actions = exports.EditorStateContainer = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
@@ -18,6 +18,7 @@ var _uuid = require("uuid");
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _jqlAst = require("@atlaskit/jql-ast");
 var _jqlAutocomplete = require("@atlaskit/jql-autocomplete");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _analytics = require("../analytics");
 var _selectErrorCommand = require("../commands/select-error-command");
 var _constants = require("../common/constants");
@@ -783,6 +784,12 @@ var useExternalMessages = exports.useExternalMessages = (0, _reactSweetState.cre
     };
   }
 });
+var useCustomErrorComponent = exports.useCustomErrorComponent = (0, _reactSweetState.createHook)(Store, {
+  selector: function selector(state) {
+    var _state$customComponen;
+    return (_state$customComponen = state.customComponents) === null || _state$customComponen === void 0 ? void 0 : _state$customComponen.ErrorMessage;
+  }
+});
 var memoizedAutocompleteOptionsSelector = (0, _reactSweetState.createSelector)(function (state) {
   return state.autocomplete.options.tokens;
 }, function (state) {
@@ -928,7 +935,8 @@ var EditorStateContainer = exports.EditorStateContainer = (0, _reactSweetState.c
         externalMessages = _ref45.externalMessages,
         enableRichInlineNodes = _ref45.enableRichInlineNodes,
         onDebugUnsafeMessage = _ref45.onDebugUnsafeMessage,
-        onSyntaxHelp = _ref45.onSyntaxHelp;
+        onSyntaxHelp = _ref45.onSyntaxHelp,
+        customComponents = _ref45.customComponents;
       setState({
         controlledQuery: query,
         query: query,
@@ -949,7 +957,8 @@ var EditorStateContainer = exports.EditorStateContainer = (0, _reactSweetState.c
           });
         }) : undefined,
         onDebugUnsafeMessage: onDebugUnsafeMessage,
-        onSyntaxHelp: onSyntaxHelp
+        onSyntaxHelp: onSyntaxHelp,
+        customComponents: (0, _platformFeatureFlags.fg)('custom_components_for_jql_editor') ? customComponents : undefined
       });
       dispatch(actions.initialiseEditorState());
     };
@@ -965,7 +974,8 @@ var EditorStateContainer = exports.EditorStateContainer = (0, _reactSweetState.c
         externalMessages = _ref47.externalMessages,
         enableRichInlineNodes = _ref47.enableRichInlineNodes,
         onDebugUnsafeMessage = _ref47.onDebugUnsafeMessage,
-        onSyntaxHelp = _ref47.onSyntaxHelp;
+        onSyntaxHelp = _ref47.onSyntaxHelp,
+        customComponents = _ref47.customComponents;
       var _getState14 = getState(),
         controlledQuery = _getState14.controlledQuery,
         query = _getState14.query;
@@ -988,7 +998,8 @@ var EditorStateContainer = exports.EditorStateContainer = (0, _reactSweetState.c
         autocompleteProvider: autocompleteProvider,
         enableRichInlineNodes: enableRichInlineNodes,
         onDebugUnsafeMessage: onDebugUnsafeMessage,
-        onSyntaxHelp: onSyntaxHelp
+        onSyntaxHelp: onSyntaxHelp,
+        customComponents: (0, _platformFeatureFlags.fg)('custom_components_for_jql_editor') ? customComponents : undefined
       });
     };
   }

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

@@ -9,6 +9,7 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _reactMagneticDi = require("react-magnetic-di");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _analytics = require("../../analytics");
 var _useEditorTheme = require("../../hooks/use-editor-theme");
 var _state = require("../../state");
@@ -38,7 +39,8 @@ var JQLEditorInner = function JQLEditorInner(_ref) {
     enableRichInlineNodes = _ref$enableRichInline === void 0 ? false : _ref$enableRichInline,
     isCompact = _ref.isCompact,
     onSyntaxHelp = _ref.onSyntaxHelp,
-    onFocus = _ref.onFocus;
+    onFocus = _ref.onFocus,
+    customComponents = _ref.customComponents;
   var editorTheme = (0, _useEditorTheme.useEditorTheme)({
     isSearch: !!onSearch,
     isCompact: isCompact
@@ -65,7 +67,8 @@ var JQLEditorInner = function JQLEditorInner(_ref) {
     autocompleteProvider: autocompleteProvider,
     enableRichInlineNodes: enableRichInlineNodes,
     onSyntaxHelp: onSyntaxHelp,
-    onFocus: onFocus
+    onFocus: onFocus,
+    customComponents: (0, _platformFeatureFlags.fg)('custom_components_for_jql_editor') ? customComponents : undefined
   }, /*#__PURE__*/_react.default.createElement(_useEditorTheme.EditorThemeContext.Provider, {
     value: editorTheme
   }, /*#__PURE__*/_react.default.createElement(_jqlEditorPortalProvider.JQLEditorPortalRenderer, null, /*#__PURE__*/_react.default.createElement(_jqlEditorView.default, {

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

@@ -6,17 +6,22 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ErrorMessages = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactMagneticDi = require("react-magnetic-di");
 var _form = require("@atlaskit/form");
 var _jqlAst = require("@atlaskit/jql-ast");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _constants = require("../../../../common/constants");
 var _messages = require("../../../../common/messages");
+var _useEditorTheme = require("../../../../hooks/use-editor-theme");
 var _useEditorViewIsInvalid = require("../../../../hooks/use-editor-view-is-invalid");
 var _state = require("../../../../state");
 var _format = require("../format");
 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() {
@@ -56,13 +61,54 @@ var useFormattedErrorMessage = function useFormattedErrorMessage() {
   }
   return null;
 };
+/**
+ * This is a decorator component to include the editorTheme prop to the already passed list of props
+ */
+var CustomComponentDecoratedWithEditorTheme = function CustomComponentDecoratedWithEditorTheme(props) {
+  var Component = props.Component,
+    rest = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var editorThemeContext = (0, _useEditorTheme.useEditorThemeContext)();
+
+  // This is a slightly redundant condition.
+  // Technically, CustomErrorMessage component should never be called with an undefined Component
+  // This is enforced by the static types. Adding this condition as an extra layer of protection
+  if (!Component) {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "props.children");
+  }
+  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+    editorTheme: editorThemeContext
+  }, rest));
+};
 var ErrorMessages = exports.ErrorMessages = function ErrorMessages() {
   var _useScopedId = (0, _state.useScopedId)(_constants.JQL_EDITOR_INPUT_ID),
     _useScopedId2 = (0, _slicedToArray2.default)(_useScopedId, 1),
     editorId = _useScopedId2[0];
   var errorMessage = useFormattedErrorMessage();
+  var testId = 'jql-editor-validation';
+  if ((0, _platformFeatureFlags.fg)('custom_components_for_jql_editor')) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    var _useCustomErrorCompon = (0, _state.useCustomErrorComponent)(),
+      _useCustomErrorCompon2 = (0, _slicedToArray2.default)(_useCustomErrorCompon, 1),
+      CustomErrorComponent = _useCustomErrorCompon2[0];
+    var childrenToRender = errorMessage != null ? /*#__PURE__*/_react.default.createElement(_format.MessageContainer, null, /*#__PURE__*/_react.default.createElement(_form.ErrorMessage, {
+      testId: testId
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      role: "alert",
+      "aria-describedby": editorId
+    }, errorMessage))) : null;
+
+    // Only render CustomErrorComponent if there is an errorMessage
+    if (errorMessage != null && CustomErrorComponent) {
+      return /*#__PURE__*/_react.default.createElement(CustomComponentDecoratedWithEditorTheme, {
+        testId: testId,
+        editorId: editorId,
+        Component: CustomErrorComponent
+      }, childrenToRender);
+    }
+    return childrenToRender;
+  }
   return errorMessage != null ? /*#__PURE__*/_react.default.createElement(_format.MessageContainer, null, /*#__PURE__*/_react.default.createElement(_form.ErrorMessage, {
-    testId: "jql-editor-validation"
+    testId: testId
   }, /*#__PURE__*/_react.default.createElement("span", {
     role: "alert",
     "aria-describedby": editorId

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

package/dist/es2019/state/index.js

@@ -8,6 +8,7 @@ import { v4 as uuidv4 } from 'uuid';
 import { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { computeJqlInsights, isListOperator } from '@atlaskit/jql-ast';
 import { JQLAutocomplete } from '@atlaskit/jql-autocomplete';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { ActionSubject, ActionSubjectId, Action as AnalyticsAction, EventType } from '../analytics';
 import { selectErrorCommand } from '../commands/select-error-command';
 import { JQL_EDITOR_MAIN_ID } from '../common/constants';
@@ -772,6 +773,12 @@ export const useExternalMessages = createHook(Store, {
     };
   }
 });
+export const useCustomErrorComponent = createHook(Store, {
+  selector: state => {
+    var _state$customComponen;
+    return (_state$customComponen = state.customComponents) === null || _state$customComponen === void 0 ? void 0 : _state$customComponen.ErrorMessage;
+  }
+});
 const memoizedAutocompleteOptionsSelector = createSelector(state => state.autocomplete.options.tokens, state => state.autocomplete.options.functions, state => state.autocomplete.options.values, state => state.autocomplete.options.operators, state => state.autocomplete.options.fields, (tokens, functions, values, operators, fields) => [...tokens, ...functions, ...values, ...operators, ...fields]);
 export const useAutocompleteOptions = createHook(Store, {
   selector: memoizedAutocompleteOptionsSelector
@@ -897,7 +904,8 @@ export const EditorStateContainer = createContainer(Store, {
     externalMessages,
     enableRichInlineNodes,
     onDebugUnsafeMessage,
-    onSyntaxHelp
+    onSyntaxHelp,
+    customComponents
   }) => {
     setState({
       controlledQuery: query,
@@ -919,7 +927,8 @@ export const EditorStateContainer = createContainer(Store, {
         });
       }) : undefined,
       onDebugUnsafeMessage,
-      onSyntaxHelp
+      onSyntaxHelp,
+      customComponents: fg('custom_components_for_jql_editor') ? customComponents : undefined
     });
     dispatch(actions.initialiseEditorState());
   },
@@ -934,7 +943,8 @@ export const EditorStateContainer = createContainer(Store, {
     externalMessages,
     enableRichInlineNodes,
     onDebugUnsafeMessage,
-    onSyntaxHelp
+    onSyntaxHelp,
+    customComponents
   }) => {
     const {
       controlledQuery,
@@ -959,7 +969,8 @@ export const EditorStateContainer = createContainer(Store, {
       autocompleteProvider,
       enableRichInlineNodes,
       onDebugUnsafeMessage,
-      onSyntaxHelp
+      onSyntaxHelp,
+      customComponents: fg('custom_components_for_jql_editor') ? customComponents : undefined
     });
   }
 });

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

@@ -1,6 +1,7 @@
 import React, { useEffect, useRef } from 'react';
 import { injectIntl } from 'react-intl-next';
 import { di } from 'react-magnetic-di';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useJqlEditorAnalytics } from '../../analytics';
 import { EditorThemeContext, useEditorTheme } from '../../hooks/use-editor-theme';
 import { EditorStateContainer } from '../../state';
@@ -24,7 +25,8 @@ const JQLEditorInner = ({
   enableRichInlineNodes = false,
   isCompact,
   onSyntaxHelp,
-  onFocus
+  onFocus,
+  customComponents
 }) => {
   const editorTheme = useEditorTheme({
     isSearch: !!onSearch,
@@ -53,7 +55,8 @@ const JQLEditorInner = ({
     autocompleteProvider: autocompleteProvider,
     enableRichInlineNodes: enableRichInlineNodes,
     onSyntaxHelp: onSyntaxHelp,
-    onFocus: onFocus
+    onFocus: onFocus,
+    customComponents: fg('custom_components_for_jql_editor') ? customComponents : undefined
   }, /*#__PURE__*/React.createElement(EditorThemeContext.Provider, {
     value: editorTheme
   }, /*#__PURE__*/React.createElement(JQLEditorPortalRenderer, null, /*#__PURE__*/React.createElement(JQLEditorView, {

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

@@ -1,11 +1,14 @@
+import _extends from "@babel/runtime/helpers/extends";
 import React, { useEffect } from 'react';
 import { di } from 'react-magnetic-di';
 import { ErrorMessage } from '@atlaskit/form';
 import { JQLSyntaxError } from '@atlaskit/jql-ast';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { JQL_EDITOR_INPUT_ID } from '../../../../common/constants';
 import { commonMessages } from '../../../../common/messages';
+import { useEditorThemeContext } from '../../../../hooks/use-editor-theme';
 import { useEditorViewIsInvalid } from '../../../../hooks/use-editor-view-is-invalid';
-import { useExternalMessages, useIntl, useJqlError, useScopedId, useStoreActions } from '../../../../state';
+import { useCustomErrorComponent, useExternalMessages, useIntl, useJqlError, useScopedId, useStoreActions } from '../../../../state';
 import { FormatMessages, MessageContainer } from '../format';
 import { messages } from './messages';
 const useFormattedErrorMessage = () => {
@@ -43,11 +46,52 @@ const useFormattedErrorMessage = () => {
   }
   return null;
 };
+/**
+ * This is a decorator component to include the editorTheme prop to the already passed list of props
+ */
+const CustomComponentDecoratedWithEditorTheme = props => {
+  const {
+    Component,
+    ...rest
+  } = props;
+  const editorThemeContext = useEditorThemeContext();
+
+  // This is a slightly redundant condition.
+  // Technically, CustomErrorMessage component should never be called with an undefined Component
+  // This is enforced by the static types. Adding this condition as an extra layer of protection
+  if (!Component) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, "props.children");
+  }
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    editorTheme: editorThemeContext
+  }, rest));
+};
 export const ErrorMessages = () => {
   const [editorId] = useScopedId(JQL_EDITOR_INPUT_ID);
   const errorMessage = useFormattedErrorMessage();
+  const testId = 'jql-editor-validation';
+  if (fg('custom_components_for_jql_editor')) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [CustomErrorComponent] = useCustomErrorComponent();
+    const childrenToRender = errorMessage != null ? /*#__PURE__*/React.createElement(MessageContainer, null, /*#__PURE__*/React.createElement(ErrorMessage, {
+      testId: testId
+    }, /*#__PURE__*/React.createElement("span", {
+      role: "alert",
+      "aria-describedby": editorId
+    }, errorMessage))) : null;
+
+    // Only render CustomErrorComponent if there is an errorMessage
+    if (errorMessage != null && CustomErrorComponent) {
+      return /*#__PURE__*/React.createElement(CustomComponentDecoratedWithEditorTheme, {
+        testId: testId,
+        editorId: editorId,
+        Component: CustomErrorComponent
+      }, childrenToRender);
+    }
+    return childrenToRender;
+  }
   return errorMessage != null ? /*#__PURE__*/React.createElement(MessageContainer, null, /*#__PURE__*/React.createElement(ErrorMessage, {
-    testId: "jql-editor-validation"
+    testId: testId
   }, /*#__PURE__*/React.createElement("span", {
     role: "alert",
     "aria-describedby": editorId

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

package/dist/esm/state/index.js

@@ -13,6 +13,7 @@ import { v4 as uuidv4 } from 'uuid';
 import { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { computeJqlInsights, isListOperator } from '@atlaskit/jql-ast';
 import { JQLAutocomplete } from '@atlaskit/jql-autocomplete';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { ActionSubject, ActionSubjectId, Action as AnalyticsAction, EventType } from '../analytics';
 import { selectErrorCommand } from '../commands/select-error-command';
 import { JQL_EDITOR_MAIN_ID } from '../common/constants';
@@ -776,6 +777,12 @@ export var useExternalMessages = createHook(Store, {
     };
   }
 });
+export var useCustomErrorComponent = createHook(Store, {
+  selector: function selector(state) {
+    var _state$customComponen;
+    return (_state$customComponen = state.customComponents) === null || _state$customComponen === void 0 ? void 0 : _state$customComponen.ErrorMessage;
+  }
+});
 var memoizedAutocompleteOptionsSelector = createSelector(function (state) {
   return state.autocomplete.options.tokens;
 }, function (state) {
@@ -921,7 +928,8 @@ export var EditorStateContainer = createContainer(Store, {
         externalMessages = _ref45.externalMessages,
         enableRichInlineNodes = _ref45.enableRichInlineNodes,
         onDebugUnsafeMessage = _ref45.onDebugUnsafeMessage,
-        onSyntaxHelp = _ref45.onSyntaxHelp;
+        onSyntaxHelp = _ref45.onSyntaxHelp,
+        customComponents = _ref45.customComponents;
       setState({
         controlledQuery: query,
         query: query,
@@ -942,7 +950,8 @@ export var EditorStateContainer = createContainer(Store, {
           });
         }) : undefined,
         onDebugUnsafeMessage: onDebugUnsafeMessage,
-        onSyntaxHelp: onSyntaxHelp
+        onSyntaxHelp: onSyntaxHelp,
+        customComponents: fg('custom_components_for_jql_editor') ? customComponents : undefined
       });
       dispatch(actions.initialiseEditorState());
     };
@@ -958,7 +967,8 @@ export var EditorStateContainer = createContainer(Store, {
         externalMessages = _ref47.externalMessages,
         enableRichInlineNodes = _ref47.enableRichInlineNodes,
         onDebugUnsafeMessage = _ref47.onDebugUnsafeMessage,
-        onSyntaxHelp = _ref47.onSyntaxHelp;
+        onSyntaxHelp = _ref47.onSyntaxHelp,
+        customComponents = _ref47.customComponents;
       var _getState14 = getState(),
         controlledQuery = _getState14.controlledQuery,
         query = _getState14.query;
@@ -981,7 +991,8 @@ export var EditorStateContainer = createContainer(Store, {
         autocompleteProvider: autocompleteProvider,
         enableRichInlineNodes: enableRichInlineNodes,
         onDebugUnsafeMessage: onDebugUnsafeMessage,
-        onSyntaxHelp: onSyntaxHelp
+        onSyntaxHelp: onSyntaxHelp,
+        customComponents: fg('custom_components_for_jql_editor') ? customComponents : undefined
       });
     };
   }

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

@@ -1,6 +1,7 @@
 import React, { useEffect, useRef } from 'react';
 import { injectIntl } from 'react-intl-next';
 import { di } from 'react-magnetic-di';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useJqlEditorAnalytics } from '../../analytics';
 import { EditorThemeContext, useEditorTheme } from '../../hooks/use-editor-theme';
 import { EditorStateContainer } from '../../state';
@@ -26,7 +27,8 @@ var JQLEditorInner = function JQLEditorInner(_ref) {
     enableRichInlineNodes = _ref$enableRichInline === void 0 ? false : _ref$enableRichInline,
     isCompact = _ref.isCompact,
     onSyntaxHelp = _ref.onSyntaxHelp,
-    onFocus = _ref.onFocus;
+    onFocus = _ref.onFocus,
+    customComponents = _ref.customComponents;
   var editorTheme = useEditorTheme({
     isSearch: !!onSearch,
     isCompact: isCompact
@@ -53,7 +55,8 @@ var JQLEditorInner = function JQLEditorInner(_ref) {
     autocompleteProvider: autocompleteProvider,
     enableRichInlineNodes: enableRichInlineNodes,
     onSyntaxHelp: onSyntaxHelp,
-    onFocus: onFocus
+    onFocus: onFocus,
+    customComponents: fg('custom_components_for_jql_editor') ? customComponents : undefined
   }, /*#__PURE__*/React.createElement(EditorThemeContext.Provider, {
     value: editorTheme
   }, /*#__PURE__*/React.createElement(JQLEditorPortalRenderer, null, /*#__PURE__*/React.createElement(JQLEditorView, {

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

@@ -1,12 +1,17 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+var _excluded = ["Component"];
 import React, { useEffect } from 'react';
 import { di } from 'react-magnetic-di';
 import { ErrorMessage } from '@atlaskit/form';
 import { JQLSyntaxError } from '@atlaskit/jql-ast';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { JQL_EDITOR_INPUT_ID } from '../../../../common/constants';
 import { commonMessages } from '../../../../common/messages';
+import { useEditorThemeContext } from '../../../../hooks/use-editor-theme';
 import { useEditorViewIsInvalid } from '../../../../hooks/use-editor-view-is-invalid';
-import { useExternalMessages, useIntl, useJqlError, useScopedId, useStoreActions } from '../../../../state';
+import { useCustomErrorComponent, useExternalMessages, useIntl, useJqlError, useScopedId, useStoreActions } from '../../../../state';
 import { FormatMessages, MessageContainer } from '../format';
 import { messages } from './messages';
 var useFormattedErrorMessage = function useFormattedErrorMessage() {
@@ -46,13 +51,54 @@ var useFormattedErrorMessage = function useFormattedErrorMessage() {
   }
   return null;
 };
+/**
+ * This is a decorator component to include the editorTheme prop to the already passed list of props
+ */
+var CustomComponentDecoratedWithEditorTheme = function CustomComponentDecoratedWithEditorTheme(props) {
+  var Component = props.Component,
+    rest = _objectWithoutProperties(props, _excluded);
+  var editorThemeContext = useEditorThemeContext();
+
+  // This is a slightly redundant condition.
+  // Technically, CustomErrorMessage component should never be called with an undefined Component
+  // This is enforced by the static types. Adding this condition as an extra layer of protection
+  if (!Component) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, "props.children");
+  }
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    editorTheme: editorThemeContext
+  }, rest));
+};
 export var ErrorMessages = function ErrorMessages() {
   var _useScopedId = useScopedId(JQL_EDITOR_INPUT_ID),
     _useScopedId2 = _slicedToArray(_useScopedId, 1),
     editorId = _useScopedId2[0];
   var errorMessage = useFormattedErrorMessage();
+  var testId = 'jql-editor-validation';
+  if (fg('custom_components_for_jql_editor')) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    var _useCustomErrorCompon = useCustomErrorComponent(),
+      _useCustomErrorCompon2 = _slicedToArray(_useCustomErrorCompon, 1),
+      CustomErrorComponent = _useCustomErrorCompon2[0];
+    var childrenToRender = errorMessage != null ? /*#__PURE__*/React.createElement(MessageContainer, null, /*#__PURE__*/React.createElement(ErrorMessage, {
+      testId: testId
+    }, /*#__PURE__*/React.createElement("span", {
+      role: "alert",
+      "aria-describedby": editorId
+    }, errorMessage))) : null;
+
+    // Only render CustomErrorComponent if there is an errorMessage
+    if (errorMessage != null && CustomErrorComponent) {
+      return /*#__PURE__*/React.createElement(CustomComponentDecoratedWithEditorTheme, {
+        testId: testId,
+        editorId: editorId,
+        Component: CustomErrorComponent
+      }, childrenToRender);
+    }
+    return childrenToRender;
+  }
   return errorMessage != null ? /*#__PURE__*/React.createElement(MessageContainer, null, /*#__PURE__*/React.createElement(ErrorMessage, {
-    testId: "jql-editor-validation"
+    testId: testId
   }, /*#__PURE__*/React.createElement("span", {
     role: "alert",
     "aria-describedby": editorId

package/dist/types/index.d.ts

@@ -2,4 +2,4 @@ export { default as JQLEditor } from './ui';
 export { JQLEditorAsync, preloadJQLEditor } from './async';
 export { JQLEditorReadOnly } from './ui/jql-editor-layout';
 export { JQLEditorAnalyticsListener, ANALYTICS_CHANNEL, useJqlPackageAnalytics, EventType, } from './analytics';
-export type { ListenerProps, JqlAnalyticsEvent, JQLEditorUIProps, JQLEditorProps, HydratedValue, HydratedValues, HydratedUser, AutocompleteOption, AutocompleteValueType, AutocompleteOptions, AutocompleteProvider, JQLClause, ExternalMessage, ExternalError, ExternalWarning, ExternalInfo, } from './types';
+export type { ListenerProps, JqlAnalyticsEvent, JQLEditorUIProps, JQLEditorProps, HydratedValue, HydratedValues, HydratedUser, AutocompleteOption, AutocompleteValueType, AutocompleteOptions, AutocompleteProvider, JQLClause, ExternalMessage, ExternalError, ExternalWarning, ExternalInfo, CustomComponents, } from './types';

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

@@ -11,7 +11,7 @@ import { type AutocompleteOptionGroup, type AutocompleteOptions, type Autocomple
 import { type AutocompleteProvider } from '../plugins/types';
 import { type PortalActions } from '../ui/jql-editor-portal-provider/types';
 import { type HydratedDeprecatedField, type HydratedUser, type HydratedValue } from '../ui/jql-editor/types';
-import { type AutocompletePosition, type AutocompleteState, type ContextAwareJQLSuggestions, type ExternalMessagesNormalized, type OptionsKey, type Props, type State } from './types';
+import { type AutocompletePosition, type AutocompleteState, type ContextAwareJQLSuggestions, type CustomErrorComponent, type ExternalMessagesNormalized, type OptionsKey, type Props, type State } from './types';
 export declare const initialState: State;
 export declare const actions: {
     onEditorViewBlur: () => Action<State>;
@@ -499,6 +499,38 @@ export declare const useExternalMessages: import("react-sweet-state").HookFuncti
     externalErrorMessageViewed: () => Action<State, Props>;
     createAndFireAnalyticsEvent: (payload: JqlEditorAnalyticsEvent) => Action<State, Props>;
 }>, void>;
+export declare const useCustomErrorComponent: import("react-sweet-state").HookFunction<CustomErrorComponent | undefined, import("react-sweet-state").BoundActions<State, {
+    onEditorViewBlur: () => Action<State>;
+    onEditorViewFocus: (event: FocusEvent<HTMLElement>) => Action<State, Props>;
+    openAutocompleteOnNextUpdate: () => Action<State>;
+    closeAutocomplete: () => Action<State>;
+    setSelectedAutocompleteOptionId: (selectedOptionId: string | undefined) => Action<State>;
+    getAutocompleteSuggestions: (editorState: EditorState) => Action<State>;
+    getAutocompleteOptions: (suggestions: ContextAwareJQLSuggestions) => Action<State>;
+    appendOptionsForObservable: (key: OptionsKey, observable: Observable<AutocompleteOptions>, rule: JQLRuleSuggestion, type: AutocompleteOptionType) => Action<State, void, Observable<AutocompleteOptions>>;
+    cancelSubscription: () => Action<State>;
+    setLoading: (loading: boolean) => Action<State>;
+    setAutocompleteOptions: (options: AutocompleteOptionGroup) => Action<State>;
+    setAutocompleteContainer: (container: HTMLElement | null) => Action<State>;
+    callAutocompleteProviders: ({ rules, tokens }: ContextAwareJQLSuggestions) => Action<State>;
+    updateValidationState: () => Action<State>;
+    initialiseEditorState: () => Action<State, Props>;
+    configurePlugins: (portalActions: PortalActions | void) => Action<State, Props>;
+    onApplyEditorTransaction: (transaction: Transaction) => Action<State, Props>;
+    resetEditorState: (query: string, addToHistory?: boolean) => Action<State>;
+    initialiseEditorView: (editorViewNode: HTMLElement, attributes: {
+        [key: string]: string;
+    }, portalActions: PortalActions) => Action<State, Props>;
+    updateEditorView: (attributes: {
+        [key: string]: string;
+    }) => Action<State, Props>;
+    setEditorViewContainer: (editorViewContainer: HTMLElement) => Action<State>;
+    setEditorViewContainerScroll: (scroll: number) => Action<State>;
+    onSearch: () => Action<State>;
+    onSearchCommand: (pmState: EditorState, pmDispatch: ((tr: Transaction) => void) | undefined, pmView: EditorView | undefined, keyboardShortcut: boolean) => Action<State, Props, boolean>;
+    externalErrorMessageViewed: () => Action<State, Props>;
+    createAndFireAnalyticsEvent: (payload: JqlEditorAnalyticsEvent) => Action<State, Props>;
+}>, void>;
 export declare const useAutocompleteOptions: import("react-sweet-state").HookFunction<SelectableAutocompleteOption[], import("react-sweet-state").BoundActions<State, {
     onEditorViewBlur: () => Action<State>;
     onEditorViewFocus: (event: FocusEvent<HTMLElement>) => Action<State, Props>;

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

@@ -1,4 +1,4 @@
-import { type FocusEvent, type MouseEvent, type MutableRefObject, type ReactNode } from 'react';
+import { type FocusEvent, type MouseEvent, type MutableRefObject, type PropsWithChildren, type ReactNode } from 'react';
 import { type IntlShape } from 'react-intl-next';
 import { type Subscription } from 'rxjs/Subscription';
 import { type EditorState } from '@atlaskit/editor-prosemirror/state';
@@ -6,6 +6,7 @@ import { type EditorView } from '@atlaskit/editor-prosemirror/view';
 import { type Jast, type JQLParseError } from '@atlaskit/jql-ast';
 import { type JQLRuleContext, type JQLRuleSuggestions, type TokenSuggestions } from '@atlaskit/jql-autocomplete';
 import { type JqlEditorAnalyticsEvent } from '../analytics';
+import { type EditorTheme } from '../hooks/use-editor-theme';
 import { type AutocompleteOptionGroup, type AutocompleteProvider } from '../plugins/autocomplete/types';
 import { type HydratedValue, type HydratedValues } from '../ui/jql-editor/types';
 export type ContextAwareTokenSuggestions = TokenSuggestions & {
@@ -64,6 +65,14 @@ export type ExternalInfo = {
      */
     message: ReactNode;
 };
+export type CustomErrorComponent = React.ComponentType<PropsWithChildren<{
+    testId: string;
+    editorTheme: EditorTheme;
+    editorId: string;
+}>>;
+export type CustomComponents = {
+    ErrorMessage?: CustomErrorComponent;
+};
 export type ExternalMessage = ExternalError | ExternalWarning | ExternalInfo;
 export type ExternalMessagesNormalized = {
     errors: ExternalError[];
@@ -220,6 +229,10 @@ export type State = {
      * handled which will prevent default behaviour of the help button, i.e. `e.preventDefault()`.
      */
     onSyntaxHelp?: (e: MouseEvent<HTMLElement>) => boolean;
+    /**
+     * Custom components to take over the rendering of certain parts of the jql editor
+     */
+    customComponents?: CustomComponents;
 };
 export type DebugMessageEventAttribute = string | number | boolean | void | null;
 export type Props = {
@@ -239,4 +252,5 @@ export type Props = {
     enableRichInlineNodes: boolean;
     onSyntaxHelp?: (e: MouseEvent<HTMLElement>) => boolean;
     onFocus?: (e: FocusEvent<HTMLElement>) => void;
+    customComponents?: CustomComponents;
 };

package/dist/types/types.d.ts

@@ -1,5 +1,5 @@
 export type { JQLClause } from '@atlaskit/jql-autocomplete';
 export type { JQLEditorUIProps, JQLEditorProps, HydratedValues, HydratedValue, HydratedUser, } from './ui/types';
-export type { ExternalMessage, ExternalError, ExternalWarning, ExternalInfo } from './state/types';
+export type { ExternalMessage, ExternalError, ExternalWarning, ExternalInfo, CustomComponents, } from './state/types';
 export type { AutocompleteProvider, AutocompleteOptions, AutocompleteOption, AutocompleteValueType, } from './plugins/types';
 export type { ListenerProps, JqlAnalyticsEvent } from './analytics';

package/dist/types/ui/jql-editor/types.d.ts

@@ -1,7 +1,7 @@
 import { type FocusEvent, type MouseEvent, type Ref } from 'react';
 import { type Jast } from '@atlaskit/jql-ast';
 import { type AutocompleteProvider } from '../../plugins/autocomplete/types';
-import { type ExternalMessage } from '../../state/types';
+import { type CustomComponents, type ExternalMessage } from '../../state/types';
 export type HydratedUser = {
     type: 'user';
     id: string;
@@ -98,4 +98,8 @@ export type JQLEditorUIProps = {
     inputRef?: Ref<{
         focus: () => void;
     }>;
+    /**
+     * Custom components to take over the rendering of certain parts of JQL editor
+     */
+    customComponents?: CustomComponents;
 };

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

@@ -2,4 +2,4 @@ export { default as JQLEditor } from './ui';
 export { JQLEditorAsync, preloadJQLEditor } from './async';
 export { JQLEditorReadOnly } from './ui/jql-editor-layout';
 export { JQLEditorAnalyticsListener, ANALYTICS_CHANNEL, useJqlPackageAnalytics, EventType, } from './analytics';
-export type { ListenerProps, JqlAnalyticsEvent, JQLEditorUIProps, JQLEditorProps, HydratedValue, HydratedValues, HydratedUser, AutocompleteOption, AutocompleteValueType, AutocompleteOptions, AutocompleteProvider, JQLClause, ExternalMessage, ExternalError, ExternalWarning, ExternalInfo, } from './types';
+export type { ListenerProps, JqlAnalyticsEvent, JQLEditorUIProps, JQLEditorProps, HydratedValue, HydratedValues, HydratedUser, AutocompleteOption, AutocompleteValueType, AutocompleteOptions, AutocompleteProvider, JQLClause, ExternalMessage, ExternalError, ExternalWarning, ExternalInfo, CustomComponents, } from './types';

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

@@ -11,7 +11,7 @@ import { type AutocompleteOptionGroup, type AutocompleteOptions, type Autocomple
 import { type AutocompleteProvider } from '../plugins/types';
 import { type PortalActions } from '../ui/jql-editor-portal-provider/types';
 import { type HydratedDeprecatedField, type HydratedUser, type HydratedValue } from '../ui/jql-editor/types';
-import { type AutocompletePosition, type AutocompleteState, type ContextAwareJQLSuggestions, type ExternalMessagesNormalized, type OptionsKey, type Props, type State } from './types';
+import { type AutocompletePosition, type AutocompleteState, type ContextAwareJQLSuggestions, type CustomErrorComponent, type ExternalMessagesNormalized, type OptionsKey, type Props, type State } from './types';
 export declare const initialState: State;
 export declare const actions: {
     onEditorViewBlur: () => Action<State>;
@@ -499,6 +499,38 @@ export declare const useExternalMessages: import("react-sweet-state").HookFuncti
     externalErrorMessageViewed: () => Action<State, Props>;
     createAndFireAnalyticsEvent: (payload: JqlEditorAnalyticsEvent) => Action<State, Props>;
 }>, void>;
+export declare const useCustomErrorComponent: import("react-sweet-state").HookFunction<CustomErrorComponent | undefined, import("react-sweet-state").BoundActions<State, {
+    onEditorViewBlur: () => Action<State>;
+    onEditorViewFocus: (event: FocusEvent<HTMLElement>) => Action<State, Props>;
+    openAutocompleteOnNextUpdate: () => Action<State>;
+    closeAutocomplete: () => Action<State>;
+    setSelectedAutocompleteOptionId: (selectedOptionId: string | undefined) => Action<State>;
+    getAutocompleteSuggestions: (editorState: EditorState) => Action<State>;
+    getAutocompleteOptions: (suggestions: ContextAwareJQLSuggestions) => Action<State>;
+    appendOptionsForObservable: (key: OptionsKey, observable: Observable<AutocompleteOptions>, rule: JQLRuleSuggestion, type: AutocompleteOptionType) => Action<State, void, Observable<AutocompleteOptions>>;
+    cancelSubscription: () => Action<State>;
+    setLoading: (loading: boolean) => Action<State>;
+    setAutocompleteOptions: (options: AutocompleteOptionGroup) => Action<State>;
+    setAutocompleteContainer: (container: HTMLElement | null) => Action<State>;
+    callAutocompleteProviders: ({ rules, tokens }: ContextAwareJQLSuggestions) => Action<State>;
+    updateValidationState: () => Action<State>;
+    initialiseEditorState: () => Action<State, Props>;
+    configurePlugins: (portalActions: PortalActions | void) => Action<State, Props>;
+    onApplyEditorTransaction: (transaction: Transaction) => Action<State, Props>;
+    resetEditorState: (query: string, addToHistory?: boolean) => Action<State>;
+    initialiseEditorView: (editorViewNode: HTMLElement, attributes: {
+        [key: string]: string;
+    }, portalActions: PortalActions) => Action<State, Props>;
+    updateEditorView: (attributes: {
+        [key: string]: string;
+    }) => Action<State, Props>;
+    setEditorViewContainer: (editorViewContainer: HTMLElement) => Action<State>;
+    setEditorViewContainerScroll: (scroll: number) => Action<State>;
+    onSearch: () => Action<State>;
+    onSearchCommand: (pmState: EditorState, pmDispatch: ((tr: Transaction) => void) | undefined, pmView: EditorView | undefined, keyboardShortcut: boolean) => Action<State, Props, boolean>;
+    externalErrorMessageViewed: () => Action<State, Props>;
+    createAndFireAnalyticsEvent: (payload: JqlEditorAnalyticsEvent) => Action<State, Props>;
+}>, void>;
 export declare const useAutocompleteOptions: import("react-sweet-state").HookFunction<SelectableAutocompleteOption[], import("react-sweet-state").BoundActions<State, {
     onEditorViewBlur: () => Action<State>;
     onEditorViewFocus: (event: FocusEvent<HTMLElement>) => Action<State, Props>;

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

@@ -1,4 +1,4 @@
-import { type FocusEvent, type MouseEvent, type MutableRefObject, type ReactNode } from 'react';
+import { type FocusEvent, type MouseEvent, type MutableRefObject, type PropsWithChildren, type ReactNode } from 'react';
 import { type IntlShape } from 'react-intl-next';
 import { type Subscription } from 'rxjs/Subscription';
 import { type EditorState } from '@atlaskit/editor-prosemirror/state';
@@ -6,6 +6,7 @@ import { type EditorView } from '@atlaskit/editor-prosemirror/view';
 import { type Jast, type JQLParseError } from '@atlaskit/jql-ast';
 import { type JQLRuleContext, type JQLRuleSuggestions, type TokenSuggestions } from '@atlaskit/jql-autocomplete';
 import { type JqlEditorAnalyticsEvent } from '../analytics';
+import { type EditorTheme } from '../hooks/use-editor-theme';
 import { type AutocompleteOptionGroup, type AutocompleteProvider } from '../plugins/autocomplete/types';
 import { type HydratedValue, type HydratedValues } from '../ui/jql-editor/types';
 export type ContextAwareTokenSuggestions = TokenSuggestions & {
@@ -64,6 +65,14 @@ export type ExternalInfo = {
      */
     message: ReactNode;
 };
+export type CustomErrorComponent = React.ComponentType<PropsWithChildren<{
+    testId: string;
+    editorTheme: EditorTheme;
+    editorId: string;
+}>>;
+export type CustomComponents = {
+    ErrorMessage?: CustomErrorComponent;
+};
 export type ExternalMessage = ExternalError | ExternalWarning | ExternalInfo;
 export type ExternalMessagesNormalized = {
     errors: ExternalError[];
@@ -220,6 +229,10 @@ export type State = {
      * handled which will prevent default behaviour of the help button, i.e. `e.preventDefault()`.
      */
     onSyntaxHelp?: (e: MouseEvent<HTMLElement>) => boolean;
+    /**
+     * Custom components to take over the rendering of certain parts of the jql editor
+     */
+    customComponents?: CustomComponents;
 };
 export type DebugMessageEventAttribute = string | number | boolean | void | null;
 export type Props = {
@@ -239,4 +252,5 @@ export type Props = {
     enableRichInlineNodes: boolean;
     onSyntaxHelp?: (e: MouseEvent<HTMLElement>) => boolean;
     onFocus?: (e: FocusEvent<HTMLElement>) => void;
+    customComponents?: CustomComponents;
 };

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

@@ -1,5 +1,5 @@
 export type { JQLClause } from '@atlaskit/jql-autocomplete';
 export type { JQLEditorUIProps, JQLEditorProps, HydratedValues, HydratedValue, HydratedUser, } from './ui/types';
-export type { ExternalMessage, ExternalError, ExternalWarning, ExternalInfo } from './state/types';
+export type { ExternalMessage, ExternalError, ExternalWarning, ExternalInfo, CustomComponents, } from './state/types';
 export type { AutocompleteProvider, AutocompleteOptions, AutocompleteOption, AutocompleteValueType, } from './plugins/types';
 export type { ListenerProps, JqlAnalyticsEvent } from './analytics';

package/dist/types-ts4.5/ui/jql-editor/types.d.ts

@@ -1,7 +1,7 @@
 import { type FocusEvent, type MouseEvent, type Ref } from 'react';
 import { type Jast } from '@atlaskit/jql-ast';
 import { type AutocompleteProvider } from '../../plugins/autocomplete/types';
-import { type ExternalMessage } from '../../state/types';
+import { type CustomComponents, type ExternalMessage } from '../../state/types';
 export type HydratedUser = {
     type: 'user';
     id: string;
@@ -98,4 +98,8 @@ export type JQLEditorUIProps = {
     inputRef?: Ref<{
         focus: () => void;
     }>;
+    /**
+     * Custom components to take over the rendering of certain parts of JQL editor
+     */
+    customComponents?: CustomComponents;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/jql-editor",
-	"version": "4.10.7",
+	"version": "4.11.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",
@@ -40,18 +40,18 @@
 		"@atlaskit/avatar": "^21.17.0",
 		"@atlaskit/button": "^20.3.0",
 		"@atlaskit/editor-prosemirror": "6.0.0",
-		"@atlaskit/form": "^10.5.0",
-		"@atlaskit/icon": "^22.26.0",
+		"@atlaskit/form": "^10.6.0",
+		"@atlaskit/icon": "^22.27.0",
 		"@atlaskit/jql-ast": "^3.3.0",
 		"@atlaskit/jql-autocomplete": "^2.0.0",
 		"@atlaskit/jql-editor-common": "^2.1.0",
 		"@atlaskit/jql-parser": "^2.0.0",
 		"@atlaskit/legacy-custom-icons": "^0.20.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
-		"@atlaskit/primitives": "^13.2.0",
+		"@atlaskit/primitives": "^13.3.0",
 		"@atlaskit/spinner": "^16.3.0",
 		"@atlaskit/theme": "^14.0.0",
-		"@atlaskit/tokens": "^2.3.0",
+		"@atlaskit/tokens": "^2.4.0",
 		"@atlaskit/tooltip": "^18.9.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
@@ -77,6 +77,7 @@
 		"@atlaskit/docs": "*",
 		"@atlaskit/jql-editor-autocomplete-rest": "^2.1.0",
 		"@atlaskit/visual-regression": "*",
+		"@atlassian/feature-flags-test-utils": "0.2.3",
 		"@storybook/addon-actions": "^6.4.0",
 		"@storybook/addon-knobs": "^6.4.0",
 		"@testing-library/jest-dom": "^6.4.5",
@@ -127,6 +128,9 @@
 	"platform-feature-flags": {
 		"platform-component-visual-refresh": {
 			"type": "boolean"
+		},
+		"custom_components_for_jql_editor": {
+			"type": "boolean"
 		}
 	}
 }