@dxos/react-ui-menu 0.7.5-main.937ce75 → 0.7.5-main.b19bfc8

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@dxos/react-ui-menu",
-  "version": "0.7.5-main.937ce75",
+  "version": "0.7.5-main.b19bfc8",
   "description": "Components for facilitating reactive and consistent menus.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
   "license": "MIT",
   "author": "DXOS.org",
   "sideEffects": true,
+  "type": "module",
   "exports": {
     ".": {
       "types": "./dist/types/src/index.d.ts",
@@ -23,10 +24,13 @@
     "src"
   ],
   "dependencies": {
-    "@radix-ui/react-use-controllable-state": "^1.0.0",
-    "@dxos/keyboard": "0.7.5-main.937ce75",
-    "@dxos/util": "0.7.5-main.937ce75",
-    "@dxos/app-graph": "0.7.5-main.937ce75"
+    "@preact/signals-react": "^1.3.8",
+    "@radix-ui/react-context": "1.1.1",
+    "@radix-ui/react-use-controllable-state": "1.1.0",
+    "@dxos/keyboard": "0.7.5-main.b19bfc8",
+    "@dxos/app-graph": "0.7.5-main.b19bfc8",
+    "@dxos/react-ui-attention": "0.7.5-main.b19bfc8",
+    "@dxos/util": "0.7.5-main.b19bfc8"
   },
   "devDependencies": {
     "@types/react": "~18.2.0",
@@ -34,17 +38,17 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/live-object": "0.7.5-main.937ce75",
-    "@dxos/random": "0.7.5-main.937ce75",
-    "@dxos/react-ui-theme": "0.7.5-main.937ce75",
-    "@dxos/react-ui": "0.7.5-main.937ce75",
-    "@dxos/storybook-utils": "0.7.5-main.937ce75"
+    "@dxos/random": "0.7.5-main.b19bfc8",
+    "@dxos/react-ui": "0.7.5-main.b19bfc8",
+    "@dxos/storybook-utils": "0.7.5-main.b19bfc8",
+    "@dxos/react-ui-theme": "0.7.5-main.b19bfc8",
+    "@dxos/live-object": "0.7.5-main.b19bfc8"
   },
   "peerDependencies": {
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.7.5-main.937ce75",
-    "@dxos/react-ui-theme": "0.7.5-main.937ce75"
+    "@dxos/react-ui": "0.7.5-main.b19bfc8",
+    "@dxos/react-ui-theme": "0.7.5-main.b19bfc8"
   },
   "publishConfig": {
     "access": "public"

package/src/components/DropdownMenu.tsx

@@ -3,31 +3,32 @@
 //
 
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
-import React, { type MouseEvent, type MutableRefObject, type PropsWithChildren, useCallback } from 'react';
+import React, { type MouseEvent, type MutableRefObject, useCallback } from 'react';
 
-import { DropdownMenu as NaturalDropdownMenu, Icon } from '@dxos/react-ui';
+import { DropdownMenu as NaturalDropdownMenu, Icon, type DropdownMenuRootProps } from '@dxos/react-ui';
 
 import { ActionLabel } from './ActionLabel';
-import { type MenuAction, type MenuProps } from '../defs';
+import { type MenuScopedProps, useMenu, useMenuItems } from './MenuContext';
+import { type MenuAction, type MenuItem, type MenuItemGroup } from '../defs';
 
-export type DropdownMenuProps = MenuProps &
-  PropsWithChildren<
-    Partial<{
-      defaultMenuOpen: boolean;
-      menuOpen: boolean;
-      onMenuOpenChange: (nextOpen: boolean) => void;
-      suppressNextTooltip?: MutableRefObject<boolean>;
-    }>
-  >;
+export type DropdownMenuProps = DropdownMenuRootProps & {
+  group?: MenuItemGroup;
+  items?: MenuItem[];
+  suppressNextTooltip?: MutableRefObject<boolean>;
+};
 
 const DropdownMenuItem = ({
-  action,
+  item,
   onClick,
-}: {
-  action: MenuAction;
+  __menuScope,
+}: MenuScopedProps<{
+  item: MenuItem;
   onClick: (action: MenuAction, event: MouseEvent) => void;
-}) => {
+}>) => {
+  // TODO(thure): handle other items.
+  const action = item as MenuAction;
   const handleClick = useCallback((event: MouseEvent) => onClick(action, event), [action, onClick]);
+  const { iconSize } = useMenu('DropdownMenuItem', __menuScope);
   return (
     <NaturalDropdownMenu.Item
       onClick={handleClick}
@@ -35,27 +36,31 @@ const DropdownMenuItem = ({
       disabled={action.properties?.disabled}
       {...(action.properties?.testId && { 'data-testid': action.properties.testId })}
     >
-      {action.properties?.icon && <Icon icon={action.properties!.icon} size={4} />}
+      {action.properties?.icon && <Icon icon={action.properties!.icon} size={iconSize} />}
       <ActionLabel action={action} />
     </NaturalDropdownMenu.Item>
   );
 };
 
 const DropdownMenuRoot = ({
-  defaultMenuOpen,
-  actions,
-  menuOpen,
+  items: propsItems,
+  group,
+  open,
+  defaultOpen,
+  onOpenChange,
   suppressNextTooltip,
-  onMenuOpenChange,
-  onAction,
   children,
-}: DropdownMenuProps) => {
+  __menuScope,
+  ...naturalProps
+}: MenuScopedProps<DropdownMenuProps>) => {
   const [optionsMenuOpen, setOptionsMenuOpen] = useControllableState({
-    prop: menuOpen,
-    defaultProp: defaultMenuOpen,
-    onChange: onMenuOpenChange,
+    prop: open,
+    defaultProp: defaultOpen,
+    onChange: onOpenChange,
   });
 
+  const { onAction } = useMenu('DropdownMenuRoot', __menuScope);
+
   const handleActionClick = useCallback(
     (action: MenuAction, event: MouseEvent) => {
       if (action.properties?.disabled) {
@@ -72,6 +77,8 @@ const DropdownMenuRoot = ({
     [onAction],
   );
 
+  const items = useMenuItems(group, propsItems);
+
   return (
     <NaturalDropdownMenu.Root
       {...{
@@ -83,12 +90,13 @@ const DropdownMenuRoot = ({
           return setOptionsMenuOpen(nextOpen);
         },
       }}
+      {...naturalProps}
     >
       {children}
       <NaturalDropdownMenu.Portal>
         <NaturalDropdownMenu.Content>
           <NaturalDropdownMenu.Viewport>
-            {actions?.map((action) => <DropdownMenuItem key={action.id} action={action} onClick={handleActionClick} />)}
+            {items?.map((item) => <DropdownMenuItem key={item.id} item={item} onClick={handleActionClick} />)}
           </NaturalDropdownMenu.Viewport>
           <NaturalDropdownMenu.Arrow />
         </NaturalDropdownMenu.Content>

package/src/components/MenuContext.tsx

@@ -0,0 +1,57 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { createContextScope, type Scope } from '@radix-ui/react-context';
+import React, { type PropsWithChildren, useMemo } from 'react';
+
+import { type MenuContextValue, type MenuItem, type MenuItemGroup } from '../defs';
+
+export type MenuScopedProps<P> = P & { __menuScope?: Scope };
+
+const MENU_NAME = 'GraphMenu';
+
+const [createMenuContext, createMenuScope] = createContextScope(MENU_NAME, []);
+
+const [MenuContextProvider, useMenu] = createMenuContext<MenuContextValue>(MENU_NAME);
+
+export const menuContextDefaults: MenuContextValue = {
+  iconSize: 5,
+  onAction: () => {},
+  resolveGroupItems: () => null,
+};
+
+const useMenuScope = createMenuScope();
+
+const MenuProvider = ({
+  children,
+  resolveGroupItems = menuContextDefaults.resolveGroupItems,
+  onAction = menuContextDefaults.onAction,
+  iconSize = menuContextDefaults.iconSize,
+  attendableId,
+}: PropsWithChildren<Partial<MenuContextValue>>) => {
+  const { scope } = useMenuScope(undefined);
+  return (
+    <MenuContextProvider
+      resolveGroupItems={resolveGroupItems}
+      onAction={onAction}
+      iconSize={iconSize}
+      attendableId={attendableId}
+      scope={scope}
+    >
+      {children}
+    </MenuContextProvider>
+  );
+};
+
+export const useMenuItems = (
+  group?: MenuItemGroup,
+  propsItems?: MenuItem[],
+  consumerName: string = 'useMenuItemConsumer',
+  __menuScope?: Scope,
+) => {
+  const { resolveGroupItems } = useMenu(consumerName, __menuScope);
+  return useMemo(() => propsItems ?? resolveGroupItems?.(group) ?? undefined, [propsItems, group, resolveGroupItems]);
+};
+
+export { useMenu, createMenuScope, MenuProvider };

package/src/components/ToolbarMenu.tsx

@@ -0,0 +1,185 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useCallback, useRef } from 'react';
+
+import { Icon, type IconButtonProps, Toolbar as NaturalToolbar, type ToolbarRootProps } from '@dxos/react-ui';
+import { useAttention } from '@dxos/react-ui-attention';
+
+import { ActionLabel } from './ActionLabel';
+import { DropdownMenu } from './DropdownMenu';
+import { type MenuScopedProps, useMenu, useMenuItems } from './MenuContext';
+import {
+  type MenuAction,
+  type MenuItem,
+  isMenuGroup,
+  isSeparator,
+  type MenuItemGroup,
+  type MenuActionProperties,
+  type MenuMultipleSelectActionGroup,
+  type MenuSingleSelectActionGroup,
+} from '../defs';
+
+export type ToolbarMenuDropdownMenuActionGroup = Omit<MenuActionProperties, 'variant' | 'icon'> & {
+  variant: 'dropdownMenu';
+  icon: string;
+  applyActive?: boolean;
+};
+
+export type ToolbarMenuToggleGroupActionGroup = Omit<MenuActionProperties, 'variant'> & {
+  variant: 'toggleGroup';
+};
+
+export type ToolbarMenuActionGroupProperties = (
+  | ToolbarMenuDropdownMenuActionGroup
+  | ToolbarMenuToggleGroupActionGroup
+) &
+  (MenuSingleSelectActionGroup | MenuMultipleSelectActionGroup);
+
+export type ToolbarMenuProps = ToolbarRootProps;
+
+export type ToolbarMenuActionGroupProps = {
+  group: MenuItemGroup<ToolbarMenuActionGroupProperties>;
+  items?: MenuItem[];
+};
+
+const ActionToolbarItem = ({ action, __menuScope }: MenuScopedProps<{ action: MenuAction }>) => {
+  const { onAction, iconSize } = useMenu('ActionToolbarItem', __menuScope);
+  const handleClick = useCallback(() => {
+    onAction?.(action);
+  }, [action, onAction]);
+  const { icon, iconOnly = true, disabled, testId, hidden, classNames } = action.properties;
+  const Root = icon ? NaturalToolbar.IconButton : NaturalToolbar.Button;
+  const rootProps = icon
+    ? { icon, size: iconSize, iconOnly, label: <ActionLabel action={action} /> }
+    : { children: <ActionLabel action={action} /> };
+  return hidden ? null : (
+    <Root
+      key={action.id}
+      disabled={disabled}
+      onClick={handleClick}
+      variant='ghost'
+      {...(testId && { 'data-testid': testId })}
+      {...(rootProps as IconButtonProps)}
+      classNames={classNames}
+    />
+  );
+};
+
+const DropdownMenuToolbarItem = ({
+  group,
+  items: propsItems,
+  __menuScope,
+}: MenuScopedProps<ToolbarMenuActionGroupProps>) => {
+  const { iconOnly, disabled, testId } = group.properties;
+  const suppressNextTooltip = useRef(false);
+  const { iconSize } = useMenu('DropdownMenuToolbarItem', __menuScope);
+  const items = useMenuItems(group, propsItems, 'DropdownMenuToolbarItem', __menuScope);
+  const activeItem = items?.find((item) => !!(item as MenuAction).properties.checked);
+  const icon =
+    ((group.properties as any).applyActive &&
+      // TODO(thure): Handle other menu item types.
+      (activeItem as MenuAction)?.properties.icon) ||
+    group.properties.icon;
+  const Root = icon ? NaturalToolbar.IconButton : NaturalToolbar.Button;
+  const label = (
+    <ActionLabel action={(group.properties as any).applyActive && activeItem ? (activeItem as MenuAction) : group} />
+  );
+  const rootProps = icon
+    ? { icon, size: iconSize, iconOnly, label, caretDown: true, suppressNextTooltip }
+    : {
+        children: (
+          <>
+            {label}
+            <Icon size={3} icon='ph--caret-down--bold' classNames='mis-1' />
+          </>
+        ),
+      };
+  return (
+    <DropdownMenu.Root group={group} items={items} suppressNextTooltip={suppressNextTooltip}>
+      <DropdownMenu.Trigger asChild>
+        <Root
+          variant='ghost'
+          disabled={disabled}
+          {...(rootProps as IconButtonProps)}
+          {...(testId && { 'data-testid': testId })}
+        />
+      </DropdownMenu.Trigger>
+    </DropdownMenu.Root>
+  );
+};
+
+const ToggleGroupItem = ({ action, __menuScope }: MenuScopedProps<{ action: MenuAction }>) => {
+  const { iconSize, onAction } = useMenu('ToggleGroupItem', __menuScope);
+  const { icon, iconOnly = true, disabled, testId, hidden, classNames } = action.properties;
+  const handleClick = useCallback(() => {
+    onAction?.(action);
+  }, [action, onAction]);
+  const Root = icon ? NaturalToolbar.ToggleGroupIconItem : NaturalToolbar.ToggleGroupItem;
+  const rootProps = icon
+    ? { icon, size: iconSize, iconOnly, label: <ActionLabel action={action} /> }
+    : { children: <ActionLabel action={action} /> };
+  return hidden ? null : (
+    <Root
+      key={action.id}
+      value={action.id as any}
+      disabled={disabled}
+      onClick={handleClick}
+      variant='ghost'
+      {...(testId && { 'data-testid': testId })}
+      {...(rootProps as IconButtonProps)}
+      classNames={classNames}
+    />
+  );
+};
+
+const ToggleGroupToolbarItem = ({
+  group,
+  items: propsItems,
+  __menuScope,
+}: MenuScopedProps<ToolbarMenuActionGroupProps>) => {
+  const items = useMenuItems(group, propsItems, 'ToggleGroupToolbarItem', __menuScope);
+  const { selectCardinality, value } = group.properties;
+  return (
+    // TODO(thure): The type here is difficult to manage, what do?
+    // @ts-ignore
+    <NaturalToolbar.ToggleGroup type={selectCardinality} value={value}>
+      {
+        // TODO(thure): Handle other menu item types.
+        (items as MenuAction[]).map((action) => (
+          <ToggleGroupItem key={action.id} action={action} />
+        ))
+      }
+    </NaturalToolbar.ToggleGroup>
+  );
+};
+
+export const ToolbarMenu = ({ __menuScope, classNames, ...props }: MenuScopedProps<ToolbarMenuProps>) => {
+  const items = useMenuItems(undefined, undefined, 'ToolbarMenu', __menuScope);
+  const { attendableId } = useMenu('ToolbarMenu', __menuScope);
+  const { hasAttention } = useAttention(attendableId);
+  return (
+    <NaturalToolbar.Root
+      {...props}
+      classNames={['p-0 pointer-fine:p-1 attention-surface', !hasAttention && 'opacity-20', classNames]}
+    >
+      {items?.map((item: MenuItem, i: number) =>
+        isSeparator(item) ? (
+          <NaturalToolbar.Separator key={i} variant={item.properties.variant} />
+        ) : isMenuGroup(item) ? (
+          item.properties.variant === 'dropdownMenu' ? (
+            // TODO(thure): Figure out type narrowing that doesn’t require so much use of `as`.
+            <DropdownMenuToolbarItem key={item.id} group={item as MenuItemGroup<ToolbarMenuActionGroupProperties>} />
+          ) : (
+            // TODO(thure): Figure out type narrowing that doesn’t require so much use of `as`.
+            <ToggleGroupToolbarItem key={item.id} group={item as MenuItemGroup<ToolbarMenuActionGroupProperties>} />
+          )
+        ) : (
+          // TODO(thure): Figure out type narrowing that doesn’t require so much use of `as`.
+          <ActionToolbarItem key={item.id} action={item as MenuAction} />
+        ),
+      )}
+    </NaturalToolbar.Root>
+  );
+};

package/src/components/index.ts

@@ -3,4 +3,5 @@
 //
 
 export * from './DropdownMenu';
-export * from './Toolbar';
+export * from './ToolbarMenu';
+export * from './MenuContext';

package/src/defs.ts

@@ -1,23 +1,54 @@
 //
 // Copyright 2025 DXOS.org
 //
-import { type Node, type Action } from '@dxos/app-graph';
-import { type Label } from '@dxos/react-ui';
+import { type Node, type Action, type ActionGroup, ACTION_GROUP_TYPE } from '@dxos/app-graph';
+import { type ToolbarSeparatorProps, type Label, type IconButtonProps, type ClassNameValue } from '@dxos/react-ui';
 
 export type MenuActionProperties = {
   label: Label;
-  icon: string;
+  icon?: string;
   value?: string;
   disabled?: boolean;
+  hidden?: boolean;
   iconOnly?: boolean;
   testId?: string;
   variant?: 'action' | 'toggle';
   checked?: boolean;
+  classNames?: ClassNameValue;
 };
 
-export type MenuAction = Action<MenuActionProperties>;
+export type MenuItemGroupProperties = {
+  label: Label;
+  icon?: string;
+  iconOnly?: boolean;
+};
+
+export type MenuAction<P extends {} = {}> = Action<P & MenuActionProperties>;
+
+export type MenuActionHandler<A extends Node = MenuAction> = (action: A) => void;
+
+export const MenuSeparatorType = '@dxos/react-ui-toolbar/separator' as const;
+
+export type MenuSeparator = Node<never, Pick<ToolbarSeparatorProps, 'variant'>> & {
+  type: typeof MenuSeparatorType;
+};
+
+export const isSeparator = (node: Node): node is MenuSeparator => node.type === MenuSeparatorType;
+
+export type MenuSingleSelectActionGroup = { selectCardinality: 'single'; value: string };
+export type MenuMultipleSelectActionGroup = { selectCardinality: 'multiple'; value: string[] };
+
+export type MenuItemGroup<P extends Record<string, any> = Record<string, any>> = ActionGroup<P>;
+
+export const isMenuGroup = (node: Node): node is MenuItemGroup => node.type === ACTION_GROUP_TYPE;
+
+export type MenuItem = MenuSeparator | MenuAction | MenuItemGroup;
+
+export type MenuItemsResolver = (group?: MenuItemGroup) => MenuItem[] | null;
 
-export type MenuProps<A extends Node = Action<MenuActionProperties>, P extends Node = A> = {
-  actions?: A[];
-  onAction?: (action: P) => void;
+export type MenuContextValue<A extends Node = MenuAction> = {
+  resolveGroupItems: MenuItemsResolver;
+  iconSize: IconButtonProps['size'];
+  onAction: MenuActionHandler<A>;
+  attendableId?: string;
 };

package/src/hooks.ts

@@ -0,0 +1,72 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { useSignalEffect } from '@preact/signals-react';
+import { useCallback, useState } from 'react';
+
+import { Graph, type NodeArg, type Node } from '@dxos/app-graph';
+
+import { type MenuItem, type MenuItemGroup } from './defs';
+
+type Edge = { source: string; target: string };
+
+const edgesArrayToRecord = (edges: { source: string; target: string }[]): Record<string, string[]> => {
+  return Object.fromEntries(
+    Object.entries(
+      edges.reduce((acc: Record<string, { inbound: string[]; outbound: string[] }>, { source, target }) => {
+        if (!acc[source]) {
+          acc[source] = { inbound: [], outbound: [] };
+        }
+        if (!acc[target]) {
+          acc[target] = { inbound: [], outbound: [] };
+        }
+
+        const sourceEdges = acc[source];
+        if (!sourceEdges.outbound.includes(target)) {
+          sourceEdges.outbound.push(target);
+        }
+
+        const targetEdges = acc[target];
+        if (!targetEdges.inbound.includes(source)) {
+          targetEdges.inbound.push(source);
+        }
+
+        return acc;
+      }, {}),
+    ).map(([id, { outbound }]): [string, string[]] => [id, outbound]),
+  );
+};
+
+export type ActionGraphNodes = NodeArg<any>[];
+export type ActionGraphEdges = Edge[];
+export type ActionGraphProps = { nodes: ActionGraphNodes; edges: ActionGraphEdges };
+
+export const useMenuActions = (actionCreator: () => ActionGraphProps) => {
+  const initialMenuGraphProps = actionCreator();
+
+  const [graph] = useState(
+    new Graph({ nodes: initialMenuGraphProps.nodes as Node[], edges: edgesArrayToRecord(initialMenuGraphProps.edges) }),
+  );
+
+  useSignalEffect(() => {
+    const menuGraphProps = actionCreator();
+    // @ts-ignore
+    graph._addNodes(menuGraphProps.nodes);
+    // @ts-ignore
+    graph._addEdges(menuGraphProps.edges);
+  });
+
+  const resolveGroupItems = useCallback(
+    (sourceNode: MenuItemGroup = graph.root as MenuItemGroup) => {
+      if (graph) {
+        return (graph.nodes(sourceNode, { filter: (n): n is any => true }) || null) as MenuItem[] | null;
+      } else {
+        return null;
+      }
+    },
+    [graph],
+  );
+
+  return { resolveGroupItems };
+};

package/src/index.ts

@@ -4,3 +4,5 @@
 
 export * from './components';
 export * from './defs';
+export * from './hooks';
+export { createMenuAction, createMenuItemGroup, createLineSeparator, createGapSeparator } from './util';

package/src/testing/Menus.stories.tsx

@@ -3,41 +3,44 @@
 //
 
 import '@dxos-theme';
-
-import React from 'react';
+import React, { useCallback } from 'react';
 
 import { faker } from '@dxos/random';
 import { IconButton } from '@dxos/react-ui';
-import { withTheme, withLayout, withSignals } from '@dxos/storybook-utils';
+import { withLayout, withSignals, withTheme } from '@dxos/storybook-utils';
 
-import { createActions, createNestedActionGraph, useMutateActions } from './index';
-import { Toolbar as NaturalToolbar, DropdownMenu as NaturalDropdownMenu } from '../components';
-import { type MenuAction } from '../defs';
+import { createActions, createNestedActions, createNestedActionsResolver, useMutateActions } from './index';
+import { DropdownMenu as NaturalDropdownMenu, ToolbarMenu, MenuProvider } from '../components';
+import { type MenuAction, type MenuActionHandler } from '../defs';
+import { useMenuActions } from '../hooks';
 import translations from '../translations';
 
 faker.seed(1234);
 
 export default {
   title: 'ui/react-ui-menu/Menus',
-  component: NaturalToolbar,
+  component: ToolbarMenu,
   decorators: [withTheme, withLayout({ tooltips: true }), withSignals],
   parameters: { translations },
 };
 
 const menuActions = createActions() as MenuAction[];
-const nestedMenuActions = createNestedActionGraph();
+const nestedMenuActions = createNestedActionsResolver();
 
 const handleAction = (action: MenuAction) => console.log('[on action]', action);
 
 export const DropdownMenu = {
   render: () => {
     useMutateActions(menuActions);
+    const resolveGroupItems = useCallback(() => menuActions, []);
     return (
-      <NaturalDropdownMenu.Root actions={menuActions} onAction={handleAction}>
-        <NaturalDropdownMenu.Trigger asChild>
-          <IconButton icon='ph--list-checks--regular' size={5} label='Options' />
-        </NaturalDropdownMenu.Trigger>
-      </NaturalDropdownMenu.Root>
+      <MenuProvider resolveGroupItems={resolveGroupItems} onAction={handleAction as MenuActionHandler}>
+        <NaturalDropdownMenu.Root>
+          <NaturalDropdownMenu.Trigger asChild>
+            <IconButton icon='ph--list-checks--regular' size={5} label='Options' />
+          </NaturalDropdownMenu.Trigger>
+        </NaturalDropdownMenu.Root>
+      </MenuProvider>
     );
   },
 };
@@ -45,11 +48,20 @@ export const DropdownMenu = {
 export const Toolbar = {
   render: () => {
     return (
-      <NaturalToolbar
-        actions={nestedMenuActions.topLevelActions}
-        onAction={handleAction}
-        graph={nestedMenuActions.graph}
-      />
+      <MenuProvider onAction={handleAction as MenuActionHandler} {...nestedMenuActions}>
+        <ToolbarMenu />
+      </MenuProvider>
+    );
+  },
+};
+
+export const UseMenuActionsToolbar = {
+  render: () => {
+    const menu = useMenuActions(createNestedActions);
+    return (
+      <MenuProvider onAction={handleAction as MenuActionHandler} {...menu}>
+        <ToolbarMenu />
+      </MenuProvider>
     );
   },
 };