@dxos/react-ui-menu 0.9.0 → 0.9.1-staging.ee54ba693a

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-menu",
-  "version": "0.9.0",
+  "version": "0.9.1-staging.ee54ba693a",
   "description": "Components for facilitating reactive and consistent menus.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -37,39 +37,39 @@
   "dependencies": {
     "@radix-ui/react-context": "1.1.1",
     "@radix-ui/react-use-controllable-state": "1.1.0",
-    "@dxos/app-graph": "0.9.0",
-    "@dxos/keyboard": "0.9.0",
-    "@dxos/invariant": "0.9.0",
-    "@dxos/react-ui-attention": "0.9.0",
-    "@dxos/log": "0.9.0",
-    "@dxos/effect": "0.9.0",
-    "@dxos/ui-types": "0.9.0",
-    "@dxos/util": "0.9.0"
+    "@dxos/app-graph": "0.9.1-staging.ee54ba693a",
+    "@dxos/invariant": "0.9.1-staging.ee54ba693a",
+    "@dxos/keyboard": "0.9.1-staging.ee54ba693a",
+    "@dxos/effect": "0.9.1-staging.ee54ba693a",
+    "@dxos/react-ui-attention": "0.9.1-staging.ee54ba693a",
+    "@dxos/util": "0.9.1-staging.ee54ba693a",
+    "@dxos/log": "0.9.1-staging.ee54ba693a",
+    "@dxos/ui-types": "0.9.1-staging.ee54ba693a"
   },
   "devDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
-    "@effect/platform": "0.96.1",
+    "@effect/platform": "0.96.2",
     "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.0",
-    "@types/react": "~19.2.7",
+    "@testing-library/react": "^16.3.2",
+    "@types/react": "~19.2.17",
     "@types/react-dom": "~19.2.3",
-    "effect": "3.21.3",
-    "react": "~19.2.3",
-    "react-dom": "~19.2.3",
+    "effect": "3.21.4",
+    "react": "~19.2.7",
+    "react-dom": "~19.2.7",
     "vite": "^8.0.16",
-    "@dxos/random": "0.9.0",
-    "@dxos/react-ui": "0.9.0",
-    "@dxos/storybook-utils": "0.9.0",
-    "@dxos/ui-theme": "0.9.0"
+    "@dxos/random": "0.9.1-staging.ee54ba693a",
+    "@dxos/storybook-utils": "0.9.1-staging.ee54ba693a",
+    "@dxos/react-ui": "0.9.1-staging.ee54ba693a",
+    "@dxos/ui-theme": "0.9.1-staging.ee54ba693a"
   },
   "peerDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
