@dxos/plugin-navtree 0.8.4-main.bc674ce → 0.8.4-main.bcb3aa67d6

package/src/components/NavTree/NavTree.tsx

@@ -4,44 +4,33 @@
 
 import React, { forwardRef, useMemo } from 'react';
 
-import { type TreeProps } from '@dxos/react-ui-list';
+import { useAppGraph } from '@dxos/app-toolkit/ui';
+import { Node, useConnections, useActions as useGraphActions } from '@dxos/plugin-graph';
 import { Tabs } from '@dxos/react-ui-tabs';
+import { byPosition } from '@dxos/util';
 
-import { useLoadDescendents } from '../../hooks';
-import { type NavTreeItemGraphNode } from '../../types';
+import { useLoadDescendents } from '#hooks';
 import { useNavTreeContext } from '../NavTreeContext';
 import { L0Menu, L1Tabs, type L1TabsProps } from '../Sidebar';
 
 export const NAV_TREE_ITEM = 'NavTreeItem';
 
-export type NavTreeProps = Pick<TreeProps<NavTreeItemGraphNode>, 'id' | 'root'> & Pick<L1TabsProps, 'open'>;
+export type NavTreeProps = { id: string; root?: Node.Node; tab: string } & Pick<L1TabsProps, 'open'>;
 
