@alexgorbatchev/shadcn 0.0.30 → 0.0.32

package/dist/components/virtual-data-grid/VirtualDataGrid.d.ts

@@ -0,0 +1,26 @@
+import type { RowData } from "@tanstack/react-table";
+import { type ReactElement, type ReactNode } from "react";
+import { type DataGridRow, type DataGridTable } from "../data-grid/DataGrid.js";
+import { type IVirtualTableRowProps } from "../virtual-table/VirtualTable.js";
+interface IVirtualDataGridProps<T extends RowData, TSelected> {
+    table: DataGridTable<T, TSelected>;
+    label: string;
+    maxHeight?: number | string;
+    estimateRowHeight?: number;
+    overscan?: number;
+    /** Row IDs that stay rendered while scrolled out of view, such as rows with an open editor. */
+    retainedRowIds?: readonly string[];
+    /**
+     * Renders one row. Spread `props` onto the row element and render `DataGridCells` inside it; the default renders a
+     * plain `TableRow` marked selected while the row is selected.
+     */
+    renderRow?: (row: DataGridRow<T>, props: IVirtualTableRowProps) => ReactNode;
+}
+/**
+ * A virtualized, fixed-layout data grid over every filtered and sorted row, without pagination. Columns marked
+ * `fill` take the remaining width; the others keep their sizes and can be resized by dragging or from the keyboard.
+ * Column widths change through CSS variables, so a `useTable` selector can leave out sizing state and resizing never
+ * renders rows again.
+ */
+export declare function VirtualDataGrid<T extends RowData, TSelected>({ table, label, maxHeight, estimateRowHeight, overscan, retainedRowIds, renderRow, }: IVirtualDataGridProps<T, TSelected>): ReactElement;
+export {};

package/dist/components/virtual-data-grid/index.d.ts

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

package/dist/components/virtual-data-grid/index.js

@@ -0,0 +1,88 @@
+import"../../chunk-cp2m7y7v.js";
+import {
+  TableRow2
+} from "../../chunk-zte6pw69.js";
+import"../../chunk-q7p28b89.js";
+import"../../chunk-r9qrb6b6.js";
+import"../../chunk-59p19t57.js";
+import {
+  getDataGridColumnSizeVariables,
+  DataGridHeaderRows,
+  DataGridCells2,
+  DataGridColumns
+} from "../../chunk-yfr9syen.js";
+import {
+  VirtualTable2
+} from "../../chunk-2dxa9enk.js";
+
+// src/components/virtual-data-grid/VirtualDataGrid.tsx
+import { useRef } from "react";
+
+// src/components/data-grid/hooks/useDataGridColumnSizes.ts
+import { useLayoutEffect } from "react";
+function useDataGridColumnSizes(table, scope) {
+  useLayoutEffect(() => {
+    const write = () => {
+      const element = scope.current;
+      if (!element)
+        return;
+      for (const [id, variable] of getDataGridColumnSizeVariables(table)) {
+        const column = table.getColumn(id);
+        if (column)
+          element.style.setProperty(variable, `${column.getSize()}px`);
+      }
+    };
+    write();
+    const subscription = table.atoms.columnSizing.subscribe(write);
+    return () => subscription.unsubscribe();
+  });
+}
+
+// src/components/virtual-data-grid/VirtualDataGrid.tsx
+import { jsx } from "react/jsx-runtime";
+function renderDefaultRow(row, props) {
+  return /* @__PURE__ */ jsx(TableRow2, {
+    ...props,
+    "data-state": row.getIsSelected() ? "selected" : undefined,
+    children: /* @__PURE__ */ jsx(DataGridCells2, {
+      row
+    })
+  }, row.id);
+}
+function VirtualDataGrid({
+  table,
+  label,
+  maxHeight,
+  estimateRowHeight,
+  overscan,
+  retainedRowIds,
+  renderRow = renderDefaultRow
+}) {
+  const scope = useRef(null);
+  useDataGridColumnSizes(table, scope);
+  return /* @__PURE__ */ jsx("div", {
+    ref: scope,
+    "data-testid": "VirtualDataGrid",
+    className: "min-w-0",
+    children: /* @__PURE__ */ jsx(VirtualTable2, {
+      items: table.getPrePaginatedRowModel().rows,
+      getItemKey: (row) => row.id,
+      label,
+      maxHeight,
+      estimateRowHeight,
+      overscan,
+      retainedKeys: retainedRowIds,
+      columns: /* @__PURE__ */ jsx(DataGridColumns, {
+        table
+      }),
+      header: /* @__PURE__ */ jsx(DataGridHeaderRows, {
+        table,
+        isResizable: true
+      }),
+      renderRow
+    })
+  });
+}
+export {
+  VirtualDataGrid
+};

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

@@ -1,100 +1,8 @@
 import"../../chunk-cp2m7y7v.js";
+import"../../chunk-zte6pw69.js";
 import {
-  Table2,
-  TableHeader2,
-  TableBody2
-} from "../../chunk-zte6pw69.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,
-  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", {
-                    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", {
-                style: { height: virtualizer.getTotalSize() - last.end, padding: 0, border: 0 }
-              })
-            })
-          ]
-        })
-      ]
-    })
-  });
-}
+  VirtualTable2
+} from "../../chunk-2dxa9enk.js";
 export {
-  VirtualTable
+  VirtualTable2 as VirtualTable
 };

package/dist/index.d.ts

@@ -60,6 +60,7 @@ export { Progress, ProgressTrack, ProgressIndicator, ProgressLabel, ProgressValu
 export { Collapsible, CollapsibleTrigger, CollapsibleContent } from "./components/Collapsible.js";
 export { Spinner } from "./components/Spinner.js";
 export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, TableColumnGroup, TableColumn, } from "./components/Table.js";
+export type { TableTextAlign, TableVisibility } from "./components/Table.js";
 export { NativeSelect, NativeSelectOptGroup, NativeSelectOption } from "./components/NativeSelect.js";
 export { Kbd, KbdGroup } from "./components/Kbd.js";
 export { Item, ItemMedia, ItemContent, ItemActions, ItemGroup, ItemSeparator, ItemTitle, ItemDescription, ItemHeader, ItemFooter, } from "./components/Item.js";