npm - @atlaskit/editor-plugin-type-ahead - Versions diffs - 2.7.10 → 2.7.11 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (23) hide show

package/CHANGELOG.md +10 -0
package/dist/cjs/ui/MoreOptions.js +78 -0
package/dist/cjs/ui/TypeAheadList.js +44 -22
package/dist/cjs/ui/TypeAheadMenu.js +11 -3
package/dist/cjs/ui/TypeAheadPopup.js +15 -14
package/dist/cjs/ui/WrapperTypeAhead.js +9 -2
package/dist/es2019/ui/MoreOptions.js +74 -0
package/dist/es2019/ui/TypeAheadList.js +35 -12
package/dist/es2019/ui/TypeAheadMenu.js +11 -3
package/dist/es2019/ui/TypeAheadPopup.js +15 -14
package/dist/es2019/ui/WrapperTypeAhead.js +9 -2
package/dist/esm/ui/MoreOptions.js +71 -0
package/dist/esm/ui/TypeAheadList.js +44 -22
package/dist/esm/ui/TypeAheadMenu.js +11 -3
package/dist/esm/ui/TypeAheadPopup.js +15 -14
package/dist/esm/ui/WrapperTypeAhead.js +9 -2
package/dist/types/ui/MoreOptions.d.ts +11 -0
package/dist/types/ui/TypeAheadList.d.ts +4 -4
package/dist/types/ui/TypeAheadPopup.d.ts +1 -1
package/dist/types-ts4.5/ui/MoreOptions.d.ts +11 -0
package/dist/types-ts4.5/ui/TypeAheadList.d.ts +4 -4
package/dist/types-ts4.5/ui/TypeAheadPopup.d.ts +1 -1
package/package.json +6 -3

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,15 @@
 # @atlaskit/editor-plugin-type-ahead
+## 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/ui/MoreOptions.js ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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/ui/MoreOptions.js ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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()

package/dist/es2019/ui/TypeAheadMenu.js CHANGED Viewed

@@ -1,5 +1,6 @@
 import React from 'react';
 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 { updateSelectedIndex } from '../pm-plugins/commands/update-selected-index';
 import { useItemInsert } from './hooks/use-item-insert';
@@ -72,8 +73,15 @@ export const TypeAheadMenu = /*#__PURE__*/React.memo(({
   // @ts-ignore
   const openElementBrowserModal = triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.openElementBrowserModal;
-  const showViewMore = (triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.id) === TypeAheadAvailableNodes.QUICK_INSERT && !!openElementBrowserModal && editorExperiment('platform_editor_controls', 'variant1');
-  if (!isOpen || !triggerHandler || !(decorationElement instanceof HTMLElement) || !showViewMore && items.length === 0 && !errorInfo) {
+  let showMoreOptionsButton = false;
+  if (editorExperiment('platform_editor_controls', 'variant1')) {
+    if (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) === TypeAheadAvailableNodes.QUICK_INSERT && !!openElementBrowserModal;
+    }
+  }
+  if (!isOpen || !triggerHandler || !(decorationElement instanceof HTMLElement) || !openElementBrowserModal && items.length === 0 && !errorInfo) {
     return null;
   }
   return /*#__PURE__*/React.createElement(TypeAheadPopup, {
@@ -92,6 +100,6 @@ export const TypeAheadMenu = /*#__PURE__*/React.memo(({
     isEmptyQuery: !query,
     cancel: cancel,
     api: api,
-    showViewMore: showViewMore
+    showMoreOptionsButton: showMoreOptionsButton
   });
 });

package/dist/es2019/ui/TypeAheadPopup.js CHANGED Viewed

@@ -83,7 +83,7 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
     isEmptyQuery,
     cancel,
     api,
-    showViewMore
+    showMoreOptionsButton
   } = props;
   const ref = useRef(null);
   const {
@@ -147,11 +147,11 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
   triggerHandler]);
   const [fitHeight, setFitHeight] = useState(defaultMenuHeight);
   const fitHeightWithViewMore = useMemo(() => {
-    if (showViewMore) {
+    if (showMoreOptionsButton) {
       return fitHeight - VIEWMORE_BUTTON_HEIGHT;
     }
     return fitHeight;
-  }, [fitHeight, showViewMore]);
+  }, [fitHeight, showMoreOptionsButton]);
   const getFitHeight = useCallback(() => {
     if (!anchorElement || !popupsMountPoint) {
       return;
@@ -314,20 +314,21 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
     closeTypeAhead(tr);
     editorView.dispatch(tr);
   };
-  const onViewMoreClick = useCallback(() => {
-    close(editorView);
-    if (openElementBrowserModal && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_4')) {
+  const onMoreOptionsClicked = useCallback(() => {
+    if (
+    // eslint-disable-next-line @atlaskit/platform/no-preconditioning
+    openElementBrowserModal && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_4') && (!fg('platform_editor_controls_patch_12') || triggerHandler.id === TypeAheadAvailableNodes.QUICK_INSERT)) {
       activityStateRef.current = {
         inputMethod: INPUT_METHOD.MOUSE,
         closeAction: 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 ? void 0 : openElementBrowserModal();
-  }, [editorView, openElementBrowserModal]);
+    if (!fg('platform_editor_controls_patch_12')) {
+      close(editorView);
+      openElementBrowserModal === null || openElementBrowserModal === void 0 ? void 0 : openElementBrowserModal();
+    }
+  }, [editorView, openElementBrowserModal, triggerHandler.id]);
   return jsx(Popup, {
     zIndex: akEditorFloatingDialogZIndex,
     target: anchorElement,
@@ -354,7 +355,7 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
       }
     }
   }, 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
@@ -384,8 +385,8 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
     triggerHandler: triggerHandler,
     moreElementsInQuickInsertViewEnabled: moreElementsInQuickInsertViewEnabled,
     api: api,
-    showViewMore: showViewMore,
-    onViewMoreClick: onViewMoreClick
+    showMoreOptionsButton: showMoreOptionsButton,
+    onMoreOptionsClicked: onMoreOptionsClicked
   }))));
 });
 TypeAheadPopup.displayName = 'TypeAheadPopup';

