@versini/ui-datagrid 0.8.1 → 0.8.2

package/dist/DataGridCellSort/DataGridCellSort.js

@@ -1,111 +0,0 @@
-/*!
-  @versini/ui-datagrid v0.8.1
-  © 2026 gizmette.com
-*/
-
-import { jsx, jsxs } from "react/jsx-runtime";
-import { IconSort, IconSortDown, IconSortUp } from "@versini/ui-icons";
-import clsx from "clsx";
-import { DataGridContext } from "../DataGrid/DataGridContext.js";
-import { getCellClasses } from "../utilities/classes.js";
-import { ButtonSort } from "./ButtonSort.js";
-
-;// CONCATENATED MODULE: external "react/jsx-runtime"
-
-;// CONCATENATED MODULE: external "@versini/ui-icons"
-
-;// CONCATENATED MODULE: external "clsx"
-
-;// CONCATENATED MODULE: external "../DataGrid/DataGridContext.js"
-
-;// CONCATENATED MODULE: external "../utilities/classes.js"
-
-;// CONCATENATED MODULE: external "./ButtonSort.js"
-
-;// CONCATENATED MODULE: ./src/DataGridCellSort/DataGridCellSort.tsx
-
-
-
-
-
-
-/* =============================================================================
- * DataGridCellSort
- * ========================================================================== */ const DataGridCellSort = ({ className, children, cellId, onSort, sortDirection, sortedCell, slotLeft, slotRight, buttonClassName, align, ...rest })=>{
-    const isSorted = sortedCell === cellId;
-    const handleSort = ()=>{
-        if (onSort) {
-            // Convert false to undefined for the callback.
-            const currentDirection = isSorted && sortDirection ? sortDirection : undefined;
-            onSort(cellId, currentDirection);
-        }
-    };
-    const getSortIcon = ()=>{
-        if (isSorted && sortDirection === "asc") {
-            return /*#__PURE__*/ jsx(IconSortUp, {
-                size: "size-4",
-                monotone: true
-            });
-        }
-        if (isSorted && sortDirection === "desc") {
-            return /*#__PURE__*/ jsx(IconSortDown, {
-                size: "size-4",
-                monotone: true
-            });
-        }
-        return /*#__PURE__*/ jsx(IconSort, {
-            size: "size-4",
-            monotone: true
-        });
-    };
-    const getAriaSort = ()=>{
-        if (isSorted && sortDirection === "asc") {
-            return "ascending";
-        }
-        if (isSorted && sortDirection === "desc") {
-            return "descending";
-        }
-        return "other";
-    };
-    return /*#__PURE__*/ jsx(DataGridContext.Consumer, {
-        children: ({ mode, compact, cellWrapper, blurEffect })=>{
-            const mainClasses = getCellClasses({
-                cellWrapper,
-                className,
-                mode,
-                compact,
-                align
-            });
-            // Flex container for alignment of button within the cell.
-            const contentClasses = clsx("flex", {
-                "justify-start": align === "left" || !align,
-                "justify-center": align === "center",
-                "justify-end": align === "right"
-            });
-            return /*#__PURE__*/ jsx("div", {
-                className: mainClasses,
-                role: "columnheader",
-                "aria-sort": getAriaSort(),
-                ...rest,
-                children: /*#__PURE__*/ jsxs("div", {
-                    className: contentClasses,
-                    children: [
-                        slotLeft,
-                        /*#__PURE__*/ jsx(ButtonSort, {
-                            mode: mode,
-                            blurEffect: blurEffect,
-                            active: isSorted,
-                            className: buttonClassName,
-                            onClick: handleSort,
-                            labelRight: children,
-                            children: getSortIcon()
-                        }),
-                        slotRight
-                    ]
-                })
-            });
-        }
-    });
-};
-
-export { DataGridCellSort };

package/dist/DataGridFooter/DataGridFooter.js

