@dxos/react-ui-menu 0.8.2-main.12df754 → 0.8.2-main.30e4dbb

package/src/components/ActionLabel.tsx

@@ -4,20 +4,18 @@
 
 import React from 'react';
 
-import { type Action, type ActionGroup } from '@dxos/app-graph';
+import { type Action as GraphAction, type ActionGroup } from '@dxos/app-graph';
 import { keySymbols } from '@dxos/keyboard';
-import { toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { toLocalizedString, useTranslation, type TFunction } from '@dxos/react-ui';
 import { mx, descriptionText } from '@dxos/react-ui-theme';
 
-import { type MenuActionProperties } from '../defs';
 import { translationKey } from '../translations';
+import { type MenuActionProperties } from '../types';
 import { getShortcut } from '../util';
 
-export const ActionLabel = ({
-  action,
-}: {
-  action: Action<MenuActionProperties> | ActionGroup<Omit<MenuActionProperties, 'variant'>>;
-}) => {
+type Action = GraphAction<MenuActionProperties> | ActionGroup<Omit<MenuActionProperties, 'variant'>>;
+
+export const ActionLabel = ({ action }: { action: Action }) => {
   const shortcut = getShortcut(action);
   const { t } = useTranslation(translationKey);
 
@@ -28,3 +26,8 @@ export const ActionLabel = ({
     </>
   );
 };
+
+export const actionLabel = (action: Action, t: TFunction) => {
+  const shortcut = getShortcut(action);
+  return `${toLocalizedString(action.properties!.label, t)}${shortcut ? ` (${keySymbols(shortcut).join('')})` : ''}`;
+};

package/src/components/DropdownMenu.tsx

@@ -9,12 +9,13 @@ import { DropdownMenu as NaturalDropdownMenu, Icon, type DropdownMenuRootProps }
 
 import { ActionLabel } from './ActionLabel';
 import { type MenuScopedProps, useMenu, useMenuItems } from './MenuContext';
-import { type MenuAction, type MenuItem, type MenuItemGroup } from '../defs';
+import { type MenuAction, type MenuItem, type MenuItemGroup } from '../types';
 
 export type DropdownMenuProps = DropdownMenuRootProps & {
   group?: MenuItemGroup;
   items?: MenuItem[];
   suppressNextTooltip?: MutableRefObject<boolean>;
+  caller?: string;
 };
 
 const DropdownMenuItem = ({
@@ -49,6 +50,7 @@ const DropdownMenuRoot = ({
   defaultOpen,
   onOpenChange,
   suppressNextTooltip,
+  caller,
   children,
   __menuScope,
   ...naturalProps
@@ -59,8 +61,6 @@ const DropdownMenuRoot = ({
     onChange: onOpenChange,
   });
 
-  const { onAction } = useMenu('DropdownMenuRoot', __menuScope);
-
   const handleActionClick = useCallback(
     (action: MenuAction, event: MouseEvent) => {
       if (action.properties?.disabled) {
@@ -72,9 +72,9 @@ const DropdownMenuRoot = ({
         suppressNextTooltip.current = true;
       }
       setOptionsMenuOpen(false);
-      onAction?.(action);
+      void action.data?.({ parent: group, caller });
     },
-    [onAction],
+    [suppressNextTooltip, group, caller],
   );
 
   const items = useMenuItems(group, propsItems);

package/src/components/MenuContext.tsx

@@ -5,15 +5,7 @@
 import { createContextScope, type Scope } from '@radix-ui/react-context';
 import React, { type PropsWithChildren, useMemo } from 'react';
 
-import { type Node } from '@dxos/app-graph';
-
-import {
-  type MenuActionHandler,
-  type MenuAction,
-  type MenuContextValue,
-  type MenuItem,
-  type MenuItemGroup,
-} from '../defs';
+import { type MenuContextValue, type MenuItem, type MenuItemGroup } from '../types';
 
 export type MenuScopedProps<P> = P & { __menuScope?: Scope };
 
@@ -21,28 +13,25 @@ const MENU_NAME = 'GraphMenu';
 
 const [createMenuContext, createMenuScope] = createContextScope(MENU_NAME, []);
 
-const [MenuContextProvider, useMenu] = createMenuContext<MenuContextValue<any>>(MENU_NAME);
+const [MenuContextProvider, useMenu] = createMenuContext<MenuContextValue>(MENU_NAME);
 
-export const menuContextDefaults: MenuContextValue<MenuAction> = {
+export const menuContextDefaults: MenuContextValue = {
   iconSize: 5,
-  onAction: () => {},
   resolveGroupItems: () => null,
 };
 
 const useMenuScope = createMenuScope();
 
-const MenuProvider = <A extends Node = MenuAction>({
+const MenuProvider = ({
   children,
   resolveGroupItems = menuContextDefaults.resolveGroupItems,
-  onAction = menuContextDefaults.onAction as MenuActionHandler<A>,
   iconSize = menuContextDefaults.iconSize,
   attendableId,
-}: PropsWithChildren<Partial<MenuContextValue<A>>>) => {
+}: PropsWithChildren<Partial<MenuContextValue>>) => {
   const { scope } = useMenuScope(undefined);
   return (
     <MenuContextProvider
       resolveGroupItems={resolveGroupItems}
-      onAction={onAction}
       iconSize={iconSize}
       attendableId={attendableId}
       scope={scope}

package/src/{testing → components}/Menus.stories.tsx

@@ -3,38 +3,35 @@
 //
 
 import '@dxos-theme';
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 
 import { faker } from '@dxos/random';
 import { IconButton } from '@dxos/react-ui';
 import { withLayout, withSignals, withTheme } from '@dxos/storybook-utils';
 
-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 { useMenuActions } from '../hooks/useMenuActions';
+import { createActions, createNestedActions, createNestedActionsResolver, useMutateActions } from '../testing';
 import translations from '../translations';
+import { type MenuAction } from '../types';
 
 faker.seed(1234);
 
 export default {
   title: 'ui/react-ui-menu/Menus',
   component: ToolbarMenu,
-  decorators: [withTheme, withLayout({ tooltips: true }), withSignals],
+  decorators: [withTheme, withLayout(), withSignals],
   parameters: { translations },
 };
 
-const menuActions = createActions() as MenuAction[];
-const nestedMenuActions = createNestedActionsResolver();
-
-const handleAction = (action: MenuAction) => console.log('[on action]', action);
-
 export const DropdownMenu = {
   render: () => {
+    const menuActions = useMemo(() => createActions() as MenuAction[], []);
+    const resolveGroupItems = useCallback(() => menuActions, [menuActions]);
     useMutateActions(menuActions);
-    const resolveGroupItems = useCallback(() => menuActions, []);
+
     return (
-      <MenuProvider resolveGroupItems={resolveGroupItems} onAction={handleAction as MenuActionHandler}>
+      <MenuProvider resolveGroupItems={resolveGroupItems}>
         <NaturalDropdownMenu.Root>
           <NaturalDropdownMenu.Trigger asChild>
             <IconButton icon='ph--list-checks--regular' size={5} label='Options' />
@@ -47,8 +44,10 @@ export const DropdownMenu = {
 
 export const Toolbar = {
   render: () => {
+    const nestedMenuActions = useMemo(() => createNestedActionsResolver(), []);
+
     return (
-      <MenuProvider onAction={handleAction as MenuActionHandler} {...nestedMenuActions}>
+      <MenuProvider {...nestedMenuActions}>
         <ToolbarMenu />
       </MenuProvider>
     );
@@ -58,8 +57,9 @@ export const Toolbar = {
 export const UseMenuActionsToolbar = {
   render: () => {
     const menu = useMenuActions(createNestedActions);
+
     return (
-      <MenuProvider onAction={handleAction as MenuActionHandler} {...menu}>
+      <MenuProvider {...menu}>
         <ToolbarMenu />
       </MenuProvider>
     );

package/src/components/ToolbarMenu.tsx

@@ -4,12 +4,13 @@
 
 import React, { useCallback, useRef } from 'react';
 
-import { Icon, type IconButtonProps, Toolbar as NaturalToolbar, type ToolbarRootProps } from '@dxos/react-ui';
+import { Icon, Toolbar as NaturalToolbar, type ToolbarRootProps, useTranslation } from '@dxos/react-ui';
 import { useAttention } from '@dxos/react-ui-attention';
 
-import { ActionLabel } from './ActionLabel';
+import { actionLabel, ActionLabel } from './ActionLabel';
 import { DropdownMenu } from './DropdownMenu';
 import { type MenuScopedProps, useMenu, useMenuItems } from './MenuContext';
+import { translationKey } from '../translations';
 import {
   type MenuAction,
   type MenuItem,
@@ -19,7 +20,7 @@ import {
   type MenuActionProperties,
   type MenuMultipleSelectActionGroup,
   type MenuSingleSelectActionGroup,
-} from '../defs';
+} from '../types';
 
 export type ToolbarMenuDropdownMenuActionGroup = Omit<MenuActionProperties, 'variant' | 'icon'> & {
   variant: 'dropdownMenu';
@@ -44,15 +45,19 @@ export type ToolbarMenuActionGroupProps = {
   items?: MenuItem[];
 };
 
+export type ToolbarMenuActionProps = {
+  group: MenuItemGroup<ToolbarMenuActionGroupProperties>;
+  action: MenuAction;
+};
+
 const ActionToolbarItem = ({ action, __menuScope }: MenuScopedProps<{ action: MenuAction }>) => {
-  const { onAction, iconSize } = useMenu('ActionToolbarItem', __menuScope);
-  const handleClick = useCallback(() => {
-    onAction?.(action);
-  }, [action, onAction]);
+  const { iconSize } = useMenu('ActionToolbarItem', __menuScope);
+  const { t } = useTranslation(translationKey);
+  const handleClick = useCallback(() => action.data?.(), [action]);
   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} /> }
+    ? { icon, size: iconSize, iconOnly, label: actionLabel(action, t) }
     : { children: <ActionLabel action={action} /> };
   return hidden ? null : (
     <Root
@@ -61,7 +66,7 @@ const ActionToolbarItem = ({ action, __menuScope }: MenuScopedProps<{ action: Me
       onClick={handleClick}
       variant='ghost'
       {...(testId && { 'data-testid': testId })}
-      {...(rootProps as IconButtonProps)}
+      {...(rootProps as any)}
       classNames={classNames}
     />
   );
@@ -74,6 +79,7 @@ const DropdownMenuToolbarItem = ({
 }: MenuScopedProps<ToolbarMenuActionGroupProps>) => {
   const { iconOnly, disabled, testId } = group.properties;
   const suppressNextTooltip = useRef(false);
+  const { t } = useTranslation(translationKey);
   const { iconSize } = useMenu('DropdownMenuToolbarItem', __menuScope);
   const items = useMenuItems(group, propsItems, 'DropdownMenuToolbarItem', __menuScope);
   const activeItem = items?.find((item) => !!(item as MenuAction).properties.checked);
@@ -83,15 +89,13 @@ const DropdownMenuToolbarItem = ({
       (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 labelAction = (group.properties as any).applyActive && activeItem ? (activeItem as MenuAction) : group;
   const rootProps = icon
-    ? { icon, size: iconSize, iconOnly, label, caretDown: true, suppressNextTooltip }
+    ? { icon, size: iconSize, iconOnly, label: actionLabel(labelAction, t), caretDown: true, suppressNextTooltip }
     : {
         children: (
           <>
-            {label}
+            <ActionLabel action={labelAction} />
             <Icon size={3} icon='ph--caret-down--bold' classNames='mis-1' />
           </>
         ),
@@ -99,26 +103,20 @@ const DropdownMenuToolbarItem = ({
   return (
     <DropdownMenu.Root group={group} items={items} suppressNextTooltip={suppressNextTooltip}>
       <DropdownMenu.Trigger asChild>
-        <Root
-          variant='ghost'
-          disabled={disabled}
-          {...(rootProps as IconButtonProps)}
-          {...(testId && { 'data-testid': testId })}
-        />
+        <Root variant='ghost' disabled={disabled} {...(rootProps as any)} {...(testId && { 'data-testid': testId })} />
       </DropdownMenu.Trigger>
     </DropdownMenu.Root>
   );
 };
 
-const ToggleGroupItem = ({ action, __menuScope }: MenuScopedProps<{ action: MenuAction }>) => {
-  const { iconSize, onAction } = useMenu('ToggleGroupItem', __menuScope);
+const ToggleGroupItem = ({ group, action, __menuScope }: MenuScopedProps<ToolbarMenuActionProps>) => {
+  const { iconSize } = useMenu('ToggleGroupItem', __menuScope);
+  const { t } = useTranslation(translationKey);
   const { icon, iconOnly = true, disabled, testId, hidden, classNames } = action.properties;
-  const handleClick = useCallback(() => {
-    onAction?.(action);
-  }, [action, onAction]);
+  const handleClick = useCallback(() => action.data?.({ parent: group }), [action, group]);
   const Root = icon ? NaturalToolbar.ToggleGroupIconItem : NaturalToolbar.ToggleGroupItem;
   const rootProps = icon
-    ? { icon, size: iconSize, iconOnly, label: <ActionLabel action={action} /> }
+    ? { icon, size: iconSize, iconOnly, label: actionLabel(action, t) }
     : { children: <ActionLabel action={action} /> };
   return hidden ? null : (
     <Root
@@ -128,7 +126,7 @@ const ToggleGroupItem = ({ action, __menuScope }: MenuScopedProps<{ action: Menu
       onClick={handleClick}
       variant='ghost'
       {...(testId && { 'data-testid': testId })}
-      {...(rootProps as IconButtonProps)}
+      {...(rootProps as any)}
       classNames={classNames}
     />
   );
@@ -148,7 +146,7 @@ const ToggleGroupToolbarItem = ({
       {
         // TODO(thure): Handle other menu item types.
         (items as MenuAction[]).map((action) => (
-          <ToggleGroupItem key={action.id} action={action} />
+          <ToggleGroupItem key={action.id} group={group} action={action} />
         ))
       }
     </NaturalToolbar.ToggleGroup>

package/src/hooks/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './useMenuActions';

package/src/{hooks.ts → hooks/useMenuActions.ts}

@@ -7,7 +7,7 @@ import { useCallback, useState } from 'react';
 
 import { Graph, type NodeArg, type Node } from '@dxos/app-graph';
 
-import { type MenuItem, type MenuItemGroup } from './defs';
+import { type MenuItem, type MenuItemGroup } from '../types';
 
 type Edge = { source: string; target: string };
 

package/src/index.ts

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

package/src/testing/generator.ts

@@ -0,0 +1,111 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { useEffect } from 'react';
+
+import { type Action, Graph, type NodeArg, ACTION_TYPE, ACTION_GROUP_TYPE, actionGroupSymbol } from '@dxos/app-graph';
+import { live } from '@dxos/live-object';
+import { faker } from '@dxos/random';
+import { type DeepWriteable } from '@dxos/util';
+
+import { type ActionGraphProps } from '../hooks/useMenuActions';
+import { type MenuAction, type MenuItemGroup, type MenuItem } from '../types';
+
+export type CreateActionsParams = Partial<{
+  type?: typeof ACTION_TYPE | typeof ACTION_GROUP_TYPE;
+  callback: () => void;
+  count: number;
+}>;
+
+const icons = {
+  regular: [
+    'ph--text-b--regular',
+    'ph--text-italic--regular',
+    'ph--text-h-five--regular',
+    'ph--chat-text--regular',
+    'ph--clipboard-text--regular',
+    'ph--link-simple--regular',
+  ],
+  fill: [
+    'ph--text-b--fill',
+    'ph--text-italic--fill',
+    'ph--text-h-five--fill',
+    'ph--chat-text--fill',
+    'ph--clipboard-text--fill',
+    'ph--link-simple--fill',
+  ],
+};
+
+export const createActions = (params?: CreateActionsParams) => {
+  // eslint-disable-next-line no-console
+  const { callback = () => console.log('invoke'), count = 12, type = ACTION_TYPE } = params ?? {};
+  return faker.helpers.multiple(
+    () =>
+      live({
+        id: faker.string.uuid(),
+        type,
+        data: type === ACTION_GROUP_TYPE ? 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]),
+          ...(type === ACTION_GROUP_TYPE && { variant: 'dropdownMenu' }),
+        },
+      }),
+    { count },
+  );
+};
+
+export const createNestedActions = () => {
+  const result: ActionGraphProps = { edges: [], nodes: [] };
+  const actionGroups = createActions({ type: ACTION_GROUP_TYPE });
+  actionGroups.forEach((group) => {
+    const actions = createActions();
+    result.nodes.push(group, ...actions);
+    result.edges.push(
+      { source: 'root', target: group.id },
+      ...actions.map((action) => ({ source: group.id, target: action.id })),
+    );
+  });
+  return result;
+};
+
+export const createNestedActionsResolver = (groupParams?: CreateActionsParams, params?: CreateActionsParams) => {
+  const graph = new Graph();
+  const actionGroups = createActions({ type: ACTION_GROUP_TYPE, ...groupParams });
+  actionGroups.forEach((group) => {
+    const actions = createActions(params);
+    // TODO(thure): these methods exist on `graph` but are marked as `@internal`; how should consumers properly build
+    //  graph “islands” for the purposes of these components?
+    // @ts-ignore
+    graph._addNodes([group as NodeArg<any>, ...(actions as NodeArg<any>[])]);
+    // @ts-ignore
+    graph._addEdges([
+      { source: 'root', target: group.id },
+      ...actions.map((action) => ({ source: group.id, target: action.id })),
+    ]);
+    void graph.expand(group);
+  });
+  const resolveGroupItems = (groupNode?: MenuItemGroup) =>
+    (graph.actions(groupNode ?? graph.root) || null) as MenuItem[] | null;
+  return { resolveGroupItems };
+};
+
+export const mutateActionsOnInterval = (actions: Action[]) => {
+  let cursor = 0;
+  return setInterval(() => {
+    const action = actions[cursor] as DeepWriteable<Action>;
+    action.properties.icon = faker.helpers.arrayElement(
+      action.properties.icon.endsWith('regular') ? icons.fill : icons.regular,
+    );
+    action.properties.disabled = !action.properties.disabled;
+    cursor = (cursor + actions.length + 1) % actions.length;
+  }, 1_000);
+};
+
+export const useMutateActions = (actions: MenuAction[]) =>
+  useEffect(() => {
+    const interval = mutateActionsOnInterval(actions);
+    return () => clearInterval(interval);
+  }, []);

package/src/testing/index.ts

@@ -2,110 +2,4 @@
 // Copyright 2025 DXOS.org
 //
 
-import { useEffect } from 'react';
-
-import { type Action, Graph, type NodeArg, ACTION_TYPE, ACTION_GROUP_TYPE, actionGroupSymbol } from '@dxos/app-graph';
-import { live } from '@dxos/live-object';
-import { faker } from '@dxos/random';
-import { type DeepWriteable } from '@dxos/util';
-
-import { type MenuAction, type MenuItemGroup, type MenuItem } from '../defs';
-import { type ActionGraphProps } from '../hooks';
-
-export type CreateActionsParams = Partial<{
-  type?: typeof ACTION_TYPE | typeof ACTION_GROUP_TYPE;
-  callback: () => void;
-  count: number;
-}>;
-
-const icons = {
-  regular: [
-    'ph--text-b--regular',
-    'ph--text-italic--regular',
-    'ph--text-h-five--regular',
-    'ph--chat-text--regular',
-    'ph--clipboard-text--regular',
-    'ph--link-simple--regular',
-  ],
-  fill: [
-    'ph--text-b--fill',
-    'ph--text-italic--fill',
-    'ph--text-h-five--fill',
-    'ph--chat-text--fill',
-    'ph--clipboard-text--fill',
-    'ph--link-simple--fill',
-  ],
-};
-
-export const createActions = (params?: CreateActionsParams) => {
-  // eslint-disable-next-line no-console
-  const { callback = () => console.log('invoke'), count = 12, type = ACTION_TYPE } = params ?? {};
-  return faker.helpers.multiple(
-    () =>
-      live({
-        id: faker.string.uuid(),
-        type,
-        data: type === ACTION_GROUP_TYPE ? 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]),
-          ...(type === ACTION_GROUP_TYPE && { variant: 'dropdownMenu' }),
-        },
-      }),
-    { count },
-  );
-};
-
-export const createNestedActions = () => {
-  const result: ActionGraphProps = { edges: [], nodes: [] };
-  const actionGroups = createActions({ type: ACTION_GROUP_TYPE });
-  actionGroups.forEach((group) => {
-    const actions = createActions();
-    result.nodes.push(group, ...actions);
-    result.edges.push(
-      { source: 'root', target: group.id },
-      ...actions.map((action) => ({ source: group.id, target: action.id })),
-    );
-  });
-  return result;
-};
-
-export const createNestedActionsResolver = (groupParams?: CreateActionsParams, params?: CreateActionsParams) => {
-  const graph = new Graph();
-  const actionGroups = createActions({ type: ACTION_GROUP_TYPE, ...groupParams });
-  actionGroups.forEach((group) => {
-    const actions = createActions(params);
-    // TODO(thure): these methods exist on `graph` but are marked as `@internal`; how should consumers properly build
-    //  graph “islands” for the purposes of these components?
-    // @ts-ignore
-    graph._addNodes([group as NodeArg<any>, ...(actions as NodeArg<any>[])]);
-    // @ts-ignore
-    graph._addEdges([
-      { source: 'root', target: group.id },
-      ...actions.map((action) => ({ source: group.id, target: action.id })),
-    ]);
-    void graph.expand(group);
-  });
-  const resolveGroupItems = (groupNode?: MenuItemGroup) =>
-    (graph.actions(groupNode ?? graph.root) || null) as MenuItem[] | null;
-  return { resolveGroupItems };
-};
-
-export const mutateActionsOnInterval = (actions: Action[]) => {
-  let cursor = 0;
-  return setInterval(() => {
-    const action = actions[cursor] as DeepWriteable<Action>;
-    action.properties.icon = faker.helpers.arrayElement(
-      action.properties.icon.endsWith('regular') ? icons.fill : icons.regular,
-    );
-    action.properties.disabled = !action.properties.disabled;
-    cursor = (cursor + actions.length + 1) % actions.length;
-  }, 1_000);
-};
-
-export const useMutateActions = (actions: MenuAction[]) =>
-  useEffect(() => {
-    const interval = mutateActionsOnInterval(actions);
-    return () => clearInterval(interval);
-  }, []);
+export * from './generator';

package/src/{defs.ts → types.ts}

@@ -26,8 +26,6 @@ export type MenuItemGroupProperties = {
 
 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'>> & {
@@ -47,9 +45,8 @@ export type MenuItem = MenuSeparator | MenuAction | MenuItemGroup;
 
 export type MenuItemsResolver = (group?: MenuItemGroup) => MenuItem[] | null;
 
-export type MenuContextValue<A extends Node = MenuAction> = {
+export type MenuContextValue = {
   resolveGroupItems: MenuItemsResolver;
   iconSize: IconButtonProps['size'];
-  onAction: MenuActionHandler<A>;
   attendableId?: string;
 };

package/src/util.ts

@@ -11,7 +11,7 @@ import {
   type MenuItemGroup,
   type MenuItemGroupProperties,
   type MenuSeparator,
-} from './defs';
+} from './types';
 
 export const getShortcut = (action: ActionLike) => {
   return typeof action.properties?.keyBinding === 'string'
@@ -21,16 +21,16 @@ export const getShortcut = (action: ActionLike) => {
 
 export const fallbackIcon = 'ph--placeholder--regular';
 
-// TODO(thure,wittjosiah): This is probably a smell; consider the whether react-ui-menu should use action nodes if the
-//  callback in `data` is never used. See https://github.com/dxos/dxos/pull/8506#discussion_r1925855118
-const noop = () => {};
-
-export const createMenuAction = <P extends {} = {}>(id: string, properties: P & MenuActionProperties) =>
+export const createMenuAction = <P extends {} = {}>(
+  id: string,
+  invoke: () => void,
+  properties: P & MenuActionProperties,
+) =>
   ({
     id,
     type: ACTION_TYPE,
     properties,
-    data: noop,
+    data: invoke,
   }) satisfies MenuAction;
 
 export const createMenuItemGroup = <

package/dist/types/src/defs.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../src/defs.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,MAAM,EAAE,KAAK,WAAW,EAAqB,MAAM,iBAAiB,CAAC;AAC9F,OAAO,EAAE,KAAK,qBAAqB,EAAE,KAAK,KAAK,EAAE,KAAK,eAAe,EAAE,KAAK,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAEnH,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,cAAc,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG;IACpC,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,EAAE,GAAG,EAAE,IAAI,MAAM,CAAC,CAAC,GAAG,oBAAoB,CAAC,CAAC;AAE7E,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,IAAI,GAAG,UAAU,IAAI,CAAC,MAAM,EAAE,CAAC,KAAK,IAAI,CAAC;AAEjF,eAAO,MAAM,iBAAiB,EAAG,kCAA2C,CAAC;AAE7E,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,qBAAqB,EAAE,SAAS,CAAC,CAAC,GAAG;IAChF,IAAI,EAAE,OAAO,iBAAiB,CAAC;CAChC,CAAC;AAEF,eAAO,MAAM,WAAW,SAAU,IAAI,KAAG,IAAI,IAAI,aAAgD,CAAC;AAElG,MAAM,MAAM,2BAA2B,GAAG;IAAE,iBAAiB,EAAE,QAAQ,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AACzF,MAAM,MAAM,6BAA6B,GAAG;IAAE,iBAAiB,EAAE,UAAU,CAAC;IAAC,KAAK,EAAE,MAAM,EAAE,CAAA;CAAE,CAAC;AAE/F,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI,WAAW,CAAC,CAAC,CAAC,CAAC;AAEhG,eAAO,MAAM,WAAW,SAAU,IAAI,KAAG,IAAI,IAAI,aAAgD,CAAC;AAElG,MAAM,MAAM,QAAQ,GAAG,aAAa,GAAG,UAAU,GAAG,aAAa,CAAC;AAElE,MAAM,MAAM,iBAAiB,GAAG,CAAC,KAAK,CAAC,EAAE,aAAa,KAAK,QAAQ,EAAE,GAAG,IAAI,CAAC;AAE7E,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,IAAI,GAAG,UAAU,IAAI;IAC1D,iBAAiB,EAAE,iBAAiB,CAAC;IACrC,QAAQ,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAClC,QAAQ,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC;IAC/B,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC"}

package/dist/types/src/hooks.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../src/hooks.ts"],"names":[],"mappings":"AAOA,OAAO,EAAS,KAAK,OAAO,EAAa,MAAM,iBAAiB,CAAC;AAEjE,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,QAAQ,CAAC;AAE3D,KAAK,IAAI,GAAG;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC;AA6B/C,MAAM,MAAM,gBAAgB,GAAG,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC;AAC9C,MAAM,MAAM,gBAAgB,GAAG,IAAI,EAAE,CAAC;AACtC,MAAM,MAAM,gBAAgB,GAAG;IAAE,KAAK,EAAE,gBAAgB,CAAC;IAAC,KAAK,EAAE,gBAAgB,CAAA;CAAE,CAAC;AAEpF,eAAO,MAAM,cAAc,kBAAmB,MAAM,gBAAgB;qCAgBnD,aAAa;CAW7B,CAAC"}

package/dist/types/src/testing/Menus.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Menus.stories.d.ts","sourceRoot":"","sources":["../../../../src/testing/Menus.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AACrB,OAAO,KAAsB,MAAM,OAAO,CAAC;;;;;;;;;;;;;AAc3C,wBAKE;AAOF,eAAO,MAAM,YAAY;;CAcxB,CAAC;AAEF,eAAO,MAAM,OAAO;;CAQnB,CAAC;AAEF,eAAO,MAAM,qBAAqB;;CASjC,CAAC"}