@versini/ui-datagrid 0.3.8 → 0.4.1

package/dist/DataGridBody/getBodyClass.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Get the CSS class for a DataGrid body element. When columns are provided, use
+ * display:contents so the body doesn't interfere with the grid flow. Rows will
+ * use subgrid.
+ *
+ * @param hasColumns - Whether the DataGrid has columns defined
+ * @param className - Additional class name to merge
+ *
+ */
+export declare function getBodyClass(hasColumns: boolean | undefined, className?: string): string;

package/dist/DataGridBody/getBodyClass.js

@@ -0,0 +1,24 @@
+/*!
+  @versini/ui-datagrid v0.4.1
+  © 2026 gizmette.com
+*/
+
+import clsx from "clsx";
+
+;// CONCATENATED MODULE: external "clsx"
+
+;// CONCATENATED MODULE: ./src/DataGridBody/getBodyClass.ts
+
+/**
+ * Get the CSS class for a DataGrid body element. When columns are provided, use
+ * display:contents so the body doesn't interfere with the grid flow. Rows will
+ * use subgrid.
+ *
+ * @param hasColumns - Whether the DataGrid has columns defined
+ * @param className - Additional class name to merge
+ *
+ */ function getBodyClass(hasColumns, className) {
+    return hasColumns ? clsx("contents", className) : clsx("flex flex-col", className);
+}
+
+export { getBodyClass };

package/dist/DataGridBody/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.3.8
+  @versini/ui-datagrid v0.4.1
   © 2026 gizmette.com
 */
 

package/dist/DataGridBody/useColumnMeasurement.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Hook to measure column widths from the first body row's cells. This is needed
+ * because sticky header/footer are absolutely positioned and can't use CSS
+ * subgrid. We measure the body cells (which ARE in the grid flow) and report
+ * the widths so header/footer can use the same pixel values.
+ *
+ * @param bodyRef - Ref to the body element containing the rows
+ * @param contentDependency - Dependency that changes when content changes (children or renderedContent)
+ *
+ */
+export declare function useColumnMeasurement(bodyRef: React.RefObject<HTMLDivElement | null>, contentDependency: unknown): void;

package/dist/DataGridBody/useColumnMeasurement.js

@@ -0,0 +1,68 @@
+/*!
+  @versini/ui-datagrid v0.4.1
+  © 2026 gizmette.com
+*/
+
+import { useContext, useLayoutEffect } from "react";
+import { DataGridContext } from "../DataGrid/DataGridContext.js";
+
+;// CONCATENATED MODULE: external "react"
+
+;// CONCATENATED MODULE: external "../DataGrid/DataGridContext.js"
+
+;// CONCATENATED MODULE: ./src/DataGridBody/useColumnMeasurement.ts
+
+
+/**
+ * Hook to measure column widths from the first body row's cells. This is needed
+ * because sticky header/footer are absolutely positioned and can't use CSS
+ * subgrid. We measure the body cells (which ARE in the grid flow) and report
+ * the widths so header/footer can use the same pixel values.
+ *
+ * @param bodyRef - Ref to the body element containing the rows
+ * @param contentDependency - Dependency that changes when content changes (children or renderedContent)
+ *
+ */ function useColumnMeasurement(bodyRef, contentDependency) {
+    const ctx = useContext(DataGridContext);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: contentDependency triggers remeasurement when rows change
+    useLayoutEffect(()=>{
+        const element = bodyRef.current;
+        const needsMeasurement = ctx.columns && (ctx.stickyHeader || ctx.stickyFooter);
+        if (!element || !needsMeasurement || !ctx.setMeasuredColumnWidths) {
+            return;
+        }
+        const firstRow = element.querySelector('[role="row"]');
+        if (!firstRow) {
+            return;
+        }
+        const cells = firstRow.querySelectorAll('[role="cell"], [role="columnheader"], [role="gridcell"]');
+        if (cells.length === 0) {
+            return;
+        }
+        const measureColumns = ()=>{
+            const widths = Array.from(cells).map((cell)=>cell.getBoundingClientRect().width);
+            ctx.setMeasuredColumnWidths?.(widths);
+        };
+        // Initial measurement.
+        measureColumns();
+        // Set up ResizeObserver to re-measure when cells resize.
+        const observer = new ResizeObserver(()=>{
+            measureColumns();
+        });
+        // Observe the body element for any size changes.
+        observer.observe(element);
+        // Also observe the first row's cells directly for more accurate updates.
+        for (const cell of cells){
+            observer.observe(cell);
+        }
+        return ()=>observer.disconnect();
+    }, [
+        ctx.columns,
+        ctx.stickyHeader,
+        ctx.stickyFooter,
+        ctx.setMeasuredColumnWidths,
+        contentDependency
+    ]);
+}
+
+export { useColumnMeasurement };

