@pickle-ui/react 0.0.0-stage → 1.0.0-beta.3

package/src/components/form/Combobox.stories.tsx

@@ -0,0 +1,378 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import * as React from 'react';
+
+import { type ComponentMatrixCellProps, Story } from '../_internal/Story';
+import { Combobox } from './Combobox';
+
+const meta = {
+  component: Combobox,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  title: 'components/form/Combobox',
+} satisfies Meta<typeof Combobox>;
+
+export default meta;
+type Fruit = {
+  label: string;
+  value: string;
+};
+
+type FruitGroup = {
+  items: Fruit[];
+  value: string;
+};
+
+type StoryDefinition = StoryObj<typeof meta>;
+
+const FRUITS: Fruit[] = [
+  { label: 'Apple', value: 'apple' },
+  { label: 'Banana', value: 'banana' },
+  { label: 'Blueberry', value: 'blueberry' },
+  { label: 'Cherry', value: 'cherry' },
+  { label: 'Grape', value: 'grape' },
+  { label: 'Kiwi', value: 'kiwi' },
+  { label: 'Mango', value: 'mango' },
+  { label: 'Orange', value: 'orange' },
+  { label: 'Peach', value: 'peach' },
+  { label: 'Pear', value: 'pear' },
+  { label: 'Pineapple', value: 'pineapple' },
+  { label: 'Strawberry', value: 'strawberry' },
+];
+
+const PRODUCE: FruitGroup[] = [
+  {
+    items: [
+      { label: 'Apple', value: 'apple' },
+      { label: 'Banana', value: 'banana' },
+      { label: 'Cherry', value: 'cherry' },
+    ],
+    value: 'Fruits',
+  },
+  {
+    items: [
+      { label: 'Carrot', value: 'carrot' },
+      { label: 'Leek', value: 'leek' },
+      { label: 'Spinach', value: 'spinach' },
+    ],
+    value: 'Vegetables',
+  },
+];
+
+type FruitComboboxStateProps = {
+  disabled?: boolean;
+  focus?: boolean;
+  invalid?: boolean;
+  value?: Fruit;
+};
+
+const STATE_COLUMNS: {
+  key: string;
+  label: string;
+  props: FruitComboboxStateProps;
+}[] = [
+  { key: 'placeholder', label: 'Placeholder', props: {} },
+  { key: 'selected', label: 'Selected', props: { value: FRUITS[0] } },
+  {
+    key: 'focus',
+    label: 'Focus',
+    props: { focus: true, value: FRUITS[0] },
+  },
+  {
+    key: 'disabled',
+    label: 'Disabled',
+    props: { disabled: true, value: FRUITS[0] },
+  },
+  {
+    key: 'invalid',
+    label: 'Invalid',
+    props: { invalid: true, value: FRUITS[0] },
+  },
+];
+
+const STATE_PROPS = Object.fromEntries(
+  STATE_COLUMNS.map((state) => [state.key, state.props]),
+) as Record<string, FruitComboboxStateProps>;
+
+function ComboboxMatrixCell({ column }: ComponentMatrixCellProps) {
+  return <FruitCombobox {...STATE_PROPS[column.key]} />;
+}
+
+function CreatableFruit() {
+  const [fruits, setFruits] = React.useState(FRUITS);
+
+  return (
+    <Combobox
+      createLabel={(inputValue) => `Add "${inputValue}" to the list`}
+      items={fruits}
+      onCreate={(label) => {
+        const fruit = { label, value: label.toLowerCase() };
+        setFruits((current) => [...current, fruit]);
+
+        return fruit;
+      }}
+    >
+      <Combobox.Input
+        aria-label="Fruit"
+        className="w-64"
+        placeholder="Type a new fruit…"
+      />
+      <Combobox.Content>
+        <Combobox.List>
+          {(fruit: Fruit) => (
+            <Combobox.Item key={fruit.value} value={fruit}>
+              {fruit.label}
+            </Combobox.Item>
+          )}
+        </Combobox.List>
+      </Combobox.Content>
+    </Combobox>
+  );
+}
+
+function CreatableTags() {
+  const [tags, setTags] = React.useState<Fruit[]>([
+    { label: 'Design', value: 'design' },
+    { label: 'Engineering', value: 'engineering' },
+    { label: 'Marketing', value: 'marketing' },
+  ]);
+
+  return (
+    <Combobox
+      defaultValue={[tags[0]]}
+      items={tags}
+      multiple
+      onCreate={(label) => {
+        const tag = { label, value: label.toLowerCase() };
+        setTags((current) => [...current, tag]);
+
+        return tag;
+      }}
+    >
+      <Combobox.Chips className="w-80">
+        <Combobox.Value>
+          {(value: Fruit[]) => (
+            <>
+              {value.map((tag) => (
+                <Combobox.Chip key={tag.value}>{tag.label}</Combobox.Chip>
+              ))}
+              <Combobox.ChipsInput
+                aria-label="Tags"
+                placeholder={value.length > 0 ? '' : 'Add tags…'}
+              />
+            </>
+          )}
+        </Combobox.Value>
+      </Combobox.Chips>
+      <Combobox.Content>
+        <Combobox.List>
+          {(tag: Fruit) => (
+            <Combobox.Item key={tag.value} value={tag}>
+              {tag.label}
+            </Combobox.Item>
+          )}
+        </Combobox.List>
+      </Combobox.Content>
+    </Combobox>
+  );
+}
+
+function FruitCombobox({
+  disabled,
+  focus,
+  invalid,
+  value,
+}: FruitComboboxStateProps) {
+  return (
+    <Combobox defaultValue={value} disabled={disabled} items={FRUITS}>
+      <Combobox.Input
+        aria-invalid={invalid || undefined}
+        aria-label="Fruit"
+        className="w-48"
+        // Targeted by the pseudo-states parameter below: only the inner
+        // <input> gets :focus-visible, not the trigger or clear buttons.
+        data-pseudo-focus={focus || undefined}
+        placeholder="Select a fruit"
+      />
+      <Combobox.Content>
+        <Combobox.Empty>No fruit found.</Combobox.Empty>
+        <Combobox.List>
+          {(fruit: Fruit) => (
+            <Combobox.Item key={fruit.value} value={fruit}>
+              {fruit.label}
+            </Combobox.Item>
+          )}
+        </Combobox.List>
+      </Combobox.Content>
+    </Combobox>
+  );
+}
+
+function StartsWithFruit() {
+  return (
+    <Combobox
+      filter={(fruit: Fruit, query) =>
+        fruit.label.toLowerCase().startsWith(query.toLowerCase())
+      }
+      items={FRUITS}
+    >
+      <Combobox.Input
+        aria-label="Fruit (starts with)"
+        className="w-64"
+        placeholder="Matches the start of names"
+      />
+      <Combobox.Content>
+        <Combobox.Empty>No fruit starts with that.</Combobox.Empty>
+        <Combobox.List>
+          {(fruit: Fruit) => (
+            <Combobox.Item key={fruit.value} value={fruit}>
+              {fruit.label}
+            </Combobox.Item>
+          )}
+        </Combobox.List>
+      </Combobox.Content>
+    </Combobox>
+  );
+}
+
+export const All: StoryDefinition = {
+  parameters: {
+    pseudo: { focusVisible: ['[data-pseudo-focus]'] },
+  },
+  render: () => (
+    <Story.Layout className="max-w-5xl" title="Combobox">
+      <Story.Section title="States">
+        <Story.Matrix
+          Cell={ComboboxMatrixCell}
+          columns={STATE_COLUMNS}
+          rows={[{ key: 'combobox', label: 'Combobox' }]}
+        />
+      </Story.Section>
+
+      <Story.Section title="Label and clear">
+        <Combobox defaultValue={FRUITS[6]} items={FRUITS}>
+          <div className="flex w-64 flex-col gap-2">
+            <label
+              className="text-sm leading-none font-medium"
+              htmlFor="favorite-fruit"
+            >
+              Favorite fruit
+            </label>
+            <Combobox.Input
+              id="favorite-fruit"
+              placeholder="Search fruits…"
+              showClear
+            />
+          </div>
+          <Combobox.Content>
+            <Combobox.Empty>No fruit found.</Combobox.Empty>
+            <Combobox.List>
+              {(fruit: Fruit) => (
+                <Combobox.Item key={fruit.value} value={fruit}>
+                  {fruit.label}
+                </Combobox.Item>
+              )}
+            </Combobox.List>
+          </Combobox.Content>
+        </Combobox>
+      </Story.Section>
+
+      <Story.Section title="Sizes">
+        <div className="flex flex-wrap items-center gap-4">
+          {(['sm', 'md', 'lg'] as const).map((size) => (
+            <Combobox items={FRUITS} key={size}>
+              <Combobox.Input
+                aria-label={`Fruit (${size})`}
+                className="w-48"
+                placeholder={`Size ${size}`}
+                size={size}
+              />
+              <Combobox.Content>
+                <Combobox.Empty>No fruit found.</Combobox.Empty>
+                <Combobox.List>
+                  {(fruit: Fruit) => (
+                    <Combobox.Item key={fruit.value} value={fruit}>
+                      {fruit.label}
+                    </Combobox.Item>
+                  )}
+                </Combobox.List>
+              </Combobox.Content>
+            </Combobox>
+          ))}
+        </div>
+      </Story.Section>
+
+      <Story.Section title="Groups">
+        <Combobox items={PRODUCE}>
+          <Combobox.Input
+            aria-label="Produce"
+            className="w-64"
+            placeholder="Search produce…"
+          />
+          <Combobox.Content>
+            <Combobox.Empty>Nothing found.</Combobox.Empty>
+            <Combobox.List>
+              {(group: FruitGroup, index: number) => (
+                <Combobox.Group items={group.items} key={group.value}>
+                  {index > 0 ? <Combobox.Separator /> : null}
+                  <Combobox.GroupLabel>{group.value}</Combobox.GroupLabel>
+                  <Combobox.Collection>
+                    {(item: Fruit) => (
+                      <Combobox.Item key={item.value} value={item}>
+                        {item.label}
+                      </Combobox.Item>
+                    )}
+                  </Combobox.Collection>
+                </Combobox.Group>
+              )}
+            </Combobox.List>
+          </Combobox.Content>
+        </Combobox>
+      </Story.Section>
+
+      <Story.Section title="Multiple">
+        <Combobox defaultValue={[FRUITS[0], FRUITS[3]]} items={FRUITS} multiple>
+          <Combobox.Chips className="w-80">
+            <Combobox.Value>
+              {(value: Fruit[]) => (
+                <>
+                  {value.map((fruit) => (
+                    <Combobox.Chip key={fruit.value}>
+                      {fruit.label}
+                    </Combobox.Chip>
+                  ))}
+                  <Combobox.ChipsInput
+                    aria-label="Fruits"
+                    placeholder={value.length > 0 ? '' : 'Select fruits…'}
+                  />
+                </>
+              )}
+            </Combobox.Value>
+          </Combobox.Chips>
+          <Combobox.Content>
+            <Combobox.Empty>No fruit found.</Combobox.Empty>
+            <Combobox.List>
+              {(fruit: Fruit) => (
+                <Combobox.Item key={fruit.value} value={fruit}>
+                  {fruit.label}
+                </Combobox.Item>
+              )}
+            </Combobox.List>
+          </Combobox.Content>
+        </Combobox>
+      </Story.Section>
+
+      <Story.Section title="Custom filter">
+        <StartsWithFruit />
+      </Story.Section>
+
+      <Story.Section title="Creatable">
+        <div className="flex flex-wrap items-start gap-4">
+          <CreatableFruit />
+          <CreatableTags />
+        </div>
+      </Story.Section>
+    </Story.Layout>
+  ),
+};

