@lotics/ui 20.0.0 → 20.0.2

package/src/use_option_list.test.ts

@@ -1,232 +0,0 @@
-// @vitest-environment jsdom
-import { describe, it, expect, vi } from "vitest";
-import { act, renderHook } from "@testing-library/react";
-import { useOptionList, type UseOptionListParams } from "./use_option_list";
-
-const OPTS = [
-  { value: "a", label: "Apple" },
-  { value: "b", label: "Banana" },
-  { value: "c", label: "Cherry" },
-];
-
-function setupSingle(overrides: Partial<UseOptionListParams<string, false>> = {}) {
-  const onValueChange = vi.fn();
-  const onRequestClose = vi.fn();
-  const onCustomCommit = vi.fn();
-  const params: UseOptionListParams<string, false> = {
-    options: OPTS,
-    search: { mode: "none" },
-    onValueChange,
-    onRequestClose,
-    onCustomCommit,
-    ...overrides,
-  };
-  const view = renderHook((p: UseOptionListParams<string, false>) => useOptionList(p), {
-    initialProps: params,
-  });
-  return { view, onValueChange, onRequestClose, onCustomCommit };
-}
-
-function setupMulti(overrides: Partial<UseOptionListParams<string, true>> = {}) {
-  const onValueChange = vi.fn();
-  const onRequestClose = vi.fn();
-  const params: UseOptionListParams<string, true> = {
-    options: OPTS,
-    multi: true,
-    search: { mode: "none" },
-    onValueChange,
-    onRequestClose,
-    ...overrides,
-  };
-  const view = renderHook((p: UseOptionListParams<string, true>) => useOptionList(p), {
-    initialProps: params,
-  });
-  return { view, onValueChange, onRequestClose };
-}
-
-describe("useOptionList", () => {
-  it("none mode lists every option and seats the active row on the first one", () => {
-    const { view } = setupSingle();
-    const { rows, activeIndex } = view.result.current;
-    expect(rows.map((r) => r.option.value)).toEqual(["a", "b", "c"]);
-    expect(rows.every((r) => r.kind === "option")).toBe(true);
-    expect(activeIndex).toBe(0);
-  });
-
-  it("none mode seats the active row on the selected option", () => {
-    const { view } = setupSingle({ value: "c" });
-    expect(view.result.current.activeIndex).toBe(2);
-    expect(view.result.current.rows[2].selected).toBe(true);
-  });
-
-  it("single pick emits the value and requests close", () => {
-    const { view, onValueChange, onRequestClose } = setupSingle();
-    act(() => view.result.current.pickRow(1));
-    expect(onValueChange).toHaveBeenCalledWith("b");
-    expect(onRequestClose).toHaveBeenCalledTimes(1);
-  });
-
-  it("multi pick toggles the value and stays open", () => {
-    const { view, onValueChange, onRequestClose } = setupMulti({ value: [] });
-    act(() => view.result.current.pickRow(0));
-    expect(onValueChange).toHaveBeenCalledWith(["a"]);
-    expect(onRequestClose).not.toHaveBeenCalled();
-  });
-
-  it("multi pick removes an already-selected value", () => {
-    const { view, onValueChange } = setupMulti({ value: ["a", "b"] });
-    act(() => view.result.current.pickRow(0)); // toggle off "a"
-    expect(onValueChange).toHaveBeenCalledWith(["b"]);
-  });
-
-  it("internal search filters the rows locally", () => {
-    const { view } = setupSingle({ search: { mode: "internal" } });
-    act(() => view.result.current.setQuery("ap"));
-    expect(view.result.current.rows.map((r) => r.option.value)).toEqual(["a"]);
-    expect(view.result.current.searching).toBe(true);
-  });
-
-  it("allowCustom adds a create row for an unmatched query; picking it commits the raw query", () => {
-    const { view, onCustomCommit } = setupSingle({
-      search: { mode: "internal" },
-      allowCustom: true,
-    });
-    act(() => view.result.current.setQuery("kiwi"));
-    const rows = view.result.current.rows;
-    const custom = rows.find((r) => r.kind === "custom");
-    expect(custom).toBeTruthy();
-    expect(custom?.option.label).toBe('Add "kiwi"');
-    act(() => view.result.current.pickRow(custom!.index));
-    expect(onCustomCommit).toHaveBeenCalledWith("kiwi");
-  });
-
-  it("keeps the active row on the first match, never the create row (placement top)", () => {
-    const { view } = setupSingle({
-      search: { mode: "internal" },
-      allowCustom: true,
-      customOptionPlacement: "top",
-    });
-    act(() => view.result.current.setQuery("ap")); // create row + the Apple match
-    const rows = view.result.current.rows;
-    expect(rows[0].kind).toBe("custom");
-    expect(rows[view.result.current.activeIndex].kind).toBe("option");
-  });
-
-  it("includeEmptyOption prepends a clear row that empties the value", () => {
-    const { view, onValueChange, onRequestClose } = setupSingle({
-      value: "a",
-      includeEmptyOption: true,
-    });
-    expect(view.result.current.rows[0].kind).toBe("empty");
-    act(() => view.result.current.pickRow(0));
-    expect(onValueChange).toHaveBeenCalledWith("");
-    expect(onRequestClose).toHaveBeenCalledTimes(1);
-  });
-
-  it("select-all / deselect-all emit the full set and the empty set", () => {
-    const { view, onValueChange } = setupMulti({ value: ["a"], enableSelectAll: true });
-    expect(view.result.current.showSelectAll).toBe(true);
-    expect(view.result.current.showDeselectAll).toBe(true);
-    act(() => view.result.current.selectAll());
-    expect(onValueChange).toHaveBeenCalledWith(["a", "b", "c"]);
-    act(() => view.result.current.deselectAll());
-    expect(onValueChange).toHaveBeenLastCalledWith([]);
-  });
-
-  it("a none-mode multi toggle keeps the active row where it is (no re-seat on selection)", () => {
-    const onValueChange = vi.fn();
-    const params: UseOptionListParams<string, true> = {
-      options: OPTS,
-      multi: true,
-      search: { mode: "none" },
-      value: ["a"],
-      onValueChange,
-    };
-    const view = renderHook((p: UseOptionListParams<string, true>) => useOptionList(p), {
-      initialProps: params,
-    });
-    act(() => view.result.current.setActiveIndex(2)); // arrow down to "c"
-    act(() => view.result.current.pickRow(2)); // toggle "c" on, popover stays open
-    expect(onValueChange).toHaveBeenCalledWith(["a", "c"]);
-    view.rerender({ ...params, value: ["a", "c"] }); // consumer applies the new value
-    // Regression: must NOT jump back to the first selected option.
-    expect(view.result.current.activeIndex).toBe(2);
-  });
-
-  it("re-seats the active row to the first match when the search query changes", () => {
-    const view = renderHook((p: UseOptionListParams<string, false>) => useOptionList(p), {
-      initialProps: { options: OPTS, search: { mode: "internal" }, onValueChange: vi.fn() },
-    });
-    act(() => view.result.current.setActiveIndex(2));
-    expect(view.result.current.activeIndex).toBe(2);
-    act(() => view.result.current.setQuery("ban")); // filters to "Banana"
-    expect(view.result.current.rows.map((r) => r.option.value)).toEqual(["b"]);
-    expect(view.result.current.activeIndex).toBe(0);
-  });
-
-  it("matches options accent-insensitively (cafe -> Café, dieu -> Điều)", () => {
-    const view = renderHook((p: UseOptionListParams<string, false>) => useOptionList(p), {
-      initialProps: {
-        options: [
-          { value: "cf", label: "Café" },
-          { value: "dd", label: "Điều độ" },
-          { value: "x", label: "Other" },
-        ],
-        search: { mode: "internal" },
-        onValueChange: vi.fn(),
-      },
-    });
-    act(() => view.result.current.setQuery("dieu"));
-    expect(view.result.current.rows.map((r) => r.option.value)).toEqual(["dd"]);
-    act(() => view.result.current.setQuery("cafe"));
-    expect(view.result.current.rows.map((r) => r.option.value)).toEqual(["cf"]);
-  });
-
-  it("controlled server-filtered mode shows options as-is (no local re-filter)", () => {
-    const { view } = setupSingle({
-      // The server already filtered to one result; the hook must not re-filter it out.
-      options: [{ value: "z", label: "Zucchini" }],
-      search: { mode: "controlled", query: "xyz", serverFiltered: true },
-    });
-    expect(view.result.current.rows.map((r) => r.option.value)).toEqual(["z"]);
-  });
-
-  it("controlled server-filtered mode browses recents on an empty query", () => {
-    const recentOptions = [
-      { value: "r1", label: "Recent one" },
-      { value: "r2", label: "Recent two" },
-    ];
-    // A server search has nothing for an empty term — recents are the idle list.
-    const params: UseOptionListParams<string, false> = {
-      options: [],
-      search: { mode: "controlled", query: "", serverFiltered: true },
-      recentOptions,
-    };
-    const view = renderHook((p: UseOptionListParams<string, false>) => useOptionList(p), {
-      initialProps: params,
-    });
-    expect(view.result.current.searching).toBe(false);
-    expect(view.result.current.rows.map((r) => r.option.value)).toEqual(["r1", "r2"]);
-    // Typing hands the list back to the server's results.
-    view.rerender({
-      ...params,
-      options: [{ value: "z", label: "Zucchini" }],
-      search: { mode: "controlled", query: "zu", serverFiltered: true },
-    });
-    expect(view.result.current.rows.map((r) => r.option.value)).toEqual(["z"]);
-  });
-
-  it("an empty controlled query without recents browses the full option set", () => {
-    // The `recentOptions ?? options` idle contract — a consumer that supplies
-    // browse options (server or local) and no recents keeps its full list.
-    for (const serverFiltered of [true, false]) {
-      const view = renderHook((p: UseOptionListParams<string, false>) => useOptionList(p), {
-        initialProps: {
-          options: OPTS,
-          search: { mode: "controlled" as const, query: "", serverFiltered },
-        },
-      });
-      expect(view.result.current.rows.map((r) => r.option.value)).toEqual(["a", "b", "c"]);
-    }
-  });
-});

