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

package/src/testing/index.ts

@@ -2,110 +2,4 @@
 // Copyright 2025 DXOS.org
 //
 
-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);
-  }, []);
+export * from './generator';

package/src/{defs.ts → types.ts}

@@ -26,8 +26,6 @@ export type MenuItemGroupProperties = {
 
 export type MenuAction<P extends {} = {}> = Action<P & MenuActionProperties>;
 
-export type MenuActionHandler<A extends Node = MenuAction> = (action: A) => void;
-
 export const MenuSeparatorType = '@dxos/react-ui-toolbar/separator' as const;
 
 export type MenuSeparator = Node<never, Pick<ToolbarSeparatorProps, 'variant'>> & {
@@ -47,9 +45,8 @@ export type MenuItem = MenuSeparator | MenuAction | MenuItemGroup;
 
 export type MenuItemsResolver = (group?: MenuItemGroup) => MenuItem[] | null;
 
-export type MenuContextValue<A extends Node = MenuAction> = {
-  resolveGroupItems: MenuItemsResolver;
+export type MenuContextValue = {
+  useGroupItems: MenuItemsResolver;
   iconSize: IconButtonProps['size'];
-  onAction: MenuActionHandler<A>;
   attendableId?: string;
 };

package/src/util.ts

@@ -11,7 +11,7 @@ import {
   type MenuItemGroup,
   type MenuItemGroupProperties,
   type MenuSeparator,
-} from './defs';
+} from './types';
 
 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';
 
-// 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) =>
+export const createMenuAction = <P extends {} = {}>(
+  id: string,
+  invoke: () => void,
+  properties: P & MenuActionProperties,
+) =>
   ({
     id,
     type: ACTION_TYPE,
     properties,
-    data: noop,
+    data: invoke,
   }) satisfies MenuAction;
 
 export const createMenuItemGroup = <

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

@@ -1 +0,0 @@
-{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../src/defs.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,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,IAAI,GAAG,UAAU,IAAI,CAAC,MAAM,EAAE,CAAC,KAAK,IAAI,CAAC;AAEjF,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,SAAU,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,SAAU,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,CAAC,CAAC,SAAS,IAAI,GAAG,UAAU,IAAI;IAC1D,iBAAiB,EAAE,iBAAiB,CAAC;IACrC,QAAQ,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAClC,QAAQ,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC;IAC/B,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC"}

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../src/hooks.ts"],"names":[],"mappings":"AAOA,OAAO,EAAS,KAAK,OAAO,EAAa,MAAM,iBAAiB,CAAC;AAEjE,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,QAAQ,CAAC;AAE3D,KAAK,IAAI,GAAG;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC;AA6B/C,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,kBAAmB,MAAM,gBAAgB;qCAgBnD,aAAa;CAW7B,CAAC"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"Menus.stories.d.ts","sourceRoot":"","sources":["../../../../src/testing/Menus.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AACrB,OAAO,KAAsB,MAAM,OAAO,CAAC;;;;;;;;;;;;;AAc3C,wBAKE;AAOF,eAAO,MAAM,YAAY;;CAcxB,CAAC;AAEF,eAAO,MAAM,OAAO;;CAQnB,CAAC;AAEF,eAAO,MAAM,qBAAqB;;CASjC,CAAC"}

package/src/hooks.ts

@@ -1,72 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { useSignalEffect } from '@preact/signals-react';
-import { useCallback, useState } from 'react';
-
-import { Graph, type NodeArg, type Node } from '@dxos/app-graph';
-
-import { type MenuItem, type MenuItemGroup } from './defs';
-
-type Edge = { source: string; target: string };
-
-const edgesArrayToRecord = (edges: { source: string; target: string }[]): Record<string, string[]> => {
-  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;
-      }, {}),
-    ).map(([id, { outbound }]): [string, string[]] => [id, outbound]),
-  );
-};
-
-export type ActionGraphNodes = NodeArg<any>[];
-export type ActionGraphEdges = Edge[];
-export type ActionGraphProps = { nodes: ActionGraphNodes; edges: ActionGraphEdges };
-
-export const useMenuActions = (actionCreator: () => ActionGraphProps) => {
-  const initialMenuGraphProps = actionCreator();
-
-  const [graph] = useState(
-    new Graph({ nodes: initialMenuGraphProps.nodes as Node[], edges: edgesArrayToRecord(initialMenuGraphProps.edges) }),
-  );
-
-  useSignalEffect(() => {
-    const menuGraphProps = actionCreator();
-    // @ts-ignore
-    graph._addNodes(menuGraphProps.nodes);
-    // @ts-ignore
-    graph._addEdges(menuGraphProps.edges);
-  });
-
-  const resolveGroupItems = useCallback(
-    (sourceNode: MenuItemGroup = graph.root as MenuItemGroup) => {
-      if (graph) {
-        return (graph.nodes(sourceNode, { filter: (n): n is any => true }) || null) as MenuItem[] | null;
-      } else {
-        return null;
-      }
-    },
-    [graph],
-  );
-
-  return { resolveGroupItems };
-};