@atlaskit/editor-plugin-table/dist/es2019/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';
const PopupWithListeners = withReactEditorViewOuterListeners(Popup);
const NESTED_DROPDOWN_SELECTOR = '[data-toolbar-nested-dropdown-menu]';
const CELL_MENU_TRIGGER_SELECTOR = `.${ClassName.CONTEXTUAL_MENU_BUTTON}`;
const CELL_MENU_TRIGGER_CLEARANCE = [6, 0];
export const CellMenuPopup = ({
  api,
  boundariesElement,
  editorView,
  mountPoint,
  scrollableElement,
  target,
  zIndex
}) => {
  const popupContentRef = useRef(null);
  const setOutsideClickTargetRef = useContext(OutsideClickTargetRefContext);
  const handlePopupRef = useCallback(el => {
    popupContentRef.current = el;
    setOutsideClickTargetRef === null || setOutsideClickTargetRef === void 0 ? void 0 : setOutsideClickTargetRef(el);
  }, [setOutsideClickTargetRef]);
  const closeCellMenu = useCallback(() => {
    const {
      isCellMenuOpenByKeyboard
    } = getPluginState(editorView.state);
    api === null || api === void 0 ? void 0 : api.core.actions.execute(closeActiveTableMenu(api));
    if (isCellMenuOpenByKeyboard) {
      setFocusToCellMenu(false)(editorView.state, editorView.dispatch);
    }
  }, [api, editorView]);
  const isEventInsideCellMenu = useCallback(event => {
    var _popupContentRef$curr;
    const 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));
  }, []);
  const horizontalPlacementRef = useRef(undefined);
  const handlePlacementChanged = useCallback(([, horizontalPlacement]) => {
    horizontalPlacementRef.current = horizontalPlacement;
  }, []);
  const handlePositionCalculated = useCallback(position => {
    if (horizontalPlacementRef.current !== 'left' || position.left === undefined) {
      return position;
    }
    return {
      ...position,
      left: position.left + target.getBoundingClientRect().width
    };
  }, [target]);
  const handleCellMenuClickOutside = useCallback(event => {
    if (isEventInsideCellMenu(event)) {
      return;
    }
    closeCellMenu();
  }, [closeCellMenu, isEventInsideCellMenu]);
  return /*#__PURE__*/React.createElement(PopupWithListeners, {
    alignX: "end",
    alignY: "start",
    target: target,
    mountTo: mountPoint,
    boundariesElement: boundariesElement,
    scrollableElement: scrollableElement,
    fitHeight: tablePopupMenuFitHeight,
    fitWidth: TABLE_MENU_WIDTH,
    zIndex: zIndex,
    forcePlacement: true,
    preventOverflow: true,
    onPlacementChanged: handlePlacementChanged,
    onPositionCalculated: handlePositionCalculated,
    offset: CELL_MENU_TRIGGER_CLEARANCE,
    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
  }))));
};