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

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @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
+
+- Updated dependencies
+
 ## 2.7.9
 
 ### Patch Changes

package/dist/cjs/ui/InputQuery.js

@@ -20,8 +20,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _constants = require("../pm-plugins/constants");
 var _utils2 = require("../pm-plugins/utils");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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); }
 /**
  * @jsxRuntime classic
  * @jsx jsx

package/dist/cjs/ui/ListRow.js

@@ -6,8 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ListRow = ListRow;
 var _react = _interopRequireWildcard(require("react"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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); }
 /**
  *
  * @param root0

package/dist/cjs/ui/MoreOptions.js

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

package/dist/cjs/ui/TypeAheadErrorFallback/MinHeightContainer.js

@@ -17,8 +17,7 @@ var _excluded = ["minHeight"];
  * @jsx jsx
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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); }
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var minHeightComponentStyles = exports.minHeightComponentStyles = (0, _react2.css)({
   display: 'flex',

package/dist/cjs/ui/TypeAheadList.js

@@ -19,14 +19,15 @@ 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 _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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); }
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -56,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,
@@ -67,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)({
@@ -79,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),
@@ -146,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;
@@ -159,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();
@@ -172,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;
@@ -183,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,
@@ -202,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;
@@ -269,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,
@@ -283,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,
@@ -394,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/TypeAheadListItem.js

@@ -24,8 +24,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
  * @jsx jsx
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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); }
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var itemIcon = exports.itemIcon = (0, _react2.css)({
   width: "var(--ds-space-500, 40px)",

package/dist/cjs/ui/TypeAheadMenu.js

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

package/dist/cjs/ui/TypeAheadPopup.js

@@ -25,8 +25,7 @@ var _constants = require("../pm-plugins/constants");
 var _utils = require("../pm-plugins/utils");
 var _TypeAheadErrorFallback = require("./TypeAheadErrorFallback");
 var _TypeAheadList = require("./TypeAheadList");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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); }
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -92,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;
@@ -161,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;
@@ -314,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,
@@ -354,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
@@ -384,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

@@ -20,8 +20,7 @@ var _useItemInsert3 = require("./hooks/use-item-insert");
 var _useLoadItems = require("./hooks/use-load-items");
 var _useOnForceSelect = require("./hooks/use-on-force-select");
 var _InputQuery = require("./InputQuery");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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); }
 var WrapperTypeAhead = exports.WrapperTypeAhead = /*#__PURE__*/_react.default.memo(function (_ref) {
   var triggerHandler = _ref.triggerHandler,
     editorView = _ref.editorView,
@@ -37,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],
@@ -48,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/cjs/ui/modern/TypeAheadPopup.js

@@ -21,8 +21,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("../../pm-plugins/constants");
 var _TypeAheadErrorFallback = require("../TypeAheadErrorFallback");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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); }
 /* eslint-disable @atlaskit/ui-styling-standard/use-compiled */
 /**
  * @jsxRuntime classic

package/dist/es2019/ui/MoreOptions.js

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