@dxos/plugin-navtree 0.8.2-staging.7ac8446 → 0.8.2

package/src/components/CommandsDialog/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './CommandsDialog';
+export * from './CommandsTrigger';

package/src/components/NavTree/NavTree.stories.tsx

@@ -0,0 +1,159 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type StoryObj, type Meta } from '@storybook/react';
+import { Schema } from 'effect';
+import React from 'react';
+
+import {
+  Capabilities,
+  IntentPlugin,
+  LayoutAction,
+  SettingsPlugin,
+  contributes,
+  createResolver,
+  defineCapability,
+  useCapability,
+} from '@dxos/app-framework';
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { live } from '@dxos/live-object';
+import { AttentionPlugin } from '@dxos/plugin-attention';
+import { GraphPlugin } from '@dxos/plugin-graph';
+import { StorybookLayoutPlugin } from '@dxos/plugin-storybook-layout';
+import { ThemePlugin } from '@dxos/plugin-theme';
+import { faker } from '@dxos/random';
+import { IconButton, Input, Main, Toolbar } from '@dxos/react-ui';
+import { useAttendableAttributes, useAttention } from '@dxos/react-ui-attention';
+import { Stack, StackItem } from '@dxos/react-ui-stack';
+import { defaultTx, mx } from '@dxos/react-ui-theme';
+import { withLayout } from '@dxos/storybook-utils';
+
+import { NavTreePlugin } from '../../NavTreePlugin';
+import { storybookGraphBuilders } from '../../testing';
+import translations from '../../translations';
+import { NavTreeContainer } from '../NavTreeContainer';
+
+faker.seed(1234);
+
+const StoryState = defineCapability<{ tab: string }>('story-state');
+
+// TODO(burdon): Fix outline (e.g., button in sidebar nav is clipped when focused).
+// TODO(burdon): Consider similar containment of: Table, Sheet, Kanban Column, Form, etc.
+
+const container = 'flex flex-col grow gap-2 p-4 rounded-md';
+
+// TODO(burdon): Factor out PlankHeader.
+const StoryPlankHeading = ({ attendableId }: { attendableId: string }) => {
+  const { hasAttention } = useAttention(attendableId);
+  console.log('hasAttention', hasAttention);
+  return (
+    <div className='flex p-1 items-center border-b border-separator'>
+      <IconButton
+        density='coarse'
+        icon='ph--atom--regular'
+        label='Test'
+        iconOnly
+        variant={hasAttention ? 'primary' : 'ghost'}
+        classNames='is-[--rail-action] bs-[--rail-action]'
+      />
+      <StackItem.ResizeHandle />
+    </div>
+  );
+};
+
+const StoryPlank = ({ attendableId }: { attendableId: string }) => {
+  const attentionAttrs = useAttendableAttributes(attendableId);
+
+  return (
+    <StackItem.Root
+      item={{ id: attendableId }}
+      {...attentionAttrs}
+      classNames='bg-baseSurface border-ie border-separator'
+      size={30}
+    >
+      <StoryPlankHeading attendableId={attendableId} />
+      <StackItem.Content toolbar>
+        <Toolbar.Root classNames='border-b border-separator'>
+          <Toolbar.Button>Test</Toolbar.Button>
+        </Toolbar.Root>
+
+        <div className={mx(container, 'm-2 bg-activeSurface')}>
+          <Input.Root>
+            <Input.Label>Level 1 (group)</Input.Label>
+          </Input.Root>
+          <div className={mx(container, 'bg-baseSurface')}>
+            <Input.Root>
+              <Input.Label>Level 2 (base)</Input.Label>
+              <Input.TextArea placeholder='Enter text' />
+            </Input.Root>
+          </div>
+        </div>
+      </StackItem.Content>
+    </StackItem.Root>
+  );
+};
+
+const DefaultStory = () => {
+  const state = useCapability(StoryState);
+
+  return (
+    <Main.Root complementarySidebarState='closed'>
+      <Main.NavigationSidebar label='Navigation' classNames='grid'>
+        <NavTreeContainer tab={state.tab} />
+      </Main.NavigationSidebar>
+      <Main.Content bounce handlesFocus>
+        <Stack orientation='horizontal' size='contain'>
+          <StoryPlank attendableId='space-0:object-0' />
+          <StoryPlank attendableId='space-0:object-1' />
+        </Stack>
+      </Main.Content>
+    </Main.Root>
+  );
+};
+
+const meta: Meta<typeof NavTreeContainer> = {
+  title: 'plugins/plugin-navtree/NavTree',
+  component: NavTreeContainer,
+  render: DefaultStory,
+  decorators: [
+    withPluginManager({
+      plugins: [
+        ThemePlugin({ tx: defaultTx }),
+        StorybookLayoutPlugin({ initialState: { sidebarState: 'expanded' } }),
+        GraphPlugin(),
+        IntentPlugin(),
+        SettingsPlugin(),
+        AttentionPlugin(),
+        NavTreePlugin(),
+      ],
+      capabilities: (context) => [
+        contributes(StoryState, live({ tab: 'space-0' })),
+        contributes(Capabilities.AppGraphBuilder, storybookGraphBuilders),
+        contributes(Capabilities.IntentResolver, [
+          createResolver({
+            intent: LayoutAction.UpdateLayout,
+            filter: (data): data is Schema.Schema.Type<typeof LayoutAction.SwitchWorkspace.fields.input> =>
+              Schema.is(LayoutAction.SwitchWorkspace.fields.input)(data),
+            resolve: ({ subject }) => {
+              const state = context.getCapability(StoryState);
+              state.tab = subject;
+            },
+          }),
+        ]),
+      ],
+    }),
+    withLayout({ fullscreen: true }),
+  ],
+  parameters: {
+    translations,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof NavTreeContainer>;
+
+export const Default: Story = {};

package/src/components/NavTree/NavTree.tsx

@@ -0,0 +1,62 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useMemo } from 'react';
+
+import { type TreeProps } from '@dxos/react-ui-list';
+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';
+
+export const NAV_TREE_ITEM = 'NavTreeItem';
+
+export type NavTreeProps = Pick<TreeProps<NavTreeItemGraphNode>, 'id' | 'root'> & Pick<L1PanelsProps, 'open'>;
+
+export const NavTree = ({ id, root, ...props }: NavTreeProps) => {
+  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 pinnedItems = useItems(root, { disposition: 'pin-end', sort: true });
+  const userAccountItem = useItems(root, { disposition: 'user-account' })[0];
+  const topLevelItems = useMemo(
+    () => [
+      // prettier-ignore
+      ...l0Items,
+      ...pinnedItems,
+      ...(userAccountItem ? [userAccountItem] : []),
+    ],
+    [l0Items, pinnedItems, userAccountItem],
+  );
+
+  useLoadDescendents(root);
+  const path = useMemo(() => [id], [id]);
+
+  return (
+    <Tabs.Root value={tab} orientation='vertical' verticalVariant='stateless' classNames='relative'>
+      <L0Menu
+        menuActions={topLevelActions}
+        topLevelItems={l0Items}
+        pinnedItems={pinnedItems}
+        userAccountItem={userAccountItem}
+        path={path}
+        parent={root}
+      />
+      <L1Panels topLevelItems={topLevelItems} path={path} currentItemId={tab} onBack={onBack} {...props} />
+    </Tabs.Root>
+  );
+};

package/src/components/NavTree/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './NavTree';

package/src/components/NavTreeContainer.tsx

@@ -16,28 +16,22 @@ import {
   useIntentDispatcher,
   useLayout,
 } from '@dxos/app-framework';
-import { isAction, isActionLike, type Node } from '@dxos/app-graph';
+import { isAction, isActionLike, type ReadableGraph, ROOT_ID, type Node } from '@dxos/app-graph';
 import { PLANK_COMPANION_TYPE } from '@dxos/plugin-deck/types';
+import { useConnections } from '@dxos/plugin-graph';
 import { isEchoObject, isSpace } from '@dxos/react-client/echo';
-import { useMediaQuery } from '@dxos/react-ui';
+import { useMediaQuery, useSidebars } from '@dxos/react-ui';
 import { isTreeData, type TreeData, type PropsFromTreeItem } from '@dxos/react-ui-list';
 import { mx } from '@dxos/react-ui-theme';
-import { arrayMove } from '@dxos/util';
+import { arrayMove, byPosition } from '@dxos/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 {
-  expandActions,
-  expandChildren,
-  getActions as naturalGetActions,
-  getChildren,
-  getParent,
-  resolveMigrationOperation,
-  expandChildrenAndActions,
-} from '../util';
+import { getActions as naturalGetActions, getChildren, getParent, resolveMigrationOperation } from '../util';
 
 // TODO(thure): Is NavTree truly authoritative in this regard?
 export const NODE_TYPE = 'dxos/app-graph/node';
