@versini/ui-datagrid 0.8.0 → 0.8.2

package/dist/DataGridBody/index.js

@@ -1,13 +1,42 @@
 /*!
-  @versini/ui-datagrid v0.8.0
+  @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.0
+  @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 };

package/dist/DataGridCellSort/index.js

@@ -1,13 +1,147 @@
 /*!
-  @versini/ui-datagrid v0.8.0
+  @versini/ui-datagrid v0.8.2
   © 2026 gizmette.com
 */
 
-import { DataGridCellSort } from "./DataGridCellSort.js";
+import { IconSort, IconSortDown, IconSortUp } from "@versini/ui-icons";
+import { jsxs, jsx } from "../511.js";
+import { DataGridContext, clsx } from "../926.js";
+import { BlurEffects } from "../46.js";
+import { getCellClasses, getTextColorClassesForHeaderFooter } from "../298.js";
 
-;// CONCATENATED MODULE: external "./DataGridCellSort.js"
 
-;// CONCATENATED MODULE: ./src/DataGridCellSort/index.ts
+
+
+
+
+const getActiveIndicatorClasses = (active)=>{
+    if (!active) {
+        return "";
+    }
+    return clsx("relative", "focus-within:static", "focus-within:after:border-transparent", "after:absolute", "after:content-['']", "after:border-b-2", "after:-bottom-1", "after:left-0", "after:right-0", // the small border at the bottom of the button when it is active (sorted)
+    "after:border-table-light");
+};
+const ButtonSort = ({ active = false, className, onClick, labelRight, children, blurEffect, mode })=>{
+    const hasBlur = Boolean(blurEffect && blurEffect !== BlurEffects.NONE);
+    const buttonClasses = clsx(// Base styles
+    "flex items-center cursor-pointer", // Size - small
+    "h-6 px-1 sm:px-2", // Font
+    "text-sm font-bold", // Radius - small
+    "rounded-xs", // Text color
+    getTextColorClassesForHeaderFooter({
+        mode,
+        hasBlur
+    }), // Focus styles
+    "focus:outline", "focus:outline-2", "focus:outline-offset-2", "focus:outline-focus-medium", // Hover styles
+    "hover:text-copy-light-hover", "hover:bg-action-darker-hover", // Active styles
+    "active:text-copy-medium-active", "active:bg-action-dark-active", // Custom className
+    className);
+    const wrapperClasses = getActiveIndicatorClasses(active);
+    return /*#__PURE__*/ jsx("div", {
+        className: wrapperClasses,
+        children: /*#__PURE__*/ jsxs("button", {
+            className: buttonClasses,
+            type: "button",
+            onClick: onClick,
+            children: [
+                /*#__PURE__*/ jsx("span", {
+                    className: "text-copy-light",
+                    children: children
+                }),
+                labelRight && /*#__PURE__*/ jsx("span", {
+                    className: "pl-2",
+                    children: labelRight
+                })
+            ]
+        })
+    });
+};
+
+
+
+
+
+
+
+/* =============================================================================
+ * 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/DataGridConstants/index.js

@@ -1,13 +1,9 @@
 /*!
-  @versini/ui-datagrid v0.8.0
+  @versini/ui-datagrid v0.8.2
   © 2026 gizmette.com
 */
 
-import { BlurEffects, CellWrapper, SortDirections, ThemeModes } from "./DataGridConstants.js";
 
-;// CONCATENATED MODULE: external "./DataGridConstants.js"
 
-;// CONCATENATED MODULE: ./src/DataGridConstants/index.ts
 
-
-export { BlurEffects, CellWrapper, SortDirections, ThemeModes };
+export { BlurEffects, CellWrapper, SortDirections, ThemeModes } from "../46.js";

package/dist/DataGridFooter/index.js

@@ -1,13 +1,88 @@
 /*!
-  @versini/ui-datagrid v0.8.0
+  @versini/ui-datagrid v0.8.2
   © 2026 gizmette.com
 */
 
-import { DataGridFooter } from "./DataGridFooter.js";
+import { useLayoutEffect, useRef, useEffect, jsx } from "../511.js";
+import { DataGridContext } from "../926.js";
+import { CellWrapper } from "../46.js";
+import { getFooterClasses } from "../298.js";
 
-;// CONCATENATED MODULE: external "./DataGridFooter.js"
 
-;// CONCATENATED MODULE: ./src/DataGridFooter/index.ts
+
+
+
+
+/* =============================================================================
+ * 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/index.js

@@ -1,13 +1,119 @@
 /*!
-  @versini/ui-datagrid v0.8.0
+  @versini/ui-datagrid v0.8.2
   © 2026 gizmette.com
 */
 
-import { DataGridHeader } from "./DataGridHeader.js";
+import { jsxs, useLayoutEffect, useId, useRef, useEffect, jsx } from "../511.js";
+import { DataGridContext } from "../926.js";
+import { CellWrapper } from "../46.js";
+import { getCaptionClasses, getHeaderClasses } from "../298.js";
 
-;// CONCATENATED MODULE: external "./DataGridHeader.js"
 
-;// CONCATENATED MODULE: ./src/DataGridHeader/index.ts
+
+
+
+
+/* =============================================================================
+ * 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 };