package/src/use_section_nav.test.ts

@@ -1,171 +0,0 @@
-// @vitest-environment jsdom
-import { describe, it, expect } from "vitest";
-import { act, renderHook } from "@testing-library/react";
-import { useSectionNav } from "./use_section_nav";
-import type { LayoutChangeEvent, NativeScrollEvent, NativeSyntheticEvent } from "react-native";
-
-// RN-web's layout event carries the measured node as `nativeEvent.target`; RN's
-// own (native-only) types don't model it, so it goes on after the cast.
-const layoutAt = (y: number, target?: Element) => {
-  const e = { nativeEvent: { layout: { y } } } as LayoutChangeEvent;
-  if (target) Object.assign(e.nativeEvent, { target });
-  return e;
-};
-const scrollTo = (y: number) => ({ nativeEvent: { contentOffset: { y } } }) as NativeSyntheticEvent<NativeScrollEvent>;
-
-function mounted() {
-  const hook = renderHook(() => useSectionNav(["a", "b", "c"] as const));
-  act(() => {
-    hook.result.current.register("a")(layoutAt(0));
-    hook.result.current.register("b")(layoutAt(400));
-    hook.result.current.register("c")(layoutAt(900));
-  });
-  return hook;
-}
-
-const rect = (top: number): DOMRect => ({
-  top,
-  bottom: top,
-  left: 0,
-  right: 0,
-  width: 0,
-  height: 0,
-  x: 0,
-  y: top,
-  toJSON: () => ({}),
-});
-
-/**
- * A web page in miniature: a scroll container pinned at the viewport top plus
- * section nodes sitting at live content offsets. `scrolledTo` moves the scroll
- * position and every rect together (as a browser does), `shift` is the async
- * content growth that moves sections WITHOUT an `onLayout` — the case a cached
- * offset cannot see. A detached node measures as 0, like a real one.
- */
-function webPage<K extends string>(keys: readonly K[], contentY: Record<K, number>) {
-  let scrollY = 0;
-  let live: Record<K, number> = { ...contentY };
-  const node = document.createElement("div");
-  document.body.appendChild(node);
-  Object.defineProperty(node, "scrollTop", { get: () => scrollY });
-  node.getBoundingClientRect = () => rect(0);
-  const els = {} as Record<K, HTMLElement>;
-  for (const key of keys) {
-    const el = document.createElement("div");
-    document.body.appendChild(el);
-    el.getBoundingClientRect = () => (el.isConnected ? rect(live[key] - scrollY) : rect(0));
-    els[key] = el;
-  }
-  return {
-    node,
-    els,
-    shift: (next: Partial<Record<K, number>>) => {
-      live = { ...live, ...next };
-    },
-    scrolledTo: (y: number) => {
-      scrollY = y;
-      return scrollTo(y);
-    },
-  };
-}
-
-/** The registered page above, wired to a hook whose `scrollTo` calls are recorded. */
-function webMounted(contentY: Record<"a" | "b" | "c", number>) {
-  const keys = ["a", "b", "c"] as const;
-  const page = webPage(keys, contentY);
-  const calls: { y: number }[] = [];
-  const hook = renderHook(() => useSectionNav(keys));
-  (hook.result.current.scrollRef as { current: unknown }).current = {
-    getScrollableNode: () => page.node,
-    scrollTo: (opts: { y: number }) => calls.push(opts),
-  };
-  act(() => {
-    for (const key of keys) hook.result.current.register(key)(layoutAt(contentY[key], page.els[key]));
-  });
-  return { result: hook.result, page, calls };
-}
-
-describe("useSectionNav", () => {
-  it("starts on the first key", () => {
-    const { result } = renderHook(() => useSectionNav(["a", "b"] as const));
-    expect(result.current.activeKey).toBe("a");
-  });
-
-  it("activates the last section whose top passed the viewport edge (+80 threshold)", () => {
-    const { result } = mounted();
-    act(() => result.current.onScroll(scrollTo(0)));
-    expect(result.current.activeKey).toBe("a");
-    // 321 + 80 threshold = 401 >= b's 400 → b is active
-    act(() => result.current.onScroll(scrollTo(321)));
-    expect(result.current.activeKey).toBe("b");
-    // just short of the threshold stays on a
-    act(() => result.current.onScroll(scrollTo(319)));
-    expect(result.current.activeKey).toBe("a");
-    act(() => result.current.onScroll(scrollTo(2000)));
-    expect(result.current.activeKey).toBe("c");
-  });
-
-  it("keys walk in page order — a later key with a smaller offset never wins", () => {
-    const { result } = renderHook(() => useSectionNav(["a", "b"] as const));
-    act(() => {
-      result.current.register("a")(layoutAt(500));
-      result.current.register("b")(layoutAt(100));
-    });
-    act(() => result.current.onScroll(scrollTo(600)));
-    // both tops passed; the LAST key in page order wins
-    expect(result.current.activeKey).toBe("b");
-  });
-
-  it("ignores keys that never registered", () => {
-    const { result } = renderHook(() => useSectionNav(["a", "b", "c"] as const));
-    act(() => result.current.register("a")(layoutAt(0)));
-    act(() => result.current.onScroll(scrollTo(999)));
-    expect(result.current.activeKey).toBe("a");
-  });
-
-  it("jumpTo scrolls to the section's offset minus the 12px breathing room, clamped at 0", () => {
-    const { result } = mounted();
-    const calls: { y: number }[] = [];
-    (result.current.scrollRef as { current: unknown }).current = {
-      scrollTo: (opts: { y: number }) => calls.push(opts),
-    };
-    act(() => result.current.jumpTo("b"));
-    expect(calls[0]?.y).toBe(388);
-    act(() => result.current.jumpTo("a"));
-    expect(calls[1]?.y).toBe(0);
-  });
-
-  it("on web the highlight follows content that shifted after layout", () => {
-    const { result, page } = webMounted({ a: 0, b: 400, c: 900 });
-    act(() => result.current.onScroll(page.scrolledTo(321)));
-    expect(result.current.activeKey).toBe("b");
-
-    // a table above b finishes loading and pushes everything below it down 300px
-    page.shift({ b: 700, c: 1200 });
-    act(() => result.current.onScroll(page.scrolledTo(321)));
-    expect(result.current.activeKey).toBe("a");
-    act(() => result.current.onScroll(page.scrolledTo(700)));
-    expect(result.current.activeKey).toBe("b");
-
-    // and back: content above collapses, pulling the sections up again
-    page.shift({ b: 200, c: 500 });
-    act(() => result.current.onScroll(page.scrolledTo(450)));
-    expect(result.current.activeKey).toBe("c");
-  });
-
-  it("on web jumpTo lands on the section's shifted position", () => {
-    const { result, page, calls } = webMounted({ a: 0, b: 400, c: 900 });
-    page.shift({ b: 700 });
-    act(() => result.current.jumpTo("b"));
-    expect(calls[0]?.y).toBe(688);
-  });
-
-  it("a section removed from the DOM keeps its last offset instead of measuring as the page top", () => {
-    const { result, page } = webMounted({ a: 0, b: 400, c: 900 });
-    page.els.c.remove();
-    // 500 + 80 = 580: past b, still short of c — a detached c measured live
-    // would read as the current scroll position and steal the highlight.
-    act(() => result.current.onScroll(page.scrolledTo(500)));
-    expect(result.current.activeKey).toBe("b");
-  });
-});

