@dxos/plugin-navtree 0.8.4-main.84f28bd → 0.8.4-main.9735255

package/src/components/NavTree/NavTree.tsx

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { useMemo } from 'react';
+import React, { forwardRef, useMemo } from 'react';
 
 import { type TreeProps } from '@dxos/react-ui-list';
 import { Tabs } from '@dxos/react-ui-tabs';
@@ -10,27 +10,17 @@ import { Tabs } from '@dxos/react-ui-tabs';
 import { useLoadDescendents } from '../../hooks';
 import { type NavTreeItemGraphNode } from '../../types';
 import { useNavTreeContext } from '../NavTreeContext';
-import { L0Menu, L1Panels, type L1PanelsProps } from '../Sidebar';
+import { L0Menu, L1Tabs, type L1TabsProps } from '../Sidebar';
 
 export const NAV_TREE_ITEM = 'NavTreeItem';
 
-export type NavTreeProps = Pick<TreeProps<NavTreeItemGraphNode>, 'id' | 'root'> & Pick<L1PanelsProps, 'open'>;
+export type NavTreeProps = Pick<TreeProps<NavTreeItemGraphNode>, 'id' | 'root'> & Pick<L1TabsProps, 'open'>;
 
-export const NavTree = ({ id, root, ...props }: NavTreeProps) => {
+export const NavTree = forwardRef<HTMLDivElement, NavTreeProps>(({ id, root, ...props }, forwardedRef) => {
   const { tab, useItems, onBack } = useNavTreeContext();
   const topLevelActions = useItems(root, { disposition: 'menu', sort: true });
-  const topLevelCollections = useItems(root, { disposition: 'collection' });
   const topLevelWorkspaces = useItems(root, { disposition: 'workspace' });
-  const topLevelNavigation = useItems(root, { disposition: 'navigation' });
-  const l0Items = useMemo(
-    () => [
-      // prettier-ignore
-      ...topLevelCollections,
-      ...topLevelWorkspaces,
-      ...topLevelNavigation,
-    ],
-    [topLevelCollections, topLevelWorkspaces, topLevelNavigation],
-  );
+  const l0Items = topLevelWorkspaces;
   const pinnedItems = useItems(root, { disposition: 'pin-end', sort: true });
   const userAccountItem = useItems(root, { disposition: 'user-account' })[0];
   const topLevelItems = useMemo(
@@ -47,7 +37,11 @@ export const NavTree = ({ id, root, ...props }: NavTreeProps) => {
   const path = useMemo(() => [id], [id]);
 
   return (
-    <Tabs.Root value={tab} orientation='vertical' verticalVariant='stateless' classNames='relative'>
+    // TODO(thure): `Tabs.Root` forces all items that should be able to receive focus to use `Tabs.Tab(Primitive)` since
+    //  it uses RovingFocus and doesn’t support moving focus to an item that is not a tab. Assess whether this situation
+    //  should change including whether it should motivate a change in the design/taxonomy, or if this means this should
+    //  not use `react-ui-tabs` at all.
+    <Tabs.Root value={tab} orientation='vertical' verticalVariant='stateless' classNames='relative' ref={forwardedRef}>
       <L0Menu
         menuActions={topLevelActions}
         topLevelItems={l0Items}
@@ -56,7 +50,7 @@ export const NavTree = ({ id, root, ...props }: NavTreeProps) => {
         path={path}
         parent={root}
       />
-      <L1Panels topLevelItems={topLevelItems} path={path} currentItemId={tab} onBack={onBack} {...props} />
+      <L1Tabs topLevelItems={topLevelItems} path={path} currentItemId={tab} onBack={onBack} {...props} />
     </Tabs.Root>
   );
-};
+});

package/src/components/NavTreeContainer.tsx

@@ -3,66 +3,85 @@
 //
 
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-import { extractInstruction, type Instruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
-import { untracked } from '@preact/signals-core';
-import React, { memo, useCallback, useEffect, useMemo } from 'react';
-
-import {
-  createIntent,
-  LayoutAction,
-  Surface,
-  useAppGraph,
-  useCapability,
-  useIntentDispatcher,
-  useLayout,
-} from '@dxos/app-framework';
-import { isAction, isActionLike, ROOT_ID, type Node, type ReadableGraph } from '@dxos/app-graph';
+import { type Instruction, extractInstruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
+import React, { forwardRef, memo, useCallback, useEffect, useMemo } from 'react';
+
+import { Common } from '@dxos/app-framework';
+import { Surface, useAppGraph, useLayout, useOperationInvoker } from '@dxos/app-framework/react';
 import { PLANK_COMPANION_TYPE } from '@dxos/plugin-deck/types';
-import { useConnections } from '@dxos/plugin-graph';
+import { Graph, Node, useActionRunner } from '@dxos/plugin-graph';
+import { useConnections, useActions as useGraphActions } from '@dxos/plugin-graph';
 import { useMediaQuery, useSidebars } from '@dxos/react-ui';
-import { isTreeData, type TreeItemDataProps, type TreeData } from '@dxos/react-ui-list';
-import { mx } from '@dxos/react-ui-theme';
+import { type TreeData, type TreeItemDataProps, isTreeData } from '@dxos/react-ui-list';
+import { mx } from '@dxos/ui-theme';
 import { arrayMove, byPosition } from '@dxos/util';
 
+import { useIsAlternateTree, useIsCurrent, useIsOpen, useNavTreeState } from '../hooks';
+import { meta } from '../meta';
+import { type FlattenedActions, type NavTreeItemGraphNode } from '../types';
+import { getChildren, getParent, resolveMigrationOperation } from '../util';
+
 import { NAV_TREE_ITEM, NavTree } from './NavTree';
 import { NavTreeContext } from './NavTreeContext';
 import { type NavTreeContextValue } from './types';
-import { NavTreeCapabilities } from '../capabilities';
-import { NAVTREE_PLUGIN } from '../meta';
-import { type NavTreeItemGraphNode } from '../types';
-import { getChildren, getParent, getActions as naturalGetActions, resolveMigrationOperation } from '../util';
 
 // TODO(thure): Is NavTree truly authoritative in this regard?
 export const NODE_TYPE = 'dxos/app-graph/node';
 
-const renderItemEnd = ({ node, open }: { node: Node; open: boolean }) => (
+const renderItemEnd = ({ node, open }: { node: Node.Node; open: boolean }) => (
   <Surface role='navtree-item-end' data={{ id: node.id, subject: node.data, open }} limit={1} />
 );
 
-const getChildrenFilter = (node: Node): node is Node =>
-  untracked(() => !isActionLike(node) && node.type !== PLANK_COMPANION_TYPE);
+const getChildrenFilter = (node: Node.Node): node is Node.Node =>
+  !Node.isActionLike(node) && node.type !== PLANK_COMPANION_TYPE && node.properties.disposition !== 'hidden';
 
-const filterItems = (node: Node, disposition?: string) => {
+const filterItems = (node: Node.Node, disposition?: string) => {
   if (!disposition && (node.properties.disposition === 'hidden' || node.properties.disposition === 'alternate-tree')) {
     return false;
   } else if (!disposition) {
-    const action = isAction(node);
+    const action = Node.isAction(node);
     return !action || node.properties.disposition === 'item';
   } else {
     return node.properties.disposition === disposition;
   }
 };
 
-const getItems = (graph: ReadableGraph, node?: Node, disposition?: string) => {
-  return graph.getConnections(node?.id ?? ROOT_ID, 'outbound').filter((node) => filterItems(node, disposition));
+const getItems = (graph: Graph.ReadableGraph, node?: Node.Node, disposition?: string) => {
+  return Graph.getConnections(graph, node?.id ?? Node.RootId, 'outbound').filter((node) =>
+    filterItems(node, disposition),
+  );
+};
+
+const useItems = (node?: Node.Node, options?: { disposition?: string; sort?: boolean }) => {
+  const { graph } = useAppGraph();
+  const connections = useConnections(graph, node?.id ?? Node.RootId);
+  const filtered = connections.filter((node) => filterItems(node, options?.disposition));
+  return options?.sort ? filtered.toSorted((a, b) => byPosition(a.properties, b.properties)) : filtered;
 };
 
-const useItems = (node?: Node, options?: { disposition?: string; sort?: boolean }) => {
+const useActions = (node: Node.Node): FlattenedActions => {
   const { graph } = useAppGraph();
-  const connections = useConnections(graph, node?.id ?? ROOT_ID).filter((node) =>
-    filterItems(node, options?.disposition),
+  const actions = useGraphActions(graph, node.id);
+
+  return useMemo(
+    () =>
+      actions.reduce(
+        (acc: FlattenedActions, arg) => {
+          if (arg.properties.disposition === 'item') {
+            return acc;
+          }
+
+          acc.actions.push(arg);
+          if (!Node.isAction(arg)) {
+            const actionGroup = Graph.getActions(graph, arg.id);
+            acc.groupedActions[arg.id] = actionGroup;
+          }
+          return acc;
+        },
+        { actions: [], groupedActions: {} },
+      ),
+    [actions],
   );
-  return options?.sort ? connections.toSorted((a, b) => byPosition(a.properties, b.properties)) : connections;
 };
 
 export type NavTreeContainerProps = {
@@ -70,245 +89,249 @@ export type NavTreeContainerProps = {
   topbar?: boolean;
 } & Pick<NavTreeContextValue, 'tab'>;
 
-export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeContainerProps) => {
-  const [isLg] = useMediaQuery('lg', { ssr: false });
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
-  const { graph } = useAppGraph();
-  const { isOpen, isCurrent, isAlternateTree, setItem } = useCapability(NavTreeCapabilities.State);
-  const layout = useLayout();
-  const { navigationSidebarState } = useSidebars(NAVTREE_PLUGIN);
-
-  const getActions = useCallback((node: Node) => naturalGetActions(graph, node), [graph]);
-
-  const getProps = useCallback(
-    (node: Node, path: string[]): TreeItemDataProps => {
-      const children = getChildren(graph, node, path).filter(getChildrenFilter);
-      const parentOf =
-        children.length > 0 ? children.map(({ id }) => id) : node.properties.role === 'branch' ? [] : undefined;
-      return {
-        id: node.id,
-        label: node.properties.label ?? node.id,
-        parentOf,
-        icon: node.properties.icon,
-        disabled: node.properties.disabled,
-        className: mx(node.properties.modified && 'italic', node.properties.className),
-        headingClassName: node.properties.headingClassName,
-        testId: node.properties.testId,
-      };
-    },
-    [graph],
-  );
+export const NavTreeContainer$ = forwardRef<HTMLDivElement, NavTreeContainerProps>(
+  ({ tab, popoverAnchorId, topbar }, forwardedRef) => {
+    const [isLg] = useMediaQuery('lg');
+    const { invokeSync, invokePromise } = useOperationInvoker();
+    const runAction = useActionRunner();
+    const { graph } = useAppGraph();
+    const { getItem, setItem } = useNavTreeState();
+    const layout = useLayout();
+    const { navigationSidebarState } = useSidebars(meta.id);
 
-  const loadDescendents = useCallback(
-    (node: Node) => {
-      graph.expand(node.id, 'outbound');
-      // Load one level deeper, which resolves some juddering observed on open/close.
-      graph.getConnections(node.id, 'outbound').forEach((child) => {
-        graph.expand(child.id, 'outbound');
-      });
-    },
-    [graph],
-  );
+    const getProps = useCallback(
+      (node: Node.Node, path: string[]): TreeItemDataProps => {
+        const children = getChildren(graph, node, path).filter(getChildrenFilter);
+        const parentOf =
+          children.length > 0 ? children.map(({ id }) => id) : node.properties.role === 'branch' ? [] : undefined;
+        return {
+          id: node.id,
+          parentOf,
+          disabled: node.properties.disabled,
+          label: node.properties.label ?? node.id,
+          className: mx(node.properties.className, node.properties.modified && 'italic'), // TODO(burdon): Italic?
+          headingClassName: node.properties.headingClassName,
+          icon: node.properties.icon,
+          iconHue: node.properties.iconHue,
+          testId: node.properties.testId,
+        };
+      },
+      [graph],
+    );
 
-  const handleOpenChange = useCallback(
-    ({ item: { id }, path, open }: { item: Node; path: string[]; open: boolean }) => {
-      // TODO(thure): This might become a localstorage leak; openItemIds that no longer exist should be removed from this map.
-      setItem(path, 'open', open);
-      graph.expand(id, 'outbound');
-    },
-    [graph],
-  );
+    const loadDescendents = useCallback(
+      (node: Node.Node) => {
+        Graph.expand(graph, node.id, 'outbound');
+        // Load one level deeper, which resolves some juddering observed on open/close.
+        Graph.getConnections(graph, node.id, 'outbound').forEach((child) => {
+          Graph.expand(graph, child.id, 'outbound');
+        });
+      },
+      [graph],
+    );
+
+    const handleOpenChange = useCallback(
+      ({ item: { id }, path, open }: { item: Node.Node; path: string[]; open: boolean }) => {
+        // TODO(thure): This might become a localstorage leak; openItemIds that no longer exist should be removed from this map.
+        setItem(path, 'open', open);
+        Graph.expand(graph, id, 'outbound');
+      },
+      [graph],
+    );
 
-  const handleTabChange = useCallback(
-    async (node: NavTreeItemGraphNode) => {
-      await dispatch(
-        createIntent(LayoutAction.UpdateSidebar, {
-          part: 'sidebar',
-          options: {
-            state:
-              node.id === tab
-                ? navigationSidebarState === 'expanded'
-                  ? isLg
-                    ? 'collapsed'
-                    : 'closed'
-                  : 'expanded'
-                : 'expanded',
-          },
-        }),
-      );
-
-      await dispatch(createIntent(LayoutAction.SwitchWorkspace, { part: 'workspace', subject: node.id }));
-
-      // Open the first item if the workspace is empty.
-      if (layout.active.length === 0) {
-        const [item] = getItems(graph, node).filter((node) => !isActionLike(node));
-        if (item && item.data) {
-          await dispatch(createIntent(LayoutAction.Open, { part: 'main', subject: [item.id] }));
+    const handleTabChange = useCallback(
+      (node: NavTreeItemGraphNode) => {
+        invokeSync(Common.LayoutOperation.UpdateSidebar, {
+          state:
+            node.id === tab
+              ? navigationSidebarState === 'expanded'
+                ? isLg
+                  ? 'collapsed'
+                  : 'closed'
+                : 'expanded'
+              : 'expanded',
+        });
+
+        invokeSync(Common.LayoutOperation.SwitchWorkspace, { subject: node.id });
+
+        // Open the first item if the workspace is empty.
+        if (layout.active.length === 0) {
+          const [item] = getItems(graph, node).filter((node) => !Node.isActionLike(node));
+          if (item && item.data) {
+            invokeSync(Common.LayoutOperation.Open, { subject: [item.id] });
+          }
         }
-      }
-    },
-    [dispatch, layout.active, tab, navigationSidebarState, isLg],
-  );
+      },
+      [invokeSync, layout.active, tab, navigationSidebarState, isLg],
+    );
 
-  const canDrop = useCallback(({ source, target }: { source: TreeData; target: TreeData }) => {
-    return target.item.properties.canDrop?.(source) ?? false;
-  }, []);
-
-  const handleSelect = useCallback(
-    ({ item: node, path, option }: { item: Node; path: string[]; option: boolean }) => {
-      if (!node.data) {
-        return;
-      }
-
-      if (isAction(node)) {
-        const [parent] = graph.getConnections(node.id, 'inbound');
-        void (parent && node.data({ parent, caller: NAV_TREE_ITEM }));
-        return;
-      }
-
-      const current = isCurrent(path, node);
-      if (!current) {
-        void dispatch(
-          createIntent(LayoutAction.Open, {
-            part: 'main',
-            subject: [node.id],
-            options: { key: node.properties.key },
-          }),
-        );
-      } else if (option) {
-        void dispatch(
-          createIntent(LayoutAction.Close, { part: 'main', subject: [node.id], options: { state: false } }),
-        );
-      } else {
-        void dispatch(createIntent(LayoutAction.ScrollIntoView, { part: 'current', subject: node.id }));
-      }
-
-      const defaultAction = graph.getActions(node.id).find((action) => action.properties?.disposition === 'default');
-      if (isAction(defaultAction)) {
-        void (defaultAction.data as () => void)();
-      }
-
-      if (!isLg) {
-        void dispatch(createIntent(LayoutAction.UpdateSidebar, { part: 'sidebar', options: { state: 'closed' } }));
-      }
-    },
-    [graph, dispatch, isCurrent, isLg],
-  );
+    const blockInstruction = useCallback(
+      ({ instruction, source, target }: { instruction: Instruction; source: TreeData; target: TreeData }) => {
+        return target.item.properties.blockInstruction?.(source, instruction) ?? false;
+      },
+      [],
+    );
 
-  const handleBack = useCallback(
-    () => dispatch(createIntent(LayoutAction.RevertWorkspace, { part: 'workspace', options: { revert: true } })),
-    [dispatch],
-  );
+    const canDrop = useCallback(({ source, target }: { source: TreeData; target: TreeData }) => {
+      return target.item.properties.canDrop?.(source) ?? false;
+    }, []);
+
+    const canSelect = useCallback(({ item }: { item: Node.Node }) => {
+      return item.properties.selectable ?? true;
+    }, []);
 
-  // TODO(wittjosiah): Factor out hook.
-  useEffect(() => {
-    return monitorForElements({
-      canMonitor: ({ source }) => isTreeData(source.data),
-      onDrop: ({ location, source }) => {
-        // Didn't drop on anything.
-        if (!location.current.dropTargets.length) {
+    const handleSelect = useCallback(
+      ({ item: node, path, option }: { item: Node.Node; path: string[]; option: boolean }) => {
+        if (!node.data) {
           return;
         }
-        const target = location.current.dropTargets[0];
-        const instruction: Instruction | null = extractInstruction(target.data);
-        if (instruction !== null && instruction.type !== 'instruction-blocked') {
-          const sourceNode = source.data.item as NavTreeItemGraphNode;
-          const targetNode = target.data.item as NavTreeItemGraphNode;
-          const sourcePath = source.data.path as string[];
-          const targetPath = target.data.path as string[];
-          const operation =
-            sourcePath.slice(0, -1).join() === targetPath.slice(0, -1).join() && instruction.type !== 'make-child'
-              ? 'rearrange'
-              : resolveMigrationOperation(graph, sourceNode, targetPath, targetNode);
-          const sourceParent = getParent(graph, sourceNode, sourcePath);
-          const targetParent = getParent(graph, targetNode, targetPath);
-          const sourceItems = getItems(graph, sourceParent);
-          const targetItems = getItems(graph, targetParent);
-          const sourceIndex = sourceItems.findIndex(({ id }) => id === sourceNode.id);
-          const targetIndex = targetItems.findIndex(({ id }) => id === targetNode.id);
-          const migrationIndex =
-            instruction.type === 'make-child'
-              ? undefined
-              : instruction.type === 'reorder-below'
-                ? targetIndex + 1
-                : targetIndex;
-          switch (operation) {
-            case 'rearrange': {
-              const nextItems = sourceItems.map(({ data }) => data);
-              arrayMove(nextItems, sourceIndex, targetIndex);
-              void sourceParent?.properties.onRearrangeChildren?.(nextItems);
-              break;
-            }
-            case 'copy': {
-              const target = instruction.type === 'make-child' ? targetNode : targetParent;
-              void target?.properties.onCopy?.(sourceNode, migrationIndex);
-              break;
-            }
-            case 'transfer': {
-              const target = instruction.type === 'make-child' ? targetNode : targetParent;
-              if (!target?.properties.onTransferStart || !sourceParent?.properties.onTransferEnd) {
+
+        if (Node.isAction(node)) {
+          const [parent] = Graph.getConnections(graph, node.id, 'inbound');
+          if (parent) {
+            void runAction(node, { parent, caller: NAV_TREE_ITEM });
+          }
+          return;
+        }
+
+        const current = getItem(path).current;
+        if (!current) {
+          invokeSync(Common.LayoutOperation.Open, { subject: [node.id], key: node.properties.key });
+        } else if (option) {
+          invokeSync(Common.LayoutOperation.Close, { subject: [node.id] });
+        } else {
+          void invokePromise(Common.LayoutOperation.ScrollIntoView, { subject: node.id });
+        }
+
+        const defaultAction = Graph.getActions(graph, node.id).find(
+          (action) => action.properties?.disposition === 'default',
+        );
+        if (Node.isAction(defaultAction)) {
+          void runAction(defaultAction);
+        }
+
+        if (!isLg) {
+          invokeSync(Common.LayoutOperation.UpdateSidebar, { state: 'closed' });
+        }
+      },
+      [graph, invokeSync, invokePromise, getItem, isLg, runAction],
+    );
+
+    const handleBack = useCallback(() => invokeSync(Common.LayoutOperation.RevertWorkspace), [invokeSync]);
+
+    // TODO(wittjosiah): Factor out hook.
+    useEffect(() => {
+      return monitorForElements({
+        canMonitor: ({ source }) => isTreeData(source.data),
+        onDrop: ({ location, source }) => {
+          // Didn't drop on anything.
+          if (!location.current.dropTargets.length) {
+            return;
+          }
+          const target = location.current.dropTargets[0];
+          const instruction: Instruction | null = extractInstruction(target.data);
+          if (instruction !== null && instruction.type !== 'instruction-blocked') {
+            const sourceNode = source.data.item as NavTreeItemGraphNode;
+            const targetNode = target.data.item as NavTreeItemGraphNode;
+            const sourcePath = source.data.path as string[];
+            const targetPath = target.data.path as string[];
+            const operation =
+              sourcePath.slice(0, -1).join() === targetPath.slice(0, -1).join() && instruction.type !== 'make-child'
+                ? 'rearrange'
+                : resolveMigrationOperation(graph, sourceNode, targetPath, targetNode);
+            const sourceParent = getParent(graph, sourceNode, sourcePath);
+            const targetParent = getParent(graph, targetNode, targetPath);
+            const sourceItems = getItems(graph, sourceParent);
+            const targetItems = getItems(graph, targetParent);
+            const sourceIndex = sourceItems.findIndex(({ id }) => id === sourceNode.id);
+            const targetIndex = targetItems.findIndex(({ id }) => id === targetNode.id);
+            const migrationIndex =
+              instruction.type === 'make-child'
+                ? undefined
+                : instruction.type === 'reorder-below'
+                  ? targetIndex + 1
+                  : targetIndex;
+            switch (operation) {
+              case 'rearrange': {
+                const nextItems = sourceItems.map(({ data }) => data);
+                arrayMove(nextItems, sourceIndex, targetIndex);
+                void sourceNode.properties.onRearrange?.(nextItems);
+                break;
+              }
+              case 'copy': {
+                const target = instruction.type === 'make-child' ? targetNode : targetParent;
+                void target?.properties.onCopy?.(sourceNode, migrationIndex);
+                break;
+              }
+              case 'transfer': {
+                const target = instruction.type === 'make-child' ? targetNode : targetParent;
+                if (!target?.properties.onTransferStart || !sourceParent?.properties.onTransferEnd) {
+                  break;
+                }
+                void target?.properties.onTransferStart(sourceNode, migrationIndex);
+                void sourceParent?.properties.onTransferEnd?.(sourceNode, target);
                 break;
               }
-              void target?.properties.onTransferStart(sourceNode, migrationIndex);
-              void sourceParent?.properties.onTransferEnd?.(sourceNode, target);
-              break;
             }
           }
-        }
+        },
+      });
+    }, [graph]);
+
+    const setAlternateTree = useCallback(
+      (path: string[], open: boolean) => {
+        setItem(path, 'alternateTree', open);
       },
-    });
-  }, [graph]);
-
-  const setAlternateTree = useCallback(
-    (path: string[], open: boolean) => {
-      setItem(path, 'alternateTree', open);
-    },
-    [setItem],
-  );
+      [setItem],
+    );
 
-  const navTreeContextValue = useMemo(
-    () => ({
-      useItems,
-      tab,
-      getActions,
-      loadDescendents,
-      renderItemEnd,
-      popoverAnchorId,
-      topbar,
-      getProps,
-      isCurrent,
-      isOpen,
-      canDrop,
-      isAlternateTree,
-      setAlternateTree,
-      onTabChange: handleTabChange,
-      onOpenChange: handleOpenChange,
-      onSelect: handleSelect,
-      onBack: handleBack,
-    }),
-    [
-      tab,
-      getActions,
-      loadDescendents,
-      renderItemEnd,
-      popoverAnchorId,
-      topbar,
-      getProps,
-      isCurrent,
-      isOpen,
-      canDrop,
-      isAlternateTree,
-      setAlternateTree,
-      handleTabChange,
-      handleOpenChange,
-      handleSelect,
-      handleBack,
-    ],
-  );
+    const navTreeContextValue = useMemo(
+      () => ({
+        blockInstruction,
+        canDrop,
+        canSelect,
+        getProps,
+        useIsAlternateTree,
+        useIsCurrent,
+        useIsOpen,
+        loadDescendents,
+        onBack: handleBack,
+        onOpenChange: handleOpenChange,
+        onSelect: handleSelect,
+        onTabChange: handleTabChange,
+        popoverAnchorId,
+        renderItemEnd,
+        setAlternateTree,
+        tab,
+        topbar,
+        useActions,
+        useItems,
+      }),
+      [
+        blockInstruction,
+        canDrop,
+        canSelect,
+        getProps,
+        handleBack,
+        handleOpenChange,
+        handleSelect,
+        handleTabChange,
+        loadDescendents,
+        popoverAnchorId,
+        renderItemEnd,
+        setAlternateTree,
+        tab,
+        topbar,
+        useActions,
+      ],
+    );
 
-  return (
-    <NavTreeContext.Provider value={navTreeContextValue}>
-      <NavTree id={ROOT_ID} root={graph.root} open={layout.sidebarOpen} />
-    </NavTreeContext.Provider>
-  );
-});
+    return (
+      <NavTreeContext.Provider value={navTreeContextValue}>
+        <NavTree id={Node.RootId} root={Graph.getRoot(graph)} open={layout.sidebarOpen} ref={forwardedRef} />
+      </NavTreeContext.Provider>
+    );
+  },
+);
+
+export const NavTreeContainer = memo(NavTreeContainer$);