@terpjs/react-core 0.1.0 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@terpjs/react-core",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
   "description": "Terp React stack core — typed @terpjs/contract client provider, auth session, capability gates, TanStack Router adapter, app shell, page archetypes, DataView and token-styled UI primitives. First frontend stack; see README.md for the component catalog.",
   "exports": {
@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "@tanstack/react-router": "^1.170.16",
-    "@terpjs/contract": "^0.1.0"
+    "@terpjs/contract": "^0.2.0"
   },
   "peerDependencies": {
     "react": "^18.3.0 || ^19.0.0",

package/src/dataview/DataView.test.tsx

@@ -374,7 +374,7 @@ describe("DataView embedded variant", () => {
     expect(screen.getByRole("searchbox")).toBeInTheDocument();
     expect(screen.queryByText(/of 4 results/)).not.toBeInTheDocument();
     expect(screen.queryByRole("button", { name: "Card view" })).not.toBeInTheDocument();
-    expect(screen.queryByRole("combobox", { name: "Rows per page" })).not.toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: "Rows per page" })).not.toBeInTheDocument();
     // All rows rendered — the parent owns paging.
     expect(screen.getAllByRole("row")).toHaveLength(5);
   });

package/src/dataview/DataViewTable.tsx

@@ -235,7 +235,10 @@ export function DataViewTable<T>(props: DataViewTableProps<T>) {
                   style={{
                     position: "absolute",
                     top: 0,
-                    right: -3,
+                    // Sit flush with the cell's right edge — a negative offset would
+                    // let the last column's handle spill past the table and trip the
+                    // scroll container's overflow-x, adding a spurious scrollbar.
+                    right: 0,
                     width: 7,
                     height: "100%",
                     cursor: "col-resize",

package/src/dataview/DataViewToolbar.tsx

@@ -2,10 +2,9 @@ import type { ReactNode } from "react";
 
 import { Button } from "../ui/Button";
 import { Input } from "../ui/Input";
-import { Select } from "../ui/Select";
 import { DataViewColumnSettings } from "./DataViewColumnSettings";
 import type { DataViewColumnSettingsProps } from "./DataViewColumnSettings";
-import { CardsGlyph, CloseGlyph, EllipsisGlyph, SearchGlyph, TableGlyph } from "./glyphs";
+import { CardsGlyph, ChevronDownGlyph, CloseGlyph, EllipsisGlyph, SearchGlyph, TableGlyph } from "./glyphs";
 import { DataViewMenu, DataViewMenuItem, useDataViewText } from "./internal";
 import { useViewSearch } from "./hooks/useViewSearch";
 import type { DataViewBatchAction, DataViewSearchScope } from "./types";
@@ -204,17 +203,29 @@ export function DataViewToolbar<T>(props: DataViewToolbarProps<T>) {
       )}
       <span style={{ flex: 1 }} />
       {props.onPageSizeChange !== undefined && props.pageSize !== undefined && (
-        <Select
-          value={String(props.pageSize)}
-          aria-label={resolve(strings.pageSize)}
-          onChange={(event) => props.onPageSizeChange?.(Number(event.target.value))}
+        <DataViewMenu
+          triggerLabel={resolve(strings.pageSize)}
+          trigger={
+            <span style={{ display: "inline-flex", alignItems: "center", gap: "var(--space-1)" }}>
+              {props.pageSize}
+              <ChevronDownGlyph size={14} />
+            </span>
+          }
         >
-          {(props.pageSizeOptions ?? [10, 25, 50, 100]).map((option) => (
-            <option key={option} value={option}>
-              {option}
-            </option>
-          ))}
-        </Select>
+          {(close) =>
+            (props.pageSizeOptions ?? [10, 25, 50, 100]).map((option) => (
+              <DataViewMenuItem
+                key={option}
+                label={String(option)}
+                selected={option === props.pageSize}
+                onSelect={() => {
+                  props.onPageSizeChange?.(option);
+                  close();
+                }}
+              />
+            ))
+          }
+        </DataViewMenu>
       )}
       {props.onLayoutChange !== undefined && (
         <span style={{ display: "inline-flex", gap: "var(--space-1)" }}>

package/src/dataview/internal.tsx

@@ -75,12 +75,15 @@ export function DataViewMenuItem({
   label,
   destructive = false,
   disabled = false,
+  selected,
   icon,
   onSelect,
 }: {
   label: string;
   destructive?: boolean;
   disabled?: boolean;
+  /** Marks one choice in a mutually exclusive menu (renders `menuitemradio`). */
+  selected?: boolean;
   icon?: ReactNode;
   onSelect: () => void;
 }) {
@@ -88,6 +91,7 @@ export function DataViewMenuItem({
     <MenuItem
       label={label}
       icon={icon}
+      selected={selected}
       destructive={destructive}
       disabled={disabled}
       onSelect={onSelect}

package/src/styles.test.ts

@@ -18,4 +18,13 @@ describe("injectTerpStyles", () => {
     expect(nodes[0]?.textContent ?? "").toContain('[data-terp="input"][type="number"]');
     expect(nodes[0]?.textContent ?? "").toContain("::-webkit-inner-spin-button");
   });
+
+  it("themes scrollbars against the token palette (thin, not the OS default)", () => {
+    injectTerpStyles();
+    const css = document.querySelector(`style#${TERP_STYLES_ID}`)?.textContent ?? "";
+    expect(css).toContain("scrollbar-width: thin");
+    expect(css).toContain("scrollbar-color: var(--color-neutral-300) transparent");
+    expect(css).toContain("::-webkit-scrollbar");
+    expect(css).toContain("::-webkit-scrollbar-thumb");
+  });
 });

package/src/styles.ts

@@ -48,6 +48,39 @@ body {
   box-sizing: border-box;
 }
 
+/* Themed scrollbars: the OS default chrome (thick, grey, light-only) ignores
+   the app theme and looks foreign against a token-styled surface — most
+   obvious on the horizontal overflow of a DataView table. These rules give
+   every scroll container a thin, token-coloured bar that tracks light/dark.
+   Firefox uses the inheritable scrollbar-* properties (set once on the root);
+   WebKit/Blink use the ::-webkit-scrollbar pseudo-elements (not inherited, so
+   they match every scrollable element globally). Paired with the color-scheme
+   declaration on the token roots so any native chrome we do not restyle here
+   (notably the native <select> option popup) also follows the theme. */
+html {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-neutral-300) transparent;
+}
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background-color: var(--color-neutral-300);
+  border: 2px solid transparent;
+  background-clip: padding-box;
+  border-radius: var(--radius-full);
+}
+::-webkit-scrollbar-thumb:hover {
+  background-color: var(--color-neutral-400);
+}
+::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
 /* Shared focus-visible ring: every interactive element that opts in via
    [data-terp] shows a soft outline ring. !important lets the ring beat
    inline base box-shadows (e.g. the primary button's resting shadow) so

package/src/tokens.guard.test.ts

@@ -48,4 +48,14 @@ describe("design tokens", () => {
     }
     expect(offenders).toEqual([]);
   });
+
+  it("opts native chrome into the palette via color-scheme (light + dark)", () => {
+    // Without `color-scheme`, native chrome the framework cannot restyle — the
+    // <select> option popup, and any scrollbar a browser draws natively — stays
+    // in OS-light rendering even under the dark theme. The light root declares
+    // it and both dark blocks (explicit [data-theme='dark'] and the
+    // prefers-color-scheme media query) flip it.
+    expect(tokensCss).toContain("color-scheme: light");
+    expect(tokensCss.match(/color-scheme: dark/g)?.length ?? 0).toBeGreaterThanOrEqual(2);
+  });
 });

package/src/ui/DatePicker.test.tsx

@@ -2,7 +2,7 @@
 import { cleanup, fireEvent, render, screen } from "@testing-library/react";
 import { afterEach, describe, expect, it, vi } from "vitest";
 
-import { LOCALE_NL, LocaleProvider } from "../locale";
+import { LOCALE_EN, LOCALE_NL, LocaleProvider } from "../locale";
 import { DatePicker, DateRangePicker } from "./DatePicker";
 
 afterEach(cleanup);
@@ -10,7 +10,15 @@ afterEach(cleanup);
 describe("DatePicker", () => {
   it("selects a date and supports keyboard navigation", () => {
     const onChange = vi.fn();
-    render(<DatePicker aria-label="Due date" defaultValue={new Date(2026, 6, 7)} onChange={onChange} />);
+    // Pinned to `en`: without a LocaleProvider the picker formats with
+    // `Intl.DateTimeFormat(undefined, …)`, i.e. whatever locale the machine
+    // running the suite happens to use — the month name below would then be
+    // English only on an English host.
+    render(
+      <LocaleProvider locales={{ en: LOCALE_EN }}>
+        <DatePicker aria-label="Due date" defaultValue={new Date(2026, 6, 7)} onChange={onChange} />
+      </LocaleProvider>,
+    );
     fireEvent.click(screen.getByRole("button", { name: "Due date" }));
     expect(screen.getByRole("grid", { name: /July 2026/ })).toBeInTheDocument();
     fireEvent.keyDown(screen.getByRole("grid"), { key: "ArrowRight" });