ComboboxGroup

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
import "./style.css";
import * as React from "react";
import groupBy from "lodash-es/groupBy.js";
import { matchSorter } from "match-sorter";
import {
  Combobox,
  ComboboxGroup,
  ComboboxItem,
  ComboboxSeparator,
} from "./combobox.jsx";
import food from "./food.js";

export default function Example() {
  const [value, setValue] = React.useState("");
  const deferredValue = React.useDeferredValue(value);

  const matches = React.useMemo(() => {
    const items = matchSorter(food, deferredValue, { keys: ["name"] });
    return Object.entries(groupBy(items, "type"));
  }, [deferredValue]);

  return (
    <div className="wrapper">
      <label className="label">
        Your favorite food
        <Combobox
          autoSelect
          autoComplete="both"
          placeholder="e.g., Apple"
          value={value}
          onChange={setValue}
        >
          {matches.length ? (
            matches.map(([type, items], i) => (
              <React.Fragment key={type}>
                <ComboboxGroup label={type}>
                  {items.map((item) => (
                    <ComboboxItem key={item.name} value={item.name} />
                  ))}
                </ComboboxGroup>
                {i < matches.length - 1 && <ComboboxSeparator />}
              </React.Fragment>
            ))
          ) : (
            <div className="no-results">No results found</div>
          )}
        </Combobox>
      </label>
    </div>
  );
}

import "./style.css";
import * as React from "react";
import groupBy from "lodash-es/groupBy.js";
import { matchSorter } from "match-sorter";
import {
  Combobox,
  ComboboxGroup,
  ComboboxItem,
  ComboboxSeparator,
} from "./combobox.jsx";
import food from "./food.js";

export default function Example() {
  const [value, setValue] = React.useState("");
  const deferredValue = React.useDeferredValue(value);

  const matches = React.useMemo(() => {
    const items = matchSorter(food, deferredValue, { keys: ["name"] });
    return Object.entries(groupBy(items, "type"));
  }, [deferredValue]);

  return (
    <div className="wrapper">
      <label className="label">
        Your favorite food
        <Combobox
          autoSelect
          autoComplete="both"
          placeholder="e.g., Apple"
          value={value}
          onChange={setValue}
        >
          {matches.length ? (
            matches.map(([type, items], i) => (
              <React.Fragment key={type}>
                <ComboboxGroup label={type}>
                  {items.map((item) => (
                    <ComboboxItem key={item.name} value={item.name} />
                  ))}
                </ComboboxGroup>
                {i < matches.length - 1 && <ComboboxSeparator />}
              </React.Fragment>
            ))
          ) : (
            <div className="no-results">No results found</div>
          )}
        </Combobox>
      </label>
    </div>
  );
}