@purpurds/autocomplete 0.0.1

package/src/autocomplete.test.tsx

@@ -0,0 +1,515 @@
+import React from "react";
+import * as matchers from "@testing-library/jest-dom/matchers";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { Autocomplete } from "./autocomplete";
+
+expect.extend(matchers);
+
+describe("B2xAutocomplete", () => {
+  afterEach(cleanup);
+
+  const options = [
+    { id: "0", label: "Option 0" },
+    { id: "1", label: "Option 1" },
+    { id: "2", label: "Option 2" },
+    { id: "10", label: "Option 10" },
+    { id: "12", label: "Option 12" },
+  ];
+
+  it("should render given input with correct props", () => {
+    render(
+      <Autocomplete
+        id="test-id"
+        data-testid="test-id"
+        listboxLabel="listbox-label"
+        options={options}
+        selectedOption={options[0]}
+        renderInput={(props) => <input {...props} data-testid="autocomplete-input" />}
+      />
+    );
+
+    const input: HTMLInputElement = screen.getByTestId("autocomplete-input");
+
+    expect(input).toBeVisible();
+    expect(input).toHaveAttribute("autoComplete", "off");
+    expect(input).toHaveAttribute("aria-controls", "test-id-listbox");
+    expect(input).toHaveAttribute("aria-autocomplete", "list");
+    expect(input).toHaveAttribute("aria-expanded", "false");
+    expect(input).toHaveAttribute("id", "test-id-input");
+    expect(input).toHaveAttribute("role", "combobox");
+    expect(input.value).toEqual(options[0].label);
+  });
+
+  it("should show listbox with items when input is focused if openOnFocus is set", async () => {
+    render(
+      <Autocomplete
+        options={options}
+        id="test-id"
+        data-testid="test-id"
+        selectedOption={options[0]}
+        listboxLabel="Options"
+        renderInput={(props) => <input {...props} data-testid="autocomplete-input" />}
+        openOnFocus
+      />
+    );
+
+    expect(screen.queryByTestId("test-id-listbox")).not.toBeInTheDocument();
+    const input: HTMLInputElement = screen.getByTestId("autocomplete-input");
+    fireEvent.focus(input);
+
+    const listbox = screen.getByTestId("test-id-listbox");
+
+    expect(listbox).toBeVisible();
+    expect(listbox).toHaveAttribute("aria-label", "Options");
+    expect(listbox).toHaveAttribute("aria-expanded", "true");
+    expect(listbox).toHaveAttribute("id", "test-id-listbox");
+    expect(listbox).toHaveAttribute("role", "listbox");
+    expect(listbox.children).toHaveLength(5);
+    listbox.childNodes.forEach((listboxItem, index) => {
+      expect(listboxItem).toBeVisible();
+      expect(listboxItem).toHaveAttribute("aria-disabled", "false");
+      expect(listboxItem).toHaveAttribute("aria-selected", `${index === 0}`);
+      expect(listboxItem).toHaveAttribute("id", `test-id-listbox-item-${options[index].id}`);
+      expect(listboxItem).toHaveAttribute("role", "option");
+      expect(listboxItem).toHaveAttribute("tabIndex", "-1");
+    });
+  });
+
+  it("should not show listbox when input is focused if openOnFocus isn't set", async () => {
+    render(
+      <Autocomplete
+        options={options}
+        id="test-id"
+        data-testid="test-id"
+        selectedOption={options[0]}
+        listboxLabel="Options"
+        renderInput={(props) => <input {...props} data-testid="autocomplete-input" />}
+      />
+    );
+
+    expect(screen.queryByTestId("test-id-listbox")).not.toBeInTheDocument();
+    const input: HTMLInputElement = screen.getByTestId("autocomplete-input");
+    fireEvent.focus(input);
+
+    expect(screen.queryByTestId("test-id-listbox")).not.toBeInTheDocument();
+  });
+
+  it("should have listbox with items when input is focused", async () => {
+    render(
+      <Autocomplete
+        options={options}
+        id="test-id"
+        data-testid="test-id"
+        selectedOption={options[0]}
+        listboxLabel="Options"
+        renderInput={(props) => <input {...props} data-testid="autocomplete-input" />}
+      />
+    );
+
+    expect(screen.queryByTestId("test-id-listbox")).not.toBeInTheDocument();
+    const input: HTMLInputElement = screen.getByTestId("autocomplete-input");
+    fireEvent.mouseDown(input);
+
+    const listbox = screen.getByTestId("test-id-listbox");
+
+    expect(listbox).toBeVisible();
+    expect(listbox).toHaveAttribute("aria-label", "Options");
+    expect(listbox).toHaveAttribute("aria-expanded", "true");
+    expect(listbox).toHaveAttribute("id", "test-id-listbox");
+    expect(listbox).toHaveAttribute("role", "listbox");
+    expect(listbox.children).toHaveLength(5);
+    listbox.childNodes.forEach((listboxItem, index) => {
+      expect(listboxItem).toBeVisible();
+      expect(listboxItem).toHaveAttribute("aria-disabled", "false");
+      expect(listboxItem).toHaveAttribute("aria-selected", `${index === 0}`);
+      expect(listboxItem).toHaveAttribute("id", `test-id-listbox-item-${options[index].id}`);
+      expect(listboxItem).toHaveAttribute("role", "option");
+      expect(listboxItem).toHaveAttribute("tabIndex", "-1");
+    });
+  });
+
+  it("should select clicked listbox item", () => {
+    const onSelectMock = vi.fn();
+    render(
+      <Autocomplete
+        options={options}
+        id="test-id"
+        data-testid="test-id"
+        selectedOption={options[0]}
+        listboxLabel="Options"
+        renderInput={(props) => <input {...props} data-testid="autocomplete-input" />}
+        onSelect={onSelectMock}
+      />
+    );
+
+    const input: HTMLInputElement = screen.getByTestId("autocomplete-input");
+    fireEvent.mouseDown(input);
+    fireEvent.mouseUp(screen.getByTestId(`test-id-listbox-item-${options[1].id}`));
+
+    expect(onSelectMock).toHaveBeenCalledWith(options[1]);
+    expect(input.value).toEqual(options[1].label);
+    expect(screen.queryByTestId("test-id-listbox")).not.toBeInTheDocument();
+  });
+
+  it("should highlight correct listbox item on arrow keys", () => {
+    render(
+      <Autocomplete
+        options={options}
+        id="test-id"
+        data-testid="test-id"
+        selectedOption={options[0]}
+        listboxLabel="Options"
+        renderInput={(props) => <input {...props} data-testid="autocomplete-input" />}
+      />
+    );
+
+    const input: HTMLInputElement = screen.getByTestId("autocomplete-input");
+    fireEvent.mouseDown(input);
+    expect(screen.getByTestId(`test-id-listbox-item-${options[0].id}`).className).not.toContain(
+      "highlighted"
+    );
+    fireEvent.keyDown(input, { key: "ArrowDown" });
+    expect(screen.getByTestId(`test-id-listbox-item-${options[0].id}`).className).toContain(
+      "highlighted"
+    );
+
+    fireEvent.keyDown(input, { key: "ArrowDown" });
+    expect(screen.getByTestId(`test-id-listbox-item-${options[1].id}`).className).toContain(
+      "highlighted"
+    );
+
+    fireEvent.keyDown(input, { key: "ArrowUp" });
+    fireEvent.keyDown(input, { key: "ArrowUp" });
+    expect(
+      screen.getByTestId(`test-id-listbox-item-${options[options.length - 1].id}`).className
+    ).toContain("highlighted");
+    fireEvent.keyDown(input, { key: "ArrowUp" });
+    expect(
+      screen.getByTestId(`test-id-listbox-item-${options[options.length - 2].id}`).className
+    ).toContain("highlighted");
+  });
+
+  it("should highlight correct item automatically when highlightFirstOption is given", () => {
+    render(
+      <Autocomplete
+        options={options}
+        id="test-id"
+        data-testid="test-id"
+        selectedOption={options[0]}
+        listboxLabel="Options"
+        renderInput={(props) => <input {...props} data-testid="autocomplete-input" />}
+        highlightFirstOption
+      />
+    );
+
+    const input: HTMLInputElement = screen.getByTestId("autocomplete-input");
+    fireEvent.mouseDown(input);
+    expect(screen.getByTestId(`test-id-listbox-item-${options[0].id}`).className).toContain(
+      "highlighted"
+    );
+  });
+
+  it("should show noOptionText item when input is clicked and no options are shown due to filter logic", () => {
+    render(
+      <Autocomplete
+        options={options}
+        id="test-id"
+        data-testid="test-id"
+        selectedOption={undefined}
+        listboxLabel="Options"
+        filterOption={() => false}
+        renderInput={(props) => <input {...props} data-testid="autocomplete-input" />}
+        noOptionsText="No options"
+      />
+    );
+
+    const input: HTMLInputElement = screen.getByTestId("autocomplete-input");
+    fireEvent.mouseDown(input);
+
+    const listbox = screen.getByTestId("test-id-listbox");
+    expect(listbox.children).toHaveLength(1);
+    expect(listbox.children[0]).toHaveTextContent("No options");
+  });
+
+  it("should not show noOptionText item when input is clicked and no options are shown due to filter logic if noOptionText isn't given", () => {
+    render(
+      <Autocomplete
+        options={options}
+        id="test-id"
+        data-testid="test-id"
+        selectedOption={undefined}
+        listboxLabel="Options"
+        filterOption={() => false}
+        renderInput={(props) => <input {...props} data-testid="autocomplete-input" />}
+      />
+    );
+
+    const input: HTMLInputElement = screen.getByTestId("autocomplete-input");
+    fireEvent.mouseDown(input);
+
+    expect(screen.queryByTestId("test-id-listbox")).not.toBeInTheDocument();
+  });
+
+  it("should show noOptionText when input is clicked and no options are given", () => {
+    render(
+      <Autocomplete
+        options={[]}
+        id="test-id"
+        data-testid="test-id"
+        selectedOption={undefined}
+        listboxLabel="Options"
+        renderInput={(props) => <input {...props} data-testid="autocomplete-input" />}
+        noOptionsText="No options"
+      />
+    );
+
+    const input: HTMLInputElement = screen.getByTestId("autocomplete-input");
+    fireEvent.mouseDown(input);
+
+    const listbox = screen.getByTestId("test-id-listbox");
+    expect(listbox.children).toHaveLength(1);
+    expect(listbox.children[0]).toHaveTextContent("No options");
+  });
+
+  it("should not show noOptionText when input is clicked and no options are given if noOptionText isn't given", () => {
+    render(
+      <Autocomplete
+        options={[]}
+        id="test-id"
+        data-testid="test-id"
+        selectedOption={undefined}
+        listboxLabel="Options"
+        renderInput={(props) => <input {...props} data-testid="autocomplete-input" />}
+      />
+    );
+
+    const input: HTMLInputElement = screen.getByTestId("autocomplete-input");
+    fireEvent.mouseDown(input);
+
+    expect(screen.queryByTestId("test-id-listbox")).not.toBeInTheDocument();
+  });
+
+  it("should select highlighted listbox item on enter", () => {
+    const onSelectMock = vi.fn();
+    render(
+      <Autocomplete
+        options={options}
+        id="test-id"
+        data-testid="test-id"
+        selectedOption={options[0]}
+        listboxLabel="Options"
+        renderInput={(props) => <input {...props} data-testid="autocomplete-input" />}
+        onSelect={onSelectMock}
+      />
+    );
+
+    const input: HTMLInputElement = screen.getByTestId("autocomplete-input");
+    fireEvent.mouseDown(input);
+    expect(
+      screen.getByTestId(`test-id-listbox-item-${options[options.length - 1].id}`).className
+    ).not.toContain("highlighted");
+
+    fireEvent.keyDown(input, { key: "ArrowUp" });
+    expect(
+      screen.getByTestId(`test-id-listbox-item-${options[options.length - 1].id}`).className
+    ).toContain("highlighted");
+
+    fireEvent.keyDown(input, { key: "ArrowDown" });
+    expect(screen.getByTestId(`test-id-listbox-item-${options[0].id}`).className).toContain(
+      "highlighted"
+    );
+
+    fireEvent.keyDown(input, { key: "Enter" });
+    expect(onSelectMock).toHaveBeenCalledWith(options[0]);
+  });
+
+  it("should not select highlighted listbox item on enter when listbox is closed", () => {
+    const onSelectMock = vi.fn();
+    render(
+      <Autocomplete
+        options={options}
+        id="test-id"
+        data-testid="test-id"
+        selectedOption={options[0]}
+        listboxLabel="Options"
+        renderInput={(props) => <input {...props} data-testid="autocomplete-input" />}
+        onSelect={onSelectMock}
+      />
+    );
+
+    const input: HTMLInputElement = screen.getByTestId("autocomplete-input");
+    fireEvent.click(input);
+    fireEvent.keyDown(input, { key: "ArrowDown" });
+    expect(screen.getByTestId(`test-id-listbox-item-${options[0].id}`).className).toContain(
+      "highlighted"
+    );
+
+    fireEvent.keyDown(input, { key: "ArrowDown" });
+    expect(screen.getByTestId(`test-id-listbox-item-${options[1].id}`).className).toContain(
+      "highlighted"
+    );
+
+    fireEvent.keyDown(input, { key: "Escape" });
+    fireEvent.keyDown(input, { key: "Enter" });
+    expect(onSelectMock).not.toHaveBeenCalled();
+  });
+
+  it("should add hover styling on correct listbox item on mouse move", () => {
+    const onSelectMock = vi.fn();
+    render(
+      <Autocomplete
+        options={options}
+        id="test-id"
+        data-testid="test-id"
+        selectedOption={options[0]}
+        listboxLabel="Options"
+        renderInput={(props) => <input {...props} data-testid="autocomplete-input" />}
+        onSelect={onSelectMock}
+      />
+    );
+
+    const input: HTMLInputElement = screen.getByTestId("autocomplete-input");
+    fireEvent.mouseDown(input);
+    fireEvent.mouseMove(screen.getByTestId(`test-id-listbox-item-${options[0].id}`));
+    expect(screen.getByTestId(`test-id-listbox-item-${options[0].id}`).className).toContain(
+      "hovered"
+    );
+
+    fireEvent.mouseMove(screen.getByTestId(`test-id-listbox-item-${options[3].id}`));
+    expect(screen.getByTestId(`test-id-listbox-item-${options[3].id}`).className).toContain(
+      "hovered"
+    );
+  });
+
+  it("should open listbox if closed on keydown enter", () => {
+    const onSelectMock = vi.fn();
+    render(
+      <Autocomplete
+        options={options}
+        id="test-id"
+        data-testid="test-id"
+        selectedOption={options[0]}
+        listboxLabel="Options"
+        renderInput={(props) => <input {...props} data-testid="autocomplete-input" />}
+        onSelect={onSelectMock}
+        openOnFocus
+      />
+    );
+
+    const input: HTMLInputElement = screen.getByTestId("autocomplete-input");
+    expect(screen.queryByTestId("test-id-listbox")).not.toBeInTheDocument();
+    fireEvent.mouseDown(input);
+    expect(screen.getByTestId("test-id-listbox")).toBeVisible();
+    fireEvent.keyDown(input, { key: "Escape" });
+    expect(screen.queryByTestId("test-id-listbox")).not.toBeInTheDocument();
+    fireEvent.keyDown(input, { key: "Tab" });
+    expect(screen.queryByTestId("test-id-listbox")).not.toBeInTheDocument();
+    fireEvent.focus(input);
+    expect(screen.getByTestId("test-id-listbox")).toBeVisible();
+    fireEvent.keyDown(input, { key: "Escape" });
+    expect(screen.queryByTestId("test-id-listbox")).not.toBeInTheDocument();
+    fireEvent.keyDown(input, { key: "Enter" });
+    expect(screen.getByTestId("test-id-listbox")).toBeVisible();
+  });
+
+  it("should close listbox on keydown escape", () => {
+    const onSelectMock = vi.fn();
+    render(
+      <Autocomplete
+        options={options}
+        id="test-id"
+        data-testid="test-id"
+        selectedOption={options[0]}
+        listboxLabel="Options"
+        renderInput={(props) => <input {...props} data-testid="autocomplete-input" />}
+        onSelect={onSelectMock}
+      />
+    );
+
+    const input: HTMLInputElement = screen.getByTestId("autocomplete-input");
+    fireEvent.mouseDown(input);
+    expect(screen.getByTestId("test-id-listbox")).toBeVisible();
+
+    fireEvent.keyDown(input, { key: "Escape" });
+    expect(screen.queryByTestId("test-id-listbox")).not.toBeInTheDocument();
+  });
+
+  it("should close listbox on keydown tab", () => {
+    const onSelectMock = vi.fn();
+    render(
+      <Autocomplete
+        options={options}
+        id="test-id"
+        data-testid="test-id"
+        selectedOption={options[0]}
+        listboxLabel="Options"
+        renderInput={(props) => <input {...props} data-testid="autocomplete-input" />}
+        onSelect={onSelectMock}
+      />
+    );
+
+    const input: HTMLInputElement = screen.getByTestId("autocomplete-input");
+    fireEvent.mouseDown(input);
+    expect(screen.getByTestId("test-id-listbox")).toBeVisible();
+
+    fireEvent.keyDown(input, { key: "Tab" });
+    expect(screen.queryByTestId("test-id-listbox")).not.toBeInTheDocument();
+  });
+
+  it("should only display options with labels containing input value", () => {
+    const onSelectMock = vi.fn();
+    render(
+      <Autocomplete
+        options={options}
+        id="test-id"
+        data-testid="test-id"
+        selectedOption={options[0]}
+        listboxLabel="Options"
+        renderInput={(props) => <input {...props} data-testid="autocomplete-input" />}
+        onSelect={onSelectMock}
+      />
+    );
+
+    const input: HTMLInputElement = screen.getByTestId("autocomplete-input");
+    fireEvent.focus(input);
+    fireEvent.change(input, { target: { value: "0" } });
+    options
+      .filter(({ label }) => label.includes("0"))
+      .forEach(({ id }) => {
+        expect(screen.getByTestId(`test-id-listbox-item-${id}`)).toBeVisible();
+      });
+    fireEvent.change(input, { target: { value: "1" } });
+    options
+      .filter(({ label }) => label.includes("1"))
+      .forEach(({ id }) => {
+        expect(screen.getByTestId(`test-id-listbox-item-${id}`)).toBeVisible();
+      });
+  });
+
+  it("should use custom filtering when given filterOption", () => {
+    const onSelectMock = vi.fn();
+    render(
+      <Autocomplete
+        options={options}
+        id="test-id"
+        data-testid="test-id"
+        selectedOption={options[0]}
+        listboxLabel="Options"
+        renderInput={(props) => <input {...props} data-testid="autocomplete-input" />}
+        onSelect={onSelectMock}
+        filterOption={(_, option) => option.label.includes("2")}
+      />
+    );
+
+    const input: HTMLInputElement = screen.getByTestId("autocomplete-input");
+    fireEvent.focus(input);
+    fireEvent.change(input, { target: { value: "0" } });
+    options
+      .filter(({ label }) => label.includes("2"))
+      .forEach(({ id }) => {
+        expect(screen.getByTestId(`test-id-listbox-item-${id}`)).toBeVisible();
+      });
+  });
+});

