@versini/ui-datagrid 0.8.0 → 0.8.2

package/dist/utilities/classes.d.ts

@@ -1,12 +1,6 @@
 import { type BlurEffect, type CellWrapperType, type ThemeMode } from "../DataGridConstants/DataGridConstants";
 /**
- * ============================================================================
- * Primitive Theme Mappings (reusable building blocks)
- * ============================================================================
- */
-/**
- * Text color classes based on theme mode. Used by: DataGrid wrapper, grid,
- * spinner, header/footer copy.
+ * Text color classes based on theme mode.
  */
 export declare const getTextColorClasses: ({ mode }: {
     mode: ThemeMode;
@@ -16,38 +10,30 @@ export declare const getTextColorClassesForHeaderFooter: ({ mode, hasBlur, }: {
     hasBlur: boolean;
 }) => string;
 /**
- * Surface background classes (main container backgrounds). Used by: DataGrid
- * wrapper.
+ * Surface background classes (main container backgrounds).
  */
 export declare const getSurfaceBackgroundClasses: ({ mode }: {
     mode: ThemeMode;
 }) => string;
 /**
- * Header/footer background classes (with optional blur transparency). Used by:
- * DataGridHeader, DataGridFooter.
+ * Header/footer background classes (with optional blur transparency).
  */
 export declare const getHeaderFooterBackgroundClasses: ({ hasBlur, sticky, }: {
     hasBlur: boolean;
     sticky: boolean;
 }) => string;
 /**
- * Border color classes for rows. Used by: DataGridRow.
+ * Border color classes for rows.
  */
 export declare const getBorderClasses: ({ mode }: {
     mode: ThemeMode;
 }) => string;
 /**
- * Blur effect classes for sticky elements. Used by: DataGridHeader,
- * DataGridFooter.
+ * Blur effect classes for sticky elements.
  */
 export declare const getBlurClasses: ({ blurEffect }: {
     blurEffect?: BlurEffect;
 }) => string;
-/**
- * ============================================================================
- * Composite Class Generators (component-specific combinations)
- * ============================================================================
- */
 /**
  * Loading text classes for loading state.
  */
@@ -95,8 +81,6 @@ export declare const getHeaderClasses: ({ className, stickyHeader, mode, blurEff
 }) => string;
 /**
  * Generates classes for the caption element inside DataGridHeader.
- * Needs explicit styling since the parent may use `display: contents`
- * when not sticky, which doesn't render a box and breaks CSS inheritance.
  */
 export declare const getCaptionClasses: ({ captionClassName, mode, hasBlur, stickyHeader, }: {
     captionClassName?: string;
@@ -104,9 +88,6 @@ export declare const getCaptionClasses: ({ captionClassName, mode, hasBlur, stic
     hasBlur: boolean;
     stickyHeader: boolean;
 }) => string;
-/**
- * Generates classes for the DataGridFooter.
- */
 /**
  * Generates classes for the DataGridFooter.
  */
@@ -117,9 +98,7 @@ export declare const getFooterClasses: ({ className, stickyFooter, mode, blurEff
     stickyFooter?: boolean;
 }) => string;
 /**
- * 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.
+ * Generates classes for DataGridRow.
  */
 export declare const getRowClasses: ({ mode, className, cellWrapper, isLastRow, stickyHeader, stickyFooter, }: {
     mode: ThemeMode;
@@ -142,7 +121,6 @@ export declare const getCellClasses: ({ cellWrapper, className, compact, align,
     borderRight?: boolean;
 }) => string;
 /**
- * Returns the appropriate ARIA role for the cell based on the cell wrapper
- * type.
+ * Returns the appropriate ARIA role for the cell based on the cell wrapper type.
  */
 export declare const getCellRole: (cellWrapper?: CellWrapperType) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-datagrid",
-	"version": "0.8.0",
+	"version": "0.8.2",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -87,7 +87,7 @@
 	},
 	"devDependencies": {
 		"@testing-library/jest-dom": "6.9.1",
-		"@versini/ui-button": "11.3.3",
+		"@versini/ui-button": "11.3.5",
 		"@versini/ui-types": "8.3.0"
 	},
 	"dependencies": {
@@ -99,5 +99,5 @@
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "17220b771f97115901ce34188fe98b911b75cfdc"
+	"gitHead": "e1f66fb685ddf40b22301f1fe766a2c56ddc4388"
 }

package/dist/DataGrid/DataGrid.js

@@ -1,183 +0,0 @@
-/*!
-  @versini/ui-datagrid v0.8.0
-  © 2026 gizmette.com
-*/
-
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useMemo, useState } from "react";
-import { BlurEffects } from "../DataGridConstants/DataGridConstants.js";
-import { getDataGridClasses } from "../utilities/classes.js";
-import { DataGridContext } from "./DataGridContext.js";
-
-;// CONCATENATED MODULE: external "react/jsx-runtime"
-
-;// CONCATENATED MODULE: external "react"
-
-;// CONCATENATED MODULE: external "../DataGridConstants/DataGridConstants.js"
-
-;// CONCATENATED MODULE: external "../utilities/classes.js"
-
-;// CONCATENATED MODULE: external "./DataGridContext.js"
-
-;// CONCATENATED MODULE: ./src/DataGrid/DataGrid.tsx
-
-
-
-
-
-/* =============================================================================
- * 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 };

package/dist/DataGrid/DataGridContext.js

@@ -1,16 +0,0 @@
-/*!
-  @versini/ui-datagrid v0.8.0
-  © 2026 gizmette.com
-*/
-
-import { createContext } from "react";
-
-;// CONCATENATED MODULE: external "react"
-
-;// CONCATENATED MODULE: ./src/DataGrid/DataGridContext.ts
-
-const DataGridContext = createContext({
-    mode: "system"
-});
-
-export { DataGridContext };

package/dist/DataGrid/DataGridTypes.js

@@ -1,9 +0,0 @@
-/*!
-  @versini/ui-datagrid v0.8.0
-  © 2026 gizmette.com
-*/
-
-
-;// CONCATENATED MODULE: ./src/DataGrid/DataGridTypes.ts
-
-

package/dist/DataGridAnimated/AnimatedWrapper.js

@@ -1,53 +0,0 @@
-/*!
-  @versini/ui-datagrid v0.8.0
-  © 2026 gizmette.com
-*/
-
-import { jsx } from "react/jsx-runtime";
-import { useAnimatedHeight } from "./useAnimatedHeight.js";
-
-;// CONCATENATED MODULE: external "react/jsx-runtime"
-
-;// CONCATENATED MODULE: external "./useAnimatedHeight.js"
-
-;// CONCATENATED MODULE: ./src/DataGridAnimated/AnimatedWrapper.tsx
-
-
-/**
- * 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
-    });
-};
-
-export { AnimatedWrapper };

package/dist/DataGridAnimated/useAnimatedHeight.js

@@ -1,131 +0,0 @@
-/*!
-  @versini/ui-datagrid v0.8.0
-  © 2026 gizmette.com
-*/
-
-import { useLayoutEffect, useRef, useState } from "react";
-
-;// CONCATENATED MODULE: external "react"
-
-;// CONCATENATED MODULE: ./src/DataGridAnimated/useAnimatedHeight.ts
-
-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
-    };
-}
-
-export { useAnimatedHeight };

package/dist/DataGridBody/DataGridBody.js

@@ -1,55 +0,0 @@
-/*!
-  @versini/ui-datagrid v0.8.0
-  © 2026 gizmette.com
-*/
-
-import { jsx } from "react/jsx-runtime";
-import { useContext, useRef } from "react";
-import { DataGridContext } from "../DataGrid/DataGridContext.js";
-import { CellWrapper } from "../DataGridConstants/index.js";
-import { getBodyClass } from "./getBodyClass.js";
-import { useColumnMeasurement } from "./useColumnMeasurement.js";
-
-;// CONCATENATED MODULE: external "react/jsx-runtime"
-
-;// CONCATENATED MODULE: external "react"
-
-;// CONCATENATED MODULE: external "../DataGrid/DataGridContext.js"
-
-;// CONCATENATED MODULE: external "../DataGridConstants/index.js"
-
-;// CONCATENATED MODULE: external "./getBodyClass.js"
-
-;// CONCATENATED MODULE: external "./useColumnMeasurement.js"
-
-;// CONCATENATED MODULE: ./src/DataGridBody/DataGridBody.tsx
-
-
-
-
-
-
-/* =============================================================================
- * 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/DataGridBody/getBodyClass.js

@@ -1,23 +0,0 @@
-/*!
-  @versini/ui-datagrid v0.8.0
-  © 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. 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);
-}
-
-export { getBodyClass };

package/dist/DataGridCell/DataGridCell.js

@@ -1,51 +0,0 @@
-/*!
-  @versini/ui-datagrid v0.8.0
-  © 2026 gizmette.com
-*/
-
-import { jsx } from "react/jsx-runtime";
-import { DataGridContext } from "../DataGrid/DataGridContext.js";
-import { getCellClasses, getCellRole } from "../utilities/classes.js";
-
-;// CONCATENATED MODULE: external "react/jsx-runtime"
-
-;// CONCATENATED MODULE: external "../DataGrid/DataGridContext.js"
-
-;// CONCATENATED MODULE: external "../utilities/classes.js"
-
-;// CONCATENATED MODULE: ./src/DataGridCell/DataGridCell.tsx
-
-
-
-/* =============================================================================
- * 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 };