@@ -1,98 +0,0 @@
-/*!
-  @versini/ui-datagrid v0.8.1
-  © 2026 gizmette.com
-*/
-
-import { jsx } from "react/jsx-runtime";
-import { useEffect, useLayoutEffect, useRef } from "react";
-import { DataGridContext } from "../DataGrid/DataGridContext.js";
-import { CellWrapper } from "../DataGridConstants/DataGridConstants.js";
-import { getFooterClasses } from "../utilities/classes.js";
-
-;// CONCATENATED MODULE: external "react/jsx-runtime"
-
-;// CONCATENATED MODULE: external "react"
-
-;// CONCATENATED MODULE: external "../DataGrid/DataGridContext.js"
-
-;// CONCATENATED MODULE: external "../DataGridConstants/DataGridConstants.js"
-
-;// CONCATENATED MODULE: external "../utilities/classes.js"
-
-;// CONCATENATED MODULE: ./src/DataGridFooter/DataGridFooter.tsx
-
-
-
-
-
-/* =============================================================================
- * DataGridFooter
- * ========================================================================== */ const DataGridFooter = ({ className, children, ...rest })=>{
-    return /*#__PURE__*/ jsx(DataGridContext.Consumer, {
-        children: (ctx)=>/*#__PURE__*/ jsx(DataGridFooterInner, {
-                className: className,
-                ctx: ctx,
-                ...rest,
-                children: children
-            })
-    });
-};
-DataGridFooter.displayName = "DataGridFooter";
-/**
- * Inner component to handle the useEffect for registering footer. Separated to
- * avoid hooks inside Consumer render prop.
- */ const DataGridFooterInner = ({ className, ctx, children, ...rest })=>{
-    const footerRef = useRef(null);
-    /**
-	 * Register this footer with the parent DataGrid on mount. This enables sticky
-	 * footer behavior regardless of nesting depth.
-	 */ useEffect(()=>{
-        ctx.registerFooter?.();
-        return ()=>{
-            ctx.unregisterFooter?.();
-        };
-    }, [
-        ctx.registerFooter,
-        ctx.unregisterFooter
-    ]);
-    /**
-	 * Measure and report footer height for dynamic padding calculation. Uses
-	 * ResizeObserver to handle dynamic content changes.
-	 */ useLayoutEffect(()=>{
-        const element = footerRef.current;
-        if (!element || !ctx.stickyFooter || !ctx.setFooterHeight) {
-            return;
-        }
-        const observer = new ResizeObserver((entries)=>{
-            const height = entries[0]?.borderBoxSize?.[0]?.blockSize;
-            if (height !== undefined) {
-                ctx.setFooterHeight?.(height);
-            }
-        });
-        observer.observe(element);
-        return ()=>observer.disconnect();
-    }, [
-        ctx.stickyFooter,
-        ctx.setFooterHeight
-    ]);
-    return /*#__PURE__*/ jsx(DataGridContext.Provider, {
-        value: {
-            ...ctx,
-            cellWrapper: CellWrapper.FOOTER
-        },
-        children: /*#__PURE__*/ jsx("div", {
-            ref: footerRef,
-            role: "rowgroup",
-            className: getFooterClasses({
-                className,
-                stickyFooter: ctx.stickyFooter,
-                mode: ctx.mode,
-                blurEffect: ctx.blurEffect
-            }),
-            ...rest,
-            children: children
-        })
-    });
-};
-
-export { DataGridFooter };

package/dist/DataGridHeader/DataGridHeader.js

