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

Table plugin for the @atlaskit/editor

/**
 * @jsxRuntime classic
 * @jsx jsx
 */
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { jsx } from '@emotion/react';
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
import { Popup } from '@atlaskit/editor-common/ui';
import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
import { akEditorFloatingDialogZIndex, akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
import { findCellRectClosestToPos, getSelectionRect, isSelectionType } from '@atlaskit/editor-tables/utils';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import { getPluginState } from '../../pm-plugins/plugin-factory';
import { contextualMenuDropdownWidthDnD, contextualMenuTriggerSize, tablePopupMenuFitHeight } from '../consts';
import { CellMenuPopup } from './CellMenuPopup';
// Ignored via go/ees005
// eslint-disable-next-line import/no-named-as-default
import ContextualMenu from './ContextualMenu';
import { tablePopupStyles } from './styles';
var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
  var mountPoint = _ref.mountPoint,
    boundariesElement = _ref.boundariesElement,
    scrollableElement = _ref.scrollableElement,
    editorView = _ref.editorView,
    isOpen = _ref.isOpen,
    pluginConfig = _ref.pluginConfig,
    editorAnalyticsAPI = _ref.editorAnalyticsAPI,
    getEditorContainerWidth = _ref.getEditorContainerWidth,
    getEditorFeatureFlags = _ref.getEditorFeatureFlags,
    isCellMenuOpenByKeyboard = _ref.isCellMenuOpenByKeyboard,
    isCommentEditor = _ref.isCommentEditor,
    api = _ref.api,
    isDragMenuOpen = _ref.isDragMenuOpen;
  var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['table'], function (states) {
      var _states$tableState;
      return {
        activeTableMenu: (_states$tableState = states.tableState) === null || _states$tableState === void 0 ? void 0 : _states$tableState.activeTableMenu
      };
    }),
    activeTableMenu = _useSharedPluginState.activeTableMenu;
  var isCellMenuOpen = expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) ? (activeTableMenu === null || activeTableMenu === void 0 ? void 0 : activeTableMenu.type) === 'cell' : isOpen;
  if (!editorView) {
    return null;
  }

  // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
  var _getPluginState = getPluginState(editorView.state),
    targetCellPosition = _getPluginState.targetCellPosition;
  if (!isCellMenuOpen || !targetCellPosition || editorView.state.doc.nodeSize <= targetCellPosition) {
    return null;
  }
  var selection = editorView.state.selection;
  var selectionRect = isSelectionType(selection, 'cell') ?
  // Ignored via go/ees005
  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
  getSelectionRect(selection) : findCellRectClosestToPos(selection.$from);
  if (!selectionRect) {
    return null;
  }
  var domAtPos = editorView.domAtPos.bind(editorView);
  var targetCellRef = findDomRefAtPos(targetCellPosition, domAtPos);
  if (!targetCellRef) {
    return null;
  }
  var parentSticky = targetCellRef.parentElement && targetCellRef.parentElement.className.indexOf('sticky') > -1;
  if (expValEquals('platform_editor_table_menu_updates', 'isEnabled', true)) {
    return jsx(CellMenuPopup, {
      api: api,
      boundariesElement: boundariesElement,
      editorView: editorView,
      mountPoint: mountPoint,
      scrollableElement: scrollableElement
      // Ignored via go/ees005
      // eslint-disable-next-line @atlaskit/editor/no-as-casting
      ,
      targetCellRef: targetCellRef,
      zIndex: parentSticky ? akEditorFloatingDialogZIndex : akEditorFloatingOverlapPanelZIndex
    });
  }
  return jsx(Popup, {
    alignX: "right",
    alignY: "top"
    // Ignored via go/ees005
    // eslint-disable-next-line @atlaskit/editor/no-as-casting
    ,
    target: targetCellRef,
    mountTo: mountPoint,
    boundariesElement: boundariesElement,
    scrollableElement: scrollableElement,
    fitHeight: tablePopupMenuFitHeight,
    fitWidth: contextualMenuDropdownWidthDnD
    // z-index value below is to ensure that this menu is above other floating menu
    // in table, but below floating dialogs like typeaheads, pickers, etc.
    ,
    zIndex: parentSticky ? akEditorFloatingDialogZIndex : akEditorFloatingOverlapPanelZIndex,
    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
  }, jsx("div", {
    css: tablePopupStyles()
  }, jsx(ContextualMenu, {
    editorView: editorView
    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
    ,
    offset: [contextualMenuTriggerSize / 2, -contextualMenuTriggerSize],
    isOpen: isOpen,
    targetCellPosition: targetCellPosition,
    allowColumnSorting: pluginConfig && pluginConfig.allowColumnSorting
    // Ignored via go/ees005
    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
    ,
    allowMergeCells: pluginConfig.allowMergeCells
    // Ignored via go/ees005
    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
    ,
    allowBackgroundColor: pluginConfig.allowBackgroundColor,
    selectionRect: selectionRect,
    mountPoint: mountPoint,
    boundariesElement: boundariesElement,
    editorAnalyticsAPI: editorAnalyticsAPI,
    getEditorContainerWidth: getEditorContainerWidth,
    getEditorFeatureFlags: getEditorFeatureFlags,
    isCellMenuOpenByKeyboard: isCellMenuOpenByKeyboard,
    isCommentEditor: isCommentEditor,
    api: api,
    isDragMenuOpen: isDragMenuOpen
  })));
};
FloatingContextualMenu.displayName = 'FloatingContextualMenu';
export default FloatingContextualMenu;