@atlaskit/editor-plugin-type-ahead 1.10.7 → 1.11.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/editor-plugin-type-ahead
 
+## 1.11.0
+
+### Minor Changes
+
+- [#171350](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/171350)
+  [`436dfb28a4833`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/436dfb28a4833) -
+  [ux] Support disabled type-ahead items while user is offline for media, emoji, and mentions.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 1.10.8
+
+### Patch Changes
+
+- [#165765](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/165765)
+  [`3f441f30e6507`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3f441f30e6507) -
+  Bump adf-schema to 46.0.0
+- Updated dependencies
+
 ## 1.10.7
 
 ### Patch Changes

package/dist/cjs/pm-plugins/commands/update-selected-index.js

@@ -5,13 +5,19 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.updateSelectedIndex = void 0;
 var _actions = require("../actions");
+var _itemIsDisabled = require("../item-is-disabled");
 var _key = require("../key");
-var updateSelectedIndex = exports.updateSelectedIndex = function updateSelectedIndex(selectedIndex) {
+var updateSelectedIndex = exports.updateSelectedIndex = function updateSelectedIndex(selectedIndex, api) {
   return function (state, dispatch) {
     var pluginState = _key.pluginKey.getState(state);
     if ((pluginState === null || pluginState === void 0 ? void 0 : pluginState.selectedIndex) === selectedIndex) {
       return false;
     }
+
+    // If the new index is disabled ignore this call, we can use the previous index
+    if ((0, _itemIsDisabled.itemIsDisabled)(pluginState === null || pluginState === void 0 ? void 0 : pluginState.items[selectedIndex], api)) {
+      return false;
+    }
     var tr = state.tr;
     tr.setMeta(_key.pluginKey, {
       action: _actions.ACTIONS.UPDATE_SELECTED_INDEX,

package/dist/cjs/pm-plugins/decorations.js

@@ -23,7 +23,8 @@ var _utils = require("./utils");
 var factoryDecorations = exports.factoryDecorations = function factoryDecorations(_ref) {
   var intl = _ref.intl,
     popupMountRef = _ref.popupMountRef,
-    nodeViewPortalProviderAPI = _ref.nodeViewPortalProviderAPI;
+    nodeViewPortalProviderAPI = _ref.nodeViewPortalProviderAPI,
+    api = _ref.api;
   var createDecorations = function createDecorations(tr, _ref2) {
     var triggerHandler = _ref2.triggerHandler,
       inputMethod = _ref2.inputMethod,
@@ -96,7 +97,8 @@ var factoryDecorations = exports.factoryDecorations = function factoryDecoration
             popupsBoundariesElement: (_popupMountRef$curren2 = popupMountRef.current) === null || _popupMountRef$curren2 === void 0 ? void 0 : _popupMountRef$curren2.popupsBoundariesElement,
             popupsScrollableElement: (_popupMountRef$curren3 = popupMountRef.current) === null || _popupMountRef$curren3 === void 0 ? void 0 : _popupMountRef$curren3.popupsScrollableElement,
             onUndoRedo: onUndoRedo,
-            reopenQuery: reopenQuery
+            reopenQuery: reopenQuery,
+            api: api
           }));
         }, typeaheadComponent, decorationId);
       } else {
@@ -116,7 +118,8 @@ var factoryDecorations = exports.factoryDecorations = function factoryDecoration
           popupsBoundariesElement: (_popupMountRef$curren5 = popupMountRef.current) === null || _popupMountRef$curren5 === void 0 ? void 0 : _popupMountRef$curren5.popupsBoundariesElement,
           popupsScrollableElement: (_popupMountRef$curren6 = popupMountRef.current) === null || _popupMountRef$curren6 === void 0 ? void 0 : _popupMountRef$curren6.popupsScrollableElement,
           onUndoRedo: onUndoRedo,
-          reopenQuery: reopenQuery
+          reopenQuery: reopenQuery,
+          api: api
         })), typeaheadComponent);
       }
       shouldFocusCursorInsideQuery = false;

package/dist/cjs/pm-plugins/item-is-disabled.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.itemIsDisabled = void 0;
+var itemIsDisabled = exports.itemIsDisabled = function itemIsDisabled(item, api) {
+  var _api$connectivity;
+  var isOffline = (api === null || api === void 0 || (_api$connectivity = api.connectivity) === null || _api$connectivity === void 0 || (_api$connectivity = _api$connectivity.sharedState.currentState()) === null || _api$connectivity === void 0 ? void 0 : _api$connectivity.mode) === 'offline';
+  return isOffline && (item === null || item === void 0 ? void 0 : item.isDisabledOffline) === true;
+};

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

