@dxos/react-ui-menu 0.8.2-main.f11618f → 0.8.2-main.fbd8ed0

package/src/{hooks.ts → hooks/useMenuActions.ts}

@@ -2,16 +2,15 @@
 // Copyright 2025 DXOS.org
 //
 
+import { RegistryContext, useRxValue } from '@effect-rx/rx-react';
 import { useSignalEffect } from '@preact/signals-react';
-import { useCallback, useState } from 'react';
+import { useCallback, useContext, useState } from 'react';
 
-import { Graph, type NodeArg, type Node } from '@dxos/app-graph';
+import { type Edge, type Edges, Graph, type NodeArg, type Node, ROOT_ID } from '@dxos/app-graph';
 
-import { type MenuItem, type MenuItemGroup } from './defs';
+import { type MenuItem, type MenuItemGroup } from '../types';
 
-type Edge = { source: string; target: string };
-
-const edgesArrayToRecord = (edges: { source: string; target: string }[]): Record<string, string[]> => {
+const edgesArrayToRecord = (edges: Edge[]): Record<string, Edges> => {
   return Object.fromEntries(
     Object.entries(
       edges.reduce((acc: Record<string, { inbound: string[]; outbound: string[] }>, { source, target }) => {
@@ -34,7 +33,7 @@ const edgesArrayToRecord = (edges: { source: string; target: string }[]): Record
 
         return acc;
       }, {}),
-    ).map(([id, { outbound }]): [string, string[]] => [id, outbound]),
+    ),
   );
 };
 