package/dist/DataGridCell/DataGridCell.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.3.8
+  @versini/ui-datagrid v0.4.1
   © 2026 gizmette.com
 */
 

package/dist/DataGridCell/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.3.8
+  @versini/ui-datagrid v0.4.1
   © 2026 gizmette.com
 */
 

package/dist/DataGridCellSort/DataGridCellSort.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.3.8
+  @versini/ui-datagrid v0.4.1
   © 2026 gizmette.com
 */
 

package/dist/DataGridCellSort/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.3.8
+  @versini/ui-datagrid v0.4.1
   © 2026 gizmette.com
 */
 

package/dist/DataGridConstants/DataGridConstants.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.3.8
+  @versini/ui-datagrid v0.4.1
   © 2026 gizmette.com
 */
 

package/dist/DataGridConstants/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.3.8
+  @versini/ui-datagrid v0.4.1
   © 2026 gizmette.com
 */
 

package/dist/DataGridFooter/DataGridFooter.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.3.8
+  @versini/ui-datagrid v0.4.1
   © 2026 gizmette.com
 */
 

package/dist/DataGridFooter/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.3.8
+  @versini/ui-datagrid v0.4.1
   © 2026 gizmette.com
 */
 

package/dist/DataGridHeader/DataGridHeader.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.3.8
+  @versini/ui-datagrid v0.4.1
   © 2026 gizmette.com
 */
 

package/dist/DataGridHeader/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.3.8
+  @versini/ui-datagrid v0.4.1
   © 2026 gizmette.com
 */
 

package/dist/DataGridInfinite/DataGridInfiniteBody.d.ts

@@ -0,0 +1,52 @@
+export type DataGridInfiniteBodyProps<T> = {
+    /**
+     * The full dataset to render progressively.
+     */
+    data: T[];
+    /**
+     * Render function for each row. Should return a DataGridRow element. The
+     * consumer is responsible for providing the key prop on the returned element.
+     */
+    children: (item: T, index: number) => React.ReactNode;
+    /**
+     * Number of items to show initially and to add on each scroll.
+     * @default 20
+     */
+    batchSize?: number;
+    /**
+     * How many items to keep below the marker for seamless scrolling. The marker
+     * is placed `threshold` items before the end of visible items.
+     * @default 5
+     */
+    threshold?: number;
+    /**
+     * IntersectionObserver root margin.
+     * @default "20px"
+     */
+    rootMargin?: string;
+    /**
+     * Callback when visible count changes. Useful for displaying count in header.
+     */
+    onVisibleCountChange?: (visibleCount: number, totalItems: number) => void;
+    /**
+     * CSS class to apply to the body.
+     */
+    className?: string;
+};
+/**
+ * Ref handle for DataGridInfiniteBody, exposing imperative methods.
+ */
+export type DataGridInfiniteBodyRef = {
+    /**
+     * Scroll to a specific row index with smooth animation. If the row is not yet
+     * visible, it will expand the visible count first.
+     * @param index - The index of the row to scroll to
+     */
+    scrollToIndex: (index: number) => void;
+};
+/**
+ * DataGridInfiniteBody with forwardRef support for imperative methods.
+ */
+export declare const DataGridInfiniteBody: <T>(props: DataGridInfiniteBodyProps<T> & {
+    ref?: React.ForwardedRef<DataGridInfiniteBodyRef>;
+}) => React.ReactElement;

