@atlaskit/editor-plugin-insert-block/dist/cjs/ui/registered-insert-menu/RegisteredInsertMenu.js

Insert block plugin for @atlaskit/editor-core

/* RegisteredInsertMenu.tsx generated by @compiled/babel-plugin v3.0.2 */
"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.RegisteredInsertMenu = void 0;
require("./RegisteredInsertMenu.compiled.css");
var _runtime = require("@compiled/react/runtime");
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _reactIntl = require("react-intl");
var _browserApis = require("@atlaskit/browser-apis");
var _insertBlock = require("@atlaskit/editor-common/messages/insert-block");
var _keys = require("@atlaskit/editor-common/quick-insert/keys");
var _registeredMenuModel = require("@atlaskit/editor-common/quick-insert/registered-menu-model");
var _useSearchAnalytics = require("@atlaskit/editor-common/quick-insert/use-search-analytics");
var _typeAheadIsSectionOverflowItemKey = require("@atlaskit/editor-common/type-ahead-is-section-overflow-item-key");
var _typeAheadSurfaceContext = require("@atlaskit/editor-common/type-ahead-surface-context");
var _createSurfaceContext = require("@atlaskit/editor-ui-control-model/create-surface-context");
var _box = require("@atlaskit/primitives/compiled/box");
var _textField = _interopRequireDefault(require("@atlaskit/textfield/text-field"));
var _RegisteredInsertMenuList = require("./RegisteredInsertMenuList");
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 DEFAULT_MENU_MAX_HEIGHT = 520;
var styles = {
  menu: "_2rko1mok _1reo15vq _18m915vq _bfhk1bhr _16qs130s _1e0c1txw _2lx21bp4 _1bsb1edt",
  search: "_18zrutpp _1o9zidpf _1q51utpp _85i5u2gc"
};
var RegisteredInsertMenu = exports.RegisteredInsertMenu = function RegisteredInsertMenu(_ref) {
  var components = _ref.components,
    emptyStateHandler = _ref.emptyStateHandler,
    fireAnalyticsEvent = _ref.fireAnalyticsEvent,
    getItemRank = _ref.getItemRank,
    editorView = _ref.editorView,
    isOffline = _ref.isOffline,
    _ref$maxHeight = _ref.maxHeight,
    maxHeight = _ref$maxHeight === void 0 ? DEFAULT_MENU_MAX_HEIGHT : _ref$maxHeight,
    onClose = _ref.onClose,
    onSelect = _ref.onSelect;
  var menuStyle = {
    maxHeight: maxHeight
  };
  var _useIntl = (0, _reactIntl.useIntl)(),
    formatMessage = _useIntl.formatMessage;
  var listId = (0, _react.useId)();
  var _useState = (0, _react.useState)(function () {
      return Symbol('registered-insert-menu-open');
    }),
    _useState2 = (0, _slicedToArray2.default)(_useState, 1),
    menuOpenId = _useState2[0];
  var _useState3 = (0, _react.useState)(''),
    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
    query = _useState4[0],
    setQuery = _useState4[1];
  var _useState5 = (0, _react.useState)(0),
    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
    selectedItemIndex = _useState6[0],
    setSelectedItemIndex = _useState6[1];
  var selectedItemIndexRef = (0, _react.useRef)(selectedItemIndex);
  var _useState7 = (0, _react.useState)({
      startIndex: -1,
      stopIndex: -1
    }),
    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
    renderedItems = _useState8[0],
    setRenderedItems = _useState8[1];
  var searchRef = (0, _react.useRef)(null);
  (0, _react.useLayoutEffect)(function () {
    var _searchRef$current;
    // Popup positions on the next frame; focusing must not scroll to its initial location.
    (_searchRef$current = searchRef.current) === null || _searchRef$current === void 0 || _searchRef$current.focus({
      preventScroll: true
    });
  }, []);
  var surfaceContext = (0, _react.useMemo)(function () {
    return (0, _createSurfaceContext.createSurfaceContext)(_typeAheadSurfaceContext.TYPE_AHEAD_SURFACE_CONTEXT, {
      menuOpenId: menuOpenId
    });
  }, [menuOpenId]);
  var hasSectionOverflowItems = (0, _react.useMemo)(function () {
    return components.some(function (_ref2) {
      var key = _ref2.key;
      return (0, _typeAheadIsSectionOverflowItemKey.isSectionOverflowItemKey)(key);
    });
  }, [components]);
  var model = (0, _react.useMemo)(function () {
    return (0, _registeredMenuModel.getQuickInsertMenuModel)({
      components: components,
      formatMessage: formatMessage,
      getItemRank: getItemRank,
      query: query,
      rootComponent: _keys.MENU,
      selectCategoryItems: hasSectionOverflowItems ? _registeredMenuModel.selectQuickInsertCategoryItems : undefined,
      surfaceContext: surfaceContext
    });
  }, [components, formatMessage, getItemRank, hasSectionOverflowItems, query, surfaceContext]);
  var _useState9 = (0, _react.useState)(),
    _useState0 = (0, _slicedToArray2.default)(_useState9, 2),
    previewActivation = _useState0[0],
    setPreviewActivation = _useState0[1];
  var activePreviewItemKey = (previewActivation === null || previewActivation === void 0 ? void 0 : previewActivation.model) === model ? previewActivation.itemKey : undefined;
  var searchResultCount = (0, _react.useMemo)(function () {
    return model.sections.reduce(function (count, section) {
      return count + section.filter(function (_ref3) {
        var key = _ref3.key,
          type = _ref3.type;
        return type === 'menu-item' && !(0, _typeAheadIsSectionOverflowItemKey.isSectionOverflowItemKey)(key);
      }).length;
    }, 0);
  }, [model.sections]);
  var flushSearchAnalytics = (0, _useSearchAnalytics.useQuickInsertSearchAnalytics)({
    fireAnalyticsEvent: fireAnalyticsEvent,
    query: query,
    resultCount: searchResultCount,
    surface: 'toolbar'
  });
  var closeWithAnalytics = (0, _react.useCallback)(function () {
    flushSearchAnalytics();
    onClose();
  }, [flushSearchAnalytics, onClose]);
  var selectWithAnalytics = (0, _react.useCallback)(function () {
    flushSearchAnalytics();
    onSelect();
  }, [flushSearchAnalytics, onSelect]);
  var selectableItems = (0, _react.useMemo)(function () {
    return (0, _registeredMenuModel.getQuickInsertMenuRows)(model).filter(function (row) {
      return row.type === 'menu-item';
    });
  }, [model]);
  var itemCount = selectableItems.length + (model.footer ? 1 : 0);
  var selectableItemKeys = (0, _react.useMemo)(function () {
    return [].concat((0, _toConsumableArray2.default)(selectableItems), (0, _toConsumableArray2.default)(model.footer ? [model.footer] : [])).map(function (_ref4) {
      var key = _ref4.key;
      return key;
    }).join(',');
  }, [model.footer, selectableItems]);
  (0, _react.useLayoutEffect)(function () {
    var initialItemIndex = itemCount > 0 ? 0 : -1;
    selectedItemIndexRef.current = initialItemIndex;
    setSelectedItemIndex(initialItemIndex);
  }, [itemCount, query, selectableItemKeys]);
  (0, _react.useLayoutEffect)(function () {
    setPreviewActivation(undefined);
  }, [model, query]);
  var isActiveItemMounted = selectedItemIndex >= 0 && selectedItemIndex < itemCount && (selectedItemIndex >= renderedItems.startIndex && selectedItemIndex <= renderedItems.stopIndex || Boolean(model.footer) && selectedItemIndex === itemCount - 1);
  var activeItemId = "".concat(listId, "-").concat(selectedItemIndex);
  var setKeyboardPreview = (0, _react.useCallback)(function (itemIndex) {
    var item = selectableItems[itemIndex];
    setPreviewActivation(item ? {
      itemKey: item.key,
      model: model,
      source: 'keyboard'
    } : undefined);
  }, [model, selectableItems]);
  var selectNextItem = (0, _react.useCallback)(function () {
    var currentIndex = selectedItemIndexRef.current;
    var nextIndex = itemCount === 0 ? -1 : currentIndex < 0 ? 0 : (currentIndex + 1) % itemCount;
    selectedItemIndexRef.current = nextIndex;
    setSelectedItemIndex(nextIndex);
    setKeyboardPreview(nextIndex);
  }, [itemCount, setKeyboardPreview]);
  var selectPreviousItem = (0, _react.useCallback)(function () {
    var currentIndex = selectedItemIndexRef.current;
    var previousIndex = itemCount === 0 ? -1 : currentIndex <= 0 ? itemCount - 1 : currentIndex - 1;
    selectedItemIndexRef.current = previousIndex;
    setSelectedItemIndex(previousIndex);
    setKeyboardPreview(previousIndex);
  }, [itemCount, setKeyboardPreview]);
  var onItemHover = (0, _react.useCallback)(function (itemIndex, itemKey) {
    selectedItemIndexRef.current = itemIndex;
    setSelectedItemIndex(itemIndex);
    setPreviewActivation(function (current) {
      if ((current === null || current === void 0 ? void 0 : current.itemKey) === itemKey && (current === null || current === void 0 ? void 0 : current.model) === model && (current === null || current === void 0 ? void 0 : current.source) === 'pointer') {
        return current;
      }
      return itemKey ? {
        itemKey: itemKey,
        model: model,
        source: 'pointer'
      } : undefined;
    });
  }, [model]);
  var onItemFocus = (0, _react.useCallback)(function (itemIndex, itemKey) {
    selectedItemIndexRef.current = itemIndex;
    setSelectedItemIndex(itemIndex);
    setPreviewActivation(function (current) {
      if ((current === null || current === void 0 ? void 0 : current.itemKey) === itemKey && (current === null || current === void 0 ? void 0 : current.model) === model) {
        return current;
      }
      return itemKey ? {
        itemKey: itemKey,
        model: model,
        source: 'keyboard'
      } : undefined;
    });
  }, [model]);
  var onItemLeave = (0, _react.useCallback)(function (itemKey) {
    setPreviewActivation(function (current) {
      return (current === null || current === void 0 ? void 0 : current.source) === 'pointer' && current.itemKey === itemKey ? undefined : current;
    });
  }, []);
  var onItemBlur = (0, _react.useCallback)(function (itemKey) {
    setPreviewActivation(function (current) {
      return (current === null || current === void 0 ? void 0 : current.itemKey) === itemKey ? undefined : current;
    });
  }, []);
  var onItemVisibilityChange = (0, _react.useCallback)(function (itemKey, isVisible) {
    if (!isVisible) {
      setPreviewActivation(function (current) {
        return (current === null || current === void 0 ? void 0 : current.source) === 'pointer' && current.itemKey === itemKey ? undefined : current;
      });
    }
  }, []);
  var selectActiveItem = (0, _react.useCallback)(function () {
    if (isActiveItemMounted) {
      var _getDocument;
      (_getDocument = (0, _browserApis.getDocument)()) === null || _getDocument === void 0 || (_getDocument = _getDocument.getElementById(activeItemId)) === null || _getDocument === void 0 || _getDocument.click();
    }
  }, [activeItemId, isActiveItemMounted]);
  var onQueryChange = (0, _react.useCallback)(function (event) {
    setQuery(event.currentTarget.value);
  }, []);
  var onKeyDown = (0, _react.useCallback)(function (event) {
    if (event.key === 'Escape') {
      event.preventDefault();
      closeWithAnalytics();
      return;
    }

    // The search field owns the composite's arrow-key and Enter behaviour. Other
    // focusable controls, including consumer-provided empty-state content, need
    // to retain their native keyboard behaviour.
    if (event.target !== searchRef.current) {
      return;
    }
    switch (event.key) {
      case 'ArrowDown':
        event.preventDefault();
        selectNextItem();
        break;
      case 'ArrowUp':
        event.preventDefault();
        selectPreviousItem();
        break;
      case 'Enter':
        event.preventDefault();
        selectActiveItem();
        break;
    }
  }, [closeWithAnalytics, selectActiveItem, selectNextItem, selectPreviousItem]);
  return /*#__PURE__*/_react.default.createElement(_box.Box, {
    "data-keyboard-navigation-independent": "",
    testId: "registered-insert-menu",
    onKeyDownCapture: onKeyDown,
    xcss: styles.menu,
    style: menuStyle
  }, /*#__PURE__*/_react.default.createElement(_box.Box, {
    xcss: styles.search
  }, /*#__PURE__*/_react.default.createElement(_textField.default, {
    "aria-activedescendant": isActiveItemMounted ? activeItemId : undefined,
    "aria-controls": listId,
    "aria-expanded": "true",
    placeholder: "Search",
    ref: searchRef,
    role: "combobox",
    value: query,
    onChange: onQueryChange
  })), /*#__PURE__*/_react.default.createElement(_RegisteredInsertMenuList.RegisteredInsertMenuList, {
    editorView: editorView,
    emptyStateHandler: emptyStateHandler,
    isOffline: isOffline,
    listId: listId,
    listLabel: formatMessage(_insertBlock.toolbarInsertBlockMessages.insertMenu),
    maxHeight: maxHeight,
    menuOpenId: menuOpenId,
    model: model,
    onClose: selectWithAnalytics,
    onItemFocus: onItemFocus,
    onItemHover: onItemHover,
    onItemBlur: onItemBlur,
    onItemLeave: onItemLeave,
    onItemVisibilityChange: onItemVisibilityChange,
    onRenderedItemsChange: setRenderedItems,
    query: query,
    selectedItemIndex: selectedItemIndex,
    surfaceContext: surfaceContext,
    activePreviewItemKey: activePreviewItemKey
  }));
};