@xyo-network/react-node 2.81.10 → 2.82.0

package/dist/node/{index.js → index.mjs}

@@ -1,33 +1,50 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+
+// src/components/Node.tsx
+import React2 from "react";
+
 // src/components/NodeDescriptionBox.tsx
 import { FlexCol } from "@xylabs/react-flexbox";
+import React from "react";
 
 // src/hooks/ModuleFromNodeConfig.ts
-var useModuleFromNodeConfigLogger = (config) => {
+var useModuleFromNodeConfigLogger = /* @__PURE__ */ __name((config) => {
   return config == null ? void 0 : config.logger;
-};
+}, "useModuleFromNodeConfigLogger");
 
 // src/hooks/provided/useProvidedNode.tsx
 import { NodeContext } from "@xyo-network/react-node-context";
 import { useContext } from "react";
-var useProvidedNode = () => {
+var useProvidedNode = /* @__PURE__ */ __name(() => {
   const { node } = useContext(NodeContext);
-  return [node];
-};
+  return [
+    node
+  ];
+}, "useProvidedNode");
 
 // src/hooks/provided/useWeakProvidedNode.tsx
 import { NodeContext as NodeContext2 } from "@xyo-network/react-node-context";
 import { useContext as useContext2, useMemo } from "react";
-var useWeakProvidedNode = () => {
+var useWeakProvidedNode = /* @__PURE__ */ __name(() => {
   const { node } = useContext2(NodeContext2);
-  const weakNode = useMemo(() => node ? new WeakRef(node) : null, [node]);
-  return [weakNode];
-};
+  const weakNode = useMemo(() => node ? new WeakRef(node) : null, [
+    node
+  ]);
+  return [
+    weakNode
+  ];
+}, "useWeakProvidedNode");
 
 // src/hooks/useModuleFilterOptions.ts
-var useModuleFilterOptions = (config) => {
+var useModuleFilterOptions = /* @__PURE__ */ __name((config) => {
   const { direction, identity, maxDepth } = config ?? {};
-  return { direction, identity, maxDepth };
-};
+  return {
+    direction,
+    identity,
+    maxDepth
+  };
+}, "useModuleFilterOptions");
 
 // src/hooks/useModuleFromNode.ts
 import { usePromise as usePromise2 } from "@xylabs/react-promise";
@@ -40,26 +57,39 @@ import { asNodeInstance } from "@xyo-network/node-model";
 
 // src/hooks/useNodeConfigNodeField.ts
 import { useMemo as useMemo2 } from "react";
-var useNodeConfigNodeField = (config) => {
-  const nodeAddress = useMemo2(() => typeof (config == null ? void 0 : config.node) === "string" ? config == null ? void 0 : config.node : void 0, [config == null ? void 0 : config.node]);
-  const nodeInstance = useMemo2(() => typeof (config == null ? void 0 : config.node) === "object" ? config == null ? void 0 : config.node : void 0, [config == null ? void 0 : config.node]);
-  return [nodeAddress, nodeInstance];
-};
+var useNodeConfigNodeField = /* @__PURE__ */ __name((config) => {
+  const nodeAddress = useMemo2(() => typeof (config == null ? void 0 : config.node) === "string" ? config == null ? void 0 : config.node : void 0, [
+    config == null ? void 0 : config.node
+  ]);
+  const nodeInstance = useMemo2(() => typeof (config == null ? void 0 : config.node) === "object" ? config == null ? void 0 : config.node : void 0, [
+    config == null ? void 0 : config.node
+  ]);
+  return [
+    nodeAddress,
+    nodeInstance
+  ];
+}, "useNodeConfigNodeField");
 
 // src/hooks/useNode.ts
