@atlaskit/editor-plugin-type-ahead 2.7.1 → 2.7.2

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-plugin-type-ahead
 
+## 2.7.2
+
+### Patch Changes
+
+- [#154149](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/154149)
+  [`4b955e247c793`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4b955e247c793) -
+  [ED-27560] Migrate to useSharedPluginStateSelector for text color, toolbar lists indentation,
+  type-ahead, undo-redo plugins
+
 ## 2.7.1
 
 ### Patch Changes

package/dist/cjs/ui/ContentComponent.js

@@ -8,33 +8,84 @@ exports.ContentComponent = ContentComponent;
 var _react = _interopRequireDefault(require("react"));
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _typeAhead = require("@atlaskit/editor-common/type-ahead");
+var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _TypeAheadMenu = require("./modern/TypeAheadMenu");
 var _TypeAheadMenu2 = require("./TypeAheadMenu");
+var useSharedState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (api) {
+  var triggerHandler = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'typeAhead.triggerHandler');
+  var items = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'typeAhead.items');
+  var errorInfo = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'typeAhead.errorInfo');
+  var decorationElement = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'typeAhead.decorationElement');
+  var decorationSet = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'typeAhead.decorationSet');
+  var query = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'typeAhead.query');
+  var selectedIndex = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'typeAhead.selectedIndex');
+  return {
+    triggerHandler: triggerHandler,
+    items: items,
+    errorInfo: errorInfo,
+    decorationElement: decorationElement,
+    decorationSet: decorationSet,
+    query: query,
+    selectedIndex: selectedIndex
+  };
+}, function (api) {
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['typeAhead']),
+    typeAheadState = _useSharedPluginState.typeAheadState;
+  return {
+    triggerHandler: typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.triggerHandler,
+    items: typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.items,
+    errorInfo: typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.errorInfo,
+    decorationElement: typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.decorationElement,
+    decorationSet: typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.decorationSet,
+    query: typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.query,
+    selectedIndex: typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.selectedIndex
+  };
+});
 function ContentComponent(_ref) {
-  var _typeAheadState$trigg;
   var api = _ref.api,
     editorView = _ref.editorView,
     popupMountRef = _ref.popupMountRef;
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['typeAhead']),
-    typeAheadState = _useSharedPluginState.typeAheadState;
-  if (!typeAheadState) {
+  var _useSharedState = useSharedState(api),
+    triggerHandler = _useSharedState.triggerHandler,
+    items = _useSharedState.items,
+    errorInfo = _useSharedState.errorInfo,
+    decorationElement = _useSharedState.decorationElement,
+    decorationSet = _useSharedState.decorationSet,
+    query = _useSharedState.query,
+    selectedIndex = _useSharedState.selectedIndex;
+  if (items === undefined || decorationSet === undefined || errorInfo === undefined || decorationElement === undefined || query === undefined || selectedIndex === undefined) {
     return null;
   }
   if (
   // TODO: ED-26959 - Also requires a check for editor appearance (needs to be enabled for full-page/full-width editor only ?)
-  !(0, _experiments.editorExperiment)('platform_editor_insertion', 'control') && ((_typeAheadState$trigg = typeAheadState.triggerHandler) === null || _typeAheadState$trigg === void 0 ? void 0 : _typeAheadState$trigg.id) === _typeAhead.TypeAheadAvailableNodes.QUICK_INSERT) {
+  !(0, _experiments.editorExperiment)('platform_editor_insertion', 'control') && (triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.id) === _typeAhead.TypeAheadAvailableNodes.QUICK_INSERT) {
     return /*#__PURE__*/_react.default.createElement(_TypeAheadMenu.TypeAheadMenu, {
       editorView: editorView,
       popupMountRef: popupMountRef,
-      typeAheadState: typeAheadState,
+      typeAheadState: {
+        triggerHandler: triggerHandler,
+        items: items,
+        errorInfo: errorInfo,
+        decorationElement: decorationElement,
+        decorationSet: decorationSet,
+        query: query
+      },
       api: api
     });
   } else {
     return /*#__PURE__*/_react.default.createElement(_TypeAheadMenu2.TypeAheadMenu, {
       editorView: editorView,
       popupMountRef: popupMountRef,
-      typeAheadState: typeAheadState,
+      typeAheadState: {
+        triggerHandler: triggerHandler,
+        items: items,
+        errorInfo: errorInfo,
+        decorationElement: decorationElement,
+        decorationSet: decorationSet,
+        query: query
+      },
+      selectedIndex: selectedIndex,
       api: api
     });
   }

package/dist/cjs/ui/TypeAheadListItem.js

@@ -13,6 +13,7 @@ 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 _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _shortcut = require("@atlaskit/editor-shared-styles/shortcut");
 var _menu = require("@atlaskit/menu");
@@ -158,6 +159,18 @@ var CustomItemComponentWrapper = /*#__PURE__*/_react.default.memo(function (prop
     onHover: noop
   })));
 });
