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

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

{"version":3,"file":"index.cjs","sources":["../../src/overlay-components/components/UnionInsertMenuOverlay.tsx","../../src/overlay-components/defineOverlayComponents.ts","../../src/overlay-components/defineOverlayComponent.ts"],"sourcesContent":["import type {SchemaNode, SchemaUnionNode} from '@repo/visual-editing-helpers'\nimport {AddIcon} from '@sanity/icons'\nimport type {SchemaType} from '@sanity/types'\nimport {Button, Flex} from '@sanity/ui'\nimport {\n  useCallback,\n  useRef,\n  useState,\n  type FunctionComponent,\n  type HTMLProps,\n  type MouseEvent,\n} from 'react'\nimport {styled} from 'styled-components'\nimport {useDocuments} from '../../react/useDocuments'\nimport type {ElementNode, OverlayComponent} from '../../types'\nimport {getArrayInsertPatches} from '../../util/mutations'\nimport {InsertMenuPopover} from './InsertMenu'\n\nconst AddButton = styled(Button)`\n  position: relative;\n  transform: var(--add-button-position);\n\n  --add-button-position: translateY(0);\n  [data-position='top'] & {\n    --add-button-position: translateY(-50%);\n  }\n  [data-position='right'] & {\n    --add-button-position: translateX(50%);\n  }\n  [data-position='bottom'] & {\n    --add-button-position: translateY(50%);\n  }\n  [data-position='left'] & {\n    --add-button-position: translateX(-50%);\n  }\n`\nconst HoverAreaRoot = styled(Flex)`\n  pointer-events: all;\n  height: var(--hover-area-height);\n  width: var(--hover-area-width);\n\n  --hover-area-height: 100%;\n  --hover-area-width: 100%;\n  &[data-position='top'],\n  &[data-position='bottom'] {\n    --hover-area-height: 48px;\n  }\n  &[data-position='right'],\n  &[data-position='left'] {\n    --hover-area-width: 48px;\n  }\n`\n\nconst HoverArea: FunctionComponent<{\n  element: ElementNode\n  hoverAreaExtent: HTMLProps<HTMLDivElement>['height' | 'width']\n  node: SchemaUnionNode\n  onAddUnion: (insertPosition: 'before' | 'after', name: string) => void\n  position: 'top' | 'right' | 'bottom' | 'left'\n}> = (props) => {\n  const {element, hoverAreaExtent, node, onAddUnion, position} = props\n  const [showButton, setShowButton] = useState(false)\n  const onEnter = useCallback(() => {\n    setShowButton(true)\n  }, [])\n  const onLeave = useCallback(() => {\n    setShowButton(false)\n  }, [])\n  const ref = useRef<HTMLDivElement | null>(null)\n\n  // This function clones and dispatches MouseEvents so that they can be handled\n  // by the underlying element. This is useful because we want to handle hover\n  // events on the overlay element to display the add button, but let the\n  // underlying element handle click events, drag and drop, etc.\n  const relayEventToElement = useCallback(\n    (event: MouseEvent<HTMLDivElement>) => {\n      if (event.target === ref.current) {\n        const newEvent = new MouseEvent(event.type, {\n          ...event.nativeEvent,\n          bubbles: true,\n          cancelable: true,\n        })\n        element.dispatchEvent(newEvent)\n      }\n    },\n    [element],\n  )\n\n  // The element that the popover containing the InsertMenu will be positioned\n  // relative to (in this case, the AddButton).\n  const [popoverReferenceElement, setPopoverReferenceElement] = useState<HTMLElement | null>(null)\n\n  const [menuVisible, setMenuVisible] = useState(false)\n\n  const dismissPortal = useCallback(() => {\n    setMenuVisible(false)\n    setShowButton(false)\n  }, [])\n\n  const onSelect = useCallback(\n    (schemaType: SchemaType) => {\n      setMenuVisible(false)\n      const insertPosition = position === 'top' || position === 'left' ? 'before' : 'after'\n      onAddUnion(insertPosition, schemaType.name)\n    },\n    [onAddUnion, position],\n  )\n\n  const align = position === 'top' ? 'flex-start' : position === 'bottom' ? 'flex-end' : 'center'\n  const justify = position === 'left' ? 'flex-start' : position === 'right' ? 'flex-end' : 'center'\n  const blockDirection = position === 'top' || position === 'bottom' ? 'height' : 'width'\n\n  return (\n    <HoverAreaRoot\n      align={align}\n      data-position={position}\n      data-sanity-overlay-element\n      justify={justify}\n      onClick={relayEventToElement}\n      onContextMenu={relayEventToElement}\n      onMouseDown={relayEventToElement}\n      onMouseEnter={onEnter}\n      onMouseLeave={onLeave}\n      onMouseUp={relayEventToElement}\n      ref={ref}\n      style={{\n        [blockDirection]: hoverAreaExtent,\n      }}\n    >\n      {(showButton || menuVisible) && (\n        <AddButton\n          ref={setPopoverReferenceElement}\n          icon={AddIcon}\n          mode={'ghost'}\n          onClick={() => setMenuVisible((visible) => !visible)}\n          radius={'full'}\n          selected={menuVisible}\n        />\n      )}\n      {menuVisible && popoverReferenceElement && (\n        <InsertMenuPopover\n          node={node}\n          onDismiss={dismissPortal}\n          referenceElement={popoverReferenceElement}\n          onSelect={onSelect}\n        />\n      )}\n    </HoverAreaRoot>\n  )\n}\n\nexport const UnionInsertMenuOverlay: OverlayComponent<\n  {\n    direction?: 'horizontal' | 'vertical'\n    hoverAreaExtent?: HTMLProps<HTMLDivElement>['height' | 'width']\n  },\n  SchemaUnionNode<SchemaNode>\n> = (props) => {\n  const {direction = 'vertical', element, hoverAreaExtent, node, parent} = props\n\n  const {getDocument} = useDocuments()\n\n  const onAddUnion = useCallback(\n    (insertPosition: 'before' | 'after', name: string) => {\n      const doc = getDocument(node.id)\n      const patches = getArrayInsertPatches(node, name, insertPosition)\n      doc.patch(patches)\n    },\n    [getDocument, node],\n  )\n\n  if (!parent) return null\n\n  return (\n    <Flex\n      height=\"fill\"\n      width=\"fill\"\n      direction={direction === 'horizontal' ? 'row' : 'column'}\n      justify=\"space-between\"\n    >\n      <HoverArea\n        element={element}\n        hoverAreaExtent={hoverAreaExtent}\n        node={parent}\n        onAddUnion={onAddUnion}\n        position={direction === 'horizontal' ? 'left' : 'top'}\n      />\n      <HoverArea\n        element={element}\n        hoverAreaExtent={hoverAreaExtent}\n        node={parent}\n        onAddUnion={onAddUnion}\n        position={direction === 'horizontal' ? 'right' : 'bottom'}\n      />\n    </Flex>\n  )\n}\n\nexport default UnionInsertMenuOverlay\n","import type {OverlayComponent, OverlayComponentResolver} from '../types'\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function defineOverlayComponents<T extends OverlayComponent>(\n  resolver: OverlayComponentResolver<T>,\n): typeof resolver {\n  return resolver\n}\n","import type {ComponentProps} from 'react'\nimport type {OverlayComponent, OverlayComponentProps} from '../types'\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function defineOverlayComponent<T extends OverlayComponent<Record<string, unknown>, any>>(\n  component: T,\n  props?: Omit<ComponentProps<T>, keyof OverlayComponentProps>,\n): {component: T; props: typeof props} {\n  return {\n    component: component,\n    props: props,\n  }\n}\n"],"names":["Object","defineProperty","exports","value","PointerEvents","require","jsxRuntime","reactCompilerRuntime","React","mutations","AddButton","styled","Button","HoverAreaRoot","Flex","HoverArea","props","$","_c","element","hoverAreaExtent","node","onAddUnion","position","showButton","setShowButton","useState","t0","Symbol","for","onEnter","t1","onLeave","ref","useRef","t2","event","target","current","newEvent","MouseEvent","type","nativeEvent","bubbles","cancelable","dispatchEvent","relayEventToElement","popoverReferenceElement","setPopoverReferenceElement","menuVisible","setMenuVisible","t3","dismissPortal","t4","schemaType","name","onSelect","align","justify","blockDirection","t5","t6","t7","t8","AddIcon","mode","onClick","_temp","radius","jsx","InsertMenuPopover","jsxs","style","visible","P","UnionInsertMenuOverlay","direction","parent","undefined","getDocument","useDocuments","insertPosition","doc","id","patches","getArrayInsertPatches","patch","height","width","defineOverlayComponent","component","defineOverlayComponents","resolver"],"mappings":"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"}