@astryxdesign/core 0.2.0 → 0.3.0

package/src/MoreMenu/MoreMenu.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'MoreMenu',
@@ -77,7 +77,7 @@ export const docs = {
     ],
   },
 };
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 export const docsZh = {
   name: 'MoreMenu',
   displayName: 'More Menu',
@@ -142,7 +142,7 @@ export const docsZh = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description:
     'Overflow menu w/ three-dot icon trigger. Convenience wrapper composing icon-only Button w/ dropdown menu, eliminating boilerplate for state management, positioning, accessibility.',

package/src/MoreMenu/MoreMenu.tsx

@@ -15,11 +15,11 @@
  * - /packages/core/src/MoreMenu/MoreMenu.test.tsx
  * - /packages/core/src/MoreMenu/index.ts
  * - /apps/storybook/stories/MoreMenu.stories.tsx
- * - /packages/cli/templates/blocks/components/MoreMenu/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/MoreMenu/ (showcase blocks)
  */
 
 import type {ReactNode} from 'react';
-import {getIcon} from '../Icon/globalIconRegistry';
+import {useIcon} from '../Icon';
 import {DropdownMenu} from '../DropdownMenu/DropdownMenu';
 import {useSize} from '../SizeContext/SizeContext';
 import type {DropdownMenuOption} from '../DropdownMenu';
@@ -119,7 +119,7 @@ export function MoreMenu({
   const t = useTranslator();
   const label = labelFromProps ?? t('@astryx.moreMenu.label');
   const size = useSize(sizeProp, 'md');
-  const moreIcon = getIcon('moreHorizontal');
+  const moreIcon = useIcon('moreHorizontal');
 
   return (
     <DropdownMenu

package/src/MultiSelector/MultiSelector.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'MultiSelector',
@@ -20,7 +20,10 @@ export const docs = {
   ],
   theming: {
     targets: [
-      {className: 'astryx-multi-selector', visualProps: ['size', 'status']},
+      {
+        className: 'astryx-multi-selector',
+        visualProps: ['variant', 'size', 'status'],
+      },
       {className: 'astryx-multi-selector-clear-icon'},
       {
         className: 'astryx-multi-selector-indicator-icon',
@@ -77,6 +80,13 @@ export const docs = {
           description: 'Size variant for the selector.',
           default: "'md'",
         },
+        {
+          name: 'variant',
+          type: "'input' | 'ghost'",
+          description:
+            'Visual trigger style. input is the bordered input treatment for forms; ghost is borderless and matches ghost buttons for toolbar usage.',
+          default: "'input'",
+        },
         {
           name: 'triggerDisplay',
           type: "'count' | 'labels' | 'badges'",
@@ -105,7 +115,7 @@ export const docs = {
           name: 'hasSearch',
           type: 'boolean',
           description:
-            'Whether to show a search input for filtering options. As the user types, the match count (or "No results found") is announced to screen readers via a polite live region.',
+            'Whether to show a search input for filtering options. As the user types, the match count (or "No results found") is announced to screen readers via a polite live region. The search field has built-in affordances: a leading magnifier icon and, once a query is typed, a trailing clear (✕) button that resets the query and returns focus to the input.',
         },
         {
           name: 'searchPlaceholder',
@@ -162,10 +172,11 @@ export const docs = {
         },
         {
           name: 'statusVariant',
-          type: "'attached' | 'detached'",
+          type: "'attached' | 'detached' | 'tooltip'",
           description:
-            'How the status message is placed relative to the input. attached overlaps directly below the input (bordered treatment); detached floats below as a separate element with spacing.',
-          default: "'attached'",
+            'How the status message is placed relative to the input. attached overlaps directly below the bordered input and is only valid for the input variant; ghost selectors detach attached status messages by default. Use tooltip for compact toolbar controls.',
+          default:
+            "'attached' for input selectors; 'detached' for ghost selectors",
         },
         {
           name: 'renderOption',
@@ -217,6 +228,11 @@ export const docs = {
         description:
           'Use inside InputGroup only when the control needs a short prefix or suffix addon as part of one decorated input surface; prefer count or labels trigger display so the group stays single-line.',
       },
+      {
+        guidance: true,
+        description:
+          'Use variant="ghost" when a multi-selector sits in a toolbar with ghost buttons. If validation status is needed there, prefer statusVariant="tooltip" so the toolbar height stays compact.',
+      },
       {
         guidance: false,
         description: 'Use for single-value selection; use Selector instead.',
@@ -234,7 +250,7 @@ export const docs = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsZh = {
   components: [
     {
@@ -268,7 +284,8 @@ export const docsZh = {
         isRequired: '将字段标记为必填。',
         isLoading: '在触发器中显示加载旋转器。',
         status: '带可选消息的验证状态。',
-        statusVariant: '状态消息的放置方式：attached 直接叠加在输入框下方；detached 作为独立元素浮于下方并留有间距。',
+        statusVariant:
+          '状态消息的放置方式：attached 直接叠加在输入框下方；detached 作为独立元素浮于下方并留有间距。',
         renderOption:
           '每个可选选项的自定义渲染函数。不会用于分隔线、分组或全选行。',
         xstyle: '布局自定义的 StyleX 样式，必须是 stylex.create() 值。',
@@ -316,7 +333,7 @@ export const docsZh = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description:
     'checkbox multi-select dropdown for finite sets like column toggles or filter facets',
@@ -349,6 +366,11 @@ export const docsDense = {
         description:
           'Use inside InputGroup only for a short prefix or suffix addon; prefer count or labels trigger display so the group stays single-line.',
       },
+      {
+        guidance: true,
+        description:
+          'Use variant="ghost" in toolbars with ghost buttons; prefer statusVariant="tooltip" for compact validation status.',
+      },
       {
         guidance: false,
         description: 'Use for single-value selection; use Selector instead.',
@@ -378,6 +400,8 @@ export const docsDense = {
         changeAction: 'async; fires after onChange',
         placeholder: 'text when nothing selected',
         size: 'size variant',
+        variant:
+          'visual trigger style: input bordered control or ghost toolbar control',
         triggerDisplay: 'how to show selected in trigger',
         maxBadges: 'max badges before "+N"; badges mode only',
         hasSelectAll: 'show select-all checkbox',
@@ -394,7 +418,8 @@ export const docsDense = {
         isRequired: 'marks required',
         isLoading: 'spinner in trigger',
         status: 'validation status w/ optional message',
-        statusVariant: 'How status message is placed: attached overlaps below input; detached floats below w/ spacing.',
+        statusVariant:
+          'status message placement; ghost detaches attached by default; use tooltip for compact toolbars.',
         renderOption:
           'custom render fn per selectable option; not dividers/sections/select-all',
         xstyle: 'StyleX layout styles; stylex.create() only',

package/src/MultiSelector/MultiSelector.test.tsx

@@ -22,8 +22,12 @@ import {MultiSelector} from './MultiSelector';
 import {Icon} from '../Icon';
 import {__resetLiveRegionsForTest} from '../hooks/useAnnounce';
 import {defineTheme} from '../theme/defineTheme';
-import {generateThemeCSSFlat} from '../theme/generateThemeRules';
+import {generateThemeCSS} from '../theme/generateThemeRules';
 
+function generateThemeTestCSS(theme: Parameters<typeof generateThemeCSS>[0]) {
+  const {prose, component} = generateThemeCSS(theme);
+  return [prose, component].filter(Boolean).join('\n\n');
+}
 // Module-level constants to satisfy @eslint-react/no-unstable-default-props.
 const ANNOUNCE_OPTIONS = ['Apple', 'Banana', 'Orange'] as const;
 const EMPTY_VALUE: string[] = [];
@@ -510,6 +514,59 @@ describe('MultiSelector', () => {
     expect(options[0]).toHaveTextContent('Select all');
   });
 
+  it('select-all accessible name reflects none/partial/all selection', async () => {
+    const user = userEvent.setup();
+    const options = [
+      {value: 'apple', label: 'Apple'},
+      {value: 'banana', label: 'Banana'},
+    ];
+    const {rerender} = render(
+      <MultiSelector
+        label="Fruit"
+        options={options}
+        value={[]}
+        onChange={() => {}}
+        hasSelectAll
+      />,
+    );
+
+    await user.click(screen.getByRole('combobox'));
+
+    // None selected: plain name, not selected
+    let selectAll = screen.getAllByRole('option', h)[0];
+    expect(selectAll).not.toHaveAccessibleName(/partially selected/);
+    expect(selectAll).toHaveAttribute('aria-selected', 'false');
+
+    // Partial: aria-selected="mixed" is invalid on role="option", so the
+    // indeterminate state must be conveyed through the accessible name.
+    rerender(
+      <MultiSelector
+        label="Fruit"
+        options={options}
+        value={['apple']}
+        onChange={() => {}}
+        hasSelectAll
+      />,
+    );
+    selectAll = screen.getAllByRole('option', h)[0];
+    expect(selectAll).toHaveAccessibleName('Select all, partially selected');
+    expect(selectAll).toHaveAttribute('aria-selected', 'false');
+
+    // All selected: plain name again, selected
+    rerender(
+      <MultiSelector
+        label="Fruit"
+        options={options}
+        value={['apple', 'banana']}
+        onChange={() => {}}
+        hasSelectAll
+      />,
+    );
+    selectAll = screen.getAllByRole('option', h)[0];
+    expect(selectAll).not.toHaveAccessibleName(/partially selected/);
+    expect(selectAll).toHaveAttribute('aria-selected', 'true');
+  });
+
   it('select-all toggles via keyboard Enter', async () => {
     const user = userEvent.setup();
     const onChange = vi.fn();
@@ -714,6 +771,29 @@ describe('MultiSelector', () => {
     ).toBeInTheDocument();
   });
 
+  it('empty-state message is not exposed as a listbox child', async () => {
+    const user = userEvent.setup();
+    render(
+      <MultiSelector
+        label="Fruit"
+        options={defaultOptions}
+        value={[]}
+        onChange={() => {}}
+        hasSearch
+      />,
+    );
+
+    await user.click(screen.getByRole('button', {name: 'Fruit'}));
+    await user.type(screen.getByRole('combobox', h), 'xyz');
+
+    // role="listbox" only permits option/group children — the visual
+    // empty-state message must be presentational (it is announced through
+    // the result-count live region instead).
+    const listbox = screen.getByRole('listbox', h);
+    const empty = within(listbox).getByText('No results found');
+    expect(empty).toHaveAttribute('role', 'presentation');
+  });
+
   describe('result announcements', () => {
     it('announces the match count politely while searching', async () => {
       const user = userEvent.setup();
@@ -1348,6 +1428,85 @@ describe('MultiSelector statusVariant forwarding', () => {
       'detached',
     );
   });
+
+  it('keeps the on-field status icon for the attached variant', () => {
+    const {container} = render(
+      <MultiSelector
+        label="Fruit"
+        options={['Apple', 'Banana']}
+        value={[]}
+        onChange={() => {}}
+        status={{type: 'error', message: 'Required'}}
+      />,
+    );
+    // Attached: the status glyph replaces the chevron indicator on the field.
+    expect(
+      container.querySelector('.astryx-multi-selector-indicator-icon'),
+    ).toBeNull();
+  });
+
+  it('suppresses the on-field status icon for the detached variant', () => {
+    const {container} = render(
+      <MultiSelector
+        label="Fruit"
+        options={['Apple', 'Banana']}
+        value={[]}
+        onChange={() => {}}
+        status={{type: 'error', message: 'Required'}}
+        statusVariant="detached"
+      />,
+    );
+    // Detached: the message box below carries its own leading icon, so the
+    // field keeps its chevron indicator rather than duplicating the glyph.
+    expect(
+      container.querySelector('.astryx-multi-selector-indicator-icon'),
+    ).not.toBeNull();
+  });
+
+  it('detaches attached status by default for the ghost variant', () => {
+    const {container} = render(
+      <MultiSelector
+        label="Fruit"
+        options={['Apple', 'Banana']}
+        value={[]}
+        onChange={() => {}}
+        variant="ghost"
+        status={{type: 'error', message: 'Required'}}
+      />,
+    );
+    expect(container.querySelector('.astryx-multi-selector')).toHaveAttribute(
+      'data-variant',
+      'ghost',
+    );
+    expect(container.querySelector('.astryx-field-status')).toHaveAttribute(
+      'data-variant',
+      'detached',
+    );
+  });
+
+  it('uses a status tooltip for ghost multi-selectors when requested', () => {
+    const {container} = render(
+      <MultiSelector
+        label="Fruit"
+        options={['Apple', 'Banana']}
+        value={[]}
+        onChange={() => {}}
+        variant="ghost"
+        status={{type: 'warning', message: 'Some rows are hidden'}}
+        statusVariant="tooltip"
+      />,
+    );
+    expect(container.querySelector('.astryx-field-status')).toBeNull();
+    const statusButton = screen.getByRole('button', {
+      name: /warning details/i,
+    });
+    const tooltip = screen.getByRole('tooltip', h);
+    expect(tooltip).toHaveTextContent('Some rows are hidden');
+    expect(statusButton.getAttribute('aria-describedby')).toContain(tooltip.id);
+    expect(
+      screen.getByRole('combobox').getAttribute('aria-describedby'),
+    ).toContain(tooltip.id);
+  });
 });
 
 describe('MultiSelector clear icon theme target', () => {
@@ -1450,7 +1609,7 @@ describe('MultiSelector clear icon theme target', () => {
         },
       },
     });
-    const css = generateThemeCSSFlat(theme);
+    const css = generateThemeTestCSS(theme);
     expect(css).toContain('.astryx-multi-selector-clear-icon {');
     expect(css).toContain('width: 12px');
     expect(css).toContain('height: 12px');
@@ -1563,7 +1722,7 @@ describe('MultiSelector indicator (chevron) icon theme target', () => {
         },
       },
     });
-    const css = generateThemeCSSFlat(theme);
+    const css = generateThemeTestCSS(theme);
     expect(css).toContain('.astryx-multi-selector-indicator-icon {');
     expect(css).toContain('width: 14px');
     expect(css).toContain('height: 14px');
@@ -1571,3 +1730,144 @@ describe('MultiSelector indicator (chevron) icon theme target', () => {
     expect(css).toContain('color: var(--color-icon-primary)');
   });
 });
+
+describe('MultiSelector search affordances', () => {
+  it('renders a decorative (aria-hidden) magnifier icon whenever hasSearch is on', async () => {
+    const user = userEvent.setup();
+    render(
+      <MultiSelector
+        label="Fruit"
+        options={['Apple', 'Banana', 'Orange']}
+        value={[]}
+        onChange={() => {}}
+        hasSearch
+      />,
+    );
+    await user.click(screen.getByRole('button', {name: 'Fruit'}));
+    const search = screen.getByRole('combobox', h);
+    // The search field is a TextInput; the magnifier is its startIcon, so it
+    // sits inside the input container as a sibling of the <input>.
+    const wrapper = search.parentElement;
+    const magnifier = wrapper?.querySelector('.astryx-icon');
+    expect(magnifier).toBeTruthy();
+    expect(magnifier?.getAttribute('aria-hidden')).toBe('true');
+    expect(magnifier?.getAttribute('aria-label')).toBeNull();
+  });
+
+  it('renders the clear button once a query is typed and clears + refocuses on click', async () => {
+    const user = userEvent.setup();
+    render(
+      <MultiSelector
+        label="Fruit"
+        options={['Apple', 'Banana', 'Orange']}
+        value={[]}
+        onChange={() => {}}
+        hasSearch
+      />,
+    );
+    await user.click(screen.getByRole('button', {name: 'Fruit'}));
+    const search = screen.getByRole('combobox', h);
+    await user.type(search, 'ap');
+    expect(search).toHaveValue('ap');
+
+    // The clear button is TextInput's built-in hasClear affordance; its name is
+    // derived from the field label ("Search options").
+    const clear = screen.getByRole('button', {
+      name: 'Clear Search options',
+      hidden: true,
+    });
+
+    await user.click(clear);
+    expect(search).toHaveValue('');
+    expect(search).toHaveFocus();
+  });
+
+  it('does not render the clear button when the query is empty', async () => {
+    const user = userEvent.setup();
+    render(
+      <MultiSelector
+        label="Fruit"
+        options={['Apple', 'Banana', 'Orange']}
+        value={[]}
+        onChange={() => {}}
+        hasSearch
+      />,
+    );
+    await user.click(screen.getByRole('button', {name: 'Fruit'}));
+    expect(
+      screen.queryByRole('button', {
+        name: 'Clear Search options',
+        hidden: true,
+      }),
+    ).not.toBeInTheDocument();
+  });
+
+  it('keeps the combobox contract on the input, not the affordances', async () => {
+    const user = userEvent.setup();
+    render(
+      <MultiSelector
+        label="Fruit"
+        options={['Apple', 'Banana', 'Orange']}
+        value={[]}
+        onChange={() => {}}
+        hasSearch
+      />,
+    );
+    await user.click(screen.getByRole('button', {name: 'Fruit'}));
+    const search = screen.getByRole('combobox', h);
+    expect(search.tagName).toBe('INPUT');
+    expect(search).toHaveAttribute('aria-autocomplete', 'list');
+  });
+
+  it('tabs from the search input to the clear button (keeping the popup open) when a query is showing it', async () => {
+    const user = userEvent.setup();
+    render(
+      <MultiSelector
+        label="Fruit"
+        options={['Apple', 'Banana', 'Orange']}
+        value={[]}
+        onChange={() => {}}
+        hasSearch
+      />,
+    );
+    await user.click(screen.getByRole('button', {name: 'Fruit'}));
+    const trigger = screen.getByRole('button', {name: 'Fruit'});
+    const search = screen.getByRole('combobox', h);
+    await user.type(search, 'ap');
+    expect(search).toHaveFocus();
+
+    // Forward-tab lands on the clear (✕) button and the popup stays open, so
+    // the affordance is keyboard-reachable rather than being skipped when the
+    // input's Tab dismisses the popup.
+    await user.tab();
+    const clear = screen.getByRole('button', {
+      name: 'Clear Search options',
+      hidden: true,
+    });
+    expect(clear).toHaveFocus();
+    expect(trigger).toHaveAttribute('aria-expanded', 'true');
+  });
+
+  it('dismisses on Tab from the search input when there is no query (no clear button)', async () => {
+    const user = userEvent.setup();
+    render(
+      <MultiSelector
+        label="Fruit"
+        options={['Apple', 'Banana', 'Orange']}
+        value={[]}
+        onChange={() => {}}
+        hasSearch
+      />,
+    );
+    const trigger = screen.getByRole('button', {name: 'Fruit'});
+    await user.click(trigger);
+    const search = screen.getByRole('combobox', h);
+    // Focus moves into the search input on open (via rAF).
+    await waitFor(() => expect(search).toHaveFocus());
+
+    // With no query there is no clear button, so Tab dismisses the popup as a
+    // plain combobox does.
+    await user.tab();
+    expect(trigger).toHaveAttribute('aria-expanded', 'false');
+  });
+});