-var useNode = (config) => {
+var useNode = /* @__PURE__ */ __name((config) => {
   const [nodeAddress, nodeInstance] = useNodeConfigNodeField(config);
   const [providedNode] = useProvidedNode();
   const [nodeAddressNode, error] = usePromise(async () => {
     if (providedNode && nodeAddress) {
       return asNodeInstance(await providedNode.resolve(nodeAddress), "Module is not a node");
     }
-  }, [providedNode, nodeAddress]);
-  return [nodeAddressNode ?? nodeInstance ?? providedNode ?? void 0, error];
-};
+  }, [
+    providedNode,
+    nodeAddress
+  ]);
+  return [
+    nodeAddressNode ?? nodeInstance ?? providedNode ?? void 0,
+    error
+  ];
+}, "useNode");
 
 // src/hooks/useModuleFromNode.ts
-var useModuleFromNode = (nameOrAddressOrInstance = void 0, config) => {
+var useModuleFromNode = /* @__PURE__ */ __name((nameOrAddressOrInstance = void 0, config) => {
   const [node, nodeError] = useNode(config);
   const logger = useModuleFromNodeConfigLogger(config);
   const filterOptions = useModuleFilterOptions(config);
@@ -93,14 +123,20 @@ var useModuleFromNode = (nameOrAddressOrInstance = void 0, config) => {
     }
     logger == null ? void 0 : logger.debug("Result: No Node");
     return;
-  }, [node, nameOrAddressOrInstance]);
-  return [result, nodeError ?? error];
-};
+  }, [
+    node,
+    nameOrAddressOrInstance
+  ]);
+  return [
+    result,
+    nodeError ?? error
+  ];
+}, "useModuleFromNode");
 
 // src/hooks/useModulesFromNode.ts
 import { usePromise as usePromise3 } from "@xylabs/react-promise";
 import { useState as useState2 } from "react";
-var useModulesFromNode = (filter, config) => {
+var useModulesFromNode = /* @__PURE__ */ __name((filter, config) => {
   const [node, nodeError] = useNode(config);
   const logger = config == null ? void 0 : config.logger;
   const filterOptions = useModuleFilterOptions();
@@ -124,43 +160,63 @@ var useModulesFromNode = (filter, config) => {
     }
     console.log("Result: No Node");
     return;
-  }, [node, filter]);
-  return [result, nodeError ?? error];
-};
+  }, [
+    node,
+    filter
+  ]);
+  return [
+    result,
+    nodeError ?? error
+  ];
+}, "useModulesFromNode");
 
 // src/hooks/useNodeDescription.ts
 import { usePromise as usePromise4 } from "@xylabs/react-promise";
 import { ModuleDescriptionSchema } from "@xyo-network/module-model";
 import { isPayloadOfSchemaType } from "@xyo-network/payload-model";
-var useNodeDescription = (config) => {
+var useNodeDescription = /* @__PURE__ */ __name((config) => {
   const [activeNode, nodeError] = useNode(config);
   const [description, error] = usePromise4(async () => {
     const state = await (activeNode == null ? void 0 : activeNode.state());
     return state == null ? void 0 : state.find(isPayloadOfSchemaType(ModuleDescriptionSchema));
-  }, [activeNode]);
-  return [description, nodeError ?? error];
-};
+  }, [
+    activeNode
+  ]);
+  return [
+    description,
+    nodeError ?? error
+  ];
+}, "useNodeDescription");
 
 // src/hooks/useNodeFromNode.tsx
 import { asNodeInstance as asNodeInstance2 } from "@xyo-network/node-model";
-var useNodeFromNode = (nameOrAddressOrInstance, config) => {
+var useNodeFromNode = /* @__PURE__ */ __name((nameOrAddressOrInstance, config) => {
   var _a, _b;
   const [mod, error] = useModuleFromNode(nameOrAddressOrInstance, config);
   const instance = asNodeInstance2(mod);
   if (mod && !instance) {
     const error2 = new Error(`Resolved module is not a NodeInstance [${(_a = mod.config) == null ? void 0 : _a.schema}:${(_b = mod.config) == null ? void 0 : _b.name}:${mod.address}]`);
     console.error(error2.message);
-    return [void 0, error2];
+    return [
+      void 0,
+      error2
+    ];
   }
-  return [instance, error];
-};
+  return [
+    instance,
+    error
+  ];
+}, "useNodeFromNode");
 
 // src/hooks/useNodesFromNode.tsx
 import { isNodeInstance } from "@xyo-network/node-model";