package/dist/DataGridInfinite/DataGridInfiniteBody.js

@@ -0,0 +1,335 @@
+/*!
+  @versini/ui-datagrid v0.4.1
+  © 2026 gizmette.com
+*/
+
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { DataGridContext } from "../DataGrid/DataGridContext.js";
+import { getBodyClass } from "../DataGridBody/getBodyClass.js";
+import { useColumnMeasurement } from "../DataGridBody/useColumnMeasurement.js";
+import { CellWrapper } from "../DataGridConstants/index.js";
+
+;// CONCATENATED MODULE: external "react/jsx-runtime"
+
+;// CONCATENATED MODULE: external "react"
+
+;// CONCATENATED MODULE: external "../DataGrid/DataGridContext.js"
+
+;// CONCATENATED MODULE: external "../DataGridBody/getBodyClass.js"
+
+;// CONCATENATED MODULE: external "../DataGridBody/useColumnMeasurement.js"
+
+;// CONCATENATED MODULE: external "../DataGridConstants/index.js"
+
+;// CONCATENATED MODULE: ./src/DataGridInfinite/DataGridInfiniteBody.tsx
+
+
+
+
+
+
+const DEFAULT_BATCH_SIZE = 20;
+const DEFAULT_THRESHOLD = 5;
+const DEFAULT_ROOT_MARGIN = "20px";
+const ROW_INDEX_DATA_ATTR = "data-row-index";
+/**
+ * Finds the nearest scrollable ancestor of an element. Returns null if no
+ * scrollable ancestor is found (uses viewport).
+ */ function findScrollableAncestor(element) {
+    let parent = element.parentElement;
+    while(parent){
+        const style = getComputedStyle(parent);
+        const overflowY = style.overflowY;
+        if (overflowY === "auto" || overflowY === "scroll") {
+            return parent;
+        }
+        parent = parent.parentElement;
+    }
+    return null;
+}
+/**
+ * A DataGridBody variant that handles infinite scroll internally.
+ *
+ * This component manages all the complexity of infinite scroll:
+ * - Progressive data loading with IntersectionObserver
+ * - Correct marker placement for seamless scrolling
+ * - Automatic data slicing and memoization
+ * - Programmatic scroll-to-row with smooth animation
+ *
+ * @example
+ * ```tsx
+ * const infiniteBodyRef = useRef<DataGridInfiniteBodyRef>(null);
+ *
+ * // Jump to a specific row
+ * const handleJumpToRow = () => {
+ *   infiniteBodyRef.current?.scrollToIndex(134);
+ * };
+ *
+ * <DataGrid maxHeight="400px" stickyHeader>
+ *   <DataGridHeader caption={`Showing ${visibleCount} of ${data.length}`}>
+ *     <DataGridRow>
+ *       <DataGridCell>Name</DataGridCell>
+ *       <DataGridCell>Role</DataGridCell>
+ *     </DataGridRow>
+ *   </DataGridHeader>
+ *
+ *   <DataGridInfiniteBody
+ *     ref={infiniteBodyRef}
+ *     data={largeData}
+ *     batchSize={25}
+ *     onVisibleCountChange={(count) => setVisibleCount(count)}
+ *   >
+ *     {(row) => (
+ *       <DataGridRow key={row.id}>
+ *         <DataGridCell>{row.name}</DataGridCell>
+ *         <DataGridCell>{row.role}</DataGridCell>
+ *       </DataGridRow>
+ *     )}
+ *   </DataGridInfiniteBody>
+ * </DataGrid>
+ * ```
+ *
+ */ function DataGridInfiniteBodyInner({ data, children: renderRow, batchSize = DEFAULT_BATCH_SIZE, threshold = DEFAULT_THRESHOLD, rootMargin = DEFAULT_ROOT_MARGIN, onVisibleCountChange, className }, ref) {
+    const ctx = useContext(DataGridContext);
+    const bodyRef = useRef(null);
+    const observerRef = useRef(null);
+    const pendingScrollRef = useRef(null);
+    const totalItems = data.length;
+    const initialCount = Math.min(batchSize + threshold, totalItems);
+    const [visibleCount, setVisibleCount] = useState(initialCount);
+    const hasMore = visibleCount < totalItems;
+    /**
+	 * Scroll to a row by its index. Called after visibleCount updates.
+	 * NOTE: We query for the wrapper with data-row-index, then scroll to the
+	 * actual row element inside it (since the wrapper has display:contents and
+	 * doesn't have a bounding box).
+	 */ const scrollToRowElement = useCallback((index)=>{
+        const body = bodyRef.current;
+        if (!body) {
+            return;
+        }
+        const wrapper = body.querySelector(`[${ROW_INDEX_DATA_ATTR}="${index}"]`);
+        if (wrapper) {
+            // The wrapper has display:contents, so scroll to the actual row inside.
+            const row = wrapper.querySelector('[role="row"]');
+            if (row) {
+                row.scrollIntoView({
+                    behavior: "smooth",
+                    block: "center"
+                });
+            }
+        }
+    }, []);
+    /**
+	 * Handle pending scroll after render (when visibleCount has been expanded).
+	 */ useEffect(()=>{
+        if (pendingScrollRef.current !== null) {
+            const targetIndex = pendingScrollRef.current;
+            // Only scroll if the target is now within visible range.
+            if (targetIndex < visibleCount) {
+                // Use requestAnimationFrame to ensure DOM has updated.
+                requestAnimationFrame(()=>{
+                    scrollToRowElement(targetIndex);
+                });
+                pendingScrollRef.current = null;
+            }
+        }
+    }, [
+        visibleCount,
+        scrollToRowElement
+    ]);
+    /**
+	 * Expose imperative methods via ref.
+	 */ useImperativeHandle(ref, ()=>({
+            scrollToIndex: (index)=>{
+                if (index < 0 || index >= totalItems) {
+                    console.warn(`scrollToIndex: index ${index} is out of bounds (0-${totalItems - 1})`);
+                    return;
+                }
+                // If the row is already visible, just scroll to it.
+                if (index < visibleCount) {
+                    scrollToRowElement(index);
+                    return;
+                }
+                /**
+				 * Otherwise, expand visible count to include the target row. Add some
+				 * buffer so the row isn't at the very edge.
+				 */ const targetCount = Math.min(index + threshold + 1, totalItems);
+                pendingScrollRef.current = index;
+                setVisibleCount(targetCount);
+            }
+        }), [
+        totalItems,
+        visibleCount,
+        threshold,
+        scrollToRowElement
+    ]);
+    // Reset visible count when data changes significantly.
+    useEffect(()=>{
+        setVisibleCount(Math.min(batchSize + threshold, totalItems));
+    }, [
+        totalItems,
+        batchSize,
+        threshold
+    ]);
+    // Notify parent of visible count changes.
+    useEffect(()=>{
+        onVisibleCountChange?.(visibleCount, totalItems);
+    }, [
+        visibleCount,
+        totalItems,
+        onVisibleCountChange
+    ]);
+    /**
+	 * IntersectionObserver callback - triggered when marker becomes visible. Loads
+	 * the next batch of items.
+	 */ const handleIntersection = useCallback((entries)=>{
+        const target = entries[0];
+        if (target?.isIntersecting) {
+            setVisibleCount((prev)=>Math.min(prev + batchSize, totalItems));
+        }
+    }, [
+        batchSize,
+        totalItems
+    ]);
+    /**
+	 * Callback ref for the marker element. Sets up IntersectionObserver when
+	 * marker mounts, cleans up when it unmounts. This pattern ensures the observer
+	 * always watches the current marker element, even when visibleCount changes
+	 * and a new marker is created at a different position.
+	 */ const markerRefCallback = useCallback((node)=>{
+        // Clean up previous observer.
+        if (observerRef.current) {
+            observerRef.current.disconnect();
+            observerRef.current = null;
+        }
+        // Set up new observer if we have a marker and more items to load.
+        if (node && hasMore) {
+            const root = findScrollableAncestor(node);
+            observerRef.current = new IntersectionObserver(handleIntersection, {
+                root,
+                rootMargin
+            });
+            observerRef.current.observe(node);
+        }
+    }, [
+        hasMore,
+        handleIntersection,
+        rootMargin
+    ]);
+    // Clean up observer on unmount.
+    useEffect(()=>{
+        return ()=>{
+            observerRef.current?.disconnect();
+        };
+    }, []);
+    /**
+	 * Calculate marker position. The marker should be placed `threshold` items
+	 * from the end of visible items. This allows seamless scrolling - new items
+	 * load while user scrolls through the remaining `threshold` items.
+	 */ const markerPosition = useMemo(()=>{
+        if (!hasMore) {
+            return -1; // No marker needed when all items are loaded.
+        }
+        // Place marker at visibleCount - threshold, but ensure it's at least 0.
+        return Math.max(0, visibleCount - threshold);
+    }, [
+        hasMore,
+        visibleCount,
+        threshold
+    ]);
+    /**
+	 * Context value for body rows (shared base, rowIndex added per-row).
+	 */ const bodyContextBase = useMemo(()=>({
+            ...ctx,
+            cellWrapper: CellWrapper.BODY
+        }), [
+        ctx
+    ]);
+    /**
+	 * Render items with marker at the correct position. Each row gets a
+	 * data-row-index attribute for scrollToIndex functionality. Each row is
+	 * wrapped with a context provider that includes the row index for proper
+	 * odd/even styling (CSS :nth-child doesn't work with wrappers).
+	 */ const renderedContent = useMemo(()=>{
+        const result = [];
+        // Determine the actual last visible index (for border styling).
+        const lastVisibleIndex = Math.min(visibleCount, totalItems) - 1;
+        for(let i = 0; i < visibleCount && i < totalItems; i++){
+            // Insert marker at the calculated position.
+            if (i === markerPosition) {
+                result.push(/*#__PURE__*/ jsx("div", {
+                    ref: markerRefCallback,
+                    "aria-hidden": "true",
+                    style: {
+                        height: "1px",
+                        background: "transparent"
+                    }
+                }, "__infinite-scroll-marker-inline__"));
+            }
+            /**
+			 * Determine if this is the last row (only when all data is loaded). If
+			 * hasMore is true, no row is "last" since more will be loaded.
+			 */ const isLastRow = !hasMore && i === lastVisibleIndex;
+            /**
+			 * Wrap row with context provider that includes rowIndex for proper odd/even
+			 * styling. Using display:contents so the wrapper doesn't affect grid layout.
+			 */ result.push(/*#__PURE__*/ jsx(DataGridContext.Provider, {
+                value: {
+                    ...bodyContextBase,
+                    rowIndex: i,
+                    isLastRow
+                },
+                children: /*#__PURE__*/ jsx("div", {
+                    [ROW_INDEX_DATA_ATTR]: i,
+                    style: {
+                        display: "contents"
+                    },
+                    children: renderRow(data[i], i)
+                })
+            }, i));
+        }
+        // If marker position is at the end (edge case with small data).
+        if (markerPosition === visibleCount && hasMore) {
+            result.push(/*#__PURE__*/ jsx("div", {
+                ref: markerRefCallback,
+                "aria-hidden": "true",
+                style: {
+                    height: "1px",
+                    background: "transparent"
+                }
+            }, "__infinite-scroll-marker-end__"));
+        }
+        return result;
+    }, [
+        data,
+        visibleCount,
+        totalItems,
+        markerPosition,
+        hasMore,
+        renderRow,
+        markerRefCallback,
+        bodyContextBase
+    ]);
+    // Measure column widths for sticky header/footer sync.
+    useColumnMeasurement(bodyRef, renderedContent);
+    const bodyClass = getBodyClass(Boolean(ctx.columns), className);
+    return /*#__PURE__*/ jsx(DataGridContext.Provider, {
+        value: {
+            ...ctx,
+            cellWrapper: CellWrapper.BODY
+        },
+        children: /*#__PURE__*/ jsx("div", {
+            ref: bodyRef,
+            role: "rowgroup",
+            className: bodyClass,
+            children: renderedContent
+        })
+    });
+}
+/**
+ * DataGridInfiniteBody with forwardRef support for imperative methods.
+ */ const DataGridInfiniteBody = /*#__PURE__*/ forwardRef(DataGridInfiniteBodyInner);
+
+export { DataGridInfiniteBody };

