@atlaskit/editor-plugin-type-ahead 30.0.4 → 31.0.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-plugin-type-ahead
 
+## 31.0.0
+
+### Patch Changes
+
+- [`7e91f3141329d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7e91f3141329d) -
+  Decouple Quick Insert menu rendering and interaction from typeahead under the existing
+  `platform_editor_slash_command` experiment.
+- Updated dependencies
+
+## 30.0.5
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 30.0.4
 
 ### Patch Changes

package/dist/cjs/pm-plugins/commands/insert-type-ahead-item.js

@@ -280,20 +280,16 @@ var executeTypeAheadSelection = function executeTypeAheadSelection(view) {
 };
 var performTypeAheadSelection = exports.performTypeAheadSelection = function performTypeAheadSelection(view) {
   return function (_ref6) {
-    var inputMethod = _ref6.inputMethod,
-      selectionHandler = _ref6.selectionHandler,
-      handler = _ref6.handler,
-      query = _ref6.query;
+    var handler = _ref6.handler,
+      query = _ref6.query,
+      _selectItem = _ref6.selectItem;
     executeTypeAheadSelection(view)({
       handler: handler,
       mode: _typeAhead2.SelectItemMode.SELECTED,
       query: query,
       sourceListItem: [],
       selectItem: function selectItem(_state, insert) {
-        return selectionHandler({
-          insert: insert,
-          source: inputMethod
-        });
+        return _selectItem(insert);
       }
     });
   };

package/dist/cjs/ui/ContentComponent.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.ContentComponent = ContentComponent;
 var _react = _interopRequireDefault(require("react"));
 var _useSharedPluginStateWithSelector = require("@atlaskit/editor-common/useSharedPluginStateWithSelector");
-var _typeAheadSurfaces = require("./registered-menu/typeAheadSurfaces");
 var _TypeAheadMenu = require("./TypeAheadMenu");
 function ContentComponent(_ref) {
   var api = _ref.api,
@@ -37,7 +36,7 @@ function ContentComponent(_ref) {
   if (items === undefined || sections === undefined || decorationSet === undefined || errorInfo === undefined || decorationElement === undefined || query === undefined || selectedIndex === undefined) {
     return null;
   }
-  if ((0, _typeAheadSurfaces.getTypeAheadSurface)(triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.id)) {
+  if (triggerHandler !== null && triggerHandler !== void 0 && triggerHandler.registeredMenuKey) {
     return null;
   }
   return /*#__PURE__*/_react.default.createElement(_TypeAheadMenu.TypeAheadMenu, {

package/dist/cjs/ui/InputQuery.js

@@ -103,7 +103,7 @@ var scheduleFocusAfterAttachment = exports.scheduleFocusAfterAttachment = functi
   };
 };
 var InputQuery = exports.InputQuery = /*#__PURE__*/_react.default.memo(function (_ref) {
-  var _ref2;
+  var _ref2, _ref3, _menuInteraction$opti, _ref4, _menuInteraction$list, _menuInteraction$expa, _ref7, _menuInteraction$labe;
   var activeDescendantId = _ref.activeDescendantId,
     triggerQueryPrefix = _ref.triggerQueryPrefix,
     cancel = _ref.cancel,
@@ -117,10 +117,14 @@ var InputQuery = exports.InputQuery = /*#__PURE__*/_react.default.memo(function
     onUndoRedo = _ref.onUndoRedo,
     editorView = _ref.editorView,
     items = _ref.items,
+    inputLabel = _ref.inputLabel,
+    menuInteraction = _ref.menuInteraction,
     listId = _ref.listId,
     optionCount = _ref.optionCount,
     shouldKeepOpenOnRegisteredMenu = _ref.shouldKeepOpenOnRegisteredMenu;
-  var resolvedOptionCount = (_ref2 = optionCount !== null && optionCount !== void 0 ? optionCount : items === null || items === void 0 ? void 0 : items.length) !== null && _ref2 !== void 0 ? _ref2 : 0;
+  var resolvedOptionCount = (_ref2 = (_ref3 = (_menuInteraction$opti = menuInteraction === null || menuInteraction === void 0 ? void 0 : menuInteraction.optionCount) !== null && _menuInteraction$opti !== void 0 ? _menuInteraction$opti : optionCount) !== null && _ref3 !== void 0 ? _ref3 : items === null || items === void 0 ? void 0 : items.length) !== null && _ref2 !== void 0 ? _ref2 : 0;
+  var resolvedActiveDescendantId = menuInteraction ? menuInteraction.activeDescendantId : activeDescendantId;
+  var resolvedListId = (_ref4 = (_menuInteraction$list = menuInteraction === null || menuInteraction === void 0 ? void 0 : menuInteraction.listId) !== null && _menuInteraction$list !== void 0 ? _menuInteraction$list : listId) !== null && _ref4 !== void 0 ? _ref4 : _constants2.TYPE_AHEAD_DECORATION_ELEMENT_ID;
   var ref = (0, _react.useRef)(document.createElement('span'));
   var inputRef = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(null),
@@ -148,9 +152,9 @@ var InputQuery = exports.InputQuery = /*#__PURE__*/_react.default.memo(function
     var raw = ((_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.textContent) || '';
     var text = cleanedInputContent();
     var stopDefault = false;
-    var _ref3 = (0, _utils.getPluginState)(editorView.state) || {},
-      selectedIndex = _ref3.selectedIndex,
-      removePrefixTriggerOnCancel = _ref3.removePrefixTriggerOnCancel;
+    var _ref5 = (0, _utils.getPluginState)(editorView.state) || {},
+      selectedIndex = _ref5.selectedIndex,
+      removePrefixTriggerOnCancel = _ref5.removePrefixTriggerOnCancel;
     setInFocus(true);
     switch (key) {
       case ' ':
@@ -193,7 +197,7 @@ var InputQuery = exports.InputQuery = /*#__PURE__*/_react.default.memo(function
         // TODO: ED-14758 - Under the W3C specification, any keycode sent under IME would return a keycode 229
         // event.isComposing can't be used alone as this also included a virtual keyboard under a keyboardless device, therefore, it seems the best practice would be intercepting the event as below.
         // Some suggested the other workaround maybe listen on`keypress` instead of `keydown`
-        if (!event.isComposing && event.which !== 229 && event.keyCode !== 229) {
+        if (!menuInteraction && !event.isComposing && event.which !== 229 && event.keyCode !== 229) {
           if (selectedIndex === -1) {
             /**
              * TODO DTR-1401: (also see ED-17200) There are two options
@@ -212,12 +216,21 @@ var InputQuery = exports.InputQuery = /*#__PURE__*/_react.default.memo(function
         }
         break;
       case 'Tab':
+        if (menuInteraction) {
+          break;
+        }
         event.shiftKey ? selectPreviousItem() : selectNextItem();
         break;
       case 'ArrowDown':
+        if (menuInteraction) {
+          break;
+        }
         selectNextItem();
         break;
       case 'ArrowUp':
+        if (menuInteraction) {
+          break;
+        }
         selectPreviousItem();
         break;
     }
@@ -225,24 +238,39 @@ var InputQuery = exports.InputQuery = /*#__PURE__*/_react.default.memo(function
     if (onUndoRedo && undoRedoType && onUndoRedo(undoRedoType)) {
       stopDefault = true;
     }
-    if (isNavigationKey(event) || stopDefault) {
+    if (!menuInteraction && isNavigationKey(event) || stopDefault) {
       event.stopPropagation();
       event.preventDefault();
       return false;
     }
-  }, [onUndoRedo, onItemSelect, selectNextItem, selectPreviousItem, cancel, cleanedInputContent, editorView.state, isEditorControlsEnabled]);
+  }, [onUndoRedo, menuInteraction, onItemSelect, selectNextItem, selectPreviousItem, cancel, cleanedInputContent, editorView.state, isEditorControlsEnabled]);
   (0, _react.useLayoutEffect)(function () {
     if (!ref.current) {
       return;
     }
     var browser = (0, _browser.getBrowserInfo)();
     var element = ref.current;
-    var _ref4 = (0, _utils.getPluginState)(editorView.state) || {},
-      removePrefixTriggerOnCancel = _ref4.removePrefixTriggerOnCancel;
+    var _ref6 = (0, _utils.getPluginState)(editorView.state) || {},
+      removePrefixTriggerOnCancel = _ref6.removePrefixTriggerOnCancel;
     var onFocusIn = function onFocusIn(_event) {
       onQueryFocus();
     };
     var keyDown = function keyDown(event) {
+      var isComposing = event.isComposing || event.which === 229 || event.keyCode === 229;
+      if (menuInteraction && isComposing) {
+        return;
+      }
+      if (menuInteraction && event.key === 'Tab') {
+        event.shiftKey ? menuInteraction.selectPrevious() : menuInteraction.selectNext();
+        event.stopPropagation();
+        event.preventDefault();
+        return;
+      }
+      if (menuInteraction !== null && menuInteraction !== void 0 && menuInteraction.onKeyDown(event)) {
+        event.stopPropagation();
+        event.preventDefault();
+        return;
+      }
       var key = (0, _w3cKeyname.keyName)(event);
       if (['ArrowLeft', 'ArrowRight'].includes(key) && document.getSelection && document.getSelection()) {
         var _ref$current3;
@@ -287,11 +315,9 @@ var InputQuery = exports.InputQuery = /*#__PURE__*/_react.default.memo(function
     var onFocusOut = function onFocusOut(event) {
       var _window$getSelection;
       var relatedTarget = event.relatedTarget;
-
-      // Given the user is changing the focus
-      // When the target is inside the TypeAhead Popup
-      // Then the popup should stay open
-      if (relatedTarget instanceof HTMLElement && relatedTarget.closest && (relatedTarget.closest(".".concat(_constants2.TYPE_AHEAD_POPUP_CONTENT_CLASS)) || shouldKeepOpenOnRegisteredMenu && relatedTarget.closest('[data-registered-type-ahead-menu]'))) {
+      // Given the user is changing focus, keep the popup open when the target belongs to its menu.
+      var isInsideMenu = menuInteraction ? relatedTarget instanceof Node && menuInteraction.containsTarget(relatedTarget) : relatedTarget instanceof HTMLElement && (!!relatedTarget.closest(".".concat(_constants2.TYPE_AHEAD_POPUP_CONTENT_CLASS)) || shouldKeepOpenOnRegisteredMenu && !!relatedTarget.closest('[data-registered-type-ahead-menu]'));
+      if (isInsideMenu) {
         return;
       }
 
@@ -410,7 +436,7 @@ var InputQuery = exports.InputQuery = /*#__PURE__*/_react.default.memo(function
         element.removeEventListener('input', onInput);
       }
     };
-  }, [triggerQueryPrefix, cleanedInputContent, onQueryFocus, cancel, checkKeyEvent, editorView.state, isEditorControlsEnabled, shouldKeepOpenOnRegisteredMenu]);
+  }, [triggerQueryPrefix, cleanedInputContent, onQueryFocus, cancel, checkKeyEvent, editorView.state, isEditorControlsEnabled, shouldKeepOpenOnRegisteredMenu, menuInteraction]);
   (0, _react.useLayoutEffect)(function () {
     var hasReopenQuery = typeof reopenQuery === 'string' && reopenQuery.trim().length > 0;
     if (ref.current && forceFocus) {
@@ -445,18 +471,20 @@ var InputQuery = exports.InputQuery = /*#__PURE__*/_react.default.memo(function
     onKeyUp: onKeyUp,
     tabIndex: -1,
     role: "combobox",
-    "aria-activedescendant": activeDescendantId,
-    "aria-controls": listId !== null && listId !== void 0 ? listId : _constants2.TYPE_AHEAD_DECORATION_ELEMENT_ID,
+    "aria-activedescendant": resolvedActiveDescendantId,
+    "aria-controls": resolvedListId,
     "aria-autocomplete": "list",
-    "aria-expanded": resolvedOptionCount !== 0,
-    "aria-labelledby": assistiveHintID,
+    "aria-expanded": (_menuInteraction$expa = menuInteraction === null || menuInteraction === void 0 ? void 0 : menuInteraction.expanded) !== null && _menuInteraction$expa !== void 0 ? _menuInteraction$expa : resolvedOptionCount !== 0,
+    "aria-haspopup": menuInteraction ? 'listbox' : undefined,
+    "aria-label": menuInteraction === null || menuInteraction === void 0 ? void 0 : menuInteraction.label,
+    "aria-labelledby": menuInteraction ? undefined : assistiveHintID,
     suppressContentEditableWarning: true,
     "data-query-prefix": triggerQueryPrefix,
     "data-place-holder": intl.formatMessage(_messages.typeAheadListMessages.quickInsertInputPlaceholderLabel)
   }, query === null ? (0, _react2.jsx)("input", {
     ref: inputRef,
     type: "text",
-    "aria-label": intl.formatMessage(getAriaLabel(triggerQueryPrefix, intl))
+    "aria-label": (_ref7 = (_menuInteraction$labe = menuInteraction === null || menuInteraction === void 0 ? void 0 : menuInteraction.label) !== null && _menuInteraction$labe !== void 0 ? _menuInteraction$labe : inputLabel) !== null && _ref7 !== void 0 ? _ref7 : intl.formatMessage(getAriaLabel(triggerQueryPrefix, intl))
   }) : query), (0, _react2.jsx)("span", {
     id: assistiveHintID,
     style: {

package/dist/cjs/ui/WrapperTypeAhead.js

@@ -23,7 +23,6 @@ var _useLoadItems = require("./hooks/use-load-items");
 var _useOnForceSelect = require("./hooks/use-on-force-select");
 var _InputQuery = require("./InputQuery");
 var _RegisteredTypeAheadMenu = require("./registered-menu/RegisteredTypeAheadMenu");
-var _typeAheadSurfaces = require("./registered-menu/typeAheadSurfaces");
 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,
@@ -55,8 +54,8 @@ var WrapperTypeAhead = exports.WrapperTypeAhead = /*#__PURE__*/_react.default.me
     setQuery = _useState4[1];
   var queryRef = (0, _react.useRef)(query);
   var editorViewRef = (0, _react.useRef)(editorView);
-  var registeredSurface = (0, _typeAheadSurfaces.getTypeAheadSurface)(triggerHandler.id);
-  var items = (0, _useLoadItems.useLoadItems)(triggerHandler, editorView, query, showMoreOptionsButton, api, intl, !registeredSurface);
+  var registeredMenuKey = triggerHandler.registeredMenuKey;
+  var items = (0, _useLoadItems.useLoadItems)(triggerHandler, editorView, query, showMoreOptionsButton, api, intl, !registeredMenuKey);
   (0, _react.useEffect)(function () {
     if (!closed && (0, _fg.fg)('platform_editor_ease_of_use_metrics')) {
       var _api$metrics;
@@ -163,7 +162,7 @@ var WrapperTypeAhead = exports.WrapperTypeAhead = /*#__PURE__*/_react.default.me
   if (!triggerHandler) {
     return null;
   }
-  if (registeredSurface) {
+  if (registeredMenuKey) {
     return /*#__PURE__*/_react.default.createElement(_RegisteredTypeAheadMenu.RegisteredTypeAheadMenu, {
       anchorElement: anchorElement,
       api: api,
@@ -178,7 +177,7 @@ var WrapperTypeAhead = exports.WrapperTypeAhead = /*#__PURE__*/_react.default.me
       query: query,
       reopenQuery: reopenQuery,
       setQuery: setQuery,
-      surface: registeredSurface,
+      registeredMenuKey: registeredMenuKey,
       triggerHandler: triggerHandler
     });
   }