@xyo-network/react-node-renderer 2.64.3 → 2.64.5

package/dist/node/components/module/graph/NodeHover.cjs

@@ -23,6 +23,7 @@ __export(NodeHover_exports, {
   ModuleGraphNodeHover: () => ModuleGraphNodeHover
 });
 module.exports = __toCommonJS(NodeHover_exports);
+var import_react_flexbox2 = require("@xylabs/react-flexbox");
 var import_react = require("react");
 
 // src/components/module/graph/Popper.tsx
@@ -31,13 +32,13 @@ var import_react_flexbox = require("@xylabs/react-flexbox");
 var import_react_identicon = require("@xylabs/react-identicon");
 var import_jsx_runtime = require("react/jsx-runtime");
 var ModuleHoverPopper = ({ address, element, name, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Popper, { anchorEl: element, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_flexbox.FlexCol, { gap: 2, p: 2, paper: true, sx: { backgroundColor: (theme) => (0, import_material.alpha)(theme.palette.background.paper, 0.95) }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: element ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Popper, { anchorEl: element, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_flexbox.FlexCol, { gap: 2, p: 2, paper: true, sx: { backgroundColor: (theme) => (0, import_material.alpha)(theme.palette.background.paper, 0.95) }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_flexbox.FlexRow, { gap: 2, children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_identicon.Identicon, { value: address, size: 24 }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { children: name })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Chip, { label: address, color: "primary" })
-  ] }) });
+  ] }) }) : null });
 };
 
 // src/components/module/graph/NodeHover.tsx