package/dist/DataGridInfinite/index.d.ts

@@ -1,4 +1,2 @@
-export type { InfiniteScrollMarkerProps } from "./InfiniteScrollMarker";
-export { InfiniteScrollMarker } from "./InfiniteScrollMarker";
-export type { UseInfiniteScrollOptions, UseInfiniteScrollReturn, } from "./useInfiniteScroll";
-export { useInfiniteScroll } from "./useInfiniteScroll";
+export type { DataGridInfiniteBodyProps, DataGridInfiniteBodyRef, } from "./DataGridInfiniteBody";
+export { DataGridInfiniteBody } from "./DataGridInfiniteBody";

package/dist/DataGridInfinite/index.js

@@ -1,17 +1,13 @@
 /*!
-  @versini/ui-datagrid v0.3.8
+  @versini/ui-datagrid v0.4.1
   © 2026 gizmette.com
 */
 
-import { InfiniteScrollMarker } from "./InfiniteScrollMarker.js";
-import { useInfiniteScroll } from "./useInfiniteScroll.js";
+import { DataGridInfiniteBody } from "./DataGridInfiniteBody.js";
 
-;// CONCATENATED MODULE: external "./InfiniteScrollMarker.js"
-
-;// CONCATENATED MODULE: external "./useInfiniteScroll.js"
+;// CONCATENATED MODULE: external "./DataGridInfiniteBody.js"
 
 ;// CONCATENATED MODULE: ./src/DataGridInfinite/index.ts
 
 
