@dxos/react-ui-menu 0.8.4-main.69d29f4 → 0.8.4-main.6fa680abb7

package/src/components/ToolbarMenu.tsx

@@ -6,7 +6,7 @@ import React, { Fragment, useCallback } from 'react';
 
 import { Icon, Toolbar as NaturalToolbar, type ToolbarRootProps, useTranslation } from '@dxos/react-ui';
 import { useAttention } from '@dxos/react-ui-attention';
-import { mx, textBlockWidth, toolbarInactive, toolbarLayout } from '@dxos/ui-theme';
+import { mx, textBlockWidth, toolbarLayout } from '@dxos/ui-theme';
 import { type MenuActionProperties } from '@dxos/ui-types';
 
 import { translationKey } from '../translations';
@@ -23,7 +23,7 @@ import { executeMenuAction } from '../util';
 
 import { ActionLabel, actionLabel } from './ActionLabel';
 import { DropdownMenu } from './DropdownMenu';
-import { type MenuScopedProps, useMenu, useMenuItems } from './MenuContext';
+import { type MenuScopedProps, useMenuItems, useMenuScoped } from './Menu';
 
 export type ToolbarMenuDropdownMenuActionGroup = Omit<MenuActionProperties, 'variant' | 'icon'> & {
   variant: 'dropdownMenu';
@@ -54,10 +54,10 @@ export type ToolbarMenuActionProps = {
 };
 
 const ActionToolbarItem = ({ action, __menuScope }: MenuScopedProps<{ action: MenuAction }>) => {
-  const { iconSize, onAction } = useMenu('ActionToolbarItem', __menuScope);
+  const { iconSize, onAction } = useMenuScoped('ActionToolbarItem', __menuScope);
   const { t } = useTranslation(translationKey);
 
-  const { icon, iconOnly = true, disabled, testId, hidden, classNames } = action.properties;
+  const { icon, iconOnly = true, disabled, testId, hidden, classNames, variant } = action.properties;
   const Root = icon ? NaturalToolbar.IconButton : NaturalToolbar.Button;
   const rootProps = icon
     ? { icon, size: iconSize, iconOnly, label: actionLabel(action, t) }
@@ -76,7 +76,7 @@ const ActionToolbarItem = ({ action, __menuScope }: MenuScopedProps<{ action: Me
       key={action.id}
       disabled={disabled}
       onClick={handleClick}
-      variant='ghost'
+      variant={variant ?? 'ghost'}
       {...(testId && { 'data-testid': testId })}
       {...(rootProps as any)}
       classNames={classNames}
@@ -91,7 +91,7 @@ const DropdownMenuToolbarItem = ({
 }: MenuScopedProps<ToolbarMenuActionGroupProps>) => {
   const { iconOnly, disabled, testId } = group.properties;
   const { t } = useTranslation(translationKey);
-  const { iconSize } = useMenu('DropdownMenuToolbarItem', __menuScope);
+  const { iconSize } = useMenuScoped('DropdownMenuToolbarItem', __menuScope);
   const items = useMenuItems(group, propsItems, 'DropdownMenuToolbarItem', __menuScope);
   const activeItem = items?.find((item) => !!(item as MenuAction).properties.checked);
   const icon =
@@ -113,7 +113,7 @@ const DropdownMenuToolbarItem = ({
         children: (
           <>
             <ActionLabel action={labelAction} />
-            <Icon size={3} icon='ph--caret-down--bold' classNames='mis-1' />
+            <Icon size={3} icon='ph--caret-down--bold' classNames='ms-1' />
           </>
         ),
       };
@@ -128,7 +128,7 @@ const DropdownMenuToolbarItem = ({
 };
 
 const ToggleGroupItem = ({ group, action, __menuScope }: MenuScopedProps<ToolbarMenuActionProps>) => {
-  const { iconSize, onAction } = useMenu('ToggleGroupItem', __menuScope);
+  const { iconSize, onAction } = useMenuScoped('ToggleGroupItem', __menuScope);
   const { t } = useTranslation(translationKey);
   const { icon, iconOnly = true, disabled, testId, hidden, classNames } = action.properties;
   const handleClick = useCallback(() => {
@@ -187,17 +187,18 @@ export const ToolbarMenu = ({
   ...props
 }: MenuScopedProps<ToolbarMenuProps>) => {
   const items = useMenuItems(undefined, undefined, 'ToolbarMenu', __menuScope);
-  const { attendableId } = useMenu('ToolbarMenu', __menuScope);
+  const { attendableId, alwaysActive } = useMenuScoped('ToolbarMenu', __menuScope);
   const { hasAttention } = useAttention(attendableId);
   const InnerRoot = textBlockWidthProp ? 'div' : Fragment;
   const innerRootProps = textBlockWidthProp
-    ? { role: 'none', className: mx(textBlockWidth, toolbarLayout, 'bs-full') }
+    ? { role: 'none', className: mx(textBlockWidth, toolbarLayout, 'h-full') }
     : {};
 
   return (
     <NaturalToolbar.Root
       {...props}
-      classNames={[attendableId && !hasAttention && toolbarInactive, classNames]}
+      classNames={[attendableId, classNames]}
+      disabled={!alwaysActive && !hasAttention}
       layoutManaged={textBlockWidthProp}
     >
       <InnerRoot {...innerRootProps}>

package/src/components/index.ts

@@ -2,6 +2,4 @@
 // Copyright 2025 DXOS.org
 //
 
-export * from './DropdownMenu';
-export * from './ToolbarMenu';
-export * from './MenuContext';
+export * from './Menu';

package/src/hooks/useMenuActions.ts

@@ -7,34 +7,7 @@ import { useCallback, useContext, useRef } from 'react';
 
 import { Graph, Node } from '@dxos/app-graph';
 
-import { type MenuItem, type MenuItemGroup } from '../types';
-
-const edgesArrayToRecord = (edges: Graph.Edge[]): Record<string, Graph.Edges> => {
-  return Object.fromEntries(
-    Object.entries(
-      edges.reduce((acc: Record<string, { inbound: string[]; outbound: string[] }>, { 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;
-      }, {}),
-    ),
-  );
-};
+import { type MenuItem, type MenuItemGroup, type MenuItemsAccessor } from '../types';
 
 export type ActionGraphNodes = Node.NodeArg<any>[];
 export type ActionGraphEdges = Graph.Edge[];
@@ -44,39 +17,31 @@ export type ActionGraphProps = {
 };
 
 export type MenuActions = {
-  useGroupItems: (sourceNode?: MenuItemGroup) => MenuItem[];
+  items: MenuItemsAccessor;
 };
 
 export const useMenuActions = (props: Atom.Atom<ActionGraphProps>): MenuActions => {
   const registry = useContext(RegistryContext);
   const menuGraphProps = useAtomValue(props);
 
-  // Create graph once, then update it when props change.
-  const graphRef = useRef<Graph.WritableGraph | null>(null);
-  if (!graphRef.current) {
-    graphRef.current = Graph.make({
-      registry,
-      nodes: menuGraphProps.nodes as Node.Node[],
-      edges: edgesArrayToRecord(menuGraphProps.edges),
-    });
+  // Create a new graph whenever props change to preserve correct order.
+  // (Graph.addEdges appends rather than replaces, which breaks ordering on updates.)
+  const graphRef = useRef<{ graph: Graph.WritableGraph; props: ActionGraphProps } | null>(null);
+  if (!graphRef.current || graphRef.current.props !== menuGraphProps) {
+    const newGraph = Graph.make({ registry });
+    newGraph.pipe(Graph.addNodes(menuGraphProps.nodes as Node.NodeArg<any>[]), Graph.addEdges(menuGraphProps.edges));
+    graphRef.current = { graph: newGraph, props: menuGraphProps };
   }
-  const graph = graphRef.current;
 
-  // Update graph nodes synchronously when props change (before render completes).
-  // Using a ref to track the previous value to detect changes.
-  const prevPropsRef = useRef(menuGraphProps);
-  if (prevPropsRef.current !== menuGraphProps) {
-    prevPropsRef.current = menuGraphProps;
-    graph.pipe(Graph.addNodes(menuGraphProps.nodes), Graph.addEdges(menuGraphProps.edges));
-  }
+  const graph = graphRef.current.graph;
 
-  const useGroupItems = useCallback(
-    (sourceNode?: MenuItemGroup) => {
-      const items = useAtomValue(graph.connections(sourceNode?.id || Node.RootId)) as MenuItem[];
-      return items;
+  const items: MenuItemsAccessor = useCallback(
+    (group?: MenuItemGroup) => {
+      // TODO(wittjosiah): Migrate to using action relation instead of child.
+      return graph.connections(group?.id || Node.RootId, 'child') as Atom.Atom<MenuItem[] | null>;
     },
     [graph],
   );
 
-  return { useGroupItems };
+  return { items };
 };

package/src/testing/generator.ts

@@ -9,7 +9,7 @@ import { Graph, Node } from '@dxos/app-graph';
 import { faker } from '@dxos/random';
 
 import { type ActionGraphProps } from '../hooks/useMenuActions';
-import { type MenuItem, type MenuItemGroup } from '../types';
+import { type MenuItem, type MenuItemGroup, type MenuItemsAccessor } from '../types';
 
 export type CreateActionsProps = Partial<{
   type?: typeof Node.ActionType | typeof Node.ActionGroupType;
@@ -61,8 +61,8 @@ const buildNestedActions = (): ActionGraphProps => {
     const actions = createActions();
     result.nodes.push(group, ...actions);
     result.edges.push(
-      { source: 'root', target: group.id },
-      ...actions.map((action) => ({ source: group.id, target: action.id })),
+      { source: 'root', target: group.id, relation: 'child' },
+      ...actions.map((action) => ({ source: group.id, target: action.id, relation: 'child' })),
     );
   });
   return result;
@@ -78,15 +78,15 @@ export const createNestedActionsResolver = (groupParams?: CreateActionsProps, pa
     graph.pipe(
       Graph.addNodes([group as Node.NodeArg<any>, ...(actions as Node.NodeArg<any>[])]),
       Graph.addEdges([
-        { source: 'root', target: group.id },
-        ...actions.map((action) => ({ source: group.id, target: action.id })),
+        { source: 'root', target: group.id, relation: 'child' },
+        ...actions.map((action) => ({ source: group.id, target: action.id, relation: 'child' })),
       ]),
-      Graph.expand(group.id),
+      Graph.expand(group.id, 'child'),
     );
   });
-  const resolveGroupItems = (groupNode?: MenuItemGroup) =>
-    (Graph.getActions(graph, groupNode?.id ?? Node.RootId) || null) as MenuItem[] | null;
-  return { resolveGroupItems };
+  const items: MenuItemsAccessor = (group?: MenuItemGroup) =>
+    graph.connections(group?.id ?? Node.RootId, 'child') as Atom.Atom<MenuItem[] | null>;
+  return { items };
 };
 
 /**

package/src/types.ts

@@ -2,6 +2,8 @@
 // Copyright 2025 DXOS.org
 //
 
+import { type Atom } from '@effect-atom/atom-react';
+
 import { Node } from '@dxos/app-graph';
 import { type IconButtonProps, type ToolbarSeparatorProps } from '@dxos/react-ui';
 import { type MenuActionProperties } from '@dxos/ui-types';
@@ -25,14 +27,37 @@ export const isMenuGroup = (node: Node.Node): node is MenuItemGroup => node.type
 
 export type MenuItem = MenuSeparator | MenuAction | MenuItemGroup;
 
-export type MenuItemsResolver = (group?: MenuItemGroup) => MenuItem[] | null;
+/** Atom-family-style accessor: returns an atom of items for a given group (or root when undefined). */
+export type MenuItemsAccessor = (group?: MenuItemGroup) => Atom.Atom<MenuItem[] | null>;
 
 export type ActionExecutor = (action: MenuAction, params: Node.InvokeProps) => void;
 
+export type MenuItemsMode = 'additive' | 'replacement';
+
+export type AddMenuItemsProps = {
+  id: string;
+  mode: MenuItemsMode;
+  priority?: number;
+  items: MenuItem[];
+  groupFilter?: (group?: MenuItemGroup) => boolean;
+};
+
+export type MenuItems = Omit<AddMenuItemsProps, 'priority'> & { priority: number };
+export type MenuItemsMap = Map<string, MenuItems>;
+
 export type MenuContextValue = {
-  useGroupItems: MenuItemsResolver;
+  /** Atom-family accessor for base menu items, keyed by group (similar to Tree model). */
+  items: MenuItemsAccessor;
   iconSize: IconButtonProps['size'];
   attendableId?: string;
+  /** If true, the menu is always active regardless of attention state. */
+  alwaysActive?: boolean;
+  /** Atom holding the current set of imperatively added menu items. */
+  menuItemsAtom: Atom.Atom<MenuItemsMap>;
+  /** Imperatively add menu items to the nearest MenuProvider. */
+  addMenuItems: (props: AddMenuItemsProps) => void;
+  /** Remove previously added menu items by id. */
+  removeMenuItems: (id: string) => void;
   /** Optional action executor. If provided, will be used instead of default execution. */
   onAction?: ActionExecutor;
 };

package/src/util.ts

@@ -72,6 +72,7 @@ export const createGapSeparator = (id: string = 'gap', source: string = 'root')
     {
       source,
       target: id,
+      relation: 'child' as const,
     },
   ],
 });
@@ -85,5 +86,5 @@ export const createLineSeparator = (id: string = 'line', source: string = 'root'
       data: undefined as never,
     } satisfies MenuSeparator,
   ],
-  edges: [{ source, target: id }],
+  edges: [{ source, target: id, relation: 'child' as const }],
 });

package/dist/types/src/components/MenuContext.d.ts

@@ -1,15 +0,0 @@
-import { type Scope } from '@radix-ui/react-context';
-import React, { type PropsWithChildren } from 'react';
-import { type MenuContextValue, type MenuItem, type MenuItemGroup } from '../types';
-export type MenuScopedProps<P> = P & {
-    __menuScope?: Scope;
-};
-declare const createMenuScope: import("@radix-ui/react-context").CreateScope;
-declare const useMenu: (consumerName: string, scope: Scope<MenuContextValue | undefined>) => MenuContextValue;
-export declare const menuContextDefaults: MenuContextValue;
-type MenuProviderProps = PropsWithChildren<Partial<MenuContextValue>>;
-declare const MenuProvider: ({ children, useGroupItems, iconSize, attendableId, onAction, }: MenuProviderProps) => React.JSX.Element;
-export declare const useMenuItems: (group?: MenuItemGroup, propsItems?: MenuItem[], consumerName?: string, __menuScope?: Scope) => MenuItem[] | undefined;
-export { useMenu, createMenuScope, MenuProvider };
-export type { MenuProviderProps };
-//# sourceMappingURL=MenuContext.d.ts.map

package/dist/types/src/components/MenuContext.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"MenuContext.d.ts","sourceRoot":"","sources":["../../../../src/components/MenuContext.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,KAAK,EAAsB,MAAM,yBAAyB,CAAC;AACzE,OAAO,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAW,MAAM,OAAO,CAAC;AAE/D,OAAO,EAAE,KAAK,gBAAgB,EAAE,KAAK,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,UAAU,CAAC;AAEpF,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI,CAAC,GAAG;IAAE,WAAW,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAI7D,QAAA,MAA0B,eAAe,+CAAqC,CAAC;AAE/E,QAAA,MAA4B,OAAO,wFAAkD,CAAC;AAEtF,eAAO,MAAM,mBAAmB,EAAE,gBAIjC,CAAC;AAIF,KAAK,iBAAiB,GAAG,iBAAiB,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,CAAC;AAEtE,QAAA,MAAM,YAAY,GAAI,gEAMnB,iBAAiB,sBAanB,CAAC;AAEF,eAAO,MAAM,YAAY,GACvB,QAAQ,aAAa,EACrB,aAAa,QAAQ,EAAE,EACvB,eAAc,MAA8B,EAC5C,cAAc,KAAK,2BAKpB,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,CAAC;AAElD,YAAY,EAAE,iBAAiB,EAAE,CAAC"}

package/src/components/MenuContext.tsx

@@ -1,62 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { type Scope, createContextScope } from '@radix-ui/react-context';
-import React, { type PropsWithChildren, useMemo } from 'react';
-
-import { type MenuContextValue, type MenuItem, type MenuItemGroup } from '../types';
-
-export type MenuScopedProps<P> = P & { __menuScope?: Scope };
-
-const MENU_NAME = 'Menu';
-
-const [createMenuContext, createMenuScope] = createContextScope(MENU_NAME, []);
-
-const [MenuContextProvider, useMenu] = createMenuContext<MenuContextValue>(MENU_NAME);
-
-export const menuContextDefaults: MenuContextValue = {
-  iconSize: 5,
-  useGroupItems: () => null,
-  onAction: undefined,
-};
-
-const useMenuScope = createMenuScope();
-
-type MenuProviderProps = PropsWithChildren<Partial<MenuContextValue>>;
-
-const MenuProvider = ({
-  children,
-  useGroupItems = menuContextDefaults.useGroupItems,
-  iconSize = menuContextDefaults.iconSize,
-  attendableId,
-  onAction,
-}: MenuProviderProps) => {
-  const { scope } = useMenuScope(undefined);
-  return (
-    <MenuContextProvider
-      useGroupItems={useGroupItems}
-      iconSize={iconSize}
-      attendableId={attendableId}
-      onAction={onAction}
-      scope={scope}
-    >
-      {children}
-    </MenuContextProvider>
-  );
-};
-
-export const useMenuItems = (
-  group?: MenuItemGroup,
-  propsItems?: MenuItem[],
-  consumerName: string = 'useMenuItemConsumer',
-  __menuScope?: Scope,
-) => {
-  const { useGroupItems } = useMenu(consumerName, __menuScope);
-  const groupItems = useGroupItems(group);
-  return useMemo(() => propsItems ?? groupItems ?? undefined, [propsItems, groupItems]);
-};
-
-export { useMenu, createMenuScope, MenuProvider };
-
-export type { MenuProviderProps };