@dxos/react-ui-menu 0.8.4-main.f5c0578 → 0.8.4-main.fcc0d83b33

package/src/types.ts

@@ -2,51 +2,63 @@
 // Copyright 2025 DXOS.org
 //
 
-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;
-  icon?: string;
-  value?: string;
-  disabled?: boolean;
-  hidden?: boolean;
-  iconOnly?: boolean;
-  testId?: string;
-  variant?: 'action' | 'toggle';
-  checked?: boolean;
-  classNames?: ClassNameValue;
-};
+import { type Atom } from '@effect-atom/atom-react';
 
-export type MenuItemGroupProperties = {
-  label: Label;
-  icon?: string;
-  iconOnly?: boolean;
-};
+import { Node } from '@dxos/app-graph';
+import { type IconButtonProps, type ToolbarSeparatorProps } from '@dxos/react-ui';
+import { type MenuActionProperties } from '@dxos/ui-types';
 
-export type MenuAction<P extends {} = {}> = Action<P & MenuActionProperties>;
+export type MenuAction<P extends {} = {}> = Node.Action<P & MenuActionProperties>;
 
 export const MenuSeparatorType = '@dxos/react-ui-toolbar/separator' as const;
 
-export type MenuSeparator = Node<never, Pick<ToolbarSeparatorProps, 'variant'>> & {
+export type MenuSeparator = Node.Node<never, Pick<ToolbarSeparatorProps, 'variant'>> & {
   type: typeof MenuSeparatorType;
 };
 
-export const isSeparator = (node: Node): node is MenuSeparator => node.type === MenuSeparatorType;
+export const isSeparator = (node: Node.Node): node is MenuSeparator => node.type === MenuSeparatorType;
 
 export type MenuSingleSelectActionGroup = { selectCardinality: 'single'; value: string };
 export type MenuMultipleSelectActionGroup = { selectCardinality: 'multiple'; value: string[] };
 
-export type MenuItemGroup<P extends Record<string, any> = Record<string, any>> = ActionGroup<P>;
+export type MenuItemGroup<P extends Record<string, any> = Record<string, any>> = Node.ActionGroup<P>;
 
-export const isMenuGroup = (node: Node): node is MenuItemGroup => node.type === ACTION_GROUP_TYPE;
+export const isMenuGroup = (node: Node.Node): node is MenuItemGroup => node.type === Node.ActionGroupType;
 
 export type MenuItem = MenuSeparator | MenuAction | MenuItemGroup;
 
-export type MenuItemsResolver = (group?: MenuItemGroup) => MenuItem[] | null;
+/** Atom-family-style accessor: returns an atom of items for a given group (or root when undefined). */
+export type MenuItemsAccessor = (group?: MenuItemGroup) => Atom.Atom<MenuItem[] | null>;
+
+export type ActionExecutor = (action: MenuAction, params: Node.InvokeProps) => void;
+
+export type MenuItemsMode = 'additive' | 'replacement';
+
+export type AddMenuItemsProps = {
+  id: string;
+  mode: MenuItemsMode;
+  priority?: number;
+  items: MenuItem[];
+  groupFilter?: (group?: MenuItemGroup) => boolean;
+};
+
+export type MenuItems = Omit<AddMenuItemsProps, 'priority'> & { priority: number };
+export type MenuItemsMap = Map<string, MenuItems>;
 
 export type MenuContextValue = {
-  useGroupItems: MenuItemsResolver;
+  /** Atom-family accessor for base menu items, keyed by group (similar to Tree model). */
+  items: MenuItemsAccessor;
   iconSize: IconButtonProps['size'];
   attendableId?: string;
+  /** TODO(burdon): Remove and assume always active if attendableId is undefined. */
+  /** If true, the menu is always active regardless of attention state. */
+  alwaysActive?: boolean;
+  /** Atom holding the current set of imperatively added menu items. */
+  menuItemsAtom: Atom.Atom<MenuItemsMap>;
+  /** Imperatively add menu items to the nearest MenuProvider. */
+  addMenuItems: (props: AddMenuItemsProps) => void;
+  /** Remove previously added menu items by id. */
+  removeMenuItems: (id: string) => void;
+  /** Optional action executor. If provided, will be used instead of default execution. */
+  onAction?: ActionExecutor;
 };

package/src/util.ts

@@ -2,18 +2,31 @@
 // Copyright 2025 DXOS.org
 //
 
-import { ACTION_GROUP_TYPE, ACTION_TYPE, type ActionLike, actionGroupSymbol } from '@dxos/app-graph';
+import * as Effect from 'effect/Effect';
+
+import { Node } from '@dxos/app-graph';
+import { runAndForwardErrors } from '@dxos/effect';
+import { type MenuActionProperties, type MenuItemGroupProperties } from '@dxos/ui-types';
 import { getHostPlatform } from '@dxos/util';
 
-import {
-  type MenuAction,
-  type MenuActionProperties,
-  type MenuItemGroup,
-  type MenuItemGroupProperties,
-  type MenuSeparator,
-} from './types';
+import { type MenuAction, type MenuItemGroup, type MenuSeparator } from './types';
+
+/**
+ * Execute a menu action's Effect with its captured context.
+ * This provides the `_actionContext` layer if available.
+ */
+export const executeMenuAction = async (action: MenuAction, params: Node.InvokeProps = {}): Promise<void> => {
+  let effect = action.data(params);
 
-export const getShortcut = (action: ActionLike) => {
+  // Provide captured action context if available.
+  if (action._actionContext) {
+    effect = effect.pipe(Effect.provide(action._actionContext));
+  }
+
+  await runAndForwardErrors(effect);
+};
+
+export const getShortcut = (action: Node.ActionLike) => {
   return typeof action.properties?.keyBinding === 'string'
     ? action.properties.keyBinding
     : action.properties?.keyBinding?.[getHostPlatform()];
@@ -28,9 +41,9 @@ export const createMenuAction = <P extends {} = {}>(
 ) =>
   ({
     id,
-    type: ACTION_TYPE,
+    type: Node.ActionType,
     properties,
-    data: invoke,
+    data: () => Effect.sync(invoke),
   }) satisfies MenuAction;
 
 export const createMenuItemGroup = <
@@ -41,9 +54,9 @@ export const createMenuItemGroup = <
 ) =>
   ({
     id,
-    type: ACTION_GROUP_TYPE,
+    type: Node.ActionGroupType,
     properties,
-    data: actionGroupSymbol,
+    data: Node.actionGroupSymbol,
   }) satisfies MenuItemGroup;
 
 export const createGapSeparator = (id: string = 'gap', source: string = 'root') => ({
@@ -55,7 +68,13 @@ export const createGapSeparator = (id: string = 'gap', source: string = 'root')
       data: undefined as never,
     } satisfies MenuSeparator,
   ],
-  edges: [{ source, target: id }],
+  edges: [
+    {
+      source,
+      target: id,
+      relation: 'child' as const,
+    },
+  ],
 });
 
 export const createLineSeparator = (id: string = 'line', source: string = 'root') => ({
@@ -67,5 +86,5 @@ export const createLineSeparator = (id: string = 'line', source: string = 'root'
       data: undefined as never,
     } satisfies MenuSeparator,
   ],
-  edges: [{ source, target: id }],
+  edges: [{ source, target: id, relation: 'child' as const }],
 });

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

