@dxos/react-ui-menu 0.7.5-main.937ce75 → 0.7.5-main.b19bfc8

package/src/testing/index.ts

@@ -9,8 +9,8 @@ import { create } from '@dxos/live-object';
 import { faker } from '@dxos/random';
 import { type DeepWriteable } from '@dxos/util';
 
-import { type ToolbarItem } from '../components';
-import { type MenuAction } from '../defs';
+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;
@@ -57,7 +57,21 @@ export const createActions = (params?: CreateActionsParams) => {
   );
 };
 
-export const createNestedActionGraph = (groupParams?: CreateActionsParams, params?: CreateActionsParams) => {
+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) => {
@@ -67,10 +81,15 @@ export const createNestedActionGraph = (groupParams?: CreateActionsParams, param
     // @ts-ignore
     graph._addNodes([group as NodeArg<any>, ...(actions as NodeArg<any>[])]);
     // @ts-ignore
-    graph._addEdges(actions.map((action) => ({ source: group.id, target: action.id })));
+    graph._addEdges([
+      { source: 'root', target: group.id },
+      ...actions.map((action) => ({ source: group.id, target: action.id })),
+    ]);
     void graph.expand(group);
   });
-  return { graph, topLevelActions: actionGroups as ToolbarItem[] };
+  const resolveGroupItems = (groupNode?: MenuItemGroup) =>
+    (graph.actions(groupNode ?? graph.root) || null) as MenuItem[] | null;
+  return { resolveGroupItems };
 };
 
 export const mutateActionsOnInterval = (actions: Action[]) => {

package/src/util.ts

@@ -2,9 +2,17 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type ActionLike } from '@dxos/app-graph';
+import { ACTION_GROUP_TYPE, ACTION_TYPE, actionGroupSymbol, type ActionLike } from '@dxos/app-graph';
 import { getHostPlatform } from '@dxos/util';
 
+import {
+  type MenuAction,
+  type MenuActionProperties,
+  type MenuItemGroup,
+  type MenuItemGroupProperties,
+  type MenuSeparator,
+} from './defs';
+
 export const getShortcut = (action: ActionLike) => {
   return typeof action.properties?.keyBinding === 'string'
     ? action.properties.keyBinding
@@ -12,3 +20,52 @@ 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) =>
+  ({
+    id,
+    type: ACTION_TYPE,
+    properties,
+    data: noop,
+  }) satisfies MenuAction;
+
+export const createMenuItemGroup = <
+  P extends MenuItemGroupProperties = MenuItemGroupProperties & Partial<MenuActionProperties>,
+>(
+  id: string,
+  properties: P,
+) =>
+  ({
+    id,
+    type: ACTION_GROUP_TYPE,
+    properties,
+    data: actionGroupSymbol,
+  }) satisfies MenuItemGroup;
+
+export const createGapSeparator = (id: string = 'gap', source: string = 'root') => ({
+  nodes: [
+    {
+      id,
+      type: '@dxos/react-ui-toolbar/separator',
+      properties: { variant: 'gap' },
+      data: undefined as never,
+    } satisfies MenuSeparator,
+  ],
+  edges: [{ source, target: id }],
+});
+
+export const createLineSeparator = (id: string = 'line', source: string = 'root') => ({
+  nodes: [
+    {
+      id,
+      type: '@dxos/react-ui-toolbar/separator',
+      properties: { variant: 'line' },
+      data: undefined as never,
+    } satisfies MenuSeparator,
+  ],
+  edges: [{ source, target: id }],
+});

package/dist/types/src/components/Toolbar/Toolbar.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { type ToolbarProps } from './defs';
-export declare const Toolbar: ({ actions: items, onAction, iconSize, graph, ...props }: ToolbarProps) => React.JSX.Element;
-//# sourceMappingURL=Toolbar.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../../../../src/components/Toolbar/Toolbar.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAM3C,OAAO,EAAuB,KAAK,YAAY,EAAE,MAAM,QAAQ,CAAC;AA8BhE,eAAO,MAAM,OAAO,4DAAiE,YAAY,sBA8BhG,CAAC"}

package/dist/types/src/components/Toolbar/ToolbarDropdownMenu.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { type ToolbarActionGroupProps } from './defs';
-export declare const ToolbarDropdownMenu: ({ actionGroup, graph, onAction, applyActiveIcon }: ToolbarActionGroupProps) => React.JSX.Element;
-//# sourceMappingURL=ToolbarDropdownMenu.d.ts.map