-export const NavTree = forwardRef<HTMLDivElement, NavTreeProps>(({ id, root, ...props }, forwardedRef) => {
-  const { tab, useItems, onBack } = useNavTreeContext();
-  const topLevelActions = useItems(root, { disposition: 'menu', sort: true });
-  const topLevelWorkspaces = useItems(root, { disposition: 'workspace' });
-  const l0Items = topLevelWorkspaces;
-  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],
-  );
+// TODO(wittjosiah): Refactor to Radix-style.
+export const NavTree = forwardRef<HTMLDivElement, NavTreeProps>(({ id, root, tab, ...props }, forwardedRef) => {
+  const { onBack, onItemHover } = useNavTreeContext();
+  const { topLevelActions, l0Items, pinnedItems, userAccountItem, topLevelItems } = useTopLevelNavItems(root);
 
   useLoadDescendents(root);
   const path = useMemo(() => [id], [id]);
 
   return (
     // 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
+    //  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}>
+    <Tabs.Root value={tab} orientation='vertical' classNames='relative' ref={forwardedRef}>
       <L0Menu
         menuActions={topLevelActions}
         topLevelItems={l0Items}
@@ -49,8 +38,60 @@ export const NavTree = forwardRef<HTMLDivElement, NavTreeProps>(({ id, root, ...
         userAccountItem={userAccountItem}
         path={path}
         parent={root}
+        onItemHover={onItemHover}
       />
       <L1Tabs topLevelItems={topLevelItems} path={path} currentItemId={tab} onBack={onBack} {...props} />
     </Tabs.Root>
   );
 });
+
+/**
+ * Partitions root children into workspaces, pinned items, user-account, and top-level actions.
+ */
+const useTopLevelNavItems = (root?: Node.Node) => {
+  const { graph } = useAppGraph();
+  const rootId = root?.id ?? Node.RootId;
+  const rootOutboundItems = useConnections(graph, rootId, 'child');
+  const rootActions = useGraphActions(graph, rootId);
+
+  const { topLevelActions, l0Items, pinnedItems, userAccountItem } = useMemo(() => {
+    const topLevelWorkspaces: Node.Node[] = [];
+    const outboundPinnedItems: Node.Node[] = [];
+    let userAccountItem: Node.Node | undefined;
+    for (const node of rootOutboundItems) {
+      switch (node.properties.disposition) {
+        case 'workspace':
+          topLevelWorkspaces.push(node);
+          break;
+        case 'pin-end':
+          outboundPinnedItems.push(node);
+          break;
+        case 'user-account':
+          userAccountItem ??= node;
+          break;
+      }
+    }
+
+    const topLevelActions = rootActions
+      .filter((action) => action.properties.disposition === 'menu')
+      .toSorted((a, b) => byPosition(a.properties, b.properties));
+    const pinnedItems = [
+      ...outboundPinnedItems,
+      ...rootActions.filter((action) => action.properties.disposition === 'pin-end'),
+    ].toSorted((a, b) => byPosition(a.properties, b.properties));
+
+    return {
+      topLevelActions,
+      l0Items: topLevelWorkspaces,
+      pinnedItems,
+      userAccountItem,
+    };
+  }, [rootActions, rootOutboundItems]);
+
+  const topLevelItems = useMemo(
+    () => [...l0Items, ...pinnedItems, ...(userAccountItem ? [userAccountItem] : [])],
+    [l0Items, pinnedItems, userAccountItem],
+  );
+
+  return { topLevelActions, l0Items, pinnedItems, userAccountItem, topLevelItems };
+};

package/src/components/{NavTreeContext.tsx → NavTreeContext/NavTreeContext.tsx}

@@ -6,7 +6,7 @@ import { createContext, useContext } from 'react';
 
 import { raise } from '@dxos/debug';
 
-import { type NavTreeContextValue } from './types';
+import { type NavTreeContextValue } from '../types';
 
 export const NavTreeContext = createContext<NavTreeContextValue | null>(null);
 

package/src/components/NavTreeContext/index.ts

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

package/src/components/NavTreeItem/NavTreeItemAction.stories.tsx

@@ -10,7 +10,6 @@ import { withPluginManager } from '@dxos/app-framework/testing';
 import { type Node } from '@dxos/app-graph';
 import { corePlugins } from '@dxos/plugin-testing';
 import { faker } from '@dxos/random';
-import { withTheme } from '@dxos/react-ui/testing';
 
 import { NavTreeItemAction, type NavTreeItemActionMenuProps } from './NavTreeItemAction';
 
@@ -43,7 +42,7 @@ const menuActions = faker.helpers.multiple(
 );
 
 const meta = {
-  title: 'plugins/plugin-navtree/NavTreeItemAction',
+  title: 'plugins/plugin-navtree/components/NavTreeItemAction',
   component: NavTreeItemAction,
   args: {
     icon: 'ph--list--regular',
@@ -52,7 +51,6 @@ const meta = {
     label: 'Select action',
   } satisfies Partial<NavTreeItemActionMenuProps>,
   decorators: [
-    withTheme,
     withPluginManager({
       plugins: [...corePlugins(), RuntimePlugin()],
     }),

package/src/components/NavTreeItem/NavTreeItemAction.tsx

@@ -2,23 +2,16 @@
 // Copyright 2023 DXOS.org
 //
 
-import React from 'react';
+import React, { useCallback } from 'react';
 
 import { type Node } from '@dxos/app-graph';
 import { useActionRunner } from '@dxos/plugin-graph';
 import { IconButton, toLocalizedString, useDensityContext, useTranslation } from '@dxos/react-ui';
-import { DropdownMenu, type MenuItem, MenuProvider } from '@dxos/react-ui-menu';
-import { hoverableControlItem, hoverableOpenControlItem } from '@dxos/ui-theme';
+import { Menu, type MenuItem } from '@dxos/react-ui-menu';
+import { composable, composableProps, hoverableControlItem, hoverableOpenControlItem } from '@dxos/ui-theme';
 
-import { meta } from '../../meta';
-import { type ActionProperties } from '../../types';
-
-export type NavTreeItemActionMenuProps = ActionProperties & {
-  parent: Node.Node;
-  caller?: string;
-  monolithic?: boolean;
-  menuActions?: Node.Action[];
-};
+import { meta } from '#meta';
+import { type ActionProperties } from '#types';
 
 const fallbackIcon = 'ph--placeholder--regular';
 
@@ -26,47 +19,64 @@ 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,
-  caller,
-}: NavTreeItemActionMenuProps) => {
-  const { t } = useTranslation(meta.id);
-  const density = useDensityContext();
-  const runAction = useActionRunner();
+export type NavTreeItemActionMenuProps = ActionProperties & {
+  parent: Node.Node;
+  path?: string[];
+  caller?: string;
+  monolithic?: boolean;
+  menuActions?: Node.Action[];
+};
 
-  return (
-    <MenuProvider onAction={runAction}>
-      <DropdownMenu.Root group={parent} items={menuActions as MenuItem[]} caller={caller}>
-        <DropdownMenu.Trigger asChild>
+export const NavTreeItemActionDropdownMenu = composable<HTMLButtonElement, NavTreeItemActionMenuProps>(
+  ({ parent, path, label, icon, testId, menuActions, caller, ...props }, forwardedRef) => {
+    const { t } = useTranslation(meta.id);
+    const density = useDensityContext();
+    const runAction = useActionRunner();
+    const handleAction = useCallback(
+      (action: Node.Action, params: Node.InvokeProps = {}) => runAction(action, { ...params, path }),
+      [runAction, path],
+    );
+
+    return (
+      <Menu.Root caller={caller} onAction={handleAction}>
+        <Menu.Trigger asChild>
           <IconButton
             {...(density === 'coarse' ? coarseActionButtonProps : fineActionButtonProps)}
-            classNames={['shrink-0 pli-2 pointer-fine:pli-1', hoverableControlItem, hoverableOpenControlItem]}
+            {...composableProps(props)}
+            classNames={['shrink-0 px-2 pointer-fine:px-1', hoverableControlItem, hoverableOpenControlItem]}
             variant='ghost'
             icon={icon ?? fallbackIcon}
             iconOnly
             label={toLocalizedString(label, t)}
             data-testid={testId}
+            ref={forwardedRef}
           />
-        </DropdownMenu.Trigger>
-      </DropdownMenu.Root>
-    </MenuProvider>
-  );
-};
+        </Menu.Trigger>
+        <Menu.Content group={parent} items={menuActions as MenuItem[]} />
+      </Menu.Root>
+    );
+  },
+);
+
+NavTreeItemActionDropdownMenu.displayName = 'NavTreeItemActionDropdownMenu';
 
 export const NavTreeItemMonolithicAction = (
-  props: Node.Action & { parent: Node.Node; onAction?: (action: Node.Action) => void; baseLabel: string },
+  props: Node.Action & {
+    parent: Node.Node;
+    path?: string[];
+    onAction?: (action: Node.Action) => void;
+    baseLabel: string;
+  },
 ) => {
   const {
     parent,
+    path,
     properties: { disabled, caller, testId, icon, variant = 'ghost', iconOnly = true } = { label: 'never' },
     baseLabel,
   } = props;
@@ -80,7 +90,7 @@ export const NavTreeItemMonolithicAction = (
         'shrink-0',
         hoverableControlItem,
         hoverableOpenControlItem,
-        iconOnly ? 'pli-2 pointer-fine:pli-1' : 'p-2 pointer-fine:p-2 mie-1',
+        iconOnly ? 'px-2 pointer-fine:px-1' : 'p-2 pointer-fine:p-2 me-1',
       ]}
       icon={icon ?? fallbackIcon}
       iconOnly={iconOnly}
@@ -92,22 +102,29 @@ export const NavTreeItemMonolithicAction = (
           return;
         }
 
-        void runAction(props, caller ? { parent, caller } : { parent });
+        void runAction(props, caller ? { parent, caller, path } : { parent, path });
       }}
       data-testid={testId}
     />
   );
 };
 