package/src/components/form/Combobox.test.tsx

@@ -0,0 +1,334 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import * as React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+
+import { Combobox } from './Combobox';
+
+type Fruit = { label: string; value: string };
+
+const FRUITS: Fruit[] = [
+  { label: 'Apple', value: 'apple' },
+  { label: 'Banana', value: 'banana' },
+  { label: 'Cherry', value: 'cherry' },
+];
+
+function renderList() {
+  return (
+    <Combobox.Content>
+      <Combobox.Empty>No fruit found.</Combobox.Empty>
+      <Combobox.List>
+        {(fruit: Fruit) => (
+          <Combobox.Item key={fruit.value} value={fruit}>
+            {fruit.label}
+          </Combobox.Item>
+        )}
+      </Combobox.List>
+    </Combobox.Content>
+  );
+}
+
+describe('Combobox', () => {
+  it('shows the selected item label in the input', () => {
+    render(
+      <Combobox defaultValue={FRUITS[1]} items={FRUITS}>
+        <Combobox.Input aria-label="Fruit" />
+        {renderList()}
+      </Combobox>,
+    );
+
+    expect(screen.getByRole('combobox', { name: 'Fruit' })).toHaveValue(
+      'Banana',
+    );
+  });
+
+  it('filters items as the user types', () => {
+    render(
+      <Combobox defaultOpen items={FRUITS}>
+        <Combobox.Input aria-label="Fruit" />
+        {renderList()}
+      </Combobox>,
+    );
+
+    fireEvent.change(screen.getByRole('combobox', { name: 'Fruit' }), {
+      target: { value: 'ch' },
+    });
+
+    expect(screen.getAllByRole('option').map((o) => o.textContent)).toEqual([
+      'Cherry',
+    ]);
+  });
+
+  it('shows the empty state when nothing matches', () => {
+    render(
+      <Combobox defaultOpen items={FRUITS}>
+        <Combobox.Input aria-label="Fruit" />
+        {renderList()}
+      </Combobox>,
+    );
+
+    fireEvent.change(screen.getByRole('combobox', { name: 'Fruit' }), {
+      target: { value: 'zzz' },
+    });
+
+    expect(screen.queryAllByRole('option')).toHaveLength(0);
+    expect(screen.getByText('No fruit found.')).toBeInTheDocument();
+  });
+
+  it('renders the trigger by default and the clear button on demand', () => {
+    const { rerender } = render(
+      <Combobox defaultValue={FRUITS[0]} items={FRUITS}>
+        <Combobox.Input aria-label="Fruit" />
+        {renderList()}
+      </Combobox>,
+    );
+
+    expect(screen.getByLabelText('Open popup')).toBeInTheDocument();
+    expect(screen.queryByLabelText('Clear')).not.toBeInTheDocument();
+
+    rerender(
+      <Combobox defaultValue={FRUITS[0]} items={FRUITS}>
+        <Combobox.Input aria-label="Fruit" showClear showTrigger={false} />
+        {renderList()}
+      </Combobox>,
+    );
+
+    expect(screen.queryByLabelText('Open popup')).not.toBeInTheDocument();
+    expect(screen.getByLabelText('Clear')).toBeInTheDocument();
+  });
+
+  it('renders removable chips for multiple selection', () => {
+    render(
+      <Combobox defaultValue={[FRUITS[0], FRUITS[2]]} items={FRUITS} multiple>
+        <Combobox.Chips>
+          <Combobox.Value>
+            {(value: Fruit[]) => (
+              <>
+                {value.map((fruit) => (
+                  <Combobox.Chip key={fruit.value}>{fruit.label}</Combobox.Chip>
+                ))}
+                <Combobox.ChipsInput aria-label="Fruits" />
+              </>
+            )}
+          </Combobox.Value>
+        </Combobox.Chips>
+        {renderList()}
+      </Combobox>,
+    );
+
+    expect(screen.getByText('Apple')).toBeInTheDocument();
+    expect(screen.getByText('Cherry')).toBeInTheDocument();
+
+    fireEvent.click(screen.getAllByLabelText('Remove')[0]);
+
+    expect(screen.queryByText('Apple')).not.toBeInTheDocument();
+    expect(screen.getByText('Cherry')).toBeInTheDocument();
+  });
+
+  describe('onCreate', () => {
+    function CreatableFruit({
+      multiple = false,
+      onCreate,
+    }: {
+      multiple?: boolean;
+      onCreate: (label: string) => Fruit;
+    }) {
+      const [items, setItems] = React.useState(FRUITS);
+
+      return (
+        <Combobox
+          items={items}
+          multiple={multiple}
+          onCreate={(label) => {
+            const fruit = onCreate(label);
+            setItems((current) => [...current, fruit]);
+
+            return fruit;
+          }}
+        >
+          {multiple ? (
+            <Combobox.Chips>
+              <Combobox.Value>
+                {(value: Fruit[]) => (
+                  <>
+                    {value.map((fruit) => (
+                      <Combobox.Chip key={fruit.value}>
+                        {fruit.label}
+                      </Combobox.Chip>
+                    ))}
+                    <Combobox.ChipsInput aria-label="Fruit" />
+                  </>
+                )}
+              </Combobox.Value>
+            </Combobox.Chips>
+          ) : (
+            <Combobox.Input aria-label="Fruit" />
+          )}
+          {renderList()}
+        </Combobox>
+      );
+    }
+
+    function type(text: string) {
+      const input = screen.getByRole('combobox', { name: 'Fruit' });
+      fireEvent.focus(input);
+      // Base UI only treats events with an inputType as typed queries.
+      fireEvent.input(input, {
+        inputType: 'insertText',
+        target: { value: text },
+      });
+    }
+
+    const toFruit = (label: string): Fruit => ({
+      label,
+      value: label.toLowerCase(),
+    });
+
+    it('offers a create option when the input matches no item', () => {
+      render(<CreatableFruit onCreate={toFruit} />);
+
+      type('Papaya');
+
+      expect(screen.getAllByRole('option').map((o) => o.textContent)).toEqual([
+        'Create "Papaya"',
+      ]);
+      expect(screen.queryByText('No fruit found.')).not.toBeInTheDocument();
+    });
+
+    it('hides the create option on an exact, case-insensitive match', () => {
+      render(<CreatableFruit onCreate={toFruit} />);
+
+      type('cherry ');
+
+      expect(screen.getAllByRole('option').map((o) => o.textContent)).toEqual([
+        'Cherry',
+      ]);
+    });
+
+    it('creates and selects the new item', () => {
+      const handleCreate = vi.fn(toFruit);
+      render(<CreatableFruit onCreate={handleCreate} />);
+
+      type('Papaya');
+      fireEvent.click(screen.getByRole('option', { name: 'Create "Papaya"' }));
+
+      expect(handleCreate).toHaveBeenCalledWith('Papaya');
+      expect(screen.getByRole('combobox', { name: 'Fruit' })).toHaveValue(
+        'Papaya',
+      );
+    });
+
+    it('adds the created item as a chip in multiple mode', () => {
+      render(<CreatableFruit multiple onCreate={toFruit} />);
+
+      type('Papaya');
+      fireEvent.click(screen.getByRole('option', { name: 'Create "Papaya"' }));
+
+      expect(screen.getByText('Papaya')).toHaveAttribute(
+        'data-slot',
+        'combobox-chip',
+      );
+    });
+
+    it('appends the create option after grouped items', () => {
+      const groups = [{ items: FRUITS, value: 'Fruits' }];
+
+      render(
+        <Combobox items={groups} onCreate={toFruit}>
+          <Combobox.Input aria-label="Fruit" />
+          <Combobox.Content>
+            <Combobox.List>
+              {(group: (typeof groups)[number]) => (
+                <Combobox.Group items={group.items} key={group.value}>
+                  <Combobox.GroupLabel>{group.value}</Combobox.GroupLabel>
+                  <Combobox.Collection>
+                    {(fruit: Fruit) => (
+                      <Combobox.Item key={fruit.value} value={fruit}>
+                        {fruit.label}
+                      </Combobox.Item>
+                    )}
+                  </Combobox.Collection>
+                </Combobox.Group>
+              )}
+            </Combobox.List>
+          </Combobox.Content>
+        </Combobox>,
+      );
+
+      type('an');
+
+      expect(screen.getAllByRole('option').map((o) => o.textContent)).toEqual([
+        'Banana',
+        'Create "an"',
+      ]);
+    });
+  });
+
+  describe('filter', () => {
+    function typeQuery(text: string) {
+      const input = screen.getByRole('combobox', { name: 'Fruit' });
+      fireEvent.focus(input);
+      fireEvent.input(input, {
+        inputType: 'insertText',
+        target: { value: text },
+      });
+    }
+
+    function options() {
+      return screen.queryAllByRole('option').map((o) => o.textContent);
+    }
+
+    const startsWith = (fruit: Fruit, query: string) =>
+      fruit.label.toLowerCase().startsWith(query.toLowerCase());
+
+    it('uses a custom filter function', () => {
+      const filter = vi.fn(startsWith);
+      render(
+        <Combobox filter={filter} items={FRUITS}>
+          <Combobox.Input aria-label="Fruit" />
+          {renderList()}
+        </Combobox>,
+      );
+
+      typeQuery('an');
+      expect(options()).toEqual([]);
+      expect(
+        filter.mock.calls.some(
+          ([item, query]) => item === FRUITS[1] && query === 'an',
+        ),
+      ).toBe(true);
+
+      typeQuery('ba');
+      expect(options()).toEqual(['Banana']);
+    });
+
+    it('disables filtering with filter={null}', () => {
+      render(
+        <Combobox filter={null} items={FRUITS}>
+          <Combobox.Input aria-label="Fruit" />
+          {renderList()}
+        </Combobox>,
+      );
+
+      typeQuery('zzz');
+
+      expect(options()).toEqual(['Apple', 'Banana', 'Cherry']);
+    });
+
+    it('keeps the create option with a custom filter', () => {
+      render(
+        <Combobox
+          filter={startsWith}
+          items={FRUITS}
+          onCreate={(label) => ({ label, value: label })}
+        >
+          <Combobox.Input aria-label="Fruit" />
+          {renderList()}
+        </Combobox>,
+      );
+
+      typeQuery('an');
+
+      expect(options()).toEqual(['Create "an"']);
+    });
+  });
+});