-var useNodesFromNode = (filter, config) => {
+var useNodesFromNode = /* @__PURE__ */ __name((filter, config) => {
   const [modules, error] = useModulesFromNode(filter, config);
   if (error) {
-    return [null, error];
+    return [
+      null,
+      error
+    ];
   }
   return modules ? [
     // eslint-disable-next-line unicorn/no-array-reduce
@@ -171,14 +227,21 @@ var useNodesFromNode = (filter, config) => {
       return prev;
     }, []),
     void 0
-  ] : [modules, error];
-};
+  ] : [
+    modules,
+    error
+  ];
+}, "useNodesFromNode");
 
 // src/hooks/useWeakModuleFilterOptions.ts
-var useWeakModuleFilterOptions = (config) => {
+var useWeakModuleFilterOptions = /* @__PURE__ */ __name((config) => {
   const { direction, identity, maxDepth } = config ?? {};
-  return { direction, identity, maxDepth };
-};
+  return {
+    direction,
+    identity,
+    maxDepth
+  };
+}, "useWeakModuleFilterOptions");
 
 // src/hooks/useWeakModuleFromNode.ts
 import { usePromise as usePromise6 } from "@xylabs/react-promise";
@@ -191,14 +254,21 @@ import { asNodeInstance as asNodeInstance3 } from "@xyo-network/node-model";
 
 // src/hooks/useWeakNodeConfigNodeField.ts
 import { useMemo as useMemo3 } from "react";
-var useWeakNodeConfigNodeField = (config) => {
-  const nodeAddress = useMemo3(() => typeof (config == null ? void 0 : config.node) === "string" ? config == null ? void 0 : config.node : void 0, [config == null ? void 0 : config.node]);
-  const nodeInstance = useMemo3(() => typeof (config == null ? void 0 : config.node) === "object" ? config == null ? void 0 : config.node : void 0, [config == null ? void 0 : config.node]);
-  return [nodeAddress, nodeInstance];
-};
+var useWeakNodeConfigNodeField = /* @__PURE__ */ __name((config) => {
+  const nodeAddress = useMemo3(() => typeof (config == null ? void 0 : config.node) === "string" ? config == null ? void 0 : config.node : void 0, [
+    config == null ? void 0 : config.node
+  ]);
+  const nodeInstance = useMemo3(() => typeof (config == null ? void 0 : config.node) === "object" ? config == null ? void 0 : config.node : void 0, [
+    config == null ? void 0 : config.node
+  ]);
+  return [
+    nodeAddress,
+    nodeInstance
+  ];
+}, "useWeakNodeConfigNodeField");
 
 // src/hooks/useWeakNode.ts
-var useWeakNode = (config) => {
+var useWeakNode = /* @__PURE__ */ __name((config) => {
   const [nodeAddress, nodeInstance] = useWeakNodeConfigNodeField(config);
   const [providedNode] = useWeakProvidedNode();
   const [nodeAddressNode, error] = usePromise5(async () => {
@@ -206,17 +276,23 @@ var useWeakNode = (config) => {
     if (providedNodeInstance && nodeAddress) {
       return new WeakRef(asNodeInstance3(await providedNodeInstance.resolve(nodeAddress), "Module is not a node"));
     }
-  }, [providedNode, nodeAddress]);
-  return [nodeAddressNode ?? nodeInstance ?? providedNode ?? void 0, error];
-};
+  }, [
+    providedNode,
+    nodeAddress
+  ]);
+  return [
+    nodeAddressNode ?? nodeInstance ?? providedNode ?? void 0,
+    error
+  ];
+}, "useWeakNode");
 
 // src/hooks/WeakModuleFromNodeConfig.ts
