@versini/ui-datagrid 0.1.0 → 0.1.1

package/dist/DataGridVirtual/VirtualDataGrid.js

@@ -1,181 +0,0 @@
-/*!
-  @versini/ui-datagrid v0.1.0
-  © 2026 gizmette.com
-*/
-
-import { jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
-import { useCallback, useMemo } from "react";
-import { DataGridContext } from "../DataGrid/DataGridContext.js";
-import { getDataGridClasses } from "../DataGrid/utilities.js";
-import { BlurEffects } from "../DataGridConstants/DataGridConstants.js";
-import { getHeaderClasses } from "../DataGridHeader/DataGridHeader.js";
-import { useVirtualDataGrid } from "./useVirtualDataGrid.js";
-
-;// CONCATENATED MODULE: external "react/jsx-runtime"
-
-;// CONCATENATED MODULE: external "clsx"
-
-;// CONCATENATED MODULE: external "react"
-
-;// CONCATENATED MODULE: external "../DataGrid/DataGridContext.js"
-
-;// CONCATENATED MODULE: external "../DataGrid/utilities.js"
-
-;// CONCATENATED MODULE: external "../DataGridConstants/DataGridConstants.js"
-
-;// CONCATENATED MODULE: external "../DataGridHeader/DataGridHeader.js"
-
-;// CONCATENATED MODULE: external "./useVirtualDataGrid.js"
-
-;// CONCATENATED MODULE: ./src/DataGridVirtual/VirtualDataGrid.tsx
-
-
-
-
-
-
-
-
-/**
- * A virtualized data grid component for rendering large datasets.
- *
- * @example
- * ```tsx
- * <VirtualDataGrid
- *   data={items}
- *   height="500px"
- *   columns={[
- *     { id: 'name', header: 'Name', cell: (item) => item.name },
- *     { id: 'date', header: 'Date', cell: (item) => formatDate(item.date) },
- *   ]}
- *   getRowKey={(item) => item.id}
- * />
- * ```
- *
- */ function VirtualDataGrid({ data, columns, height, mode = "system", compact = false, stickyHeader = true, blurEffect = BlurEffects.NONE, caption, wrapperClassName, className, getRowKey, onRowClick, activeRowIndex, estimateSize = 40, overscan = 5, useFlushSync = true }) {
-    // Memoize the getItemKey function to prevent infinite re-renders.
-    const getItemKey = useCallback((index)=>getRowKey ? getRowKey(data[index], index) : index, [
-        getRowKey,
-        data
-    ]);
-    const { scrollContainerRef, totalSize, virtualItems, measureElement } = useVirtualDataGrid({
-        data,
-        estimateSize,
-        overscan,
-        getItemKey,
-        useFlushSync
-    });
-    const classes = useMemo(()=>getDataGridClasses({
-            mode,
-            className,
-            wrapperClassName,
-            stickyHeader,
-            stickyFooter: false,
-            disabled: false
-        }), [
-        mode,
-        className,
-        wrapperClassName,
-        stickyHeader
-    ]);
-    const headerClasses = useMemo(()=>getHeaderClasses({
-            stickyHeader,
-            mode,
-            blurEffect
-        }), [
-        stickyHeader,
-        mode,
-        blurEffect
-    ]);
-    const contextValue = useMemo(()=>({
-            mode,
-            compact
-        }), [
-        mode,
-        compact
-    ]);
-    const containerStyle = useMemo(()=>({
-            height: typeof height === "number" ? `${height}px` : height,
-            overflow: "auto"
-        }), [
-        height
-    ]);
-    /**
-	 * The tbody needs relative positioning for absolute row children and a height
-	 * equal to the total virtualized size.
-	 */ const tbodyStyle = useMemo(()=>({
-            display: "block",
-            height: `${totalSize}px`,
-            position: "relative"
-        }), [
-        totalSize
-    ]);
-    // Header row needs to be display: table to maintain column widths.
-    const theadStyle = useMemo(()=>({
-            display: "table",
-            width: "100%",
-            tableLayout: "fixed"
-        }), []);
-    return /*#__PURE__*/ jsx(DataGridContext.Provider, {
-        value: contextValue,
-        children: /*#__PURE__*/ jsx("div", {
-            className: classes.wrapper,
-            children: /*#__PURE__*/ jsx("div", {
-                ref: scrollContainerRef,
-                style: containerStyle,
-                children: /*#__PURE__*/ jsxs("table", {
-                    className: classes.table,
-                    "aria-label": caption,
-                    children: [
-                        caption && /*#__PURE__*/ jsx("caption", {
-                            className: classes.caption,
-                            children: caption
-                        }),
-                        /*#__PURE__*/ jsx("thead", {
-                            className: headerClasses,
-                            style: theadStyle,
-                            children: /*#__PURE__*/ jsx("tr", {
-                                children: columns.map((column)=>/*#__PURE__*/ jsx("th", {
-                                        style: {
-                                            width: column.width
-                                        },
-                                        className: clsx("px-4 py-3 font-semibold", column.className),
-                                        children: column.header
-                                    }, column.id))
-                            })
-                        }),
-                        /*#__PURE__*/ jsx("tbody", {
-                            style: tbodyStyle,
-                            children: virtualItems.map((virtualRow)=>{
-                                const isActive = activeRowIndex === virtualRow.index;
-                                return /*#__PURE__*/ jsx("tr", {
-                                    ref: measureElement,
-                                    "data-index": virtualRow.index,
-                                    onClick: onRowClick ? ()=>onRowClick(virtualRow.data, virtualRow.index) : undefined,
-                                    className: clsx("absolute flex w-full", {
-                                        "cursor-pointer": !!onRowClick,
-                                        "bg-action-dark/10 dark:bg-action-light/10": isActive
-                                    }),
-                                    style: {
-                                        height: `${virtualRow.size}px`,
-                                        transform: `translateY(${virtualRow.start}px)`
-                                    },
-                                    children: columns.map((column)=>/*#__PURE__*/ jsx("td", {
-                                            className: clsx(compact ? "px-2 py-1" : "px-4 py-3", column.className),
-                                            style: {
-                                                width: column.width
-                                            },
-                                            children: column.cell(virtualRow.data, virtualRow.index)
-                                        }, column.id))
-                                }, virtualRow.key);
-                            })
-                        })
-                    ]
-                })
-            })
-        })
-    });
-}
-
-export { VirtualDataGrid };

package/dist/DataGridVirtual/index.d.ts

@@ -1,6 +0,0 @@
-export type { VirtualItem, Virtualizer } from "@tanstack/react-virtual";
-export { useVirtualizer, useWindowVirtualizer } from "@tanstack/react-virtual";
-export type { UseVirtualDataGridOptions, UseVirtualDataGridReturn, } from "./useVirtualDataGrid";
-export { useVirtualDataGrid } from "./useVirtualDataGrid";
-export type { VirtualDataGridColumn, VirtualDataGridProps, } from "./VirtualDataGrid";
-export { VirtualDataGrid } from "./VirtualDataGrid";

package/dist/DataGridVirtual/index.js

@@ -1,22 +0,0 @@
-/*!
-  @versini/ui-datagrid v0.1.0
-  © 2026 gizmette.com
-*/
-
-import { useVirtualizer, useWindowVirtualizer } from "@tanstack/react-virtual";
-import { useVirtualDataGrid } from "./useVirtualDataGrid.js";
-import { VirtualDataGrid } from "./VirtualDataGrid.js";
-
-;// CONCATENATED MODULE: external "@tanstack/react-virtual"
-
-;// CONCATENATED MODULE: external "./useVirtualDataGrid.js"
-
-;// CONCATENATED MODULE: external "./VirtualDataGrid.js"
-
-;// CONCATENATED MODULE: ./src/DataGridVirtual/index.ts
-// Re-export from @tanstack/react-virtual for convenience.
-
-
-
-
-export { VirtualDataGrid, useVirtualDataGrid, useVirtualizer, useWindowVirtualizer };

package/dist/DataGridVirtual/useVirtualDataGrid.d.ts

@@ -1,112 +0,0 @@
-import { type Virtualizer } from "@tanstack/react-virtual";
-export type UseVirtualDataGridOptions<T = unknown> = {
-    /**
-     * Array of data items.
-     */
-    data: T[];
-    /**
-     * Estimated height of each row in pixels.
-     * @default 40
-     */
-    estimateSize?: number | ((index: number) => number);
-    /**
-     * Number of rows to render above/below the visible area.
-     * @default 5
-     */
-    overscan?: number;
-    /**
-     * Function to get a unique key for each item.
-     */
-    getItemKey: (index: number) => string | number;
-    /**
-     * Whether virtualization is enabled.
-     * @default true
-     */
-    enabled?: boolean;
-    /**
-     * Whether to use React's flushSync for synchronous updates. Set to false for
-     * React 19 compatibility.
-     * @default true
-     */
-    useFlushSync?: boolean;
-};
-export type UseVirtualDataGridReturn<T = unknown> = {
-    /**
-     * Ref to attach to the scroll container.
-     */
-    scrollContainerRef: React.RefObject<HTMLDivElement | null>;
-    /**
-     * Total height of all rows (for container sizing).
-     */
-    totalSize: number;
-    /**
-     * Virtual items to render.
-     */
-    virtualItems: {
-        index: number;
-        key: string | number | bigint;
-        size: number;
-        start: number;
-        data: T;
-    }[];
-    /**
-     * Scroll to a specific row index.
-     */
-    scrollToIndex: (index: number, options?: {
-        align?: "start" | "center" | "end" | "auto";
-        behavior?: "auto" | "smooth";
-    }) => void;
-    /**
-     * Whether the list is currently being scrolled.
-     */
-    isScrolling: boolean;
-    /**
-     * The virtualizer instance for advanced usage.
-     */
-    virtualizer: Virtualizer<HTMLDivElement, Element>;
-    /**
-     * Measure a row element (for dynamic sizing).
-     */
-    measureElement: (element: Element | null) => void;
-};
-/**
- * Hook for virtualizing a data grid with TanStack Virtual.
- *
- * @example
- * ```tsx
- * const {
- *   scrollContainerRef,
- *   totalSize,
- *   virtualItems,
- *   scrollToIndex,
- * } = useVirtualDataGrid({
- *   data: items,
- *   estimateSize: 48,
- *   overscan: 10,
- * });
- *
- * return (
- *   <div ref={scrollContainerRef} style={{ height: '500px', overflow: 'auto' }}>
- *     <div style={{ height: totalSize }}>
- *       <table>
- *         <tbody>
- *           {virtualItems.map((virtualRow) => (
- *             <tr
- *               key={virtualRow.key}
- *               style={{
- *                 height: virtualRow.size,
- *                 transform: `translateY(${virtualRow.start}px)`,
- *               }}
- *             >
- *               {renderCells(virtualRow.data)}
- *             </tr>
- *           ))}
- *         </tbody>
- *       </table>
- *     </div>
- *   </div>
- * );
- * ```
- *
- */
-export declare function useVirtualDataGrid<T>({ data, estimateSize, overscan, getItemKey, enabled, useFlushSync, }: UseVirtualDataGridOptions<T>): UseVirtualDataGridReturn<T>;

package/dist/DataGridVirtual/useVirtualDataGrid.js

@@ -1,89 +0,0 @@
-/*!
-  @versini/ui-datagrid v0.1.0
-  © 2026 gizmette.com
-*/
-
-import { useVirtualizer } from "@tanstack/react-virtual";
-import { useCallback, useRef } from "react";
-
-;// CONCATENATED MODULE: external "@tanstack/react-virtual"
-
-;// CONCATENATED MODULE: external "react"
-
-;// CONCATENATED MODULE: ./src/DataGridVirtual/useVirtualDataGrid.ts
-
-
-const DEFAULT_ESTIMATE_SIZE = 40;
-const DEFAULT_OVERSCAN = 5;
-/**
- * Hook for virtualizing a data grid with TanStack Virtual.
- *
- * @example
- * ```tsx
- * const {
- *   scrollContainerRef,
- *   totalSize,
- *   virtualItems,
- *   scrollToIndex,
- * } = useVirtualDataGrid({
- *   data: items,
- *   estimateSize: 48,
- *   overscan: 10,
- * });
- *
- * return (
- *   <div ref={scrollContainerRef} style={{ height: '500px', overflow: 'auto' }}>
- *     <div style={{ height: totalSize }}>
- *       <table>
- *         <tbody>
- *           {virtualItems.map((virtualRow) => (
- *             <tr
- *               key={virtualRow.key}
- *               style={{
- *                 height: virtualRow.size,
- *                 transform: `translateY(${virtualRow.start}px)`,
- *               }}
- *             >
- *               {renderCells(virtualRow.data)}
- *             </tr>
- *           ))}
- *         </tbody>
- *       </table>
- *     </div>
- *   </div>
- * );
- * ```
- *
- */ function useVirtualDataGrid({ data, estimateSize = DEFAULT_ESTIMATE_SIZE, overscan = DEFAULT_OVERSCAN, getItemKey, enabled = true, useFlushSync = true }) {
-    const scrollContainerRef = useRef(null);
-    const estimateSizeFn = useCallback((index)=>typeof estimateSize === "function" ? estimateSize(index) : estimateSize, [
-        estimateSize
-    ]);
-    const virtualizer = useVirtualizer({
-        count: data.length,
-        getScrollElement: ()=>scrollContainerRef.current,
-        estimateSize: estimateSizeFn,
-        overscan,
-        getItemKey,
-        enabled,
-        useFlushSync
-    });
-    const virtualItems = virtualizer.getVirtualItems().map((virtualItem)=>({
-            index: virtualItem.index,
-            key: virtualItem.key,
-            size: virtualItem.size,
-            start: virtualItem.start,
-            data: data[virtualItem.index]
-        }));
-    return {
-        scrollContainerRef,
-        totalSize: virtualizer.getTotalSize(),
-        virtualItems,
-        scrollToIndex: virtualizer.scrollToIndex,
-        isScrolling: virtualizer.isScrolling,
-        virtualizer,
-        measureElement: virtualizer.measureElement
-    };
-}
-
-export { useVirtualDataGrid };