@dxos/react-ui-menu 0.9.0 → 0.9.1-staging.ee54ba693a

package/src/hooks/useGraphMenuActions.test.ts

@@ -0,0 +1,93 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+import { describe, test } from 'vitest';
+
+import { Node } from '@dxos/app-graph';
+
+import { buildGraphMenu } from './useGraphMenuActions';
+
+const action = (id: string, properties: Record<string, any> = {}): Node.ActionLike => ({
+  id,
+  type: Node.ActionType,
+  properties,
+  data: () => Effect.void,
+});
+
+const group = (id: string, properties: Record<string, any> = {}): Node.ActionLike => ({
+  id,
+  type: Node.ActionGroupType,
+  properties,
+  data: Node.actionGroupSymbol,
+});
+
+const resolver =
+  (map: Record<string, Node.ActionLike[]>) =>
+  (id: string): Node.ActionLike[] =>
+    map[id] ?? [];
+
+describe('buildGraphMenu', () => {
+  test('flattens a node’s actions under the menu root', ({ expect }) => {
+    const resolve = resolver({ event: [action('delete'), action('save')] });
+    const { nodes, edges } = buildGraphMenu(resolve, 'event');
+
+    expect(nodes.map((node) => node.id)).toEqual(['delete', 'save']);
+    expect(edges).toEqual([
+      { source: Node.RootId, target: 'delete', relation: 'child' },
+      { source: Node.RootId, target: 'save', relation: 'child' },
+    ]);
+  });
+
+  test('expands nested action groups via their own id', ({ expect }) => {
+    const resolve = resolver({
+      event: [action('delete'), group('more')],
+      more: [action('archive'), action('export')],
+    });
+    const { nodes, edges } = buildGraphMenu(resolve, 'event');
+
+    // root → delete, root → more (group), more → archive, more → export.
+    expect(nodes.map((node) => node.id)).toEqual(['delete', 'more', 'archive', 'export']);
+    expect(edges).toEqual([
+      { source: Node.RootId, target: 'delete', relation: 'child' },
+      { source: Node.RootId, target: 'more', relation: 'child' },
+      { source: 'more', target: 'archive', relation: 'child' },
+      { source: 'more', target: 'export', relation: 'child' },
+    ]);
+  });
+
+  test('roots the actions at a supplied group', ({ expect }) => {
+    const resolve = resolver({ event: [action('delete')] });
+    const { edges } = buildGraphMenu(resolve, 'event', { rootId: 'overflow' });
+
+    expect(edges).toEqual([{ source: 'overflow', target: 'delete', relation: 'child' }]);
+  });
+
+  test('filters actions by predicate', ({ expect }) => {
+    const resolve = resolver({
+      event: [action('delete', { disposition: 'menu' }), action('hidden', { disposition: 'item' })],
+    });
+    const { nodes } = buildGraphMenu(resolve, 'event', {
+      filter: (node) => node.properties.disposition === 'menu',
+    });
+
+    expect(nodes.map((node) => node.id)).toEqual(['delete']);
+  });
+
+  test('keeps a shared action’s node once but records each edge, tolerating cycles', ({ expect }) => {
+    // `more` references itself; the node is emitted once while both inbound edges survive.
+    const resolve = resolver({
+      event: [group('more')],
+      more: [action('archive'), group('more')],
+    });
+    const { nodes, edges } = buildGraphMenu(resolve, 'event');
+
+    expect(nodes.map((node) => node.id)).toEqual(['more', 'archive']);
+    expect(edges).toEqual([
+      { source: Node.RootId, target: 'more', relation: 'child' },
+      { source: 'more', target: 'archive', relation: 'child' },
+      { source: 'more', target: 'more', relation: 'child' },
+    ]);
+  });
+});

package/src/hooks/useGraphMenuActions.ts