@@ -1,13 +0,0 @@
-import { type Scope } from '@radix-ui/react-context';
-import React, { type PropsWithChildren } from 'react';
-import { type MenuContextValue, type MenuItem, type MenuItemGroup } from '../types';
-export type MenuScopedProps<P> = P & {
-    __menuScope?: Scope;
-};
-declare const createMenuScope: import("@radix-ui/react-context").CreateScope;
-declare const useMenu: (consumerName: string, scope: Scope<MenuContextValue | undefined>) => MenuContextValue;
-export declare const menuContextDefaults: MenuContextValue;
-declare const MenuProvider: ({ children, useGroupItems, iconSize, attendableId, }: PropsWithChildren<Partial<MenuContextValue>>) => React.JSX.Element;
-export declare const useMenuItems: (group?: MenuItemGroup, propsItems?: MenuItem[], consumerName?: string, __menuScope?: Scope) => MenuItem[] | undefined;
-export { useMenu, createMenuScope, MenuProvider };
-//# sourceMappingURL=MenuContext.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"MenuContext.d.ts","sourceRoot":"","sources":["../../../../src/components/MenuContext.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,KAAK,EAAsB,MAAM,yBAAyB,CAAC;AACzE,OAAO,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAW,MAAM,OAAO,CAAC;AAE/D,OAAO,EAAE,KAAK,gBAAgB,EAAE,KAAK,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,UAAU,CAAC;AAEpF,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI,CAAC,GAAG;IAAE,WAAW,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAI7D,QAAA,MAA0B,eAAe,+CAAqC,CAAC;AAE/E,QAAA,MAA4B,OAAO,wFAAkD,CAAC;AAEtF,eAAO,MAAM,mBAAmB,EAAE,gBAGjC,CAAC;AAIF,QAAA,MAAM,YAAY,GAAI,sDAKnB,iBAAiB,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,sBAO9C,CAAC;AAEF,eAAO,MAAM,YAAY,GACvB,QAAQ,aAAa,EACrB,aAAa,QAAQ,EAAE,EACvB,eAAc,MAA8B,EAC5C,cAAc,KAAK,2BAKpB,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,CAAC"}

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