package/dist/es2019/ui/WrapperTypeAhead.js CHANGED Viewed

@@ -27,12 +27,19 @@ export const WrapperTypeAhead = /*#__PURE__*/React.memo(({
 }) => {
   // @ts-ignore
   const openElementBrowserModal = triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.openElementBrowserModal;
-  const showViewMore = (triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.id) === TypeAheadAvailableNodes.QUICK_INSERT && !!openElementBrowserModal && editorExperiment('platform_editor_controls', 'variant1');
+  let showMoreOptionsButton = false;
+  if (editorExperiment('platform_editor_controls', 'variant1')) {
+    if (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) === TypeAheadAvailableNodes.QUICK_INSERT && !!openElementBrowserModal;
+    }
+  }
   const [closed, setClosed] = useState(false);
   const [query, setQuery] = useState(reopenQuery || '');
   const queryRef = useRef(query);
   const editorViewRef = useRef(editorView);
-  const items = useLoadItems(triggerHandler, editorView, query, showViewMore);
+  const items = useLoadItems(triggerHandler, editorView, query, showMoreOptionsButton);
   useEffect(() => {
     if (!closed && fg('platform_editor_ease_of_use_metrics')) {
       var _api$metrics;

package/dist/esm/ui/MoreOptions.js ADDED Viewed

@@ -0,0 +1,71 @@
+/**
+ * @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';
+var 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, ".concat(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(N30, ")")
+  }
+});
+export var MoreOptions = function MoreOptions(_ref) {
+  var onClick = _ref.onClick,
+    isFocused = _ref.isFocused,
+    title = _ref.title,
+    ariaLabel = _ref.ariaLabel,
+    iconBefore = _ref.iconBefore;
+  var ref = useRef(null);
+  useEffect(function () {
+    if (isFocused && ref.current) {
+      ref.current.focus();
+    }
+  }, [isFocused]);
+  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 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/esm/ui/TypeAheadList.js CHANGED Viewed

@@ -18,10 +18,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';
 var LIST_ITEM_ESTIMATED_HEIGHT = 64;
@@ -46,7 +48,7 @@ var TypeaheadAssistiveTextPureComponent = /*#__PURE__*/React.memo(function (_ref
   });
 });
 var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref2) {
-  var _decorationElement$qu2;
+  var _triggerHandler$getMo, _decorationElement$qu2;
   var items = _ref2.items,
     selectedIndex = _ref2.selectedIndex,
     editorView = _ref2.editorView,
@@ -57,8 +59,8 @@ var TypeAheadListComponent = /*#__PURE__*/React.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 = useRef();
   var listContainerRef = useRef(null);
   var lastVisibleIndexes = useRef({
@@ -69,7 +71,7 @@ var TypeAheadListComponent = /*#__PURE__*/React.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 = useState(Math.min(estimatedHeight, fitHeight)),
     _useState2 = _slicedToArray(_useState, 2),
@@ -136,7 +138,7 @@ var TypeAheadListComponent = /*#__PURE__*/React.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;
@@ -149,7 +151,7 @@ var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref2) {
         }
       });
     });
