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

package/dist/lib/browser/index.mjs

@@ -1,9 +1,14 @@
+// packages/ui/react-ui-menu/src/index.ts
+import { rxFromSignal } from "@dxos/app-graph";
+
 // packages/ui/react-ui-menu/src/components/DropdownMenu.tsx
+import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
 import React3, { useCallback } from "react";
 import { DropdownMenu as NaturalDropdownMenu, Icon } from "@dxos/react-ui";
 
 // packages/ui/react-ui-menu/src/components/ActionLabel.tsx
+import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
 import React from "react";
 import { keySymbols } from "@dxos/keyboard";
 import { toLocalizedString, useTranslation } from "@dxos/react-ui";
@@ -25,13 +30,11 @@ import { getHostPlatform } from "@dxos/util";
 var getShortcut = (action) => {
   return typeof action.properties?.keyBinding === "string" ? action.properties.keyBinding : action.properties?.keyBinding?.[getHostPlatform()];
 };
-var noop = () => {
-};
-var createMenuAction = (id, properties) => ({
+var createMenuAction = (id, invoke, properties) => ({
   id,
   type: ACTION_TYPE,
   properties,
-  data: noop
+  data: invoke
 });
 var createMenuItemGroup = (id, properties) => ({
   id,
@@ -78,16 +81,26 @@ var createLineSeparator = (id = "line", source = "root") => ({
 
 // packages/ui/react-ui-menu/src/components/ActionLabel.tsx
 var ActionLabel = ({ action }) => {
+  var _effect = _useSignals();
+  try {
+    const shortcut = getShortcut(action);
+    const { t } = useTranslation(translationKey);
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", {
+      className: "grow truncate"
+    }, toLocalizedString(action.properties.label, t)), shortcut && /* @__PURE__ */ React.createElement("span", {
+      className: mx("shrink-0", descriptionText)
+    }, keySymbols(shortcut).join("")));
+  } finally {
+    _effect.f();
+  }
+};
+var actionLabel = (action, t) => {
   const shortcut = getShortcut(action);
-  const { t } = useTranslation(translationKey);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", {
-    className: "grow truncate"
-  }, toLocalizedString(action.properties.label, t)), shortcut && /* @__PURE__ */ React.createElement("span", {
-    className: mx("shrink-0", descriptionText)
-  }, keySymbols(shortcut).join("")));
+  return `${toLocalizedString(action.properties.label, t)}${shortcut ? ` (${keySymbols(shortcut).join("")})` : ""}`;
 };
 
 // packages/ui/react-ui-menu/src/components/MenuContext.tsx
+import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
 import { createContextScope } from "@radix-ui/react-context";
 import React2, { useMemo } from "react";
 var MENU_NAME = "GraphMenu";
@@ -95,87 +108,94 @@ var [createMenuContext, createMenuScope] = createContextScope(MENU_NAME, []);
 var [MenuContextProvider, useMenu] = createMenuContext(MENU_NAME);
 var menuContextDefaults = {
   iconSize: 5,
-  onAction: () => {
-  },
-  resolveGroupItems: () => null
+  useGroupItems: () => null
 };
 var useMenuScope = createMenuScope();
