@dxos/react-ui-menu 0.8.2-staging.7ac8446 → 0.8.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-menu",
-  "version": "0.8.2-staging.7ac8446",
+  "version": "0.8.2",
   "description": "Components for facilitating reactive and consistent menus.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -24,31 +24,38 @@
     "src"
   ],
   "dependencies": {
-    "@preact/signals-react": "^1.3.8",
+    "@preact-signals/safe-react": "^0.9.0",
+    "@preact/signals-react": "^3.2.0",
     "@radix-ui/react-context": "1.1.1",
     "@radix-ui/react-use-controllable-state": "1.1.0",
-    "@dxos/app-graph": "0.8.2-staging.7ac8446",
-    "@dxos/keyboard": "0.8.2-staging.7ac8446",
-    "@dxos/react-ui-attention": "0.8.2-staging.7ac8446",
-    "@dxos/util": "0.8.2-staging.7ac8446"
+    "@dxos/app-graph": "0.8.2",
+    "@dxos/keyboard": "0.8.2",
+    "@dxos/util": "0.8.2",
+    "@dxos/react-ui-attention": "0.8.2"
   },
   "devDependencies": {
+    "@effect-rx/rx-react": "^0.34.1",
+    "@effect/platform": "0.80.12",
     "@types/react": "~18.2.0",
     "@types/react-dom": "~18.2.0",
+    "effect": "3.14.21",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/live-object": "0.8.2-staging.7ac8446",
-    "@dxos/random": "0.8.2-staging.7ac8446",
-    "@dxos/react-ui": "0.8.2-staging.7ac8446",
-    "@dxos/react-ui-theme": "0.8.2-staging.7ac8446",
-    "@dxos/storybook-utils": "0.8.2-staging.7ac8446"
+    "@dxos/live-object": "0.8.2",
+    "@dxos/random": "0.8.2",
+    "@dxos/react-ui-theme": "0.8.2",
+    "@dxos/react-ui": "0.8.2",
+    "@dxos/storybook-utils": "0.8.2"
   },
   "peerDependencies": {
+    "@effect-rx/rx-react": "^0.34.1",
+    "@effect/platform": "0.80.12",
+    "effect": "^3.13.3",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.2-staging.7ac8446",
-    "@dxos/react-ui-theme": "0.8.2-staging.7ac8446"
+    "@dxos/react-ui": "0.8.2",
+    "@dxos/react-ui-theme": "0.8.2"
   },
   "publishConfig": {
     "access": "public"

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

@@ -3,18 +3,18 @@
 //
 
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
-import React, { type MouseEvent, type MutableRefObject, useCallback } from 'react';
+import React, { type MouseEvent, useCallback } from 'react';
 
 import { DropdownMenu as NaturalDropdownMenu, Icon, type DropdownMenuRootProps } from '@dxos/react-ui';
 
 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 = ({
@@ -48,7 +48,7 @@ const DropdownMenuRoot = ({
   open,
   defaultOpen,
   onOpenChange,
-  suppressNextTooltip,
+  caller,
   children,
   __menuScope,
   ...naturalProps
@@ -59,8 +59,6 @@ const DropdownMenuRoot = ({
     onChange: onOpenChange,
   });
 
-  const { onAction } = useMenu('DropdownMenuRoot', __menuScope);
-
   const handleActionClick = useCallback(
     (action: MenuAction, event: MouseEvent) => {
       if (action.properties?.disabled) {
@@ -68,30 +66,16 @@ const DropdownMenuRoot = ({
       }
       event.stopPropagation();
       // TODO(thure): Why does Dialog’s modal-ness cause issues if we don’t explicitly close the menu here?
-      if (suppressNextTooltip) {
-        suppressNextTooltip.current = true;
-      }
       setOptionsMenuOpen(false);
-      onAction?.(action);
+      void action.data?.({ parent: group, caller });
     },
-    [onAction],
+    [group, caller],
   );
 
   const items = useMenuItems(group, propsItems);
 
   return (
-    <NaturalDropdownMenu.Root
-      {...{
-        open: optionsMenuOpen,
-        onOpenChange: (nextOpen: boolean) => {
-          if (!nextOpen && suppressNextTooltip) {
-            suppressNextTooltip.current = true;
-          }
-          return setOptionsMenuOpen(nextOpen);
-        },
-      }}
-      {...naturalProps}
-    >
+    <NaturalDropdownMenu.Root open={optionsMenuOpen} onOpenChange={setOptionsMenuOpen} {...naturalProps}>
       {children}
       <NaturalDropdownMenu.Portal>
         <NaturalDropdownMenu.Content>

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,32 +13,24 @@ 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,
+  useGroupItems: () => null,
 };
 
 const useMenuScope = createMenuScope();
 
-const MenuProvider = <A extends Node = MenuAction>({
+const MenuProvider = ({
   children,
-  resolveGroupItems = menuContextDefaults.resolveGroupItems,
-  onAction = menuContextDefaults.onAction as MenuActionHandler<A>,
+  useGroupItems = menuContextDefaults.useGroupItems,
   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}
-    >
+    <MenuContextProvider useGroupItems={useGroupItems} iconSize={iconSize} attendableId={attendableId} scope={scope}>
       {children}
     </MenuContextProvider>
   );
@@ -58,8 +42,9 @@ export const useMenuItems = (
   consumerName: string = 'useMenuItemConsumer',
   __menuScope?: Scope,
 ) => {
-  const { resolveGroupItems } = useMenu(consumerName, __menuScope);
-  return useMemo(() => propsItems ?? resolveGroupItems?.(group) ?? undefined, [propsItems, group, resolveGroupItems]);
+  const { useGroupItems } = useMenu(consumerName, __menuScope);
+  const groupItems = useGroupItems(group);
+  return useMemo(() => propsItems ?? groupItems ?? undefined, [propsItems, groupItems]);
 };
 
 export { useMenu, createMenuScope, MenuProvider };

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 { 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 useGroupItems={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

@@ -2,14 +2,15 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { useCallback, useRef } from 'react';
+import React, { useCallback } 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}
     />
   );
@@ -73,7 +78,7 @@ const DropdownMenuToolbarItem = ({
   __menuScope,
 }: 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,42 +88,34 @@ 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 }
     : {
         children: (
           <>
-            {label}
+            <ActionLabel action={labelAction} />
             <Icon size={3} icon='ph--caret-down--bold' classNames='mis-1' />
           </>
         ),
       };
   return (
-    <DropdownMenu.Root group={group} items={items} suppressNextTooltip={suppressNextTooltip}>
+    <DropdownMenu.Root group={group} items={items}>
       <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 +125,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 +145,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>
@@ -162,7 +159,7 @@ export const ToolbarMenu = ({ __menuScope, classNames, ...props }: MenuScopedPro
   return (
     <NaturalToolbar.Root
       {...props}
-      classNames={['p-0 pointer-fine:p-1 attention-surface', !hasAttention && 'opacity-20', classNames]}
+      classNames={['p-1', attendableId && !hasAttention && '[&>*]:opacity-20 !bg-transparent', classNames]}
     >
       {items?.map((item: MenuItem, i: number) =>
         isSeparator(item) ? (

package/src/hooks/index.ts

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

package/src/hooks/useMenuActions.ts

@@ -0,0 +1,69 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { RegistryContext, type Rx, useRxValue } from '@effect-rx/rx-react';
+import { useCallback, useContext, useEffect, useState } from 'react';
+
+import { type Edge, type Edges, Graph, type NodeArg, type Node, ROOT_ID } from '@dxos/app-graph';
+
+import { type MenuItem, type MenuItemGroup } from '../types';
+
+const edgesArrayToRecord = (edges: Edge[]): Record<string, Edges> => {
+  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;
+      }, {}),
+    ),
+  );
+};
+
+export type ActionGraphNodes = NodeArg<any>[];
+export type ActionGraphEdges = Edge[];
+export type ActionGraphProps = { nodes: ActionGraphNodes; edges: ActionGraphEdges };
+
+export const useMenuActions = (props: Rx.Rx<ActionGraphProps>) => {
+  const registry = useContext(RegistryContext);
+  const menuGraphProps = useRxValue(props);
+
+  const [graph] = useState(
+    new Graph({
+      registry,
+      nodes: menuGraphProps.nodes as Node[],
+      edges: edgesArrayToRecord(menuGraphProps.edges),
+    }),
+  );
+
+  useEffect(() => {
+    graph.addNodes(menuGraphProps.nodes);
+    graph.addEdges(menuGraphProps.edges);
+  }, [menuGraphProps]);
+
+  const useGroupItems = useCallback(
+    (sourceNode?: MenuItemGroup) => {
+      const items = useRxValue(graph.connections(sourceNode?.id || ROOT_ID)) as MenuItem[];
+      return items;
+    },
+    [graph],
+  );
+
+  return { useGroupItems };
+};

package/src/index.ts

@@ -2,7 +2,9 @@
 // Copyright 2024 DXOS.org
 //
 
+export { rxFromSignal } from '@dxos/app-graph';
+
 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,116 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Rx } from '@effect-rx/rx-react';
+import { useEffect } from 'react';
+
+import {
+  type Action,
+  Graph,
+  type NodeArg,
+  ACTION_TYPE,
+  ACTION_GROUP_TYPE,
+  actionGroupSymbol,
+  ROOT_ID,
+} 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 = Rx.make(() => {
+  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);
+    graph.addNodes([group as NodeArg<any>, ...(actions as NodeArg<any>[])]);
+    graph.addEdges([
+      { source: 'root', target: group.id },
+      ...actions.map((action) => ({ source: group.id, target: action.id })),
+    ]);
+    void graph.expand(group.id);
+  });
+  const resolveGroupItems = (groupNode?: MenuItemGroup) =>
+    (graph.getActions(groupNode?.id ?? ROOT_ID) || 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);
+  }, []);