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

package/index.js

@@ -42,7 +42,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) {
@@ -193,7 +193,7 @@ function useSelector$(signalName, selector) {
 var DebugRow = ({ children }) => {
   return /* @__PURE__ */ React3__namespace.createElement(View, { style: { alignItems: "center", flexDirection: "row", justifyContent: "space-between" } }, children);
 };
-var DebugView = React3__namespace.memo(function DebugView2({ state }) {
+React3__namespace.memo(function DebugView2({ state }) {
   const ctx = useStateContext();
   const [totalSize = 0, scrollAdjust = 0, rawScroll = 0, scroll = 0, _numContainers = 0, _numContainersPooled = 0] = useArr$([
     "totalSize",
@@ -358,9 +358,6 @@ var PositionViewSticky = typedMemo(function PositionViewSticky2({
   return /* @__PURE__ */ React3__namespace.createElement("div", { ref: refView, style: viewStyle, ...rest }, children);
 });
 var PositionView = PositionViewState;
-
-// src/constants-platform.ts
-var IsNewArchitecture = true;
 function useInit(cb) {
   React3.useState(() => cb());
 }
@@ -571,7 +568,8 @@ function createResizeObserver(element, callback) {
 function useOnLayoutSync({
   ref,
   onLayoutProp,
-  onLayoutChange
+  onLayoutChange,
+  webLayoutResync
 }, deps) {
   React3.useLayoutEffect(() => {
     var _a3, _b;
@@ -595,7 +593,9 @@ function useOnLayoutSync({
       var _a4;
       const target = entry.target instanceof HTMLElement ? entry.target : void 0;
       const rectObserved = (_a4 = entry.contentRect) != null ? _a4 : target == null ? void 0 : target.getBoundingClientRect();
-      if (rectObserved.width !== prevRect.width || rectObserved.height !== prevRect.height) {
+      const didSizeChange = rectObserved.width !== prevRect.width || rectObserved.height !== prevRect.height;
+      const shouldResyncLayout = !!(webLayoutResync == null ? void 0 : webLayoutResync());
+      if (didSizeChange || shouldResyncLayout) {
         prevRect = rectObserved;
         emit(toLayout(rectObserved), false);
       }
@@ -621,6 +621,15 @@ var Platform = {
   OS: "web"
 };
 
+// src/utils/isInMVCPActiveMode.ts
+function isInMVCPActiveMode(state) {
+  const lock = state.mvcpAnchorLock;
+  if (lock && Date.now() > lock.expiresAt) {
+    state.mvcpAnchorLock = void 0;
+  }
+  return state.dataChangeNeedsScrollUpdate || !!state.mvcpAnchorLock;
+}
+
 // src/components/Container.tsx
 var Container = typedMemo(function Container2({
   id,
@@ -728,7 +737,8 @@ var Container = typedMemo(function Container2({
       updateItemSizeFn(currentItemKey, layout);
       itemLayoutRef.current.didLayout = true;
     };
-    if (prevSize !== void 0 && size + 1 < prevSize) {
+    const shouldDeferWebShrinkLayoutUpdate = !isInMVCPActiveMode(ctx.state) && prevSize !== void 0 && size + 1 < prevSize;
+    if (shouldDeferWebShrinkLayoutUpdate) {
       const token = pendingShrinkToken + 1;
       itemLayoutRef.current.pendingShrinkToken = token;
       requestAnimationFrame(() => {
@@ -752,7 +762,8 @@ var Container = typedMemo(function Container2({
   const { onLayout } = useOnLayoutSync(
     {
       onLayoutChange,
-      ref
+      ref,
+      webLayoutResync: () => isInMVCPActiveMode(ctx.state)
     },
     [itemKey, layoutRenderCount]
   );
@@ -944,25 +955,6 @@ var Containers = typedMemo(function Containers2({
   }
   return /* @__PURE__ */ React3__namespace.createElement(ContainersInner, { horizontal, numColumns, waitForInitialLayout }, containers);
 });
-function DevNumbers() {
-  return IS_DEV && // biome-ignore lint/nursery/noShadow: const function name shadowing is intentional
-  React3__namespace.memo(function DevNumbers2() {
-    return Array.from({ length: 100 }).map((_, index) => /* @__PURE__ */ React3__namespace.createElement(
-      "div",
-      {
-        key: index,
-        style: {
-          height: 100,
-          pointerEvents: "none",
-          position: "absolute",
-          top: index * 100,
-          width: "100%"
-        }
-      },
-      /* @__PURE__ */ React3__namespace.createElement("div", { style: { color: "red" } }, index * 100)
-    ));
-  });
-}
 
 // src/platform/StyleSheet.tsx
 function flattenStyles(styles) {
@@ -1137,6 +1129,7 @@ function useValueListener$(key, callback) {
 function ScrollAdjust() {
   const ctx = useStateContext();
   const lastScrollOffsetRef = React3__namespace.useRef(0);
+  const resetPaddingRafRef = React3__namespace.useRef(void 0);
   const callback = React3__namespace.useCallback(() => {
     var _a3;
     const scrollAdjust = peek$(ctx, "scrollAdjust");
@@ -1151,13 +1144,17 @@ function ScrollAdjust() {
         const nextScroll = prevScroll + scrollDelta;
         const totalSize = el.scrollHeight;
         if (scrollDelta > 0 && !ctx.state.adjustingFromInitialMount && totalSize < nextScroll + el.clientHeight) {
+          const paddingBottom = ctx.state.props.stylePaddingBottom || 0;
           const child = el.firstElementChild;
           const pad = (nextScroll + el.clientHeight - totalSize) * 2;
           child.style.paddingBottom = `${pad}px`;
           void el.offsetHeight;
           scrollView.scrollBy(0, scrollDelta);
-          requestAnimationFrame(() => {
-            const paddingBottom = ctx.state.props.stylePaddingBottom;
+          if (resetPaddingRafRef.current !== void 0) {
+            cancelAnimationFrame(resetPaddingRafRef.current);
+          }
+          resetPaddingRafRef.current = requestAnimationFrame(() => {
+            resetPaddingRafRef.current = void 0;
             child.style.paddingBottom = paddingBottom ? `${paddingBottom}px` : "0";
           });
         } else {
@@ -1279,7 +1276,7 @@ var ListComponent = typedMemo(function ListComponent2({
       },
       getComponent(ListFooterComponent)
     ),
-    IS_DEV && ENABLE_DEVMODE && /* @__PURE__ */ React3__namespace.createElement(DevNumbers, null)
+    IS_DEV && ENABLE_DEVMODE
   );
 });
 
@@ -1425,151 +1422,11 @@ function clampScrollOffset(ctx, offset) {
   return clampedOffset;
 }
 
-// src/utils/setInitialRenderState.ts
-function setInitialRenderState(ctx, {
-  didLayout,
-  didInitialScroll
-}) {
-  const { state } = ctx;
-  if (didLayout) {
-    state.didContainersLayout = true;
-  }
-  if (didInitialScroll) {
-    state.didFinishInitialScroll = true;
-  }
-  if (state.didContainersLayout && state.didFinishInitialScroll) {
-    set$(ctx, "readyToRender", true);
-  }
-}
-
-// src/core/finishScrollTo.ts
-function finishScrollTo(ctx) {
-  var _a3, _b;
-  const state = ctx.state;
-  if (state == null ? void 0 : state.scrollingTo) {
-    const scrollingTo = state.scrollingTo;
-    state.scrollHistory.length = 0;
-    state.initialScroll = void 0;
-    state.initialAnchor = void 0;
-    state.scrollingTo = void 0;
-    if (state.pendingTotalSize !== void 0) {
-      addTotalSize(ctx, null, state.pendingTotalSize);
-    }
-    if ((_a3 = state.props) == null ? void 0 : _a3.data) {
-      (_b = state.triggerCalculateItemsInView) == null ? void 0 : _b.call(state, { forceFullItemPositions: true });
-    }
-    {
-      state.scrollAdjustHandler.commitPendingAdjust(scrollingTo);
-    }
-    setInitialRenderState(ctx, { didInitialScroll: true });
-  }
-}
-
-// src/core/doScrollTo.ts
-var SCROLL_END_IDLE_MS = 80;
-var SCROLL_END_MAX_MS = 1500;
-var SMOOTH_SCROLL_DURATION_MS = 320;
-function doScrollTo(ctx, params) {
-  const state = ctx.state;
-  const { animated, horizontal, offset } = params;
-  const scroller = state.refScroller.current;
-  const node = typeof (scroller == null ? void 0 : scroller.getScrollableNode) === "function" ? scroller.getScrollableNode() : scroller;
-  if (node) {
-    const left = horizontal ? offset : 0;
-    const top = horizontal ? 0 : offset;
-    node.scrollTo({ behavior: animated ? "smooth" : "auto", left, top });
-    if (animated) {
-      listenForScrollEnd(ctx, node);
-    } else {
-      state.scroll = offset;
-      setTimeout(() => {
-        finishScrollTo(ctx);
-      }, 100);
-    }
-  }
-}
-function listenForScrollEnd(ctx, node) {
-  const supportsScrollEnd = "onscrollend" in node;
-  let idleTimeout;
-  let maxTimeout;
-  let settled = false;
-  const targetToken = ctx.state.scrollingTo;
-  const finish = () => {
-    if (settled) return;
-    settled = true;
-    cleanup();
-    if (targetToken === ctx.state.scrollingTo) {
-      finishScrollTo(ctx);
-    }
-  };
-  const onScroll2 = () => {
-    if (idleTimeout) {
-      clearTimeout(idleTimeout);
-    }
-    idleTimeout = setTimeout(finish, SCROLL_END_IDLE_MS);
-  };
-  const cleanup = () => {
-    if (supportsScrollEnd) {
-      node.removeEventListener("scrollend", finish);
-    } else {
-      node.removeEventListener("scroll", onScroll2);
-    }
-    if (idleTimeout) {
-      clearTimeout(idleTimeout);
-    }
-    if (maxTimeout) {
-      clearTimeout(maxTimeout);
-    }
-  };
-  if (supportsScrollEnd) {
-    node.addEventListener("scrollend", finish, { once: true });
-  } else {
-    node.addEventListener("scroll", onScroll2);
-    idleTimeout = setTimeout(finish, SMOOTH_SCROLL_DURATION_MS);
-    maxTimeout = setTimeout(finish, SCROLL_END_MAX_MS);
-  }
-  return cleanup;
-}
-
-// src/core/scrollTo.ts
-function scrollTo(ctx, params) {
-  const state = ctx.state;
-  const { noScrollingTo, forceScroll, ...scrollTarget } = params;
-  const { animated, isInitialScroll, offset: scrollTargetOffset, precomputedWithViewOffset } = scrollTarget;
-  const {
-    props: { horizontal }
-  } = state;
-  if (state.animFrameCheckFinishedScroll) {
-    cancelAnimationFrame(ctx.state.animFrameCheckFinishedScroll);
-  }
-  if (state.timeoutCheckFinishedScrollFallback) {
-    clearTimeout(ctx.state.timeoutCheckFinishedScrollFallback);
-  }
-  let offset = precomputedWithViewOffset ? scrollTargetOffset : calculateOffsetWithOffsetPosition(ctx, scrollTargetOffset, scrollTarget);
-  offset = clampScrollOffset(ctx, offset);
-  state.scrollHistory.length = 0;
-  if (!noScrollingTo) {
-    state.scrollingTo = scrollTarget;
-  }
-  state.scrollPending = offset;
-  if (forceScroll || !isInitialScroll || Platform.OS === "android") {
-    doScrollTo(ctx, { animated, horizontal, isInitialScroll, offset });
-  } else {
-    state.scroll = offset;
-  }
-}
-
 // 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,
@@ -1607,7 +1464,7 @@ var checkThreshold = (distance, atThreshold, threshold, wasReached, snapshot, co
 function checkAtBottom(ctx) {
   var _a3;
   const state = ctx.state;
-  if (!state) {
+  if (!state || state.initialScroll) {
     return;
   }
   const {
@@ -1617,6 +1474,9 @@ function checkAtBottom(ctx) {
     maintainingScrollAtEnd,
     props: { maintainScrollAtEndThreshold, onEndReachedThreshold }
   } = state;
+  if (state.initialScroll) {
+    return;
+  }
   const contentSize = getContentSize(ctx);
   if (contentSize > 0 && queuedInitialLayout && !maintainingScrollAtEnd) {
     const insetEnd = getContentInsetEnd(state);
@@ -1647,9 +1507,10 @@ function checkAtBottom(ctx) {
 }
 
 // src/utils/checkAtTop.ts
-function checkAtTop(state) {
+function checkAtTop(ctx) {
   var _a3;
-  if (!state) {
+  const state = ctx == null ? void 0 : ctx.state;
+  if (!state || state.initialScroll) {
     return;
   }
   const {
@@ -1681,6 +1542,160 @@ function checkAtTop(state) {
   );
 }
 
+// src/utils/checkThresholds.ts
+function checkThresholds(ctx) {
+  checkAtBottom(ctx);
+  checkAtTop(ctx);
+}
+
+// src/utils/setInitialRenderState.ts
+function setInitialRenderState(ctx, {
+  didLayout,
+  didInitialScroll
+}) {
+  const { state } = ctx;
+  if (didLayout) {
+    state.didContainersLayout = true;
+  }
+  if (didInitialScroll) {
+    state.didFinishInitialScroll = true;
+  }
+  if (state.didContainersLayout && state.didFinishInitialScroll) {
+    set$(ctx, "readyToRender", true);
+  }
+}
+
+// src/core/finishScrollTo.ts
+function finishScrollTo(ctx) {
+  var _a3, _b;
+  const state = ctx.state;
+  if (state == null ? void 0 : state.scrollingTo) {
+    const scrollingTo = state.scrollingTo;
+    state.scrollHistory.length = 0;
+    state.initialScroll = void 0;
+    state.initialAnchor = void 0;
+    state.scrollingTo = void 0;
+    if (state.pendingTotalSize !== void 0) {
+      addTotalSize(ctx, null, state.pendingTotalSize);
+    }
+    if ((_a3 = state.props) == null ? void 0 : _a3.data) {
+      (_b = state.triggerCalculateItemsInView) == null ? void 0 : _b.call(state, { forceFullItemPositions: true });
+    }
+    {
+      state.scrollAdjustHandler.commitPendingAdjust(scrollingTo);
+    }
+    setInitialRenderState(ctx, { didInitialScroll: true });
+    checkThresholds(ctx);
+  }
+}
+
+// src/core/doScrollTo.ts
+var SCROLL_END_IDLE_MS = 80;
+var SCROLL_END_MAX_MS = 1500;
+var SMOOTH_SCROLL_DURATION_MS = 320;
+var SCROLL_END_TARGET_EPSILON = 1;
+function doScrollTo(ctx, params) {
+  const state = ctx.state;
+  const { animated, horizontal, offset } = params;
+  const scroller = state.refScroller.current;
+  const node = typeof (scroller == null ? void 0 : scroller.getScrollableNode) === "function" ? scroller.getScrollableNode() : scroller;
+  if (node) {
+    const left = horizontal ? offset : 0;
+    const top = horizontal ? 0 : offset;
+    node.scrollTo({ behavior: animated ? "smooth" : "auto", left, top });
+    if (animated) {
+      listenForScrollEnd(ctx, node, {
+        horizontal: !!horizontal,
+        targetOffset: offset
+      });
+    } else {
+      state.scroll = offset;
+      setTimeout(() => {
+        finishScrollTo(ctx);
+      }, 100);
+    }
+  }
+}
+function listenForScrollEnd(ctx, node, params) {
+  const { horizontal, targetOffset } = params;
+  const supportsScrollEnd = "onscrollend" in node;
+  let idleTimeout;
+  let maxTimeout;
+  let settled = false;
+  const targetToken = ctx.state.scrollingTo;
+  const cleanup = () => {
+    node.removeEventListener("scroll", onScroll2);
+    if (supportsScrollEnd) {
+      node.removeEventListener("scrollend", onScrollEnd);
+    }
+    if (idleTimeout) {
+      clearTimeout(idleTimeout);
+    }
+    if (maxTimeout) {
+      clearTimeout(maxTimeout);
+    }
+  };
+  const finish = (reason) => {
+    if (settled) return;
+    if (targetToken !== ctx.state.scrollingTo) {
+      settled = true;
+      cleanup();
+      return;
+    }
+    const currentOffset = horizontal ? node.scrollLeft : node.scrollTop;
+    const isNearTarget = Math.abs(currentOffset - targetOffset) <= SCROLL_END_TARGET_EPSILON;
+    if (reason === "scrollend" && !isNearTarget) {
+      return;
+    }
+    settled = true;
+    cleanup();
+    finishScrollTo(ctx);
+  };
+  const onScroll2 = () => {
+    if (idleTimeout) {
+      clearTimeout(idleTimeout);
+    }
+    idleTimeout = setTimeout(() => finish("idle"), SCROLL_END_IDLE_MS);
+  };
+  const onScrollEnd = () => finish("scrollend");
+  node.addEventListener("scroll", onScroll2);
+  if (supportsScrollEnd) {
+    node.addEventListener("scrollend", onScrollEnd);
+    maxTimeout = setTimeout(() => finish("max"), SCROLL_END_MAX_MS);
+  } else {
+    idleTimeout = setTimeout(() => finish("idle"), SMOOTH_SCROLL_DURATION_MS);
+    maxTimeout = setTimeout(() => finish("max"), SCROLL_END_MAX_MS);
+  }
+}
+
+// src/core/scrollTo.ts
+function scrollTo(ctx, params) {
+  const state = ctx.state;
+  const { noScrollingTo, forceScroll, ...scrollTarget } = params;
+  const { animated, isInitialScroll, offset: scrollTargetOffset, precomputedWithViewOffset } = scrollTarget;
+  const {
+    props: { horizontal }
+  } = state;
+  if (state.animFrameCheckFinishedScroll) {
+    cancelAnimationFrame(ctx.state.animFrameCheckFinishedScroll);
+  }
+  if (state.timeoutCheckFinishedScrollFallback) {
+    clearTimeout(ctx.state.timeoutCheckFinishedScrollFallback);
+  }
+  let offset = precomputedWithViewOffset ? scrollTargetOffset : calculateOffsetWithOffsetPosition(ctx, scrollTargetOffset, scrollTarget);
+  offset = clampScrollOffset(ctx, offset);
+  state.scrollHistory.length = 0;
+  if (!noScrollingTo) {
+    state.scrollingTo = scrollTarget;
+  }
+  state.scrollPending = offset;
+  if (forceScroll || !isInitialScroll || Platform.OS === "android") {
+    doScrollTo(ctx, { animated, horizontal, offset });
+  } else {
+    state.scroll = offset;
+  }
+}
+
 // src/core/updateScroll.ts
 function updateScroll(ctx, newScroll, forceUpdate) {
   const state = ctx.state;
@@ -1718,7 +1733,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;
@@ -1726,8 +1742,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 (scrollLength > 0 && scrollingTo === void 0 && scrollDelta > scrollLength) {
       reactDom.flushSync(runCalculateItems);
@@ -1764,13 +1779,58 @@ function requestAdjust(ctx, positionDiff, dataChanged) {
 }
 
 // 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) {
+  {
+    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 now = Date.now();
+  const enableMVCPAnchorLock = (!!dataChanged || !!state.mvcpAnchorLock);
   const scrollingTo = state.scrollingTo;
+  const anchorLock = resolveAnchorLock(state, enableMVCPAnchorLock, mvcpData, now) ;
   let prevPosition;
   let targetId;
   const idsInViewWithPositions = [];
@@ -1779,28 +1839,45 @@ 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) {
       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 = 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);
@@ -1813,11 +1890,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);
@@ -1830,20 +1909,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);
       }
     };
@@ -2557,7 +2645,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) {
@@ -2578,13 +2666,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) {
@@ -2609,11 +2697,11 @@ function calculateItemsInView(ctx, params = {}) {
       props: {
         alwaysRenderIndicesArr,
         alwaysRenderIndicesSet,
+        drawDistance,
         getItemType,
         itemsAreEqual,
         keyExtractor,
-        onStickyHeaderChange,
-        scrollBuffer
+        onStickyHeaderChange
       },
       scrollForNextCalculateItemsInView,
       scrollLength,
@@ -2626,6 +2714,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) {
       return;
@@ -2633,7 +2722,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;
@@ -2652,24 +2740,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);
@@ -2679,7 +2763,9 @@ function calculateItemsInView(ctx, params = {}) {
       if (top === null && bottom === null) {
         state.scrollForNextCalculateItemsInView = void 0;
       } else if ((top === null || scrollTopBuffered > top) && (bottom === null || scrollBottomBuffered < bottom)) {
-        return;
+        if (!isInMVCPActiveMode(state)) {
+          return;
+        }
       }
     }
     const checkMVCP = doMVCP ? prepareMVCP(ctx, dataChanged) : void 0;
@@ -2911,7 +2997,7 @@ function calculateItemsInView(ctx, params = {}) {
         ctx,
         stickyIndicesArr,
         scroll,
-        scrollBuffer,
+        drawDistance,
         currentStickyIdx,
         pendingRemoval,
         alwaysRenderSet
@@ -3023,7 +3109,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);
     }
   }
@@ -3154,8 +3241,7 @@ function checkResetContainers(ctx, dataProp) {
     state.isEndReached = false;
   }
   if (!didMaintainScrollAtEnd) {
-    checkAtTop(state);
-    checkAtBottom(ctx);
+    checkThresholds(ctx);
   }
   delete state.previousData;
 }
@@ -3168,10 +3254,10 @@ function doInitialAllocateContainers(ctx) {
     scrollLength,
     props: {
       data,
+      drawDistance,
       getEstimatedItemSize,
       getFixedItemSize,
       getItemType,
-      scrollBuffer,
       numColumns,
       estimatedItemSize
     }
@@ -3193,7 +3279,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);
@@ -3243,8 +3329,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;
     }
@@ -3282,7 +3367,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;
@@ -3355,6 +3440,26 @@ var ScrollAdjustHandler = class {
 };
 
 // src/core/updateItemSize.ts
+function runOrScheduleMVCPRecalculate(ctx) {
+  const state = ctx.state;
+  {
+    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 });
+    });
+  }
+}
 function updateItemSize(ctx, itemKey, sizeObj) {
   var _a3;
   const state = ctx.state;
@@ -3438,7 +3543,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) {
@@ -3784,8 +3889,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) {
@@ -3815,7 +3918,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     data: dataProp = [],
     dataVersion,
     drawDistance = 250,
-    estimatedItemSize: estimatedItemSizeProp,
+    estimatedItemSize = 100,
     estimatedListSize,
     extraData,
     getEstimatedItemSize,
@@ -3894,14 +3997,12 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     index: initialScrollIndexProp || 0,
     viewOffset: initialScrollOffsetProp || 0
   } : void 0;
-  const [canRender, setCanRender] = React3__namespace.useState(!IsNewArchitecture);
+  const [canRender, setCanRender] = React3__namespace.useState(false);
   const ctx = useStateContext();
   ctx.columnWrapperStyle = columnWrapperStyle || (contentContainerStyle ? createColumnWrapperStyle(contentContainerStyle) : void 0);
   const refScroller = React3.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 = React3.useMemo(() => {
     const indices = getAlwaysRenderIndices(alwaysRender, dataProp, keyExtractor);
@@ -3930,8 +4031,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,
@@ -4018,6 +4119,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     contentInset,
     data: dataProp,
     dataVersion,
+    drawDistance,
     estimatedItemSize,
     getEstimatedItemSize: useWrapIfItem(getEstimatedItemSize),
     getFixedItemSize: useWrapIfItem(getFixedItemSize),
@@ -4041,7 +4143,6 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     overrideItemLayout,
     recycleItems: !!recycleItems,
     renderItem,
-    scrollBuffer,
     snapToIndices,
     stickyIndicesArr: stickyHeaderIndices != null ? stickyHeaderIndices : [],
     stickyIndicesSet: React3.useMemo(() => new Set(stickyHeaderIndices != null ? stickyHeaderIndices : []), [stickyHeaderIndices == null ? void 0 : stickyHeaderIndices.join(",")]),
@@ -4064,12 +4165,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     setPaddingTop(ctx, { stylePaddingTop: stylePaddingTopState });
     refState.current.props.stylePaddingBottom = stylePaddingBottomState;
     let paddingDiff = stylePaddingTopState - prevPaddingTop;
-    if (shouldAdjustPadding && maintainVisibleContentPositionConfig.size && paddingDiff && prevPaddingTop !== void 0 && Platform.OS === "ios") {
-      if (state.scroll < 0) {
-        paddingDiff += state.scroll;
-      }
-      requestAdjust(ctx, paddingDiff);
-    }
+    if (shouldAdjustPadding && maintainVisibleContentPositionConfig.size && paddingDiff && prevPaddingTop !== void 0 && Platform.OS === "ios") ;
   };
   if (isFirstLocal) {
     initializeStateVars(false);
@@ -4271,7 +4367,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       updateItemSize: fns.updateItemSize,
       waitForInitialLayout
     }
-  ), IS_DEV && ENABLE_DEBUG_VIEW && /* @__PURE__ */ React3__namespace.createElement(DebugView, { state: refState.current }));
+  ), IS_DEV && ENABLE_DEBUG_VIEW);
 });
 
 exports.LegendList = LegendList;