@sanity/visual-editing/dist/overlay-components/index.js

[](https://npm-stat.com/charts.html?package=@sanity/visual-editing) [](https://

import { useTelemetry, InsertMenuPopover } from "../_chunks-es/PointerEvents.js";
import { PointerEvents } from "../_chunks-es/PointerEvents.js";
import { jsxs, jsx } from "react/jsx-runtime";
import { c } from "react-compiler-runtime";
import { AddIcon } from "@sanity/icons";
import { Flex, Button } from "@sanity/ui/_visual-editing";
import { useState, useRef } from "react";
import { styled } from "styled-components";
import { useDocuments, getArrayInsertPatches } from "../_chunks-es/mutations.js";
const AddButton = styled(Button)`
  position: relative;
  transform: var(--add-button-position);

  --add-button-position: translateY(0);
  [data-position='top'] & {
    --add-button-position: translateY(-50%);
  }
  [data-position='right'] & {
    --add-button-position: translateX(50%);
  }
  [data-position='bottom'] & {
    --add-button-position: translateY(50%);
  }
  [data-position='left'] & {
    --add-button-position: translateX(-50%);
  }
`, HoverAreaRoot = styled(Flex)`
  pointer-events: all;
  height: var(--hover-area-height);
  width: var(--hover-area-width);

  --hover-area-height: 100%;
  --hover-area-width: 100%;
  &[data-position='top'],
  &[data-position='bottom'] {
    --hover-area-height: 48px;
  }
  &[data-position='right'],
  &[data-position='left'] {
    --hover-area-width: 48px;
  }
`, HoverArea = (props) => {
  const $ = c(28), {
    element,
    hoverAreaExtent,
    node,
    onAddUnion,
    position
  } = props, [showButton, setShowButton] = useState(!1);
  let t0;
  $[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = () => {
    setShowButton(!0);
  }, $[0] = t0) : t0 = $[0];
  const onEnter = t0;
  let t1;
  $[1] === Symbol.for("react.memo_cache_sentinel") ? (t1 = () => {
    setShowButton(!1);
  }, $[1] = t1) : t1 = $[1];
  const onLeave = t1, ref = useRef(null), sendTelemetry = useTelemetry();
  let t2;
  $[2] !== element ? (t2 = (event) => {
    if (event.target === ref.current) {
      const newEvent = new MouseEvent(event.type, {
        ...event.nativeEvent,
        bubbles: !0,
        cancelable: !0
      });
      element.dispatchEvent(newEvent);
    }
  }, $[2] = element, $[3] = t2) : t2 = $[3];
  const relayEventToElement = t2, [popoverReferenceElement, setPopoverReferenceElement] = useState(null), [menuVisible, setMenuVisible] = useState(!1);
  let t3;
  $[4] === Symbol.for("react.memo_cache_sentinel") ? (t3 = () => {
    setMenuVisible(!1), setShowButton(!1);
  }, $[4] = t3) : t3 = $[4];
  const dismissPortal = t3;
  let t4;
  $[5] !== onAddUnion || $[6] !== position || $[7] !== sendTelemetry ? (t4 = (schemaType) => {
    setMenuVisible(!1), onAddUnion(position === "top" || position === "left" ? "before" : "after", schemaType.name), sendTelemetry("Visual Editing Insert Menu Item Inserted", null);
  }, $[5] = onAddUnion, $[6] = position, $[7] = sendTelemetry, $[8] = t4) : t4 = $[8];
  const onSelect = t4, align = position === "top" ? "flex-start" : position === "bottom" ? "flex-end" : "center", justify = position === "left" ? "flex-start" : position === "right" ? "flex-end" : "center", blockDirection = position === "top" || position === "bottom" ? "height" : "width";
  let t5;
  $[9] !== blockDirection || $[10] !== hoverAreaExtent ? (t5 = {
    [blockDirection]: hoverAreaExtent
  }, $[9] = blockDirection, $[10] = hoverAreaExtent, $[11] = t5) : t5 = $[11];
  let t6;
  $[12] !== menuVisible || $[13] !== showButton ? (t6 = (showButton || menuVisible) && /* @__PURE__ */ jsx(AddButton, { ref: setPopoverReferenceElement, icon: AddIcon, mode: "ghost", onClick: () => setMenuVisible(_temp), radius: "full", selected: menuVisible }), $[12] = menuVisible, $[13] = showButton, $[14] = t6) : t6 = $[14];
  let t7;
  $[15] !== menuVisible || $[16] !== node || $[17] !== onSelect || $[18] !== popoverReferenceElement ? (t7 = menuVisible && popoverReferenceElement && /* @__PURE__ */ jsx(InsertMenuPopover, { node, onDismiss: dismissPortal, referenceElement: popoverReferenceElement, onSelect }), $[15] = menuVisible, $[16] = node, $[17] = onSelect, $[18] = popoverReferenceElement, $[19] = t7) : t7 = $[19];
  let t8;
  return $[20] !== align || $[21] !== justify || $[22] !== position || $[23] !== relayEventToElement || $[24] !== t5 || $[25] !== t6 || $[26] !== t7 ? (t8 = /* @__PURE__ */ jsxs(HoverAreaRoot, { align, "data-position": position, "data-sanity-overlay-element": !0, justify, onClick: relayEventToElement, onContextMenu: relayEventToElement, onMouseDown: relayEventToElement, onMouseEnter: onEnter, onMouseLeave: onLeave, onMouseUp: relayEventToElement, ref, style: t5, children: [
    t6,
    t7
  ] }), $[20] = align, $[21] = justify, $[22] = position, $[23] = relayEventToElement, $[24] = t5, $[25] = t6, $[26] = t7, $[27] = t8) : t8 = $[27], t8;
}, UnionInsertMenuOverlay = (props) => {
  const $ = c(19), {
    direction: t0,
    element,
    hoverAreaExtent,
    node,
    parent
  } = props, direction = t0 === void 0 ? "vertical" : t0, {
    getDocument
  } = useDocuments();
  let t1;
  $[0] !== getDocument || $[1] !== node ? (t1 = (insertPosition, name) => {
    const doc = getDocument(node.id), patches = getArrayInsertPatches(node, name, insertPosition);
    doc.patch(patches);
  }, $[0] = getDocument, $[1] = node, $[2] = t1) : t1 = $[2];
  const onAddUnion = t1;
  if (!parent)
    return null;
  const t2 = direction === "horizontal" ? "row" : "column", t3 = direction === "horizontal" ? "left" : "top";
  let t4;
  $[3] !== element || $[4] !== hoverAreaExtent || $[5] !== onAddUnion || $[6] !== parent || $[7] !== t3 ? (t4 = /* @__PURE__ */ jsx(HoverArea, { element, hoverAreaExtent, node: parent, onAddUnion, position: t3 }), $[3] = element, $[4] = hoverAreaExtent, $[5] = onAddUnion, $[6] = parent, $[7] = t3, $[8] = t4) : t4 = $[8];
  const t5 = direction === "horizontal" ? "right" : "bottom";
  let t6;
  $[9] !== element || $[10] !== hoverAreaExtent || $[11] !== onAddUnion || $[12] !== parent || $[13] !== t5 ? (t6 = /* @__PURE__ */ jsx(HoverArea, { element, hoverAreaExtent, node: parent, onAddUnion, position: t5 }), $[9] = element, $[10] = hoverAreaExtent, $[11] = onAddUnion, $[12] = parent, $[13] = t5, $[14] = t6) : t6 = $[14];
  let t7;
  return $[15] !== t2 || $[16] !== t4 || $[17] !== t6 ? (t7 = /* @__PURE__ */ jsxs(Flex, { height: "fill", width: "fill", direction: t2, justify: "space-between", children: [
    t4,
    t6
  ] }), $[15] = t2, $[16] = t4, $[17] = t6, $[18] = t7) : t7 = $[18], t7;
};
function _temp(visible) {
  return !visible;
}
function defineOverlayComponent(component, props) {
  return {
    component,
    props
  };
}
function defineOverlayComponents(resolver) {
  return resolver;
}
export {
  PointerEvents,
  UnionInsertMenuOverlay,
  defineOverlayComponent,
  defineOverlayComponents
};
//# sourceMappingURL=index.js.map