@atlaskit/editor-plugin-quick-insert/dist/cjs/ui/registered-menu/QuickInsertMenuRoot.js

Quick insert plugin for @atlaskit/editor-core

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _toArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toArray"));
var _react = _interopRequireWildcard(require("react"));
var _reactIntl = require("react-intl");
var _enums = require("@atlaskit/editor-common/analytics/types/enums");
var _insertBlock = require("@atlaskit/editor-common/messages/insert-block");
var _provider = require("@atlaskit/editor-common/quick-insert/provider");
var _context = require("@atlaskit/editor-common/registered-menu/context");
var _surfaceContext = require("@atlaskit/editor-common/registered-menu/surface-context");
var _useRegisteredMenu2 = require("@atlaskit/editor-common/registered-menu/use-registered-menu");
var _typeAheadIsSectionOverflowItemKey = require("@atlaskit/editor-common/type-ahead-is-section-overflow-item-key");
var _messages = require("@atlaskit/editor-common/type-ahead/messages");
var _menuGroup = _interopRequireDefault(require("@atlaskit/menu/menu-group"));
var _getQuickInsertMenuModel = require("./get-quick-insert-menu-model");
var _getQuickInsertMenuItemId = require("./getQuickInsertMenuItemId");
var _RegisteredQuickInsertMenuItem = require("./RegisteredQuickInsertMenuItem");
var _selectQuickInsertCategoryItems = require("./selectQuickInsertCategoryItems");
var _ToolbarQuickInsertMenu = require("./ToolbarQuickInsertMenu");
var _TypeAheadQuickInsertMenu = require("./TypeAheadQuickInsertMenu");
var _useQuickInsertSearchAnalytics = require("./useQuickInsertSearchAnalytics");
var _excluded = ["rows", "selectableItems", "selectedItemIndex", "activeItemKey", "selectionSource"];
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); }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
var DEFAULT_MENU_MAX_HEIGHT = 480;
var isImeEnter = function isImeEnter(event) {
  return event.isComposing || event.keyCode === 229;
};
var QuickInsertMenuRoot = function QuickInsertMenuRoot(_ref) {
  var _surfaceContext$get, _registeredMenu$maxHe;
  var emptyStateHandler = _ref.emptyStateHandler,
    fireAnalyticsEvent = _ref.fireAnalyticsEvent,
    getItemRank = _ref.getItemRank,
    getRecommendedItems = _ref.getRecommendedItems;
  var registeredMenu = (0, _context.useRegisteredMenuContext)();
  var _registeredMenu$query = registeredMenu.query,
    query = _registeredMenu$query === void 0 ? '' : _registeredMenu$query,
    selectFromHost = registeredMenu.select,
    surfaceContext = registeredMenu.surfaceContext;
  var surface = (_surfaceContext$get = surfaceContext.get(_surfaceContext.REGISTERED_MENU_SURFACE_CONTEXT)) === null || _surfaceContext$get === void 0 ? void 0 : _surfaceContext$get.surface;
  if (!selectFromHost || !surface || surface === 'element-browser') {
    throw new Error('QuickInsertMenuRoot requires a selection action and registered menu surface');
  }
  var _useIntl = (0, _reactIntl.useIntl)(),
    formatMessage = _useIntl.formatMessage;
  var components = registeredMenu.components,
    runtimeItemRank = registeredMenu.getItemRank,
    rootComponent = registeredMenu.rootComponent;
  var model = (0, _react.useMemo)(function () {
    return (0, _getQuickInsertMenuModel.getQuickInsertMenuModel)({
      components: components,
      formatMessage: formatMessage,
      getItemRank: runtimeItemRank !== null && runtimeItemRank !== void 0 ? runtimeItemRank : getItemRank,
      getRecommendedItems: getRecommendedItems,
      query: query,
      rootComponent: rootComponent,
      selectCategoryItems: components.some(function (_ref2) {
        var key = _ref2.key;
        return (0, _typeAheadIsSectionOverflowItemKey.isSectionOverflowItemKey)(key);
      }) ? _selectQuickInsertCategoryItems.selectQuickInsertCategoryItems : undefined,
      surfaceContext: surfaceContext
    });
  }, [components, formatMessage, getItemRank, getRecommendedItems, query, rootComponent, runtimeItemRank, surfaceContext]);
  var resultCount = (0, _react.useMemo)(function () {
    return model.sections.reduce(function (count, _ref3) {
      var _ref4 = (0, _toArray2.default)(_ref3),
        items = _arrayLikeToArray(_ref4).slice(1);
      return count + items.filter(function (_ref5) {
        var key = _ref5.key;
        return !(0, _typeAheadIsSectionOverflowItemKey.isSectionOverflowItemKey)(key);
      }).length;
    }, 0);
  }, [model.sections]);
  var flushSearchAnalytics = (0, _useQuickInsertSearchAnalytics.useQuickInsertSearchAnalytics)({
    surface: surface,
    fireAnalyticsEvent: fireAnalyticsEvent,
    query: query,
    resultCount: resultCount
  });
  var selectItem = (0, _react.useCallback)(function (selection) {
    flushSearchAnalytics();
    selectFromHost(function (insert) {
      return selection({
        insert: insert,
        source: surface === 'toolbar' ? _enums.INPUT_METHOD.INSERT_MENU : _enums.INPUT_METHOD.QUICK_INSERT
      });
    });
  }, [flushSearchAnalytics, selectFromHost, surface]);
  var menuContextValue = (0, _react.useMemo)(function () {
    return {
      editorView: registeredMenu.editorView,
      isOffline: registeredMenu.isOffline,
      popupsMountPoint: registeredMenu.portalMountPoint,
      select: selectItem,
      surfaceContext: registeredMenu.surfaceContext
    };
  }, [registeredMenu.editorView, registeredMenu.isOffline, registeredMenu.portalMountPoint, registeredMenu.surfaceContext, selectItem]);
  var listLabel = formatMessage(surface === 'typeahead' ? _messages.typeAheadListMessages.quickInsertInputLabel : _insertBlock.toolbarInsertBlockMessages.insertMenu);
  var _useRegisteredMenu = (0, _useRegisteredMenu2.useRegisteredMenu)({
      model: model,
      resetKey: query
    }),
    rows = _useRegisteredMenu.rows,
    selectableItems = _useRegisteredMenu.selectableItems,
    selectedItemIndex = _useRegisteredMenu.selectedItemIndex,
    activeItemKey = _useRegisteredMenu.activeItemKey,
    selectionSource = _useRegisteredMenu.selectionSource,
    listEvents = (0, _objectWithoutProperties2.default)(_useRegisteredMenu, _excluded);
  var listId = (0, _react.useId)();
  var _useState = (0, _react.useState)({
      startIndex: -1,
      stopIndex: -1
    }),
    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
    renderedItems = _useState2[0],
    setRenderedItems = _useState2[1];
  var menuRef = (0, _react.useRef)(null);
  var maxHeight = (_registeredMenu$maxHe = registeredMenu.maxHeight) !== null && _registeredMenu$maxHe !== void 0 ? _registeredMenu$maxHe : DEFAULT_MENU_MAX_HEIGHT;
  var itemCount = selectableItems.length + (model.footer ? 1 : 0);
  var activeItemId = selectedItemIndex >= 0 && selectedItemIndex < itemCount ? (0, _getQuickInsertMenuItemId.getQuickInsertMenuItemId)(listId, selectedItemIndex) : undefined;
  var isActiveItemMounted = selectedItemIndex >= 0 && selectedItemIndex < itemCount && (selectedItemIndex >= renderedItems.startIndex && selectedItemIndex <= renderedItems.stopIndex || Boolean(model.footer) && selectedItemIndex === itemCount - 1);
  var selectActiveItem = (0, _react.useCallback)(function () {
    if (isActiveItemMounted && activeItemId) {
      var _menuRef$current;
      (_menuRef$current = menuRef.current) === null || _menuRef$current === void 0 || (_menuRef$current = _menuRef$current.ownerDocument.getElementById(activeItemId)) === null || _menuRef$current === void 0 || _menuRef$current.click();
    }
  }, [activeItemId, isActiveItemMounted]);
  var onMenuKeyDown = (0, _react.useCallback)(function (event) {
    if (event.key === 'ArrowDown') {
      listEvents.selectNext();
      return true;
    }
    if (event.key === 'ArrowUp') {
      listEvents.selectPrevious();
      return true;
    }
    if (event.key === 'Enter') {
      if (isImeEnter(event)) {
        return false;
      }
      selectActiveItem();
      return true;
    }
    return false;
  }, [listEvents.selectNext, listEvents.selectPrevious, selectActiveItem]);
  var containsTarget = (0, _react.useCallback)(function (target) {
    var _menuRef$current2;
    return Boolean((_menuRef$current2 = menuRef.current) === null || _menuRef$current2 === void 0 ? void 0 : _menuRef$current2.contains(target));
  }, []);
  var interaction = (0, _react.useMemo)(function () {
    return {
      activeDescendantId: isActiveItemMounted ? activeItemId : undefined,
      containsTarget: containsTarget,
      expanded: itemCount > 0,
      label: listLabel,
      listId: listId,
      onKeyDown: onMenuKeyDown,
      onClose: flushSearchAnalytics,
      optionCount: itemCount,
      selectNext: listEvents.selectNext,
      selectPrevious: listEvents.selectPrevious
    };
  }, [activeItemId, containsTarget, flushSearchAnalytics, isActiveItemMounted, itemCount, listId, listLabel, listEvents.selectNext, listEvents.selectPrevious, onMenuKeyDown]);
  (0, _react.useLayoutEffect)(function () {
    if (!model.root) {
      return;
    }
    return registeredMenu.registerInteraction(interaction);
  }, [model.root, interaction, registeredMenu.registerInteraction]);
  if (!model.root) {
    return null;
  }
  return /*#__PURE__*/_react.default.createElement(_provider.QuickInsertProvider, {
    value: menuContextValue
  }, /*#__PURE__*/_react.default.createElement("div", {
    ref: menuRef
  }, /*#__PURE__*/_react.default.createElement(_menuGroup.default, null, surface === 'typeahead' ? /*#__PURE__*/_react.default.createElement(_TypeAheadQuickInsertMenu.TypeAheadQuickInsertMenu, {
    Item: _RegisteredQuickInsertMenuItem.RegisteredQuickInsertMenuItem,
    activeItemKey: activeItemKey,
    hasScrollPadding: true,
    itemCount: itemCount,
    listId: listId,
    listLabel: listLabel,
    maxHeight: maxHeight,
    model: model,
    onItemBlur: listEvents.onItemBlur,
    onItemFocus: listEvents.onItemFocus,
    onItemHover: listEvents.onItemHover,
    onItemLeave: listEvents.onItemLeave,
    onItemVisibilityChange: listEvents.onItemVisibilityChange,
    onRenderedItemsChange: setRenderedItems,
    query: query,
    rows: rows,
    selectedItemIndex: selectedItemIndex,
    selectionSource: selectionSource
  }) : /*#__PURE__*/_react.default.createElement(_ToolbarQuickInsertMenu.ToolbarQuickInsertMenu, {
    Item: _RegisteredQuickInsertMenuItem.RegisteredQuickInsertMenuItem,
    activePreviewItemKey: activeItemKey,
    emptyStateHandler: emptyStateHandler,
    itemCount: itemCount,
    listId: listId,
    listLabel: listLabel,
    maxHeight: maxHeight,
    model: model,
    onItemBlur: listEvents.onItemBlur,
    onItemFocus: listEvents.onItemFocus,
    onItemHover: listEvents.onItemHover,
    onItemLeave: listEvents.onItemLeave,
    onItemVisibilityChange: listEvents.onItemVisibilityChange,
    onRenderedItemsChange: setRenderedItems,
    query: query,
    rows: rows,
    selectedItemIndex: selectedItemIndex,
    selectionSource: selectionSource
  }))));
};
var _default = exports.default = QuickInsertMenuRoot;