@xyo-network/react-node 2.75.3 → 2.75.4

package/package.json

@@ -12,8 +12,11 @@
   "dependencies": {
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
+    "@mui/icons-material": "^5.15.15",
+    "@mui/material": "^5.15.15",
+    "@mui/styles": "^5.15.15",
     "@mui/system": "^5.15.15",
-    "@mui/x-tree-view": "^6.17.0",
+    "@mui/x-tree-view": "^7.3.1",
     "@xylabs/exists": "^3.1.11",
     "@xylabs/logger": "^3.1.11",
     "@xylabs/object": "^3.1.11",
@@ -25,8 +28,8 @@
     "@xyo-network/module-model": "^2.99.1",
     "@xyo-network/node-model": "^2.99.1",
     "@xyo-network/payload-model": "^2.99.1",
-    "@xyo-network/react-node-context": "~2.75.3",
-    "@xyo-network/react-node-provider": "~2.75.3"
+    "@xyo-network/react-node-context": "~2.75.4",
+    "@xyo-network/react-node-provider": "~2.75.4"
   },
   "devDependencies": {
     "@storybook/react": "^7.6.18",
@@ -34,14 +37,11 @@
     "@xylabs/tsconfig-react": "^3.9.1",
     "@xyo-network/node-memory": "^2.99.1",
     "@xyo-network/payload-model": "^2.99.1",
-    "@xyo-network/react-storybook": "~2.75.3",
-    "@xyo-network/react-wallet": "~2.75.3",
+    "@xyo-network/react-storybook": "~2.75.4",
+    "@xyo-network/react-wallet": "~2.75.4",
     "typescript": "^5.4.5"
   },
   "peerDependencies": {
-    "@mui/icons-material": "^5",
-    "@mui/material": "^5",
-    "@mui/styles": "^5",
     "react": "^18",
     "react-dom": "^18"
   },
@@ -96,6 +96,6 @@
   },
   "sideEffects": false,
   "types": "dist/browser/index.d.ts",
-  "version": "2.75.3",
+  "version": "2.75.4",
   "type": "module"
 }

package/src/components/Node.stories.tsx

@@ -6,7 +6,7 @@ import { MemoryNodeProvider } from '@xyo-network/react-node-provider'
 import { DefaultSeedPhrase } from '@xyo-network/react-storybook'
 import { useWallet, WalletProvider } from '@xyo-network/react-wallet'
 
-import { useProvidedNode, useWeakProvidedNode } from '../hooks'
+import { useWeakProvidedNode } from '../hooks'
 import { NodeBox } from './Node'
 import { TestModule, TestModuleConfigSchema } from './TestModule'
 

package/src/components/NodeDrawer.tsx

@@ -4,14 +4,14 @@ import { FlexGrowCol, FlexRow } from '@xylabs/react-flexbox'
 import type { WithChildren } from '@xylabs/react-shared'
 import { useNodeDrawer } from '@xyo-network/react-node-provider'
 
-import { useProvidedNode } from '../hooks'
+import { useWeakProvidedNode } from '../hooks'
 import { ModuleDescriptionBox } from './render'
 
 export interface NodeDrawerProps extends WithChildren, Omit<DrawerProps, 'open'> {}
 
 export const NodeDrawer: React.FC<NodeDrawerProps> = ({ children, ...props }) => {
   const { open, setOpen } = useNodeDrawer()
-  const [node] = useProvidedNode()
+  const [node] = useWeakProvidedNode()
 
   return (
     <Drawer open={open ?? false} anchor="right" {...props}>

package/src/components/render/ModuleDescriptionBox.tsx

@@ -8,7 +8,7 @@ import { useRef } from 'react'
 import { RenderModule } from './RenderModule'
 
 export interface ModuleDescriptionProps extends FlexBoxProps {
-  module?: ModuleInstance | null
+  module?: WeakRef<ModuleInstance> | null
 }
 export const ModuleDescriptionBox: React.FC<ModuleDescriptionProps> = ({ module }) => {
   const idRef = useRef<{ idIncrementor: number; ids: string[] }>({ idIncrementor: 0, ids: [] })

package/src/components/render/RenderModule.tsx

@@ -9,22 +9,25 @@ interface RenderModuleProps {
     idIncrementor: number
     ids: string[]
   }>
-  module: ModuleInstance
+  module: WeakRef<ModuleInstance>
 }
 
 export const RenderModule: React.FC<RenderModuleProps> = ({ module, idRef }) => {
-  const { address, queries } = module ?? {}
   const [childModules, setChildModules] = useState<WeakRef<ModuleInstance>[]>()
 
   useAsyncEffect(
     // eslint-disable-next-line react-hooks/exhaustive-deps
     async (mounted) => {
-      const children = (await module.resolve('*')).filter((childModule) => childModule.address !== address)
-      if (mounted()) {
-        setChildModules(children.map((childModule) => new WeakRef(childModule)))
+      const moduleInstance = module.deref()
+      const { address } = moduleInstance ?? {}
+      if (moduleInstance) {
+        const children = (await moduleInstance.resolve('*')).filter((childModule) => childModule.address !== address)
+        if (mounted()) {
+          setChildModules(children.map((childModule) => new WeakRef(childModule)))
+        }
       }
     },
-    [module, address],
+    [module],
   )
 
   const increment = () => {
@@ -33,16 +36,19 @@ export const RenderModule: React.FC<RenderModuleProps> = ({ module, idRef }) =>
     return newId
   }
 
+  const moduleInstance = module.deref()
+  const { queries, address } = moduleInstance ?? {}
+
   return (
     <StyledAddressTreeItem nodeId={increment()} label={`address: ${address}`}>
-      {queries.map((query, index) => {
+      {queries?.map((query, index) => {
         return <TreeItem key={query} nodeId={increment()} label={`query : ${query}`} sx={{ mb: index === queries.length - 1 ? 1.5 : 0.5 }} />
       })}
       {childModules && childModules.length > 0 ?
         <TreeItem nodeId={increment()} label={'children'} sx={{ mb: 0.5 }}>
           {childModules.map((childModuleRef) => {
             const childModule = childModuleRef.deref()
-            return childModule ? <RenderModule key={childModule?.address} module={childModule} idRef={idRef} /> : null
+            return childModule ? <RenderModule key={childModule?.address} module={childModuleRef} idRef={idRef} /> : null
           })}
         </TreeItem>
       : null}