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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-menu",
-  "version": "0.8.3",
+  "version": "0.8.4-main.f9ba587",
   "description": "Components for facilitating reactive and consistent menus.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -28,34 +28,35 @@
     "@preact/signals-react": "^3.2.0",
     "@radix-ui/react-context": "1.1.1",
     "@radix-ui/react-use-controllable-state": "1.1.0",
-    "@dxos/app-graph": "0.8.3",
-    "@dxos/keyboard": "0.8.3",
-    "@dxos/react-ui-attention": "0.8.3",
-    "@dxos/util": "0.8.3"
+    "@dxos/app-graph": "0.8.4-main.f9ba587",
+    "@dxos/invariant": "0.8.4-main.f9ba587",
+    "@dxos/keyboard": "0.8.4-main.f9ba587",
+    "@dxos/react-ui-attention": "0.8.4-main.f9ba587",
+    "@dxos/util": "0.8.4-main.f9ba587"
   },
   "devDependencies": {
-    "@effect-rx/rx-react": "^0.34.1",
-    "@effect/platform": "0.80.12",
+    "@effect-rx/rx-react": "0.38.0",
+    "@effect/platform": "0.88.0",
     "@types/react": "~18.2.0",
     "@types/react-dom": "~18.2.0",
-    "effect": "3.14.21",
+    "effect": "3.16.13",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/live-object": "0.8.3",
-    "@dxos/random": "0.8.3",
-    "@dxos/react-ui": "0.8.3",
-    "@dxos/react-ui-theme": "0.8.3",
-    "@dxos/storybook-utils": "0.8.3"
+    "@dxos/live-object": "0.8.4-main.f9ba587",
+    "@dxos/random": "0.8.4-main.f9ba587",
+    "@dxos/react-ui-theme": "0.8.4-main.f9ba587",
+    "@dxos/react-ui": "0.8.4-main.f9ba587",
+    "@dxos/storybook-utils": "0.8.4-main.f9ba587"
   },
   "peerDependencies": {
     "@effect-rx/rx-react": "^0.34.1",
-    "@effect/platform": "0.80.12",
+    "@effect/platform": "^0.80.12",
     "effect": "^3.13.3",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.3",
-    "@dxos/react-ui-theme": "0.8.3"
+    "@dxos/react-ui": "0.8.4-main.f9ba587",
+    "@dxos/react-ui-theme": "0.8.4-main.f9ba587"
   },
   "publishConfig": {
     "access": "public"

package/src/builder.ts

@@ -0,0 +1,62 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { invariant } from '@dxos/invariant';
+
+import type { ActionGraphProps } from './hooks';
+import type { MenuActionProperties, MenuItemGroupProperties } from './types';
+import { createMenuAction, createMenuItemGroup } from './util';
+
+export interface ActionGroupBuilder {
+  action<P extends {} = {}>(id: string, invoke: () => void, properties: P & MenuActionProperties): this;
+  group<P extends {} = {}>(
+    id: string,
+    properties: P & MenuItemGroupProperties,
+    cb: (builder: ActionGroupBuilder) => void,
+  ): this;
+}
+
+export interface MenuBuilder extends ActionGroupBuilder {
+  root(props: MenuItemGroupProperties): this;
+  build(): ActionGraphProps;
+}
+
+export const MenuBuilder = Object.freeze({
+  make: (): MenuBuilder => new MenuBuilderImpl({ nodes: [], edges: [] }, 'root'),
+});
+
+class MenuBuilderImpl implements MenuBuilder {
+  constructor(
+    private readonly _data: ActionGraphProps,
+    private readonly _rootId: string,
+  ) {}
+
+  action<P extends {} = {}>(id: string, invoke: () => void, properties: P & MenuActionProperties): this {
+    this._data.nodes.push(createMenuAction(id, invoke, properties));
+    this._data.edges.push({ source: this._rootId, target: id });
+    return this;
+  }
+
+  root(props: MenuItemGroupProperties): this {
+    invariant(this._rootId === 'root', 'Root group can only be at the top level');
+    invariant(this._data.nodes.find((node) => node.id === 'root') === undefined, 'Root group can only be created once');
+    this._data.nodes.push(createMenuItemGroup('root', props));
+    return this;
+  }
+
+  group<P extends {} = {}>(
+    id: string,
+    properties: P & MenuItemGroupProperties,
+    cb: (builder: ActionGroupBuilder) => void,
+  ): this {
+    this._data.nodes.push(createMenuItemGroup(id, properties));
+    this._data.edges.push({ source: this._rootId, target: id });
+    cb(new MenuBuilderImpl(this._data, id));
+    return this;
+  }
+
+  build(): ActionGraphProps {
+    return this._data;
+  }
+}

package/src/components/ActionLabel.tsx

@@ -16,9 +16,8 @@ import { getShortcut } from '../util';
 type Action = GraphAction<MenuActionProperties> | ActionGroup<Omit<MenuActionProperties, 'variant'>>;
 
 export const ActionLabel = ({ action }: { action: Action }) => {
-  const shortcut = getShortcut(action);
   const { t } = useTranslation(translationKey);
-
+  const shortcut = getShortcut(action);
   return (
     <>
       <span className='grow truncate'>{toLocalizedString(action.properties!.label, t)}</span>

package/src/components/Menus.stories.tsx

@@ -7,12 +7,12 @@ import React, { useCallback, useMemo } from 'react';
 
 import { faker } from '@dxos/random';
 import { IconButton } from '@dxos/react-ui';
-import { withLayout, withSignals, withTheme } from '@dxos/storybook-utils';
+import { withTheme } from '@dxos/storybook-utils';
 
 import { DropdownMenu as NaturalDropdownMenu, ToolbarMenu, MenuProvider } from '../components';
 import { useMenuActions } from '../hooks';
 import { createActions, createNestedActions, createNestedActionsResolver, useMutateActions } from '../testing';
-import translations from '../translations';
+import { translations } from '../translations';
 import { type MenuAction } from '../types';
 
 faker.seed(1234);
@@ -20,8 +20,10 @@ faker.seed(1234);
 export default {
   title: 'ui/react-ui-menu/Menus',
   component: ToolbarMenu,
-  decorators: [withTheme, withLayout(), withSignals],
-  parameters: { translations },
+  decorators: [withTheme],
+  parameters: {
+    translations,
+  },
 };
 
 export const DropdownMenu = {

package/src/components/ToolbarMenu.tsx

@@ -163,7 +163,7 @@ export const ToolbarMenu = ({
   const { attendableId } = useMenu('ToolbarMenu', __menuScope);
   const { hasAttention } = useAttention(attendableId);
   const InnerRoot = wrapContents ? 'div' : Fragment;
-  const innerRootProps = wrapContents ? { role: 'none', className: mx(textBlockWidth, toolbarLayout) } : {};
+  const innerRootProps = wrapContents ? { role: 'none', className: mx(textBlockWidth, toolbarLayout, 'bs-full') } : {};
   return (
     <NaturalToolbar.Root
       {...props}

package/src/index.ts

@@ -8,3 +8,4 @@ export * from './components';
 export * from './hooks';
 export * from './types';
 export { createMenuAction, createMenuItemGroup, createLineSeparator, createGapSeparator } from './util';
+export { MenuBuilder } from './builder';

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 = 'react-ui-menu';
+
+export const translations = [
   {
     'en-US': {
       [translationKey]: {},
     },
   },
-] as const;
+] as const satisfies Resource[];