-  }, [selectedIndex, lastVisibleStartIndex, lastVisibleStopIndex, itemsLength, showViewMore]);
+  }, [selectedIndex, lastVisibleStartIndex, lastVisibleStopIndex, itemsLength, showMoreOptionsButton]);
   var _onMouseMove = function onMouseMove(event, index) {
     event.preventDefault();
     event.stopPropagation();
@@ -162,7 +164,7 @@ var TypeAheadListComponent = /*#__PURE__*/React.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;
@@ -173,7 +175,7 @@ var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref2) {
     } else if (selectedIndex === -1) {
       listRef.current.scrollToRow(0);
     }
-  }, [selectedIndex, lastVisibleStartIndex, lastVisibleStopIndex, itemsLength, showViewMore]);
+  }, [selectedIndex, lastVisibleStartIndex, lastVisibleStopIndex, itemsLength, showMoreOptionsButton]);
   useLayoutEffect(function () {
     setCache(new CellMeasurerCache({
       fixedWidth: true,
@@ -192,14 +194,14 @@ var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref2) {
   }, [items]);
   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]);
   useLayoutEffect(function () {
     if (!listContainerRef.current) {
       return;
@@ -259,13 +261,27 @@ var TypeAheadListComponent = /*#__PURE__*/React.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;
+      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 jsx(CellMeasurer, {
       key: key,
@@ -273,9 +289,9 @@ var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref2) {
       parent: parent,
       columnIndex: 0,
       rowIndex: index
-    }, fg('platform_editor_typeahead_dynamic_height_fix') ? function (_ref5) {
-      var measure = _ref5.measure,
-        registerChild = _ref5.registerChild;
+    }, fg('platform_editor_typeahead_dynamic_height_fix') ? function (_ref6) {
+      var measure = _ref6.measure,
+        registerChild = _ref6.registerChild;
       return jsx(ListRow, {
         registerChild: registerChild,
         measure: measure,
@@ -384,8 +400,14 @@ var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref2) {
   }, 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()

package/dist/esm/ui/TypeAheadMenu.js CHANGED Viewed

@@ -1,6 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React from 'react';
 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 { updateSelectedIndex } from '../pm-plugins/commands/update-selected-index';
 import { useItemInsert } from './hooks/use-item-insert';
@@ -74,8 +75,15 @@ export var TypeAheadMenu = /*#__PURE__*/React.memo(function (_ref) {
   // @ts-ignore
   var openElementBrowserModal = triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.openElementBrowserModal;
-  var showViewMore = (triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.id) === TypeAheadAvailableNodes.QUICK_INSERT && !!openElementBrowserModal && editorExperiment('platform_editor_controls', 'variant1');
-  if (!isOpen || !triggerHandler || !(decorationElement instanceof HTMLElement) || !showViewMore && items.length === 0 && !errorInfo) {
+  var showMoreOptionsButton = false;
+  if (editorExperiment('platform_editor_controls', 'variant1')) {
+    if (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) === TypeAheadAvailableNodes.QUICK_INSERT && !!openElementBrowserModal;
+    }
+  }
+  if (!isOpen || !triggerHandler || !(decorationElement instanceof HTMLElement) || !openElementBrowserModal && items.length === 0 && !errorInfo) {
     return null;
   }
   return /*#__PURE__*/React.createElement(TypeAheadPopup, {
@@ -94,6 +102,6 @@ export var TypeAheadMenu = /*#__PURE__*/React.memo(function (_ref) {
     isEmptyQuery: !query,
     cancel: cancel,
     api: api,
-    showViewMore: showViewMore
+    showMoreOptionsButton: showMoreOptionsButton
   });
 });

package/dist/esm/ui/TypeAheadPopup.js CHANGED Viewed

@@ -81,7 +81,7 @@ export var TypeAheadPopup = /*#__PURE__*/React.memo(function (props) {
     isEmptyQuery = props.isEmptyQuery,
     cancel = props.cancel,
     api = props.api,
-    showViewMore = props.showViewMore;
+    showMoreOptionsButton = props.showMoreOptionsButton;
   var ref = useRef(null);
   var _useSharedState = useSharedState(api),
     moreElementsInQuickInsertView = _useSharedState.moreElementsInQuickInsertView;
@@ -150,11 +150,11 @@ export var TypeAheadPopup = /*#__PURE__*/React.memo(function (props) {
     fitHeight = _useState2[0],
     setFitHeight = _useState2[1];
   var fitHeightWithViewMore = useMemo(function () {
-    if (showViewMore) {
+    if (showMoreOptionsButton) {
       return fitHeight - VIEWMORE_BUTTON_HEIGHT;
     }
     return fitHeight;
-  }, [fitHeight, showViewMore]);
+  }, [fitHeight, showMoreOptionsButton]);
   var getFitHeight = useCallback(function () {
     if (!anchorElement || !popupsMountPoint) {
       return;
@@ -303,20 +303,21 @@ export var TypeAheadPopup = /*#__PURE__*/React.memo(function (props) {
     closeTypeAhead(tr);
     editorView.dispatch(tr);
   };
-  var onViewMoreClick = useCallback(function () {
-    close(editorView);
-    if (openElementBrowserModal && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_4')) {
+  var onMoreOptionsClicked = useCallback(function () {
+    if (
+    // eslint-disable-next-line @atlaskit/platform/no-preconditioning
+    openElementBrowserModal && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_4') && (!fg('platform_editor_controls_patch_12') || triggerHandler.id === TypeAheadAvailableNodes.QUICK_INSERT)) {
       activityStateRef.current = {
         inputMethod: INPUT_METHOD.MOUSE,
         closeAction: 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 (!fg('platform_editor_controls_patch_12')) {
+      close(editorView);
+      openElementBrowserModal === null || openElementBrowserModal === void 0 || openElementBrowserModal();
+    }
+  }, [editorView, openElementBrowserModal, triggerHandler.id]);
   return jsx(Popup, {
     zIndex: akEditorFloatingDialogZIndex,
     target: anchorElement,
@@ -343,7 +344,7 @@ export var TypeAheadPopup = /*#__PURE__*/React.memo(function (props) {
       }
     }
   }, 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
@@ -373,8 +374,8 @@ export var TypeAheadPopup = /*#__PURE__*/React.memo(function (props) {
     triggerHandler: triggerHandler,
     moreElementsInQuickInsertViewEnabled: moreElementsInQuickInsertViewEnabled,
     api: api,
-    showViewMore: showViewMore,
-    onViewMoreClick: onViewMoreClick
+    showMoreOptionsButton: showMoreOptionsButton,
+    onMoreOptionsClicked: onMoreOptionsClicked
   }))));
 });
 TypeAheadPopup.displayName = 'TypeAheadPopup';

package/dist/esm/ui/WrapperTypeAhead.js CHANGED Viewed

@@ -27,7 +27,14 @@ export var WrapperTypeAhead = /*#__PURE__*/React.memo(function (_ref) {
     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) === TypeAheadAvailableNodes.QUICK_INSERT && !!openElementBrowserModal && editorExperiment('platform_editor_controls', 'variant1');
+  var showMoreOptionsButton = false;
+  if (editorExperiment('platform_editor_controls', 'variant1')) {
+    if (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) === TypeAheadAvailableNodes.QUICK_INSERT && !!openElementBrowserModal;
+    }
+  }
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     closed = _useState2[0],
@@ -38,7 +45,7 @@ export var WrapperTypeAhead = /*#__PURE__*/React.memo(function (_ref) {
     setQuery = _useState4[1];
   var queryRef = useRef(query);
   var editorViewRef = useRef(editorView);
-  var items = useLoadItems(triggerHandler, editorView, query, showViewMore);
+  var items = useLoadItems(triggerHandler, editorView, query, showMoreOptionsButton);
   useEffect(function () {
     if (!closed && fg('platform_editor_ease_of_use_metrics')) {
       var _api$metrics;

package/dist/types/ui/MoreOptions.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { jsx } from '@emotion/react';
+type Props = {
+    onClick: () => void;
+    isFocused: boolean;
+    title: string;
+    ariaLabel?: string;
+    iconBefore?: React.ReactNode;
+};
+export declare const MoreOptions: ({ onClick, isFocused, title, ariaLabel, iconBefore }: Props) => jsx.JSX.Element;
+export {};

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

@@ -20,8 +20,8 @@ export declare const TypeAheadList: React.FC<import("react-intl-next").WithIntlP
     triggerHandler?: TypeAheadHandler | undefined;
     moreElementsInQuickInsertViewEnabled?: boolean | undefined;
     api: ExtractInjectionAPI<TypeAheadPlugin> | undefined;
-    showViewMore?: boolean | undefined;
-    onViewMoreClick?: (() => void) | undefined;
+    showMoreOptionsButton?: boolean | undefined;
+    onMoreOptionsClicked?: (() => void) | undefined;
 } & WrappedComponentProps>> & {
     WrappedComponent: React.ComponentType<{
         items: Array<TypeAheadItem>;
@@ -33,7 +33,7 @@ export declare const TypeAheadList: React.FC<import("react-intl-next").WithIntlP
         triggerHandler?: TypeAheadHandler | undefined;
         moreElementsInQuickInsertViewEnabled?: boolean | undefined;
         api: ExtractInjectionAPI<TypeAheadPlugin> | undefined;
-        showViewMore?: boolean | undefined;
-        onViewMoreClick?: (() => void) | undefined;
+        showMoreOptionsButton?: boolean | undefined;
+        onMoreOptionsClicked?: (() => void) | undefined;
     } & WrappedComponentProps>;
 };

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

@@ -30,7 +30,7 @@ type TypeAheadPopupProps = {
         forceFocusOnEditor: boolean;
     }) => void;
     api: ExtractInjectionAPI<TypeAheadPlugin> | undefined;
-    showViewMore?: boolean;
+    showMoreOptionsButton?: boolean;
 };
 export declare const TypeAheadPopup: React.MemoExoticComponent<(props: TypeAheadPopupProps) => jsx.JSX.Element>;
 export {};

package/dist/types-ts4.5/ui/MoreOptions.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { jsx } from '@emotion/react';
+type Props = {
+    onClick: () => void;
+    isFocused: boolean;
+    title: string;
+    ariaLabel?: string;
+    iconBefore?: React.ReactNode;
+};
+export declare const MoreOptions: ({ onClick, isFocused, title, ariaLabel, iconBefore }: Props) => jsx.JSX.Element;
+export {};

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

@@ -20,8 +20,8 @@ export declare const TypeAheadList: React.FC<import("react-intl-next").WithIntlP
     triggerHandler?: TypeAheadHandler | undefined;
     moreElementsInQuickInsertViewEnabled?: boolean | undefined;
     api: ExtractInjectionAPI<TypeAheadPlugin> | undefined;
-    showViewMore?: boolean | undefined;
-    onViewMoreClick?: (() => void) | undefined;
+    showMoreOptionsButton?: boolean | undefined;
+    onMoreOptionsClicked?: (() => void) | undefined;
 } & WrappedComponentProps>> & {
     WrappedComponent: React.ComponentType<{
         items: Array<TypeAheadItem>;
@@ -33,7 +33,7 @@ export declare const TypeAheadList: React.FC<import("react-intl-next").WithIntlP
         triggerHandler?: TypeAheadHandler | undefined;
         moreElementsInQuickInsertViewEnabled?: boolean | undefined;
         api: ExtractInjectionAPI<TypeAheadPlugin> | undefined;
-        showViewMore?: boolean | undefined;
-        onViewMoreClick?: (() => void) | undefined;
+        showMoreOptionsButton?: boolean | undefined;
+        onMoreOptionsClicked?: (() => void) | undefined;
     } & WrappedComponentProps>;
 };

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

@@ -30,7 +30,7 @@ type TypeAheadPopupProps = {
         forceFocusOnEditor: boolean;
     }) => void;
     api: ExtractInjectionAPI<TypeAheadPlugin> | undefined;
-    showViewMore?: boolean;
+    showMoreOptionsButton?: boolean;
 };
 export declare const TypeAheadPopup: React.MemoExoticComponent<(props: TypeAheadPopupProps) => jsx.JSX.Element>;
 export {};

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-type-ahead",
-	"version": "2.7.10",
+	"version": "2.7.11",
 	"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": "^106.1.0",
+		"@atlaskit/editor-common": "^106.3.0",
 		"@atlaskit/editor-element-browser": "^0.1.0",
 		"@atlaskit/editor-plugin-analytics": "^2.3.0",
 		"@atlaskit/editor-plugin-connectivity": "^2.0.0",
@@ -49,7 +49,7 @@
 		"@atlaskit/primitives": "^14.8.0",
 		"@atlaskit/prosemirror-input-rules": "^3.3.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tmp-editor-statsig": "^5.7.0",
+		"@atlaskit/tmp-editor-statsig": "^5.13.0",
 		"@atlaskit/tokens": "^5.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
@@ -125,6 +125,9 @@
 		},
 		"platform_editor_controls_patch_8": {
 			"type": "boolean"
+		},
+		"platform_editor_controls_patch_12": {
+			"type": "boolean"
 		}
 	}
 }