@atlaskit/editor-plugin-type-ahead 2.3.3 → 2.4.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/editor-plugin-type-ahead
 
+## 2.4.0
+
+### Minor Changes
+
+- [#139256](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/139256)
+  [`0fea9bc4da71a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0fea9bc4da71a) -
+  ED-27447 add typeahead close analytics event
+
+### Patch Changes
+
+- Updated dependencies
+
+## 2.3.4
+
+### Patch Changes
+
+- [#139216](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/139216)
+  [`e8f596d2b1910`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e8f596d2b1910) -
+  [ux] Cleaned up platform_editor_controls_patch_1 FG
+- Updated dependencies
+
 ## 2.3.3
 
 ### Patch Changes

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

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.fireTypeAheadClosedAnalyticsEvent = void 0;
+var _analytics = require("@atlaskit/editor-common/analytics");
+var fireTypeAheadClosedAnalyticsEvent = exports.fireTypeAheadClosedAnalyticsEvent = function fireTypeAheadClosedAnalyticsEvent(api, closeAction, hasQuery, inputMethod) {
+  var _api$analytics;
+  api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.fireAnalyticsEvent({
+    action: _analytics.ACTION.CLOSED,
+    actionSubject: _analytics.ACTION_SUBJECT.TYPEAHEAD,
+    actionSubjectId: _analytics.ACTION_SUBJECT_ID.TYPEAHEAD_QUICK_INSERT,
+    attributes: {
+      inputMethod: inputMethod,
+      closeAction: closeAction,
+      hasQuery: hasQuery
+    },
+    eventType: _analytics.EVENT_TYPE.TRACK
+  });
+};

package/dist/cjs/ui/TypeAheadList.js

@@ -12,6 +12,7 @@ var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _CellMeasurer = require("react-virtualized/dist/commonjs/CellMeasurer");
 var _List = require("react-virtualized/dist/commonjs/List");
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _messages = require("@atlaskit/editor-common/messages");
 var _typeAhead = require("@atlaskit/editor-common/type-ahead");
 var _ui = require("@atlaskit/editor-common/ui");
@@ -235,13 +236,13 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref2) {
           // TODO: DTR-1401 - why is this calling item click when hitting tab? fix this in DTR-1401
           case 'Tab':
             //Tab key quick inserts the selected item.
-            onItemClick(_typeAhead.SelectItemMode.TAB, selectedIndex);
+            onItemClick(_typeAhead.SelectItemMode.TAB, selectedIndex, _analytics.INPUT_METHOD.KEYBOARD);
             event.preventDefault();
             break;
           case 'Enter':
             //Enter key quick inserts the selected item.
             if (!event.isComposing || event.which !== 229 && event.keyCode !== 229) {
-              onItemClick(event.shiftKey ? _typeAhead.SelectItemMode.SHIFT_ENTER : _typeAhead.SelectItemMode.ENTER, selectedIndex);
+              onItemClick(event.shiftKey ? _typeAhead.SelectItemMode.SHIFT_ENTER : _typeAhead.SelectItemMode.ENTER, selectedIndex, _analytics.INPUT_METHOD.KEYBOARD);
               event.preventDefault();
             }
             break;
@@ -303,7 +304,9 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref2) {
         itemsLength: itemsLength,
         itemIndex: index,
         selectedIndex: selectedIndex,
-        onItemClick: actions.onItemClick,
+        onItemClick: function onItemClick(mode, index) {
+          actions.onItemClick(mode, index, _analytics.INPUT_METHOD.MOUSE);
+        },
         ariaLabel: (0, _utils.getTypeAheadListAriaLabels)(triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.trigger, intl, currentItem).listItemAriaLabel,
         moreElementsInQuickInsertViewEnabled: moreElementsInQuickInsertViewEnabled,
         api: api
@@ -324,7 +327,9 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref2) {
       itemsLength: itemsLength,
       itemIndex: index,
       selectedIndex: selectedIndex,
-      onItemClick: actions.onItemClick,
+      onItemClick: function onItemClick(mode, index) {
+        actions.onItemClick(mode, index, _analytics.INPUT_METHOD.MOUSE);
+      },
       ariaLabel: (0, _utils.getTypeAheadListAriaLabels)(triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.trigger, intl, currentItem).listItemAriaLabel,
       moreElementsInQuickInsertViewEnabled: moreElementsInQuickInsertViewEnabled,
       api: api

package/dist/cjs/ui/TypeAheadPopup.js

@@ -18,6 +18,7 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
+var _analytics2 = require("../pm-plugins/analytics");
 var _closeTypeAhead = require("../pm-plugins/commands/close-type-ahead");
 var _constants = require("../pm-plugins/constants");
 var _utils = require("../pm-plugins/utils");
@@ -86,6 +87,10 @@ var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(f
   var defaultMenuHeight = (0, _react.useMemo)(function () {
     return moreElementsInQuickInsertViewEnabled ? DEFAULT_TYPEAHEAD_MENU_HEIGHT_NEW : DEFAULT_TYPEAHEAD_MENU_HEIGHT;
   }, [moreElementsInQuickInsertViewEnabled]);
+  var activityStateRef = (0, _react.useRef)({
+    inputMethod: null,
+    closeAction: null
+  });
   var startTime = (0, _react.useMemo)(function () {
     return performance.now();
   },
@@ -307,21 +312,18 @@ var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(f
     editorView.dispatch(tr);
   };
   var onViewMoreClick = (0, _react.useCallback)(function () {
-    if ((0, _platformFeatureFlags.fg)('platform_editor_controls_patch_1')) {
-      close(editorView);
+    close(editorView);
+    if (openElementBrowserModal && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_4')) {
+      activityStateRef.current = {
+        inputMethod: _analytics.INPUT_METHOD.MOUSE,
+        closeAction: _analytics.ACTION.VIEW_MORE
+      };
     }
 
     // TODO: ED-26959 - when clean up, remove config in quick insert plugin
     // platform/packages/editor/editor-plugin-quick-insert/src/quickInsertPlugin.tsx (typeAhead.openElementBrowserModal)
     openElementBrowserModal === null || openElementBrowserModal === void 0 || openElementBrowserModal();
-    if (!(0, _platformFeatureFlags.fg)('platform_editor_controls_patch_1')) {
-      cancel({
-        addPrefixTrigger: false,
-        setSelectionAt: _constants.CloseSelectionOptions.AFTER_TEXT_INSERTED,
-        forceFocusOnEditor: false
-      });
-    }
-  }, [cancel, editorView, openElementBrowserModal]);
+  }, [editorView, openElementBrowserModal]);
   return (0, _react2.jsx)(_ui.Popup, {
     zIndex: _editorSharedStyles.akEditorFloatingDialogZIndex,
     target: anchorElement,
@@ -332,7 +334,20 @@ var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(f
     fitWidth: 340,
     offset: OFFSET,
     ariaLabel: null,
-    preventOverflow: true
+    preventOverflow: true,
+    onUnmount: function onUnmount() {
+      if (selectedIndex > -1 && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_4')) {
+        // if selectedIndex is -1, it means that the user has not selected any item
+        // will be handled by WrapperTypeAhead
+        (0, _analytics2.fireTypeAheadClosedAnalyticsEvent)(api, activityStateRef.current.closeAction, !isEmptyQuery, activityStateRef.current.inputMethod);
+
+        // reset activity state
+        activityStateRef.current = {
+          inputMethod: null,
+          closeAction: null
+        };
+      }
+    }
   }, (0, _react2.jsx)("div", {
     css: [typeAheadContent, moreElementsInQuickInsertViewEnabled && typeAheadContentOverride, showViewMore && typeAheadWrapperWithViewMoreOverride]
     // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
@@ -348,7 +363,15 @@ var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(f
   }), (0, _react2.jsx)(_TypeAheadList.TypeAheadList, {
     items: items,
     selectedIndex: selectedIndex,
-    onItemClick: onItemInsert,
+    onItemClick: function onItemClick(mode, index, inputMethod) {
+      if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_4')) {
+        activityStateRef.current = {
+          inputMethod: inputMethod || null,
+          closeAction: _analytics.ACTION.INSERTED
+        };
+      }
+      onItemInsert(mode, index);
+    },
     fitHeight: fitHeightWithViewMore,
     editorView: editorView,
     decorationElement: anchorElement,

package/dist/cjs/ui/WrapperTypeAhead.js

@@ -8,8 +8,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.WrapperTypeAhead = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _typeAhead = require("@atlaskit/editor-common/type-ahead");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
+var _analytics2 = require("../pm-plugins/analytics");
 var _updateQuery = require("../pm-plugins/commands/update-query");
 var _itemIsDisabled2 = require("../pm-plugins/item-is-disabled");
 var _utils = require("../pm-plugins/utils");
@@ -72,6 +75,9 @@ var WrapperTypeAhead = exports.WrapperTypeAhead = /*#__PURE__*/_react.default.me
       addPrefixTrigger = _ref2.addPrefixTrigger,
       text = _ref2.text,
       forceFocusOnEditor = _ref2.forceFocusOnEditor;
+    if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_4')) {
+      (0, _analytics2.fireTypeAheadClosedAnalyticsEvent)(api, _analytics.ACTION.CANCELLED, !!queryRef.current, _analytics.INPUT_METHOD.KEYBOARD);
+    }
     setClosed(true);
     var fullquery = addPrefixTrigger ? "".concat(triggerHandler.trigger).concat(text) : text;
     onTextInsert({
@@ -79,7 +85,7 @@ var WrapperTypeAhead = exports.WrapperTypeAhead = /*#__PURE__*/_react.default.me
       setSelectionAt: setSelectionAt,
       text: fullquery
     });
-  }, [triggerHandler, onTextInsert]);
+  }, [api, triggerHandler.trigger, onTextInsert]);
   var insertSelectedItem = (0, _react.useCallback)(function () {
     var mode = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _typeAhead.SelectItemMode.SELECTED;
     var view = editorViewRef.current;
@@ -100,6 +106,9 @@ var WrapperTypeAhead = exports.WrapperTypeAhead = /*#__PURE__*/_react.default.me
     if (safeSelectedIndex === -1) {
       return;
     }
+    if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_4')) {
+      (0, _analytics2.fireTypeAheadClosedAnalyticsEvent)(api, _analytics.ACTION.INSERTED, !!queryRef.current, _analytics.INPUT_METHOD.KEYBOARD);
+    }
     setClosed(true);
     queueMicrotask(function () {
       onItemInsert({

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

@@ -0,0 +1,15 @@
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+export const fireTypeAheadClosedAnalyticsEvent = (api, closeAction, hasQuery, inputMethod) => {
+  var _api$analytics;
+  api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions.fireAnalyticsEvent({
+    action: ACTION.CLOSED,
+    actionSubject: ACTION_SUBJECT.TYPEAHEAD,
+    actionSubjectId: ACTION_SUBJECT_ID.TYPEAHEAD_QUICK_INSERT,
+    attributes: {
+      inputMethod,
+      closeAction,
+      hasQuery
+    },
+    eventType: EVENT_TYPE.TRACK
+  });
+};

package/dist/es2019/ui/TypeAheadList.js

@@ -10,6 +10,7 @@ import { css, jsx } from '@emotion/react';
 import { injectIntl, useIntl } from 'react-intl-next';
 import { CellMeasurer, CellMeasurerCache } from 'react-virtualized/dist/commonjs/CellMeasurer';
 import { List } from 'react-virtualized/dist/commonjs/List';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { SelectItemMode, typeAheadListMessages } from '@atlaskit/editor-common/type-ahead';
 import { AssistiveText } from '@atlaskit/editor-common/ui';
@@ -217,13 +218,13 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
           // TODO: DTR-1401 - why is this calling item click when hitting tab? fix this in DTR-1401
           case 'Tab':
             //Tab key quick inserts the selected item.
-            onItemClick(SelectItemMode.TAB, selectedIndex);
+            onItemClick(SelectItemMode.TAB, selectedIndex, INPUT_METHOD.KEYBOARD);
             event.preventDefault();
             break;
           case 'Enter':
             //Enter key quick inserts the selected item.
             if (!event.isComposing || event.which !== 229 && event.keyCode !== 229) {
-              onItemClick(event.shiftKey ? SelectItemMode.SHIFT_ENTER : SelectItemMode.ENTER, selectedIndex);
+              onItemClick(event.shiftKey ? SelectItemMode.SHIFT_ENTER : SelectItemMode.ENTER, selectedIndex, INPUT_METHOD.KEYBOARD);
               event.preventDefault();
             }
             break;
@@ -282,7 +283,9 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
       itemsLength: itemsLength,
       itemIndex: index,
       selectedIndex: selectedIndex,
-      onItemClick: actions.onItemClick,
+      onItemClick: (mode, index) => {
+        actions.onItemClick(mode, index, INPUT_METHOD.MOUSE);
+      },
       ariaLabel: getTypeAheadListAriaLabels(triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.trigger, intl, currentItem).listItemAriaLabel,
       moreElementsInQuickInsertViewEnabled: moreElementsInQuickInsertViewEnabled,
       api: api
@@ -300,7 +303,9 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
       itemsLength: itemsLength,
       itemIndex: index,
       selectedIndex: selectedIndex,
-      onItemClick: actions.onItemClick,
+      onItemClick: (mode, index) => {
+        actions.onItemClick(mode, index, INPUT_METHOD.MOUSE);
+      },
       ariaLabel: getTypeAheadListAriaLabels(triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.trigger, intl, currentItem).listItemAriaLabel,
       moreElementsInQuickInsertViewEnabled: moreElementsInQuickInsertViewEnabled,
       api: api

package/dist/es2019/ui/TypeAheadPopup.js

@@ -7,7 +7,7 @@ import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useSta
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import rafSchedule from 'raf-schd';
-import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { TypeAheadAvailableNodes } from '@atlaskit/editor-common/type-ahead';
 import { findOverflowScrollParent, Popup } from '@atlaskit/editor-common/ui';
@@ -15,6 +15,7 @@ import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { N0, N50A, N60A } from '@atlaskit/theme/colors';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { fireTypeAheadClosedAnalyticsEvent } from '../pm-plugins/analytics';
 import { closeTypeAhead } from '../pm-plugins/commands/close-type-ahead';
 import { CloseSelectionOptions, TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE, TYPE_AHEAD_POPUP_CONTENT_CLASS } from '../pm-plugins/constants';
 import { getPluginState } from '../pm-plugins/utils';
@@ -76,6 +77,10 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
   const moreElementsInQuickInsertViewEnabled = (featureFlagsState === null || featureFlagsState === void 0 ? void 0 : featureFlagsState.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({
+    inputMethod: null,
+    closeAction: null
+  });
   const startTime = useMemo(() => performance.now(),
   // In case those props changes
   // we need to recreate the startTime
@@ -306,21 +311,18 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
     editorView.dispatch(tr);
   };
   const onViewMoreClick = useCallback(() => {
-    if (fg('platform_editor_controls_patch_1')) {
-      close(editorView);
+    close(editorView);
+    if (openElementBrowserModal && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_4')) {
+      activityStateRef.current = {
+        inputMethod: INPUT_METHOD.MOUSE,
+        closeAction: ACTION.VIEW_MORE
+      };
     }
 
     // TODO: ED-26959 - when clean up, remove config in quick insert plugin
     // platform/packages/editor/editor-plugin-quick-insert/src/quickInsertPlugin.tsx (typeAhead.openElementBrowserModal)
     openElementBrowserModal === null || openElementBrowserModal === void 0 ? void 0 : openElementBrowserModal();
-    if (!fg('platform_editor_controls_patch_1')) {
-      cancel({
-        addPrefixTrigger: false,
-        setSelectionAt: CloseSelectionOptions.AFTER_TEXT_INSERTED,
-        forceFocusOnEditor: false
-      });
-    }
-  }, [cancel, editorView, openElementBrowserModal]);
+  }, [editorView, openElementBrowserModal]);
   return jsx(Popup, {
     zIndex: akEditorFloatingDialogZIndex,
     target: anchorElement,
@@ -331,7 +333,20 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
     fitWidth: 340,
     offset: OFFSET,
     ariaLabel: null,
-    preventOverflow: true
+    preventOverflow: true,
+    onUnmount: () => {
+      if (selectedIndex > -1 && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_4')) {
+        // if selectedIndex is -1, it means that the user has not selected any item
+        // will be handled by WrapperTypeAhead
+        fireTypeAheadClosedAnalyticsEvent(api, activityStateRef.current.closeAction, !isEmptyQuery, activityStateRef.current.inputMethod);
+
+        // reset activity state
+        activityStateRef.current = {
+          inputMethod: null,
+          closeAction: null
+        };
+      }
+    }
   }, jsx("div", {
     css: [typeAheadContent, moreElementsInQuickInsertViewEnabled && typeAheadContentOverride, showViewMore && typeAheadWrapperWithViewMoreOverride]
     // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
@@ -347,7 +362,15 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
   }), jsx(TypeAheadList, {
     items: items,
     selectedIndex: selectedIndex,
-    onItemClick: onItemInsert,
+    onItemClick: (mode, index, inputMethod) => {
+      if (editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_4')) {
+        activityStateRef.current = {
+          inputMethod: inputMethod || null,
+          closeAction: ACTION.INSERTED
+        };
+      }
+      onItemInsert(mode, index);
+    },
     fitHeight: fitHeightWithViewMore,
     editorView: editorView,
     decorationElement: anchorElement,

package/dist/es2019/ui/WrapperTypeAhead.js

@@ -1,6 +1,9 @@
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { ACTION, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { SelectItemMode, TypeAheadAvailableNodes } from '@atlaskit/editor-common/type-ahead';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { fireTypeAheadClosedAnalyticsEvent } from '../pm-plugins/analytics';
 import { updateQuery } from '../pm-plugins/commands/update-query';
 import { itemIsDisabled } from '../pm-plugins/item-is-disabled';
 import { getPluginState, moveSelectedIndex, skipForwardToSafeItem } from '../pm-plugins/utils';
@@ -50,6 +53,9 @@ export const WrapperTypeAhead = /*#__PURE__*/React.memo(({
     text,
     forceFocusOnEditor
   }) => {
+    if (editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_4')) {
+      fireTypeAheadClosedAnalyticsEvent(api, ACTION.CANCELLED, !!queryRef.current, INPUT_METHOD.KEYBOARD);
+    }
     setClosed(true);
     const fullquery = addPrefixTrigger ? `${triggerHandler.trigger}${text}` : text;
     onTextInsert({
@@ -57,7 +63,7 @@ export const WrapperTypeAhead = /*#__PURE__*/React.memo(({
       setSelectionAt,
       text: fullquery
     });
-  }, [triggerHandler, onTextInsert]);
+  }, [api, triggerHandler.trigger, onTextInsert]);
   const insertSelectedItem = useCallback((mode = SelectItemMode.SELECTED) => {
     const {
       current: view
@@ -78,6 +84,9 @@ export const WrapperTypeAhead = /*#__PURE__*/React.memo(({
     if (safeSelectedIndex === -1) {
       return;
     }
+    if (editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_4')) {
+      fireTypeAheadClosedAnalyticsEvent(api, ACTION.INSERTED, !!queryRef.current, INPUT_METHOD.KEYBOARD);
+    }
     setClosed(true);
     queueMicrotask(() => {
       onItemInsert({

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

@@ -0,0 +1,15 @@
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+export var fireTypeAheadClosedAnalyticsEvent = function fireTypeAheadClosedAnalyticsEvent(api, closeAction, hasQuery, inputMethod) {
+  var _api$analytics;
+  api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.fireAnalyticsEvent({
+    action: ACTION.CLOSED,
+    actionSubject: ACTION_SUBJECT.TYPEAHEAD,
+    actionSubjectId: ACTION_SUBJECT_ID.TYPEAHEAD_QUICK_INSERT,
+    attributes: {
+      inputMethod: inputMethod,
+      closeAction: closeAction,
+      hasQuery: hasQuery
+    },
+    eventType: EVENT_TYPE.TRACK
+  });
+};

package/dist/esm/ui/TypeAheadList.js

@@ -11,6 +11,7 @@ import { css, jsx } from '@emotion/react';
 import { injectIntl, useIntl } from 'react-intl-next';
 import { CellMeasurer, CellMeasurerCache } from 'react-virtualized/dist/commonjs/CellMeasurer';
 import { List } from 'react-virtualized/dist/commonjs/List';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { SelectItemMode, typeAheadListMessages } from '@atlaskit/editor-common/type-ahead';
 import { AssistiveText } from '@atlaskit/editor-common/ui';
@@ -225,13 +226,13 @@ var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref2) {
           // TODO: DTR-1401 - why is this calling item click when hitting tab? fix this in DTR-1401
           case 'Tab':
             //Tab key quick inserts the selected item.
-            onItemClick(SelectItemMode.TAB, selectedIndex);
+            onItemClick(SelectItemMode.TAB, selectedIndex, INPUT_METHOD.KEYBOARD);
             event.preventDefault();
             break;
           case 'Enter':
             //Enter key quick inserts the selected item.
             if (!event.isComposing || event.which !== 229 && event.keyCode !== 229) {
-              onItemClick(event.shiftKey ? SelectItemMode.SHIFT_ENTER : SelectItemMode.ENTER, selectedIndex);
+              onItemClick(event.shiftKey ? SelectItemMode.SHIFT_ENTER : SelectItemMode.ENTER, selectedIndex, INPUT_METHOD.KEYBOARD);
               event.preventDefault();
             }
             break;
@@ -293,7 +294,9 @@ var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref2) {
         itemsLength: itemsLength,
         itemIndex: index,
         selectedIndex: selectedIndex,
-        onItemClick: actions.onItemClick,
+        onItemClick: function onItemClick(mode, index) {
+          actions.onItemClick(mode, index, INPUT_METHOD.MOUSE);
+        },
         ariaLabel: getTypeAheadListAriaLabels(triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.trigger, intl, currentItem).listItemAriaLabel,
         moreElementsInQuickInsertViewEnabled: moreElementsInQuickInsertViewEnabled,
         api: api
@@ -314,7 +317,9 @@ var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref2) {
       itemsLength: itemsLength,
       itemIndex: index,
       selectedIndex: selectedIndex,
-      onItemClick: actions.onItemClick,
+      onItemClick: function onItemClick(mode, index) {
+        actions.onItemClick(mode, index, INPUT_METHOD.MOUSE);
+      },
       ariaLabel: getTypeAheadListAriaLabels(triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.trigger, intl, currentItem).listItemAriaLabel,
       moreElementsInQuickInsertViewEnabled: moreElementsInQuickInsertViewEnabled,
       api: api

package/dist/esm/ui/TypeAheadPopup.js

@@ -8,7 +8,7 @@ import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useSta
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import rafSchedule from 'raf-schd';
-import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { TypeAheadAvailableNodes } from '@atlaskit/editor-common/type-ahead';
 import { findOverflowScrollParent, Popup } from '@atlaskit/editor-common/ui';
@@ -16,6 +16,7 @@ import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { N0, N50A, N60A } from '@atlaskit/theme/colors';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { fireTypeAheadClosedAnalyticsEvent } from '../pm-plugins/analytics';
 import { closeTypeAhead } from '../pm-plugins/commands/close-type-ahead';
 import { CloseSelectionOptions, TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE, TYPE_AHEAD_POPUP_CONTENT_CLASS } from '../pm-plugins/constants';
 import { getPluginState } from '../pm-plugins/utils';
@@ -75,6 +76,10 @@ export var TypeAheadPopup = /*#__PURE__*/React.memo(function (props) {
   var defaultMenuHeight = useMemo(function () {
     return moreElementsInQuickInsertViewEnabled ? DEFAULT_TYPEAHEAD_MENU_HEIGHT_NEW : DEFAULT_TYPEAHEAD_MENU_HEIGHT;
   }, [moreElementsInQuickInsertViewEnabled]);
+  var activityStateRef = useRef({
+    inputMethod: null,
+    closeAction: null
+  });
   var startTime = useMemo(function () {
     return performance.now();
   },
@@ -296,21 +301,18 @@ export var TypeAheadPopup = /*#__PURE__*/React.memo(function (props) {
     editorView.dispatch(tr);
   };
   var onViewMoreClick = useCallback(function () {
-    if (fg('platform_editor_controls_patch_1')) {
-      close(editorView);
+    close(editorView);
+    if (openElementBrowserModal && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_4')) {
+      activityStateRef.current = {
+        inputMethod: INPUT_METHOD.MOUSE,
+        closeAction: ACTION.VIEW_MORE
+      };
     }
 
     // TODO: ED-26959 - when clean up, remove config in quick insert plugin
     // platform/packages/editor/editor-plugin-quick-insert/src/quickInsertPlugin.tsx (typeAhead.openElementBrowserModal)
     openElementBrowserModal === null || openElementBrowserModal === void 0 || openElementBrowserModal();
-    if (!fg('platform_editor_controls_patch_1')) {
-      cancel({
-        addPrefixTrigger: false,
-        setSelectionAt: CloseSelectionOptions.AFTER_TEXT_INSERTED,
-        forceFocusOnEditor: false
-      });
-    }
-  }, [cancel, editorView, openElementBrowserModal]);
+  }, [editorView, openElementBrowserModal]);
   return jsx(Popup, {
     zIndex: akEditorFloatingDialogZIndex,
     target: anchorElement,
@@ -321,7 +323,20 @@ export var TypeAheadPopup = /*#__PURE__*/React.memo(function (props) {
     fitWidth: 340,
     offset: OFFSET,
     ariaLabel: null,
-    preventOverflow: true
+    preventOverflow: true,
+    onUnmount: function onUnmount() {
+      if (selectedIndex > -1 && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_4')) {
+        // if selectedIndex is -1, it means that the user has not selected any item
+        // will be handled by WrapperTypeAhead
+        fireTypeAheadClosedAnalyticsEvent(api, activityStateRef.current.closeAction, !isEmptyQuery, activityStateRef.current.inputMethod);
+
+        // reset activity state
+        activityStateRef.current = {
+          inputMethod: null,
+          closeAction: null
+        };
+      }
+    }
   }, jsx("div", {
     css: [typeAheadContent, moreElementsInQuickInsertViewEnabled && typeAheadContentOverride, showViewMore && typeAheadWrapperWithViewMoreOverride]
     // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
@@ -337,7 +352,15 @@ export var TypeAheadPopup = /*#__PURE__*/React.memo(function (props) {
   }), jsx(TypeAheadList, {
     items: items,
     selectedIndex: selectedIndex,
-    onItemClick: onItemInsert,
+    onItemClick: function onItemClick(mode, index, inputMethod) {
+      if (editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_4')) {
+        activityStateRef.current = {
+          inputMethod: inputMethod || null,
+          closeAction: ACTION.INSERTED
+        };
+      }
+      onItemInsert(mode, index);
+    },
     fitHeight: fitHeightWithViewMore,
     editorView: editorView,
     decorationElement: anchorElement,

package/dist/esm/ui/WrapperTypeAhead.js

@@ -1,7 +1,10 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { ACTION, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { SelectItemMode, TypeAheadAvailableNodes } from '@atlaskit/editor-common/type-ahead';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { fireTypeAheadClosedAnalyticsEvent } from '../pm-plugins/analytics';
 import { updateQuery } from '../pm-plugins/commands/update-query';
 import { itemIsDisabled as _itemIsDisabled } from '../pm-plugins/item-is-disabled';
 import { getPluginState, moveSelectedIndex, skipForwardToSafeItem } from '../pm-plugins/utils';
@@ -62,6 +65,9 @@ export var WrapperTypeAhead = /*#__PURE__*/React.memo(function (_ref) {
       addPrefixTrigger = _ref2.addPrefixTrigger,
       text = _ref2.text,
       forceFocusOnEditor = _ref2.forceFocusOnEditor;
+    if (editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_4')) {
+      fireTypeAheadClosedAnalyticsEvent(api, ACTION.CANCELLED, !!queryRef.current, INPUT_METHOD.KEYBOARD);
+    }
     setClosed(true);
     var fullquery = addPrefixTrigger ? "".concat(triggerHandler.trigger).concat(text) : text;
     onTextInsert({
@@ -69,7 +75,7 @@ export var WrapperTypeAhead = /*#__PURE__*/React.memo(function (_ref) {
       setSelectionAt: setSelectionAt,
       text: fullquery
     });
-  }, [triggerHandler, onTextInsert]);
+  }, [api, triggerHandler.trigger, onTextInsert]);
   var insertSelectedItem = useCallback(function () {
     var mode = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : SelectItemMode.SELECTED;
     var view = editorViewRef.current;
@@ -90,6 +96,9 @@ export var WrapperTypeAhead = /*#__PURE__*/React.memo(function (_ref) {
     if (safeSelectedIndex === -1) {
       return;
     }
+    if (editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_4')) {
+      fireTypeAheadClosedAnalyticsEvent(api, ACTION.INSERTED, !!queryRef.current, INPUT_METHOD.KEYBOARD);
+    }
     setClosed(true);
     queueMicrotask(function () {
       onItemInsert({

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

@@ -0,0 +1,6 @@
+import { ACTION, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { TypeAheadPlugin } from '../typeAheadPluginType';
+export type CloseActionType = ACTION.INSERTED | ACTION.CANCELLED | ACTION.VIEW_MORE;
+export type InputMethodType = INPUT_METHOD.KEYBOARD | INPUT_METHOD.MOUSE;
+export declare const fireTypeAheadClosedAnalyticsEvent: (api: ExtractInjectionAPI<TypeAheadPlugin> | undefined, closeAction: CloseActionType | null, hasQuery: boolean, inputMethod: InputMethodType | null) => void;

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

@@ -7,13 +7,14 @@ import type { WrappedComponentProps } from 'react-intl-next';
 import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
 import { type ExtractInjectionAPI, type TypeAheadItem } from '@atlaskit/editor-common/types';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { InputMethodType } from '../pm-plugins/analytics';
 import { type TypeAheadPlugin } from '../typeAheadPluginType';
 import type { TypeAheadHandler } from '../types';
 export declare const TypeAheadList: React.FC<import("react-intl-next").WithIntlProps<{
     items: Array<TypeAheadItem>;
     selectedIndex: number;
     editorView: EditorView;
-    onItemClick: (mode: SelectItemMode, index: number) => void;
+    onItemClick: (mode: SelectItemMode, index: number, inputMethod?: InputMethodType) => void;
     fitHeight: number;
     decorationElement: HTMLElement;
     triggerHandler?: TypeAheadHandler | undefined;
@@ -26,7 +27,7 @@ export declare const TypeAheadList: React.FC<import("react-intl-next").WithIntlP
         items: Array<TypeAheadItem>;
         selectedIndex: number;
         editorView: EditorView;
-        onItemClick: (mode: SelectItemMode, index: number) => void;
+        onItemClick: (mode: SelectItemMode, index: number, inputMethod?: InputMethodType) => void;
         fitHeight: number;
         decorationElement: HTMLElement;
         triggerHandler?: TypeAheadHandler | undefined;

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

@@ -5,7 +5,7 @@
 import React from 'react';
 import { jsx } from '@emotion/react';
 import type { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
-import type { ExtractInjectionAPI, TypeAheadItem, TypeAheadHandler } from '@atlaskit/editor-common/types';
+import type { ExtractInjectionAPI, TypeAheadHandler, TypeAheadItem } from '@atlaskit/editor-common/types';
 import type { DecorationSet, EditorView } from '@atlaskit/editor-prosemirror/view';
 import { CloseSelectionOptions } from '../pm-plugins/constants';
 import type { TypeAheadPlugin } from '../typeAheadPluginType';

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

@@ -0,0 +1,6 @@
+import { ACTION, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { TypeAheadPlugin } from '../typeAheadPluginType';
+export type CloseActionType = ACTION.INSERTED | ACTION.CANCELLED | ACTION.VIEW_MORE;
+export type InputMethodType = INPUT_METHOD.KEYBOARD | INPUT_METHOD.MOUSE;
+export declare const fireTypeAheadClosedAnalyticsEvent: (api: ExtractInjectionAPI<TypeAheadPlugin> | undefined, closeAction: CloseActionType | null, hasQuery: boolean, inputMethod: InputMethodType | null) => void;

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

@@ -7,13 +7,14 @@ import type { WrappedComponentProps } from 'react-intl-next';
 import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
 import { type ExtractInjectionAPI, type TypeAheadItem } from '@atlaskit/editor-common/types';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { InputMethodType } from '../pm-plugins/analytics';
 import { type TypeAheadPlugin } from '../typeAheadPluginType';
 import type { TypeAheadHandler } from '../types';
 export declare const TypeAheadList: React.FC<import("react-intl-next").WithIntlProps<{
     items: Array<TypeAheadItem>;
     selectedIndex: number;
     editorView: EditorView;
-    onItemClick: (mode: SelectItemMode, index: number) => void;
+    onItemClick: (mode: SelectItemMode, index: number, inputMethod?: InputMethodType) => void;
     fitHeight: number;
     decorationElement: HTMLElement;
     triggerHandler?: TypeAheadHandler | undefined;
@@ -26,7 +27,7 @@ export declare const TypeAheadList: React.FC<import("react-intl-next").WithIntlP
         items: Array<TypeAheadItem>;
         selectedIndex: number;
         editorView: EditorView;
-        onItemClick: (mode: SelectItemMode, index: number) => void;
+        onItemClick: (mode: SelectItemMode, index: number, inputMethod?: InputMethodType) => void;
         fitHeight: number;
         decorationElement: HTMLElement;
         triggerHandler?: TypeAheadHandler | undefined;

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

@@ -5,7 +5,7 @@
 import React from 'react';
 import { jsx } from '@emotion/react';
 import type { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
-import type { ExtractInjectionAPI, TypeAheadItem, TypeAheadHandler } from '@atlaskit/editor-common/types';
+import type { ExtractInjectionAPI, TypeAheadHandler, TypeAheadItem } from '@atlaskit/editor-common/types';
 import type { DecorationSet, EditorView } from '@atlaskit/editor-prosemirror/view';
 import { CloseSelectionOptions } from '../pm-plugins/constants';
 import type { TypeAheadPlugin } from '../typeAheadPluginType';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-type-ahead",
-	"version": "2.3.3",
+	"version": "2.4.0",
 	"description": "Type-ahead plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -34,7 +34,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^47.6.0",
-		"@atlaskit/editor-common": "^103.1.0",
+		"@atlaskit/editor-common": "^103.5.0",
 		"@atlaskit/editor-element-browser": "^0.1.0",
 		"@atlaskit/editor-plugin-analytics": "^2.2.0",
 		"@atlaskit/editor-plugin-connectivity": "^2.0.0",
@@ -107,14 +107,14 @@
 		"platform_editor_typeahead_dynamic_height_fix": {
 			"type": "boolean"
 		},
-		"platform_editor_controls_patch_1": {
-			"type": "boolean"
-		},
 		"platform_editor_controls_patch_2": {
 			"type": "boolean"
 		},
 		"platform_editor_controls_patch_3": {
 			"type": "boolean"
+		},
+		"platform_editor_controls_patch_4": {
+			"type": "boolean"
 		}
 	}
 }