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

Table plugin for the @atlaskit/editor

import React, { useCallback, useContext, useRef } from 'react';
import { Popup } from '@atlaskit/editor-common/ui';
import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
import { UserIntentPopupWrapper } from '@atlaskit/editor-common/user-intent';
import { closeActiveTableMenu, setFocusToCellMenu } from '../../pm-plugins/commands';
import { getPluginState } from '../../pm-plugins/plugin-factory';
import { TableCssClassName as ClassName } from '../../types';
import { tablePopupMenuFitHeight } from '../consts';
import { CELL_MENU } from '../TableMenu/cell/keys';
import { TABLE_MENU_WIDTH } from '../TableMenu/shared/consts';
import { TableMenu } from '../TableMenu/shared/TableMenu';
var PopupWithListeners = withReactEditorViewOuterListeners(Popup);
var NESTED_DROPDOWN_SELECTOR = '[data-toolbar-nested-dropdown-menu]';
var CELL_MENU_TRIGGER_SELECTOR = ".".concat(ClassName.CONTEXTUAL_MENU_BUTTON);
export var 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 = useRef(null);
  var setOutsideClickTargetRef = useContext(OutsideClickTargetRefContext);
  var handlePopupRef = useCallback(function (el) {
    popupContentRef.current = el;
    setOutsideClickTargetRef === null || setOutsideClickTargetRef === void 0 || setOutsideClickTargetRef(el);
  }, [setOutsideClickTargetRef]);
  var closeCellMenu = useCallback(function () {
    var _getPluginState = getPluginState(editorView.state),
      isCellMenuOpenByKeyboard = _getPluginState.isCellMenuOpenByKeyboard;
    api === null || api === void 0 || api.core.actions.execute(closeActiveTableMenu());
    if (isCellMenuOpenByKeyboard) {
      setFocusToCellMenu(false)(editorView.state, editorView.dispatch);
    }
  }, [api === null || api === void 0 ? void 0 : api.core.actions, editorView]);
  var isEventInsideCellMenu = 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 = useCallback(function (event) {
    if (isEventInsideCellMenu(event)) {
      return;
    }
    closeCellMenu();
  }, [closeCellMenu, isEventInsideCellMenu]);
  return /*#__PURE__*/React.createElement(PopupWithListeners, {
    alignX: "right",
    alignY: "top",
    target: targetCellRef,
    mountTo: mountPoint,
    boundariesElement: boundariesElement,
    scrollableElement: scrollableElement,
    fitHeight: tablePopupMenuFitHeight,
    fitWidth: 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.createElement("div", {
    ref: handlePopupRef
  }, /*#__PURE__*/React.createElement(UserIntentPopupWrapper, {
    api: api,
    userIntent: "tableContextualMenuPopupOpen"
  }, /*#__PURE__*/React.createElement(TableMenu, {
    api: api,
    editorView: editorView,
    surface: CELL_MENU
  }))));
};