@@ -31,12 +31,14 @@ function createPlugin(_ref) {
     popupMountRef = _ref.popupMountRef,
     typeAheadHandlers = _ref.typeAheadHandlers,
     getIntl = _ref.getIntl,
-    nodeViewPortalProviderAPI = _ref.nodeViewPortalProviderAPI;
+    nodeViewPortalProviderAPI = _ref.nodeViewPortalProviderAPI,
+    api = _ref.api;
   var intl = getIntl();
   var _factoryDecorations = (0, _decorations.factoryDecorations)({
       intl: intl,
       nodeViewPortalProviderAPI: nodeViewPortalProviderAPI,
-      popupMountRef: popupMountRef
+      popupMountRef: popupMountRef,
+      api: api
     }),
     createDecorations = _factoryDecorations.createDecorations,
     removeDecorations = _factoryDecorations.removeDecorations;

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

@@ -3,9 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.moveSelectedIndex = exports.isTypeAheadOpen = exports.isTypeAheadHandler = exports.isTypeAheadAllowed = exports.getTypeAheadQuery = exports.getTypeAheadListAriaLabels = exports.getTypeAheadHandler = exports.getPluginState = exports.findHandlerByTrigger = exports.findHandler = void 0;
+exports.skipForwardToSafeItem = exports.skipBackwardToSafeItem = exports.moveSelectedIndex = exports.isTypeAheadOpen = exports.isTypeAheadHandler = exports.isTypeAheadAllowed = exports.getTypeAheadQuery = exports.getTypeAheadListAriaLabels = exports.getTypeAheadHandler = exports.getPluginState = exports.findHandlerByTrigger = exports.findHandler = void 0;
 var _typeAhead = require("@atlaskit/editor-common/type-ahead");
 var _updateSelectedIndex = require("./commands/update-selected-index");
+var _itemIsDisabled = require("./item-is-disabled");
 var _key = require("./key");
 var _statsModifier = require("./stats-modifier");
 var isTypeAheadHandler = exports.isTypeAheadHandler = function isTypeAheadHandler(handler) {
@@ -44,6 +45,26 @@ var findHandler = exports.findHandler = function findHandler(id, state) {
     return h.id === id;
   }) || null;
 };
