@versini/ui-datagrid 3.1.0 → 3.1.2

package/dist/197.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v3.1.0
+  @versini/ui-datagrid v3.1.2
   © 2026 gizmette.com
 */
 

package/dist/430.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v3.1.0
+  @versini/ui-datagrid v3.1.2
   © 2026 gizmette.com
 */
 

package/dist/799.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v3.1.0
+  @versini/ui-datagrid v3.1.2
   © 2026 gizmette.com
 */
 

package/dist/91.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v3.1.0
+  @versini/ui-datagrid v3.1.2
   © 2026 gizmette.com
 */
 

package/dist/DataGrid/DataGrid.d.ts

@@ -1,2 +1,2 @@
 import type { DataGridProps } from "./DataGridTypes";
-export declare const DataGrid: ({ className, wrapperClassName, children, mode, compact, stickyHeader, stickyFooter, blurEffect, maxHeight, loading, columns, ...rest }: DataGridProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DataGrid: ({ className, wrapperClassName, children, mode, compact, stickyHeader, stickyFooter, blurEffect, maxHeight, loading, columns, ...rest }: DataGridProps) => import("react").JSX.Element;

package/dist/DataGrid/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v3.1.0
+  @versini/ui-datagrid v3.1.2
   © 2026 gizmette.com
 */
 

package/dist/DataGridAnimated/AnimatedWrapper.d.ts

@@ -48,4 +48,4 @@ export type AnimatedWrapperProps = {
  * ```
  *
  */
-export declare const AnimatedWrapper: ({ children, dependency, duration, enabled, className, }: AnimatedWrapperProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AnimatedWrapper: ({ children, dependency, duration, enabled, className, }: AnimatedWrapperProps) => import("react").JSX.Element;

package/dist/DataGridAnimated/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v3.1.0
+  @versini/ui-datagrid v3.1.2
   © 2026 gizmette.com
 */
 

package/dist/DataGridBody/DataGridBody.d.ts

@@ -1,2 +1,2 @@
 import type { DataGridBodyProps } from "../DataGrid/DataGridTypes";
-export declare const DataGridBody: ({ className, children, noData, noDataText, ...rest }: DataGridBodyProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DataGridBody: ({ className, children, noData, noDataText, ...rest }: DataGridBodyProps) => import("react").JSX.Element;

package/dist/DataGridBody/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v3.1.0
+  @versini/ui-datagrid v3.1.2
   © 2026 gizmette.com
 */
 

package/dist/DataGridCell/DataGridCell.d.ts

@@ -1,2 +1,2 @@
 import type { DataGridCellProps } from "../DataGrid/DataGridTypes";
-export declare const DataGridCell: ({ className, children, align, borderLeft, borderRight, colSpan, style, ...rest }: DataGridCellProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DataGridCell: ({ className, children, align, borderLeft, borderRight, colSpan, style, ...rest }: DataGridCellProps) => import("react").JSX.Element;

package/dist/DataGridCell/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v3.1.0
+  @versini/ui-datagrid v3.1.2
   © 2026 gizmette.com
 */
 

package/dist/DataGridCellSort/ButtonSort.d.ts

@@ -4,5 +4,5 @@ type ButtonSortProps = Pick<ButtonSortTypes.Props, "active" | "className" | "onC
 export declare const ButtonSort: ({ active, className, onClick, labelRight, children, blurEffect, mode, }: ButtonSortProps & {
     mode: ThemeMode;
     blurEffect?: BlurEffect;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export {};

package/dist/DataGridCellSort/DataGridCellSort.d.ts

@@ -1,2 +1,2 @@
 import type { DataGridCellSortProps } from "../DataGrid/DataGridTypes";
-export declare const DataGridCellSort: ({ className, children, cellId, onSort, sortDirection, sortedCell, slotLeft, slotRight, buttonClassName, align, ...rest }: DataGridCellSortProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DataGridCellSort: ({ className, children, cellId, onSort, sortDirection, sortedCell, slotLeft, slotRight, buttonClassName, align, ...rest }: DataGridCellSortProps) => import("react").JSX.Element;

package/dist/DataGridCellSort/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v3.1.0
+  @versini/ui-datagrid v3.1.2
   © 2026 gizmette.com
 */
 

package/dist/DataGridConstants/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v3.1.0
+  @versini/ui-datagrid v3.1.2
   © 2026 gizmette.com
 */
 

package/dist/DataGridFooter/DataGridFooter.d.ts

@@ -1,5 +1,5 @@
 import type { DataGridFooterProps } from "../DataGrid/DataGridTypes";
 export declare const DataGridFooter: {
-    ({ className, children, ...rest }: DataGridFooterProps): import("react/jsx-runtime").JSX.Element;
+    ({ className, children, ...rest }: DataGridFooterProps): import("react").JSX.Element;
     displayName: string;
 };

package/dist/DataGridFooter/index.js

@@ -1,10 +1,10 @@
 /*!
-  @versini/ui-datagrid v3.1.0
+  @versini/ui-datagrid v3.1.2
   © 2026 gizmette.com
 */
 
 import { jsx } from "react/jsx-runtime";
-import { useEffect, useLayoutEffect, useRef } from "react";
+import { useLayoutEffect, useRef } from "react";
 import { DataGridContext } from "../430.js";
 import { CellWrapper } from "../799.js";
 import { getFooterClasses } from "../91.js";
@@ -37,7 +37,14 @@ DataGridFooter.displayName = "DataGridFooter";
     /**
 	 * Register this footer with the parent DataGrid on mount. This enables sticky
 	 * footer behavior regardless of nesting depth.
-	 */ useEffect(()=>{
+	 *
+	 * 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(()=>{
         ctx.registerFooter?.();
         return ()=>{
             ctx.unregisterFooter?.();
@@ -54,10 +61,23 @@ DataGridFooter.displayName = "DataGridFooter";
         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));
         const observer = new ResizeObserver((entries)=>{
             const height = entries[0]?.borderBoxSize?.[0]?.blockSize;
             if (height !== undefined) {
-                ctx.setFooterHeight?.(height);
+                ctx.setFooterHeight?.(Math.round(height));
             }
         });
         observer.observe(element);

package/dist/DataGridHeader/DataGridHeader.d.ts

@@ -1,5 +1,5 @@
 import type { DataGridHeaderProps } from "../DataGrid/DataGridTypes";
 export declare const DataGridHeader: {
-    ({ caption, captionClassName, className, children, ...rest }: DataGridHeaderProps): import("react/jsx-runtime").JSX.Element;
+    ({ caption, captionClassName, className, children, ...rest }: DataGridHeaderProps): import("react").JSX.Element;
     displayName: string;
 };

package/dist/DataGridHeader/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v3.1.0
+  @versini/ui-datagrid v3.1.2
   © 2026 gizmette.com
 */
 
@@ -41,7 +41,14 @@ DataGridHeader.displayName = "DataGridHeader";
     /**
 	 * Register this header with the parent DataGrid on mount. This enables sticky
 	 * header behavior regardless of nesting depth.
-	 */ useEffect(()=>{
+	 *
+	 * 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(()=>{
         ctx.registerHeader?.();
         return ()=>{
             ctx.unregisterHeader?.();
@@ -73,10 +80,25 @@ DataGridHeader.displayName = "DataGridHeader";
         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));
         const observer = new ResizeObserver((entries)=>{
             const height = entries[0]?.borderBoxSize?.[0]?.blockSize;
             if (height !== undefined) {
-                ctx.setHeaderHeight?.(height);
+                ctx.setHeaderHeight?.(Math.round(height));
             }
         });
         observer.observe(element);

package/dist/DataGridInfinite/DataGridInfiniteBody.d.ts

@@ -117,4 +117,4 @@ export type DataGridInfiniteBodyRef = {
  */
 export declare function DataGridInfiniteBody<T>({ data, children: renderRow, batchSize, threshold, rootMargin, onVisibleCountChange, className, noData, noDataText, ref, }: DataGridInfiniteBodyProps<T> & {
     ref?: React.Ref<DataGridInfiniteBodyRef>;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/dist/DataGridInfinite/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v3.1.0
+  @versini/ui-datagrid v3.1.2
   © 2026 gizmette.com
 */
 

package/dist/DataGridRow/DataGridRow.d.ts

@@ -1,2 +1,3 @@
+import React from "react";
 import type { DataGridRowProps } from "../DataGrid/DataGridTypes";
-export declare const DataGridRow: ({ className, children, active, style: userStyle, ...rest }: DataGridRowProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DataGridRow: ({ className, children, active, style: userStyle, ...rest }: DataGridRowProps) => React.JSX.Element;

package/dist/DataGridRow/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v3.1.0
+  @versini/ui-datagrid v3.1.2
   © 2026 gizmette.com
 */
 

package/dist/DataGridSorting/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v3.1.0
+  @versini/ui-datagrid v3.1.2
   © 2026 gizmette.com
 */
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-datagrid",
-	"version": "3.1.0",
+	"version": "3.1.2",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -87,16 +87,16 @@
 	},
 	"devDependencies": {
 		"@testing-library/jest-dom": "6.9.1",
-		"@versini/ui-button": "15.0.4",
+		"@versini/ui-button": "15.0.5",
 		"@versini/ui-types": "10.0.0"
 	},
 	"dependencies": {
-		"@versini/ui-icons": "4.28.0",
+		"@versini/ui-icons": "4.29.0",
 		"clsx": "2.1.1",
-		"tailwindcss": "4.3.0"
+		"tailwindcss": "4.3.1"
 	},
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "8ae610468c121bc5ed1438573a4d2ab7068c053d"
+	"gitHead": "f25e4b557175f745705c249d10e2e77dc02ed462"
 }