@versini/ui-datagrid 3.0.12 → 3.1.1

package/dist/{131.js → 197.js}

@@ -1,10 +1,12 @@
 /*!
-  @versini/ui-datagrid v3.0.12
+  @versini/ui-datagrid v3.1.1
   © 2026 gizmette.com
 */
 
-import { DataGridContext, clsx } from "./926.js";
-import { useRef, useContext, useLayoutEffect } from "./511.js";
+import clsx from "clsx";
+import { useContext, useLayoutEffect, useRef } from "react";
+import { DataGridContext } from "./430.js";
+
 
 
 /**
@@ -13,12 +15,14 @@ import { useRef, useContext, useLayoutEffect } from "./511.js";
  * are provided, or define their own grid otherwise.
  *
  * @param className - Additional class name to merge
+ *
  */ function getBodyClass(className) {
     return clsx("contents", className);
 }
 
 
 
+
 /**
  * Snap a CSS pixel value to the nearest device pixel.
  *
@@ -36,7 +40,7 @@ import { useRef, useContext, useLayoutEffect } from "./511.js";
     // Guard against invalid DPR values.
     const dpr = Number.isFinite(devicePixelRatio) && devicePixelRatio > 0 ? devicePixelRatio : 1;
     /**
-	 * Note: `window.devicePixelRatio` can be < 1 in some zoom/scaling scenarios.
+	 * NOTE: `window.devicePixelRatio` can be < 1 in some zoom/scaling scenarios.
 	 * We intentionally accept any DPR > 0 rather than clamping to 1 so that we
 	 * still snap to the real device pixel grid.
 	 */ const quantum = 1 / dpr;

package/dist/{926.js → 430.js}

@@ -1,9 +1,9 @@
 /*!
-  @versini/ui-datagrid v3.0.12
+  @versini/ui-datagrid v3.1.1
   © 2026 gizmette.com
 */
 
-import { createContext } from "./511.js";
+import { createContext } from "react";
 
 
 
@@ -12,4 +12,3 @@ const DataGridContext = createContext({
 });
 
 export { DataGridContext };
-export { default as clsx } from "clsx";

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

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

package/dist/{298.js → 91.js}

@@ -1,10 +1,11 @@
 /*!
-  @versini/ui-datagrid v3.0.12
+  @versini/ui-datagrid v3.1.1
   © 2026 gizmette.com
 */
 
-import { clsx } from "./926.js";
-import { BlurEffects, CellWrapper } from "./46.js";
+import clsx from "clsx";
+import { BlurEffects, CellWrapper } from "./799.js";
+
 
 
 
@@ -60,6 +61,35 @@ const getTextColorClassesForHeaderFooter = ({ mode, hasBlur })=>clsx({
         "dark:border-table-light": isSys(mode),
         "dark:border-table-dark": isAlt(mode)
     });