+var skipForwardToSafeItem = exports.skipForwardToSafeItem = function skipForwardToSafeItem(currentIndex, nextIndex, listSize, itemIsDisabled) {
+  // Use a loop to find the next selectable item
+  for (var idx = nextIndex; idx < listSize; idx++) {
+    if (!itemIsDisabled(idx)) {
+      return idx;
+    }
+  }
+  // If no selectable items are found, return currentIndex
+  return currentIndex;
+};
+var skipBackwardToSafeItem = exports.skipBackwardToSafeItem = function skipBackwardToSafeItem(currentIndex, nextIndex, 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;
+    }
+  }
+  // If no non-selectable items are found, return currentIndex
+  return currentIndex;
+};
 var findHandlerByTrigger = exports.findHandlerByTrigger = function findHandlerByTrigger(_ref) {
   var trigger = _ref.trigger,
     editorState = _ref.editorState;
@@ -58,7 +79,8 @@ var findHandlerByTrigger = exports.findHandlerByTrigger = function findHandlerBy
 };
 var moveSelectedIndex = exports.moveSelectedIndex = function moveSelectedIndex(_ref2) {
   var editorView = _ref2.editorView,
-    direction = _ref2.direction;
+    direction = _ref2.direction,
+    api = _ref2.api;
   return function () {
     var typeAheadState = getPluginState(editorView.state);
     if (!typeAheadState) {
@@ -68,6 +90,9 @@ var moveSelectedIndex = exports.moveSelectedIndex = function moveSelectedIndex(_
       items = typeAheadState.items;
     var stats = typeAheadState.stats instanceof _statsModifier.StatsModifier ? typeAheadState.stats : new _statsModifier.StatsModifier();
     var nextIndex;
+    var isDisabled = function isDisabled(idx) {
+      return (0, _itemIsDisabled.itemIsDisabled)(items[idx], api);
+    };
     if (direction === 'next') {
       stats.increaseArrowDown();
 
@@ -83,15 +108,19 @@ var moveSelectedIndex = exports.moveSelectedIndex = function moveSelectedIndex(_
        *
        */
       if (selectedIndex === -1 && items.length > 1) {
-        nextIndex = 1;
+        // If the first item is disabled we actually want to skip to the 3rd item
+        // on the first arrow down
+        nextIndex = isDisabled(0) && items.length > 2 ? 2 : 1;
       } else {
         nextIndex = selectedIndex >= items.length - 1 ? 0 : selectedIndex + 1;
       }
+      nextIndex = skipForwardToSafeItem(selectedIndex, nextIndex, items.length, isDisabled);
     } else {
       stats.increaseArrowUp();
       nextIndex = selectedIndex <= 0 ? items.length - 1 : selectedIndex - 1;
+      nextIndex = skipBackwardToSafeItem(selectedIndex, nextIndex, isDisabled);
     }
-    (0, _updateSelectedIndex.updateSelectedIndex)(nextIndex)(editorView.state, editorView.dispatch);
+    (0, _updateSelectedIndex.updateSelectedIndex)(nextIndex, api)(editorView.state, editorView.dispatch);
   };
 };
 var getTypeAheadListAriaLabels = exports.getTypeAheadListAriaLabels = function getTypeAheadListAriaLabels(trigger, intl, item) {

package/dist/cjs/typeAheadPlugin.js

@@ -170,7 +170,8 @@ var typeAheadPlugin = exports.typeAheadPlugin = function typeAheadPlugin(_ref) {
             popupMountRef: popupMountRef,
             reactDispatch: dispatch,
             typeAheadHandlers: typeAhead,
-            nodeViewPortalProviderAPI: nodeViewPortalProviderAPI
+            nodeViewPortalProviderAPI: nodeViewPortalProviderAPI,
+            api: api
           });
         }
       }, {

package/dist/cjs/ui/TypeAheadList.js

@@ -59,7 +59,8 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref2) {
     fitHeight = _ref2.fitHeight,
     decorationElement = _ref2.decorationElement,
     triggerHandler = _ref2.triggerHandler,
-    moreElementsInQuickInsertViewEnabled = _ref2.moreElementsInQuickInsertViewEnabled;
+    moreElementsInQuickInsertViewEnabled = _ref2.moreElementsInQuickInsertViewEnabled,
+    api = _ref2.api;
   var listRef = (0, _react.useRef)();
   var listContainerRef = (0, _react.useRef)(null);
   var lastVisibleIndexes = (0, _react.useRef)({
@@ -94,22 +95,24 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref2) {
   var focusTargetElement = (0, _react.useCallback)(function () {
     var _decorationElement$qu;
     //To reset the selected index
-    (0, _updateSelectedIndex.updateSelectedIndex)(-1)(editorView.state, editorView.dispatch);
+    (0, _updateSelectedIndex.updateSelectedIndex)(-1, api)(editorView.state, editorView.dispatch);
     listRef.current.scrollToRow(0);
     decorationElement === null || decorationElement === void 0 || (_decorationElement$qu = decorationElement.querySelector("[role='combobox']")) === null || _decorationElement$qu === void 0 || _decorationElement$qu.focus();
-  }, [editorView, listRef, decorationElement]);
+  }, [editorView, listRef, decorationElement, api]);
   var selectNextItem = (0, _react.useMemo)(function () {
     return (0, _utils.moveSelectedIndex)({
       editorView: editorView,
-      direction: 'next'
+      direction: 'next',
+      api: api
     });
-  }, [editorView]);
+  }, [editorView, api]);
   var selectPreviousItem = (0, _react.useMemo)(function () {
     return (0, _utils.moveSelectedIndex)({
       editorView: editorView,
-      direction: 'previous'
+      direction: 'previous',
+      api: api
     });
-  }, [editorView]);
+  }, [editorView, api]);
   var lastVisibleStartIndex = lastVisibleIndexes.current.startIndex;
   var lastVisibleStopIndex = lastVisibleIndexes.current.stopIndex;
   var onScroll = (0, _react.useCallback)(
@@ -149,7 +152,7 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref2) {
     if (selectedIndex === index) {
       return;
     }
-    (0, _updateSelectedIndex.updateSelectedIndex)(index)(editorView.state, editorView.dispatch);
+    (0, _updateSelectedIndex.updateSelectedIndex)(index, api)(editorView.state, editorView.dispatch);
   };
   (0, _react.useLayoutEffect)(function () {
     if (!listRef.current) {
@@ -235,6 +238,11 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref2) {
       element === null || element === void 0 || element.removeEventListener('keydown', handleKeyDown);
     };
   }, [editorView.state, focusTargetElement, selectNextItem, selectPreviousItem, selectedIndex, onItemClick, items.length]);