@@ -1,25 +0,0 @@
-import '@dxos-theme';
-import React from 'react';
-declare const _default: {
-    title: string;
-    component: ({ __menuScope, classNames, textBlockWidth: wrapContents, ...props }: import("./MenuContext").MenuScopedProps<import("./ToolbarMenu").ToolbarMenuProps>) => React.JSX.Element;
-    decorators: import("@storybook/react").Decorator[];
-    parameters: {
-        translations: [{
-            readonly 'en-US': {
-                readonly "react-ui-menu": {};
-            };
-        }];
-    };
-};
-export default _default;
-export declare const DropdownMenu: {
-    render: () => React.JSX.Element;
-};
-export declare const Toolbar: {
-    render: () => React.JSX.Element;
-};
-export declare const UseMenuActionsToolbar: {
-    render: () => React.JSX.Element;
-};
-//# sourceMappingURL=Menus.stories.d.ts.map

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

package/src/components/MenuContext.tsx

@@ -1,50 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-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';
-
-export type MenuScopedProps<P> = P & { __menuScope?: Scope };
-
-const MENU_NAME = 'GraphMenu';
-
-const [createMenuContext, createMenuScope] = createContextScope(MENU_NAME, []);
-
-const [MenuContextProvider, useMenu] = createMenuContext<MenuContextValue>(MENU_NAME);
-
-export const menuContextDefaults: MenuContextValue = {
-  iconSize: 5,
-  useGroupItems: () => null,
-};
-
-const useMenuScope = createMenuScope();
-
-const MenuProvider = ({
-  children,
-  useGroupItems = menuContextDefaults.useGroupItems,
-  iconSize = menuContextDefaults.iconSize,
-  attendableId,
-}: PropsWithChildren<Partial<MenuContextValue>>) => {
-  const { scope } = useMenuScope(undefined);
-  return (
-    <MenuContextProvider useGroupItems={useGroupItems} iconSize={iconSize} attendableId={attendableId} scope={scope}>
-      {children}
-    </MenuContextProvider>
-  );
-};
-
-export const useMenuItems = (
-  group?: MenuItemGroup,
-  propsItems?: MenuItem[],
-  consumerName: string = 'useMenuItemConsumer',
-  __menuScope?: Scope,
-) => {
-  const { useGroupItems } = useMenu(consumerName, __menuScope);
-  const groupItems = useGroupItems(group);
-  return useMemo(() => propsItems ?? groupItems ?? undefined, [propsItems, groupItems]);
-};
-
-export { useMenu, createMenuScope, MenuProvider };

package/src/components/Menus.stories.tsx

@@ -1,69 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import '@dxos-theme';
-import React, { useCallback, useMemo } from 'react';
-
-import { faker } from '@dxos/random';
-import { IconButton } from '@dxos/react-ui';
-import { withTheme } from '@dxos/storybook-utils';
-
-import { MenuProvider, DropdownMenu as NaturalDropdownMenu, ToolbarMenu } from '../components';
-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],
-  parameters: {
-    translations,
-  },
-};
-
-export const DropdownMenu = {
-  render: () => {
-    const menuActions = useMemo(() => createActions() as MenuAction[], []);
-    const resolveGroupItems = useCallback(() => menuActions, [menuActions]);
-    useMutateActions(menuActions);
-
-    return (
-      <MenuProvider useGroupItems={resolveGroupItems}>
-        <NaturalDropdownMenu.Root>
-          <NaturalDropdownMenu.Trigger asChild>
-            <IconButton icon='ph--list-checks--regular' size={5} label='Options' />
-          </NaturalDropdownMenu.Trigger>
-        </NaturalDropdownMenu.Root>
-      </MenuProvider>
-    );
-  },
-};
-
-export const Toolbar = {
-  render: () => {
-    const nestedMenuActions = useMemo(() => createNestedActionsResolver(), []);
-
-    return (
-      <MenuProvider {...nestedMenuActions}>
-        <ToolbarMenu />
-      </MenuProvider>
-    );
-  },
-};
-
-export const UseMenuActionsToolbar = {
-  render: () => {
-    const menu = useMenuActions(createNestedActions);
-
-    return (
-      <MenuProvider {...menu}>
-        <ToolbarMenu />
-      </MenuProvider>
-    );
-  },
-};