@dxos/react-ui-menu 0.8.4-main.21d9917 → 0.8.4-main.2244d791bb

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-menu",
-  "version": "0.8.4-main.21d9917",
+  "version": "0.8.4-main.2244d791bb",
   "description": "Components for facilitating reactive and consistent menus.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -31,36 +31,36 @@
   "dependencies": {
     "@radix-ui/react-context": "1.1.1",
     "@radix-ui/react-use-controllable-state": "1.1.0",
-    "@dxos/app-graph": "0.8.4-main.21d9917",
-    "@dxos/effect": "0.8.4-main.21d9917",
-    "@dxos/invariant": "0.8.4-main.21d9917",
-    "@dxos/keyboard": "0.8.4-main.21d9917",
-    "@dxos/util": "0.8.4-main.21d9917",
-    "@dxos/react-ui-attention": "0.8.4-main.21d9917",
-    "@dxos/ui-types": "0.8.4-main.21d9917"
+    "@dxos/app-graph": "0.8.4-main.2244d791bb",
+    "@dxos/effect": "0.8.4-main.2244d791bb",
+    "@dxos/invariant": "0.8.4-main.2244d791bb",
+    "@dxos/keyboard": "0.8.4-main.2244d791bb",
+    "@dxos/ui-types": "0.8.4-main.2244d791bb",
+    "@dxos/util": "0.8.4-main.2244d791bb",
+    "@dxos/react-ui-attention": "0.8.4-main.2244d791bb"
   },
   "devDependencies": {
-    "@effect-atom/atom-react": "^0.4.6",
-    "@effect/platform": "0.93.6",
+    "@effect-atom/atom-react": "^0.5.0",
+    "@effect/platform": "0.94.4",
     "@types/react": "~19.2.7",
     "@types/react-dom": "~19.2.3",
-    "effect": "3.19.11",
+    "effect": "3.19.16",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
     "vite": "7.1.9",
-    "@dxos/random": "0.8.4-main.21d9917",
-    "@dxos/react-ui": "0.8.4-main.21d9917",
-    "@dxos/storybook-utils": "0.8.4-main.21d9917",
-    "@dxos/ui-theme": "0.8.4-main.21d9917"
+    "@dxos/random": "0.8.4-main.2244d791bb",
+    "@dxos/storybook-utils": "0.8.4-main.2244d791bb",
+    "@dxos/react-ui": "0.8.4-main.2244d791bb",
+    "@dxos/ui-theme": "0.8.4-main.2244d791bb"
   },
   "peerDependencies": {
-    "@effect-atom/atom-react": "^0.4.6",
-    "@effect/platform": "0.93.6",
-    "effect": "3.19.11",
+    "@effect-atom/atom-react": "^0.5.0",
+    "@effect/platform": "0.94.4",
+    "effect": "3.19.16",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/ui-theme": "0.8.4-main.21d9917",
-    "@dxos/react-ui": "0.8.4-main.21d9917"
+    "@dxos/react-ui": "0.8.4-main.2244d791bb",
+    "@dxos/ui-theme": "0.8.4-main.2244d791bb"
   },
   "publishConfig": {
     "access": "public"

package/src/components/MenuContext.tsx

@@ -30,6 +30,7 @@ const MenuProvider = ({
   useGroupItems = menuContextDefaults.useGroupItems,
   iconSize = menuContextDefaults.iconSize,
   attendableId,
+  alwaysActive,
   onAction,
 }: MenuProviderProps) => {
   const { scope } = useMenuScope(undefined);
@@ -38,6 +39,7 @@ const MenuProvider = ({
       useGroupItems={useGroupItems}
       iconSize={iconSize}
       attendableId={attendableId}
+      alwaysActive={alwaysActive}
       onAction={onAction}
       scope={scope}
     >

package/src/components/ToolbarMenu.stories.tsx

@@ -21,7 +21,7 @@ faker.seed(1234);
 const meta = {
   title: 'ui/react-ui-menu/ToolbarMenu',
   component: ToolbarMenu,
-  decorators: [withTheme, withRegistry],
+  decorators: [withTheme(), withRegistry],
   parameters: {
     translations,
   },

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';
@@ -187,7 +187,7 @@ export const ToolbarMenu = ({
   ...props
 }: MenuScopedProps<ToolbarMenuProps>) => {
   const items = useMenuItems(undefined, undefined, 'ToolbarMenu', __menuScope);
-  const { attendableId } = useMenu('ToolbarMenu', __menuScope);
+  const { attendableId, alwaysActive } = useMenu('ToolbarMenu', __menuScope);
   const { hasAttention } = useAttention(attendableId);
   const InnerRoot = textBlockWidthProp ? 'div' : Fragment;
   const innerRootProps = textBlockWidthProp
@@ -197,7 +197,8 @@ export const ToolbarMenu = ({
   return (
     <NaturalToolbar.Root
       {...props}
-      classNames={[attendableId && !hasAttention && toolbarInactive, classNames]}
+      classNames={[attendableId, classNames]}
+      disabled={!alwaysActive && !hasAttention}
       layoutManaged={textBlockWidthProp}
     >
       <InnerRoot {...innerRootProps}>

package/src/hooks/useMenuActions.ts

@@ -9,33 +9,6 @@ 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;
-      }, {}),
-    ),
-  );
-};
-
 export type ActionGraphNodes = Node.NodeArg<any>[];
 export type ActionGraphEdges = Graph.Edge[];
 export type ActionGraphProps = {
@@ -51,24 +24,16 @@ 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) => {

package/src/types.ts

@@ -33,6 +33,8 @@ export type MenuContextValue = {
   useGroupItems: MenuItemsResolver;
   iconSize: IconButtonProps['size'];
   attendableId?: string;
+  /** If true, the menu is always active regardless of attention state. */
+  alwaysActive?: boolean;
   /** Optional action executor. If provided, will be used instead of default execution. */
   onAction?: ActionExecutor;
 };