-var useWeakModuleFromNodeConfigLogger = (config) => {
+var useWeakModuleFromNodeConfigLogger = /* @__PURE__ */ __name((config) => {
   return config == null ? void 0 : config.logger;
-};
+}, "useWeakModuleFromNodeConfigLogger");
 
 // src/hooks/useWeakModuleFromNode.ts
-var useWeakModuleFromNode = (nameOrAddressOrInstance = void 0, config) => {
+var useWeakModuleFromNode = /* @__PURE__ */ __name((nameOrAddressOrInstance = void 0, config) => {
   const [node, nodeError] = useWeakNode(config);
   const logger = useWeakModuleFromNodeConfigLogger(config);
   const filterOptions = useWeakModuleFilterOptions(config);
@@ -251,14 +327,20 @@ var useWeakModuleFromNode = (nameOrAddressOrInstance = void 0, config) => {
     }
     logger == null ? void 0 : logger.debug("Result: No Node");
     return;
-  }, [node, nameOrAddressOrInstance]);
-  return [result, nodeError ?? error];
-};
+  }, [
+    node,
+    nameOrAddressOrInstance
+  ]);
+  return [
+    result,
+    nodeError ?? error
+  ];
+}, "useWeakModuleFromNode");
 
 // src/hooks/useWeakModulesFromNode.ts
 import { usePromise as usePromise7 } from "@xylabs/react-promise";
 import { useState as useState4 } from "react";
-var useWeakModulesFromNode = (filter, config) => {
+var useWeakModulesFromNode = /* @__PURE__ */ __name((filter, config) => {
   const [node, nodeError] = useNode(config);
   const logger = config == null ? void 0 : config.logger;
   const filterOptions = useModuleFilterOptions();
@@ -285,139 +367,195 @@ var useWeakModulesFromNode = (filter, config) => {
     }
     console.log("Result: No Node");
     return;
-  }, [node, filter]);
-  return [result, nodeError ?? error];
-};
+  }, [
+    node,
+    filter
+  ]);
+  return [
+    result,
+    nodeError ?? error
+  ];
+}, "useWeakModulesFromNode");
 
 // src/hooks/useWeakNodeDescription.ts
 import { usePromise as usePromise8 } from "@xylabs/react-promise";
 import { ModuleDescriptionSchema as ModuleDescriptionSchema2 } from "@xyo-network/module-model";
 import { isPayloadOfSchemaType as isPayloadOfSchemaType2 } from "@xyo-network/payload-model";
-var useWeakNodeDescription = (config) => {
+var useWeakNodeDescription = /* @__PURE__ */ __name((config) => {
   const [activeNode, nodeError] = useWeakNode(config);
   const [description, error] = usePromise8(async () => {
     var _a;
     const state = await ((_a = activeNode == null ? void 0 : activeNode.deref()) == null ? void 0 : _a.state());
     return state == null ? void 0 : state.find(isPayloadOfSchemaType2(ModuleDescriptionSchema2));
-  }, [activeNode]);
-  return [description, nodeError ?? error];
-};
+  }, [
+    activeNode
+  ]);
+  return [
+    description,
+    nodeError ?? error
+  ];
+}, "useWeakNodeDescription");
 
 // src/hooks/useWeakNodeFromNode.tsx
 import { isNodeInstance as isNodeInstance2 } from "@xyo-network/node-model";
-var useWeakNodeFromNode = (nameOrAddressOrInstance, config) => {
-  return useWeakModuleFromNode(nameOrAddressOrInstance, { identity: isNodeInstance2, ...config });
-};
+var useWeakNodeFromNode = /* @__PURE__ */ __name((nameOrAddressOrInstance, config) => {
+  return useWeakModuleFromNode(nameOrAddressOrInstance, {
+    identity: isNodeInstance2,
+    ...config
+  });
+}, "useWeakNodeFromNode");
 
 // src/components/NodeDescriptionBox.tsx
