@primitiv-ui/react 0.1.28 → 0.1.30

package/src/useLocalStorage/useLocalStorage.ts

@@ -0,0 +1,140 @@
+import { useCallback, useMemo, useSyncExternalStore } from "react";
+
+/**
+ * In-document subscribers, keyed by storage key.
+ *
+ * The browser's own `storage` event only fires in OTHER documents, never the one
+ * that performed the write — so a second consumer of the same key in this
+ * document would keep rendering a stale value. These listeners cover that case;
+ * the `storage` event covers other tabs.
+ */
+const listeners = new Map<string, Set<() => void>>();
+
+/**
+ * The listener set for a key, created on first use.
+ *
+ * Empty sets are deliberately never pruned. Pruning them would mean `notify`
+ * had to guard against a missing set — a branch nothing can reach, since the
+ * only way to obtain the setter is from a mounted hook that has already
+ * subscribed. One empty `Set` per key, for a handful of static keys, is a
+ * better trade than an untestable defensive branch.
+ */
+function listenersFor(key: string): Set<() => void> {
+  let forKey = listeners.get(key);
+  if (!forKey) {
+    forKey = new Set();
+    listeners.set(key, forKey);
+  }
+  return forKey;
+}
+
+function notify(key: string): void {
+  for (const listener of listenersFor(key)) listener();
+}
+
+function read(key: string): string | null {
+  try {
+    return window.localStorage.getItem(key);
+  } catch {
+    // Storage can throw rather than merely be empty — Safari private mode and
+    // "block all cookies" both do. Treat it as "nothing stored".
+    return null;
+  }
+}
+
+/** The server has no storage, so nothing is stored. */
+function getServerSnapshot(): null {
+  return null;
+}
+
+/**
+ * Reads and writes a JSON-serialisable value in `localStorage`, re-rendering
+ * the consumer whenever it changes — including when another component, or
+ * another browser tab, changes the same key.
+ *
+ * Built on {@link https://react.dev/reference/react/useSyncExternalStore |
+ * `useSyncExternalStore`}, mirroring {@link useMediaQuery}: `localStorage` is
+ * external mutable state, so subscribing to it is more correct than copying it
+ * into component state and hoping the copies stay in step.
+ *
+ * **The snapshot is the raw string, not the parsed value.** `getSnapshot` must
+ * return a referentially stable result or React re-renders forever, and
+ * `JSON.parse` yields a fresh object every call. Returning the raw string — a
+ * primitive — is stable by definition, and the parse happens in a `useMemo`
+ * keyed on it.
+ *
+ * **Server rendering.** There is no `localStorage` on the server, so the server
+ * snapshot is `null` and the hook returns `fallback`. The client then reads the
+ * real value after hydration, which means a persisted choice can flash to its
+ * stored state on first paint — unavoidable without a cookie or a blocking
+ * inline script, and the same trade-off `useMediaQuery` makes.
+ *
+ * **Malformed data falls back.** Anything that fails to parse is treated as
+ * absent rather than thrown: storage is shared, long-lived and editable by
+ * hand, so a bad value must not break the page.
+ *
+ * @example Persisting a theme choice
+ * ```tsx
+ * const [theme, setTheme] = useLocalStorage<"light" | "dark">(
+ *   "primitiv-theme",
+ *   "light",
+ * );
+ * return (
+ *   <button onClick={() => setTheme(theme === "dark" ? "light" : "dark")}>
+ *     Switch theme
+ *   </button>
+ * );
+ * ```
+ *
+ * @param key - The `localStorage` key to read and write.
+ * @param fallback - Returned when the key is absent, unreadable, or holds
+ * malformed JSON.
+ * @returns A `[value, setValue]` tuple. `setValue` writes JSON to storage and
+ * notifies every consumer of the same key.
+ */
+export function useLocalStorage<T>(
+  key: string,
+  fallback: T,
+): [T, (next: T) => void] {
+  const subscribe = useCallback(
+    (onStoreChange: () => void) => {
+      const forKey = listenersFor(key);
+      forKey.add(onStoreChange);
+      window.addEventListener("storage", onStoreChange);
+
+      return () => {
+        forKey.delete(onStoreChange);
+        window.removeEventListener("storage", onStoreChange);
+      };
+    },
+    [key],
+  );
+
+  const getSnapshot = useCallback(() => read(key), [key]);
+
+  const raw = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+
+  const value = useMemo<T>(() => {
+    if (raw === null) return fallback;
+    try {
+      return JSON.parse(raw) as T;
+    } catch {
+      return fallback;
+    }
+  }, [raw, fallback]);
+
+  const setValue = useCallback(
+    (next: T) => {
+      try {
+        window.localStorage.setItem(key, JSON.stringify(next));
+      } catch {
+        // Writing can fail on a full or blocked store. Still notify, so the
+        // in-memory read path stays consistent with whatever storage now holds.
+      }
+      notify(key);
+    },
+    [key],
+  );
+
+  return [value, setValue];
+}

