@dxos/plugin-navtree 0.8.4-main.2e9d522 → 0.8.4-main.3c1ae3b

package/src/components/CommandsDialog/CommandsDialog.tsx

@@ -2,13 +2,14 @@
 // Copyright 2023 DXOS.org
 //
 
-import React, { useMemo, useState } from 'react';
+import React, { forwardRef, useMemo, useState } from 'react';
 
-import { createIntent, LayoutAction, useAppGraph, useIntentDispatcher } from '@dxos/app-framework';
+import { LayoutAction, createIntent } from '@dxos/app-framework';
+import { useAppGraph, useIntentDispatcher } from '@dxos/app-framework/react';
 import { type ActionLike, isAction, isActionGroup } from '@dxos/app-graph';
 import { Keyboard, keySymbols } from '@dxos/keyboard';
 import { useActions } from '@dxos/plugin-graph';
-import { Button, Dialog, Icon, useTranslation, toLocalizedString } from '@dxos/react-ui';
+import { Button, Dialog, Icon, toLocalizedString, useTranslation } from '@dxos/react-ui';
 import { SearchList } from '@dxos/react-ui-searchlist';
 import {
   cardDialogContent,
@@ -19,100 +20,111 @@ import {
 import { descriptionText, mx } from '@dxos/react-ui-theme';
 import { getHostPlatform } from '@dxos/util';
 
-import { KEY_BINDING, NAVTREE_PLUGIN } from '../../meta';
+import { KEY_BINDING, meta } from '../../meta';
 
-// TODO(wittjosiah): This probably deserves its own plugin but for now it lives here w/ other navigation UI.
-export const CommandsDialogContent = ({ selected: initial }: { selected?: string }) => {
-  const { t } = useTranslation(NAVTREE_PLUGIN);
-  const [selected, setSelected] = useState<string | undefined>(initial);
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
-  const { graph } = useAppGraph();
+export type CommandsDialogContentProps = {
+  selected?: string;
+};
 
-  // Traverse graph.
-  // TODO(burdon): Factor out commonality with shortcut dialog.
-  const allActions = useMemo(() => {
-    // TODO(burdon): Get from navtree (not keyboard).
-    const current = Keyboard.singleton.getCurrentContext();
-    const actionMap = new Set<string>();
-    const actions: ActionLike[] = [];
-    graph.traverse({
-      visitor: (node, path) => {
-        if (
-          (isAction(node) || isActionGroup(node)) &&
-          !actionMap.has(node.id) &&
-          current.startsWith(path.slice(0, -1).join('/'))
-        ) {
-          actionMap.add(node.id);
-          actions.push(node);
-        }
-      },
-    });
+// TODO(wittjosiah): This probably deserves its own plugin but for now it lives here w/ other navigation UI.
+export const CommandsDialogContent = forwardRef<HTMLDivElement, CommandsDialogContentProps>(
+  ({ selected: initial }, forwardedRef) => {
+    const { t } = useTranslation(meta.id);
+    const { dispatchPromise: dispatch } = useIntentDispatcher();
+    const { graph } = useAppGraph();
+    const [selected, setSelected] = useState<string | undefined>(initial);
 
-    actions.sort((a, b) => {
-      return toLocalizedString(a.properties.label, t)
-        ?.toLowerCase()
-        .localeCompare(toLocalizedString(b.properties.label, t)?.toLowerCase());
-    });
+    // Traverse graph.
+    // TODO(burdon): Factor out commonality with shortcut dialog.
+    const allActions = useMemo(() => {
+      // TODO(burdon): Get from navtree (not keyboard).
+      const current = Keyboard.singleton.getCurrentContext();
+      const actionMap = new Set<string>();
+      const actions: ActionLike[] = [];
+      graph.traverse({
+        visitor: (node, path) => {
+          if (
+            (isAction(node) || isActionGroup(node)) &&
+            !actionMap.has(node.id) &&
+            current.startsWith(path.slice(0, -1).join('/'))
+          ) {
+            actionMap.add(node.id);
+            actions.push(node);
+          }
+        },
+      });
 
-    return actions;
-  }, [graph]);
+      actions.sort((a, b) => {
+        return toLocalizedString(a.properties.label, t)
+          ?.toLowerCase()
+          .localeCompare(toLocalizedString(b.properties.label, t)?.toLowerCase());
+      });
 
-  const group = allActions.find(({ id }) => id === selected);
-  const groupActions = useActions(graph, group?.id);
-  const actions = isActionGroup(group) ? groupActions : allActions;
+      return actions;
+    }, [graph]);
 
-  return (
-    <Dialog.Content classNames={cardDialogContent}>
-      <Dialog.Title classNames={cardDialogHeader}>{t('commands dialog title', { ns: NAVTREE_PLUGIN })}</Dialog.Title>
+    const group = allActions.find(({ id }) => id === selected);
+    const groupActions = useActions(graph, group?.id);
+    const actions = isActionGroup(group) ? groupActions : allActions;
 
-      {/* TODO(burdon): BUG: Overscrolls container. */}
-      <SearchList.Root label={t('command list input placeholder')} classNames={cardDialogSearchListRoot}>
-        <SearchList.Input placeholder={t('command list input placeholder')} />
-        <SearchList.Content classNames={cardDialogPaddedOverflow}>
-          {actions?.map((action) => {
-            const label = toLocalizedString(action.properties.label, t);
-            const shortcut =
-              typeof action.properties.keyBinding === 'string'
-                ? action.properties.keyBinding
-                : action.properties.keyBinding?.[getHostPlatform()];
-            return (
-              <SearchList.Item
-                value={label}
-                key={action.id}
-                onSelect={() => {
-                  if (action.properties.disabled) {
-                    return;
-                  }
+    return (
+      <Dialog.Content classNames={cardDialogContent} ref={forwardedRef}>
+        <Dialog.Title classNames={cardDialogHeader}>{t('commands dialog title', { ns: meta.id })}</Dialog.Title>
 
-                  if (isActionGroup(action)) {
-                    setSelected(action.id);
-                    return;
-                  }
+        <SearchList.Root label={t('command list input placeholder')} classNames={cardDialogSearchListRoot}>
+          <SearchList.Input placeholder={t('command list input placeholder')} />
+          <SearchList.Content classNames={cardDialogPaddedOverflow}>
+            {actions?.map((action) => {
+              const label = toLocalizedString(action.properties.label, t);
+              const shortcut =
+                typeof action.properties.keyBinding === 'string'
+                  ? action.properties.keyBinding
+                  : action.properties.keyBinding?.[getHostPlatform()];
+              return (
+                <SearchList.Item
+                  value={label}
+                  key={action.id}
+                  onSelect={() => {
+                    if (action.properties.disabled) {
+                      return;
+                    }
 
-                  void dispatch(createIntent(LayoutAction.UpdateDialog, { part: 'dialog', options: { state: false } }));
-                  setTimeout(() => {
-                    const node = graph.getConnections(group?.id ?? action.id, 'inbound')[0];
-                    void (node && isAction(action) && action.data({ parent: node, caller: KEY_BINDING }));
-                  });
-                }}
-                classNames='flex items-center gap-2'
-                disabled={action.properties.disabled}
-                {...(action.properties?.testId && { 'data-testid': action.properties.testId })}
-              >
-                <Icon icon={action.properties.icon} size={4} />
-                <span className='grow truncate'>{label}</span>
-                {shortcut && <span className={mx('shrink-0', descriptionText)}>{keySymbols(shortcut).join('')}</span>}
-              </SearchList.Item>
-            );
-          })}
-        </SearchList.Content>
-      </SearchList.Root>
+                    if (isActionGroup(action)) {
+                      setSelected(action.id);
+                      return;
+                    }
 
-      <div role='none' className='pli-cardSpacingInline pbe-cardSpacingBlock'>
-        <Dialog.Close asChild>
-          <Button classNames='is-full'>{t('close label', { ns: 'os' })}</Button>
-        </Dialog.Close>
-      </div>
-    </Dialog.Content>
-  );
-};
+                    void dispatch(
+                      createIntent(LayoutAction.UpdateDialog, {
+                        part: 'dialog',
+                        options: { state: false },
+                      }),
+                    );
+                    setTimeout(() => {
+                      const node = graph.getConnections(group?.id ?? action.id, 'inbound')[0];
+                      void (node && isAction(action) && action.data({ parent: node, caller: KEY_BINDING }));
+                    });
+                  }}
+                  classNames='flex items-center gap-2'
+                  disabled={action.properties.disabled}
+                  {...(action.properties?.testId && {
+                    'data-testid': action.properties.testId,
+                  })}
+                >
+                  <Icon icon={action.properties.icon} size={4} />
+                  <span className='grow truncate'>{label}</span>
+                  {shortcut && <span className={mx('shrink-0', descriptionText)}>{keySymbols(shortcut).join('')}</span>}
+                </SearchList.Item>
+              );
+            })}
+          </SearchList.Content>
+        </SearchList.Root>
+        <div role='none' className='pli-cardSpacingInline pbe-cardSpacingBlock'>
+          <Dialog.Close asChild>
+            <Button classNames='is-full'>{t('close label', { ns: 'os' })}</Button>
+          </Dialog.Close>
+        </div>
+      </Dialog.Content>
+    );
+  },
+);

package/src/components/CommandsDialog/CommandsTrigger.tsx

@@ -4,15 +4,16 @@
 
 import React from 'react';
 
-import { createIntent, LayoutAction, useIntentDispatcher } from '@dxos/app-framework';
+import { LayoutAction, createIntent } from '@dxos/app-framework';
+import { useIntentDispatcher } from '@dxos/app-framework/react';
 import { Button, Icon, useTranslation } from '@dxos/react-ui';
 
-import { COMMANDS_DIALOG, NAVTREE_PLUGIN } from '../../meta';
+import { COMMANDS_DIALOG, meta } from '../../meta';
 
 // TODO(thure): Refactor to be handled by a more appropriate plugin.
 export const CommandsTrigger = () => {
   const { dispatchPromise: dispatch } = useIntentDispatcher();
-  const { t } = useTranslation(NAVTREE_PLUGIN);
+  const { t } = useTranslation(meta.id);
   return (
     <Button
       classNames='m-1 pli-1 lg:pli-2'

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,
@@ -16,22 +15,20 @@ import {
   contributes,
   createResolver,
   defineCapability,
-  useCapability,
 } from '@dxos/app-framework';
+import { useCapability } from '@dxos/app-framework/react';
 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,10 +81,12 @@ 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>
-        <Toolbar.Root classNames='border-b border-subduedSeparator'>
+        <Toolbar.Root classNames='border-be border-subduedSeparator'>
           <Toolbar.Button>Test</Toolbar.Button>
         </Toolbar.Root>
 
@@ -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

@@ -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';
@@ -16,7 +16,7 @@ export const NAV_TREE_ITEM = 'NavTreeItem';
 
 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' });
@@ -47,7 +47,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}
@@ -59,4 +63,4 @@ export const NavTree = ({ id, root, ...props }: NavTreeProps) => {
       <L1Tabs topLevelItems={topLevelItems} path={path} currentItemId={tab} onBack={onBack} {...props} />
     </Tabs.Root>
   );
-};
+});