@dxos/plugin-navtree 0.6.14-main.2b6a0f3 → 0.6.14-main.f49f251

package/src/components/NavTreeItemAction.tsx

@@ -0,0 +1,367 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import React, { type MutableRefObject, type PropsWithChildren, useRef, useState } from 'react';
+
+import { type Action, type ActionLike, type Node } from '@dxos/app-graph';
+import { keySymbols } from '@dxos/keyboard';
+import {
+  Button,
+  Dialog,
+  DropdownMenu,
+  ContextMenu,
+  Tooltip,
+  useTranslation,
+  toLocalizedString,
+  Icon,
+} from '@dxos/react-ui';
+import { SearchList } from '@dxos/react-ui-searchlist';
+import { descriptionText, hoverableControlItem, hoverableOpenControlItem, mx } from '@dxos/react-ui-theme';
+import { getHostPlatform } from '@dxos/util';
+
+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>;
+  menuOpen?: boolean;
+  defaultMenuOpen?: boolean;
+  onChangeMenuOpen?: (nextOpen: boolean) => void;
+  onAction?: (action: Action) => void;
+};
+
+const getShortcut = (action: ActionLike) => {
+  return typeof action.properties?.keyBinding === 'string'
+    ? action.properties.keyBinding
+    : action.properties?.keyBinding?.[getHostPlatform()];
+};
+
+const fallbackIcon = 'ph--placeholder--regular';
+
+export const NavTreeItemActionDropdownMenu = ({
+  label,
+  icon,
+  testId,
+  defaultMenuOpen,
+  menuActions,
+  menuOpen,
+  suppressNextTooltip,
+  onChangeMenuOpen,
+  onAction,
+}: NavTreeItemActionMenuProps) => {
+  const { t } = useTranslation(NAVTREE_PLUGIN);
+
+  const [optionsMenuOpen, setOptionsMenuOpen] = useControllableState({
+    prop: menuOpen,
+    defaultProp: defaultMenuOpen,
+    onChange: onChangeMenuOpen,
+  });
+
+  return (
+    <DropdownMenu.Root
+      {...{
+        open: optionsMenuOpen,
+        onOpenChange: (nextOpen: boolean) => {
+          if (!nextOpen && suppressNextTooltip) {
+            suppressNextTooltip.current = true;
+          }
+          return setOptionsMenuOpen(nextOpen);
+        },
+      }}
+    >
+      <Tooltip.Trigger asChild>
+        <DropdownMenu.Trigger asChild>
+          <Button
+            variant='ghost'
+            density='fine'
+            classNames={mx('shrink-0 !pli-2 pointer-fine:!pli-1', hoverableControlItem, hoverableOpenControlItem)}
+            data-testid={testId}
+            aria-label={t('tree item actions label')}
+          >
+            <span className='sr-only'>{toLocalizedString(label, t)}</span>
+            <Icon icon={icon ?? fallbackIcon} size={4} />
+          </Button>
+        </DropdownMenu.Trigger>
+      </Tooltip.Trigger>
+      <DropdownMenu.Portal>
+        <DropdownMenu.Content classNames='z-[31]'>
+          <DropdownMenu.Viewport>
+            {menuActions?.map((action) => {
+              const shortcut = getShortcut(action);
+              return (
+                <DropdownMenu.Item
+                  key={action.id}
+                  onClick={(event) => {
+                    if (action.properties?.disabled) {
+                      return;
+                    }
+                    event.stopPropagation();
+                    // TODO(thure): Why does Dialog’s modal-ness cause issues if we don’t explicitly close the menu here?
+                    if (suppressNextTooltip) {
+                      suppressNextTooltip.current = true;
+                    }
+                    setOptionsMenuOpen(false);
+                    onAction?.(action);
+                  }}
+                  classNames='gap-2'
+                  disabled={action.properties?.disabled}
+                  {...(action.properties?.testId && { 'data-testid': action.properties.testId })}
+                >
+                  {action.properties?.icon && <Icon icon={action.properties!.icon} size={4} />}
+                  <span className='grow truncate'>{toLocalizedString(action.properties!.label, t)}</span>
+                  {shortcut && <span className={mx('shrink-0', descriptionText)}>{keySymbols(shortcut).join('')}</span>}
+                </DropdownMenu.Item>
+              );
+            })}
+          </DropdownMenu.Viewport>
+          <DropdownMenu.Arrow />
+        </DropdownMenu.Content>
+      </DropdownMenu.Portal>
+    </DropdownMenu.Root>
+  );
+};
+
+export const NavTreeItemActionContextMenu = (
+  props: PropsWithChildren<Pick<NavTreeItemActionMenuProps, 'menuActions' | 'onAction'>>,
+) => {
+  return (props.menuActions?.length ?? 0) > 0 ? <NavTreeItemActionContextMenuImpl {...props} /> : <>{props.children}</>;
+};
+
+const NavTreeItemActionContextMenuImpl = ({
+  menuActions,
+  onAction,
+  children,
+}: PropsWithChildren<Pick<NavTreeItemActionMenuProps, 'menuActions' | 'onAction'>>) => {
+  const { t } = useTranslation(NAVTREE_PLUGIN);
+
+  return (
+    <ContextMenu.Root>
+      <ContextMenu.Trigger asChild>{children}</ContextMenu.Trigger>
+      <ContextMenu.Portal>
+        <ContextMenu.Content classNames='z-[31]'>
+          <ContextMenu.Viewport>
+            {menuActions?.map((action) => {
+              const shortcut = getShortcut(action);
+              return (
+                <ContextMenu.Item
+                  key={action.id}
+                  onClick={(event) => {
+                    if (action.properties?.disabled) {
+                      return;
+                    }
+                    event.stopPropagation();
+                    onAction?.(action);
+                  }}
+                  classNames='gap-2'
+                  disabled={action.properties?.disabled}
+                  {...(action.properties?.testId && { 'data-testid': action.properties.testId })}
+                >
+                  {action.properties?.icon && <Icon icon={action.properties?.icon} size={4} />}
+                  <span className='grow truncate'>{toLocalizedString(action.properties!.label, t)}</span>
+                  {shortcut && <span className={mx('shrink-0', descriptionText)}>{keySymbols(shortcut).join('')}</span>}
+                </ContextMenu.Item>
+              );
+            })}
+          </ContextMenu.Viewport>
+          <ContextMenu.Arrow />
+        </ContextMenu.Content>
+      </ContextMenu.Portal>
+    </ContextMenu.Root>
+  );
+};
+
+export const NavTreeItemActionSearchList = ({
+  menuActions,
+  icon,
+  label,
+  testId,
+  suppressNextTooltip,
+  onAction,
+}: Pick<
+  NavTreeItemActionMenuProps,
+  'icon' | 'menuActions' | 'testId' | 'label' | 'onAction' | 'suppressNextTooltip'
+>) => {
+  const { t } = useTranslation(NAVTREE_PLUGIN);
+
+  const [optionsMenuOpen, setOptionsMenuOpen] = useState(false);
+  const button = useRef<HTMLButtonElement | null>(null);
+
+  // TODO(burdon): Optionally sort.
+  const sortedActions = menuActions?.sort(({ properties: p1 }, { properties: p2 }) => {
+    const t1 = toLocalizedString(p1!.label, t).toLowerCase();
+    const t2 = toLocalizedString(p2!.label, t).toLowerCase();
+    return t1.localeCompare(t2);
+  });
+
+  // TODO(thure): Use LayoutPlugin’s global Dialog.
+  return (
+    <Dialog.Root
+      {...{
+        open: optionsMenuOpen,
+        onOpenChange: (nextOpen: boolean) => {
+          if (!nextOpen && suppressNextTooltip) {
+            suppressNextTooltip.current = true;
+          }
+          return setOptionsMenuOpen(nextOpen);
+        },
+      }}
+    >
+      <Tooltip.Trigger asChild>
+        <Dialog.Trigger asChild>
+          <Button
+            variant='ghost'
+            density='fine'
+            classNames={mx('shrink-0 !pli-2 pointer-fine:!pli-1', hoverableControlItem, hoverableOpenControlItem)}
+            data-testid={testId}
+            onKeyDownCapture={(event) => {
+              // TODO(thure): Why is only this `Button` affected and not `DropdownMenu.Trigger`’s?
+              if (button.current && button.current === event.target) {
+                switch (event.key) {
+                  case 'Enter':
+                  case ' ':
+                    // Capture this event and stop propagation to the drag start handler.
+                    event.stopPropagation();
+                    setOptionsMenuOpen(true);
+                    break;
+                  default:
+                }
+              }
+            }}
+            ref={button}
+          >
+            <Icon icon={icon ?? fallbackIcon} size={4} />
+          </Button>
+        </Dialog.Trigger>
+      </Tooltip.Trigger>
+      <Dialog.Portal>
+        <Dialog.Overlay>
+          <Dialog.Content classNames='z-[31] is-full max-is-[24rem] pli-2 plb-1'>
+            <SearchList.Root label={t('tree item searchlist input placeholder')}>
+              <SearchList.Input placeholder={t('tree item searchlist input placeholder')} classNames='pli-3' />
+              <SearchList.Content classNames='min-bs-[12rem] bs-[50dvh] max-bs-[30rem] overflow-auto'>
+                {sortedActions?.map((action) => {
+                  const label = toLocalizedString(action.properties!.label, t);
+                  const shortcut = getShortcut(action);
+                  return (
+                    <SearchList.Item
+                      // TODO(burdon): Value should be id since label is not unique.
+                      value={label}
+                      key={action.id}
+                      onSelect={() => {
+                        if (action.properties?.disabled) {
+                          return;
+                        }
+                        if (suppressNextTooltip) {
+                          suppressNextTooltip.current = true;
+                        }
+                        setOptionsMenuOpen(false);
+                        onAction?.(action);
+                      }}
+                      classNames='flex items-center gap-2 pli-2'
+                      disabled={action.properties?.disabled}
+                      {...(action.properties?.testId && { 'data-testid': action.properties.testId })}
+                    >
+                      {action.properties?.icon && <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>
+              <div role='none' className='flex items-center plb-2 pli-3'>
+                <span className={descriptionText}>{toLocalizedString(label, t)}</span>
+              </div>
+            </SearchList.Root>
+          </Dialog.Content>
+        </Dialog.Overlay>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+};
+
+export const NavTreeItemMonolithicAction = ({
+  parent,
+  properties: { disabled, caller, testId, label, icon } = { label: 'never' },
+  data: invoke,
+}: Action & { parent: Node; onAction?: (action: Action) => void }) => {
+  const { t } = useTranslation(NAVTREE_PLUGIN);
+  return (
+    <Tooltip.Trigger asChild>
+      <Button
+        variant='ghost'
+        density='fine'
+        classNames={mx('shrink-0 !pli-2 pointer-fine:!pli-1', hoverableControlItem, hoverableOpenControlItem)}
+        disabled={disabled}
+        onClick={(event) => {
+          if (disabled) {
+            return;
+          }
+          event.stopPropagation();
+          void invoke?.(caller ? { node: parent, caller } : { node: parent });
+        }}
+        data-testid={testId}
+      >
+        <span className='sr-only'>{toLocalizedString(label, t)}</span>
+        <Icon icon={icon ?? fallbackIcon} size={4} />
+      </Button>
+    </Tooltip.Trigger>
+  );
+};
+
+export const NavTreeItemAction = ({ monolithic, menuActions, parent: node, ...props }: NavTreeItemActionMenuProps) => {
+  const { t } = useTranslation(NAVTREE_PLUGIN);
+  const suppressNextTooltip = useRef<boolean>(false);
+  const [triggerTooltipOpen, setTriggerTooltipOpen] = useState(false);
+
+  const monolithicAction = menuActions?.length === 1 && menuActions[0];
+  const baseLabel = toLocalizedString(monolithicAction ? monolithicAction.properties!.label : props.label, t);
+
+  return (
+    <Tooltip.Root
+      open={triggerTooltipOpen}
+      onOpenChange={(nextOpen) => {
+        if (suppressNextTooltip.current) {
+          setTriggerTooltipOpen(false);
+          suppressNextTooltip.current = false;
+        } else {
+          setTriggerTooltipOpen(nextOpen);
+        }
+      }}
+    >
+      {baseLabel && (
+        <Tooltip.Portal>
+          <Tooltip.Content classNames='z-[31]' side='bottom'>
+            {baseLabel}
+            <Tooltip.Arrow />
+          </Tooltip.Content>
+        </Tooltip.Portal>
+      )}
+      {monolithic && menuActions?.length === 1 ? (
+        <NavTreeItemMonolithicAction parent={node} {...menuActions[0]} />
+      ) : props.menuType === 'searchList' ? (
+        <NavTreeItemActionSearchList
+          {...props}
+          menuActions={menuActions}
+          suppressNextTooltip={suppressNextTooltip}
+          onAction={(action) => action.data?.(props.caller ? { node, caller: props.caller } : { node })}
+        />
+      ) : (
+        <NavTreeItemActionDropdownMenu
+          {...props}
+          parent={node}
+          menuActions={menuActions}
+          suppressNextTooltip={suppressNextTooltip}
+          onAction={(action) => action.data?.(props.caller ? { node, caller: props.caller } : { node })}
+        />
+      )}
+    </Tooltip.Root>
+  );
+};

package/src/components/index.ts

@@ -4,6 +4,7 @@
 
 export * from './CommandsDialog';
 export * from './NavBarStart';
+export * from './NavTree';
 export * from './NavTreeContainer';
 export * from './NavTreeDocumentTitle';
 export * from './NotchStart';

package/src/experimental/Tree.stories.tsx

@@ -224,7 +224,7 @@ const Sidebar = ({ mutate }: { mutate?: boolean }) => {
 };
 
 const meta: Meta = {
-  title: 'plugins/plugin-navtree/Tree',
+  title: 'plugins/plugin-navtree/experimental/Tree',
   component: Tree,
   decorators: [withTheme, withLayout({ fullscreen: true, classNames: modalSurface })],
 };

package/src/stories/Graph.stories.tsx

@@ -4,20 +4,24 @@
 
 import '@dxos-theme';
 
+import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { extractInstruction, type Instruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
 import { batch } from '@preact/signals-core';
 import { type Meta } from '@storybook/react';
-import React, { useMemo, useState } from 'react';
+import React, { useEffect } from 'react';
 
-import { Graph } from '@dxos/app-graph';
+import { Graph, ROOT_ID, type NodeFilter } from '@dxos/app-graph';
+import { create } from '@dxos/echo-schema';
 import { registerSignalsRuntime } from '@dxos/echo-signals/react';
+import { invariant } from '@dxos/invariant';
 import { faker } from '@dxos/random';
-import { Treegrid } from '@dxos/react-ui';
-import { Mosaic, Path, type MosaicDropEvent, type MosaicMoveEvent, type MosaicOperation } from '@dxos/react-ui-mosaic';
-import { NavTree, type NavTreeItemNode, type OpenItemIds } from '@dxos/react-ui-navtree';
+import { isItem } from '@dxos/react-ui-list';
+import { Path } from '@dxos/react-ui-mosaic';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
-import { arrayMove } from '@dxos/util';
 
-import { type NavTreeItemGraphNode, treeItemsFromRootNode } from '../util';
+import { NavTree, type NavTreeProps } from '../components';
+import { type NavTreeItem } from '../types';
+import { getActions, getChildren, type NavTreeItemGraphNode, treeItemsFromRootNode } from '../util';
 
 faker.seed(3);
 registerSignalsRuntime();
@@ -46,106 +50,108 @@ const createGraph = () => {
   return graph;
 };
 
-const ROOT_ID = 'root';
+type State = {
+  flatTree: NavTreeItem[];
+  open: string[];
+  current: string[];
+};
+
 const graph = createGraph();
+const itemCache = new Map<string, NavTreeItem>();
+const state = create<State>({
+  get flatTree() {
+    return treeItemsFromRootNode(graph, graph.root, this.open, getItem);
+  },
+  open: [],
+  current: [],
+});
+
+const getItem = (node: NavTreeItemGraphNode, parent: readonly string[], filter?: NodeFilter) => {
+  invariant(graph);
+  const path = [...parent, node.id];
+  const { actions, groupedActions } = getActions(graph, node);
+  const children = getChildren(graph, node, filter, path);
+  const parentOf =
+    children.length > 0 ? children.map(({ id }) => id) : node.properties.role === 'branch' ? [] : undefined;
+  const item = {
+    id: node.id,
+    label: node.properties.label ?? node.id,
+    icon: node.properties.icon,
+    path,
+    parentOf,
+    node,
+    actions,
+    groupedActions,
+  } satisfies NavTreeItem;
+
+  const cachedItem = itemCache.get(node.id);
+  // TODO(wittjosiah): This is not a good enough check.
+  //   Consider better ways to doing reactive transformations which retain referential equality.
+  if (cachedItem && JSON.stringify(item) === JSON.stringify(cachedItem)) {
+    return cachedItem;
+  } else {
+    itemCache.set(node.id, item);
+    return item;
+  }
+};
 
-const StorybookNavTree = ({ id = ROOT_ID }: { id?: string }) => {
-  const [openItemIds, setopenItemIds] = useState<OpenItemIds>({});
-  const items = useMemo(
-    () => treeItemsFromRootNode(graph, graph.root as NavTreeItemGraphNode, openItemIds),
-    [openItemIds],
-  );
-  const handleopenItemIdsChange = (item: NavTreeItemNode, nextOpen: boolean) => {
-    const itemId = item.path?.join(Treegrid.PATH_SEPARATOR) ?? 'never';
-    setopenItemIds((prevOpenItemIds) => {
-      if (nextOpen) {
-        return { ...prevOpenItemIds, [itemId]: true };
-      } else {
-        const { [itemId]: _, ...nextOpenItemIds } = prevOpenItemIds;
-        return nextOpenItemIds;
-      }
+const Story = (args: Partial<NavTreeProps>) => {
+  // NOTE: If passed directly to args, this won't be reactive.
+  const items = state.flatTree;
+
+  useEffect(() => {
+    return monitorForElements({
+      canMonitor: ({ source }) => isItem(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) {
+          // TODO(wittjosiah): Implement drop logic.
+          console.log('update', instruction);
+        }
+      },
     });
-  };
-
-  const handleOver = ({ active, over }: MosaicMoveEvent<number>): MosaicOperation => {
-    // Reject all operations that don’t match the graph’s root id
-    if (Path.first(active.path) !== id || Path.first(over.path) !== Path.first(active.path)) {
-      return 'reject';
-    }
-    // Rearrange if rearrange is supported and active and over are siblings
-    else if (Path.siblings(over.path, active.path)) {
-      return graph.findNode(Path.last(Path.parent(over.path)))?.properties.onRearrangeChildren ? 'rearrange' : 'reject';
-    }
-    // Rearrange if rearrange is supported and active is or would be a child of over
-    else if (Path.hasChild(over.path, active.path)) {
-      return graph.findNode(Path.last(over.path))?.properties.onRearrangeChildren ? 'rearrange' : 'reject';
-    }
-    // Check if transfer is supported
-    else {
-      const overNode = graph.findNode(Path.last(over.path));
-      const activeNode = graph.findNode(Path.last(active.path));
-      if (overNode && activeNode) {
-        return 'transfer';
-      } else {
-        return 'reject';
-      }
-    }
-  };
-
-  const handleDrop = ({ operation, active, over }: MosaicDropEvent<number>) => {
-    batch(() => {
-      const activeNode = graph.findNode(active.item.id);
-      const overNode = graph.findNode(over.item.id);
-      const activeParent = activeNode && graph.nodes(activeNode, { relation: 'inbound' })[0];
-      const overParent = overNode && graph.nodes(overNode, { relation: 'inbound' })[0];
-      if (
-        activeNode &&
-        overNode &&
-        activeParent &&
-        overParent &&
-        activeParent.id === overParent.id &&
-        activeNode.id !== overNode.id &&
-        operation === 'rearrange'
-      ) {
-        const ids = graph.nodes(activeParent).map((node) => node.id);
-        const activeIndex = ids.indexOf(activeNode.id);
-        const overIndex = ids.indexOf(overNode.id);
-        (graph as any)._sortEdges(
-          activeParent.id,
-          'outbound',
-          arrayMove(ids, activeIndex, overIndex > -1 ? overIndex : ids.length - 1),
-        );
-      } else if (activeNode && activeParent && overParent && operation === 'transfer') {
-        (graph as any)._removeEdges([{ source: activeParent.id, target: activeNode.id }]);
-        (graph as any)._addEdges([{ source: overNode.id, target: activeNode.id }]);
-      }
-    });
-  };
-
-  return (
-    <NavTree
-      id='storybook navtree'
-      items={items}
-      onItemOpenChange={handleopenItemIdsChange}
-      onDrop={handleDrop}
-      onOver={handleOver}
-    />
-  );
-};
+  }, []);
 
-export const Default = {
-  render: ({ debug }: { debug?: boolean }) => (
-    <Mosaic.Root debug={debug}>
-      <StorybookNavTree />
-      <Mosaic.DragOverlay />
-    </Mosaic.Root>
-  ),
+  return <NavTree items={items} open={state.open} current={state.current} {...args} />;
 };
 
+export const Default = {};
+
 const meta: Meta = {
   title: 'plugins/plugin-navtree/Graph',
   component: NavTree,
-  decorators: [withTheme, withLayout({ fullscreen: true, tooltips: true })],
+  render: Story,
+  decorators: [withTheme, withLayout({ tooltips: true })],
+  args: {
+    onOpenChange: (item: NavTreeItem, open: boolean) => {
+      const path = Path.create(...item.path);
+      if (open) {
+        state.open.push(path);
+      } else {
+        const index = state.open.indexOf(path);
+        if (index > -1) {
+          state.open.splice(index, 1);
+        }
+      }
+    },
+    onSelect: (item: NavTreeItem, current: boolean) => {
+      if (current) {
+        state.current.push(item.id);
+      } else {
+        const index = state.current.indexOf(item.id);
+        if (index > -1) {
+          state.current.splice(index, 1);
+        }
+      }
+    },
+  },
 };
 
 export default meta;