@astryxdesign/core 0.4.5 → 0.4.6-canary.cea9ecd

package/src/Selector/Selector.doc.mjs

@@ -27,10 +27,18 @@ export const docs = {
         states: ['disabled'],
       },
       {className: 'astryx-selector-option'},
+      {
+        className: 'astryx-selector-option-row',
+        visualProps: ['size'],
+        states: ['selected', 'disabled'],
+      },
       {className: 'astryx-selector-search'},
       {className: 'astryx-selector-section-heading'},
       {className: 'astryx-selector-empty-state'},
-      {className: 'astryx-selector-clear-icon', deprecatedFor: 'input-clear-icon'},
+      {
+        className: 'astryx-selector-clear-icon',
+        deprecatedFor: 'input-clear-icon',
+      },
       {className: 'astryx-selector-indicator-icon', states: ['state']},
       {className: 'astryx-selector-check'},
       {className: 'astryx-selector-popup'},
@@ -48,7 +56,7 @@ export const docs = {
       name: 'options',
       type: 'SelectorOption[]',
       description:
-        'Array of items: strings, objects with value/label/icon/disabled, dividers ({type: "divider"}), or sections ({type: "section", title, items}).',
+        'Array of items: strings, objects with value/label/description/icon/disabled, dividers ({type: "divider"}), or sections ({type: "section", title, items}).',
       required: true,
     },
     {
@@ -159,6 +167,12 @@ export const docs = {
       description:
         'Custom render function for each selectable option in the dropdown. Use this instead of JSX children; dividers and sections are rendered by the selector.',
     },
+    {
+      name: 'renderValue',
+      type: '(option: SelectorOptionData) => ReactNode',
+      description:
+        'Custom render function for the selected option inside the closed trigger. The trigger is sized by padding, so it is the size token for a one-line value (28/32/36) and exactly one text line taller for a two-line one (48/52/56) — always on the 4px rhythm, always aligned with the buttons and inputs beside it. Inside an InputGroup the group owns the row height: a SelectorOption folds onto one line and ellipsizes, and any taller node is cut off at the row.',
+    },
     {
       name: 'indicatorPosition',
       type: "'start' | 'end'",

package/src/Selector/Selector.test.tsx

@@ -19,8 +19,11 @@ import {
 } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import {useState} from 'react';
+import type {ReactNode} from 'react';
 import {Selector} from './Selector';
 import {SelectorOption} from './SelectorOption';
+import {Item} from '../Item';
+import type {SelectorOptionData} from './types';
 import {Icon} from '../Icon';
 import {RadioIndicator} from '../Indicator';
 import {InputGroup, InputGroupText} from '../InputGroup';
@@ -2337,7 +2340,7 @@ describe('Selector clear icon theme target', () => {
     expect(css).toContain('.astryx-selector-clear-icon {');
     expect(css).toContain('width: 12px');
     expect(css).toContain('height: 12px');
-    expect(css).toContain('.astryx-selector-clear-icon:hover {');
+    expect(css).toContain('.astryx-selector-clear-icon:hover');
     expect(css).toContain('color: var(--color-icon-primary)');
   });
 });
@@ -2993,3 +2996,524 @@ describe('Selector popup theme target', () => {
     },
   );
 });
