@versini/ui-datagrid 0.8.1 → 0.8.2

package/dist/{DataGridBody/useColumnMeasurement.js → 131.js}

@@ -1,16 +1,23 @@
 /*!
-  @versini/ui-datagrid v0.8.1
+  @versini/ui-datagrid v0.8.2
   © 2026 gizmette.com
 */
 
-import { useContext, useLayoutEffect, useRef } from "react";
-import { DataGridContext } from "../DataGrid/DataGridContext.js";
+import { DataGridContext, clsx } from "./926.js";
+import { useRef, useContext, useLayoutEffect } from "./511.js";
 
-;// CONCATENATED MODULE: external "react"
 
-;// CONCATENATED MODULE: external "../DataGrid/DataGridContext.js"
+/**
+ * Get the CSS class for a DataGrid body element. Uses display:contents so the
+ * body doesn't interfere with the grid flow. Rows will use subgrid when columns
+ * are provided, or define their own grid otherwise.
+ *
+ * @param className - Additional class name to merge
+ *
+ */ function getBodyClass(className) {
+    return clsx("contents", className);
+}
 
-;// CONCATENATED MODULE: ./src/DataGridBody/useColumnMeasurement.ts
 
 
 /**
@@ -72,4 +79,4 @@ import { DataGridContext } from "../DataGrid/DataGridContext.js";
     ]);
 }
 
-export { useColumnMeasurement };
+export { getBodyClass, useColumnMeasurement };

package/dist/{utilities/classes.js → 298.js}

@@ -1,16 +1,11 @@
 /*!
-  @versini/ui-datagrid v0.8.1
+  @versini/ui-datagrid v0.8.2
   © 2026 gizmette.com
 */
 
-import clsx from "clsx";
-import { BlurEffects, CellWrapper } from "../DataGridConstants/DataGridConstants.js";
+import { clsx } from "./926.js";
+import { BlurEffects, CellWrapper } from "./46.js";
 
-;// CONCATENATED MODULE: external "clsx"
-
-;// CONCATENATED MODULE: external "../DataGridConstants/DataGridConstants.js"
-
-;// CONCATENATED MODULE: ./src/utilities/classes.ts
 
 
 /**
@@ -217,4 +212,4 @@ const ROW_LAYOUT = "group grid items-center";
  * Returns the appropriate ARIA role for the cell based on the cell wrapper type.
  */ const getCellRole = (cellWrapper)=>isHeaderCell(cellWrapper) ? "columnheader" : "gridcell";
 
-export { getBlurClasses, getBorderClasses, getCaptionClasses, getCellClasses, getCellRole, getDataGridClasses, getFooterClasses, getHeaderClasses, getHeaderFooterBackgroundClasses, getLoadingTextClasses, getOverlayClasses, getRowClasses, getSurfaceBackgroundClasses, getTextColorClasses, getTextColorClassesForHeaderFooter };
+export { getCaptionClasses, getCellClasses, getCellRole, getDataGridClasses, getFooterClasses, getHeaderClasses, getRowClasses, getTextColorClassesForHeaderFooter };

package/dist/{DataGridConstants/DataGridConstants.js → 46.js}

@@ -1,10 +1,8 @@
 /*!
-  @versini/ui-datagrid v0.8.1
+  @versini/ui-datagrid v0.8.2
   © 2026 gizmette.com
 */
 
