@versini/ui-datagrid 4.2.12 → 4.2.14

package/dist/7.js

@@ -1,36 +1,27 @@
 /*!
-  @versini/ui-datagrid v4.2.12
+  @versini/ui-datagrid v4.2.14
   © 2026 gizmette.com
 */
 
-/**
- * Sort direction constants for DataGrid sorting.
- */ const SortDirections = {
+const SortDirections = {
     ASC: "asc",
     DESC: "desc"
 };
-/**
- * Blur effect intensity options for sticky header/footer.
- */ const BlurEffects = {
+const BlurEffects = {
     NONE: "none",
     SMALL: "small",
     MEDIUM: "medium",
     LARGE: "large"
 };
-/**
- * Theme mode options for DataGrid.
- */ const ThemeModes = {
+const ThemeModes = {
     DARK: "dark",
     LIGHT: "light",
     SYSTEM: "system",
     ALT_SYSTEM: "alt-system"
 };
-/**
- * Cell wrapper types for internal context.
- */ const CellWrapper = {
+const CellWrapper = {
     HEADER: "header",
     BODY: "body",
     FOOTER: "footer"
 };
-
 export { BlurEffects, CellWrapper, SortDirections, ThemeModes };

package/dist/8.js

@@ -1,14 +1,10 @@
 /*!
-  @versini/ui-datagrid v4.2.12
+  @versini/ui-datagrid v4.2.14
   © 2026 gizmette.com
 */
 
 import { createContext } from "react";
-
-
-
 const DataGridContext = createContext({
     mode: "system"
 });
-
 export { DataGridContext };

package/dist/DataGrid/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v4.2.12
+  @versini/ui-datagrid v4.2.14
   © 2026 gizmette.com
 */
 
@@ -8,40 +8,13 @@ import { useCallback, useMemo, useRef, useState } from "react";
 import { BlurEffects } from "../7.js";
 import { getDataGridClasses } from "../y.js";
 import { DataGridContext } from "../8.js";
-
-
-
-
-
-
-
-
-/* =============================================================================
- * 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 DataGrid = ({ 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);
-    /**
-	 * 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 [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 [measuredColumnWidths, setMeasuredColumnWidths] = useState([]);
+    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), []);
@@ -49,45 +22,21 @@ import { DataGridContext } from "../8.js";
     const hasRegisteredFooter = footerCount > 0;
     const headerRows = hasRegisteredHeader ? 1 : 0;
     const footerRows = hasRegisteredFooter ? 1 : 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 effectiveStickyHeader = stickyHeader && hasRegisteredHeader;
     const effectiveStickyFooter = stickyFooter && hasRegisteredFooter;
     const hasSticky = effectiveStickyHeader || effectiveStickyFooter;
-    /**
-	 * Whether DataGrid owns a bounded internal scroll container (sticky → the
-	 * scrollableContent area; maxHeight → the wrapper). When it doesn't, a
-	 * virtualized body windows against the page instead (pageScroll).
-	 */ const hasInternalScroller = hasSticky || Boolean(maxHeight);
+    const hasInternalScroller = hasSticky || Boolean(maxHeight);
     const pageScroll = !hasInternalScroller;
-    /**
-	 * 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 [captionId, setCaptionId] = useState(void 0);
     const handleSetCaptionId = useCallback((id)=>{
         setCaptionId(id);
     }, []);
-    /**
-	 * Total row count reported by DataGridInfiniteBody. Drives `aria-rowcount` on
-	 * the grid. Seeded `undefined` so non-infinite grids render no `aria-rowcount`
-	 * (markup stays unchanged).
-	 */ const [rowCount, setRowCount] = useState(undefined);
-    /**
-	 * Focus sentinel: a virtualizing body moves focus here (the grid element,
-	 * made focusable via tabIndex={-1}) when a focused row recycles out of the
-	 * DOM, so focus never drops to document.body.
-	 */ const gridRef = useRef(null);
+    const [rowCount, setRowCount] = useState(void 0);
+    const gridRef = useRef(null);
     const focusGrid = useCallback(()=>{
         gridRef.current?.focus();
     }, []);
-    /**
-	 * The internal scroll container a virtualized body should window against,
-	 * exposed via context. DataGrid owns a bounded scroller only when sticky
-	 * header/footer or maxHeight is set; otherwise the body windows against the
-	 * page (pageScroll).
-	 */ const [scrollContainer, setScrollContainer] = useState(null);
+    const [scrollContainer, setScrollContainer] = useState(null);
     const scrollContainerRef = useCallback((el)=>{
         setScrollContainer(el);
     }, []);
@@ -150,48 +99,42 @@ import { DataGridContext } from "../8.js";
         pageScroll
     ]);
     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 = {
+        maxHeight: "number" == typeof maxHeight ? `${maxHeight}px` : maxHeight
+    } : void 0;
+    const scrollableContentStyle = {
         ...wrapperStyle,
-        paddingTop: effectiveStickyHeader ? headerHeight : undefined,
-        paddingBottom: effectiveStickyFooter ? footerHeight : undefined
+        paddingTop: effectiveStickyHeader ? headerHeight : void 0,
+        paddingBottom: effectiveStickyFooter ? footerHeight : void 0
     };
-    /**
-	 * 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 ? {
+    const gridStyle = columns ? {
         gridTemplateColumns: columns.join(" ")
-    } : undefined;
-    const gridContent = /*#__PURE__*/ jsx("div", {
+    } : void 0;
+    const gridContent = jsx("div", {
         ref: gridRef,
         role: "grid",
         "aria-labelledby": captionId,
         "aria-rowcount": rowCount,
-        tabIndex: rowCount != null ? -1 : undefined,
+        tabIndex: null != rowCount ? -1 : void 0,
         className: classes.grid,
         style: gridStyle,
         ...rest,
         children: children
     });
-    const loadingText = typeof loading === "string" ? loading : loading ? "Loading..." : null;
-    return /*#__PURE__*/ jsx(DataGridContext.Provider, {
+    const loadingText = "string" == typeof loading ? loading : loading ? "Loading..." : null;
+    return jsx(DataGridContext.Provider, {
         value: contextValue,
-        children: /*#__PURE__*/ jsxs("div", {
+        children: jsxs("div", {
             className: classes.inner,
             children: [
-                loading && /*#__PURE__*/ jsxs(Fragment, {
+                loading && jsxs(Fragment, {
                     children: [
-                        /*#__PURE__*/ jsx("div", {
+                        jsx("div", {
                             className: classes.overlay,
                             "aria-hidden": "true"
                         }),
-                        /*#__PURE__*/ jsx("div", {
+                        jsx("div", {
                             className: classes.loadingWrapper,
-                            children: /*#__PURE__*/ jsx("span", {
+                            children: jsx("span", {
                                 className: classes.loadingText,
                                 role: "status",
                                 children: loadingText
@@ -199,11 +142,11 @@ import { DataGridContext } from "../8.js";
                         })
                     ]
                 }),
-                /*#__PURE__*/ jsx("div", {
-                    ref: hasInternalScroller && !hasSticky ? scrollContainerRef : undefined,
+                jsx("div", {
+                    ref: hasInternalScroller && !hasSticky ? scrollContainerRef : void 0,
                     className: classes.wrapper,
                     style: wrapperStyle,
-                    children: hasSticky ? /*#__PURE__*/ jsx("div", {
+                    children: hasSticky ? jsx("div", {
                         ref: scrollContainerRef,
                         className: classes.scrollableContent,
                         style: scrollableContentStyle,
@@ -214,9 +157,5 @@ import { DataGridContext } from "../8.js";
         })
     });
 };
-
-
-
-
-export { DataGrid };
 export { DataGridContext } from "../8.js";
+export { DataGrid };

package/dist/DataGridAnimated/index.js

@@ -1,109 +1,49 @@
 /*!
-  @versini/ui-datagrid v4.2.12
+  @versini/ui-datagrid v4.2.14
   © 2026 gizmette.com
 */
 
 import { jsx } from "react/jsx-runtime";
 import { useLayoutEffect, useRef, useState } from "react";
-
-
-
-
 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) {
+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 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) {
+        if (!ref.current || !enabled) return;
+        if (0 === lastHeightRef.current) {
             lastHeightRef.current = ref.current.offsetHeight;
             prevDependencyRef.current = dependency;
-            // If a prior animation was canceled and the content collapsed to 0,
-            // clear any locked height so the wrapper can't stay frozen.
             setAnimationState((state)=>state.isAnimating ? {
                     height: "auto",
                     isAnimating: false
                 } : state);
             return;
         }
-        /**
-		 * If dependency hasn't changed, nothing to animate.
-		 */ if (prevDependencyRef.current === dependency) {
-            return;
-        }
+        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. Reset any
-		 * height left locked by a just-canceled animation, so the wrapper can't get
-		 * stuck collapsed with `overflow: hidden` when the dependency keeps changing
-		 * without a height change — e.g. a virtualized body reporting a scroll-driven
-		 * count while its panel stays a fixed `maxHeight`.
-		 */ if (previousHeight === newHeight || previousHeight === 0) {
-            setAnimationState((state)=>state.isAnimating ? {
-                    height: "auto",
-                    isAnimating: false
-                } : state);
-            return;
-        }
-        /**
-		 * Cancel any ongoing animation.
-		 */ if (timeoutRef.current) {
-            clearTimeout(timeoutRef.current);
-        }
-        if (animationFrameRef.current) {
-            cancelAnimationFrame(animationFrameRef.current);
-        }
-        /**
-		 * Lock to the previous height immediately.
-		 */ setAnimationState({
+        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
         });
-        /**
-		 * Use double RAF to ensure the browser has painted the locked height, then
-		 * transition to the new height.
-		 */ animationFrameRef.current = requestAnimationFrame(()=>{
+        animationFrameRef.current = requestAnimationFrame(()=>{
             animationFrameRef.current = requestAnimationFrame(()=>{
                 setAnimationState({
                     height: newHeight,
@@ -118,12 +58,8 @@ const DEFAULT_ANIMATION_DURATION = 300;
             });
         });
         return ()=>{
-            if (timeoutRef.current) {
-                clearTimeout(timeoutRef.current);
-            }
-            if (animationFrameRef.current) {
-                cancelAnimationFrame(animationFrameRef.current);
-            }
+            if (timeoutRef.current) clearTimeout(timeoutRef.current);
+            if (animationFrameRef.current) cancelAnimationFrame(animationFrameRef.current);
         };
     }, [
         dependency,
@@ -131,9 +67,9 @@ const DEFAULT_ANIMATION_DURATION = 300;
         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
+        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,
@@ -141,46 +77,16 @@ const DEFAULT_ANIMATION_DURATION = 300;
         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}
- *         onVisibleCountChange={(count) => setVisibleCount(count)}
- *       >
- *         {(row) => (
- *           <DataGridRow key={row.id}>...</DataGridRow>
- *         )}
- *       </DataGridInfiniteBody>
- *     </DataGrid>
- *   </AnimatedWrapper>
- * );
- * ```
- *
- */ const AnimatedWrapper = ({ children, dependency, duration, enabled = true, className })=>{
+const AnimatedWrapper = ({ children, dependency, duration, enabled = true, className })=>{
     const { ref, style } = useAnimatedHeight(dependency, {
         duration,
         enabled
     });
-    return /*#__PURE__*/ jsx("div", {
+    return jsx("div", {
         ref: ref,
         style: style,
         className: className,
         children: children
     });
 };
-
-
-
-
 export { AnimatedWrapper, useAnimatedHeight };

package/dist/DataGridBody/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v4.2.12
+  @versini/ui-datagrid v4.2.14
   © 2026 gizmette.com
 */
 
@@ -8,39 +8,27 @@ import { useContext, useRef } from "react";
 import { DataGridContext } from "../8.js";
 import { getBodyClass, useColumnMeasurement } from "../u.js";
 import { CellWrapper } from "../7.js";
-
-
-
-
-
-
-
-
-
-/* =============================================================================
- * DataGridBody
- * ========================================================================== */ const DataGridBody = ({ className, children, noData = false, noDataText, ...rest })=>{
+const DataGridBody = ({ className, children, noData = false, noDataText, ...rest })=>{
     const ctx = useContext(DataGridContext);
     const bodyRef = useRef(null);
-    // Measure column widths for sticky header/footer sync.
     useColumnMeasurement(bodyRef, children, noData);
     const bodyClass = getBodyClass(className);
-    return /*#__PURE__*/ jsx(DataGridContext.Provider, {
+    return jsx(DataGridContext.Provider, {
         value: {
             ...ctx,
             cellWrapper: CellWrapper.BODY
         },
-        children: /*#__PURE__*/ jsx("div", {
+        children: jsx("div", {
             ref: bodyRef,
             role: "rowgroup",
             className: bodyClass,
             ...rest,
-            children: noData ? /*#__PURE__*/ jsx("div", {
+            children: noData ? jsx("div", {
                 role: "row",
                 style: {
                     gridColumn: "1 / -1"
                 },
-                children: /*#__PURE__*/ jsx("div", {
+                children: jsx("div", {
                     role: "gridcell",
                     style: {
                         textAlign: "center",
@@ -52,7 +40,4 @@ import { CellWrapper } from "../7.js";
         })
     });
 };
-
-
-
 export { DataGridBody };

package/dist/DataGridCell/index.js

@@ -1,20 +1,12 @@
 /*!
-  @versini/ui-datagrid v4.2.12
+  @versini/ui-datagrid v4.2.14
   © 2026 gizmette.com
 */
 
 import { jsx } from "react/jsx-runtime";
 import { DataGridContext } from "../8.js";
 import { getCellRole, getCellClasses } from "../y.js";
-
-
-
-
-
-/* =============================================================================
- * DataGridCell
- * ========================================================================== */ const DataGridCell = ({ className, children, align, borderLeft, borderRight, colSpan, style, ...rest })=>{
-    return /*#__PURE__*/ jsx(DataGridContext.Consumer, {
+const DataGridCell = ({ className, children, align, borderLeft, borderRight, colSpan, style, ...rest })=>jsx(DataGridContext.Consumer, {
         children: ({ mode, compact, cellWrapper })=>{
             const mainClasses = getCellClasses({
                 cellWrapper,
@@ -26,12 +18,11 @@ import { getCellRole, getCellClasses } from "../y.js";
                 borderRight
             });
             const role = getCellRole(cellWrapper);
-            // Apply grid-column span for colSpan > 1.
             const cellStyle = colSpan && colSpan > 1 ? {
                 ...style,
                 gridColumn: `span ${colSpan}`
             } : style;
-            return /*#__PURE__*/ jsx("div", {
+            return jsx("div", {
                 role: role,
                 className: mainClasses,
                 style: cellStyle,
@@ -40,8 +31,4 @@ import { getCellRole, getCellClasses } from "../y.js";
             });
         }
     });
-};
-
-
-
 export { DataGridCell };