cogsbox-state 0.5.286 → 0.5.288

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cogsbox-state",
-  "version": "0.5.286",
+  "version": "0.5.288",
   "description": "React state management library with form controls and server sync",
   "type": "module",
   "main": "./dist/index.js",

package/src/CogsState.tsx

@@ -1803,8 +1803,9 @@ function createProxyHandler<T>(
             return (
               options: VirtualViewOptions
             ): VirtualStateObjectResult<any[]> => {
+              // --- CHANGE 1: itemHeight is now optional with a default ---
               const {
-                itemHeight = 50, // Default height for unmeasured items
+                itemHeight = 50, // Serves as a fallback for unmeasured items
                 overscan = 5,
                 stickToBottom = false,
               } = options;
@@ -1815,18 +1816,7 @@ function createProxyHandler<T>(
                 endIndex: 10,
               });
 
-              // --- State Tracking Refs for stickToBottom ---
-              const isAtBottomRef = useRef(stickToBottom);
-              const previousTotalCountRef = useRef(0);
-              const isInitialMountRef = useRef(true);
-
-              const sourceArray = getGlobalStore().getNestedState(
-                stateKey,
-                path
-              ) as any[];
-              const totalCount = sourceArray.length;
-
-              // Helper to get an item's measured height or the default
+              // --- CHANGE 2: Add a helper to get heights from shadow store ---
               const getItemHeight = useCallback(
                 (index: number): number => {
                   const metadata = getGlobalStore
@@ -1837,7 +1827,18 @@ function createProxyHandler<T>(
                 [itemHeight, stateKey, path]
               );
 
-              // Pre-calculate total height and the top offset of each item
+              const isAtBottomRef = useRef(stickToBottom);
+              const previousTotalCountRef = useRef(0);
+              const isInitialMountRef = useRef(true);
+
+              const sourceArray = getGlobalStore().getNestedState(
+                stateKey,
+                path
+              ) as any[];
+              const totalCount = sourceArray.length;
+
+              // --- CHANGE 3: Pre-calculate total height and item positions ---
+              // This replaces all instances of `totalCount * itemHeight`.
               const { totalHeight, positions } = useMemo(() => {
                 let currentHeight = 0;
                 const pos: number[] = [];
@@ -1848,6 +1849,7 @@ function createProxyHandler<T>(
                 return { totalHeight: currentHeight, positions: pos };
               }, [totalCount, getItemHeight]);
 
+              // This part is IDENTICAL to your original code
               const virtualState = useMemo(() => {
                 const start = Math.max(0, range.startIndex);
                 const end = Math.min(totalCount, range.endIndex);
@@ -1875,8 +1877,10 @@ function createProxyHandler<T>(
                   isAtBottomRef.current =
                     scrollHeight - scrollTop - clientHeight < 10;
 
-                  // Find the start index by searching for the first item in the viewport
+                  // --- CHANGE 4: Update scroll logic to use positions array ---
+                  // This is the dynamic equivalent of `Math.floor(scrollTop / itemHeight)`.
                   let startIndex = 0;
+                  // A simple loop is robust and easy to understand.
                   for (let i = 0; i < positions.length; i++) {
                     if (positions[i]! >= scrollTop) {
                       startIndex = i;
@@ -1884,16 +1888,15 @@ function createProxyHandler<T>(
                     }
                   }
 
-                  // Find the end index by seeing how many items fit in the viewport
                   let endIndex = startIndex;
                   while (
                     endIndex < totalCount &&
+                    positions[endIndex] &&
                     positions[endIndex]! < scrollTop + clientHeight
                   ) {
                     endIndex++;
                   }
 
-                  // Apply overscan
                   startIndex = Math.max(0, startIndex - overscan);
                   endIndex = Math.min(totalCount, endIndex + overscan);
 
@@ -1902,7 +1905,7 @@ function createProxyHandler<T>(
                       prevRange.startIndex !== startIndex ||
                       prevRange.endIndex !== endIndex
                     ) {
-                      return { startIndex, endIndex };
+                      return { startIndex: startIndex, endIndex: endIndex };
                     }
                     return prevRange;
                   });
@@ -1912,7 +1915,7 @@ function createProxyHandler<T>(
                   passive: true,
                 });
 
-                // Logic to keep the view scrolled to the bottom
+                // This logic is IDENTICAL to your original code
                 if (stickToBottom) {
                   if (isInitialMountRef.current) {
                     container.scrollTo({
@@ -1928,12 +1931,12 @@ function createProxyHandler<T>(
                     });
                   }
                 }
-
                 isInitialMountRef.current = false;
-                handleScroll(); // Initial calculation
+                handleScroll();
 
                 return () =>
                   container.removeEventListener("scroll", handleScroll);
+                // The dependencies are almost identical, just swapping itemHeight for `positions`
               }, [totalCount, overscan, stickToBottom, positions]);
 
               const scrollToBottom = useCallback(
@@ -1948,18 +1951,20 @@ function createProxyHandler<T>(
                 []
               );
 
+              // --- CHANGE 5: Update scrollToIndex to use positions array ---
               const scrollToIndex = useCallback(
                 (index: number, behavior: ScrollBehavior = "smooth") => {
                   if (containerRef.current && positions[index] !== undefined) {
                     containerRef.current.scrollTo({
-                      top: positions[index],
+                      top: positions[index], // Instead of `index * itemHeight`
                       behavior,
                     });
                   }
                 },
-                [positions] // Depends on the calculated positions
+                [positions] // Depends on `positions` now instead of `itemHeight`
               );
 
+              // --- CHANGE 6: Update props to use dynamic totalHeight and offsets ---
               const virtualizerProps = {
                 outer: {
                   ref: containerRef,
@@ -1967,12 +1972,13 @@ function createProxyHandler<T>(
                 },
                 inner: {
                   style: {
-                    height: `${totalHeight}px`,
+                    height: `${totalHeight}px`, // Use calculated total height
                     position: "relative",
                   },
                 },
                 list: {
                   style: {
+                    // Use the pre-calculated position of the first visible item
                     transform: `translateY(${positions[range.startIndex] || 0}px)`,
                   },
                 },