+  var firstOnlineSupportedRow = (0, _react.useMemo)(function () {
+    return items.findIndex(function (item) {
+      return item.isDisabledOffline !== true;
+    });
+  }, [items]);
   var renderRow = function renderRow(_ref4) {
     var index = _ref4.index,
       key = _ref4.key,
@@ -258,12 +266,14 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref2) {
     }, (0, _react2.jsx)(_TypeAheadListItem.TypeAheadListItem, {
       key: items[index].title,
       item: currentItem,
+      firstOnlineSupportedIndex: firstOnlineSupportedRow,
       itemsLength: items.length,
       itemIndex: index,
       selectedIndex: selectedIndex,
       onItemClick: actions.onItemClick,
       ariaLabel: (0, _utils.getTypeAheadListAriaLabels)(triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.trigger, intl, currentItem).listItemAriaLabel,
-      moreElementsInQuickInsertViewEnabled: moreElementsInQuickInsertViewEnabled
+      moreElementsInQuickInsertViewEnabled: moreElementsInQuickInsertViewEnabled,
+      api: api
     }))));
   };
   var popupAriaLabel = (0, _utils.getTypeAheadListAriaLabels)(triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.trigger, intl).popupAriaLabel;

package/dist/cjs/ui/TypeAheadListItem.js

@@ -10,14 +10,14 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
+var _hooks = require("@atlaskit/editor-common/hooks");
 var _quickInsert = require("@atlaskit/editor-common/quick-insert");
 var _typeAhead = require("@atlaskit/editor-common/type-ahead");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _shortcut = require("@atlaskit/editor-shared-styles/shortcut");
 var _menu = require("@atlaskit/menu");
 var _colors = require("@atlaskit/theme/colors");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4; // Disabling for ED-21403 fixing accessibility issue.
-/* eslint-disable jsx-a11y/role-supports-aria-props */
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -111,6 +111,9 @@ var selectionFrame = {
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Ignored via go/DSP-18766
 var selectedStyle = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\tbackground-color: ", ";\n\tbox-shadow: inset 2px 0px 0px ", ";\n"])), "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N30, ")"), "var(--ds-border-focused, ".concat(_colors.B400, ")"));
