@dxos/react-ui-menu 0.9.1-main.c7dcc2e112 → 0.9.1-staging.ee54ba693a

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-menu",
-  "version": "0.9.1-main.c7dcc2e112",
+  "version": "0.9.1-staging.ee54ba693a",
   "description": "Components for facilitating reactive and consistent menus.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -37,39 +37,39 @@
   "dependencies": {
     "@radix-ui/react-context": "1.1.1",
     "@radix-ui/react-use-controllable-state": "1.1.0",
-    "@dxos/app-graph": "0.9.1-main.c7dcc2e112",
-    "@dxos/effect": "0.9.1-main.c7dcc2e112",
-    "@dxos/invariant": "0.9.1-main.c7dcc2e112",
-    "@dxos/log": "0.9.1-main.c7dcc2e112",
-    "@dxos/react-ui-attention": "0.9.1-main.c7dcc2e112",
-    "@dxos/ui-types": "0.9.1-main.c7dcc2e112",
-    "@dxos/util": "0.9.1-main.c7dcc2e112",
-    "@dxos/keyboard": "0.9.1-main.c7dcc2e112"
+    "@dxos/app-graph": "0.9.1-staging.ee54ba693a",
+    "@dxos/invariant": "0.9.1-staging.ee54ba693a",
+    "@dxos/keyboard": "0.9.1-staging.ee54ba693a",
+    "@dxos/effect": "0.9.1-staging.ee54ba693a",
+    "@dxos/react-ui-attention": "0.9.1-staging.ee54ba693a",
+    "@dxos/util": "0.9.1-staging.ee54ba693a",
+    "@dxos/log": "0.9.1-staging.ee54ba693a",
+    "@dxos/ui-types": "0.9.1-staging.ee54ba693a"
   },
   "devDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
-    "@effect/platform": "0.96.1",
+    "@effect/platform": "0.96.2",
     "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.0",
-    "@types/react": "~19.2.7",
+    "@testing-library/react": "^16.3.2",
+    "@types/react": "~19.2.17",
     "@types/react-dom": "~19.2.3",
-    "effect": "3.21.3",
-    "react": "~19.2.3",
-    "react-dom": "~19.2.3",
+    "effect": "3.21.4",
+    "react": "~19.2.7",
+    "react-dom": "~19.2.7",
     "vite": "^8.0.16",
-    "@dxos/react-ui": "0.9.1-main.c7dcc2e112",
-    "@dxos/random": "0.9.1-main.c7dcc2e112",
-    "@dxos/ui-theme": "0.9.1-main.c7dcc2e112",
-    "@dxos/storybook-utils": "0.9.1-main.c7dcc2e112"
+    "@dxos/random": "0.9.1-staging.ee54ba693a",
+    "@dxos/storybook-utils": "0.9.1-staging.ee54ba693a",
+    "@dxos/react-ui": "0.9.1-staging.ee54ba693a",
+    "@dxos/ui-theme": "0.9.1-staging.ee54ba693a"
   },
   "peerDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
