@legendapp/list 3.0.0-beta.30 → 3.0.0-beta.32

package/index.native.js

@@ -38,7 +38,7 @@ function getContentInsetEnd(state) {
   const baseInset = contentInset != null ? contentInset : state.nativeContentInset;
   const overrideInset = (_a3 = state.contentInsetOverride) != null ? _a3 : void 0;
   if (overrideInset) {
-    const mergedInset = { bottom: 0, left: 0, right: 0, top: 0, ...baseInset, ...overrideInset };
+    const mergedInset = { bottom: 0, right: 0, ...baseInset, ...overrideInset };
     return (horizontal ? mergedInset.right : mergedInset.bottom) || 0;
   }
   if (baseInset) {
@@ -187,7 +187,7 @@ function useSelector$(signalName, selector) {
 var DebugRow = ({ children }) => {
   return /* @__PURE__ */ React2__namespace.createElement(View, { style: { alignItems: "center", flexDirection: "row", justifyContent: "space-between" } }, children);
 };
-var DebugView = React2__namespace.memo(function DebugView2({ state }) {
+React2__namespace.memo(function DebugView2({ state }) {
   const ctx = useStateContext();
   const [totalSize = 0, scrollAdjust = 0, rawScroll = 0, scroll = 0, _numContainers = 0, _numContainersPooled = 0] = useArr$([
     "totalSize",
@@ -638,6 +638,11 @@ function useOnLayoutSync({
 var Platform2 = reactNative.Platform;
 var PlatformAdjustBreaksScroll = Platform2.OS === "android";
 
+// src/utils/isInMVCPActiveMode.native.ts
+function isInMVCPActiveMode(state) {
+  return state.dataChangeNeedsScrollUpdate;
+}
+
 // src/components/Container.tsx
 var Container = typedMemo(function Container2({
   id,
@@ -746,7 +751,8 @@ var Container = typedMemo(function Container2({
       updateItemSizeFn(currentItemKey, layout);
       itemLayoutRef.current.didLayout = true;
     };
-    if (Platform2.OS === "web" && prevSize !== void 0 && size + 1 < prevSize) {
+    const shouldDeferWebShrinkLayoutUpdate = Platform2.OS === "web" && !isInMVCPActiveMode(ctx.state) && prevSize !== void 0 && size + 1 < prevSize;
+    if (shouldDeferWebShrinkLayoutUpdate) {
       const token = pendingShrinkToken + 1;
       itemLayoutRef.current.pendingShrinkToken = token;
       requestAnimationFrame(() => {
@@ -775,8 +781,7 @@ var Container = typedMemo(function Container2({
   const { onLayout } = useOnLayoutSync(
     {
       onLayoutChange,
-      ref
-    },
+      ref},
     [itemKey, layoutRenderCount]
   );
   if (!IsNewArchitecture) {
@@ -884,25 +889,6 @@ var Containers = typedMemo(function Containers2({
   }
   return /* @__PURE__ */ React2__namespace.createElement(reactNative.Animated.View, { style }, containers);
 });
-function DevNumbers() {
-  return IS_DEV && // biome-ignore lint/nursery/noShadow: const function name shadowing is intentional
-  React2__namespace.memo(function DevNumbers2() {
-    return Array.from({ length: 100 }).map((_, index) => /* @__PURE__ */ React2__namespace.createElement(
-      reactNative.View,
-      {
-        key: index,
-        style: {
-          height: 100,
-          pointerEvents: "none",
-          position: "absolute",
-          top: index * 100,
-          width: "100%"
-        }
-      },
-      /* @__PURE__ */ React2__namespace.createElement(reactNative.Text, { style: { color: "red" } }, index * 100)
-    ));
-  });
-}
 var ListComponentScrollView = reactNative.Animated.ScrollView;
 function ScrollAdjust() {
   const bias = 1e7;
@@ -1020,7 +1006,7 @@ var ListComponent = typedMemo(function ListComponent2({
       },
       getComponent(ListFooterComponent)
     ),
-    IS_DEV && ENABLE_DEVMODE && /* @__PURE__ */ React2__namespace.createElement(DevNumbers, null)
+    IS_DEV && ENABLE_DEVMODE
   );
 });
 
@@ -1168,6 +1154,132 @@ function clampScrollOffset(ctx, offset) {
   return clampedOffset;
 }
 
+// src/utils/checkThreshold.ts
+var HYSTERESIS_MULTIPLIER = 1.3;
+var checkThreshold = (distance, atThreshold, threshold, wasReached, snapshot, context, onReached, setSnapshot, allowReentryOnChange) => {
+  const absDistance = Math.abs(distance);
+  const within = atThreshold || threshold > 0 && absDistance <= threshold;
+  const updateSnapshot = () => {
+    setSnapshot({
+      atThreshold,
+      contentSize: context.contentSize,
+      dataLength: context.dataLength,
+      scrollPosition: context.scrollPosition
+    });
+  };
+  if (!wasReached) {
+    if (!within) {
+      return false;
+    }
+    onReached(distance);
+    updateSnapshot();
+    return true;
+  }
+  const reset = !atThreshold && threshold > 0 && absDistance >= threshold * HYSTERESIS_MULTIPLIER || !atThreshold && threshold <= 0 && absDistance > 0;
+  if (reset) {
+    setSnapshot(void 0);
+    return false;
+  }
+  if (within) {
+    const changed = !snapshot || snapshot.atThreshold !== atThreshold || snapshot.contentSize !== context.contentSize || snapshot.dataLength !== context.dataLength;
+    if (changed) {
+      if (allowReentryOnChange) {
+        onReached(distance);
+      }
+      updateSnapshot();
+    }
+  }
+  return true;
+};
+
+// src/utils/checkAtBottom.ts
+function checkAtBottom(ctx) {
+  var _a3;
+  const state = ctx.state;
+  if (!state || state.initialScroll) {
+    return;
+  }
+  const {
+    queuedInitialLayout,
+    scrollLength,
+    scroll,
+    maintainingScrollAtEnd,
+    props: { maintainScrollAtEndThreshold, onEndReachedThreshold }
+  } = state;
+  if (state.initialScroll) {
+    return;
+  }
+  const contentSize = getContentSize(ctx);
+  if (contentSize > 0 && queuedInitialLayout && !maintainingScrollAtEnd) {
+    const insetEnd = getContentInsetEnd(state);
+    const distanceFromEnd = contentSize - scroll - scrollLength - insetEnd;
+    const isContentLess = contentSize < scrollLength;
+    state.isAtEnd = isContentLess || distanceFromEnd < scrollLength * maintainScrollAtEndThreshold;
+    state.isEndReached = checkThreshold(
+      distanceFromEnd,
+      isContentLess,
+      onEndReachedThreshold * scrollLength,
+      state.isEndReached,
+      state.endReachedSnapshot,
+      {
+        contentSize,
+        dataLength: (_a3 = state.props.data) == null ? void 0 : _a3.length,
+        scrollPosition: scroll
+      },
+      (distance) => {
+        var _a4, _b;
+        return (_b = (_a4 = state.props).onEndReached) == null ? void 0 : _b.call(_a4, { distanceFromEnd: distance });
+      },
+      (snapshot) => {
+        state.endReachedSnapshot = snapshot;
+      },
+      true
+    );
+  }
+}
+
+// src/utils/checkAtTop.ts
+function checkAtTop(ctx) {
+  var _a3;
+  const state = ctx == null ? void 0 : ctx.state;
+  if (!state || state.initialScroll) {
+    return;
+  }
+  const {
+    scrollLength,
+    scroll,
+    props: { onStartReachedThreshold }
+  } = state;
+  const distanceFromTop = scroll;
+  state.isAtStart = distanceFromTop <= 0;
+  state.isStartReached = checkThreshold(
+    distanceFromTop,
+    false,
+    onStartReachedThreshold * scrollLength,
+    state.isStartReached,
+    state.startReachedSnapshot,
+    {
+      contentSize: state.totalSize,
+      dataLength: (_a3 = state.props.data) == null ? void 0 : _a3.length,
+      scrollPosition: scroll
+    },
+    (distance) => {
+      var _a4, _b;
+      return (_b = (_a4 = state.props).onStartReached) == null ? void 0 : _b.call(_a4, { distanceFromStart: distance });
+    },
+    (snapshot) => {
+      state.startReachedSnapshot = snapshot;
+    },
+    false
+  );
+}
+
+// src/utils/checkThresholds.ts
+function checkThresholds(ctx) {
+  checkAtBottom(ctx);
+  checkAtTop(ctx);
+}
+
 // src/utils/setInitialRenderState.ts
 function setInitialRenderState(ctx, {
   didLayout,
@@ -1205,6 +1317,7 @@ function finishScrollTo(ctx) {
       state.scrollAdjustHandler.commitPendingAdjust(scrollingTo);
     }
     setInitialRenderState(ctx, { didInitialScroll: true });
+    checkThresholds(ctx);
   }
 }
 
@@ -1224,7 +1337,8 @@ function checkFinishedScrollFrame(ctx) {
     const diff1 = Math.abs(scroll - clampedTargetOffset);
     const diff2 = Math.abs(diff1 - adjust);
     const isNotOverscrolled = Math.abs(scroll - maxOffset) < 1;
-    if (isNotOverscrolled && (diff1 < 1 || diff2 < 1)) {
+    const isAtTarget = diff1 < 1 || !scrollingTo.animated && diff2 < 1;
+    if (isNotOverscrolled && isAtTarget) {
       finishScrollTo(ctx);
     }
   }
@@ -1293,7 +1407,7 @@ function scrollTo(ctx, params) {
   }
   state.scrollPending = offset;
   if (forceScroll || !isInitialScroll || Platform2.OS === "android") {
-    doScrollTo(ctx, { animated, horizontal, isInitialScroll, offset });
+    doScrollTo(ctx, { animated, horizontal, offset });
   } else {
     state.scroll = offset;
   }
@@ -1304,128 +1418,6 @@ var flushSync = (fn) => {
   fn();
 };
 
-// src/utils/checkThreshold.ts
-var HYSTERESIS_MULTIPLIER = 1.3;
-var checkThreshold = (distance, atThreshold, threshold, wasReached, snapshot, context, onReached, setSnapshot, allowReentryOnChange) => {
-  const absDistance = Math.abs(distance);
-  const within = atThreshold || threshold > 0 && absDistance <= threshold;
-  if (wasReached === null) {
-    if (!within && distance >= 0) {
-      return false;
-    }
-    return null;
-  }
-  const updateSnapshot = () => {
-    setSnapshot({
-      atThreshold,
-      contentSize: context.contentSize,
-      dataLength: context.dataLength,
-      scrollPosition: context.scrollPosition
-    });
-  };
-  if (!wasReached) {
-    if (!within) {
-      return false;
-    }
-    onReached(distance);
-    updateSnapshot();
-    return true;
-  }
-  const reset = !atThreshold && threshold > 0 && absDistance >= threshold * HYSTERESIS_MULTIPLIER || !atThreshold && threshold <= 0 && absDistance > 0;
-  if (reset) {
-    setSnapshot(void 0);
-    return false;
-  }
-  if (within) {
-    const changed = !snapshot || snapshot.atThreshold !== atThreshold || snapshot.contentSize !== context.contentSize || snapshot.dataLength !== context.dataLength;
-    if (changed) {
-      if (allowReentryOnChange) {
-        onReached(distance);
-      }
-      updateSnapshot();
-    }
-  }
-  return true;
-};
-
-// src/utils/checkAtBottom.ts
-function checkAtBottom(ctx) {
-  var _a3;
-  const state = ctx.state;
-  if (!state) {
-    return;
-  }
-  const {
-    queuedInitialLayout,
-    scrollLength,
-    scroll,
-    maintainingScrollAtEnd,
-    props: { maintainScrollAtEndThreshold, onEndReachedThreshold }
-  } = state;
-  const contentSize = getContentSize(ctx);
-  if (contentSize > 0 && queuedInitialLayout && !maintainingScrollAtEnd) {
-    const insetEnd = getContentInsetEnd(state);
-    const distanceFromEnd = contentSize - scroll - scrollLength - insetEnd;
-    const isContentLess = contentSize < scrollLength;
-    state.isAtEnd = isContentLess || distanceFromEnd < scrollLength * maintainScrollAtEndThreshold;
-    state.isEndReached = checkThreshold(
-      distanceFromEnd,
-      isContentLess,
-      onEndReachedThreshold * scrollLength,
-      state.isEndReached,
-      state.endReachedSnapshot,
-      {
-        contentSize,
-        dataLength: (_a3 = state.props.data) == null ? void 0 : _a3.length,
-        scrollPosition: scroll
-      },
-      (distance) => {
-        var _a4, _b;
-        return (_b = (_a4 = state.props).onEndReached) == null ? void 0 : _b.call(_a4, { distanceFromEnd: distance });
-      },
-      (snapshot) => {
-        state.endReachedSnapshot = snapshot;
-      },
-      true
-    );
-  }
-}
-
-// src/utils/checkAtTop.ts
-function checkAtTop(state) {
-  var _a3;
-  if (!state) {
-    return;
-  }
-  const {
-    scrollLength,
-    scroll,
-    props: { onStartReachedThreshold }
-  } = state;
-  const distanceFromTop = scroll;
-  state.isAtStart = distanceFromTop <= 0;
-  state.isStartReached = checkThreshold(
-    distanceFromTop,
-    false,
-    onStartReachedThreshold * scrollLength,
-    state.isStartReached,
-    state.startReachedSnapshot,
-    {
-      contentSize: state.totalSize,
-      dataLength: (_a3 = state.props.data) == null ? void 0 : _a3.length,
-      scrollPosition: scroll
-    },
-    (distance) => {
-      var _a4, _b;
-      return (_b = (_a4 = state.props).onStartReached) == null ? void 0 : _b.call(_a4, { distanceFromStart: distance });
-    },
-    (snapshot) => {
-      state.startReachedSnapshot = snapshot;
-    },
-    false
-  );
-}
-
 // src/core/updateScroll.ts
 function updateScroll(ctx, newScroll, forceUpdate) {
   const state = ctx.state;
@@ -1463,7 +1455,8 @@ function updateScroll(ctx, newScroll, forceUpdate) {
   const scrollDelta = Math.abs(newScroll - prevScroll);
   const scrollLength = state.scrollLength;
   const lastCalculated = state.scrollLastCalculate;
-  const shouldUpdate = forceUpdate || state.dataChangeNeedsScrollUpdate || state.scrollLastCalculate === void 0 || lastCalculated === void 0 || Math.abs(state.scroll - lastCalculated) > 2;
+  const useAggressiveItemRecalculation = isInMVCPActiveMode(state);
+  const shouldUpdate = useAggressiveItemRecalculation || forceUpdate || lastCalculated === void 0 || Math.abs(state.scroll - lastCalculated) > 2;
   if (shouldUpdate) {
     state.scrollLastCalculate = state.scroll;
     state.ignoreScrollFromMVCPIgnored = false;
@@ -1471,8 +1464,7 @@ function updateScroll(ctx, newScroll, forceUpdate) {
     const runCalculateItems = () => {
       var _a3;
       (_a3 = state.triggerCalculateItemsInView) == null ? void 0 : _a3.call(state, { doMVCP: scrollingTo !== void 0 });
-      checkAtBottom(ctx);
-      checkAtTop(state);
+      checkThresholds(ctx);
     };
     if (Platform2.OS === "web" && scrollLength > 0 && scrollingTo === void 0 && scrollDelta > scrollLength) {
       flushSync(runCalculateItems);
@@ -1590,13 +1582,59 @@ function ensureInitialAnchor(ctx) {
 }
 
 // src/core/mvcp.ts
+var MVCP_POSITION_EPSILON = 0.1;
+var MVCP_ANCHOR_LOCK_TTL_MS = 300;
+var MVCP_ANCHOR_LOCK_QUIET_PASSES_TO_RELEASE = 2;
+function resolveAnchorLock(state, enableMVCPAnchorLock, mvcpData, now) {
+  if (!enableMVCPAnchorLock) {
+    state.mvcpAnchorLock = void 0;
+    return void 0;
+  }
+  const lock = state.mvcpAnchorLock;
+  if (!lock) {
+    return void 0;
+  }
+  const isExpired = now > lock.expiresAt;
+  const isMissing = state.indexByKey.get(lock.id) === void 0;
+  if (isExpired || isMissing || !mvcpData) {
+    state.mvcpAnchorLock = void 0;
+    return void 0;
+  }
+  return lock;
+}
+function updateAnchorLock(state, params) {
+  if (Platform2.OS === "web") {
+    const { anchorId, anchorPosition, dataChanged, now, positionDiff } = params;
+    const enableMVCPAnchorLock = !!dataChanged || !!state.mvcpAnchorLock;
+    const mvcpData = state.props.maintainVisibleContentPosition.data;
+    if (!enableMVCPAnchorLock || !mvcpData || state.scrollingTo || !anchorId || anchorPosition === void 0) {
+      return;
+    }
+    const existingLock = state.mvcpAnchorLock;
+    const quietPasses = !dataChanged && Math.abs(positionDiff) <= MVCP_POSITION_EPSILON && (existingLock == null ? void 0 : existingLock.id) === anchorId ? existingLock.quietPasses + 1 : 0;
+    if (!dataChanged && quietPasses >= MVCP_ANCHOR_LOCK_QUIET_PASSES_TO_RELEASE) {
+      state.mvcpAnchorLock = void 0;
+      return;
+    }
+    state.mvcpAnchorLock = {
+      expiresAt: now + MVCP_ANCHOR_LOCK_TTL_MS,
+      id: anchorId,
+      position: anchorPosition,
+      quietPasses
+    };
+  }
+}
 function prepareMVCP(ctx, dataChanged) {
   const state = ctx.state;
   const { idsInView, positions, props } = state;
   const {
     maintainVisibleContentPosition: { data: mvcpData, size: mvcpScroll, shouldRestorePosition }
   } = props;
+  const isWeb = Platform2.OS === "web";
+  const now = Date.now();
+  const enableMVCPAnchorLock = isWeb && (!!dataChanged || !!state.mvcpAnchorLock);
   const scrollingTo = state.scrollingTo;
+  const anchorLock = isWeb ? resolveAnchorLock(state, enableMVCPAnchorLock, mvcpData, now) : void 0;
   let prevPosition;
   let targetId;
   const idsInViewWithPositions = [];
@@ -1605,31 +1643,48 @@ function prepareMVCP(ctx, dataChanged) {
   const shouldMVCP = dataChanged ? mvcpData : mvcpScroll;
   const indexByKey = state.indexByKey;
   if (shouldMVCP) {
-    if (scrollTarget !== void 0) {
+    if (anchorLock && scrollTarget === void 0) {
+      targetId = anchorLock.id;
+      prevPosition = anchorLock.position;
+    } else if (scrollTarget !== void 0) {
       if (!IsNewArchitecture && (scrollingTo == null ? void 0 : scrollingTo.isInitialScroll)) {
         return void 0;
       }
       targetId = getId(state, scrollTarget);
-    } else if (idsInView.length > 0 && state.didContainersLayout) {
-      if (dataChanged) {
-        for (let i = 0; i < idsInView.length; i++) {
-          const id = idsInView[i];
-          const index = indexByKey.get(id);
-          if (index !== void 0) {
-            idsInViewWithPositions.push({ id, position: positions.get(id) });
-          }
+    } else if (idsInView.length > 0 && state.didContainersLayout && !dataChanged) {
+      targetId = idsInView.find((id) => indexByKey.get(id) !== void 0);
+    }
+    if (dataChanged && idsInView.length > 0 && state.didContainersLayout) {
+      for (let i = 0; i < idsInView.length; i++) {
+        const id = idsInView[i];
+        const index = indexByKey.get(id);
+        if (index !== void 0) {
+          idsInViewWithPositions.push({ id, position: positions.get(id) });
         }
-      } else {
-        targetId = idsInView.find((id) => indexByKey.get(id) !== void 0);
       }
     }
-    if (targetId !== void 0) {
+    if (targetId !== void 0 && prevPosition === void 0) {
       prevPosition = positions.get(targetId);
     }
     return () => {
       let positionDiff = 0;
-      if (dataChanged && targetId === void 0 && mvcpData) {
-        const data = state.props.data;
+      let anchorIdForLock = anchorLock == null ? void 0 : anchorLock.id;
+      let anchorPositionForLock;
+      let skipTargetAnchor = false;
+      const data = state.props.data;
+      const shouldValidateLockedAnchor = isWeb && dataChanged && mvcpData && scrollTarget === void 0 && targetId !== void 0 && (anchorLock == null ? void 0 : anchorLock.id) === targetId && shouldRestorePosition !== void 0;
+      if (shouldValidateLockedAnchor && targetId !== void 0) {
+        const index = indexByKey.get(targetId);
+        if (index !== void 0) {
+          const item = data[index];
+          skipTargetAnchor = item === void 0 || !shouldRestorePosition(item, index, data);
+          if (skipTargetAnchor && (anchorLock == null ? void 0 : anchorLock.id) === targetId) {
+            state.mvcpAnchorLock = void 0;
+          }
+        }
+      }
+      const shouldUseFallbackVisibleAnchor = dataChanged && mvcpData && scrollTarget === void 0 && (targetId === void 0 || positions.get(targetId) === void 0 || skipTargetAnchor);
+      if (shouldUseFallbackVisibleAnchor) {
         for (let i = 0; i < idsInViewWithPositions.length; i++) {
           const { id, position } = idsInViewWithPositions[i];
           const index = indexByKey.get(id);
@@ -1642,11 +1697,13 @@ function prepareMVCP(ctx, dataChanged) {
           const newPosition = positions.get(id);
           if (newPosition !== void 0) {
             positionDiff = newPosition - position;
+            anchorIdForLock = id;
+            anchorPositionForLock = newPosition;
             break;
           }
         }
       }
-      if (targetId !== void 0 && prevPosition !== void 0) {
+      if (!skipTargetAnchor && targetId !== void 0 && prevPosition !== void 0) {
         const newPosition = positions.get(targetId);
         if (newPosition !== void 0) {
           const totalSize = getContentSize(ctx);
@@ -1659,20 +1716,29 @@ function prepareMVCP(ctx, dataChanged) {
             }
           }
           positionDiff = diff;
+          anchorIdForLock = targetId;
+          anchorPositionForLock = newPosition;
         }
       }
       if (scrollingToViewPosition && scrollingToViewPosition > 0) {
         const newSize = getItemSize(ctx, targetId, scrollTarget, state.props.data[scrollTarget]);
         const prevSize = scrollingTo == null ? void 0 : scrollingTo.itemSize;
-        if (newSize !== void 0 && prevSize !== void 0 && newSize !== (scrollingTo == null ? void 0 : scrollingTo.itemSize)) {
+        if (newSize !== void 0 && prevSize !== void 0 && newSize !== prevSize) {
           const diff = newSize - prevSize;
           if (diff !== 0) {
-            positionDiff += (newSize - prevSize) * scrollingToViewPosition;
+            positionDiff += diff * scrollingToViewPosition;
             scrollingTo.itemSize = newSize;
           }
         }
       }
-      if (Math.abs(positionDiff) > 0.1) {
+      updateAnchorLock(state, {
+        anchorId: anchorIdForLock,
+        anchorPosition: anchorPositionForLock,
+        dataChanged,
+        now,
+        positionDiff
+      });
+      if (Math.abs(positionDiff) > MVCP_POSITION_EPSILON) {
         requestAdjust(ctx, positionDiff, dataChanged && mvcpData);
       }
     };
@@ -2386,7 +2452,7 @@ function handleStickyActivation(ctx, stickyHeaderIndices, stickyArray, currentSt
     }
   }
 }
-function handleStickyRecycling(ctx, stickyArray, scroll, scrollBuffer, currentStickyIdx, pendingRemoval, alwaysRenderIndicesSet) {
+function handleStickyRecycling(ctx, stickyArray, scroll, drawDistance, currentStickyIdx, pendingRemoval, alwaysRenderIndicesSet) {
   var _a3, _b, _c;
   const state = ctx.state;
   for (const containerIndex of state.stickyContainerPool) {
@@ -2407,13 +2473,13 @@ function handleStickyRecycling(ctx, stickyArray, scroll, scrollBuffer, currentSt
     if (nextIndex) {
       const nextId = (_a3 = state.idCache[nextIndex]) != null ? _a3 : getId(state, nextIndex);
       const nextPos = nextId ? state.positions.get(nextId) : void 0;
-      shouldRecycle = nextPos !== void 0 && scroll > nextPos + scrollBuffer * 2;
+      shouldRecycle = nextPos !== void 0 && scroll > nextPos + drawDistance * 2;
     } else {
       const currentId = (_b = state.idCache[itemIndex]) != null ? _b : getId(state, itemIndex);
       if (currentId) {
         const currentPos = state.positions.get(currentId);
         const currentSize = (_c = state.sizes.get(currentId)) != null ? _c : getItemSize(ctx, currentId, itemIndex, state.props.data[itemIndex]);
-        shouldRecycle = currentPos !== void 0 && scroll > currentPos + currentSize + scrollBuffer * 3;
+        shouldRecycle = currentPos !== void 0 && scroll > currentPos + currentSize + drawDistance * 3;
       }
     }
     if (shouldRecycle) {
@@ -2438,11 +2504,11 @@ function calculateItemsInView(ctx, params = {}) {
       props: {
         alwaysRenderIndicesArr,
         alwaysRenderIndicesSet,
+        drawDistance,
         getItemType,
         itemsAreEqual,
         keyExtractor,
-        onStickyHeaderChange,
-        scrollBuffer
+        onStickyHeaderChange
       },
       scrollForNextCalculateItemsInView,
       scrollLength,
@@ -2455,6 +2521,7 @@ function calculateItemsInView(ctx, params = {}) {
     const stickyIndicesSet = state.props.stickyIndicesSet || /* @__PURE__ */ new Set();
     const alwaysRenderArr = alwaysRenderIndicesArr || [];
     const alwaysRenderSet = alwaysRenderIndicesSet || /* @__PURE__ */ new Set();
+    const { dataChanged, doMVCP, forceFullItemPositions } = params;
     const prevNumContainers = peek$(ctx, "numContainers");
     if (!data || scrollLength === 0 || !prevNumContainers) {
       if (!IsNewArchitecture && state.initialAnchor) {
@@ -2465,7 +2532,6 @@ function calculateItemsInView(ctx, params = {}) {
     const totalSize = getContentSize(ctx);
     const topPad = peek$(ctx, "stylePaddingTop") + peek$(ctx, "headerSize");
     const numColumns = peek$(ctx, "numColumns");
-    const { dataChanged, doMVCP, forceFullItemPositions } = params;
     const speed = getScrollVelocity(state);
     const scrollExtra = 0;
     const { queuedInitialLayout } = state;
@@ -2484,24 +2550,20 @@ function calculateItemsInView(ctx, params = {}) {
     if (scroll + scrollLength > totalSize) {
       scroll = Math.max(0, totalSize - scrollLength);
     }
-    if (ENABLE_DEBUG_VIEW) {
-      set$(ctx, "debugRawScroll", scrollState);
-      set$(ctx, "debugComputedScroll", scroll);
-    }
     const previousStickyIndex = peek$(ctx, "activeStickyIndex");
     const currentStickyIdx = stickyIndicesArr.length > 0 ? findCurrentStickyIndex(stickyIndicesArr, scroll, state) : -1;
     const nextActiveStickyIndex = currentStickyIdx >= 0 ? stickyIndicesArr[currentStickyIdx] : -1;
     if (currentStickyIdx >= 0 || previousStickyIndex >= 0) {
       set$(ctx, "activeStickyIndex", nextActiveStickyIndex);
     }
-    let scrollBufferTop = scrollBuffer;
-    let scrollBufferBottom = scrollBuffer;
-    if (speed > 0 || speed === 0 && scroll < Math.max(50, scrollBuffer)) {
-      scrollBufferTop = scrollBuffer * 0.5;
-      scrollBufferBottom = scrollBuffer * 1.5;
+    let scrollBufferTop = drawDistance;
+    let scrollBufferBottom = drawDistance;
+    if (speed > 0 || speed === 0 && scroll < Math.max(50, drawDistance)) {
+      scrollBufferTop = drawDistance * 0.5;
+      scrollBufferBottom = drawDistance * 1.5;
     } else {
-      scrollBufferTop = scrollBuffer * 1.5;
-      scrollBufferBottom = scrollBuffer * 0.5;
+      scrollBufferTop = drawDistance * 1.5;
+      scrollBufferBottom = drawDistance * 0.5;
     }
     const scrollTopBuffered = scroll - scrollBufferTop;
     const scrollBottom = scroll + scrollLength + (scroll < 0 ? -scroll : 0);
@@ -2514,7 +2576,9 @@ function calculateItemsInView(ctx, params = {}) {
         if (!IsNewArchitecture && state.initialAnchor) {
           ensureInitialAnchor(ctx);
         }
-        return;
+        if (Platform2.OS !== "web" || !isInMVCPActiveMode(state)) {
+          return;
+        }
       }
     }
     const checkMVCP = doMVCP ? prepareMVCP(ctx, dataChanged) : void 0;
@@ -2746,7 +2810,7 @@ function calculateItemsInView(ctx, params = {}) {
         ctx,
         stickyIndicesArr,
         scroll,
-        scrollBuffer,
+        drawDistance,
         currentStickyIdx,
         pendingRemoval,
         alwaysRenderSet
@@ -2946,8 +3010,7 @@ function checkResetContainers(ctx, dataProp) {
     state.isEndReached = false;
   }
   if (!didMaintainScrollAtEnd) {
-    checkAtTop(state);
-    checkAtBottom(ctx);
+    checkThresholds(ctx);
   }
   delete state.previousData;
 }
@@ -2960,10 +3023,10 @@ function doInitialAllocateContainers(ctx) {
     scrollLength,
     props: {
       data,
+      drawDistance,
       getEstimatedItemSize,
       getFixedItemSize,
       getItemType,
-      scrollBuffer,
       numColumns,
       estimatedItemSize
     }
@@ -2985,7 +3048,7 @@ function doInitialAllocateContainers(ctx) {
     } else {
       averageItemSize = estimatedItemSize;
     }
-    const numContainers = Math.ceil((scrollLength + scrollBuffer * 2) / averageItemSize * numColumns);
+    const numContainers = Math.ceil((scrollLength + drawDistance * 2) / averageItemSize * numColumns);
     for (let i = 0; i < numContainers; i++) {
       set$(ctx, `containerPosition${i}`, POSITION_OUT_OF_VIEW);
       set$(ctx, `containerColumn${i}`, -1);
@@ -3035,8 +3098,7 @@ function handleLayout(ctx, layout, setCanRender) {
     if (maintainScrollAtEnd === true || maintainScrollAtEnd.onLayout) {
       doMaintainScrollAtEnd(ctx, false);
     }
-    checkAtBottom(ctx);
-    checkAtTop(state);
+    checkThresholds(ctx);
     if (state) {
       state.needsOtherAxisSize = otherAxisSize - (state.props.stylePaddingTop || 0) < 10;
     }
@@ -3074,7 +3136,7 @@ function onScroll(ctx, event) {
     }
   }
   let newScroll = event.nativeEvent.contentOffset[state.props.horizontal ? "x" : "y"];
-  if (state.scrollingTo) {
+  if (state.scrollingTo && state.scrollingTo.offset >= newScroll) {
     const maxOffset = clampScrollOffset(ctx, newScroll);
     if (newScroll !== maxOffset && Math.abs(newScroll - maxOffset) > 1) {
       newScroll = maxOffset;
@@ -3147,6 +3209,28 @@ var ScrollAdjustHandler = class {
 };
 
 // src/core/updateItemSize.ts
+function runOrScheduleMVCPRecalculate(ctx) {
+  const state = ctx.state;
+  if (Platform2.OS === "web") {
+    if (!state.mvcpAnchorLock) {
+      if (state.queuedMVCPRecalculate !== void 0) {
+        cancelAnimationFrame(state.queuedMVCPRecalculate);
+        state.queuedMVCPRecalculate = void 0;
+      }
+      calculateItemsInView(ctx, { doMVCP: true });
+      return;
+    }
+    if (state.queuedMVCPRecalculate !== void 0) {
+      return;
+    }
+    state.queuedMVCPRecalculate = requestAnimationFrame(() => {
+      state.queuedMVCPRecalculate = void 0;
+      calculateItemsInView(ctx, { doMVCP: true });
+    });
+  } else {
+    calculateItemsInView(ctx, { doMVCP: true });
+  }
+}
 function updateItemSize(ctx, itemKey, sizeObj) {
   var _a3;
   const state = ctx.state;
@@ -3230,7 +3314,7 @@ function updateItemSize(ctx, itemKey, sizeObj) {
   if (didContainersLayout || checkAllSizesKnown(state)) {
     if (needsRecalculate) {
       state.scrollForNextCalculateItemsInView = void 0;
-      calculateItemsInView(ctx, { doMVCP: true });
+      runOrScheduleMVCPRecalculate(ctx);
     }
     if (shouldMaintainScrollAtEnd) {
       if (maintainScrollAtEnd === true || maintainScrollAtEnd.onItemLayout) {
@@ -3595,8 +3679,6 @@ function useThrottledOnScroll(originalHandler, scrollEventThrottle) {
 }
 
 // src/components/LegendList.tsx
-var DEFAULT_DRAW_DISTANCE = 250;
-var DEFAULT_ITEM_SIZE = 100;
 var LegendList = typedMemo(
   // biome-ignore lint/nursery/noShadow: const function name shadowing is intentional
   typedForwardRef(function LegendList2(props, forwardedRef) {
@@ -3626,7 +3708,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     data: dataProp = [],
     dataVersion,
     drawDistance = 250,
-    estimatedItemSize: estimatedItemSizeProp,
+    estimatedItemSize = 100,
     estimatedListSize,
     extraData,
     getEstimatedItemSize,
@@ -3710,9 +3792,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   ctx.columnWrapperStyle = columnWrapperStyle || (contentContainerStyle ? createColumnWrapperStyle(contentContainerStyle) : void 0);
   const refScroller = React2.useRef(null);
   const combinedRef = useCombinedRef(refScroller, refScrollView);
-  const estimatedItemSize = estimatedItemSizeProp != null ? estimatedItemSizeProp : DEFAULT_ITEM_SIZE;
-  const scrollBuffer = (drawDistance != null ? drawDistance : DEFAULT_DRAW_DISTANCE) || 1;
-  const keyExtractor = keyExtractorProp != null ? keyExtractorProp : (_item, index) => index.toString();
+  const keyExtractor = keyExtractorProp != null ? keyExtractorProp : ((_item, index) => index.toString());
   const stickyHeaderIndices = stickyHeaderIndicesProp != null ? stickyHeaderIndicesProp : stickyIndicesDeprecated;
   const alwaysRenderIndices = React2.useMemo(() => {
     const indices = getAlwaysRenderIndices(alwaysRender, dataProp, keyExtractor);
@@ -3741,8 +3821,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       ctx.state = {
         activeStickyIndex: -1,
         averageSizes: {},
-        columns: /* @__PURE__ */ new Map(),
         columnSpans: /* @__PURE__ */ new Map(),
+        columns: /* @__PURE__ */ new Map(),
         containerItemKeys: /* @__PURE__ */ new Map(),
         containerItemTypes: /* @__PURE__ */ new Map(),
         contentInsetOverride: void 0,
@@ -3829,6 +3909,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     contentInset,
     data: dataProp,
     dataVersion,
+    drawDistance,
     estimatedItemSize,
     getEstimatedItemSize: useWrapIfItem(getEstimatedItemSize),
     getFixedItemSize: useWrapIfItem(getFixedItemSize),
@@ -3852,7 +3933,6 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     overrideItemLayout,
     recycleItems: !!recycleItems,
     renderItem,
-    scrollBuffer,
     snapToIndices,
     stickyIndicesArr: stickyHeaderIndices != null ? stickyHeaderIndices : [],
     stickyIndicesSet: React2.useMemo(() => new Set(stickyHeaderIndices != null ? stickyHeaderIndices : []), [stickyHeaderIndices == null ? void 0 : stickyHeaderIndices.join(",")]),
@@ -4099,7 +4179,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       updateItemSize: fns.updateItemSize,
       waitForInitialLayout
     }
-  ), IS_DEV && ENABLE_DEBUG_VIEW && /* @__PURE__ */ React2__namespace.createElement(DebugView, { state: refState.current }));
+  ), IS_DEV && ENABLE_DEBUG_VIEW);
 });
 
 exports.LegendList = LegendList;