+var disabledStyle = (0, _react2.css)({
+  color: "var(--ds-text-disabled, #091E424F)"
+});
 var FallbackIcon = /*#__PURE__*/_react.default.memo(function (_ref) {
   var label = _ref.label;
   return (0, _react2.jsx)(_quickInsert.IconFallback, null);
@@ -119,6 +122,7 @@ var noop = function noop() {};
 var CustomItemComponentWrapper = /*#__PURE__*/_react.default.memo(function (props) {
   var customRenderItem = props.customRenderItem,
     isSelected = props.isSelected,
+    itemIsDisabled = props.itemIsDisabled,
     ariaLabel = props.ariaLabel,
     itemsLength = props.itemsLength,
     customItemRef = props.customItemRef,
@@ -126,8 +130,8 @@ var CustomItemComponentWrapper = /*#__PURE__*/_react.default.memo(function (prop
     itemIndex = props.itemIndex;
   var Comp = customRenderItem;
   var listItemClasses = (0, _react.useMemo)(function () {
-    return [customRenderItemDivStyle, isSelected && selectedStyle];
-  }, [isSelected]);
+    return [customRenderItemDivStyle, isSelected && !itemIsDisabled && selectedStyle, itemIsDisabled && disabledStyle];
+  }, [isSelected, itemIsDisabled]);
   return (0, _react2.jsx)("div", {
     "aria-selected": isSelected,
     role: "option",
@@ -160,12 +164,29 @@ var TypeAheadListItem = exports.TypeAheadListItem = /*#__PURE__*/_react.default.
     onItemClick = _ref2.onItemClick,
     itemIndex = _ref2.itemIndex,
     ariaLabel = _ref2.ariaLabel,
-    moreElementsInQuickInsertViewEnabled = _ref2.moreElementsInQuickInsertViewEnabled;
+    moreElementsInQuickInsertViewEnabled = _ref2.moreElementsInQuickInsertViewEnabled,
+    api = _ref2.api,
+    firstOnlineSupportedIndex = _ref2.firstOnlineSupportedIndex;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['connectivity']),
+    connectivityState = _useSharedPluginState.connectivityState;
+  var isItemDisabled = function isItemDisabled(item) {
+    var _item$isDisabledOffli;
+    return (connectivityState === null || connectivityState === void 0 ? void 0 : connectivityState.mode) === 'offline' && ((_item$isDisabledOffli = item === null || item === void 0 ? void 0 : item.isDisabledOffline) !== null && _item$isDisabledOffli !== void 0 ? _item$isDisabledOffli : false);
+  };
+  var itemIsDisabled = isItemDisabled(item);
+  var isFirstEnabledIndex = (connectivityState === null || connectivityState === void 0 ? void 0 : connectivityState.mode) === 'offline' && itemIndex === firstOnlineSupportedIndex && selectedIndex === -1;
+
   /**
    * To select and highlight the first Item when no item is selected
    * However selectedIndex remains -1, So that user does not skip the first item when down arrow key is used from typeahead query(inputQuery.tsx)
    */
-  var isSelected = itemIndex === selectedIndex || selectedIndex === -1 && itemIndex === 0;
+  var isSelected = false;
+  // Feature gated - connectivity is only available on desktop and behind a feature gate on full page mode
+  if (connectivityState === undefined) {
+    isSelected = itemIndex === selectedIndex || selectedIndex === -1 && itemIndex === 0;
+  } else {
+    isSelected = itemIndex === selectedIndex || selectedIndex === -1 && (itemIndex === 0 || isFirstEnabledIndex) && !itemIsDisabled;
+  }
 
   // Assistive text
   var intl = (0, _reactIntlNext.useIntl)();
@@ -182,14 +203,17 @@ var TypeAheadListItem = exports.TypeAheadListItem = /*#__PURE__*/_react.default.
     }));
   }, [icon, title, moreElementsInQuickInsertViewEnabled]);
   var insertSelectedItem = (0, _react.useCallback)(function () {
+    if (itemIsDisabled) {
+      return;
+    }
     onItemClick(_typeAhead.SelectItemMode.SELECTED, itemIndex);
-  }, [onItemClick, itemIndex]);
+  }, [onItemClick, itemIndex, itemIsDisabled]);
   var customItemRef = _react.default.useRef(null);
   var buttonItemRef = _react.default.useRef(null);
-  var shouldUpdateFocus = selectedIndex === itemIndex;
+  var shouldUpdateFocus = selectedIndex === itemIndex && !isFirstEnabledIndex;
   var listItemClasses = (0, _react.useMemo)(function () {
-    return [selectionFrame, isSelected && selectedStyle];
-  }, [isSelected]);
+    return [selectionFrame, isSelected && !itemIsDisabled && selectedStyle];
+  }, [isSelected, itemIsDisabled]);
   (0, _react.useLayoutEffect)(function () {
     if (shouldUpdateFocus) {
       var _customItemRef$curren;
@@ -204,6 +228,7 @@ var TypeAheadListItem = exports.TypeAheadListItem = /*#__PURE__*/_react.default.
   }, [buttonItemRef, shouldUpdateFocus]);
   if (customRenderItem) {
     return (0, _react2.jsx)(CustomItemComponentWrapper, {
+      itemIsDisabled: itemIsDisabled,
       customRenderItem: customRenderItem,
       isSelected: isSelected,
       ariaLabel: ariaLabel,
@@ -231,7 +256,8 @@ var TypeAheadListItem = exports.TypeAheadListItem = /*#__PURE__*/_react.default.
       "aria-setsize": itemsLength,
       "aria-posinset": itemIndex,
       role: "option",
-      ref: buttonItemRef
+      ref: buttonItemRef,
+      isDisabled: itemIsDisabled
       // @ts-ignore
       ,
       css: listItemClasses
@@ -242,13 +268,13 @@ var TypeAheadListItem = exports.TypeAheadListItem = /*#__PURE__*/_react.default.
     }, (0, _react2.jsx)("div", {
       css: itemBody
     }, (0, _react2.jsx)("div", {
-      css: [itemTitle, moreElementsInQuickInsertViewEnabled && itemTitleOverride]
+      css: [itemTitle, moreElementsInQuickInsertViewEnabled && itemTitleOverride, itemIsDisabled && disabledStyle]
     }, item.title), (0, _react2.jsx)("div", {
       css: itemAfter
     }, item.keyshortcut && (0, _react2.jsx)("div", {
       css: _shortcut.shortcutStyle
     }, item.keyshortcut))), (0, _react2.jsx)("div", {
-      css: [itemDescription, moreElementsInQuickInsertViewEnabled && itemDescriptionOverride]
+      css: [itemDescription, moreElementsInQuickInsertViewEnabled && itemDescriptionOverride, itemIsDisabled && disabledStyle]
     }, item.description)))))
   );
 });

