@dxos/react-ui-menu 0.8.4-main.cb12b3f963 → 0.8.4-main.d05539e30a

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-menu",
-  "version": "0.8.4-main.cb12b3f963",
+  "version": "0.8.4-main.d05539e30a",
   "description": "Components for facilitating reactive and consistent menus.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -8,7 +8,7 @@
     "type": "git",
     "url": "https://github.com/dxos/dxos"
   },
-  "license": "MIT",
+  "license": "FSL-1.1-Apache-2.0",
   "author": "DXOS.org",
   "sideEffects": false,
   "type": "module",
@@ -37,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.cb12b3f963",
-    "@dxos/invariant": "0.8.4-main.cb12b3f963",
-    "@dxos/effect": "0.8.4-main.cb12b3f963",
-    "@dxos/keyboard": "0.8.4-main.cb12b3f963",
-    "@dxos/log": "0.8.4-main.cb12b3f963",
-    "@dxos/react-ui-attention": "0.8.4-main.cb12b3f963",
-    "@dxos/util": "0.8.4-main.cb12b3f963",
-    "@dxos/ui-types": "0.8.4-main.cb12b3f963"
+    "@dxos/app-graph": "0.8.4-main.d05539e30a",
+    "@dxos/effect": "0.8.4-main.d05539e30a",
+    "@dxos/invariant": "0.8.4-main.d05539e30a",
+    "@dxos/keyboard": "0.8.4-main.d05539e30a",
+    "@dxos/react-ui-attention": "0.8.4-main.d05539e30a",
+    "@dxos/ui-types": "0.8.4-main.d05539e30a",
+    "@dxos/util": "0.8.4-main.d05539e30a",
+    "@dxos/log": "0.8.4-main.d05539e30a"
   },
   "devDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
@@ -56,11 +56,11 @@
     "effect": "3.20.0",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "vite": "^8.0.10",
-    "@dxos/random": "0.8.4-main.cb12b3f963",
-    "@dxos/react-ui": "0.8.4-main.cb12b3f963",
-    "@dxos/storybook-utils": "0.8.4-main.cb12b3f963",
-    "@dxos/ui-theme": "0.8.4-main.cb12b3f963"
+    "vite": "^8.0.13",
+    "@dxos/react-ui": "0.8.4-main.d05539e30a",
+    "@dxos/random": "0.8.4-main.d05539e30a",
+    "@dxos/storybook-utils": "0.8.4-main.d05539e30a",
+    "@dxos/ui-theme": "0.8.4-main.d05539e30a"
   },
   "peerDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
@@ -68,8 +68,8 @@
     "effect": "3.20.0",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/react-ui": "0.8.4-main.cb12b3f963",
-    "@dxos/ui-theme": "0.8.4-main.cb12b3f963"
+    "@dxos/react-ui": "0.8.4-main.d05539e30a",
+    "@dxos/ui-theme": "0.8.4-main.d05539e30a"
   },
   "publishConfig": {
     "access": "public"

package/src/components/ToolbarMenu.stories.tsx

@@ -69,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

@@ -57,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);
 
@@ -88,6 +88,7 @@ const ActionToolbarItem = ({ __menuScope, action }: MenuScopedProps<{ action: Me
       icon={icon}
       size={iconSize}
       iconOnly={iconOnly}
+      iconClassNames={iconClassNames}
       label={actionLabel(action, t)}
     />
   ) : (
@@ -112,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
@@ -119,6 +125,7 @@ const DropdownMenuToolbarItem = ({
         icon,
         size: iconSize,
         iconOnly,
+        iconClassNames,
         label: actionLabel(labelAction, t),
         caretDown: true,
       }
@@ -143,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) {
@@ -168,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);
+};