-    "@effect/platform": "0.96.1",
-    "effect": "3.21.3",
-    "react": "~19.2.3",
-    "react-dom": "~19.2.3",
-    "@dxos/ui-theme": "0.9.1-main.c7dcc2e112",
-    "@dxos/react-ui": "0.9.1-main.c7dcc2e112"
+    "@effect/platform": "0.96.2",
+    "effect": "3.21.4",
+    "react": "~19.2.7",
+    "react-dom": "~19.2.7",
+    "@dxos/ui-theme": "0.9.1-staging.ee54ba693a",
+    "@dxos/react-ui": "0.9.1-staging.ee54ba693a"
   },
   "publishConfig": {
     "access": "public"

package/src/builder.ts

@@ -41,6 +41,9 @@ export interface ActionGroupBuilder {
   /** Add an action node as a child of the current group. */
   action<P extends {} = {}>(id: string, props: P & MenuActionProperties, invoke: () => void): this;
 
+  /** Add a switch action rendered as a labeled Input.Switch. */
+  switch(id: string, props: Omit<MenuActionProperties, 'variant'> & { checked: boolean }, invoke: () => void): this;
+
   /** Add a nested action group. */
   group(id: string, props: MenuItemGroupProperties, cb: ActionGroupBuilderFn): this;
 
@@ -94,6 +97,10 @@ class MenuBuilderImpl implements MenuBuilder {
     return this;
   }
 
+  switch(id: string, props: Omit<MenuActionProperties, 'variant'> & { checked: boolean }, invoke: () => void): this {
+    return this.action(id, { ...props, variant: 'switch' }, invoke);
+  }
+
   group(id: string, props: MenuItemGroupProperties, cb: ActionGroupBuilderFn): this {
     this._data.nodes.push(createMenuItemGroup(id, props));
     this._data.edges.push({ source: this._rootId, target: id, relation: 'child' });

package/src/components/Menu.tsx

@@ -5,7 +5,7 @@
 import { Atom, RegistryContext, useAtomValue } from '@effect-atom/atom-react';
 import { type Scope, createContextScope } from '@radix-ui/react-context';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
-import React, { createContext, type MouseEvent, type PropsWithChildren, useCallback, useContext, useMemo } from 'react';
+import React, { type MouseEvent, type PropsWithChildren, createContext, useCallback, useContext, useMemo } from 'react';
 
 import { log } from '@dxos/log';
 import { type DropdownMenuRootProps, Icon, DropdownMenu as NaturalDropdownMenu } from '@dxos/react-ui';
@@ -334,10 +334,10 @@ export { Menu, menuContextDefaults, useMenu, useMenuItems, useMenuScoped };
 export type { MenuContentProps, MenuRootProps, MenuScopedProps };
 
 export type {
-  ToolbarMenuProps,
   ToolbarMenuActionGroupProperties,
   ToolbarMenuActionGroupProps,
   ToolbarMenuActionProps,
   ToolbarMenuDropdownMenuActionGroup,
+  ToolbarMenuProps,
   ToolbarMenuToggleGroupActionGroup,
 } from './ToolbarMenu';

package/src/components/ToolbarMenu.stories.tsx

@@ -4,7 +4,7 @@
 
 import { Atom, RegistryContext } from '@effect-atom/atom-react';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { useContext, useMemo } from 'react';
+import React, { useContext, useMemo, useState } from 'react';
 
 import { random } from '@dxos/random';
 import { IconButton } from '@dxos/react-ui';
@@ -13,8 +13,9 @@ import { withRegistry } from '@dxos/storybook-utils';
 
 import { translations } from '#translations';
 
+import { MenuBuilder } from '../builder';
 import { Menu } from '../components';
-import { type ActionGraphProps, useMenuActions } from '../hooks';
+import { type ActionGraphProps, useMenuActions, useMenuBuilder } from '../hooks';
 import { createActions, createNestedActions, createNestedActionsResolver, useMutateActions } from '../testing';
 
 random.seed(1234);
@@ -93,3 +94,31 @@ export const UseMenuActionsToolbar: Story = {
     );
   },
 };
+
+/**
+ * Toolbar with both labeled and tooltip-only (iconOnly) Input.Switch items.
+ */
+export const SwitchToolbar: Story = {
+  render: () => {
+    const [wordWrap, setWordWrap] = useState(false);
+    const [lineNumbers, setLineNumbers] = useState(true);
+
+    const menuActions = useMenuBuilder(
+      () =>
+        MenuBuilder.make()
+          .root({ label: 'Editor settings' })
+          .switch('word-wrap', { label: 'Word wrap', checked: wordWrap }, () => setWordWrap((v) => !v))
+          .switch('line-numbers', { label: 'Line numbers', iconOnly: true, checked: lineNumbers }, () =>
+            setLineNumbers((v) => !v),
+          )
+          .build(),
+      [wordWrap, lineNumbers],
+    );
+
+    return (
+      <Menu.Root {...menuActions} alwaysActive>
+        <Menu.Toolbar />
+      </Menu.Root>
+    );
+  },
+};

package/src/components/ToolbarMenu.tsx

@@ -4,7 +4,14 @@
 
 import React, { useCallback } from 'react';
 
-import { Toolbar as NaturalToolbar, type ToolbarRootProps, useTranslation } from '@dxos/react-ui';
+import {
+  Input,
+  Toolbar as NaturalToolbar,
+  type ToolbarRootProps,
+  Tooltip,
+  toLocalizedString,
+  useTranslation,
+} from '@dxos/react-ui';
 import { composable, composableProps } from '@dxos/react-ui';
 import { useAttention } from '@dxos/react-ui-attention';
 import { type DropdownMenuItemGroupProperties, type ToggleGroupMenuItemGroupProperties } from '@dxos/ui-types';
@@ -90,6 +97,48 @@ const ActionToolbarItem = ({ __menuScope, action }: MenuScopedProps<{ action: Me
   );
 };
 
+const SwitchToolbarItem = ({ __menuScope, action }: MenuScopedProps<{ action: MenuAction }>) => {
+  const { onAction } = useMenuScoped('SwitchToolbarItem', __menuScope);
+  const { t } = useTranslation(translationKey);
+  const { label, iconOnly, disabled, testId, hidden, checked } = action.properties;
+  const labelStr = toLocalizedString(label, t);
+
+  const handleCheckedChange = useCallback(() => {
+    if (onAction) {
+      onAction(action, {});
+    } else {
+      void executeMenuAction(action);
+    }
+  }, [action, onAction]);
+
+  if (hidden) {
+    return null;
+  }
+
+  const switchInput = (
+    <Input.Switch
+      checked={checked}
+      disabled={disabled}
+      aria-label={iconOnly ? labelStr : undefined}
+      onCheckedChange={handleCheckedChange}
+      {...(testId && { 'data-testid': testId })}
+    />
+  );
+
+  return (
+    <Input.Root>
+      {iconOnly ? (
+        <Tooltip.Trigger asChild content={labelStr}>
+          <Input.Block>{switchInput}</Input.Block>
+        </Tooltip.Trigger>
+      ) : (
+        <Input.Block>{switchInput}</Input.Block>
+      )}
+      {!iconOnly && <Input.Label>{labelStr}</Input.Label>}
+    </Input.Root>
+  );
+};
+
 const DropdownMenuToolbarItem = ({
   __menuScope,
   group,
@@ -257,5 +306,15 @@ const ToolbarMenuItem = ({ __menuScope, item }: MenuScopedProps<{ item: MenuItem
     );
   }
 
-  return <ActionToolbarItem __menuScope={__menuScope} action={item as MenuAction} />;
+  const action = item as MenuAction;
+  if (action.properties?.variant === 'switch') {
+    return <SwitchToolbarItem __menuScope={__menuScope} action={action} />;
+  }
+
+  // The contributor owns the rendered element (interactions the action model cannot express).
+  if (action.properties?.variant === 'custom' && action.properties.render) {
+    return <>{action.properties.render()}</>;
+  }
+
+  return <ActionToolbarItem __menuScope={__menuScope} action={action} />;
 };

package/src/index.ts

@@ -5,5 +5,5 @@
 export * from './components';
 export * from './hooks';
 export * from './types';
-export { createMenuAction, createMenuItemGroup, createLineSeparator, createGapSeparator } from './util';
+export { createGapSeparator, createLineSeparator, createMenuAction, createMenuItemGroup } from './util';
 export { type ActionGroupBuilder, type ActionGroupBuilderFn, MenuBuilder } from './builder';