@dxos/react-ui-menu 0.8.3 → 0.8.4-main.1068cf700f

package/src/testing/generator.ts

@@ -2,27 +2,17 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Rx } from '@effect-rx/rx-react';
-import { useEffect } from 'react';
+import { Atom, RegistryContext } from '@effect-atom/atom-react';
+import { useContext, 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 { Graph, Node } from '@dxos/app-graph';
 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';
+import { type MenuItem, type MenuItemGroup } from '../types';
 
-export type CreateActionsParams = Partial<{
-  type?: typeof ACTION_TYPE | typeof ACTION_GROUP_TYPE;
+export type CreateActionsProps = Partial<{
+  type?: typeof Node.ActionType | typeof Node.ActionGroupType;
   callback: () => void;
   count: number;
 }>;
@@ -46,29 +36,27 @@ const icons = {
   ],
 };
 
-export const createActions = (params?: CreateActionsParams) => {
-  // eslint-disable-next-line no-console
-  const { callback = () => console.log('invoke'), count = 12, type = ACTION_TYPE } = params ?? {};
+export const createActions = (params?: CreateActionsProps) => {
+  const { callback = () => console.log('invoke'), count = 12, type = Node.ActionType } = 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' }),
-        },
-      }),
+    () => ({
+      id: faker.string.uuid(),
+      type,
+      data: type === Node.ActionGroupType ? Node.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 === Node.ActionGroupType && { variant: 'dropdownMenu' }),
+      },
+    }),
     { count },
   );
 };
 
-export const createNestedActions = Rx.make(() => {
+const buildNestedActions = (): ActionGraphProps => {
   const result: ActionGraphProps = { edges: [], nodes: [] };
-  const actionGroups = createActions({ type: ACTION_GROUP_TYPE });
+  const actionGroups = createActions({ type: Node.ActionGroupType });
   actionGroups.forEach((group) => {
     const actions = createActions();
     result.nodes.push(group, ...actions);
@@ -78,39 +66,56 @@ export const createNestedActions = Rx.make(() => {
     );
   });
   return result;
-});
+};
+
+export const createNestedActions = Atom.make(buildNestedActions()).pipe(Atom.keepAlive);
 
-export const createNestedActionsResolver = (groupParams?: CreateActionsParams, params?: CreateActionsParams) => {
-  const graph = new Graph();
-  const actionGroups = createActions({ type: ACTION_GROUP_TYPE, ...groupParams });
+export const createNestedActionsResolver = (groupParams?: CreateActionsProps, params?: CreateActionsProps) => {
+  const graph = Graph.make();
+  const actionGroups = createActions({ type: Node.ActionGroupType, ...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 })),
-    ]);
-    void graph.expand(group.id);
+    graph.pipe(
+      Graph.addNodes([group as Node.NodeArg<any>, ...(actions as Node.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;
+    (Graph.getActions(graph, groupNode?.id ?? Node.RootId) || 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);
-};
+/**
+ * Hook to mutate actions in an atom on an interval for testing reactivity.
+ */
+export const useMutateActions = (actionsAtom: Atom.Writable<ActionGraphProps>) => {
+  const registry = useContext(RegistryContext);
 
-export const useMutateActions = (actions: MenuAction[]) =>
   useEffect(() => {
-    const interval = mutateActionsOnInterval(actions);
+    let cursor = 0;
+    const interval = setInterval(() => {
+      const current = registry.get(actionsAtom);
+      const nodes = current.nodes.map((node, index) => {
+        if (index !== cursor) {
+          return node;
+        }
+        return {
+          ...node,
+          properties: {
+            ...node.properties,
+            icon: faker.helpers.arrayElement(node.properties?.icon?.endsWith('regular') ? icons.fill : icons.regular),
+            disabled: !node.properties?.disabled,
+          },
+        };
+      });
+      registry.set(actionsAtom, { ...current, nodes });
+      cursor = (cursor + 1) % current.nodes.length;
+    }, 1_000);
+
     return () => clearInterval(interval);
-  }, []);
+  }, [actionsAtom, registry]);
+};

package/src/translations.ts

@@ -2,12 +2,14 @@
 // Copyright 2023 DXOS.org
 //
 
-export const translationKey = 'menus';
+import { type Resource } from '@dxos/react-ui';
 
-export default [
+export const translationKey = '@dxos/react-ui-menu';
+
+export const translations = [
   {
     'en-US': {
       [translationKey]: {},
     },
   },
-] as const;
+] as const satisfies Resource[];

package/src/types.ts

@@ -2,51 +2,39 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type Node, type Action, type ActionGroup, ACTION_GROUP_TYPE } from '@dxos/app-graph';
-import { type ToolbarSeparatorProps, type Label, type IconButtonProps, type ClassNameValue } from '@dxos/react-ui';
-
-export type MenuActionProperties = {
-  label: Label;
-  icon?: string;
-  value?: string;
-  disabled?: boolean;
-  hidden?: boolean;
-  iconOnly?: boolean;
-  testId?: string;
-  variant?: 'action' | 'toggle';
-  checked?: boolean;
-  classNames?: ClassNameValue;
-};
-
-export type MenuItemGroupProperties = {
-  label: Label;
-  icon?: string;
-  iconOnly?: boolean;
-};
+import { Node } from '@dxos/app-graph';
+import { type IconButtonProps, type ToolbarSeparatorProps } from '@dxos/react-ui';
+import { type MenuActionProperties } from '@dxos/ui-types';
 