-import { jsx } from "react/jsx-runtime";
-var NodeDescriptionBox = ({ node, ...props }) => {
-  const [description, error] = useWeakNodeDescription({ node });
-  return /* @__PURE__ */ jsx(FlexCol, { ...props, children: /* @__PURE__ */ jsx("code", { color: error ? "red" : void 0, children: error ? error.message : JSON.stringify(description, null, 2) }) });
-};
+var NodeDescriptionBox = /* @__PURE__ */ __name(({ node, ...props }) => {
+  const [description, error] = useWeakNodeDescription({
+    node
+  });
+  return /* @__PURE__ */ React.createElement(FlexCol, props, /* @__PURE__ */ React.createElement("code", {
+    color: error ? "red" : void 0
+  }, error ? error.message : JSON.stringify(description, null, 2)));
+}, "NodeDescriptionBox");
 
 // src/components/Node.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-var NodeBox = ({ variant, ...props }) => {
+var NodeBox = /* @__PURE__ */ __name(({ variant, ...props }) => {
   switch (variant) {
     case "description":
     default: {
-      return /* @__PURE__ */ jsx2(NodeDescriptionBox, { ...props });
+      return /* @__PURE__ */ React2.createElement(NodeDescriptionBox, props);
     }
   }
-};
+}, "NodeBox");
 
 // src/components/NodeDrawer.tsx
 import { Close as CloseIcon } from "@mui/icons-material";
 import { ClickAwayListener, Drawer, IconButton } from "@mui/material";
 import { FlexGrowCol, FlexRow } from "@xylabs/react-flexbox";
 import { useNodeDrawer } from "@xyo-network/react-node-provider";
+import React5 from "react";
 
 // src/components/render/ModuleDescriptionBox.tsx
 import { ChevronRight as ChevronRightIcon, ExpandMore as ExpandMoreIcon } from "@mui/icons-material";
 import { styled as styled2, Typography } from "@mui/material";
 import { TreeView } from "@mui/x-tree-view";
-import { useRef } from "react";
+import React4, { useRef } from "react";
 
 // src/components/render/RenderModule.tsx
 import { styled } from "@mui/material";
 import { TreeItem } from "@mui/x-tree-view";
 import { useAsyncEffect } from "@xylabs/react-async-effect";
