@dxos/react-ui-menu 0.8.2-main.f11618f → 0.8.2-main.fbd8ed0

package/dist/types/src/{testing → components}/Menus.stories.d.ts

@@ -2,7 +2,7 @@ import '@dxos-theme';
 import React from 'react';
 declare const _default: {
     title: string;
-    component: ({ __menuScope, classNames, ...props }: import("..").MenuScopedProps<import("..").ToolbarMenuProps>) => React.JSX.Element;
+    component: ({ __menuScope, classNames, ...props }: import("./MenuContext").MenuScopedProps<import("./ToolbarMenu").ToolbarMenuProps>) => React.JSX.Element;
     decorators: import("@storybook/react").Decorator[];
     parameters: {
         translations: readonly [{

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

@@ -0,0 +1 @@
+{"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/components/ToolbarMenu.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { type ToolbarRootProps } from '@dxos/react-ui';
 import { type MenuScopedProps } from './MenuContext';
-import { type MenuItem, type MenuItemGroup, type MenuActionProperties, type MenuMultipleSelectActionGroup, type MenuSingleSelectActionGroup } from '../defs';
+import { type MenuAction, type MenuItem, type MenuItemGroup, type MenuActionProperties, type MenuMultipleSelectActionGroup, type MenuSingleSelectActionGroup } from '../types';
 export type ToolbarMenuDropdownMenuActionGroup = Omit<MenuActionProperties, 'variant' | 'icon'> & {
     variant: 'dropdownMenu';
     icon: string;
@@ -16,5 +16,9 @@ export type ToolbarMenuActionGroupProps = {
     group: MenuItemGroup<ToolbarMenuActionGroupProperties>;
     items?: MenuItem[];
 };
+export type ToolbarMenuActionProps = {
+    group: MenuItemGroup<ToolbarMenuActionGroupProperties>;
+    action: MenuAction;
+};
 export declare const ToolbarMenu: ({ __menuScope, classNames, ...props }: MenuScopedProps<ToolbarMenuProps>) => React.JSX.Element;
 //# sourceMappingURL=ToolbarMenu.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ToolbarMenu.d.ts","sourceRoot":"","sources":["../../../../src/components/ToolbarMenu.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAyD,KAAK,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAK9G,OAAO,EAAE,KAAK,eAAe,EAAyB,MAAM,eAAe,CAAC;AAC5E,OAAO,EAEL,KAAK,QAAQ,EAGb,KAAK,aAAa,EAClB,KAAK,oBAAoB,EACzB,KAAK,6BAA6B,EAClC,KAAK,2BAA2B,EACjC,MAAM,SAAS,CAAC;AAEjB,MAAM,MAAM,kCAAkC,GAAG,IAAI,CAAC,oBAAoB,EAAE,SAAS,GAAG,MAAM,CAAC,GAAG;IAChG,OAAO,EAAE,cAAc,CAAC;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,iCAAiC,GAAG,IAAI,CAAC,oBAAoB,EAAE,SAAS,CAAC,GAAG;IACtF,OAAO,EAAE,aAAa,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,gCAAgC,GAAG,CAC3C,kCAAkC,GAClC,iCAAiC,CACpC,GACC,CAAC,2BAA2B,GAAG,6BAA6B,CAAC,CAAC;AAEhE,MAAM,MAAM,gBAAgB,GAAG,gBAAgB,CAAC;AAEhD,MAAM,MAAM,2BAA2B,GAAG;IACxC,KAAK,EAAE,aAAa,CAAC,gCAAgC,CAAC,CAAC;IACvD,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAC;CACpB,CAAC;AAiHF,eAAO,MAAM,WAAW,0CAA2C,eAAe,CAAC,gBAAgB,CAAC,sBA2BnG,CAAC"}
+{"version":3,"file":"ToolbarMenu.d.ts","sourceRoot":"","sources":["../../../../src/components/ToolbarMenu.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAmC,KAAK,gBAAgB,EAAkB,MAAM,gBAAgB,CAAC;AAKxG,OAAO,EAAE,KAAK,eAAe,EAAyB,MAAM,eAAe,CAAC;AAE5E,OAAO,EACL,KAAK,UAAU,EACf,KAAK,QAAQ,EAGb,KAAK,aAAa,EAClB,KAAK,oBAAoB,EACzB,KAAK,6BAA6B,EAClC,KAAK,2BAA2B,EACjC,MAAM,UAAU,CAAC;AAElB,MAAM,MAAM,kCAAkC,GAAG,IAAI,CAAC,oBAAoB,EAAE,SAAS,GAAG,MAAM,CAAC,GAAG;IAChG,OAAO,EAAE,cAAc,CAAC;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,iCAAiC,GAAG,IAAI,CAAC,oBAAoB,EAAE,SAAS,CAAC,GAAG;IACtF,OAAO,EAAE,aAAa,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,gCAAgC,GAAG,CAC3C,kCAAkC,GAClC,iCAAiC,CACpC,GACC,CAAC,2BAA2B,GAAG,6BAA6B,CAAC,CAAC;AAEhE,MAAM,MAAM,gBAAgB,GAAG,gBAAgB,CAAC;AAEhD,MAAM,MAAM,2BAA2B,GAAG;IACxC,KAAK,EAAE,aAAa,CAAC,gCAAgC,CAAC,CAAC;IACvD,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACnC,KAAK,EAAE,aAAa,CAAC,gCAAgC,CAAC,CAAC;IACvD,MAAM,EAAE,UAAU,CAAC;CACpB,CAAC;AAyGF,eAAO,MAAM,WAAW,GAAI,uCAAuC,eAAe,CAAC,gBAAgB,CAAC,sBA2BnG,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1 @@
+{"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/index.d.ts

@@ -1,5 +1,5 @@
 export * from './components';
-export * from './defs';
 export * from './hooks';
+export * from './types';
 export { createMenuAction, createMenuItemGroup, createLineSeparator, createGapSeparator } from './util';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,QAAQ,CAAC"}

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

@@ -0,0 +1,26 @@
+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

@@ -0,0 +1 @@
+{"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/testing/index.d.ts

@@ -1,26 +1,2 @@
-import { type Action, ACTION_TYPE, ACTION_GROUP_TYPE } from '@dxos/app-graph';
-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;
-}>;
-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;
+export * from './generator';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/testing/index.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,MAAM,EAAuB,WAAW,EAAE,iBAAiB,EAAqB,MAAM,iBAAiB,CAAC;AAKtH,OAAO,EAAE,KAAK,UAAU,EAAE,KAAK,aAAa,EAAE,KAAK,QAAQ,EAAE,MAAM,SAAS,CAAC;AAC7E,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAEjD,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,YAAa,mBAAmB;;;0BAvBxC,IAAI;;;;;;;IAyCrB,CAAC;AAEF,eAAO,MAAM,mBAAmB,wBAY/B,CAAC;AAEF,eAAO,MAAM,2BAA2B,iBAAkB,mBAAmB,WAAW,mBAAmB;oCAgBlE,aAAa,KACE,QAAQ,EAAE,GAAG,IAAI;CAExE,CAAC;AAEF,eAAO,MAAM,uBAAuB,YAAa,MAAM,EAAE,mBAUxD,CAAC;AAEF,eAAO,MAAM,gBAAgB,YAAa,UAAU,EAAE,SAI9C,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/testing/index.ts"],"names":[],"mappings":"AAIA,cAAc,aAAa,CAAC"}

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

@@ -18,7 +18,6 @@ export type MenuItemGroupProperties = {
     iconOnly?: boolean;
 };
 export type MenuAction<P extends {} = {}> = Action<P & MenuActionProperties>;
-export type MenuActionHandler<A extends Node = MenuAction> = (action: A) => void;
 export declare const MenuSeparatorType: "@dxos/react-ui-toolbar/separator";
 export type MenuSeparator = Node<never, Pick<ToolbarSeparatorProps, 'variant'>> & {
     type: typeof MenuSeparatorType;
@@ -36,10 +35,9 @@ export type MenuItemGroup<P extends Record<string, any> = Record<string, any>> =
 export declare const isMenuGroup: (node: Node) => node is MenuItemGroup;
 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;
 };
-//# sourceMappingURL=defs.d.ts.map
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"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/dist/types/src/util.d.ts

@@ -1,8 +1,8 @@
 import { actionGroupSymbol, type ActionLike } from '@dxos/app-graph';
-import { type MenuActionProperties, type MenuItemGroupProperties } from './defs';
+import { type MenuActionProperties, type MenuItemGroupProperties } from './types';
 export declare const getShortcut: (action: ActionLike) => any;
 export declare const fallbackIcon = "ph--placeholder--regular";
-export declare const createMenuAction: <P extends {} = {}>(id: string, properties: P & MenuActionProperties) => {
+export declare const createMenuAction: <P extends {} = {}>(id: string, invoke: () => void, properties: P & MenuActionProperties) => {
     id: string;
     type: string;
     properties: P & MenuActionProperties;

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

@@ -1 +1 @@
-{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../../src/util.ts"],"names":[],"mappings":"AAIA,OAAO,EAAkC,iBAAiB,EAAE,KAAK,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAGrG,OAAO,EAEL,KAAK,oBAAoB,EAEzB,KAAK,uBAAuB,EAE7B,MAAM,QAAQ,CAAC;AAEhB,eAAO,MAAM,WAAW,WAAY,UAAU,QAI7C,CAAC;AAEF,eAAO,MAAM,YAAY,6BAA6B,CAAC;AAMvD,eAAO,MAAM,gBAAgB,GAAI,CAAC,SAAS,EAAE,WAAW,MAAM,cAAc,CAAC,GAAG,oBAAoB;;;;;CAM3E,CAAC;AAE1B,eAAO,MAAM,mBAAmB,GAC9B,CAAC,SAAS,uBAAuB,gEAE7B,MAAM,cACE,CAAC;;;;;CAOa,CAAC;AAE7B,eAAO,MAAM,kBAAkB,QAAQ,MAAM,WAAkB,MAAM;;;;;;;cAM5C,KAAK;;;;;;CAI5B,CAAC;AAEH,eAAO,MAAM,mBAAmB,QAAQ,MAAM,WAAmB,MAAM;;;;;;;cAM9C,KAAK;;;;;;CAI5B,CAAC"}
+{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../../src/util.ts"],"names":[],"mappings":"AAIA,OAAO,EAAkC,iBAAiB,EAAE,KAAK,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAGrG,OAAO,EAEL,KAAK,oBAAoB,EAEzB,KAAK,uBAAuB,EAE7B,MAAM,SAAS,CAAC;AAEjB,eAAO,MAAM,WAAW,GAAI,QAAQ,UAAU,QAI7C,CAAC;AAEF,eAAO,MAAM,YAAY,6BAA6B,CAAC;AAEvD,eAAO,MAAM,gBAAgB,GAAI,CAAC,SAAS,EAAE,GAAG,EAAE,EAChD,IAAI,MAAM,EACV,QAAQ,MAAM,IAAI,EAClB,YAAY,CAAC,GAAG,oBAAoB;;;;gBADtB,IAAI;CAQK,CAAC;AAE1B,eAAO,MAAM,mBAAmB,GAC9B,CAAC,SAAS,uBAAuB,GAAG,uBAAuB,GAAG,OAAO,CAAC,oBAAoB,CAAC,EAE3F,IAAI,MAAM,EACV,YAAY,CAAC;;;;;CAOa,CAAC;AAE7B,eAAO,MAAM,kBAAkB,GAAI,KAAI,MAAc,EAAE,SAAQ,MAAe;;;;;;;cAMrD,KAAK;;;;;;CAI5B,CAAC;AAEH,eAAO,MAAM,mBAAmB,GAAI,KAAI,MAAe,EAAE,SAAQ,MAAe;;;;;;;cAMvD,KAAK;;;;;;CAI5B,CAAC"}

package/dist/types/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"version":"5.7.3"}
+{"version":"5.8.3"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-menu",
-  "version": "0.8.2-main.f11618f",
+  "version": "0.8.2-main.fbd8ed0",
   "description": "Components for facilitating reactive and consistent menus.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -27,28 +27,34 @@
     "@preact/signals-react": "^1.3.8",
     "@radix-ui/react-context": "1.1.1",
     "@radix-ui/react-use-controllable-state": "1.1.0",
-    "@dxos/app-graph": "0.8.2-main.f11618f",
-    "@dxos/keyboard": "0.8.2-main.f11618f",
-    "@dxos/react-ui-attention": "0.8.2-main.f11618f",
-    "@dxos/util": "0.8.2-main.f11618f"
+    "@dxos/app-graph": "0.8.2-main.fbd8ed0",
+    "@dxos/keyboard": "0.8.2-main.fbd8ed0",
+    "@dxos/react-ui-attention": "0.8.2-main.fbd8ed0",
+    "@dxos/util": "0.8.2-main.fbd8ed0"
   },
   "devDependencies": {
+    "@effect-rx/rx-react": "^0.34.1",
+    "@effect/platform": "0.80.12",
     "@types/react": "~18.2.0",
     "@types/react-dom": "~18.2.0",
+    "effect": "3.14.21",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/live-object": "0.8.2-main.f11618f",
-    "@dxos/random": "0.8.2-main.f11618f",
-    "@dxos/react-ui": "0.8.2-main.f11618f",
-    "@dxos/react-ui-theme": "0.8.2-main.f11618f",
-    "@dxos/storybook-utils": "0.8.2-main.f11618f"
+    "@dxos/live-object": "0.8.2-main.fbd8ed0",
+    "@dxos/react-ui": "0.8.2-main.fbd8ed0",
+    "@dxos/random": "0.8.2-main.fbd8ed0",
+    "@dxos/react-ui-theme": "0.8.2-main.fbd8ed0",
+    "@dxos/storybook-utils": "0.8.2-main.fbd8ed0"
   },
   "peerDependencies": {
+    "@effect-rx/rx-react": "^0.34.1",
+    "@effect/platform": "0.80.12",
+    "effect": "^3.13.3",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.2-main.f11618f",
-    "@dxos/react-ui-theme": "0.8.2-main.f11618f"
+    "@dxos/react-ui-theme": "0.8.2-main.fbd8ed0",
+    "@dxos/react-ui": "0.8.2-main.fbd8ed0"
   },
   "publishConfig": {
     "access": "public"

package/src/components/ActionLabel.tsx

@@ -4,20 +4,18 @@
 
 import React from 'react';
 
-import { type Action, type ActionGroup } from '@dxos/app-graph';
+import { type Action as GraphAction, type ActionGroup } from '@dxos/app-graph';
 import { keySymbols } from '@dxos/keyboard';
-import { toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { toLocalizedString, useTranslation, type TFunction } from '@dxos/react-ui';
 import { mx, descriptionText } from '@dxos/react-ui-theme';
 
-import { type MenuActionProperties } from '../defs';
 import { translationKey } from '../translations';
+import { type MenuActionProperties } from '../types';
 import { getShortcut } from '../util';
 
-export const ActionLabel = ({
-  action,
-}: {
-  action: Action<MenuActionProperties> | ActionGroup<Omit<MenuActionProperties, 'variant'>>;
-}) => {
+type Action = GraphAction<MenuActionProperties> | ActionGroup<Omit<MenuActionProperties, 'variant'>>;
+
+export const ActionLabel = ({ action }: { action: Action }) => {
   const shortcut = getShortcut(action);
   const { t } = useTranslation(translationKey);
 
@@ -28,3 +26,8 @@ export const ActionLabel = ({
     </>
   );
 };
+
+export const actionLabel = (action: Action, t: TFunction) => {
+  const shortcut = getShortcut(action);
+  return `${toLocalizedString(action.properties!.label, t)}${shortcut ? ` (${keySymbols(shortcut).join('')})` : ''}`;
+};

package/src/components/DropdownMenu.tsx

@@ -9,12 +9,13 @@ import { DropdownMenu as NaturalDropdownMenu, Icon, type DropdownMenuRootProps }
 
 import { ActionLabel } from './ActionLabel';
 import { type MenuScopedProps, useMenu, useMenuItems } from './MenuContext';
-import { type MenuAction, type MenuItem, type MenuItemGroup } from '../defs';
+import { type MenuAction, type MenuItem, type MenuItemGroup } from '../types';
 
 export type DropdownMenuProps = DropdownMenuRootProps & {
   group?: MenuItemGroup;
   items?: MenuItem[];
   suppressNextTooltip?: MutableRefObject<boolean>;
+  caller?: string;
 };
 
 const DropdownMenuItem = ({
@@ -49,6 +50,7 @@ const DropdownMenuRoot = ({
   defaultOpen,
   onOpenChange,
   suppressNextTooltip,
+  caller,
   children,
   __menuScope,
   ...naturalProps
@@ -59,8 +61,6 @@ const DropdownMenuRoot = ({
     onChange: onOpenChange,
   });
 
-  const { onAction } = useMenu('DropdownMenuRoot', __menuScope);
-
   const handleActionClick = useCallback(
     (action: MenuAction, event: MouseEvent) => {
       if (action.properties?.disabled) {
@@ -72,9 +72,9 @@ const DropdownMenuRoot = ({
         suppressNextTooltip.current = true;
       }
       setOptionsMenuOpen(false);
-      onAction?.(action);
+      void action.data?.({ parent: group, caller });
     },
-    [onAction],
+    [suppressNextTooltip, group, caller],
   );
 
   const items = useMenuItems(group, propsItems);

package/src/components/MenuContext.tsx

@@ -5,15 +5,7 @@
 import { createContextScope, type Scope } from '@radix-ui/react-context';
 import React, { type PropsWithChildren, useMemo } from 'react';
 
-import { type Node } from '@dxos/app-graph';
-
-import {
-  type MenuActionHandler,
-  type MenuAction,
-  type MenuContextValue,
-  type MenuItem,
-  type MenuItemGroup,
-} from '../defs';
+import { type MenuContextValue, type MenuItem, type MenuItemGroup } from '../types';
 
 export type MenuScopedProps<P> = P & { __menuScope?: Scope };
 
@@ -21,32 +13,24 @@ const MENU_NAME = 'GraphMenu';
 
 const [createMenuContext, createMenuScope] = createContextScope(MENU_NAME, []);
 
-const [MenuContextProvider, useMenu] = createMenuContext<MenuContextValue<any>>(MENU_NAME);
+const [MenuContextProvider, useMenu] = createMenuContext<MenuContextValue>(MENU_NAME);
 
-export const menuContextDefaults: MenuContextValue<MenuAction> = {
+export const menuContextDefaults: MenuContextValue = {
   iconSize: 5,
-  onAction: () => {},
-  resolveGroupItems: () => null,
+  useGroupItems: () => null,
 };
 
 const useMenuScope = createMenuScope();
 
-const MenuProvider = <A extends Node = MenuAction>({
+const MenuProvider = ({
   children,
-  resolveGroupItems = menuContextDefaults.resolveGroupItems,
-  onAction = menuContextDefaults.onAction as MenuActionHandler<A>,
+  useGroupItems = menuContextDefaults.useGroupItems,
   iconSize = menuContextDefaults.iconSize,
   attendableId,
-}: PropsWithChildren<Partial<MenuContextValue<A>>>) => {
+}: PropsWithChildren<Partial<MenuContextValue>>) => {
   const { scope } = useMenuScope(undefined);
   return (
-    <MenuContextProvider
-      resolveGroupItems={resolveGroupItems}
-      onAction={onAction}
-      iconSize={iconSize}
-      attendableId={attendableId}
-      scope={scope}
-    >
+    <MenuContextProvider useGroupItems={useGroupItems} iconSize={iconSize} attendableId={attendableId} scope={scope}>
       {children}
     </MenuContextProvider>
   );
@@ -58,8 +42,9 @@ export const useMenuItems = (
   consumerName: string = 'useMenuItemConsumer',
   __menuScope?: Scope,
 ) => {
-  const { resolveGroupItems } = useMenu(consumerName, __menuScope);
-  return useMemo(() => propsItems ?? resolveGroupItems?.(group) ?? undefined, [propsItems, group, resolveGroupItems]);
+  const { useGroupItems } = useMenu(consumerName, __menuScope);
+  const groupItems = useGroupItems(group);
+  return useMemo(() => propsItems ?? groupItems ?? undefined, [propsItems, groupItems]);
 };
 
 export { useMenu, createMenuScope, MenuProvider };

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

@@ -3,38 +3,35 @@
 //
 
 import '@dxos-theme';
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } 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({ tooltips: true }), withSignals],
+  decorators: [withTheme, withLayout(), 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 resolveGroupItems={resolveGroupItems} onAction={handleAction as MenuActionHandler}>
+      <MenuProvider useGroupItems={resolveGroupItems}>
         <NaturalDropdownMenu.Root>
           <NaturalDropdownMenu.Trigger asChild>
             <IconButton icon='ph--list-checks--regular' size={5} label='Options' />
@@ -47,8 +44,10 @@ export const DropdownMenu = {
 
 export const Toolbar = {
   render: () => {
+    const nestedMenuActions = useMemo(() => createNestedActionsResolver(), []);
+
     return (
-      <MenuProvider onAction={handleAction as MenuActionHandler} {...nestedMenuActions}>
+      <MenuProvider {...nestedMenuActions}>
         <ToolbarMenu />
       </MenuProvider>
     );
@@ -58,8 +57,9 @@ export const Toolbar = {
 export const UseMenuActionsToolbar = {
   render: () => {
     const menu = useMenuActions(createNestedActions);
+
     return (
-      <MenuProvider onAction={handleAction as MenuActionHandler} {...menu}>
+      <MenuProvider {...menu}>
         <ToolbarMenu />
       </MenuProvider>
     );

package/src/components/ToolbarMenu.tsx

@@ -4,12 +4,13 @@
 
 import React, { useCallback, useRef } from 'react';
 
-import { Icon, type IconButtonProps, Toolbar as NaturalToolbar, type ToolbarRootProps } from '@dxos/react-ui';
+import { Icon, Toolbar as NaturalToolbar, type ToolbarRootProps, useTranslation } from '@dxos/react-ui';
 import { useAttention } from '@dxos/react-ui-attention';
 
-import { ActionLabel } from './ActionLabel';
+import { actionLabel, ActionLabel } from './ActionLabel';
 import { DropdownMenu } from './DropdownMenu';
 import { type MenuScopedProps, useMenu, useMenuItems } from './MenuContext';
+import { translationKey } from '../translations';
 import {
   type MenuAction,
   type MenuItem,
@@ -19,7 +20,7 @@ import {
   type MenuActionProperties,
   type MenuMultipleSelectActionGroup,
   type MenuSingleSelectActionGroup,
-} from '../defs';
+} from '../types';
 
 export type ToolbarMenuDropdownMenuActionGroup = Omit<MenuActionProperties, 'variant' | 'icon'> & {
   variant: 'dropdownMenu';
@@ -44,15 +45,19 @@ export type ToolbarMenuActionGroupProps = {
   items?: MenuItem[];
 };
 
+export type ToolbarMenuActionProps = {
+  group: MenuItemGroup<ToolbarMenuActionGroupProperties>;
+  action: MenuAction;
+};
+
 const ActionToolbarItem = ({ action, __menuScope }: MenuScopedProps<{ action: MenuAction }>) => {
-  const { onAction, iconSize } = useMenu('ActionToolbarItem', __menuScope);
-  const handleClick = useCallback(() => {
-    onAction?.(action);
-  }, [action, onAction]);
+  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={action} /> }
+    ? { icon, size: iconSize, iconOnly, label: actionLabel(action, t) }
     : { children: <ActionLabel action={action} /> };
   return hidden ? null : (
     <Root
@@ -61,7 +66,7 @@ const ActionToolbarItem = ({ action, __menuScope }: MenuScopedProps<{ action: Me
       onClick={handleClick}
       variant='ghost'
       {...(testId && { 'data-testid': testId })}
-      {...(rootProps as IconButtonProps)}
+      {...(rootProps as any)}
       classNames={classNames}
     />
   );
@@ -74,6 +79,7 @@ const DropdownMenuToolbarItem = ({
 }: MenuScopedProps<ToolbarMenuActionGroupProps>) => {
   const { iconOnly, disabled, testId } = group.properties;
   const suppressNextTooltip = useRef(false);
+  const { t } = useTranslation(translationKey);
   const { iconSize } = useMenu('DropdownMenuToolbarItem', __menuScope);
   const items = useMenuItems(group, propsItems, 'DropdownMenuToolbarItem', __menuScope);
   const activeItem = items?.find((item) => !!(item as MenuAction).properties.checked);
@@ -83,15 +89,13 @@ const DropdownMenuToolbarItem = ({
       (activeItem as MenuAction)?.properties.icon) ||
     group.properties.icon;
   const Root = icon ? NaturalToolbar.IconButton : NaturalToolbar.Button;
-  const label = (
-    <ActionLabel action={(group.properties as any).applyActive && activeItem ? (activeItem as MenuAction) : group} />
-  );
+  const labelAction = (group.properties as any).applyActive && activeItem ? (activeItem as MenuAction) : group;
   const rootProps = icon
-    ? { icon, size: iconSize, iconOnly, label, caretDown: true, suppressNextTooltip }
+    ? { icon, size: iconSize, iconOnly, label: actionLabel(labelAction, t), caretDown: true, suppressNextTooltip }
     : {
         children: (
           <>
-            {label}
+            <ActionLabel action={labelAction} />
             <Icon size={3} icon='ph--caret-down--bold' classNames='mis-1' />
           </>
         ),
@@ -99,26 +103,20 @@ const DropdownMenuToolbarItem = ({
   return (
     <DropdownMenu.Root group={group} items={items} suppressNextTooltip={suppressNextTooltip}>
       <DropdownMenu.Trigger asChild>
-        <Root
-          variant='ghost'
-          disabled={disabled}
-          {...(rootProps as IconButtonProps)}
-          {...(testId && { 'data-testid': testId })}
-        />
+        <Root variant='ghost' disabled={disabled} {...(rootProps as any)} {...(testId && { 'data-testid': testId })} />
       </DropdownMenu.Trigger>
     </DropdownMenu.Root>
   );
 };
 
-const ToggleGroupItem = ({ action, __menuScope }: MenuScopedProps<{ action: MenuAction }>) => {
-  const { iconSize, onAction } = useMenu('ToggleGroupItem', __menuScope);
+const ToggleGroupItem = ({ group, action, __menuScope }: MenuScopedProps<ToolbarMenuActionProps>) => {
+  const { iconSize } = useMenu('ToggleGroupItem', __menuScope);
+  const { t } = useTranslation(translationKey);
   const { icon, iconOnly = true, disabled, testId, hidden, classNames } = action.properties;
-  const handleClick = useCallback(() => {
-    onAction?.(action);
-  }, [action, onAction]);
+  const handleClick = useCallback(() => action.data?.({ parent: group }), [action, group]);
   const Root = icon ? NaturalToolbar.ToggleGroupIconItem : NaturalToolbar.ToggleGroupItem;
   const rootProps = icon
-    ? { icon, size: iconSize, iconOnly, label: <ActionLabel action={action} /> }
+    ? { icon, size: iconSize, iconOnly, label: actionLabel(action, t) }
     : { children: <ActionLabel action={action} /> };
   return hidden ? null : (
     <Root
@@ -128,7 +126,7 @@ const ToggleGroupItem = ({ action, __menuScope }: MenuScopedProps<{ action: Menu
       onClick={handleClick}
       variant='ghost'
       {...(testId && { 'data-testid': testId })}
-      {...(rootProps as IconButtonProps)}
+      {...(rootProps as any)}
       classNames={classNames}
     />
   );
@@ -148,7 +146,7 @@ const ToggleGroupToolbarItem = ({
       {
         // TODO(thure): Handle other menu item types.
         (items as MenuAction[]).map((action) => (
-          <ToggleGroupItem key={action.id} action={action} />
+          <ToggleGroupItem key={action.id} group={group} action={action} />
         ))
       }
     </NaturalToolbar.ToggleGroup>
@@ -162,7 +160,7 @@ export const ToolbarMenu = ({ __menuScope, classNames, ...props }: MenuScopedPro
   return (
     <NaturalToolbar.Root
       {...props}
-      classNames={['p-0 pointer-fine:p-1 attention-surface', !hasAttention && 'opacity-20', classNames]}
+      classNames={['p-1', !hasAttention && '[&>*]:opacity-20 !bg-transparent', classNames]}
     >
       {items?.map((item: MenuItem, i: number) =>
         isSeparator(item) ? (

package/src/hooks/index.ts

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