@versini/ui-datagrid 4.2.11 → 4.2.13

package/dist/DataGridCellSort/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v4.2.11
+  @versini/ui-datagrid v4.2.13
   © 2026 gizmette.com
 */
 
@@ -9,56 +9,29 @@ import clsx from "clsx";
 import { BlurEffects } from "../7.js";
 import { getCellClasses, getTextColorClassesForHeaderFooter } from "../y.js";
 import { DataGridContext } from "../8.js";
-
-
-
-
-
-
-
-
-
-
 const getActiveIndicatorClasses = (active)=>{
-    if (!active) {
-        return "";
-    }
-    return clsx("relative", /**
-		 * Gated on :focus-visible, not :focus-within: the underline is hidden to make
-		 * room for the focus ring, and the ring itself is keyboard-only. On
-		 * :focus-within the underline would also vanish on a mouse click, with no
-		 * ring taking its place.
-		 */ "has-[:focus-visible]:static", "has-[:focus-visible]: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");
+    if (!active) return "";
+    return clsx("relative", "has-[:focus-visible]:static", "has-[:focus-visible]:after:border-transparent", "after:absolute", "after:content-['']", "after:border-b-2", "after:-bottom-1", "after:left-0", "after:right-0", "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({
+    const buttonClasses = clsx("flex items-center cursor-pointer", "h-6 px-1 sm:px-2", "text-sm font-bold", "rounded-xs", getTextColorClassesForHeaderFooter({
         mode,
         hasBlur
-    }), // Focus styles.
-    "focus-visible:outline", "focus-visible:outline-2", "focus-visible:outline-offset-2", "focus-visible: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);
+    }), "focus-visible:outline", "focus-visible:outline-2", "focus-visible:outline-offset-2", "focus-visible:outline-focus-medium", "hover:text-copy-light-hover", "hover:bg-action-darker-hover", "active:text-copy-medium-active", "active:bg-action-dark-active", className);
     const wrapperClasses = getActiveIndicatorClasses(active);
