@dxos/react-ui-menu 0.8.4-main.fd6878d → 0.8.4-main.fffef41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-menu",
-  "version": "0.8.4-main.fd6878d",
+  "version": "0.8.4-main.fffef41",
   "description": "Components for facilitating reactive and consistent menus.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -26,38 +26,38 @@
   ],
   "dependencies": {
     "@preact-signals/safe-react": "^0.9.0",
-    "@preact/signals-react": "^3.2.0",
+    "@preact/signals-react": "^3.3.0",
     "@radix-ui/react-context": "1.1.1",
     "@radix-ui/react-use-controllable-state": "1.1.0",
-    "@dxos/app-graph": "0.8.4-main.fd6878d",
-    "@dxos/invariant": "0.8.4-main.fd6878d",
-    "@dxos/keyboard": "0.8.4-main.fd6878d",
-    "@dxos/react-ui-attention": "0.8.4-main.fd6878d",
-    "@dxos/util": "0.8.4-main.fd6878d"
+    "@dxos/app-graph": "0.8.4-main.fffef41",
+    "@dxos/invariant": "0.8.4-main.fffef41",
+    "@dxos/react-ui-attention": "0.8.4-main.fffef41",
+    "@dxos/keyboard": "0.8.4-main.fffef41",
+    "@dxos/util": "0.8.4-main.fffef41"
   },
   "devDependencies": {
-    "@effect-rx/rx-react": "0.38.0",
-    "@effect/platform": "0.90.2",
-    "@types/react": "~18.2.0",
-    "@types/react-dom": "~18.2.0",
-    "effect": "3.17.7",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "vite": "5.4.7",
-    "@dxos/live-object": "0.8.4-main.fd6878d",
-    "@dxos/random": "0.8.4-main.fd6878d",
-    "@dxos/react-ui": "0.8.4-main.fd6878d",
-    "@dxos/react-ui-theme": "0.8.4-main.fd6878d",
-    "@dxos/storybook-utils": "0.8.4-main.fd6878d"
+    "@effect-atom/atom-react": "^0.3.4",
+    "@effect/platform": "0.92.1",
+    "@types/react": "~19.2.2",
+    "@types/react-dom": "~19.2.2",
+    "effect": "3.18.3",
+    "react": "~19.2.0",
+    "react-dom": "~19.2.0",
+    "vite": "7.1.9",
+    "@dxos/live-object": "0.8.4-main.fffef41",
+    "@dxos/random": "0.8.4-main.fffef41",
+    "@dxos/react-ui": "0.8.4-main.fffef41",
+    "@dxos/react-ui-theme": "0.8.4-main.fffef41",
+    "@dxos/storybook-utils": "0.8.4-main.fffef41"
   },
   "peerDependencies": {
-    "@effect-rx/rx-react": "^0.34.1",
+    "@effect-atom/atom-react": "^0.3.4",
     "@effect/platform": "^0.80.12",
     "effect": "^3.13.3",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.4-main.fd6878d",
-    "@dxos/react-ui-theme": "0.8.4-main.fd6878d"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@dxos/react-ui": "0.8.4-main.fffef41",
+    "@dxos/react-ui-theme": "0.8.4-main.fffef41"
   },
   "publishConfig": {
     "access": "public"

package/src/builder.ts

@@ -9,10 +9,10 @@ import type { MenuActionProperties, MenuItemGroupProperties } from './types';
 import { createMenuAction, createMenuItemGroup } from './util';
 
 export interface ActionGroupBuilder {
-  action<P extends {} = {}>(id: string, invoke: () => void, properties: P & MenuActionProperties): this;
+  action<P extends {} = {}>(id: string, props: P & MenuActionProperties, invoke: () => void): this;
   group<P extends {} = {}>(
     id: string,
-    properties: P & MenuItemGroupProperties,
+    props: P & MenuItemGroupProperties,
     cb: (builder: ActionGroupBuilder) => void,
   ): this;
 }
@@ -32,12 +32,6 @@ class MenuBuilderImpl implements MenuBuilder {
     private readonly _rootId: string,
   ) {}
 
-  action<P extends {} = {}>(id: string, invoke: () => void, properties: P & MenuActionProperties): this {
-    this._data.nodes.push(createMenuAction(id, invoke, properties));
-    this._data.edges.push({ source: this._rootId, target: id });
-    return this;
-  }
-
   root(props: MenuItemGroupProperties): this {
     invariant(this._rootId === 'root', 'Root group can only be at the top level');
     invariant(this._data.nodes.find((node) => node.id === 'root') === undefined, 'Root group can only be created once');
@@ -45,12 +39,18 @@ class MenuBuilderImpl implements MenuBuilder {
     return this;
   }
 
+  action<P extends {} = {}>(id: string, props: P & MenuActionProperties, invoke: () => void): this {
+    this._data.nodes.push(createMenuAction(id, invoke, props));
+    this._data.edges.push({ source: this._rootId, target: id });
+    return this;
+  }
+
   group<P extends {} = {}>(
     id: string,
-    properties: P & MenuItemGroupProperties,
+    props: P & MenuItemGroupProperties,
     cb: (builder: ActionGroupBuilder) => void,
   ): this {
-    this._data.nodes.push(createMenuItemGroup(id, properties));
+    this._data.nodes.push(createMenuItemGroup(id, props));
     this._data.edges.push({ source: this._rootId, target: id });
     cb(new MenuBuilderImpl(this._data, id));
     return this;

package/src/components/MenuContext.tsx

@@ -9,7 +9,7 @@ import { type MenuContextValue, type MenuItem, type MenuItemGroup } from '../typ
 
 export type MenuScopedProps<P> = P & { __menuScope?: Scope };
 
-const MENU_NAME = 'GraphMenu';
+const MENU_NAME = 'Menu';
 
 const [createMenuContext, createMenuScope] = createContextScope(MENU_NAME, []);
 
@@ -22,12 +22,14 @@ export const menuContextDefaults: MenuContextValue = {
 
 const useMenuScope = createMenuScope();
 
+type MenuProviderProps = PropsWithChildren<Partial<MenuContextValue>>;
+
 const MenuProvider = ({
   children,
   useGroupItems = menuContextDefaults.useGroupItems,
   iconSize = menuContextDefaults.iconSize,
   attendableId,
-}: PropsWithChildren<Partial<MenuContextValue>>) => {
+}: MenuProviderProps) => {
   const { scope } = useMenuScope(undefined);
   return (
     <MenuContextProvider useGroupItems={useGroupItems} iconSize={iconSize} attendableId={attendableId} scope={scope}>
@@ -48,3 +50,5 @@ export const useMenuItems = (
 };
 
 export { useMenu, createMenuScope, MenuProvider };
+
+export type { MenuProviderProps };

package/src/components/{Menus.stories.tsx → ToolbarMenu.stories.tsx}

@@ -2,12 +2,12 @@
 // Copyright 2024 DXOS.org
 //
 
-import '@dxos-theme';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useCallback, useMemo } from 'react';
 
 import { faker } from '@dxos/random';
 import { IconButton } from '@dxos/react-ui';
-import { withTheme } from '@dxos/storybook-utils';
+import { withTheme } from '@dxos/react-ui/testing';
 
 import { MenuProvider, DropdownMenu as NaturalDropdownMenu, ToolbarMenu } from '../components';
 import { useMenuActions } from '../hooks';
@@ -17,16 +17,20 @@ import { type MenuAction } from '../types';
 
 faker.seed(1234);
 
-export default {
-  title: 'ui/react-ui-menu/Menus',
+const meta = {
+  title: 'ui/react-ui-menu/ToolbarMenu',
   component: ToolbarMenu,
   decorators: [withTheme],
   parameters: {
     translations,
   },
-};
+} satisfies Meta<typeof ToolbarMenu>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
-export const DropdownMenu = {
+export const DropdownMenu: Story = {
   render: () => {
     const menuActions = useMemo(() => createActions() as MenuAction[], []);
     const resolveGroupItems = useCallback(() => menuActions, [menuActions]);
@@ -36,7 +40,7 @@ export const DropdownMenu = {
       <MenuProvider useGroupItems={resolveGroupItems}>
         <NaturalDropdownMenu.Root>
           <NaturalDropdownMenu.Trigger asChild>
-            <IconButton icon='ph--list-checks--regular' size={5} label='Options' />
+            <IconButton icon='ph--list-checks--regular' label='Options' />
           </NaturalDropdownMenu.Trigger>
         </NaturalDropdownMenu.Root>
       </MenuProvider>
@@ -44,7 +48,7 @@ export const DropdownMenu = {
   },
 };
 
-export const Toolbar = {
+export const Toolbar: Story = {
   render: () => {
     const nestedMenuActions = useMemo(() => createNestedActionsResolver(), []);
 
@@ -56,7 +60,7 @@ export const Toolbar = {
   },
 };
 
-export const UseMenuActionsToolbar = {
+export const UseMenuActionsToolbar: Story = {
   render: () => {
     const menu = useMenuActions(createNestedActions);
 

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, toolbarLayout } from '@dxos/react-ui-theme';
+import { mx, textBlockWidth, toolbarInactive, toolbarLayout } from '@dxos/react-ui-theme';
 
 import { translationKey } from '../translations';
 import {
@@ -55,12 +55,15 @@ export type ToolbarMenuActionProps = {
 const ActionToolbarItem = ({ action, __menuScope }: MenuScopedProps<{ action: MenuAction }>) => {
   const { iconSize } = useMenu('ActionToolbarItem', __menuScope);
   const { t } = useTranslation(translationKey);
-  const handleClick = useCallback(() => action.data?.(), [action]);
+
   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: <ActionLabel action={action} /> };
+
+  const handleClick = useCallback(() => action.data?.(), [action]);
+
   return hidden ? null : (
     <Root
       key={action.id}
@@ -101,6 +104,7 @@ const DropdownMenuToolbarItem = ({
           </>
         ),
       };
+
   return (
     <DropdownMenu.Root group={group} items={items}>
       <DropdownMenu.Trigger asChild>
@@ -119,6 +123,7 @@ const ToggleGroupItem = ({ group, action, __menuScope }: MenuScopedProps<Toolbar
   const rootProps = icon
     ? { icon, size: iconSize, iconOnly, label: actionLabel(action, t) }
     : { children: <ActionLabel action={action} /> };
+
   return hidden ? null : (
     <Root
       key={action.id}
@@ -140,8 +145,9 @@ const ToggleGroupToolbarItem = ({
 }: MenuScopedProps<ToolbarMenuActionGroupProps>) => {
   const items = useMenuItems(group, propsItems, 'ToggleGroupToolbarItem', __menuScope);
   const { selectCardinality, value } = group.properties;
+
   return (
-    // TODO(thure): The type here is difficult to manage, what do?
+    // TODO(thure): Fix.
     // @ts-ignore
     <NaturalToolbar.ToggleGroup type={selectCardinality} value={value}>
       {
@@ -154,41 +160,49 @@ const ToggleGroupToolbarItem = ({
   );
 };
 
+// TODO(burdon): Reconcile with react-ui/Toolbar (incl. textBlockWidth)
 export const ToolbarMenu = ({
   __menuScope,
   classNames,
-  textBlockWidth: wrapContents,
+  textBlockWidth: textBlockWidthParam,
   ...props
 }: MenuScopedProps<ToolbarMenuProps>) => {
   const items = useMenuItems(undefined, undefined, 'ToolbarMenu', __menuScope);
   const { attendableId } = useMenu('ToolbarMenu', __menuScope);
   const { hasAttention } = useAttention(attendableId);
-  const InnerRoot = wrapContents ? 'div' : Fragment;
-  const innerRootProps = wrapContents ? { role: 'none', className: mx(textBlockWidth, toolbarLayout, 'bs-full') } : {};
+  const InnerRoot = textBlockWidthParam ? 'div' : Fragment;
+  const innerRootProps = textBlockWidthParam
+    ? { role: 'none', className: mx(textBlockWidth, toolbarLayout, 'bs-full') }
+    : {};
+
   return (
     <NaturalToolbar.Root
       {...props}
-      layoutManaged={wrapContents}
-      classNames={[attendableId && !hasAttention && '*:opacity-20 !bg-transparent', classNames]}
+      classNames={[attendableId && !hasAttention && toolbarInactive, classNames]}
+      layoutManaged={textBlockWidthParam}
     >
       <InnerRoot {...innerRootProps}>
-        {items?.map((item: MenuItem, i: number) =>
-          isSeparator(item) ? (
-            <NaturalToolbar.Separator key={i} variant={item.properties.variant} />
-          ) : isMenuGroup(item) ? (
-            item.properties.variant === 'dropdownMenu' ? (
-              // TODO(thure): Figure out type narrowing that doesn’t require so much use of `as`.
-              <DropdownMenuToolbarItem key={item.id} group={item as MenuItemGroup<ToolbarMenuActionGroupProperties>} />
-            ) : (
-              // TODO(thure): Figure out type narrowing that doesn’t require so much use of `as`.
-              <ToggleGroupToolbarItem key={item.id} group={item as MenuItemGroup<ToolbarMenuActionGroupProperties>} />
-            )
-          ) : (
-            // TODO(thure): Figure out type narrowing that doesn’t require so much use of `as`.
-            <ActionToolbarItem key={item.id} action={item as MenuAction} />
-          ),
-        )}
+        {items?.map((item: MenuItem, i: number) => (
+          <ToolbarMenuItem key={item.id ?? i} item={item} />
+        ))}
       </InnerRoot>
     </NaturalToolbar.Root>
   );
 };
+
+const ToolbarMenuItem = ({ item }: { item: MenuItem }) => {
+  if (isSeparator(item)) {
+    return <NaturalToolbar.Separator variant={item.properties.variant} />;
+  }
+
+  // TODO(thure): Figure out type narrowing that doesn’t require so much use of `as`.
+  if (isMenuGroup(item)) {
+    if (item.properties.variant === 'dropdownMenu') {
+      return <DropdownMenuToolbarItem group={item as MenuItemGroup<ToolbarMenuActionGroupProperties>} />;
+    } else {
+      return <ToggleGroupToolbarItem group={item as MenuItemGroup<ToolbarMenuActionGroupProperties>} />;
+    }
+  }
+
+  return <ActionToolbarItem action={item as MenuAction} />;
+};

package/src/hooks/useMenuActions.ts

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import { RegistryContext, type Rx, useRxValue } from '@effect-rx/rx-react';
+import { type Atom, RegistryContext, useAtomValue } from '@effect-atom/atom-react';
 import { useCallback, useContext, useEffect, useState } from 'react';
 
 import { type Edge, type Edges, Graph, type Node, type NodeArg, ROOT_ID } from '@dxos/app-graph';
@@ -38,11 +38,18 @@ const edgesArrayToRecord = (edges: Edge[]): Record<string, Edges> => {
 
 export type ActionGraphNodes = NodeArg<any>[];
 export type ActionGraphEdges = Edge[];
-export type ActionGraphProps = { nodes: ActionGraphNodes; edges: ActionGraphEdges };
+export type ActionGraphProps = {
+  nodes: ActionGraphNodes;
+  edges: ActionGraphEdges;
+};
+
+export type MenuActions = {
+  useGroupItems: (sourceNode?: MenuItemGroup) => MenuItem[];
+};
 
-export const useMenuActions = (props: Rx.Rx<ActionGraphProps>) => {
+export const useMenuActions = (props: Atom.Atom<ActionGraphProps>): MenuActions => {
   const registry = useContext(RegistryContext);
-  const menuGraphProps = useRxValue(props);
+  const menuGraphProps = useAtomValue(props);
 
   const [graph] = useState(
     new Graph({
@@ -59,7 +66,7 @@ export const useMenuActions = (props: Rx.Rx<ActionGraphProps>) => {
 
   const useGroupItems = useCallback(
     (sourceNode?: MenuItemGroup) => {
-      const items = useRxValue(graph.connections(sourceNode?.id || ROOT_ID)) as MenuItem[];
+      const items = useAtomValue(graph.connections(sourceNode?.id || ROOT_ID)) as MenuItem[];
       return items;
     },
     [graph],

package/src/index.ts

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-export { rxFromSignal } from '@dxos/app-graph';
+export { atomFromSignal } from '@dxos/app-graph';
 
 export * from './components';
 export * from './hooks';

package/src/testing/generator.ts

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Rx } from '@effect-rx/rx-react';
+import { Atom } from '@effect-atom/atom-react';
 import { useEffect } from 'react';
 
 import {
@@ -66,7 +66,7 @@ export const createActions = (params?: CreateActionsParams) => {
   );
 };
 
-export const createNestedActions = Rx.make(() => {
+export const createNestedActions = Atom.make(() => {
   const result: ActionGraphProps = { edges: [], nodes: [] };
   const actionGroups = createActions({ type: ACTION_GROUP_TYPE });
   actionGroups.forEach((group) => {

package/src/util.ts

@@ -55,7 +55,12 @@ export const createGapSeparator = (id: string = 'gap', source: string = 'root')
       data: undefined as never,
     } satisfies MenuSeparator,
   ],
-  edges: [{ source, target: id }],
+  edges: [
+    {
+      source,
+      target: id,
+    },
+  ],
 });
 
 export const createLineSeparator = (id: string = 'line', source: string = 'root') => ({

package/dist/types/src/components/Menus.stories.d.ts

@@ -1,25 +0,0 @@
-import '@dxos-theme';
-import React from 'react';
-declare const _default: {
-    title: string;
-    component: ({ __menuScope, classNames, textBlockWidth: wrapContents, ...props }: import("./MenuContext").MenuScopedProps<import("./ToolbarMenu").ToolbarMenuProps>) => React.JSX.Element;
-    decorators: import("@storybook/react").Decorator[];
-    parameters: {
-        translations: [{
-            readonly 'en-US': {
-                readonly "react-ui-menu": {};
-            };
-        }];
-    };
-};
-export default _default;
-export declare const DropdownMenu: {
-    render: () => React.JSX.Element;
-};
-export declare const Toolbar: {
-    render: () => React.JSX.Element;
-};
-export declare const UseMenuActionsToolbar: {
-    render: () => React.JSX.Element;
-};
-//# sourceMappingURL=Menus.stories.d.ts.map

package/dist/types/src/components/Menus.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Menus.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Menus.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AACrB,OAAO,KAA+B,MAAM,OAAO,CAAC;;;;;;;;;;;;;AAcpD,wBAOE;AAEF,eAAO,MAAM,YAAY;;CAgBxB,CAAC;AAEF,eAAO,MAAM,OAAO;;CAUnB,CAAC;AAEF,eAAO,MAAM,qBAAqB;;CAUjC,CAAC"}