-export const NavTreeItemAction = ({ monolithic, menuActions, parent: node, ...props }: NavTreeItemActionMenuProps) => {
+export const NavTreeItemAction = ({
+  monolithic,
+  menuActions,
+  menuType,
+  parent: node,
+  path,
+  ...props
+}: NavTreeItemActionMenuProps) => {
   const { t } = useTranslation(meta.id);
 
   const monolithicAction = menuActions?.length === 1 && menuActions[0];
   const baseLabel = toLocalizedString(monolithicAction ? monolithicAction.properties!.label : props.label, t);
 
   return monolithic && menuActions?.length === 1 ? (
-    <NavTreeItemMonolithicAction baseLabel={baseLabel} parent={node} {...menuActions[0]} />
+    <NavTreeItemMonolithicAction baseLabel={baseLabel} parent={node} path={path} {...menuActions[0]} />
   ) : (
-    <NavTreeItemActionDropdownMenu {...props} label={baseLabel} parent={node} menuActions={menuActions} />
+    <NavTreeItemActionDropdownMenu {...props} label={baseLabel} parent={node} path={path} menuActions={menuActions} />
   );
 };

package/src/components/NavTreeItem/NavTreeItemColumns.tsx

@@ -2,13 +2,13 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { Fragment, memo } from 'react';
+import React, { Fragment, memo, useMemo } from 'react';
 
 import { Node } from '@dxos/app-graph';
 import { Popover, Treegrid, toLocalizedString, useTranslation } from '@dxos/react-ui';
 
-import { useLoadDescendents } from '../../hooks';
-import { meta } from '../../meta';
+import { useActions } from '#hooks';
+import { meta } from '#meta';
 import { NAV_TREE_ITEM } from '../NavTree';
 import { useNavTreeContext } from '../NavTreeContext';
 import { type NavTreeItemColumnsProps } from '../types';
@@ -17,25 +17,49 @@ import { NavTreeItemAction } from './NavTreeItemAction';
 
 export const NavTreeItemColumns = memo(({ path, item, open }: NavTreeItemColumnsProps) => {
   const { t } = useTranslation(meta.id);
-  const { useActions, renderItemEnd: ItemEnd, popoverAnchorId } = useNavTreeContext();
+  const { renderItemEnd: ItemEnd, popoverAnchorId } = useNavTreeContext();
 
   const level = path.length - 2;
-  const { actions: _actions, groupedActions } = useActions(item);
-  const [primaryAction, ...secondaryActions] = _actions.toSorted((a, _b) =>
-    a.properties?.disposition === 'list-item-primary' ? -1 : 1,
+  const { actions: actionsProp, groupedActions } = useActions(item);
+  const sortedActions = useMemo(
+    () =>
+      actionsProp.toSorted((actionA, actionB) => {
+        const primaryA = actionA.properties?.disposition === 'list-item-primary';
+        const primaryB = actionB.properties?.disposition === 'list-item-primary';
+        if (primaryA && !primaryB) {
+          return -1;
+        }
+        if (primaryB && !primaryA) {
+          return 1;
+        }
+        return 0;
+      }),
+    [actionsProp],
   );
+  const [primaryAction, ...secondaryActions] = sortedActions;
 
-  const actions = (primaryAction?.properties?.disposition === 'list-item-primary' ? secondaryActions : _actions)
-    .flatMap((action) => (Node.isAction(action) ? [action] : []))
-    .filter((a) => ['list-item', 'list-item-primary'].includes(a.properties?.disposition));
+  const actions = useMemo(
+    () =>
+      (primaryAction?.properties?.disposition === 'list-item-primary' ? secondaryActions : sortedActions)
+        .flatMap((action) => (Node.isAction(action) ? [action] : []))
+        .filter((a) => ['list-item', 'list-item-primary'].includes(a.properties?.disposition)),
+    [sortedActions, primaryAction],
+  );
 
-  useLoadDescendents(item);
-  useLoadDescendents(primaryAction && !Node.isAction(primaryAction) ? (primaryAction as Node.Node) : undefined);
+  const primaryMenuActions = useMemo(
+    () =>
+      primaryAction
+        ? Node.isAction(primaryAction)
+          ? [primaryAction]
+          : groupedActions[primaryAction?.id ?? '']
+        : undefined,
+    [primaryAction, groupedActions],
+  );
 
-  const ActionRoot = popoverAnchorId === `dxos.org/ui/${NAV_TREE_ITEM}/${item.id}` ? Popover.Anchor : Fragment;
+  const ActionRoot = popoverAnchorId === `${NAV_TREE_ITEM}:${item.id}` ? Popover.Anchor : Fragment;
 
   return (
-    <div role='none' className='contents app-no-drag'>
+    <div role='none' className='contents dx-app-no-drag'>
       {primaryAction?.properties?.disposition === 'list-item-primary' && !primaryAction?.properties?.disabled ? (
         <Treegrid.Cell classNames='contents'>
           <NavTreeItemAction
@@ -43,8 +67,9 @@ export const NavTreeItemColumns = memo(({ path, item, open }: NavTreeItemColumns
             label={toLocalizedString(primaryAction.properties?.label, t)}
             icon={primaryAction.properties?.icon ?? 'ph--placeholder--regular'}
             parent={item}
+            path={path}
             monolithic={Node.isAction(primaryAction)}
-            menuActions={Node.isAction(primaryAction) ? [primaryAction] : groupedActions[primaryAction?.id ?? '']}
+            menuActions={primaryMenuActions}
             menuType={primaryAction.properties?.menuType}
             caller={NAV_TREE_ITEM}
           />
@@ -57,9 +82,10 @@ export const NavTreeItemColumns = memo(({ path, item, open }: NavTreeItemColumns
           <Treegrid.Cell classNames='contents'>
             <NavTreeItemAction
               testId={`navtree.treeItem.actionsLevel${level}`}
-              label={t('tree item actions label')}
+              label={t('tree-item-actions.label')}
               icon='ph--dots-three-vertical--regular'
               parent={item}
+              path={path}
               menuActions={actions}
               menuType='dropdown'
               caller={NAV_TREE_ITEM}