feat(superchat): per-message action bar with sticky overflow menu

scripts/rtl-baseline.json

@@ -30,7 +30,7 @@
   "src/components/CreateInvoiceModal/CreateInvoiceModal.tsx": 3,
   "src/components/CreateReferralModal/CreateReferralModal.tsx": 4,
   "src/components/DashboardWidget/DashboardWidget.tsx": 9,
-  "src/components/DateInput/DateInput.tsx": 3,
+  "src/components/DateInput/DateInput.tsx": 2,
   "src/components/DateRangePicker/DateRangePicker.tsx": 7,
   "src/components/DocumentScanner/DocumentDetectionOverlay.tsx": 16,
   "src/components/DocumentScanner/FilePreview.tsx": 1,

src/components/Dropdown/Dropdown.stories.tsx

@@ -3,6 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import {
   Dropdown,
   DropdownItem,
+  DropdownSubmenu,
   DropdownSeparator,
   DropdownLabel,
 } from './Dropdown';
@@ -112,6 +113,42 @@ export const Default: Story = {
   ),
 };
 
+export const WithSubmenu: Story = {
+  render: () => (
+    <Dropdown trigger={<Button>Export</Button>}>
+      <DropdownItem onClick={() => console.warn('Copy clicked')}>
+        Copy
+      </DropdownItem>
+      <DropdownSubmenu label="Copy as">
+        <DropdownItem onClick={() => console.warn('Rich text clicked')}>
+          Rich text
+        </DropdownItem>
+        <DropdownItem onClick={() => console.warn('Markdown clicked')}>
+          Markdown
+        </DropdownItem>
+        <DropdownItem onClick={() => console.warn('Plain text clicked')}>
+          Plain text
+        </DropdownItem>
+      </DropdownSubmenu>
+      <DropdownSeparator />
+      <DropdownItem
+        variant="danger"
+        onClick={() => console.warn('Delete clicked')}
+      >
+        Delete
+      </DropdownItem>
+    </Dropdown>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'A `DropdownSubmenu` opens a nested flyout on hover, click, or ArrowRight; ArrowLeft/Escape closes just the flyout.',
+      },
+    },
+  },
+};
+
 export const WithIcons: Story = {
   render: () => (
     <Dropdown trigger={<Button>Actions</Button>}>

src/components/Dropdown/Dropdown.test.tsx

@@ -9,6 +9,7 @@ import {
   DropdownItem,
   DropdownLabel,
   DropdownSeparator,
+  DropdownSubmenu,
 } from './Dropdown';
 
 describe('Dropdown', () => {
@@ -324,6 +325,38 @@ describe('Dropdown', () => {
     ).toHaveAttribute('aria-checked', 'true');
   });
 
+  it('select all includes items nested in a submenu', async () => {
+    const user = userEvent.setup();
+    const handleSelectedValuesChange = vi.fn();
+
+    renderWithTheme(
+      <Dropdown
+        multiSelect
+        showSelectAll
+        selectedValues={[]}
+        onSelectedValuesChange={handleSelectedValuesChange}
+        trigger={<Button>Open menu</Button>}
+      >
+        <DropdownItem value="alpha">Alpha</DropdownItem>
+        <DropdownSubmenu label="More">
+          <DropdownItem value="beta">Beta</DropdownItem>
+          <DropdownItem value="gamma">Gamma</DropdownItem>
+        </DropdownSubmenu>
+      </Dropdown>
+    );
+
+    await user.click(screen.getByRole('button', { name: 'Open menu' }));
+    await user.click(
+      screen.getByRole('menuitemcheckbox', { name: 'Select all' })
+    );
+
+    expect(handleSelectedValuesChange).toHaveBeenCalledWith([
+      'alpha',
+      'beta',
+      'gamma',
+    ]);
+  });
+
   it('shows an indeterminate select-all state when some visible items are selected', async () => {
     const user = userEvent.setup();