package/src/autocomplete.tsx

@@ -0,0 +1,81 @@
+import React, { ComponentPropsWithRef, ForwardedRef, forwardRef, ReactNode } from "react";
+import c from "classnames/bind";
+
+import styles from "./autocomplete.module.scss";
+import * as ListBox from "./listbox";
+import { Option, useAutocomplete, UseAutocompleteOptions } from "./useAutocomplete";
+import { Prettify } from "./utils";
+
+const cx = c.bind(styles);
+
+type AutocompleteProps<T extends Option> = Prettify<
+  UseAutocompleteOptions<T> & {
+    className?: string;
+    /**
+     * Render the input. `props` are native input props
+     */
+    renderInput: (props: ComponentPropsWithRef<"input">) => ReactNode;
+    /**
+     * Invoked for each given option. Use to customize the rendering of the options
+     */
+    renderOption?: (option: T) => ReactNode;
+  }
+>;
+
+const rootClassName = "purpur-autocomplete";
+
+const AutocompleteComponent = <T extends Option>(
+  { className, renderInput, renderOption, ...useAutocompleteProps }: AutocompleteProps<T>,
+  ref: ForwardedRef<HTMLDivElement>
+) => {
+  const {
+    id,
+    inputProps,
+    internalRef,
+    optionsToShow,
+    showListbox,
+    noOptionsText,
+    getListBoxItemProps,
+    listboxProps,
+  } = useAutocomplete(useAutocompleteProps);
+
+  const renderListboxItem = (option: T, index: number) => {
+    const { key, ...listboxItemProps } = getListBoxItemProps(option, index);
+
+    return (
+      <ListBox.Item key={key} {...listboxItemProps}>
+        {renderOption ? renderOption?.(option) : option.label}
+      </ListBox.Item>
+    );
+  };
+
+  const setRootRef = (node: HTMLDivElement | null) => {
+    internalRef.current = node;
+    if (typeof ref === "function") {
+      ref(node);
+    } else if (ref) {
+      ref.current = node;
+    }
+  };
+
+  return (
+    <div id={id} ref={setRootRef} className={cx([className, rootClassName])}>
+      {renderInput(inputProps)}
+      {showListbox && (
+        <ListBox.Root {...listboxProps} className={cx(`${rootClassName}__listbox`)}>
+          {!optionsToShow.length ? (
+            <ListBox.Item noninteractive>{noOptionsText}</ListBox.Item>
+          ) : (
+            optionsToShow.filter((option): option is T => !!option).map(renderListboxItem)
+          )}
+        </ListBox.Root>
+      )}
+    </div>
+  );
+};
+
+export const Autocomplete = forwardRef(AutocompleteComponent);
+Autocomplete.displayName = "Autocomplete";
+
+export type { Option, UseAutocompleteOptions } from "./useAutocomplete";
+export { useAutocomplete } from "./useAutocomplete";