package/src/useMediaQuery/README.md

@@ -0,0 +1,66 @@
+# useMediaQuery
+
+Tracks whether a CSS media query currently matches, re-rendering the
+consumer whenever it changes.
+
+```tsx
+import { useMediaQuery } from "@primitiv-ui/react";
+
+function NavigationMenu() {
+  const isDesktop = useMediaQuery("(min-width: 64rem)");
+
+  return isDesktop ? <DesktopNav /> : <MobileMenu />;
+}
+```
+
+## Signature
+
+```ts
+function useMediaQuery(query: string): boolean;
+```
+
+| Param   | Type     | Notes                                             |
+| ------- | -------- | -------------------------------------------------- |
+| `query` | `string` | A media query string, e.g. `"(min-width: 40rem)"`. |
+
+Returns whether `query` currently matches.
+
+## Generic, not tied to Primitiv's breakpoint scale
+
+`useMediaQuery` doesn't know about Primitiv's own `xs`/`sm`/`md`/`lg`/`xl`/`2xl`
+tokens or any other design values — pass whatever query string you need,
+including features other than width:
+
+```tsx
+const prefersDark = useMediaQuery("(prefers-color-scheme: dark)");
+const isCompact = useMediaQuery("(max-width: 40rem)");
+```
+
+If you're using the styled registry components and want Primitiv's own
+breakpoint values, `primitiv tokens` generates a `breakpoints` constants file
+into your project alongside the CSS token layer — build the query string from
+that rather than hardcoding the numbers:
+
+```tsx
+import { useMediaQuery } from "@primitiv-ui/react";
+import { breakpoints } from "./styles/primitiv/breakpoints";
+
+const isCompact = useMediaQuery(`(max-width: ${breakpoints.sm})`);
+```
+
+## Server rendering
+
+`useMediaQuery` renders `false` during server rendering and on the client's
+very first paint before hydration confirms the real value — there is no
+`window`/`matchMedia` available on the server, so `false` is the safest
+default rather than guessing. Design around a possible flash/reflow on
+hydration if you're conditionally rendering off the result, the same as any
+other client-only media query hook.
+
+## Live updates
+
+Unlike a one-time `window.matchMedia(query).matches` read, the hook
+subscribes to the query's real `MediaQueryList` and re-renders on `change` —
+resizing the window, rotating a device, or the query itself changing between
+renders (the hook unsubscribes from the old query and resubscribes to the new
+one automatically) all update the returned value.

package/src/useMediaQuery/__tests__/useMediaQuery.matching.test.tsx

@@ -0,0 +1,42 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { useMediaQuery } from "../useMediaQuery.ts";
+
+function mockMatchMedia(matches: boolean) {
+  window.matchMedia = vi.fn().mockImplementation((query: string) => ({
+    matches,
+    media: query,
+    onchange: null,
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  }));
+}
+
+function MediaQueryProbe({ query }: { query: string }) {
+  const matches = useMediaQuery(query);
+  return <span data-testid="result">{matches ? "true" : "false"}</span>;
+}
+
+describe("useMediaQuery matching", () => {
+  afterEach(() => {
+    // @ts-expect-error: restore by deletion so other suites get jsdom default.
+    delete window.matchMedia;
+  });
+
+  it("should return true when the query currently matches", () => {
+    mockMatchMedia(true);
+
+    render(<MediaQueryProbe query="(min-width: 40rem)" />);
+
+    expect(screen.getByTestId("result")).toHaveTextContent("true");
+  });
+
+  it("should return false when the query does not currently match", () => {
+    mockMatchMedia(false);
+
+    render(<MediaQueryProbe query="(min-width: 40rem)" />);
+
+    expect(screen.getByTestId("result")).toHaveTextContent("false");
+  });
+});

