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

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

"use strict";
Object.defineProperty(exports, "__esModule", { value: !0 });
var PointerEvents = require("../_chunks-cjs/PointerEvents.cjs"), jsxRuntime = require("react/jsx-runtime"), reactCompilerRuntime = require("react-compiler-runtime"), icons = require("@sanity/icons"), _visualEditing = require("@sanity/ui/_visual-editing"), react = require("react"), styledComponents = require("styled-components"), mutations = require("../_chunks-cjs/mutations.cjs");
const AddButton = styledComponents.styled(_visualEditing.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 = styledComponents.styled(_visualEditing.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 $ = reactCompilerRuntime.c(28), {
    element,
    hoverAreaExtent,
    node,
    onAddUnion,
    position
  } = props, [showButton, setShowButton] = react.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 = react.useRef(null), sendTelemetry = PointerEvents.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] = react.useState(null), [menuVisible, setMenuVisible] = react.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__ */ jsxRuntime.jsx(AddButton, { ref: setPopoverReferenceElement, icon: icons.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__ */ jsxRuntime.jsx(PointerEvents.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__ */ jsxRuntime.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 $ = reactCompilerRuntime.c(19), {
    direction: t0,
    element,
    hoverAreaExtent,
    node,
    parent
  } = props, direction = t0 === void 0 ? "vertical" : t0, {
    getDocument
  } = mutations.useDocuments();
  let t1;
  $[0] !== getDocument || $[1] !== node ? (t1 = (insertPosition, name) => {
    const doc = getDocument(node.id), patches = mutations.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(_visualEditing.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;
}
exports.PointerEvents = PointerEvents.PointerEvents;
exports.UnionInsertMenuOverlay = UnionInsertMenuOverlay;
exports.defineOverlayComponent = defineOverlayComponent;
exports.defineOverlayComponents = defineOverlayComponents;
//# sourceMappingURL=index.cjs.map