cogsbox-state 0.5.353 → 0.5.355

package/package.json

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

package/src/CogsState.tsx

@@ -1816,7 +1816,7 @@ function createProxyHandler<T>(
               });
 
               const isLockedToBottomRef = useRef(stickToBottom);
-
+              const isAutoScrolling = useRef(false);
               const [shadowUpdateTrigger, setShadowUpdateTrigger] = useState(0);
 
               useEffect(() => {
@@ -1915,12 +1915,15 @@ function createProxyHandler<T>(
                       "color: green; font-weight: bold;"
                     );
                     clearInterval(intervalId); // Stop the loop.
-
+                    isAutoScrolling.current = true;
                     // STEP 3: Scroll.
                     container.scrollTo({
                       top: container.scrollHeight,
                       behavior: "smooth",
                     });
+                    setTimeout(() => {
+                      isAutoScrolling.current = false;
+                    }, 1000);
                   } else {
                     console.log("...WAITING. Height is not ready.");
                     if (loopCount > 20) {
@@ -1938,7 +1941,7 @@ function createProxyHandler<T>(
                   console.log("ALGORITHM: Cleaning up loop.");
                   clearInterval(intervalId);
                 };
-              }, [totalCount, ...(options.dependencies ?? [])]); // This whole process triggers ONLY when totalCount changes.
+              }, [totalCount, totalHeight, ...(options.dependencies ?? [])]); // This whole process triggers ONLY when totalCount changes.
 
               // Effect to handle user scrolling.
               useEffect(() => {
@@ -1946,9 +1949,34 @@ function createProxyHandler<T>(
                 if (!container) return;
 
                 const updateVirtualRange = () => {
-                  /* ... same as before ... */
+                  const { scrollTop, clientHeight } = container;
+                  let low = 0,
+                    high = totalCount - 1;
+                  while (low <= high) {
+                    const mid = Math.floor((low + high) / 2);
+                    if (positions[mid]! < scrollTop) low = mid + 1;
+                    else high = mid - 1;
+                  }
+                  const startIndex = Math.max(0, high - overscan);
+                  let endIndex = startIndex;
+                  const visibleEnd = scrollTop + clientHeight;
+                  while (
+                    endIndex < totalCount &&
+                    positions[endIndex]! < visibleEnd
+                  ) {
+                    endIndex++;
+                  }
+                  setRange({
+                    startIndex,
+                    endIndex: Math.min(totalCount, endIndex + overscan),
+                  });
                 };
+
                 const handleUserScroll = () => {
+                  if (isAutoScrolling.current) {
+                    // <--- ADD THIS CHECK
+                    return;
+                  }
                   const isAtBottom =
                     container.scrollHeight -
                       container.scrollTop -
@@ -1960,12 +1988,16 @@ function createProxyHandler<T>(
                   }
                   updateVirtualRange();
                 };
+
                 container.addEventListener("scroll", handleUserScroll, {
                   passive: true,
                 });
+                // Always run on mount and when data changes to show correct initial view
+                updateVirtualRange();
+
                 return () =>
                   container.removeEventListener("scroll", handleUserScroll);
-              }, []);
+              }, [totalCount, positions]);
 
               const scrollToBottom = useCallback(
                 (behavior: ScrollBehavior = "smooth") => {