package/src/global.d.ts

@@ -0,0 +1,4 @@
+declare module "*.scss" {
+  const styles: { [className: string]: string };
+  export default styles;
+}

package/src/listbox.module.scss

@@ -0,0 +1,60 @@
+.purpur-listbox {
+  padding: 0;
+  margin: 0;
+  width: 100%;
+  list-style-type: none;
+  border: var(--purpur-border-width-xs) solid var(--purpur-color-border-interactive-subtle);
+  border-radius: var(--purpur-border-radius-sm);
+  color: var(--purpur-color-brand-off-black);
+  width: 100%;
+  background-color: var(--purpur-color-brand-white);
+  max-height: calc(2 * var(--purpur-spacing-1200));
+  overflow-y: scroll;
+  box-sizing: border-box;
+
+  &-item {
+    $listboxItemRoot: &;
+
+    cursor: pointer;
+    list-style: none;
+    padding: var(--purpur-spacing-150);
+    border: var(--purpur-border-width-xs) solid transparent;
+    cursor: pointer;
+    max-width: 100%;
+    word-break: break-word;
+    transition: background var(--purpur-motion-duration-150) ease;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--purpur-spacing-100);
+
+    &--hovered {
+      /* Enable only on non-touch devices */
+      @media (hover: hover) and (pointer: fine) {
+        background: var(--purpur-color-background-interactive-transparent-hover);
+      }
+    }
+
+    &--highlighted {
+      outline: var(--purpur-border-width-sm) solid var(--purpur-color-border-interactive-focus);
+      outline-offset: calc(-1 * var(--purpur-border-width-sm));
+    }
+
+    &:active:not(#{$listboxItemRoot}--noninteractive) {
+      background: var(--purpur-color-background-interactive-transparent-active);
+    }
+
+    &--disabled {
+      color: var(--purpur-color-text-weak);
+      cursor: default;
+    }
+
+    &--noninteractive {
+      cursor: default;
+    }
+
+    &__icon {
+      color: var(--purpur-color-text-interactive-selected);
+    }
+  }
+}