@versini/ui-datagrid 0.8.0 → 0.8.2

package/dist/{DataGridBody/useColumnMeasurement.js → 131.js}

@@ -1,16 +1,23 @@
 /*!
-  @versini/ui-datagrid v0.8.0
+  @versini/ui-datagrid v0.8.2
   © 2026 gizmette.com
 */
 
-import { useContext, useLayoutEffect, useRef } from "react";
-import { DataGridContext } from "../DataGrid/DataGridContext.js";
+import { DataGridContext, clsx } from "./926.js";
+import { useRef, useContext, useLayoutEffect } from "./511.js";
 
-;// CONCATENATED MODULE: external "react"
 
-;// CONCATENATED MODULE: external "../DataGrid/DataGridContext.js"
+/**
+ * Get the CSS class for a DataGrid body element. Uses display:contents so the
+ * body doesn't interfere with the grid flow. Rows will use subgrid when columns
+ * are provided, or define their own grid otherwise.
+ *
+ * @param className - Additional class name to merge
+ *
+ */ function getBodyClass(className) {
+    return clsx("contents", className);
+}
 
-;// CONCATENATED MODULE: ./src/DataGridBody/useColumnMeasurement.ts
 
 
 /**
@@ -72,4 +79,4 @@ import { DataGridContext } from "../DataGrid/DataGridContext.js";
     ]);
 }
 
-export { useColumnMeasurement };
+export { getBodyClass, useColumnMeasurement };

package/dist/298.js

@@ -0,0 +1,215 @@
+/*!
+  @versini/ui-datagrid v0.8.2
+  © 2026 gizmette.com
+*/
+
+import { clsx } from "./926.js";
+import { BlurEffects, CellWrapper } from "./46.js";
+
+
+
+/**
+ * Theme mode helpers - reused across many functions.
+ */ const isDark = (m)=>m === "dark";
+const isLight = (m)=>m === "light";
+const isSys = (m)=>m === "system";
+const isAlt = (m)=>m === "alt-system";
+const isDarkish = (m)=>isDark(m) || isSys(m);
+const isLightish = (m)=>isLight(m) || isAlt(m);
+const hasBlurEffect = (b)=>Boolean(b && b !== BlurEffects.NONE);
+const isHeaderCell = (c)=>c === CellWrapper.HEADER;
+const isFooterCell = (c)=>c === CellWrapper.FOOTER;
+/**
+ * Text color classes - reused in multiple functions.
+ */ const TXT_LIGHT = "text-copy-light";
+const TXT_DARK = "text-copy-dark";
+const TXT_SYS = "text-copy-light dark:text-copy-dark";
+const TXT_ALT = "text-copy-dark dark:text-copy-light";
+/**
+ * Text color classes based on theme mode.
+ */ const getTextColorClasses = ({ mode })=>clsx({
+        [TXT_LIGHT]: isDark(mode),
+        [TXT_DARK]: isLight(mode),
+        [TXT_SYS]: isSys(mode),
+        [TXT_ALT]: isAlt(mode)
+    });
+const getTextColorClassesForHeaderFooter = ({ mode, hasBlur })=>clsx({
+        [TXT_DARK]: isDark(mode) && !hasBlur || isLight(mode),
+        [TXT_SYS]: isSys(mode) && hasBlur,
+        "text-copy-dark dark:text-copy-dark": (isSys(mode) || isAlt(mode)) && !hasBlur
+    });
+/**
+ * Surface background classes (main container backgrounds).
+ */ const getSurfaceBackgroundClasses = ({ mode })=>clsx({
+        "bg-surface-darker": isDarkish(mode),
+        "bg-surface-light": isLightish(mode),
+        "dark:bg-surface-light": isSys(mode),
+        "dark:bg-surface-darker": isAlt(mode)
+    });
+/**
+ * Header/footer background classes (with optional blur transparency).
+ */ const getHeaderFooterBackgroundClasses = ({ hasBlur, sticky })=>clsx({
+        "bg-surface-medium/50 dark:bg-surface-medium/50": hasBlur && sticky,
+        "bg-surface-medium-light dark:bg-surface-medium-light": !hasBlur
+    });
+/**
+ * Border color classes for rows.
+ */ const getBorderClasses = ({ mode })=>clsx({
+        "border-table-dark": isDarkish(mode),
+        "border-table-light": isLightish(mode),
+        "dark:border-table-light": isSys(mode),
+        "dark:border-table-dark": isAlt(mode)
+    });
+/**
+ * Blur effect classes for sticky elements.
+ */ const getBlurClasses = ({ blurEffect })=>clsx({
+        "backdrop-blur-sm": blurEffect === BlurEffects.SMALL,
+        "backdrop-blur-md": blurEffect === BlurEffects.MEDIUM,
+        "backdrop-blur-lg": blurEffect === BlurEffects.LARGE
+    });
+/**
+ * Loading text classes for loading state.
+ */ const getLoadingTextClasses = ({ mode })=>clsx("text-lg font-medium", {
+        [TXT_DARK]: isLight(mode),
+        [TXT_LIGHT]: isDark(mode),
+        [TXT_ALT]: isAlt(mode),
+        [TXT_SYS]: isSys(mode)
+    });
+/**
+ * Overlay classes for loading state.
+ */ const getOverlayClasses = ({ mode })=>({
+        inner: "relative",
+        overlay: clsx("absolute inset-0 z-20 cursor-not-allowed rounded-lg", "backdrop-blur-xs bg-white/30 dark:bg-black/30"),
+        loadingWrapper: clsx("absolute z-30 top-0 left-0 right-0 h-[min(100%,100vh)]", "flex items-center justify-center", "pointer-events-none"),
+        loadingText: getLoadingTextClasses({
+            mode
+        })
+    });
+/**
+ * Generates classes for the main DataGrid wrapper and grid.
+ */ const getDataGridClasses = ({ mode, className, wrapperClassName, stickyHeader, stickyFooter, loading })=>{
+    const overlayClasses = loading ? getOverlayClasses({
+        mode
+    }) : null;
+    const hasSticky = stickyHeader || stickyFooter;
+    return {
+        overlay: overlayClasses?.overlay ?? "",
+        inner: overlayClasses?.inner ?? "",
+        loadingWrapper: overlayClasses?.loadingWrapper ?? "",
+        loadingText: overlayClasses?.loadingText ?? "",
+        wrapper: clsx("not-prose relative w-full rounded-lg shadow-md", {
+            "overflow-x-auto": !hasSticky && !loading,
+            "overflow-hidden flex flex-col": hasSticky || loading
+        }, getSurfaceBackgroundClasses({
+            mode
+        }), getTextColorClasses({
+            mode
+        }), wrapperClassName),
+        scrollableContent: clsx("overflow-y-auto overflow-x-hidden rounded-[inherit] flex-1 min-h-0"),
+        grid: clsx("my-0 w-full text-left text-sm grid", className, getTextColorClasses({
+            mode
+        }))
+    };
+};
+/**
+ * Generates classes for the DataGridHeader wrapper.
+ */ const getHeaderClasses = ({ className, stickyHeader, mode, blurEffect })=>{
+    const hasBlur = hasBlurEffect(blurEffect);
+    const textClasses = getTextColorClassesForHeaderFooter({
+        mode,
+        hasBlur
+    });
+    if (!stickyHeader) {
+        return clsx("contents", getHeaderFooterBackgroundClasses({
+            hasBlur,
+            sticky: false
+        }), textClasses, className);
+    }
+    return clsx("flex flex-col border-b border-table-medium shadow-md", "absolute left-0 right-0 z-20 top-0 rounded-t-lg", getHeaderFooterBackgroundClasses({
+        hasBlur,
+        sticky: true
+    }), textClasses, getBlurClasses({
+        blurEffect
+    }), className);
+};
+/**
+ * Generates classes for the caption element inside DataGridHeader.
+ */ const getCaptionClasses = ({ captionClassName, mode, hasBlur, stickyHeader })=>clsx("py-2 text-sm text-center font-bold col-span-full", getTextColorClassesForHeaderFooter({
+        mode,
+        hasBlur
+    }), !stickyHeader && getHeaderFooterBackgroundClasses({
+        hasBlur,
+        sticky: false
+    }), captionClassName);
+/**
+ * Generates classes for the DataGridFooter.
+ */ const getFooterClasses = ({ className, stickyFooter, mode, blurEffect })=>{
+    const hasBlur = hasBlurEffect(blurEffect);
+    const textClasses = getTextColorClassesForHeaderFooter({
+        mode,
+        hasBlur
+    });
+    if (!stickyFooter) {
+        return clsx("contents", textClasses, className);
+    }
+    return clsx("flex flex-col border-t border-table-medium", "absolute left-0 right-0 z-20 bottom-0 rounded-b-lg", "shadow-[0_-10px_15px_-3px_rgba(0,0,0,0.1)]", getHeaderFooterBackgroundClasses({
+        hasBlur,
+        sticky: true
+    }), getBlurClasses({
+        blurEffect
+    }), textClasses, className);
+};
+const ROW_LAYOUT = "group grid items-center";
+/**
+ * Generates classes for DataGridRow.
+ */ const getRowClasses = ({ mode, className, cellWrapper, isLastRow, stickyHeader, stickyFooter })=>{
+    if (isHeaderCell(cellWrapper) || isFooterCell(cellWrapper)) {
+        const isHeader = isHeaderCell(cellWrapper);
+        const parentUsesContents = isHeader ? !stickyHeader : !stickyFooter;
+        if (parentUsesContents) {
+            return clsx(ROW_LAYOUT, getHeaderFooterBackgroundClasses({
+                hasBlur: false,
+                sticky: false
+            }), isHeader ? "border-b border-table-medium shadow-md" : "border-t border-table-medium", className);
+        }
+        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({
+        mode
+    }), className);
+};
+/**
+ * Generates classes for DataGridCell.
+ */ const getCellClasses = ({ cellWrapper, className, compact, align, mode, borderLeft, borderRight })=>{
+    return clsx({
+        "px-2 py-1": compact,
+        "px-4 py-3": !compact
+    }, {
+        "text-left justify-start": align === "left" || !align,
+        "text-center justify-center": align === "center",
+        "text-right justify-end": align === "right"
+    }, {
+        "font-bold": isHeaderCell(cellWrapper) || isFooterCell(cellWrapper)
+    }, "first:group-data-active:relative", "first:group-data-active:before:absolute first:group-data-active:before:left-0 first:group-data-active:before:top-0 first:group-data-active:before:bottom-0 first:group-data-active:before:w-1", "first:group-data-active:self-stretch first:group-data-active:flex first:group-data-active:items-center", {
+        "first:group-data-active:before:bg-table-active-dark": isDark(mode),
+        "first:group-data-active:before:bg-table-active-light": isLight(mode),
+        "first:group-data-active:before:bg-table-active-dark dark:first:group-data-active:before:bg-table-active-light": isSys(mode),
+        "first:group-data-active:before:bg-table-active-light dark:first:group-data-active:before:bg-table-active-dark": isAlt(mode)
+    }, {
+        "self-stretch flex items-center": borderLeft || borderRight,
+        "border-l border-l-table-dark": borderLeft && isDark(mode),
+        "border-l border-l-table-light": borderLeft && isLight(mode),
+        "border-l border-l-table-dark dark:border-l-table-light": borderLeft && isSys(mode),
+        "border-l border-l-table-light dark:border-l-table-dark": borderLeft && isAlt(mode),
+        "border-r border-r-table-dark": borderRight && isDark(mode),
+        "border-r border-r-table-light": borderRight && isLight(mode),
+        "border-r border-r-table-dark dark:border-r-table-light": borderRight && isSys(mode),
+        "border-r border-r-table-light dark:border-r-table-dark": borderRight && isAlt(mode)
+    }, className);
+};
+/**
+ * Returns the appropriate ARIA role for the cell based on the cell wrapper type.
+ */ const getCellRole = (cellWrapper)=>isHeaderCell(cellWrapper) ? "columnheader" : "gridcell";
+
+export { getCaptionClasses, getCellClasses, getCellRole, getDataGridClasses, getFooterClasses, getHeaderClasses, getRowClasses, getTextColorClassesForHeaderFooter };

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

