Combobox with Tabs

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
import groupBy from "lodash-es/groupBy.js";
import { matchSorter } from "match-sorter";
import { useId, useMemo, useState } from "react";
import {
  Combobox,
  ComboboxItem,
  ComboboxPanel,
  ComboboxPopover,
  ComboboxProvider,
  ComboboxTab,
  ComboboxTabList,
} from "./combobox.tsx";
import { flatPages, pages } from "./pages.ts";
import "./style.css";

const categories = ["All", ...Object.keys(pages)];

function getTabId(category: string, prefix: string) {
  return `${prefix}/${category}`;
}

function getCategory(tabId: string, prefix: string) {
  return tabId.replace(`${prefix}/`, "");
}

export default function Example() {
  const prefix = useId();
  const [searchValue, setSearchValue] = useState("");
  const [tabId, setTabId] = useState(getTabId("Components", prefix));

  const matches = useMemo(() => {
    const keys = ["label", "path"];
    const allMatches = matchSorter(flatPages, searchValue, { keys });
    const groups = groupBy(allMatches, "category");
    groups.All = allMatches;
    return groups;
  }, [searchValue]);

  const currentPages = matches[getCategory(tabId, prefix)] || [];

  return (
    <ComboboxProvider
      defaultTabId={tabId}
      onTabChange={setTabId}
      onSearch={setSearchValue}
    >
      <Combobox placeholder="Search pages" />
      <ComboboxPopover aria-label="Pages">
        <ComboboxTabList aria-label="Categories">
          {categories.map((category) => {
            const currentPages = matches[category];
            return (
              <ComboboxTab
                key={category}
                id={getTabId(category, prefix)}
                disabled={!currentPages?.length}
              >
                {category}
                <span className="count">{currentPages?.length || 0}</span>
              </ComboboxTab>
            );
          })}
        </ComboboxTabList>
        <ComboboxPanel>
          {!currentPages.length && (
            <div className="no-results">
              No pages found for &quot;<strong>{searchValue}</strong>
              &quot;
            </div>
          )}
          {currentPages.map((page, i) => (
            <ComboboxItem
              key={page.path + i}
              render={<a href={page.path} target="_blank" rel="noreferrer" />}
            >
              {page.label}
            </ComboboxItem>
          ))}
        </ComboboxPanel>
      </ComboboxPopover>
    </ComboboxProvider>
  );
}

import groupBy from "lodash-es/groupBy.js";
import { matchSorter } from "match-sorter";
import { useId, useMemo, useState } from "react";
import {
  Combobox,
  ComboboxItem,
  ComboboxPanel,
  ComboboxPopover,
  ComboboxProvider,
  ComboboxTab,
  ComboboxTabList,
} from "./combobox.tsx";
import { flatPages, pages } from "./pages.ts";
import "./style.css";

const categories = ["All", ...Object.keys(pages)];

function getTabId(category: string, prefix: string) {
  return `${prefix}/${category}`;
}

function getCategory(tabId: string, prefix: string) {
  return tabId.replace(`${prefix}/`, "");
}

export default function Example() {
  const prefix = useId();
  const [searchValue, setSearchValue] = useState("");
  const [tabId, setTabId] = useState(getTabId("Components", prefix));

  const matches = useMemo(() => {
    const keys = ["label", "path"];
    const allMatches = matchSorter(flatPages, searchValue, { keys });
    const groups = groupBy(allMatches, "category");
    groups.All = allMatches;
    return groups;
  }, [searchValue]);

  const currentPages = matches[getCategory(tabId, prefix)] || [];

  return (
    <ComboboxProvider
      defaultTabId={tabId}
      onTabChange={setTabId}
      onSearch={setSearchValue}
    >
      <Combobox placeholder="Search pages" />
      <ComboboxPopover aria-label="Pages">
        <ComboboxTabList aria-label="Categories">
          {categories.map((category) => {
            const currentPages = matches[category];
            return (
              <ComboboxTab
                key={category}
                id={getTabId(category, prefix)}
                disabled={!currentPages?.length}
              >
                {category}
                <span className="count">{currentPages?.length || 0}</span>
              </ComboboxTab>
            );
          })}
        </ComboboxTabList>
        <ComboboxPanel>
          {!currentPages.length && (
            <div className="no-results">
              No pages found for &quot;<strong>{searchValue}</strong>
              &quot;
            </div>
          )}
          {currentPages.map((page, i) => (
            <ComboboxItem
              key={page.path + i}
              render={<a href={page.path} target="_blank" rel="noreferrer" />}
            >
              {page.label}
            </ComboboxItem>
          ))}
        </ComboboxPanel>
      </ComboboxPopover>
    </ComboboxProvider>
  );
}