@@ -47,10 +48,12 @@ var ModuleGraphNodeHover = ({ node }) => {
   const [boundingBox, setBoundingBox] = (0, import_react.useState)(node == null ? void 0 : node.renderedBoundingBox());
   const ref = (0, import_react.useRef)(null);
   const [currentEl, setCurrentEl] = (0, import_react.useState)(null);
-  (0, import_react.useLayoutEffect)(() => {
-    if (node && ref.current) {
+  (0, import_react.useEffect)(() => {
+    setCurrentEl(null);
+  }, [node]);
+  (0, import_react.useEffect)(() => {
+    if (node) {
       setBoundingBox(node.renderedBoundingBox());
-      setCurrentEl(ref.current);
     }
     const listener = () => {
       setBoundingBox(node == null ? void 0 : node.renderedBoundingBox());
@@ -60,12 +63,16 @@ var ModuleGraphNodeHover = ({ node }) => {
       node == null ? void 0 : node.off("position", void 0, listener);
     };
   }, [node]);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: node ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+  (0, import_react.useLayoutEffect)(() => {
+    setCurrentEl(ref.current);
+  }, [boundingBox]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      "div",
+      import_react_flexbox2.FlexCol,
       {
         ref,
-        style: {
+        sx: {
+          // For easier debugging of the 'ghost' element that matches the hovered cytoscape node
           // backgroundColor: '#fff',
           // opacity: 0.25,
           cursor: "pointer",
@@ -78,8 +85,8 @@ var ModuleGraphNodeHover = ({ node }) => {
         }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ModuleHoverPopper, { address, element: currentEl, name, placement: "top", open: true })
-  ] }) : null });
+    node ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ModuleHoverPopper, { address, element: currentEl, name, placement: "top", open: true, sx: { zIndex: 2 } }) }) : null
+  ] });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/node/components/module/graph/NodeHover.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/module/graph/NodeHover.tsx","../../../../../src/components/module/graph/Popper.tsx"],"sourcesContent":["import { NodeSingular } from 'cytoscape'\nimport { useLayoutEffect, useRef, useState } from 'react'\n\nimport { ModuleHoverPopper } from './Popper'\n\nexport interface ModuleHoverProps {\n  node?: NodeSingular\n}\n\nexport const ModuleGraphNodeHover: React.FC<ModuleHoverProps> = ({ node }) => {\n  const { address, name } = node?.data() ?? {}\n  const [boundingBox, setBoundingBox] = useState(node?.renderedBoundingBox())\n  const ref = useRef<HTMLDivElement>(null)\n  const [currentEl, setCurrentEl] = useState<HTMLDivElement | null>(null)\n\n  useLayoutEffect(() => {\n    if (node && ref.current) {\n      setBoundingBox(node.renderedBoundingBox())\n      setCurrentEl(ref.current)\n    }\n\n    const listener = () => {\n      setBoundingBox(node?.renderedBoundingBox())\n    }\n\n    node?.on('position', listener)\n\n    return () => {\n      node?.off('position', undefined, listener)\n    }\n  }, [node])\n\n  return (\n    <>\n      {node ? (\n        <>\n          <div\n            ref={ref}\n            style={{\n              // backgroundColor: '#fff',\n              // opacity: 0.25,\n              cursor: 'pointer',\n              height: boundingBox?.h,\n              left: boundingBox?.x1,\n              pointerEvents: 'none',\n              position: 'absolute',\n              top: boundingBox?.y1,\n              width: boundingBox?.w,\n            }}\n          ></div>\n          <ModuleHoverPopper address={address} element={currentEl} name={name} placement={'top'} open />\n        </>\n      ) : null}\n    </>\n  )\n}\n","import { alpha, Chip, Popper, PopperProps, Theme, Typography } from '@mui/material'\nimport { FlexCol, FlexRow } from '@xylabs/react-flexbox'\nimport { Identicon } from '@xylabs/react-identicon'\n\nexport interface ModuleHoverPopperProps extends PopperProps {\n  address?: string\n  element?: HTMLElement | null\n  name?: string\n}\n\nexport const ModuleHoverPopper: React.FC<ModuleHoverPopperProps> = ({ address, element, name, ...props }) => {\n  return (\n    <Popper anchorEl={element} {...props}>\n      <FlexCol gap={2} p={2} paper sx={{ backgroundColor: (theme: Theme) => alpha(theme.palette.background.paper, 0.95) }}>\n        <FlexRow gap={2}>\n          <Identicon value={address} size={24} />\n          <Typography>{name}</Typography>\n        </FlexRow>\n        <Chip label={address} color={'primary'} />\n      </FlexCol>\n    </Popper>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAkD;;;ACDlD,sBAAoE;AACpE,2BAAiC;AACjC,6BAA0B;AAYlB;AAJD,IAAM,oBAAsD,CAAC,EAAE,SAAS,SAAS,MAAM,GAAG,MAAM,MAAM;AAC3G,SACE,4CAAC,0BAAO,UAAU,SAAU,GAAG,OAC7B,uDAAC,gCAAQ,KAAK,GAAG,GAAG,GAAG,OAAK,MAAC,IAAI,EAAE,iBAAiB,CAAC,cAAiB,uBAAM,MAAM,QAAQ,WAAW,OAAO,IAAI,EAAE,GAChH;AAAA,iDAAC,gCAAQ,KAAK,GACZ;AAAA,kDAAC,oCAAU,OAAO,SAAS,MAAM,IAAI;AAAA,MACrC,4CAAC,8BAAY,gBAAK;AAAA,OACpB;AAAA,IACA,4CAAC,wBAAK,OAAO,SAAS,OAAO,WAAW;AAAA,KAC1C,GACF;AAEJ;;;ADaQ,IAAAA,sBAAA;AA1BD,IAAM,uBAAmD,CAAC,EAAE,KAAK,MAAM;AAC5E,QAAM,EAAE,SAAS,KAAK,KAAI,6BAAM,WAAU,CAAC;AAC3C,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,6BAAM,qBAAqB;AAC1E,QAAM,UAAM,qBAAuB,IAAI;AACvC,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAgC,IAAI;AAEtE,oCAAgB,MAAM;AACpB,QAAI,QAAQ,IAAI,SAAS;AACvB,qBAAe,KAAK,oBAAoB,CAAC;AACzC,mBAAa,IAAI,OAAO;AAAA,IAC1B;AAEA,UAAM,WAAW,MAAM;AACrB,qBAAe,6BAAM,qBAAqB;AAAA,IAC5C;AAEA,iCAAM,GAAG,YAAY;AAErB,WAAO,MAAM;AACX,mCAAM,IAAI,YAAY,QAAW;AAAA,IACnC;AAAA,EACF,GAAG,CAAC,IAAI,CAAC;AAET,SACE,6EACG,iBACC,8EACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,OAAO;AAAA;AAAA;AAAA,UAGL,QAAQ;AAAA,UACR,QAAQ,2CAAa;AAAA,UACrB,MAAM,2CAAa;AAAA,UACnB,eAAe;AAAA,UACf,UAAU;AAAA,UACV,KAAK,2CAAa;AAAA,UAClB,OAAO,2CAAa;AAAA,QACtB;AAAA;AAAA,IACD;AAAA,IACD,6CAAC,qBAAkB,SAAkB,SAAS,WAAW,MAAY,WAAW,OAAO,MAAI,MAAC;AAAA,KAC9F,IACE,MACN;AAEJ;","names":["import_jsx_runtime"]}
+{"version":3,"sources":["../../../../../src/components/module/graph/NodeHover.tsx","../../../../../src/components/module/graph/Popper.tsx"],"sourcesContent":["import { PopperProps } from '@mui/material'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport { NodeSingular } from 'cytoscape'\nimport { useEffect, useLayoutEffect, useRef, useState } from 'react'\n\nimport { ModuleHoverPopper } from './Popper'\n\nexport interface ModuleHoverProps {\n  node?: NodeSingular\n}\n\nexport const ModuleGraphNodeHover: React.FC<ModuleHoverProps> = ({ node }) => {\n  const { address, name } = node?.data() ?? {}\n  const [boundingBox, setBoundingBox] = useState(node?.renderedBoundingBox())\n  const ref = useRef<HTMLDivElement>(null)\n  const [currentEl, setCurrentEl] = useState<PopperProps['anchorEl'] | null>(null)\n\n  // Ensure first render clears the previous element when node changes to avoid flicker\n  useEffect(() => {\n    setCurrentEl(null)\n  }, [node])\n\n  useEffect(() => {\n    if (node) {\n      setBoundingBox(node.renderedBoundingBox())\n    }\n\n    const listener = () => {\n      setBoundingBox(node?.renderedBoundingBox())\n    }\n\n    node?.on('position', listener)\n\n    return () => {\n      node?.off('position', undefined, listener)\n    }\n  }, [node])\n\n  // Once boundingBox state is set and applied to the layout, update the ref\n  useLayoutEffect(() => {\n    setCurrentEl(ref.current)\n  }, [boundingBox])\n\n  return (\n    <>\n      <FlexCol\n        ref={ref}\n        sx={{\n          // For easier debugging of the 'ghost' element that matches the hovered cytoscape node\n          // backgroundColor: '#fff',\n          // opacity: 0.25,\n          cursor: 'pointer',\n          height: boundingBox?.h,\n          left: boundingBox?.x1,\n          pointerEvents: 'none',\n          position: 'absolute',\n          top: boundingBox?.y1,\n          width: boundingBox?.w,\n        }}\n      />\n      {node ? (\n        <>\n          <ModuleHoverPopper address={address} element={currentEl} name={name} placement={'top'} open sx={{ zIndex: 2 }} />\n        </>\n      ) : null}\n    </>\n  )\n}\n","import { alpha, Chip, Popper, PopperProps, Theme, Typography } from '@mui/material'\nimport { FlexCol, FlexRow } from '@xylabs/react-flexbox'\nimport { Identicon } from '@xylabs/react-identicon'\n\nexport interface ModuleHoverPopperProps extends PopperProps {\n  address?: string\n  element?: PopperProps['anchorEl']\n  name?: string\n}\n\nexport const ModuleHoverPopper: React.FC<ModuleHoverPopperProps> = ({ address, element, name, ...props }) => {\n  return (\n    <>\n      {element ? (\n        <Popper anchorEl={element} {...props}>\n          <FlexCol gap={2} p={2} paper sx={{ backgroundColor: (theme: Theme) => alpha(theme.palette.background.paper, 0.95) }}>\n            <FlexRow gap={2}>\n              <Identicon value={address} size={24} />\n              <Typography>{name}</Typography>\n            </FlexRow>\n            <Chip label={address} color={'primary'} />\n          </FlexCol>\n        </Popper>\n      ) : null}\n    </>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,IAAAA,wBAAwB;AAExB,mBAA6D;;;ACH7D,sBAAoE;AACpE,2BAAiC;AACjC,6BAA0B;AAUtB;AAFG,IAAM,oBAAsD,CAAC,EAAE,SAAS,SAAS,MAAM,GAAG,MAAM,MAAM;AAC3G,SACE,2EACG,oBACC,4CAAC,0BAAO,UAAU,SAAU,GAAG,OAC7B,uDAAC,gCAAQ,KAAK,GAAG,GAAG,GAAG,OAAK,MAAC,IAAI,EAAE,iBAAiB,CAAC,cAAiB,uBAAM,MAAM,QAAQ,WAAW,OAAO,IAAI,EAAE,GAChH;AAAA,iDAAC,gCAAQ,KAAK,GACZ;AAAA,kDAAC,oCAAU,OAAO,SAAS,MAAM,IAAI;AAAA,MACrC,4CAAC,8BAAY,gBAAK;AAAA,OACpB;AAAA,IACA,4CAAC,wBAAK,OAAO,SAAS,OAAO,WAAW;AAAA,KAC1C,GACF,IACE,MACN;AAEJ;;;ADkBI,IAAAC,sBAAA;AAjCG,IAAM,uBAAmD,CAAC,EAAE,KAAK,MAAM;AAC5E,QAAM,EAAE,SAAS,KAAK,KAAI,6BAAM,WAAU,CAAC;AAC3C,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,6BAAM,qBAAqB;AAC1E,QAAM,UAAM,qBAAuB,IAAI;AACvC,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAyC,IAAI;AAG/E,8BAAU,MAAM;AACd,iBAAa,IAAI;AAAA,EACnB,GAAG,CAAC,IAAI,CAAC;AAET,8BAAU,MAAM;AACd,QAAI,MAAM;AACR,qBAAe,KAAK,oBAAoB,CAAC;AAAA,IAC3C;AAEA,UAAM,WAAW,MAAM;AACrB,qBAAe,6BAAM,qBAAqB;AAAA,IAC5C;AAEA,iCAAM,GAAG,YAAY;AAErB,WAAO,MAAM;AACX,mCAAM,IAAI,YAAY,QAAW;AAAA,IACnC;AAAA,EACF,GAAG,CAAC,IAAI,CAAC;AAGT,oCAAgB,MAAM;AACpB,iBAAa,IAAI,OAAO;AAAA,EAC1B,GAAG,CAAC,WAAW,CAAC;AAEhB,SACE,8EACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,IAAI;AAAA;AAAA;AAAA;AAAA,UAIF,QAAQ;AAAA,UACR,QAAQ,2CAAa;AAAA,UACrB,MAAM,2CAAa;AAAA,UACnB,eAAe;AAAA,UACf,UAAU;AAAA,UACV,KAAK,2CAAa;AAAA,UAClB,OAAO,2CAAa;AAAA,QACtB;AAAA;AAAA,IACF;AAAA,IACC,OACC,6EACE,uDAAC,qBAAkB,SAAkB,SAAS,WAAW,MAAY,WAAW,OAAO,MAAI,MAAC,IAAI,EAAE,QAAQ,EAAE,GAAG,GACjH,IACE;AAAA,KACN;AAEJ;","names":["import_react_flexbox","import_jsx_runtime"]}

package/dist/node/components/module/graph/NodeHover.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"NodeHover.d.ts","sourceRoot":"","sources":["../../../../../src/components/module/graph/NodeHover.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAKxC,MAAM,WAAW,gBAAgB;IAC/B,IAAI,CAAC,EAAE,YAAY,CAAA;CACpB;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA8C3D,CAAA"}
+{"version":3,"file":"NodeHover.d.ts","sourceRoot":"","sources":["../../../../../src/components/module/graph/NodeHover.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAKxC,MAAM,WAAW,gBAAgB;IAC/B,IAAI,CAAC,EAAE,YAAY,CAAA;CACpB;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAwD3D,CAAA"}

package/dist/node/components/module/graph/NodeHover.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"NodeHover.d.ts","sourceRoot":"","sources":["../../../../../src/components/module/graph/NodeHover.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAKxC,MAAM,WAAW,gBAAgB;IAC/B,IAAI,CAAC,EAAE,YAAY,CAAA;CACpB;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA8C3D,CAAA"}
+{"version":3,"file":"NodeHover.d.ts","sourceRoot":"","sources":["../../../../../src/components/module/graph/NodeHover.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAKxC,MAAM,WAAW,gBAAgB;IAC/B,IAAI,CAAC,EAAE,YAAY,CAAA;CACpB;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAwD3D,CAAA"}

package/dist/node/components/module/graph/NodeHover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NodeHover.d.ts","sourceRoot":"","sources":["../../../../../src/components/module/graph/NodeHover.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAKxC,MAAM,WAAW,gBAAgB;IAC/B,IAAI,CAAC,EAAE,YAAY,CAAA;CACpB;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA8C3D,CAAA"}
+{"version":3,"file":"NodeHover.d.ts","sourceRoot":"","sources":["../../../../../src/components/module/graph/NodeHover.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAKxC,MAAM,WAAW,gBAAgB;IAC/B,IAAI,CAAC,EAAE,YAAY,CAAA;CACpB;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAwD3D,CAAA"}

package/dist/node/components/module/graph/NodeHover.js

@@ -1,32 +1,35 @@
 // src/components/module/graph/NodeHover.tsx
-import { useLayoutEffect, useRef, useState } from "react";
+import { FlexCol as FlexCol2 } from "@xylabs/react-flexbox";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
 
 // src/components/module/graph/Popper.tsx
 import { alpha, Chip, Popper, Typography } from "@mui/material";
 import { FlexCol, FlexRow } from "@xylabs/react-flexbox";
 import { Identicon } from "@xylabs/react-identicon";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var ModuleHoverPopper = ({ address, element, name, ...props }) => {
-  return /* @__PURE__ */ jsx(Popper, { anchorEl: element, ...props, children: /* @__PURE__ */ jsxs(FlexCol, { gap: 2, p: 2, paper: true, sx: { backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.95) }, children: [
+  return /* @__PURE__ */ jsx(Fragment, { children: element ? /* @__PURE__ */ jsx(Popper, { anchorEl: element, ...props, children: /* @__PURE__ */ jsxs(FlexCol, { gap: 2, p: 2, paper: true, sx: { backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.95) }, children: [
     /* @__PURE__ */ jsxs(FlexRow, { gap: 2, children: [
       /* @__PURE__ */ jsx(Identicon, { value: address, size: 24 }),
       /* @__PURE__ */ jsx(Typography, { children: name })
     ] }),
     /* @__PURE__ */ jsx(Chip, { label: address, color: "primary" })
-  ] }) });
+  ] }) }) : null });
 };
 
 // src/components/module/graph/NodeHover.tsx
-import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var ModuleGraphNodeHover = ({ node }) => {
   const { address, name } = (node == null ? void 0 : node.data()) ?? {};
   const [boundingBox, setBoundingBox] = useState(node == null ? void 0 : node.renderedBoundingBox());
   const ref = useRef(null);
   const [currentEl, setCurrentEl] = useState(null);
-  useLayoutEffect(() => {
-    if (node && ref.current) {
+  useEffect(() => {
+    setCurrentEl(null);
+  }, [node]);
+  useEffect(() => {
+    if (node) {
       setBoundingBox(node.renderedBoundingBox());
-      setCurrentEl(ref.current);
     }
     const listener = () => {
       setBoundingBox(node == null ? void 0 : node.renderedBoundingBox());
@@ -36,12 +39,16 @@ var ModuleGraphNodeHover = ({ node }) => {
       node == null ? void 0 : node.off("position", void 0, listener);
     };
   }, [node]);
-  return /* @__PURE__ */ jsx2(Fragment, { children: node ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+  useLayoutEffect(() => {
+    setCurrentEl(ref.current);
+  }, [boundingBox]);
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
     /* @__PURE__ */ jsx2(
-      "div",
+      FlexCol2,
       {
         ref,
-        style: {
+        sx: {
+          // For easier debugging of the 'ghost' element that matches the hovered cytoscape node
           // backgroundColor: '#fff',
           // opacity: 0.25,
           cursor: "pointer",
@@ -54,8 +61,8 @@ var ModuleGraphNodeHover = ({ node }) => {
         }
       }
     ),
-    /* @__PURE__ */ jsx2(ModuleHoverPopper, { address, element: currentEl, name, placement: "top", open: true })
-  ] }) : null });
+    node ? /* @__PURE__ */ jsx2(Fragment2, { children: /* @__PURE__ */ jsx2(ModuleHoverPopper, { address, element: currentEl, name, placement: "top", open: true, sx: { zIndex: 2 } }) }) : null
+  ] });
 };
 export {
   ModuleGraphNodeHover

package/dist/node/components/module/graph/NodeHover.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/module/graph/NodeHover.tsx","../../../../../src/components/module/graph/Popper.tsx"],"sourcesContent":["import { NodeSingular } from 'cytoscape'\nimport { useLayoutEffect, useRef, useState } from 'react'\n\nimport { ModuleHoverPopper } from './Popper'\n\nexport interface ModuleHoverProps {\n  node?: NodeSingular\n}\n\nexport const ModuleGraphNodeHover: React.FC<ModuleHoverProps> = ({ node }) => {\n  const { address, name } = node?.data() ?? {}\n  const [boundingBox, setBoundingBox] = useState(node?.renderedBoundingBox())\n  const ref = useRef<HTMLDivElement>(null)\n  const [currentEl, setCurrentEl] = useState<HTMLDivElement | null>(null)\n\n  useLayoutEffect(() => {\n    if (node && ref.current) {\n      setBoundingBox(node.renderedBoundingBox())\n      setCurrentEl(ref.current)\n    }\n\n    const listener = () => {\n      setBoundingBox(node?.renderedBoundingBox())\n    }\n\n    node?.on('position', listener)\n\n    return () => {\n      node?.off('position', undefined, listener)\n    }\n  }, [node])\n\n  return (\n    <>\n      {node ? (\n        <>\n          <div\n            ref={ref}\n            style={{\n              // backgroundColor: '#fff',\n              // opacity: 0.25,\n              cursor: 'pointer',\n              height: boundingBox?.h,\n              left: boundingBox?.x1,\n              pointerEvents: 'none',\n              position: 'absolute',\n              top: boundingBox?.y1,\n              width: boundingBox?.w,\n            }}\n          ></div>\n          <ModuleHoverPopper address={address} element={currentEl} name={name} placement={'top'} open />\n        </>\n      ) : null}\n    </>\n  )\n}\n","import { alpha, Chip, Popper, PopperProps, Theme, Typography } from '@mui/material'\nimport { FlexCol, FlexRow } from '@xylabs/react-flexbox'\nimport { Identicon } from '@xylabs/react-identicon'\n\nexport interface ModuleHoverPopperProps extends PopperProps {\n  address?: string\n  element?: HTMLElement | null\n  name?: string\n}\n\nexport const ModuleHoverPopper: React.FC<ModuleHoverPopperProps> = ({ address, element, name, ...props }) => {\n  return (\n    <Popper anchorEl={element} {...props}>\n      <FlexCol gap={2} p={2} paper sx={{ backgroundColor: (theme: Theme) => alpha(theme.palette.background.paper, 0.95) }}>\n        <FlexRow gap={2}>\n          <Identicon value={address} size={24} />\n          <Typography>{name}</Typography>\n        </FlexRow>\n        <Chip label={address} color={'primary'} />\n      </FlexCol>\n    </Popper>\n  )\n}\n"],"mappings":";AACA,SAAS,iBAAiB,QAAQ,gBAAgB;;;ACDlD,SAAS,OAAO,MAAM,QAA4B,kBAAkB;AACpE,SAAS,SAAS,eAAe;AACjC,SAAS,iBAAiB;AAYlB,SACE,KADF;AAJD,IAAM,oBAAsD,CAAC,EAAE,SAAS,SAAS,MAAM,GAAG,MAAM,MAAM;AAC3G,SACE,oBAAC,UAAO,UAAU,SAAU,GAAG,OAC7B,+BAAC,WAAQ,KAAK,GAAG,GAAG,GAAG,OAAK,MAAC,IAAI,EAAE,iBAAiB,CAAC,UAAiB,MAAM,MAAM,QAAQ,WAAW,OAAO,IAAI,EAAE,GAChH;AAAA,yBAAC,WAAQ,KAAK,GACZ;AAAA,0BAAC,aAAU,OAAO,SAAS,MAAM,IAAI;AAAA,MACrC,oBAAC,cAAY,gBAAK;AAAA,OACpB;AAAA,IACA,oBAAC,QAAK,OAAO,SAAS,OAAO,WAAW;AAAA,KAC1C,GACF;AAEJ;;;ADaQ,mBACE,OAAAA,MADF,QAAAC,aAAA;AA1BD,IAAM,uBAAmD,CAAC,EAAE,KAAK,MAAM;AAC5E,QAAM,EAAE,SAAS,KAAK,KAAI,6BAAM,WAAU,CAAC;AAC3C,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,6BAAM,qBAAqB;AAC1E,QAAM,MAAM,OAAuB,IAAI;AACvC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAgC,IAAI;AAEtE,kBAAgB,MAAM;AACpB,QAAI,QAAQ,IAAI,SAAS;AACvB,qBAAe,KAAK,oBAAoB,CAAC;AACzC,mBAAa,IAAI,OAAO;AAAA,IAC1B;AAEA,UAAM,WAAW,MAAM;AACrB,qBAAe,6BAAM,qBAAqB;AAAA,IAC5C;AAEA,iCAAM,GAAG,YAAY;AAErB,WAAO,MAAM;AACX,mCAAM,IAAI,YAAY,QAAW;AAAA,IACnC;AAAA,EACF,GAAG,CAAC,IAAI,CAAC;AAET,SACE,gBAAAD,KAAA,YACG,iBACC,gBAAAC,MAAA,YACE;AAAA,oBAAAD;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,OAAO;AAAA;AAAA;AAAA,UAGL,QAAQ;AAAA,UACR,QAAQ,2CAAa;AAAA,UACrB,MAAM,2CAAa;AAAA,UACnB,eAAe;AAAA,UACf,UAAU;AAAA,UACV,KAAK,2CAAa;AAAA,UAClB,OAAO,2CAAa;AAAA,QACtB;AAAA;AAAA,IACD;AAAA,IACD,gBAAAA,KAAC,qBAAkB,SAAkB,SAAS,WAAW,MAAY,WAAW,OAAO,MAAI,MAAC;AAAA,KAC9F,IACE,MACN;AAEJ;","names":["jsx","jsxs"]}
+{"version":3,"sources":["../../../../../src/components/module/graph/NodeHover.tsx","../../../../../src/components/module/graph/Popper.tsx"],"sourcesContent":["import { PopperProps } from '@mui/material'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport { NodeSingular } from 'cytoscape'\nimport { useEffect, useLayoutEffect, useRef, useState } from 'react'\n\nimport { ModuleHoverPopper } from './Popper'\n\nexport interface ModuleHoverProps {\n  node?: NodeSingular\n}\n\nexport const ModuleGraphNodeHover: React.FC<ModuleHoverProps> = ({ node }) => {\n  const { address, name } = node?.data() ?? {}\n  const [boundingBox, setBoundingBox] = useState(node?.renderedBoundingBox())\n  const ref = useRef<HTMLDivElement>(null)\n  const [currentEl, setCurrentEl] = useState<PopperProps['anchorEl'] | null>(null)\n\n  // Ensure first render clears the previous element when node changes to avoid flicker\n  useEffect(() => {\n    setCurrentEl(null)\n  }, [node])\n\n  useEffect(() => {\n    if (node) {\n      setBoundingBox(node.renderedBoundingBox())\n    }\n\n    const listener = () => {\n      setBoundingBox(node?.renderedBoundingBox())\n    }\n\n    node?.on('position', listener)\n\n    return () => {\n      node?.off('position', undefined, listener)\n    }\n  }, [node])\n\n  // Once boundingBox state is set and applied to the layout, update the ref\n  useLayoutEffect(() => {\n    setCurrentEl(ref.current)\n  }, [boundingBox])\n\n  return (\n    <>\n      <FlexCol\n        ref={ref}\n        sx={{\n          // For easier debugging of the 'ghost' element that matches the hovered cytoscape node\n          // backgroundColor: '#fff',\n          // opacity: 0.25,\n          cursor: 'pointer',\n          height: boundingBox?.h,\n          left: boundingBox?.x1,\n          pointerEvents: 'none',\n          position: 'absolute',\n          top: boundingBox?.y1,\n          width: boundingBox?.w,\n        }}\n      />\n      {node ? (\n        <>\n          <ModuleHoverPopper address={address} element={currentEl} name={name} placement={'top'} open sx={{ zIndex: 2 }} />\n        </>\n      ) : null}\n    </>\n  )\n}\n","import { alpha, Chip, Popper, PopperProps, Theme, Typography } from '@mui/material'\nimport { FlexCol, FlexRow } from '@xylabs/react-flexbox'\nimport { Identicon } from '@xylabs/react-identicon'\n\nexport interface ModuleHoverPopperProps extends PopperProps {\n  address?: string\n  element?: PopperProps['anchorEl']\n  name?: string\n}\n\nexport const ModuleHoverPopper: React.FC<ModuleHoverPopperProps> = ({ address, element, name, ...props }) => {\n  return (\n    <>\n      {element ? (\n        <Popper anchorEl={element} {...props}>\n          <FlexCol gap={2} p={2} paper sx={{ backgroundColor: (theme: Theme) => alpha(theme.palette.background.paper, 0.95) }}>\n            <FlexRow gap={2}>\n              <Identicon value={address} size={24} />\n              <Typography>{name}</Typography>\n            </FlexRow>\n            <Chip label={address} color={'primary'} />\n          </FlexCol>\n        </Popper>\n      ) : null}\n    </>\n  )\n}\n"],"mappings":";AACA,SAAS,WAAAA,gBAAe;AAExB,SAAS,WAAW,iBAAiB,QAAQ,gBAAgB;;;ACH7D,SAAS,OAAO,MAAM,QAA4B,kBAAkB;AACpE,SAAS,SAAS,eAAe;AACjC,SAAS,iBAAiB;AAUtB,mBAKU,KADF,YAJR;AAFG,IAAM,oBAAsD,CAAC,EAAE,SAAS,SAAS,MAAM,GAAG,MAAM,MAAM;AAC3G,SACE,gCACG,oBACC,oBAAC,UAAO,UAAU,SAAU,GAAG,OAC7B,+BAAC,WAAQ,KAAK,GAAG,GAAG,GAAG,OAAK,MAAC,IAAI,EAAE,iBAAiB,CAAC,UAAiB,MAAM,MAAM,QAAQ,WAAW,OAAO,IAAI,EAAE,GAChH;AAAA,yBAAC,WAAQ,KAAK,GACZ;AAAA,0BAAC,aAAU,OAAO,SAAS,MAAM,IAAI;AAAA,MACrC,oBAAC,cAAY,gBAAK;AAAA,OACpB;AAAA,IACA,oBAAC,QAAK,OAAO,SAAS,OAAO,WAAW;AAAA,KAC1C,GACF,IACE,MACN;AAEJ;;;ADkBI,SAiBI,YAAAC,WAhBF,OAAAC,MADF,QAAAC,aAAA;AAjCG,IAAM,uBAAmD,CAAC,EAAE,KAAK,MAAM;AAC5E,QAAM,EAAE,SAAS,KAAK,KAAI,6BAAM,WAAU,CAAC;AAC3C,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,6BAAM,qBAAqB;AAC1E,QAAM,MAAM,OAAuB,IAAI;AACvC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAyC,IAAI;AAG/E,YAAU,MAAM;AACd,iBAAa,IAAI;AAAA,EACnB,GAAG,CAAC,IAAI,CAAC;AAET,YAAU,MAAM;AACd,QAAI,MAAM;AACR,qBAAe,KAAK,oBAAoB,CAAC;AAAA,IAC3C;AAEA,UAAM,WAAW,MAAM;AACrB,qBAAe,6BAAM,qBAAqB;AAAA,IAC5C;AAEA,iCAAM,GAAG,YAAY;AAErB,WAAO,MAAM;AACX,mCAAM,IAAI,YAAY,QAAW;AAAA,IACnC;AAAA,EACF,GAAG,CAAC,IAAI,CAAC;AAGT,kBAAgB,MAAM;AACpB,iBAAa,IAAI,OAAO;AAAA,EAC1B,GAAG,CAAC,WAAW,CAAC;AAEhB,SACE,gBAAAA,MAAAF,WAAA,EACE;AAAA,oBAAAC;AAAA,MAACE;AAAA,MAAA;AAAA,QACC;AAAA,QACA,IAAI;AAAA;AAAA;AAAA;AAAA,UAIF,QAAQ;AAAA,UACR,QAAQ,2CAAa;AAAA,UACrB,MAAM,2CAAa;AAAA,UACnB,eAAe;AAAA,UACf,UAAU;AAAA,UACV,KAAK,2CAAa;AAAA,UAClB,OAAO,2CAAa;AAAA,QACtB;AAAA;AAAA,IACF;AAAA,IACC,OACC,gBAAAF,KAAAD,WAAA,EACE,0BAAAC,KAAC,qBAAkB,SAAkB,SAAS,WAAW,MAAY,WAAW,OAAO,MAAI,MAAC,IAAI,EAAE,QAAQ,EAAE,GAAG,GACjH,IACE;AAAA,KACN;AAEJ;","names":["FlexCol","Fragment","jsx","jsxs","FlexCol"]}

package/dist/node/components/module/graph/Popper.cjs

@@ -28,13 +28,13 @@ var import_react_flexbox = require("@xylabs/react-flexbox");
 var import_react_identicon = require("@xylabs/react-identicon");
 var import_jsx_runtime = require("react/jsx-runtime");
 var ModuleHoverPopper = ({ address, element, name, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Popper, { anchorEl: element, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_flexbox.FlexCol, { gap: 2, p: 2, paper: true, sx: { backgroundColor: (theme) => (0, import_material.alpha)(theme.palette.background.paper, 0.95) }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: element ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Popper, { anchorEl: element, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_flexbox.FlexCol, { gap: 2, p: 2, paper: true, sx: { backgroundColor: (theme) => (0, import_material.alpha)(theme.palette.background.paper, 0.95) }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_flexbox.FlexRow, { gap: 2, children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_identicon.Identicon, { value: address, size: 24 }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { children: name })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Chip, { label: address, color: "primary" })
-  ] }) });
+  ] }) }) : null });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/node/components/module/graph/Popper.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/module/graph/Popper.tsx"],"sourcesContent":["import { alpha, Chip, Popper, PopperProps, Theme, Typography } from '@mui/material'\nimport { FlexCol, FlexRow } from '@xylabs/react-flexbox'\nimport { Identicon } from '@xylabs/react-identicon'\n\nexport interface ModuleHoverPopperProps extends PopperProps {\n  address?: string\n  element?: HTMLElement | null\n  name?: string\n}\n\nexport const ModuleHoverPopper: React.FC<ModuleHoverPopperProps> = ({ address, element, name, ...props }) => {\n  return (\n    <Popper anchorEl={element} {...props}>\n      <FlexCol gap={2} p={2} paper sx={{ backgroundColor: (theme: Theme) => alpha(theme.palette.background.paper, 0.95) }}>\n        <FlexRow gap={2}>\n          <Identicon value={address} size={24} />\n          <Typography>{name}</Typography>\n        </FlexRow>\n        <Chip label={address} color={'primary'} />\n      </FlexCol>\n    </Popper>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAAoE;AACpE,2BAAiC;AACjC,6BAA0B;AAYlB;AAJD,IAAM,oBAAsD,CAAC,EAAE,SAAS,SAAS,MAAM,GAAG,MAAM,MAAM;AAC3G,SACE,4CAAC,0BAAO,UAAU,SAAU,GAAG,OAC7B,uDAAC,gCAAQ,KAAK,GAAG,GAAG,GAAG,OAAK,MAAC,IAAI,EAAE,iBAAiB,CAAC,cAAiB,uBAAM,MAAM,QAAQ,WAAW,OAAO,IAAI,EAAE,GAChH;AAAA,iDAAC,gCAAQ,KAAK,GACZ;AAAA,kDAAC,oCAAU,OAAO,SAAS,MAAM,IAAI;AAAA,MACrC,4CAAC,8BAAY,gBAAK;AAAA,OACpB;AAAA,IACA,4CAAC,wBAAK,OAAO,SAAS,OAAO,WAAW;AAAA,KAC1C,GACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../../src/components/module/graph/Popper.tsx"],"sourcesContent":["import { alpha, Chip, Popper, PopperProps, Theme, Typography } from '@mui/material'\nimport { FlexCol, FlexRow } from '@xylabs/react-flexbox'\nimport { Identicon } from '@xylabs/react-identicon'\n\nexport interface ModuleHoverPopperProps extends PopperProps {\n  address?: string\n  element?: PopperProps['anchorEl']\n  name?: string\n}\n\nexport const ModuleHoverPopper: React.FC<ModuleHoverPopperProps> = ({ address, element, name, ...props }) => {\n  return (\n    <>\n      {element ? (\n        <Popper anchorEl={element} {...props}>\n          <FlexCol gap={2} p={2} paper sx={{ backgroundColor: (theme: Theme) => alpha(theme.palette.background.paper, 0.95) }}>\n            <FlexRow gap={2}>\n              <Identicon value={address} size={24} />\n              <Typography>{name}</Typography>\n            </FlexRow>\n            <Chip label={address} color={'primary'} />\n          </FlexCol>\n        </Popper>\n      ) : null}\n    </>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAAoE;AACpE,2BAAiC;AACjC,6BAA0B;AAUtB;AAFG,IAAM,oBAAsD,CAAC,EAAE,SAAS,SAAS,MAAM,GAAG,MAAM,MAAM;AAC3G,SACE,2EACG,oBACC,4CAAC,0BAAO,UAAU,SAAU,GAAG,OAC7B,uDAAC,gCAAQ,KAAK,GAAG,GAAG,GAAG,OAAK,MAAC,IAAI,EAAE,iBAAiB,CAAC,cAAiB,uBAAM,MAAM,QAAQ,WAAW,OAAO,IAAI,EAAE,GAChH;AAAA,iDAAC,gCAAQ,KAAK,GACZ;AAAA,kDAAC,oCAAU,OAAO,SAAS,MAAM,IAAI;AAAA,MACrC,4CAAC,8BAAY,gBAAK;AAAA,OACpB;AAAA,IACA,4CAAC,wBAAK,OAAO,SAAS,OAAO,WAAW;AAAA,KAC1C,GACF,IACE,MACN;AAEJ;","names":[]}

package/dist/node/components/module/graph/Popper.d.cts

@@ -2,7 +2,7 @@
 import { PopperProps } from '@mui/material';
 export interface ModuleHoverPopperProps extends PopperProps {
     address?: string;
-    element?: HTMLElement | null;
+    element?: PopperProps['anchorEl'];
     name?: string;
 }
 export declare const ModuleHoverPopper: React.FC<ModuleHoverPopperProps>;

package/dist/node/components/module/graph/Popper.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"Popper.d.ts","sourceRoot":"","sources":["../../../../../src/components/module/graph/Popper.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAuB,WAAW,EAAqB,MAAM,eAAe,CAAA;AAInF,MAAM,WAAW,sBAAuB,SAAQ,WAAW;IACzD,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAY9D,CAAA"}
+{"version":3,"file":"Popper.d.ts","sourceRoot":"","sources":["../../../../../src/components/module/graph/Popper.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAuB,WAAW,EAAqB,MAAM,eAAe,CAAA;AAInF,MAAM,WAAW,sBAAuB,SAAQ,WAAW;IACzD,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAA;IACjC,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAgB9D,CAAA"}

package/dist/node/components/module/graph/Popper.d.mts

@@ -2,7 +2,7 @@
 import { PopperProps } from '@mui/material';
 export interface ModuleHoverPopperProps extends PopperProps {
     address?: string;
-    element?: HTMLElement | null;
+    element?: PopperProps['anchorEl'];
     name?: string;
 }
 export declare const ModuleHoverPopper: React.FC<ModuleHoverPopperProps>;

package/dist/node/components/module/graph/Popper.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"Popper.d.ts","sourceRoot":"","sources":["../../../../../src/components/module/graph/Popper.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAuB,WAAW,EAAqB,MAAM,eAAe,CAAA;AAInF,MAAM,WAAW,sBAAuB,SAAQ,WAAW;IACzD,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAY9D,CAAA"}
+{"version":3,"file":"Popper.d.ts","sourceRoot":"","sources":["../../../../../src/components/module/graph/Popper.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAuB,WAAW,EAAqB,MAAM,eAAe,CAAA;AAInF,MAAM,WAAW,sBAAuB,SAAQ,WAAW;IACzD,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAA;IACjC,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAgB9D,CAAA"}

package/dist/node/components/module/graph/Popper.d.ts

@@ -2,7 +2,7 @@
 import { PopperProps } from '@mui/material';
 export interface ModuleHoverPopperProps extends PopperProps {
     address?: string;
-    element?: HTMLElement | null;
+    element?: PopperProps['anchorEl'];
     name?: string;
 }
 export declare const ModuleHoverPopper: React.FC<ModuleHoverPopperProps>;

package/dist/node/components/module/graph/Popper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Popper.d.ts","sourceRoot":"","sources":["../../../../../src/components/module/graph/Popper.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAuB,WAAW,EAAqB,MAAM,eAAe,CAAA;AAInF,MAAM,WAAW,sBAAuB,SAAQ,WAAW;IACzD,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAY9D,CAAA"}
+{"version":3,"file":"Popper.d.ts","sourceRoot":"","sources":["../../../../../src/components/module/graph/Popper.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAuB,WAAW,EAAqB,MAAM,eAAe,CAAA;AAInF,MAAM,WAAW,sBAAuB,SAAQ,WAAW;IACzD,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAA;IACjC,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAgB9D,CAAA"}

package/dist/node/components/module/graph/Popper.js

@@ -2,15 +2,15 @@
 import { alpha, Chip, Popper, Typography } from "@mui/material";
 import { FlexCol, FlexRow } from "@xylabs/react-flexbox";
 import { Identicon } from "@xylabs/react-identicon";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var ModuleHoverPopper = ({ address, element, name, ...props }) => {
-  return /* @__PURE__ */ jsx(Popper, { anchorEl: element, ...props, children: /* @__PURE__ */ jsxs(FlexCol, { gap: 2, p: 2, paper: true, sx: { backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.95) }, children: [
+  return /* @__PURE__ */ jsx(Fragment, { children: element ? /* @__PURE__ */ jsx(Popper, { anchorEl: element, ...props, children: /* @__PURE__ */ jsxs(FlexCol, { gap: 2, p: 2, paper: true, sx: { backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.95) }, children: [
     /* @__PURE__ */ jsxs(FlexRow, { gap: 2, children: [
       /* @__PURE__ */ jsx(Identicon, { value: address, size: 24 }),
       /* @__PURE__ */ jsx(Typography, { children: name })
     ] }),
     /* @__PURE__ */ jsx(Chip, { label: address, color: "primary" })
-  ] }) });
+  ] }) }) : null });
 };
 export {
   ModuleHoverPopper

package/dist/node/components/module/graph/Popper.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/module/graph/Popper.tsx"],"sourcesContent":["import { alpha, Chip, Popper, PopperProps, Theme, Typography } from '@mui/material'\nimport { FlexCol, FlexRow } from '@xylabs/react-flexbox'\nimport { Identicon } from '@xylabs/react-identicon'\n\nexport interface ModuleHoverPopperProps extends PopperProps {\n  address?: string\n  element?: HTMLElement | null\n  name?: string\n}\n\nexport const ModuleHoverPopper: React.FC<ModuleHoverPopperProps> = ({ address, element, name, ...props }) => {\n  return (\n    <Popper anchorEl={element} {...props}>\n      <FlexCol gap={2} p={2} paper sx={{ backgroundColor: (theme: Theme) => alpha(theme.palette.background.paper, 0.95) }}>\n        <FlexRow gap={2}>\n          <Identicon value={address} size={24} />\n          <Typography>{name}</Typography>\n        </FlexRow>\n        <Chip label={address} color={'primary'} />\n      </FlexCol>\n    </Popper>\n  )\n}\n"],"mappings":";AAAA,SAAS,OAAO,MAAM,QAA4B,kBAAkB;AACpE,SAAS,SAAS,eAAe;AACjC,SAAS,iBAAiB;AAYlB,SACE,KADF;AAJD,IAAM,oBAAsD,CAAC,EAAE,SAAS,SAAS,MAAM,GAAG,MAAM,MAAM;AAC3G,SACE,oBAAC,UAAO,UAAU,SAAU,GAAG,OAC7B,+BAAC,WAAQ,KAAK,GAAG,GAAG,GAAG,OAAK,MAAC,IAAI,EAAE,iBAAiB,CAAC,UAAiB,MAAM,MAAM,QAAQ,WAAW,OAAO,IAAI,EAAE,GAChH;AAAA,yBAAC,WAAQ,KAAK,GACZ;AAAA,0BAAC,aAAU,OAAO,SAAS,MAAM,IAAI;AAAA,MACrC,oBAAC,cAAY,gBAAK;AAAA,OACpB;AAAA,IACA,oBAAC,QAAK,OAAO,SAAS,OAAO,WAAW;AAAA,KAC1C,GACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../../src/components/module/graph/Popper.tsx"],"sourcesContent":["import { alpha, Chip, Popper, PopperProps, Theme, Typography } from '@mui/material'\nimport { FlexCol, FlexRow } from '@xylabs/react-flexbox'\nimport { Identicon } from '@xylabs/react-identicon'\n\nexport interface ModuleHoverPopperProps extends PopperProps {\n  address?: string\n  element?: PopperProps['anchorEl']\n  name?: string\n}\n\nexport const ModuleHoverPopper: React.FC<ModuleHoverPopperProps> = ({ address, element, name, ...props }) => {\n  return (\n    <>\n      {element ? (\n        <Popper anchorEl={element} {...props}>\n          <FlexCol gap={2} p={2} paper sx={{ backgroundColor: (theme: Theme) => alpha(theme.palette.background.paper, 0.95) }}>\n            <FlexRow gap={2}>\n              <Identicon value={address} size={24} />\n              <Typography>{name}</Typography>\n            </FlexRow>\n            <Chip label={address} color={'primary'} />\n          </FlexCol>\n        </Popper>\n      ) : null}\n    </>\n  )\n}\n"],"mappings":";AAAA,SAAS,OAAO,MAAM,QAA4B,kBAAkB;AACpE,SAAS,SAAS,eAAe;AACjC,SAAS,iBAAiB;AAUtB,mBAKU,KADF,YAJR;AAFG,IAAM,oBAAsD,CAAC,EAAE,SAAS,SAAS,MAAM,GAAG,MAAM,MAAM;AAC3G,SACE,gCACG,oBACC,oBAAC,UAAO,UAAU,SAAU,GAAG,OAC7B,+BAAC,WAAQ,KAAK,GAAG,GAAG,GAAG,OAAK,MAAC,IAAI,EAAE,iBAAiB,CAAC,UAAiB,MAAM,MAAM,QAAQ,WAAW,OAAO,IAAI,EAAE,GAChH;AAAA,yBAAC,WAAQ,KAAK,GACZ;AAAA,0BAAC,aAAU,OAAO,SAAS,MAAM,IAAI;AAAA,MACrC,oBAAC,cAAY,gBAAK;AAAA,OACpB;AAAA,IACA,oBAAC,QAAK,OAAO,SAAS,OAAO,WAAW;AAAA,KAC1C,GACF,IACE,MACN;AAEJ;","names":[]}