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

Table plugin for the @atlaskit/editor

/**
 * @jsxRuntime classic
 * @jsx jsx
 */
import React, { useEffect } from 'react';

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { jsx } from '@emotion/react';
import { injectIntl } from 'react-intl-next';
import { ACTION_SUBJECT } from '@atlaskit/editor-common/analytics';
import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
import { focusToContextMenuTrigger } from '@atlaskit/editor-common/keymaps';
import { tableMessages as messages } from '@atlaskit/editor-common/messages';
import { Popup } from '@atlaskit/editor-common/ui';
import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
import { akEditorSmallZIndex } from '@atlaskit/editor-shared-styles';
import ExpandIcon from '@atlaskit/icon/core/migration/chevron-down';
import { toggleContextualMenu } from '../../pm-plugins/commands';
import { TableCssClassName as ClassName } from '../../types';

// Ignored via go/ees005
// eslint-disable-next-line import/no-named-as-default
import FixedButton from './FixedButton';
import { tableFloatingCellButtonSelectedStyles, tableFloatingCellButtonStyles } from './styles';
var BUTTON_OFFSET = 3;
var FloatingContextualButtonInner = /*#__PURE__*/React.memo(function (props) {
  var editorView = props.editorView,
    isContextualMenuOpen = props.isContextualMenuOpen,
    mountPoint = props.mountPoint,
    scrollableElement = props.scrollableElement,
    stickyHeader = props.stickyHeader,
    tableWrapper = props.tableWrapper,
    targetCellPosition = props.targetCellPosition,
    isCellMenuOpenByKeyboard = props.isCellMenuOpenByKeyboard,
    formatMessage = props.intl.formatMessage; //  : Props & WrappedComponentProps

  var handleClick = function handleClick() {
    var state = editorView.state,
      dispatch = editorView.dispatch;
    // Clicking outside the dropdown handles toggling the menu closed
    // (otherwise these two toggles combat each other).
    // In the event a user clicks the chevron button again
    // That will count as clicking outside the dropdown and
    // will be toggled appropriately
    if (!isContextualMenuOpen) {
      toggleContextualMenu()(state, dispatch);
    }
  };
  var domAtPos = editorView.domAtPos.bind(editorView);
  var targetCellRef = findDomRefAtPos(targetCellPosition, domAtPos);
  useEffect(function () {
    if (isCellMenuOpenByKeyboard && !isContextualMenuOpen) {
      var state = editorView.state,
        dispatch = editorView.dispatch;
      // open the menu when the keyboard shortcut is pressed
      toggleContextualMenu()(state, dispatch);
    }
  }, [isCellMenuOpenByKeyboard, isContextualMenuOpen, editorView]);
  if (!targetCellRef || !(targetCellRef instanceof HTMLElement)) {
    return null;
  }
  var labelCellOptions = formatMessage(messages.cellOptions);
  var button = jsx("div", {
    css: [
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
    tableFloatingCellButtonStyles(),
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
    isContextualMenuOpen && tableFloatingCellButtonSelectedStyles()]
  }, jsx(ToolbarButton
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
  , {
    className: ClassName.CONTEXTUAL_MENU_BUTTON,
    selected: isContextualMenuOpen,
    title: labelCellOptions,
    keymap: focusToContextMenuTrigger,
    onClick: handleClick,
    iconBefore: jsx(ExpandIcon, {
      label: "",
      color: "currentColor",
      size: "small"
    }),
    "aria-label": labelCellOptions,
    "aria-expanded": isContextualMenuOpen
  }));
  var parentSticky = targetCellRef.parentElement && targetCellRef.parentElement.className.indexOf('sticky') > -1;
  if (stickyHeader && parentSticky && tableWrapper) {
    return jsx(FixedButton, {
      offset: BUTTON_OFFSET,
      stickyHeader: stickyHeader,
      tableWrapper: tableWrapper,
      targetCellPosition: targetCellPosition,
      targetCellRef: targetCellRef,
      mountTo: tableWrapper,
      isContextualMenuOpen: isContextualMenuOpen
    }, button);
  }
  return jsx(Popup, {
    alignX: "right",
    alignY: "start",
    target: targetCellRef,
    mountTo: tableWrapper || mountPoint,
    boundariesElement: targetCellRef,
    scrollableElement: scrollableElement,
    offset: [BUTTON_OFFSET, -BUTTON_OFFSET],
    forcePlacement: true,
    allowOutOfBounds: true,
    zIndex: akEditorSmallZIndex
  }, button);
});
var FloatingContextualButton = injectIntl(FloatingContextualButtonInner);
export default function (props) {
  return jsx(ErrorBoundary, {
    component: ACTION_SUBJECT.FLOATING_CONTEXTUAL_BUTTON,
    dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
    fallbackComponent: null
  }, jsx(FloatingContextualButton
  // Ignored via go/ees005
  // eslint-disable-next-line react/jsx-props-no-spreading
  , props));
}