+/**
+ * Hover classes for body rows.
+ *
+ * The hover lifts both the background and the text color so the highlighted row
+ * reads as a single, cohesive change (mirroring the light-mode behavior where
+ * the font color shifts too).
+ *
+ * The shade is tuned per surface so the lift stays proportional:
+ * - Dark surfaces (slate-900 base) only step up to `table-dark-hover`
+ *   (slate-700) instead of the much brighter `surface-medium` (slate-500),
+ *   which felt harsh against very dark tables, and brighten the text to
+ *   `copy-lighter` (white).
+ * - Light surfaces (slate-300 base) keep the established `surface-medium`
+ *   (slate-500) background with `copy-light` (slate-200) text.
+ *
+ * Pairing matches `getBorderClasses`/`getSurfaceBackgroundClasses` so the hover
+ * always tracks the active surface, including the OS-driven `dark:` flips that
+ * `system` and `alt-system` perform.
+ *
+ */ const getRowHoverClasses = ({ mode })=>clsx(/**
+		 * Smooth the hover so quick mouse sweeps fade rather than flash. Animating
+		 * the row's background- and (inherited) text-color is enough; cells stay
+		 * transparent and follow the row's transitioning color.
+		 */ "transition-colors duration-300 ease-in-out motion-reduce:transition-none", {
+        "hover:bg-table-dark-hover hover:text-copy-lighter": isDarkish(mode),
+        "hover:bg-surface-medium hover:text-copy-light": isLightish(mode),
+        "dark:hover:bg-surface-medium dark:hover:text-copy-light": isSys(mode),
+        "dark:hover:bg-table-dark-hover dark:hover:text-copy-lighter": isAlt(mode)
+    });
 /**
  * Blur effect classes for sticky elements.
  */ const getBlurClasses = ({ blurEffect })=>clsx({
@@ -68,9 +98,9 @@ const getTextColorClassesForHeaderFooter = ({ mode, hasBlur })=>clsx({
         "backdrop-blur-lg": blurEffect === BlurEffects.LARGE
     });
 /**
- * Loading text classes for loading state. Rendered as a high-contrast pill
- * with a fixed dark background and light text so the message stays legible
- * against the blurred content behind it regardless of the grid mode.
+ * Loading text classes for loading state. Rendered as a high-contrast pill with
+ * a fixed dark background and light text so the message stays legible against
+ * the blurred content behind it regardless of the grid mode.
  */ const getLoadingTextClasses = ()=>"px-5 py-2 rounded-full shadow-lg text-sm font-semibold bg-surface-darker text-copy-light";
 /**
  * Overlay classes for loading state. Uses z-30/z-40 to layer above the sticky
@@ -170,7 +200,9 @@ const ROW_LAYOUT = "group grid items-center";
         return clsx(ROW_LAYOUT, className);
     }
     const borderClasses = isLastRow !== undefined ? isLastRow ? "border-b border-b-transparent dark:border-b-transparent" : "border-b" : "border-b last:border-0";
-    return clsx(ROW_LAYOUT, borderClasses, "hover:bg-surface-medium hover:text-copy-light", getBorderClasses({
+    return clsx(ROW_LAYOUT, borderClasses, getRowHoverClasses({
+        mode
+    }), getBorderClasses({
         mode
     }), className);
 };

package/dist/DataGrid/DataGridTypes.d.ts

@@ -101,8 +101,8 @@ export type DataGridHeaderProps = {
 } & React.HTMLAttributes<HTMLDivElement>;
 export type DataGridBodyProps = ({
     /**
-     * If true, applies styles for an empty state (e.g. removing extra row borders).
-     * Used when there are no rows to display.
+     * If true, applies styles for an empty state (e.g. removing extra row
+     * borders). Used when there are no rows to display.
      */
     noData: true;
     /**
@@ -115,8 +115,8 @@ export type DataGridBodyProps = ({
     noDataText?: string;
 } | {
     /**
-     * If true, applies styles for an empty state (e.g. removing extra row borders).
-     * Used when there are no rows to display.
+     * If true, applies styles for an empty state (e.g. removing extra row
+     * borders). Used when there are no rows to display.
      * @default false
      */
     noData?: false;

package/dist/DataGrid/index.js

@@ -1,12 +1,15 @@
 /*!
-  @versini/ui-datagrid v3.0.12
+  @versini/ui-datagrid v3.1.1
   © 2026 gizmette.com
 */
 
-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";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useState } from "react";
+import { BlurEffects } from "../799.js";
+import { getDataGridClasses } from "../91.js";
+import { DataGridContext } from "../430.js";
+
+
 
 
 
@@ -172,4 +175,4 @@ import { DataGridContext } from "../926.js";
 
 
 export { DataGrid };
-export { DataGridContext } from "../926.js";
+export { DataGridContext } from "../430.js";

package/dist/DataGridAnimated/index.js

@@ -1,9 +1,12 @@
 /*!
-  @versini/ui-datagrid v3.0.12
+  @versini/ui-datagrid v3.1.1
   © 2026 gizmette.com
 */
 
-import { useState, useLayoutEffect, useRef, jsx } from "../511.js";
+import { jsx } from "react/jsx-runtime";
+import { useLayoutEffect, useRef, useState } from "react";
+
+
 
 
 const DEFAULT_ANIMATION_DURATION = 300;

package/dist/DataGridBody/getBodyClass.d.ts

@@ -4,5 +4,6 @@
  * are provided, or define their own grid otherwise.
  *
  * @param className - Additional class name to merge
+ *
  */
 export declare function getBodyClass(className?: string): string;

package/dist/DataGridBody/index.js

@@ -1,12 +1,15 @@
 /*!
-  @versini/ui-datagrid v3.0.12
+  @versini/ui-datagrid v3.1.1
   © 2026 gizmette.com
 */
 
-import { useRef, useContext, jsx } from "../511.js";
-import { DataGridContext } from "../926.js";
-import { getBodyClass, useColumnMeasurement } from "../131.js";
-import { CellWrapper } from "../46.js";
+import { jsx } from "react/jsx-runtime";
+import { useContext, useRef } from "react";
+import { DataGridContext } from "../430.js";
+import { getBodyClass, useColumnMeasurement } from "../197.js";
+import { CellWrapper } from "../799.js";
+
+
 
 
 

package/dist/DataGridCell/index.js

@@ -1,11 +1,12 @@
 /*!
-  @versini/ui-datagrid v3.0.12
+  @versini/ui-datagrid v3.1.1
   © 2026 gizmette.com
 */
 
-import { jsx } from "../511.js";
-import { DataGridContext } from "../926.js";
-import { getCellRole, getCellClasses } from "../298.js";
+import { jsx } from "react/jsx-runtime";
+import { DataGridContext } from "../430.js";
+import { getCellRole, getCellClasses } from "../91.js";
+
 
 
 

package/dist/DataGridCellSort/index.js

@@ -1,13 +1,18 @@
 /*!
-  @versini/ui-datagrid v3.0.12
+  @versini/ui-datagrid v3.1.1
   © 2026 gizmette.com
 */
 
+import { jsx, jsxs } from "react/jsx-runtime";
 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";
+import clsx from "clsx";
+import { BlurEffects } from "../799.js";
+import { getCellClasses, getTextColorClassesForHeaderFooter } from "../91.js";
+import { DataGridContext } from "../430.js";
+
+
+
+
 
 
 

package/dist/DataGridConstants/index.js

@@ -1,9 +1,9 @@
 /*!
-  @versini/ui-datagrid v3.0.12
+  @versini/ui-datagrid v3.1.1
   © 2026 gizmette.com
 */
 
 
 
 
-export { BlurEffects, CellWrapper, SortDirections, ThemeModes } from "../46.js";
+export { BlurEffects, CellWrapper, SortDirections, ThemeModes } from "../799.js";

package/dist/DataGridFooter/index.js

@@ -1,12 +1,15 @@
 /*!
-  @versini/ui-datagrid v3.0.12
+  @versini/ui-datagrid v3.1.1
   © 2026 gizmette.com
 */
 
-import { useLayoutEffect, useRef, useEffect, jsx } from "../511.js";
-import { DataGridContext } from "../926.js";
-import { CellWrapper } from "../46.js";
-import { getFooterClasses } from "../298.js";
+import { jsx } from "react/jsx-runtime";
+import { useLayoutEffect, useRef } from "react";
+import { DataGridContext } from "../430.js";
+import { CellWrapper } from "../799.js";
+import { getFooterClasses } from "../91.js";
+
+
 
 
 
@@ -34,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?.();
@@ -51,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/index.js

@@ -1,12 +1,15 @@
 /*!
-  @versini/ui-datagrid v3.0.12
+  @versini/ui-datagrid v3.1.1
   © 2026 gizmette.com
 */
 
-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";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useLayoutEffect, useRef } from "react";
+import { DataGridContext } from "../430.js";
+import { CellWrapper } from "../799.js";
+import { getCaptionClasses, getHeaderClasses } from "../91.js";
+
+
 
 
 
@@ -38,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?.();
@@ -70,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

@@ -1,7 +1,7 @@
 export type DataGridInfiniteBodyProps<T> = ({
     /**
-     * If true, displays an empty state instead of infinite scroll content.
-     * When noData is true, data, children, and scroll-related props are optional.
+     * If true, displays an empty state instead of infinite scroll content. When
+     * noData is true, data, children, and scroll-related props are optional.
      */
     noData: true;
     /**
@@ -10,7 +10,8 @@ export type DataGridInfiniteBodyProps<T> = ({
     data?: T[];
     /**
      * Render function for each row. Should return a DataGridRow element. The
-     * consumer is responsible for providing the key prop on the returned element.
+     * consumer is responsible for providing the key prop on the returned
+     * element.
      */
     children?: (item: T, index: number) => React.ReactNode;
     /**
@@ -29,7 +30,8 @@ export type DataGridInfiniteBodyProps<T> = ({
     data: T[];
     /**
      * Render function for each row. Should return a DataGridRow element. The
-     * consumer is responsible for providing the key prop on the returned element.
+     * consumer is responsible for providing the key prop on the returned
+     * element.
      */
     children: (item: T, index: number) => React.ReactNode;
     noDataText?: never;

package/dist/DataGridInfinite/index.js

@@ -1,12 +1,15 @@
 /*!
-  @versini/ui-datagrid v3.0.12
+  @versini/ui-datagrid v3.1.1
   © 2026 gizmette.com
 */
 
-import { useMemo, useContext, useImperativeHandle, useState, useCallback, useRef, useEffect, jsx } from "../511.js";
-import { DataGridContext } from "../926.js";
-import { CellWrapper } from "../46.js";
-import { getBodyClass, useColumnMeasurement } from "../131.js";
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { DataGridContext } from "../430.js";
+import { CellWrapper } from "../799.js";
+import { getBodyClass, useColumnMeasurement } from "../197.js";
+
+
 
 
 

package/dist/DataGridRow/index.js

@@ -1,12 +1,15 @@
 /*!
-  @versini/ui-datagrid v3.0.12
+  @versini/ui-datagrid v3.1.1
   © 2026 gizmette.com
 */
 
-import { react, jsx } from "../511.js";
-import { DataGridContext } from "../926.js";
-import { CellWrapper } from "../46.js";
-import { getRowClasses } from "../298.js";
+import { jsx } from "react/jsx-runtime";
+import react from "react";
+import { DataGridContext } from "../430.js";
+import { CellWrapper } from "../799.js";
+import { getRowClasses } from "../91.js";
+
+
 
 
 

package/dist/DataGridSorting/index.js

@@ -1,9 +1,9 @@
 /*!
-  @versini/ui-datagrid v3.0.12
+  @versini/ui-datagrid v3.1.1
   © 2026 gizmette.com
 */
 
-import { SortDirections } from "../46.js";
+import { SortDirections } from "../799.js";
 
 
 /**
@@ -233,4 +233,4 @@ import { SortDirections } from "../46.js";
 
 
 export { getNextSortConfig, getOppositeSortDirection, sortByBoolean, sortByDate, sortByNumber, sortByString, sortItems, toggleSortDirection };
-export { SortDirections } from "../46.js";
+export { SortDirections } from "../799.js";

package/dist/utilities/classes.d.ts

@@ -28,6 +28,29 @@ export declare const getHeaderFooterBackgroundClasses: ({ hasBlur, sticky, }: {
 export declare const getBorderClasses: ({ mode }: {
     mode: ThemeMode;
 }) => string;
+/**
+ * Hover classes for body rows.
+ *
+ * The hover lifts both the background and the text color so the highlighted row
+ * reads as a single, cohesive change (mirroring the light-mode behavior where
+ * the font color shifts too).
+ *
+ * The shade is tuned per surface so the lift stays proportional:
+ * - Dark surfaces (slate-900 base) only step up to `table-dark-hover`
+ *   (slate-700) instead of the much brighter `surface-medium` (slate-500),
+ *   which felt harsh against very dark tables, and brighten the text to
+ *   `copy-lighter` (white).
+ * - Light surfaces (slate-300 base) keep the established `surface-medium`
+ *   (slate-500) background with `copy-light` (slate-200) text.
+ *
+ * Pairing matches `getBorderClasses`/`getSurfaceBackgroundClasses` so the hover
+ * always tracks the active surface, including the OS-driven `dark:` flips that
+ * `system` and `alt-system` perform.
+ *
+ */
+export declare const getRowHoverClasses: ({ mode }: {
+    mode: ThemeMode;
+}) => string;
 /**
  * Blur effect classes for sticky elements.
  */
@@ -35,9 +58,9 @@ export declare const getBlurClasses: ({ blurEffect }: {
     blurEffect?: BlurEffect;
 }) => string;
 /**
- * Loading text classes for loading state. Rendered as a high-contrast pill
- * with a fixed dark background and light text so the message stays legible
- * against the blurred content behind it regardless of the grid mode.
+ * Loading text classes for loading state. Rendered as a high-contrast pill with
+ * a fixed dark background and light text so the message stays legible against
+ * the blurred content behind it regardless of the grid mode.
  */
 export declare const getLoadingTextClasses: () => string;
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-datagrid",
-	"version": "3.0.12",
+	"version": "3.1.1",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -98,5 +98,5 @@
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "fc3839da4f630dd7954e8d9537f5cbf1762f9d85"
+	"gitHead": "4fa14b05aa9384b4ab44800ac9bcc70c3211bec9"
 }

package/dist/511.js

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