package/dist/types/src/components/Toolbar/ToolbarDropdownMenu.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ToolbarDropdownMenu.d.ts","sourceRoot":"","sources":["../../../../../src/components/Toolbar/ToolbarDropdownMenu.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAI/C,OAAO,EAAE,KAAK,uBAAuB,EAAE,MAAM,QAAQ,CAAC;AAKtD,eAAO,MAAM,mBAAmB,sDAAuD,uBAAuB,sBAsB7G,CAAC"}

package/dist/types/src/components/Toolbar/ToolbarToggleGroup.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import type { ToolbarActionGroupProps } from './defs';
-export declare const ToolbarToggleGroup: ({ actionGroup, graph }: ToolbarActionGroupProps) => React.JSX.Element;
-//# sourceMappingURL=ToolbarToggleGroup.d.ts.map

package/dist/types/src/components/Toolbar/ToolbarToggleGroup.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ToolbarToggleGroup.d.ts","sourceRoot":"","sources":["../../../../../src/components/Toolbar/ToolbarToggleGroup.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAIvC,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,QAAQ,CAAC;AAkBtD,eAAO,MAAM,kBAAkB,2BAA4B,uBAAuB,sBAYjF,CAAC"}

package/dist/types/src/components/Toolbar/defs.d.ts

@@ -1,30 +0,0 @@
-import { type Node, type ActionGroup, type Graph } from '@dxos/app-graph';
-import { type ToolbarRootProps, type ToolbarSeparatorProps, type IconButtonProps } from '@dxos/react-ui';
-import { type MenuAction, type MenuActionProperties, type MenuProps } from '../../defs';
-export declare const ToolbarSeparatorType: "@dxos/react-ui-toolbar/separator";
-export type ToolbarSeparatorNode = Node<never, Pick<ToolbarSeparatorProps, 'variant'>> & {
-    type: typeof ToolbarSeparatorType;
-};
-export declare const isSeparator: (node: Node) => node is ToolbarSeparatorNode;
-export type ToolbarActionGroupProperties = Omit<MenuActionProperties, 'variant'> & {
-    variant: 'dropdownMenu' | 'toggleGroup';
-} & ({
-    selectCardinality?: 'single';
-    value?: string;
-} | {
-    selectCardinality?: 'multiple';
-    value?: string[];
-});
-export type ToolbarActionGroup = ActionGroup<ToolbarActionGroupProperties>;
-export declare const isMenu: (node: Node) => node is ToolbarActionGroup;
-export type ToolbarItem = ToolbarSeparatorNode | MenuAction | ToolbarActionGroup;
-export type ToolbarProps = ToolbarRootProps & MenuProps<ToolbarItem, MenuAction> & {
-    iconSize?: IconButtonProps['size'];
-    graph?: Graph;
-};
-export type ToolbarActionGroupProps = Pick<ToolbarProps, 'iconSize'> & Omit<MenuProps<MenuAction>, 'actions'> & {
-    actionGroup: ToolbarActionGroup;
-    graph?: Graph;
-    applyActiveIcon?: boolean;
-};
-//# sourceMappingURL=defs.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../../../src/components/Toolbar/defs.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,WAAW,EAAE,KAAK,KAAK,EAAqB,MAAM,iBAAiB,CAAC;AAC7F,OAAO,EAAE,KAAK,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEzG,OAAO,EAAE,KAAK,UAAU,EAAE,KAAK,oBAAoB,EAAE,KAAK,SAAS,EAAE,MAAM,YAAY,CAAC;AAExF,eAAO,MAAM,oBAAoB,EAAG,kCAA2C,CAAC;AAEhF,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,qBAAqB,EAAE,SAAS,CAAC,CAAC,GAAG;IACvF,IAAI,EAAE,OAAO,oBAAoB,CAAC;CACnC,CAAC;AAEF,eAAO,MAAM,WAAW,SAAU,IAAI,KAAG,IAAI,IAAI,oBAA0D,CAAC;AAE5G,MAAM,MAAM,4BAA4B,GAAG,IAAI,CAAC,oBAAoB,EAAE,SAAS,CAAC,GAAG;IACjF,OAAO,EAAE,cAAc,GAAG,aAAa,CAAC;CACzC,GAAG,CAAC;IAAE,iBAAiB,CAAC,EAAE,QAAQ,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG;IAAE,iBAAiB,CAAC,EAAE,UAAU,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;CAAE,CAAC,CAAC;AAE9G,MAAM,MAAM,kBAAkB,GAAG,WAAW,CAAC,4BAA4B,CAAC,CAAC;AAE3E,eAAO,MAAM,MAAM,SAAU,IAAI,KAAG,IAAI,IAAI,kBAAqD,CAAC;AAElG,MAAM,MAAM,WAAW,GAAG,oBAAoB,GAAG,UAAU,GAAG,kBAAkB,CAAC;AAEjF,MAAM,MAAM,YAAY,GAAG,gBAAgB,GACzC,SAAS,CAAC,WAAW,EAAE,UAAU,CAAC,GAAG;IAAE,QAAQ,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAE7F,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,YAAY,EAAE,UAAU,CAAC,GAClE,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,EAAE,SAAS,CAAC,GAAG;IACvC,WAAW,EAAE,kBAAkB,CAAC;IAChC,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC"}

