@atlaskit/editor-plugin-type-ahead 6.5.11 → 6.5.13

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-plugin-type-ahead
 
+## 6.5.13
+
+### Patch Changes
+
+- Updated dependencies
+
+## 6.5.12
+
+### Patch Changes
+
+- [`0d661119b4293`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0d661119b4293) -
+  Clean up platform_editor_insertion experiment by shipping control variant. Remove modern TypeAhead
+  components and experiment infrastructure while preserving all existing functionality.
+- Updated dependencies
+
 ## 6.5.11
 
 ### Patch Changes

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

@@ -19,6 +19,8 @@ var _closeTypeAhead = require("./commands/close-type-ahead");
 var _constants = require("./constants");
 var _statsModifier = require("./stats-modifier");
 var _utils = require("./utils");
+// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
+
 var factoryDecorations = exports.factoryDecorations = function factoryDecorations(_ref) {
   var intl = _ref.intl,
     popupMountRef = _ref.popupMountRef,
@@ -36,6 +38,8 @@ var factoryDecorations = exports.factoryDecorations = function factoryDecoration
         decorationElement: null
       };
     }
+
+    // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
     var decorationId = "decoration_id_".concat(_constants.TYPE_AHEAD_DECORATION_KEY, "_").concat((0, _uuid.default)());
     var $cursor = selection.$cursor;
     var typeaheadComponent = document.createElement('mark');

package/dist/cjs/ui/ContentComponent.js

@@ -7,10 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.ContentComponent = ContentComponent;
 var _react = _interopRequireDefault(require("react"));
 var _hooks = require("@atlaskit/editor-common/hooks");
-var _typeAhead = require("@atlaskit/editor-common/type-ahead");
-var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
-var _TypeAheadMenu = require("./modern/TypeAheadMenu");
-var _TypeAheadMenu2 = require("./TypeAheadMenu");
+var _TypeAheadMenu = require("./TypeAheadMenu");
 function ContentComponent(_ref) {
   var api = _ref.api,
     editorView = _ref.editorView,
@@ -37,36 +34,18 @@ function ContentComponent(_ref) {
   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') && (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: {
-        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: {
-        triggerHandler: triggerHandler,
-        items: items,
-        errorInfo: errorInfo,
-        decorationElement: decorationElement,
-        decorationSet: decorationSet,
-        query: query
-      },
-      selectedIndex: selectedIndex,
-      api: api
-    });
-  }
+  return /*#__PURE__*/_react.default.createElement(_TypeAheadMenu.TypeAheadMenu, {
+    editorView: editorView,
+    popupMountRef: popupMountRef,
+    typeAheadState: {
+      triggerHandler: triggerHandler,
+      items: items,
+      errorInfo: errorInfo,
+      decorationElement: decorationElement,
+      decorationSet: decorationSet,
+      query: query
+    },
+    selectedIndex: selectedIndex,
+    api: api
+  });
 }

package/dist/cjs/ui/InputQuery.js

