@atlaskit/editor-plugin-type-ahead 2.7.10 → 2.7.12

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/editor-plugin-type-ahead
 
+## 2.7.12
+
+### Patch Changes
+
+- [#165113](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/165113)
+  [`867bcb05452bf`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/867bcb05452bf) -
+  Cleaned up platform_editor_controls_patch_analytics and platform_editor_controls_patch_analytics_2
+- Updated dependencies
+
+## 2.7.11
+
+### Patch Changes
+
+- [#164625](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/164625)
+  [`aac10c2d4c08d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/aac10c2d4c08d) -
+  [ED-26900] Add a new config, getMoreOptionsButtonConfig, to TypeAheadHandler so that it can
+  support adding a more option button to typeahead list
+- Updated dependencies
+
 ## 2.7.10
 
 ### Patch Changes

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

@@ -1,30 +1,23 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.fireTypeAheadClosedAnalyticsEvent = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _analytics = require("@atlaskit/editor-common/analytics");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var fireTypeAheadClosedAnalyticsEvent = exports.fireTypeAheadClosedAnalyticsEvent = function fireTypeAheadClosedAnalyticsEvent(api, closeAction, hasQuery, inputMethod) {
   var _api$analytics;
   var invocationMethod = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : null;
-  var additionalAttributes = (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_analytics') ? {
-    invocationMethod: invocationMethod
-  } : {};
   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: _objectSpread({
+    attributes: {
       inputMethod: inputMethod,
       closeAction: closeAction,
-      hasQuery: hasQuery
-    }, additionalAttributes),
+      hasQuery: hasQuery,
+      invocationMethod: invocationMethod
+    },
     eventType: _analytics.EVENT_TYPE.TRACK
   });
 };

package/dist/cjs/ui/MoreOptions.js

@@ -0,0 +1,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MoreOptions = void 0;
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _menu = require("@atlaskit/menu");
+var _colors = require("@atlaskit/theme/colors");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+var buttonStyles = (0, _react2.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '& > button:hover': {
+    backgroundColor: "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N30, ")")
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '& > button:focus': {
+    backgroundColor: "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N30, ")")
+  }
+});
+var MoreOptions = exports.MoreOptions = function MoreOptions(_ref) {
+  var onClick = _ref.onClick,
+    isFocused = _ref.isFocused,
+    title = _ref.title,
+    ariaLabel = _ref.ariaLabel,
+    iconBefore = _ref.iconBefore;
+  var ref = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    if (isFocused && ref.current) {
+      ref.current.focus();
+    }
+  }, [isFocused]);
+  (0, _react.useEffect)(function () {
+    if (!ref.current) {
+      return;
+    }
+    var element = ref.current;
+    var handleEnter = function handleEnter(e) {
+      if (e.key === 'Enter') {
+        onClick();
+        // Prevent keydown listener in TypeaheadList from handling Enter pressed
+        e.stopPropagation();
+      } else if (e.key === 'Tab') {
+        // TypeaheadList will try to insert selected item on Tab press
+        // hence stop propagation to prevent that and treat this as noop
+        e.stopPropagation();
+        e.preventDefault();
+      }
+    };
+
+    // Ignored via go/ees005
+    // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+    element === null || element === void 0 || element.addEventListener('keydown', handleEnter);
+    return function () {
+      // Ignored via go/ees005
+      // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+      element === null || element === void 0 || element.removeEventListener('keydown', handleEnter);
+    };
+  });
+  return (0, _react2.jsx)(_menu.Section, {
+    hasSeparator: true
+  }, (0, _react2.jsx)("span", {
+    css: buttonStyles
+  }, (0, _react2.jsx)(_menu.ButtonItem, {
+    ref: ref,
+    onClick: onClick,
+    iconBefore: iconBefore,
+    "aria-label": ariaLabel,
+    testId: "type-ahead-more-options-button"
+  }, title)));
+};

package/dist/cjs/ui/TypeAheadList.js

@@ -19,10 +19,12 @@ var _ui = require("@atlaskit/editor-common/ui");
 var _menu = require("@atlaskit/menu");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
+var _closeTypeAhead = require("../pm-plugins/commands/close-type-ahead");
 var _updateSelectedIndex = require("../pm-plugins/commands/update-selected-index");
 var _constants = require("../pm-plugins/constants");
 var _utils = require("../pm-plugins/utils");
 var _ListRow = require("./ListRow");
+var _MoreOptions = require("./MoreOptions");
 var _TypeAheadListItem = require("./TypeAheadListItem");
 var _ViewMore = require("./ViewMore");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
@@ -55,7 +57,7 @@ var TypeaheadAssistiveTextPureComponent = /*#__PURE__*/_react.default.memo(funct
   });
 });
 var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref2) {
-  var _decorationElement$qu2;
+  var _triggerHandler$getMo, _decorationElement$qu2;
   var items = _ref2.items,
     selectedIndex = _ref2.selectedIndex,
     editorView = _ref2.editorView,
@@ -66,8 +68,8 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref2) {
     triggerHandler = _ref2.triggerHandler,
     moreElementsInQuickInsertViewEnabled = _ref2.moreElementsInQuickInsertViewEnabled,
     api = _ref2.api,
-    showViewMore = _ref2.showViewMore,
-    onViewMoreClick = _ref2.onViewMoreClick;
+    showMoreOptionsButton = _ref2.showMoreOptionsButton,
+    onMoreOptionsClicked = _ref2.onMoreOptionsClicked;
   var listRef = (0, _react.useRef)();
   var listContainerRef = (0, _react.useRef)(null);
   var lastVisibleIndexes = (0, _react.useRef)({
@@ -78,7 +80,7 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref2) {
   });
 
   // Exclude view more item from the count
-  var itemsLength = showViewMore ? items.length - 1 : items.length;
+  var itemsLength = showMoreOptionsButton ? Math.max(items.length - 1, 0) : items.length;
   var estimatedHeight = itemsLength * LIST_ITEM_ESTIMATED_HEIGHT;
   var _useState = (0, _react.useState)(Math.min(estimatedHeight, fitHeight)),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -145,7 +147,7 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref2) {
     // to calculate each height. THen, we can schedule a new frame when this one finishs.
     requestAnimationFrame(function () {
       requestAnimationFrame(function () {
-        var isViewMoreSelected = showViewMore && selectedIndex === itemsLength;
+        var isViewMoreSelected = showMoreOptionsButton && selectedIndex === itemsLength;
         var isSelectedItemVisible = selectedIndex >= lastVisibleStartIndex && selectedIndex <= lastVisibleStopIndex ||
         // view more is always visible, hence no scrolling
         isViewMoreSelected;
@@ -158,7 +160,7 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref2) {
         }
       });
     });
-  }, [selectedIndex, lastVisibleStartIndex, lastVisibleStopIndex, itemsLength, showViewMore]);
+  }, [selectedIndex, lastVisibleStartIndex, lastVisibleStopIndex, itemsLength, showMoreOptionsButton]);
   var _onMouseMove = function onMouseMove(event, index) {
     event.preventDefault();
     event.stopPropagation();
@@ -171,7 +173,7 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref2) {
     if (!listRef.current) {
       return;
     }
-    var isViewMoreSelected = showViewMore && selectedIndex === itemsLength;
+    var isViewMoreSelected = showMoreOptionsButton && selectedIndex === itemsLength;
     var isSelectedItemVisible = selectedIndex >= lastVisibleStartIndex && selectedIndex <= lastVisibleStopIndex ||
     // view more is always visible, hence no scrolling
     isViewMoreSelected;
@@ -182,7 +184,7 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref2) {
     } else if (selectedIndex === -1) {
       listRef.current.scrollToRow(0);
     }
-  }, [selectedIndex, lastVisibleStartIndex, lastVisibleStopIndex, itemsLength, showViewMore]);
+  }, [selectedIndex, lastVisibleStartIndex, lastVisibleStopIndex, itemsLength, showMoreOptionsButton]);
   (0, _react.useLayoutEffect)(function () {
     setCache(new _CellMeasurer.CellMeasurerCache({
       fixedWidth: true,
@@ -201,14 +203,14 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref2) {
   }, [items]);
   (0, _react.useLayoutEffect)(function () {
     // Exclude view more item from the count
-    var itemsToRender = showViewMore ? items.slice(0, -1) : items;
+    var itemsToRender = showMoreOptionsButton ? items.slice(0, -1) : items;
     var height = Math.min(itemsToRender.reduce(function (prevValue, currentValue, index) {
       return prevValue + cache.rowHeight({
         index: index
       });
     }, 0), fitHeight);
     setHeight(height);
-  }, [items, cache, fitHeight, showViewMore]);
+  }, [items, cache, fitHeight, showMoreOptionsButton]);
   (0, _react.useLayoutEffect)(function () {
     if (!listContainerRef.current) {
       return;
@@ -268,13 +270,27 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref2) {
       return item.isDisabledOffline !== true;
     });
   }, [items]);
-  var renderRow = function renderRow(_ref4) {
-    var index = _ref4.index,
-      key = _ref4.key,
-      style = _ref4.style,
-      parent = _ref4.parent,
-      isScrolling = _ref4.isScrolling,
-      isVisible = _ref4.isVisible;
+  var config = triggerHandler === null || triggerHandler === void 0 || (_triggerHandler$getMo = triggerHandler.getMoreOptionsButtonConfig) === null || _triggerHandler$getMo === void 0 ? void 0 : _triggerHandler$getMo.call(triggerHandler, intl);
+  var handleClick = function handleClick() {
+    if (onMoreOptionsClicked) {
+      onMoreOptionsClicked();
+    }
+    api === null || api === void 0 || api.core.actions.execute(function (_ref4) {
+      var tr = _ref4.tr;
+      (0, _closeTypeAhead.closeTypeAhead)(tr);
+      config === null || config === void 0 || config.onClick({
+        tr: tr
+      });
+      return tr;
+    });
+  };
+  var renderRow = function renderRow(_ref5) {
+    var index = _ref5.index,
+      key = _ref5.key,
+      style = _ref5.style,
+      parent = _ref5.parent,
+      isScrolling = _ref5.isScrolling,
+      isVisible = _ref5.isVisible;
     var currentItem = items[index];
     return (0, _react2.jsx)(_CellMeasurer.CellMeasurer, {
       key: key,
@@ -282,9 +298,9 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref2) {
       parent: parent,
       columnIndex: 0,
       rowIndex: index
-    }, (0, _platformFeatureFlags.fg)('platform_editor_typeahead_dynamic_height_fix') ? function (_ref5) {
-      var measure = _ref5.measure,
-        registerChild = _ref5.registerChild;
+    }, (0, _platformFeatureFlags.fg)('platform_editor_typeahead_dynamic_height_fix') ? function (_ref6) {
+      var measure = _ref6.measure,
+        registerChild = _ref6.registerChild;
       return (0, _react2.jsx)(_ListRow.ListRow, {
         registerChild: registerChild,
         measure: measure,
@@ -393,8 +409,14 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref2) {
   }, (0, _react2.jsx)("div", {
     id: menuGroupId,
     ref: listContainerRef
-  }, !showViewMore || itemsLength ? ListContent : EmptyResultView, showViewMore && onViewMoreClick && (0, _react2.jsx)(_ViewMore.ViewMore, {
-    onClick: onViewMoreClick,
+  }, !showMoreOptionsButton || itemsLength ? ListContent : EmptyResultView, (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_12') ? showMoreOptionsButton && config && (0, _react2.jsx)(_MoreOptions.MoreOptions, {
+    title: config.title,
+    ariaLabel: config.ariaLabel,
+    onClick: handleClick,
+    isFocused: selectedIndex === itemsLength,
+    iconBefore: config.iconBefore
+  }) : showMoreOptionsButton && onMoreOptionsClicked && (0, _react2.jsx)(_ViewMore.ViewMore, {
+    onClick: onMoreOptionsClicked,
     isFocused: selectedIndex === itemsLength
   }), (0, _react2.jsx)(TypeaheadAssistiveTextPureComponent, {
     numberOfResults: itemsLength.toString()

package/dist/cjs/ui/TypeAheadMenu.js

@@ -8,6 +8,7 @@ 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 _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _updateSelectedIndex = require("../pm-plugins/commands/update-selected-index");
 var _useItemInsert3 = require("./hooks/use-item-insert");
@@ -81,8 +82,15 @@ var TypeAheadMenu = exports.TypeAheadMenu = /*#__PURE__*/_react.default.memo(fun
 
   // @ts-ignore
   var openElementBrowserModal = triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.openElementBrowserModal;
-  var showViewMore = (triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.id) === _typeAhead.TypeAheadAvailableNodes.QUICK_INSERT && !!openElementBrowserModal && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1');
-  if (!isOpen || !triggerHandler || !(decorationElement instanceof HTMLElement) || !showViewMore && items.length === 0 && !errorInfo) {
+  var showMoreOptionsButton = false;
+  if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
+    if ((0, _platformFeatureFlags.fg)('platform_editor_controls_patch_12')) {
+      showMoreOptionsButton = !!(triggerHandler !== null && triggerHandler !== void 0 && triggerHandler.getMoreOptionsButtonConfig);
+    } else {
+      showMoreOptionsButton = (triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.id) === _typeAhead.TypeAheadAvailableNodes.QUICK_INSERT && !!openElementBrowserModal;
+    }
+  }
+  if (!isOpen || !triggerHandler || !(decorationElement instanceof HTMLElement) || !openElementBrowserModal && items.length === 0 && !errorInfo) {
     return null;
   }
   return /*#__PURE__*/_react.default.createElement(_TypeAheadPopup.TypeAheadPopup, {
@@ -101,6 +109,6 @@ var TypeAheadMenu = exports.TypeAheadMenu = /*#__PURE__*/_react.default.memo(fun
     isEmptyQuery: !query,
     cancel: cancel,
     api: api,
-    showViewMore: showViewMore
+    showMoreOptionsButton: showMoreOptionsButton
   });
 });

package/dist/cjs/ui/TypeAheadPopup.js

@@ -91,7 +91,7 @@ var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(f
     isEmptyQuery = props.isEmptyQuery,
     cancel = props.cancel,
     api = props.api,
-    showViewMore = props.showViewMore;
+    showMoreOptionsButton = props.showMoreOptionsButton;
   var ref = (0, _react.useRef)(null);
   var _useSharedState = useSharedState(api),
     moreElementsInQuickInsertView = _useSharedState.moreElementsInQuickInsertView;
@@ -160,11 +160,11 @@ var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(f
     fitHeight = _useState2[0],
     setFitHeight = _useState2[1];
   var fitHeightWithViewMore = (0, _react.useMemo)(function () {
-    if (showViewMore) {
+    if (showMoreOptionsButton) {
       return fitHeight - VIEWMORE_BUTTON_HEIGHT;
     }
     return fitHeight;
-  }, [fitHeight, showViewMore]);
+  }, [fitHeight, showMoreOptionsButton]);
   var getFitHeight = (0, _react.useCallback)(function () {
     if (!anchorElement || !popupsMountPoint) {
       return;
@@ -313,20 +313,21 @@ var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(f
     (0, _closeTypeAhead.closeTypeAhead)(tr);
     editorView.dispatch(tr);
   };
-  var onViewMoreClick = (0, _react.useCallback)(function () {
-    close(editorView);
-    if (openElementBrowserModal && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_4')) {
+  var onMoreOptionsClicked = (0, _react.useCallback)(function () {
+    if (
+    // eslint-disable-next-line @atlaskit/platform/no-preconditioning
+    openElementBrowserModal && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_4') && (!(0, _platformFeatureFlags.fg)('platform_editor_controls_patch_12') || triggerHandler.id === _typeAhead.TypeAheadAvailableNodes.QUICK_INSERT)) {
       activityStateRef.current = {
         inputMethod: _analytics.INPUT_METHOD.MOUSE,
         closeAction: _analytics.ACTION.VIEW_MORE,
         invocationMethod: activityStateRef.current.invocationMethod
       };
     }
-
-    // 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();
-  }, [editorView, openElementBrowserModal]);
+    if (!(0, _platformFeatureFlags.fg)('platform_editor_controls_patch_12')) {
+      close(editorView);
+      openElementBrowserModal === null || openElementBrowserModal === void 0 || openElementBrowserModal();
+    }
+  }, [editorView, openElementBrowserModal, triggerHandler.id]);
   return (0, _react2.jsx)(_ui.Popup, {
     zIndex: _editorSharedStyles.akEditorFloatingDialogZIndex,
     target: anchorElement,
@@ -353,7 +354,7 @@ var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(f
       }
     }
   }, (0, _react2.jsx)("div", {
-    css: [typeAheadContent, moreElementsInQuickInsertViewEnabled && typeAheadContentOverride, showViewMore && typeAheadWrapperWithViewMoreOverride]
+    css: [typeAheadContent, moreElementsInQuickInsertViewEnabled && typeAheadContentOverride, showMoreOptionsButton && typeAheadWrapperWithViewMoreOverride]
     // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
     ,
     tabIndex: 0
@@ -383,8 +384,8 @@ var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(f
     triggerHandler: triggerHandler,
     moreElementsInQuickInsertViewEnabled: moreElementsInQuickInsertViewEnabled,
     api: api,
-    showViewMore: showViewMore,
-    onViewMoreClick: onViewMoreClick
+    showMoreOptionsButton: showMoreOptionsButton,
+    onMoreOptionsClicked: onMoreOptionsClicked
   }))));
 });
 TypeAheadPopup.displayName = 'TypeAheadPopup';

package/dist/cjs/ui/WrapperTypeAhead.js

@@ -36,7 +36,14 @@ var WrapperTypeAhead = exports.WrapperTypeAhead = /*#__PURE__*/_react.default.me
     api = _ref.api;
   // @ts-ignore
   var openElementBrowserModal = triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.openElementBrowserModal;
-  var showViewMore = (triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.id) === _typeAhead.TypeAheadAvailableNodes.QUICK_INSERT && !!openElementBrowserModal && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1');
+  var showMoreOptionsButton = false;
+  if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
+    if ((0, _platformFeatureFlags.fg)('platform_editor_controls_patch_12')) {
+      showMoreOptionsButton = !!(triggerHandler !== null && triggerHandler !== void 0 && triggerHandler.getMoreOptionsButtonConfig);
+    } else {
+      showMoreOptionsButton = (triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.id) === _typeAhead.TypeAheadAvailableNodes.QUICK_INSERT && !!openElementBrowserModal;
+    }
+  }
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     closed = _useState2[0],
@@ -47,7 +54,7 @@ var WrapperTypeAhead = exports.WrapperTypeAhead = /*#__PURE__*/_react.default.me
     setQuery = _useState4[1];
   var queryRef = (0, _react.useRef)(query);
   var editorViewRef = (0, _react.useRef)(editorView);
-  var items = (0, _useLoadItems.useLoadItems)(triggerHandler, editorView, query, showViewMore);
+  var items = (0, _useLoadItems.useLoadItems)(triggerHandler, editorView, query, showMoreOptionsButton);
   (0, _react.useEffect)(function () {
     if (!closed && (0, _platformFeatureFlags.fg)('platform_editor_ease_of_use_metrics')) {
       var _api$metrics;

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

@@ -1,10 +1,6 @@
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
-import { fg } from '@atlaskit/platform-feature-flags';
 export const fireTypeAheadClosedAnalyticsEvent = (api, closeAction, hasQuery, inputMethod, invocationMethod = null) => {
   var _api$analytics;
-  const additionalAttributes = fg('platform_editor_controls_patch_analytics') ? {
-    invocationMethod
-  } : {};
   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,
@@ -13,7 +9,7 @@ export const fireTypeAheadClosedAnalyticsEvent = (api, closeAction, hasQuery, in
       inputMethod,
       closeAction,
       hasQuery,
-      ...additionalAttributes
+      invocationMethod
     },
     eventType: EVENT_TYPE.TRACK
   });

package/dist/es2019/ui/MoreOptions.js

@@ -0,0 +1,74 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { useEffect, useRef } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+import { ButtonItem, Section } from '@atlaskit/menu';
+import { N30 } from '@atlaskit/theme/colors';
+const buttonStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '& > button:hover': {
+    backgroundColor: `var(--ds-background-neutral-subtle-hovered, ${N30})`
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '& > button:focus': {
+    backgroundColor: `var(--ds-background-neutral-subtle-hovered, ${N30})`
+  }
+});
+export const MoreOptions = ({
+  onClick,
+  isFocused,
+  title,
+  ariaLabel,
+  iconBefore
+}) => {
+  const ref = useRef(null);
+  useEffect(() => {
+    if (isFocused && ref.current) {
+      ref.current.focus();
+    }
+  }, [isFocused]);
+  useEffect(() => {
+    if (!ref.current) {
+      return;
+    }
+    const {
+      current: element
+    } = ref;
+    const handleEnter = e => {
+      if (e.key === 'Enter') {
+        onClick();
+        // Prevent keydown listener in TypeaheadList from handling Enter pressed
+        e.stopPropagation();
+      } else if (e.key === 'Tab') {
+        // TypeaheadList will try to insert selected item on Tab press
+        // hence stop propagation to prevent that and treat this as noop
+        e.stopPropagation();
+        e.preventDefault();
+      }
+    };
+
+    // Ignored via go/ees005
+    // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+    element === null || element === void 0 ? void 0 : element.addEventListener('keydown', handleEnter);
+    return () => {
+      // Ignored via go/ees005
+      // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+      element === null || element === void 0 ? void 0 : element.removeEventListener('keydown', handleEnter);
+    };
+  });
+  return jsx(Section, {
+    hasSeparator: true
+  }, jsx("span", {
+    css: buttonStyles
+  }, jsx(ButtonItem, {
+    ref: ref,
+    onClick: onClick,
+    iconBefore: iconBefore,
+    "aria-label": ariaLabel,
+    testId: "type-ahead-more-options-button"
+  }, title)));
+};

package/dist/es2019/ui/TypeAheadList.js

@@ -17,10 +17,12 @@ import { AssistiveText } from '@atlaskit/editor-common/ui';
 import { MenuGroup } from '@atlaskit/menu';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Text, Box } from '@atlaskit/primitives/compiled';
+import { closeTypeAhead } from '../pm-plugins/commands/close-type-ahead';
 import { updateSelectedIndex } from '../pm-plugins/commands/update-selected-index';
 import { TYPE_AHEAD_DECORATION_ELEMENT_ID } from '../pm-plugins/constants';
 import { getTypeAheadListAriaLabels, moveSelectedIndex } from '../pm-plugins/utils';
 import { ListRow } from './ListRow';
+import { MoreOptions } from './MoreOptions';
 import { TypeAheadListItem } from './TypeAheadListItem';
 import { ViewMore } from './ViewMore';
 const LIST_ITEM_ESTIMATED_HEIGHT = 64;
@@ -56,10 +58,10 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
   triggerHandler,
   moreElementsInQuickInsertViewEnabled,
   api,
-  showViewMore,
-  onViewMoreClick
+  showMoreOptionsButton,
+  onMoreOptionsClicked
 }) => {
-  var _decorationElement$qu2;
+  var _triggerHandler$getMo, _decorationElement$qu2;
   const listRef = useRef();
   const listContainerRef = useRef(null);
   const lastVisibleIndexes = useRef({
@@ -70,7 +72,7 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
   });
 
   // Exclude view more item from the count
-  const itemsLength = showViewMore ? items.length - 1 : items.length;
+  const itemsLength = showMoreOptionsButton ? Math.max(items.length - 1, 0) : items.length;
   const estimatedHeight = itemsLength * LIST_ITEM_ESTIMATED_HEIGHT;
   const [height, setHeight] = useState(Math.min(estimatedHeight, fitHeight));
   const [cache, setCache] = useState(new CellMeasurerCache({
@@ -126,7 +128,7 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
     // to calculate each height. THen, we can schedule a new frame when this one finishs.
     requestAnimationFrame(() => {
       requestAnimationFrame(() => {
-        const isViewMoreSelected = showViewMore && selectedIndex === itemsLength;
+        const isViewMoreSelected = showMoreOptionsButton && selectedIndex === itemsLength;
         const isSelectedItemVisible = selectedIndex >= lastVisibleStartIndex && selectedIndex <= lastVisibleStopIndex ||
         // view more is always visible, hence no scrolling
         isViewMoreSelected;
@@ -139,7 +141,7 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
         }
       });
     });
-  }, [selectedIndex, lastVisibleStartIndex, lastVisibleStopIndex, itemsLength, showViewMore]);
+  }, [selectedIndex, lastVisibleStartIndex, lastVisibleStopIndex, itemsLength, showMoreOptionsButton]);
   const onMouseMove = (event, index) => {
     event.preventDefault();
     event.stopPropagation();
@@ -152,7 +154,7 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
     if (!listRef.current) {
       return;
     }
-    const isViewMoreSelected = showViewMore && selectedIndex === itemsLength;
+    const isViewMoreSelected = showMoreOptionsButton && selectedIndex === itemsLength;
     const isSelectedItemVisible = selectedIndex >= lastVisibleStartIndex && selectedIndex <= lastVisibleStopIndex ||
     // view more is always visible, hence no scrolling
     isViewMoreSelected;
@@ -163,7 +165,7 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
     } else if (selectedIndex === -1) {
       listRef.current.scrollToRow(0);
     }
-  }, [selectedIndex, lastVisibleStartIndex, lastVisibleStopIndex, itemsLength, showViewMore]);
+  }, [selectedIndex, lastVisibleStartIndex, lastVisibleStopIndex, itemsLength, showMoreOptionsButton]);
   useLayoutEffect(() => {
     setCache(new CellMeasurerCache({
       fixedWidth: true,
@@ -182,14 +184,14 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
   }, [items]);
   useLayoutEffect(() => {
     // Exclude view more item from the count
-    const itemsToRender = showViewMore ? items.slice(0, -1) : items;
+    const itemsToRender = showMoreOptionsButton ? items.slice(0, -1) : items;
     const height = Math.min(itemsToRender.reduce((prevValue, currentValue, index) => {
       return prevValue + cache.rowHeight({
         index: index
       });
     }, 0), fitHeight);
     setHeight(height);
-  }, [items, cache, fitHeight, showViewMore]);
+  }, [items, cache, fitHeight, showMoreOptionsButton]);
   useLayoutEffect(() => {
     if (!listContainerRef.current) {
       return;
@@ -249,6 +251,21 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
   const firstOnlineSupportedRow = useMemo(() => {
     return items.findIndex(item => item.isDisabledOffline !== true);
   }, [items]);
+  const config = triggerHandler === null || triggerHandler === void 0 ? void 0 : (_triggerHandler$getMo = triggerHandler.getMoreOptionsButtonConfig) === null || _triggerHandler$getMo === void 0 ? void 0 : _triggerHandler$getMo.call(triggerHandler, intl);
+  const handleClick = () => {
+    if (onMoreOptionsClicked) {
+      onMoreOptionsClicked();
+    }
+    api === null || api === void 0 ? void 0 : api.core.actions.execute(({
+      tr
+    }) => {
+      closeTypeAhead(tr);
+      config === null || config === void 0 ? void 0 : config.onClick({
+        tr
+      });
+      return tr;
+    });
+  };
   const renderRow = ({
     index,
     key,
@@ -370,8 +387,14 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
   }, jsx("div", {
     id: menuGroupId,
     ref: listContainerRef
-  }, !showViewMore || itemsLength ? ListContent : EmptyResultView, showViewMore && onViewMoreClick && jsx(ViewMore, {
-    onClick: onViewMoreClick,
+  }, !showMoreOptionsButton || itemsLength ? ListContent : EmptyResultView, fg('platform_editor_controls_patch_12') ? showMoreOptionsButton && config && jsx(MoreOptions, {
+    title: config.title,
+    ariaLabel: config.ariaLabel,
+    onClick: handleClick,
+    isFocused: selectedIndex === itemsLength,
+    iconBefore: config.iconBefore
+  }) : showMoreOptionsButton && onMoreOptionsClicked && jsx(ViewMore, {
+    onClick: onMoreOptionsClicked,
     isFocused: selectedIndex === itemsLength
   }), jsx(TypeaheadAssistiveTextPureComponent, {
     numberOfResults: itemsLength.toString()