@@ -49,6 +43,29 @@ const renderItemEnd = ({ node, open }: { node: Node; open: boolean }) => (
 const getChildrenFilter = (node: Node): node is Node =>
   untracked(() => !isActionLike(node) && node.type !== PLANK_COMPANION_TYPE);
 
+const filterItems = (node: Node, disposition?: string) => {
+  if (!disposition && (node.properties.disposition === 'hidden' || node.properties.disposition === 'alternate-tree')) {
+    return false;
+  } else if (!disposition) {
+    const action = 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 useItems = (node?: Node, options?: { disposition?: string; sort?: boolean }) => {
+  const { graph } = useAppGraph();
+  const connections = useConnections(graph, node?.id ?? ROOT_ID).filter((node) =>
+    filterItems(node, options?.disposition),
+  );
+  return options?.sort ? connections.toSorted((a, b) => byPosition(a.properties, b.properties)) : connections;
+};
+
 export type NavTreeContainerProps = {
   popoverAnchorId?: string;
   topbar?: boolean;
@@ -58,34 +75,15 @@ export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeC
   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 { isOpen, isCurrent, setItem } = useCapability(NavTreeCapabilities.State);
+  const { navigationSidebarState } = useSidebars(NAVTREE_PLUGIN);
 
   const getActions = useCallback((node: Node) => naturalGetActions(graph, node), [graph]);
 
-  const getItems = useCallback(
-    (node?: Node, disposition?: string) => {
-      return graph.nodes(node ?? graph.root, {
-        filter: (node): node is Node => {
-          return untracked(() => {
-            if (node.properties.disposition === 'hidden') {
-              return false;
-            } else if (!disposition) {
-              const action = isAction(node);
-              return !action || node.properties.disposition === 'item';
-            } else {
-              return node.properties.disposition === disposition;
-            }
-          });
-        },
-      });
-    },
-    [graph],
-  );
-
   const getProps = useCallback(
     (node: Node, path: string[]): PropsFromTreeItem => {
-      const children = getChildren(graph, node, getChildrenFilter, path);
+      const children = getChildren(graph, node, path).filter(getChildrenFilter);
       const parentOf =
         children.length > 0 ? children.map(({ id }) => id) : node.properties.role === 'branch' ? [] : undefined;
       return {
@@ -104,49 +102,59 @@ export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeC
 
   const loadDescendents = useCallback(
     (node: Node) => {
-      void expandActions(graph, node);
-      if (!isActionLike(node)) {
-        void expandChildren(graph, node).then(() =>
-          // Load one level deeper, which resolves some juddering observed on open/close.
-          Promise.all(
-            getChildren(graph, node).flatMap((child) => [expandActions(graph, child), expandChildren(graph, child)]),
-          ),
-        );
-      }
+      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 onOpenChange = useCallback(
+  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);
-
-      if (graph) {
-        const node = graph.findNode(id);
-        return node && expandChildrenAndActions(graph, node as NavTreeItemGraphNode);
-      }
+      graph.expand(id, 'outbound');
     },
     [graph],
   );
 
-  const onTabChange = useCallback(
+  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(node).filter((node) => !isActionLike(node));
+        const [item] = getItems(graph, node).filter((node) => !isActionLike(node));
         if (item && item.data) {
           await dispatch(createIntent(LayoutAction.Open, { part: 'main', subject: [item.id] }));
         }
       }
     },
-    [dispatch, layout],
+    [dispatch, layout.active, tab, navigationSidebarState, isLg],
   );
 
   const canDrop = useCallback((source: TreeData, target: TreeData) => {
     const sourceNode = source.item as Node;
     const targetNode = target.item as Node;
+    // TODO(wittjosiah): This shouldn't depend directly on client, there should be a graph-level abstraction.
     if (isSpace(targetNode.data)) {
       // TODO(wittjosiah): Find a way to only allow space as source for rearranging.
       return isEchoObject(sourceNode.data) || isSpace(sourceNode.data);
@@ -164,8 +172,8 @@ export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeC
       }
 
       if (isAction(node)) {
-        const [parent] = graph.nodes(node, { relation: 'inbound' });
-        void (parent && node.data({ node: parent, caller: NAV_TREE_ITEM }));
+        const [parent] = graph.getConnections(node.id, 'inbound');
+        void (parent && node.data({ parent, caller: NAV_TREE_ITEM }));
         return;
       }
 
@@ -186,7 +194,7 @@ export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeC
         void dispatch(createIntent(LayoutAction.ScrollIntoView, { part: 'current', subject: node.id }));
       }
 
-      const defaultAction = graph.actions(node).find((action) => action.properties?.disposition === 'default');
+      const defaultAction = graph.getActions(node.id).find((action) => action.properties?.disposition === 'default');
       if (isAction(defaultAction)) {
         void (defaultAction.data as () => void)();
       }
@@ -198,7 +206,7 @@ export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeC
     [graph, dispatch, isCurrent, isLg],
   );
 
-  const onBack = useCallback(
+  const handleBack = useCallback(
     () => dispatch(createIntent(LayoutAction.RevertWorkspace, { part: 'workspace', options: { revert: true } })),
     [dispatch],
   );
@@ -225,8 +233,8 @@ export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeC
               : resolveMigrationOperation(graph, sourceNode, targetPath, targetNode);
           const sourceParent = getParent(graph, sourceNode, sourcePath);
           const targetParent = getParent(graph, targetNode, targetPath);
-          const sourceItems = getItems(sourceParent);
-          const targetItems = getItems(targetParent);
+          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 =
@@ -262,46 +270,56 @@ export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeC
     });
   }, [graph]);
 
+  const setAlternateTree = useCallback(
+    (path: string[], open: boolean) => {
+      setItem(path, 'alternateTree', open);
+    },
+    [setItem],
+  );
+
   const navTreeContextValue = useMemo(
     () => ({
+      useItems,
       tab,
-      onTabChange,
-      onBack,
       getActions,
       loadDescendents,
       renderItemEnd,
       popoverAnchorId,
       topbar,
-      getItems,
       getProps,
       isCurrent,
       isOpen,
-      onOpenChange,
       canDrop,
+      isAlternateTree,
+      setAlternateTree,
+      onTabChange: handleTabChange,
+      onOpenChange: handleOpenChange,
       onSelect: handleSelect,
+      onBack: handleBack,
     }),
     [
       tab,
-      onTabChange,
-      onBack,
       getActions,
       loadDescendents,
       renderItemEnd,
       popoverAnchorId,
       topbar,
-      getItems,
       getProps,
       isCurrent,
       isOpen,
-      onOpenChange,
       canDrop,
+      isAlternateTree,
+      setAlternateTree,
+      handleTabChange,
+      handleOpenChange,
       handleSelect,
+      handleBack,
     ],
   );
 
   return (
     <NavTreeContext.Provider value={navTreeContextValue}>
-      <NavTree root={graph.root} id={graph.root.id} />
+      <NavTree id={ROOT_ID} root={graph.root} open={layout.sidebarOpen} />
     </NavTreeContext.Provider>
   );
 });