package/src/use_selection.test.ts

@@ -1,66 +0,0 @@
-// @vitest-environment jsdom
-import { describe, it, expect } from "vitest";
-import { act, renderHook } from "@testing-library/react";
-import { useSelection } from "./use_selection";
-
-describe("useSelection", () => {
-  it("toggles an id on and off, and sets it explicitly with `on`", () => {
-    const { result } = renderHook(() => useSelection());
-    expect(result.current.count).toBe(0);
-    expect(result.current.has("a")).toBe(false);
-
-    act(() => result.current.toggle("a"));
-    expect(result.current.has("a")).toBe(true);
-    expect(result.current.count).toBe(1);
-
-    act(() => result.current.toggle("a"));
-    expect(result.current.has("a")).toBe(false);
-
-    act(() => result.current.toggle("a", true));
-    act(() => result.current.toggle("a", true)); // explicit on is idempotent
-    expect(result.current.count).toBe(1);
-    act(() => result.current.toggle("a", false));
-    expect(result.current.has("a")).toBe(false);
-  });
-
-  it("setAll selects/deselects a batch; `selected` exposes the picked ids", () => {
-    const { result } = renderHook(() => useSelection());
-    act(() => result.current.setAll(["a", "b", "c"], true));
-    expect(result.current.count).toBe(3);
-    expect([...result.current.selected].sort()).toEqual(["a", "b", "c"]);
-
-    act(() => result.current.setAll(["a", "b"], false));
-    expect([...result.current.selected]).toEqual(["c"]);
-  });
-
-  it("allSelected / indeterminate drive a select-all checkbox", () => {
-    const { result } = renderHook(() => useSelection());
-    const page = ["a", "b", "c"];
-    expect(result.current.allSelected(page)).toBe(false);
-    expect(result.current.indeterminate(page)).toBe(false);
-    expect(result.current.allSelected([])).toBe(false); // an empty set is never "all"
-
-    act(() => result.current.toggle("a", true));
-    expect(result.current.allSelected(page)).toBe(false);
-    expect(result.current.indeterminate(page)).toBe(true);
-
-    act(() => result.current.setAll(page, true));
-    expect(result.current.allSelected(page)).toBe(true);
-    expect(result.current.indeterminate(page)).toBe(false);
-  });
-
-  it("only the passed ids count — a selection outside the set isn't 'all'/'indeterminate' for it", () => {
-    const { result } = renderHook(() => useSelection());
-    act(() => result.current.setAll(["x", "y"], true));
-    expect(result.current.allSelected(["a", "b"])).toBe(false);
-    expect(result.current.indeterminate(["a", "b"])).toBe(false);
-  });
-
-  it("clear empties the whole selection", () => {
-    const { result } = renderHook(() => useSelection());
-    act(() => result.current.setAll(["a", "b"], true));
-    act(() => result.current.clear());
-    expect(result.current.count).toBe(0);
-    expect(result.current.has("a")).toBe(false);
-  });
-});