+var useSharedState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (api) {
+  var connectivityMode = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'connectivity.mode');
+  return {
+    connectivityMode: connectivityMode
+  };
+}, function (api) {
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['connectivity']),
+    connectivityState = _useSharedPluginState.connectivityState;
+  return {
+    connectivityMode: connectivityState === null || connectivityState === void 0 ? void 0 : connectivityState.mode
+  };
+});
 var TypeAheadListItem = exports.TypeAheadListItem = /*#__PURE__*/_react.default.memo(function (_ref2) {
   var item = _ref2.item,
     itemsLength = _ref2.itemsLength,
@@ -168,14 +181,14 @@ var TypeAheadListItem = exports.TypeAheadListItem = /*#__PURE__*/_react.default.
     moreElementsInQuickInsertViewEnabled = _ref2.moreElementsInQuickInsertViewEnabled,
     api = _ref2.api,
     firstOnlineSupportedIndex = _ref2.firstOnlineSupportedIndex;
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['connectivity']),
-    connectivityState = _useSharedPluginState.connectivityState;
+  var _useSharedState = useSharedState(api),
+    connectivityMode = _useSharedState.connectivityMode;
   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);
+    return connectivityMode === '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;
+  var isFirstEnabledIndex = connectivityMode === 'offline' && itemIndex === firstOnlineSupportedIndex && selectedIndex === -1;
 
   /**
    * To select and highlight the first Item when no item is selected
@@ -183,7 +196,7 @@ var TypeAheadListItem = exports.TypeAheadListItem = /*#__PURE__*/_react.default.
    */
   var isSelected = false;
   // Feature gated - connectivity is only available on desktop and behind a feature gate on full page mode