package/src/useMediaQuery/__tests__/useMediaQuery.ssr.test.tsx

@@ -0,0 +1,19 @@
+// @vitest-environment node
+import { describe, expect, it } from "vitest";
+import { renderToStaticMarkup } from "react-dom/server";
+import { useMediaQuery } from "../useMediaQuery.ts";
+
+function Probe() {
+  const matches = useMediaQuery("(min-width: 40rem)");
+  return matches ? <>matches</> : <>no-match</>;
+}
+
+describe("useMediaQuery SSR", () => {
+  it("should render a static false snapshot when there is no window", () => {
+    expect(typeof window).toBe("undefined");
+
+    const markup = renderToStaticMarkup(<Probe />);
+
+    expect(markup).toBe("no-match");
+  });
+});

package/src/useMediaQuery/__tests__/useMediaQuery.subscription.test.tsx

@@ -0,0 +1,89 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { act, render, screen } from "@testing-library/react";
+import { useMediaQuery } from "../useMediaQuery.ts";
+
+type ChangeListener = () => void;
+
+function createMatchMediaMock(initialMatches: Record<string, boolean>) {
+  const listeners = new Map<string, Set<ChangeListener>>();
+
+  const matchMedia = vi.fn((query: string) => ({
+    get matches() {
+      return initialMatches[query] ?? false;
+    },
+    media: query,
+    onchange: null,
+    addEventListener: vi.fn((_type: "change", listener: ChangeListener) => {
+      if (!listeners.has(query)) listeners.set(query, new Set());
+      listeners.get(query)?.add(listener);
+    }),
+    removeEventListener: vi.fn((_type: "change", listener: ChangeListener) => {
+      listeners.get(query)?.delete(listener);
+    }),
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  }));
+
+  return {
+    matchMedia,
+    change(query: string, matches: boolean) {
+      initialMatches[query] = matches;
+      listeners.get(query)?.forEach((listener) => listener());
+    },
+    listenerCount(query: string) {
+      return listeners.get(query)?.size ?? 0;
+    },
+  };
+}
+
+function MediaQueryProbe({ query }: { query: string }) {
+  const matches = useMediaQuery(query);
+  return <span data-testid="result">{matches ? "true" : "false"}</span>;
+}
+
+describe("useMediaQuery live subscription", () => {
+  afterEach(() => {
+    // @ts-expect-error: restore by deletion so other suites get jsdom default.
+    delete window.matchMedia;
+  });
+
+  it("should update when the media query's match state changes", () => {
+    const mock = createMatchMediaMock({ "(min-width: 40rem)": false });
+    window.matchMedia = mock.matchMedia;
+    render(<MediaQueryProbe query="(min-width: 40rem)" />);
+
+    act(() => {
+      mock.change("(min-width: 40rem)", true);
+    });
+
+    expect(screen.getByTestId("result")).toHaveTextContent("true");
+  });
+
+  it("should remove its change listener on unmount", () => {
+    const mock = createMatchMediaMock({ "(min-width: 40rem)": false });
+    window.matchMedia = mock.matchMedia;
+    const { unmount } = render(<MediaQueryProbe query="(min-width: 40rem)" />);
+    expect(mock.listenerCount("(min-width: 40rem)")).toBe(1);
+
+    unmount();
+
+    expect(mock.listenerCount("(min-width: 40rem)")).toBe(0);
+  });
+
+  it("should resubscribe when the query argument changes", () => {
+    const mock = createMatchMediaMock({
+      "(min-width: 40rem)": false,
+      "(min-width: 64rem)": true,
+    });
+    window.matchMedia = mock.matchMedia;
+    const { rerender } = render(<MediaQueryProbe query="(min-width: 40rem)" />);
+    expect(mock.listenerCount("(min-width: 40rem)")).toBe(1);
+
+    rerender(<MediaQueryProbe query="(min-width: 64rem)" />);
+
+    expect(screen.getByTestId("result")).toHaveTextContent("true");
+    expect(mock.listenerCount("(min-width: 40rem)")).toBe(0);
+    expect(mock.listenerCount("(min-width: 64rem)")).toBe(1);
+  });
+});

