ComboBox

1"use client";2// HeroUI v3.2.6, Apache-2.0. Native Base UI adaptation.3import { AnimalPicker } from "./shared";4export function Default() {5  return <AnimalPicker />;6}

1"use client";2// HeroUI v3.2.6, Apache-2.0.3import * as stylex from "@stylexjs/stylex";4import { AnimalPicker, animals } from "./shared";5import { styles } from "./styles.stylex";6export function FullWidth() {7  return (8    <div {...stylex.props(styles.wide)}>9      <AnimalPicker fullWidth items={animals.slice(0, 3)} />10    </div>11  );12}

1"use client";2// HeroUI v3.2.6, Apache-2.0.3import { AnimalPicker } from "./shared";4export function WithDescription() {5  return <AnimalPicker description="Search and select your favorite animal" />;6}

1"use client";2// HeroUI v3.2.6, Apache-2.0. Base Field context owns validation and error linkage.3import { Button, FieldError, Form, TextField } from "@lenso/ui";4import { AnimalPicker } from "./shared";5import { styles } from "./styles.stylex";6
7export function AnimalForm({ secondary = false }: { secondary?: boolean }) {8  return (9    <Form10      xstyle={[styles.form, secondary && styles.fullWidth]}11      onSubmit={(event) => {12        event.preventDefault();13        new FormData(event.currentTarget);14        alert("Form submitted successfully!");15      }}16    >17      <TextField name="animal">18        <AnimalPicker required name="animal" fullWidth secondary={secondary} />19        <FieldError />20      </TextField>21      <Button type="submit">Submit</Button>22    </Form>23  );24}25export function Required() {26  return <AnimalForm />;27}

1"use client";2// HeroUI v3.2.6, Apache-2.0.3import { AnimalPicker, animals } from "./shared";4export function Disabled() {5  return <AnimalPicker disabled defaultValue={animals[1]} />;6}

1"use client";2// HeroUI v3.2.6, Apache-2.0.3import { AnimalPicker } from "./shared";4const animals = [5  { id: "dog", name: "Dog" },6  { id: "cat", name: "Cat" },7  { id: "bird", name: "Bird" },8  { id: "kangaroo", name: "Kangaroo" },9  { id: "elephant", name: "Elephant" },10  { id: "tiger", name: "Tiger" },11];12export function WithDisabledOptions() {13  return <AnimalPicker label="Animal" items={animals} disabledIds={["cat", "kangaroo"]} />;14}

1"use client";2// HeroUI v3.2.6, Apache-2.0. Native grouped collection filters without losing section semantics.3import { ComboBox } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5import { useId } from "react";6import { styles } from "./styles.stylex";7import { useFocusMenu } from "./shared";8const regions = [9  {10    label: "North America",11    items: [12      { value: "usa", label: "United States" },13      { value: "canada", label: "Canada" },14      { value: "mexico", label: "Mexico" },15    ],16  },17  {18    label: "Europe",19    items: [20      { value: "uk", label: "United Kingdom" },21      { value: "france", label: "France" },22      { value: "germany", label: "Germany" },23      { value: "spain", label: "Spain" },24      { value: "italy", label: "Italy" },25    ],26  },27  {28    label: "Asia",29    items: [30      { value: "japan", label: "Japan" },31      { value: "china", label: "China" },32      { value: "india", label: "India" },33      { value: "south-korea", label: "South Korea" },34    ],35  },36];37export function WithSections() {38  const id = useId();39  const menu = useFocusMenu();40  return (41    <div {...stylex.props(styles.field)}>42      <ComboBox {...menu.root} items={regions}>43        <ComboBox.Label htmlFor={id}>Country</ComboBox.Label>44        <ComboBox.InputGroup>45          <ComboBox.Input {...menu.input} id={id} placeholder="Search countries..." />46          <ComboBox.Trigger aria-label="Show countries">47            <ComboBox.Indicator />48          </ComboBox.Trigger>49        </ComboBox.InputGroup>50        <ComboBox.Portal>51          <ComboBox.Positioner>52            <ComboBox.Popover>53              <ComboBox.List>54                {(region: (typeof regions)[number], index: number) => (55                  <ComboBox.Group key={region.label} items={region.items}>56                    {index > 0 && <ComboBox.Separator />}57                    <ComboBox.GroupLabel>{region.label}</ComboBox.GroupLabel>58                    <ComboBox.Collection>59                      {(country: (typeof region.items)[number]) => (60                        <ComboBox.Item key={country.value} value={country}>61                          {country.label}62                          <ComboBox.ItemIndicator />63                        </ComboBox.Item>64                      )}65                    </ComboBox.Collection>66                  </ComboBox.Group>67                )}68              </ComboBox.List>69            </ComboBox.Popover>70          </ComboBox.Positioner>71        </ComboBox.Portal>72      </ComboBox>73    </div>74  );75}

