@astryxdesign/core 0.4.0 → 0.4.1

package/src/Selector/Selector.test.tsx

@@ -25,9 +25,11 @@ import {Icon} from '../Icon';
 import {RadioIndicator} from '../Indicator';
 import {InputGroup, InputGroupText} from '../InputGroup';
 import {__resetLiveRegionsForTest} from '../hooks/useAnnounce';
+import {__resetInteractionModalityForTest} from '../utils/interactionModality';
 import {defineTheme} from '../theme/defineTheme';
 import {Theme} from '../theme/Theme';
 import {generateThemeCSS} from '../theme/generateThemeRules';
+import {spacingVars} from '../theme/tokens.stylex';
 
 function generateThemeTestCSS(theme: Parameters<typeof generateThemeCSS>[0]) {
   const {prose, component} = generateThemeCSS(theme);
@@ -508,6 +510,89 @@ describe('Selector', () => {
     }
   });
 
+  describe('menu clearance', () => {
+    it('clears the trigger by the standard menu offset when placement is explicit', async () => {
+      const user = userEvent.setup();
+      render(
+        <Selector
+          label="Fruit"
+          options={OPTIONS}
+          value="Banana"
+          onChange={() => {}}
+          placement="above"
+        />,
+      );
+
+      await user.click(screen.getByRole('combobox'));
+      const popover = screen
+        .getByRole('listbox', {hidden: true})
+        .closest('[popover]') as HTMLElement;
+      // Both block edges, so the gap survives a position-try-fallbacks flip
+      // to the opposite side (#4803).
+      await waitFor(() => {
+        expect(popover.style.getPropertyValue('--x-marginBlockStart')).toBe(
+          spacingVars['--spacing-1'],
+        );
+      });
+      expect(popover.style.getPropertyValue('--x-marginBlockEnd')).toBe(
+        spacingVars['--spacing-1'],
+      );
+    });
+
+    it('clears the trigger in search mode', async () => {
+      const user = userEvent.setup();
+      render(
+        <Selector
+          label="Fruit"
+          options={OPTIONS}
+          value="Banana"
+          onChange={() => {}}
+          hasSearch
+        />,
+      );
+
+      // In hasSearch mode the trigger is a plain button, not a combobox.
+      await user.click(screen.getByRole('button', {name: 'Fruit'}));
+      const popover = screen
+        .getByRole('listbox', {hidden: true})
+        .closest('[popover]') as HTMLElement;
+      await waitFor(() => {
+        expect(popover.style.getPropertyValue('--x-marginBlockStart')).toBe(
+          spacingVars['--spacing-1'],
+        );
+      });
+    });
+
+    it('stays flush in the default selected-item overlay', async () => {
+      const restoreRects = mockSelectorRects();
+      const user = userEvent.setup();
+      try {
+        render(
+          <Selector
+            label="Fruit"
+            options={OPTIONS}
+            value="Banana"
+            onChange={() => {}}
+          />,
+        );
+
+        await user.click(screen.getByRole('combobox'));
+        const popover = screen
+          .getByRole('listbox', {hidden: true})
+          .closest('[popover]') as HTMLElement;
+        await waitFor(() => {
+          expect(popover.getAttribute('style')).toContain(
+            'margin-block-start: -110px',
+          );
+        });
+        expect(popover.style.getPropertyValue('--x-marginBlockStart')).toBe('');
+        expect(popover.style.getPropertyValue('--x-marginBlockEnd')).toBe('');
+      } finally {
+        restoreRects();
+      }
+    });
+  });
+
   describe('hasClear', () => {
     it('shows selected value label when hasClear is enabled', () => {
       render(
@@ -2302,7 +2387,165 @@ describe('Selector indicator (chevron) icon theme target', () => {
   });
 });
 
+describe('Selector section headings', () => {
+  it('renders a section title as a plain heading inside the group, not a divider', async () => {
+    const user = userEvent.setup();
+    render(
+      <Selector
+        label="Fruit"
+        options={[
+          {
+            type: 'section',
+            title: 'Citrus',
+            options: [
+              {value: 'orange', label: 'Orange'},
+              {value: 'lemon', label: 'Lemon'},
+            ],
+          },
+        ]}
+        value={undefined}
+        onChange={() => {}}
+      />,
+    );
+    await user.click(screen.getByRole('combobox'));
+
+    // A labeled Divider used to stand in for the heading; it rendered a
+    // role="separator" as a direct child of the listbox and stacked a second
+    // rule under the search row's own.
+    expect(document.querySelectorAll('[role="separator"]')).toHaveLength(0);
+
+    const group = screen.getByRole('group', {name: 'Citrus', hidden: true});
+    const heading = group.querySelector('.astryx-selector-section-heading');
+    expect(heading).toBeTruthy();
+    expect(heading).toHaveTextContent('Citrus');
+    // The group already carries the title as its accessible name, so the
+    // visible heading must not announce it a second time.
+    expect(heading).toHaveAttribute('aria-hidden', 'true');
+  });
+});
+
+describe('Selector search focus ring', () => {
+  // The ring is for keyboard focus only. `:focus-visible` cannot express that
+  // on its own: per CSS Selectors 4 a pointer-focused text input matches it
+  // too (verified in Chromium), which is why a modality gate sits alongside
+  // it. jsdom does not implement `:focus-visible`, so these assert the gate;
+  // the painted ring is verified in real Chromium.
+  //
+  // Focus moves into the search input on the frame after the panel opens, and
+  // the gate is read at that moment: every case must wait for the focus to
+  // land before asserting or typing, or a slow frame reads the modality of
+  // whatever the test did next.
+  beforeEach(() => {
+    __resetInteractionModalityForTest();
+  });
+
+  const field = () =>
+    screen.getByRole('combobox', {hidden: true}).parentElement;
+
+  const waitForSearchFocus = async () =>
+    waitFor(() =>
+      expect(screen.getByRole('combobox', {hidden: true})).toHaveFocus(),
+    );
+
+  it('does not ring when the panel is opened by mouse', async () => {
+    const user = userEvent.setup();
+    render(
+      <Selector
+        label="Fruit"
+        options={OPTIONS}
+        value={undefined}
+        onChange={() => {}}
+        hasSearch
+      />,
+    );
+    await user.click(screen.getByRole('button', {name: 'Fruit'}));
+    await waitForSearchFocus();
+    expect(field()).not.toHaveAttribute('data-keyboard-focus');
+  });
+
+  it('does not ring when the query is typed after a mouse open', async () => {
+    const user = userEvent.setup();
+    render(
+      <Selector
+        label="Fruit"
+        options={OPTIONS}
+        value={undefined}
+        onChange={() => {}}
+        hasSearch
+      />,
+    );
+    await user.click(screen.getByRole('button', {name: 'Fruit'}));
+    await waitForSearchFocus();
+    await user.keyboard('an');
+    // Typing does not retroactively make a pointer focus a keyboard one; the
+    // caret already shows where the text is going.
+    expect(field()).not.toHaveAttribute('data-keyboard-focus');
+  });
+
+  it('rings when the panel is opened from the keyboard', async () => {
+    const user = userEvent.setup();
+    render(
+      <Selector
+        label="Fruit"
+        options={OPTIONS}
+        value={undefined}
+        onChange={() => {}}
+        hasSearch
+      />,
+    );
+    await user.tab();
+    await user.keyboard('{Enter}');
+    await waitForSearchFocus();
+    expect(field()).toHaveAttribute('data-keyboard-focus', 'true');
+  });
+});
+
 describe('Selector search affordances', () => {
+  it('renders the search row seamlessly — no nested input box, a divider under it', async () => {
+    const user = userEvent.setup();
+    const {container} = render(
+      <Selector
+        label="Fruit"
+        options={OPTIONS}
+        value="Apple"
+        onChange={() => {}}
+        hasSearch
+      />,
+    );
+    await user.click(screen.getByRole('button', {name: 'Fruit'}));
+
+    const search = screen.getByRole('combobox', {hidden: true});
+    // The row is the outer gutter; the input sits inside the rounded field.
+    const row = search.closest('.astryx-selector-search');
+    const field = search.parentElement;
+    if (!row || !field) {
+      throw new Error('search row not found');
+    }
+    // The panel is already a bordered surface: the field inside it must not be
+    // a second bordered box (this used to render a TextInput).
+    expect(row).not.toHaveClass('astryx-text-input');
+    expect(search.closest('.astryx-text-input')).toBeNull();
+    // The field is a rounded box inset from the panel edge, shaped like the
+    // option rows under it — not a full-bleed header strip.
+    expect(field).not.toBe(row);
+    expect(getComputedStyle(field).borderRadius).not.toBe('');
+    // ...and a divider separates it from the options.
+    const separator =
+      container.ownerDocument.querySelector('[role="separator"]');
+    if (!separator) {
+      throw new Error('divider not found');
+    }
+    // Order: row, then divider, then the listbox.
+    expect(
+      row.compareDocumentPosition(separator) & Node.DOCUMENT_POSITION_FOLLOWING,
+    ).toBeTruthy();
+    const listbox = screen.getByRole('listbox', {hidden: true});
+    expect(
+      separator.compareDocumentPosition(listbox) &
+        Node.DOCUMENT_POSITION_FOLLOWING,
+    ).toBeTruthy();
+  });
+
   it('renders a decorative (aria-hidden) magnifier icon whenever hasSearch is on', async () => {
     const user = userEvent.setup();
     render(
@@ -2316,8 +2559,7 @@ describe('Selector search affordances', () => {
     );
     await user.click(screen.getByRole('button', {name: 'Fruit'}));
     const search = screen.getByRole('combobox', {hidden: true});
-    // The search field is a TextInput; the magnifier is its startIcon, so it
-    // sits inside the input container as a sibling of the <input>.
+    // The magnifier leads the search row, as a sibling of the <input>.
     const container = search.parentElement;
     const magnifier = container?.querySelector('.astryx-icon');
     expect(magnifier).toBeTruthy();
@@ -2550,3 +2792,145 @@ describe('Selector disabled state theme target', () => {
     expect(css).toContain('opacity: 0.4');
   });
 });
+
+describe('Selector indicatorPosition', () => {
+  const openRows = (): HTMLElement[] => screen.getAllByRole('option', h);
+  const rowFor = (label: string): HTMLElement =>
+    openRows().find(row => row.textContent?.includes(label))!;
+
+  it('draws the mark after the option content by default', () => {
+    render(
+      <Selector
+        label="Fruit"
+        options={OPTIONS}
+        value="Banana"
+        onChange={() => {}}
+        isDefaultOpen
+      />,
+    );
+    const row = rowFor('Banana');
+    const mark = row.querySelector('.astryx-selector-check')!;
+    const content = row.querySelector('.astryx-selector-option')!;
+    expect(
+      content.compareDocumentPosition(mark) & Node.DOCUMENT_POSITION_FOLLOWING,
+    ).toBeTruthy();
+  });
+
+  it('draws the mark before the option content when set to start', () => {
+    render(
+      <Selector
+        label="Fruit"
+        options={OPTIONS}
+        value="Banana"
+        onChange={() => {}}
+        indicatorPosition="start"
+        isDefaultOpen
+      />,
+    );
+    const row = rowFor('Banana');
+    const mark = row.querySelector('.astryx-selector-check')!;
+    const content = row.querySelector('.astryx-selector-option')!;
+    expect(
+      content.compareDocumentPosition(mark) & Node.DOCUMENT_POSITION_PRECEDING,
+    ).toBeTruthy();
+  });
+
+  it('reserves the mark column on every row, at either position', () => {
+    // The default check draws nothing when unchecked, so without a reserved
+    // column the chosen row would be laid out differently from the rest —
+    // indented at the start, truncating earlier at the end. Every row is two
+    // children wide either way, so a row's geometry does not depend on whether
+    // it happens to be the chosen one.
+    const {unmount} = render(
+      <Selector
+        label="Fruit"
+        options={OPTIONS}
+        value="Banana"
+        onChange={() => {}}
+        indicatorPosition="start"
+        isDefaultOpen
+      />,
+    );
+    for (const row of openRows()) {
+      expect(row.children).toHaveLength(2);
+    }
+    unmount();
+
+    render(
+      <Selector
+        label="Fruit"
+        options={OPTIONS}
+        value="Banana"
+        onChange={() => {}}
+        isDefaultOpen
+      />,
+    );
+    for (const row of openRows()) {
+      expect(row.children).toHaveLength(2);
+    }
+  });
+
+  it('positions a themed replacement indicator the same way', () => {
+    const theme = defineTheme({
+      name: 'selector-start-radio-mark-test',
+      indicators: {check: RadioIndicator},
+    });
+    render(
+      <Theme theme={theme}>
+        <Selector
+          label="Fruit"
+          options={OPTIONS}
+          value="Banana"
+          onChange={() => {}}
+          indicatorPosition="start"
+          isDefaultOpen
+        />
+      </Theme>,
+    );
+    for (const row of openRows()) {
+      const radio = row.querySelector('.astryx-radio')!;
+      const content = row.querySelector('.astryx-selector-option')!;
+      expect(
+        content.compareDocumentPosition(radio) &
+          Node.DOCUMENT_POSITION_PRECEDING,
+      ).toBeTruthy();
+    }
+  });
+});
+
+describe('Selector popup theme target', () => {
+  // The surface is the same element whether or not the popup has a search
+  // field — which is the reason the target lives there. Rendered on the
+  // component's own content, it would land on the listbox in one branch and
+  // on a wrapper in the other, so one theme rule would style two different
+  // boxes.
+  it.each([
+    ['without search', false],
+    ['with search', true],
+  ])(
+    'puts astryx-selector-popup on the painting surface, %s',
+    async (_label, hasSearch) => {
+      const user = userEvent.setup();
+      render(
+        <Selector
+          label="Fruit"
+          options={['Apple', 'Banana']}
+          value="Apple"
+          onChange={() => {}}
+          hasSearch={hasSearch}
+        />,
+      );
+      // The trigger is a combobox in the plain variant and a listbox-popup
+      // button in the search variant; the surface is the same either way.
+      await user.click(
+        screen.queryByRole('combobox') ??
+          screen.getByRole('button', {name: /Fruit/}),
+      );
+
+      const popup = document.querySelector('.astryx-selector-popup');
+      expect(popup).not.toBeNull();
+      expect(popup).toHaveClass('astryx-popover-surface');
+      expect(popup?.querySelector('[role="listbox"]')).not.toBeNull();
+    },
+  );
+});