package/src/useMediaQuery/index.ts

@@ -0,0 +1 @@
+export * from "./useMediaQuery.ts";

package/src/useMediaQuery/useMediaQuery.ts

@@ -0,0 +1,49 @@
+import { useCallback, useSyncExternalStore } from "react";
+
+function getServerSnapshot(): boolean {
+  return false;
+}
+
+/**
+ * Tracks whether a CSS media query currently matches, re-rendering the
+ * consumer whenever it changes.
+ *
+ * Built on {@link https://react.dev/reference/react/useSyncExternalStore |
+ * `useSyncExternalStore`}, so it subscribes to the query's real
+ * `MediaQueryList` (`change` events, cleaned up on unmount and resubscribed
+ * whenever `query` itself changes) rather than polling, and renders a static
+ * `false` during server rendering — there is no `window`/`matchMedia` on the
+ * server, so `false` is the safest default until the client mounts and can
+ * read the real value. This is a generic primitive: it does not know about
+ * Primitiv's own breakpoint scale or any other token values — pass whatever
+ * query string the consumer needs.
+ *
+ * @example Responding to a breakpoint
+ * ```tsx
+ * const isDesktop = useMediaQuery("(min-width: 64rem)");
+ * return isDesktop ? <DesktopNav /> : <MobileMenu />;
+ * ```
+ *
+ * @example Any media feature, not just width
+ * ```tsx
+ * const prefersDark = useMediaQuery("(prefers-color-scheme: dark)");
+ * ```
+ *
+ * @param query - A media query string, e.g. `"(min-width: 40rem)"`.
+ * @returns Whether `query` currently matches. `false` on the server and on
+ * the client's very first paint before hydration confirms the real value.
+ */
+export function useMediaQuery(query: string): boolean {
+  const subscribe = useCallback(
+    (onStoreChange: () => void) => {
+      const mediaQueryList = window.matchMedia(query);
+      mediaQueryList.addEventListener("change", onStoreChange);
+      return () => mediaQueryList.removeEventListener("change", onStoreChange);
+    },
+    [query],
+  );
+
+  const getSnapshot = useCallback(() => window.matchMedia(query).matches, [query]);
+
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}

package/src/usePagination/README.md

