@astryxdesign/core 0.7.0-canary.fe57f54 → 0.7.0

package/src/DropdownMenu/DropdownMenu.test.tsx

@@ -19,6 +19,7 @@ import {DropdownMenu} from './DropdownMenu';
 import {DropdownMenuItem} from './DropdownMenuItem';
 import {DropdownMenuDivider} from './DropdownMenuDivider';
 import {DropdownMenuGroup} from './DropdownMenuGroup';
+import {DropdownMenuSubMenu} from './DropdownMenuSubMenu';
 import {Divider} from '../Divider';
 import {rtlStyles} from '../utils';
 import {__resetInteractionModalityForTest} from '../utils/interactionModality';
@@ -3357,3 +3358,459 @@ describe('DropdownMenu keyboard', () => {
     expect(onClick).toHaveBeenCalledTimes(1);
   });
 });
+
+describe('DropdownMenu header and footer', () => {
+  function LabelsMenu({onCreate}: {onCreate?: () => void}) {
+    return (
+      <DropdownMenu
+        button={{label: 'Labels'}}
+        header={<input aria-label="Filter labels" />}
+        footer={
+          <button type="button" onClick={onCreate}>
+            Create label
+          </button>
+        }>
+        <DropdownMenuItem label="Bug" />
+        <DropdownMenuItem label="Feature" />
+      </DropdownMenu>
+    );
+  }
+
+  async function open() {
+    const user = userEvent.setup();
+    render(<LabelsMenu />);
+    await user.click(screen.getByRole('button', {name: /Labels/}));
+    const menu = screen.getByRole('menu', {hidden: true});
+    // A pointer open focuses the menu itself; let that land first.
+    await waitFor(() => expect(menu).toHaveFocus());
+    return {user, menu};
+  }
+
+  it('renders the regions in the popover, outside the role="menu" element', async () => {
+    const {menu} = await open();
+    const field = screen.getByRole('textbox', {
+      name: 'Filter labels',
+      hidden: true,
+    });
+    const create = screen.getByRole('button', {
+      name: 'Create label',
+      hidden: true,
+    });
+    // The menu holds only its rows.
+    expect(menu).not.toContainElement(field);
+    expect(menu).not.toContainElement(create);
+    expect(
+      Array.from(menu.querySelectorAll('[role]')).map(el =>
+        el.getAttribute('role'),
+      ),
+    ).toEqual(['menuitem', 'menuitem']);
+    // Header before the menu, footer after it, in one popover.
+    const popoverEl = menu.closest('[popover]');
+    expect(popoverEl).toContainElement(field);
+    expect(popoverEl).toContainElement(create);
+    expect(
+      field.compareDocumentPosition(menu) & Node.DOCUMENT_POSITION_FOLLOWING,
+    ).toBeTruthy();
+    expect(
+      menu.compareDocumentPosition(create) & Node.DOCUMENT_POSITION_FOLLOWING,
+    ).toBeTruthy();
+  });
+
+  it('makes the menu one Tab stop between the regions', async () => {
+    const {menu} = await open();
+    expect(menu).toHaveAttribute('tabindex', '0');
+  });
+
+  it('Tab from the menu moves on to the footer and keeps the menu open', async () => {
+    const {menu} = await open();
+    const hide = vi.mocked(HTMLElement.prototype.hidePopover);
+    hide.mockClear();
+    fireEvent.keyDown(menu, {key: 'Tab'});
+    expect(hide).not.toHaveBeenCalled();
+    fireEvent.keyDown(menu, {key: 'Tab', shiftKey: true});
+    expect(hide).not.toHaveBeenCalled();
+  });
+
+  it('Shift+Tab from a row moves straight to the header and keeps the menu open', async () => {
+    const {menu} = await open();
+    const hide = vi.mocked(HTMLElement.prototype.hidePopover);
+    hide.mockClear();
+    fireEvent.keyDown(menu, {key: 'ArrowDown'});
+    const row = screen.getByRole('menuitem', {name: 'Bug', hidden: true});
+    await waitFor(() => expect(row).toHaveFocus());
+    fireEvent.keyDown(row, {key: 'Tab', shiftKey: true});
+    expect(
+      screen.getByRole('textbox', {name: 'Filter labels', hidden: true}),
+    ).toHaveFocus();
+    expect(hide).not.toHaveBeenCalled();
+  });
+
+  it('a pointer open draws no focus ring on the menu; keyboard focus on it does', async () => {
+    const {menu} = await open();
+    // Opened with a pointer: the menu is focused but must not ring.
+    const ringClasses = stylex
+      .props(focusOutlineStyles.focusVisible)
+      .className!.split(' ')
+      .filter(Boolean);
+    const hasRing = () => ringClasses.every(c => menu.classList.contains(c));
+    expect(menu).toHaveFocus();
+    expect(hasRing()).toBe(false);
+    // Keyboard: leave to the header and come back by Tab.
+    const field = screen.getByRole('textbox', {
+      name: 'Filter labels',
+      hidden: true,
+    });
+    fireEvent.keyDown(document, {key: 'Tab', shiftKey: true});
+    act(() => field.focus());
+    fireEvent.keyDown(document, {key: 'Tab'});
+    act(() => menu.focus());
+    await waitFor(() => expect(hasRing()).toBe(true));
+  });
+
+  describe('with only hidden controls in a region', () => {
+    async function openHidden(
+      header: React.ReactNode,
+      footer: React.ReactNode,
+    ) {
+      const user = userEvent.setup();
+      render(
+        <DropdownMenu
+          button={{label: 'Labels'}}
+          header={header}
+          footer={footer}>
+          <DropdownMenuItem label="Bug" />
+          <DropdownMenuSubMenu label="Move to">
+            <DropdownMenuItem label="Folder A" />
+          </DropdownMenuSubMenu>
+        </DropdownMenu>,
+      );
+      const trigger = screen.getByRole('button', {name: /Labels/});
+      await user.click(trigger);
+      const menu = screen.getByRole('menu', {name: 'Labels', hidden: true});
+      await waitFor(() => expect(menu).toHaveFocus());
+      const hide = vi.mocked(HTMLElement.prototype.hidePopover);
+      hide.mockClear();
+      return {user, trigger, menu, hide};
+    }
+
+    it.each([
+      [
+        'hidden',
+        <button key="h" type="button" hidden>
+          Gone
+        </button>,
+      ],
+      [
+        'display: none',
+        <button key="d" type="button" style={{display: 'none'}}>
+          Gone
+        </button>,
+      ],
+      [
+        'visibility: hidden',
+        <button key="v" type="button" style={{visibility: 'hidden'}}>
+          Gone
+        </button>,
+      ],
+    ])(
+      'treats a %s footer control as unreachable: Tab from the menu closes it',
+      async (_label, control) => {
+        const {menu, hide} = await openHidden(null, control);
+        fireEvent.keyDown(menu, {key: 'Tab'});
+        expect(hide).toHaveBeenCalled();
+      },
+    );
+
+    it('treats a footer control inside a display: none wrapper as unreachable', async () => {
+      const {menu, hide} = await openHidden(
+        null,
+        <div style={{display: 'none'}}>
+          <button type="button">Create label</button>
+        </div>,
+      );
+      fireEvent.keyDown(menu, {key: 'Tab'});
+      expect(hide).toHaveBeenCalled();
+    });
+
+    it('treats a header control inside a display: none wrapper as unreachable: Shift+Tab from a row closes', async () => {
+      const {menu, hide} = await openHidden(
+        <div style={{display: 'none'}}>
+          <input aria-label="Filter labels" />
+        </div>,
+        null,
+      );
+      fireEvent.keyDown(menu, {key: 'ArrowDown'});
+      const row = screen.getByRole('menuitem', {name: 'Bug', hidden: true});
+      await waitFor(() => expect(row).toHaveFocus());
+      fireEvent.keyDown(row, {key: 'Tab', shiftKey: true});
+      expect(hide).toHaveBeenCalled();
+    });
+
+    it('Tab past the last visible footer control closes, ignoring a wrapped hidden one after it', async () => {
+      const {hide} = await openHidden(
+        null,
+        <>
+          <button type="button">Create label</button>
+          <div style={{display: 'none'}}>
+            <button type="button">Gone</button>
+          </div>
+        </>,
+      );
+      const create = screen.getByRole('button', {
+        name: 'Create label',
+        hidden: true,
+      });
+      act(() => create.focus());
+      fireEvent.keyDown(create, {key: 'Tab'});
+      expect(hide).toHaveBeenCalled();
+    });
+
+    it('Tab from an open sub-menu closes the menu when the footer control is in a hidden wrapper', async () => {
+      const {user, menu} = await openHidden(
+        null,
+        <div style={{display: 'none'}}>
+          <button type="button">Create label</button>
+        </div>,
+      );
+      const subTrigger = screen.getByRole('menuitem', {
+        name: /Move to/,
+        hidden: true,
+      });
+      act(() => subTrigger.focus());
+      await user.keyboard('{ArrowRight}');
+      const folder = screen.getByRole('menuitem', {
+        name: 'Folder A',
+        hidden: true,
+      });
+      await waitFor(() => expect(folder).toHaveFocus());
+      fireEvent.keyDown(folder, {key: 'Tab'});
+      expect(subTrigger).toHaveAttribute('aria-expanded', 'false');
+      // The flyout's own close also hides a popover, so check the root's.
+      expect(menu.closest('[popover]')).not.toHaveAttribute('popover-open');
+    });
+
+    it('treats a hidden header control as unreachable: Shift+Tab from a row closes the menu', async () => {
+      const {menu, hide} = await openHidden(
+        <input aria-label="Filter labels" hidden />,
+        null,
+      );
+      fireEvent.keyDown(menu, {key: 'ArrowDown'});
+      const row = screen.getByRole('menuitem', {name: 'Bug', hidden: true});
+      await waitFor(() => expect(row).toHaveFocus());
+      fireEvent.keyDown(row, {key: 'Tab', shiftKey: true});
+      expect(hide).toHaveBeenCalled();
+    });
+
+    it('Tab past the last visible footer control closes, ignoring a hidden one after it', async () => {
+      const {hide} = await openHidden(
+        null,
+        <>
+          <button type="button">Create label</button>
+          <button type="button" style={{display: 'none'}}>
+            Gone
+          </button>
+        </>,
+      );
+      const create = screen.getByRole('button', {
+        name: 'Create label',
+        hidden: true,
+      });
+      act(() => create.focus());
+      fireEvent.keyDown(create, {key: 'Tab'});
+      expect(hide).toHaveBeenCalled();
+    });
+
+    it('Tab from an open sub-menu closes the menu when the footer holds only hidden controls', async () => {
+      const {user, menu} = await openHidden(
+        null,
+        <button type="button" hidden>
+          Gone
+        </button>,
+      );
+      const subTrigger = screen.getByRole('menuitem', {
+        name: /Move to/,
+        hidden: true,
+      });
+      act(() => subTrigger.focus());
+      await user.keyboard('{ArrowRight}');
+      const folder = screen.getByRole('menuitem', {
+        name: 'Folder A',
+        hidden: true,
+      });
+      await waitFor(() => expect(folder).toHaveFocus());
+      fireEvent.keyDown(folder, {key: 'Tab'});
+      expect(subTrigger).toHaveAttribute('aria-expanded', 'false');
+      // The flyout's own close also hides a popover, so check the root's.
+      expect(menu.closest('[popover]')).not.toHaveAttribute('popover-open');
+    });
+  });
+
+  describe('with a sub-menu open', () => {
+    async function openFlyout() {
+      const user = userEvent.setup();
+      render(
+        <DropdownMenu
+          button={{label: 'Labels'}}
+          header={<input aria-label="Filter labels" />}
+          footer={<button type="button">Create label</button>}>
+          <DropdownMenuItem label="Bug" />
+          <DropdownMenuSubMenu label="Move to">
+            <DropdownMenuItem label="Folder A" />
+            <DropdownMenuItem label="Folder B" />
+          </DropdownMenuSubMenu>
+        </DropdownMenu>,
+      );
+      await user.click(screen.getByRole('button', {name: /Labels/}));
+      const root = screen.getByRole('menu', {name: 'Labels', hidden: true});
+      await waitFor(() => expect(root).toHaveFocus());
+      const subTrigger = screen.getByRole('menuitem', {
+        name: /Move to/,
+        hidden: true,
+      });
+      act(() => subTrigger.focus());
+      await user.keyboard('{ArrowRight}');
+      await waitFor(() =>
+        expect(subTrigger).toHaveAttribute('aria-expanded', 'true'),
+      );
+      const folder = screen.getByRole('menuitem', {
+        name: 'Folder A',
+        hidden: true,
+      });
+      await waitFor(() => expect(folder).toHaveFocus());
+      const hide = vi.mocked(HTMLElement.prototype.hidePopover);
+      return {root, subTrigger, folder, hide};
+    }
+
+    it('Tab from a flyout row closes the flyout and moves to the footer', async () => {
+      const {root, subTrigger, folder} = await openFlyout();
+      fireEvent.keyDown(folder, {key: 'Tab'});
+      expect(subTrigger).toHaveAttribute('aria-expanded', 'false');
+      expect(
+        screen.getByRole('button', {name: 'Create label', hidden: true}),
+      ).toHaveFocus();
+      expect(root.closest('[popover]')).toHaveAttribute('popover-open');
+    });
+
+    it('Shift+Tab from a flyout row closes the flyout and moves to the header', async () => {
+      const {subTrigger, folder} = await openFlyout();
+      fireEvent.keyDown(folder, {key: 'Tab', shiftKey: true});
+      expect(subTrigger).toHaveAttribute('aria-expanded', 'false');
+      expect(
+        screen.getByRole('textbox', {name: 'Filter labels', hidden: true}),
+      ).toHaveFocus();
+    });
+  });
+
+  it('Tab past the last footer control closes the menu', async () => {
+    await open();
+    const hide = vi.mocked(HTMLElement.prototype.hidePopover);
+    hide.mockClear();
+    const create = screen.getByRole('button', {
+      name: 'Create label',
+      hidden: true,
+    });
+    create.focus();
+    fireEvent.keyDown(create, {key: 'Tab', shiftKey: true});
+    expect(hide).not.toHaveBeenCalled();
+    create.focus();
+    expect(create).toHaveFocus();
+    fireEvent.keyDown(create, {key: 'Tab'});
+    expect(hide).toHaveBeenCalled();
+    expect(screen.getByRole('button', {name: /Labels/})).toHaveFocus();
+  });
+
+  it('Shift+Tab before the first header control closes the menu', async () => {
+    await open();
+    const hide = vi.mocked(HTMLElement.prototype.hidePopover);
+    hide.mockClear();
+    const field = screen.getByRole('textbox', {
+      name: 'Filter labels',
+      hidden: true,
+    });
+    field.focus();
+    fireEvent.keyDown(field, {key: 'Tab'});
+    expect(hide).not.toHaveBeenCalled();
+    field.focus();
+    expect(field).toHaveFocus();
+    fireEvent.keyDown(field, {key: 'Tab', shiftKey: true});
+    expect(hide).toHaveBeenCalled();
+  });
+
+  it('leaves keys typed in the header to the field', async () => {
+    const {user} = await open();
+    const field = screen.getByRole('textbox', {
+      name: 'Filter labels',
+      hidden: true,
+    });
+    await user.click(field);
+    await user.keyboard('bug');
+    expect(field).toHaveValue('bug');
+    expect(field).toHaveFocus();
+  });
+
+  it('a footer button acts on its own click and the menu stays open', async () => {
+    const user = userEvent.setup();
+    const onCreate = vi.fn();
+    render(<LabelsMenu onCreate={onCreate} />);
+    const trigger = screen.getByRole('button', {name: /Labels/});
+    await user.click(trigger);
+    await user.click(
+      screen.getByRole('button', {name: 'Create label', hidden: true}),
+    );
+    expect(onCreate).toHaveBeenCalledTimes(1);
+    expect(trigger).toHaveAttribute('aria-expanded', 'true');
+  });
+
+  it('without a header or footer, Tab still closes and the menu stays out of the Tab order', async () => {
+    const user = userEvent.setup();
+    render(
+      <DropdownMenu button={{label: 'Actions'}}>
+        <DropdownMenuItem label="Item 1" />
+      </DropdownMenu>,
+    );
+    await user.click(screen.getByRole('button', {name: /Actions/}));
+    const menu = screen.getByRole('menu', {hidden: true});
+    expect(menu).toHaveAttribute('tabindex', '-1');
+    expect(menu.parentElement?.closest('[role="menu"]')).toBeNull();
+    fireEvent.keyDown(menu, {key: 'Tab'});
+    expect(HTMLElement.prototype.hidePopover).toHaveBeenCalled();
+  });
+
+  it('a false or empty region renders no wrapper', async () => {
+    const user = userEvent.setup();
+    render(
+      <DropdownMenu button={{label: 'Actions'}} header={false} footer="">
+        <DropdownMenuItem label="Item 1" />
+      </DropdownMenu>,
+    );
+    await user.click(screen.getByRole('button', {name: /Actions/}));
+    const menu = screen.getByRole('menu', {hidden: true});
+    expect(menu).toHaveAttribute('tabindex', '-1');
+  });
+
+  it('renders the regions above and below the actions in the bottom sheet', async () => {
+    const user = userEvent.setup();
+    render(
+      <DropdownMenu
+        button={{label: 'Labels'}}
+        presentation="bottom-sheet"
+        header={<input aria-label="Filter labels" />}
+        footer={<button type="button">Create label</button>}
+        items={[{label: 'Bug'}, {label: 'Feature'}]}
+      />,
+    );
+    await user.click(screen.getByRole('button', {name: /Labels/}));
+    const sheet = screen.getByRole('dialog', {name: 'Labels'});
+    const field = screen.getByRole('textbox', {name: 'Filter labels'});
+    const bug = screen.getByRole('button', {name: 'Bug'});
+    const create = screen.getByRole('button', {name: 'Create label'});
+    expect(sheet).toContainElement(field);
+    expect(sheet).toContainElement(create);
+    expect(
+      field.compareDocumentPosition(bug) & Node.DOCUMENT_POSITION_FOLLOWING,
+    ).toBeTruthy();
+    expect(
+      bug.compareDocumentPosition(create) & Node.DOCUMENT_POSITION_FOLLOWING,
+    ).toBeTruthy();
+  });
+});