@@ -0,0 +1,96 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { Atom } from '@effect-atom/atom-react';
+import { useMemo } from 'react';
+
+import { type Graph, Node } from '@dxos/app-graph';
+
+import {
+  type ActionGraphEdges,
+  type ActionGraphNodes,
+  type ActionGraphProps,
+  type MenuActions,
+  useMenuActions,
+} from './useMenuActions';
+
+export type GraphMenuOptions = {
+  /** Group the actions descend from. Defaults to the menu root (top-level toolbar items). */
+  rootId?: string;
+  /** Keep only the actions the predicate accepts (e.g. by `disposition`). */
+  filter?: (action: Node.ActionLike) => boolean;
+};
+
+/**
+ * Flatten a node's contributed actions (and nested {@link Node.ActionGroup}s) into the
+ * `{ nodes, edges }` an {@link useMenuActions} / `Menu` consumes. The action nodes are spliced
+ * verbatim, so their Effect `data` (and captured `_actionContext`) execute via `executeMenuAction`
+ * without any `onAction` wiring.
+ *
+ * Pure over a `resolve` function so it is testable without a live graph; `resolve(id)` returns the
+ * direct actions for `id` (a node id at the top level, a group id when expanding a group).
+ */
+export const buildGraphMenu = (
+  resolve: (id: string) => Node.ActionLike[],
+  nodeId: string,
+  options: GraphMenuOptions = {},
+): ActionGraphProps => {
+  const { rootId = Node.RootId, filter } = options;
+  const nodes: ActionGraphNodes = [];
+  const edges: ActionGraphEdges = [];
+  const seen = new Set<string>();
+
+  const visit = (parentId: string, sourceId: string) => {
+    for (const action of resolve(sourceId)) {
+      if (filter && !filter(action)) {
+        continue;
+      }
+      // Always record the parent→child edge (a shared action may sit under multiple groups).
+      edges.push({ source: parentId, target: action.id, relation: 'child' });
+      if (seen.has(action.id)) {
+        continue;
+      }
+      seen.add(action.id);
+      nodes.push(action as ActionGraphNodes[number]);
+      // A group's children are the actions contributed for the group's own id.
+      if (Node.isActionGroup(action)) {
+        visit(action.id, action.id);
+      }
+    }
+  };
+
+  visit(rootId, nodeId);
+  return { nodes, edges };
+};
+
+/**
+ * Read a node's contributed actions from the app-graph as menu `ActionGraphProps`, for splicing into a
+ * hand-built toolbar via `MenuBuilder.subgraph(graphActions(graph, get, nodeId))`. Reactive: reads the
+ * graph's action atoms through `get`, so contributed actions appear/disappear as extensions update.
+ */
+export const graphActions = (
+  graph: Graph.ReadableGraph | undefined,
+  get: Atom.Context,
+  nodeId: string | undefined,
+  options?: GraphMenuOptions,
+): ActionGraphProps =>
+  graph && nodeId ? buildGraphMenu((id) => get(graph.actions(id)), nodeId, options) : { nodes: [], edges: [] };
+
+/**
+ * Menu actions sourced entirely from a node's app-graph contributions — the common "show every action
+ * the graph offers for this object" toolbar/menu. Compose with hand-built items via {@link graphActions}.
+ */
+export const useGraphMenuActions = (
+  graph: Graph.ReadableGraph | undefined,
+  nodeId: string | undefined,
+  options?: GraphMenuOptions,
+): MenuActions => {
+  const atom = useMemo(
+    () => Atom.make((get) => graphActions(graph, get, nodeId, options)),
+    // `options` is expected to be stable; `rootId` participates since it reshapes the graph.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [graph, nodeId, options?.rootId],
+  );
+  return useMenuActions(atom);
+};

package/src/index.ts

@@ -5,5 +5,5 @@
 export * from './components';
 export * from './hooks';
 export * from './types';
-export { createMenuAction, createMenuItemGroup, createLineSeparator, createGapSeparator } from './util';
+export { createGapSeparator, createLineSeparator, createMenuAction, createMenuItemGroup } from './util';
 export { type ActionGroupBuilder, type ActionGroupBuilderFn, MenuBuilder } from './builder';

package/src/translations.ts

@@ -9,7 +9,9 @@ export const translationKey = '@dxos/react-ui-menu';
 export const translations = [
   {
     'en-US': {
-      [translationKey]: {},
+      [translationKey]: {
+        'toolbar-overflow.menu': 'More',
+      },
     },
   },
 ] as const satisfies Resource[];

package/src/types.ts

@@ -18,17 +18,20 @@ export type MenuSeparator = Node.Node<never, Pick<ToolbarSeparatorProps, 'varian
 
 export const isSeparator = (node: Node.Node): node is MenuSeparator => node.type === MenuSeparatorType;
 
-export type MenuSingleSelectActionGroup = { selectCardinality: 'single'; value: string };
-export type MenuMultipleSelectActionGroup = { selectCardinality: 'multiple'; value: string[] };
-
 export type MenuItemGroup<P extends Record<string, any> = Record<string, any>> = Node.ActionGroup<P>;
 
 export const isMenuGroup = (node: Node.Node): node is MenuItemGroup => node.type === Node.ActionGroupType;
 
-export type MenuItem = MenuSeparator | MenuAction | MenuItemGroup;
+/** Graph-sourced menu nodes carry plugin-specific properties validated at runtime. */
+export type GraphMenuItem = Node.Action | Node.ActionGroup;
+
+export type MenuItem = MenuSeparator | MenuAction | MenuItemGroup | GraphMenuItem;
+
+/** Group context for graph-backed dropdown menus (any graph node, not only action groups). */
+export type MenuGroupContext = MenuItemGroup | Node.Node;
 
 /** Atom-family-style accessor: returns an atom of items for a given group (or root when undefined). */
-export type MenuItemsAccessor = (group?: MenuItemGroup) => Atom.Atom<MenuItem[] | null>;
+export type MenuItemsAccessor = (group?: MenuGroupContext) => Atom.Atom<MenuItem[] | null>;
 
 export type ActionExecutor = (action: MenuAction, params: Node.InvokeProps) => void;
 
@@ -39,7 +42,7 @@ export type AddMenuItemsProps = {
   mode: MenuItemsMode;
   priority?: number;
   items: MenuItem[];
-  groupFilter?: (group?: MenuItemGroup) => boolean;
+  groupFilter?: (group?: MenuGroupContext) => boolean;
 };
 
 export type MenuItems = Omit<AddMenuItemsProps, 'priority'> & { priority: number };

package/src/util.ts

@@ -46,12 +46,7 @@ export const createMenuAction = <P extends {} = {}>(
     data: () => Effect.sync(invoke),
   }) satisfies MenuAction;
 
-export const createMenuItemGroup = <
-  P extends MenuItemGroupProperties = MenuItemGroupProperties & Partial<MenuActionProperties>,
->(
-  id: string,
-  properties: P,
-) =>
+export const createMenuItemGroup = <P extends MenuItemGroupProperties>(id: string, properties: P) =>
   ({
     id,
     type: Node.ActionGroupType,