@legendapp/list 3.0.0-beta.31 → 3.0.0-beta.33

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",
@@ -239,7 +239,7 @@ var _a;
 var envMode = typeof process !== "undefined" && typeof process.env === "object" && process.env ? (_a = process.env.NODE_ENV) != null ? _a : process.env.MODE : void 0;
 var processDev = typeof envMode === "string" ? envMode.toLowerCase() !== "production" : void 0;
 var _a2;
-var IS_DEV = (_a2 = metroDev != null ? metroDev : processDev) != null ? _a2 : false;
+var IS_DEV = (_a2 = processDev != null ? processDev : metroDev) != null ? _a2 : false;
 
 // src/constants.ts
 var POSITION_OUT_OF_VIEW = -1e7;
@@ -312,7 +312,7 @@ function useValue$(key, params) {
   React2.useMemo(() => {
     let prevValue;
     let didQueueTask = false;
-    listen$(ctx, key, (v) => {
+    listen$(ctx, key, () => {
       const newValue = getNewValue();
       if (delay !== void 0) {
         const fn = () => {
@@ -341,7 +341,6 @@ function useValue$(key, params) {
   }, []);
   return animValue;
 }
-var typedForwardRef = React2.forwardRef;
 var typedMemo = React2.memo;
 var getComponent = (Component) => {
   if (React2__namespace.isValidElement(Component)) {
@@ -416,10 +415,7 @@ var PositionViewSticky = typedMemo(function PositionViewSticky2({
       const stickyPosition = animatedScrollY.interpolate({
         extrapolateLeft: "clamp",
         extrapolateRight: "extend",
-        inputRange: [
-          stickyStart,
-          stickyStart + 5e3
-        ],
+        inputRange: [stickyStart, stickyStart + 5e3],
         outputRange: [position, position + 5e3]
       });
       return horizontal ? [{ translateX: stickyPosition }] : [{ translateY: stickyPosition }];
@@ -637,9 +633,16 @@ function useOnLayoutSync({
 }
 var Platform2 = reactNative.Platform;
 var PlatformAdjustBreaksScroll = Platform2.OS === "android";
+var typedForwardRef = React2.forwardRef;
+var typedMemo2 = React2.memo;
+
+// src/utils/isInMVCPActiveMode.native.ts
+function isInMVCPActiveMode(state) {
+  return state.dataChangeNeedsScrollUpdate;
+}
 
 // src/components/Container.tsx
-var Container = typedMemo(function Container2({
+var Container = typedMemo2(function Container2({
   id,
   recycleItems,
   horizontal,
@@ -650,6 +653,7 @@ var Container = typedMemo(function Container2({
 }) {
   const ctx = useStateContext();
   const { columnWrapperStyle, animatedScrollY } = ctx;
+  const stickyPositionComponentInternal = ctx.state.props.stickyPositionComponentInternal;
   const [column = 0, span = 1, data, itemKey, numColumns = 1, extraData, isSticky] = useArr$([
     `containerColumn${id}`,
     `containerSpan${id}`,
@@ -746,7 +750,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 +780,7 @@ var Container = typedMemo(function Container2({
   const { onLayout } = useOnLayoutSync(
     {
       onLayoutChange,
-      ref
-    },
+      ref},
     [itemKey, layoutRenderCount]
   );
   if (!IsNewArchitecture) {
@@ -802,7 +806,7 @@ var Container = typedMemo(function Container2({
       }
     }, [itemKey]);
   }
-  const PositionComponent = isSticky ? PositionViewSticky : PositionView;
+  const PositionComponent = isSticky ? stickyPositionComponentInternal ? stickyPositionComponentInternal : PositionViewSticky : PositionView;
   return /* @__PURE__ */ React2__namespace.createElement(
     PositionComponent,
     {
@@ -884,25 +888,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;
@@ -932,7 +917,7 @@ var LayoutView = ({ onLayoutChange, refView, ...rest }) => {
 };
 
 // src/components/ListComponent.tsx
-var ListComponent = typedMemo(function ListComponent2({
+var ListComponent = typedMemo2(function ListComponent2({
   canRender,
   style,
   contentContainerStyle,
@@ -963,7 +948,9 @@ var ListComponent = typedMemo(function ListComponent2({
   const ctx = useStateContext();
   const maintainVisibleContentPosition = ctx.state.props.maintainVisibleContentPosition;
   const ScrollComponent = renderScrollComponent ? React2.useMemo(
-    () => React2__namespace.forwardRef((props, ref) => renderScrollComponent({ ...props, ref })),
+    () => React2__namespace.forwardRef(
+      (props, ref) => renderScrollComponent({ ...props, ref })
+    ),
     [renderScrollComponent]
   ) : ListComponentScrollView;
   const SnapOrScroll = snapToIndices ? SnapWrapper : ScrollComponent;
@@ -1020,7 +1007,7 @@ var ListComponent = typedMemo(function ListComponent2({
       },
       getComponent(ListFooterComponent)
     ),
-    IS_DEV && ENABLE_DEVMODE && /* @__PURE__ */ React2__namespace.createElement(DevNumbers, null)
+    IS_DEV && ENABLE_DEVMODE
   );
 });
 
@@ -1156,12 +1143,15 @@ function calculateOffsetWithOffsetPosition(ctx, offsetParam, params) {
 }
 
 // src/core/clampScrollOffset.ts
-function clampScrollOffset(ctx, offset) {
+function clampScrollOffset(ctx, offset, scrollTarget) {
   const state = ctx.state;
   const contentSize = getContentSize(ctx);
   let clampedOffset = offset;
   if (Number.isFinite(contentSize) && Number.isFinite(state.scrollLength) && (Platform2.OS !== "android" || state.lastLayout)) {
-    const maxOffset = Math.max(0, contentSize - state.scrollLength);
+    const baseMaxOffset = Math.max(0, contentSize - state.scrollLength);
+    const viewOffset = scrollTarget == null ? void 0 : scrollTarget.viewOffset;
+    const extraEndOffset = typeof viewOffset === "number" && viewOffset < 0 ? -viewOffset : 0;
+    const maxOffset = baseMaxOffset + extraEndOffset;
     clampedOffset = Math.min(offset, maxOffset);
   }
   clampedOffset = Math.max(0, clampedOffset);
@@ -1256,7 +1246,7 @@ function checkAtBottom(ctx) {
 function checkAtTop(ctx) {
   var _a3;
   const state = ctx == null ? void 0 : ctx.state;
-  if (!state || state.initialScroll) {
+  if (!state || state.initialScroll || state.scrollingTo) {
     return;
   }
   const {
@@ -1300,14 +1290,22 @@ function setInitialRenderState(ctx, {
   didInitialScroll
 }) {
   const { state } = ctx;
+  const {
+    loadStartTime,
+    props: { onLoad }
+  } = state;
   if (didLayout) {
     state.didContainersLayout = true;
   }
   if (didInitialScroll) {
     state.didFinishInitialScroll = true;
   }
-  if (state.didContainersLayout && state.didFinishInitialScroll) {
+  const isReadyToRender = Boolean(state.didContainersLayout && state.didFinishInitialScroll);
+  if (isReadyToRender && !peek$(ctx, "readyToRender")) {
     set$(ctx, "readyToRender", true);
+    if (onLoad) {
+      onLoad({ elapsedTimeInMs: Date.now() - loadStartTime });
+    }
   }
 }
 
@@ -1346,12 +1344,17 @@ function checkFinishedScrollFrame(ctx) {
     state.animFrameCheckFinishedScroll = void 0;
     const scroll = state.scrollPending;
     const adjust = state.scrollAdjustHandler.getAdjust();
-    const clampedTargetOffset = clampScrollOffset(ctx, scrollingTo.offset - (scrollingTo.viewOffset || 0));
-    const maxOffset = clampScrollOffset(ctx, scroll);
+    const clampedTargetOffset = clampScrollOffset(
+      ctx,
+      scrollingTo.offset - (scrollingTo.viewOffset || 0),
+      scrollingTo
+    );
+    const maxOffset = clampScrollOffset(ctx, scroll, scrollingTo);
     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);
     }
   }
@@ -1413,14 +1416,14 @@ function scrollTo(ctx, params) {
     clearTimeout(ctx.state.timeoutCheckFinishedScrollFallback);
   }
   let offset = precomputedWithViewOffset ? scrollTargetOffset : calculateOffsetWithOffsetPosition(ctx, scrollTargetOffset, scrollTarget);
-  offset = clampScrollOffset(ctx, offset);
+  offset = clampScrollOffset(ctx, offset, scrollTarget);
   state.scrollHistory.length = 0;
   if (!noScrollingTo) {
     state.scrollingTo = scrollTarget;
   }
   state.scrollPending = offset;
   if (forceScroll || !isInitialScroll || Platform2.OS === "android") {
-    doScrollTo(ctx, { animated, horizontal, isInitialScroll, offset });
+    doScrollTo(ctx, { animated, horizontal, offset });
   } else {
     state.scroll = offset;
   }
@@ -1468,7 +1471,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;
@@ -1565,7 +1569,7 @@ function ensureInitialAnchor(ctx) {
   }
   const availableSpace = Math.max(0, scrollLength - size);
   const desiredOffset = calculateOffsetForIndex(ctx, anchor.index) - ((_a3 = anchor.viewOffset) != null ? _a3 : 0) - ((_b = anchor.viewPosition) != null ? _b : 0) * availableSpace;
-  const clampedDesiredOffset = clampScrollOffset(ctx, desiredOffset);
+  const clampedDesiredOffset = clampScrollOffset(ctx, desiredOffset, anchor);
   const delta = clampedDesiredOffset - scroll;
   if (Math.abs(delta) <= INITIAL_ANCHOR_TOLERANCE) {
     const settledTicks = ((_c = anchor.settledTicks) != null ? _c : 0) + 1;
@@ -1594,46 +1598,110 @@ 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 = [];
   const scrollTarget = scrollingTo == null ? void 0 : scrollingTo.index;
   const scrollingToViewPosition = scrollingTo == null ? void 0 : scrollingTo.viewPosition;
+  const isEndAnchoredScrollTarget = scrollTarget !== void 0 && state.props.data.length > 0 && scrollTarget >= state.props.data.length - 1 && (scrollingToViewPosition != null ? scrollingToViewPosition : 0) > 0;
   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);
@@ -1646,16 +1714,18 @@ 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);
           let diff = newPosition - prevPosition;
-          if (diff !== 0 && state.scroll + state.scrollLength > totalSize) {
+          if (diff !== 0 && isEndAnchoredScrollTarget && state.scroll + state.scrollLength > totalSize) {
             if (diff > 0) {
               diff = Math.max(0, totalSize - state.scroll - state.scrollLength);
             } else {
@@ -1663,20 +1733,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);
       }
     };
@@ -2331,26 +2410,16 @@ function scrollToIndex(ctx, { index, viewOffset = 0, animated = true, viewPositi
 // src/utils/setDidLayout.ts
 function setDidLayout(ctx) {
   const state = ctx.state;
-  const {
-    loadStartTime,
-    initialScroll,
-    props: { onLoad }
-  } = state;
+  const { initialScroll } = state;
   state.queuedInitialLayout = true;
   checkAtBottom(ctx);
-  const setIt = () => {
-    setInitialRenderState(ctx, { didLayout: true });
-    if (onLoad) {
-      onLoad({ elapsedTimeInMs: Date.now() - loadStartTime });
-    }
-  };
   if ((initialScroll == null ? void 0 : initialScroll.index) !== void 0) {
     const target = initialScroll;
     const runScroll = () => scrollToIndex(ctx, { ...target, animated: false });
     runScroll();
     requestAnimationFrame(runScroll);
   }
-  setIt();
+  setInitialRenderState(ctx, { didLayout: true });
 }
 
 // src/core/calculateItemsInView.ts
@@ -2390,7 +2459,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) {
@@ -2411,13 +2480,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) {
@@ -2442,11 +2511,11 @@ function calculateItemsInView(ctx, params = {}) {
       props: {
         alwaysRenderIndicesArr,
         alwaysRenderIndicesSet,
+        drawDistance,
         getItemType,
         itemsAreEqual,
         keyExtractor,
-        onStickyHeaderChange,
-        scrollBuffer
+        onStickyHeaderChange
       },
       scrollForNextCalculateItemsInView,
       scrollLength,
@@ -2459,6 +2528,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) {
@@ -2469,7 +2539,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;
@@ -2488,24 +2557,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);
@@ -2518,7 +2583,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;
@@ -2750,7 +2817,7 @@ function calculateItemsInView(ctx, params = {}) {
         ctx,
         stickyIndicesArr,
         scroll,
-        scrollBuffer,
+        drawDistance,
         currentStickyIdx,
         pendingRemoval,
         alwaysRenderSet
@@ -2963,10 +3030,10 @@ function doInitialAllocateContainers(ctx) {
     scrollLength,
     props: {
       data,
+      drawDistance,
       getEstimatedItemSize,
       getFixedItemSize,
       getItemType,
-      scrollBuffer,
       numColumns,
       estimatedItemSize
     }
@@ -2988,7 +3055,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);
@@ -3076,8 +3143,8 @@ function onScroll(ctx, event) {
     }
   }
   let newScroll = event.nativeEvent.contentOffset[state.props.horizontal ? "x" : "y"];
-  if (state.scrollingTo) {
-    const maxOffset = clampScrollOffset(ctx, newScroll);
+  if (state.scrollingTo && state.scrollingTo.offset >= newScroll) {
+    const maxOffset = clampScrollOffset(ctx, newScroll, state.scrollingTo);
     if (newScroll !== maxOffset && Math.abs(newScroll - maxOffset) > 1) {
       newScroll = maxOffset;
       scrollTo(ctx, {
@@ -3130,7 +3197,7 @@ var ScrollAdjustHandler = class {
         if ((scrollTarget == null ? void 0 : scrollTarget.index) !== void 0) {
           const currentOffset = calculateOffsetForIndex(this.ctx, scrollTarget.index);
           targetScroll = calculateOffsetWithOffsetPosition(this.ctx, currentOffset, scrollTarget);
-          targetScroll = clampScrollOffset(this.ctx, targetScroll);
+          targetScroll = clampScrollOffset(this.ctx, targetScroll, scrollTarget);
         } else {
           targetScroll = clampScrollOffset(this.ctx, state.scroll + pending);
         }
@@ -3149,6 +3216,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;
@@ -3232,7 +3321,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) {
@@ -3309,8 +3398,9 @@ function getWindowSize() {
 }
 var StyleSheet = reactNative.StyleSheet;
 function useStickyScrollHandler(stickyHeaderIndices, horizontal, ctx, onScroll2) {
+  const shouldUseRnAnimatedEngine = !ctx.state.props.stickyPositionComponentInternal;
   return React2.useMemo(() => {
-    if (stickyHeaderIndices == null ? void 0 : stickyHeaderIndices.length) {
+    if ((stickyHeaderIndices == null ? void 0 : stickyHeaderIndices.length) && shouldUseRnAnimatedEngine) {
       const { animatedScrollY } = ctx;
       return reactNative.Animated.event(
         [
@@ -3327,7 +3417,7 @@ function useStickyScrollHandler(stickyHeaderIndices, horizontal, ctx, onScroll2)
       );
     }
     return onScroll2;
-  }, [stickyHeaderIndices == null ? void 0 : stickyHeaderIndices.join(","), horizontal]);
+  }, [stickyHeaderIndices == null ? void 0 : stickyHeaderIndices.join(","), horizontal, shouldUseRnAnimatedEngine]);
 }
 
 // src/utils/createColumnWrapperStyle.ts
@@ -3363,7 +3453,30 @@ function createImperativeHandle(ctx) {
     }
   };
   const refScroller = state.refScroller;
+  const clearCaches = (options) => {
+    var _a3, _b;
+    const mode = (_a3 = options == null ? void 0 : options.mode) != null ? _a3 : "sizes";
+    state.sizes.clear();
+    state.sizesKnown.clear();
+    for (const key in state.averageSizes) {
+      delete state.averageSizes[key];
+    }
+    state.minIndexSizeChanged = 0;
+    state.scrollForNextCalculateItemsInView = void 0;
+    state.pendingTotalSize = void 0;
+    state.totalSize = 0;
+    set$(ctx, "totalSize", 0);
+    if (mode === "full") {
+      state.indexByKey.clear();
+      state.idCache.length = 0;
+      state.positions.clear();
+      state.columns.clear();
+      state.columnSpans.clear();
+    }
+    (_b = state.triggerCalculateItemsInView) == null ? void 0 : _b.call(state, { forceFullItemPositions: true });
+  };
   return {
+    clearCaches,
     flashScrollIndicators: () => refScroller.current.flashScrollIndicators(),
     getNativeScrollRef: () => refScroller.current,
     getScrollableNode: () => refScroller.current.getScrollableNode(),
@@ -3524,8 +3637,8 @@ function normalizeMaintainVisibleContentPosition(value) {
   if (value && typeof value === "object") {
     return {
       data: (_a3 = value.data) != null ? _a3 : false,
-      size: (_b = value.size) != null ? _b : true,
-      shouldRestorePosition: value.shouldRestorePosition
+      shouldRestorePosition: value.shouldRestorePosition,
+      size: (_b = value.size) != null ? _b : true
     };
   }
   if (value === false) {
@@ -3597,9 +3710,7 @@ function useThrottledOnScroll(originalHandler, scrollEventThrottle) {
 }
 
 // src/components/LegendList.tsx
-var DEFAULT_DRAW_DISTANCE = 250;
-var DEFAULT_ITEM_SIZE = 100;
-var LegendList = typedMemo(
+var LegendList = typedMemo2(
   // biome-ignore lint/nursery/noShadow: const function name shadowing is intentional
   typedForwardRef(function LegendList2(props, forwardedRef) {
     const { children, data: dataProp, renderItem: renderItemProp, ...restProps } = props;
@@ -3628,7 +3739,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     data: dataProp = [],
     dataVersion,
     drawDistance = 250,
-    estimatedItemSize: estimatedItemSizeProp,
+    estimatedItemSize = 100,
     estimatedListSize,
     extraData,
     getEstimatedItemSize,
@@ -3680,7 +3791,12 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     ...rest
   } = props;
   const animatedPropsInternal = props.animatedPropsInternal;
-  const { childrenMode } = rest;
+  const stickyPositionComponentInternal = props.stickyPositionComponentInternal;
+  const {
+    childrenMode,
+    stickyPositionComponentInternal: _stickyPositionComponentInternal,
+    ...restProps
+  } = rest;
   const contentContainerStyleBase = StyleSheet.flatten(contentContainerStyleProp);
   const shouldFlexGrow = alignItemsAtEnd && (horizontal ? (contentContainerStyleBase == null ? void 0 : contentContainerStyleBase.minWidth) == null : (contentContainerStyleBase == null ? void 0 : contentContainerStyleBase.minHeight) == null);
   const contentContainerStyle = {
@@ -3712,9 +3828,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);
@@ -3743,8 +3857,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,
@@ -3831,6 +3945,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     contentInset,
     data: dataProp,
     dataVersion,
+    drawDistance,
     estimatedItemSize,
     getEstimatedItemSize: useWrapIfItem(getEstimatedItemSize),
     getFixedItemSize: useWrapIfItem(getFixedItemSize),
@@ -3854,10 +3969,10 @@ 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(",")]),
+    stickyPositionComponentInternal,
     stylePaddingBottom: stylePaddingBottomState,
     stylePaddingTop: stylePaddingTopState,
     suggestEstimatedItemSize: !!suggestEstimatedItemSize
@@ -3911,7 +4026,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       } else {
         const baseOffset = initialScroll.index !== void 0 ? calculateOffsetForIndex(ctx, initialScroll.index) : 0;
         const resolvedOffset = calculateOffsetWithOffsetPosition(ctx, baseOffset, initialScroll);
-        const clampedOffset = clampScrollOffset(ctx, resolvedOffset);
+        const clampedOffset = clampScrollOffset(ctx, resolvedOffset, initialScroll);
         const updatedInitialScroll = { ...initialScroll, contentOffset: clampedOffset };
         refState.current.initialScroll = updatedInitialScroll;
         state.initialScroll = updatedInitialScroll;
@@ -4067,7 +4182,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   return /* @__PURE__ */ React2__namespace.createElement(React2__namespace.Fragment, null, /* @__PURE__ */ React2__namespace.createElement(
     ListComponent,
     {
-      ...rest,
+      ...restProps,
       alignItemsAtEnd,
       canRender,
       contentContainerStyle,
@@ -4101,12 +4216,20 @@ 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;
+// src/index.ts
+var LegendList3 = LegendList;
+if (IS_DEV) {
+  console.warn(
+    "[legend-list] Legend List 3.0 deprecates the root import (@legendapp/list) because it now supports both react and react-native. The root import is fully functional, but please switch to platform-specific imports for strict platform types:\n  - React Native: @legendapp/list/react-native\n  - React: @legendapp/list/react\nSee README for details."
+  );
+}
+
+exports.LegendList = LegendList3;
 exports.typedForwardRef = typedForwardRef;
-exports.typedMemo = typedMemo;
+exports.typedMemo = typedMemo2;
 exports.useIsLastItem = useIsLastItem;
 exports.useListScrollSize = useListScrollSize;
 exports.useRecyclingEffect = useRecyclingEffect;