-var MenuProvider = ({ children, resolveGroupItems = menuContextDefaults.resolveGroupItems, onAction = menuContextDefaults.onAction, iconSize = menuContextDefaults.iconSize, attendableId }) => {
-  const { scope } = useMenuScope(void 0);
-  return /* @__PURE__ */ React2.createElement(MenuContextProvider, {
-    resolveGroupItems,
-    onAction,
-    iconSize,
-    attendableId,
-    scope
-  }, children);
+var MenuProvider = ({ children, useGroupItems = menuContextDefaults.useGroupItems, iconSize = menuContextDefaults.iconSize, attendableId }) => {
+  var _effect = _useSignals2();
+  try {
+    const { scope } = useMenuScope(void 0);
+    return /* @__PURE__ */ React2.createElement(MenuContextProvider, {
+      useGroupItems,
+      iconSize,
+      attendableId,
+      scope
+    }, children);
+  } finally {
+    _effect.f();
+  }
 };
 var useMenuItems = (group, propsItems, consumerName = "useMenuItemConsumer", __menuScope) => {
-  const { resolveGroupItems } = useMenu(consumerName, __menuScope);
-  return useMemo(() => propsItems ?? resolveGroupItems?.(group) ?? void 0, [
+  const { useGroupItems } = useMenu(consumerName, __menuScope);
+  const groupItems = useGroupItems(group);
+  return useMemo(() => propsItems ?? groupItems ?? void 0, [
     propsItems,
-    group,
-    resolveGroupItems
+    groupItems
   ]);
 };
 
 // packages/ui/react-ui-menu/src/components/DropdownMenu.tsx
 var DropdownMenuItem = ({ item, onClick, __menuScope }) => {
-  const action = item;
-  const handleClick = useCallback((event) => onClick(action, event), [
-    action,
-    onClick
-  ]);
-  const { iconSize } = useMenu("DropdownMenuItem", __menuScope);
-  return /* @__PURE__ */ React3.createElement(NaturalDropdownMenu.Item, {
-    onClick: handleClick,
-    classNames: "gap-2",
-    disabled: action.properties?.disabled,
-    ...action.properties?.testId && {
-      "data-testid": action.properties.testId
-    }
-  }, action.properties?.icon && /* @__PURE__ */ React3.createElement(Icon, {
-    icon: action.properties.icon,
-    size: iconSize
-  }), /* @__PURE__ */ React3.createElement(ActionLabel, {
-    action
-  }));
+  var _effect = _useSignals3();
+  try {
+    const action = item;
+    const handleClick = useCallback((event) => onClick(action, event), [
+      action,
+      onClick
+    ]);
+    const { iconSize } = useMenu("DropdownMenuItem", __menuScope);
+    return /* @__PURE__ */ React3.createElement(NaturalDropdownMenu.Item, {
+      onClick: handleClick,
+      classNames: "gap-2",
+      disabled: action.properties?.disabled,
+      ...action.properties?.testId && {
+        "data-testid": action.properties.testId
+      }
+    }, action.properties?.icon && /* @__PURE__ */ React3.createElement(Icon, {
+      icon: action.properties.icon,
+      size: iconSize
+    }), /* @__PURE__ */ React3.createElement(ActionLabel, {
+      action
+    }));
+  } finally {
+    _effect.f();
+  }
 };
-var DropdownMenuRoot = ({ items: propsItems, group, open, defaultOpen, onOpenChange, suppressNextTooltip, children, __menuScope, ...naturalProps }) => {
-  const [optionsMenuOpen, setOptionsMenuOpen] = useControllableState({
-    prop: open,
-    defaultProp: defaultOpen,
-    onChange: onOpenChange
-  });
-  const { onAction } = useMenu("DropdownMenuRoot", __menuScope);
-  const handleActionClick = useCallback((action, event) => {
-    if (action.properties?.disabled) {
-      return;
-    }
-    event.stopPropagation();
-    if (suppressNextTooltip) {
-      suppressNextTooltip.current = true;
-    }
-    setOptionsMenuOpen(false);
-    onAction?.(action);
-  }, [
-    onAction
-  ]);
-  const items = useMenuItems(group, propsItems);
-  return /* @__PURE__ */ React3.createElement(NaturalDropdownMenu.Root, {
-    open: optionsMenuOpen,
-    onOpenChange: (nextOpen) => {
-      if (!nextOpen && suppressNextTooltip) {
-        suppressNextTooltip.current = true;
+var DropdownMenuRoot = ({ items: propsItems, group, open, defaultOpen, onOpenChange, caller, children, __menuScope, ...naturalProps }) => {
+  var _effect = _useSignals3();
+  try {
+    const [optionsMenuOpen, setOptionsMenuOpen] = useControllableState({
+      prop: open,
+      defaultProp: defaultOpen,
+      onChange: onOpenChange
+    });
+    const handleActionClick = useCallback((action, event) => {
+      if (action.properties?.disabled) {
+        return;
       }
-      return setOptionsMenuOpen(nextOpen);
-    },
-    ...naturalProps
-  }, children, /* @__PURE__ */ React3.createElement(NaturalDropdownMenu.Portal, null, /* @__PURE__ */ React3.createElement(NaturalDropdownMenu.Content, null, /* @__PURE__ */ React3.createElement(NaturalDropdownMenu.Viewport, null, items?.map((item) => /* @__PURE__ */ React3.createElement(DropdownMenuItem, {
-    key: item.id,
-    item,
-    onClick: handleActionClick
-  }))), /* @__PURE__ */ React3.createElement(NaturalDropdownMenu.Arrow, null))));
+      event.stopPropagation();
+      setOptionsMenuOpen(false);
+      void action.data?.({
+        parent: group,
+        caller
+      });
+    }, [
+      group,
+      caller
+    ]);
+    const items = useMenuItems(group, propsItems);
+    return /* @__PURE__ */ React3.createElement(NaturalDropdownMenu.Root, {
+      open: optionsMenuOpen,
+      onOpenChange: setOptionsMenuOpen,
+      ...naturalProps
+    }, children, /* @__PURE__ */ React3.createElement(NaturalDropdownMenu.Portal, null, /* @__PURE__ */ React3.createElement(NaturalDropdownMenu.Content, null, /* @__PURE__ */ React3.createElement(NaturalDropdownMenu.Viewport, null, items?.map((item) => /* @__PURE__ */ React3.createElement(DropdownMenuItem, {
+      key: item.id,
+      item,
+      onClick: handleActionClick
+    }))), /* @__PURE__ */ React3.createElement(NaturalDropdownMenu.Arrow, null))));
+  } finally {
+    _effect.f();
+  }
 };
 var DropdownMenu = {
   Root: DropdownMenuRoot,
@@ -184,11 +204,12 @@ var DropdownMenu = {
 };
 
 // packages/ui/react-ui-menu/src/components/ToolbarMenu.tsx
-import React4, { useCallback as useCallback2, useRef } from "react";
-import { Icon as Icon2, Toolbar as NaturalToolbar } from "@dxos/react-ui";
+import { useSignals as _useSignals4 } from "@preact-signals/safe-react/tracking";
+import React4, { useCallback as useCallback2 } from "react";
+import { Icon as Icon2, Toolbar as NaturalToolbar, useTranslation as useTranslation2 } from "@dxos/react-ui";
 import { useAttention } from "@dxos/react-ui-attention";
 
-// packages/ui/react-ui-menu/src/defs.ts
+// packages/ui/react-ui-menu/src/types.ts
 import { ACTION_GROUP_TYPE as ACTION_GROUP_TYPE2 } from "@dxos/app-graph";
 var MenuSeparatorType = "@dxos/react-ui-toolbar/separator";
 var isSeparator = (node) => node.type === MenuSeparatorType;
@@ -196,174 +217,193 @@ var isMenuGroup = (node) => node.type === ACTION_GROUP_TYPE2;
 
 // packages/ui/react-ui-menu/src/components/ToolbarMenu.tsx
 var ActionToolbarItem = ({ action, __menuScope }) => {
-  const { onAction, iconSize } = useMenu("ActionToolbarItem", __menuScope);
-  const handleClick = useCallback2(() => {
-    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: /* @__PURE__ */ React4.createElement(ActionLabel, {
-      action
-    })
-  } : {
-    children: /* @__PURE__ */ React4.createElement(ActionLabel, {
+  var _effect = _useSignals4();
+  try {
+    const { iconSize } = useMenu("ActionToolbarItem", __menuScope);
+    const { t } = useTranslation2(translationKey);
+    const handleClick = useCallback2(() => action.data?.(), [
       action
-    })
-  };
-  return hidden ? null : /* @__PURE__ */ React4.createElement(Root, {
-    key: action.id,
-    disabled,
-    onClick: handleClick,
-    variant: "ghost",
-    ...testId && {
-      "data-testid": testId
-    },
-    ...rootProps,
-    classNames
-  });
+    ]);
+    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, t)
+    } : {
+      children: /* @__PURE__ */ React4.createElement(ActionLabel, {
+        action
+      })
+    };
+    return hidden ? null : /* @__PURE__ */ React4.createElement(Root, {
+      key: action.id,
+      disabled,
+      onClick: handleClick,
+      variant: "ghost",
+      ...testId && {
+        "data-testid": testId
+      },
+      ...rootProps,
+      classNames
+    });
+  } finally {
+    _effect.f();
+  }
 };
 var DropdownMenuToolbarItem = ({ group, items: propsItems, __menuScope }) => {
-  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.properties.checked);
-  const icon = group.properties.applyActive && // TODO(thure): Handle other menu item types.
-  activeItem?.properties.icon || group.properties.icon;
-  const Root = icon ? NaturalToolbar.IconButton : NaturalToolbar.Button;
-  const label = /* @__PURE__ */ React4.createElement(ActionLabel, {
-    action: group.properties.applyActive && activeItem ? activeItem : group
-  });
-  const rootProps = icon ? {
-    icon,
-    size: iconSize,
-    iconOnly,
-    label,
-    caretDown: true,
-    suppressNextTooltip
-  } : {
-    children: /* @__PURE__ */ React4.createElement(React4.Fragment, null, label, /* @__PURE__ */ React4.createElement(Icon2, {
-      size: 3,
-      icon: "ph--caret-down--bold",
-      classNames: "mis-1"
-    }))
-  };
-  return /* @__PURE__ */ React4.createElement(DropdownMenu.Root, {
-    group,
-    items,
-    suppressNextTooltip
-  }, /* @__PURE__ */ React4.createElement(DropdownMenu.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ React4.createElement(Root, {
-    variant: "ghost",
-    disabled,
-    ...rootProps,
-    ...testId && {
-      "data-testid": testId
-    }
-  })));
+  var _effect = _useSignals4();
+  try {
+    const { iconOnly, disabled, testId } = group.properties;
+    const { t } = useTranslation2(translationKey);
+    const { iconSize } = useMenu("DropdownMenuToolbarItem", __menuScope);
+    const items = useMenuItems(group, propsItems, "DropdownMenuToolbarItem", __menuScope);
+    const activeItem = items?.find((item) => !!item.properties.checked);
+    const icon = group.properties.applyActive && // TODO(thure): Handle other menu item types.
+    activeItem?.properties.icon || group.properties.icon;
+    const Root = icon ? NaturalToolbar.IconButton : NaturalToolbar.Button;
+    const labelAction = group.properties.applyActive && activeItem ? activeItem : group;
+    const rootProps = icon ? {
+      icon,
+      size: iconSize,
+      iconOnly,
+      label: actionLabel(labelAction, t),
+      caretDown: true
+    } : {
+      children: /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(ActionLabel, {
+        action: labelAction
+      }), /* @__PURE__ */ React4.createElement(Icon2, {
+        size: 3,
+        icon: "ph--caret-down--bold",
+        classNames: "mis-1"
+      }))
+    };
+    return /* @__PURE__ */ React4.createElement(DropdownMenu.Root, {
+      group,
+      items
+    }, /* @__PURE__ */ React4.createElement(DropdownMenu.Trigger, {
+      asChild: true
+    }, /* @__PURE__ */ React4.createElement(Root, {
+      variant: "ghost",
+      disabled,
+      ...rootProps,
+      ...testId && {
+        "data-testid": testId
+      }
+    })));
+  } finally {
+    _effect.f();
+  }
 };
-var ToggleGroupItem = ({ action, __menuScope }) => {
-  const { iconSize, onAction } = useMenu("ToggleGroupItem", __menuScope);
-  const { icon, iconOnly = true, disabled, testId, hidden, classNames } = action.properties;
-  const handleClick = useCallback2(() => {
-    onAction?.(action);
-  }, [
-    action,
-    onAction
-  ]);
-  const Root = icon ? NaturalToolbar.ToggleGroupIconItem : NaturalToolbar.ToggleGroupItem;
-  const rootProps = icon ? {
-    icon,
-    size: iconSize,
-    iconOnly,
-    label: /* @__PURE__ */ React4.createElement(ActionLabel, {
-      action
-    })
-  } : {
-    children: /* @__PURE__ */ React4.createElement(ActionLabel, {
-      action
-    })
-  };
-  return hidden ? null : /* @__PURE__ */ React4.createElement(Root, {
-    key: action.id,
-    value: action.id,
-    disabled,
-    onClick: handleClick,
-    variant: "ghost",
-    ...testId && {
-      "data-testid": testId
-    },
-    ...rootProps,
-    classNames
-  });
+var ToggleGroupItem = ({ group, action, __menuScope }) => {
+  var _effect = _useSignals4();
+  try {
+    const { iconSize } = useMenu("ToggleGroupItem", __menuScope);
+    const { t } = useTranslation2(translationKey);
+    const { icon, iconOnly = true, disabled, testId, hidden, classNames } = action.properties;
+    const handleClick = useCallback2(() => action.data?.({
+      parent: group
+    }), [
+      action,
+      group
+    ]);
+    const Root = icon ? NaturalToolbar.ToggleGroupIconItem : NaturalToolbar.ToggleGroupItem;
+    const rootProps = icon ? {
+      icon,
+      size: iconSize,
+      iconOnly,
+      label: actionLabel(action, t)
+    } : {
+      children: /* @__PURE__ */ React4.createElement(ActionLabel, {
+        action
+      })
+    };
+    return hidden ? null : /* @__PURE__ */ React4.createElement(Root, {
+      key: action.id,
+      value: action.id,
+      disabled,
+      onClick: handleClick,
+      variant: "ghost",
+      ...testId && {
+        "data-testid": testId
+      },
+      ...rootProps,
+      classNames
+    });
+  } finally {
+    _effect.f();
+  }
 };
 var ToggleGroupToolbarItem = ({ group, items: propsItems, __menuScope }) => {
-  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
-    /* @__PURE__ */ React4.createElement(
-      NaturalToolbar.ToggleGroup,
-      {
-        type: selectCardinality,
-        value
-      },
-      // TODO(thure): Handle other menu item types.
-      items.map((action) => /* @__PURE__ */ React4.createElement(ToggleGroupItem, {
-        key: action.id,
-        action
-      }))
-    )
-  );
+  var _effect = _useSignals4();
+  try {
+    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
+      /* @__PURE__ */ React4.createElement(
+        NaturalToolbar.ToggleGroup,
+        {
+          type: selectCardinality,
+          value
+        },
+        // TODO(thure): Handle other menu item types.
+        items.map((action) => /* @__PURE__ */ React4.createElement(ToggleGroupItem, {
+          key: action.id,
+          group,
+          action
+        }))
+      )
+    );
+  } finally {
+    _effect.f();
+  }
 };
 var ToolbarMenu = ({ __menuScope, classNames, ...props }) => {
-  const items = useMenuItems(void 0, void 0, "ToolbarMenu", __menuScope);
-  const { attendableId } = useMenu("ToolbarMenu", __menuScope);
-  const { hasAttention } = useAttention(attendableId);
-  return /* @__PURE__ */ React4.createElement(NaturalToolbar.Root, {
-    ...props,
-    classNames: [
-      "p-0 pointer-fine:p-1 attention-surface",
-      !hasAttention && "opacity-20",
-      classNames
-    ]
-  }, items?.map((item, i) => isSeparator(item) ? /* @__PURE__ */ React4.createElement(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`.
-    /* @__PURE__ */ React4.createElement(DropdownMenuToolbarItem, {
-      key: item.id,
-      group: item
-    })
-  ) : (
-    // TODO(thure): Figure out type narrowing that doesn’t require so much use of `as`.
-    /* @__PURE__ */ React4.createElement(ToggleGroupToolbarItem, {
-      key: item.id,
-      group: item
-    })
-  ) : (
-    // TODO(thure): Figure out type narrowing that doesn’t require so much use of `as`.
-    /* @__PURE__ */ React4.createElement(ActionToolbarItem, {
-      key: item.id,
-      action: item
-    })
-  )));
+  var _effect = _useSignals4();
+  try {
+    const items = useMenuItems(void 0, void 0, "ToolbarMenu", __menuScope);
+    const { attendableId } = useMenu("ToolbarMenu", __menuScope);
+    const { hasAttention } = useAttention(attendableId);
+    return /* @__PURE__ */ React4.createElement(NaturalToolbar.Root, {
+      ...props,
+      classNames: [
+        "p-1",
+        attendableId && !hasAttention && "[&>*]:opacity-20 !bg-transparent",
+        classNames
+      ]
+    }, items?.map((item, i) => isSeparator(item) ? /* @__PURE__ */ React4.createElement(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`.
+      /* @__PURE__ */ React4.createElement(DropdownMenuToolbarItem, {
+        key: item.id,
+        group: item
+      })
+    ) : (
+      // TODO(thure): Figure out type narrowing that doesn’t require so much use of `as`.
+      /* @__PURE__ */ React4.createElement(ToggleGroupToolbarItem, {
+        key: item.id,
+        group: item
+      })
+    ) : (
+      // TODO(thure): Figure out type narrowing that doesn’t require so much use of `as`.
+      /* @__PURE__ */ React4.createElement(ActionToolbarItem, {
+        key: item.id,
+        action: item
+      })
+    )));
+  } finally {
+    _effect.f();
+  }
 };
 
-// packages/ui/react-ui-menu/src/hooks.ts
-import { useSignalEffect } from "@preact/signals-react";
-import { useCallback as useCallback3, useState } from "react";
-import { Graph } from "@dxos/app-graph";
+// packages/ui/react-ui-menu/src/hooks/useMenuActions.ts
+import { RegistryContext, useRxValue } from "@effect-rx/rx-react";
+import { useCallback as useCallback3, useContext, useEffect, useState } from "react";
+import { Graph, ROOT_ID } from "@dxos/app-graph";
 var edgesArrayToRecord = (edges) => {
   return Object.fromEntries(Object.entries(edges.reduce((acc, { source, target }) => {
     if (!acc[source]) {
@@ -387,35 +427,30 @@ var edgesArrayToRecord = (edges) => {
       targetEdges.inbound.push(source);
     }
     return acc;
-  }, {})).map(([id, { outbound }]) => [
-    id,
-    outbound
-  ]));
+  }, {})));
 };