-export type MenuAction<P extends {} = {}> = Action<P & MenuActionProperties>;
+export type MenuAction<P extends {} = {}> = Node.Action<P & MenuActionProperties>;
 
 export const MenuSeparatorType = '@dxos/react-ui-toolbar/separator' as const;
 
-export type MenuSeparator = Node<never, Pick<ToolbarSeparatorProps, 'variant'>> & {
+export type MenuSeparator = Node.Node<never, Pick<ToolbarSeparatorProps, 'variant'>> & {
   type: typeof MenuSeparatorType;
 };
 
-export const isSeparator = (node: Node): node is MenuSeparator => node.type === MenuSeparatorType;
+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>> = ActionGroup<P>;
+export type MenuItemGroup<P extends Record<string, any> = Record<string, any>> = Node.ActionGroup<P>;
 
-export const isMenuGroup = (node: Node): node is MenuItemGroup => node.type === ACTION_GROUP_TYPE;
+export const isMenuGroup = (node: Node.Node): node is MenuItemGroup => node.type === Node.ActionGroupType;
 
 export type MenuItem = MenuSeparator | MenuAction | MenuItemGroup;
 
 export type MenuItemsResolver = (group?: MenuItemGroup) => MenuItem[] | null;
 
+export type ActionExecutor = (action: MenuAction, params: Node.InvokeProps) => void;
+
 export type MenuContextValue = {
   useGroupItems: MenuItemsResolver;
   iconSize: IconButtonProps['size'];
   attendableId?: string;
+  /** If true, the menu is always active regardless of attention state. */
+  alwaysActive?: boolean;
+  /** Optional action executor. If provided, will be used instead of default execution. */
+  onAction?: ActionExecutor;
 };

package/src/util.ts

@@ -2,18 +2,31 @@
 // Copyright 2025 DXOS.org
 //
 
-import { ACTION_GROUP_TYPE, ACTION_TYPE, actionGroupSymbol, type ActionLike } from '@dxos/app-graph';
+import * as Effect from 'effect/Effect';
+
+import { Node } from '@dxos/app-graph';
+import { runAndForwardErrors } from '@dxos/effect';
+import { type MenuActionProperties, type MenuItemGroupProperties } from '@dxos/ui-types';
 import { getHostPlatform } from '@dxos/util';
 
-import {
-  type MenuAction,
-  type MenuActionProperties,
-  type MenuItemGroup,
-  type MenuItemGroupProperties,
-  type MenuSeparator,
-} from './types';
+import { type MenuAction, type MenuItemGroup, type MenuSeparator } from './types';
+
+/**
+ * Execute a menu action's Effect with its captured context.
+ * This provides the `_actionContext` layer if available.
+ */
+export const executeMenuAction = async (action: MenuAction, params: Node.InvokeProps = {}): Promise<void> => {
+  let effect = action.data(params);
+
+  // Provide captured action context if available.
+  if (action._actionContext) {
+    effect = effect.pipe(Effect.provide(action._actionContext));
+  }
+
+  await runAndForwardErrors(effect);
+};
 
-export const getShortcut = (action: ActionLike) => {
+export const getShortcut = (action: Node.ActionLike) => {
   return typeof action.properties?.keyBinding === 'string'
     ? action.properties.keyBinding
     : action.properties?.keyBinding?.[getHostPlatform()];
@@ -28,9 +41,9 @@ export const createMenuAction = <P extends {} = {}>(
 ) =>
   ({
     id,
-    type: ACTION_TYPE,
+    type: Node.ActionType,
     properties,
-    data: invoke,
+    data: () => Effect.sync(invoke),
   }) satisfies MenuAction;
 
 export const createMenuItemGroup = <
@@ -41,9 +54,9 @@ export const createMenuItemGroup = <
 ) =>
   ({
     id,
-    type: ACTION_GROUP_TYPE,
+    type: Node.ActionGroupType,
     properties,
-    data: actionGroupSymbol,
+    data: Node.actionGroupSymbol,
   }) satisfies MenuItemGroup;
 
 export const createGapSeparator = (id: string = 'gap', source: string = 'root') => ({
@@ -55,7 +68,12 @@ export const createGapSeparator = (id: string = 'gap', source: string = 'root')
       data: undefined as never,
     } satisfies MenuSeparator,
   ],
-  edges: [{ source, target: id }],
+  edges: [
+    {
+      source,
+      target: id,
+    },
+  ],
 });
 
 export const createLineSeparator = (id: string = 'line', source: string = 'root') => ({