-    "@effect/platform": "0.96.1",
-    "effect": "3.21.3",
-    "react": "~19.2.3",
-    "react-dom": "~19.2.3",
-    "@dxos/react-ui": "0.9.0",
-    "@dxos/ui-theme": "0.9.0"
+    "@effect/platform": "0.96.2",
+    "effect": "3.21.4",
+    "react": "~19.2.7",
+    "react-dom": "~19.2.7",
+    "@dxos/ui-theme": "0.9.1-staging.ee54ba693a",
+    "@dxos/react-ui": "0.9.1-staging.ee54ba693a"
   },
   "publishConfig": {
     "access": "public"

package/src/builder.test.ts

@@ -74,7 +74,7 @@ describe('MenuBuilder', () => {
   test('merges pre-built subgraph', ({ expect }) => {
     const headings = MenuBuilder.make()
       .root({ label: 'headings' })
-      .group('headings', { label: 'Headings', variant: 'dropdownMenu' }, (group) => {
+      .group('headings', { label: 'Headings', variant: 'dropdownMenu', icon: 'ph--text-h-one--regular' }, (group) => {
         group
           .action('h1', { label: 'H1', icon: 'ph--text-h-one--regular' }, () => {})
           .action('h2', { label: 'H2', icon: 'ph--text-h-two--regular' }, () => {});
@@ -115,11 +115,15 @@ describe('MenuBuilder', () => {
       .root({ label: 'toolbar' })
       .subgraph((sub) => {
         sub
-          .group('headings', { label: 'Headings', variant: 'dropdownMenu' }, (group) => {
-            group
-              .action('h1', { label: 'H1', icon: 'ph--text-h-one--regular' }, () => {})
-              .action('h2', { label: 'H2', icon: 'ph--text-h-two--regular' }, () => {});
-          })
+          .group(
+            'headings',
+            { label: 'Headings', variant: 'dropdownMenu', icon: 'ph--text-h-one--regular' },
+            (group) => {
+              group
+                .action('h1', { label: 'H1', icon: 'ph--text-h-one--regular' }, () => {})
+                .action('h2', { label: 'H2', icon: 'ph--text-h-two--regular' }, () => {});
+            },
+          )
           .group('formatting', { label: 'Formatting' }, (group) => {
             group.action('bold', { label: 'Bold', icon: 'ph--text-b--regular' }, () => {});
           });
@@ -160,11 +164,15 @@ describe('MenuBuilder', () => {
   test('composable curried subgraph functions', ({ expect }) => {
     // Simulates the curried pattern: addX(args) returns (builder) => void.
     const addHeadingsSection = () => (builder: import('./builder').ActionGroupBuilder) => {
-      builder.group('headings', { label: 'Headings', variant: 'dropdownMenu' }, (group) => {
-        group
-          .action('h1', { label: 'H1', icon: 'ph--text-h-one--regular' }, () => {})
-          .action('h2', { label: 'H2', icon: 'ph--text-h-two--regular' }, () => {});
-      });
+      builder.group(
+        'headings',
+        { label: 'Headings', variant: 'dropdownMenu', icon: 'ph--text-h-one--regular' },
+        (group) => {
+          group
+            .action('h1', { label: 'H1', icon: 'ph--text-h-one--regular' }, () => {})
+            .action('h2', { label: 'H2', icon: 'ph--text-h-two--regular' }, () => {});
+        },
+      );
     };
 
     const addFormattingSection = () => (builder: import('./builder').ActionGroupBuilder) => {
@@ -206,6 +214,37 @@ describe('MenuBuilder', () => {
     expect(graph.edges).toHaveLength(1);
   });
 
+  test('menu creates overflow dropdown with built-in trigger', ({ expect }) => {
+    const graph = MenuBuilder.make()
+      .root({ label: 'toolbar' })
+      .menu('more', (group) => {
+        group.action('save', { label: 'Save', icon: 'ph--cloud-arrow-up--regular' }, () => {});
+      })
+      .build();
+
+    const moreGroup = graph.nodes.find((node) => node.id === 'more');
+    expect(moreGroup).toBeDefined();
+    expect(moreGroup!.properties).toEqual({
+      label: ['toolbar-overflow.menu', { ns: '@dxos/react-ui-menu' }],
+      icon: 'ph--dots-three-vertical--regular',
+      iconOnly: true,
+      variant: 'dropdownMenu',
+      caretDown: false,
+    });
+    expect(graph.edges).toContainEqual({ source: 'root', target: 'more', relation: 'child' });
+    expect(graph.edges).toContainEqual({ source: 'more', target: 'save', relation: 'child' });
+  });
+
+  test('menu accepts custom group id', ({ expect }) => {
+    const graph = MenuBuilder.make()
+      .root({ label: 'toolbar' })
+      .menu('overflow', () => {})
+      .build();
+
+    expect(graph.nodes.find((node) => node.id === 'overflow')).toBeDefined();
+    expect(graph.nodes.find((node) => node.id === 'more')).toBeUndefined();
+  });
+
   test('nodes have correct types', ({ expect }) => {
     const graph = MenuBuilder.make()
       .root({ label: 'toolbar' })

package/src/builder.ts

@@ -3,12 +3,23 @@
 //
 
 import { invariant } from '@dxos/invariant';
-import type { MenuActionProperties, MenuItemGroupProperties } from '@dxos/ui-types';
+import type { DropdownMenuItemGroupProperties, MenuActionProperties, MenuItemGroupProperties } from '@dxos/ui-types';
+
+import { translationKey } from '#translations';
 
 import type { ActionGraphProps } from './hooks';
 import { MenuSeparatorType } from './types';
 import { createMenuAction, createMenuItemGroup } from './util';
 
+/** Default trigger for toolbar overflow (⋮) dropdown menus. */
+const overflowMenuProperties = {
+  label: ['toolbar-overflow.menu', { ns: translationKey }],
+  icon: 'ph--dots-three-vertical--regular',
+  iconOnly: true,
+  caretDown: false,
+  variant: 'dropdownMenu',
+} as const satisfies DropdownMenuItemGroupProperties;
+
 /** Callback that populates an action group builder. */
 export type ActionGroupBuilderFn = (builder: ActionGroupBuilder) => void;
 
@@ -30,8 +41,11 @@ 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 switch action rendered as a labeled Input.Switch. */
+  switch(id: string, props: Omit<MenuActionProperties, 'variant'> & { checked: boolean }, invoke: () => void): this;
+
   /** Add a nested action group. */
-  group<P extends {} = {}>(id: string, props: P & MenuItemGroupProperties, cb: ActionGroupBuilderFn): this;
+  group(id: string, props: MenuItemGroupProperties, cb: ActionGroupBuilderFn): this;
 
   /** Merge pre-built nodes and edges, or build a subgraph via callback scoped to the current group. Falsy values are ignored. */
   subgraph(subgraphOrCb: ActionGraphProps | ActionGroupBuilderFn | false | null | undefined): this;
@@ -42,10 +56,19 @@ export interface ActionGroupBuilder {
 
 /** Top-level builder that creates the root group and produces the final action graph. */
 export interface MenuBuilder extends ActionGroupBuilder {
-  /** Set properties on the root menu group. May only be called once. */
+  /**
+   * Set properties on the root menu group. May only be called once.
+   */
   root(props: MenuItemGroupProperties): this;
 
-  /** Return the assembled action graph. */
+  /**
+   * Add a root-level toolbar overflow dropdown (⋮) with built-in trigger styling.
+   */
+  menu(id: string, cb: ActionGroupBuilderFn): this;
+
+  /**
+   * Return the assembled action graph.
+   */
   build(): ActionGraphProps;
 }
 
@@ -74,13 +97,21 @@ class MenuBuilderImpl implements MenuBuilder {
     return this;
   }
 
-  group<P extends {} = {}>(id: string, props: P & MenuItemGroupProperties, cb: ActionGroupBuilderFn): this {
+  switch(id: string, props: Omit<MenuActionProperties, 'variant'> & { checked: boolean }, invoke: () => void): this {
+    return this.action(id, { ...props, variant: 'switch' }, invoke);
+  }
+
+  group(id: string, props: MenuItemGroupProperties, cb: ActionGroupBuilderFn): this {
     this._data.nodes.push(createMenuItemGroup(id, props));
     this._data.edges.push({ source: this._rootId, target: id, relation: 'child' });
     cb(new MenuBuilderImpl(this._data, id));
     return this;
   }
 
+  menu(id: string, cb: ActionGroupBuilderFn): this {
+    return this.group(id, overflowMenuProperties, cb);
+  }
+
   subgraph(subgraphOrCb: ActionGraphProps | ActionGroupBuilderFn | false | null | undefined): this {
     if (!subgraphOrCb) {
       return this;

package/src/components/ActionLabel.tsx

@@ -8,13 +8,13 @@ import { type Node } from '@dxos/app-graph';
 import { keySymbols } from '@dxos/keyboard';
 import { type TFunction, toLocalizedString, useTranslation } from '@dxos/react-ui';
 import { mx } from '@dxos/ui-theme';
-import { type MenuActionProperties } from '@dxos/ui-types';
+import { type MenuActionProperties, type MenuItemChrome } from '@dxos/ui-types';
 
 import { translationKey } from '#translations';
 
 import { getShortcut } from '../util';
 
-type Action = Node.Action<MenuActionProperties> | Node.ActionGroup<Omit<MenuActionProperties, 'variant'>>;
+type Action = Node.Action<MenuActionProperties> | Node.ActionGroup<MenuItemChrome>;
 
 export const ActionLabel = ({ action }: { action: Action }) => {
   const { t } = useTranslation(translationKey);

package/src/components/Menu.tsx

@@ -5,7 +5,7 @@
 import { Atom, RegistryContext, useAtomValue } from '@effect-atom/atom-react';
 import { type Scope, createContextScope } from '@radix-ui/react-context';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
-import React, { createContext, type MouseEvent, type PropsWithChildren, useCallback, useContext, useMemo } from 'react';
+import React, { type MouseEvent, type PropsWithChildren, createContext, useCallback, useContext, useMemo } from 'react';
 
 import { log } from '@dxos/log';
 import { type DropdownMenuRootProps, Icon, DropdownMenu as NaturalDropdownMenu } from '@dxos/react-ui';
@@ -14,8 +14,8 @@ import {
   type AddMenuItemsProps,
   type MenuAction,
   type MenuContextValue,
+  type MenuGroupContext,
   type MenuItem,
-  type MenuItemGroup,
   type MenuItems,
   type MenuItemsAccessor,
   type MenuItemsMap,
@@ -70,12 +70,7 @@ const MenuDropdownContext = createContext<MenuDropdownContextValue>({
 const DEFAULT_PRIORITY = 100;
 
 const sortMenuItems = (items: MenuItems[]) =>
-  [...items].sort((a, b) => {
-    if (a.priority !== b.priority) {
-      return a.priority - b.priority;
-    }
-    return a.id.localeCompare(b.id);
-  });
+  [...items].sort((a, b) => (a.priority !== b.priority ? a.priority - b.priority : a.id.localeCompare(b.id)));
 
 type MenuProviderProps = PropsWithChildren<Partial<MenuContextValue>>;
 
@@ -135,7 +130,7 @@ const MenuProvider = ({
 
 const resolveItems = (
   baseItems: MenuItem[] | null,
-  group: MenuItemGroup | undefined,
+  group: MenuGroupContext | undefined,
   entries: ReadonlyMap<string, MenuItems>,
 ): MenuItem[] | null => {
   const applicable = [...entries.values()].filter((entry) => !entry.groupFilter || entry.groupFilter(group));
@@ -171,7 +166,7 @@ const resolveItems = (
 //
 
 const useMenuItems = (
-  group?: MenuItemGroup,
+  group?: MenuGroupContext,
   propsItems?: MenuItem[],
   consumerName: string = 'useMenuItemConsumer',
   __menuScope?: Scope,
@@ -238,7 +233,7 @@ const MenuRoot = ({ children, open, defaultOpen, onOpenChange, caller, ...props
 //
 
 type MenuContentProps = {
-  group?: MenuItemGroup;
+  group?: MenuGroupContext;
   items?: MenuItem[];
   caller?: string;
 };
@@ -339,10 +334,10 @@ export { Menu, menuContextDefaults, useMenu, useMenuItems, useMenuScoped };
 export type { MenuContentProps, MenuRootProps, MenuScopedProps };
 
 export type {
-  ToolbarMenuProps,
   ToolbarMenuActionGroupProperties,
   ToolbarMenuActionGroupProps,
   ToolbarMenuActionProps,
   ToolbarMenuDropdownMenuActionGroup,
+  ToolbarMenuProps,
   ToolbarMenuToggleGroupActionGroup,
 } from './ToolbarMenu';

package/src/components/ToolbarMenu.stories.tsx

@@ -4,7 +4,7 @@
 
 import { Atom, RegistryContext } from '@effect-atom/atom-react';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { useContext, useMemo } from 'react';
+import React, { useContext, useMemo, useState } from 'react';
 
 import { random } from '@dxos/random';
 import { IconButton } from '@dxos/react-ui';
@@ -13,8 +13,9 @@ import { withRegistry } from '@dxos/storybook-utils';
 
 import { translations } from '#translations';
 
+import { MenuBuilder } from '../builder';
 import { Menu } from '../components';
-import { type ActionGraphProps, useMenuActions } from '../hooks';
+import { type ActionGraphProps, useMenuActions, useMenuBuilder } from '../hooks';
 import { createActions, createNestedActions, createNestedActionsResolver, useMutateActions } from '../testing';
 
 random.seed(1234);
@@ -93,3 +94,31 @@ export const UseMenuActionsToolbar: Story = {
     );
   },
 };
+
+/**
+ * Toolbar with both labeled and tooltip-only (iconOnly) Input.Switch items.
+ */
+export const SwitchToolbar: Story = {
+  render: () => {
+    const [wordWrap, setWordWrap] = useState(false);
+    const [lineNumbers, setLineNumbers] = useState(true);
+
+    const menuActions = useMenuBuilder(
+      () =>
+        MenuBuilder.make()
+          .root({ label: 'Editor settings' })
+          .switch('word-wrap', { label: 'Word wrap', checked: wordWrap }, () => setWordWrap((v) => !v))
+          .switch('line-numbers', { label: 'Line numbers', iconOnly: true, checked: lineNumbers }, () =>
+            setLineNumbers((v) => !v),
+          )
+          .build(),
+      [wordWrap, lineNumbers],
+    );
+
+    return (
+      <Menu.Root {...menuActions} alwaysActive>
+        <Menu.Toolbar />
+      </Menu.Root>
+    );
+  },
+};

package/src/components/ToolbarMenu.tsx

@@ -4,42 +4,31 @@
 
 import React, { useCallback } from 'react';
 
-import { Icon, Toolbar as NaturalToolbar, type ToolbarRootProps, useTranslation } from '@dxos/react-ui';
+import {
+  Input,
+  Toolbar as NaturalToolbar,
+  type ToolbarRootProps,
+  Tooltip,
+  toLocalizedString,
+  useTranslation,
+} from '@dxos/react-ui';
 import { composable, composableProps } from '@dxos/react-ui';
 import { useAttention } from '@dxos/react-ui-attention';
-import { type MenuActionProperties } from '@dxos/ui-types';
+import { type DropdownMenuItemGroupProperties, type ToggleGroupMenuItemGroupProperties } from '@dxos/ui-types';
 
 import { translationKey } from '#translations';
 
-import {
-  type MenuAction,
-  type MenuItem,
-  type MenuItemGroup,
-  type MenuMultipleSelectActionGroup,
-  type MenuSingleSelectActionGroup,
-  isMenuGroup,
-  isSeparator,
-} from '../types';
+import { type MenuAction, type MenuItem, type MenuItemGroup, isMenuGroup, isSeparator } from '../types';
 import { executeMenuAction } from '../util';
 import { ActionLabel, actionLabel } from './ActionLabel';
 import { DropdownMenu } from './DropdownMenu';
 import { type MenuScopedProps, useMenuItems, useMenuScoped } from './Menu';
 
-export type ToolbarMenuDropdownMenuActionGroup = Omit<MenuActionProperties, 'variant' | 'icon'> & {
-  variant: 'dropdownMenu';
-  icon: string;
-  applyActive?: boolean;
-};
+export type ToolbarMenuDropdownMenuActionGroup = DropdownMenuItemGroupProperties;
 
-export type ToolbarMenuToggleGroupActionGroup = Omit<MenuActionProperties, 'variant'> & {
-  variant: 'toggleGroup';
-};
+export type ToolbarMenuToggleGroupActionGroup = ToggleGroupMenuItemGroupProperties;
 
-export type ToolbarMenuActionGroupProperties = (
-  | ToolbarMenuDropdownMenuActionGroup
-  | ToolbarMenuToggleGroupActionGroup
-) &
-  (MenuSingleSelectActionGroup | MenuMultipleSelectActionGroup);
+export type ToolbarMenuActionGroupProperties = DropdownMenuItemGroupProperties | ToggleGroupMenuItemGroupProperties;
 
 export type ToolbarMenuProps = ToolbarRootProps;
 
@@ -48,8 +37,18 @@ export type ToolbarMenuActionGroupProps = {
   items?: MenuItem[];
 };
 
+export type ToolbarMenuDropdownGroupProps = {
+  group: MenuItemGroup<DropdownMenuItemGroupProperties>;
+  items?: MenuItem[];
+};
+
+export type ToolbarMenuToggleGroupProps = {
+  group: MenuItemGroup<ToggleGroupMenuItemGroupProperties>;
+  items?: MenuItem[];
+};
+
 export type ToolbarMenuActionProps = {
-  group: MenuItemGroup<ToolbarMenuActionGroupProperties>;
+  group: MenuItemGroup<ToggleGroupMenuItemGroupProperties>;
   action: MenuAction;
 };
 
@@ -98,50 +97,100 @@ const ActionToolbarItem = ({ __menuScope, action }: MenuScopedProps<{ action: Me
   );
 };
 
+const SwitchToolbarItem = ({ __menuScope, action }: MenuScopedProps<{ action: MenuAction }>) => {
+  const { onAction } = useMenuScoped('SwitchToolbarItem', __menuScope);
+  const { t } = useTranslation(translationKey);
+  const { label, iconOnly, disabled, testId, hidden, checked } = action.properties;
+  const labelStr = toLocalizedString(label, t);
+
+  const handleCheckedChange = useCallback(() => {
+    if (onAction) {
+      onAction(action, {});
+    } else {
+      void executeMenuAction(action);
+    }
+  }, [action, onAction]);
+
+  if (hidden) {
+    return null;
+  }
+
+  const switchInput = (
+    <Input.Switch
+      checked={checked}
+      disabled={disabled}
+      aria-label={iconOnly ? labelStr : undefined}
+      onCheckedChange={handleCheckedChange}
+      {...(testId && { 'data-testid': testId })}
+    />
+  );
+
+  return (
+    <Input.Root>
+      {iconOnly ? (
+        <Tooltip.Trigger asChild content={labelStr}>
+          <Input.Block>{switchInput}</Input.Block>
+        </Tooltip.Trigger>
+      ) : (
+        <Input.Block>{switchInput}</Input.Block>
+      )}
+      {!iconOnly && <Input.Label>{labelStr}</Input.Label>}
+    </Input.Root>
+  );
+};
+
 const DropdownMenuToolbarItem = ({
   __menuScope,
   group,
   items: propsItems,
-}: MenuScopedProps<ToolbarMenuActionGroupProps>) => {
-  const { iconOnly, disabled, testId } = group.properties;
+}: MenuScopedProps<ToolbarMenuDropdownGroupProps>) => {
   const { t } = useTranslation(translationKey);
   const { iconSize } = useMenuScoped('DropdownMenuToolbarItem', __menuScope);
   const items = useMenuItems(group, propsItems, 'DropdownMenuToolbarItem', __menuScope);
-  const activeItem = items?.find((item) => !!(item as MenuAction).properties.checked);
+  const {
+    iconOnly,
+    disabled,
+    testId,
+    applyActive,
+    caretDown = true,
+    icon: groupIcon,
+    iconClassNames: groupIconClassNames,
+  } = group.properties;
+  const activeItem = items?.find((item) => !!(item as MenuAction).properties.checked) as MenuAction | undefined;
   const icon =
-    ((group.properties as any).applyActive &&
+    (applyActive &&
       // 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
-    ? {
-        icon,
-        size: iconSize,
-        iconOnly,
-        iconClassNames,
-        label: actionLabel(labelAction, t),
-        caretDown: true,
-      }
-    : {
-        children: (
-          <>
-            <ActionLabel action={labelAction} />
-            <Icon size={3} icon='ph--caret-down--bold' classNames='ms-1' />
-          </>
-        ),
-      };
+      activeItem?.properties.icon) ||
+    groupIcon;
+  // Follow the same `applyActive` rule for `iconClassNames` so a per-item accent (e.g. tag colour) tracks the displayed icon.
+  const iconClassNames = (applyActive && activeItem?.properties.iconClassNames) || groupIconClassNames;
+  const labelAction = applyActive && activeItem ? activeItem : group;
 
   return (
     <DropdownMenu.Root group={group} items={items}>
       <DropdownMenu.Trigger asChild>
-        <Root variant='ghost' disabled={disabled} {...(rootProps as any)} {...(testId && { 'data-testid': testId })} />
+        {icon ? (
+          <NaturalToolbar.IconButton
+            variant='ghost'
+            disabled={disabled}
+            icon={icon}
+            size={iconSize}
+            iconOnly={iconOnly}
+            iconClassNames={iconClassNames}
+            label={actionLabel(labelAction, t)}
+            caretDown={caretDown}
+            {...(testId && { 'data-testid': testId })}
+          />
+        ) : (
+          <NaturalToolbar.Button
+            variant='ghost'
+            disabled={disabled}
+            caretDown={caretDown}
+            {...(testId && { 'data-testid': testId })}
+          >
+            <ActionLabel action={labelAction} />
+          </NaturalToolbar.Button>
+        )}
       </DropdownMenu.Trigger>
     </DropdownMenu.Root>
   );
@@ -189,7 +238,7 @@ const ToggleGroupToolbarItem = ({
   __menuScope,
   group,
   items: itemsProp,
-}: MenuScopedProps<ToolbarMenuActionGroupProps>) => {
+}: MenuScopedProps<ToolbarMenuToggleGroupProps>) => {
   const items = useMenuItems(group, itemsProp, 'ToggleGroupToolbarItem', __menuScope);
   const { selectCardinality } = group.properties;
 
@@ -244,18 +293,28 @@ const ToolbarMenuItem = ({ __menuScope, item }: MenuScopedProps<{ item: MenuItem
       return (
         <DropdownMenuToolbarItem
           __menuScope={__menuScope}
-          group={item as MenuItemGroup<ToolbarMenuActionGroupProperties>}
-        />
-      );
-    } else {
-      return (
-        <ToggleGroupToolbarItem
-          __menuScope={__menuScope}
-          group={item as MenuItemGroup<ToolbarMenuActionGroupProperties>}
+          group={item as MenuItemGroup<DropdownMenuItemGroupProperties>}
         />
       );
     }
+
+    return (
+      <ToggleGroupToolbarItem
+        __menuScope={__menuScope}
+        group={item as MenuItemGroup<ToggleGroupMenuItemGroupProperties>}
+      />
+    );
+  }
+
+  const action = item as MenuAction;
+  if (action.properties?.variant === 'switch') {
+    return <SwitchToolbarItem __menuScope={__menuScope} action={action} />;
+  }
+
+  // The contributor owns the rendered element (interactions the action model cannot express).
+  if (action.properties?.variant === 'custom' && action.properties.render) {
+    return <>{action.properties.render()}</>;
   }
 
-  return <ActionToolbarItem __menuScope={__menuScope} action={item as MenuAction} />;
+  return <ActionToolbarItem __menuScope={__menuScope} action={action} />;
 };

package/src/hooks/index.ts

@@ -2,4 +2,5 @@
 // Copyright 2025 DXOS.org
 //
 
+export * from './useGraphMenuActions';
 export * from './useMenuActions';