-
-export { InfiniteScrollMarker, useInfiniteScroll };
+export { DataGridInfiniteBody };

package/dist/DataGridRow/DataGridRow.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.3.8
+  @versini/ui-datagrid v0.4.1
   © 2026 gizmette.com
 */
 
@@ -31,7 +31,7 @@ import { getRowClasses } from "../utilities/classes.js";
     // Count the number of direct children to determine column count.
     const columnCount = react.Children.count(children);
     return /*#__PURE__*/ jsx(DataGridContext.Consumer, {
-        children: ({ mode, cellWrapper, stickyHeader, stickyFooter, columns, measuredColumnWidths })=>{
+        children: ({ mode, cellWrapper, stickyHeader, stickyFooter, columns, measuredColumnWidths, rowIndex, isLastRow })=>{
             /**
 				 * Determine if this row is inside a sticky header/footer. Sticky elements
 				 * are absolutely positioned and outside the main grid flow, so they can't
@@ -88,7 +88,9 @@ import { getRowClasses } from "../utilities/classes.js";
                 className: getRowClasses({
                     mode,
                     className,
-                    cellWrapper
+                    cellWrapper,
+                    rowIndex,
+                    isLastRow
                 }),
                 style: {
                     ...rowStyle,

package/dist/DataGridRow/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.3.8
+  @versini/ui-datagrid v0.4.1
   © 2026 gizmette.com
 */
 

package/dist/DataGridSorting/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.3.8
+  @versini/ui-datagrid v0.4.1
   © 2026 gizmette.com
 */
 

package/dist/DataGridSorting/sortingUtils.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.3.8
+  @versini/ui-datagrid v0.4.1
   © 2026 gizmette.com
 */