gbs-add-block 1.2.8 → 1.2.10

package/README.md

@@ -1,4 +1,4 @@
-# GBS Building Blocks 2.0 (v1.2.8)
+# GBS Building Blocks 2.0 (v1.2.10)
 
 Latest and upgraded version of GBS building blocks with headless UI and removed dependencies.
 
@@ -6,9 +6,18 @@ Latest and upgraded version of GBS building blocks with headless UI and removed
 
 For detailed documentation on usage and props, Please visit: [Building Block Documentation v2.0](https://gramprokit.vercel.app)
 
-## What's New 🎉 (Ver 1.2.8)
+## Beta Components
 
-- Canditate update for next major change 2.0.0
+DataGrid and Combobox use the redesigned core API and design system. Install them with the beta flag:
+
+```bash
+npx gbs-add-block -a DataGrid -beta
+npx gbs-add-block -a Combobox -beta
+```
+
+## What's New 🎉 (Ver 1.2.10)
+
+- Update Candidate for next major change 2.0.0
 
 ## Authors
 

package/index.cjs

@@ -32,10 +32,13 @@ const CONFIG = {
     "DataGrid",
     "BreadCrumb",
     "Bargraph",
-    "UsePaginatedData",
-    "UseUploader",
-    "DataGridBeta",
-  ],
+    "UsePaginatedData",
+    "UseUploader",
+  ],
+  betaComponents: [
+    "DataGrid",
+    "Combobox",
+  ],
   // Define component dependencies
   dependencies: {
     FormRenderer: ["Select", "MultiSelect", "Input", "DatePicker"],
@@ -43,8 +46,19 @@ const CONFIG = {
   docs: "https://gramprokit.vercel.app/",
 };
 
-const SOURCE_PATH = path.join(__dirname, "source", "components");
-const DEFAULT_DEST_PATH = path.join(process.cwd(), "component-lib");
+const SOURCE_PATH = path.join(__dirname, "source", "components");
+const BETA_SOURCE_PATH = path.join(__dirname, "source", "beta-components");
+const DEFAULT_DEST_PATH = path.join(process.cwd(), "component-lib");
+
+const normalizeComponent = (component, availableComponents) =>
+  availableComponents.find(
+    (available) => available.toLowerCase() === component.toLowerCase(),
+  );
+
+const getAvailableComponents = (beta = false) =>
+  beta ? CONFIG.betaComponents : CONFIG.components;
+
+const getSourcePath = (beta = false) => (beta ? BETA_SOURCE_PATH : SOURCE_PATH);
 
 const copyCommonFiles = async (destPath) => {
   const commonFiles = [
@@ -67,14 +81,16 @@ const checkComponentExists = (component, destPath) => {
   return fs.existsSync(componentPath);
 };
 
-const copyComponent = async (component, destPath) => {
-  try {
-    const componentSrc = path.join(SOURCE_PATH, component.toLowerCase());
+const copyComponent = async (component, destPath, beta = false) => {
+  try {
+    const componentSrc = path.join(getSourcePath(beta), component.toLowerCase());
     const componentDest = path.join(destPath, component.toLowerCase());
 
-    if (!fs.existsSync(componentSrc)) {
-      throw new Error(`Component ${component} not found in source directory.`);
-    }
+    if (!fs.existsSync(componentSrc)) {
+      throw new Error(
+        `Component ${component} not found in ${beta ? "beta " : ""}source directory.`,
+      );
+    }
 
     await fs.copy(componentSrc, componentDest, { overwrite: true });
     console.log(
@@ -90,15 +106,17 @@ const copyComponent = async (component, destPath) => {
   }
 };
 
-const installComponentWithDependencies = async (component, destPath) => {
+const installComponentWithDependencies = async (component, destPath, beta = false) => {
   // Get dependencies for the component
   const dependencies = CONFIG.dependencies[component] || [];
   const componentsToInstall = new Set([component, ...dependencies]);
 
   // Check which components need to be installed
-  const pendingInstalls = Array.from(componentsToInstall).filter(
-    (comp) => !checkComponentExists(comp, destPath),
-  );
+  const pendingInstalls = beta
+    ? Array.from(componentsToInstall)
+    : Array.from(componentsToInstall).filter(
+        (comp) => !checkComponentExists(comp, destPath),
+      );
 
   if (pendingInstalls.length === 0) {
     console.log(
@@ -109,7 +127,7 @@ const installComponentWithDependencies = async (component, destPath) => {
 
   // Install all pending components
   for (const comp of pendingInstalls) {
-    await copyComponent(comp, destPath);
+    await copyComponent(comp, destPath, beta);
   }
 
   if (dependencies.length > 0) {
@@ -122,7 +140,7 @@ const installComponentWithDependencies = async (component, destPath) => {
   console.log(`\nFor documentation visit: ${CONFIG.docs}`);
 };
 
-const installMultipleComponents = async (components, destPath) => {
+const installMultipleComponents = async (components, destPath, beta = false) => {
   const allComponentsToInstall = new Set();
 
   // Collect all components and their dependencies
@@ -133,9 +151,11 @@ const installMultipleComponents = async (components, destPath) => {
   });
 
   // Filter out already installed components
-  const pendingInstalls = Array.from(allComponentsToInstall).filter(
-    (comp) => !checkComponentExists(comp, destPath),
-  );
+  const pendingInstalls = beta
+    ? Array.from(allComponentsToInstall)
+    : Array.from(allComponentsToInstall).filter(
+        (comp) => !checkComponentExists(comp, destPath),
+      );
 
   if (pendingInstalls.length === 0) {
     console.log(
@@ -148,7 +168,7 @@ const installMultipleComponents = async (components, destPath) => {
 
   // Install all pending components
   for (const comp of pendingInstalls) {
-    await copyComponent(comp, destPath);
+    await copyComponent(comp, destPath, beta);
   }
 
   // Show dependency information
@@ -168,7 +188,7 @@ const installMultipleComponents = async (components, destPath) => {
   console.log(`\nFor documentation visit: ${CONFIG.docs}`);
 };
 
-const interactiveComponentSelector = async () => {
+const interactiveComponentSelector = async (beta = false) => {
   return new Promise((resolve) => {
     const rl = readline.createInterface({
       input: process.stdin,
@@ -185,7 +205,9 @@ const interactiveComponentSelector = async () => {
         "Use ↑/↓ arrow keys to navigate, SPACE to select/deselect, ENTER to install\n",
       );
 
-      CONFIG.components.forEach((component, index) => {
+      const availableComponents = getAvailableComponents(beta);
+
+      availableComponents.forEach((component, index) => {
         const isSelected = selectedComponents.has(component);
         const isCurrentIndex = index === currentIndex;
         const deps = CONFIG.dependencies[component]
@@ -215,13 +237,13 @@ const interactiveComponentSelector = async () => {
           break;
         case "\u001b[B": // Down arrow
           currentIndex = Math.min(
-            CONFIG.components.length - 1,
+            getAvailableComponents(beta).length - 1,
             currentIndex + 1,
           );
           renderMenu();
           break;
         case " ": // Space bar
-          const component = CONFIG.components[currentIndex];
+          const component = getAvailableComponents(beta)[currentIndex];
           if (selectedComponents.has(component)) {
             selectedComponents.delete(component);
           } else {
@@ -264,21 +286,29 @@ const parseMultipleComponents = (componentString) => {
     .filter((comp) => comp.length > 0);
 };
 
-const validateComponents = (components) => {
-  const invalidComponents = components.filter(
-    (comp) => !CONFIG.components.includes(comp),
-  );
-  if (invalidComponents.length > 0) {
-    console.error(`Invalid components: ${invalidComponents.join(", ")}`);
-    console.log("\nAvailable components:");
-    CONFIG.components.forEach((comp) => console.log(`- ${comp}`));
-    return false;
-  }
-  return true;
-};
-
-const main = async () => {
-  const argv = yargs(hideBin(process.argv))
+const validateComponents = (components, beta = false) => {
+  const availableComponents = getAvailableComponents(beta);
+  const invalidComponents = components.filter(
+    (comp) => !availableComponents.includes(comp),
+  );
+  if (invalidComponents.length > 0) {
+    console.error(`Invalid components: ${invalidComponents.join(", ")}`);
+    console.log(`\nAvailable ${beta ? "beta " : ""}components:`);
+    availableComponents.forEach((comp) => console.log(`- ${comp}`));
+    if (!beta) {
+      console.log("\nRedesigned beta components (install with -beta):");
+      CONFIG.betaComponents.forEach((comp) => console.log(`- ${comp}`));
+    }
+    return false;
+  }
+  return true;
+};
+
+const main = async () => {
+  const args = hideBin(process.argv).map((arg) =>
+    arg === "-beta" ? "--beta" : arg,
+  );
+  const argv = yargs(args)
     .option("add", {
       alias: "a",
       describe:
@@ -290,32 +320,44 @@ const main = async () => {
       describe: "Interactive component selection mode",
       type: "boolean",
     })
-    .option("list", {
-      alias: "l",
-      describe: "List available components",
-      type: "boolean",
-    })
-    .example("$0 -a Button", "Install a single component")
-    .example("$0 -a Button,Card,Modal", "Install multiple components")
-    .example("$0 -i", "Interactive selection mode")
+    .option("list", {
+      alias: "l",
+      describe: "List available components",
+      type: "boolean",
+    })
+    .option("beta", {
+      describe: "Install redesigned beta components",
+      type: "boolean",
+      default: false,
+    })
+    .example("$0 -a Button", "Install a single component")
+    .example("$0 -a Button,Card,Modal", "Install multiple components")
+    .example("$0 -a DataGrid -beta", "Install the redesigned beta DataGrid")
+    .example("$0 -a Combobox -beta", "Install the redesigned beta Combobox")
+    .example("$0 -i", "Interactive selection mode")
     .help().argv;
 
-  // List components if requested
-  if (argv.list) {
-    console.log("\nAvailable components:");
-    CONFIG.components.forEach((comp) => {
-      const deps = CONFIG.dependencies[comp]
-        ? ` (requires: ${CONFIG.dependencies[comp].join(", ")})`
-        : "";
-      console.log(`- ${comp}${deps}`);
-    });
-    return;
-  }
+  // List components if requested
+  if (argv.list) {
+    const availableComponents = getAvailableComponents(argv.beta);
+    console.log(`\nAvailable ${argv.beta ? "beta " : ""}components:`);
+    availableComponents.forEach((comp) => {
+      const deps = CONFIG.dependencies[comp]
+        ? ` (requires: ${CONFIG.dependencies[comp].join(", ")})`
+        : "";
+      console.log(`- ${comp}${deps}`);
+    });
+    if (!argv.beta) {
+      console.log("\nRedesigned beta components (install with -beta):");
+      CONFIG.betaComponents.forEach((comp) => console.log(`- ${comp}`));
+    }
+    return;
+  }
 
   // Interactive mode
-  if (argv.interactive) {
-    console.log("Starting interactive component selector...\n");
-    const selectedComponents = await interactiveComponentSelector();
+  if (argv.interactive) {
+    console.log("Starting interactive component selector...\n");
+    const selectedComponents = await interactiveComponentSelector(argv.beta);
 
     if (selectedComponents.length === 0) {
       console.log("No components selected. Exiting...");
@@ -331,8 +373,8 @@ const main = async () => {
       await copyCommonFiles(destPath);
     }
 
-    // Install selected components
-    await installMultipleComponents(selectedComponents, destPath);
+    // Install selected components
+    await installMultipleComponents(selectedComponents, destPath, argv.beta);
     return;
   }
 
@@ -343,12 +385,14 @@ const main = async () => {
     process.exit(1);
   }
 
-  // Parse components (single or multiple)
-  const componentInput = argv.add;
-  const components = parseMultipleComponents(componentInput);
-
-  // Validate all components
-  if (!validateComponents(components)) {
+  // Parse components (single or multiple)
+  const componentInput = argv.add;
+  const components = parseMultipleComponents(componentInput).map((component) =>
+    normalizeComponent(component, getAvailableComponents(argv.beta)) || component,
+  );
+
+  // Validate all components
+  if (!validateComponents(components, argv.beta)) {
     process.exit(1);
   }
 
@@ -362,14 +406,14 @@ const main = async () => {
   }
 
   // Install components
-  if (components.length === 1) {
-    // Single component installation (existing behavior)
-    await installComponentWithDependencies(components[0], destPath);
-  } else {
-    // Multiple components installation
-    await installMultipleComponents(components, destPath);
-  }
-};
+  if (components.length === 1) {
+    // Single component installation (existing behavior)
+    await installComponentWithDependencies(components[0], destPath, argv.beta);
+  } else {
+    // Multiple components installation
+    await installMultipleComponents(components, destPath, argv.beta);
+  }
+};
 
 main().catch((error) => {
   console.error("Error:", error.message);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gbs-add-block",
-  "version": "1.2.8",
+  "version": "1.2.10",
   "description": "React Component Library",
   "type": "module",
   "files": [

package/source/beta-components/combobox/README.md

@@ -0,0 +1,170 @@
+# Combobox: Select and MultiSelect
+
+Two value pickers with option search, built on one engine and styled to match
+the DataGrid. No runtime dependencies besides React 19.
+
+- **`<Select>`** — one value.
+- **`<MultiSelect>`** — many values, shown as tags.
+
+Both support client or server options, grouping, descriptions, disabled
+options, virtualization for long lists, creating new options, forms, full
+keyboard control, dark mode and right-to-left layouts.
+
+## Setup
+
+```ts
+import { MultiSelect, Select } from "@/components/combobox";
+import "@/components/combobox/styles.css";
+```
+
+The stylesheet reuses the DataGrid's `--dg-*` variables when that stylesheet is
+loaded, so both components share a theme, and falls back to the same palette
+when used on its own.
+
+## Basic usage
+
+```tsx
+const countries = [
+  { value: "in", label: "India", group: "Asia" },
+  { value: "de", label: "Germany", group: "Europe", description: "Berlin" },
+  { value: "mx", label: "Mexico", group: "Americas", disabled: true },
+];
+
+const [country, setCountry] = useState<string | null>(null);
+
+<Select label="Country" options={countries} value={country} onChange={setCountry} />;
+
+const [tags, setTags] = useState<string[]>([]);
+<MultiSelect label="Tags" options={tagOptions} value={tags} onChange={setTags} max={5} />;
+```
+
+Both are controlled with `value` + `onChange`, or uncontrolled with
+`defaultValue`. `onChange` also receives the full option objects:
+`onChange={(value, option) => …}` (single) and `(values, options) => …` (multi).
+
+## Options
+
+```ts
+interface ComboboxOption<V = string> {
+  value: V;              // string or number
+  label: string;
+  description?: string;  // second line
+  group?: string;        // heading; groups appear in first-seen order
+  disabled?: boolean;
+  icon?: ReactNode;
+  keywords?: string[];   // extra search terms
+}
+```
+
+Search matches the label (and highlights it), the description and keywords.
+
+## Props
+
+Shared by both components:
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `options` | `ComboboxOption<V>[]` | required | Options to show. |
+| `mode` | `"client"` \| `"server"` | `"client"` | `server` skips local filtering; `options` are the current results. |
+| `loading` | `boolean` | `false` | Shows a spinner; keeps current options visible. |
+| `onSearchChange` | `(search: string) => void` | — | Search text; debounced in server mode, and fired on open. |
+| `searchDebounce` | `number` | `250` | Debounce in milliseconds (server mode). |
+| `searchable` | `boolean` | `true` | Show the search box. When `false`, typing jumps to a matching option. |
+| `hasMore` / `onLoadMore` | `boolean` / `() => void` | — | Paging: called when the list nears its end, plus a "Load more" button. |
+| `filterFn` | `(option, search) => boolean` | — | Replaces the built-in matching (client mode). |
+| `renderOption` | `(option, { selected, active }) => ReactNode` | — | Custom option content. |
+| `allowCreate` / `onCreate` | `boolean` / `(label: string) => void` | — | Offers "Create …" when nothing matches. |
+| `label`, `description`, `error` | `ReactNode` | — | Field label, hint and error message. `error` also marks the control invalid. |
+| `placeholder` | `string` | `"Select…"` | Shown when nothing is selected. |
+| `required`, `disabled` | `boolean` | `false` | Field states. |
+| `clearable` | `boolean` | `true` | Show the clear button. |
+| `size` | `"sm"` \| `"md"` \| `"lg"` | `"md"` | Control height and font size. |
+| `name` | `string` | — | Posts hidden inputs for forms (one per value). |
+| `maxHeight` | `number` | `280` | Max height of the list. |
+| `virtualize` | `boolean` \| `number` | `true` | Virtualizes above 80 options; pass a number to change the threshold. |
+| `emptyMessage` | `ReactNode` | "No options found" | Shown when nothing matches. |
+| `className`, `classNames`, `style` | — | — | Styling hooks. Slots: `root`, `label`, `control`, `value`, `tag`, `popover`, `search`, `list`, `option`, `footer`. |
+| `localeText` | `Partial<ComboboxLocaleText>` | English | Overrides UI text. |
+| `onOpenChange` | `(open: boolean) => void` | — | Fires when the list opens or closes. |
+| `ref` | `Ref<ComboboxHandle<V>>` | — | `open()`, `close()`, `toggle()`, `focus()`, `clear()`, `getValue()`, `getSelectedOptions()`. |
+
+`Select` adds `value` / `defaultValue` (`V | null`) and `closeOnSelect`
+(default `true`). `MultiSelect` adds `value` / `defaultValue` (`V[]`), `max`,
+`maxVisibleTags` (default 3), `showSelectAll` (default `true`) and
+`closeOnSelect` (default `false`).
+
+## Server options
+
+```tsx
+const [search, setSearch] = useState("");
+const [page, setPage] = useState(0);
+const { data, isFetching } = useQuery({
+  queryKey: ["people", search, page],
+  queryFn: ({ signal }) => fetchPeople({ search, page, signal }),
+  placeholderData: keepPreviousData,
+});
+
+<MultiSelect
+  mode="server"
+  options={data?.options ?? []}
+  hasMore={data?.hasMore}
+  loading={isFetching}
+  onSearchChange={(term) => { setPage(0); setSearch(term); }}
+  onLoadMore={() => setPage((p) => p + 1)}
+  value={selected}
+  onChange={setSelected}
+/>;
+```
+
+- `onSearchChange` fires once when the list opens (so you can load a first page)
+  and then debounced as the user types.
+- Labels of chosen options are remembered, so tags stay readable after the
+  results change. If you set `value` from outside before the matching options
+  have loaded, the raw value is shown until they arrive.
+
+## Keyboard
+
+| Keys | Action |
+| --- | --- |
+| **Enter**, **Space**, **↓**, **↑** | Open the list. |
+| **↓** / **↑** | Move between options (disabled options are skipped). |
+| **Home** / **End** | First / last option. |
+| **Page Down** / **Page Up** | Move ten options. |
+| **Enter** | Choose the highlighted option, or create. |
+| **Escape** | Close and return focus to the control. |
+| **Tab** | Close and move to the next field. |
+| **Backspace** | MultiSelect: remove the last tag (when the search box is empty). |
+| typing | Types into the search box, or jumps to a matching option when `searchable={false}`. |
+
+The control is a `role="combobox"` that owns a `role="listbox"`; the active
+option is tracked with `aria-activedescendant`, so focus stays in the search
+box. The list renders in the top layer through the native Popover API, so it is
+never clipped by a scrolling parent (including inside a DataGrid cell).
+
+## Theming
+
+Override `--cb-*` variables (they default to the grid's `--dg-*`):
+
+```css
+.cb-root { --cb-accent: #7c3aed; --cb-radius: 12px; }
+```
+
+State attributes for styling: `data-state="open"`, `data-size`, `data-invalid`,
+`data-disabled` on the root and control; `data-active`, `data-selected`,
+`data-disabled` on options.
+
+## Headless use
+
+`useCombobox()` holds the whole engine (filtering, active option, keyboard,
+selection, search requests) and is exported if you want to build a different UI
+on top. The framework-free helpers — `filterOptions`, `buildListItems`,
+`nextEnabledIndex`, `toggleValue`, `measureItems`, `getVisibleRange` — are
+exported from `@/components/combobox/core` and can also run on a server.
+
+## Known limits
+
+- Option rows have a fixed height per `size` (taller when any option has a
+  description), because the list is virtualized.
+- No async "load option by value": pass options that include the selected
+  values, or select them through the UI at least once.
+- Tree or multi-level options are not supported.

package/source/beta-components/combobox/__tests__/core.test.ts

@@ -0,0 +1,134 @@
+import { describe, expect, it } from "vitest";
+import {
+  buildListItems,
+  filterOptions,
+  findByPrefix,
+  firstEnabledIndex,
+  lastEnabledIndex,
+  matchRanges,
+  nextEnabledIndex,
+  toggleValue,
+} from "../core/filter";
+import type { ComboboxOption } from "../core/types";
+import { getVisibleRange, measureItems, scrollToItem } from "../core/virtual";
+
+const options: ComboboxOption[] = [
+  { value: "in", label: "India", group: "Asia", keywords: ["bharat"] },
+  { value: "jp", label: "Japan", group: "Asia" },
+  { value: "kr", label: "South Korea", group: "Asia", disabled: true },
+  { value: "de", label: "Germany", group: "Europe", description: "Berlin" },
+  { value: "fr", label: "France", group: "Europe" },
+];
+
+const labels = (list: { option: ComboboxOption }[]) => list.map((entry) => entry.option.label);
+
+describe("matching", () => {
+  it("returns merged, case-insensitive ranges for every term", () => {
+    expect(matchRanges("South Korea", ["korea"])).toEqual([[6, 11]]);
+    expect(matchRanges("Germany", ["ger", "man"])).toEqual([[0, 6]]);
+    expect(matchRanges("Germany", ["ger", "xyz"])).toBeNull();
+    expect(matchRanges("Germany", [])).toEqual([]);
+  });
+
+  it("filters on label, description and keywords", () => {
+    expect(labels(filterOptions(options, ""))).toHaveLength(5);
+    expect(labels(filterOptions(options, "an"))).toEqual(["Japan", "Germany", "France"]);
+    expect(labels(filterOptions(options, "berlin"))).toEqual(["Germany"]);
+    expect(labels(filterOptions(options, "bharat"))).toEqual(["India"]);
+    expect(labels(filterOptions(options, "nothing"))).toEqual([]);
+  });
+
+  it("highlights the label only", () => {
+    const [india] = filterOptions(options, "ind");
+    expect(india.matches).toEqual([[0, 3]]);
+    const [germany] = filterOptions(options, "berlin");
+    expect(germany.matches).toEqual([]);
+  });
+
+  it("uses a custom filter when given", () => {
+    const entries = filterOptions(options, "x", (option) => option.value === "jp");
+    expect(labels(entries)).toEqual(["Japan"]);
+  });
+});
+
+describe("list building", () => {
+  it("adds group headings and numbers options across groups", () => {
+    const items = buildListItems(filterOptions(options, ""));
+    expect(items.map((item) => (item.kind === "group" ? `# ${item.label}` : item.entry.option.label))).toEqual([
+      "# Asia",
+      "India",
+      "Japan",
+      "South Korea",
+      "# Europe",
+      "Germany",
+      "France",
+    ]);
+    const optionItems = items.filter((item) => item.kind === "option");
+    expect(optionItems.map((item) => (item.kind === "option" ? item.index : -1))).toEqual([0, 1, 2, 3, 4]);
+  });
+
+  it("skips headings when no option has a group", () => {
+    const flat = buildListItems(filterOptions([{ value: "a", label: "A" }], ""));
+    expect(flat).toHaveLength(1);
+    expect(flat[0].kind).toBe("option");
+  });
+});
+
+describe("keyboard helpers", () => {
+  const entries = filterOptions(options, "");
+
+  it("moves over enabled options and wraps", () => {
+    expect(nextEnabledIndex(entries, 0, 1)).toBe(1);
+    expect(nextEnabledIndex(entries, 1, 1)).toBe(3); // skips the disabled option
+    expect(nextEnabledIndex(entries, 4, 1)).toBe(0);
+    expect(nextEnabledIndex(entries, 0, -1)).toBe(4);
+    expect(nextEnabledIndex([], 0, 1)).toBe(-1);
+  });
+
+  it("finds the first and last enabled option", () => {
+    expect(firstEnabledIndex(entries)).toBe(0);
+    expect(firstEnabledIndex(entries, 2)).toBe(3);
+    expect(lastEnabledIndex(entries)).toBe(4);
+    expect(lastEnabledIndex([{ option: options[2], matches: [] }])).toBe(-1);
+  });
+
+  it("jumps to a typed prefix", () => {
+    expect(findByPrefix(entries, "ja", -1)).toBe(1);
+    expect(findByPrefix(entries, "s", -1)).toBe(-1); // South Korea is disabled
+    expect(findByPrefix(entries, "zz", -1)).toBe(-1);
+  });
+});
+
+describe("selection", () => {
+  it("adds, removes and respects max", () => {
+    expect(toggleValue(["a"], "b")).toEqual(["a", "b"]);
+    expect(toggleValue(["a", "b"], "a")).toEqual(["b"]);
+    expect(toggleValue(["a", "b"], "c", 2)).toEqual(["a", "b"]);
+    expect(toggleValue(["a", "b"], "b", 2)).toEqual(["a"]);
+  });
+});
+
+describe("virtualization", () => {
+  const items = buildListItems(filterOptions(options, ""));
+  const metrics = measureItems(items, { option: 34, group: 26 });
+
+  it("measures group and option rows", () => {
+    expect(metrics.total).toBe(2 * 26 + 5 * 34);
+    expect(metrics.offsets[0]).toBe(0);
+    expect(metrics.offsets[1]).toBe(26);
+  });
+
+  it("returns the visible window with overscan", () => {
+    expect(getVisibleRange(metrics, 0, 60, 0)).toEqual({ start: 0, end: 3 });
+    expect(getVisibleRange(metrics, 0, 0, 0)).toEqual({ start: 0, end: 7 });
+    const range = getVisibleRange(metrics, 100, 60, 1);
+    expect(range.start).toBeLessThanOrEqual(3);
+    expect(range.end).toBeGreaterThanOrEqual(5);
+  });
+
+  it("scrolls an item into view only when needed", () => {
+    expect(scrollToItem(metrics, 0, 0, 100)).toBeNull();
+    expect(scrollToItem(metrics, 6, 0, 100)).toBe(metrics.offsets[7] - 100);
+    expect(scrollToItem(metrics, 1, 40, 100)).toBe(26);
+  });
+});