@versini/ui-datagrid 0.3.8 → 0.4.1

package/dist/utilities/classes.d.ts

@@ -124,12 +124,16 @@ export declare const getFooterClasses: ({ className, stickyFooter, mode, blurEff
     stickyFooter?: boolean;
 }) => string;
 /**
- * Generates classes for DataGridRow.
+ * Generates classes for DataGridRow. When rowIndex is provided (e.g., from
+ * DataGridInfiniteBody), explicit odd/even classes are used instead of CSS
+ * :nth-child selectors, which don't work with wrapper elements.
  */
-export declare const getRowClasses: ({ mode, className, cellWrapper, }: {
+export declare const getRowClasses: ({ mode, className, cellWrapper, rowIndex, isLastRow, }: {
     mode: ThemeMode;
     cellWrapper?: CellWrapperType;
     className?: string;
+    rowIndex?: number;
+    isLastRow?: boolean;
 }) => string;
 /**
  * Generates classes for DataGridCell.

package/dist/utilities/classes.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.3.8
+  @versini/ui-datagrid v0.4.1
   © 2026 gizmette.com
 */
 
@@ -181,22 +181,49 @@ import { BlurEffects, CellWrapper } from "../DataGridConstants/DataGridConstants
     }), className);
 };
 /**
- * Generates classes for DataGridRow.
- */ const getRowClasses = ({ mode, className, cellWrapper })=>{
+ * Generates classes for DataGridRow. When rowIndex is provided (e.g., from
+ * DataGridInfiniteBody), explicit odd/even classes are used instead of CSS
+ * :nth-child selectors, which don't work with wrapper elements.
+ */ const getRowClasses = ({ mode, className, cellWrapper, rowIndex, isLastRow })=>{
     const layoutClass = "group grid items-center";
     if (cellWrapper === CellWrapper.HEADER || cellWrapper === CellWrapper.FOOTER) {
         return clsx(layoutClass, className);
     }
-    return clsx(layoutClass, "border-b last:border-0", getBorderClasses({
+    /**
+	 * When rowIndex is provided, use explicit classes instead of CSS :nth-child
+	 * selectors. CSS :nth-child doesn't work correctly when rows are wrapped
+	 * (e.g., in DataGridInfiniteBody).
+	 */ const hasExplicitIndex = rowIndex !== undefined;
+    const isOdd = hasExplicitIndex && rowIndex % 2 === 0; // 0-based index: 0,2,4 are visually "odd" rows (1st, 3rd, 5th)
+    const isEven = hasExplicitIndex && rowIndex % 2 === 1;
+    /**
+	 * Border classes: use explicit border-0 for last row when isLastRow is
+	 * provided, otherwise fall back to CSS :last-child selector.
+	 */ const borderClasses = isLastRow !== undefined ? isLastRow ? "border-b border-b-transparent" // Last row: transparent border to maintain spacing
+     : "border-b" : "border-b last:border-0"; // Fallback to CSS :last-child
+    return clsx(layoutClass, borderClasses, getBorderClasses({
         mode
     }), {
-        "odd:bg-table-dark-odd even:bg-table-dark-even": mode === "dark",
+        // Explicit odd/even when rowIndex is provided.
+        "bg-table-dark-odd": hasExplicitIndex && isOdd && mode === "dark",
+        "bg-table-dark-even": hasExplicitIndex && isEven && mode === "dark",
+        "bg-table-light-odd": hasExplicitIndex && isOdd && mode === "light",
+        "bg-table-light-even": hasExplicitIndex && isEven && mode === "light",
+        // System mode with explicit index.
+        "bg-table-dark-odd dark:bg-table-light-odd": hasExplicitIndex && isOdd && mode === "system",
+        "bg-table-dark-even dark:bg-table-light-even": hasExplicitIndex && isEven && mode === "system",
+        // Alt-system mode with explicit index.
+        "bg-table-light-odd dark:bg-table-dark-odd": hasExplicitIndex && isOdd && mode === "alt-system",
+        "bg-table-light-even dark:bg-table-dark-even": hasExplicitIndex && isEven && mode === "alt-system",
+        // CSS :nth-child selectors (original behavior when rowIndex not provided).
+        "odd:bg-table-dark-odd even:bg-table-dark-even": !hasExplicitIndex && mode === "dark",
+        "odd:bg-table-light-odd even:bg-table-light-even": !hasExplicitIndex && mode === "light",
+        "odd:bg-table-dark-odd even:bg-table-dark-even dark:odd:bg-table-light-odd dark:even:bg-table-light-even": !hasExplicitIndex && mode === "system",
+        "odd:bg-table-light-odd even:bg-table-light-even dark:odd:bg-table-dark-odd dark:even:bg-table-dark-even": !hasExplicitIndex && mode === "alt-system",
+        // Hover effects (same for both modes).
         "hover:bg-table-dark-hover": mode === "dark",
-        "odd:bg-table-light-odd even:bg-table-light-even": mode === "light",
         "hover:bg-table-light-hover": mode === "light",
-        "odd:bg-table-dark-odd even:bg-table-dark-even dark:odd:bg-table-light-odd dark:even:bg-table-light-even": mode === "system",
         "hover:bg-table-dark-hover dark:hover:bg-table-light-hover": mode === "system",
-        "odd:bg-table-light-odd even:bg-table-light-even dark:odd:bg-table-dark-odd dark:even:bg-table-dark-even": mode === "alt-system",
         "hover:bg-table-light-hover dark:hover:bg-table-dark-hover": mode === "alt-system"
     }, className);
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-datagrid",
-	"version": "0.3.8",
+	"version": "0.4.1",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -94,5 +94,5 @@
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "b409727fc1e7004c9196bd9beb7ac6e064662d84"
+	"gitHead": "77685390e91706f56ebacec061f047f85e6e2982"
 }

package/dist/DataGridInfinite/InfiniteScrollMarker.d.ts

@@ -1,31 +0,0 @@
-export type InfiniteScrollMarkerProps = {
-    /**
-     * Custom class name for the row.
-     */
-    className?: string;
-    /**
-     * Whether to show the marker (for debugging). In production, the marker is
-     * invisible.
-     */
-    debug?: boolean;
-};
-/**
- * Invisible marker row for infinite scroll. Place this at the end of your
- * DataGridBody.
- *
- * @example
- * ```tsx
- * const { hasMore, markerRef } = useInfiniteScroll({ totalItems: data.length });
- *
- * return (
- *   <DataGridBody>
- *     {data.slice(0, visibleCount).map((item) => (
- *       <DataGridRow key={item.id}>...</DataGridRow>
- *     ))}
- *     {hasMore && <InfiniteScrollMarker ref={markerRef} />}
- *   </DataGridBody>
- * );
- * ```
- *
- */
-export declare const InfiniteScrollMarker: import("react").ForwardRefExoticComponent<InfiniteScrollMarkerProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/DataGridInfinite/InfiniteScrollMarker.js

@@ -1,54 +0,0 @@
-/*!
-  @versini/ui-datagrid v0.3.8
-  © 2026 gizmette.com
-*/
-
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-
-;// CONCATENATED MODULE: external "react/jsx-runtime"
-
-;// CONCATENATED MODULE: external "react"
-
-;// CONCATENATED MODULE: ./src/DataGridInfinite/InfiniteScrollMarker.tsx
-
-
-/**
- * Invisible marker row for infinite scroll. Place this at the end of your
- * DataGridBody.
- *
- * @example
- * ```tsx
- * const { hasMore, markerRef } = useInfiniteScroll({ totalItems: data.length });
- *
- * return (
- *   <DataGridBody>
- *     {data.slice(0, visibleCount).map((item) => (
- *       <DataGridRow key={item.id}>...</DataGridRow>
- *     ))}
- *     {hasMore && <InfiniteScrollMarker ref={markerRef} />}
- *   </DataGridBody>
- * );
- * ```
- *
- */ const InfiniteScrollMarker_InfiniteScrollMarker = /*#__PURE__*/ forwardRef(function InfiniteScrollMarker({ className, debug = false }, ref) {
-    return /*#__PURE__*/ jsx("div", {
-        ref: ref,
-        role: "row",
-        className: className,
-        "aria-hidden": "true",
-        style: {
-            height: debug ? "40px" : "1px",
-            background: debug ? "red" : "transparent"
-        },
-        children: /*#__PURE__*/ jsx("div", {
-            role: "gridcell",
-            style: {
-                padding: 0,
-                border: 0
-            }
-        })
-    });
-});
-
-export { InfiniteScrollMarker_InfiniteScrollMarker as InfiniteScrollMarker };

package/dist/DataGridInfinite/useInfiniteScroll.d.ts

@@ -1,92 +0,0 @@
-/**
- * Finds the nearest scrollable ancestor of an element. Returns null if no
- * scrollable ancestor is found (uses viewport).
- */
-export declare function findScrollableAncestor(element: HTMLElement): Element | null;
-export type UseInfiniteScrollOptions = {
-    /**
-     * Number of items to show initially and to add on each scroll.
-     * @default 20
-     */
-    batchSize?: number;
-    /**
-     * How many items before the end to trigger loading more.
-     * @default 5
-     */
-    threshold?: number;
-    /**
-     * IntersectionObserver root margin.
-     * @default "20px"
-     */
-    rootMargin?: string;
-    /**
-     * Total number of items in the dataset. Used to determine if more items can be
-     * loaded.
-     */
-    totalItems: number;
-    /**
-     * Initial number of visible items (optional). If not provided, uses batchSize.
-     * + threshold.
-     */
-    initialVisibleCount?: number;
-    /**
-     * Callback when more items are loaded.
-     */
-    onLoadMore?: (newVisibleCount: number) => void;
-    /**
-     * The scroll container element for IntersectionObserver root. Required when
-     * the DataGrid is inside a scrollable container (e.g., with maxHeight). Pass
-     * null to use the viewport as root.
-     */
-    scrollContainer?: Element | null;
-};
-export type UseInfiniteScrollReturn = {
-    /**
-     * Current number of visible items.
-     */
-    visibleCount: number;
-    /**
-     * Whether there are more items to load.
-     */
-    hasMore: boolean;
-    /**
-     * Callback ref to attach to the marker element.
-     */
-    markerRef: (node: HTMLElement | null) => void;
-    /**
-     * Reset visible count to initial value.
-     */
-    reset: () => void;
-    /**
-     * Manually set the visible count (useful for scroll-to-item).
-     */
-    setVisibleCount: React.Dispatch<React.SetStateAction<number>>;
-    /**
-     * Expand visible count to include a specific index.
-     */
-    expandToInclude: (index: number) => void;
-};
-/**
- * Hook for implementing infinite scroll with IntersectionObserver.
- *
- * @example
- * ```tsx
- * const { visibleCount, hasMore, markerRef } = useInfiniteScroll({
- *   totalItems: data.length,
- *   batchSize: 25,
- * });
- *
- * return (
- *   <DataGrid>
- *     <DataGridBody>
- *       {data.slice(0, visibleCount).map((item, index) => (
- *         <DataGridRow key={item.id}>...</DataGridRow>
- *       ))}
- *       {hasMore && <InfiniteScrollMarker ref={markerRef} />}
- *     </DataGridBody>
- *   </DataGrid>
- * );
- * ```
- *
- */
-export declare function useInfiniteScroll({ batchSize, threshold, rootMargin, totalItems, initialVisibleCount, onLoadMore, scrollContainer, }: UseInfiniteScrollOptions): UseInfiniteScrollReturn;

package/dist/DataGridInfinite/useInfiniteScroll.js

@@ -1,136 +0,0 @@
-/*!
-  @versini/ui-datagrid v0.3.8
-  © 2026 gizmette.com
-*/
-
-import { useCallback, useEffect, useRef, useState } from "react";
-
-;// CONCATENATED MODULE: external "react"
-
-;// CONCATENATED MODULE: ./src/DataGridInfinite/useInfiniteScroll.ts
-
-const DEFAULT_BATCH_SIZE = 20;
-const DEFAULT_THRESHOLD = 5;
-const DEFAULT_ROOT_MARGIN = "20px";
-/**
- * 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;
-}
-/**
- * Hook for implementing infinite scroll with IntersectionObserver.
- *
- * @example
- * ```tsx
- * const { visibleCount, hasMore, markerRef } = useInfiniteScroll({
- *   totalItems: data.length,
- *   batchSize: 25,
- * });
- *
- * return (
- *   <DataGrid>
- *     <DataGridBody>
- *       {data.slice(0, visibleCount).map((item, index) => (
- *         <DataGridRow key={item.id}>...</DataGridRow>
- *       ))}
- *       {hasMore && <InfiniteScrollMarker ref={markerRef} />}
- *     </DataGridBody>
- *   </DataGrid>
- * );
- * ```
- *
- */ function useInfiniteScroll({ batchSize = DEFAULT_BATCH_SIZE, threshold = DEFAULT_THRESHOLD, rootMargin = DEFAULT_ROOT_MARGIN, totalItems, initialVisibleCount, onLoadMore, scrollContainer }) {
-    const observerRef = useRef(null);
-    const initialCount = initialVisibleCount ?? batchSize + threshold;
-    const [visibleCount, setVisibleCount] = useState(Math.min(initialCount, totalItems));
-    const hasMore = visibleCount < totalItems;
-    /**
-	 * IntersectionObserver callback - triggered when marker becomes visible.
-	 */ const handleIntersection = useCallback((entries)=>{
-        const target = entries[0];
-        if (target?.isIntersecting) {
-            setVisibleCount((prev)=>{
-                const newCount = Math.min(prev + batchSize, totalItems);
-                if (onLoadMore && newCount > prev) {
-                    onLoadMore(newCount);
-                }
-                return newCount;
-            });
-        }
-    }, [
-        batchSize,
-        totalItems,
-        onLoadMore
-    ]);
-    /**
-	 * Callback ref for the marker element. Creates/disconnects observer as needed.
-	 */ const markerRef = useCallback((node)=>{
-        // Disconnect previous observer.
-        if (observerRef.current) {
-            observerRef.current.disconnect();
-            observerRef.current = null;
-        }
-        if (node && typeof IntersectionObserver !== "undefined") {
-            // Find the scrollable ancestor if not explicitly provided.
-            const root = scrollContainer ?? findScrollableAncestor(node);
-            const options = {
-                root,
-                rootMargin
-            };
-            observerRef.current = new IntersectionObserver(handleIntersection, options);
-            observerRef.current.observe(node);
-        }
-    }, [
-        handleIntersection,
-        rootMargin,
-        scrollContainer
-    ]);
-    /**
-	 * Reset to initial count.
-	 */ const reset = useCallback(()=>{
-        setVisibleCount(Math.min(initialCount, totalItems));
-    }, [
-        initialCount,
-        totalItems
-    ]);
-    /**
-	 * Expand visible count to include a specific index. Useful for scroll-to-row
-	 * functionality.
-	 */ const expandToInclude = useCallback((index)=>{
-        if (index >= visibleCount) {
-            setVisibleCount(index + threshold);
-        }
-    }, [
-        visibleCount,
-        threshold
-    ]);
-    /**
-	 * Cleanup observer on unmount.
-	 */ useEffect(()=>{
-        return ()=>{
-            if (observerRef.current) {
-                observerRef.current.disconnect();
-            }
-        };
-    }, []);
-    return {
-        visibleCount,
-        hasMore,
-        markerRef,
-        reset,
-        setVisibleCount,
-        expandToInclude
-    };
-}
-
-export { findScrollableAncestor, useInfiniteScroll };