package/src/vite.test.ts

@@ -1,41 +0,0 @@
-import { describe, it, expect } from "vitest";
-import * as fs from "node:fs";
-import * as path from "node:path";
-import { loticsOptimizeDeps } from "./vite.mjs";
-
-describe("@lotics/ui/vite", () => {
-  it("exports a non-empty list of module-specifier strings", () => {
-    expect(Array.isArray(loticsOptimizeDeps)).toBe(true);
-    expect(loticsOptimizeDeps.length).toBeGreaterThan(0);
-    for (const entry of loticsOptimizeDeps) {
-      expect(typeof entry).toBe("string");
-      expect(entry.length).toBeGreaterThan(0);
-    }
-  });
-
-  it("is a zero-import leaf (it loads inside Vite's Node config context)", () => {
-    // The module is imported by an app's `vite.config.ts`, evaluated by Node
-    // before any resolve.alias or RN-Web shim exists. A single import would drag
-    // react-native-web (and its Metro globals) into the Node config load and
-    // crash it — so the runtime module must import nothing at all. Strip comments
-    // first so the usage example in the header (which shows an `import` line) is
-    // not mistaken for real code.
-    const raw = fs.readFileSync(path.join(__dirname, "vite.mjs"), "utf-8");
-    const code = raw
-      .replace(/\/\*[\s\S]*?\*\//g, "")
-      .replace(/(^|[^:])\/\/.*$/gm, "$1");
-    expect(code).not.toMatch(/^\s*import\b/m);
-    expect(code).not.toMatch(/\bfrom\s+["']/);
-    expect(code).not.toMatch(/\brequire\s*\(/);
-  });
-
-  test("carries the load-bearing RN-Web interop entries (a missing one blanks the dev iframe)", () => {
-    // RN-Web does `import normalizeColor from "@react-native/normalize-colors"`
-    // (nested CJS): un-prebundled, the dev server serves it as ESM with no
-    // default export and the iframe blanks the moment a colour-touching
-    // component mounts. These membership pins port the scaffold-era literal
-    // assertions to the list's owner.
-    expect(loticsOptimizeDeps).toContain("react-native-web");
-    expect(loticsOptimizeDeps).toContain("@react-native/normalize-colors");
-  });
-});