package/dist/cjs/ui/TypeAheadMenu.js

@@ -24,7 +24,7 @@ var TypeAheadMenu = exports.TypeAheadMenu = /*#__PURE__*/_react.default.memo(fun
     decorationElement = typeAheadState.decorationElement,
     decorationSet = typeAheadState.decorationSet,
     query = typeAheadState.query;
-  var _useItemInsert = (0, _useItemInsert3.useItemInsert)(triggerHandler, editorView, items),
+  var _useItemInsert = (0, _useItemInsert3.useItemInsert)(triggerHandler, editorView, items, api),
     _useItemInsert2 = (0, _slicedToArray2.default)(_useItemInsert, 3),
     onItemInsert = _useItemInsert2[0],
     onTextInsert = _useItemInsert2[1],
@@ -32,9 +32,9 @@ var TypeAheadMenu = exports.TypeAheadMenu = /*#__PURE__*/_react.default.memo(fun
   var setSelectedItem = _react.default.useCallback(function (_ref2) {
     var nextIndex = _ref2.index;
     queueMicrotask(function () {
-      (0, _updateSelectedIndex.updateSelectedIndex)(nextIndex)(editorView.state, editorView.dispatch);
+      (0, _updateSelectedIndex.updateSelectedIndex)(nextIndex, api)(editorView.state, editorView.dispatch);
     });
-  }, [editorView]);
+  }, [editorView, api]);
   var insertItem = _react.default.useCallback(function () {
     var mode = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _typeAhead.SelectItemMode.SELECTED;
     var index = arguments.length > 1 ? arguments[1] : undefined;

package/dist/cjs/ui/TypeAheadPopup.js

@@ -234,7 +234,9 @@ var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(f
     ariaLabel: null,
     preventOverflow: true
   }, (0, _react2.jsx)("div", {
-    css: [typeAheadContent, moreElementsInQuickInsertViewEnabled && typeAheadContentOverride],
+    css: [typeAheadContent, moreElementsInQuickInsertViewEnabled && typeAheadContentOverride]
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+    ,
     tabIndex: 0
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
@@ -251,7 +253,8 @@ var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(f
     editorView: editorView,
     decorationElement: anchorElement,
     triggerHandler: triggerHandler,
-    moreElementsInQuickInsertViewEnabled: moreElementsInQuickInsertViewEnabled
+    moreElementsInQuickInsertViewEnabled: moreElementsInQuickInsertViewEnabled,
+    api: api
   })));
 });
 TypeAheadPopup.displayName = 'TypeAheadPopup';

package/dist/cjs/ui/WrapperTypeAhead.js

@@ -10,6 +10,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireWildcard(require("react"));
 var _typeAhead = require("@atlaskit/editor-common/type-ahead");
 var _updateQuery = require("../pm-plugins/commands/update-query");
+var _itemIsDisabled = require("../pm-plugins/item-is-disabled");
 var _utils = require("../pm-plugins/utils");
 var _useItemInsert3 = require("./hooks/use-item-insert");
 var _useLoadItems = require("./hooks/use-load-items");
@@ -28,7 +29,8 @@ var WrapperTypeAhead = exports.WrapperTypeAhead = /*#__PURE__*/_react.default.me
     inputMethod = _ref.inputMethod,
     getDecorationPosition = _ref.getDecorationPosition,
     reopenQuery = _ref.reopenQuery,