-  if (connectivityState === undefined) {
+  if (connectivityMode === undefined) {
     isSelected = itemIndex === selectedIndex || selectedIndex === -1 && itemIndex === 0;
   } else {
     isSelected = itemIndex === selectedIndex || selectedIndex === -1 && (itemIndex === 0 || isFirstEnabledIndex) && !itemIsDisabled;

package/dist/cjs/ui/TypeAheadMenu.js

@@ -17,12 +17,12 @@ var TypeAheadMenu = exports.TypeAheadMenu = /*#__PURE__*/_react.default.memo(fun
   var editorView = _ref.editorView,
     popupMountRef = _ref.popupMountRef,
     typeAheadState = _ref.typeAheadState,
+    selectedIndex = _ref.selectedIndex,
     api = _ref.api;
   var isOpen = typeAheadState.decorationSet.find().length > 0;
   var triggerHandler = typeAheadState.triggerHandler,
     items = typeAheadState.items,
     errorInfo = typeAheadState.errorInfo,
-    selectedIndex = typeAheadState.selectedIndex,
     decorationElement = typeAheadState.decorationElement,
     decorationSet = typeAheadState.decorationSet,
     query = typeAheadState.query;

package/dist/cjs/ui/TypeAheadPopup.js

@@ -14,6 +14,7 @@ var _analytics = require("@atlaskit/editor-common/analytics");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _typeAhead = require("@atlaskit/editor-common/type-ahead");
 var _ui = require("@atlaskit/editor-common/ui");
+var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
@@ -64,6 +65,18 @@ var Highlight = function Highlight(_ref) {
   return triggerHandler.getHighlight(state);
 };
 var OFFSET = [0, 8];
+var useSharedState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (api) {
+  var moreElementsInQuickInsertView = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'featureFlags.moreElementsInQuickInsertView');
+  return {
+    moreElementsInQuickInsertView: moreElementsInQuickInsertView
+  };
+}, function (api) {
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['featureFlags']),
+    featureFlagsState = _useSharedPluginState.featureFlagsState;
+  return {
+    moreElementsInQuickInsertView: featureFlagsState === null || featureFlagsState === void 0 ? void 0 : featureFlagsState.moreElementsInQuickInsertView
+  };
+});
 var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(function (props) {
   var _getPluginState;
   var editorView = props.editorView,
@@ -81,9 +94,9 @@ var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(f
     api = props.api,
     showViewMore = props.showViewMore;
   var ref = (0, _react.useRef)(null);
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['featureFlags']),
-    featureFlagsState = _useSharedPluginState.featureFlagsState;
-  var moreElementsInQuickInsertViewEnabled = (featureFlagsState === null || featureFlagsState === void 0 ? void 0 : featureFlagsState.moreElementsInQuickInsertView) && triggerHandler.id === _typeAhead.TypeAheadAvailableNodes.QUICK_INSERT;
+  var _useSharedState = useSharedState(api),
+    moreElementsInQuickInsertView = _useSharedState.moreElementsInQuickInsertView;
+  var moreElementsInQuickInsertViewEnabled = moreElementsInQuickInsertView && triggerHandler.id === _typeAhead.TypeAheadAvailableNodes.QUICK_INSERT;
   var isEditorControlsPatch2Enabled = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_2');
   var defaultMenuHeight = (0, _react.useMemo)(function () {
     return moreElementsInQuickInsertViewEnabled ? DEFAULT_TYPEAHEAD_MENU_HEIGHT_NEW : DEFAULT_TYPEAHEAD_MENU_HEIGHT;

package/dist/es2019/ui/ContentComponent.js

@@ -1,35 +1,87 @@
 import React from 'react';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { useSharedPluginState, sharedPluginStateHookMigratorFactory } from '@atlaskit/editor-common/hooks';
 import { TypeAheadAvailableNodes } from '@atlaskit/editor-common/type-ahead';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { TypeAheadMenu as TypeAheadMenuModern } from './modern/TypeAheadMenu';
 import { TypeAheadMenu } from './TypeAheadMenu';
+const useSharedState = sharedPluginStateHookMigratorFactory(api => {
+  const triggerHandler = useSharedPluginStateSelector(api, 'typeAhead.triggerHandler');
+  const items = useSharedPluginStateSelector(api, 'typeAhead.items');
+  const errorInfo = useSharedPluginStateSelector(api, 'typeAhead.errorInfo');
+  const decorationElement = useSharedPluginStateSelector(api, 'typeAhead.decorationElement');
+  const decorationSet = useSharedPluginStateSelector(api, 'typeAhead.decorationSet');
+  const query = useSharedPluginStateSelector(api, 'typeAhead.query');
+  const selectedIndex = useSharedPluginStateSelector(api, 'typeAhead.selectedIndex');
+  return {
+    triggerHandler,
+    items,
+    errorInfo,
+    decorationElement,
+    decorationSet,
+    query,
+    selectedIndex
+  };
+}, api => {
+  const {
+    typeAheadState
+  } = useSharedPluginState(api, ['typeAhead']);
+  return {
+    triggerHandler: typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.triggerHandler,
+    items: typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.items,
+    errorInfo: typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.errorInfo,
+    decorationElement: typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.decorationElement,
+    decorationSet: typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.decorationSet,
+    query: typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.query,
+    selectedIndex: typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.selectedIndex
+  };
+});
 export function ContentComponent({
   api,
   editorView,
   popupMountRef
 }) {
-  var _typeAheadState$trigg;
   const {
-    typeAheadState
-  } = useSharedPluginState(api, ['typeAhead']);
-  if (!typeAheadState) {
+    triggerHandler,
+    items,
+    errorInfo,
+    decorationElement,
+    decorationSet,
+    query,
+    selectedIndex
+  } = useSharedState(api);
+  if (items === undefined || decorationSet === undefined || errorInfo === undefined || decorationElement === undefined || query === undefined || selectedIndex === undefined) {
     return null;
   }
   if (
   // TODO: ED-26959 - Also requires a check for editor appearance (needs to be enabled for full-page/full-width editor only ?)
-  !editorExperiment('platform_editor_insertion', 'control') && ((_typeAheadState$trigg = typeAheadState.triggerHandler) === null || _typeAheadState$trigg === void 0 ? void 0 : _typeAheadState$trigg.id) === TypeAheadAvailableNodes.QUICK_INSERT) {
+  !editorExperiment('platform_editor_insertion', 'control') && (triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.id) === TypeAheadAvailableNodes.QUICK_INSERT) {
     return /*#__PURE__*/React.createElement(TypeAheadMenuModern, {
       editorView: editorView,
       popupMountRef: popupMountRef,
-      typeAheadState: typeAheadState,
+      typeAheadState: {
+        triggerHandler,
+        items,
+        errorInfo,
+        decorationElement,
+        decorationSet,
+        query
+      },
       api: api
     });
   } else {
     return /*#__PURE__*/React.createElement(TypeAheadMenu, {
       editorView: editorView,
       popupMountRef: popupMountRef,
-      typeAheadState: typeAheadState,
+      typeAheadState: {
+        triggerHandler,
+        items,
+        errorInfo,
+        decorationElement,
+        decorationSet,
+        query
+      },
+      selectedIndex: selectedIndex,
       api: api
     });
   }

package/dist/es2019/ui/TypeAheadListItem.js

@@ -7,9 +7,10 @@ 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 { useSharedPluginState, sharedPluginStateHookMigratorFactory } from '@atlaskit/editor-common/hooks';
 import { IconFallback } from '@atlaskit/editor-common/quick-insert';
 import { SelectItemMode, typeAheadListMessages } from '@atlaskit/editor-common/type-ahead';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
 import { ButtonItem } from '@atlaskit/menu';
@@ -167,6 +168,19 @@ const CustomItemComponentWrapper = /*#__PURE__*/React.memo(props => {
     onHover: noop
   })));
 });
+const useSharedState = sharedPluginStateHookMigratorFactory(api => {
+  const connectivityMode = useSharedPluginStateSelector(api, 'connectivity.mode');
+  return {
+    connectivityMode
+  };
+}, api => {
+  const {
+    connectivityState
+  } = useSharedPluginState(api, ['connectivity']);
+  return {
+    connectivityMode: connectivityState === null || connectivityState === void 0 ? void 0 : connectivityState.mode
+  };
+});
 export const TypeAheadListItem = /*#__PURE__*/React.memo(({
   item,
   itemsLength,
@@ -179,14 +193,14 @@ export const TypeAheadListItem = /*#__PURE__*/React.memo(({
   firstOnlineSupportedIndex
 }) => {
   const {
-    connectivityState
-  } = useSharedPluginState(api, ['connectivity']);
+    connectivityMode
+  } = useSharedState(api);
   const 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);
+    return connectivityMode === 'offline' && ((_item$isDisabledOffli = item === null || item === void 0 ? void 0 : item.isDisabledOffline) !== null && _item$isDisabledOffli !== void 0 ? _item$isDisabledOffli : false);
   };
   const itemIsDisabled = isItemDisabled(item);
-  const isFirstEnabledIndex = (connectivityState === null || connectivityState === void 0 ? void 0 : connectivityState.mode) === 'offline' && itemIndex === firstOnlineSupportedIndex && selectedIndex === -1;
+  const isFirstEnabledIndex = connectivityMode === 'offline' && itemIndex === firstOnlineSupportedIndex && selectedIndex === -1;
 
   /**
    * To select and highlight the first Item when no item is selected
@@ -194,7 +208,7 @@ export const TypeAheadListItem = /*#__PURE__*/React.memo(({
    */
   let isSelected = false;
   // Feature gated - connectivity is only available on desktop and behind a feature gate on full page mode
-  if (connectivityState === undefined) {
+  if (connectivityMode === undefined) {
     isSelected = itemIndex === selectedIndex || selectedIndex === -1 && itemIndex === 0;
   } else {
     isSelected = itemIndex === selectedIndex || selectedIndex === -1 && (itemIndex === 0 || isFirstEnabledIndex) && !itemIsDisabled;

package/dist/es2019/ui/TypeAheadMenu.js

@@ -8,6 +8,7 @@ export const TypeAheadMenu = /*#__PURE__*/React.memo(({
   editorView,
   popupMountRef,
   typeAheadState,
+  selectedIndex,
   api
 }) => {
   var _popupMountRef$curren, _popupMountRef$curren2, _popupMountRef$curren3;
@@ -16,7 +17,6 @@ export const TypeAheadMenu = /*#__PURE__*/React.memo(({
     triggerHandler,
     items,
     errorInfo,
-    selectedIndex,
     decorationElement,
     decorationSet,
     query

package/dist/es2019/ui/TypeAheadPopup.js

@@ -8,9 +8,10 @@ import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useSta
 import { css, jsx } from '@emotion/react';
 import rafSchedule from 'raf-schd';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { useSharedPluginState, sharedPluginStateHookMigratorFactory } from '@atlaskit/editor-common/hooks';
 import { TypeAheadAvailableNodes } from '@atlaskit/editor-common/type-ahead';
 import { findOverflowScrollParent, Popup } from '@atlaskit/editor-common/ui';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { N0, N50A, N60A } from '@atlaskit/theme/colors';
@@ -53,6 +54,19 @@ const Highlight = ({
   return triggerHandler.getHighlight(state);
 };
 const OFFSET = [0, 8];
+const useSharedState = sharedPluginStateHookMigratorFactory(api => {
+  const moreElementsInQuickInsertView = useSharedPluginStateSelector(api, 'featureFlags.moreElementsInQuickInsertView');
+  return {
+    moreElementsInQuickInsertView
+  };
+}, api => {
+  const {
+    featureFlagsState
+  } = useSharedPluginState(api, ['featureFlags']);
+  return {
+    moreElementsInQuickInsertView: featureFlagsState === null || featureFlagsState === void 0 ? void 0 : featureFlagsState.moreElementsInQuickInsertView
+  };
+});
 export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
   var _getPluginState;
   const {
@@ -73,9 +87,9 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
   } = props;
   const ref = useRef(null);
   const {
-    featureFlagsState
-  } = useSharedPluginState(api, ['featureFlags']);
-  const moreElementsInQuickInsertViewEnabled = (featureFlagsState === null || featureFlagsState === void 0 ? void 0 : featureFlagsState.moreElementsInQuickInsertView) && triggerHandler.id === TypeAheadAvailableNodes.QUICK_INSERT;
+    moreElementsInQuickInsertView
+  } = useSharedState(api);
+  const moreElementsInQuickInsertViewEnabled = moreElementsInQuickInsertView && triggerHandler.id === TypeAheadAvailableNodes.QUICK_INSERT;
   const isEditorControlsPatch2Enabled = editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_2');
   const defaultMenuHeight = useMemo(() => moreElementsInQuickInsertViewEnabled ? DEFAULT_TYPEAHEAD_MENU_HEIGHT_NEW : DEFAULT_TYPEAHEAD_MENU_HEIGHT, [moreElementsInQuickInsertViewEnabled]);
   const activityStateRef = useRef({

package/dist/esm/ui/ContentComponent.js

@@ -1,33 +1,84 @@
 import React from 'react';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { useSharedPluginState, sharedPluginStateHookMigratorFactory } from '@atlaskit/editor-common/hooks';
 import { TypeAheadAvailableNodes } from '@atlaskit/editor-common/type-ahead';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { TypeAheadMenu as TypeAheadMenuModern } from './modern/TypeAheadMenu';
 import { TypeAheadMenu } from './TypeAheadMenu';
+var useSharedState = sharedPluginStateHookMigratorFactory(function (api) {
+  var triggerHandler = useSharedPluginStateSelector(api, 'typeAhead.triggerHandler');
+  var items = useSharedPluginStateSelector(api, 'typeAhead.items');
+  var errorInfo = useSharedPluginStateSelector(api, 'typeAhead.errorInfo');
+  var decorationElement = useSharedPluginStateSelector(api, 'typeAhead.decorationElement');
+  var decorationSet = useSharedPluginStateSelector(api, 'typeAhead.decorationSet');
+  var query = useSharedPluginStateSelector(api, 'typeAhead.query');
+  var selectedIndex = useSharedPluginStateSelector(api, 'typeAhead.selectedIndex');
+  return {
+    triggerHandler: triggerHandler,
+    items: items,
+    errorInfo: errorInfo,
+    decorationElement: decorationElement,
+    decorationSet: decorationSet,
+    query: query,
+    selectedIndex: selectedIndex
+  };
+}, function (api) {
+  var _useSharedPluginState = useSharedPluginState(api, ['typeAhead']),
+    typeAheadState = _useSharedPluginState.typeAheadState;
+  return {
+    triggerHandler: typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.triggerHandler,
+    items: typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.items,
+    errorInfo: typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.errorInfo,
+    decorationElement: typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.decorationElement,
+    decorationSet: typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.decorationSet,
+    query: typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.query,
+    selectedIndex: typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.selectedIndex
+  };
+});
 export function ContentComponent(_ref) {
-  var _typeAheadState$trigg;
   var api = _ref.api,
     editorView = _ref.editorView,
     popupMountRef = _ref.popupMountRef;
-  var _useSharedPluginState = useSharedPluginState(api, ['typeAhead']),
-    typeAheadState = _useSharedPluginState.typeAheadState;
-  if (!typeAheadState) {
+  var _useSharedState = useSharedState(api),
+    triggerHandler = _useSharedState.triggerHandler,
+    items = _useSharedState.items,
+    errorInfo = _useSharedState.errorInfo,
+    decorationElement = _useSharedState.decorationElement,
+    decorationSet = _useSharedState.decorationSet,
+    query = _useSharedState.query,
+    selectedIndex = _useSharedState.selectedIndex;
+  if (items === undefined || decorationSet === undefined || errorInfo === undefined || decorationElement === undefined || query === undefined || selectedIndex === undefined) {
     return null;
   }
   if (
   // TODO: ED-26959 - Also requires a check for editor appearance (needs to be enabled for full-page/full-width editor only ?)
-  !editorExperiment('platform_editor_insertion', 'control') && ((_typeAheadState$trigg = typeAheadState.triggerHandler) === null || _typeAheadState$trigg === void 0 ? void 0 : _typeAheadState$trigg.id) === TypeAheadAvailableNodes.QUICK_INSERT) {
+  !editorExperiment('platform_editor_insertion', 'control') && (triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.id) === TypeAheadAvailableNodes.QUICK_INSERT) {
     return /*#__PURE__*/React.createElement(TypeAheadMenuModern, {
       editorView: editorView,
       popupMountRef: popupMountRef,
-      typeAheadState: typeAheadState,
+      typeAheadState: {
+        triggerHandler: triggerHandler,
+        items: items,
+        errorInfo: errorInfo,
+        decorationElement: decorationElement,
+        decorationSet: decorationSet,
+        query: query
+      },
       api: api
     });
   } else {
     return /*#__PURE__*/React.createElement(TypeAheadMenu, {
       editorView: editorView,
       popupMountRef: popupMountRef,
-      typeAheadState: typeAheadState,
+      typeAheadState: {
+        triggerHandler: triggerHandler,
+        items: items,
+        errorInfo: errorInfo,
+        decorationElement: decorationElement,
+        decorationSet: decorationSet,
+        query: query
+      },
+      selectedIndex: selectedIndex,
       api: api
     });
   }

package/dist/esm/ui/TypeAheadListItem.js

@@ -9,9 +9,10 @@ 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 { useSharedPluginState, sharedPluginStateHookMigratorFactory } from '@atlaskit/editor-common/hooks';
 import { IconFallback } from '@atlaskit/editor-common/quick-insert';
 import { SelectItemMode, typeAheadListMessages } from '@atlaskit/editor-common/type-ahead';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
 import { ButtonItem } from '@atlaskit/menu';
@@ -149,6 +150,18 @@ var CustomItemComponentWrapper = /*#__PURE__*/React.memo(function (props) {
     onHover: noop
   })));
 });
+var useSharedState = sharedPluginStateHookMigratorFactory(function (api) {
+  var connectivityMode = useSharedPluginStateSelector(api, 'connectivity.mode');
+  return {
+    connectivityMode: connectivityMode
+  };
+}, function (api) {
+  var _useSharedPluginState = useSharedPluginState(api, ['connectivity']),
+    connectivityState = _useSharedPluginState.connectivityState;
+  return {
+    connectivityMode: connectivityState === null || connectivityState === void 0 ? void 0 : connectivityState.mode
+  };
+});
 export var TypeAheadListItem = /*#__PURE__*/React.memo(function (_ref2) {
   var item = _ref2.item,
     itemsLength = _ref2.itemsLength,
@@ -159,14 +172,14 @@ export var TypeAheadListItem = /*#__PURE__*/React.memo(function (_ref2) {
     moreElementsInQuickInsertViewEnabled = _ref2.moreElementsInQuickInsertViewEnabled,
     api = _ref2.api,
     firstOnlineSupportedIndex = _ref2.firstOnlineSupportedIndex;
-  var _useSharedPluginState = useSharedPluginState(api, ['connectivity']),
-    connectivityState = _useSharedPluginState.connectivityState;
+  var _useSharedState = useSharedState(api),
+    connectivityMode = _useSharedState.connectivityMode;
   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);
+    return connectivityMode === '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;
+  var isFirstEnabledIndex = connectivityMode === 'offline' && itemIndex === firstOnlineSupportedIndex && selectedIndex === -1;
 
   /**
    * To select and highlight the first Item when no item is selected
@@ -174,7 +187,7 @@ export var TypeAheadListItem = /*#__PURE__*/React.memo(function (_ref2) {
    */
   var isSelected = false;
   // Feature gated - connectivity is only available on desktop and behind a feature gate on full page mode
-  if (connectivityState === undefined) {
+  if (connectivityMode === undefined) {
     isSelected = itemIndex === selectedIndex || selectedIndex === -1 && itemIndex === 0;
   } else {
     isSelected = itemIndex === selectedIndex || selectedIndex === -1 && (itemIndex === 0 || isFirstEnabledIndex) && !itemIsDisabled;

package/dist/esm/ui/TypeAheadMenu.js

@@ -10,12 +10,12 @@ export var TypeAheadMenu = /*#__PURE__*/React.memo(function (_ref) {
   var editorView = _ref.editorView,
     popupMountRef = _ref.popupMountRef,
     typeAheadState = _ref.typeAheadState,
+    selectedIndex = _ref.selectedIndex,
     api = _ref.api;
   var isOpen = typeAheadState.decorationSet.find().length > 0;
   var triggerHandler = typeAheadState.triggerHandler,
     items = typeAheadState.items,
     errorInfo = typeAheadState.errorInfo,
-    selectedIndex = typeAheadState.selectedIndex,
     decorationElement = typeAheadState.decorationElement,
     decorationSet = typeAheadState.decorationSet,
     query = typeAheadState.query;

package/dist/esm/ui/TypeAheadPopup.js

@@ -9,9 +9,10 @@ import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useSta
 import { css, jsx } from '@emotion/react';
 import rafSchedule from 'raf-schd';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { useSharedPluginState, sharedPluginStateHookMigratorFactory } from '@atlaskit/editor-common/hooks';
 import { TypeAheadAvailableNodes } from '@atlaskit/editor-common/type-ahead';
 import { findOverflowScrollParent, Popup } from '@atlaskit/editor-common/ui';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { N0, N50A, N60A } from '@atlaskit/theme/colors';
@@ -53,6 +54,18 @@ var Highlight = function Highlight(_ref) {
   return triggerHandler.getHighlight(state);
 };
 var OFFSET = [0, 8];
+var useSharedState = sharedPluginStateHookMigratorFactory(function (api) {
+  var moreElementsInQuickInsertView = useSharedPluginStateSelector(api, 'featureFlags.moreElementsInQuickInsertView');
+  return {
+    moreElementsInQuickInsertView: moreElementsInQuickInsertView
+  };
+}, function (api) {
+  var _useSharedPluginState = useSharedPluginState(api, ['featureFlags']),
+    featureFlagsState = _useSharedPluginState.featureFlagsState;
+  return {
+    moreElementsInQuickInsertView: featureFlagsState === null || featureFlagsState === void 0 ? void 0 : featureFlagsState.moreElementsInQuickInsertView
+  };
+});
 export var TypeAheadPopup = /*#__PURE__*/React.memo(function (props) {
   var _getPluginState;
   var editorView = props.editorView,
@@ -70,9 +83,9 @@ export var TypeAheadPopup = /*#__PURE__*/React.memo(function (props) {
     api = props.api,
     showViewMore = props.showViewMore;
   var ref = useRef(null);
-  var _useSharedPluginState = useSharedPluginState(api, ['featureFlags']),
-    featureFlagsState = _useSharedPluginState.featureFlagsState;
-  var moreElementsInQuickInsertViewEnabled = (featureFlagsState === null || featureFlagsState === void 0 ? void 0 : featureFlagsState.moreElementsInQuickInsertView) && triggerHandler.id === TypeAheadAvailableNodes.QUICK_INSERT;
+  var _useSharedState = useSharedState(api),
+    moreElementsInQuickInsertView = _useSharedState.moreElementsInQuickInsertView;
+  var moreElementsInQuickInsertViewEnabled = moreElementsInQuickInsertView && triggerHandler.id === TypeAheadAvailableNodes.QUICK_INSERT;
   var isEditorControlsPatch2Enabled = editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_2');
   var defaultMenuHeight = useMemo(function () {
     return moreElementsInQuickInsertViewEnabled ? DEFAULT_TYPEAHEAD_MENU_HEIGHT_NEW : DEFAULT_TYPEAHEAD_MENU_HEIGHT;

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

@@ -4,10 +4,11 @@ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { TypeAheadPlugin } from '../typeAheadPluginType';
 import type { PopupMountPointReference, TypeAheadPluginSharedState } from '../types';
 type TypeAheadMenuType = {
-    typeAheadState: TypeAheadPluginSharedState;
+    typeAheadState: Omit<TypeAheadPluginSharedState, 'isOpen' | 'isAllowed' | 'selectedIndex'>;
     editorView: EditorView;
     popupMountRef: PopupMountPointReference;
     api: ExtractInjectionAPI<TypeAheadPlugin> | undefined;
+    selectedIndex: number;
 };
-export declare const TypeAheadMenu: React.MemoExoticComponent<({ editorView, popupMountRef, typeAheadState, api }: TypeAheadMenuType) => React.JSX.Element | null>;
+export declare const TypeAheadMenu: React.MemoExoticComponent<({ editorView, popupMountRef, typeAheadState, selectedIndex, api }: TypeAheadMenuType) => React.JSX.Element | null>;
 export {};

package/dist/types/ui/modern/TypeAheadMenu.d.ts

@@ -4,7 +4,7 @@ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { TypeAheadPlugin } from '../../typeAheadPluginType';
 import type { PopupMountPointReference, TypeAheadPluginSharedState } from '../../types';
 type TypeAheadMenuType = {
-    typeAheadState: TypeAheadPluginSharedState;
+    typeAheadState: Omit<TypeAheadPluginSharedState, 'isOpen' | 'isAllowed' | 'selectedIndex'>;
     editorView: EditorView;
     popupMountRef: PopupMountPointReference;
     api: ExtractInjectionAPI<TypeAheadPlugin> | undefined;

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

@@ -4,10 +4,11 @@ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { TypeAheadPlugin } from '../typeAheadPluginType';
 import type { PopupMountPointReference, TypeAheadPluginSharedState } from '../types';
 type TypeAheadMenuType = {
-    typeAheadState: TypeAheadPluginSharedState;
+    typeAheadState: Omit<TypeAheadPluginSharedState, 'isOpen' | 'isAllowed' | 'selectedIndex'>;
     editorView: EditorView;
     popupMountRef: PopupMountPointReference;
     api: ExtractInjectionAPI<TypeAheadPlugin> | undefined;
+    selectedIndex: number;
 };
-export declare const TypeAheadMenu: React.MemoExoticComponent<({ editorView, popupMountRef, typeAheadState, api }: TypeAheadMenuType) => React.JSX.Element | null>;
+export declare const TypeAheadMenu: React.MemoExoticComponent<({ editorView, popupMountRef, typeAheadState, selectedIndex, api }: TypeAheadMenuType) => React.JSX.Element | null>;
 export {};

package/dist/types-ts4.5/ui/modern/TypeAheadMenu.d.ts

@@ -4,7 +4,7 @@ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { TypeAheadPlugin } from '../../typeAheadPluginType';
 import type { PopupMountPointReference, TypeAheadPluginSharedState } from '../../types';
 type TypeAheadMenuType = {
-    typeAheadState: TypeAheadPluginSharedState;
+    typeAheadState: Omit<TypeAheadPluginSharedState, 'isOpen' | 'isAllowed' | 'selectedIndex'>;
     editorView: EditorView;
     popupMountRef: PopupMountPointReference;
     api: ExtractInjectionAPI<TypeAheadPlugin> | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-type-ahead",
-	"version": "2.7.1",
+	"version": "2.7.2",
 	"description": "Type-ahead plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",