@alexgorbatchev/shadcn 0.0.16 → 0.0.17

package/README.md

@@ -52,6 +52,7 @@ Import shared controls and providers from `@alexgorbatchev/shadcn`. Import the f
 | `/fonts.css`        | JetBrains Mono font stylesheet                          | `bun add @fontsource-variable/jetbrains-mono@^5.3.0`          |
 | `/sonner`           | Sonner, SonnerToaster, Toaster, toast, useSonner        | No additional install; patched implementation is bundled      |
 | `/input-otp`        | InputOTP components                                     | No additional install; patched implementation is bundled      |
+| `/virtual-table`    | VirtualTable and row measurement props                  | `@tanstack/react-virtual@3.14.13`                             |
 | `/message-scroller` | MessageScroller components, hooks, and types            | No additional install; patched implementation is bundled      |
 | `/questionnaire`    | Questionnaire components and types                      | No additional install; patched implementation is bundled      |
 
@@ -268,6 +269,8 @@ Compose `QuestionnaireItem`, `QuestionnaireTitle`, and answer controls inside `Q
 
 `InlineEdit` mounts an edit session with a controlled `value`, `onValueChange`, `onCommit`, and `onCancel`. Mount it in place of the displayed label. Its input focuses and selects its text by default; `shouldSelectOnMount={false}` preserves the initial caret. Enter or blur commits once, Escape cancels without committing, and asynchronous saves disable the input until completion. Rejected saves display an error and allow retry.
 
+`VirtualTable` renders a bounded, dynamically measured set of native table rows using TanStack Virtual. Supply `items`, stable `getItemKey`, `header`, `columnCount`, `label`, and `renderRow`; spread the supplied measurement props onto each native row. Optional `columns` accepts a colgroup. `maxHeight` defaults to `65vh`, `estimateRowHeight` to 80 pixels, and `overscan` to five rows. `retainedKeys` keeps editing rows mounted; the focused row is retained automatically. Filtering and selection belong to the consumer.
+
 `StarRating` takes a controlled numeric `value` from 0 to 5, `onValueChange`, and an accessible `label`. Its native radio buttons support keyboard selection and an Unrated option to clear the rating. Set `disabled` while saving. `Avatar shape="square"` displays square artwork with matching image, fallback, and border corners.
 
 `DialogContent size="wide"` uses a desktop maximum width of 576px; `size="narrow"` uses 192px, and the default uses 384px. Dialogs remain bounded by the viewport. `FieldGroup columns={2}` arranges fields in two columns on desktop and one on mobile.

package/dist/components/virtual-table/VirtualTable.d.ts

@@ -0,0 +1,23 @@
+import { type ComponentProps, type Key, type ReactElement, type ReactNode } from "react";
+import { Table } from "../Table.js";
+export interface IVirtualTableRowProps {
+    ref: (element: HTMLTableRowElement | null) => void;
+    "data-index": number;
+    "aria-rowindex": number;
+}
+interface IVirtualTableProps<T> {
+    items: readonly T[];
+    getItemKey: (item: T) => Key;
+    renderRow: (item: T, props: IVirtualTableRowProps) => ReactNode;
+    header: ReactNode;
+    columns?: ReactNode;
+    columnCount: number;
+    label: string;
+    maxHeight?: number | string;
+    estimateRowHeight?: number;
+    overscan?: number;
+    retainedKeys?: readonly Key[];
+    layout?: ComponentProps<typeof Table>["layout"];
+}
+export declare function VirtualTable<T>({ items, getItemKey, renderRow, header, columns, columnCount, label, maxHeight, estimateRowHeight, overscan, retainedKeys, layout, }: IVirtualTableProps<T>): ReactElement;
+export {};

package/dist/components/virtual-table/index.d.ts

@@ -0,0 +1,2 @@
+export { VirtualTable } from "./VirtualTable.js";
+export type { IVirtualTableRowProps } from "./VirtualTable.js";

package/dist/components/virtual-table/index.js

@@ -0,0 +1,103 @@
+import"../../chunk-cp2m7y7v.js";
+import {
+  Table2,
+  TableHeader2,
+  TableBody2
+} from "../../chunk-0y0kqaqj.js";
+
+// src/components/virtual-table/VirtualTable.tsx
+import {
+  Fragment,
+  useCallback,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { defaultRangeExtractor, useVirtualizer } from "@tanstack/react-virtual";
+import { jsx, jsxs } from "react/jsx-runtime";
+function VirtualTable({
+  items,
+  getItemKey,
+  renderRow,
+  header,
+  columns,
+  columnCount,
+  label,
+  maxHeight = "65vh",
+  estimateRowHeight = 80,
+  overscan = 5,
+  retainedKeys,
+  layout = "fixed"
+}) {
+  const viewport = useRef(null);
+  const [focusedKey, setFocusedKey] = useState();
+  const retained = useMemo(() => items.flatMap((item, index) => retainedKeys?.includes(getItemKey(item)) || getItemKey(item) === focusedKey ? [index] : []), [items, retainedKeys, getItemKey, focusedKey]);
+  const rangeExtractor = useCallback((range) => [...new Set([...defaultRangeExtractor(range), ...retained])].sort((a, b) => a - b), [retained]);
+  const itemKey = useCallback((index) => getItemKey(items[index]), [items, getItemKey]);
+  const virtualizer = useVirtualizer({
+    count: items.length,
+    getScrollElement: () => viewport.current,
+    getItemKey: itemKey,
+    estimateSize: () => estimateRowHeight,
+    overscan,
+    rangeExtractor
+  });
+  const rows = virtualizer.getVirtualItems();
+  const last = rows.at(-1);
+  return /* @__PURE__ */ jsx("div", {
+    ref: viewport,
+    "data-testid": "VirtualTable",
+    role: "region",
+    "aria-label": label,
+    tabIndex: 0,
+    className: "min-w-0 overflow-auto overscroll-contain",
+    style: { maxHeight },
+    onFocusCapture: (event) => {
+      const row = event.target.closest("tr[data-index]");
+      const item = items[Number(row?.dataset.index)];
+      if (row && item)
+        setFocusedKey(getItemKey(item));
+    },
+    children: /* @__PURE__ */ jsxs(Table2, {
+      layout,
+      "aria-label": label,
+      "aria-rowcount": items.length + 1,
+      children: [
+        columns,
+        /* @__PURE__ */ jsx(TableHeader2, {
+          children: header
+        }),
+        /* @__PURE__ */ jsxs(TableBody2, {
+          children: [
+            rows.map((row, index) => /* @__PURE__ */ jsxs(Fragment, {
+              children: [
+                row.start > (rows[index - 1]?.end ?? 0) && /* @__PURE__ */ jsx("tr", {
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ jsx("td", {
+                    colSpan: columnCount,
+                    style: { height: row.start - (rows[index - 1]?.end ?? 0), padding: 0, border: 0 }
+                  })
+                }),
+                renderRow(items[row.index], {
+                  ref: virtualizer.measureElement,
+                  "data-index": row.index,
+                  "aria-rowindex": row.index + 2
+                })
+              ]
+            }, row.key)),
+            last && virtualizer.getTotalSize() > last.end && /* @__PURE__ */ jsx("tr", {
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsx("td", {
+                colSpan: columnCount,
+                style: { height: virtualizer.getTotalSize() - last.end, padding: 0, border: 0 }
+              })
+            })
+          ]
+        })
+      ]
+    })
+  });
+}
+export {
+  VirtualTable
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alexgorbatchev/shadcn",
-  "version": "0.0.16",
+  "version": "0.0.17",
   "description": "Sharp, monospace React components with compact and comfortable densities.",
   "license": "MIT",
   "repository": {
@@ -988,6 +988,10 @@
     "./assistant-ui/native/task-tray": {
       "types": "./dist/components/assistant-ui/native/TaskTray.d.ts",
       "import": "./dist/components/assistant-ui/native/TaskTray.js"
+    },
+    "./virtual-table": {
+      "types": "./dist/components/virtual-table/index.d.ts",
+      "import": "./dist/components/virtual-table/index.js"
     }
   },
   "publishConfig": {
@@ -1105,6 +1109,7 @@
     "@daypicker/persian": "^10.0.2",
     "@daypicker/react": "^10.0.2",
     "@fontsource-variable/jetbrains-mono": "^5.3.0",
+    "@tanstack/react-virtual": "^3.14.13",
     "anser": "2.3.5",
     "beautiful-mermaid": "^1.1.3",
     "cmdk": "^1.1.1",
@@ -1218,6 +1223,9 @@
     },
     "colorjs.io": {
       "optional": true
+    },
+    "@tanstack/react-virtual": {
+      "optional": true
     }
   },
   "packageManager": "bun@1.4.2"