@sanity/visual-editing/dist/_chunks-es/PointerEvents.js

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

import { createContext, useContext } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { c } from "react-compiler-runtime";
import { InsertMenu as InsertMenu$1 } from "@sanity/insert-menu";
import { Portal, Popover } from "@sanity/ui/_visual-editing";
import { css, styled } from "styled-components";
import { CubeIcon, StringIcon, NumberIcon, CheckmarkCircleIcon, BlockContentIcon, ThListIcon, ImageIcon } from "@sanity/icons";
function getNodeIcon(option) {
  if (!option) return /* @__PURE__ */ jsx(CubeIcon, {});
  if (option.type === "string")
    return /* @__PURE__ */ jsx(StringIcon, {});
  if (option.type === "number")
    return /* @__PURE__ */ jsx(NumberIcon, {});
  const {
    value: node
  } = option;
  if ("icon" in option && option.icon)
    return /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: {
      __html: option.icon
    } });
  const {
    type
  } = node;
  if (type === "string")
    return /* @__PURE__ */ jsx(StringIcon, {});
  if (type === "boolean")
    return /* @__PURE__ */ jsx(CheckmarkCircleIcon, {});
  if (type === "number")
    return /* @__PURE__ */ jsx(NumberIcon, {});
  if (type === "array" || type === "union")
    return (Array.isArray(node.of) ? node.of : [node.of]).some((n) => "name" in n && n.name === "block") ? /* @__PURE__ */ jsx(BlockContentIcon, {}) : /* @__PURE__ */ jsx(ThListIcon, {});
  if (type === "object") {
    if (option.name === "image")
      return /* @__PURE__ */ jsx(ImageIcon, {});
    if (option.name === "block")
      return /* @__PURE__ */ jsx(StringIcon, {});
  }
  return /* @__PURE__ */ jsx(CubeIcon, {});
}
const scrollBlockStyles = css`
  overflow-y: scroll;
  overscroll-behavior: contain;
  -ms-overflow-style: none;
  scrollbar-width: none;

  &:before {
    content: '';
    display: block;
    height: calc(100% + 1px);
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
  }
`, PortalContainer = styled.div`
  height: 100%;
  inset: 0;
  pointer-events: all;
  position: fixed;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  ${(props) => props.$blockScroll && scrollBlockStyles}
`, PortalBackground = styled.div`
  background: transparent;
  height: 100%;
  inset: 0;
  position: absolute;
  width: 100%;
`, PopoverPortal = (props) => {
  const $ = c(2);
  let t0;
  return $[0] !== props ? (t0 = /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(PopoverBackground, { ...props }) }), $[0] = props, $[1] = t0) : t0 = $[1], t0;
}, PopoverBackground = (props) => {
  const $ = c(7), {
    children,
    onDismiss,
    setBoundaryElement,
    blockScroll: t0
  } = props, blockScroll = t0 === void 0 ? !0 : t0, handleClick = _temp$1;
  let t1;
  $[0] !== onDismiss ? (t1 = /* @__PURE__ */ jsx(PortalBackground, { onMouseDownCapture: () => {
    onDismiss?.();
  } }), $[0] = onDismiss, $[1] = t1) : t1 = $[1];
  let t2;
  return $[2] !== blockScroll || $[3] !== children || $[4] !== setBoundaryElement || $[5] !== t1 ? (t2 = /* @__PURE__ */ jsxs(PortalContainer, { "data-sanity-overlay-element": !0, ref: setBoundaryElement, onClick: handleClick, $blockScroll: blockScroll, children: [
    t1,
    children
  ] }), $[2] = blockScroll, $[3] = children, $[4] = setBoundaryElement, $[5] = t1, $[6] = t2) : t2 = $[6], t2;
};
function _temp$1(event) {
  event.stopPropagation();
}
function defineEvent(options) {
  return {
    type: "log",
    name: options.name,
    version: options.version,
    description: options.description,
    maxSampleRate: options.maxSampleRate,
    schema: void 0
  };
}
const events = {
  "Visual Editing Drag Sequence Completed": defineEvent({
    name: "Visual Editing Drag Sequence Completed",
    description: "An array is successfully reordered using drag and drop.",
    version: 1
  }),
  "Visual Editing Drag Minimap Enabled": defineEvent({
    name: "Visual Editing Drag Minimap Enabled",
    description: "The zoomed-out minimap view is enabled during a drag sequence.",
    version: 1
  }),
  "Visual Editing Context Menu Item Removed": defineEvent({
    name: "Visual Editing Context Menu Item Removed",
    description: "An item is removed using the Context Menu.",
    version: 1
  }),
  "Visual Editing Context Menu Item Duplicated": defineEvent({
    name: "Visual Editing Context Menu Item Duplicated",
    description: "An item is duplicated using the Context Menu.",
    version: 1
  }),
  "Visual Editing Context Menu Item Moved": defineEvent({
    name: "Visual Editing Context Menu Item Moved",
    description: "An item is moved using the Context Menu.",
    version: 1
  }),
  "Visual Editing Context Menu Item Inserted": defineEvent({
    name: "Visual Editing Context Menu Item Inserted",
    description: "An item is inserted using the Context Menu.",
    version: 1
  }),
  "Visual Editing Insert Menu Item Inserted": defineEvent({
    name: "Visual Editing Insert Menu Item Inserted",
    description: "An item is inserted using the Insert Menu.",
    version: 1
  }),
  "Visual Editing Overlay Clicked": defineEvent({
    name: "Visual Editing Overlay Clicked",
    description: "An Overlay is clicked.",
    version: 1
  })
}, TelemetryContext = createContext(void 0);
function useTelemetry() {
  const context = useContext(TelemetryContext);
  if (!context)
    throw new Error("Telemetry context is missing");
  return context;
}
const labels = {
  "insert-menu.filter.all-items": "All",
  "insert-menu.search.no-results": "No results",
  "insert-menu.search.placeholder": "Filter types\u2026",
  "insert-menu.toggle-grid-view.tooltip": "Toggle grid view",
  "insert-menu.toggle-list-view.tooltip": "Toggle list view"
}, InsertMenu = (props) => {
  const $ = c(11), {
    node,
    onSelect
  } = props;
  let t0;
  $[0] !== node.options?.insertMenu ? (t0 = node.options?.insertMenu || {}, $[0] = node.options?.insertMenu, $[1] = t0) : t0 = $[1];
  const insertMenuOptions = t0;
  let t1;
  $[2] !== insertMenuOptions.views ? (t1 = insertMenuOptions.views?.map(_temp), $[2] = insertMenuOptions.views, $[3] = t1) : t1 = $[3];
  const views = t1;
  let t2;
  $[4] !== node.of ? (t2 = node.of.map(_temp2), $[4] = node.of, $[5] = t2) : t2 = $[5];
  let t3;
  return $[6] !== insertMenuOptions || $[7] !== onSelect || $[8] !== t2 || $[9] !== views ? (t3 = /* @__PURE__ */ jsx(InsertMenu$1, { ...insertMenuOptions, labels, schemaTypes: t2, onSelect, views }), $[6] = insertMenuOptions, $[7] = onSelect, $[8] = t2, $[9] = views, $[10] = t3) : t3 = $[10], t3;
}, InsertMenuPopover = (props) => {
  const $ = c(11), {
    node,
    onDismiss,
    onSelect,
    referenceElement
  } = props;
  let t0;
  $[0] !== node || $[1] !== onSelect ? (t0 = /* @__PURE__ */ jsx(InsertMenu, { node, onSelect }), $[0] = node, $[1] = onSelect, $[2] = t0) : t0 = $[2];
  const popoverContent = t0, width = (node.options?.insertMenu || {}).views?.some(_temp3) ? 0 : void 0;
  let t1;
  $[3] === Symbol.for("react.memo_cache_sentinel") ? (t1 = ["bottom"], $[3] = t1) : t1 = $[3];
  let t2;
  $[4] !== popoverContent || $[5] !== referenceElement || $[6] !== width ? (t2 = /* @__PURE__ */ jsx(Popover, { animate: !0, constrainSize: !0, content: popoverContent, fallbackPlacements: t1, open: !0, placement: "top", preventOverflow: !0, referenceElement, width }), $[4] = popoverContent, $[5] = referenceElement, $[6] = width, $[7] = t2) : t2 = $[7];
  let t3;
  return $[8] !== onDismiss || $[9] !== t2 ? (t3 = /* @__PURE__ */ jsx(PopoverPortal, { onDismiss, children: t2 }), $[8] = onDismiss, $[9] = t2, $[10] = t3) : t3 = $[10], t3;
};
function _temp(view) {
  return view.name === "grid" ? {
    ...view,
    previewImageUrl: (name) => view.previewImageUrls?.[name]
  } : view;
}
function _temp2(type) {
  return {
    ...type,
    icon: getNodeIcon(type)
  };
}
function _temp3(view) {
  return view.name === "grid";
}
const PointerEvents = (t0) => {
  const $ = c(10);
  let children, rest, style;
  $[0] !== t0 ? ({
    children,
    style,
    ...rest
  } = t0, $[0] = t0, $[1] = children, $[2] = rest, $[3] = style) : (children = $[1], rest = $[2], style = $[3]);
  let t1;
  $[4] !== style ? (t1 = {
    ...style,
    pointerEvents: "all"
  }, $[4] = style, $[5] = t1) : t1 = $[5];
  let t2;
  return $[6] !== children || $[7] !== rest || $[8] !== t1 ? (t2 = /* @__PURE__ */ jsx("div", { style: t1, "data-sanity-overlay-element": !0, ...rest, children }), $[6] = children, $[7] = rest, $[8] = t1, $[9] = t2) : t2 = $[9], t2;
};
export {
  InsertMenu,
  InsertMenuPopover,
  PointerEvents,
  PopoverBackground,
  PopoverPortal,
  TelemetryContext,
  events,
  getNodeIcon,
  useTelemetry
};
//# sourceMappingURL=PointerEvents.js.map