@grafana/ui/dist/esm/components/ContextMenu/WithContextMenu.mjs.map

Grafana Components Library

{"version":3,"file":"WithContextMenu.mjs","sources":["../../../../src/components/ContextMenu/WithContextMenu.tsx"],"sourcesContent":["import { useState, type JSX } from 'react';\nimport * as React from 'react';\n\nimport { ContextMenu } from '../ContextMenu/ContextMenu';\n\n/**\n * Anything we can resolve into a viewport `{ x, y }` position for the context menu:\n *   - A React or native pointer event → use `pageX`/`pageY` (legacy, click-driven path)\n *   - A DOM/SVG element              → use the element's bounding-rect center\n *                                      (keyboard-driven path: trigger.focus()+Enter)\n *   - An explicit `{ x, y }` literal → use it directly\n */\nexport type OpenMenuTrigger = React.MouseEvent | Element | { x: number; y: number };\n\nexport interface WithContextMenuProps {\n  /** Menu item trigger that accepts openMenu prop */\n  children: (props: { openMenu: (trigger: OpenMenuTrigger) => void }) => JSX.Element;\n  /** A function that returns an array of menu items */\n  renderMenuItems: () => React.ReactNode;\n  /** On menu open focus the first element */\n  focusOnOpen?: boolean;\n}\n\n/**\n * Resolve any supported `OpenMenuTrigger` to viewport-relative `{ x, y }`\n * coordinates that `<ContextMenu>` can position against.\n *\n * For elements we use the bounding-rect center so the menu appears\n * anchored to the focused control (matters for keyboard activation\n * where there is no pointer position to read).\n */\nfunction resolveTriggerPosition(trigger: OpenMenuTrigger): { x: number; y: number } {\n  // narrow the WithContextMenuProps type => trigger: Element\n  if (trigger instanceof Element) {\n    const rect = trigger.getBoundingClientRect();\n    return {\n      x: rect.left + rect.width / 2 + window.scrollX,\n      y: rect.top + rect.height / 2,\n    };\n  }\n\n  // trigger: MouseEvent\n  if ('pageX' in trigger && 'pageY' in trigger) {\n    return { x: trigger.pageX, y: trigger.pageY - window.scrollY };\n  }\n\n  // Manually defined coordinates\n  return { x: trigger.x, y: trigger.y };\n}\n\nexport const WithContextMenu = ({ children, renderMenuItems, focusOnOpen = true }: WithContextMenuProps) => {\n  const [isMenuOpen, setIsMenuOpen] = useState(false);\n  const [menuPosition, setMenuPosition] = useState({ x: 0, y: 0 });\n  return (\n    <>\n      {children({\n        openMenu: (trigger) => {\n          setIsMenuOpen(true);\n          setMenuPosition(resolveTriggerPosition(trigger));\n        },\n      })}\n\n      {isMenuOpen && (\n        <ContextMenu\n          onClose={() => setIsMenuOpen(false)}\n          x={menuPosition.x}\n          y={menuPosition.y}\n          renderMenuItems={renderMenuItems}\n          focusOnOpen={focusOnOpen}\n        />\n      )}\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;AA+BA,SAAS,uBAAuB,OAAA,EAAoD;AAElF,EAAA,IAAI,mBAAmB,OAAA,EAAS;AAC9B,IAAA,MAAM,IAAA,GAAO,QAAQ,qBAAA,EAAsB;AAC3C,IAAA,OAAO;AAAA,MACL,GAAG,IAAA,CAAK,IAAA,GAAO,IAAA,CAAK,KAAA,GAAQ,IAAI,MAAA,CAAO,OAAA;AAAA,MACvC,CAAA,EAAG,IAAA,CAAK,GAAA,GAAM,IAAA,CAAK,MAAA,GAAS;AAAA,KAC9B;AAAA,EACF;AAGA,EAAA,IAAI,OAAA,IAAW,OAAA,IAAW,OAAA,IAAW,OAAA,EAAS;AAC5C,IAAA,OAAO,EAAE,GAAG,OAAA,CAAQ,KAAA,EAAO,GAAG,OAAA,CAAQ,KAAA,GAAQ,OAAO,OAAA,EAAQ;AAAA,EAC/D;AAGA,EAAA,OAAO,EAAE,CAAA,EAAG,OAAA,CAAQ,CAAA,EAAG,CAAA,EAAG,QAAQ,CAAA,EAAE;AACtC;AAEO,MAAM,kBAAkB,CAAC,EAAE,UAAU,eAAA,EAAiB,WAAA,GAAc,MAAK,KAA4B;AAC1G,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,SAAS,KAAK,CAAA;AAClD,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAI,QAAA,CAAS,EAAE,CAAA,EAAG,CAAA,EAAG,CAAA,EAAG,CAAA,EAAG,CAAA;AAC/D,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,QAAA,CAAS;AAAA,MACR,QAAA,EAAU,CAAC,OAAA,KAAY;AACrB,QAAA,aAAA,CAAc,IAAI,CAAA;AAClB,QAAA,eAAA,CAAgB,sBAAA,CAAuB,OAAO,CAAC,CAAA;AAAA,MACjD;AAAA,KACD,CAAA;AAAA,IAEA,UAAA,oBACC,GAAA;AAAA,MAAC,WAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAS,MAAM,aAAA,CAAc,KAAK,CAAA;AAAA,QAClC,GAAG,YAAA,CAAa,CAAA;AAAA,QAChB,GAAG,YAAA,CAAa,CAAA;AAAA,QAChB,eAAA;AAAA,QACA;AAAA;AAAA;AACF,GAAA,EAEJ,CAAA;AAEJ;;;;"}