@dxos/react-ui-menu 0.8.4-main.74a063c4e0 → 0.8.4-main.765dc60934

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-menu",
-  "version": "0.8.4-main.74a063c4e0",
+  "version": "0.8.4-main.765dc60934",
   "description": "Components for facilitating reactive and consistent menus.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -8,22 +8,28 @@
     "type": "git",
     "url": "https://github.com/dxos/dxos"
   },
-  "license": "MIT",
+  "license": "FSL-1.1-Apache-2.0",
   "author": "DXOS.org",
   "sideEffects": false,
   "type": "module",
+  "imports": {
+    "#translations": "./src/translations.ts"
+  },
   "exports": {
     ".": {
       "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts",
       "browser": "./dist/lib/browser/index.mjs",
       "node": "./dist/lib/node-esm/index.mjs"
+    },
+    "./translations": {
+      "source": "./src/translations.ts",
+      "types": "./dist/types/src/translations.d.ts",
+      "browser": "./dist/lib/browser/translations.mjs",
+      "node": "./dist/lib/node-esm/translations.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
-  "typesVersions": {
-    "*": {}
-  },
   "files": [
     "dist",
     "src"
@@ -31,14 +37,14 @@
   "dependencies": {
     "@radix-ui/react-context": "1.1.1",
     "@radix-ui/react-use-controllable-state": "1.1.0",
-    "@dxos/app-graph": "0.8.4-main.74a063c4e0",
-    "@dxos/effect": "0.8.4-main.74a063c4e0",
-    "@dxos/invariant": "0.8.4-main.74a063c4e0",
-    "@dxos/keyboard": "0.8.4-main.74a063c4e0",
-    "@dxos/log": "0.8.4-main.74a063c4e0",
-    "@dxos/react-ui-attention": "0.8.4-main.74a063c4e0",
-    "@dxos/ui-types": "0.8.4-main.74a063c4e0",
-    "@dxos/util": "0.8.4-main.74a063c4e0"
+    "@dxos/app-graph": "0.8.4-main.765dc60934",
+    "@dxos/log": "0.8.4-main.765dc60934",
+    "@dxos/effect": "0.8.4-main.765dc60934",
+    "@dxos/keyboard": "0.8.4-main.765dc60934",
+    "@dxos/util": "0.8.4-main.765dc60934",
+    "@dxos/react-ui-attention": "0.8.4-main.765dc60934",
+    "@dxos/ui-types": "0.8.4-main.765dc60934",
+    "@dxos/invariant": "0.8.4-main.765dc60934"
   },
   "devDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
@@ -50,11 +56,11 @@
     "effect": "3.20.0",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "vite": "^7.1.11",
-    "@dxos/random": "0.8.4-main.74a063c4e0",
-    "@dxos/storybook-utils": "0.8.4-main.74a063c4e0",
-    "@dxos/react-ui": "0.8.4-main.74a063c4e0",
-    "@dxos/ui-theme": "0.8.4-main.74a063c4e0"
+    "vite": "^8.0.13",
+    "@dxos/random": "0.8.4-main.765dc60934",
+    "@dxos/react-ui": "0.8.4-main.765dc60934",
+    "@dxos/storybook-utils": "0.8.4-main.765dc60934",
+    "@dxos/ui-theme": "0.8.4-main.765dc60934"
   },
   "peerDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
@@ -62,8 +68,8 @@
     "effect": "3.20.0",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/react-ui": "0.8.4-main.74a063c4e0",
-    "@dxos/ui-theme": "0.8.4-main.74a063c4e0"
+    "@dxos/react-ui": "0.8.4-main.765dc60934",
+    "@dxos/ui-theme": "0.8.4-main.765dc60934"
   },
   "publishConfig": {
     "access": "public"

package/src/components/ActionLabel.tsx

@@ -10,7 +10,8 @@ import { type TFunction, toLocalizedString, useTranslation } from '@dxos/react-u
 import { mx } from '@dxos/ui-theme';
 import { type MenuActionProperties } from '@dxos/ui-types';
 
-import { translationKey } from '../translations';
+import { translationKey } from '#translations';
+
 import { getShortcut } from '../util';
 
 type Action = Node.Action<MenuActionProperties> | Node.ActionGroup<Omit<MenuActionProperties, 'variant'>>;

package/src/components/Menu.stories.tsx

@@ -11,10 +11,11 @@ import { Button, IconButton } from '@dxos/react-ui';
 import { withTheme } from '@dxos/react-ui/testing';
 import { withRegistry } from '@dxos/storybook-utils';
 
+import { translations } from '#translations';
+
 import { Menu, useMenu } from '../components';
 import { type ActionGraphProps, useMenuActions } from '../hooks';
 import { createActions } from '../testing';
-import { translations } from '../translations';
 import { type MenuItem } from '../types';
 import { createMenuAction } from '../util';
 

package/src/components/ToolbarMenu.stories.tsx

@@ -11,10 +11,11 @@ import { IconButton } from '@dxos/react-ui';
 import { withTheme } from '@dxos/react-ui/testing';
 import { withRegistry } from '@dxos/storybook-utils';
 
+import { translations } from '#translations';
+
 import { Menu } from '../components';
 import { type ActionGraphProps, useMenuActions } from '../hooks';
 import { createActions, createNestedActions, createNestedActionsResolver, useMutateActions } from '../testing';
-import { translations } from '../translations';
 
 random.seed(1234);
 
@@ -68,6 +69,18 @@ export const Toolbar: Story = {
   },
 };
 
+/**
+ * Reactive toolbar driven by an atom-backed actions hook.
+ *
+ * Defining actions inside a hook lets them subscribe to reactive state
+ * (echo, atoms, settings) without re-rendering the toolbar shell.
+ * The menu structure is data, not JSX.
+ *
+ * @idiom org.dxos.react-ui-menu.toolbarMenu
+ *   applies: Toolbars whose entries depend on reactive state
+ *   instead-of: Hand-wired children inside a bespoke `Toolbar.Root`
+ *   uses: {@link useMenuActions}, {@link Menu.Root}, {@link Menu.Toolbar}
+ */
 export const UseMenuActionsToolbar: Story = {
   render: () => {
     useMutateActions(createNestedActions);

package/src/components/ToolbarMenu.tsx

@@ -9,7 +9,8 @@ import { useAttention } from '@dxos/react-ui-attention';
 import { composable, composableProps } from '@dxos/ui-theme';
 import { type MenuActionProperties } from '@dxos/ui-types';
 
-import { translationKey } from '../translations';
+import { translationKey } from '#translations';
+
 import {
   type MenuAction,
   type MenuItem,
@@ -56,7 +57,7 @@ const ActionToolbarItem = ({ __menuScope, action }: MenuScopedProps<{ action: Me
   const { iconSize, onAction } = useMenuScoped('ActionToolbarItem', __menuScope);
   const { t } = useTranslation(translationKey);
 
-  const { icon, iconOnly = true, disabled, testId, hidden, classNames } = action.properties;
+  const { icon, iconOnly = true, disabled, testId, hidden, classNames, iconClassNames } = action.properties;
   const buttonVariant =
     (action.properties as { variant?: string }).variant === 'primary' ? ('primary' as const) : ('ghost' as const);
 
@@ -87,6 +88,7 @@ const ActionToolbarItem = ({ __menuScope, action }: MenuScopedProps<{ action: Me
       icon={icon}
       size={iconSize}
       iconOnly={iconOnly}
+      iconClassNames={iconClassNames}
       label={actionLabel(action, t)}
     />
   ) : (
@@ -111,6 +113,11 @@ const DropdownMenuToolbarItem = ({
       // TODO(thure): Handle other menu item types.
       (activeItem as MenuAction)?.properties.icon) ||
     group.properties.icon;
+  // Follow the same `applyActive` rule for `iconClassNames` so a per-item
+  // accent (e.g. tag colour) tracks the displayed icon.
+  const iconClassNames =
+    ((group.properties as any).applyActive && (activeItem as MenuAction)?.properties.iconClassNames) ||
+    (group.properties as { iconClassNames?: any }).iconClassNames;
   const Root = icon ? NaturalToolbar.IconButton : NaturalToolbar.Button;
   const labelAction = (group.properties as any).applyActive && activeItem ? (activeItem as MenuAction) : group;
   const rootProps = icon
@@ -118,6 +125,7 @@ const DropdownMenuToolbarItem = ({
         icon,
         size: iconSize,
         iconOnly,
+        iconClassNames,
         label: actionLabel(labelAction, t),
         caretDown: true,
       }
@@ -142,7 +150,7 @@ const DropdownMenuToolbarItem = ({
 const ToggleGroupItem = ({ __menuScope, group, action }: MenuScopedProps<ToolbarMenuActionProps>) => {
   const { iconSize, onAction } = useMenuScoped('ToggleGroupItem', __menuScope);
   const { t } = useTranslation(translationKey);
-  const { icon, iconOnly = true, disabled, testId, hidden, classNames } = action.properties;
+  const { icon, iconOnly = true, disabled, testId, hidden, classNames, iconClassNames } = action.properties;
 
   const handleClick = useCallback(() => {
     if (onAction) {
@@ -167,6 +175,7 @@ const ToggleGroupItem = ({ __menuScope, group, action }: MenuScopedProps<Toolbar
       icon={icon}
       size={iconSize}
       iconOnly={iconOnly}
+      iconClassNames={iconClassNames}
       label={actionLabel(action, t)}
     />
   ) : (

package/src/hooks/useMenuActions.ts

@@ -2,8 +2,8 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type Atom, RegistryContext, useAtomValue } from '@effect-atom/atom-react';
-import { useCallback, useContext, useMemo } from 'react';
+import { Atom, RegistryContext, useAtomValue } from '@effect-atom/atom-react';
+import { type DependencyList, useCallback, useContext, useMemo } from 'react';
 
 import { Graph, Node } from '@dxos/app-graph';
 
@@ -44,3 +44,15 @@ export const useMenuActions = (props: Atom.Atom<ActionGraphProps>): MenuActions
 
   return { items };
 };
+
+/**
+ * Convenience wrapper around `useMenuActions` that creates the backing atom inline.
+ * Pass a builder thunk and a dependency list — the hook memoizes `Atom.make(build)` and threads
+ * it through `useMenuActions`. Saves the `useMemo(() => Atom.make(...), deps)` boilerplate when
+ * the action graph is composed from local state (e.g. a toolbar driven by component state).
+ */
+export const useMenuBuilder = (build: (get: Atom.Context) => ActionGraphProps, deps: DependencyList): MenuActions => {
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const atom = useMemo(() => Atom.make(build), deps);
+  return useMenuActions(atom);
+};