@atlaskit/editor-plugin-table/dist/cjs/ui/FloatingContextualMenu/CellMenuPopup.js

Table plugin for the @atlaskit/editor

"use strict";

var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.CellMenuPopup = void 0;
var _react = _interopRequireWildcard(require("react"));
var _ui = require("@atlaskit/editor-common/ui");
var _uiReact = require("@atlaskit/editor-common/ui-react");
var _userIntent = require("@atlaskit/editor-common/user-intent");
var _commands = require("../../pm-plugins/commands");
var _pluginFactory = require("../../pm-plugins/plugin-factory");
var _types = require("../../types");
var _consts = require("../consts");
var _keys = require("../TableMenu/cell/keys");
var _consts2 = require("../TableMenu/shared/consts");
var _TableMenu = require("../TableMenu/shared/TableMenu");
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 PopupWithListeners = (0, _uiReact.withReactEditorViewOuterListeners)(_ui.Popup);
var NESTED_DROPDOWN_SELECTOR = '[data-toolbar-nested-dropdown-menu]';
var CELL_MENU_TRIGGER_SELECTOR = ".".concat(_types.TableCssClassName.CONTEXTUAL_MENU_BUTTON);
var CellMenuPopup = exports.CellMenuPopup = function CellMenuPopup(_ref) {
  var api = _ref.api,
    boundariesElement = _ref.boundariesElement,
    editorView = _ref.editorView,
    mountPoint = _ref.mountPoint,
    scrollableElement = _ref.scrollableElement,
    targetCellRef = _ref.targetCellRef,
    zIndex = _ref.zIndex;
  var popupContentRef = (0, _react.useRef)(null);
  var setOutsideClickTargetRef = (0, _react.useContext)(_uiReact.OutsideClickTargetRefContext);
  var handlePopupRef = (0, _react.useCallback)(function (el) {
    popupContentRef.current = el;
    setOutsideClickTargetRef === null || setOutsideClickTargetRef === void 0 || setOutsideClickTargetRef(el);
  }, [setOutsideClickTargetRef]);
  var closeCellMenu = (0, _react.useCallback)(function () {
    var _getPluginState = (0, _pluginFactory.getPluginState)(editorView.state),
      isCellMenuOpenByKeyboard = _getPluginState.isCellMenuOpenByKeyboard;
    api === null || api === void 0 || api.core.actions.execute((0, _commands.closeActiveTableMenu)());
    if (isCellMenuOpenByKeyboard) {
      (0, _commands.setFocusToCellMenu)(false)(editorView.state, editorView.dispatch);
    }
  }, [api === null || api === void 0 ? void 0 : api.core.actions, editorView]);
  var isEventInsideCellMenu = (0, _react.useCallback)(function (event) {
    var _popupContentRef$curr;
    var target = event.target;
    if (!(target instanceof Node)) {
      return false;
    }
    if ((_popupContentRef$curr = popupContentRef.current) !== null && _popupContentRef$curr !== void 0 && _popupContentRef$curr.contains(target)) {
      return true;
    }
    return target instanceof Element && Boolean(target.closest(NESTED_DROPDOWN_SELECTOR) || target.closest(CELL_MENU_TRIGGER_SELECTOR));
  }, []);
  var handleCellMenuClickOutside = (0, _react.useCallback)(function (event) {
    if (isEventInsideCellMenu(event)) {
      return;
    }
    closeCellMenu();
  }, [closeCellMenu, isEventInsideCellMenu]);
  return /*#__PURE__*/_react.default.createElement(PopupWithListeners, {
    alignX: "right",
    alignY: "top",
    target: targetCellRef,
    mountTo: mountPoint,
    boundariesElement: boundariesElement,
    scrollableElement: scrollableElement,
    fitHeight: _consts.tablePopupMenuFitHeight,
    fitWidth: _consts2.TABLE_MENU_WIDTH,
    zIndex: zIndex,
    forcePlacement: true
    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
    ,
    offset: [-7, 0],
    stick: true,
    handleClickOutside: handleCellMenuClickOutside,
    handleEscapeKeydown: closeCellMenu
  }, /*#__PURE__*/_react.default.createElement("div", {
    ref: handlePopupRef
  }, /*#__PURE__*/_react.default.createElement(_userIntent.UserIntentPopupWrapper, {
    api: api,
    userIntent: "tableContextualMenuPopupOpen"
  }, /*#__PURE__*/_react.default.createElement(_TableMenu.TableMenu, {
    api: api,
    editorView: editorView,
    surface: _keys.CELL_MENU
  }))));
};