-import { useState as useState5 } from "react";
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
-var RenderModule = ({ mod, idRef }) => {
+import React3, { useState as useState5 } from "react";
+var RenderModule = /* @__PURE__ */ __name(({ mod, idRef }) => {
   const [childModules, setChildModules] = useState5();
-  useAsyncEffect(
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    async (mounted) => {
-      const moduleInstance2 = mod.deref();
-      const { address: address2 } = moduleInstance2 ?? {};
-      if (moduleInstance2) {
-        const children = (await moduleInstance2.resolve("*")).filter((childModule) => childModule.address !== address2);
-        if (mounted()) {
-          setChildModules(children.map((childModule) => new WeakRef(childModule)));
-        }
+  useAsyncEffect(async (mounted) => {
+    const moduleInstance2 = mod.deref();
+    const { address: address2 } = moduleInstance2 ?? {};
+    if (moduleInstance2) {
+      const children = (await moduleInstance2.resolve("*")).filter((childModule) => childModule.address !== address2);
+      if (mounted()) {
+        setChildModules(children.map((childModule) => new WeakRef(childModule)));
       }
-    },
-    [mod]
-  );
-  const increment = () => {
+    }
+  }, [
+    mod
+  ]);
+  const increment = /* @__PURE__ */ __name(() => {
     const newId = (idRef.current.idIncrementor++).toString();
     idRef.current.ids.push(newId);
     return newId;
-  };
+  }, "increment");
   const moduleInstance = mod.deref();
   const { queries, address } = moduleInstance ?? {};
-  return /* @__PURE__ */ jsxs(StyledAddressTreeItem, { nodeId: increment(), label: `address: ${address}`, children: [
-    queries == null ? void 0 : queries.map((query, index) => {
-      return /* @__PURE__ */ jsx3(TreeItem, { nodeId: increment(), label: `query : ${query}`, sx: { mb: index === queries.length - 1 ? 1.5 : 0.5 } }, query);
-    }),
-    childModules && childModules.length > 0 ? /* @__PURE__ */ jsx3(TreeItem, { nodeId: increment(), label: "children", sx: { mb: 0.5 }, children: childModules.map((childModuleRef) => {
-      const childModule = childModuleRef.deref();
-      return childModule ? /* @__PURE__ */ jsx3(RenderModule, { mod: childModuleRef, idRef }, childModule == null ? void 0 : childModule.address) : null;
-    }) }) : null
-  ] });
-};
-var StyledAddressTreeItem = styled(TreeItem, { name: "StyledAddressTreeItem" })(({ theme }) => ({
+  return /* @__PURE__ */ React3.createElement(StyledAddressTreeItem, {
+    nodeId: increment(),
+    label: `address: ${address}`
+  }, queries == null ? void 0 : queries.map((query, index) => {
+    return /* @__PURE__ */ React3.createElement(TreeItem, {
+      key: query,
+      nodeId: increment(),
+      label: `query : ${query}`,
+      sx: {
+        mb: index === queries.length - 1 ? 1.5 : 0.5
+      }
+    });
+  }), childModules && childModules.length > 0 ? /* @__PURE__ */ React3.createElement(TreeItem, {
+    nodeId: increment(),
+    label: "children",
+    sx: {
+      mb: 0.5
+    }
+  }, childModules.map((childModuleRef) => {
+    const childModule = childModuleRef.deref();
+    return childModule ? /* @__PURE__ */ React3.createElement(RenderModule, {
+      key: childModule == null ? void 0 : childModule.address,
+      mod: childModuleRef,
+      idRef
+    }) : null;
+  })) : null);
+}, "RenderModule");
+var StyledAddressTreeItem = styled(TreeItem, {
+  name: "StyledAddressTreeItem"
+})(({ theme }) => ({
   "& .MuiTreeItem-content": {
     marginBottom: theme.spacing(0.25)
   }
 }));
 
 // src/components/render/ModuleDescriptionBox.tsx
-import { Fragment, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
-var ModuleDescriptionBox = ({ mod }) => {
-  const idRef = useRef({ idIncrementor: 0, ids: [] });
-  return /* @__PURE__ */ jsx4(Fragment, { children: mod ? /* @__PURE__ */ jsxs2(Fragment, { children: [
-    /* @__PURE__ */ jsx4(Typography, { variant: "h4", children: "Node Configuration" }),
-    /* @__PURE__ */ jsx4(
-      StyledTreeView,
-      {
-        "aria-label": "file system navigator",
-        defaultCollapseIcon: /* @__PURE__ */ jsx4(ExpandMoreIcon, {}),
-        defaultExpandIcon: /* @__PURE__ */ jsx4(ChevronRightIcon, {}),
-        sx: { flexGrow: 1 },
-        children: /* @__PURE__ */ jsx4(RenderModule, { mod, idRef })
-      }
-    )
-  ] }) : mod === null ? /* @__PURE__ */ jsx4(Typography, { variant: "h4", children: "Node loading..." }) : /* @__PURE__ */ jsx4(Typography, { variant: "h4", children: "Node not found" }) });
-};
-var StyledTreeView = styled2(TreeView, { name: "StyledTreeView" })(() => ({
+var ModuleDescriptionBox = /* @__PURE__ */ __name(({ mod }) => {
+  const idRef = useRef({
+    idIncrementor: 0,
+    ids: []
+  });
+  return /* @__PURE__ */ React4.createElement(React4.Fragment, null, mod ? /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(Typography, {
+    variant: "h4"
+  }, "Node Configuration"), /* @__PURE__ */ React4.createElement(StyledTreeView, {
+    "aria-label": "file system navigator",
+    defaultCollapseIcon: /* @__PURE__ */ React4.createElement(ExpandMoreIcon, null),
+    defaultExpandIcon: /* @__PURE__ */ React4.createElement(ChevronRightIcon, null),
+    sx: {
+      flexGrow: 1
+    }
+  }, /* @__PURE__ */ React4.createElement(RenderModule, {
+    mod,
+    idRef
+  }))) : mod === null ? /* @__PURE__ */ React4.createElement(Typography, {
+    variant: "h4"
+  }, "Node loading...") : /* @__PURE__ */ React4.createElement(Typography, {
+    variant: "h4"
+  }, "Node not found"));
+}, "ModuleDescriptionBox");
+var StyledTreeView = styled2(TreeView, {
+  name: "StyledTreeView"
+})(() => ({
   height: "auto",
   maxWidth: "auto"
 }));
 
 // src/components/NodeDrawer.tsx
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
-var NodeDrawer = ({ children, ...props }) => {
+var NodeDrawer = /* @__PURE__ */ __name(({ children, ...props }) => {
   const { open, setOpen } = useNodeDrawer();
   const [node] = useWeakProvidedNode();
-  return /* @__PURE__ */ jsx5(Drawer, { open: open ?? false, anchor: "right", ...props, children: /* @__PURE__ */ jsx5(ClickAwayListener, { onClickAway: () => setOpen == null ? void 0 : setOpen(false), children: /* @__PURE__ */ jsxs3(FlexGrowCol, { role: "presentation", justifyContent: "start", p: 2, rowGap: 2, minWidth: "33vw", children: [
-    /* @__PURE__ */ jsx5(FlexRow, { alignContent: "start", justifyContent: "start", width: "100%", children: /* @__PURE__ */ jsx5(IconButton, { onClick: () => setOpen == null ? void 0 : setOpen(false), children: /* @__PURE__ */ jsx5(CloseIcon, {}) }) }),
-    /* @__PURE__ */ jsx5(ModuleDescriptionBox, { mod: node }),
-    children
-  ] }) }) });
-};
+  return /* @__PURE__ */ React5.createElement(Drawer, {
+    open: open ?? false,
+    anchor: "right",
+    ...props
+  }, /* @__PURE__ */ React5.createElement(ClickAwayListener, {
+    onClickAway: /* @__PURE__ */ __name(() => setOpen == null ? void 0 : setOpen(false), "onClickAway")
+  }, /* @__PURE__ */ React5.createElement(FlexGrowCol, {
+    role: "presentation",
+    justifyContent: "start",
+    p: 2,
+    rowGap: 2,
+    minWidth: "33vw"
+  }, /* @__PURE__ */ React5.createElement(FlexRow, {
+    alignContent: "start",
+    justifyContent: "start",
+    width: "100%"
+  }, /* @__PURE__ */ React5.createElement(IconButton, {
+    onClick: /* @__PURE__ */ __name(() => setOpen == null ? void 0 : setOpen(false), "onClick")
+  }, /* @__PURE__ */ React5.createElement(CloseIcon, null))), /* @__PURE__ */ React5.createElement(ModuleDescriptionBox, {
+    mod: node
+  }), children)));
+}, "NodeDrawer");
 
 // src/index.ts
 export * from "@xyo-network/react-node-context";
@@ -444,4 +582,4 @@ export {
   useWeakNodeFromNode,
   useWeakProvidedNode
 };
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.mjs.map