@dxos/react-ui-menu 0.8.4-main.c4373fc → 0.8.4-main.c85a9c8dae

package/package.json

@@ -1,12 +1,16 @@
 {
   "name": "@dxos/react-ui-menu",
-  "version": "0.8.4-main.c4373fc",
+  "version": "0.8.4-main.c85a9c8dae",
   "description": "Components for facilitating reactive and consistent menus.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dxos/dxos"
+  },
   "license": "MIT",
   "author": "DXOS.org",
-  "sideEffects": true,
+  "sideEffects": false,
   "type": "module",
   "exports": {
     ".": {
@@ -25,39 +29,41 @@
     "src"
   ],
   "dependencies": {
-    "@preact-signals/safe-react": "^0.9.0",
-    "@preact/signals-react": "^3.3.0",
     "@radix-ui/react-context": "1.1.1",
     "@radix-ui/react-use-controllable-state": "1.1.0",
-    "@dxos/app-graph": "0.8.4-main.c4373fc",
-    "@dxos/keyboard": "0.8.4-main.c4373fc",
-    "@dxos/invariant": "0.8.4-main.c4373fc",
-    "@dxos/react-ui-attention": "0.8.4-main.c4373fc",
-    "@dxos/util": "0.8.4-main.c4373fc"
+    "@dxos/app-graph": "0.8.4-main.c85a9c8dae",
+    "@dxos/invariant": "0.8.4-main.c85a9c8dae",
+    "@dxos/effect": "0.8.4-main.c85a9c8dae",
+    "@dxos/log": "0.8.4-main.c85a9c8dae",
+    "@dxos/react-ui-attention": "0.8.4-main.c85a9c8dae",
+    "@dxos/ui-types": "0.8.4-main.c85a9c8dae",
+    "@dxos/keyboard": "0.8.4-main.c85a9c8dae",
+    "@dxos/util": "0.8.4-main.c85a9c8dae"
   },
   "devDependencies": {
-    "@effect-rx/rx-react": "0.42.4",
-    "@effect/platform": "0.92.1",
-    "@types/react": "~19.2.2",
-    "@types/react-dom": "~19.2.1",
-    "effect": "3.18.3",
-    "react": "~19.2.0",
-    "react-dom": "~19.2.0",
-    "vite": "7.1.9",
-    "@dxos/live-object": "0.8.4-main.c4373fc",
-    "@dxos/react-ui": "0.8.4-main.c4373fc",
-    "@dxos/random": "0.8.4-main.c4373fc",
-    "@dxos/react-ui-theme": "0.8.4-main.c4373fc",
-    "@dxos/storybook-utils": "0.8.4-main.c4373fc"
+    "@effect-atom/atom-react": "^0.5.0",
+    "@effect/platform": "0.94.4",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.0",
+    "@types/react": "~19.2.7",
+    "@types/react-dom": "~19.2.3",
+    "effect": "3.19.16",
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "vite": "^7.1.11",
+    "@dxos/random": "0.8.4-main.c85a9c8dae",
+    "@dxos/react-ui": "0.8.4-main.c85a9c8dae",
+    "@dxos/ui-theme": "0.8.4-main.c85a9c8dae",
+    "@dxos/storybook-utils": "0.8.4-main.c85a9c8dae"
   },
   "peerDependencies": {
-    "@effect-rx/rx-react": "^0.34.1",
-    "@effect/platform": "^0.80.12",
-    "effect": "^3.13.3",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "@dxos/react-ui": "0.8.4-main.c4373fc",
-    "@dxos/react-ui-theme": "0.8.4-main.c4373fc"
+    "@effect-atom/atom-react": "^0.5.0",
+    "@effect/platform": "0.94.4",
+    "effect": "3.19.16",
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "@dxos/react-ui": "0.8.4-main.c85a9c8dae",
+    "@dxos/ui-theme": "0.8.4-main.c85a9c8dae"
   },
   "publishConfig": {
     "access": "public"

package/src/builder.ts

@@ -3,18 +3,25 @@
 //
 
 import { invariant } from '@dxos/invariant';
+import type { MenuActionProperties, MenuItemGroupProperties } from '@dxos/ui-types';
 
 import type { ActionGraphProps } from './hooks';
-import type { MenuActionProperties, MenuItemGroupProperties } from './types';
+import { MenuSeparatorType } from './types';
 import { createMenuAction, createMenuItemGroup } from './util';
 
 export interface ActionGroupBuilder {
+  /** Add an action node as a child of the current group. */
   action<P extends {} = {}>(id: string, props: P & MenuActionProperties, invoke: () => void): this;
+  /** Add a nested action group. */
   group<P extends {} = {}>(
     id: string,
     props: P & MenuItemGroupProperties,
     cb: (builder: ActionGroupBuilder) => void,
   ): this;
+  /** Merge pre-built nodes and edges into this builder. */
+  subgraph(subgraph: ActionGraphProps): this;
+  /** Add a separator. */
+  separator(id?: string, variant?: 'gap' | 'line'): this;
 }
 
 export interface MenuBuilder extends ActionGroupBuilder {
@@ -22,11 +29,9 @@ export interface MenuBuilder extends ActionGroupBuilder {
   build(): ActionGraphProps;
 }
 
-export const MenuBuilder = Object.freeze({
-  make: (): MenuBuilder => new MenuBuilderImpl({ nodes: [], edges: [] }, 'root'),
-});
-
 class MenuBuilderImpl implements MenuBuilder {
+  private _separatorCount = 0;
+
   constructor(
     private readonly _data: ActionGraphProps,
     private readonly _rootId: string,
@@ -39,9 +44,13 @@ class MenuBuilderImpl implements MenuBuilder {
     return this;
   }
 
+  build(): ActionGraphProps {
+    return this._data;
+  }
+
   action<P extends {} = {}>(id: string, props: P & MenuActionProperties, invoke: () => void): this {
     this._data.nodes.push(createMenuAction(id, invoke, props));
-    this._data.edges.push({ source: this._rootId, target: id });
+    this._data.edges.push({ source: this._rootId, target: id, relation: 'child' });
     return this;
   }
 
@@ -51,12 +60,30 @@ class MenuBuilderImpl implements MenuBuilder {
     cb: (builder: ActionGroupBuilder) => void,
   ): this {
     this._data.nodes.push(createMenuItemGroup(id, props));
-    this._data.edges.push({ source: this._rootId, target: id });
+    this._data.edges.push({ source: this._rootId, target: id, relation: 'child' });
     cb(new MenuBuilderImpl(this._data, id));
     return this;
   }
 
-  build(): ActionGraphProps {
-    return this._data;
+  subgraph(subgraph: ActionGraphProps): this {
+    this._data.nodes.push(...subgraph.nodes);
+    this._data.edges.push(...subgraph.edges);
+    return this;
+  }
+
+  separator(id?: string, variant: 'gap' | 'line' = 'gap'): this {
+    id ??= `separator-${++this._separatorCount}`;
+    this._data.nodes.push({
+      id,
+      type: MenuSeparatorType,
+      properties: { variant },
+      data: undefined as never,
+    });
+    this._data.edges.push({ source: this._rootId, target: id, relation: 'child' });
+    return this;
   }
 }
+
+export const MenuBuilder = Object.freeze({
+  make: (): MenuBuilder => new MenuBuilderImpl({ nodes: [], edges: [] }, 'root'),
+});

package/src/components/ActionLabel.tsx

@@ -4,16 +4,16 @@
 
 import React from 'react';
 
-import { type ActionGroup, type Action as GraphAction } from '@dxos/app-graph';
+import { type Node } from '@dxos/app-graph';
 import { keySymbols } from '@dxos/keyboard';
 import { type TFunction, toLocalizedString, useTranslation } from '@dxos/react-ui';
-import { descriptionText, mx } from '@dxos/react-ui-theme';
+import { mx } from '@dxos/ui-theme';
+import { type MenuActionProperties } from '@dxos/ui-types';
 
 import { translationKey } from '../translations';
-import { type MenuActionProperties } from '../types';
 import { getShortcut } from '../util';
 
-type Action = GraphAction<MenuActionProperties> | ActionGroup<Omit<MenuActionProperties, 'variant'>>;
+type Action = Node.Action<MenuActionProperties> | Node.ActionGroup<Omit<MenuActionProperties, 'variant'>>;
 
 export const ActionLabel = ({ action }: { action: Action }) => {
   const { t } = useTranslation(translationKey);
@@ -21,7 +21,7 @@ export const ActionLabel = ({ action }: { action: Action }) => {
   return (
     <>
       <span className='grow truncate'>{toLocalizedString(action.properties!.label, t)}</span>
-      {shortcut && <span className={mx('shrink-0', descriptionText)}>{keySymbols(shortcut).join('')}</span>}
+      {shortcut && <span className={mx('shrink-0', 'text-description')}>{keySymbols(shortcut).join('')}</span>}
     </>
   );
 };

package/src/components/DropdownMenu.tsx

@@ -8,9 +8,10 @@ import React, { type MouseEvent, useCallback } from 'react';
 import { type DropdownMenuRootProps, Icon, DropdownMenu as NaturalDropdownMenu } from '@dxos/react-ui';
 
 import { type MenuAction, type MenuItem, type MenuItemGroup } from '../types';
+import { executeMenuAction } from '../util';
 
 import { ActionLabel } from './ActionLabel';
-import { type MenuScopedProps, useMenu, useMenuItems } from './MenuContext';
+import { type MenuScopedProps, useMenuItems, useMenuScoped } from './Menu';
 
 export type DropdownMenuProps = DropdownMenuRootProps & {
   group?: MenuItemGroup;
@@ -29,7 +30,7 @@ const DropdownMenuItem = ({
   // TODO(thure): handle other items.
   const action = item as MenuAction;
   const handleClick = useCallback((event: MouseEvent) => onClick(action, event), [action, onClick]);
-  const { iconSize } = useMenu('DropdownMenuItem', __menuScope);
+  const { iconSize } = useMenuScoped('DropdownMenuItem', __menuScope);
   return (
     <NaturalDropdownMenu.Item
       onClick={handleClick}
@@ -60,17 +61,23 @@ const DropdownMenuRoot = ({
     onChange: onOpenChange,
   });
 
+  const { onAction } = useMenuScoped('DropdownMenuRoot', __menuScope);
+
   const handleActionClick = useCallback(
     (action: MenuAction, event: MouseEvent) => {
       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?
+      // TODO(thure): Why does Dialog's modal-ness cause issues if we don't explicitly close the menu here?
       setOptionsMenuOpen(false);
-      void action.data?.({ parent: group, caller });
+      if (onAction) {
+        onAction(action, { parent: group, caller });
+      } else {
+        void executeMenuAction(action, { parent: group, caller });
+      }
     },
-    [group, caller],
+    [group, caller, onAction],
   );
 
   const items = useMenuItems(group, propsItems);