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

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

package/dist/es2019/ui/TypeAheadMenu.js

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

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

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

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

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

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

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

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

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

@@ -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>;
 };