@@ -1,10 +1,8 @@
 /*!
-  @versini/ui-datagrid v0.8.0
+  @versini/ui-datagrid v0.8.2
   © 2026 gizmette.com
 */
 
-
-;// CONCATENATED MODULE: ./src/DataGridConstants/DataGridConstants.ts
 /**
  * Sort direction constants for DataGrid sorting.
  */ const SortDirections = {

package/dist/511.js

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

package/dist/926.js

@@ -0,0 +1,15 @@
+/*!
+  @versini/ui-datagrid v0.8.2
+  © 2026 gizmette.com
+*/
+
+import { createContext } from "./511.js";
+
+
+
+const DataGridContext = createContext({
+    mode: "system"
+});
+
+export { DataGridContext };
+export { default as clsx } from "clsx";

package/dist/DataGrid/index.js

@@ -1,17 +1,175 @@
 /*!
-  @versini/ui-datagrid v0.8.0
+  @versini/ui-datagrid v0.8.2
   © 2026 gizmette.com
 */
 
-import { DataGrid } from "./DataGrid.js";
-import { DataGridContext } from "./DataGridContext.js";
+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";
 
-;// CONCATENATED MODULE: external "./DataGrid.js"
 
-;// CONCATENATED MODULE: external "./DataGridContext.js"
 
-;// CONCATENATED MODULE: ./src/DataGrid/index.ts
 
 
 
-export { DataGrid, DataGridContext };
+/* =============================================================================
+ * DataGrid (main component)
+ * ========================================================================== */ const DataGrid = ({ className, wrapperClassName, children, mode = "system", compact = false, stickyHeader = false, stickyFooter = false, blurEffect = BlurEffects.NONE, maxHeight, loading = false, columns, ...rest })=>{
+    /**
+	 * Track registered header/footer components via context registration. Uses
+	 * counter-based tracking to properly handle multiple instances. Components
+	 * register themselves when they mount, regardless of nesting depth. This
+	 * replaces the previous displayName-based child inspection approach.
+	 */ const [headerCount, setHeaderCount] = useState(0);
+    const [footerCount, setFooterCount] = useState(0);
+    /**
+	 * Track measured heights of header/footer for dynamic padding. Reported by
+	 * DataGridHeader/Footer via ResizeObserver. This replaces the brittle
+	 * hard-coded Tailwind padding classes.
+	 */ const [headerHeight, setHeaderHeight] = useState(0);
+    const [footerHeight, setFooterHeight] = useState(0);
+    /**
+	 * Track measured column widths from the body. Used by sticky header/footer to
+	 * sync column widths since absolutely positioned elements can't use CSS
+	 * subgrid.
+	 */ const [measuredColumnWidths, setMeasuredColumnWidths] = useState([]);
+    /**
+	 * Registration callbacks with stable references. Called by
+	 * DataGridHeader/DataGridFooter on mount/unmount. Uses increment/decrement to
+	 * handle multiple instances correctly.
+	 */ const registerHeader = useCallback(()=>setHeaderCount((c)=>c + 1), []);
+    const unregisterHeader = useCallback(()=>setHeaderCount((c)=>c - 1), []);
+    const registerFooter = useCallback(()=>setFooterCount((c)=>c + 1), []);
+    const unregisterFooter = useCallback(()=>setFooterCount((c)=>c - 1), []);
+    const hasRegisteredHeader = headerCount > 0;
+    const hasRegisteredFooter = footerCount > 0;
+    /**
+	 * Only apply sticky behavior if both the prop is true AND the corresponding
+	 * component exists. This prevents adding padding/styles for non-existent
+	 * headers/footers.
+	 */ const effectiveStickyHeader = stickyHeader && hasRegisteredHeader;
+    const effectiveStickyFooter = stickyFooter && hasRegisteredFooter;
+    /**
+	 * State to hold the caption ID registered by DataGridHeader. Used for
+	 * aria-labelledby on the grid element for accessibility.
+	 */ const [captionId, setCaptionId] = useState(undefined);
+    const handleSetCaptionId = useCallback((id)=>{
+        setCaptionId(id);
+    }, []);
+    const classes = useMemo(()=>getDataGridClasses({
+            mode,
+            className,
+            wrapperClassName,
+            stickyHeader: effectiveStickyHeader,
+            stickyFooter: effectiveStickyFooter,
+            loading: Boolean(loading)
+        }), [
+        mode,
+        className,
+        wrapperClassName,
+        effectiveStickyHeader,
+        effectiveStickyFooter,
+        loading
+    ]);
+    const contextValue = useMemo(()=>({
+            mode,
+            compact,
+            stickyHeader: effectiveStickyHeader,
+            stickyFooter: effectiveStickyFooter,
+            blurEffect,
+            columns,
+            measuredColumnWidths,
+            setCaptionId: handleSetCaptionId,
+            registerHeader,
+            unregisterHeader,
+            registerFooter,
+            unregisterFooter,
+            setHeaderHeight,
+            setFooterHeight,
+            setMeasuredColumnWidths
+        }), [
+        mode,
+        compact,
+        effectiveStickyHeader,
+        effectiveStickyFooter,
+        blurEffect,
+        columns,
+        measuredColumnWidths,
+        handleSetCaptionId,
+        registerHeader,
+        unregisterHeader,
+        registerFooter,
+        unregisterFooter
+    ]);
+    const wrapperStyle = maxHeight ? {
+        maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight
+    } : undefined;
+    /**
+	 * Dynamic padding for scrollable content based on measured header/footer
+	 * heights. This replaces the brittle hard-coded Tailwind padding classes.
+	 */ const scrollableContentStyle = {
+        ...wrapperStyle,
+        paddingTop: effectiveStickyHeader ? headerHeight : undefined,
+        paddingBottom: effectiveStickyFooter ? footerHeight : undefined
+    };
+    /**
+	 * When sticky header/footer is enabled, use Panel-like structure: - Outer
+	 * wrapper has overflow-hidden - Scrollable content area in the middle with
+	 * padding - Header/footer are absolutely positioned.
+	 */ const hasSticky = effectiveStickyHeader || effectiveStickyFooter;
+    /**
+	 * When columns are provided, apply grid-template-columns at the grid level so
+	 * all rows can use subgrid to inherit the same column sizing.
+	 */ const gridStyle = columns ? {
+        gridTemplateColumns: columns.join(" ")
+    } : undefined;
+    const gridContent = /*#__PURE__*/ jsx("div", {
+        role: "grid",
+        "aria-labelledby": captionId,
+        className: classes.grid,
+        style: gridStyle,
+        ...rest,
+        children: children
+    });
+    const loadingText = typeof loading === "string" ? loading : loading ? "Loading..." : null;
+    return /*#__PURE__*/ jsx(DataGridContext.Provider, {
+        value: contextValue,
+        children: /*#__PURE__*/ jsxs("div", {
+            className: classes.inner,
+            children: [
+                loading && /*#__PURE__*/ jsxs(Fragment, {
+                    children: [
+                        /*#__PURE__*/ jsx("div", {
+                            className: classes.overlay,
+                            "aria-hidden": "true"
+                        }),
+                        /*#__PURE__*/ jsx("div", {
+                            className: classes.loadingWrapper,
+                            children: /*#__PURE__*/ jsx("span", {
+                                className: classes.loadingText,
+                                role: "status",
+                                children: loadingText
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsx("div", {
+                    className: classes.wrapper,
+                    style: wrapperStyle,
+                    children: hasSticky ? /*#__PURE__*/ jsx("div", {
+                        className: classes.scrollableContent,
+                        style: scrollableContentStyle,
+                        children: gridContent
+                    }) : gridContent
+                })
+            ]
+        })
+    });
+};
+
+
+
+
+export { DataGrid };
+export { DataGridContext } from "../926.js";

package/dist/DataGridAnimated/index.js

@@ -1,16 +1,169 @@
 /*!
-  @versini/ui-datagrid v0.8.0
+  @versini/ui-datagrid v0.8.2
   © 2026 gizmette.com
 */
 
-import { AnimatedWrapper } from "./AnimatedWrapper.js";
-import { useAnimatedHeight } from "./useAnimatedHeight.js";
+import { useState, useLayoutEffect, useRef, jsx } from "../511.js";
 
-;// CONCATENATED MODULE: external "./AnimatedWrapper.js"
 
-;// CONCATENATED MODULE: external "./useAnimatedHeight.js"
+const DEFAULT_ANIMATION_DURATION = 300;
+/**
+ * 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>
+ * );
+ * ```
+ *
+ */ function useAnimatedHeight(dependency, options) {
+    const { duration = DEFAULT_ANIMATION_DURATION, enabled = true } = options ?? {};
+    const ref = useRef(null);
+    const [animationState, setAnimationState] = useState({
+        height: "auto",
+        isAnimating: false
+    });
+    /**
+	 * Track the last measured height persistently. This ref is updated AFTER each
+	 * animation completes, so it holds the "before" value when dependency changes.
+	 */ const lastHeightRef = useRef(0);
+    const prevDependencyRef = useRef(dependency);
+    const animationFrameRef = useRef(0);
+    const timeoutRef = useRef(null);
+    useLayoutEffect(()=>{
+        if (!ref.current || !enabled) {
+            return;
+        }
+        /**
+		 * On first render or when not animating, just record the current height.
+		 */ if (lastHeightRef.current === 0) {
+            lastHeightRef.current = ref.current.offsetHeight;
+            prevDependencyRef.current = dependency;
+            return;
+        }
+        /**
+		 * If dependency hasn't changed, nothing to animate.
+		 */ if (prevDependencyRef.current === dependency) {
+            return;
+        }
+        prevDependencyRef.current = dependency;
+        const previousHeight = lastHeightRef.current;
+        const newHeight = ref.current.scrollHeight;
+        /**
+		 * Update the stored height for next time.
+		 */ lastHeightRef.current = newHeight;
+        /**
+		 * If heights are the same or previous was 0, no animation needed.
+		 */ if (previousHeight === newHeight || previousHeight === 0) {
+            return;
+        }
+        /**
+		 * Cancel any ongoing animation.
+		 */ if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+        if (animationFrameRef.current) {
+            cancelAnimationFrame(animationFrameRef.current);
+        }
+        /**
+		 * Lock to the previous height immediately.
+		 */ setAnimationState({
+            height: previousHeight,
+            isAnimating: true
+        });
+        /**
+		 * Use double RAF to ensure the browser has painted the locked height, then
+		 * transition to the new height.
+		 */ 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: animationState.height === "auto" ? "auto" : `${animationState.height}px`,
+        overflow: animationState.isAnimating ? "hidden" : undefined,
+        transition: animationState.isAnimating ? `height ${duration}ms ease-out` : undefined
+    } : {};
+    return {
+        ref,
+        style,
+        isAnimating: animationState.isAnimating
+    };
+}
+
+
+
+/**
+ * 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}
+ *         batchSize={25}
+ *         onVisibleCountChange={(count) => setVisibleCount(count)}
+ *       >
+ *         {(row) => (
+ *           <DataGridRow key={row.id}>...</DataGridRow>
+ *         )}
+ *       </DataGridInfiniteBody>
+ *     </DataGrid>
+ *   </AnimatedWrapper>
+ * );
+ * ```
+ *
+ */ const AnimatedWrapper = ({ children, dependency, duration, enabled = true, className })=>{
+    const { ref, style } = useAnimatedHeight(dependency, {
+        duration,
+        enabled
+    });
+    return /*#__PURE__*/ jsx("div", {
+        ref: ref,
+        style: style,
+        className: className,
+        children: children
+    });
+};
 
-;// CONCATENATED MODULE: ./src/DataGridAnimated/index.ts