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

package/dist/lib/node/index.cjs

@@ -29,10 +29,20 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var node_exports = {};
 __export(node_exports, {
   DropdownMenu: () => DropdownMenu,
-  Toolbar: () => Toolbar,
-  ToolbarSeparatorType: () => ToolbarSeparatorType,
-  isMenu: () => isMenu,
-  isSeparator: () => isSeparator
+  MenuProvider: () => MenuProvider,
+  MenuSeparatorType: () => MenuSeparatorType,
+  ToolbarMenu: () => ToolbarMenu,
+  createGapSeparator: () => createGapSeparator,
+  createLineSeparator: () => createLineSeparator,
+  createMenuAction: () => createMenuAction,
+  createMenuItemGroup: () => createMenuItemGroup,
+  createMenuScope: () => createMenuScope,
+  isMenuGroup: () => isMenuGroup,
+  isSeparator: () => isSeparator,
+  menuContextDefaults: () => menuContextDefaults,
+  useMenu: () => useMenu,
+  useMenuActions: () => useMenuActions,
+  useMenuItems: () => useMenuItems
 });
 module.exports = __toCommonJS(node_exports);
 var import_react_use_controllable_state = require("@radix-ui/react-use-controllable-state");
@@ -42,14 +52,17 @@ var import_react2 = __toESM(require("react"));
 var import_keyboard = require("@dxos/keyboard");
 var import_react_ui2 = require("@dxos/react-ui");
 var import_react_ui_theme = require("@dxos/react-ui-theme");
+var import_app_graph = require("@dxos/app-graph");
 var import_util = require("@dxos/util");
+var import_react_context = require("@radix-ui/react-context");
 var import_react3 = __toESM(require("react"));
-var import_react_ui3 = require("@dxos/react-ui");
 var import_react4 = __toESM(require("react"));
-var import_react_ui4 = require("@dxos/react-ui");
-var import_react5 = __toESM(require("react"));
-var import_react_ui5 = require("@dxos/react-ui");
-var import_app_graph = require("@dxos/app-graph");
+var import_react_ui3 = require("@dxos/react-ui");
+var import_react_ui_attention = require("@dxos/react-ui-attention");
+var import_app_graph2 = require("@dxos/app-graph");
+var import_signals_react = require("@preact/signals-react");
+var import_react5 = require("react");
+var import_app_graph3 = require("@dxos/app-graph");
 var translationKey = "menus";
 var translations_default = [
   {
@@ -61,6 +74,56 @@ var translations_default = [
 var getShortcut = (action) => {
   return typeof action.properties?.keyBinding === "string" ? action.properties.keyBinding : action.properties?.keyBinding?.[(0, import_util.getHostPlatform)()];
 };
+var noop = () => {
+};
+var createMenuAction = (id, properties) => ({
+  id,
+  type: import_app_graph.ACTION_TYPE,
+  properties,
+  data: noop
+});
+var createMenuItemGroup = (id, properties) => ({
+  id,
+  type: import_app_graph.ACTION_GROUP_TYPE,
+  properties,
+  data: import_app_graph.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
+    }
+  ]
+});
 var ActionLabel = ({ action }) => {
   const shortcut = getShortcut(action);
   const { t } = (0, import_react_ui2.useTranslation)(translationKey);
@@ -70,11 +133,41 @@ var ActionLabel = ({ action }) => {
     className: (0, import_react_ui_theme.mx)("shrink-0", import_react_ui_theme.descriptionText)
   }, (0, import_keyboard.keySymbols)(shortcut).join("")));
 };