package/dist/types/src/components/Toolbar/index.d.ts

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

package/dist/types/src/components/Toolbar/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Toolbar/index.ts"],"names":[],"mappings":"AAIA,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC"}

package/src/components/Toolbar/Toolbar.tsx

@@ -1,71 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { useCallback } from 'react';
-
-import { Toolbar as NaturalToolbar } from '@dxos/react-ui';
-
-import { ToolbarDropdownMenu } from './ToolbarDropdownMenu';
-import { ToolbarToggleGroup } from './ToolbarToggleGroup';
-import { isMenu, isSeparator, type ToolbarProps } from './defs';
-import { type MenuAction } from '../../defs';
-import { ActionLabel } from '../ActionLabel';
-
-const ToolbarItem = ({
-  iconSize,
-  action,
-  onAction,
-}: Pick<ToolbarProps, 'iconSize' | 'onAction'> & {
-  action: MenuAction;
-}) => {
-  const handleClick = useCallback(() => {
-    onAction?.(action);
-  }, [action, onAction]);
-  const { icon, iconOnly = true, disabled, testId } = action.properties;
-  return (
-    <NaturalToolbar.IconButton
-      key={action.id}
-      iconOnly={iconOnly}
-      variant='ghost'
-      icon={icon}
-      size={iconSize}
-      label={<ActionLabel action={action} />}
-      disabled={disabled}
-      onClick={handleClick}
-      {...(testId && { 'data-testid': testId })}
-    />
-  );
-};
-
-export const Toolbar = ({ actions: items, onAction, iconSize = 5, graph, ...props }: ToolbarProps) => {
-  return (
-    <NaturalToolbar.Root {...props}>
-      {items?.map((item, i) =>
-        isSeparator(item) ? (
-          <NaturalToolbar.Separator key={i} variant={item.properties.variant} />
-        ) : isMenu(item) ? (
-          item.properties.variant === 'dropdownMenu' ? (
-            <ToolbarDropdownMenu
-              key={item.id}
-              actionGroup={item}
-              onAction={onAction}
-              iconSize={iconSize}
-              graph={graph}
-            />
-          ) : (
-            <ToolbarToggleGroup
-              key={item.id}
-              actionGroup={item}
-              onAction={onAction}
-              iconSize={iconSize}
-              graph={graph}
-            />
-          )
-        ) : (
-          <ToolbarItem key={item.id} action={item as MenuAction} onAction={onAction} iconSize={iconSize} />
-        ),
-      )}
-    </NaturalToolbar.Root>
-  );
-};

package/src/components/Toolbar/ToolbarDropdownMenu.tsx