-    onUndoRedo = _ref.onUndoRedo;
+    onUndoRedo = _ref.onUndoRedo,
+    api = _ref.api;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     closed = _useState2[0],
@@ -43,22 +45,24 @@ var WrapperTypeAhead = exports.WrapperTypeAhead = /*#__PURE__*/_react.default.me
   (0, _react.useLayoutEffect)(function () {
     queryRef.current = query;
   }, [query]);
-  var _useItemInsert = (0, _useItemInsert3.useItemInsert)(triggerHandler, editorView, items),
+  var _useItemInsert = (0, _useItemInsert3.useItemInsert)(triggerHandler, editorView, items, api),
     _useItemInsert2 = (0, _slicedToArray2.default)(_useItemInsert, 2),
     onItemInsert = _useItemInsert2[0],
     onTextInsert = _useItemInsert2[1];
   var selectNextItem = (0, _react.useMemo)(function () {
     return (0, _utils.moveSelectedIndex)({
       editorView: editorView,
-      direction: 'next'
+      direction: 'next',
+      api: api
     });
-  }, [editorView]);
+  }, [editorView, api]);
   var selectPreviousItem = (0, _react.useMemo)(function () {
     return (0, _utils.moveSelectedIndex)({
       editorView: editorView,
-      direction: 'previous'
+      direction: 'previous',
+      api: api
     });
-  }, [editorView]);
+  }, [editorView, api]);
   var cancel = (0, _react.useCallback)(function (_ref2) {
     var setSelectionAt = _ref2.setSelectionAt,
       addPrefixTrigger = _ref2.addPrefixTrigger,
@@ -77,6 +81,13 @@ var WrapperTypeAhead = exports.WrapperTypeAhead = /*#__PURE__*/_react.default.me
     var view = editorViewRef.current;
     var _ref3 = (0, _utils.getPluginState)(view.state),
       selectedIndex = _ref3.selectedIndex;
+    var safeSelectedIndex = (0, _utils.skipForwardToSafeItem)(selectedIndex, 1, items.length, function (idx) {
+      return (0, _itemIsDisabled.itemIsDisabled)(items[idx], api);
+    });
+    // If the only safe index is -1 then none are safe - do not insert item
+    if (safeSelectedIndex === -1) {
+      return;
+    }
     setClosed(true);
     queueMicrotask(function () {
       onItemInsert({
@@ -85,7 +96,7 @@ var WrapperTypeAhead = exports.WrapperTypeAhead = /*#__PURE__*/_react.default.me
         query: queryRef.current
       });
     });
-  }, [onItemInsert]);
+  }, [onItemInsert, api, items]);
   var showTypeAheadPopupList = (0, _react.useCallback)(function () {}, []);
   var closePopup = (0, _react.useCallback)(function () {
     setClosed(true);

package/dist/cjs/ui/hooks/use-item-insert.js

@@ -10,6 +10,7 @@ var _closeTypeAhead = require("../../pm-plugins/commands/close-type-ahead");
 var _insertTypeAheadItem = require("../../pm-plugins/commands/insert-type-ahead-item");
 var _setSelectionBeforeQuery = require("../../pm-plugins/commands/set-selection-before-query");
 var _constants = require("../../pm-plugins/constants");
+var _itemIsDisabled = require("../../pm-plugins/item-is-disabled");
 var insertRawQuery = function insertRawQuery(_ref) {
   var view = _ref.view,
     setSelectionAt = _ref.setSelectionAt,
@@ -30,7 +31,7 @@ var insertRawQuery = function insertRawQuery(_ref) {
     view.focus();
   }
 };
-var useItemInsert = exports.useItemInsert = function useItemInsert(triggerHandler, editorView, items) {
+var useItemInsert = exports.useItemInsert = function useItemInsert(triggerHandler, editorView, items, api) {
   var editorViewRef = (0, _react.useRef)(editorView);
   var itemsRef = (0, _react.useRef)(items);
   var onTextInsert = (0, _react.useCallback)(function (_ref2) {
@@ -66,6 +67,10 @@ var useItemInsert = exports.useItemInsert = function useItemInsert(triggerHandle
     if (!itemToInsert) {
       return;
     }
+    var isDisabled = (0, _itemIsDisabled.itemIsDisabled)(itemToInsert, api);
+    if (isDisabled) {
+      return;
+    }
     var view = editorViewRef.current;
     (0, _insertTypeAheadItem.insertTypeAheadItem)(view)({
       item: itemToInsert,
@@ -74,7 +79,7 @@ var useItemInsert = exports.useItemInsert = function useItemInsert(triggerHandle
       query: query,
       sourceListItem: sourceListItem
     });
-  }, [triggerHandler, onTextInsert]);
+  }, [triggerHandler, onTextInsert, api]);
   var onItemMatch = (0, _react.useCallback)(function (_ref4) {
     var mode = _ref4.mode,
       query = _ref4.query;

package/dist/es2019/pm-plugins/commands/update-selected-index.js

@@ -1,11 +1,17 @@
 import { ACTIONS } from '../actions';
+import { itemIsDisabled } from '../item-is-disabled';
 import { pluginKey as typeAheadPluginKey } from '../key';
-export const updateSelectedIndex = selectedIndex => {
+export const updateSelectedIndex = (selectedIndex, api) => {
   return (state, dispatch) => {
     const pluginState = typeAheadPluginKey.getState(state);
     if ((pluginState === null || pluginState === void 0 ? void 0 : pluginState.selectedIndex) === selectedIndex) {
       return false;
     }
+
+    // If the new index is disabled ignore this call, we can use the previous index
+    if (itemIsDisabled(pluginState === null || pluginState === void 0 ? void 0 : pluginState.items[selectedIndex], api)) {
+      return false;
+    }
     const tr = state.tr;
     tr.setMeta(typeAheadPluginKey, {
       action: ACTIONS.UPDATE_SELECTED_INDEX,

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

@@ -16,7 +16,8 @@ import { getTypeAheadQuery } from './utils';
 export const factoryDecorations = ({
   intl,
   popupMountRef,
-  nodeViewPortalProviderAPI
+  nodeViewPortalProviderAPI,
+  api
 }) => {
   const createDecorations = (tr, {
     triggerHandler,
@@ -95,7 +96,8 @@ export const factoryDecorations = ({
             popupsBoundariesElement: (_popupMountRef$curren2 = popupMountRef.current) === null || _popupMountRef$curren2 === void 0 ? void 0 : _popupMountRef$curren2.popupsBoundariesElement,
             popupsScrollableElement: (_popupMountRef$curren3 = popupMountRef.current) === null || _popupMountRef$curren3 === void 0 ? void 0 : _popupMountRef$curren3.popupsScrollableElement,
             onUndoRedo: onUndoRedo,
-            reopenQuery: reopenQuery
+            reopenQuery: reopenQuery,
+            api: api
           }));
         }, typeaheadComponent, decorationId);
       } else {
@@ -115,7 +117,8 @@ export const factoryDecorations = ({
           popupsBoundariesElement: (_popupMountRef$curren5 = popupMountRef.current) === null || _popupMountRef$curren5 === void 0 ? void 0 : _popupMountRef$curren5.popupsBoundariesElement,
           popupsScrollableElement: (_popupMountRef$curren6 = popupMountRef.current) === null || _popupMountRef$curren6 === void 0 ? void 0 : _popupMountRef$curren6.popupsScrollableElement,
           onUndoRedo: onUndoRedo,
-          reopenQuery: reopenQuery
+          reopenQuery: reopenQuery,
+          api: api
         })), typeaheadComponent);
       }
       shouldFocusCursorInsideQuery = false;

package/dist/es2019/pm-plugins/item-is-disabled.js

@@ -0,0 +1,5 @@
+export const itemIsDisabled = (item, api) => {
+  var _api$connectivity, _api$connectivity$sha;
+  const isOffline = (api === null || api === void 0 ? void 0 : (_api$connectivity = api.connectivity) === null || _api$connectivity === void 0 ? void 0 : (_api$connectivity$sha = _api$connectivity.sharedState.currentState()) === null || _api$connectivity$sha === void 0 ? void 0 : _api$connectivity$sha.mode) === 'offline';
+  return isOffline && (item === null || item === void 0 ? void 0 : item.isDisabledOffline) === true;
+};

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

@@ -23,7 +23,8 @@ export function createPlugin({
   popupMountRef,
   typeAheadHandlers,
   getIntl,
-  nodeViewPortalProviderAPI
+  nodeViewPortalProviderAPI,
+  api
 }) {
   const intl = getIntl();
   const {
@@ -32,7 +33,8 @@ export function createPlugin({
   } = factoryDecorations({
     intl,
     nodeViewPortalProviderAPI,
-    popupMountRef
+    popupMountRef,
+    api
   });
   const reducer = createReducer({
     createDecorations,