@@ -43,30 +42,31 @@ export type ActionGraphEdges = Edge[];
 export type ActionGraphProps = { nodes: ActionGraphNodes; edges: ActionGraphEdges };
 
 export const useMenuActions = (actionCreator: () => ActionGraphProps) => {
+  const registry = useContext(RegistryContext);
   const initialMenuGraphProps = actionCreator();
 
   const [graph] = useState(
-    new Graph({ nodes: initialMenuGraphProps.nodes as Node[], edges: edgesArrayToRecord(initialMenuGraphProps.edges) }),
+    new Graph({
+      registry,
+      nodes: initialMenuGraphProps.nodes as Node[],
+      edges: edgesArrayToRecord(initialMenuGraphProps.edges),
+    }),
   );
 
+  // TODO(wittjosiah): Remove dependence on signals.
   useSignalEffect(() => {
     const menuGraphProps = actionCreator();
-    // @ts-ignore
-    graph._addNodes(menuGraphProps.nodes);
-    // @ts-ignore
-    graph._addEdges(menuGraphProps.edges);
+    graph.addNodes(menuGraphProps.nodes);
+    graph.addEdges(menuGraphProps.edges);
   });
 
-  const resolveGroupItems = useCallback(
-    (sourceNode: MenuItemGroup = graph.root as MenuItemGroup) => {
-      if (graph) {
-        return (graph.nodes(sourceNode, { filter: (n): n is any => true }) || null) as MenuItem[] | null;
-      } else {
-        return null;
-      }
+  const useGroupItems = useCallback(
+    (sourceNode?: MenuItemGroup) => {
+      const items = useRxValue(graph.connections(sourceNode?.id || ROOT_ID)) as MenuItem[];
+      return items;
     },
     [graph],
   );
 
-  return { resolveGroupItems };
+  return { useGroupItems };
 };

package/src/index.ts

@@ -3,6 +3,6 @@
 //
 
 export * from './components';
-export * from './defs';
 export * from './hooks';
+export * from './types';
 export { createMenuAction, createMenuItemGroup, createLineSeparator, createGapSeparator } from './util';

package/src/testing/generator.ts

@@ -0,0 +1,115 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { useEffect } from 'react';
+
+import {
+  type Action,
+  Graph,
+  type NodeArg,
+  ACTION_TYPE,
+  ACTION_GROUP_TYPE,
+  actionGroupSymbol,
+  ROOT_ID,
+} from '@dxos/app-graph';
+import { live } from '@dxos/live-object';
+import { faker } from '@dxos/random';
+import { type DeepWriteable } from '@dxos/util';
+
+import { type ActionGraphProps } from '../hooks/useMenuActions';
+import { type MenuAction, type MenuItemGroup, type MenuItem } from '../types';
+
+export type CreateActionsParams = Partial<{
+  type?: typeof ACTION_TYPE | typeof ACTION_GROUP_TYPE;
+  callback: () => void;
+  count: number;
+}>;
+
+const icons = {
+  regular: [
+    'ph--text-b--regular',
+    'ph--text-italic--regular',
+    'ph--text-h-five--regular',
+    'ph--chat-text--regular',
+    'ph--clipboard-text--regular',
+    'ph--link-simple--regular',
+  ],
+  fill: [
+    'ph--text-b--fill',
+    'ph--text-italic--fill',
+    'ph--text-h-five--fill',
+    'ph--chat-text--fill',
+    'ph--clipboard-text--fill',
+    'ph--link-simple--fill',
+  ],
+};
+
+export const createActions = (params?: CreateActionsParams) => {
+  // eslint-disable-next-line no-console
+  const { callback = () => console.log('invoke'), count = 12, type = ACTION_TYPE } = params ?? {};
+  return faker.helpers.multiple(
+    () =>
+      live({
+        id: faker.string.uuid(),
+        type,
+        data: type === ACTION_GROUP_TYPE ? actionGroupSymbol : callback,
+        properties: {
+          label: faker.lorem.words(2),
+          icon: faker.helpers.arrayElement(icons[faker.helpers.arrayElement(Object.keys(icons)) as keyof typeof icons]),
+          disabled: faker.helpers.arrayElement([true, false]),
+          ...(type === ACTION_GROUP_TYPE && { variant: 'dropdownMenu' }),
+        },
+      }),
+    { count },
+  );
+};
+
+export const createNestedActions = () => {
+  const result: ActionGraphProps = { edges: [], nodes: [] };
+  const actionGroups = createActions({ type: ACTION_GROUP_TYPE });
+  actionGroups.forEach((group) => {
+    const actions = createActions();
+    result.nodes.push(group, ...actions);
+    result.edges.push(
+      { source: 'root', target: group.id },
+      ...actions.map((action) => ({ source: group.id, target: action.id })),
+    );
+  });
+  return result;
+};
+
+export const createNestedActionsResolver = (groupParams?: CreateActionsParams, params?: CreateActionsParams) => {
+  const graph = new Graph();
+  const actionGroups = createActions({ type: ACTION_GROUP_TYPE, ...groupParams });
+  actionGroups.forEach((group) => {
+    const actions = createActions(params);
+    graph.addNodes([group as NodeArg<any>, ...(actions as NodeArg<any>[])]);
+    graph.addEdges([
+      { source: 'root', target: group.id },
+      ...actions.map((action) => ({ source: group.id, target: action.id })),
+    ]);
+    graph.expand(group.id);
+  });
+  const resolveGroupItems = (groupNode?: MenuItemGroup) =>
+    (graph.getActions(groupNode?.id ?? ROOT_ID) || null) as MenuItem[] | null;
+  return { resolveGroupItems };
+};
+
+export const mutateActionsOnInterval = (actions: Action[]) => {
+  let cursor = 0;
+  return setInterval(() => {
+    const action = actions[cursor] as DeepWriteable<Action>;
+    action.properties.icon = faker.helpers.arrayElement(
+      action.properties.icon.endsWith('regular') ? icons.fill : icons.regular,
+    );
+    action.properties.disabled = !action.properties.disabled;
+    cursor = (cursor + actions.length + 1) % actions.length;
+  }, 1_000);
+};
+
+export const useMutateActions = (actions: MenuAction[]) =>
+  useEffect(() => {
+    const interval = mutateActionsOnInterval(actions);
+    return () => clearInterval(interval);
+  }, []);

package/src/testing/index.ts

@@ -2,110 +2,4 @@
 // Copyright 2025 DXOS.org
 //
 
-import { useEffect } from 'react';
-
-import { type Action, Graph, type NodeArg, ACTION_TYPE, ACTION_GROUP_TYPE, actionGroupSymbol } from '@dxos/app-graph';
-import { live } from '@dxos/live-object';
-import { faker } from '@dxos/random';
-import { type DeepWriteable } from '@dxos/util';
-
-import { type MenuAction, type MenuItemGroup, type MenuItem } from '../defs';
-import { type ActionGraphProps } from '../hooks';
-
-export type CreateActionsParams = Partial<{
-  type?: typeof ACTION_TYPE | typeof ACTION_GROUP_TYPE;
-  callback: () => void;
-  count: number;
-}>;
-
-const icons = {
-  regular: [
-    'ph--text-b--regular',
-    'ph--text-italic--regular',
-    'ph--text-h-five--regular',
-    'ph--chat-text--regular',
-    'ph--clipboard-text--regular',
-    'ph--link-simple--regular',
-  ],
-  fill: [
-    'ph--text-b--fill',
-    'ph--text-italic--fill',
-    'ph--text-h-five--fill',
-    'ph--chat-text--fill',
-    'ph--clipboard-text--fill',
-    'ph--link-simple--fill',
-  ],
-};
-
-export const createActions = (params?: CreateActionsParams) => {
-  // eslint-disable-next-line no-console
-  const { callback = () => console.log('invoke'), count = 12, type = ACTION_TYPE } = params ?? {};
-  return faker.helpers.multiple(
-    () =>
-      live({
-        id: faker.string.uuid(),
-        type,
-        data: type === ACTION_GROUP_TYPE ? actionGroupSymbol : callback,
-        properties: {
-          label: faker.lorem.words(2),
-          icon: faker.helpers.arrayElement(icons[faker.helpers.arrayElement(Object.keys(icons)) as keyof typeof icons]),
-          disabled: faker.helpers.arrayElement([true, false]),
-          ...(type === ACTION_GROUP_TYPE && { variant: 'dropdownMenu' }),
-        },
-      }),
-    { count },
-  );
-};
-
-export const createNestedActions = () => {
-  const result: ActionGraphProps = { edges: [], nodes: [] };
-  const actionGroups = createActions({ type: ACTION_GROUP_TYPE });
-  actionGroups.forEach((group) => {
-    const actions = createActions();
-    result.nodes.push(group, ...actions);
-    result.edges.push(
-      { source: 'root', target: group.id },
-      ...actions.map((action) => ({ source: group.id, target: action.id })),
-    );
-  });
-  return result;
-};
-
-export const createNestedActionsResolver = (groupParams?: CreateActionsParams, params?: CreateActionsParams) => {
-  const graph = new Graph();
-  const actionGroups = createActions({ type: ACTION_GROUP_TYPE, ...groupParams });
-  actionGroups.forEach((group) => {
-    const actions = createActions(params);
-    // TODO(thure): these methods exist on `graph` but are marked as `@internal`; how should consumers properly build
-    //  graph “islands” for the purposes of these components?
-    // @ts-ignore
-    graph._addNodes([group as NodeArg<any>, ...(actions as NodeArg<any>[])]);
-    // @ts-ignore
-    graph._addEdges([
-      { source: 'root', target: group.id },
-      ...actions.map((action) => ({ source: group.id, target: action.id })),
-    ]);
-    void graph.expand(group);
-  });
-  const resolveGroupItems = (groupNode?: MenuItemGroup) =>
-    (graph.actions(groupNode ?? graph.root) || null) as MenuItem[] | null;
-  return { resolveGroupItems };
-};
-
-export const mutateActionsOnInterval = (actions: Action[]) => {
-  let cursor = 0;
-  return setInterval(() => {
-    const action = actions[cursor] as DeepWriteable<Action>;
-    action.properties.icon = faker.helpers.arrayElement(
-      action.properties.icon.endsWith('regular') ? icons.fill : icons.regular,
-    );
-    action.properties.disabled = !action.properties.disabled;
-    cursor = (cursor + actions.length + 1) % actions.length;
-  }, 1_000);
-};
-
-export const useMutateActions = (actions: MenuAction[]) =>
-  useEffect(() => {
-    const interval = mutateActionsOnInterval(actions);
-    return () => clearInterval(interval);
-  }, []);
+export * from './generator';

package/src/{defs.ts → types.ts}

@@ -26,8 +26,6 @@ export type MenuItemGroupProperties = {
 
 export type MenuAction<P extends {} = {}> = Action<P & MenuActionProperties>;
 
-export type MenuActionHandler<A extends Node = MenuAction> = (action: A) => void;
-
 export const MenuSeparatorType = '@dxos/react-ui-toolbar/separator' as const;
 
 export type MenuSeparator = Node<never, Pick<ToolbarSeparatorProps, 'variant'>> & {
@@ -47,9 +45,8 @@ export type MenuItem = MenuSeparator | MenuAction | MenuItemGroup;
 
 export type MenuItemsResolver = (group?: MenuItemGroup) => MenuItem[] | null;
 
-export type MenuContextValue<A extends Node = MenuAction> = {
-  resolveGroupItems: MenuItemsResolver;
+export type MenuContextValue = {
+  useGroupItems: MenuItemsResolver;
   iconSize: IconButtonProps['size'];
-  onAction: MenuActionHandler<A>;
   attendableId?: string;
 };

package/src/util.ts

@@ -11,7 +11,7 @@ import {
   type MenuItemGroup,
   type MenuItemGroupProperties,
   type MenuSeparator,
-} from './defs';
+} from './types';
 
 export const getShortcut = (action: ActionLike) => {
   return typeof action.properties?.keyBinding === 'string'
@@ -21,16 +21,16 @@ export const getShortcut = (action: ActionLike) => {
 
 export const fallbackIcon = 'ph--placeholder--regular';
 
-// TODO(thure,wittjosiah): This is probably a smell; consider the whether react-ui-menu should use action nodes if the
-//  callback in `data` is never used. See https://github.com/dxos/dxos/pull/8506#discussion_r1925855118
-const noop = () => {};
-
-export const createMenuAction = <P extends {} = {}>(id: string, properties: P & MenuActionProperties) =>
+export const createMenuAction = <P extends {} = {}>(
+  id: string,
+  invoke: () => void,
+  properties: P & MenuActionProperties,
+) =>
   ({
     id,
     type: ACTION_TYPE,
     properties,
-    data: noop,
+    data: invoke,
   }) satisfies MenuAction;
 
 export const createMenuItemGroup = <

package/dist/types/src/defs.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../src/defs.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,MAAM,EAAE,KAAK,WAAW,EAAqB,MAAM,iBAAiB,CAAC;AAC9F,OAAO,EAAE,KAAK,qBAAqB,EAAE,KAAK,KAAK,EAAE,KAAK,eAAe,EAAE,KAAK,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAEnH,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,cAAc,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG;IACpC,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,EAAE,GAAG,EAAE,IAAI,MAAM,CAAC,CAAC,GAAG,oBAAoB,CAAC,CAAC;AAE7E,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,IAAI,GAAG,UAAU,IAAI,CAAC,MAAM,EAAE,CAAC,KAAK,IAAI,CAAC;AAEjF,eAAO,MAAM,iBAAiB,EAAG,kCAA2C,CAAC;AAE7E,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,qBAAqB,EAAE,SAAS,CAAC,CAAC,GAAG;IAChF,IAAI,EAAE,OAAO,iBAAiB,CAAC;CAChC,CAAC;AAEF,eAAO,MAAM,WAAW,SAAU,IAAI,KAAG,IAAI,IAAI,aAAgD,CAAC;AAElG,MAAM,MAAM,2BAA2B,GAAG;IAAE,iBAAiB,EAAE,QAAQ,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AACzF,MAAM,MAAM,6BAA6B,GAAG;IAAE,iBAAiB,EAAE,UAAU,CAAC;IAAC,KAAK,EAAE,MAAM,EAAE,CAAA;CAAE,CAAC;AAE/F,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI,WAAW,CAAC,CAAC,CAAC,CAAC;AAEhG,eAAO,MAAM,WAAW,SAAU,IAAI,KAAG,IAAI,IAAI,aAAgD,CAAC;AAElG,MAAM,MAAM,QAAQ,GAAG,aAAa,GAAG,UAAU,GAAG,aAAa,CAAC;AAElE,MAAM,MAAM,iBAAiB,GAAG,CAAC,KAAK,CAAC,EAAE,aAAa,KAAK,QAAQ,EAAE,GAAG,IAAI,CAAC;AAE7E,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,IAAI,GAAG,UAAU,IAAI;IAC1D,iBAAiB,EAAE,iBAAiB,CAAC;IACrC,QAAQ,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAClC,QAAQ,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC;IAC/B,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC"}

package/dist/types/src/hooks.d.ts

@@ -1,17 +0,0 @@
-import { type NodeArg } from '@dxos/app-graph';
-import { type MenuItem, type MenuItemGroup } from './defs';
-type Edge = {
-    source: string;
-    target: string;
-};
-export type ActionGraphNodes = NodeArg<any>[];
-export type ActionGraphEdges = Edge[];
-export type ActionGraphProps = {
-    nodes: ActionGraphNodes;
-    edges: ActionGraphEdges;
-};
-export declare const useMenuActions: (actionCreator: () => ActionGraphProps) => {
-    resolveGroupItems: (sourceNode?: MenuItemGroup) => MenuItem[] | null;
-};
-export {};
-//# sourceMappingURL=hooks.d.ts.map

package/dist/types/src/hooks.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../src/hooks.ts"],"names":[],"mappings":"AAOA,OAAO,EAAS,KAAK,OAAO,EAAa,MAAM,iBAAiB,CAAC;AAEjE,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,QAAQ,CAAC;AAE3D,KAAK,IAAI,GAAG;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC;AA6B/C,MAAM,MAAM,gBAAgB,GAAG,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC;AAC9C,MAAM,MAAM,gBAAgB,GAAG,IAAI,EAAE,CAAC;AACtC,MAAM,MAAM,gBAAgB,GAAG;IAAE,KAAK,EAAE,gBAAgB,CAAC;IAAC,KAAK,EAAE,gBAAgB,CAAA;CAAE,CAAC;AAEpF,eAAO,MAAM,cAAc,kBAAmB,MAAM,gBAAgB;qCAgBnD,aAAa;CAW7B,CAAC"}

package/dist/types/src/testing/Menus.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Menus.stories.d.ts","sourceRoot":"","sources":["../../../../src/testing/Menus.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AACrB,OAAO,KAAsB,MAAM,OAAO,CAAC;;;;;;;;;;;;;AAc3C,wBAKE;AAOF,eAAO,MAAM,YAAY;;CAcxB,CAAC;AAEF,eAAO,MAAM,OAAO;;CAQnB,CAAC;AAEF,eAAO,MAAM,qBAAqB;;CASjC,CAAC"}