-
-;// CONCATENATED MODULE: ./src/DataGridConstants/DataGridConstants.ts
 /**
  * Sort direction constants for DataGrid sorting.
  */ const SortDirections = {

package/dist/511.js

@@ -0,0 +1,9 @@
+/*!
+  @versini/ui-datagrid v0.8.2
+  © 2026 gizmette.com
+*/
+
+
+
+export { Fragment, jsx, jsxs } from "react/jsx-runtime";
+export { createContext, default as react, forwardRef, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";

package/dist/926.js

@@ -0,0 +1,15 @@
+/*!
+  @versini/ui-datagrid v0.8.2
+  © 2026 gizmette.com
+*/
+
+import { createContext } from "./511.js";
+
+
+
+const DataGridContext = createContext({
+    mode: "system"
+});
+
+export { DataGridContext };
+export { default as clsx } from "clsx";

package/dist/DataGrid/index.js

@@ -1,17 +1,175 @@
 /*!
-  @versini/ui-datagrid v0.8.1
+  @versini/ui-datagrid v0.8.2
   © 2026 gizmette.com
 */
 
-import { DataGrid } from "./DataGrid.js";
-import { DataGridContext } from "./DataGridContext.js";
+import { jsxs, Fragment, useState, useCallback, useMemo, jsx } from "../511.js";
+import { BlurEffects } from "../46.js";
+import { getDataGridClasses } from "../298.js";
+import { DataGridContext } from "../926.js";
 
-;// CONCATENATED MODULE: external "./DataGrid.js"
 
-;// CONCATENATED MODULE: external "./DataGridContext.js"
 
-;// CONCATENATED MODULE: ./src/DataGrid/index.ts
 
 
 
-export { DataGrid, DataGridContext };
+/* =============================================================================
+ * DataGrid (main component)
+ * ========================================================================== */ const DataGrid = ({ className, wrapperClassName, children, mode = "system", compact = false, stickyHeader = false, stickyFooter = false, blurEffect = BlurEffects.NONE, maxHeight, loading = false, columns, ...rest })=>{
+    /**
+	 * Track registered header/footer components via context registration. Uses
+	 * counter-based tracking to properly handle multiple instances. Components
+	 * register themselves when they mount, regardless of nesting depth. This
+	 * replaces the previous displayName-based child inspection approach.
+	 */ const [headerCount, setHeaderCount] = useState(0);
+    const [footerCount, setFooterCount] = useState(0);
+    /**
+	 * Track measured heights of header/footer for dynamic padding. Reported by
+	 * DataGridHeader/Footer via ResizeObserver. This replaces the brittle
+	 * hard-coded Tailwind padding classes.
+	 */ const [headerHeight, setHeaderHeight] = useState(0);
+    const [footerHeight, setFooterHeight] = useState(0);
+    /**
+	 * Track measured column widths from the body. Used by sticky header/footer to
+	 * sync column widths since absolutely positioned elements can't use CSS
+	 * subgrid.
+	 */ const [measuredColumnWidths, setMeasuredColumnWidths] = useState([]);
+    /**
+	 * Registration callbacks with stable references. Called by
+	 * DataGridHeader/DataGridFooter on mount/unmount. Uses increment/decrement to
+	 * handle multiple instances correctly.
+	 */ const registerHeader = useCallback(()=>setHeaderCount((c)=>c + 1), []);
+    const unregisterHeader = useCallback(()=>setHeaderCount((c)=>c - 1), []);
+    const registerFooter = useCallback(()=>setFooterCount((c)=>c + 1), []);
+    const unregisterFooter = useCallback(()=>setFooterCount((c)=>c - 1), []);
+    const hasRegisteredHeader = headerCount > 0;
+    const hasRegisteredFooter = footerCount > 0;
+    /**
+	 * Only apply sticky behavior if both the prop is true AND the corresponding
+	 * component exists. This prevents adding padding/styles for non-existent
+	 * headers/footers.
+	 */ const effectiveStickyHeader = stickyHeader && hasRegisteredHeader;
+    const effectiveStickyFooter = stickyFooter && hasRegisteredFooter;
+    /**
+	 * State to hold the caption ID registered by DataGridHeader. Used for
+	 * aria-labelledby on the grid element for accessibility.
+	 */ const [captionId, setCaptionId] = useState(undefined);
+    const handleSetCaptionId = useCallback((id)=>{
+        setCaptionId(id);
+    }, []);
+    const classes = useMemo(()=>getDataGridClasses({
+            mode,
+            className,
+            wrapperClassName,
+            stickyHeader: effectiveStickyHeader,
+            stickyFooter: effectiveStickyFooter,
+            loading: Boolean(loading)
+        }), [
+        mode,
+        className,
+        wrapperClassName,
+        effectiveStickyHeader,
+        effectiveStickyFooter,
+        loading
+    ]);
+    const contextValue = useMemo(()=>({
+            mode,
+            compact,
+            stickyHeader: effectiveStickyHeader,
+            stickyFooter: effectiveStickyFooter,
+            blurEffect,
+            columns,
+            measuredColumnWidths,
+            setCaptionId: handleSetCaptionId,
+            registerHeader,
+            unregisterHeader,
+            registerFooter,
+            unregisterFooter,
+            setHeaderHeight,
+            setFooterHeight,
+            setMeasuredColumnWidths
+        }), [
+        mode,
+        compact,
+        effectiveStickyHeader,
+        effectiveStickyFooter,
+        blurEffect,
+        columns,
+        measuredColumnWidths,
+        handleSetCaptionId,
+        registerHeader,
+        unregisterHeader,
+        registerFooter,
+        unregisterFooter
+    ]);
+    const wrapperStyle = maxHeight ? {
+        maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight
+    } : undefined;
+    /**
+	 * Dynamic padding for scrollable content based on measured header/footer
+	 * heights. This replaces the brittle hard-coded Tailwind padding classes.
+	 */ const scrollableContentStyle = {
+        ...wrapperStyle,
+        paddingTop: effectiveStickyHeader ? headerHeight : undefined,
+        paddingBottom: effectiveStickyFooter ? footerHeight : undefined
+    };
+    /**
+	 * When sticky header/footer is enabled, use Panel-like structure: - Outer
+	 * wrapper has overflow-hidden - Scrollable content area in the middle with
+	 * padding - Header/footer are absolutely positioned.
+	 */ const hasSticky = effectiveStickyHeader || effectiveStickyFooter;
+    /**
+	 * When columns are provided, apply grid-template-columns at the grid level so
+	 * all rows can use subgrid to inherit the same column sizing.
+	 */ const gridStyle = columns ? {
+        gridTemplateColumns: columns.join(" ")
+    } : undefined;
+    const gridContent = /*#__PURE__*/ jsx("div", {
+        role: "grid",
+        "aria-labelledby": captionId,
+        className: classes.grid,
+        style: gridStyle,
+        ...rest,
+        children: children
+    });
+    const loadingText = typeof loading === "string" ? loading : loading ? "Loading..." : null;
+    return /*#__PURE__*/ jsx(DataGridContext.Provider, {
+        value: contextValue,
+        children: /*#__PURE__*/ jsxs("div", {
+            className: classes.inner,
+            children: [
+                loading && /*#__PURE__*/ jsxs(Fragment, {
+                    children: [
+                        /*#__PURE__*/ jsx("div", {
+                            className: classes.overlay,
+                            "aria-hidden": "true"
+                        }),
+                        /*#__PURE__*/ jsx("div", {
+                            className: classes.loadingWrapper,
+                            children: /*#__PURE__*/ jsx("span", {
+                                className: classes.loadingText,
+                                role: "status",
+                                children: loadingText
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsx("div", {
+                    className: classes.wrapper,
+                    style: wrapperStyle,
+                    children: hasSticky ? /*#__PURE__*/ jsx("div", {
+                        className: classes.scrollableContent,
+                        style: scrollableContentStyle,
+                        children: gridContent
+                    }) : gridContent
+                })
+            ]
+        })
+    });
+};
+
+
+
+
+export { DataGrid };
+export { DataGridContext } from "../926.js";

package/dist/DataGridAnimated/index.js

@@ -1,16 +1,169 @@
 /*!
-  @versini/ui-datagrid v0.8.1
+  @versini/ui-datagrid v0.8.2
   © 2026 gizmette.com
 */
 
-import { AnimatedWrapper } from "./AnimatedWrapper.js";
-import { useAnimatedHeight } from "./useAnimatedHeight.js";
+import { useState, useLayoutEffect, useRef, jsx } from "../511.js";
 
-;// CONCATENATED MODULE: external "./AnimatedWrapper.js"
 
-;// CONCATENATED MODULE: external "./useAnimatedHeight.js"
+const DEFAULT_ANIMATION_DURATION = 300;
+/**
+ * Hook that provides smooth height animations when content changes.
+ *
+ * Uses FLIP technique: captures height before render via a persistent ref, then
+ * animates from old height to new height after the DOM updates.
+ *
+ * @param dependency - Value that triggers animation when changed.
+ * @param options - Configuration options.
+ *
+ * @example
+ * ```tsx
+ * const items = useMemo(() => data.slice(0, visibleCount), [data, visibleCount]);
+ * const { ref, style } = useAnimatedHeight(items.length);
+ *
+ * return (
+ *   <div ref={ref} style={style}>
+ *     {items.map((item) => <Row key={item.id} {...item} />)}
+ *   </div>
+ * );
+ * ```
+ *
+ */ function useAnimatedHeight(dependency, options) {
+    const { duration = DEFAULT_ANIMATION_DURATION, enabled = true } = options ?? {};
+    const ref = useRef(null);
+    const [animationState, setAnimationState] = useState({
+        height: "auto",
+        isAnimating: false
+    });
+    /**
+	 * Track the last measured height persistently. This ref is updated AFTER each
+	 * animation completes, so it holds the "before" value when dependency changes.
+	 */ const lastHeightRef = useRef(0);
+    const prevDependencyRef = useRef(dependency);
+    const animationFrameRef = useRef(0);
+    const timeoutRef = useRef(null);
+    useLayoutEffect(()=>{
+        if (!ref.current || !enabled) {
+            return;
+        }
+        /**
+		 * On first render or when not animating, just record the current height.
+		 */ if (lastHeightRef.current === 0) {
+            lastHeightRef.current = ref.current.offsetHeight;
+            prevDependencyRef.current = dependency;
+            return;
+        }
+        /**
+		 * If dependency hasn't changed, nothing to animate.
+		 */ if (prevDependencyRef.current === dependency) {
+            return;
+        }
+        prevDependencyRef.current = dependency;
+        const previousHeight = lastHeightRef.current;
+        const newHeight = ref.current.scrollHeight;
+        /**
+		 * Update the stored height for next time.
+		 */ lastHeightRef.current = newHeight;
+        /**
+		 * If heights are the same or previous was 0, no animation needed.
+		 */ if (previousHeight === newHeight || previousHeight === 0) {
+            return;
+        }
+        /**
+		 * Cancel any ongoing animation.
+		 */ if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+        if (animationFrameRef.current) {
+            cancelAnimationFrame(animationFrameRef.current);
+        }
+        /**
+		 * Lock to the previous height immediately.
+		 */ setAnimationState({
+            height: previousHeight,
+            isAnimating: true
+        });
+        /**
+		 * Use double RAF to ensure the browser has painted the locked height, then
+		 * transition to the new height.
+		 */ animationFrameRef.current = requestAnimationFrame(()=>{
+            animationFrameRef.current = requestAnimationFrame(()=>{
+                setAnimationState({
+                    height: newHeight,
+                    isAnimating: true
+                });
+                timeoutRef.current = setTimeout(()=>{
+                    setAnimationState({
+                        height: "auto",
+                        isAnimating: false
+                    });
+                }, duration);
+            });
+        });
+        return ()=>{
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+            if (animationFrameRef.current) {
+                cancelAnimationFrame(animationFrameRef.current);
+            }
+        };
+    }, [
+        dependency,
+        duration,
+        enabled
+    ]);
+    const style = enabled ? {
+        height: animationState.height === "auto" ? "auto" : `${animationState.height}px`,
+        overflow: animationState.isAnimating ? "hidden" : undefined,
+        transition: animationState.isAnimating ? `height ${duration}ms ease-out` : undefined
+    } : {};
+    return {
+        ref,
+        style,
+        isAnimating: animationState.isAnimating
+    };
+}
+
+
+
+/**
+ * Wrapper component that animates height changes when content changes.
+ *
+ * @example
+ * ```tsx
+ * const [visibleCount, setVisibleCount] = useState(0);
+ *
+ * return (
+ *   <AnimatedWrapper dependency={visibleCount}>
+ *     <DataGrid maxHeight="400px" stickyHeader>
+ *       <DataGridInfiniteBody
+ *         data={largeData}
+ *         batchSize={25}
+ *         onVisibleCountChange={(count) => setVisibleCount(count)}
+ *       >
+ *         {(row) => (
+ *           <DataGridRow key={row.id}>...</DataGridRow>
+ *         )}
+ *       </DataGridInfiniteBody>
+ *     </DataGrid>
+ *   </AnimatedWrapper>
+ * );
+ * ```
+ *
+ */ const AnimatedWrapper = ({ children, dependency, duration, enabled = true, className })=>{
+    const { ref, style } = useAnimatedHeight(dependency, {
+        duration,
+        enabled
+    });
+    return /*#__PURE__*/ jsx("div", {
+        ref: ref,
+        style: style,
+        className: className,
+        children: children
+    });
+};
 
-;// CONCATENATED MODULE: ./src/DataGridAnimated/index.ts
 
 
 

package/dist/DataGridBody/index.js

@@ -1,13 +1,42 @@
 /*!
-  @versini/ui-datagrid v0.8.1
+  @versini/ui-datagrid v0.8.2
   © 2026 gizmette.com
 */
 
-import { DataGridBody } from "./DataGridBody.js";
+import { useRef, useContext, jsx } from "../511.js";
+import { DataGridContext } from "../926.js";
+import { getBodyClass, useColumnMeasurement } from "../131.js";
+import { CellWrapper } from "../46.js";
 
-;// CONCATENATED MODULE: external "./DataGridBody.js"
 
-;// CONCATENATED MODULE: ./src/DataGridBody/index.ts
+
+
+
+
+
+/* =============================================================================
+ * DataGridBody
+ * ========================================================================== */ const DataGridBody = ({ className, children, ...rest })=>{
+    const ctx = useContext(DataGridContext);
+    const bodyRef = useRef(null);
+    // Measure column widths for sticky header/footer sync.
+    useColumnMeasurement(bodyRef, children);
+    const bodyClass = getBodyClass(className);
+    return /*#__PURE__*/ jsx(DataGridContext.Provider, {
+        value: {
+            ...ctx,
+            cellWrapper: CellWrapper.BODY
+        },
+        children: /*#__PURE__*/ jsx("div", {
+            ref: bodyRef,
+            role: "rowgroup",
+            className: bodyClass,
+            ...rest,
+            children: children
+        })
+    });
+};
+
 
 
 export { DataGridBody };

package/dist/DataGridCell/index.js

@@ -1,13 +1,46 @@
 /*!
-  @versini/ui-datagrid v0.8.1
+  @versini/ui-datagrid v0.8.2
   © 2026 gizmette.com
 */
 
-import { DataGridCell } from "./DataGridCell.js";
+import { jsx } from "../511.js";
+import { DataGridContext } from "../926.js";
+import { getCellRole, getCellClasses } from "../298.js";
 
-;// CONCATENATED MODULE: external "./DataGridCell.js"
 
-;// CONCATENATED MODULE: ./src/DataGridCell/index.ts
+
+
+/* =============================================================================
+ * DataGridCell
+ * ========================================================================== */ const DataGridCell = ({ className, children, align, borderLeft, borderRight, colSpan, style, ...rest })=>{
+    return /*#__PURE__*/ jsx(DataGridContext.Consumer, {
+        children: ({ mode, compact, cellWrapper })=>{
+            const mainClasses = getCellClasses({
+                cellWrapper,
+                className,
+                mode,
+                compact,
+                align,
+                borderLeft,
+                borderRight
+            });
+            const role = getCellRole(cellWrapper);
+            // Apply grid-column span for colSpan > 1.
+            const cellStyle = colSpan && colSpan > 1 ? {
+                ...style,
+                gridColumn: `span ${colSpan}`
+            } : style;
+            return /*#__PURE__*/ jsx("div", {
+                role: role,
+                className: mainClasses,
+                style: cellStyle,
+                ...rest,
+                children: children
+            });
+        }
+    });
+};
+
 
 
 export { DataGridCell };