@atlaskit/editor-plugin-type-ahead 1.11.3 → 1.11.4

package/dist/es2019/pm-plugins/utils.js

@@ -1,4 +1,5 @@
 import { TypeAheadAvailableNodes, typeAheadListMessages } from '@atlaskit/editor-common/type-ahead';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { updateSelectedIndex } from './commands/update-selected-index';
 import { itemIsDisabled } from './item-is-disabled';
 import { pluginKey as typeAheadPluginKey } from './key';
@@ -39,26 +40,52 @@ export const findHandler = (id, state) => {
   } = pluginState;
   return typeAheadHandlers.find(h => h.id === id) || null;
 };
-export const skipForwardToSafeItem = (currentIndex, nextIndex, listSize, itemIsDisabled
-// Ignored via go/ees005
-// eslint-disable-next-line @typescript-eslint/max-params
-) => {
+export const skipForwardToSafeItem = ({
+  currentIndex,
+  nextIndex,
+  listSize,
+  itemIsDisabled
+}) => {
   // Use a loop to find the next selectable item
   for (let idx = nextIndex; idx < listSize; idx++) {
     if (!itemIsDisabled(idx)) {
       return idx;
     }
   }
+
+  // We got to the end of the list ^, now try from the start
+  if (fg('platform_editor_offline_editing_ga')) {
+    for (let idx = 0; idx < nextIndex; idx++) {
+      if (!itemIsDisabled(idx)) {
+        return idx;
+      }
+    }
+  }
+
   // If no selectable items are found, return currentIndex
   return currentIndex;
 };
-export const skipBackwardToSafeItem = (currentIndex, nextIndex, itemIsDisabled) => {
+export const skipBackwardToSafeItem = ({
+  currentIndex,
+  nextIndex,
+  listSize,
+  itemIsDisabled
+}) => {
   // Use a loop to find the next non-selectable item when going backwards
   for (let idx = nextIndex; idx >= 0; idx--) {
     if (!itemIsDisabled(idx)) {
       return idx;
     }
   }
+
+  // We got to the start of the list ^, now try from the end
+  if (fg('platform_editor_offline_editing_ga')) {
+    for (let idx = listSize; idx > nextIndex; idx--) {
+      if (!itemIsDisabled(idx)) {
+        return idx;
+      }
+    }
+  }
   // If no non-selectable items are found, return currentIndex
   return currentIndex;
 };
@@ -112,11 +139,21 @@ export const moveSelectedIndex = ({
     } else {
       nextIndex = selectedIndex >= items.length - 1 ? 0 : selectedIndex + 1;
     }
-    nextIndex = skipForwardToSafeItem(selectedIndex, nextIndex, items.length, isDisabled);
+    nextIndex = skipForwardToSafeItem({
+      currentIndex: selectedIndex,
+      nextIndex,
+      listSize: items.length,
+      itemIsDisabled: isDisabled
+    });
   } else {
     stats.increaseArrowUp();
     nextIndex = selectedIndex <= 0 ? items.length - 1 : selectedIndex - 1;
-    nextIndex = skipBackwardToSafeItem(selectedIndex, nextIndex, isDisabled);
+    nextIndex = skipBackwardToSafeItem({
+      currentIndex: selectedIndex,
+      nextIndex,
+      listSize: items.length,
+      itemIsDisabled: isDisabled
+    });
   }
   updateSelectedIndex(nextIndex, api)(editorView.state, editorView.dispatch);
 };

package/dist/es2019/typeAheadPlugin.js

@@ -195,7 +195,7 @@ export const typeAheadPlugin = ({
       }];
     },
     getSharedState(editorState) {
-      var _state$decorationSet, _state$decorationElem, _state$items, _state$selectedIndex;
+      var _state$decorationSet, _state$decorationElem, _state$items, _state$errorInfo, _state$selectedIndex;
       if (!editorState) {
         return {
           query: '',
@@ -206,6 +206,7 @@ export const typeAheadPlugin = ({
           decorationElement: null,
           triggerHandler: undefined,
           items: [],
+          errorInfo: null,
           selectedIndex: 0
         };
       }
@@ -220,6 +221,7 @@ export const typeAheadPlugin = ({
         decorationElement: (_state$decorationElem = state === null || state === void 0 ? void 0 : state.decorationElement) !== null && _state$decorationElem !== void 0 ? _state$decorationElem : null,
         triggerHandler: state === null || state === void 0 ? void 0 : state.triggerHandler,
         items: (_state$items = state === null || state === void 0 ? void 0 : state.items) !== null && _state$items !== void 0 ? _state$items : [],
+        errorInfo: (_state$errorInfo = state === null || state === void 0 ? void 0 : state.errorInfo) !== null && _state$errorInfo !== void 0 ? _state$errorInfo : null,
         selectedIndex: (_state$selectedIndex = state === null || state === void 0 ? void 0 : state.selectedIndex) !== null && _state$selectedIndex !== void 0 ? _state$selectedIndex : 0
       };
     },

package/dist/es2019/ui/TypeAheadErrorFallback/EmptyState.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import Heading from '@atlaskit/heading';
+import { Flex, Text, xcss } from '@atlaskit/primitives';
+const containerStyles = xcss({
+  marginBlockStart: 'space.600',
+  marginBlockEnd: 'space.600',
+  textAlign: 'center'
+});
+export const EmptyState = ({
+  testId,
+  header,
+  description,
+  renderImage
+}) => {
+  return /*#__PURE__*/React.createElement(Flex, {
+    xcss: containerStyles,
+    testId: testId,
+    direction: "column",
+    alignItems: "center",
+    gap: "space.300"
+  }, renderImage === null || renderImage === void 0 ? void 0 : renderImage(), /*#__PURE__*/React.createElement(Flex, {
+    direction: "column",
+    alignItems: "center",
+    gap: "space.200"
+  }, /*#__PURE__*/React.createElement(Heading, {
+    size: "medium",
+    as: "h2"
+  }, header), description && /*#__PURE__*/React.createElement(Text, {
+    as: "p",
+    color: "color.text"
+  }, description)));
+};

package/dist/es2019/ui/TypeAheadErrorFallback/GenericErrorSVG.js

@@ -0,0 +1,59 @@
+import _extends from "@babel/runtime/helpers/extends";
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+const HEIGHT = 90;
+const genericErrorStyles = css({
+  height: `${HEIGHT}px`,
+  display: 'block'
+});
+export const GenericErrorSVG = props => {
+  const id = 'link-picker-ui-generic-error-svg';
+  return jsx("svg", _extends({
+    height: "90",
+    viewBox: "0 0 164 212",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    css: genericErrorStyles
+    // eslint-disable-next-line react/jsx-props-no-spreading
+  }, props), jsx("path", {
+    d: "m95.43 74.16 66.44 115.08c5.84 10.12-1.46 22.76-13.14 22.76H15.85c-11.68 0-18.98-12.65-13.14-22.76L69.15 74.16c5.84-10.12 20.44-10.12 26.28 0Zm-7.56 83.55 2.88-44.35c.34-5.29-3.86-9.78-9.16-9.78-5.31 0-9.51 4.48-9.16 9.78l2.88 44.35a6.3 6.3 0 0 0 6.28 5.89c3.31 0 6.06-2.58 6.28-5.89Zm-15.84 23.54c0 5.66 4.76 10.1 10.39 9.58 4.85-.45 8.73-4.5 8.83-9.37.11-5.45-4.31-9.94-9.73-9.94-5.23-.01-9.49 4.37-9.49 9.73Z",
+    fill: `url(#${id})`
+  }), jsx("path", {
+    opacity: ".6",
+    d: "M93.35 27.17 85.94.45c-.17-.62-1.07-.58-1.19.05l-4.66 25.1-5.8-1.08a.612.612 0 0 0-.7.76L81 52c.17.62 1.07.58 1.19-.05l4.66-25.1 5.8 1.08c.45.08.82-.33.7-.76ZM66.77 41.81 55.9 33.26c-.22-.18-.53.07-.41.33l5.53 11.43-2.66 1.29c-.18.09-.2.33-.05.45l10.87 8.55c.22.18.53-.07.41-.33l-5.53-11.43 2.66-1.29c.17-.08.2-.33.05-.45Z",
+    fill: "#C1C7D0"
+  }), jsx("path", {
+    opacity: ".6",
+    d: "M102.78 56.75a.993.993 0 0 1-.92-1.38c-.24-.77-2.29-2.85-3.54-4.11-2.97-3.01-4.93-5-3.84-6.49 1.09-1.48 3.58-.22 7.35 1.7 1.32.67 3.35 1.7 4.45 2.03-.64-.95-2.24-2.58-3.28-3.63-2.97-3.01-4.93-5-3.84-6.49 1.08-1.48 3.58-.22 7.34 1.7 1.32.67 3.34 1.7 4.45 2.03-.64-.95-2.24-2.57-3.28-3.62-2.97-3.01-4.93-5-3.84-6.49 1.08-1.48 3.57-.22 7.34 1.7 1.58.8 4.18 2.13 4.98 2.13a1.005 1.005 0 0 1 1.46 1.36c-1.09 1.48-3.57.22-7.34-1.7-1.32-.67-3.34-1.7-4.44-2.03.64.95 2.24 2.57 3.28 3.62 2.97 3.01 4.93 5 3.84 6.49-1.08 1.48-3.57.22-7.34-1.7-1.32-.67-3.35-1.7-4.45-2.03.64.95 2.24 2.57 3.28 3.63 2.97 3.01 4.93 5 3.84 6.49-1.09 1.48-3.58.22-7.35-1.7-1.32-.67-3.35-1.71-4.45-2.03.64.95 2.24 2.58 3.28 3.63 2.97 3.01 4.93 5 3.84 6.49-.21.26-.51.4-.82.4Zm5.56 14.32c-.35 0-.69-.19-.88-.52-1.04-1.88-2.22-4.02-.91-5.21 1.31-1.2 3.34.18 5.49 1.63.87.59 2.26 1.53 2.93 1.71-.12-.68-.93-2.15-1.45-3.07-1.26-2.27-2.45-4.41-1.14-5.61 1.31-1.2 3.34.18 5.49 1.63.96.65 2.54 1.72 3.1 1.74a1 1 0 0 1 1.27 1.54c-1.31 1.2-3.34-.17-5.49-1.63-.87-.59-2.26-1.53-2.93-1.71.12.68.93 2.15 1.45 3.07 1.26 2.27 2.45 4.41 1.14 5.61-1.31 1.2-3.34-.18-5.49-1.63-.87-.59-2.26-1.53-2.93-1.71.12.68.93 2.14 1.22 2.67.27.48.09 1.09-.39 1.36-.15.09-.32.13-.48.13Zm-54.32-2.89c-.22 0-.44-.04-.67-.14-1.64-.69-1.24-3.11-.81-5.67.17-1.04.45-2.7.33-3.38-.57.39-1.56 1.75-2.18 2.6-1.53 2.09-2.99 4.07-4.62 3.38a.991.991 0 0 1-.53-1.31c.2-.48.73-.72 1.21-.57.52-.21 1.65-1.75 2.34-2.68 1.53-2.09 2.98-4.08 4.62-3.38 1.64.69 1.24 3.11.81 5.67-.17 1.04-.45 2.7-.33 3.38.57-.39 1.56-1.75 2.18-2.6 1.53-2.09 2.98-4.08 4.62-3.38 1.63.69 1.24 3.09.89 5.21-.09.54-.6.91-1.15.83-.54-.09-.92-.6-.83-1.15.1-.59.37-2.24.26-2.92-.57.39-1.56 1.75-2.18 2.6-1.33 1.79-2.59 3.51-3.96 3.51Z",
+    fill: "#B3BAC5"
+  }), jsx("defs", null, jsx("linearGradient", {
+    id: id,
+    x1: "26.169",
+    y1: "228.621",
+    x2: "138.408",
+    y2: "116.382",
+    gradientUnits: "userSpaceOnUse"
+  }, jsx("stop", {
+    stopColor: "#C1C7D0"
+  }), jsx("stop", {
+    offset: ".297",
+    stopColor: "#C6CBD4",
+    stopOpacity: ".881"
+  }), jsx("stop", {
+    offset: ".63",
+    stopColor: "#D3D7DE",
+    stopOpacity: ".748"
+  }), jsx("stop", {
+    offset: ".98",
+    stopColor: "#E9EBEF",
+    stopOpacity: ".608"
+  }), jsx("stop", {
+    offset: "1",
+    stopColor: "#EBECF0",
+    stopOpacity: ".6"
+  }))));
+};

package/dist/es2019/ui/TypeAheadErrorFallback/MinHeightContainer.js

@@ -0,0 +1,33 @@
+import _extends from "@babel/runtime/helpers/extends";
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React, { forwardRef } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export const minHeightComponentStyles = css({
+  display: 'flex',
+  alignItems: 'stretch',
+  justifyContent: 'center',
+  minHeight: 'var(--link-picker-min-height)'
+});
+export const MinHeightContainer = /*#__PURE__*/forwardRef(({
+  minHeight,
+  ...props
+}, ref) => {
+  return jsx("div", _extends({
+    ref: ref
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    ,
+    css: minHeightComponentStyles
+    // eslint-disable-next-line react/jsx-props-no-spreading
+  }, props, {
+    style: {
+      ['--link-picker-min-height']: minHeight
+    }
+  }));
+});

package/dist/es2019/ui/TypeAheadErrorFallback/index.js

@@ -0,0 +1,29 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+import { useIntl } from 'react-intl-next';
+import { typeAheadListMessages as messages } from '@atlaskit/editor-common/type-ahead';
+import { EmptyState } from './EmptyState';
+import { GenericErrorSVG } from './GenericErrorSVG';
+const minHeightComponentStyles = css({
+  display: 'flex',
+  alignItems: 'stretch',
+  justifyContent: 'center',
+  minHeight: '290px'
+});
+export const TypeAheadErrorFallback = () => {
+  const intl = useIntl();
+  const header = intl.formatMessage(messages.offlineErrorFallbackHeading);
+  const description = intl.formatMessage(messages.offlineErrorFallbackDesc);
+  return jsx("div", {
+    "data-testid": "mentions-typeahead-error-boundary-ui",
+    css: minHeightComponentStyles
+  }, jsx(EmptyState, {
+    header: header,
+    renderImage: () => jsx(GenericErrorSVG, null),
+    description: description
+  }));
+};

package/dist/es2019/ui/TypeAheadListItem.js

@@ -61,6 +61,7 @@ const itemText = css({
   color: `${`var(--ds-text, ${N800})`}`
 });
 const itemTitle = css({
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: '1.4'
 });
 const itemTitleOverride = css({

package/dist/es2019/ui/TypeAheadMenu.js

@@ -14,6 +14,7 @@ export const TypeAheadMenu = /*#__PURE__*/React.memo(({
   const {
     triggerHandler,
     items,
+    errorInfo,
     selectedIndex,
     decorationElement,
     decorationSet,
@@ -67,7 +68,7 @@ export const TypeAheadMenu = /*#__PURE__*/React.memo(({
       return;
     }
   }, [isOpen, query, onItemMatch]);
-  if (!isOpen || !triggerHandler || !(decorationElement instanceof HTMLElement) || items.length === 0) {
+  if (!isOpen || !triggerHandler || !(decorationElement instanceof HTMLElement) || items.length === 0 && !errorInfo) {
     return null;
   }
   return /*#__PURE__*/React.createElement(TypeAheadPopup, {
@@ -78,6 +79,7 @@ export const TypeAheadMenu = /*#__PURE__*/React.memo(({
     anchorElement: decorationElement,
     triggerHandler: triggerHandler,
     items: items,
+    errorInfo: errorInfo,
     selectedIndex: selectedIndex,
     setSelectedItem: setSelectedItem,
     onItemInsert: insertItem,

package/dist/es2019/ui/TypeAheadPopup.js

@@ -14,6 +14,7 @@ import { findOverflowScrollParent, Popup } from '@atlaskit/editor-common/ui';
 import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
 import { N0, N50A, N60A } from '@atlaskit/theme/colors';
 import { CloseSelectionOptions, TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE, TYPE_AHEAD_POPUP_CONTENT_CLASS } from '../pm-plugins/constants';
+import { TypeAheadErrorFallback } from './TypeAheadErrorFallback';
 import { TypeAheadList } from './TypeAheadList';
 const DEFAULT_TYPEAHEAD_MENU_HEIGHT = 380;
 const DEFAULT_TYPEAHEAD_MENU_HEIGHT_NEW = 480;
@@ -51,6 +52,7 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
     popupsBoundariesElement,
     popupsScrollableElement,
     items,
+    errorInfo,
     selectedIndex,
     onItemInsert,
     isEmptyQuery,
@@ -253,7 +255,7 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
     ,
     className: TYPE_AHEAD_POPUP_CONTENT_CLASS,
     ref: ref
-  }, jsx(Highlight, {
+  }, errorInfo ? jsx(TypeAheadErrorFallback, null) : jsx(React.Fragment, null, jsx(Highlight, {
     state: editorView.state,
     triggerHandler: triggerHandler
   }), jsx(TypeAheadList, {
@@ -266,6 +268,6 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
     triggerHandler: triggerHandler,
     moreElementsInQuickInsertViewEnabled: moreElementsInQuickInsertViewEnabled,
     api: api
-  })));
+  }))));
 });
 TypeAheadPopup.displayName = 'TypeAheadPopup';

package/dist/es2019/ui/WrapperTypeAhead.js

@@ -64,7 +64,12 @@ export const WrapperTypeAhead = /*#__PURE__*/React.memo(({
     const {
       selectedIndex
     } = getPluginState(view.state);
-    const safeSelectedIndex = skipForwardToSafeItem(selectedIndex, 1, items.length, idx => itemIsDisabled(items[idx], api));
+    const safeSelectedIndex = skipForwardToSafeItem({
+      currentIndex: selectedIndex,
+      nextIndex: 1,
+      listSize: items.length,
+      itemIsDisabled: idx => itemIsDisabled(items[idx], api)
+    });
     // If the only safe index is -1 then none are safe - do not insert item
     if (safeSelectedIndex === -1) {
       return;
@@ -102,8 +107,11 @@ export const WrapperTypeAhead = /*#__PURE__*/React.memo(({
   if (closed) {
     return null;
   }
+  if (!triggerHandler) {
+    return null;
+  }
   return /*#__PURE__*/React.createElement(InputQuery, {
-    triggerQueryPrefix: triggerHandler.trigger,
+    triggerQueryPrefix: triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.trigger,
     onQueryChange: setQuery,
     onItemSelect: insertSelectedItem,
     selectNextItem: selectNextItem,

package/dist/es2019/ui/hooks/use-load-items.js

@@ -1,4 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { updateListError } from '../../pm-plugins/commands/update-list-error';
 import { updateListItem } from '../../pm-plugins/commands/update-list-items';
 const EMPTY_LIST_ITEM = [];
 export const useLoadItems = (triggerHandler, editorView, query) => {
@@ -26,6 +28,17 @@ export const useLoadItems = (triggerHandler, editorView, query) => {
       queueMicrotask(() => {
         updateListItem(list)(view.state, view.dispatch);
       });
+    }).catch(e => {
+      if (fg('platform_editor_offline_editing_ga')) {
+        if (e) {
+          if (componentIsMounted.current) {
+            setItems(EMPTY_LIST_ITEM);
+          }
+          queueMicrotask(() => {
+            updateListError(e)(view.state, view.dispatch);
+          });
+        }
+      }
     });
 
     // ignore because EditorView is mutable but we don't want to

package/dist/esm/pm-plugins/actions.js

@@ -5,6 +5,7 @@ export var ACTIONS = /*#__PURE__*/function (ACTIONS) {
   ACTIONS["INSERT_ITEM"] = "INSERT_ITEM";
   ACTIONS["INSERT_RAW_QUERY"] = "INSERT_RAW_QUERY";
   ACTIONS["UPDATE_LIST_ITEMS"] = "UPDATE_LIST_ITEMS";
+  ACTIONS["UPDATE_LIST_ERROR"] = "UPDATE_LIST_ERROR";
   ACTIONS["UPDATE_SELECTED_INDEX"] = "UPDATE_SELECTED_INDEX";
   return ACTIONS;
 }({});

package/dist/esm/pm-plugins/commands/update-list-error.js

@@ -0,0 +1,18 @@
+import { ACTIONS } from '../actions';
+import { pluginKey as typeAheadPluginKey } from '../key';
+export var updateListError = function updateListError(errorInfo) {
+  return function (state, dispatch) {
+    var tr = state.tr;
+    tr.setMeta(typeAheadPluginKey, {
+      action: ACTIONS.UPDATE_LIST_ERROR,
+      params: {
+        errorInfo: errorInfo,
+        items: []
+      }
+    });
+    if (dispatch) {
+      dispatch(tr);
+    }
+    return true;
+  };
+};

package/dist/esm/pm-plugins/main.js

@@ -52,6 +52,7 @@ export function createPlugin(_ref) {
           decorationSet: DecorationSet.empty,
           decorationElement: null,
           items: [],
+          errorInfo: null,
           selectedIndex: -1,
           stats: null,
           inputMethod: null

package/dist/esm/pm-plugins/reducer.js

@@ -102,6 +102,7 @@ export var createReducer = function createReducer(_ref) {
     var shouldCloseMenu = [ACTIONS.CLOSE_TYPE_AHEAD, ACTIONS.INSERT_ITEM].includes(action) || selectionChanged;
     var shouldUpdateQuery = action === ACTIONS.CHANGE_QUERY;
     var shouldUpdateListItems = action === ACTIONS.UPDATE_LIST_ITEMS;
+    var shouldUpdateListError = action === ACTIONS.UPDATE_LIST_ERROR;
     var shouldUpdateSelectedIndex = action === ACTIONS.UPDATE_SELECTED_INDEX;
     if (shouldOpenMenu) {
       return openMenu(currentPluginState, {
@@ -116,6 +117,13 @@ export var createReducer = function createReducer(_ref) {
       return _objectSpread(_objectSpread({}, currentPluginState), {}, {
         query: params.query
       });
+    } else if (shouldUpdateListError) {
+      var errorInfo = params.errorInfo;
+      return _objectSpread(_objectSpread({}, currentPluginState), {}, {
+        errorInfo: errorInfo,
+        items: [],
+        selectedIndex: -1
+      });
     } else if (shouldUpdateListItems) {
       var items = params.items;
       var selectedIndex = currentPluginState.selectedIndex;

package/dist/esm/pm-plugins/utils.js

@@ -1,4 +1,5 @@
 import { TypeAheadAvailableNodes, typeAheadListMessages } from '@atlaskit/editor-common/type-ahead';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { updateSelectedIndex } from './commands/update-selected-index';
 import { itemIsDisabled } from './item-is-disabled';
 import { pluginKey as typeAheadPluginKey } from './key';
@@ -39,32 +40,56 @@ export var findHandler = function findHandler(id, state) {
     return h.id === id;
   }) || null;
 };
-export var skipForwardToSafeItem = function skipForwardToSafeItem(currentIndex, nextIndex, listSize, itemIsDisabled
-// Ignored via go/ees005
-// eslint-disable-next-line @typescript-eslint/max-params
-) {
+export var skipForwardToSafeItem = function skipForwardToSafeItem(_ref) {
+  var currentIndex = _ref.currentIndex,
+    nextIndex = _ref.nextIndex,
+    listSize = _ref.listSize,
+    itemIsDisabled = _ref.itemIsDisabled;
   // Use a loop to find the next selectable item
   for (var idx = nextIndex; idx < listSize; idx++) {
     if (!itemIsDisabled(idx)) {
       return idx;
     }
   }
+
+  // We got to the end of the list ^, now try from the start
+  if (fg('platform_editor_offline_editing_ga')) {
+    for (var _idx = 0; _idx < nextIndex; _idx++) {
+      if (!itemIsDisabled(_idx)) {
+        return _idx;
+      }
+    }
+  }
+
   // If no selectable items are found, return currentIndex
   return currentIndex;
 };
-export var skipBackwardToSafeItem = function skipBackwardToSafeItem(currentIndex, nextIndex, itemIsDisabled) {
+export var skipBackwardToSafeItem = function skipBackwardToSafeItem(_ref2) {
+  var currentIndex = _ref2.currentIndex,
+    nextIndex = _ref2.nextIndex,
+    listSize = _ref2.listSize,
+    itemIsDisabled = _ref2.itemIsDisabled;
   // Use a loop to find the next non-selectable item when going backwards
   for (var idx = nextIndex; idx >= 0; idx--) {
     if (!itemIsDisabled(idx)) {
       return idx;
     }
   }
+
+  // We got to the start of the list ^, now try from the end
+  if (fg('platform_editor_offline_editing_ga')) {
+    for (var _idx2 = listSize; _idx2 > nextIndex; _idx2--) {
+      if (!itemIsDisabled(_idx2)) {
+        return _idx2;
+      }
+    }
+  }
   // If no non-selectable items are found, return currentIndex
   return currentIndex;
 };
-export var findHandlerByTrigger = function findHandlerByTrigger(_ref) {
-  var trigger = _ref.trigger,
-    editorState = _ref.editorState;
+export var findHandlerByTrigger = function findHandlerByTrigger(_ref3) {
+  var trigger = _ref3.trigger,
+    editorState = _ref3.editorState;
   var pluginState = typeAheadPluginKey.getState(editorState);
   if (!pluginState || !pluginState.typeAheadHandlers || pluginState.typeAheadHandlers.length === 0) {
     return null;
@@ -74,10 +99,10 @@ export var findHandlerByTrigger = function findHandlerByTrigger(_ref) {
     return h.trigger === trigger;
   }) || null;
 };
-export var moveSelectedIndex = function moveSelectedIndex(_ref2) {
-  var editorView = _ref2.editorView,
-    direction = _ref2.direction,
-    api = _ref2.api;
+export var moveSelectedIndex = function moveSelectedIndex(_ref4) {
+  var editorView = _ref4.editorView,
+    direction = _ref4.direction,
+    api = _ref4.api;
   return function () {
     var typeAheadState = getPluginState(editorView.state);
     if (!typeAheadState) {
@@ -111,11 +136,21 @@ export var moveSelectedIndex = function moveSelectedIndex(_ref2) {
       } else {
         nextIndex = selectedIndex >= items.length - 1 ? 0 : selectedIndex + 1;
       }
-      nextIndex = skipForwardToSafeItem(selectedIndex, nextIndex, items.length, isDisabled);
+      nextIndex = skipForwardToSafeItem({
+        currentIndex: selectedIndex,
+        nextIndex: nextIndex,
+        listSize: items.length,
+        itemIsDisabled: isDisabled
+      });
     } else {
       stats.increaseArrowUp();
       nextIndex = selectedIndex <= 0 ? items.length - 1 : selectedIndex - 1;
-      nextIndex = skipBackwardToSafeItem(selectedIndex, nextIndex, isDisabled);
+      nextIndex = skipBackwardToSafeItem({
+        currentIndex: selectedIndex,
+        nextIndex: nextIndex,
+        listSize: items.length,
+        itemIsDisabled: isDisabled
+      });
     }
     updateSelectedIndex(nextIndex, api)(editorView.state, editorView.dispatch);
   };

package/dist/esm/typeAheadPlugin.js

@@ -193,7 +193,7 @@ export var typeAheadPlugin = function typeAheadPlugin(_ref) {
       }];
     },
     getSharedState: function getSharedState(editorState) {
-      var _state$decorationSet, _state$decorationElem, _state$items, _state$selectedIndex;
+      var _state$decorationSet, _state$decorationElem, _state$items, _state$errorInfo, _state$selectedIndex;
       if (!editorState) {
         return {
           query: '',
@@ -204,6 +204,7 @@ export var typeAheadPlugin = function typeAheadPlugin(_ref) {
           decorationElement: null,
           triggerHandler: undefined,
           items: [],
+          errorInfo: null,
           selectedIndex: 0
         };
       }
@@ -218,6 +219,7 @@ export var typeAheadPlugin = function typeAheadPlugin(_ref) {
         decorationElement: (_state$decorationElem = state === null || state === void 0 ? void 0 : state.decorationElement) !== null && _state$decorationElem !== void 0 ? _state$decorationElem : null,
         triggerHandler: state === null || state === void 0 ? void 0 : state.triggerHandler,
         items: (_state$items = state === null || state === void 0 ? void 0 : state.items) !== null && _state$items !== void 0 ? _state$items : [],
+        errorInfo: (_state$errorInfo = state === null || state === void 0 ? void 0 : state.errorInfo) !== null && _state$errorInfo !== void 0 ? _state$errorInfo : null,
         selectedIndex: (_state$selectedIndex = state === null || state === void 0 ? void 0 : state.selectedIndex) !== null && _state$selectedIndex !== void 0 ? _state$selectedIndex : 0
       };
     },

package/dist/esm/ui/TypeAheadErrorFallback/EmptyState.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import Heading from '@atlaskit/heading';
+import { Flex, Text, xcss } from '@atlaskit/primitives';
+var containerStyles = xcss({
+  marginBlockStart: 'space.600',
+  marginBlockEnd: 'space.600',
+  textAlign: 'center'
+});
+export var EmptyState = function EmptyState(_ref) {
+  var testId = _ref.testId,
+    header = _ref.header,
+    description = _ref.description,
+    renderImage = _ref.renderImage;
+  return /*#__PURE__*/React.createElement(Flex, {
+    xcss: containerStyles,
+    testId: testId,
+    direction: "column",
+    alignItems: "center",
+    gap: "space.300"
+  }, renderImage === null || renderImage === void 0 ? void 0 : renderImage(), /*#__PURE__*/React.createElement(Flex, {
+    direction: "column",
+    alignItems: "center",
+    gap: "space.200"
+  }, /*#__PURE__*/React.createElement(Heading, {
+    size: "medium",
+    as: "h2"
+  }, header), description && /*#__PURE__*/React.createElement(Text, {
+    as: "p",
+    color: "color.text"
+  }, description)));
+};