@dxos/react-ui-menu 0.8.2-main.fbd8ed0 → 0.8.2-staging.42af850

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";
@@ -76,13 +81,18 @@ var createLineSeparator = (id = "line", source = "root") => ({
 
 // packages/ui/react-ui-menu/src/components/ActionLabel.tsx
 var ActionLabel = ({ action }) => {
-  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("")));
+  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);
@@ -90,6 +100,7 @@ var actionLabel = (action, t) => {
 };
 
 // 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";
@@ -101,13 +112,18 @@ var menuContextDefaults = {
 };
 var useMenuScope = createMenuScope();
 var MenuProvider = ({ children, useGroupItems = menuContextDefaults.useGroupItems, iconSize = menuContextDefaults.iconSize, attendableId }) => {
-  const { scope } = useMenuScope(void 0);
-  return /* @__PURE__ */ React2.createElement(MenuContextProvider, {
-    useGroupItems,
-    iconSize,
-    attendableId,
-    scope
-  }, children);
+  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 { useGroupItems } = useMenu(consumerName, __menuScope);
@@ -120,65 +136,66 @@ var useMenuItems = (group, propsItems, consumerName = "useMenuItemConsumer", __m
 
 // 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, caller, children, __menuScope, ...naturalProps }) => {
-  const [optionsMenuOpen, setOptionsMenuOpen] = useControllableState({
-    prop: open,
-    defaultProp: defaultOpen,
-    onChange: onOpenChange
-  });
-  const handleActionClick = useCallback((action, event) => {
-    if (action.properties?.disabled) {
-      return;
-    }
-    event.stopPropagation();
-    if (suppressNextTooltip) {
-      suppressNextTooltip.current = true;
-    }
-    setOptionsMenuOpen(false);
-    void action.data?.({
-      parent: group,
-      caller
+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
     });
-  }, [
-    suppressNextTooltip,
-    group,
-    caller
-  ]);
-  const items = useMenuItems(group, propsItems);
-  return /* @__PURE__ */ React3.createElement(NaturalDropdownMenu.Root, {
-    open: optionsMenuOpen,
-    onOpenChange: (nextOpen) => {
-      if (!nextOpen && suppressNextTooltip) {
-        suppressNextTooltip.current = true;
+    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,
@@ -187,7 +204,8 @@ var DropdownMenu = {
 };
 
 // packages/ui/react-ui-menu/src/components/ToolbarMenu.tsx
-import React4, { useCallback as useCallback2, useRef } from "react";
+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";
 
@@ -199,171 +217,192 @@ var isMenuGroup = (node) => node.type === ACTION_GROUP_TYPE2;
 
 // packages/ui/react-ui-menu/src/components/ToolbarMenu.tsx
 var ActionToolbarItem = ({ action, __menuScope }) => {
-  const { iconSize } = useMenu("ActionToolbarItem", __menuScope);
-  const { t } = useTranslation2(translationKey);
-  const handleClick = useCallback2(() => 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, t)
-  } : {
-    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 { 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,
-    suppressNextTooltip
-  } : {
-    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,
-    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 = ({ group, action, __menuScope }) => {
-  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
-  });
+  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,
-        group,
-        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-1",
-      !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
-    })
-  )));
+  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/useMenuActions.ts
 import { RegistryContext, useRxValue } from "@effect-rx/rx-react";
-import { useSignalEffect } from "@preact/signals-react";
-import { useCallback as useCallback3, useContext, useState } from "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 }) => {
@@ -390,19 +429,20 @@ var edgesArrayToRecord = (edges) => {
     return acc;
   }, {})));
 };
-var useMenuActions = (actionCreator) => {
+var useMenuActions = (props) => {
   const registry = useContext(RegistryContext);
-  const initialMenuGraphProps = actionCreator();
+  const menuGraphProps = useRxValue(props);
   const [graph] = useState(new Graph({
     registry,
-    nodes: initialMenuGraphProps.nodes,
-    edges: edgesArrayToRecord(initialMenuGraphProps.edges)
+    nodes: menuGraphProps.nodes,
+    edges: edgesArrayToRecord(menuGraphProps.edges)
   }));
-  useSignalEffect(() => {
-    const menuGraphProps = actionCreator();
+  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;
@@ -426,6 +466,7 @@ export {
   isMenuGroup,
   isSeparator,
   menuContextDefaults,
+  rxFromSignal,
   useMenu,
   useMenuActions,
   useMenuItems