components/combobox/examples.tsx

Functions

Imports

It imports components/combobox/combobox.react.tsx. No module of this repo imports it.

Source

1// Mounts the combobox specimens. Every element with data-mount="<state>" gets that state.
2// The open states sit in <template data-specimen> frames of their own, so one open popup
3// never covers another.
4import { StrictMode, useEffect, useRef, useState, type ReactNode } from "react";
5import { createRoot } from "react-dom/client";
6import { Combobox, ComboboxMultiple, type ComboboxOption, type ComboboxProps } from "./combobox.react.tsx";
7
8const SITES: ComboboxOption[] = [
9  { value: "capsid", label: "Capsid Portal" },
10  { value: "carrel", label: "Carrel" },
11  { value: "capsomer", label: "Capsomer site" },
12  { value: "dustinedwards", label: "dustinedwards.info" },
13  { value: "enarratio", label: "Enarratio demo" },
14  { value: "foxhound", label: "foxhound.app" },
15  { value: "foxhound-staging", label: "foxhound.app staging" },
16  { value: "germomics", label: "germomics.org" },
17  { value: "recova", label: "Recova merchant" },
18  { value: "recova-admin", label: "Recova admin" },
19  { value: "txasm", label: "txasm" },
20  { value: "phage-notes", label: "Phage notes" },
21  { value: "reading-list", label: "Reading list" },
22  { value: "uptime-probe", label: "Uptime probe" },
23  { value: "watcher", label: "Watcher" },
24  { value: "writing-hub-preview", label: "Writing hub preview" },
25];
26
27// The same sites under two headings, for the grouped list.
28const GROUPED: ComboboxOption[] = SITES.map((s, i) => ({ ...s, group: i < 8 ? "Live sites" : "Previews and tools" }));
29
30// A combobox that holds its own value, as an app's form would, and writes the chosen value
31// beside it so a test can read what was chosen.
32function Held(props: Omit<ComboboxProps, "value" | "onValueChange"> & { initial?: string | null }) {
33  const { initial = null, ...rest } = props;
34  const [value, setValue] = useState<string | null>(initial);
35  return (
36    <>
37      <Combobox {...rest} value={value} onValueChange={setValue} />
38      <p className="cap-muted" data-chosen={value ?? ""}>
39        Chosen: {value ?? "nothing"}
40      </p>
41    </>
42  );
43}
44
45// Tag suggestions: a tag field takes these or anything typed.
46const TAGS: ComboboxOption[] = [
47  { value: "phage", label: "phage" },
48  { value: "release", label: "release" },
49  { value: "field notes", label: "field notes" },
50  { value: "search", label: "search" },
51  { value: "uptime", label: "uptime" },
52];
53
54// A tag field that holds its own values, with the values written beside it for a test.
55function Tags(props: { defaultValues?: string[]; defaultOpen?: boolean; defaultInputValue?: string }) {
56  const [values, setValues] = useState<string[]>(props.defaultValues ?? []);
57  return (
58    <>
59      <ComboboxMultiple label="Tags" items={TAGS} creatable values={values} onValuesChange={setValues} placeholder="Add a tag" help="Pick a suggestion or type a new tag and press Enter." name="tags" defaultOpen={props.defaultOpen} defaultInputValue={props.defaultInputValue} />
60      <p className="cap-muted" data-tags={values.join("|")}>
61        Tags: {values.length ? values.join(", ") : "none"}
62      </p>
63    </>
64  );
65}
66
67// Highlights an option the way a keyboard does, for the static picture. The spec checks
68// the real keys.
69function Highlighted() {
70  const ref = useRef<HTMLDivElement>(null);
71  useEffect(() => {
72    const frame = requestAnimationFrame(() => {
73      const input = ref.current?.querySelector<HTMLInputElement>(".cap-combobox-input");
74      if (!input) return;
75      input.focus();
76      for (let i = 0; i < 2; i++) input.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowDown", code: "ArrowDown", bubbles: true }));
77    });
78    return () => cancelAnimationFrame(frame);
79  }, []);
80  return (
81    <div ref={ref}>
82      <Held label="Site" items={SITES} placeholder="For example: carrel" defaultOpen />
83    </div>
84  );
85}
86
87const SPECIMENS: Record<string, () => ReactNode> = {
88  closed: () => <Held label="Site" items={SITES} placeholder="For example: carrel" help="Type to filter. Only a listed site can be chosen." />,
89  chosen: () => <Held label="Deploy to" items={SITES} initial="foxhound" />,
90  clearable: () => <Held label="Primary site" items={SITES} initial="germomics" clearable help="Clear it to choose again." />,
91  chips: () => <ComboboxMultiple label="Sites to back up" items={SITES} defaultValues={["capsid", "foxhound", "germomics"]} help="Type to add another. Remove one with its button." />,
92  tags: () => <Tags defaultValues={["phage", "gel shift assay"]} />,
93  "open-tags": () => <Tags defaultValues={["phage"]} defaultOpen defaultInputValue="gel" />,
94  comfortable: () => (
95    <div data-density="comfortable">
96      <Held label="Deploy to" items={SITES} initial="foxhound" clearable />
97    </div>
98  ),
99  disabled: () => <Held label="Site to back up" items={SITES} initial="capsid" disabled help="Locked while capsid deploys. It unlocks when the deploy ends." />,
100  invalid: () => <Held label="Site to watch" items={SITES} required error="Choose a site from the list. The watcher only checks sites it knows." />,
101  open: () => <Held label="Site" items={SITES} placeholder="For example: carrel" defaultOpen />,
102  filtered: () => <Held label="Site" items={SITES} defaultOpen defaultInputValue="fox" />,
103  "no-match": () => <Held label="Site" items={SITES} defaultOpen defaultInputValue="foxhund" />,
104  highlighted: () => <Highlighted />,
105  "open-chips": () => <ComboboxMultiple label="Sites to back up" items={SITES} defaultValues={["capsid", "foxhound"]} defaultOpen />,
106  grouped: () => <Held label="Site" items={GROUPED} placeholder="For example: carrel" defaultOpen />,
107  loading: () => <Held label="Site" items={[]} loading loadingText="Loading sites" defaultOpen />,
108};
109
110for (const el of Array.from(document.querySelectorAll<HTMLElement>("[data-mount]"))) {
111  const render = SPECIMENS[el.dataset.mount ?? ""];
112  if (render) createRoot(el).render(<StrictMode>{render()}</StrictMode>);
113}