@@ -1,36 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { useMemo, useRef } from 'react';
-
-import { Toolbar as NaturalToolbar } from '@dxos/react-ui';
-
-import { type ToolbarActionGroupProps } from './defs';
-import { type MenuAction } from '../../defs';
-import { ActionLabel } from '../ActionLabel';
-import { DropdownMenu } from '../DropdownMenu';
-
-export const ToolbarDropdownMenu = ({ actionGroup, graph, onAction, applyActiveIcon }: ToolbarActionGroupProps) => {
-  const menuActions = useMemo(() => (graph ? graph.actions(actionGroup) : []) as MenuAction[], [actionGroup, graph]);
-  const { icon, iconOnly = true, disabled, testId } = actionGroup.properties;
-  const suppressNextTooltip = useRef(false);
-
-  return (
-    <DropdownMenu.Root actions={menuActions} onAction={onAction} suppressNextTooltip={suppressNextTooltip}>
-      <DropdownMenu.Trigger asChild>
-        <NaturalToolbar.IconButton
-          size={5}
-          variant='ghost'
-          iconOnly={iconOnly}
-          disabled={disabled}
-          icon={(applyActiveIcon && menuActions.find((action) => !!action.properties.checked)?.properties.icon) || icon}
-          label={<ActionLabel action={actionGroup} />}
-          {...(testId && { 'data-testid': testId })}
-          suppressNextTooltip={suppressNextTooltip}
-          caretDown
-        />
-      </DropdownMenu.Trigger>
-    </DropdownMenu.Root>
-  );
-};

package/src/components/Toolbar/ToolbarToggleGroup.tsx

@@ -1,39 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { useMemo } from 'react';
-
-import { Toolbar as NaturalToolbar } from '@dxos/react-ui';
-
-import type { ToolbarActionGroupProps } from './defs';
-import { type MenuAction } from '../../defs';
-import { ActionLabel } from '../ActionLabel';
-
-const ToolbarToggleGroupItem = ({ action }: { action: MenuAction }) => {
-  const { icon, iconOnly, disabled } = action.properties;
-  return (
-    <NaturalToolbar.ToggleGroupIconItem
-      key={action.id}
-      value={action.id}
-      icon={icon}
-      iconOnly={iconOnly}
-      disabled={disabled}
-      label={<ActionLabel action={action} />}
-    />
-  );
-};
-
-export const ToolbarToggleGroup = ({ actionGroup, graph }: ToolbarActionGroupProps) => {
-  const menuActions = useMemo(() => (graph ? (graph.actions(actionGroup) as MenuAction[]) : []), [actionGroup, graph]);
-  const { selectCardinality, value } = actionGroup.properties;
-  return (
-    // TODO(thure): This is extremely difficult to manage, what do?
-    // @ts-ignore
-    <NaturalToolbar.ToggleGroup type={selectCardinality} value={value}>
-      {menuActions.map((action) => (
-        <ToolbarToggleGroupItem key={action.id} action={action} />
-      ))}
-    </NaturalToolbar.ToggleGroup>
-  );
-};

package/src/components/Toolbar/defs.ts

@@ -1,36 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { type Node, type ActionGroup, type Graph, ACTION_GROUP_TYPE } from '@dxos/app-graph';
-import { type ToolbarRootProps, type ToolbarSeparatorProps, type IconButtonProps } from '@dxos/react-ui';
-
-import { type MenuAction, type MenuActionProperties, type MenuProps } from '../../defs';
-
-export const ToolbarSeparatorType = '@dxos/react-ui-toolbar/separator' as const;
-
-export type ToolbarSeparatorNode = Node<never, Pick<ToolbarSeparatorProps, 'variant'>> & {
-  type: typeof ToolbarSeparatorType;
-};
-
-export const isSeparator = (node: Node): node is ToolbarSeparatorNode => node.type === ToolbarSeparatorType;
-
-export type ToolbarActionGroupProperties = Omit<MenuActionProperties, 'variant'> & {
-  variant: 'dropdownMenu' | 'toggleGroup';
-} & ({ selectCardinality?: 'single'; value?: string } | { selectCardinality?: 'multiple'; value?: string[] });
-
-export type ToolbarActionGroup = ActionGroup<ToolbarActionGroupProperties>;
-
-export const isMenu = (node: Node): node is ToolbarActionGroup => node.type === ACTION_GROUP_TYPE;
-
-export type ToolbarItem = ToolbarSeparatorNode | MenuAction | ToolbarActionGroup;
-
-export type ToolbarProps = ToolbarRootProps &
-  MenuProps<ToolbarItem, MenuAction> & { iconSize?: IconButtonProps['size']; graph?: Graph };
-
-export type ToolbarActionGroupProps = Pick<ToolbarProps, 'iconSize'> &
-  Omit<MenuProps<MenuAction>, 'actions'> & {
-    actionGroup: ToolbarActionGroup;
-    graph?: Graph;
-    applyActiveIcon?: boolean;
-  };

package/src/components/Toolbar/index.ts

@@ -1,6 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-export * from './Toolbar';
-export * from './defs';