-var DropdownMenuItem = ({ action, onClick }) => {
+var MENU_NAME = "GraphMenu";
+var [createMenuContext, createMenuScope] = (0, import_react_context.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__ */ import_react3.default.createElement(MenuContextProvider, {
+    resolveGroupItems,
+    onAction,
+    iconSize,
+    attendableId,
+    scope
+  }, children);
+};
+var useMenuItems = (group, propsItems, consumerName = "useMenuItemConsumer", __menuScope) => {
+  const { resolveGroupItems } = useMenu(consumerName, __menuScope);
+  return (0, import_react3.useMemo)(() => propsItems ?? resolveGroupItems?.(group) ?? void 0, [
+    propsItems,
+    group,
+    resolveGroupItems
+  ]);
+};
+var DropdownMenuItem = ({ item, onClick, __menuScope }) => {
+  const action = item;
   const handleClick = (0, import_react.useCallback)((event) => onClick(action, event), [
     action,
     onClick
   ]);
+  const { iconSize } = useMenu("DropdownMenuItem", __menuScope);
   return /* @__PURE__ */ import_react.default.createElement(import_react_ui.DropdownMenu.Item, {
     onClick: handleClick,
     classNames: "gap-2",
@@ -84,17 +177,18 @@ var DropdownMenuItem = ({ action, onClick }) => {
     }
   }, action.properties?.icon && /* @__PURE__ */ import_react.default.createElement(import_react_ui.Icon, {
     icon: action.properties.icon,
-    size: 4
+    size: iconSize
   }), /* @__PURE__ */ import_react.default.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] = (0, import_react_use_controllable_state.useControllableState)({
-    prop: menuOpen,
-    defaultProp: defaultMenuOpen,
-    onChange: onMenuOpenChange
+    prop: open,
+    defaultProp: defaultOpen,
+    onChange: onOpenChange
   });
+  const { onAction } = useMenu("DropdownMenuRoot", __menuScope);
   const handleActionClick = (0, import_react.useCallback)((action, event) => {
     if (action.properties?.disabled) {
       return;
@@ -108,6 +202,7 @@ var DropdownMenuRoot = ({ defaultMenuOpen, actions, menuOpen, suppressNextToolti
   }, [
     onAction
   ]);
+  const items = useMenuItems(group, propsItems);
   return /* @__PURE__ */ import_react.default.createElement(import_react_ui.DropdownMenu.Root, {
     open: optionsMenuOpen,
     onOpenChange: (nextOpen) => {
@@ -115,10 +210,11 @@ var DropdownMenuRoot = ({ defaultMenuOpen, actions, menuOpen, suppressNextToolti
         suppressNextTooltip.current = true;
       }
       return setOptionsMenuOpen(nextOpen);
-    }
-  }, children, /* @__PURE__ */ import_react.default.createElement(import_react_ui.DropdownMenu.Portal, null, /* @__PURE__ */ import_react.default.createElement(import_react_ui.DropdownMenu.Content, null, /* @__PURE__ */ import_react.default.createElement(import_react_ui.DropdownMenu.Viewport, null, actions?.map((action) => /* @__PURE__ */ import_react.default.createElement(DropdownMenuItem, {
-    key: action.id,
-    action,
+    },
+    ...naturalProps
+  }, children, /* @__PURE__ */ import_react.default.createElement(import_react_ui.DropdownMenu.Portal, null, /* @__PURE__ */ import_react.default.createElement(import_react_ui.DropdownMenu.Content, null, /* @__PURE__ */ import_react.default.createElement(import_react_ui.DropdownMenu.Viewport, null, items?.map((item) => /* @__PURE__ */ import_react.default.createElement(DropdownMenuItem, {
+    key: item.id,
+    item,
     onClick: handleActionClick
   }))), /* @__PURE__ */ import_react.default.createElement(import_react_ui.DropdownMenu.Arrow, null))));
 };
@@ -127,122 +223,243 @@ var DropdownMenu = {
   Trigger: import_react_ui.DropdownMenu.Trigger,
   VirtualTrigger: import_react_ui.DropdownMenu.VirtualTrigger
 };
-var ToolbarDropdownMenu = ({ actionGroup, graph, onAction, applyActiveIcon }) => {
-  const menuActions = (0, import_react4.useMemo)(() => graph ? graph.actions(actionGroup) : [], [
-    actionGroup,
-    graph
+var MenuSeparatorType = "@dxos/react-ui-toolbar/separator";
+var isSeparator = (node) => node.type === MenuSeparatorType;
+var isMenuGroup = (node) => node.type === import_app_graph2.ACTION_GROUP_TYPE;
+var ActionToolbarItem = ({ action, __menuScope }) => {
+  const { onAction, iconSize } = useMenu("ActionToolbarItem", __menuScope);
+  const handleClick = (0, import_react4.useCallback)(() => {
+    onAction?.(action);
+  }, [
+    action,
+    onAction
   ]);
-  const { icon, iconOnly = true, disabled, testId } = actionGroup.properties;
+  const { icon, iconOnly = true, disabled, testId, hidden, classNames } = action.properties;
+  const Root = icon ? import_react_ui3.Toolbar.IconButton : import_react_ui3.Toolbar.Button;
+  const rootProps = icon ? {
+    icon,
+    size: iconSize,
+    iconOnly,
+    label: /* @__PURE__ */ import_react4.default.createElement(ActionLabel, {
+      action
+    })
+  } : {
+    children: /* @__PURE__ */ import_react4.default.createElement(ActionLabel, {
+      action
+    })
+  };
+  return hidden ? null : /* @__PURE__ */ import_react4.default.createElement(Root, {
+    key: action.id,
+    disabled,
+    onClick: handleClick,
+    variant: "ghost",
+    ...testId && {
+      "data-testid": testId
+    },
+    ...rootProps,
+    classNames
+  });
+};
+var DropdownMenuToolbarItem = ({ group, items: propsItems, __menuScope }) => {
+  const { iconOnly, disabled, testId } = group.properties;
   const suppressNextTooltip = (0, import_react4.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 ? import_react_ui3.Toolbar.IconButton : import_react_ui3.Toolbar.Button;
+  const label = /* @__PURE__ */ import_react4.default.createElement(ActionLabel, {
+    action: group.properties.applyActive && activeItem ? activeItem : group
+  });
+  const rootProps = icon ? {
+    icon,
+    size: iconSize,
+    iconOnly,
+    label,
+    caretDown: true,
+    suppressNextTooltip
+  } : {
+    children: /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, label, /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.Icon, {
+      size: 3,
+      icon: "ph--caret-down--bold",
+      classNames: "mis-1"
+    }))
+  };
   return /* @__PURE__ */ import_react4.default.createElement(DropdownMenu.Root, {
-    actions: menuActions,
-    onAction,
+    group,
+    items,
     suppressNextTooltip
   }, /* @__PURE__ */ import_react4.default.createElement(DropdownMenu.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Toolbar.IconButton, {
-    size: 5,
+  }, /* @__PURE__ */ import_react4.default.createElement(Root, {
     variant: "ghost",
-    iconOnly,
     disabled,
-    icon: applyActiveIcon && menuActions.find((action) => !!action.properties.checked)?.properties.icon || icon,
-    label: /* @__PURE__ */ import_react4.default.createElement(ActionLabel, {
-      action: actionGroup
-    }),
+    ...rootProps,
     ...testId && {
       "data-testid": testId
-    },
-    suppressNextTooltip,
-    caretDown: true
+    }
   })));
 };
-var ToolbarToggleGroupItem = ({ action }) => {
-  const { icon, iconOnly, disabled } = action.properties;
-  return /* @__PURE__ */ import_react5.default.createElement(import_react_ui5.Toolbar.ToggleGroupIconItem, {
-    key: action.id,
-    value: action.id,
-    icon,
-    iconOnly,
-    disabled,
-    label: /* @__PURE__ */ import_react5.default.createElement(ActionLabel, {
-      action
-    })
-  });
-};
-var ToolbarToggleGroup = ({ actionGroup, graph }) => {
-  const menuActions = (0, import_react5.useMemo)(() => 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__ */ import_react5.default.createElement(import_react_ui5.Toolbar.ToggleGroup, {
-      type: selectCardinality,
-      value
-    }, menuActions.map((action) => /* @__PURE__ */ import_react5.default.createElement(ToolbarToggleGroupItem, {
-      key: action.id,
-      action
-    })))
-  );
-};
-var ToolbarSeparatorType = "@dxos/react-ui-toolbar/separator";
-var isSeparator = (node) => node.type === ToolbarSeparatorType;
-var isMenu = (node) => node.type === import_app_graph.ACTION_GROUP_TYPE;
-var ToolbarItem = ({ iconSize, action, onAction }) => {
-  const handleClick = (0, import_react3.useCallback)(() => {
+var ToggleGroupItem = ({ action, __menuScope }) => {
+  const { iconSize, onAction } = useMenu("ToggleGroupItem", __menuScope);
+  const { icon, iconOnly = true, disabled, testId, hidden, classNames } = action.properties;
+  const handleClick = (0, import_react4.useCallback)(() => {
     onAction?.(action);
   }, [
     action,
     onAction
   ]);
-  const { icon, iconOnly = true, disabled, testId } = action.properties;
-  return /* @__PURE__ */ import_react3.default.createElement(import_react_ui3.Toolbar.IconButton, {
-    key: action.id,
-    iconOnly,
-    variant: "ghost",
+  const Root = icon ? import_react_ui3.Toolbar.ToggleGroupIconItem : import_react_ui3.Toolbar.ToggleGroupItem;
+  const rootProps = icon ? {
     icon,
     size: iconSize,
-    label: /* @__PURE__ */ import_react3.default.createElement(ActionLabel, {
+    iconOnly,
+    label: /* @__PURE__ */ import_react4.default.createElement(ActionLabel, {
+      action
+    })
+  } : {
+    children: /* @__PURE__ */ import_react4.default.createElement(ActionLabel, {
       action
-    }),
+    })
+  };
+  return hidden ? null : /* @__PURE__ */ import_react4.default.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__ */ import_react3.default.createElement(import_react_ui3.Toolbar.Root, props, items?.map((item, i) => isSeparator(item) ? /* @__PURE__ */ import_react3.default.createElement(import_react_ui3.Toolbar.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__ */ import_react4.default.createElement(
+      import_react_ui3.Toolbar.ToggleGroup,
+      {
+        type: selectCardinality,
+        value
+      },
+      // TODO(thure): Handle other menu item types.
+      items.map((action) => /* @__PURE__ */ import_react4.default.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 } = (0, import_react_ui_attention.useAttention)(attendableId);
+  return /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.Toolbar.Root, {
+    ...props,
+    classNames: [
+      "p-0 pointer-fine:p-1 attention-surface",
+      !hasAttention && "opacity-20",
+      classNames
+    ]
+  }, items?.map((item, i) => isSeparator(item) ? /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.Toolbar.Separator, {
     key: i,
     variant: item.properties.variant
-  }) : isMenu(item) ? item.properties.variant === "dropdownMenu" ? /* @__PURE__ */ import_react3.default.createElement(ToolbarDropdownMenu, {
-    key: item.id,
-    actionGroup: item,
-    onAction,
-    iconSize,
-    graph
-  }) : /* @__PURE__ */ import_react3.default.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__ */ import_react4.default.createElement(DropdownMenuToolbarItem, {
+      key: item.id,
+      group: item
+    })
+  ) : (
+    // TODO(thure): Figure out type narrowing that doesn’t require so much use of `as`.
+    /* @__PURE__ */ import_react4.default.createElement(ToggleGroupToolbarItem, {
+      key: item.id,
+      group: item
+    })
+  ) : (
+    // TODO(thure): Figure out type narrowing that doesn’t require so much use of `as`.
+    /* @__PURE__ */ import_react4.default.createElement(ActionToolbarItem, {
+      key: item.id,
+      action: item
+    })
+  )));
+};
+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] = (0, import_react5.useState)(new import_app_graph3.Graph({
+    nodes: initialMenuGraphProps.nodes,
+    edges: edgesArrayToRecord(initialMenuGraphProps.edges)
+  }));
+  (0, import_signals_react.useSignalEffect)(() => {
+    const menuGraphProps = actionCreator();
+    graph._addNodes(menuGraphProps.nodes);
+    graph._addEdges(menuGraphProps.edges);
+  });
+  const resolveGroupItems = (0, import_react5.useCallback)((sourceNode = graph.root) => {
+    if (graph) {
+      return graph.nodes(sourceNode, {
+        filter: (n) => true
+      }) || null;
+    } else {
+      return null;
+    }
+  }, [
     graph
-  }) : /* @__PURE__ */ import_react3.default.createElement(ToolbarItem, {
-    key: item.id,
-    action: item,
-    onAction,
-    iconSize
-  })));
+  ]);
+  return {
+    resolveGroupItems
+  };
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   DropdownMenu,
-  Toolbar,
-  ToolbarSeparatorType,
-  isMenu,
-  isSeparator
+  MenuProvider,
+  MenuSeparatorType,
+  ToolbarMenu,
+  createGapSeparator,
+  createLineSeparator,
+  createMenuAction,
+  createMenuItemGroup,
+  createMenuScope,
+  isMenuGroup,
+  isSeparator,
+  menuContextDefaults,
+  useMenu,
+  useMenuActions,
+  useMenuItems
 });
 //# sourceMappingURL=index.cjs.map