-var useMenuActions = (actionCreator) => {
-  const initialMenuGraphProps = actionCreator();
+var useMenuActions = (props) => {
+  const registry = useContext(RegistryContext);
+  const menuGraphProps = useRxValue(props);
   const [graph] = useState(new Graph({
-    nodes: initialMenuGraphProps.nodes,
-    edges: edgesArrayToRecord(initialMenuGraphProps.edges)
+    registry,
+    nodes: menuGraphProps.nodes,
+    edges: edgesArrayToRecord(menuGraphProps.edges)
   }));
-  useSignalEffect(() => {
-    const menuGraphProps = actionCreator();
-    graph._addNodes(menuGraphProps.nodes);
-    graph._addEdges(menuGraphProps.edges);
-  });
-  const resolveGroupItems = useCallback3((sourceNode = graph.root) => {
-    if (graph) {
-      return graph.nodes(sourceNode, {
-        filter: (n) => true
-      }) || null;
-    } else {
-      return null;
-    }
+  useEffect(() => {
+    graph.addNodes(menuGraphProps.nodes);
+    graph.addEdges(menuGraphProps.edges);
+  }, [
+    menuGraphProps
+  ]);
+  const useGroupItems = useCallback3((sourceNode) => {
+    const items = useRxValue(graph.connections(sourceNode?.id || ROOT_ID));
+    return items;
   }, [
     graph
   ]);
   return {
-    resolveGroupItems
+    useGroupItems
   };
 };
 export {
@@ -431,6 +466,7 @@ export {
   isMenuGroup,
   isSeparator,
   menuContextDefaults,
+  rxFromSignal,
   useMenu,
   useMenuActions,
   useMenuItems