package/src/components/NavTreeContext.tsx

@@ -10,4 +10,4 @@ import { type NavTreeContextValue } from './types';
 
 export const NavTreeContext = createContext<NavTreeContextValue | null>(null);
 
-export const useNavTreeContext = () => useContext(NavTreeContext) ?? raise(new Error('NavTreeContext not found'));
+export const useNavTreeContext = () => useContext(NavTreeContext) ?? raise(new Error('Missing NavTreeContext'));

package/src/components/{NavTreeItemAction.stories.tsx → NavTreeItem/NavTreeItemAction.stories.tsx}

@@ -4,6 +4,8 @@
 
 import '@dxos-theme';
 
+import { type Meta, type StoryObj } from '@storybook/react';
+
 import { type NodeArg } from '@dxos/app-graph';
 import { faker } from '@dxos/random';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
@@ -37,19 +39,23 @@ const menuActions = faker.helpers.multiple(
   { count: 20 },
 );
 
-export default {
+const meta: Meta<typeof NavTreeItemAction> = {
   title: 'plugins/plugin-navtree/NavTreeItemAction',
   component: NavTreeItemAction,
-  decorators: [withTheme, withLayout({ fullscreen: true, tooltips: true })],
+  decorators: [withTheme, withLayout()],
   args: {
     icon: 'ph--list--regular',
     parent,
     menuActions,
     label: 'Select action',
-    onAction: (action) => {
-      console.log(action);
-    },
   } satisfies Partial<NavTreeItemActionMenuProps>,
+  parameters: {
+    layout: 'centered',
+  },
 };
 
-export const Default = {};
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/components/{NavTreeItemAction.tsx → NavTreeItem/NavTreeItemAction.tsx}

@@ -2,54 +2,56 @@
 // Copyright 2023 DXOS.org
 //
 
-import React, { type MutableRefObject, useRef } from 'react';
+import React from 'react';
 
 import { type Action, type Node } from '@dxos/app-graph';
-import { useTranslation, toLocalizedString, IconButton } from '@dxos/react-ui';
+import { useTranslation, toLocalizedString, IconButton, useDensityContext } from '@dxos/react-ui';
 import { DropdownMenu, MenuProvider, type MenuItem } from '@dxos/react-ui-menu';
 import { hoverableControlItem, hoverableOpenControlItem, mx } from '@dxos/react-ui-theme';
 
-import { NAVTREE_PLUGIN } from '../meta';
-import { type ActionProperties } from '../types';
+import { NAVTREE_PLUGIN } from '../../meta';
+import { type ActionProperties } from '../../types';
 
 export type NavTreeItemActionMenuProps = ActionProperties & {
   parent: Node;
   caller?: string;
   monolithic?: boolean;
   menuActions?: Action[];
-  suppressNextTooltip?: MutableRefObject<boolean>;
-  onAction?: (action: Action) => void;
 };
 
 const fallbackIcon = 'ph--placeholder--regular';
 
-const actionButtonProps = {
+const fineActionButtonProps = {
   size: 4 as const,
   density: 'fine' as const,
 };
+const coarseActionButtonProps = {
+  size: 5 as const,
+  density: 'coarse' as const,
+};
 
 export const NavTreeItemActionDropdownMenu = ({
+  parent,
   label,
   icon,
   testId,
   menuActions,
-  onAction,
+  caller,
 }: NavTreeItemActionMenuProps) => {
   const { t } = useTranslation(NAVTREE_PLUGIN);
-  const suppressNextTooltip = useRef<boolean>(false);
+  const density = useDensityContext();
   return (
-    <MenuProvider onAction={onAction}>
-      <DropdownMenu.Root items={menuActions as MenuItem[]} suppressNextTooltip={suppressNextTooltip}>
+    <MenuProvider>
+      <DropdownMenu.Root group={parent} items={menuActions as MenuItem[]} caller={caller}>
         <DropdownMenu.Trigger asChild>
           <IconButton
-            {...actionButtonProps}
+            {...(density === 'coarse' ? coarseActionButtonProps : fineActionButtonProps)}
             classNames={mx('shrink-0 pli-2 pointer-fine:pli-1', hoverableControlItem, hoverableOpenControlItem)}
             variant='ghost'
             icon={icon ?? fallbackIcon}
             iconOnly
             label={toLocalizedString(label, t)}
             data-testid={testId}
-            suppressNextTooltip={suppressNextTooltip}
           />
         </DropdownMenu.Trigger>
       </DropdownMenu.Root>
@@ -63,9 +65,10 @@ export const NavTreeItemMonolithicAction = ({
   data: invoke,
   baseLabel,
 }: Action & { parent: Node; onAction?: (action: Action) => void; baseLabel: string }) => {
+  const density = useDensityContext();
   return (
     <IconButton
-      {...actionButtonProps}
+      {...(density === 'coarse' ? coarseActionButtonProps : fineActionButtonProps)}
       variant={variant}
       classNames={mx(
         'shrink-0',
@@ -82,7 +85,7 @@ export const NavTreeItemMonolithicAction = ({
           return;
         }
         event.stopPropagation();
-        void invoke?.(caller ? { node: parent, caller } : { node: parent });
+        void invoke?.(caller ? { parent, caller } : { parent });
       }}
       data-testid={testId}
     />
@@ -98,12 +101,6 @@ export const NavTreeItemAction = ({ monolithic, menuActions, parent: node, ...pr
   return monolithic && menuActions?.length === 1 ? (
     <NavTreeItemMonolithicAction baseLabel={baseLabel} parent={node} {...menuActions[0]} />
   ) : (
-    <NavTreeItemActionDropdownMenu
-      {...props}
-      label={baseLabel}
-      parent={node}
-      menuActions={menuActions}
-      onAction={(action) => action.data?.(props.caller ? { node, caller: props.caller } : { node })}
-    />
+    <NavTreeItemActionDropdownMenu {...props} label={baseLabel} parent={node} menuActions={menuActions} />
   );
 };