@atlaskit/editor-plugin-block-controls/dist/es2019/ui/block-controls-right-surface.js

Block controls plugin for @atlaskit/editor-core

/* block-controls-right-surface.tsx generated by @compiled/babel-plugin v3.0.2 */
import "./block-controls-right-surface.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
import React from 'react';
import { BLOCK_CONTROLS_RIGHT_SURFACE } from '@atlaskit/editor-common/block-controls/surface-keys';
import { SurfaceRenderer, willSurfaceRender } from '@atlaskit/editor-ui-control-model/surface-renderer';
import { partitionComponentsByPersistence } from './utils/partition-components-by-persistence';
import { VisibilityContainer } from './visibility-container';
const rightSurfaceOuterStyles = null;
const rightSurfaceRowStyles = null;

// Applied in addition to rightSurfaceRowStyles when the target node is sticky-eligible (e.g. long
// tables): the outer wrapper spans the node's full height (see `placement.height`), so the content
// can stick near the top of the viewport instead of scrolling off with the node's top edge.
// Keep in sync with STICKY_CONTROLS_TOP_MARGIN in ./consts (must be a static literal here).
const rightSurfaceStickyStyles = null;
/** Renders one right block-controls surface at a document position. */
export const BlockControlsRightSurface = ({
  api,
  components,
  forceVisibleOnMouseOut,
  placement,
  source,
  surfaceContext
}) => {
  if (!placement || !willSurfaceRender(components, BLOCK_CONTROLS_RIGHT_SURFACE, surfaceContext)) {
    return null;
  }
  const {
    hoverOnlyComponents,
    persistentComponents
  } = partitionComponentsByPersistence(components, BLOCK_CONTROLS_RIGHT_SURFACE, surfaceContext);
  const willRenderPersistent = willSurfaceRender(persistentComponents, BLOCK_CONTROLS_RIGHT_SURFACE, surfaceContext);
  const willRenderHoverOnly = willSurfaceRender(hoverOnlyComponents, BLOCK_CONTROLS_RIGHT_SURFACE, surfaceContext);
  const isSticky = placement.isSticky;
  return /*#__PURE__*/React.createElement("div", {
    "data-editor-block-controls-surface": true,
    "data-editor-block-controls-side": "right",
    "data-testid": source === 'stored' ? 'block-controls-right-surface-stored' : source === 'active' ? 'block-controls-right-surface-active' : 'block-controls-right-surface'
    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Placement is resolved per target node, from its runtime DOM geometry or from its CSS anchor.
    ,
    style: placement.style,
    className: ax(["_kqswstnw _17c61i8t _1pbyb4wl"])
  }, /*#__PURE__*/React.createElement("div", {
    className: ax(["_zulpv77o _4cvr1h6o _1e0c1txw", isSticky && "_kqsw1if8 _154iu2gc"])
  }, willRenderPersistent && /*#__PURE__*/React.createElement(VisibilityContainer, {
    api: api,
    controlSide: "right",
    isPersistent: true,
    shouldUseDisplayContents: true
  }, /*#__PURE__*/React.createElement(SurfaceRenderer, {
    components: persistentComponents,
    surface: BLOCK_CONTROLS_RIGHT_SURFACE,
    surfaceContext: surfaceContext
  })), willRenderHoverOnly && /*#__PURE__*/React.createElement(VisibilityContainer, {
    api: api,
    controlSide: "right",
    forceVisibleOnMouseOut: forceVisibleOnMouseOut,
    shouldUseDisplayContents: true
  }, /*#__PURE__*/React.createElement(SurfaceRenderer, {
    components: hoverOnlyComponents,
    surface: BLOCK_CONTROLS_RIGHT_SURFACE,
    surfaceContext: surfaceContext
  }))));
};