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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-menu",
-  "version": "0.8.4-main.c1de068",
+  "version": "0.8.4-main.e098934",
   "description": "Components for facilitating reactive and consistent menus.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -10,6 +10,7 @@
   "type": "module",
   "exports": {
     ".": {
+      "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts",
       "browser": "./dist/lib/browser/index.mjs",
       "node": "./dist/lib/node-esm/index.mjs"
@@ -28,26 +29,26 @@
     "@preact/signals-react": "^3.2.0",
     "@radix-ui/react-context": "1.1.1",
     "@radix-ui/react-use-controllable-state": "1.1.0",
-    "@dxos/app-graph": "0.8.4-main.c1de068",
-    "@dxos/invariant": "0.8.4-main.c1de068",
-    "@dxos/keyboard": "0.8.4-main.c1de068",
-    "@dxos/react-ui-attention": "0.8.4-main.c1de068",
-    "@dxos/util": "0.8.4-main.c1de068"
+    "@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"
   },
   "devDependencies": {
     "@effect-rx/rx-react": "0.38.0",
-    "@effect/platform": "0.89.0",
+    "@effect/platform": "0.90.2",
     "@types/react": "~18.2.0",
     "@types/react-dom": "~18.2.0",
-    "effect": "3.17.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.c1de068",
-    "@dxos/random": "0.8.4-main.c1de068",
-    "@dxos/react-ui": "0.8.4-main.c1de068",
-    "@dxos/react-ui-theme": "0.8.4-main.c1de068",
-    "@dxos/storybook-utils": "0.8.4-main.c1de068"
+    "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"
   },
   "peerDependencies": {
     "@effect-rx/rx-react": "^0.34.1",
@@ -55,8 +56,8 @@
     "effect": "^3.13.3",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.4-main.c1de068",
-    "@dxos/react-ui-theme": "0.8.4-main.c1de068"
+    "@dxos/react-ui": "0.8.4-main.e098934",
+    "@dxos/react-ui-theme": "0.8.4-main.e098934"
   },
   "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/ActionLabel.tsx

@@ -4,10 +4,10 @@
 
 import React from 'react';
 
-import { type Action as GraphAction, type ActionGroup } from '@dxos/app-graph';
+import { type ActionGroup, type Action as GraphAction } from '@dxos/app-graph';
 import { keySymbols } from '@dxos/keyboard';
-import { toLocalizedString, useTranslation, type TFunction } from '@dxos/react-ui';
-import { mx, descriptionText } from '@dxos/react-ui-theme';
+import { type TFunction, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { descriptionText, mx } from '@dxos/react-ui-theme';
 
 import { translationKey } from '../translations';
 import { type MenuActionProperties } from '../types';

package/src/components/DropdownMenu.tsx

@@ -5,11 +5,12 @@
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import React, { type MouseEvent, useCallback } from 'react';
 
-import { DropdownMenu as NaturalDropdownMenu, Icon, type DropdownMenuRootProps } from '@dxos/react-ui';
+import { type DropdownMenuRootProps, Icon, DropdownMenu as NaturalDropdownMenu } from '@dxos/react-ui';
+
+import { type MenuAction, type MenuItem, type MenuItemGroup } from '../types';
 
 import { ActionLabel } from './ActionLabel';
 import { type MenuScopedProps, useMenu, useMenuItems } from './MenuContext';
-import { type MenuAction, type MenuItem, type MenuItemGroup } from '../types';
 
 export type DropdownMenuProps = DropdownMenuRootProps & {
   group?: MenuItemGroup;

package/src/components/MenuContext.tsx

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import { createContextScope, type Scope } from '@radix-ui/react-context';
+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';

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

@@ -3,13 +3,15 @@
 //
 
 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 { DropdownMenu as NaturalDropdownMenu, ToolbarMenu, MenuProvider } from '../components';
+import { MenuProvider, DropdownMenu as NaturalDropdownMenu, ToolbarMenu } from '../components';
 import { useMenuActions } from '../hooks';
 import { createActions, createNestedActions, createNestedActionsResolver, useMutateActions } from '../testing';
 import { translations } from '../translations';
@@ -17,16 +19,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]);
@@ -44,7 +50,7 @@ export const DropdownMenu = {
   },
 };
 