-    return /*#__PURE__*/ jsx("div", {
+    return jsx("div", {
         className: wrapperClasses,
-        children: /*#__PURE__*/ jsxs("button", {
+        children: jsxs("button", {
             className: buttonClasses,
             type: "button",
             onClick: onClick,
             children: [
-                /*#__PURE__*/ jsx("span", {
+                jsx("span", {
                     className: "text-copy-light",
                     children: children
                 }),
-                labelRight && /*#__PURE__*/ jsx("span", {
+                labelRight && jsx("span", {
                     className: "pl-2",
                     children: labelRight
                 })
@@ -66,52 +39,34 @@ const ButtonSort = ({ active = false, className, onClick, labelRight, children,
         })
     });
 };
-
-
-
-
-
-
-
-/* =============================================================================
- * DataGridCellSort
- * ========================================================================== */ const DataGridCellSort = ({ className, children, cellId, onSort, sortDirection, sortedCell, slotLeft, slotRight, buttonClassName, align, ...rest })=>{
+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;
+            const currentDirection = isSorted && sortDirection ? sortDirection : void 0;
             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, {
+        if (isSorted && "asc" === sortDirection) return jsx(IconSortUp, {
+            size: "size-4",
+            monotone: true
+        });
+        if (isSorted && "desc" === sortDirection) return jsx(IconSortDown, {
+            size: "size-4",
+            monotone: true
+        });
+        return jsx(IconSort, {
             size: "size-4",
             monotone: true
         });
     };
     const getAriaSort = ()=>{
-        if (isSorted && sortDirection === "asc") {
-            return "ascending";
-        }
-        if (isSorted && sortDirection === "desc") {
-            return "descending";
-        }
+        if (isSorted && "asc" === sortDirection) return "ascending";
+        if (isSorted && "desc" === sortDirection) return "descending";
         return "other";
     };
-    return /*#__PURE__*/ jsx(DataGridContext.Consumer, {
+    return jsx(DataGridContext.Consumer, {
         children: ({ mode, compact, cellWrapper, blurEffect })=>{
             const mainClasses = getCellClasses({
                 cellWrapper,
@@ -120,22 +75,21 @@ const ButtonSort = ({ active = false, className, onClick, labelRight, children,
                 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"
+                "justify-start": "left" === align || !align,
+                "justify-center": "center" === align,
+                "justify-end": "right" === align
             });
-            return /*#__PURE__*/ jsx("div", {
+            return jsx("div", {
                 className: mainClasses,
                 role: "columnheader",
                 "aria-sort": getAriaSort(),
                 ...rest,
-                children: /*#__PURE__*/ jsxs("div", {
+                children: jsxs("div", {
                     className: contentClasses,
                     children: [
                         slotLeft,
-                        /*#__PURE__*/ jsx(ButtonSort, {
+                        jsx(ButtonSort, {
                             mode: mode,
                             blurEffect: blurEffect,
                             active: isSorted,
@@ -151,7 +105,4 @@ const ButtonSort = ({ active = false, className, onClick, labelRight, children,
         }
     });
 };
-
-
-
 export { DataGridCellSort };

package/dist/DataGridConstants/index.js

@@ -1,9 +1,6 @@
 /*!
-  @versini/ui-datagrid v4.2.11
+  @versini/ui-datagrid v4.2.13
   © 2026 gizmette.com
 */
 
-
-
-
 export { BlurEffects, CellWrapper, SortDirections, ThemeModes } from "../7.js";

package/dist/DataGridFooter/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v4.2.11
+  @versini/ui-datagrid v4.2.13
   © 2026 gizmette.com
 */
 
@@ -8,43 +8,18 @@ import { useLayoutEffect, useRef } from "react";
 import { DataGridContext } from "../8.js";
 import { CellWrapper } from "../7.js";
 import { getFooterClasses } from "../y.js";
-
-
-
-
-
-
-
-
-/* =============================================================================
- * DataGridFooter
- * ========================================================================== */ const DataGridFooter = ({ className, children, ...rest })=>{
-    return /*#__PURE__*/ jsx(DataGridContext.Consumer, {
-        children: (ctx)=>/*#__PURE__*/ jsx(DataGridFooterInner, {
+const DataGridFooter = ({ className, children, ...rest })=>jsx(DataGridContext.Consumer, {
+        children: (ctx)=>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 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.
-	 *
-	 * useLayoutEffect (not useEffect) so registration — and therefore
-	 * effectiveStickyFooter — happens BEFORE the first paint. React flushes the
-	 * resulting parent state update synchronously before paint, so the grid's
-	 * first paint is already the sticky layout. With a passive effect the first
-	 * paint would be the non-sticky layout and flip one frame later, producing a
-	 * visible reposition on load.
-	 */ useLayoutEffect(()=>{
+    useLayoutEffect(()=>{
         ctx.registerFooter?.();
         return ()=>{
             ctx.unregisterFooter?.();
@@ -53,32 +28,13 @@ DataGridFooter.displayName = "DataGridFooter";
         ctx.registerFooter,
         ctx.unregisterFooter
     ]);
-    /**
-	 * Measure and report footer height for dynamic padding calculation. Uses
-	 * ResizeObserver to handle dynamic content changes.
-	 */ useLayoutEffect(()=>{
+    useLayoutEffect(()=>{
         const element = footerRef.current;
-        if (!element || !ctx.stickyFooter || !ctx.setFooterHeight) {
-            return;
-        }
-        /**
-		 * Initial synchronous measurement so the scrollable content's
-		 * paddingBottom is correct on the FIRST paint. React flushes this state
-		 * update before paint, so there is no one-frame layout shift (the same
-		 * approach useColumnMeasurement uses for column widths). The
-		 * ResizeObserver below still handles later dynamic changes.
-		 *
-		 * Both paths round to integer px. getBoundingClientRect().height (here)
-		 * and the observer's borderBoxSize.blockSize (below) can report slightly
-		 * different sub-pixel values for the same box; rounding keeps them in
-		 * agreement so the observer's first callback doesn't overwrite this value
-		 * with a fractional one and trigger a second shift.
-		 */ ctx.setFooterHeight(Math.round(element.getBoundingClientRect().height));
+        if (!element || !ctx.stickyFooter || !ctx.setFooterHeight) return;
+        ctx.setFooterHeight(Math.round(element.getBoundingClientRect().height));
         const observer = new ResizeObserver((entries)=>{
             const height = entries[0]?.borderBoxSize?.[0]?.blockSize;
-            if (height !== undefined) {
-                ctx.setFooterHeight?.(Math.round(height));
-            }
+            if (void 0 !== height) ctx.setFooterHeight?.(Math.round(height));
         });
         observer.observe(element);
         return ()=>observer.disconnect();
@@ -86,14 +42,13 @@ DataGridFooter.displayName = "DataGridFooter";
         ctx.stickyFooter,
         ctx.setFooterHeight
     ]);
-    return /*#__PURE__*/ jsx(DataGridContext.Provider, {
+    return jsx(DataGridContext.Provider, {
         value: {
             ...ctx,
             cellWrapper: CellWrapper.FOOTER,
-            // Footer is the last row (= total rowCount) when virtualized.
-            ariaRowIndex: ctx.rowCount != null ? ctx.rowCount : undefined
+            ariaRowIndex: null != ctx.rowCount ? ctx.rowCount : void 0
         },
-        children: /*#__PURE__*/ jsx("div", {
+        children: jsx("div", {
             ref: footerRef,
             role: "rowgroup",
             className: getFooterClasses({
@@ -107,7 +62,4 @@ DataGridFooter.displayName = "DataGridFooter";
         })
     });
 };
-
-
-
 export { DataGridFooter };

package/dist/DataGridHeader/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v4.2.11
+  @versini/ui-datagrid v4.2.13
   © 2026 gizmette.com
 */
 
@@ -8,20 +8,10 @@ import { useEffect, useId, useLayoutEffect, useRef } from "react";
 import { DataGridContext } from "../8.js";
 import { CellWrapper } from "../7.js";
 import { getCaptionClasses, getHeaderClasses } from "../y.js";
-
-
-
-
-
-
-
-
-/* =============================================================================
- * DataGridHeader
- * ========================================================================== */ const DataGridHeader = ({ caption, captionClassName, className, children, ...rest })=>{
+const DataGridHeader = ({ caption, captionClassName, className, children, ...rest })=>{
     const captionId = useId();
-    return /*#__PURE__*/ jsx(DataGridContext.Consumer, {
-        children: (ctx)=>/*#__PURE__*/ jsx(DataGridHeaderInner, {
+    return jsx(DataGridContext.Consumer, {
+        children: (ctx)=>jsx(DataGridHeaderInner, {
                 caption: caption,
                 captionClassName: captionClassName,
                 captionId: captionId,
@@ -33,22 +23,9 @@ import { getCaptionClasses, getHeaderClasses } from "../y.js";
     });
 };
 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 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.
-	 *
-	 * useLayoutEffect (not useEffect) so registration — and therefore
-	 * effectiveStickyHeader — happens BEFORE the first paint. React flushes the
-	 * resulting parent state update synchronously before paint, so the grid's
-	 * first paint is already the sticky layout. With a passive effect the first
-	 * paint would be the non-sticky layout and flip one frame later, producing a
-	 * visible reposition on load.
-	 */ useLayoutEffect(()=>{
+    useLayoutEffect(()=>{
         ctx.registerHeader?.();
         return ()=>{
             ctx.unregisterHeader?.();
@@ -57,49 +34,23 @@ DataGridHeader.displayName = "DataGridHeader";
         ctx.registerHeader,
         ctx.unregisterHeader
     ]);
-    // Register the caption ID with the parent DataGrid for aria-labelledby.
     useEffect(()=>{
-        if (caption && ctx.setCaptionId) {
-            ctx.setCaptionId(captionId);
-        }
+        if (caption && ctx.setCaptionId) ctx.setCaptionId(captionId);
         return ()=>{
-            if (ctx.setCaptionId) {
-                ctx.setCaptionId(undefined);
-            }
+            if (ctx.setCaptionId) ctx.setCaptionId(void 0);
         };
     }, [
         caption,
         captionId,
         ctx.setCaptionId
     ]);
-    /**
-	 * Measure and report header height for dynamic padding calculation. Uses
-	 * ResizeObserver to handle dynamic content changes (text wrapping, etc.).
-	 */ useLayoutEffect(()=>{
+    useLayoutEffect(()=>{
         const element = headerRef.current;
-        if (!element || !ctx.stickyHeader || !ctx.setHeaderHeight) {
-            return;
-        }
-        /**
-		 * Initial synchronous measurement so the scrollable content's paddingTop
-		 * is correct on the FIRST paint. React flushes this state update before
-		 * paint, so there is no one-frame layout shift (the same approach
-		 * useColumnMeasurement uses for column widths). The ResizeObserver below
-		 * still handles later dynamic changes (text wrap, font load, etc.).
-		 *
-		 * Both paths round to integer px. getBoundingClientRect().height (here)
-		 * and the observer's borderBoxSize.blockSize (below) can report slightly
-		 * different sub-pixel values for the same box; rounding keeps them in
-		 * agreement so the observer's first callback doesn't overwrite this value
-		 * with a fractional one and trigger a second shift. Integer rounding is
-		 * coarser than useColumnMeasurement's device-pixel snapping (1 / DPR), but
-		 * it is enough here: padding only needs to be stable, not pixel-perfect.
-		 */ ctx.setHeaderHeight(Math.round(element.getBoundingClientRect().height));
+        if (!element || !ctx.stickyHeader || !ctx.setHeaderHeight) return;
+        ctx.setHeaderHeight(Math.round(element.getBoundingClientRect().height));
         const observer = new ResizeObserver((entries)=>{
             const height = entries[0]?.borderBoxSize?.[0]?.blockSize;
-            if (height !== undefined) {
-                ctx.setHeaderHeight?.(Math.round(height));
-            }
+            if (void 0 !== height) ctx.setHeaderHeight?.(Math.round(height));
         });
         observer.observe(element);
         return ()=>observer.disconnect();
@@ -107,14 +58,13 @@ DataGridHeader.displayName = "DataGridHeader";
         ctx.stickyHeader,
         ctx.setHeaderHeight
     ]);
-    return /*#__PURE__*/ jsx(DataGridContext.Provider, {
+    return jsx(DataGridContext.Provider, {
         value: {
             ...ctx,
             cellWrapper: CellWrapper.HEADER,
-            // Header is row 1 when the grid is virtualized (rowCount set).
-            ariaRowIndex: ctx.rowCount != null ? 1 : undefined
+            ariaRowIndex: null != ctx.rowCount ? 1 : void 0
         },
-        children: /*#__PURE__*/ jsxs("div", {
+        children: jsxs("div", {
             ref: headerRef,
             role: "rowgroup",
             className: getHeaderClasses({
@@ -125,12 +75,12 @@ DataGridHeader.displayName = "DataGridHeader";
             }),
             ...rest,
             children: [
-                caption && /*#__PURE__*/ jsx("div", {
+                caption && jsx("div", {
                     id: captionId,
                     className: getCaptionClasses({
                         captionClassName,
                         mode: ctx.mode,
-                        hasBlur: Boolean(ctx.blurEffect && ctx.blurEffect !== "none"),
+                        hasBlur: Boolean(ctx.blurEffect && "none" !== ctx.blurEffect),
                         stickyHeader: Boolean(ctx.stickyHeader)
                     }),
                     children: caption
@@ -140,7 +90,4 @@ DataGridHeader.displayName = "DataGridHeader";
         })
     });
 };
-
-
-
 export { DataGridHeader };