1"use client";2// HeroUI v3.2.6, Apache-2.0.3import { useState } from "react";4import * as stylex from "@stylexjs/stylex";5import { AnimalPicker, smallAnimals, type Animal } from "./shared";6import { styles } from "./styles.stylex";7export function Controlled() {8  const [selectedAnimal, setSelectedAnimal] = useState<Animal | null>(smallAnimals[0] ?? null);9  return (10    <div {...stylex.props(styles.column)}>11      <AnimalPicker12        label="Animal (controlled)"13        items={smallAnimals}14        value={selectedAnimal}15        onValueChange={setSelectedAnimal}16      />17      <p {...stylex.props(styles.muted)}>Selected: {selectedAnimal?.name || "None"}</p>18    </div>19  );20}

1"use client";2// HeroUI v3.2.6, Apache-2.0.3import { useState } from "react";4import * as stylex from "@stylexjs/stylex";5import { AnimalPicker } from "./shared";6import { styles } from "./styles.stylex";7export function ControlledInputValue() {8  const [inputValue, setInputValue] = useState("");9  return (10    <div {...stylex.props(styles.column)}>11      <AnimalPicker12        label="Search (controlled input)"13        placeholder="Type to search..."14        inputValue={inputValue}15        onInputValueChange={setInputValue}16      />17      <p {...stylex.props(styles.muted)}>Input value: {inputValue || "(empty)"}</p>18    </div>19  );20}