@@ -1,129 +0,0 @@
-/*!
-  @versini/ui-datagrid v0.8.1
-  © 2026 gizmette.com
-*/
-
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useId, useLayoutEffect, useRef } from "react";
-import { DataGridContext } from "../DataGrid/DataGridContext.js";
-import { CellWrapper } from "../DataGridConstants/DataGridConstants.js";
-import { getCaptionClasses, getHeaderClasses } from "../utilities/classes.js";
-
-;// CONCATENATED MODULE: external "react/jsx-runtime"
-
-;// CONCATENATED MODULE: external "react"
-
-;// CONCATENATED MODULE: external "../DataGrid/DataGridContext.js"
-
-;// CONCATENATED MODULE: external "../DataGridConstants/DataGridConstants.js"
-
-;// CONCATENATED MODULE: external "../utilities/classes.js"
-
-;// CONCATENATED MODULE: ./src/DataGridHeader/DataGridHeader.tsx
-
-
-
-
-
-/* =============================================================================
- * DataGridHeader
- * ========================================================================== */ const DataGridHeader = ({ caption, captionClassName, className, children, ...rest })=>{
-    const captionId = useId();
-    return /*#__PURE__*/ jsx(DataGridContext.Consumer, {
-        children: (ctx)=>/*#__PURE__*/ jsx(DataGridHeaderInner, {
-                caption: caption,
-                captionClassName: captionClassName,
-                captionId: captionId,
-                className: className,
-                ctx: ctx,
-                ...rest,
-                children: children
-            })
-    });
-};
-DataGridHeader.displayName = "DataGridHeader";
-/**
- * Inner component to handle the useEffect for registering captionId and header.
- * Separated to avoid hooks inside Consumer render prop.
- */ const DataGridHeaderInner = ({ caption, captionClassName, captionId, className, ctx, children, ...rest })=>{
-    const headerRef = useRef(null);
-    /**
-	 * Register this header with the parent DataGrid on mount. This enables sticky
-	 * header behavior regardless of nesting depth.
-	 */ useEffect(()=>{
-        ctx.registerHeader?.();
-        return ()=>{
-            ctx.unregisterHeader?.();
-        };
-    }, [
-        ctx.registerHeader,
-        ctx.unregisterHeader
-    ]);
-    // Register the caption ID with the parent DataGrid for aria-labelledby.
-    useEffect(()=>{
-        if (caption && ctx.setCaptionId) {
-            ctx.setCaptionId(captionId);
-        }
-        return ()=>{
-            if (ctx.setCaptionId) {
-                ctx.setCaptionId(undefined);
-            }
-        };
-    }, [
-        caption,
-        captionId,
-        ctx.setCaptionId
-    ]);
-    /**
-	 * Measure and report header height for dynamic padding calculation. Uses
-	 * ResizeObserver to handle dynamic content changes (text wrapping, etc.).
-	 */ useLayoutEffect(()=>{
-        const element = headerRef.current;
-        if (!element || !ctx.stickyHeader || !ctx.setHeaderHeight) {
-            return;
-        }
-        const observer = new ResizeObserver((entries)=>{
-            const height = entries[0]?.borderBoxSize?.[0]?.blockSize;
-            if (height !== undefined) {
-                ctx.setHeaderHeight?.(height);
-            }
-        });
-        observer.observe(element);
-        return ()=>observer.disconnect();
-    }, [
-        ctx.stickyHeader,
-        ctx.setHeaderHeight
-    ]);
-    return /*#__PURE__*/ jsx(DataGridContext.Provider, {
-        value: {
-            ...ctx,
-            cellWrapper: CellWrapper.HEADER
-        },
-        children: /*#__PURE__*/ jsxs("div", {
-            ref: headerRef,
-            role: "rowgroup",
-            className: getHeaderClasses({
-                className,
-                stickyHeader: ctx.stickyHeader,
-                mode: ctx.mode,
-                blurEffect: ctx.blurEffect
-            }),
-            ...rest,
-            children: [
-                caption && /*#__PURE__*/ jsx("div", {
-                    id: captionId,
-                    className: getCaptionClasses({
-                        captionClassName,
-                        mode: ctx.mode,
-                        hasBlur: Boolean(ctx.blurEffect && ctx.blurEffect !== "none"),
-                        stickyHeader: Boolean(ctx.stickyHeader)
-                    }),
-                    children: caption
-                }),
-                children
-            ]
-        })
-    });
-};
-
-export { DataGridHeader };

package/dist/DataGridInfinite/DataGridInfiniteBody.js

@@ -1,334 +0,0 @@
-/*!
-  @versini/ui-datagrid v0.8.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 isLastRow flag for proper
-	 * border removal (CSS :last-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,
-                    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(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 };