cogsbox-state 0.5.303 → 0.5.305

package/package.json

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

package/src/CogsState.tsx

@@ -1814,28 +1814,10 @@ function createProxyHandler<T>(
                 endIndex: 10,
               });
 
-              const [heightsVersion, setHeightsVersion] = useState(0);
-              const forceRecalculate = useCallback(
-                () => setHeightsVersion((v) => v + 1),
-                []
-              );
-
-              // Track scroll position
               const isAtBottomRef = useRef(stickToBottom);
               const previousTotalCountRef = useRef(0);
               const isInitialMountRef = useRef(true);
-              const hasScrolledToBottomRef = useRef(false); // Track if we've done initial scroll
-
-              useEffect(() => {
-                const unsubscribe = getGlobalStore
-                  .getState()
-                  .subscribeToShadowState(stateKey, forceRecalculate);
-                const timer = setTimeout(forceRecalculate, 50);
-                return () => {
-                  unsubscribe();
-                  clearTimeout(timer);
-                };
-              }, [stateKey, forceRecalculate]);
+              const hasMeasurementsRef = useRef(false);
 
               const sourceArray = getGlobalStore().getNestedState(
                 stateKey,
@@ -1843,32 +1825,26 @@ function createProxyHandler<T>(
               ) as any[];
               const totalCount = sourceArray.length;
 
-              const { totalHeight, positions, allItemsMeasured } =
-                useMemo(() => {
-                  const shadowArray =
-                    getGlobalStore
-                      .getState()
-                      .getShadowMetadata(stateKey, path) || [];
-                  let height = 0;
-                  const pos: number[] = [];
-                  let measured = true;
-
-                  for (let i = 0; i < totalCount; i++) {
-                    pos[i] = height;
-                    const measuredHeight =
-                      shadowArray[i]?.virtualizer?.itemHeight;
-                    if (!measuredHeight && totalCount > 0) {
-                      measured = false;
-                    }
-                    height += measuredHeight || itemHeight;
-                  }
+              // Calculate heights from shadow state
+              const { totalHeight, positions } = useMemo(() => {
+                const shadowArray =
+                  getGlobalStore.getState().getShadowMetadata(stateKey, path) ||
+                  [];
+                let height = 0;
+                const pos: number[] = [];
+                let hasMeasurements = false;
+
+                for (let i = 0; i < totalCount; i++) {
+                  pos[i] = height;
+                  const measuredHeight =
+                    shadowArray[i]?.virtualizer?.itemHeight;
+                  if (measuredHeight) hasMeasurements = true;
+                  height += measuredHeight || itemHeight;
+                }
 
-                  return {
-                    totalHeight: height,
-                    positions: pos,
-                    allItemsMeasured: measured,
-                  };
-                }, [totalCount, stateKey, path, itemHeight, heightsVersion]);
+                hasMeasurementsRef.current = hasMeasurements;
+                return { totalHeight: height, positions: pos };
+              }, [totalCount, stateKey, path.join("."), itemHeight]);
 
               const virtualState = useMemo(() => {
                 const start = Math.max(0, range.startIndex);
@@ -1894,7 +1870,6 @@ function createProxyHandler<T>(
 
                 const handleScroll = () => {
                   const { scrollTop, clientHeight, scrollHeight } = container;
-                  // Consider "at bottom" if within 10px
                   isAtBottomRef.current =
                     scrollHeight - scrollTop - clientHeight < 10;
 
@@ -1938,39 +1913,9 @@ function createProxyHandler<T>(
                 });
 
                 // Handle stick to bottom
-                if (stickToBottom) {
-                  if (
-                    isInitialMountRef.current &&
-                    !hasScrolledToBottomRef.current
-                  ) {
-                    // For initial mount, wait for items to be measured
-                    if (allItemsMeasured && totalCount > 0) {
-                      container.scrollTo({
-                        top: container.scrollHeight,
-                        behavior: "auto",
-                      });
-                      hasScrolledToBottomRef.current = true;
-                      isInitialMountRef.current = false;
-                    } else if (totalCount > 0) {
-                      // If not all measured yet, try again soon
-                      const retryTimer = setTimeout(() => {
-                        if (containerRef.current && isInitialMountRef.current) {
-                          containerRef.current.scrollTo({
-                            top: containerRef.current.scrollHeight,
-                            behavior: "auto",
-                          });
-                          hasScrolledToBottomRef.current = true;
-                          isInitialMountRef.current = false;
-                        }
-                      }, 100);
-                      return () => clearTimeout(retryTimer);
-                    }
-                  } else if (
-                    !isInitialMountRef.current &&
-                    wasAtBottom &&
-                    listGrew
-                  ) {
-                    // New items added and we were at bottom - stay at bottom
+                if (stickToBottom && !isInitialMountRef.current) {
+                  // Only auto-scroll for new items after initial mount
+                  if (wasAtBottom && listGrew) {
                     requestAnimationFrame(() => {
                       container.scrollTo({
                         top: container.scrollHeight,
@@ -1978,8 +1923,6 @@ function createProxyHandler<T>(
                       });
                     });
                   }
-                } else {
-                  isInitialMountRef.current = false;
                 }
 
                 // Run handleScroll once to set initial range
@@ -1987,13 +1930,31 @@ function createProxyHandler<T>(
 
                 return () =>
                   container.removeEventListener("scroll", handleScroll);
-              }, [
-                totalCount,
-                positions,
-                overscan,
-                stickToBottom,
-                allItemsMeasured,
-              ]);
+              }, [totalCount, positions, overscan, stickToBottom]);
+
+              // Separate effect for initial scroll to bottom
+              useEffect(() => {
+                if (
+                  stickToBottom &&
+                  isInitialMountRef.current &&
+                  totalCount > 0 &&
+                  hasMeasurementsRef.current
+                ) {
+                  const container = containerRef.current;
+                  if (container) {
+                    // Use rAF to ensure DOM is updated
+                    requestAnimationFrame(() => {
+                      requestAnimationFrame(() => {
+                        container.scrollTo({
+                          top: container.scrollHeight,
+                          behavior: "auto",
+                        });
+                        isInitialMountRef.current = false;
+                      });
+                    });
+                  }
+                }
+              }, [stickToBottom, totalCount, positions]); // positions change triggers this when measurements come in
 
               const scrollToBottom = useCallback(
                 (behavior: ScrollBehavior = "smooth") => {