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

package/dist/esm/ui/TypeAheadListItem.js

@@ -1,7 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-// Disabling for ED-21403 fixing accessibility issue.
-/* eslint-disable jsx-a11y/role-supports-aria-props */
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -11,6 +9,7 @@ import React, { useCallback, useLayoutEffect, useMemo } from 'react';
 // 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 { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { IconFallback } from '@atlaskit/editor-common/quick-insert';
 import { SelectItemMode, typeAheadListMessages } from '@atlaskit/editor-common/type-ahead';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
@@ -103,6 +102,9 @@ var selectionFrame = {
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Ignored via go/DSP-18766
 var selectedStyle = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n\tbackground-color: ", ";\n\tbox-shadow: inset 2px 0px 0px ", ";\n"])), "var(--ds-background-neutral-subtle-hovered, ".concat(N30, ")"), "var(--ds-border-focused, ".concat(B400, ")"));
+var disabledStyle = css({
+  color: "var(--ds-text-disabled, #091E424F)"
+});
 var FallbackIcon = /*#__PURE__*/React.memo(function (_ref) {
   var label = _ref.label;
   return jsx(IconFallback, null);
@@ -111,6 +113,7 @@ var noop = function noop() {};
 var CustomItemComponentWrapper = /*#__PURE__*/React.memo(function (props) {
   var customRenderItem = props.customRenderItem,
     isSelected = props.isSelected,
+    itemIsDisabled = props.itemIsDisabled,
     ariaLabel = props.ariaLabel,
     itemsLength = props.itemsLength,
     customItemRef = props.customItemRef,
@@ -118,8 +121,8 @@ var CustomItemComponentWrapper = /*#__PURE__*/React.memo(function (props) {
     itemIndex = props.itemIndex;
   var Comp = customRenderItem;
   var listItemClasses = useMemo(function () {
-    return [customRenderItemDivStyle, isSelected && selectedStyle];
-  }, [isSelected]);
+    return [customRenderItemDivStyle, isSelected && !itemIsDisabled && selectedStyle, itemIsDisabled && disabledStyle];
+  }, [isSelected, itemIsDisabled]);
   return jsx("div", {
     "aria-selected": isSelected,
     role: "option",
@@ -152,12 +155,29 @@ export var TypeAheadListItem = /*#__PURE__*/React.memo(function (_ref2) {
     onItemClick = _ref2.onItemClick,
     itemIndex = _ref2.itemIndex,
     ariaLabel = _ref2.ariaLabel,
-    moreElementsInQuickInsertViewEnabled = _ref2.moreElementsInQuickInsertViewEnabled;
+    moreElementsInQuickInsertViewEnabled = _ref2.moreElementsInQuickInsertViewEnabled,
+    api = _ref2.api,
+    firstOnlineSupportedIndex = _ref2.firstOnlineSupportedIndex;
+  var _useSharedPluginState = 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 = useIntl();
@@ -174,14 +194,17 @@ export var TypeAheadListItem = /*#__PURE__*/React.memo(function (_ref2) {
     }));
   }, [icon, title, moreElementsInQuickInsertViewEnabled]);
   var insertSelectedItem = useCallback(function () {
+    if (itemIsDisabled) {
+      return;
+    }
     onItemClick(SelectItemMode.SELECTED, itemIndex);
-  }, [onItemClick, itemIndex]);
+  }, [onItemClick, itemIndex, itemIsDisabled]);
   var customItemRef = React.useRef(null);
   var buttonItemRef = React.useRef(null);
-  var shouldUpdateFocus = selectedIndex === itemIndex;
+  var shouldUpdateFocus = selectedIndex === itemIndex && !isFirstEnabledIndex;
   var listItemClasses = useMemo(function () {
-    return [selectionFrame, isSelected && selectedStyle];
-  }, [isSelected]);
+    return [selectionFrame, isSelected && !itemIsDisabled && selectedStyle];
+  }, [isSelected, itemIsDisabled]);
   useLayoutEffect(function () {
     if (shouldUpdateFocus) {
       var _customItemRef$curren;
@@ -196,6 +219,7 @@ export var TypeAheadListItem = /*#__PURE__*/React.memo(function (_ref2) {
   }, [buttonItemRef, shouldUpdateFocus]);
   if (customRenderItem) {
     return jsx(CustomItemComponentWrapper, {
+      itemIsDisabled: itemIsDisabled,
       customRenderItem: customRenderItem,
       isSelected: isSelected,
       ariaLabel: ariaLabel,
@@ -223,7 +247,8 @@ export var TypeAheadListItem = /*#__PURE__*/React.memo(function (_ref2) {
       "aria-setsize": itemsLength,
       "aria-posinset": itemIndex,
       role: "option",
-      ref: buttonItemRef
+      ref: buttonItemRef,
+      isDisabled: itemIsDisabled
       // @ts-ignore
       ,
       css: listItemClasses
@@ -234,13 +259,13 @@ export var TypeAheadListItem = /*#__PURE__*/React.memo(function (_ref2) {
     }, jsx("div", {
       css: itemBody
     }, jsx("div", {
-      css: [itemTitle, moreElementsInQuickInsertViewEnabled && itemTitleOverride]
+      css: [itemTitle, moreElementsInQuickInsertViewEnabled && itemTitleOverride, itemIsDisabled && disabledStyle]
     }, item.title), jsx("div", {
       css: itemAfter
     }, item.keyshortcut && jsx("div", {
       css: shortcutStyle
     }, item.keyshortcut))), jsx("div", {
-      css: [itemDescription, moreElementsInQuickInsertViewEnabled && itemDescriptionOverride]
+      css: [itemDescription, moreElementsInQuickInsertViewEnabled && itemDescriptionOverride, itemIsDisabled && disabledStyle]
     }, item.description)))))
   );
 });

package/dist/esm/ui/TypeAheadMenu.js

@@ -17,7 +17,7 @@ export var TypeAheadMenu = /*#__PURE__*/React.memo(function (_ref) {
     decorationElement = typeAheadState.decorationElement,
     decorationSet = typeAheadState.decorationSet,
     query = typeAheadState.query;
-  var _useItemInsert = useItemInsert(triggerHandler, editorView, items),
+  var _useItemInsert = useItemInsert(triggerHandler, editorView, items, api),
     _useItemInsert2 = _slicedToArray(_useItemInsert, 3),
     onItemInsert = _useItemInsert2[0],
     onTextInsert = _useItemInsert2[1],
@@ -25,9 +25,9 @@ export var TypeAheadMenu = /*#__PURE__*/React.memo(function (_ref) {
   var setSelectedItem = React.useCallback(function (_ref2) {
     var nextIndex = _ref2.index;
     queueMicrotask(function () {
-      updateSelectedIndex(nextIndex)(editorView.state, editorView.dispatch);
+      updateSelectedIndex(nextIndex, api)(editorView.state, editorView.dispatch);
     });
-  }, [editorView]);
+  }, [editorView, api]);
   var insertItem = React.useCallback(function () {
     var mode = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : SelectItemMode.SELECTED;
     var index = arguments.length > 1 ? arguments[1] : undefined;

package/dist/esm/ui/TypeAheadPopup.js

@@ -223,7 +223,9 @@ export var TypeAheadPopup = /*#__PURE__*/React.memo(function (props) {
     ariaLabel: null,
     preventOverflow: true
   }, 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
     ,
@@ -240,7 +242,8 @@ export var TypeAheadPopup = /*#__PURE__*/React.memo(function (props) {
     editorView: editorView,
     decorationElement: anchorElement,
     triggerHandler: triggerHandler,
-    moreElementsInQuickInsertViewEnabled: moreElementsInQuickInsertViewEnabled
+    moreElementsInQuickInsertViewEnabled: moreElementsInQuickInsertViewEnabled,
+    api: api
   })));
 });
 TypeAheadPopup.displayName = 'TypeAheadPopup';

package/dist/esm/ui/WrapperTypeAhead.js

@@ -2,7 +2,8 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
 import { updateQuery } from '../pm-plugins/commands/update-query';
-import { getPluginState, moveSelectedIndex } from '../pm-plugins/utils';
+import { itemIsDisabled } from '../pm-plugins/item-is-disabled';
+import { getPluginState, moveSelectedIndex, skipForwardToSafeItem } from '../pm-plugins/utils';
 import { useItemInsert } from './hooks/use-item-insert';
 import { useLoadItems } from './hooks/use-load-items';
 import { useOnForceSelect } from './hooks/use-on-force-select';
@@ -18,7 +19,8 @@ export var WrapperTypeAhead = /*#__PURE__*/React.memo(function (_ref) {
     inputMethod = _ref.inputMethod,
     getDecorationPosition = _ref.getDecorationPosition,
     reopenQuery = _ref.reopenQuery,
-    onUndoRedo = _ref.onUndoRedo;
+    onUndoRedo = _ref.onUndoRedo,
+    api = _ref.api;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     closed = _useState2[0],
@@ -33,22 +35,24 @@ export var WrapperTypeAhead = /*#__PURE__*/React.memo(function (_ref) {
   useLayoutEffect(function () {
     queryRef.current = query;
   }, [query]);
-  var _useItemInsert = useItemInsert(triggerHandler, editorView, items),
+  var _useItemInsert = useItemInsert(triggerHandler, editorView, items, api),
     _useItemInsert2 = _slicedToArray(_useItemInsert, 2),
     onItemInsert = _useItemInsert2[0],
     onTextInsert = _useItemInsert2[1];
   var selectNextItem = useMemo(function () {
     return moveSelectedIndex({
       editorView: editorView,
-      direction: 'next'
+      direction: 'next',
+      api: api
     });
-  }, [editorView]);
+  }, [editorView, api]);
   var selectPreviousItem = useMemo(function () {
     return moveSelectedIndex({
       editorView: editorView,
-      direction: 'previous'
+      direction: 'previous',
+      api: api
     });
-  }, [editorView]);
+  }, [editorView, api]);
   var cancel = useCallback(function (_ref2) {
     var setSelectionAt = _ref2.setSelectionAt,
       addPrefixTrigger = _ref2.addPrefixTrigger,
@@ -67,6 +71,13 @@ export var WrapperTypeAhead = /*#__PURE__*/React.memo(function (_ref) {
     var view = editorViewRef.current;
     var _ref3 = getPluginState(view.state),
       selectedIndex = _ref3.selectedIndex;
+    var safeSelectedIndex = skipForwardToSafeItem(selectedIndex, 1, items.length, function (idx) {
+      return 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({
@@ -75,7 +86,7 @@ export var WrapperTypeAhead = /*#__PURE__*/React.memo(function (_ref) {
         query: queryRef.current
       });
     });
-  }, [onItemInsert]);
+  }, [onItemInsert, api, items]);
   var showTypeAheadPopupList = useCallback(function () {}, []);
   var closePopup = useCallback(function () {
     setClosed(true);

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

@@ -4,6 +4,7 @@ import { closeTypeAhead } from '../../pm-plugins/commands/close-type-ahead';
 import { insertTypeAheadItem } from '../../pm-plugins/commands/insert-type-ahead-item';
 import { setSelectionBeforeQuery } from '../../pm-plugins/commands/set-selection-before-query';
 import { CloseSelectionOptions } from '../../pm-plugins/constants';
+import { itemIsDisabled } from '../../pm-plugins/item-is-disabled';
 var insertRawQuery = function insertRawQuery(_ref) {
   var view = _ref.view,
     setSelectionAt = _ref.setSelectionAt,
@@ -24,7 +25,7 @@ var insertRawQuery = function insertRawQuery(_ref) {
     view.focus();
   }
 };
-export var useItemInsert = function useItemInsert(triggerHandler, editorView, items) {
+export var useItemInsert = function useItemInsert(triggerHandler, editorView, items, api) {
   var editorViewRef = useRef(editorView);
   var itemsRef = useRef(items);
   var onTextInsert = useCallback(function (_ref2) {
@@ -60,6 +61,10 @@ export var useItemInsert = function useItemInsert(triggerHandler, editorView, it
     if (!itemToInsert) {
       return;
     }
+    var isDisabled = itemIsDisabled(itemToInsert, api);
+    if (isDisabled) {
+      return;
+    }
     var view = editorViewRef.current;
     insertTypeAheadItem(view)({
       item: itemToInsert,
@@ -68,7 +73,7 @@ export var useItemInsert = function useItemInsert(triggerHandler, editorView, it
       query: query,
       sourceListItem: sourceListItem
     });
-  }, [triggerHandler, onTextInsert]);
+  }, [triggerHandler, onTextInsert, api]);
   var onItemMatch = useCallback(function (_ref4) {
     var mode = _ref4.mode,
       query = _ref4.query;

package/dist/types/pm-plugins/commands/update-selected-index.d.ts

@@ -1,2 +1,3 @@
-import type { Command } from '@atlaskit/editor-common/types';
-export declare const updateSelectedIndex: (selectedIndex: number) => Command;
+import type { Command, ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { TypeAheadPlugin } from '../../typeAheadPluginType';
+export declare const updateSelectedIndex: (selectedIndex: number, api: ExtractInjectionAPI<TypeAheadPlugin> | undefined) => Command;

package/dist/types/pm-plugins/decorations.d.ts

@@ -1,14 +1,17 @@
 import type { IntlShape } from 'react-intl-next';
 import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { TypeAheadPlugin } from '../typeAheadPluginType';
 import type { CreateTypeAheadDecorations, PopupMountPointReference, RemoveTypeAheadDecorations } from '../types';
 type FactoryProps = {
     intl: IntlShape;
     popupMountRef: PopupMountPointReference;
     nodeViewPortalProviderAPI: PortalProviderAPI;
+    api: ExtractInjectionAPI<TypeAheadPlugin> | undefined;
 };
 type FactoryReturn = {
     createDecorations: CreateTypeAheadDecorations;
     removeDecorations: RemoveTypeAheadDecorations;
 };
-export declare const factoryDecorations: ({ intl, popupMountRef, nodeViewPortalProviderAPI, }: FactoryProps) => FactoryReturn;
+export declare const factoryDecorations: ({ intl, popupMountRef, nodeViewPortalProviderAPI, api, }: FactoryProps) => FactoryReturn;
 export {};

package/dist/types/pm-plugins/item-is-disabled.d.ts

@@ -0,0 +1,4 @@
+import { type ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { type TypeAheadPlugin } from '../typeAheadPluginType';
+import type { TypeAheadItem } from '../types';
+export declare const itemIsDisabled: (item: TypeAheadItem | undefined, api: ExtractInjectionAPI<TypeAheadPlugin> | undefined) => boolean;

package/dist/types/pm-plugins/main.d.ts

@@ -2,6 +2,8 @@ import type { IntlShape } from 'react-intl-next';
 import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
 import type { PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { type ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { type TypeAheadPlugin } from '../typeAheadPluginType';
 import type { PopupMountPointReference, TypeAheadHandler } from '../types';
 type Props = {
     reactDispatch: Dispatch;
@@ -9,6 +11,7 @@ type Props = {
     typeAheadHandlers: Array<TypeAheadHandler>;
     getIntl: () => IntlShape;
     nodeViewPortalProviderAPI: PortalProviderAPI;
+    api: ExtractInjectionAPI<TypeAheadPlugin> | undefined;
 };
-export declare function createPlugin({ reactDispatch, popupMountRef, typeAheadHandlers, getIntl, nodeViewPortalProviderAPI, }: Props): SafePlugin;
+export declare function createPlugin({ reactDispatch, popupMountRef, typeAheadHandlers, getIntl, nodeViewPortalProviderAPI, api, }: Props): SafePlugin;
 export {};

package/dist/types/pm-plugins/utils.d.ts

@@ -1,6 +1,8 @@
 import type { IntlShape } from 'react-intl-next';
+import { type ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { type TypeAheadPlugin } from '../typeAheadPluginType';
 import type { TypeAheadHandler, TypeAheadItem } from '../types';
 export declare const isTypeAheadHandler: (handler: any) => handler is TypeAheadHandler;
 /** Is a typeahead plugin open? */
@@ -10,6 +12,8 @@ export declare const getTypeAheadHandler: (editorState: EditorState) => TypeAhea
 export declare const getTypeAheadQuery: (editorState: EditorState) => string | undefined;
 export declare const isTypeAheadAllowed: (state: EditorState) => boolean;
 export declare const findHandler: (id: string, state: EditorState) => TypeAheadHandler | null;
+export declare const skipForwardToSafeItem: (currentIndex: number, nextIndex: number, listSize: number, itemIsDisabled: (idx: number) => boolean) => number;
+export declare const skipBackwardToSafeItem: (currentIndex: number, nextIndex: number, itemIsDisabled: (idx: number) => boolean) => number;
 export declare const findHandlerByTrigger: ({ trigger, editorState, }: {
     trigger: string;
     editorState: EditorState;
@@ -17,8 +21,9 @@ export declare const findHandlerByTrigger: ({ trigger, editorState, }: {
 type MoveSelectedIndexProps = {
     editorView: EditorView;
     direction: 'next' | 'previous';
+    api: ExtractInjectionAPI<TypeAheadPlugin> | undefined;
 };
-export declare const moveSelectedIndex: ({ editorView, direction }: MoveSelectedIndexProps) => () => void;
+export declare const moveSelectedIndex: ({ editorView, direction, api }: MoveSelectedIndexProps) => () => void;
 type TypeAheadAssistiveLabels = {
     popupAriaLabel: string;
     listItemAriaLabel?: string;

package/dist/types/typeAheadPluginType.d.ts

@@ -1,6 +1,7 @@
 import type { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
 import type { Command, NextEditorPlugin, OptionalPlugin, TypeAheadHandler, TypeAheadItem } from '@atlaskit/editor-common/types';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
+import type { ConnectivityPlugin } from '@atlaskit/editor-plugin-connectivity';
 import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
 import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
 import { type TypeAheadInputMethod, type TypeAheadPluginOptions, type TypeAheadPluginSharedState } from './types';
@@ -26,7 +27,11 @@ type CloseTypeAheadProps = {
  */
 export type TypeAheadPlugin = NextEditorPlugin<'typeAhead', {
     pluginConfiguration: TypeAheadPluginOptions | undefined;
-    dependencies: [OptionalPlugin<AnalyticsPlugin>, OptionalPlugin<FeatureFlagsPlugin>];
+    dependencies: [
+        OptionalPlugin<AnalyticsPlugin>,
+        OptionalPlugin<FeatureFlagsPlugin>,
+        OptionalPlugin<ConnectivityPlugin>
+    ];
     sharedState: TypeAheadPluginSharedState;
     actions: {
         isOpen: (editorState: EditorState) => boolean;

package/dist/types/ui/TypeAheadList.d.ts

@@ -5,7 +5,9 @@
 import React from 'react';
 import type { WrappedComponentProps } from 'react-intl-next';
 import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
+import { type ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { type TypeAheadPlugin } from '../typeAheadPluginType';
 import type { TypeAheadHandler, TypeAheadItem } from '../types';
 export declare const TypeAheadList: React.FC<import("react-intl-next").WithIntlProps<{
     items: Array<TypeAheadItem>;
@@ -16,6 +18,7 @@ export declare const TypeAheadList: React.FC<import("react-intl-next").WithIntlP
     decorationElement: HTMLElement;
     triggerHandler?: TypeAheadHandler | undefined;
     moreElementsInQuickInsertViewEnabled?: boolean | undefined;
+    api: ExtractInjectionAPI<TypeAheadPlugin> | undefined;
 } & WrappedComponentProps>> & {
     WrappedComponent: React.ComponentType<{
         items: Array<TypeAheadItem>;
@@ -26,5 +29,6 @@ export declare const TypeAheadList: React.FC<import("react-intl-next").WithIntlP
         decorationElement: HTMLElement;
         triggerHandler?: TypeAheadHandler | undefined;
         moreElementsInQuickInsertViewEnabled?: boolean | undefined;
+        api: ExtractInjectionAPI<TypeAheadPlugin> | undefined;
     } & WrappedComponentProps>;
 };

package/dist/types/ui/TypeAheadListItem.d.ts

@@ -5,6 +5,8 @@
 import React from 'react';
 import { jsx } from '@emotion/react';
 import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
+import { type ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { type TypeAheadPlugin } from '../typeAheadPluginType';
 import type { TypeAheadItem } from '../types';
 export declare const itemIcon: import("@emotion/react").SerializedStyles;
 type TypeAheadListItemProps = {
@@ -15,6 +17,8 @@ type TypeAheadListItemProps = {
     ariaLabel?: string;
     onItemClick: (mode: SelectItemMode, index: number) => void;
     moreElementsInQuickInsertViewEnabled?: boolean;
+    api: ExtractInjectionAPI<TypeAheadPlugin> | undefined;
+    firstOnlineSupportedIndex: number;
 };
-export declare const TypeAheadListItem: React.MemoExoticComponent<({ item, itemsLength, selectedIndex, onItemClick, itemIndex, ariaLabel, moreElementsInQuickInsertViewEnabled, }: TypeAheadListItemProps) => jsx.JSX.Element>;
+export declare const TypeAheadListItem: React.MemoExoticComponent<({ item, itemsLength, selectedIndex, onItemClick, itemIndex, ariaLabel, moreElementsInQuickInsertViewEnabled, api, firstOnlineSupportedIndex, }: TypeAheadListItemProps) => jsx.JSX.Element>;
 export {};

package/dist/types/ui/WrapperTypeAhead.d.ts

@@ -1,5 +1,7 @@
 import React from 'react';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { TypeAheadPlugin } from '../typeAheadPluginType';
 import type { TypeAheadHandler, TypeAheadInputMethod } from '../types';
 type WrapperProps = {
     triggerHandler: TypeAheadHandler;
@@ -13,6 +15,7 @@ type WrapperProps = {
     popupsBoundariesElement?: HTMLElement;
     popupsScrollableElement?: HTMLElement;
     inputMethod?: TypeAheadInputMethod;
+    api: ExtractInjectionAPI<TypeAheadPlugin> | undefined;
 };
-export declare const WrapperTypeAhead: React.MemoExoticComponent<({ triggerHandler, editorView, anchorElement, shouldFocusCursorInsideQuery, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement, inputMethod, getDecorationPosition, reopenQuery, onUndoRedo, }: WrapperProps) => JSX.Element | null>;
+export declare const WrapperTypeAhead: React.MemoExoticComponent<({ triggerHandler, editorView, anchorElement, shouldFocusCursorInsideQuery, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement, inputMethod, getDecorationPosition, reopenQuery, onUndoRedo, api, }: WrapperProps) => JSX.Element | null>;
 export {};

package/dist/types/ui/hooks/use-item-insert.d.ts

@@ -1,3 +1,5 @@
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { TypeAheadPlugin } from '../../typeAheadPluginType';
 import type { OnInsertSelectedItem, OnItemMatch, OnTextInsert, TypeAheadHandler, TypeAheadItem } from '../../types';
-export declare const useItemInsert: (triggerHandler: TypeAheadHandler, editorView: EditorView, items: Array<TypeAheadItem>) => [OnInsertSelectedItem, OnTextInsert, OnItemMatch];
+export declare const useItemInsert: (triggerHandler: TypeAheadHandler, editorView: EditorView, items: Array<TypeAheadItem>, api: ExtractInjectionAPI<TypeAheadPlugin> | undefined) => [OnInsertSelectedItem, OnTextInsert, OnItemMatch];

package/dist/types-ts4.5/pm-plugins/commands/update-selected-index.d.ts

@@ -1,2 +1,3 @@
-import type { Command } from '@atlaskit/editor-common/types';
-export declare const updateSelectedIndex: (selectedIndex: number) => Command;
+import type { Command, ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { TypeAheadPlugin } from '../../typeAheadPluginType';
+export declare const updateSelectedIndex: (selectedIndex: number, api: ExtractInjectionAPI<TypeAheadPlugin> | undefined) => Command;

package/dist/types-ts4.5/pm-plugins/decorations.d.ts

@@ -1,14 +1,17 @@
 import type { IntlShape } from 'react-intl-next';
 import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { TypeAheadPlugin } from '../typeAheadPluginType';
 import type { CreateTypeAheadDecorations, PopupMountPointReference, RemoveTypeAheadDecorations } from '../types';
 type FactoryProps = {
     intl: IntlShape;
     popupMountRef: PopupMountPointReference;
     nodeViewPortalProviderAPI: PortalProviderAPI;
+    api: ExtractInjectionAPI<TypeAheadPlugin> | undefined;
 };
 type FactoryReturn = {
     createDecorations: CreateTypeAheadDecorations;
     removeDecorations: RemoveTypeAheadDecorations;
 };
-export declare const factoryDecorations: ({ intl, popupMountRef, nodeViewPortalProviderAPI, }: FactoryProps) => FactoryReturn;
+export declare const factoryDecorations: ({ intl, popupMountRef, nodeViewPortalProviderAPI, api, }: FactoryProps) => FactoryReturn;
 export {};

package/dist/types-ts4.5/pm-plugins/item-is-disabled.d.ts

@@ -0,0 +1,4 @@
+import { type ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { type TypeAheadPlugin } from '../typeAheadPluginType';
+import type { TypeAheadItem } from '../types';
+export declare const itemIsDisabled: (item: TypeAheadItem | undefined, api: ExtractInjectionAPI<TypeAheadPlugin> | undefined) => boolean;

package/dist/types-ts4.5/pm-plugins/main.d.ts

@@ -2,6 +2,8 @@ import type { IntlShape } from 'react-intl-next';
 import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
 import type { PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { type ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { type TypeAheadPlugin } from '../typeAheadPluginType';
 import type { PopupMountPointReference, TypeAheadHandler } from '../types';
 type Props = {
     reactDispatch: Dispatch;
@@ -9,6 +11,7 @@ type Props = {
     typeAheadHandlers: Array<TypeAheadHandler>;
     getIntl: () => IntlShape;
     nodeViewPortalProviderAPI: PortalProviderAPI;
+    api: ExtractInjectionAPI<TypeAheadPlugin> | undefined;
 };
-export declare function createPlugin({ reactDispatch, popupMountRef, typeAheadHandlers, getIntl, nodeViewPortalProviderAPI, }: Props): SafePlugin;
+export declare function createPlugin({ reactDispatch, popupMountRef, typeAheadHandlers, getIntl, nodeViewPortalProviderAPI, api, }: Props): SafePlugin;
 export {};

package/dist/types-ts4.5/pm-plugins/utils.d.ts

@@ -1,6 +1,8 @@
 import type { IntlShape } from 'react-intl-next';
+import { type ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { type TypeAheadPlugin } from '../typeAheadPluginType';
 import type { TypeAheadHandler, TypeAheadItem } from '../types';
 export declare const isTypeAheadHandler: (handler: any) => handler is TypeAheadHandler;
 /** Is a typeahead plugin open? */
@@ -10,6 +12,8 @@ export declare const getTypeAheadHandler: (editorState: EditorState) => TypeAhea
 export declare const getTypeAheadQuery: (editorState: EditorState) => string | undefined;
 export declare const isTypeAheadAllowed: (state: EditorState) => boolean;
 export declare const findHandler: (id: string, state: EditorState) => TypeAheadHandler | null;
+export declare const skipForwardToSafeItem: (currentIndex: number, nextIndex: number, listSize: number, itemIsDisabled: (idx: number) => boolean) => number;
+export declare const skipBackwardToSafeItem: (currentIndex: number, nextIndex: number, itemIsDisabled: (idx: number) => boolean) => number;
 export declare const findHandlerByTrigger: ({ trigger, editorState, }: {
     trigger: string;
     editorState: EditorState;
@@ -17,8 +21,9 @@ export declare const findHandlerByTrigger: ({ trigger, editorState, }: {
 type MoveSelectedIndexProps = {
     editorView: EditorView;
     direction: 'next' | 'previous';
+    api: ExtractInjectionAPI<TypeAheadPlugin> | undefined;
 };
-export declare const moveSelectedIndex: ({ editorView, direction }: MoveSelectedIndexProps) => () => void;
+export declare const moveSelectedIndex: ({ editorView, direction, api }: MoveSelectedIndexProps) => () => void;
 type TypeAheadAssistiveLabels = {
     popupAriaLabel: string;
     listItemAriaLabel?: string;

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

@@ -1,6 +1,7 @@
 import type { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
 import type { Command, NextEditorPlugin, OptionalPlugin, TypeAheadHandler, TypeAheadItem } from '@atlaskit/editor-common/types';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
+import type { ConnectivityPlugin } from '@atlaskit/editor-plugin-connectivity';
 import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
 import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
 import { type TypeAheadInputMethod, type TypeAheadPluginOptions, type TypeAheadPluginSharedState } from './types';
@@ -28,7 +29,8 @@ export type TypeAheadPlugin = NextEditorPlugin<'typeAhead', {
     pluginConfiguration: TypeAheadPluginOptions | undefined;
     dependencies: [
         OptionalPlugin<AnalyticsPlugin>,
-        OptionalPlugin<FeatureFlagsPlugin>
+        OptionalPlugin<FeatureFlagsPlugin>,
+        OptionalPlugin<ConnectivityPlugin>
     ];
     sharedState: TypeAheadPluginSharedState;
     actions: {

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

@@ -5,7 +5,9 @@
 import React from 'react';
 import type { WrappedComponentProps } from 'react-intl-next';
 import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
+import { type ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { type TypeAheadPlugin } from '../typeAheadPluginType';
 import type { TypeAheadHandler, TypeAheadItem } from '../types';
 export declare const TypeAheadList: React.FC<import("react-intl-next").WithIntlProps<{
     items: Array<TypeAheadItem>;
@@ -16,6 +18,7 @@ export declare const TypeAheadList: React.FC<import("react-intl-next").WithIntlP
     decorationElement: HTMLElement;
     triggerHandler?: TypeAheadHandler | undefined;
     moreElementsInQuickInsertViewEnabled?: boolean | undefined;
+    api: ExtractInjectionAPI<TypeAheadPlugin> | undefined;
 } & WrappedComponentProps>> & {
     WrappedComponent: React.ComponentType<{
         items: Array<TypeAheadItem>;
@@ -26,5 +29,6 @@ export declare const TypeAheadList: React.FC<import("react-intl-next").WithIntlP
         decorationElement: HTMLElement;
         triggerHandler?: TypeAheadHandler | undefined;
         moreElementsInQuickInsertViewEnabled?: boolean | undefined;
+        api: ExtractInjectionAPI<TypeAheadPlugin> | undefined;
     } & WrappedComponentProps>;
 };

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

@@ -5,6 +5,8 @@
 import React from 'react';
 import { jsx } from '@emotion/react';
 import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
+import { type ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { type TypeAheadPlugin } from '../typeAheadPluginType';
 import type { TypeAheadItem } from '../types';
 export declare const itemIcon: import("@emotion/react").SerializedStyles;
 type TypeAheadListItemProps = {
@@ -15,6 +17,8 @@ type TypeAheadListItemProps = {
     ariaLabel?: string;
     onItemClick: (mode: SelectItemMode, index: number) => void;
     moreElementsInQuickInsertViewEnabled?: boolean;
+    api: ExtractInjectionAPI<TypeAheadPlugin> | undefined;
+    firstOnlineSupportedIndex: number;
 };
-export declare const TypeAheadListItem: React.MemoExoticComponent<({ item, itemsLength, selectedIndex, onItemClick, itemIndex, ariaLabel, moreElementsInQuickInsertViewEnabled, }: TypeAheadListItemProps) => jsx.JSX.Element>;
+export declare const TypeAheadListItem: React.MemoExoticComponent<({ item, itemsLength, selectedIndex, onItemClick, itemIndex, ariaLabel, moreElementsInQuickInsertViewEnabled, api, firstOnlineSupportedIndex, }: TypeAheadListItemProps) => jsx.JSX.Element>;
 export {};

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

@@ -1,5 +1,7 @@
 import React from 'react';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { TypeAheadPlugin } from '../typeAheadPluginType';
 import type { TypeAheadHandler, TypeAheadInputMethod } from '../types';
 type WrapperProps = {
     triggerHandler: TypeAheadHandler;
@@ -13,6 +15,7 @@ type WrapperProps = {
     popupsBoundariesElement?: HTMLElement;
     popupsScrollableElement?: HTMLElement;
     inputMethod?: TypeAheadInputMethod;
+    api: ExtractInjectionAPI<TypeAheadPlugin> | undefined;
 };
-export declare const WrapperTypeAhead: React.MemoExoticComponent<({ triggerHandler, editorView, anchorElement, shouldFocusCursorInsideQuery, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement, inputMethod, getDecorationPosition, reopenQuery, onUndoRedo, }: WrapperProps) => JSX.Element | null>;
+export declare const WrapperTypeAhead: React.MemoExoticComponent<({ triggerHandler, editorView, anchorElement, shouldFocusCursorInsideQuery, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement, inputMethod, getDecorationPosition, reopenQuery, onUndoRedo, api, }: WrapperProps) => JSX.Element | null>;
 export {};

package/dist/types-ts4.5/ui/hooks/use-item-insert.d.ts

@@ -1,6 +1,8 @@
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { TypeAheadPlugin } from '../../typeAheadPluginType';
 import type { OnInsertSelectedItem, OnItemMatch, OnTextInsert, TypeAheadHandler, TypeAheadItem } from '../../types';
-export declare const useItemInsert: (triggerHandler: TypeAheadHandler, editorView: EditorView, items: Array<TypeAheadItem>) => [
+export declare const useItemInsert: (triggerHandler: TypeAheadHandler, editorView: EditorView, items: Array<TypeAheadItem>, api: ExtractInjectionAPI<TypeAheadPlugin> | undefined) => [
     OnInsertSelectedItem,
     OnTextInsert,
     OnItemMatch