@dxos/plugin-navtree 0.8.4-main.5acf9ea → 0.8.4-main.5ad4a44

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

@@ -2,11 +2,10 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
-import { type StoryObj, type Meta } from '@storybook/react-vite';
-import { Schema } from 'effect';
-import React from 'react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Schema from 'effect/Schema';
+import React, { type KeyboardEvent, useCallback, useRef } from 'react';
+import { expect, userEvent, within } from 'storybook/test';
 
 import {
   Capabilities,
@@ -21,17 +20,15 @@ import {
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { live } from '@dxos/live-object';
 import { AttentionPlugin } from '@dxos/plugin-attention';
-import { ClientPlugin } from '@dxos/plugin-client';
 import { GraphPlugin } from '@dxos/plugin-graph';
-import { SpacePlugin } from '@dxos/plugin-space';
 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 { useAttentionAttributes, useAttention } from '@dxos/react-ui-attention';
+import { withTheme } from '@dxos/react-ui/testing';
+import { useAttention, useAttentionAttributes } 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';
@@ -68,6 +65,15 @@ const StoryPlankHeading = ({ attendableId }: { attendableId: string }) => {
 
 const StoryPlank = ({ attendableId }: { attendableId: string }) => {
   const attentionAttrs = useAttentionAttributes(attendableId);
+  const rootElement = useRef<HTMLDivElement | null>(null);
+
+  // NOTE(thure): This is the same workaround as in Plank, but that component is out of scope for this story.
+  // TODO(thure): Tabster’s focus group should handle moving focus to Main, but something is blocking it.
+  const handleKeyDown = useCallback((event: KeyboardEvent) => {
+    if (event.target === event.currentTarget && event.key === 'Escape') {
+      rootElement.current?.closest('main')?.focus();
+    }
+  }, []);
 
   return (
     <StackItem.Root
@@ -75,6 +81,8 @@ const StoryPlank = ({ attendableId }: { attendableId: string }) => {
       {...attentionAttrs}
       classNames='bg-baseSurface border-ie border-separator'
       size={30}
+      onKeyDown={handleKeyDown}
+      ref={rootElement}
     >
       <StoryPlankHeading attendableId={attendableId} />
       <StackItem.Content toolbar>
@@ -116,20 +124,21 @@ const DefaultStory = () => {
   );
 };
 
-const meta: Meta<typeof NavTreeContainer> = {
+const meta = {
   title: 'plugins/plugin-navtree/NavTree',
   component: NavTreeContainer,
   render: DefaultStory,
   decorators: [
+    withTheme,
     withPluginManager({
       plugins: [
         ThemePlugin({ tx: defaultTx }),
-        StorybookLayoutPlugin({ initialState: { sidebarState: 'expanded' } }),
         GraphPlugin(),
         IntentPlugin(),
         SettingsPlugin(),
         AttentionPlugin(),
         NavTreePlugin(),
+        StorybookLayoutPlugin({ initialState: { sidebarState: 'expanded' } }),
       ],
       capabilities: (context) => [
         contributes(StoryState, live({ tab: 'space-0' })),
@@ -147,54 +156,59 @@ const meta: Meta<typeof NavTreeContainer> = {
         ]),
       ],
     }),
-    withLayout({ fullscreen: true }),
   ],
   parameters: {
+    layout: 'fullscreen',
     translations,
   },
-};
+} satisfies Meta<typeof NavTreeContainer>;
 
 export default meta;
 
 type Story = StoryObj<typeof NavTreeContainer>;
 
-export const Default: Story = {};
+export const Default: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
 
-// TODO(wittjosiah): Deduplicate plugins/capabilities with default story.
-export const WithClient: Story = {
-  decorators: [
-    withPluginManager({
-      plugins: [
-        ThemePlugin({ tx: defaultTx }),
-        GraphPlugin(),
-        IntentPlugin(),
-        SettingsPlugin(),
-        AttentionPlugin(),
-        NavTreePlugin(),
-        ClientPlugin({
-          onClientInitialized: async (_, client) => {
-            await client.halo.createIdentity();
-          },
-        }),
-        SpacePlugin(),
-        // Needs to be last so that the dialog and popovers have access to all contexts.
-        StorybookLayoutPlugin({ initialState: { sidebarState: 'expanded' } }),
-      ],
-      capabilities: (context) => [
-        contributes(StoryState, live({ tab: 'space-0' })),
-        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 }),
-  ],
+    // Find the element with treegrid role and click on its parent
+    const treegridElement = await canvas.findByRole('treegrid');
+    const treegridParent = treegridElement.parentElement;
+    if (treegridParent) {
+      await userEvent.click(treegridParent);
+    }
+
+    // Press Escape
+    await userEvent.keyboard('{Escape}');
+
+    // Confirm that focus is on an element with attribute data-main-landmark="0"
+    await expect(document.activeElement).toHaveAttribute('data-main-landmark', '0');
+
+    // Press Tab
+    await userEvent.keyboard('{Tab}');
+
+    // Confirm that focus is now on an element with data-main-landmark="1"
+    await expect(document.activeElement).toHaveAttribute('data-main-landmark', '1');
+
+    // Press Tab
+    await userEvent.keyboard('{Tab}');
+
+    // Confirm that focus is now on an element with data-main-landmark="0"
+    await expect(document.activeElement).toHaveAttribute('data-main-landmark', '0');
+
+    // Press Shift-Tab
+    await userEvent.keyboard('{Shift>}{Tab}{/Shift}');
+
+    // Press Enter
+    await userEvent.keyboard('{Enter}');
+
+    // Confirm that focus is now on an element with data-attendable-id="space-0:object-0"
+    await expect(document.activeElement).toHaveAttribute('data-attendable-id', 'space-0:object-0');
+
+    // Press Escape
+    await userEvent.keyboard('{Escape}');
+
+    // Confirm that focus is now on an element with data-main-landmark="1"
+    await expect(document.activeElement).toHaveAttribute('data-main-landmark', '1');
+  },
 };

package/src/components/NavTree/NavTree.tsx

@@ -47,6 +47,10 @@ export const NavTree = ({ id, root, ...props }: NavTreeProps) => {
   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
+    //  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'>
       <L0Menu
         menuActions={topLevelActions}

package/src/components/NavTreeContainer.tsx

@@ -3,34 +3,35 @@
 //
 
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-import { extractInstruction, type Instruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
+import { type Instruction, extractInstruction } 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,
+  createIntent,
   useAppGraph,
   useCapability,
   useIntentDispatcher,
   useLayout,
 } from '@dxos/app-framework';
-import { isAction, isActionLike, ROOT_ID, type Node, type ReadableGraph } from '@dxos/app-graph';
+import { type Node, ROOT_ID, type ReadableGraph, isAction, isActionLike } from '@dxos/app-graph';
 import { PLANK_COMPANION_TYPE } from '@dxos/plugin-deck/types';
-import { useConnections } 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 { type TreeData, type TreeItemDataProps, isTreeData } from '@dxos/react-ui-list';
 import { mx } from '@dxos/react-ui-theme';
 import { arrayMove, byPosition } from '@dxos/util';
 
+import { NavTreeCapabilities } from '../capabilities';
+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';
@@ -40,7 +41,9 @@ const renderItemEnd = ({ node, open }: { node: Node; open: boolean }) => (
 );
 
 const getChildrenFilter = (node: Node): node is Node =>
-  untracked(() => !isActionLike(node) && node.type !== PLANK_COMPANION_TYPE);
+  untracked(
+    () => !isActionLike(node) && node.type !== PLANK_COMPANION_TYPE && node.properties.disposition !== 'hidden',
+  );
 
 const filterItems = (node: Node, disposition?: string) => {
   if (!disposition && (node.properties.disposition === 'hidden' || node.properties.disposition === 'alternate-tree')) {
@@ -64,20 +67,43 @@ const useItems = (node?: Node, options?: { disposition?: string; sort?: boolean
   return options?.sort ? filtered.toSorted((a, b) => byPosition(a.properties, b.properties)) : filtered;
 };
 
+const useActions = (node: Node): FlattenedActions => {
+  const { graph } = useAppGraph();
+  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 (!isAction(arg)) {
+            const actionGroup = graph.getActions(arg.id);
+            acc.groupedActions[arg.id] = actionGroup;
+          }
+          return acc;
+        },
+        { actions: [], groupedActions: {} },
+      ),
+    [actions],
+  );
+};
+
 export type NavTreeContainerProps = {
   popoverAnchorId?: string;
   topbar?: boolean;
 } & Pick<NavTreeContextValue, 'tab'>;
 
 export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeContainerProps) => {
-  const [isLg] = useMediaQuery('lg', { ssr: false });
+  const [isLg] = useMediaQuery('lg');
   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 { navigationSidebarState } = useSidebars(meta.id);
 
   const getProps = useCallback(
     (node: Node, path: string[]): TreeItemDataProps => {
@@ -86,12 +112,13 @@ export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeC
         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),
+        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,
+        iconClassName: node.properties.iconClassName,
         testId: node.properties.testId,
       };
     },
@@ -153,6 +180,10 @@ export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeC
     return target.item.properties.canDrop?.(source) ?? false;
   }, []);
 
+  const canSelect = useCallback(({ item }: { item: Node }) => {
+    return item.properties.selectable ?? true;
+  }, []);
+
   const handleSelect = useCallback(
     ({ item: node, path, option }: { item: Node; path: string[]; option: boolean }) => {
       if (!node.data) {
@@ -269,7 +300,7 @@ export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeC
     () => ({
       useItems,
       tab,
-      getActions,
+      useActions,
       loadDescendents,
       renderItemEnd,
       popoverAnchorId,
@@ -278,6 +309,7 @@ export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeC
       isCurrent,
       isOpen,
       canDrop,
+      canSelect,
       isAlternateTree,
       setAlternateTree,
       onTabChange: handleTabChange,
@@ -287,7 +319,7 @@ export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeC
     }),
     [
       tab,
-      getActions,
+      useActions,
       loadDescendents,
       renderItemEnd,
       popoverAnchorId,
@@ -296,6 +328,7 @@ export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeC
       isCurrent,
       isOpen,
       canDrop,
+      canSelect,
       isAlternateTree,
       setAlternateTree,
       handleTabChange,

package/src/components/NavTreeDocumentTitle.tsx

@@ -6,10 +6,10 @@ import { useEffect } from 'react';
 import { type Node } from '@dxos/app-graph';
 import { toLocalizedString, useTranslation } from '@dxos/react-ui';
 
-import { NAVTREE_PLUGIN } from '../meta';
+import { meta } from '../meta';
 
 export const NavTreeDocumentTitle = ({ node }: { node?: Node }) => {
-  const { t } = useTranslation(NAVTREE_PLUGIN);
+  const { t } = useTranslation(meta.id);
   useEffect(() => {
     document.title = node ? toLocalizedString(node.properties.label, t) : t('current app name', { ns: 'appkit' });
   }, [node?.properties?.label]);

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

@@ -2,13 +2,11 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 
 import { type NodeArg } from '@dxos/app-graph';
 import { faker } from '@dxos/random';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
+import { withTheme } from '@dxos/react-ui/testing';
 
 import { NavTreeItemAction, type NavTreeItemActionMenuProps } from './NavTreeItemAction';
 
@@ -39,20 +37,20 @@ const menuActions = faker.helpers.multiple(
   { count: 20 },
 );
 
-const meta: Meta<typeof NavTreeItemAction> = {
+const meta = {
   title: 'plugins/plugin-navtree/NavTreeItemAction',
   component: NavTreeItemAction,
-  decorators: [withTheme, withLayout()],
   args: {
     icon: 'ph--list--regular',
     parent,
     menuActions,
     label: 'Select action',
   } satisfies Partial<NavTreeItemActionMenuProps>,
+  decorators: [withTheme],
   parameters: {
     layout: 'centered',
   },
-};
+} satisfies Meta<typeof NavTreeItemAction>;
 
 export default meta;
 

package/src/components/NavTreeItem/NavTreeItemAction.tsx

@@ -5,11 +5,11 @@
 import React from 'react';
 
 import { type Action, type Node } from '@dxos/app-graph';
-import { useTranslation, toLocalizedString, IconButton, useDensityContext } from '@dxos/react-ui';
-import { DropdownMenu, MenuProvider, type MenuItem } from '@dxos/react-ui-menu';
+import { IconButton, toLocalizedString, useDensityContext, useTranslation } from '@dxos/react-ui';
+import { DropdownMenu, type MenuItem, MenuProvider } from '@dxos/react-ui-menu';
 import { hoverableControlItem, hoverableOpenControlItem } from '@dxos/react-ui-theme';
 
-import { NAVTREE_PLUGIN } from '../../meta';
+import { meta } from '../../meta';
 import { type ActionProperties } from '../../types';
 
 export type NavTreeItemActionMenuProps = ActionProperties & {
@@ -38,7 +38,7 @@ export const NavTreeItemActionDropdownMenu = ({
   menuActions,
   caller,
 }: NavTreeItemActionMenuProps) => {
-  const { t } = useTranslation(NAVTREE_PLUGIN);
+  const { t } = useTranslation(meta.id);
   const density = useDensityContext();
   return (
     <MenuProvider>
@@ -81,10 +81,11 @@ export const NavTreeItemMonolithicAction = ({
       label={baseLabel}
       disabled={disabled}
       onClick={(event) => {
+        event.stopPropagation();
         if (disabled) {
           return;
         }
-        event.stopPropagation();
+
         void invoke?.(caller ? { parent, caller } : { parent });
       }}
       data-testid={testId}
@@ -93,7 +94,7 @@ export const NavTreeItemMonolithicAction = ({
 };
 
 export const NavTreeItemAction = ({ monolithic, menuActions, parent: node, ...props }: NavTreeItemActionMenuProps) => {
-  const { t } = useTranslation(NAVTREE_PLUGIN);
+  const { t } = useTranslation(meta.id);
 
   const monolithicAction = menuActions?.length === 1 && menuActions[0];
   const baseLabel = toLocalizedString(monolithicAction ? monolithicAction.properties!.label : props.label, t);

package/src/components/NavTreeItem/NavTreeItemColumns.tsx

@@ -5,21 +5,22 @@
 import React, { Fragment, memo } from 'react';
 
 import { isAction } from '@dxos/app-graph';
-import { DensityProvider, Popover, toLocalizedString, Treegrid, useTranslation } from '@dxos/react-ui';
+import { Popover, Treegrid, toLocalizedString, useTranslation } from '@dxos/react-ui';
 
-import { NavTreeItemAction } from './NavTreeItemAction';
 import { useLoadDescendents } from '../../hooks';
-import { NAVTREE_PLUGIN } from '../../meta';
+import { meta } from '../../meta';
 import { NAV_TREE_ITEM } from '../NavTree';
 import { useNavTreeContext } from '../NavTreeContext';
 import { type NavTreeItemColumnsProps } from '../types';
 
-export const NavTreeItemColumns = memo(({ path, item, open, density = 'fine' }: NavTreeItemColumnsProps) => {
-  const { t } = useTranslation(NAVTREE_PLUGIN);
-  const { getActions, renderItemEnd: ItemEnd, popoverAnchorId } = useNavTreeContext();
+import { NavTreeItemAction } from './NavTreeItemAction';
+
+export const NavTreeItemColumns = memo(({ path, item, open }: NavTreeItemColumnsProps) => {
+  const { t } = useTranslation(meta.id);
+  const { useActions, renderItemEnd: ItemEnd, popoverAnchorId } = useNavTreeContext();
 
   const level = path.length - 2;
-  const { actions: _actions, groupedActions } = getActions(item);
+  const { actions: _actions, groupedActions } = useActions(item);
   const [primaryAction, ...secondaryActions] = _actions.toSorted((a, _b) =>
     a.properties?.disposition === 'list-item-primary' ? -1 : 1,
   );
@@ -28,15 +29,15 @@ export const NavTreeItemColumns = memo(({ path, item, open, density = 'fine' }:
     .flatMap((action) => (isAction(action) ? [action] : []))
     .filter((a) => ['list-item', 'list-item-primary'].includes(a.properties?.disposition));
 
-  const ActionRoot = popoverAnchorId === `dxos.org/ui/${NAV_TREE_ITEM}/${item.id}` ? Popover.Anchor : Fragment;
-
   useLoadDescendents(item);
   useLoadDescendents(primaryAction && !isAction(primaryAction) ? primaryAction : undefined);
 
+  const ActionRoot = popoverAnchorId === `dxos.org/ui/${NAV_TREE_ITEM}/${item.id}` ? Popover.Anchor : Fragment;
+
   return (
-    <DensityProvider density={density}>
-      <div role='none' className='contents app-no-drag'>
-        {primaryAction?.properties?.disposition === 'list-item-primary' && !primaryAction?.properties?.disabled ? (
+    <div role='none' className='contents app-no-drag'>
+      {primaryAction?.properties?.disposition === 'list-item-primary' && !primaryAction?.properties?.disabled ? (
+        <Treegrid.Cell classNames='contents'>
           <NavTreeItemAction
             testId={primaryAction.properties?.testId}
             label={toLocalizedString(primaryAction.properties?.label, t)}
@@ -47,11 +48,13 @@ export const NavTreeItemColumns = memo(({ path, item, open, density = 'fine' }:
             menuType={primaryAction.properties?.menuType}
             caller={NAV_TREE_ITEM}
           />
-        ) : (
-          <Treegrid.Cell />
-        )}
-        <ActionRoot>
-          {actions.length > 0 ? (
+        </Treegrid.Cell>
+      ) : (
+        <Treegrid.Cell role='none' />
+      )}
+      <ActionRoot>
+        {actions.length > 0 ? (
+          <Treegrid.Cell classNames='contents'>
             <NavTreeItemAction
               testId={`navtree.treeItem.actionsLevel${level}`}
               label={t('tree item actions label')}
@@ -61,12 +64,16 @@ export const NavTreeItemColumns = memo(({ path, item, open, density = 'fine' }:
               menuType='dropdown'
               caller={NAV_TREE_ITEM}
             />
-          ) : (
-            <Treegrid.Cell />
-          )}
-        </ActionRoot>
-        {ItemEnd && <ItemEnd node={item} open={open} />}
-      </div>
-    </DensityProvider>
+          </Treegrid.Cell>
+        ) : (
+          <Treegrid.Cell role='none' />
+        )}
+      </ActionRoot>
+      {ItemEnd && (
+        <Treegrid.Cell classNames='contents'>
+          <ItemEnd node={item} open={open} />
+        </Treegrid.Cell>
+      )}
+    </div>
   );
 });