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

package/dist/lib/browser/index.mjs

@@ -1,6 +1,6 @@
 // packages/ui/react-ui-menu/src/components/DropdownMenu.tsx
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
-import React2, { useCallback } from "react";
+import React3, { useCallback } from "react";
 import { DropdownMenu as NaturalDropdownMenu, Icon } from "@dxos/react-ui";
 
 // packages/ui/react-ui-menu/src/components/ActionLabel.tsx
@@ -20,10 +20,61 @@ var translations_default = [
 ];
 
 // packages/ui/react-ui-menu/src/util.ts
+import { ACTION_GROUP_TYPE, ACTION_TYPE, actionGroupSymbol } from "@dxos/app-graph";
 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) => ({
+  id,
+  type: ACTION_TYPE,
+  properties,
+  data: noop
+});
+var createMenuItemGroup = (id, properties) => ({
+  id,
+  type: ACTION_GROUP_TYPE,
+  properties,
+  data: actionGroupSymbol
+});
+var createGapSeparator = (id = "gap", source = "root") => ({
+  nodes: [
+    {
+      id,
+      type: "@dxos/react-ui-toolbar/separator",
+      properties: {
+        variant: "gap"
+      },
+      data: void 0
+    }
+  ],
+  edges: [
+    {
+      source,
+      target: id
+    }
+  ]
+});
+var createLineSeparator = (id = "line", source = "root") => ({
+  nodes: [
+    {
+      id,
+      type: "@dxos/react-ui-toolbar/separator",
+      properties: {
+        variant: "line"
+      },
+      data: void 0
+    }
+  ],
+  edges: [
+    {
+      source,
+      target: id
+    }
+  ]
+});
 
 // packages/ui/react-ui-menu/src/components/ActionLabel.tsx
 var ActionLabel = ({ action }) => {
@@ -36,32 +87,67 @@ var ActionLabel = ({ action }) => {
   }, keySymbols(shortcut).join("")));
 };
 