+
+describe('Selector option-row theme target', () => {
+  const ROW_OPTIONS = ['Apple', 'Banana', 'Orange'];
+
+  it('renders astryx-selector-option-row, with its size, on every dropdown row', async () => {
+    const user = userEvent.setup();
+    render(
+      <Selector
+        label="Fruit"
+        options={ROW_OPTIONS}
+        value=""
+        onChange={() => {}}
+        size="lg"
+      />,
+    );
+    await user.click(screen.getByRole('combobox'));
+    const options = screen.getAllByRole('option', h);
+    expect(options).toHaveLength(3);
+    for (const option of options) {
+      expect(option).toHaveClass('astryx-selector-option-row');
+      expect(option).toHaveClass('lg');
+      expect(option).toHaveAttribute('data-size', 'lg');
+    }
+  });
+
+  it('reflects the selected state on the row target', async () => {
+    const user = userEvent.setup();
+    render(
+      <Selector
+        label="Fruit"
+        options={ROW_OPTIONS}
+        value="Banana"
+        onChange={() => {}}
+      />,
+    );
+    await user.click(screen.getByRole('combobox'));
+    const selected = screen.getByRole('option', {name: 'Banana', ...h});
+    expect(selected).toHaveClass('astryx-selector-option-row');
+    expect(selected).toHaveAttribute('data-selected', 'selected');
+  });
+
+  it('leaves the state attributes off an unselected, enabled row', async () => {
+    const user = userEvent.setup();
+    render(
+      <Selector
+        label="Fruit"
+        options={ROW_OPTIONS}
+        value="Banana"
+        onChange={() => {}}
+      />,
+    );
+    await user.click(screen.getByRole('combobox'));
+    const plain = screen.getByRole('option', {name: 'Apple', ...h});
+    expect(plain).toHaveClass('astryx-selector-option-row');
+    // themeProps emits the data-* only when the state is truthy, so a theme's
+    // `.selected` / `.disabled` rules never touch a plain row.
+    expect(plain).not.toHaveAttribute('data-selected');
+    expect(plain).not.toHaveAttribute('data-disabled');
+  });
+
+  it('reflects the disabled state on the row target', async () => {
+    const user = userEvent.setup();
+    render(
+      <Selector
+        label="Fruit"
+        options={[{value: 'Apple', disabled: true}, 'Banana']}
+        value=""
+        onChange={() => {}}
+      />,
+    );
+    await user.click(screen.getByRole('combobox'));
+    const disabled = screen.getByRole('option', {name: 'Apple', ...h});
+    expect(disabled).toHaveClass('astryx-selector-option-row');
+    expect(disabled).toHaveAttribute('data-disabled', 'disabled');
+  });
+
+  it('keeps the row target when renderOption replaces the content', async () => {
+    const user = userEvent.setup();
+    render(
+      <Selector
+        label="Fruit"
+        options={ROW_OPTIONS}
+        value=""
+        onChange={() => {}}
+        renderOption={option => (
+          <span data-testid="custom-row">{option.label ?? option.value}</span>
+        )}
+      />,
+    );
+    await user.click(screen.getByRole('combobox'));
+    const option = screen.getAllByRole('option', h)[0];
+    // The row owns the padding/density, so custom content is inset the same as
+    // the default row — one row override reaches both.
+    expect(option).toHaveClass('astryx-selector-option-row');
+    expect(within(option).getByTestId('custom-row')).toHaveTextContent('Apple');
+  });
+
+  it('exposes the row target, its states and its size to defineTheme', () => {
+    // jsdom cannot resolve the @layer cascade, so the generated CSS is what
+    // proves a theme can reach the row (padding, state, per-size density).
+    const theme = defineTheme({
+      name: 'selector-option-row-target-test',
+      components: {
+        'selector-option-row': {
+          base: {padding: 'var(--spacing-2)', borderRadius: '8px'},
+          selected: {backgroundColor: 'var(--color-background-muted)'},
+          disabled: {opacity: '0.5'},
+          'size:md': {padding: 'var(--spacing-2)'},
+        },
+      },
+    });
+    const css = generateThemeTestCSS(theme);
+    expect(css).toContain('.astryx-selector-option-row {');
+    expect(css).toContain('.astryx-selector-option-row.selected');
+    expect(css).toContain('.astryx-selector-option-row.disabled');
+    expect(css).toContain('.astryx-selector-option-row.md');
+  });
+});
+
+describe('Selector option descriptions and trigger value', () => {
+  const LOCK = <span data-testid="lock-glyph" />;
+  const GLOBE = <span data-testid="globe-glyph" />;
+  const VISIBILITY = [
+    {
+      value: 'private',
+      label: 'Private',
+      icon: LOCK,
+      description: 'Only members can access this space.',
+    },
+    {
+      value: 'public',
+      label: 'Public',
+      icon: GLOBE,
+      description: 'Anyone at the company can join.',
+    },
+  ];
+
+  it('renders an option description in the dropdown row', () => {
+    render(
+      <Selector
+        label="Visibility"
+        options={VISIBILITY}
+        value="private"
+        onChange={() => {}}
+        isDefaultOpen
+      />,
+    );
+
+    const [row] = screen.getAllByRole('option', {hidden: true});
+    expect(row).toHaveTextContent('Private');
+    expect(row).toHaveTextContent('Only members can access this space.');
+  });
+
+  it('keeps the description out of the closed trigger by default', () => {
+    render(
+      <Selector
+        label="Visibility"
+        options={VISIBILITY}
+        value="private"
+        onChange={() => {}}
+      />,
+    );
+
+    const trigger = screen.getByRole('combobox');
+    expect(trigger).toHaveTextContent('Private');
+    expect(trigger).not.toHaveTextContent(
+      'Only members can access this space.',
+    );
+  });
+
+  it("renders the selected option's icon in the closed trigger", () => {
+    render(
+      <Selector
+        label="Visibility"
+        options={VISIBILITY}
+        value="private"
+        onChange={() => {}}
+      />,
+    );
+
+    const trigger = screen.getByRole('combobox');
+    expect(within(trigger).getByTestId('lock-glyph')).toBeInTheDocument();
+    expect(
+      within(trigger).queryByTestId('globe-glyph'),
+    ).not.toBeInTheDocument();
+  });
+
+  it('renders no option icon while showing the placeholder', () => {
+    render(
+      <Selector
+        label="Visibility"
+        options={VISIBILITY}
+        value={undefined}
+        onChange={() => {}}
+        placeholder="Choose..."
+      />,
+    );
+
+    const trigger = screen.getByRole('combobox');
+    expect(trigger).toHaveTextContent('Choose...');
+    expect(within(trigger).queryByTestId('lock-glyph')).not.toBeInTheDocument();
+  });
+
+  it('lets startIcon win over the selected option icon', () => {
+    render(
+      <Selector
+        label="Visibility"
+        options={VISIBILITY}
+        value="private"
+        onChange={() => {}}
+        startIcon={<span data-testid="pinned-icon" />}
+      />,
+    );
+
+    // One leading glyph in the trigger, not two.
+    expect(screen.getByTestId('pinned-icon')).toBeInTheDocument();
+    expect(
+      within(screen.getByRole('combobox')).queryByTestId('lock-glyph'),
+    ).not.toBeInTheDocument();
+  });
+
+  it('renders the selected option through renderValue', () => {
+    render(
+      <Selector
+        label="Visibility"
+        options={VISIBILITY}
+        value="private"
+        onChange={() => {}}
+        renderValue={option => (
+          <SelectorOption
+            icon={option.icon}
+            label={option.label ?? option.value}
+            description={option.description}
+          />
+        )}
+      />,
+    );
+
+    const trigger = screen.getByRole('combobox');
+    expect(trigger).toHaveTextContent('Private');
+    expect(trigger).toHaveTextContent('Only members can access this space.');
+    expect(within(trigger).getByTestId('lock-glyph')).toBeInTheDocument();
+  });
+
+  it('sizes the trigger from what renderValue draws, not from it being passed', () => {
+    // The regression this guards: keying the height off `renderValue != null`
+    // handed a one-line custom value a taller control than the same value in
+    // the default trigger, so `size` quietly stopped meaning its token. The
+    // trigger carries one set of sizing classes for every case — a one-line
+    // value measures the token, and only a second line of content adds a
+    // second line of height.
+    const triggerSizing = () =>
+      new Set(
+        (screen.getByRole('combobox').parentElement?.className ?? '')
+          .split(' ')
+          .filter(Boolean),
+      );
+
+    const plain = render(
+      <Selector
+        label="Visibility"
+        options={VISIBILITY}
+        value="private"
+        onChange={() => {}}
+      />,
+    );
+    const defaultSizing = triggerSizing();
+    plain.unmount();
+
+    const oneLine = render(
+      <Selector
+        label="Visibility"
+        options={VISIBILITY}
+        value="private"
+        onChange={() => {}}
+        renderValue={option => <span>{option.label}</span>}
+      />,
+    );
+    expect(triggerSizing()).toEqual(defaultSizing);
+    oneLine.unmount();
+
+    render(
+      <Selector
+        label="Visibility"
+        options={VISIBILITY}
+        value="private"
+        onChange={() => {}}
+        renderValue={option => (
+          <SelectorOption
+            icon={option.icon}
+            label={option.label ?? option.value}
+            description={option.description}
+          />
+        )}
+      />,
+    );
+    expect(triggerSizing()).toEqual(defaultSizing);
+  });
+
+  it("follows the caller's SelectorOption layout, but folds inline in a group", () => {
+    // The trigger has no layout prop: the SelectorOption the caller renders
+    // decides, and the trigger's padding sizes it to whatever that draws. The
+    // one exception is an InputGroup, which pins the row height — the value
+    // box is clamped to it, so a stacked row would lose its second line at the
+    // cut. Folding inline keeps the description visible instead.
+    const renderValue = (option: SelectorOptionData) => (
+      <SelectorOption
+        icon={option.icon}
+        label={option.label ?? option.value}
+        description={option.description}
+      />
+    );
+    const classesOf = (label: HTMLElement) =>
+      new Set((label.parentElement?.className ?? '').split(' '));
+    const triggerClasses = () =>
+      classesOf(within(screen.getByRole('combobox')).getByText('Private'));
+
+    const stackedRef = render(<Item label="Private" description="Why" />);
+    const stackedClasses = classesOf(screen.getByText('Private'));
+    stackedRef.unmount();
+
+    const inlineRef = render(
+      <Item label="Private" description="Why" layout="inline" />,
+    );
+    const inlineOnly = [...classesOf(screen.getByText('Private'))].filter(
+      c => c !== '' && !stackedClasses.has(c),
+    );
+    inlineRef.unmount();
+    expect(inlineOnly.length).toBeGreaterThan(0);
+
+    const standalone = render(
+      <Selector
+        label="Visibility"
+        options={VISIBILITY}
+        value="private"
+        onChange={() => {}}
+        renderValue={renderValue}
+      />,
+    );
+    expect(inlineOnly.some(c => triggerClasses().has(c))).toBe(false);
+    standalone.unmount();
+
+    render(
+      <InputGroup label="Space settings">
+        <Selector
+          label="Visibility"
+          options={VISIBILITY}
+          value="private"
+          onChange={() => {}}
+          renderValue={renderValue}
+        />
+      </InputGroup>,
+    );
+    expect(inlineOnly.every(c => triggerClasses().has(c))).toBe(true);
+  });
+
+  it('clamps the trigger value box in a group, whatever renderValue draws', () => {
+    // The hole this guards: the one-line fold a group imposes used to reach
+    // only SelectorOption, which reads the row-layout context. Any other node
+    // ignored it and bled through the trigger's border, over the rows above
+    // and below the group. The clamp is on the trigger's own value box, so it
+    // cannot depend on what the value is.
+    const valueBox = () => {
+      const box = screen.getByRole('combobox').firstElementChild;
+      return new Set((box?.className ?? '').split(' ').filter(Boolean));
+    };
+    const grouped = (
+      renderValue: (option: SelectorOptionData) => ReactNode,
+    ) => (
+      <InputGroup label="Space settings">
+        <Selector
+          label="Visibility"
+          options={VISIBILITY}
+          value="private"
+          onChange={() => {}}
+          renderValue={renderValue}
+        />
+      </InputGroup>
+    );
+
+    const standalone = render(
+      <Selector
+        label="Visibility"
+        options={VISIBILITY}
+        value="private"
+        onChange={() => {}}
+        renderValue={option => <span>{option.label}</span>}
+      />,
+    );
+    const unclamped = valueBox();
+    standalone.unmount();
+
+    const withOption = render(
+      grouped(option => (
+        <SelectorOption
+          icon={option.icon}
+          label={option.label ?? option.value}
+          description={option.description}
+        />
+      )),
+    );
+    const clamped = valueBox();
+    expect(clamped).not.toEqual(unclamped);
+    withOption.unmount();
+
+    // A row the Selector knows nothing about, and a bare element: same box.
+    const withItem = render(
+      grouped(option => (
+        <Item
+          label={option.label ?? option.value}
+          description={option.description}
+        />
+      )),
+    );
+    expect(valueBox()).toEqual(clamped);
+    withItem.unmount();
+
+    render(
+      grouped(option => (
+        <div>
+          <div>{option.label}</div>
+          <div>{option.description}</div>
+        </div>
+      )),
+    );
+    expect(valueBox()).toEqual(clamped);
+  });
+
+  it('does not let a control sized above its group grow the row', () => {
+    // The group's height is the row, so inside one the trigger drops the floor
+    // its own `size` would otherwise assert: <InputGroup size="md"> with a
+    // <Selector size="lg"> stays the group's 32px. The size still reaches the
+    // theme (the trigger keeps its `size` marker class); what it no longer
+    // does is set a height. Standalone, the two sizes still differ.
+    const triggerSizing = () =>
+      new Set(
+        (screen.getByRole('combobox').parentElement?.className ?? '')
+          .split(' ')
+          .filter(Boolean),
+      );
+    // What changes between the two sizes. StyleX keeps a debug class per style
+    // object even where every declaration in it lost, and the theme keeps its
+    // own `size` marker; the atomic classes are what carry the geometry.
+    const geometryDiff = (a: Set<string>, b: Set<string>) => {
+      const atomic = (classes: Set<string>) =>
+        [...classes].filter(c => !c.includes('__') && c !== 'md' && c !== 'lg');
+      return [...atomic(a), ...atomic(b)].filter(c => !(a.has(c) && b.has(c)));
+    };
+    const selector = (size: 'md' | 'lg') => (
+      <Selector
+        label="Visibility"
+        size={size}
+        options={VISIBILITY}
+        value="private"
+        onChange={() => {}}
+      />
+    );
+
+    const standaloneMd = render(selector('md'));
+    const standaloneMdSizing = triggerSizing();
+    standaloneMd.unmount();
+
+    const standaloneLg = render(selector('lg'));
+    expect(geometryDiff(standaloneMdSizing, triggerSizing())).not.toEqual([]);
+    standaloneLg.unmount();
+
+    const groupedMd = render(
+      <InputGroup label="Space settings" size="md">
+        {selector('md')}
+      </InputGroup>,
+    );
+    const groupedMdSizing = triggerSizing();
+    groupedMd.unmount();
+
+    render(
+      <InputGroup label="Space settings" size="md">
+        {selector('lg')}
+      </InputGroup>,
+    );
+    expect(geometryDiff(groupedMdSizing, triggerSizing())).toEqual([]);
+  });
+
+  it('does not call renderValue for the placeholder', () => {
+    const renderValue = vi.fn(() => <span>custom</span>);
+    render(
+      <Selector
+        label="Visibility"
+        options={VISIBILITY}
+        value={undefined}
+        onChange={() => {}}
+        placeholder="Choose..."
+        renderValue={renderValue}
+      />,
+    );
+
+    expect(renderValue).not.toHaveBeenCalled();
+    expect(screen.getByRole('combobox')).toHaveTextContent('Choose...');
+  });
+
+  it('matches type-ahead on the label, not the description', () => {
+    // "Anyone" starts the public description; typing "a" must not select it.
+    function Harness() {
+      const [value, setValue] = useState<string | undefined>(undefined);
+      return (
+        <Selector
+          label="Visibility"
+          options={VISIBILITY}
+          value={value}
+          onChange={setValue}
+        />
+      );
+    }
+    render(<Harness />);
+
+    const trigger = screen.getByRole('combobox');
+    trigger.focus();
+    type('pu', trigger);
+    expect(trigger).toHaveTextContent('Public');
+    expect(trigger).not.toHaveTextContent('Anyone at the company can join.');
+  });
+});