@dxos/react-ui-menu 0.8.4-main.c85a9c8dae → 0.8.4-main.d05539e30a

package/dist/lib/node-esm/index.mjs

@@ -4,7 +4,7 @@ import { createRequire } from 'node:module';const require = createRequire(import
 import { Atom, RegistryContext, useAtomValue } from "@effect-atom/atom-react";
 import { createContextScope } from "@radix-ui/react-context";
 import { useControllableState as useControllableState2 } from "@radix-ui/react-use-controllable-state";
-import React4, { useCallback as useCallback3, useContext, useMemo } from "react";
+import React4, { createContext, useCallback as useCallback3, useContext, useMemo } from "react";
 import { log } from "@dxos/log";
 import { Icon as Icon3, DropdownMenu as NaturalDropdownMenu2 } from "@dxos/react-ui";
 
@@ -79,18 +79,7 @@ import React from "react";
 import { keySymbols } from "@dxos/keyboard";
 import { toLocalizedString, useTranslation } from "@dxos/react-ui";
 import { mx } from "@dxos/ui-theme";
-
-// src/translations.ts
-var translationKey = "@dxos/react-ui-menu";
-var translations = [
-  {
-    "en-US": {
-      [translationKey]: {}
-    }
-  }
-];
-
-// src/components/ActionLabel.tsx
+import { translationKey } from "#translations";
 var ActionLabel = ({ action }) => {
   const { t } = useTranslation(translationKey);
   const shortcut = getShortcut(action);
@@ -106,10 +95,11 @@ var actionLabel = (action, t) => {
 };
 
 // src/components/ToolbarMenu.tsx
-import React3, { Fragment, useCallback as useCallback2 } from "react";
+import React3, { 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";
-import { mx as mx2, textBlockWidth, toolbarLayout } from "@dxos/ui-theme";
+import { composable, composableProps } from "@dxos/ui-theme";
+import { translationKey as translationKey2 } from "#translations";
 
 // src/types.ts
 import { Node as Node2 } from "@dxos/app-graph";
@@ -189,21 +179,11 @@ var DropdownMenu = {
 };
 
 // src/components/ToolbarMenu.tsx
-var ActionToolbarItem = ({ action, __menuScope }) => {
+var ActionToolbarItem = ({ __menuScope, action }) => {
   const { iconSize, onAction } = useMenuScoped("ActionToolbarItem", __menuScope);
-  const { t } = useTranslation2(translationKey);
-  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__ */ React3.createElement(ActionLabel, {
-      action
-    })
-  };
+  const { t } = useTranslation2(translationKey2);
+  const { icon, iconOnly = true, disabled, testId, hidden, classNames, iconClassNames } = action.properties;
+  const buttonVariant = action.properties.variant === "primary" ? "primary" : "ghost";
   const handleClick = useCallback2(() => {
     if (onAction) {
       onAction(action, {});
@@ -214,32 +194,49 @@ var ActionToolbarItem = ({ action, __menuScope }) => {
     action,
     onAction
   ]);
-  return hidden ? null : /* @__PURE__ */ React3.createElement(Root, {
-    key: action.id,
+  const commonProps = {
+    variant: buttonVariant,
     disabled,
+    classNames,
     onClick: handleClick,
-    variant: "ghost",
     ...testId && {
       "data-testid": testId
-    },
-    ...rootProps,
-    classNames
-  });
+    }
+  };
+  if (hidden) {
+    return null;
+  }
+  return icon ? /* @__PURE__ */ React3.createElement(NaturalToolbar.IconButton, {
+    key: action.id,
+    ...commonProps,
+    icon,
+    size: iconSize,
+    iconOnly,
+    iconClassNames,
+    label: actionLabel(action, t)
+  }) : /* @__PURE__ */ React3.createElement(NaturalToolbar.Button, {
+    key: action.id,
+    ...commonProps
+  }, /* @__PURE__ */ React3.createElement(ActionLabel, {
+    action
+  }));
 };
-var DropdownMenuToolbarItem = ({ group, items: propsItems, __menuScope }) => {
+var DropdownMenuToolbarItem = ({ __menuScope, group, items: propsItems }) => {
   const { iconOnly, disabled, testId } = group.properties;
-  const { t } = useTranslation2(translationKey);
+  const { t } = useTranslation2(translationKey2);
   const { iconSize } = useMenuScoped("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 iconClassNames = group.properties.applyActive && activeItem?.properties.iconClassNames || group.properties.iconClassNames;
   const Root = icon ? NaturalToolbar.IconButton : NaturalToolbar.Button;
   const labelAction = group.properties.applyActive && activeItem ? activeItem : group;
   const rootProps = icon ? {
     icon,
     size: iconSize,
     iconOnly,
+    iconClassNames,
     label: actionLabel(labelAction, t),
     caretDown: true
   } : {
@@ -265,10 +262,10 @@ var DropdownMenuToolbarItem = ({ group, items: propsItems, __menuScope }) => {
     }
   })));
 };
-var ToggleGroupItem = ({ group, action, __menuScope }) => {
+var ToggleGroupItem = ({ __menuScope, group, action }) => {
   const { iconSize, onAction } = useMenuScoped("ToggleGroupItem", __menuScope);
-  const { t } = useTranslation2(translationKey);
-  const { icon, iconOnly = true, disabled, testId, hidden, classNames } = action.properties;
+  const { t } = useTranslation2(translationKey2);
+  const { icon, iconOnly = true, disabled, testId, hidden, classNames, iconClassNames } = action.properties;
   const handleClick = useCallback2(() => {
     if (onAction) {
       onAction(action, {
@@ -284,74 +281,64 @@ var ToggleGroupItem = ({ group, action, __menuScope }) => {
     group,
     onAction
   ]);
-  const Root = icon ? NaturalToolbar.ToggleGroupIconItem : NaturalToolbar.ToggleGroupItem;
-  const rootProps = icon ? {
-    icon,
-    size: iconSize,
-    iconOnly,
-    label: actionLabel(action, t)
-  } : {
-    children: /* @__PURE__ */ React3.createElement(ActionLabel, {
-      action
-    })
-  };
-  return hidden ? null : /* @__PURE__ */ React3.createElement(Root, {
-    key: action.id,
+  const commonProps = {
     value: action.id,
     disabled,
-    onClick: handleClick,
     variant: "ghost",
+    classNames,
+    onClick: handleClick,
     ...testId && {
       "data-testid": testId
-    },
-    ...rootProps,
-    classNames
-  });
+    }
+  };
+  return hidden ? null : icon ? /* @__PURE__ */ React3.createElement(NaturalToolbar.ToggleGroupIconItem, {
+    ...commonProps,
+    icon,
+    size: iconSize,
+    iconOnly,
+    iconClassNames,
+    label: actionLabel(action, t)
+  }) : /* @__PURE__ */ React3.createElement(NaturalToolbar.ToggleGroupItem, commonProps, /* @__PURE__ */ React3.createElement(ActionLabel, {
+    action
+  }));
 };
-var ToggleGroupToolbarItem = ({ group, items: propsItems, __menuScope }) => {
-  const items = useMenuItems(group, propsItems, "ToggleGroupToolbarItem", __menuScope);
-  const { selectCardinality, value } = group.properties;
-  return (
-    // TODO(thure): Fix.
-    // @ts-ignore
-    /* @__PURE__ */ React3.createElement(
-      NaturalToolbar.ToggleGroup,
-      {
-        type: selectCardinality,
-        value
-      },
-      // TODO(thure): Handle other menu item types.
-      items.map((action) => /* @__PURE__ */ React3.createElement(ToggleGroupItem, {
-        key: action.id,
-        group,
-        action
-      }))
-    )
-  );
+var ToggleGroupToolbarItem = ({ __menuScope, group, items: itemsProp }) => {
+  const items = useMenuItems(group, itemsProp, "ToggleGroupToolbarItem", __menuScope);
+  const { selectCardinality } = group.properties;
+  const children = items.map((action) => /* @__PURE__ */ React3.createElement(ToggleGroupItem, {
+    key: action.id,
+    group,
+    action
+  }));
+  if (selectCardinality === "multiple") {
+    return /* @__PURE__ */ React3.createElement(NaturalToolbar.ToggleGroup, {
+      type: "multiple",
+      value: group.properties.value
+    }, children);
+  } else {
+    return /* @__PURE__ */ React3.createElement(NaturalToolbar.ToggleGroup, {
+      type: "single",
+      value: group.properties.value
+    }, children);
+  }
 };
-var ToolbarMenu = ({ __menuScope, classNames, textBlockWidth: textBlockWidthProp, ...props }) => {
+var ToolbarMenu = composable(({ __menuScope, children, ...props }, forwardedRef) => {
   const items = useMenuItems(void 0, void 0, "ToolbarMenu", __menuScope);
   const { attendableId, alwaysActive } = useMenuScoped("ToolbarMenu", __menuScope);
   const { hasAttention } = useAttention(attendableId);
-  const InnerRoot = textBlockWidthProp ? "div" : Fragment;
-  const innerRootProps = textBlockWidthProp ? {
-    role: "none",
-    className: mx2(textBlockWidth, toolbarLayout, "h-full")
-  } : {};
   return /* @__PURE__ */ React3.createElement(NaturalToolbar.Root, {
-    ...props,
-    classNames: [
-      attendableId,
-      classNames
-    ],
+    ...composableProps(props, {
+      classNames: attendableId
+    }),
     disabled: !alwaysActive && !hasAttention,
-    layoutManaged: textBlockWidthProp
-  }, /* @__PURE__ */ React3.createElement(InnerRoot, innerRootProps, items?.map((item, i) => /* @__PURE__ */ React3.createElement(ToolbarMenuItem, {
-    key: item.id ?? i,
+    ref: forwardedRef
+  }, items?.map((item) => /* @__PURE__ */ React3.createElement(ToolbarMenuItem, {
+    key: item.id,
+    __menuScope,
     item
-  }))));
-};
-var ToolbarMenuItem = ({ item }) => {
+  })), children);
+});
+var ToolbarMenuItem = ({ __menuScope, item }) => {
   if (isSeparator(item)) {
     return /* @__PURE__ */ React3.createElement(NaturalToolbar.Separator, {
       variant: item.properties.variant
@@ -360,15 +347,18 @@ var ToolbarMenuItem = ({ item }) => {
   if (isMenuGroup(item)) {
     if (item.properties.variant === "dropdownMenu") {
       return /* @__PURE__ */ React3.createElement(DropdownMenuToolbarItem, {
+        __menuScope,
         group: item
       });
     } else {
       return /* @__PURE__ */ React3.createElement(ToggleGroupToolbarItem, {
+        __menuScope,
         group: item
       });
     }
   }
   return /* @__PURE__ */ React3.createElement(ActionToolbarItem, {
+    __menuScope,
     action: item
   });
 };
@@ -391,7 +381,7 @@ var menuContextDefaults = {
 };
 var [MenuContextProvider, useMenuScoped] = createMenuContext(MENU_NAME, menuContextDefaults);
 var useMenuScope = createMenuScope();
-var MenuDropdownContext = /* @__PURE__ */ React4.createContext({
+var MenuDropdownContext = /* @__PURE__ */ createContext({
   closeMenu: () => {
   }
 });
@@ -456,12 +446,7 @@ var resolveItems = (baseItems, group, entries) => {
       log.warn("multiple replacement entries found", {
         ids: replacements.map((r) => r.id).join(", "),
         using: replacements[0].id
-      }, {
-        F: __dxlog_file,
-        L: 152,
-        S: void 0,
-        C: (f, a) => f(...a)
-      });
+      }, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 94, S: void 0 });
     }
     return replacements[0].items;
   }
@@ -576,24 +561,22 @@ var Menu = {
 };
 
 // src/hooks/useMenuActions.ts
-import { RegistryContext as RegistryContext2, useAtomValue as useAtomValue2 } from "@effect-atom/atom-react";
-import { useCallback as useCallback4, useContext as useContext2, useRef } from "react";
+import { Atom as Atom2, RegistryContext as RegistryContext2, useAtomValue as useAtomValue2 } from "@effect-atom/atom-react";
+import { useCallback as useCallback4, useContext as useContext2, useMemo as useMemo2 } from "react";
 import { Graph, Node as Node3 } from "@dxos/app-graph";
 var useMenuActions = (props) => {
   const registry = useContext2(RegistryContext2);
   const menuGraphProps = useAtomValue2(props);
-  const graphRef = useRef(null);
-  if (!graphRef.current || graphRef.current.props !== menuGraphProps) {
+  const graph = useMemo2(() => {
     const newGraph = Graph.make({
       registry
     });
     newGraph.pipe(Graph.addNodes(menuGraphProps.nodes), Graph.addEdges(menuGraphProps.edges));
-    graphRef.current = {
-      graph: newGraph,
-      props: menuGraphProps
-    };
-  }
-  const graph = graphRef.current.graph;
+    return newGraph;
+  }, [
+    registry,
+    menuGraphProps
+  ]);
   const items = useCallback4((group) => {
     return graph.connections(group?.id || Node3.RootId, "child");
   }, [
@@ -603,6 +586,10 @@ var useMenuActions = (props) => {
     items
   };
 };
+var useMenuBuilder = (build, deps) => {
+  const atom = useMemo2(() => Atom2.make(build), deps);
+  return useMenuActions(atom);
+};
 
 // src/builder.ts
 import { invariant } from "@dxos/invariant";
@@ -616,24 +603,8 @@ var MenuBuilderImpl = class _MenuBuilderImpl {
     this._rootId = _rootId;
   }
   root(props) {
-    invariant(this._rootId === "root", "Root group can only be at the top level", {
-      F: __dxlog_file2,
-      L: 41,
-      S: this,
-      A: [
-        "this._rootId === 'root'",
-        "'Root group can only be at the top level'"
-      ]
-    });
-    invariant(this._data.nodes.find((node) => node.id === "root") === void 0, "Root group can only be created once", {
-      F: __dxlog_file2,
-      L: 42,
-      S: this,
-      A: [
-        "this._data.nodes.find((node) => node.id === 'root') === undefined",
-        "'Root group can only be created once'"
-      ]
-    });
+    invariant(this._rootId === "root", "Root group can only be at the top level", { "~LogMeta": "~LogMeta", F: __dxlog_file2, L: 16, S: this, A: ["this._rootId === 'root'", "'Root group can only be at the top level'"] });
+    invariant(this._data.nodes.find((node) => node.id === "root") === void 0, "Root group can only be created once", { "~LogMeta": "~LogMeta", F: __dxlog_file2, L: 17, S: this, A: ["this._data.nodes.find((node)=>node.id === 'root') === undefined", "'Root group can only be created once'"] });
     this._data.nodes.push(createMenuItemGroup("root", props));
     return this;
   }
@@ -659,13 +630,20 @@ var MenuBuilderImpl = class _MenuBuilderImpl {
     cb(new _MenuBuilderImpl(this._data, id));
     return this;
   }
-  subgraph(subgraph) {
-    this._data.nodes.push(...subgraph.nodes);
-    this._data.edges.push(...subgraph.edges);
+  subgraph(subgraphOrCb) {
+    if (!subgraphOrCb) {
+      return this;
+    }
+    if (typeof subgraphOrCb === "function") {
+      subgraphOrCb(new _MenuBuilderImpl(this._data, this._rootId));
+    } else {
+      this._data.nodes.push(...subgraphOrCb.nodes);
+      this._data.edges.push(...subgraphOrCb.edges);
+    }
     return this;
   }
-  separator(id, variant = "gap") {
-    id ??= `separator-${++this._separatorCount}`;
+  separator(variant = "gap") {
+    const id = `separator-${++this._separatorCount}`;
     this._data.nodes.push({
       id,
       type: MenuSeparatorType,
@@ -701,6 +679,7 @@ export {
   menuContextDefaults,
   useMenu,
   useMenuActions,
+  useMenuBuilder,
   useMenuItems,
   useMenuScoped
 };