@@ -32,11 +32,11 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 var placeholderStyles = (0, _react2.css)({
   '&::after': {
     content: 'attr(data-place-holder)',
-    color: "var(--ds-text-subtlest, #626F86)",
+    color: "var(--ds-text-subtlest, #6B6E76)",
     position: 'relative',
     padding: "var(--ds-space-025, 2px)",
     left: "var(--ds-space-negative-050, -4px)",
-    backgroundColor: "var(--ds-background-neutral, #091E420F)",
+    backgroundColor: "var(--ds-background-neutral, #0515240F)",
     // eslint-disable-next-line @atlaskit/design-system/no-unsafe-design-token-usage
     borderRadius: "var(--ds-radius-small, 3px)"
   }
@@ -111,9 +111,8 @@ var InputQuery = exports.InputQuery = /*#__PURE__*/_react.default.memo(function
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     query = _useState2[0],
     setQuery = _useState2[1];
-  var isEditorInsertionEnabled = (0, _experiments.editorExperiment)('platform_editor_insertion', 'variant1');
   var isEditorControlsEnabled = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1');
-  var isSearchPlaceholderEnabled = isEditorInsertionEnabled || (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_quick_insert_placeholder');
+  var isSearchPlaceholderEnabled = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_quick_insert_placeholder');
   var selection = editorView.state.selection;
   var table = editorView.state.schema.nodes.table;
   var _useState3 = (0, _react.useState)(isSearchPlaceholderEnabled && triggerQueryPrefix === '/' &&

package/dist/cjs/ui/TypeAheadListItem.js

@@ -77,7 +77,7 @@ var itemDescription = (0, _react2.css)({
 // when cleaning up FG `platform_editor_typeahead_description_text_colour`
 // replace above color with this and delete itemDescriptionColor
 var itemDescriptionColor = (0, _react2.css)({
-  color: "var(--ds-text-subtle, #44546F)".concat(";")
+  color: "var(--ds-text-subtle, #505258)".concat(";")
 });
 var itemDescriptionOverride = (0, _react2.css)({
   font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
@@ -113,7 +113,7 @@ 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)"
+  color: "var(--ds-text-disabled, #080F214A)"
 });
 var FallbackIcon = /*#__PURE__*/_react.default.memo(function (_ref) {
   var label = _ref.label;

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { IntlProvider } from 'react-intl-next';
+// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 import uuid from 'uuid';
 import { keyName as keyNameNormalized } from 'w3c-keyname';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
@@ -33,6 +34,8 @@ export const factoryDecorations = ({
         decorationElement: null
       };
     }
+
+    // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
     const decorationId = `decoration_id_${TYPE_AHEAD_DECORATION_KEY}_${uuid()}`;
     const {
       $cursor

package/dist/es2019/ui/ContentComponent.js

@@ -1,8 +1,5 @@
 import React from 'react';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
-import { TypeAheadAvailableNodes } from '@atlaskit/editor-common/type-ahead';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
-import { TypeAheadMenu as TypeAheadMenuModern } from './modern/TypeAheadMenu';
 import { TypeAheadMenu } from './TypeAheadMenu';
 export function ContentComponent({
   api,
@@ -32,36 +29,18 @@ export function ContentComponent({
   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') && (triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.id) === TypeAheadAvailableNodes.QUICK_INSERT) {
-    return /*#__PURE__*/React.createElement(TypeAheadMenuModern, {
-      editorView: editorView,
-      popupMountRef: popupMountRef,
-      typeAheadState: {
-        triggerHandler,
-        items,
-        errorInfo,
-        decorationElement,
-        decorationSet,
-        query
-      },
-      api: api
-    });
-  } else {
-    return /*#__PURE__*/React.createElement(TypeAheadMenu, {
-      editorView: editorView,
-      popupMountRef: popupMountRef,
-      typeAheadState: {
-        triggerHandler,
-        items,
-        errorInfo,
-        decorationElement,
-        decorationSet,
-        query
-      },
-      selectedIndex: selectedIndex,
-      api: api
-    });
-  }
+  return /*#__PURE__*/React.createElement(TypeAheadMenu, {
+    editorView: editorView,
+    popupMountRef: popupMountRef,
+    typeAheadState: {
+      triggerHandler,
+      items,
+      errorInfo,
+      decorationElement,
+      decorationSet,
+      query
+    },
+    selectedIndex: selectedIndex,
+    api: api
+  });
 }

package/dist/es2019/ui/InputQuery.js

@@ -21,11 +21,11 @@ import { getPluginState } from '../pm-plugins/utils';
 const placeholderStyles = css({
   '&::after': {
     content: 'attr(data-place-holder)',
-    color: "var(--ds-text-subtlest, #626F86)",
+    color: "var(--ds-text-subtlest, #6B6E76)",
     position: 'relative',
     padding: "var(--ds-space-025, 2px)",
     left: "var(--ds-space-negative-050, -4px)",
-    backgroundColor: "var(--ds-background-neutral, #091E420F)",
+    backgroundColor: "var(--ds-background-neutral, #0515240F)",
     // eslint-disable-next-line @atlaskit/design-system/no-unsafe-design-token-usage
     borderRadius: "var(--ds-radius-small, 3px)"
   }
@@ -98,9 +98,8 @@ export const InputQuery = /*#__PURE__*/React.memo(({
   const ref = useRef(document.createElement('span'));
   const inputRef = useRef(null);
   const [query, setQuery] = useState(null);
-  const isEditorInsertionEnabled = editorExperiment('platform_editor_insertion', 'variant1');
   const isEditorControlsEnabled = editorExperiment('platform_editor_controls', 'variant1');
-  const isSearchPlaceholderEnabled = isEditorInsertionEnabled || editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_quick_insert_placeholder');
+  const isSearchPlaceholderEnabled = editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_quick_insert_placeholder');
   const selection = editorView.state.selection;
   const {
     table

package/dist/es2019/ui/TypeAheadListItem.js

@@ -72,7 +72,7 @@ const itemDescription = css({
 // when cleaning up FG `platform_editor_typeahead_description_text_colour`
 // replace above color with this and delete itemDescriptionColor
 const itemDescriptionColor = css({
-  color: `${"var(--ds-text-subtle, #44546F)"};`
+  color: `${"var(--ds-text-subtle, #505258)"};`
 });
 const itemDescriptionOverride = css({
   font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
@@ -120,7 +120,7 @@ const selectedStyle = css`
 	box-shadow: inset 2px 0px 0px ${`var(--ds-border-focused, ${B400})`};
 `;
 const disabledStyle = css({
-  color: "var(--ds-text-disabled, #091E424F)"
+  color: "var(--ds-text-disabled, #080F214A)"
 });
 const FallbackIcon = /*#__PURE__*/React.memo(({
   label

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { IntlProvider } from 'react-intl-next';
+// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 import uuid from 'uuid';
 import { keyName as keyNameNormalized } from 'w3c-keyname';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
@@ -29,6 +30,8 @@ export var factoryDecorations = function factoryDecorations(_ref) {
         decorationElement: null
       };
     }
+
+    // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
     var decorationId = "decoration_id_".concat(TYPE_AHEAD_DECORATION_KEY, "_").concat(uuid());
     var $cursor = selection.$cursor;
     var typeaheadComponent = document.createElement('mark');

package/dist/esm/ui/ContentComponent.js

@@ -1,8 +1,5 @@
 import React from 'react';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
-import { TypeAheadAvailableNodes } from '@atlaskit/editor-common/type-ahead';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
-import { TypeAheadMenu as TypeAheadMenuModern } from './modern/TypeAheadMenu';
 import { TypeAheadMenu } from './TypeAheadMenu';
 export function ContentComponent(_ref) {
   var api = _ref.api,
@@ -30,36 +27,18 @@ export function ContentComponent(_ref) {
   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') && (triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.id) === TypeAheadAvailableNodes.QUICK_INSERT) {
-    return /*#__PURE__*/React.createElement(TypeAheadMenuModern, {
-      editorView: editorView,
-      popupMountRef: popupMountRef,
-      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: {
-        triggerHandler: triggerHandler,
-        items: items,
-        errorInfo: errorInfo,
-        decorationElement: decorationElement,
-        decorationSet: decorationSet,
-        query: query
-      },
-      selectedIndex: selectedIndex,
-      api: api
-    });
-  }
+  return /*#__PURE__*/React.createElement(TypeAheadMenu, {
+    editorView: editorView,
+    popupMountRef: popupMountRef,
+    typeAheadState: {
+      triggerHandler: triggerHandler,
+      items: items,
+      errorInfo: errorInfo,
+      decorationElement: decorationElement,
+      decorationSet: decorationSet,
+      query: query
+    },
+    selectedIndex: selectedIndex,
+    api: api
+  });
 }

package/dist/esm/ui/InputQuery.js

@@ -22,11 +22,11 @@ import { getPluginState } from '../pm-plugins/utils';
 var placeholderStyles = css({
   '&::after': {
     content: 'attr(data-place-holder)',
-    color: "var(--ds-text-subtlest, #626F86)",
+    color: "var(--ds-text-subtlest, #6B6E76)",
     position: 'relative',
     padding: "var(--ds-space-025, 2px)",
     left: "var(--ds-space-negative-050, -4px)",
-    backgroundColor: "var(--ds-background-neutral, #091E420F)",
+    backgroundColor: "var(--ds-background-neutral, #0515240F)",
     // eslint-disable-next-line @atlaskit/design-system/no-unsafe-design-token-usage
     borderRadius: "var(--ds-radius-small, 3px)"
   }
@@ -101,9 +101,8 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     query = _useState2[0],
     setQuery = _useState2[1];
-  var isEditorInsertionEnabled = editorExperiment('platform_editor_insertion', 'variant1');
   var isEditorControlsEnabled = editorExperiment('platform_editor_controls', 'variant1');
-  var isSearchPlaceholderEnabled = isEditorInsertionEnabled || editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_quick_insert_placeholder');
+  var isSearchPlaceholderEnabled = editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_quick_insert_placeholder');
   var selection = editorView.state.selection;
   var table = editorView.state.schema.nodes.table;
   var _useState3 = useState(isSearchPlaceholderEnabled && triggerQueryPrefix === '/' &&

package/dist/esm/ui/TypeAheadListItem.js

@@ -69,7 +69,7 @@ var itemDescription = css({
 // when cleaning up FG `platform_editor_typeahead_description_text_colour`
 // replace above color with this and delete itemDescriptionColor
 var itemDescriptionColor = css({
-  color: "var(--ds-text-subtle, #44546F)".concat(";")
+  color: "var(--ds-text-subtle, #505258)".concat(";")
 });
 var itemDescriptionOverride = css({
   font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
@@ -105,7 +105,7 @@ 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)"
+  color: "var(--ds-text-disabled, #080F214A)"
 });
 var FallbackIcon = /*#__PURE__*/React.memo(function (_ref) {
   var label = _ref.label;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-type-ahead",
-	"version": "6.5.11",
+	"version": "6.5.13",
 	"description": "Type-ahead plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -36,18 +36,18 @@
 		"@atlaskit/editor-plugin-context-panel": "^8.0.0",
 		"@atlaskit/editor-plugin-metrics": "^7.1.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
-		"@atlaskit/editor-shared-styles": "^3.8.0",
+		"@atlaskit/editor-shared-styles": "^3.9.0",
 		"@atlaskit/heading": "^5.2.0",
-		"@atlaskit/icon": "^28.5.0",
+		"@atlaskit/icon": "^29.0.0",
 		"@atlaskit/insm": "^0.2.0",
 		"@atlaskit/menu": "^8.4.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^16.1.0",
 		"@atlaskit/prosemirror-history": "^0.2.0",
-		"@atlaskit/prosemirror-input-rules": "^3.5.0",
+		"@atlaskit/prosemirror-input-rules": "^3.6.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^13.26.0",
-		"@atlaskit/tokens": "^7.1.0",
+		"@atlaskit/tmp-editor-statsig": "^13.35.0",
+		"@atlaskit/tokens": "^8.0.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
@@ -58,7 +58,7 @@
 		"w3c-keyname": "^2.1.8"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^110.22.0",
+		"@atlaskit/editor-common": "^110.27.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"

package/dist/cjs/ui/modern/TypeAheadMenu.js

@@ -1,84 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TypeAheadMenu = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = _interopRequireDefault(require("react"));
-var _typeAhead = require("@atlaskit/editor-common/type-ahead");
-var _updateSelectedIndex = require("../../pm-plugins/commands/update-selected-index");
-var _useItemInsert3 = require("../hooks/use-item-insert");
-var _TypeAheadPopup = require("./TypeAheadPopup");
-var TypeAheadMenu = exports.TypeAheadMenu = /*#__PURE__*/_react.default.memo(function (_ref) {
-  var _popupMountRef$curren, _popupMountRef$curren2, _popupMountRef$curren3;
-  var editorView = _ref.editorView,
-    popupMountRef = _ref.popupMountRef,
-    typeAheadState = _ref.typeAheadState,
-    api = _ref.api;
-  var isOpen = typeAheadState.decorationSet.find().length > 0;
-  var triggerHandler = typeAheadState.triggerHandler,
-    items = typeAheadState.items,
-    errorInfo = typeAheadState.errorInfo,
-    decorationElement = typeAheadState.decorationElement,
-    decorationSet = typeAheadState.decorationSet,
-    query = typeAheadState.query;
-  var _useItemInsert = (0, _useItemInsert3.useItemInsert)(
-    // Ignored via go/ees005
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    triggerHandler, editorView, items, api),
-    _useItemInsert2 = (0, _slicedToArray2.default)(_useItemInsert, 2),
-    onItemInsert = _useItemInsert2[0],
-    onTextInsert = _useItemInsert2[1];
-  var setSelectedItem = _react.default.useCallback(function (_ref2) {
-    var nextIndex = _ref2.index;
-    queueMicrotask(function () {
-      (0, _updateSelectedIndex.updateSelectedIndex)(nextIndex, api)(editorView.state, editorView.dispatch);
-    });
-  }, [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;
-    queueMicrotask(function () {
-      onItemInsert({
-        mode: mode,
-        index: index,
-        query: query
-      });
-    });
-  }, [onItemInsert, query]);
-  var cancel = _react.default.useCallback(function (_ref3) {
-    var setSelectionAt = _ref3.setSelectionAt,
-      addPrefixTrigger = _ref3.addPrefixTrigger,
-      forceFocusOnEditor = _ref3.forceFocusOnEditor;
-    var fullQuery = addPrefixTrigger ? "".concat(triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.trigger).concat(query) : query;
-    onTextInsert({
-      forceFocusOnEditor: forceFocusOnEditor,
-      setSelectionAt: setSelectionAt,
-      text: fullQuery
-    });
-  }, [triggerHandler, onTextInsert, query]);
-  if (!isOpen || !triggerHandler || !(decorationElement instanceof HTMLElement) || items.length === 0 && !errorInfo) {
-    return null;
-  }
-  return /*#__PURE__*/_react.default.createElement(_TypeAheadPopup.TypeAheadPopup, {
-    editorView: editorView,
-    popupsMountPoint: (_popupMountRef$curren = popupMountRef.current) === null || _popupMountRef$curren === void 0 ? void 0 : _popupMountRef$curren.popupsMountPoint,
-    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,
-    anchorElement: decorationElement,
-    triggerHandler: triggerHandler,
-    items: items,
-    errorInfo: errorInfo
-    // selectedIndex={selectedIndex}
-    ,
-    setSelectedItem: setSelectedItem,
-    onItemInsert: insertItem,
-    decorationSet: decorationSet,
-    isEmptyQuery: !query,
-    query: query,
-    cancel: cancel,
-    api: api
-  });
-});