@@ -0,0 +1,170 @@
+# usePagination
+
+Headless pagination state: the page arithmetic every paged surface needs, with
+no opinion about where the data comes from or how the row is rendered.
+
+```tsx
+import { usePagination } from "@primitiv-ui/react";
+
+const { page, pageCount, items, next, previous, canNext, canPrevious } =
+  usePagination({ totalItems: 237, pageSize: 10 });
+```
+
+## Works with any data source
+
+The hook never fetches, holds or slices data — it hands back **indices**, which
+is what makes it source-agnostic.
+
+**Client-side** — slice an array you already have:
+
+```tsx
+const { startIndex, endIndex } = usePagination({
+  totalItems: rows.length,
+  pageSize: 10,
+});
+const visible = rows.slice(startIndex, endIndex);
+```
+
+**Server-side** — feed the same indices to a query. Here the server owns the
+total, so pass `totalItems` through as it arrives:
+
+```tsx
+const { page, startIndex, pageSize } = usePagination({
+  totalItems: data?.total,
+  pageSize: 10,
+});
+const { data } = useQuery(["rows", page], () =>
+  fetch(`/api/rows?offset=${startIndex}&limit=10`),
+);
+```
+
+If the server reports a page **count** rather than an item total, give
+`pageCount` directly and skip `totalItems` entirely.
+
+`startIndex`/`endIndex` are a **half-open** range — `[start, end)` — so they
+drop into `Array.slice` and into `LIMIT`/`OFFSET` with no off-by-one at the call
+site.
+
+## Controlled and uncontrolled
+
+Uncontrolled by default, holding its own page:
+
+```tsx
+const pagination = usePagination({ pageCount: 20, defaultPage: 3 });
+```
+
+Pass `page` to drive it yourself — from a URL query, say:
+
+```tsx
+const pagination = usePagination({
+  pageCount: 20,
+  page: Number(searchParams.get("page") ?? 1),
+  onPageChange: (next) => setSearchParams({ page: String(next) }),
+});
+```
+
+`onPageChange` always reports the **clamped** page, never a raw out-of-range
+request, and is not called when the page hasn't actually moved.
+
+## Out-of-range pages are clamped, not rejected
+
+A page index restored from a URL or `localStorage` can easily outlive the data
+it pointed at. Every route into the page — `defaultPage`, a controlled `page`,
+and `setPage` — is clamped to `1...pageCount`, so `page` is always safe to read
+and to index with.
+
+`pageCount` is never less than `1`: a 1-based page needs somewhere to stand, and
+reporting `0` pages would put `page` out of range the moment it was read.
+
+## Options
+
+| Option | Type | Default | Notes |
+|---|---|---|---|
+| `totalItems` | `number` | — | Total items across all pages. Pairs with `pageSize`. |
+| `pageSize` | `number` | — | Items per page. Pairs with `totalItems`. |
+| `pageCount` | `number` | — | Supply directly instead of deriving from the pair. |
+| `page` | `number` | — | Controlled current page, 1-based. |
+| `defaultPage` | `number` | `1` | Starting page when uncontrolled. |
+| `onPageChange` | `(page: number) => void` | — | Fired with the clamped page. |
+| `window` | `"paged" \| "sliding"` | `"paged"` | See Windowing below. |
+| `blockSize` | `number` | `5` | `paged` only — pages per block. |
+| `siblingCount` | `number` | `1` | `sliding` only — pages either side of the current one. |
+| `boundaryCount` | `number` | `1` | Pages pinned at each end, both strategies. |
+
+Given neither `pageCount` nor a complete `totalItems` + `pageSize` pair, the
+hook reports a single page.
+
+## Returns
+
+| Key | Type | Notes |
+|---|---|---|
+| `page` | `number` | Current page, always within `1...pageCount`. |
+| `pageCount` | `number` | Never less than 1. |
+| `setPage` | `(page: number) => void` | Out-of-range requests clamp. |
+| `next` / `previous` | `() => void` | No-ops at the respective end. |
+| `first` / `last` | `() => void` | Jump to either end. |
+| `canPrevious` / `canNext` | `boolean` | Wire to a control's `disabled`. |
+| `startIndex` / `endIndex` | `number` | Half-open slice bounds; `0` when no `pageSize`. |
+| `items` | `PaginationRangeItem[]` | The range to render — see below. |
+
+## Windowing — why the default is `paged`
+
+As the current page moves, something has to decide which numbers stay on screen.
+
+**`paged`** (the default) holds a fixed block and only advances when the current
+page steps outside it:
+
+```
+page 6:  1 ... 6 7 8 9 10 ... 20
+page 7:  1 ... 6 7 8 9 10 ... 20     ← identical; only the active cell moved
+page 10: 1 ... 6 7 8 9 10 ... 20
+page 11: 1 ... 11 12 13 14 15 ... 20 ← one deliberate jump
+```
+
+**`sliding`** follows the current page continuously:
+
+```
+page 6:  1 ... 5 6 7 ... 20
+page 7:  1 ... 6 7 8 ... 20          ← every cell re-labelled
+page 8:  1 ... 7 8 9 ... 20          ← again
+```
+
+Sliding is the more common default elsewhere, but it re-labels the numbers
+directly under the reader's cursor on every single step — the cell you are
+about to click has become a different page by the time you get there, and the
+whole row appears to flash. Paged trades that for one visible jump per block,
+which is both calmer and safer to click.
+
+Set `blockSize` to control how many pages a block holds (default 5). Choose
+`sliding` explicitly if you want the conventional behaviour:
+
+```tsx
+usePagination({ totalItems: 500, pageSize: 10, window: "sliding", siblingCount: 2 });
+```
+
+`siblingCount` applies only to `sliding`; `blockSize` only to `paged`.
+`boundaryCount` applies to both.
+
+## `items` and `paginationRange`
+
+`items` is the range to render: each entry is either a page or a `gap` carrying
+the pages it hides, so an overflow menu can offer them.
+
+```tsx
+items.map((item) =>
+  item.type === "page" ? renderPage(item.page) : renderGap(item.pages),
+);
+```
+
+A run of exactly **one** hidden page is returned as that page instead — hiding a
+single number behind a menu costs a click and saves no width.
+
+`paginationRange(page, pageCount, options?)` is exported separately and is
+pure, so a consumer holding its own page state can reuse the arithmetic without
+the hook. It takes the same `window` / `blockSize` / `siblingCount` /
+`boundaryCount` options.
+
+## Styled surface
+
+The `pagination` registry component composes this hook's output into a styled
+row. See `registry/components/pagination/README.md`.