+// packages/ui/react-ui-menu/src/components/MenuContext.tsx
+import { createContextScope } from "@radix-ui/react-context";
+import React2, { useMemo } from "react";
+var MENU_NAME = "GraphMenu";
+var [createMenuContext, createMenuScope] = createContextScope(MENU_NAME, []);
+var [MenuContextProvider, useMenu] = createMenuContext(MENU_NAME);
+var menuContextDefaults = {
+  iconSize: 5,
+  onAction: () => {
+  },
+  resolveGroupItems: () => 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 useMenuItems = (group, propsItems, consumerName = "useMenuItemConsumer", __menuScope) => {
+  const { resolveGroupItems } = useMenu(consumerName, __menuScope);
+  return useMemo(() => propsItems ?? resolveGroupItems?.(group) ?? void 0, [
+    propsItems,
+    group,
+    resolveGroupItems
+  ]);
+};
+
 // packages/ui/react-ui-menu/src/components/DropdownMenu.tsx
-var DropdownMenuItem = ({ action, onClick }) => {
+var DropdownMenuItem = ({ item, onClick, __menuScope }) => {
+  const action = item;
   const handleClick = useCallback((event) => onClick(action, event), [
     action,
     onClick
   ]);
-  return /* @__PURE__ */ React2.createElement(NaturalDropdownMenu.Item, {
+  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__ */ React2.createElement(Icon, {
+  }, action.properties?.icon && /* @__PURE__ */ React3.createElement(Icon, {
     icon: action.properties.icon,
-    size: 4
-  }), /* @__PURE__ */ React2.createElement(ActionLabel, {
+    size: iconSize
+  }), /* @__PURE__ */ React3.createElement(ActionLabel, {
     action
   }));
 };
-var DropdownMenuRoot = ({ defaultMenuOpen, actions, menuOpen, suppressNextTooltip, onMenuOpenChange, onAction, children }) => {
+var DropdownMenuRoot = ({ items: propsItems, group, open, defaultOpen, onOpenChange, suppressNextTooltip, children, __menuScope, ...naturalProps }) => {
   const [optionsMenuOpen, setOptionsMenuOpen] = useControllableState({
-    prop: menuOpen,
-    defaultProp: defaultMenuOpen,
-    onChange: onMenuOpenChange
+    prop: open,
+    defaultProp: defaultOpen,
+    onChange: onOpenChange
   });
+  const { onAction } = useMenu("DropdownMenuRoot", __menuScope);
   const handleActionClick = useCallback((action, event) => {
     if (action.properties?.disabled) {
       return;
@@ -75,19 +161,21 @@ var DropdownMenuRoot = ({ defaultMenuOpen, actions, menuOpen, suppressNextToolti
   }, [
     onAction
   ]);
-  return /* @__PURE__ */ React2.createElement(NaturalDropdownMenu.Root, {
+  const items = useMenuItems(group, propsItems);
+  return /* @__PURE__ */ React3.createElement(NaturalDropdownMenu.Root, {
     open: optionsMenuOpen,
     onOpenChange: (nextOpen) => {
       if (!nextOpen && suppressNextTooltip) {
         suppressNextTooltip.current = true;
       }
       return setOptionsMenuOpen(nextOpen);
-    }
-  }, children, /* @__PURE__ */ React2.createElement(NaturalDropdownMenu.Portal, null, /* @__PURE__ */ React2.createElement(NaturalDropdownMenu.Content, null, /* @__PURE__ */ React2.createElement(NaturalDropdownMenu.Viewport, null, actions?.map((action) => /* @__PURE__ */ React2.createElement(DropdownMenuItem, {
-    key: action.id,
-    action,
+    },
+    ...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__ */ React2.createElement(NaturalDropdownMenu.Arrow, null))));
+  }))), /* @__PURE__ */ React3.createElement(NaturalDropdownMenu.Arrow, null))));
 };
 var DropdownMenu = {
   Root: DropdownMenuRoot,
@@ -95,137 +183,256 @@ var DropdownMenu = {
   VirtualTrigger: NaturalDropdownMenu.VirtualTrigger
 };
 
-// packages/ui/react-ui-menu/src/components/Toolbar/Toolbar.tsx
-import React5, { useCallback as useCallback2 } from "react";
-import { Toolbar as NaturalToolbar3 } from "@dxos/react-ui";
+// 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 { useAttention } from "@dxos/react-ui-attention";
 
-// packages/ui/react-ui-menu/src/components/Toolbar/ToolbarDropdownMenu.tsx
-import React3, { useMemo, useRef } from "react";
-import { Toolbar as NaturalToolbar } from "@dxos/react-ui";
-var ToolbarDropdownMenu = ({ actionGroup, graph, onAction, applyActiveIcon }) => {
-  const menuActions = useMemo(() => graph ? graph.actions(actionGroup) : [], [
-    actionGroup,
-    graph
+// packages/ui/react-ui-menu/src/defs.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;
+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 } = actionGroup.properties;
-  const suppressNextTooltip = useRef(false);
-  return /* @__PURE__ */ React3.createElement(DropdownMenu.Root, {
-    actions: menuActions,
-    onAction,
-    suppressNextTooltip
-  }, /* @__PURE__ */ React3.createElement(DropdownMenu.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ React3.createElement(NaturalToolbar.IconButton, {
-    size: 5,
-    variant: "ghost",
+  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, {
+      action
+    })
+  };
+  return hidden ? null : /* @__PURE__ */ React4.createElement(Root, {
+    key: action.id,
     disabled,
-    icon: applyActiveIcon && menuActions.find((action) => !!action.properties.checked)?.properties.icon || icon,
-    label: /* @__PURE__ */ React3.createElement(ActionLabel, {
-      action: actionGroup
-    }),
+    onClick: handleClick,
+    variant: "ghost",
     ...testId && {
       "data-testid": testId
     },
-    suppressNextTooltip,
-    caretDown: true
-  })));
+    ...rootProps,
+    classNames
+  });
 };
-
-// packages/ui/react-ui-menu/src/components/Toolbar/ToolbarToggleGroup.tsx
-import React4, { useMemo as useMemo2 } from "react";
-import { Toolbar as NaturalToolbar2 } from "@dxos/react-ui";
-var ToolbarToggleGroupItem = ({ action }) => {
-  const { icon, iconOnly, disabled } = action.properties;
-  return /* @__PURE__ */ React4.createElement(NaturalToolbar2.ToggleGroupIconItem, {
-    key: action.id,
-    value: action.id,
+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,
-    label: /* @__PURE__ */ React4.createElement(ActionLabel, {
-      action
-    })
-  });
-};
-var ToolbarToggleGroup = ({ actionGroup, graph }) => {
-  const menuActions = useMemo2(() => graph ? graph.actions(actionGroup) : [], [
-    actionGroup,
-    graph
-  ]);
-  const { selectCardinality, value } = actionGroup.properties;
-  return (
-    // TODO(thure): This is extremely difficult to manage, what do?
-    // @ts-ignore
-    /* @__PURE__ */ React4.createElement(NaturalToolbar2.ToggleGroup, {
-      type: selectCardinality,
-      value
-    }, menuActions.map((action) => /* @__PURE__ */ React4.createElement(ToolbarToggleGroupItem, {
-      key: action.id,
-      action
-    })))
-  );
+    ...rootProps,
+    ...testId && {
+      "data-testid": testId
+    }
+  })));
 };
-
-// packages/ui/react-ui-menu/src/components/Toolbar/defs.ts
-import { ACTION_GROUP_TYPE } from "@dxos/app-graph";
-var ToolbarSeparatorType = "@dxos/react-ui-toolbar/separator";
-var isSeparator = (node) => node.type === ToolbarSeparatorType;
-var isMenu = (node) => node.type === ACTION_GROUP_TYPE;
-
-// packages/ui/react-ui-menu/src/components/Toolbar/Toolbar.tsx
-var ToolbarItem = ({ iconSize, action, onAction }) => {
+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 { icon, iconOnly = true, disabled, testId } = action.properties;
-  return /* @__PURE__ */ React5.createElement(NaturalToolbar3.IconButton, {
-    key: action.id,
-    iconOnly,
-    variant: "ghost",
+  const Root = icon ? NaturalToolbar.ToggleGroupIconItem : NaturalToolbar.ToggleGroupItem;
+  const rootProps = icon ? {
     icon,
     size: iconSize,
-    label: /* @__PURE__ */ React5.createElement(ActionLabel, {
+    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 Toolbar = ({ actions: items, onAction, iconSize = 5, graph, ...props }) => {
-  return /* @__PURE__ */ React5.createElement(NaturalToolbar3.Root, props, items?.map((item, i) => isSeparator(item) ? /* @__PURE__ */ React5.createElement(NaturalToolbar3.Separator, {
+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 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
-  }) : isMenu(item) ? item.properties.variant === "dropdownMenu" ? /* @__PURE__ */ React5.createElement(ToolbarDropdownMenu, {
-    key: item.id,
-    actionGroup: item,
-    onAction,
-    iconSize,
-    graph
-  }) : /* @__PURE__ */ React5.createElement(ToolbarToggleGroup, {
-    key: item.id,
-    actionGroup: item,
-    onAction,
-    iconSize,
+  }) : 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
+    })
+  )));
+};
+
+// 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";
+var edgesArrayToRecord = (edges) => {
+  return Object.fromEntries(Object.entries(edges.reduce((acc, { source, target }) => {
+    if (!acc[source]) {
+      acc[source] = {
+        inbound: [],
+        outbound: []
+      };
+    }
+    if (!acc[target]) {
+      acc[target] = {
+        inbound: [],
+        outbound: []
+      };
+    }
+    const sourceEdges = acc[source];
+    if (!sourceEdges.outbound.includes(target)) {
+      sourceEdges.outbound.push(target);
+    }
+    const targetEdges = acc[target];
+    if (!targetEdges.inbound.includes(source)) {
+      targetEdges.inbound.push(source);
+    }
+    return acc;
+  }, {})).map(([id, { outbound }]) => [
+    id,
+    outbound
+  ]));
+};
+var useMenuActions = (actionCreator) => {
+  const initialMenuGraphProps = actionCreator();
+  const [graph] = useState(new Graph({
+    nodes: initialMenuGraphProps.nodes,
+    edges: edgesArrayToRecord(initialMenuGraphProps.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;
+    }
+  }, [
     graph
-  }) : /* @__PURE__ */ React5.createElement(ToolbarItem, {
-    key: item.id,
-    action: item,
-    onAction,
-    iconSize
-  })));
+  ]);
+  return {
+    resolveGroupItems
+  };
 };
 export {
   DropdownMenu,
-  Toolbar,
-  ToolbarSeparatorType,
-  isMenu,
-  isSeparator
+  MenuProvider,
+  MenuSeparatorType,
+  ToolbarMenu,
+  createGapSeparator,
+  createLineSeparator,
+  createMenuAction,
+  createMenuItemGroup,
+  createMenuScope,
+  isMenuGroup,
+  isSeparator,
+  menuContextDefaults,
+  useMenu,
+  useMenuActions,
+  useMenuItems
 };
 //# sourceMappingURL=index.mjs.map