1"use client";2/**3 * HeroUI v3.2.6, Apache-2.0.4 * Modified: abortable fetch and an intersection sentinel replace React Stately's async collection.5 */6import { ComboBox, Spinner } from "@lenso/ui";7import * as stylex from "@stylexjs/stylex";8import { useEffect, useId, useRef, useState } from "react";9import { styles } from "./styles.stylex";10import { useFocusMenu } from "./shared";11
12interface Character {13  name: string;14}15interface Page {16  next: string | null;17  results: Character[];18}19export function AsynchronousLoading() {20  const id = useId();21  const menu = useFocusMenu();22  const [inputValue, setInputValue] = useState("");23  const [items, setItems] = useState<Character[]>([]);24  const [cursor, setCursor] = useState<string | null>(null);25  const [loading, setLoading] = useState(false);26  const [error, setError] = useState<string | null>(null);27  const [nextPage, setNextPage] = useState<string | null>(null);28  const [sentinel, setSentinel] = useState<HTMLDivElement | null>(null);29  const generation = useRef(0);30
31  useEffect(() => {32    const controller = new AbortController();33    const current = ++generation.current;34    setItems([]);35    setCursor(null);36    setNextPage(null);37    setLoading(true);38    setError(null);39    fetch(`https://swapi.py4e.com/api/people/?search=${encodeURIComponent(inputValue)}`, {40      signal: controller.signal,41    })42      .then(async (response) => {43        if (!response.ok) throw new Error(`Request failed (${response.status})`);44        return (await response.json()) as Page;45      })46      .then((page) => {47        if (current !== generation.current) return;48        setItems(page.results);49        setCursor(page.next);50      })51      .catch((reason: unknown) => {52        if (!controller.signal.aborted)53          setError(reason instanceof Error ? reason.message : "Unable to load characters");54      })55      .finally(() => {56        if (current === generation.current && !controller.signal.aborted) setLoading(false);57      });58    return () => controller.abort();59  }, [inputValue]);60
61  useEffect(() => {62    if (!nextPage) return;63    const controller = new AbortController();64    const current = generation.current;65    setLoading(true);66    setError(null);67    fetch(nextPage.replace(/^http:\/\//i, "https://"), { signal: controller.signal })68      .then(async (response) => {69        if (!response.ok) throw new Error(`Request failed (${response.status})`);70        return (await response.json()) as Page;71      })72      .then((page) => {73        if (current !== generation.current) return;74        setItems((previous) => [...previous, ...page.results]);75        setCursor(page.next);76      })77      .catch((reason: unknown) => {78        if (!controller.signal.aborted)79          setError(reason instanceof Error ? reason.message : "Unable to load characters");80      })81      .finally(() => {82        if (current === generation.current && !controller.signal.aborted) {83          setLoading(false);84          setNextPage(null);85        }86      });87    return () => controller.abort();88  }, [nextPage]);89
90  useEffect(() => {91    if (!sentinel || !cursor || loading || error) return;92    const observer = new IntersectionObserver((entries) => {93      if (entries.some((entry) => entry.isIntersecting)) setNextPage(cursor);94    });95    observer.observe(sentinel);96    return () => observer.disconnect();97  }, [sentinel, cursor, loading, error]);98
99  return (100    <div {...stylex.props(styles.field)}>101      <ComboBox<Character>102        {...menu.root}103        items={items}104        filter={null}105        inputValue={inputValue}106        onInputValueChange={setInputValue}107        itemToStringLabel={(character) => character.name}108        itemToStringValue={(character) => character.name}109      >110        <ComboBox.Label htmlFor={id}>Pick a Character</ComboBox.Label>111        <ComboBox.InputGroup>112          <ComboBox.Input {...menu.input} id={id} placeholder="Star Wars characters..." />113          <ComboBox.Trigger aria-label="Show characters">114            <ComboBox.Indicator />115          </ComboBox.Trigger>116        </ComboBox.InputGroup>117        <ComboBox.Portal>118          <ComboBox.Positioner>119            <ComboBox.Popover>120              <ComboBox.List aria-busy={loading}>121                {(character: Character) => (122                  <ComboBox.Item key={character.name} value={character}>123                    {character.name}124                    <ComboBox.ItemIndicator />125                  </ComboBox.Item>126                )}127              </ComboBox.List>128              <ComboBox.Empty>129                {loading ? "Loading..." : (error ?? "No results found")}130              </ComboBox.Empty>131              <div ref={setSentinel} {...stylex.props(styles.loading)}>132                {loading && (133                  <>134                    <Spinner size="sm" />135                    <span {...stylex.props(styles.muted)}>136                      {items.length ? "Loading more..." : "Loading..."}137                    </span>138                  </>139                )}140                {cursor && !loading && (141                  <button type="button" onClick={() => setNextPage(cursor)}>142                    Load more143                  </button>144                )}145                {error && items.length > 0 && <span role="alert">{error}</span>}146              </div>147            </ComboBox.Popover>148          </ComboBox.Positioner>149        </ComboBox.Portal>150      </ComboBox>151    </div>152  );153}

1"use client";2// HeroUI v3.2.6, Apache-2.0. Native defaultValue replaces defaultSelectedKey.3import { AnimalPicker, animals } from "./shared";4export function DefaultSelectedKey() {5  return <AnimalPicker defaultValue={animals[1]} />;6}

1"use client";2// HeroUI v3.2.6, Apache-2.0. Native input retains free text independently of selection.3import { AnimalPicker } from "./shared";4export function AllowsCustomValue() {5  return (6    <AnimalPicker7      placeholder="Search or type an animal..."8      description="You can type any animal name, even if it's not in the list"9    />10  );11}

1"use client";2// HeroUI v3.2.6, Apache-2.0.3import { ChevronsExpandVertical } from "@gravity-ui/icons";4import * as stylex from "@stylexjs/stylex";5import { AnimalPicker } from "./shared";6import { styles } from "./styles.stylex";7export function CustomIndicator() {8  return (9    <AnimalPicker10      indicator={<ChevronsExpandVertical aria-hidden {...stylex.props(styles.icon)} />}11    />12  );13}

1"use client";2// HeroUI v3.2.6, Apache-2.0. Source user data and avatar composition retained.3import { Avatar, AvatarImage, AvatarFallback, ComboBox } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5import { useId } from "react";6import { styles } from "./styles.stylex";7import { useFocusMenu } from "./shared";8const users = [9  {10    avatarUrl: "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/blue.jpg",11    email: "[email protected]",12    fallback: "B",13    id: "1",14    name: "Bob",15  },16  {17    avatarUrl: "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/green.jpg",18    email: "[email protected]",19    fallback: "F",20    id: "2",21    name: "Fred",22  },23  {24    avatarUrl: "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/purple.jpg",25    email: "[email protected]",26    fallback: "M",27    id: "3",28    name: "Martha",29  },30  {31    avatarUrl: "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/red.jpg",32    email: "[email protected]",33    fallback: "J",34    id: "4",35    name: "John",36  },37  {38    avatarUrl: "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/orange.jpg",39    email: "[email protected]",40    fallback: "J",41    id: "5",42    name: "Jane",43  },44];45export function CustomValue() {46  const id = useId();47  const menu = useFocusMenu();48  return (49    <div {...stylex.props(styles.field)}>50      <ComboBox<(typeof users)[number]>51        {...menu.root}52        items={users}53        itemToStringLabel={(user) => user.name}54        itemToStringValue={(user) => user.id}55      >56        <ComboBox.Label htmlFor={id}>User</ComboBox.Label>57        <ComboBox.InputGroup>58          <ComboBox.Input {...menu.input} id={id} placeholder="Search users..." />59          <ComboBox.Trigger aria-label="Show users">60            <ComboBox.Indicator />61          </ComboBox.Trigger>62        </ComboBox.InputGroup>63        <ComboBox.Portal>64          <ComboBox.Positioner>65            <ComboBox.Popover>66              <ComboBox.List>67                {(user: (typeof users)[number]) => (68                  <ComboBox.Item key={user.id} value={user}>69                    <Avatar size="sm">70                      <AvatarImage src={user.avatarUrl} alt="" />71                      <AvatarFallback>{user.fallback}</AvatarFallback>72                    </Avatar>73                    <div {...stylex.props(styles.user)}>74                      <span>{user.name}</span>75                      <span {...stylex.props(styles.muted)}>{user.email}</span>76                    </div>77                    <ComboBox.ItemIndicator />78                  </ComboBox.Item>79                )}80              </ComboBox.List>81            </ComboBox.Popover>82          </ComboBox.Positioner>83        </ComboBox.Portal>84      </ComboBox>85    </div>86  );87}

1"use client";2// HeroUI v3.2.6, Apache-2.0.3import { AnimalPicker, smallAnimals } from "./shared";4export function CustomFiltering() {5  return (6    <AnimalPicker7      label="Animal (custom filter)"8      items={smallAnimals}9      filter={(animal, inputValue) =>10        !inputValue || animal.name.toLowerCase().includes(inputValue.toLowerCase())11      }12    />13  );14}

1"use client";2// HeroUI v3.2.6, Apache-2.0. Base UI Root is non-DOM; compose its native InputGroup.3import { AnimalPicker } from "./shared";4export function RenderFunction() {5  return <AnimalPicker composed />;6}

1"use client";2// HeroUI v3.2.6, Apache-2.0. Opening policies use native controlled open events.3import { useState } from "react";4import * as stylex from "@stylexjs/stylex";5import { AnimalPicker } from "./shared";6import { styles } from "./styles.stylex";7
8function Policy({ mode }: { mode: "focus" | "input" | "manual" }) {9  const [open, setOpen] = useState(false);10  const description = {11    focus: "Popover opens when the input is focused",12    input: "Popover opens when the user edits the input text",13    manual: "Popover only opens when the trigger button is pressed or arrow keys are used",14  };15  return (16    <div {...stylex.props(styles.column)}>17      <p {...stylex.props(styles.caption)}>18        {mode === "focus" ? "Focus (default)" : mode === "input" ? "Input" : "Manual"}19      </p>20      <AnimalPicker21        open={open}22        openOnInputClick={mode === "focus"}23        inputFocus={mode === "focus" ? () => setOpen(true) : undefined}24        onOpenChange={(next, details) => {25          if (next && mode === "manual" && details.reason === "input-change") return;26          setOpen(next);27        }}28        description={description[mode]}29      />30    </div>31  );32}33export function MenuTrigger() {34  return (35    <div {...stylex.props(styles.menu)}>36      <Policy mode="focus" />37      <Policy mode="input" />38      <Policy mode="manual" />39    </div>40  );41}

1"use client";2// HeroUI v3.2.6, Apache-2.0. Native chips preserve keyboard removal and focus.3import { ComboBox } from "@lenso/ui";4import { useId } from "react";5import * as stylex from "@stylexjs/stylex";6import {7  animals,8  animalLabel,9  animalValue,10  sameAnimal,11  AnimalOptions,12  type Animal,13  useFocusMenu,14} from "./shared";15import { styles } from "./styles.stylex";16
17export function MultipleSelection() {18  const id = useId();19  const menu = useFocusMenu();20  return (21    <div {...stylex.props(styles.field)}>22      <ComboBox23        {...menu.root}24        multiple25        items={animals}26        itemToStringLabel={animalLabel}27        itemToStringValue={animalValue}28        isItemEqualToValue={sameAnimal}29      >30        <ComboBox.Label htmlFor={id}>Favorite Animals</ComboBox.Label>31        <ComboBox.InputGroup>32          <ComboBox.Input {...menu.input} id={id} placeholder="Search animals..." />33          <ComboBox.Trigger aria-label="Show animals">34            <ComboBox.Indicator />35          </ComboBox.Trigger>36        </ComboBox.InputGroup>37        <ComboBox.Chips>38          <ComboBox.Value>39            {(selected: Animal[]) =>40              selected.length === 0 ? (41                <span {...stylex.props(styles.muted)}>No animals selected</span>42              ) : (43                selected.map((animal) => (44                  <ComboBox.Chip key={animal.id}>45                    {animal.name}46                    <ComboBox.ChipRemove aria-label={`Remove ${animal.name}`}>47                      ×48                    </ComboBox.ChipRemove>49                  </ComboBox.Chip>50                ))51              )52            }53          </ComboBox.Value>54        </ComboBox.Chips>55        <AnimalOptions />56      </ComboBox>57    </div>58  );59}

1"use client";2// HeroUI v3.2.6, Apache-2.0.3import { Surface } from "@lenso/ui";4import { AnimalForm } from "./required";5import { styles } from "./styles.stylex";6export function OnSurface() {7  return (8    <Surface xstyle={styles.surface}>9      <AnimalForm secondary />10    </Surface>11  );12}

1"use client";2// HeroUI v3.2.6, Apache-2.0. Native highlighted/selected states replace RAC selectors.3import { ComboBox } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5import { useId } from "react";6import { styles } from "./styles.stylex";7import { useFocusMenu } from "./shared";8const frameworks = [9  { value: "react", label: "React" },10  { value: "vue", label: "Vue" },11  { value: "svelte", label: "Svelte" },12];13export function CustomStyles() {14  const id = useId();15  const menu = useFocusMenu();16  return (17    <div {...stylex.props(styles.customField)}>18      <ComboBox {...menu.root} items={frameworks}>19        <ComboBox.Label htmlFor={id} xstyle={styles.customLabel}>20          Framework21        </ComboBox.Label>22        <ComboBox.InputGroup xstyle={styles.customGroup}>23          <ComboBox.Input {...menu.input} id={id} placeholder="Search..." />24          <ComboBox.Trigger aria-label="Show frameworks" xstyle={styles.muted}>25            <ComboBox.Indicator />26          </ComboBox.Trigger>27        </ComboBox.InputGroup>28        <ComboBox.Portal>29          <ComboBox.Positioner>30            <ComboBox.Popover xstyle={styles.customPopover}>31              <ComboBox.List>32                {(item: (typeof frameworks)[number]) => (33                  <ComboBox.Item key={item.value} value={item} xstyle={styles.customItem}>34                    {item.label}35                    <ComboBox.ItemIndicator />36                  </ComboBox.Item>37                )}38              </ComboBox.List>39            </ComboBox.Popover>40          </ComboBox.Positioner>41        </ComboBox.Portal>42      </ComboBox>43    </div>44  );45}