<!-- source-hash: 342a87b9f572574fd4c65a58c52361ef -->
A flexible, accessible dropdown actions menu component built on Radix UI primitives, supporting grouped items, checkboxes, submenus, navigation links, and secondary icon actions.

## Key Components

### Exported Components

| Component | Description |
|-----------|-------------|
| `ActionsMenu` | Standalone menu panel (no trigger) — renders grouped items directly |
| `ActionsMenuDropdown` | Full dropdown with a configurable trigger button and Radix-powered popover |

### Internal Components

| Component | Description |
|-----------|-------------|
| `MenuItem` | Renders a single item — handles `item`, `checkbox`, `submenu`, `separator`, and link variants |
| `SecondaryAction` | 40px secondary icon button/link on the right side of a row, independently clickable |
| `GroupSeparator` | Visual divider rendered between groups when `separator: true` |

### Key Interfaces

| Interface | Purpose |
|-----------|---------|
| `ActionsMenuItem` | Single menu item with optional `href`, `submenu`, `iconAction`, `checked` |
| `ActionsMenuGroup` | Collection of items with optional separator |
| `ActionsMenuProps` | Props for `ActionsMenu` — `groups`, `className`, `onItemClick` |
| `ActionsMenuDropdownProps` | Extends `ActionsMenuProps` with trigger, alignment, and popover controls |

## Usage Example

```typescript
import { ActionsMenuDropdown } from "./actions-menu";

const groups = [
  {
    items: [
      {
        id: "edit",
        label: "Edit",
        icon: <EditIcon />,
        onClick: () => console.log("Edit clicked"),
      },
      {
        id: "open",
        label: "Open in new tab",
        href: "/resource/123",
        iconAction: {
          icon: <ExternalLinkIcon />,
          "aria-label": "Open in new tab",
          href: "/resource/123",
          openInNewTab: true,
        },
      },
    ],
    separator: true,
  },
  {
    items: [
      {
        id: "notify",
        label: "Notifications",
        type: "checkbox",
        checked: true,
        onClick: () => toggleNotifications(),
      },
      { id: "sep", label: "", type: "separator" },
      {
        id: "delete",
        label: "Delete",
        disabled: true,
        onClick: () => handleDelete(),
      },
    ],
  },
];

<ActionsMenuDropdown
  groups={groups}
  align="end"
  side="bottom"
  triggerAriaLabel="More actions"
  onItemClick={(item) => console.log("Clicked:", item.id)}
/>
```

> **Note:** The dropdown auto-closes after selecting a regular item but stays open for `checkbox` and `submenu` types, allowing toggling and nested navigation.