-export const Toolbar = {
+export const Toolbar: Story = {
   render: () => {
     const nestedMenuActions = useMemo(() => createNestedActionsResolver(), []);
 
@@ -56,7 +62,7 @@ export const Toolbar = {
   },
 };
 
-export const UseMenuActionsToolbar = {
+export const UseMenuActionsToolbar: Story = {
   render: () => {
     const menu = useMenuActions(createNestedActions);
 

package/src/components/ToolbarMenu.tsx

@@ -8,21 +8,22 @@ import { Icon, Toolbar as NaturalToolbar, type ToolbarRootProps, useTranslation
 import { useAttention } from '@dxos/react-ui-attention';
 import { mx, textBlockWidth, toolbarLayout } from '@dxos/react-ui-theme';
 
-import { actionLabel, ActionLabel } from './ActionLabel';
-import { DropdownMenu } from './DropdownMenu';
-import { type MenuScopedProps, useMenu, useMenuItems } from './MenuContext';
 import { translationKey } from '../translations';
 import {
   type MenuAction,
+  type MenuActionProperties,
   type MenuItem,
-  isMenuGroup,
-  isSeparator,
   type MenuItemGroup,
-  type MenuActionProperties,
   type MenuMultipleSelectActionGroup,
   type MenuSingleSelectActionGroup,
+  isMenuGroup,
+  isSeparator,
 } from '../types';
 
+import { ActionLabel, actionLabel } from './ActionLabel';
+import { DropdownMenu } from './DropdownMenu';
+import { type MenuScopedProps, useMenu, useMenuItems } from './MenuContext';
+
 export type ToolbarMenuDropdownMenuActionGroup = Omit<MenuActionProperties, 'variant' | 'icon'> & {
   variant: 'dropdownMenu';
   icon: string;
@@ -60,6 +61,7 @@ const ActionToolbarItem = ({ action, __menuScope }: MenuScopedProps<{ action: Me
   const rootProps = icon
     ? { icon, size: iconSize, iconOnly, label: actionLabel(action, t) }
     : { children: <ActionLabel action={action} /> };
+
   return hidden ? null : (
     <Root
       key={action.id}
@@ -100,6 +102,7 @@ const DropdownMenuToolbarItem = ({
           </>
         ),
       };
+
   return (
     <DropdownMenu.Root group={group} items={items}>
       <DropdownMenu.Trigger asChild>
@@ -118,6 +121,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}
@@ -139,8 +143,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}>
       {
@@ -164,6 +169,7 @@ export const ToolbarMenu = ({
   const { hasAttention } = useAttention(attendableId);
   const InnerRoot = wrapContents ? 'div' : Fragment;
   const innerRootProps = wrapContents ? { role: 'none', className: mx(textBlockWidth, toolbarLayout, 'bs-full') } : {};
+
   return (
     <NaturalToolbar.Root
       {...props}
@@ -171,23 +177,27 @@ export const ToolbarMenu = ({
       classNames={[attendableId && !hasAttention && '*:opacity-20 !bg-transparent', classNames]}
     >
       <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

@@ -5,7 +5,7 @@
 import { RegistryContext, type Rx, useRxValue } from '@effect-rx/rx-react';
 import { useCallback, useContext, useEffect, useState } from 'react';
 
-import { type Edge, type Edges, Graph, type NodeArg, type Node, ROOT_ID } from '@dxos/app-graph';
+import { type Edge, type Edges, Graph, type Node, type NodeArg, ROOT_ID } from '@dxos/app-graph';
 
 import { type MenuItem, type MenuItemGroup } from '../types';
 

package/src/testing/generator.ts

@@ -6,20 +6,20 @@ import { Rx } from '@effect-rx/rx-react';
 import { useEffect } from 'react';
 
 import {
+  ACTION_GROUP_TYPE,
+  ACTION_TYPE,
   type Action,
   Graph,
   type NodeArg,
-  ACTION_TYPE,
-  ACTION_GROUP_TYPE,
-  actionGroupSymbol,
   ROOT_ID,
+  actionGroupSymbol,
 } from '@dxos/app-graph';
 import { live } from '@dxos/live-object';
 import { faker } from '@dxos/random';
 import { type DeepWriteable } from '@dxos/util';
 
 import { type ActionGraphProps } from '../hooks/useMenuActions';
-import { type MenuAction, type MenuItemGroup, type MenuItem } from '../types';
+import { type MenuAction, type MenuItem, type MenuItemGroup } from '../types';
 
 export type CreateActionsParams = Partial<{
   type?: typeof ACTION_TYPE | typeof ACTION_GROUP_TYPE;

package/src/types.ts

@@ -2,8 +2,8 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type Node, type Action, type ActionGroup, ACTION_GROUP_TYPE } from '@dxos/app-graph';
-import { type ToolbarSeparatorProps, type Label, type IconButtonProps, type ClassNameValue } from '@dxos/react-ui';
+import { ACTION_GROUP_TYPE, type Action, type ActionGroup, type Node } from '@dxos/app-graph';
+import { type ClassNameValue, type IconButtonProps, type Label, type ToolbarSeparatorProps } from '@dxos/react-ui';
 
 export type MenuActionProperties = {
   label: Label;

package/src/util.ts

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import { ACTION_GROUP_TYPE, ACTION_TYPE, actionGroupSymbol, type ActionLike } from '@dxos/app-graph';
+import { ACTION_GROUP_TYPE, ACTION_TYPE, type ActionLike, actionGroupSymbol } from '@dxos/app-graph';
 import { getHostPlatform } from '@dxos/util';
 
 import {

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"}