@versini/ui-datagrid 4.2.13 → 5.0.0

package/README.md

@@ -6,7 +6,7 @@ A data grid component library for React built with div-based ARIA grid layout fo
 - **Flexible Layout**: Div-based structure allows for complex styling
 - **CSS Grid Columns**: Define column widths with CSS Grid track sizes
 - **Row Virtualization**: Windowing for large datasets — only viewport rows stay in the DOM
-- **Animated Height**: Smooth height transitions when content changes
+- **Animated Height**: Smooth height transitions when content changes (`animateHeight`)
 - **Sorting**: Built-in sorting utilities and sortable column headers
 - **Sticky Header/Footer**: With optional blur effects
 - **Loading States**: Built-in loading overlay with spinner
@@ -38,12 +38,6 @@ import { DataGridCellSort } from "@versini/ui-datagrid/cell-sort";
 // Virtualized body for large datasets
 import { DataGridInfiniteBody } from "@versini/ui-datagrid/infinite";
 
-// Animated height wrapper
-import {
-  AnimatedWrapper,
-  useAnimatedHeight
-} from "@versini/ui-datagrid/animated";
-
 // Sorting utilities
 import {
   sortByDate,
@@ -144,39 +138,42 @@ import { DataGridHeader } from "@versini/ui-datagrid/header";
 import { DataGridRow } from "@versini/ui-datagrid/row";
 import { DataGridCell } from "@versini/ui-datagrid/cell";
 import { DataGridInfiniteBody } from "@versini/ui-datagrid/infinite";
-import { AnimatedWrapper } from "@versini/ui-datagrid/animated";
 
 function MyInfiniteTable({ data }) {
   const [visibleCount, setVisibleCount] = useState(0);
 
   return (
-    <AnimatedWrapper dependency={visibleCount}>
-      <DataGrid maxHeight="500px" stickyHeader>
-        <DataGridHeader caption={`Showing ${visibleCount} of ${data.length}`}>
-          <DataGridRow>
-            <DataGridCell>Name</DataGridCell>
-            <DataGridCell>Date</DataGridCell>
-          </DataGridRow>
-        </DataGridHeader>
+    <DataGrid maxHeight="500px" stickyHeader animateHeight>
+      <DataGridHeader caption={`Showing ${visibleCount} of ${data.length}`}>
+        <DataGridRow>
+          <DataGridCell>Name</DataGridCell>
+          <DataGridCell>Date</DataGridCell>
+        </DataGridRow>
+      </DataGridHeader>
 
-        <DataGridInfiniteBody
-          data={data}
-          estimatedRowHeight={48}
-          onVisibleCountChange={(count) => setVisibleCount(count)}
-        >
-          {(item) => (
-            <DataGridRow key={item.id}>
-              <DataGridCell>{item.name}</DataGridCell>
-              <DataGridCell>{item.date}</DataGridCell>
-            </DataGridRow>
-          )}
-        </DataGridInfiniteBody>
-      </DataGrid>
-    </AnimatedWrapper>
+      <DataGridInfiniteBody
+        data={data}
+        estimatedRowHeight={48}
+        onVisibleCountChange={(count) => setVisibleCount(count)}
+      >
+        {(item) => (
+          <DataGridRow key={item.id}>
+            <DataGridCell>{item.name}</DataGridCell>
+            <DataGridCell>{item.date}</DataGridCell>
+          </DataGridRow>
+        )}
+      </DataGridInfiniteBody>
+    </DataGrid>
   );
 }
 ```
 
+### Animated height
+
+`animateHeight` animates the grid's height over 300ms whenever its content grows or shrinks, and keeps its border, shadow and rounded corners intact while it does. It follows the grid's measured content height, so there is no dependency value to pass. A width change, such as a window resize, is not animated, and neither is the grid mounting: a loading line swapped for a freshly mounted grid appears without a transition. It is skipped when the user prefers reduced motion. It is meant for grids bounded by `maxHeight` or a sticky header/footer; a page-scroll `DataGridInfiniteBody` changes height as rows are measured while scrolling.
+
+Migrating from `AnimatedWrapper` (removed in v5): replace `<AnimatedWrapper dependency={n}><DataGrid …></AnimatedWrapper>` with `<DataGrid animateHeight …>`. The duration is fixed at 300ms, and there is no replacement for `duration`, `enabled`, `className`, the standalone `useAnimatedHeight` hook or its `isAnimating` value.
+
 `DataGridInfiniteBody` keeps `columns` (including intrinsic `auto` tracks) working because it renders rows in normal grid flow between two full-span spacer elements (not absolutely positioned). It windows against the DataGrid's own scroll container — created when you set `maxHeight` or a sticky header/footer — and otherwise against the page (window scroll). To scroll inside your own bounded container, set `maxHeight` on the `DataGrid` rather than relying on an outer wrapper.
 
 Notes:
@@ -335,6 +332,7 @@ function MySortableTable({ data }) {
 | Prop               | Type                                            | Default    | Description                            |
 | ------------------ | ----------------------------------------------- | ---------- | -------------------------------------- |
 | `mode`             | `'dark' \| 'light' \| 'system' \| 'alt-system'` | `'system'` | Theme mode                             |
+| `animateHeight`    | `boolean`                                       | `false`    | Animate height when content changes    |
 | `compact`          | `boolean`                                       | `false`    | Reduced padding                        |
 | `stickyHeader`     | `boolean`                                       | `false`    | Fixed header while scrolling           |
 | `stickyFooter`     | `boolean`                                       | `false`    | Fixed footer while scrolling           |

package/dist/7.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v4.2.13
+  @versini/ui-datagrid v5.0.0
   © 2026 gizmette.com
 */
 

package/dist/8.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v4.2.13
+  @versini/ui-datagrid v5.0.0
   © 2026 gizmette.com
 */
 

package/dist/DataGrid/DataGrid.d.ts

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

package/dist/DataGrid/DataGridTypes.d.ts

@@ -16,6 +16,14 @@ export type DataGridProps = {
      * The content of the DataGrid (DataGridHeader, DataGridBody, DataGridFooter).
      */
     children: React.ReactNode;
+    /**
+     * If true, the data grid animates its height whenever its content grows or
+     * shrinks, e.g. when rows are filtered or swapped. The grid's own border,
+     * shadow and rounded corners stay intact throughout. A change in width, such
+     * as a window resize, is not animated.
+     * @default false
+     */
+    animateHeight?: boolean;
     /**
      * CSS class to apply to the data grid.
      */

package/dist/DataGrid/index.js

@@ -1,14 +1,94 @@
 /*!
-  @versini/ui-datagrid v4.2.13
+  @versini/ui-datagrid v5.0.0
   © 2026 gizmette.com
 */
 
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useMemo, useRef, useState } from "react";
+import { useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { BlurEffects } from "../7.js";
 import { getDataGridClasses } from "../y.js";
 import { DataGridContext } from "../8.js";
-const DataGrid = ({ className, wrapperClassName, children, mode = "system", compact = false, stickyHeader = false, stickyFooter = false, blurEffect = BlurEffects.NONE, maxHeight, loading = false, columns, ...rest })=>{
+const HEIGHT_ANIMATION_DURATION = 300;
+function prefersReducedMotion() {
+    return Boolean(window.matchMedia?.("(prefers-reduced-motion: reduce)").matches);
+}
+function useHeightAnimation(wrapper, grid, enabled) {
+    useLayoutEffect(()=>{
+        if (!enabled || !wrapper || !grid) return;
+        const scroller = grid.parentElement;
+        const clipped = scroller && scroller !== wrapper ? [
+            wrapper,
+            scroller
+        ] : [
+            wrapper
+        ];
+        let wrapperHeight = wrapper.offsetHeight;
+        let gridHeight = grid.offsetHeight;
+        let gridWidth = grid.offsetWidth;
+        let animation;
+        let frame = 0;
+        const unlock = ()=>{
+            for (const el of clipped)el.style.removeProperty("overflow-y");
+        };
+        const settle = ()=>{
+            unlock();
+            wrapperHeight = wrapper.offsetHeight;
+            if (animation) {
+                animation = void 0;
+                frame = requestAnimationFrame(()=>observer.observe(wrapper));
+            }
+        };
+        const observer = new ResizeObserver((entries)=>{
+            if (!entries.some((entry)=>entry.target === grid)) {
+                wrapperHeight = wrapper.offsetHeight;
+                return;
+            }
+            const nextGridHeight = grid.offsetHeight;
+            const nextGridWidth = grid.offsetWidth;
+            const resized = nextGridWidth !== gridWidth;
+            const heightChanged = nextGridHeight !== gridHeight;
+            gridHeight = nextGridHeight;
+            gridWidth = nextGridWidth;
+            if (!heightChanged || resized && !animation) {
+                wrapperHeight = wrapper.offsetHeight;
+                return;
+            }
+            const from = animation ? wrapper.offsetHeight : wrapperHeight;
+            animation?.cancel();
+            const to = wrapper.offsetHeight;
+            if (from === to || prefersReducedMotion()) return void settle();
+            if (!animation) observer.unobserve(wrapper);
+            for (const el of clipped)el.style.overflowY = "hidden";
+            const current = wrapper.animate({
+                height: [
+                    `${from}px`,
+                    `${to}px`
+                ]
+            }, {
+                duration: HEIGHT_ANIMATION_DURATION,
+                easing: "ease-out"
+            });
+            const settleIfCurrent = ()=>animation === current && settle();
+            current.onfinish = settleIfCurrent;
+            current.oncancel = settleIfCurrent;
+            animation = current;
+        });
+        observer.observe(grid);
+        observer.observe(wrapper);
+        return ()=>{
+            observer.disconnect();
+            cancelAnimationFrame(frame);
+            animation?.cancel();
+            animation = void 0;
+            unlock();
+        };
+    }, [
+        enabled,
+        wrapper,
+        grid
+    ]);
+}
+const DataGrid = ({ animateHeight = false, className, wrapperClassName, children, mode = "system", compact = false, stickyHeader = false, stickyFooter = false, blurEffect = BlurEffects.NONE, maxHeight, loading = false, columns, ...rest })=>{
     const [headerCount, setHeaderCount] = useState(0);
     const [footerCount, setFooterCount] = useState(0);
     const [headerHeight, setHeaderHeight] = useState(0);
@@ -40,6 +120,23 @@ const DataGrid = ({ className, wrapperClassName, children, mode = "system", comp
     const scrollContainerRef = useCallback((el)=>{
         setScrollContainer(el);
     }, []);
+    const [wrapperElement, setWrapperElement] = useState(null);
+    const [gridElement, setGridElement] = useState(null);
+    const wrapperIsScroller = hasInternalScroller && !hasSticky;
+    const setWrapper = useCallback((el)=>{
+        if (animateHeight) setWrapperElement(el);
+        if (wrapperIsScroller) setScrollContainer(el);
+    }, [
+        animateHeight,
+        wrapperIsScroller
+    ]);
+    const setGrid = useCallback((el)=>{
+        gridRef.current = el;
+        if (animateHeight) setGridElement(el);
+    }, [
+        animateHeight
+    ]);
+    useHeightAnimation(wrapperElement, gridElement, animateHeight);
     const classes = useMemo(()=>getDataGridClasses({
             mode,
             className,
@@ -110,7 +207,7 @@ const DataGrid = ({ className, wrapperClassName, children, mode = "system", comp
         gridTemplateColumns: columns.join(" ")
     } : void 0;
     const gridContent = jsx("div", {
-        ref: gridRef,
+        ref: setGrid,
         role: "grid",
         "aria-labelledby": captionId,
         "aria-rowcount": rowCount,
@@ -143,7 +240,7 @@ const DataGrid = ({ className, wrapperClassName, children, mode = "system", comp
                     ]
                 }),
                 jsx("div", {
-                    ref: hasInternalScroller && !hasSticky ? scrollContainerRef : void 0,
+                    ref: setWrapper,
                     className: classes.wrapper,
                     style: wrapperStyle,
                     children: hasSticky ? jsx("div", {

package/dist/DataGrid/useHeightAnimation.d.ts

@@ -0,0 +1,24 @@
+export declare const HEIGHT_ANIMATION_DURATION = 300;
+/**
+ * Animates the wrapper's height whenever the grid inside it changes height.
+ *
+ * The wrapper is the element that carries the grid's rounded corners, shadow
+ * and any ring passed through `wrapperClassName`. Clipping it with its own
+ * `overflow` never clips its own wrapper-shadow, which is why the animation
+ * lives here and not on an element around the grid: an outer clip would cut the
+ * border off for the length of the animation.
+ *
+ * The grid's height drives the animation because it never depends on the
+ * wrapper's: animating the wrapper cannot feed back into the measurement. Both
+ * elements are passed in rather than read from refs, because the grid element
+ * is replaced when a sticky header or footer registers after the first render,
+ * and the observer has to follow it. The wrapper is observed too, only to keep
+ * its resting height current when it changes on its own, such as a new
+ * max-height, and it is unobserved while it animates: resizing an element from
+ * inside its own observer callback is what raises "ResizeObserver loop
+ * completed with undelivered notifications". A width change re-wraps text and
+ * changes the height too, but that is a resize, not new content, so it is not
+ * animated.
+ *
+ */
+export declare function useHeightAnimation(wrapper: HTMLElement | null, grid: HTMLElement | null, enabled: boolean): void;

package/dist/DataGridBody/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v4.2.13
+  @versini/ui-datagrid v5.0.0
   © 2026 gizmette.com
 */
 

package/dist/DataGridCell/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v4.2.13
+  @versini/ui-datagrid v5.0.0
   © 2026 gizmette.com
 */
 

package/dist/DataGridCellSort/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v4.2.13
+  @versini/ui-datagrid v5.0.0
   © 2026 gizmette.com
 */
 

package/dist/DataGridConstants/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v4.2.13
+  @versini/ui-datagrid v5.0.0
   © 2026 gizmette.com
 */
 

package/dist/DataGridFooter/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v4.2.13
+  @versini/ui-datagrid v5.0.0
   © 2026 gizmette.com
 */
 

package/dist/DataGridHeader/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v4.2.13
+  @versini/ui-datagrid v5.0.0
   © 2026 gizmette.com
 */
 

package/dist/DataGridInfinite/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v4.2.13
+  @versini/ui-datagrid v5.0.0
   © 2026 gizmette.com
 */
 

package/dist/DataGridRow/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v4.2.13
+  @versini/ui-datagrid v5.0.0
   © 2026 gizmette.com
 */
 

package/dist/DataGridSorting/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v4.2.13
+  @versini/ui-datagrid v5.0.0
   © 2026 gizmette.com
 */
 

package/dist/u.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v4.2.13
+  @versini/ui-datagrid v5.0.0
   © 2026 gizmette.com
 */
 

package/dist/y.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v4.2.13
+  @versini/ui-datagrid v5.0.0
   © 2026 gizmette.com
 */
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@versini/ui-datagrid",
-  "version": "4.2.13",
+  "version": "5.0.0",
   "license": "MIT",
   "author": "Arno Versini",
   "publishConfig": {
@@ -13,10 +13,6 @@
   },
   "type": "module",
   "exports": {
-    "./animated": {
-      "types": "./dist/DataGridAnimated/index.d.ts",
-      "import": "./dist/DataGridAnimated/index.js"
-    },
     "./body": {
       "types": "./dist/DataGridBody/index.d.ts",
       "import": "./dist/DataGridBody/index.js"
@@ -64,12 +60,12 @@
   ],
   "devDependencies": {
     "@testing-library/jest-dom": "7.0.1",
-    "@versini/ui-button": "15.3.9",
+    "@versini/ui-button": "15.3.10",
     "@versini/ui-styles": "9.7.9"
   },
   "dependencies": {
     "@tanstack/react-virtual": "3.14.13",
-    "@versini/ui-icons": "4.29.3",
+    "@versini/ui-icons": "4.30.0",
     "clsx": "2.1.1",
     "tailwindcss": "4.3.3"
   },

package/dist/DataGridAnimated/AnimatedWrapper.d.ts

@@ -1,50 +0,0 @@
-export type AnimatedWrapperProps = {
-    /**
-     * The content to wrap (typically a DataGrid).
-     */
-    children: React.ReactNode;
-    /**
-     * Value that triggers animation when changed. Typically the count of items or
-     * a key that changes.
-     */
-    dependency: unknown;
-    /**
-     * Animation duration in milliseconds.
-     * @default 300
-     */
-    duration?: number;
-    /**
-     * Whether animation is enabled.
-     * @default true
-     */
-    enabled?: boolean;
-    /**
-     * Additional class name for the wrapper.
-     */
-    className?: string;
-};
-/**
- * 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}
- *         onVisibleCountChange={(count) => setVisibleCount(count)}
- *       >
- *         {(row) => (
- *           <DataGridRow key={row.id}>...</DataGridRow>
- *         )}
- *       </DataGridInfiniteBody>
- *     </DataGrid>
- *   </AnimatedWrapper>
- * );
- * ```
- *
- */
-export declare const AnimatedWrapper: ({ children, dependency, duration, enabled, className, }: AnimatedWrapperProps) => import("react").JSX.Element;

package/dist/DataGridAnimated/index.d.ts

@@ -1,4 +0,0 @@
-export type { AnimatedWrapperProps } from "./AnimatedWrapper.js";
-export { AnimatedWrapper } from "./AnimatedWrapper.js";
-export type { UseAnimatedHeightOptions, UseAnimatedHeightReturn, } from "./useAnimatedHeight.js";
-export { useAnimatedHeight } from "./useAnimatedHeight.js";

package/dist/DataGridAnimated/index.js

@@ -1,92 +0,0 @@
-/*!
-  @versini/ui-datagrid v4.2.13
-  © 2026 gizmette.com
-*/
-
-import { jsx } from "react/jsx-runtime";
-import { useLayoutEffect, useRef, useState } from "react";
-const DEFAULT_ANIMATION_DURATION = 300;
-function useAnimatedHeight(dependency, options) {
-    const { duration = DEFAULT_ANIMATION_DURATION, enabled = true } = options ?? {};
-    const ref = useRef(null);
-    const [animationState, setAnimationState] = useState({
-        height: "auto",
-        isAnimating: false
-    });
-    const lastHeightRef = useRef(0);
-    const prevDependencyRef = useRef(dependency);
-    const animationFrameRef = useRef(0);
-    const timeoutRef = useRef(null);
-    useLayoutEffect(()=>{
-        if (!ref.current || !enabled) return;
-        if (0 === lastHeightRef.current) {
-            lastHeightRef.current = ref.current.offsetHeight;
-            prevDependencyRef.current = dependency;
-            setAnimationState((state)=>state.isAnimating ? {
-                    height: "auto",
-                    isAnimating: false
-                } : state);
-            return;
-        }
-        if (prevDependencyRef.current === dependency) return;
-        prevDependencyRef.current = dependency;
-        const previousHeight = lastHeightRef.current;
-        const newHeight = ref.current.scrollHeight;
-        lastHeightRef.current = newHeight;
-        if (previousHeight === newHeight || 0 === previousHeight) return void setAnimationState((state)=>state.isAnimating ? {
-                height: "auto",
-                isAnimating: false
-            } : state);
-        if (timeoutRef.current) clearTimeout(timeoutRef.current);
-        if (animationFrameRef.current) cancelAnimationFrame(animationFrameRef.current);
-        setAnimationState({
-            height: previousHeight,
-            isAnimating: true
-        });
-        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: "auto" === animationState.height ? "auto" : `${animationState.height}px`,
-        overflow: animationState.isAnimating ? "hidden" : void 0,
-        transition: animationState.isAnimating ? `height ${duration}ms ease-out` : void 0
-    } : {};
-    return {
-        ref,
-        style,
-        isAnimating: animationState.isAnimating
-    };
-}
-const AnimatedWrapper = ({ children, dependency, duration, enabled = true, className })=>{
-    const { ref, style } = useAnimatedHeight(dependency, {
-        duration,
-        enabled
-    });
-    return jsx("div", {
-        ref: ref,
-        style: style,
-        className: className,
-        children: children
-    });
-};
-export { AnimatedWrapper, useAnimatedHeight };

package/dist/DataGridAnimated/useAnimatedHeight.d.ts

@@ -1,49 +0,0 @@
-export type UseAnimatedHeightOptions = {
-    /**
-     * Animation duration in milliseconds.
-     * @default 300
-     */
-    duration?: number;
-    /**
-     * Whether animation is enabled.
-     * @default true
-     */
-    enabled?: boolean;
-};
-export type UseAnimatedHeightReturn<T extends HTMLElement> = {
-    /**
-     * Ref to attach to the container element.
-     */
-    ref: React.RefObject<T | null>;
-    /**
-     * Style object to apply to the container.
-     */
-    style: React.CSSProperties;
-    /**
-     * Whether an animation is currently in progress.
-     */
-    isAnimating: boolean;
-};
-/**
- * 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>
- * );
- * ```
- *
- */
-export declare function useAnimatedHeight<T, E extends HTMLElement = HTMLDivElement>(dependency: T, options?: UseAnimatedHeightOptions): UseAnimatedHeightReturn<E>;