@dxos/react-ui-menu 0.8.2-main.fbd8ed0 → 0.8.2-staging.7ac8446

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

@@ -3,35 +3,38 @@
 //
 
 import '@dxos-theme';
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback } from 'react';
 
 import { faker } from '@dxos/random';
 import { IconButton } from '@dxos/react-ui';
 import { withLayout, withSignals, withTheme } from '@dxos/storybook-utils';
 
+import { createActions, createNestedActions, createNestedActionsResolver, useMutateActions } from './index';
 import { DropdownMenu as NaturalDropdownMenu, ToolbarMenu, MenuProvider } from '../components';
+import { type MenuAction, type MenuActionHandler } from '../defs';
 import { useMenuActions } from '../hooks';
-import { createActions, createNestedActions, createNestedActionsResolver, useMutateActions } from '../testing';
 import translations from '../translations';
-import { type MenuAction } from '../types';
 
 faker.seed(1234);
 
 export default {
   title: 'ui/react-ui-menu/Menus',
   component: ToolbarMenu,
-  decorators: [withTheme, withLayout(), withSignals],
+  decorators: [withTheme, withLayout({ tooltips: true }), withSignals],
   parameters: { translations },
 };
 
+const menuActions = createActions() as MenuAction[];
+const nestedMenuActions = createNestedActionsResolver();
+
+const handleAction = (action: MenuAction) => console.log('[on action]', action);
+
 export const DropdownMenu = {
   render: () => {
-    const menuActions = useMemo(() => createActions() as MenuAction[], []);
-    const resolveGroupItems = useCallback(() => menuActions, [menuActions]);
     useMutateActions(menuActions);
-
+    const resolveGroupItems = useCallback(() => menuActions, []);
     return (
-      <MenuProvider useGroupItems={resolveGroupItems}>
+      <MenuProvider resolveGroupItems={resolveGroupItems} onAction={handleAction as MenuActionHandler}>
         <NaturalDropdownMenu.Root>
           <NaturalDropdownMenu.Trigger asChild>
             <IconButton icon='ph--list-checks--regular' size={5} label='Options' />
@@ -44,10 +47,8 @@ export const DropdownMenu = {
 
 export const Toolbar = {
   render: () => {
-    const nestedMenuActions = useMemo(() => createNestedActionsResolver(), []);
-
     return (
-      <MenuProvider {...nestedMenuActions}>
+      <MenuProvider onAction={handleAction as MenuActionHandler} {...nestedMenuActions}>
         <ToolbarMenu />
       </MenuProvider>
     );
@@ -57,9 +58,8 @@ export const Toolbar = {
 export const UseMenuActionsToolbar = {
   render: () => {
     const menu = useMenuActions(createNestedActions);
-
     return (
-      <MenuProvider {...menu}>
+      <MenuProvider onAction={handleAction as MenuActionHandler} {...menu}>
         <ToolbarMenu />
       </MenuProvider>
     );

package/src/testing/index.ts

@@ -2,4 +2,110 @@
 // Copyright 2025 DXOS.org
 //
 
-export * from './generator';
+import { useEffect } from 'react';
+
+import { type Action, Graph, type NodeArg, ACTION_TYPE, ACTION_GROUP_TYPE, actionGroupSymbol } from '@dxos/app-graph';
+import { create } from '@dxos/live-object';
+import { faker } from '@dxos/random';
+import { type DeepWriteable } from '@dxos/util';
+
+import { type MenuAction, type MenuItemGroup, type MenuItem } from '../defs';
+import { type ActionGraphProps } from '../hooks';
+
+export type CreateActionsParams = Partial<{
+  type?: typeof ACTION_TYPE | typeof ACTION_GROUP_TYPE;
+  callback: () => void;
+  count: number;
+}>;
+
+const icons = {
+  regular: [
+    'ph--text-b--regular',
+    'ph--text-italic--regular',
+    'ph--text-h-five--regular',
+    'ph--chat-text--regular',
+    'ph--clipboard-text--regular',
+    'ph--link-simple--regular',
+  ],
+  fill: [
+    'ph--text-b--fill',
+    'ph--text-italic--fill',
+    'ph--text-h-five--fill',
+    'ph--chat-text--fill',
+    'ph--clipboard-text--fill',
+    'ph--link-simple--fill',
+  ],
+};
+
+export const createActions = (params?: CreateActionsParams) => {
+  // eslint-disable-next-line no-console
+  const { callback = () => console.log('invoke'), count = 12, type = ACTION_TYPE } = params ?? {};
+  return faker.helpers.multiple(
+    () =>
+      create({
+        id: faker.string.uuid(),
+        type,
+        data: type === ACTION_GROUP_TYPE ? actionGroupSymbol : callback,
+        properties: {
+          label: faker.lorem.words(2),
+          icon: faker.helpers.arrayElement(icons[faker.helpers.arrayElement(Object.keys(icons)) as keyof typeof icons]),
+          disabled: faker.helpers.arrayElement([true, false]),
+          ...(type === ACTION_GROUP_TYPE && { variant: 'dropdownMenu' }),
+        },
+      }),
+    { count },
+  );
+};
+
+export const createNestedActions = () => {
+  const result: ActionGraphProps = { edges: [], nodes: [] };
+  const actionGroups = createActions({ type: ACTION_GROUP_TYPE });
+  actionGroups.forEach((group) => {
+    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 })),
+    );
+  });
+  return result;
+};
+
+export const createNestedActionsResolver = (groupParams?: CreateActionsParams, params?: CreateActionsParams) => {
+  const graph = new Graph();
+  const actionGroups = createActions({ type: ACTION_GROUP_TYPE, ...groupParams });
+  actionGroups.forEach((group) => {
+    const actions = createActions(params);
+    // TODO(thure): these methods exist on `graph` but are marked as `@internal`; how should consumers properly build
+    //  graph “islands” for the purposes of these components?
+    // @ts-ignore
+    graph._addNodes([group as NodeArg<any>, ...(actions as NodeArg<any>[])]);
+    // @ts-ignore
+    graph._addEdges([
+      { source: 'root', target: group.id },
+      ...actions.map((action) => ({ source: group.id, target: action.id })),
+    ]);
+    void graph.expand(group);
+  });
+  const resolveGroupItems = (groupNode?: MenuItemGroup) =>
+    (graph.actions(groupNode ?? graph.root) || null) as MenuItem[] | null;
+  return { resolveGroupItems };
+};
+
+export const mutateActionsOnInterval = (actions: Action[]) => {
+  let cursor = 0;
+  return setInterval(() => {
+    const action = actions[cursor] as DeepWriteable<Action>;
+    action.properties.icon = faker.helpers.arrayElement(
+      action.properties.icon.endsWith('regular') ? icons.fill : icons.regular,
+    );
+    action.properties.disabled = !action.properties.disabled;
+    cursor = (cursor + actions.length + 1) % actions.length;
+  }, 1_000);
+};
+
+export const useMutateActions = (actions: MenuAction[]) =>
+  useEffect(() => {
+    const interval = mutateActionsOnInterval(actions);
+    return () => clearInterval(interval);
+  }, []);

package/src/util.ts

@@ -11,7 +11,7 @@ import {
   type MenuItemGroup,
   type MenuItemGroupProperties,
   type MenuSeparator,
-} from './types';
+} from './defs';
 
 export const getShortcut = (action: ActionLike) => {
   return typeof action.properties?.keyBinding === 'string'
@@ -21,16 +21,16 @@ export const getShortcut = (action: ActionLike) => {
 
 export const fallbackIcon = 'ph--placeholder--regular';
 
-export const createMenuAction = <P extends {} = {}>(
-  id: string,
-  invoke: () => void,
-  properties: P & MenuActionProperties,
-) =>
+// TODO(thure,wittjosiah): This is probably a smell; consider the whether react-ui-menu should use action nodes if the
+//  callback in `data` is never used. See https://github.com/dxos/dxos/pull/8506#discussion_r1925855118
+const noop = () => {};
+
+export const createMenuAction = <P extends {} = {}>(id: string, properties: P & MenuActionProperties) =>
   ({
     id,
     type: ACTION_TYPE,
     properties,
-    data: invoke,
+    data: noop,
   }) satisfies MenuAction;
 
 export const createMenuItemGroup = <

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,wBAKE;AAEF,eAAO,MAAM,YAAY;;CAgBxB,CAAC;AAEF,eAAO,MAAM,OAAO;;CAUnB,CAAC;AAEF,eAAO,MAAM,qBAAqB;;CAUjC,CAAC"}

package/dist/types/src/hooks/index.d.ts

@@ -1,2 +0,0 @@
-export * from './useMenuActions';
-//# sourceMappingURL=index.d.ts.map

package/dist/types/src/hooks/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/hooks/index.ts"],"names":[],"mappings":"AAIA,cAAc,kBAAkB,CAAC"}

package/dist/types/src/hooks/useMenuActions.d.ts

@@ -1,12 +0,0 @@
-import { type Edge, type NodeArg } from '@dxos/app-graph';
-import { type MenuItem, type MenuItemGroup } from '../types';
-export type ActionGraphNodes = NodeArg<any>[];
-export type ActionGraphEdges = Edge[];
-export type ActionGraphProps = {
-    nodes: ActionGraphNodes;
-    edges: ActionGraphEdges;
-};
-export declare const useMenuActions: (actionCreator: () => ActionGraphProps) => {
-    useGroupItems: (sourceNode?: MenuItemGroup) => MenuItem[];
-};
-//# sourceMappingURL=useMenuActions.d.ts.map

package/dist/types/src/hooks/useMenuActions.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useMenuActions.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useMenuActions.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,KAAK,IAAI,EAAqB,KAAK,OAAO,EAAsB,MAAM,iBAAiB,CAAC;AAEjG,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,UAAU,CAAC;AA6B7D,MAAM,MAAM,gBAAgB,GAAG,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC;AAC9C,MAAM,MAAM,gBAAgB,GAAG,IAAI,EAAE,CAAC;AACtC,MAAM,MAAM,gBAAgB,GAAG;IAAE,KAAK,EAAE,gBAAgB,CAAC;IAAC,KAAK,EAAE,gBAAgB,CAAA;CAAE,CAAC;AAEpF,eAAO,MAAM,cAAc,GAAI,eAAe,MAAM,gBAAgB;iCAoBlD,aAAa;CAQ9B,CAAC"}

package/dist/types/src/testing/generator.d.ts

@@ -1,26 +0,0 @@
-import { type Action, ACTION_TYPE, ACTION_GROUP_TYPE } from '@dxos/app-graph';
-import { type ActionGraphProps } from '../hooks/useMenuActions';
-import { type MenuAction, type MenuItemGroup, type MenuItem } from '../types';
-export type CreateActionsParams = Partial<{
-    type?: typeof ACTION_TYPE | typeof ACTION_GROUP_TYPE;
-    callback: () => void;
-    count: number;
-}>;
-export declare const createActions: (params?: CreateActionsParams) => import("@dxos/live-object").Live<{
-    id: string;
-    type: "dxos.org/type/GraphActionGroup" | "dxos.org/type/GraphAction";
-    data: symbol | (() => void);
-    properties: {
-        variant?: string | undefined;
-        label: string;
-        icon: string;
-        disabled: boolean;
-    };
-}>[];
-export declare const createNestedActions: () => ActionGraphProps;
-export declare const createNestedActionsResolver: (groupParams?: CreateActionsParams, params?: CreateActionsParams) => {
-    resolveGroupItems: (groupNode?: MenuItemGroup) => MenuItem[] | null;
-};
-export declare const mutateActionsOnInterval: (actions: Action[]) => NodeJS.Timeout;
-export declare const useMutateActions: (actions: MenuAction[]) => void;
-//# sourceMappingURL=generator.d.ts.map

package/dist/types/src/testing/generator.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"generator.d.ts","sourceRoot":"","sources":["../../../../src/testing/generator.ts"],"names":[],"mappings":"AAMA,OAAO,EACL,KAAK,MAAM,EAGX,WAAW,EACX,iBAAiB,EAGlB,MAAM,iBAAiB,CAAC;AAKzB,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,KAAK,UAAU,EAAE,KAAK,aAAa,EAAE,KAAK,QAAQ,EAAE,MAAM,UAAU,CAAC;AAE9E,MAAM,MAAM,mBAAmB,GAAG,OAAO,CAAC;IACxC,IAAI,CAAC,EAAE,OAAO,WAAW,GAAG,OAAO,iBAAiB,CAAC;IACrD,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC,CAAC;AAqBH,eAAO,MAAM,aAAa,GAAI,SAAS,mBAAmB;;;0BAvBxC,IAAI;;;;;;;IAyCrB,CAAC;AAEF,eAAO,MAAM,mBAAmB,wBAY/B,CAAC;AAEF,eAAO,MAAM,2BAA2B,GAAI,cAAc,mBAAmB,EAAE,SAAS,mBAAmB;oCAYlE,aAAa,KACM,QAAQ,EAAE,GAAG,IAAI;CAE5E,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,SAAS,MAAM,EAAE,mBAUxD,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,SAAS,UAAU,EAAE,SAI9C,CAAC"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,MAAM,EAAE,KAAK,WAAW,EAAqB,MAAM,iBAAiB,CAAC;AAC9F,OAAO,EAAE,KAAK,qBAAqB,EAAE,KAAK,KAAK,EAAE,KAAK,eAAe,EAAE,KAAK,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAEnH,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,cAAc,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG;IACpC,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,EAAE,GAAG,EAAE,IAAI,MAAM,CAAC,CAAC,GAAG,oBAAoB,CAAC,CAAC;AAE7E,eAAO,MAAM,iBAAiB,EAAG,kCAA2C,CAAC;AAE7E,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,qBAAqB,EAAE,SAAS,CAAC,CAAC,GAAG;IAChF,IAAI,EAAE,OAAO,iBAAiB,CAAC;CAChC,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,MAAM,IAAI,KAAG,IAAI,IAAI,aAAgD,CAAC;AAElG,MAAM,MAAM,2BAA2B,GAAG;IAAE,iBAAiB,EAAE,QAAQ,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AACzF,MAAM,MAAM,6BAA6B,GAAG;IAAE,iBAAiB,EAAE,UAAU,CAAC;IAAC,KAAK,EAAE,MAAM,EAAE,CAAA;CAAE,CAAC;AAE/F,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI,WAAW,CAAC,CAAC,CAAC,CAAC;AAEhG,eAAO,MAAM,WAAW,GAAI,MAAM,IAAI,KAAG,IAAI,IAAI,aAAgD,CAAC;AAElG,MAAM,MAAM,QAAQ,GAAG,aAAa,GAAG,UAAU,GAAG,aAAa,CAAC;AAElE,MAAM,MAAM,iBAAiB,GAAG,CAAC,KAAK,CAAC,EAAE,aAAa,KAAK,QAAQ,EAAE,GAAG,IAAI,CAAC;AAE7E,MAAM,MAAM,gBAAgB,GAAG;IAC7B,aAAa,EAAE,iBAAiB,CAAC;IACjC,QAAQ,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC"}

package/src/hooks/index.ts

@@ -1,5 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-export * from './useMenuActions';

package/src/testing/generator.ts

@@ -1,115 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { useEffect } from 'react';
-
-import {
-  type Action,
-  Graph,
-  type NodeArg,
-  ACTION_TYPE,
-  ACTION_GROUP_TYPE,
-  actionGroupSymbol,
-  ROOT_ID,
-} 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';
-
-export type CreateActionsParams = Partial<{
-  type?: typeof ACTION_TYPE | typeof ACTION_GROUP_TYPE;
-  callback: () => void;
-  count: number;
-}>;
-
-const icons = {
-  regular: [
-    'ph--text-b--regular',
-    'ph--text-italic--regular',
-    'ph--text-h-five--regular',
-    'ph--chat-text--regular',
-    'ph--clipboard-text--regular',
-    'ph--link-simple--regular',
-  ],
-  fill: [
-    'ph--text-b--fill',
-    'ph--text-italic--fill',
-    'ph--text-h-five--fill',
-    'ph--chat-text--fill',
-    'ph--clipboard-text--fill',
-    'ph--link-simple--fill',
-  ],
-};
-
-export const createActions = (params?: CreateActionsParams) => {
-  // eslint-disable-next-line no-console
-  const { callback = () => console.log('invoke'), count = 12, type = ACTION_TYPE } = params ?? {};
-  return faker.helpers.multiple(
-    () =>
-      live({
-        id: faker.string.uuid(),
-        type,
-        data: type === ACTION_GROUP_TYPE ? actionGroupSymbol : callback,
-        properties: {
-          label: faker.lorem.words(2),
-          icon: faker.helpers.arrayElement(icons[faker.helpers.arrayElement(Object.keys(icons)) as keyof typeof icons]),
-          disabled: faker.helpers.arrayElement([true, false]),
-          ...(type === ACTION_GROUP_TYPE && { variant: 'dropdownMenu' }),
-        },
-      }),
-    { count },
-  );
-};
-
-export const createNestedActions = () => {
-  const result: ActionGraphProps = { edges: [], nodes: [] };
-  const actionGroups = createActions({ type: ACTION_GROUP_TYPE });
-  actionGroups.forEach((group) => {
-    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 })),
-    );
-  });
-  return result;
-};
-
-export const createNestedActionsResolver = (groupParams?: CreateActionsParams, params?: CreateActionsParams) => {
-  const graph = new Graph();
-  const actionGroups = createActions({ type: ACTION_GROUP_TYPE, ...groupParams });
-  actionGroups.forEach((group) => {
-    const actions = createActions(params);
-    graph.addNodes([group as NodeArg<any>, ...(actions as NodeArg<any>[])]);
-    graph.addEdges([
-      { source: 'root', target: group.id },
-      ...actions.map((action) => ({ source: group.id, target: action.id })),
-    ]);
-    graph.expand(group.id);
-  });
-  const resolveGroupItems = (groupNode?: MenuItemGroup) =>
-    (graph.getActions(groupNode?.id ?? ROOT_ID) || null) as MenuItem[] | null;
-  return { resolveGroupItems };
-};
-
-export const mutateActionsOnInterval = (actions: Action[]) => {
-  let cursor = 0;
-  return setInterval(() => {
-    const action = actions[cursor] as DeepWriteable<Action>;
-    action.properties.icon = faker.helpers.arrayElement(
-      action.properties.icon.endsWith('regular') ? icons.fill : icons.regular,
-    );
-    action.properties.disabled = !action.properties.disabled;
-    cursor = (cursor + actions.length + 1) % actions.length;
-  }, 1_000);
-};
-
-export const useMutateActions = (actions: MenuAction[]) =>
-  useEffect(() => {
-    const interval = mutateActionsOnInterval(actions);
-    return () => clearInterval(interval);
-  }, []);