@dxos/react-ui-menu 0.8.4-main.8360d9e660 → 0.8.4-main.8baae0fced

package/src/components/ToolbarMenu.tsx

@@ -6,9 +6,11 @@ import React, { useCallback } from 'react';
 
 import { Icon, Toolbar as NaturalToolbar, type ToolbarRootProps, useTranslation } from '@dxos/react-ui';
 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,
@@ -19,7 +21,6 @@ import {
   isSeparator,
 } from '../types';
 import { executeMenuAction } from '../util';
-
 import { ActionLabel, actionLabel } from './ActionLabel';
 import { DropdownMenu } from './DropdownMenu';
 import { type MenuScopedProps, useMenuItems, useMenuScoped } from './Menu';
@@ -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)}
     />
   ) : (
@@ -204,19 +213,26 @@ const ToggleGroupToolbarItem = ({
   }
 };
 
-export const ToolbarMenu = ({ __menuScope, classNames, ...props }: MenuScopedProps<ToolbarMenuProps>) => {
-  const items = useMenuItems(undefined, undefined, 'ToolbarMenu', __menuScope);
-  const { attendableId, alwaysActive } = useMenuScoped('ToolbarMenu', __menuScope);
-  const { hasAttention } = useAttention(attendableId);
+export const ToolbarMenu = composable<HTMLDivElement, MenuScopedProps<ToolbarMenuProps>>(
+  ({ __menuScope, children, ...props }, forwardedRef) => {
+    const items = useMenuItems(undefined, undefined, 'ToolbarMenu', __menuScope);
+    const { attendableId, alwaysActive } = useMenuScoped('ToolbarMenu', __menuScope);
+    const { hasAttention } = useAttention(attendableId);
 
-  return (
-    <NaturalToolbar.Root {...props} classNames={[attendableId, classNames]} disabled={!alwaysActive && !hasAttention}>
-      {items?.map((item: MenuItem) => (
-        <ToolbarMenuItem key={item.id} __menuScope={__menuScope} item={item} />
-      ))}
-    </NaturalToolbar.Root>
-  );
-};
+    return (
+      <NaturalToolbar.Root
+        {...composableProps(props, { classNames: attendableId })}
+        disabled={!alwaysActive && !hasAttention}
+        ref={forwardedRef}
+      >
+        {items?.map((item: MenuItem) => (
+          <ToolbarMenuItem key={item.id} __menuScope={__menuScope} item={item} />
+        ))}
+        {children}
+      </NaturalToolbar.Root>
+    );
+  },
+);
 
 const ToolbarMenuItem = ({ __menuScope, item }: MenuScopedProps<{ item: MenuItem }>) => {
   if (isSeparator(item)) {

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);
+};

package/src/index.ts

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

package/src/testing/generator.ts

@@ -6,7 +6,7 @@ import { Atom, Registry, RegistryContext } from '@effect-atom/atom-react';
 import { useContext, useEffect } from 'react';
 
 import { Graph, Node } from '@dxos/app-graph';
-import { faker } from '@dxos/random';
+import { random } from '@dxos/random';
 
 import { type ActionGraphProps } from '../hooks/useMenuActions';
 import { type MenuItem, type MenuItemGroup, type MenuItemsAccessor } from '../types';
@@ -38,15 +38,15 @@ const icons = {
 
 export const createActions = (params?: CreateActionsProps) => {
   const { callback = () => console.log('invoke'), count = 12, type = Node.ActionType } = params ?? {};
-  return faker.helpers.multiple(
+  return random.helpers.multiple(
     () => ({
-      id: faker.string.uuid(),
+      id: random.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]),
+        label: random.lorem.words(2),
+        icon: random.helpers.arrayElement(icons[random.helpers.arrayElement(Object.keys(icons)) as keyof typeof icons]),
+        disabled: random.helpers.arrayElement([true, false]),
         ...(type === Node.ActionGroupType && { variant: 'dropdownMenu' }),
       },
     }),
@@ -112,7 +112,7 @@ export const useMutateActions = (actionsAtom: Atom.Writable<ActionGraphProps>) =
           ...node,
           properties: {
             ...node.properties,
-            icon: faker.helpers.arrayElement(node.properties?.icon?.endsWith('regular') ? icons.fill : icons.regular),
+            icon: random.helpers.arrayElement(node.properties?.icon?.endsWith('regular') ? icons.fill : icons.regular),
             disabled: !node.properties?.disabled,
           },
         };