package/src/usePagination/__tests__/usePagination.navigation.test.tsx

@@ -0,0 +1,109 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { usePagination } from "../usePagination.ts";
+import type { UsePaginationOptions } from "../usePagination.ts";
+
+function NavigationProbe(options: UsePaginationOptions) {
+  const { page, next, previous, first, last, canPrevious, canNext } = usePagination(options);
+  return (
+    <>
+      <span data-testid="page">{page}</span>
+      <span data-testid="flags">
+        {canPrevious ? "prev" : "-"}/{canNext ? "next" : "-"}
+      </span>
+      <button type="button" onClick={previous}>
+        previous
+      </button>
+      <button type="button" onClick={next}>
+        next
+      </button>
+      <button type="button" onClick={first}>
+        first
+      </button>
+      <button type="button" onClick={last}>
+        last
+      </button>
+    </>
+  );
+}
+
+describe("usePagination navigation", () => {
+  it("should step forward one page", async () => {
+    const user = userEvent.setup();
+    render(<NavigationProbe pageCount={10} defaultPage={3} />);
+
+    await user.click(screen.getByRole("button", { name: "next" }));
+
+    expect(screen.getByTestId("page")).toHaveTextContent("4");
+  });
+
+  it("should step back one page", async () => {
+    const user = userEvent.setup();
+    render(<NavigationProbe pageCount={10} defaultPage={3} />);
+
+    await user.click(screen.getByRole("button", { name: "previous" }));
+
+    expect(screen.getByTestId("page")).toHaveTextContent("2");
+  });
+
+  it("should stay on the last page when stepping forward from it", async () => {
+    const user = userEvent.setup();
+    render(<NavigationProbe pageCount={10} defaultPage={10} />);
+
+    await user.click(screen.getByRole("button", { name: "next" }));
+
+    expect(screen.getByTestId("page")).toHaveTextContent("10");
+  });
+
+  it("should stay on the first page when stepping back from it", async () => {
+    const user = userEvent.setup();
+    render(<NavigationProbe pageCount={10} defaultPage={1} />);
+
+    await user.click(screen.getByRole("button", { name: "previous" }));
+
+    expect(screen.getByTestId("page")).toHaveTextContent("1");
+  });
+
+  it("should jump to the first page", async () => {
+    const user = userEvent.setup();
+    render(<NavigationProbe pageCount={10} defaultPage={7} />);
+
+    await user.click(screen.getByRole("button", { name: "first" }));
+
+    expect(screen.getByTestId("page")).toHaveTextContent("1");
+  });
+
+  it("should jump to the last page", async () => {
+    const user = userEvent.setup();
+    render(<NavigationProbe pageCount={10} defaultPage={2} />);
+
+    await user.click(screen.getByRole("button", { name: "last" }));
+
+    expect(screen.getByTestId("page")).toHaveTextContent("10");
+  });
+
+  it("should report both directions available mid-range", () => {
+    render(<NavigationProbe pageCount={10} defaultPage={5} />);
+
+    expect(screen.getByTestId("flags")).toHaveTextContent("prev/next");
+  });
+
+  it("should report no previous on the first page", () => {
+    render(<NavigationProbe pageCount={10} defaultPage={1} />);
+
+    expect(screen.getByTestId("flags")).toHaveTextContent("-/next");
+  });
+
+  it("should report no next on the last page", () => {
+    render(<NavigationProbe pageCount={10} defaultPage={10} />);
+
+    expect(screen.getByTestId("flags")).toHaveTextContent("prev/-");
+  });
+
+  it("should report neither direction when there is only one page", () => {
+    render(<NavigationProbe pageCount={1} />);
+
+    expect(screen.getByTestId("flags")).toHaveTextContent("-/-");
+  });
+});