@dxos/react-ui-menu 0.8.4-main.e098934 → 0.8.4-main.e8ec1fe

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-menu",
-  "version": "0.8.4-main.e098934",
+  "version": "0.8.4-main.e8ec1fe",
   "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.e098934",
-    "@dxos/invariant": "0.8.4-main.e098934",
-    "@dxos/keyboard": "0.8.4-main.e098934",
-    "@dxos/react-ui-attention": "0.8.4-main.e098934",
-    "@dxos/util": "0.8.4-main.e098934"
+    "@dxos/app-graph": "0.8.4-main.e8ec1fe",
+    "@dxos/invariant": "0.8.4-main.e8ec1fe",
+    "@dxos/keyboard": "0.8.4-main.e8ec1fe",
+    "@dxos/react-ui-attention": "0.8.4-main.e8ec1fe",
+    "@dxos/util": "0.8.4-main.e8ec1fe"
   },
   "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": "7.1.1",
-    "@dxos/live-object": "0.8.4-main.e098934",
-    "@dxos/random": "0.8.4-main.e098934",
-    "@dxos/react-ui": "0.8.4-main.e098934",
-    "@dxos/react-ui-theme": "0.8.4-main.e098934",
-    "@dxos/storybook-utils": "0.8.4-main.e098934"
+    "@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.e8ec1fe",
+    "@dxos/react-ui": "0.8.4-main.e8ec1fe",
+    "@dxos/react-ui-theme": "0.8.4-main.e8ec1fe",
+    "@dxos/random": "0.8.4-main.e8ec1fe",
+    "@dxos/storybook-utils": "0.8.4-main.e8ec1fe"
   },
   "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.e098934",
-    "@dxos/react-ui-theme": "0.8.4-main.e098934"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@dxos/react-ui": "0.8.4-main.e8ec1fe",
+    "@dxos/react-ui-theme": "0.8.4-main.e8ec1fe"
   },
   "publishConfig": {
     "access": "public"

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/ToolbarMenu.stories.tsx

@@ -2,14 +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';
@@ -42,7 +40,7 @@ export const DropdownMenu: Story = {
       <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>

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,13 +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}
@@ -158,23 +160,26 @@ 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) => (

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') => ({